@edgeandnode/eds-react 1.0.0 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@edgeandnode/eds-react",
-  "version": "1.0.0",
-  "description": "React components for The Edge Design System",
+  "version": "1.0.2",
+  "description": "React components for the Edge Design System",
   "author": "Edge & Node and contributors",
   "license": "MIT",
   "repository": {
@@ -35,8 +35,9 @@
     "src",
     "!src/**/*.test.*",
     "!src/**/*.stories.*",
+    "!src/**/__snapshots__",
+    "!styles/tailwind.storybook.css",
     "skill",
-    "!skill/.benchmark",
     "scripts/update-skill.cjs"
   ],
   "peerDependencies": {
@@ -48,14 +49,14 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@base-ui/utils": "^0.4.0",
-    "@edgeandnode/eds-css": "1.0.0",
-    "@edgeandnode/eds-icons": "1.0.0",
-    "@edgeandnode/eds-utils": "1.0.0",
+    "@edgeandnode/eds-css": "1.0.2",
+    "@edgeandnode/eds-icons": "1.0.2",
+    "@edgeandnode/eds-utils": "1.0.2",
     "@react-aria/utils": "^3.34.1",
     "@react-hookz/web": "^26.1.0",
     "@ver0/deep-equal": "^2.0.1",
     "escape-string-regexp": "^5.0.0",
-    "motion": "^13.4.0",
+    "motion": "^13.4.5",
     "react-aria": "^3.52.1",
     "react-keyed-flatten-children": "^5.1.3",
     "react-markdown": "^10.1.0",
@@ -77,7 +78,7 @@
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.6.2",
+    "@types/node": "^26.6.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/react-is": "^19.3.0",

package/scripts/update-skill.cjs

@@ -14,6 +14,7 @@ const {
   mkdirSync,
   copyFileSync,
   unlinkSync,
+  rmSync,
   statSync,
 } = require('fs')
 const { join, dirname, relative } = require('path')
@@ -87,14 +88,11 @@ function compareSemver(a, b) {
   return 0
 }
 
-/**
- * Recursively copy a directory, overwriting existing files. Only copies files that are included in
- * the published package (skips dotdirs).
- */
+/** Recursively copy a directory, overwriting existing files. */
 function copyDir(src, dest) {
   mkdirSync(dest, { recursive: true })
   for (const entry of readdirSync(src, { withFileTypes: true })) {
-    // Skip dotdirs (e.g. .benchmark) — they're not shipped
+    // Skip dotfiles and dotdirs (e.g. `.DS_Store` when the package is linked from a workspace)
     if (entry.name.startsWith('.')) continue
 
     const srcPath = join(src, entry.name)
@@ -145,6 +143,21 @@ for (const targetDir of foundDirs) {
   // If no version field, this may be a custom skill named "eds" — skip silently
   if (!installedVersion) continue
 
+  /**
+   * The skill benchmark used to live in `skill/.benchmark`, so `npx skills add` (which copies the
+   * whole skill folder from GitHub) installed it too. It now lives outside the skill folder, so
+   * remove any stale copy. This runs even when the skill is up to date, so that a removal that
+   * failed (e.g. because a file was locked) is retried on the next install instead of failing it.
+   */
+  const benchmarkDir = join(targetDir, '.benchmark')
+  try {
+    rmSync(benchmarkDir, { recursive: true, force: true })
+  } catch (error) {
+    console.warn(
+      `Couldn't remove the stale EDS skill benchmark at ${relative(initCwd, benchmarkDir)}: ${error.message}`,
+    )
+  }
+
   // If installed version is >= package version, skip (prevents downgrades in monorepos)
   if (compareSemver(installedVersion, packageVersion) >= 0) {
     console.log(`EDS skill is up to date (v${installedVersion}) at ${relative(initCwd, targetDir)}`)

package/skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: eds
-version: 1.0.0
+version: 1.0.2
 description: The Edge Design System (EDS) is for building user interfaces for Edge & Node products. Use this skill when designing, implementing, reviewing, or polishing Edge & Node product UIs, when using `@edgeandnode/eds-react`, or when EDS is mentioned. Covers component selection, design patterns, tokens, and best practices – not just APIs. APIs are fully typed in the npm package.
 allowed-tools:
   - mcp__storybook__get-changed-stories
@@ -28,7 +28,7 @@ EDS is the design system for Edge & Node products. This skill teaches you how to
   "mcpServers": {
     "storybook": {
       "type": "http",
-      "url": "https://a16faa3--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp"
+      "url": "https://e4b81a8--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp"
     }
   }
 }
@@ -43,7 +43,7 @@ Add this to the project's `.mcp.json` file (create it if it doesn't exist). For
 ```json
 {
   "dependencies": {
-    "@edgeandnode/eds-react": "^1.0.0",
+    "@edgeandnode/eds-react": "^1.0.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -67,6 +67,8 @@ Add this to the project's `.mcp.json` file (create it if it doesn't exist). For
 
 **Important:** `@edgeandnode/eds-css`, which `@edgeandnode/eds-react` depends on, disables Tailwind's default content scanning as an optimization, so you must explicitly [register your source paths with `@source` directives](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources). Make sure to include all paths where Tailwind classes are used.
 
+**Browser targets:** EDS's color tokens rely on native `light-dark()`, so the app must target Chrome 123, Safari 17.5, and Firefox 120 or newer. Otherwise, build tools transpile it (e.g. Lightning CSS, which Vite and Next.js use) and components inside `<Dark>`/`<Light>` get the page's colors (`EDSProvider` warns in the console; with Vite, only in production builds). In Next.js, add `"browserslist": ["chrome >= 123", "edge >= 123", "firefox >= 120", "safari >= 17.5", "ios_saf >= 17.5"]` to `package.json`; in Vite, set `build.target: ['chrome123', 'edge123', 'firefox120', 'safari17.5', 'ios17.5']` (it also covers CSS, and unlike `build.cssTarget`, a Vite-based Storybook picks it up).
+
 ### App Root
 
 ```tsx
@@ -80,7 +82,7 @@ function App() {
 }
 ```
 
-**Only one `EDSProvider` per app** — rendering more than one will throw an error. To apply different themes to parts of the UI, use the `eds-dark` / `eds-light` / `eds-system` classes instead (see "Theme Classes" in [tokens.md](references/tokens.md)).
+**Only one `EDSProvider` per app** — rendering more than one will throw an error. To render part of the UI in a different theme, wrap it in `<Dark>` or `<Light>` instead (e.g. `<Dark as="section">`).
 
 ### Theming
 
@@ -89,12 +91,12 @@ function App() {
 To read or change the theme from anywhere in the app, use the `useEDS()` hook:
 
 ```tsx
-import { useEDS } from '@edgeandnode/eds-react'
+import { useEDS } from '@edgeandnode/eds-react/hooks'
 
 const { theme, activeTheme, setTheme } = useEDS()
 ```
 
-`theme` is `'dark' | 'light' | 'system'`. `activeTheme` resolves `'system'` to `'dark'` or `'light'` based on the user's OS preference. `setTheme(theme)` changes it (use `<ThemeSwitcher>` for the UI).
+`theme` is `'dark' | 'light' | 'system'`. `activeTheme` resolves `'system'` to `'dark'` or `'light'` based on the user's OS preference. `setTheme(theme)` changes it (use `<ThemeSwitcher>` for the UI). `localTheme` is the theme of the nearest `<Dark>` or `<Light>` ancestor, or `undefined` if there's none (including inside a `Modal`, which always uses the page's theme) — use `localTheme ?? activeTheme` when rendering something that depends on the theme in JavaScript. `localThemeClass` is that ancestor's class (or `undefined` if there's none) — add it to content you render outside of that ancestor in the DOM (e.g. with `createPortal`) so it keeps its theme.
 
 ### Router Integration (Next.js)
 
@@ -165,7 +167,7 @@ import { EDSProvider } from '@edgeandnode/eds-react'
 
 2. **Tailwind defaults don't exist.** Standard classes like `text-sm`, `rounded-md`, `text-gray-500` do NOT work. Use EDS tokens (`text-14`, `rounded-8`, `text-space-500`). Also `border-divider` does NOT exist; use `border-muted` or `border-subtle`.
 
-3. **Never use primitive color tokens directly.** Always use semantic tokens (e.g. `bg-canvas` instead of `bg-space-1800`) to ensure UIs adapt automatically to light/dark mode. Tailwind maps custom property prefixes to utilities: `--background-color-*` → `bg-*`, `--text-color-*` → `text-*`, `--border-color-*` → `border-*`. These prefixes aren't officially documented by Tailwind, but [they work](https://github.com/tailwindlabs/tailwindcss/discussions/19020#discussioncomment-14528253) and EDS semantic tokens rely on them.
+3. **Never use primitive color tokens directly.** Always use semantic tokens (e.g. `bg-canvas` instead of `bg-space-900`) to ensure UIs adapt automatically to light/dark mode. Tailwind maps custom property prefixes to utilities: `--background-color-*` → `bg-*`, `--text-color-*` → `text-*`, `--border-color-*` → `border-*`. These prefixes aren't officially documented by Tailwind, but [they work](https://github.com/tailwindlabs/tailwindcss/discussions/19020#discussioncomment-14528253) and EDS semantic tokens rely on them.
 
 4. **Avoid opacity, use color tokens.** Don't default to `opacity-*` classes. Use semantic color tokens (e.g. `text-muted`, `text-subtle`, `bg-subtle`) which have appropriate transparency built in. Opacity is a last resort.
 
@@ -212,7 +214,7 @@ import { EDSProvider } from '@edgeandnode/eds-react'
 </Button>
 ```
 
-15. **Pass icons as components, not elements, in addon props.** Use `addonBefore={PlayIcon}` not `addonBefore={<PlayIcon alt="" />}`. The element form (`<PlayIcon alt="..." />`) is only needed when passing a non-empty `alt` or a `variant`, or when the component consuming the addon is a React Server Component (RSCs can't receive functions as props — use `addonBefore={<PlayIcon alt="" />}`). Addons have a default size tied to the parent component — don't set `size` on them.
+15. **Pass icons as components, not elements, in addon props.** Use `addonBefore={PlayIcon}` not `addonBefore={<PlayIcon alt="" />}`. The element form (`<PlayIcon alt="..." />`) is only needed when passing a non-empty `alt` or a `variant`, or when passing it from a server component (server components can't pass functions to client components — use `addonBefore={<PlayIcon alt="" />}`). Addons have a default size tied to the parent component — don't set `size` on them.
 
 16. **EDS icons don't shrink.** Icons from `@edgeandnode/eds-react/icons` have `shrink-0` built in. Don't add it manually — it's redundant. However, if you wrap an icon in another element (e.g. a `div`), that wrapper may still need `shrink-0` if it's a child of a `flex` container.
 
@@ -401,6 +403,9 @@ Login buttons are typically `secondary`, not `primary`. Sign-up or critical CTAs
 - **Avoid `leading-*` and `tracking-*` classes.** Each font size has appropriate line height and letter spacing defaults. Overriding them breaks the typographic rhythm.
 - **`text-caption` is for small annotations, not section headings.** Use it for labels like "STATUS", "CATEGORY", "OVERVIEW" in small text. For section headings, use regular `text-20 font-medium` or `text-18 font-medium`.
 - **`text-10` is very small.** Use it sparingly, mostly paired with `text-caption`. For labels and small text, prefer `text-12`.
+- **`font-sans` (Inter) is the default and inherits.** Never set it explicitly.
+- **`font-serif` (Newsreader) is opt-in.** Use it for editorial and marketing headings. Don't use it in product UI unless the user asks for it.
+- **`font-mono` is the system monospace font on purpose.** Don't replace it with a web font. `CodeBlock` and `CodeInline` already apply it.
 
 ### Anti-Patterns
 
@@ -520,6 +525,7 @@ Memorize this list before any UI work to avoid reimplementing existing component
 | `CodeInline`                   | Inline code for variables, function names, etc.                    |
 | `CopyButton`                   | Copy to clipboard. Extends `Button`.                               |
 | `CurrencyInput`                | Crypto amounts. Use with `useCurrencyInput` hook.                  |
+| `Dark` / `Light`               | Renders part of the page in the dark or light theme.               |
 | `DescriptionList`              | Key-value pairs, metadata. Underused.                              |
 | `Divider`                      | Visual separation. Horizontal or vertical.                         |
 | `Icon`                         | Wraps icons. `src` and `alt` required.                             |
@@ -661,7 +667,7 @@ Some components expand to fill available width by default: `Card`, `CodeBlock`,
 
 - **Address:** Handles truncation, ENS/friendly names (via `children`), copy (`'auto'` by default — shows on hover/focus). **Note:** `Address` renders its own `Avatar` using `createIdenticon(address)` — don't add a separate `Avatar` next to it or you'll get duplicate avatars.
 - **Button & ButtonGroup:** Set `size` on the group, not nested buttons. Can mix `tertiary` and `secondary`. `orientation="vertical"` for modals/panes. `fullWidth` makes buttons equal width; `className="w-full"` makes them grow proportionally. Danger takes over primary's visual role. **Sizing:** Product UIs should default to `size="small"` for most buttons; use medium (default) only for important actions. `size="large"` is for marketing pages only.
-- **Breadcrumbs:** Structure: `Product Name > Section > Current Page`. **Quirk:** `current` defaults to `true` when no `href` — always pass `current` explicitly.
+- **Breadcrumbs:** Structure: `Product Name > Section > Current Page`. The last item defaults to `current`, so only set `current` to override that.
 - **Chip.Group:** Requires `aria-label`.
 - **DescriptionList:** Long values truncate with gradient fade, scroll on mobile.
 - **Input:** For number inputs, use the `useNumberInput` hook (or `useCurrencyInput` for currency amounts) — it handles parsing, formatting, and min/max/required validation, and returns `props` to spread on `<Input>` (or `<CurrencyInput>`).
@@ -686,6 +692,7 @@ Some components carry no built-in visual styles — only behavior, semantics, or
 - **`Checkbox.Area` / `Radio.Area` / `Switch.Area`** — clickable label wrappers for card-style checkable patterns; style them as `Card`s, rows, tiles, whatever the design calls for. See the "Checkable Cards" section in [patterns.md](references/patterns.md).
 - **`Radio.Group`** — semantic wrapper around a group of `<Radio>`s. Apply your own layout (`flex`, `gap`, etc.).
 - **`Pane`** — responsive sidebar container. Provides positioning behavior but no visual styling.
+- **`Dark` / `Light`** — render their element (`as`, `div` by default) in the dark or light theme. They only set the color scheme and default text color, so style them as the section needs (e.g. `bg-default p-8`). `dark:`/`light:` variants on the element itself still follow the outer theme (style queries only look at ancestors), so use them on its descendants.
 - **`ButtonOrLink`** (from `@edgeandnode/eds-react/base`) — semantic `<button>`/`<a>` wrapper with no visual styling. The other base components (`Transition`, `ExperimentalTransition`, `Presence`, `Render`, `Portal`) have transition or structural styles you shouldn't override.
 
 ### Base components
@@ -721,7 +728,7 @@ import { formatBigInt, parseBigInt, numberToBigInt, bigIntToNumber } from '@edge
 ```
 
 - `cn` — concatenate class names, filtering out falsy values (like `clsx`)
-- `useEDS` — read and change the current theme (`{ theme, activeTheme, setTheme, dirProps }`); see "Theming"
+- `useEDS` — read and change the current theme (`{ theme, setTheme, activeTheme, localTheme, localThemeClass, dirProps }`); see "Theming"
 - `useControlled` — manage controlled/uncontrolled state
 - `useNumberInput` — numeric input validation and formatting (use with `Input`)
 - `useCurrencyInput` — currency input validation (use with `CurrencyInput`)

package/skill/references/tokens.md

@@ -31,11 +31,13 @@ Always use semantic tokens over raw color scales. They adapt to light/dark mode
 | `bg-default`   | Active/selected state        |
 | `bg-elevated`  | Hover states                 |
 | `bg-strong`    | Strongly emphasized          |
-| `bg-brand-*`   | Brand purple                 |
+| `bg-brand-*`   | Brand blue                   |
 | `bg-inverse-*` | Inverted backgrounds         |
 | `bg-code`      | Inline code background       |
 | `bg-backdrop`  | Modal/overlay backdrop       |
 
+The neutral backgrounds step away from `bg-canvas` in order: `canvas` → `subtle` → `muted` → `default` → `elevated` → `strong`. Each step is lighter than the previous one in dark mode and darker in light mode.
+
 `bg-brand-*` scale: `subtlest`, `subtler`, `subtle`, `muted`, `default`, `elevated`, `strong`.
 `bg-inverse-*` scale: `canvas`, `subtle`, `muted`, `default`, `elevated`, `strong`.
 
@@ -43,7 +45,7 @@ Always use semantic tokens over raw color scales. They adapt to light/dark mode
 
 | Utility           | Use For                                    |
 | ----------------- | ------------------------------------------ |
-| `border-focus`    | Focus rings (brand purple)                 |
+| `border-focus`    | Focus rings (brand blue)                   |
 | `border-subtle`   | Faint borders                              |
 | `border-muted`    | Standard borders                           |
 | `border-default`  | Emphasized borders                         |
@@ -70,22 +72,32 @@ Example: `bg-status-success-subtle`, `text-status-error-default`, `border-status
 
 Use sparingly — only for custom illustrations, brand treatments, or cases where semantic tokens don't apply. **These do NOT adapt to light/dark mode.**
 
-| Scale       | Purpose                  | Range    |
-| ----------- | ------------------------ | -------- |
-| `space`     | Dark grays               | 100–1800 |
-| `foam`      | Light grays              | 100–1000 |
-| `brand`     | Purple (primary brand)   | 100–1200 |
-| `galactic`  | Blue (info, links)       | 100–1100 |
-| `starfield` | Green (success)          | 100–1100 |
-| `solar`     | Yellow/orange (warning)  | 100–1100 |
-| `sonja`     | Red/pink (error, danger) | 100–1100 |
+| Scale       | Purpose                  | Range   |
+| ----------- | ------------------------ | ------- |
+| `space`     | Dark grays               | 100–900 |
+| `foam`      | Light grays              | 100–900 |
+| `brand`     | Blue (primary brand)     | 100–900 |
+| `galactic`  | Blue (info, links)       | 100–900 |
+| `starfield` | Green (success)          | 100–900 |
+| `solar`     | Yellow/orange (warning)  | 100–900 |
+| `sonja`     | Red/pink (error, danger) | 100–900 |
+
+Within each scale, `100` is the lightest step and `900` the darkest. For the colored scales, `500` is the base color.
 
 ```tsx
-<div className="bg-brand-500">Brand purple (fixed, won't adapt to theme)</div>
+<div className="bg-brand-500">Brand blue (fixed, won't adapt to theme)</div>
 ```
 
 ## Typography
 
+### Font Families
+
+| Utility      | Font             | Use For                                                    |
+| ------------ | ---------------- | ---------------------------------------------------------- |
+| `font-sans`  | Inter            | **Default** — everything, never needs to be set (inherits) |
+| `font-serif` | Newsreader       | Opt-in: editorial and marketing headings, not product UI   |
+| `font-mono`  | System monospace | Code (already applied by `CodeBlock` and `CodeInline`)     |
+
 ### Font Sizes
 
 Standard Tailwind sizes (`text-sm`, `text-lg`, `text-base`) **do not exist**. Use numeric pixel values:
@@ -154,15 +166,9 @@ Standard Tailwind spacing works (4px grid). EDS does **not** override spacing to
 
 When in doubt, add more space. Dense UIs look cheap.
 
-## Theme Classes
-
-| Class        | Effect                                                     |
-| ------------ | ---------------------------------------------------------- |
-| `eds-dark`   | Forces dark color scheme for this element and descendants  |
-| `eds-light`  | Forces light color scheme for this element and descendants |
-| `eds-system` | Follows the OS color scheme preference                     |
+## Theme Sections
 
-These can be applied to any element to create nested theme regions. The `EDSProvider` `theme` prop sets the root theme; these classes override it locally.
+The `EDSProvider` `theme` prop sets the root theme. To render part of the UI in another theme, wrap it in `<Dark>` or `<Light>` (e.g. `<Dark as="section">`). They can be nested, and components inside them can read the section's theme with `useEDS().localTheme`. Menus, selects, and tooltips use the theme of the section they're in, while modals use the page's theme.
 
 ## Breakpoints
 

package/src/EDSContext.ts

@@ -6,6 +6,12 @@ import type { DirectionProvider } from '@base-ui/react/direction-provider'
 export type Theme = 'dark' | 'light' | 'system'
 export type ResolvedTheme = Exclude<Theme, 'system'>
 
+export const THEME_CLASSES: Record<Theme, string> = {
+  dark: 'eds-dark',
+  light: 'eds-light',
+  system: 'eds-system',
+}
+
 export type ThemePersistence =
   | 'localStorage'
   | 'cookie'
@@ -23,3 +29,6 @@ export interface EDSContextValue {
 }
 
 export const EDSContext = createContext<EDSContextValue | null>(null)
+
+/** The theme of the nearest `Dark` or `Light` ancestor, if any. */
+export const LocalThemeContext = createContext<ResolvedTheme | undefined>(undefined)

package/src/EDSProvider.tsx

@@ -1,13 +1,27 @@
 'use client'
 
-import { useCallback, useLayoutEffect, useMemo, useRef, useState, type ComponentProps } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+} from 'react'
 import { mergeProps } from '@base-ui/react'
 import { DirectionProvider } from '@base-ui/react/direction-provider'
 import { Tooltip } from '@base-ui/react/tooltip'
 
 import { ButtonOrLink, type ButtonOrLinkConfigProps } from './components/base/ButtonOrLink.tsx'
 import { Pane } from './components/Pane.tsx'
-import { EDSContext, type ResolvedTheme, type Theme, type ThemePersistence } from './EDSContext.ts'
+import {
+  EDSContext,
+  THEME_CLASSES,
+  type ResolvedTheme,
+  type Theme,
+  type ThemePersistence,
+} from './EDSContext.ts'
 import { useControlled } from './hooks/useControlled.ts'
 import { useIsHydrated } from './hooks/useIsHydrated.ts'
 import { cn } from './utils/index.ts'
@@ -15,12 +29,6 @@ import { cn } from './utils/index.ts'
 const PERSISTENCE_KEY = 'eds-active-theme'
 const COOKIE_REGEX = new RegExp(`(?:^|; )${PERSISTENCE_KEY}=([^;]+)`)
 
-const THEME_CLASSES: Record<Theme, string> = {
-  dark: 'eds-dark',
-  light: 'eds-light',
-  system: 'eds-system',
-}
-
 const VALID_THEMES: readonly Theme[] = ['dark', 'light', 'system']
 
 function isValidTheme(value: unknown): value is Theme {
@@ -153,7 +161,7 @@ export type { EDSContextValue, ResolvedTheme, Theme, ThemePersistence } from './
  * Provides global configuration and enhancements for EDS components.
  *
  * Note: Only one EDSProvider should be used per app, typically at the root. If you need different
- * themes for different parts of the app, use the `eds-dark` / `eds-light` utility classes instead.
+ * themes for different parts of the app, use the `Dark` and `Light` components instead.
  *
  * **Next.js App Router:** add `suppressHydrationWarning` to your `<html>` tag in `app/layout.tsx`.
  * The pre-hydration script applies the theme class to `<html>` before React hydrates (preventing a
@@ -370,6 +378,23 @@ export function EDSProvider({
     }
   }, [])
 
+  /**
+   * Warn if build tools transpiled `light-dark()` (e.g. Lightning CSS with older browser targets).
+   * Its fallback resolves tokens on `:root`, so components inside `Dark` and `Light` would get the
+   * page's colors.
+   */
+  useEffect(() => {
+    const lightDarkTest = getComputedStyle(document.documentElement).getPropertyValue(
+      '--eds-light-dark-test',
+    )
+    if (lightDarkTest !== '' && !lightDarkTest.includes('light-dark')) {
+      // oxlint-disable-next-line no-console
+      console.warn(
+        "[EDSProvider] `light-dark()` was transpiled by your build tools, so components inside `Dark` and `Light` will use the page's colors. Target Chrome 123, Safari 17.5, and Firefox 120 or newer (see the `@edgeandnode/eds-react` README).",
+      )
+    }
+  }, [])
+
   const edsContextValue = useMemo(
     () => ({
       theme,

package/src/components/Avatar.tsx

@@ -9,7 +9,8 @@ import avatarPlaceholderRounded from '@edgeandnode/eds-react/assets/avatar-place
 import { createIdenticon, PLACEHOLDER_ADDRESS } from '@edgeandnode/eds-utils'
 
 import { useCSSPropsPolyfill, useEDS } from '../hooks/index.ts'
-import { cn, getAssetUrl, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
+import { cn, getAssetUrl, getCSSPropsAttributes } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { AvatarMeta } from './Avatar.meta.ts'
 import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButtonOrLink.tsx'
 import { Tooltip, type TooltipProps } from './Tooltip.tsx'
@@ -94,7 +95,7 @@ export function Avatar({
         return (
           <Tooltip
             content={category !== 'other' ? alt : undefined}
-            {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}
+            {...getTooltipProps(tooltip)}
             triggerProps={renderProps}
           >
             <Element {...elementProps}>

package/src/components/Breadcrumbs.parts.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import {
-  cloneElement,
+  createContext,
   isValidElement,
   useCallback,
+  useContext,
   useMemo,
   useRef,
   useState,
   type ComponentProps,
   type CSSProperties,
-  type ReactElement,
 } from 'react'
 import { mergeProps } from '@base-ui/react'
 import { useRenderCount, useThrottledEffect } from '@react-hookz/web'
@@ -21,12 +21,20 @@ import { ArrowLeftInteractiveIcon, DotsThreeIcon } from '@edgeandnode/eds-react/
 
 import { useCSSPropsPolyfill, useCSSState, useEDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
+import { resolveLazy } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButtonOrLink.tsx'
 import { BreadcrumbsItemMeta, BreadcrumbsMeta } from './Breadcrumbs.meta.ts'
 import { Button } from './Button.tsx'
 import { Menu } from './Menu.tsx'
 
+/**
+ * Whether a `Breadcrumbs.Item` is (in) the last item of `Breadcrumbs`, which makes it default to
+ * `current`. Provided through context rather than by cloning the item, so that it also works when
+ * items are wrapped in another component.
+ */
+const BreadcrumbsLastItemContext = createContext(false)
+
 export interface BreadcrumbsProps
   extends ComponentProps<'nav'>, EDSComponentProps<typeof BreadcrumbsMeta> {}
 
@@ -47,18 +55,23 @@ export function BreadcrumbsRoot({
 
   const ariaLabel = passedAriaLabel !== undefined ? passedAriaLabel : 'Breadcrumbs'
 
-  // If the last `Breadcrumbs.Item` child doesn't explicitly set `current`, clone it to default
-  // `current` to `true`.
   const processedChildren = useMemo(() => {
     const flatChildren = flattenChildren(children)
-    for (let index = flatChildren.length - 1; index >= 0; index--) {
-      const child = flatChildren[index]
-      if (!isValidElement(child) || child.type !== BreadcrumbsItem) continue
-      const element = child as ReactElement<BreadcrumbsItemProps>
-      if (element.props.current !== undefined) return flatChildren
-      return flatChildren.with(index, cloneElement(element, { current: true }))
-    }
-    return flatChildren
+    const lastItemIndex = flatChildren.findLastIndex(
+      (child) => isValidElement(child) && resolveLazy(child.type) === BreadcrumbsItem,
+    )
+    // If items are wrapped in another component, the last element renders the last item
+    const lastIndex =
+      lastItemIndex !== -1 ? lastItemIndex : flatChildren.findLastIndex(isValidElement)
+    return flatChildren.map((child, index) =>
+      isValidElement(child) ? (
+        <BreadcrumbsLastItemContext.Provider key={child.key} value={index === lastIndex}>
+          {child}
+        </BreadcrumbsLastItemContext.Provider>
+      ) : (
+        child
+      ),
+    )
   }, [children])
 
   const hiddenContainerRef = useRef<HTMLDivElement>(null)
@@ -249,8 +262,9 @@ export declare namespace BreadcrumbsItemProps {
     addonBefore?: AddonValue | undefined
     /**
      * Whether this breadcrumb item represents the current page. Defaults to `true` for the last
-     * `Breadcrumbs.Item` child of `Breadcrumbs`, and `false` for any other item. Set explicitly to
-     * override the default.
+     * `Breadcrumbs.Item` child of `Breadcrumbs` (or the item rendered by its last child, if items
+     * are wrapped in another component), and `false` for any other item. Set explicitly to override
+     * the default.
      */
     current?: boolean | undefined
   }
@@ -267,11 +281,13 @@ export type BreadcrumbsItemProps =
 
 export function BreadcrumbsItem({
   addonBefore,
-  current = false,
+  current: passedCurrent,
   hideLabel,
   children,
   ...props
 }: BreadcrumbsItemProps) {
+  const isLastItem = useContext(BreadcrumbsLastItemContext)
+  const current = passedCurrent ?? isLastItem
   const { rootProps, nestedProps } = splitProps(props)
 
   const [stateRef, state] = useCSSState({

package/src/components/Button.tsx

@@ -7,7 +7,8 @@ import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { LoadingIcon } from '@edgeandnode/eds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useEDS } from '../hooks/index.ts'
-import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
+import { cn, getCSSPropsAttributes } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
 import { ButtonMeta } from './Button.meta.ts'
@@ -132,7 +133,7 @@ export function Button({
       render={(renderProps, { Element, elementProps }) => (
         <Tooltip
           closeOnClick={typeof props.checked === 'boolean' ? false : undefined} // If this is a toggle button, keep the tooltip open on click by default
-          {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}
+          {...getTooltipProps(tooltip)}
           triggerProps={renderProps}
         >
           <Element {...elementProps}>