@astryxdesign/core 0.2.0 → 0.3.0-canary.5f9896c

package/src/theme/expandColorScale.ts

@@ -2,7 +2,7 @@
 
 /**
  * @file expandColorScale.ts
- * @input Color scale configuration { accent, neutralStyle?, contrast? }
+ * @input Color scale configuration { accent?, neutralStyle?, contrast? }
  * @output Token overrides for derivable color tokens
  * @position Theme utility; consumed by defineTheme.ts
  *
@@ -11,11 +11,27 @@
  * derive from the accent — status colors, categorical hues, and fixed
  * tokens (on-dark/on-light) fall through to colorDefaults.
  *
+ * `accent` is optional: a neutral-only config still gets the full neutral
+ * ramp (seeded from the default accent's hue) while the accent tokens
+ * themselves fall through to colorDefaults, same as the tokens above.
+ *
+ * WCAG contrast guarantees (asserted in expandColorScale.test.ts):
+ * - Text tones are guaranteed >= 4.5:1 against their surfaces by tone
+ *   spacing alone — HCT tone is CIE L*, which fixes relative luminance
+ *   regardless of hue/chroma, so the fixed tone assignments hold for any
+ *   accent/neutralStyle (WCAG 1.4.3).
+ * - --color-border-emphasized (form-control boundaries) is tone-bumped
+ *   until it reaches >= 3:1 against the generated surface (WCAG 1.4.11).
+ * - --color-border, --color-skeleton, and --color-track are intentionally
+ *   decorative/redundant cues and are NOT held to 3:1 — see the test file
+ *   for the rationale.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/defineTheme.ts
  */
 
-import {hexToHct, tonalPalette, hexWithAlpha} from './hct';
+import {contrastRatio} from './contrast';
+import {hexToHct, hctToHex, tonalPalette, hexWithAlpha} from './hct';
 
 // =============================================================================
 // Types
@@ -31,11 +47,21 @@ import {hexToHct, tonalPalette, hexWithAlpha} from './hct';
  *
  * // With customization
  * { accent: '#B7410E', neutralStyle: 'warm', contrast: 'high' }
+ *
+ * // Neutral-only — keeps the default accent, themes the neutrals
+ * { neutralStyle: 'warm' }
  * ```
  */
 export interface ColorScaleConfig {
-  /** Seed accent color as hex (#RRGGBB). Everything derives from this. */
-  accent: string;
+  /**
+   * Seed accent color as hex (#RRGGBB). Everything derives from this.
+   *
+   * Optional. When omitted, the neutral palettes are seeded from the
+   * default accent's hue and the accent tokens (--color-accent,
+   * --color-accent-muted, --color-on-accent) are not generated — they
+   * fall through to colorDefaults.
+   */
+  accent?: string;
 
   /**
    * Neutral tone warmth. Controls how much of the seed's hue bleeds
@@ -45,7 +71,9 @@ export interface ColorScaleConfig {
   neutralStyle?: 'warm' | 'cool' | 'neutral';
 
   /**
-   * Contrast level. Affects tone assignments for text and UI elements.
+   * Contrast level. `'high'` pulls text, icons, and borders toward stronger
+   * tones (and thickens the subtle border's alpha) so structural and textual
+   * boundaries stay perceivable.
    * @default 'standard'
    */
   contrast?: 'standard' | 'high';
@@ -69,6 +97,14 @@ const NEUTRAL_VARIANT_CHROMA: Record<string, number> = {
   neutral: 6,
 };
 
+/**
+ * Hue source for accent-less configs — the light half of
+ * colorDefaults['--color-accent'] (a test guards the two against drift).
+ * Only its hue reaches the output: the accent tokens stay ungenerated, so
+ * they keep their colorDefaults values rather than this seed's derivation.
+ */
+const DEFAULT_ACCENT_SEED = '#0064E0';
+
 // =============================================================================
 // Computation
 // =============================================================================
@@ -81,6 +117,39 @@ function accentWithAlpha(alpha: number): string {
   return `color-mix(in srgb, var(--color-accent) ${alpha * 100}%, transparent)`;
 }
 
+/** WCAG 1.4.11 minimum contrast for non-text UI boundaries. */
+const NON_TEXT_MIN_CONTRAST = 3;
+
+/**
+ * Walk tone in `step` increments from `startTone` until the color reaches
+ * `minRatio` against `background`, and return the resulting hex.
+ *
+ * Used for tokens whose preferred tone is not guaranteed by tone spacing
+ * alone (e.g. --color-border-emphasized). Because HCT tone is CIE L*,
+ * each step moves luminance monotonically, so the loop always terminates —
+ * at worst at pure black/white (21:1 against anything mid-range).
+ */
+export function ensureContrastTone(
+  hue: number,
+  chroma: number,
+  startTone: number,
+  step: -1 | 1,
+  background: string,
+  minRatio: number,
+): string {
+  let tone = startTone;
+  let hex = hctToHex({hue, chroma, tone});
+  while (
+    contrastRatio(hex, background) < minRatio &&
+    tone + step >= 0 &&
+    tone + step <= 100
+  ) {
+    tone += step;
+    hex = hctToHex({hue, chroma, tone});
+  }
+  return hex;
+}
+
 /**
  * Expand a color scale config into Astryx color token overrides.
  *
@@ -89,18 +158,23 @@ function accentWithAlpha(alpha: number): string {
  * --color-on-dark/on-light) are NOT generated — they fall through
  * to colorDefaults.
  *
+ * Without an `accent`, the accent tokens join that fall-through set: the
+ * neutrals are seeded from the default accent's hue, and --color-accent,
+ * --color-accent-muted and --color-on-accent keep their colorDefaults values.
+ *
  * @example
  * ```
  * const tokens = expandColorScale({ accent: '#0064E0' });
  * // tokens['--color-accent'] === 'light-dark(#..., #...)'
+ *
+ * const neutralOnly = expandColorScale({ neutralStyle: 'warm' });
+ * // neutralOnly['--color-accent'] === undefined
  * ```
  */
-export function expandColorScale(
-  config: ColorScaleConfig,
-): ColorScaleTokens {
+export function expandColorScale(config: ColorScaleConfig): ColorScaleTokens {
   const {accent, neutralStyle = 'cool', contrast = 'standard'} = config;
 
-  const seed = hexToHct(accent);
+  const seed = hexToHct(accent ?? DEFAULT_ACCENT_SEED);
   const seedHue = seed.hue;
 
   const primaryChroma = Math.max(seed.chroma, 48);
@@ -118,15 +192,59 @@ export function expandColorScale(
   const textSecondaryLightTone = isHigh ? 20 : 30;
   const textSecondaryDarkTone = isHigh ? 80 : 70;
 
+  // Borders track contrast the same way text does: high contrast pulls the
+  // emphasized border tone toward mid-scale (stronger against both the near-
+  // white light surface and the near-black dark surface) and thickens the
+  // otherwise-decorative subtle hairline by doubling its alpha, so structural
+  // boundaries stay perceivable for users who opt into high contrast.
+  const borderSubtleAlpha = isHigh ? 0.2 : 0.1;
+
+  // Emphasized borders outline form controls (CheckboxInput, Selector), so
+  // they are non-text UI boundaries under WCAG 1.4.11 and must reach 3:1
+  // against the surface they sit on. High contrast starts at a more
+  // aggressive tone (50 vs 70/30), guaranteeing a stronger result; standard
+  // contrast starts at 70/30 and walks toward mid-scale only as far as needed.
+  const borderEmphasizedStartLight = isHigh ? 50 : 70;
+  const borderEmphasizedStartDark = isHigh ? 50 : 30;
+  const borderEmphasized = ld(
+    ensureContrastTone(
+      seedHue,
+      neutralVariantChroma,
+      borderEmphasizedStartLight,
+      -1,
+      N[99],
+      NON_TEXT_MIN_CONTRAST,
+    ),
+    ensureContrastTone(
+      seedHue,
+      neutralVariantChroma,
+      borderEmphasizedStartDark,
+      1,
+      N[10],
+      NON_TEXT_MIN_CONTRAST,
+    ),
+  );
+
   return {
-    // Core semantic
-    '--color-accent': ld(P[40], P[80]),
-    // Derived accent tokens reference --color-accent instead of baking its
-    // resolved hex, so a scoped override of the base token re-accents the
-    // whole subtree at runtime. --color-on-accent stays baked: it is a
-    // contrast computation against the accent, which CSS cannot express.
-    '--color-accent-muted': ld(accentWithAlpha(0.2), accentWithAlpha(0.25)),
-    '--color-on-accent': ld(P[100], P[20]),
+    // Core semantic — only with a seed accent. Without one these fall through
+    // to colorDefaults, whose --color-accent is NOT what the default seed
+    // derives: defaulting the seed instead of omitting the tokens would
+    // recolor every neutral-only theme. Nullish and not truthy, matching the
+    // seed above, so a supplied-but-malformed accent keeps its old behavior.
+    ...(accent != null
+      ? {
+          '--color-accent': ld(P[40], P[80]),
+          // Derived accent tokens reference --color-accent instead of baking its
+          // resolved hex, so a scoped override of the base token re-accents the
+          // whole subtree at runtime. --color-on-accent stays baked: it is a
+          // contrast computation against the accent, which CSS cannot express.
+          '--color-accent-muted': ld(
+            accentWithAlpha(0.2),
+            accentWithAlpha(0.25),
+          ),
+          '--color-on-accent': ld(P[100], P[20]),
+        }
+      : null),
     '--color-neutral': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[90], 0.2)),
     '--color-background-surface': ld(N[99], N[10]),
     '--color-background-body': ld(N[95], N[5]),
@@ -168,8 +286,14 @@ export function expandColorScale(
     '--color-background-inverted': ld(N[10], N[99]),
 
     // Border
-    '--color-border': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[95], 0.1)),
-    '--color-border-emphasized': ld(NV[70], NV[30]),
+    // Border
+    // Decorative hairline — not a WCAG 1.4.11 boundary. High contrast
+    // doubles the alpha so structural boundaries stay perceivable.
+    '--color-border': ld(
+      hexWithAlpha(N[10], borderSubtleAlpha),
+      hexWithAlpha(N[95], borderSubtleAlpha),
+    ),
+    '--color-border-emphasized': borderEmphasized,
 
     // Effects
     '--color-skeleton': ld(NV[70], NV[30]),

package/src/theme/generateThemeRules.ts

@@ -708,18 +708,3 @@ export function generateThemeCSS(theme: DefinedTheme): ThemeCSSOutput {
 
   return {prose: proseCss, component: componentCss};
 }
-
-/**
- * Generate the full CSS string for a theme as a single string.
- * @deprecated Use generateThemeCSS() which returns { prose, component } for proper layering.
- * This flat version is kept for backwards compatibility with tests and simple cases.
- */
-export function generateThemeCSSFlat(theme: DefinedTheme): string {
-  const rules = generateThemeRules(theme);
-  if (rules.length === 0) {
-    return '';
-  }
-  const scopeSelector = themeScopeStart(theme.name);
-  const inner = rules.join('\n\n');
-  return `@scope (${scopeSelector}) to (${THEME_SCOPE_TO}) {\n${inner}\n}`;
-}

package/src/theme/index.ts

@@ -21,7 +21,6 @@ export type {MediaThemeProps} from './MediaTheme';
 export {
   defineTheme,
   generateThemeCSS,
-  generateThemeCSSFlat,
   generateOnMediaCSS,
   generateThemeRules,
   generateThemeRulesSplit,
@@ -30,6 +29,12 @@ export {
   isDefinedTheme,
   tokenDefaults,
 } from './defineTheme';
+export {
+  registerTheme,
+  getRegisteredTheme,
+  getRegisteredThemes,
+  resetThemes,
+} from './themeRegistry';
 export type {
   DefineThemeInput,
   DefinedTheme,
@@ -71,19 +76,13 @@ export {expandTypeScale, generateTypeScaleComponents} from './expandTypeScale';
 export type {TypeScaleConfig, TypeScaleTokens} from './expandTypeScale';
 
 export {expandRadiusScale} from './expandRadiusScale';
-export type {
-  RadiusScaleConfig,
-  RadiusScaleTokens,
-} from './expandRadiusScale';
+export type {RadiusScaleConfig, RadiusScaleTokens} from './expandRadiusScale';
 
 export {expandColorScale} from './expandColorScale';
 export type {ColorScaleConfig, ColorScaleTokens} from './expandColorScale';
 
 export {expandMotionScale} from './expandMotionScale';
-export type {
-  MotionScaleConfig,
-  MotionScaleTokens,
-} from './expandMotionScale';
+export type {MotionScaleConfig, MotionScaleTokens} from './expandMotionScale';
 
 // Export token defaults and vars for use in custom components and themes
 export {
@@ -95,7 +94,6 @@ export {
   shadowDefaults,
   durationDefaults,
   easeDefaults,
-  transitionDefaults,
   typographyDefaults,
   textSizeDefaults,
   fontWeightDefaults,
@@ -108,7 +106,6 @@ export {
   shadowVars,
   durationVars,
   easeVars,
-  transitionVars,
   typographyVars,
   textSizeVars,
   fontWeightVars,
@@ -125,14 +122,13 @@ export type {
   ShadowVarName,
   DurationVarName,
   EaseVarName,
-  TransitionVarName,
   TypographyVarName,
   TextSizeVarName,
   FontWeightVarName,
   TypeScaleVarName,
 } from './tokens.stylex';
 
-export {useTheme, ThemeContext} from './useTheme';
+export {useTheme, useThemeName, ThemeContext} from './useTheme';
 export type {UseThemeReturn, ThemeContextValue} from './useTheme';
 export {
   resolveThemeToken,
@@ -146,6 +142,7 @@ export type {
   ResolvedThemeMode,
 } from './tokens';
 
+export type {TextColorMap} from '../Text';
 export type {
   ThemeMode,
   HeadingTag,
@@ -155,6 +152,7 @@ export type {
   TextSize,
   TextWeight,
   TextColor,
+  BuiltinTextColor,
   TypographyConfig,
   TypographyRole,
   FontWeight,

package/src/theme/themeRegistry.test.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect, beforeEach} from 'vitest';
+import {defineTheme} from './defineTheme';
+import {
+  getRegisteredTheme,
+  getRegisteredThemes,
+  registerTheme,
+  resetThemes,
+} from './themeRegistry';
+
+describe('themeRegistry', () => {
+  beforeEach(() => {
+    resetThemes();
+  });
+
+  it('registers and resolves themes by name', () => {
+    const theme = defineTheme({
+      name: 'brand',
+      tokens: {'--color-accent': '#123456'},
+    });
+
+    expect(getRegisteredTheme('brand')).toBe(theme);
+  });
+
+  it('returns null for empty or unknown names', () => {
+    expect(getRegisteredTheme(null)).toBeNull();
+    expect(getRegisteredTheme('')).toBeNull();
+    expect(getRegisteredTheme('missing')).toBeNull();
+  });
+
+  it('replaces an existing theme with the same name', () => {
+    const first = defineTheme({name: 'brand'});
+    const second = defineTheme({
+      name: 'brand',
+      tokens: {'--color-accent': '#654321'},
+    });
+
+    expect(getRegisteredTheme('brand')).not.toBe(first);
+    expect(getRegisteredTheme('brand')).toBe(second);
+  });
+
+  it('returns a defensive snapshot of registered themes', () => {
+    const theme = defineTheme({name: 'brand'});
+    const snapshot = getRegisteredThemes();
+
+    expect(snapshot.get('brand')).toBe(theme);
+    expect(snapshot).not.toBe(getRegisteredThemes());
+  });
+
+  it('allows explicit registration of built theme objects', () => {
+    const theme = defineTheme({name: 'built'});
+    resetThemes();
+
+    registerTheme(theme);
+
+    expect(getRegisteredTheme('built')).toBe(theme);
+  });
+});

package/src/theme/themeRegistry.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file themeRegistry.ts
+ * @input DefinedTheme objects from defineTheme() or built theme packages
+ * @output Exports registerTheme, getRegisteredTheme, getRegisteredThemes, resetThemes
+ * @position Server-safe theme registry for theme-name-based SSR resolution
+ *
+ * This module has NO 'use client' directive. It is importable from SSR/RSC and
+ * lets code resolve theme data by stable theme name without React context.
+ */
+
+import type {DefinedTheme} from './defineTheme';
+
+const themeRegistry = new Map<string, DefinedTheme>();
+
+/**
+ * Register a defined theme under its `name`.
+ *
+ * Registration is idempotent and replaces any previous theme with the same
+ * name. Call from app initialization, theme packages, or <Theme> to make the
+ * theme available to SSR-safe resolvers by name.
+ */
+export function registerTheme(theme: DefinedTheme): void {
+  themeRegistry.set(theme.name, theme);
+}
+
+/**
+ * Return a previously registered theme by name.
+ */
+export function getRegisteredTheme(
+  name: string | null | undefined,
+): DefinedTheme | null {
+  if (name == null || name === '') {
+    return null;
+  }
+  return themeRegistry.get(name) ?? null;
+}
+
+/**
+ * Return all registered themes keyed by theme name.
+ */
+export function getRegisteredThemes(): ReadonlyMap<string, DefinedTheme> {
+  return new Map(themeRegistry);
+}
+
+/**
+ * Reset the theme registry. For testing only.
+ * @internal
+ */
+export function resetThemes(): void {
+  themeRegistry.clear();
+}

package/src/theme/tokens.stylex.ts

@@ -272,23 +272,6 @@ export const easeDefaults = {
 export const easeVars = stylex.defineVars(easeDefaults);
 
 export type EaseVarName = keyof typeof easeDefaults;
-
-// =============================================================================
-// Motion Tokens — Deprecated (transition shorthand)
-// =============================================================================
-
-/** @deprecated Use durationVars + easeVars instead */
-export const transitionDefaults = {
-  '--transition-fast': '0.15s ease',
-  '--transition-normal': '0.2s ease',
-} as const;
-
-/** @deprecated Use durationVars + easeVars instead */
-export const transitionRaw = transitionDefaults;
-
-/** @deprecated Use durationVars + easeVars instead */
-export const transitionVars = stylex.defineVars(transitionDefaults);
-
 // =============================================================================
 // Typography Tokens - Font Families
 // =============================================================================
@@ -347,8 +330,6 @@ export type SpacingVarName = keyof typeof spacingDefaults;
 export type SizeVarName = keyof typeof sizeDefaults;
 export type RadiusVarName = keyof typeof radiusDefaults;
 export type ShadowVarName = keyof typeof shadowDefaults;
-/** @deprecated Use DurationVarName | EaseVarName instead */
-export type TransitionVarName = keyof typeof transitionDefaults;
 export type TypographyVarName = keyof typeof typographyDefaults;
 export type TextSizeVarName = keyof typeof textSizeDefaults;
 export type FontWeightVarName = keyof typeof fontWeightDefaults;

package/src/theme/types.ts

@@ -15,11 +15,7 @@
  * Raw CSS values (e.g. '800') are accepted as an escape hatch.
  */
 export type FontWeight =
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | (string & {});
+  'normal' | 'medium' | 'semibold' | 'bold' | (string & {});
 
 /**
  * A typography role declaration (body, heading, or code).
@@ -152,18 +148,23 @@ export type TextSize =
 /**
  * Font weight variants for Text/Heading
  */
+import type {TextColorMap} from '../Text';
+
 export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 
 /**
- * Text color variants for Text/Heading
+ * Built-in text color variants for Text/Heading. The concrete keys that ship
+ * with the design system, independent of theme augmentation — used where a
+ * value must be one of the real StyleX color styles (see `resolveStyleColor`).
  */
-export type TextColor =
-  | 'primary'
-  | 'secondary'
-  | 'disabled'
-  | 'placeholder'
-  | 'accent'
-  | 'inherit';
+export type BuiltinTextColor =
+  'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit';
+
+/**
+ * Text color variants for Text/Heading. Extensible via module augmentation of
+ * `TextColorMap`.
+ */
+export type TextColor = keyof TextColorMap;
 
 /**
  * Display mode for Text/Heading

package/src/theme/useTheme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useTheme',
   displayName: 'useTheme',
@@ -87,7 +87,7 @@ export const docs = {
   importPath: '@astryxdesign/core/theme',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Programmatic access to theme tokens for SVG/canvas/charts needing JS values instead of CSS vars.',

package/src/theme/useTheme.test.tsx

@@ -5,6 +5,7 @@ import {render, renderHook, act, waitFor} from '@testing-library/react';
 import React from 'react';
 import {Theme} from './Theme';
 import {defineTheme} from './defineTheme';
+import {resetThemes} from './themeRegistry';
 import {useTheme} from './useTheme';
 import {resolveThemeTokens} from './tokens';
 
@@ -152,6 +153,8 @@ describe('useTheme', () => {
 // straight to OS preference (see Theme.tsx's useRootThemeSync).
 describe('useTheme mode resolution without a ThemeContext ancestor', () => {
   afterEach(async () => {
+    resetThemes();
+    document.documentElement.removeAttribute('data-astryx-theme');
     // The hook from each `it` below is still mounted and subscribed to the
     // shared MutationObserver when this runs (RTL's own cleanup — which
     // unmounts it — is registered after this file's afterEach), so removing
@@ -184,6 +187,46 @@ describe('useTheme mode resolution without a ThemeContext ancestor', () => {
 
     await waitFor(() => expect(result.current.mode).toBe('dark'));
   });
+
+  it('resolves registered theme tokens from <html data-astryx-theme> when set', () => {
+    defineTheme({
+      name: 'root-brand',
+      tokens: {'--color-accent': ['#010203', '#AABBCC']},
+    });
+    document.documentElement.setAttribute('data-astryx-theme', 'root-brand');
+    document.documentElement.setAttribute('data-theme', 'dark');
+
+    const {result} = renderHook(() => useTheme());
+
+    expect(result.current.name).toBe('root-brand');
+    expect(result.current.token('--color-accent')).toBe('#AABBCC');
+  });
+
+  it('stays live when <html data-astryx-theme> changes after mount', async () => {
+    defineTheme({
+      name: 'first-brand',
+      tokens: {'--color-accent': '#111111'},
+    });
+    defineTheme({
+      name: 'second-brand',
+      tokens: {'--color-accent': '#222222'},
+    });
+    document.documentElement.setAttribute('data-astryx-theme', 'first-brand');
+
+    const {result} = renderHook(() => useTheme());
+    expect(result.current.name).toBe('first-brand');
+    expect(result.current.token('--color-accent')).toBe('#111111');
+
+    act(() => {
+      document.documentElement.setAttribute(
+        'data-astryx-theme',
+        'second-brand',
+      );
+    });
+
+    await waitFor(() => expect(result.current.name).toBe('second-brand'));
+    expect(result.current.token('--color-accent')).toBe('#222222');
+  });
 });
 
 // Covers the singleton MutationObserver + no-op gating in useRootThemeModeAttr:
@@ -193,7 +236,9 @@ describe('useTheme mode resolution without a ThemeContext ancestor', () => {
 // zero as they unmount.
 describe('useTheme root-attribute observer lifecycle', () => {
   afterEach(() => {
+    resetThemes();
     document.documentElement.removeAttribute('data-theme');
+    document.documentElement.removeAttribute('data-astryx-theme');
     // vi.stubGlobal'd MutationObserver stubs below are torn down here even if
     // a test fails partway through, instead of relying on a manual restore
     // line at the end of each test that a mid-test throw would skip.
@@ -237,13 +282,13 @@ describe('useTheme root-attribute observer lifecycle', () => {
     const first = renderHook(() => useTheme());
     const second = renderHook(() => useTheme());
 
-    expect(ObserverSpy).toHaveBeenCalledTimes(1);
-    expect(observe).toHaveBeenCalledTimes(1);
+    expect(ObserverSpy).toHaveBeenCalledTimes(2);
+    expect(observe).toHaveBeenCalledTimes(2);
 
     first.unmount();
     expect(disconnect).not.toHaveBeenCalled();
 
     second.unmount();
-    expect(disconnect).toHaveBeenCalledTimes(1);
+    expect(disconnect).toHaveBeenCalledTimes(2);
   });
 });