@edgeandnode/eds-react 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgeandnode/eds-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React components for the Edge Design System",
   "author": "Edge & Node and contributors",
   "license": "MIT",
@@ -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.1",
-    "@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.1
+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://f87aca8--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.1",
+    "@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)
 
@@ -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.
 
@@ -523,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.                             |
@@ -664,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>`).
@@ -689,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
@@ -724,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

@@ -166,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
+## Theme Sections
 
-| 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                     |
-
-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}>

package/src/components/CodeBlock.parts.tsx

@@ -50,15 +50,6 @@ import { TabSetContext } from './TabSet.context.ts'
 import { TabSet, type TabSetTabProps } from './TabSet.tsx'
 import { ToggleButton } from './ToggleButton.tsx'
 
-// Can't import `@shikijs/vscode-textmate`'s `FontStyle` enum due to `verbatimModuleSyntax`
-const FontStyle = {
-  NotSet: -1,
-  None: 0,
-  Italic: 1,
-  Bold: 2,
-  Underline: 4,
-} as const
-
 const THEMES = {
   dark: 'night-owl',
   light: 'min-light',
@@ -166,7 +157,7 @@ export function CodeBlockRoot({
   children,
   ...props
 }: CodeBlockProps) {
-  const { activeTheme } = useEDS()
+  useEDS()
   const tabsContext = useContext(CodeBlockTabsContext)
   const hasAncestorTabs = tabsContext !== null
   const hasAncestorHeader = useContext(CodeBlockHeaderContext) !== false
@@ -209,7 +200,6 @@ export function CodeBlockRoot({
     highlights,
     secrets,
     language,
-    activeTheme,
     highlighter,
     hasAncestorHeader,
   })
@@ -363,7 +353,18 @@ export function CodeBlockRoot({
                   <span className="select-none"> </span>
                 ) : (
                   <span
+                    /**
+                     * `light-dark()` only works for colors, so the font styles use the `dark:`
+                     * variant (and highlighted tokens need `i:font-bold` to override the weight).
+                     */
                     className="
+                      *:font-(--shiki-light-font-weight)
+                      *:text-[light-dark(var(--shiki-light),var(--shiki-dark))]
+                      *:[font-style:var(--shiki-light-font-style)]
+                      *:[text-decoration:var(--shiki-light-text-decoration)]
+                      dark:*:font-(--shiki-dark-font-weight)
+                      dark:*:[font-style:var(--shiki-dark-font-style)]
+                      dark:*:[text-decoration:var(--shiki-dark-text-decoration)]
                       @prop-wrap-true/code-block:wrap-anywhere
                       @prop-wrap-true/code-block:whitespace-pre-wrap
                     "
@@ -379,23 +380,18 @@ export function CodeBlockRoot({
                           data-whitespace={chunk.content.trim() === '' || undefined}
                           data-highlighted={chunk.highlighted || undefined}
                           className={cn(
-                            chunk.fontStyle === FontStyle.Bold ? 'font-bold' : undefined,
-                            chunk.fontStyle === FontStyle.Italic ? 'italic' : undefined,
-                            chunk.fontStyle === FontStyle.Underline ? 'underline' : undefined,
-                            chunk.highlighted ? `z-10 bg-code-highlighted py-1 font-bold
+                            chunk.highlighted ? `z-10 bg-code-highlighted py-1
                               not-has-[+[data-highlighted]]:-me-1
                               not-has-[+[data-highlighted]]:rounded-e-4
                               not-has-[+[data-highlighted]]:pe-1
                               not-[[data-highlighted]+*]:-ms-1
                               not-[[data-highlighted]+*]:rounded-s-4
-                              not-[[data-highlighted]+*]:ps-1` : 'z-20',
+                              not-[[data-highlighted]+*]:ps-1
+                              i:font-bold` : 'z-20',
                             // Prevent wrapping between the indentation and the code
                             chunkIndex === 1 ? '[[data-whitespace]+*]:break-all' : undefined,
                           )}
-                          style={{
-                            color: chunk.color,
-                            backgroundColor: chunk.bgColor,
-                          }}
+                          style={chunk.htmlStyle}
                         >
                           {chunkContent}
                         </span>
@@ -423,7 +419,6 @@ function useCodeLines({
   highlights,
   secrets,
   language,
-  activeTheme,
   highlighter,
   hasAncestorHeader,
 }: {
@@ -432,7 +427,6 @@ function useCodeLines({
   highlights: string[]
   secrets: string[]
   language: Language
-  activeTheme: 'dark' | 'light'
   highlighter: Highlighter
   hasAncestorHeader: boolean
 }): { lines: CodeLine[]; codeToCopy: string } {
@@ -461,7 +455,9 @@ function useCodeLines({
     if (hasAncestorHeader) return []
 
     const { tokens } = highlighter.codeToTokens(code, {
-      theme: THEMES[activeTheme],
+      // Both themes' styles become CSS variables, so tokens follow the local color scheme
+      themes: THEMES,
+      defaultColor: false,
       lang: LANGUAGES.includes(language) ? language : 'text',
     })
 
@@ -526,7 +522,7 @@ function useCodeLines({
 
       return { chunks, style: lineStyle }
     })
-  }, [highlighter, passedCode, activeTheme, language, highlights, secrets, diff])
+  }, [highlighter, passedCode, language, highlights, secrets, diff])
 
   return { lines, codeToCopy }
 }

package/src/components/CopyButton.tsx

@@ -8,7 +8,8 @@ import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { CopyInteractiveIcon } from '@edgeandnode/eds-react/icons'
 
 import { useEDS } from '../hooks/index.ts'
-import { cn, isReactNode } from '../utils/index.ts'
+import { cn } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { Button, type ButtonProps } from './Button.tsx'
 import type { CopyButtonMeta } from './CopyButton.meta.ts'
 import { Tooltip } from './Tooltip.tsx'
@@ -49,7 +50,7 @@ export function CopyButton({
 
   const hasChildren = children != null
   const copyIcon = <CopyInteractiveIcon copied={copied} />
-  const tooltipProps = isReactNode(tooltip) ? { content: tooltip } : tooltip
+  const tooltipProps = getTooltipProps(tooltip)
   const [tooltipOpen, setTooltipOpen] = useState(false)
 
   return (

package/src/components/Icon.tsx

@@ -1,18 +1,12 @@
 'use client'
 
-import {
-  createElement,
-  isValidElement,
-  type ComponentProps,
-  type ComponentType,
-  type ReactElement,
-} from 'react'
+import { createElement, type ComponentProps, type ComponentType, type ReactElement } from 'react'
 import { mergeProps } from '@base-ui/react'
 
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 
 import { useEDS } from '../hooks/index.ts'
-import { cn, getCSSPropsAttributes } from '../utils/index.ts'
+import { cn, getCSSPropsAttributes, isComponentType } from '../utils/index.ts'
 import { IconMeta } from './Icon.meta.ts'
 import { useTooltipCollector } from './Tooltip.tsx'
 
@@ -37,7 +31,7 @@ export interface IconPropsWithSrc extends IconProps {
 export function Icon({ src, alt, size, color, ...props }: IconPropsWithSrc) {
   useEDS()
 
-  const iconContent = isValidElement(src) ? src : createElement(src)
+  const iconContent = isComponentType(src) ? createElement(src) : src
   const collectTooltipContent = useTooltipCollector()
 
   if (collectTooltipContent && alt) {

package/src/components/LocalTheme.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { ComponentProps, ElementType } from 'react'
+import { mergeProps } from '@base-ui/react'
+
+import { LocalThemeContext, THEME_CLASSES, type ResolvedTheme } from '../EDSContext.ts'
+
+export interface LocalThemeProps extends ComponentProps<'div'> {
+  /** @default 'div' */
+  as?: ElementType | undefined
+}
+
+function LocalTheme({
+  theme,
+  as: Element = 'div',
+  ...props
+}: LocalThemeProps & { theme: ResolvedTheme }) {
+  return (
+    <LocalThemeContext.Provider value={theme}>
+      <Element {...mergeProps({ className: THEME_CLASSES[theme] }, props)} />
+    </LocalThemeContext.Provider>
+  )
+}
+
+/**
+ * Renders its content in the dark theme, whatever the page's theme is. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().localTheme`.
+ */
+export function Dark(props: LocalThemeProps) {
+  return <LocalTheme theme="dark" {...props} />
+}
+
+/**
+ * Renders its content in the light theme, whatever the page's theme is. Components that need to
+ * know the theme in JavaScript can read it with `useEDS().localTheme`.
+ */
+export function Light(props: LocalThemeProps) {
+  return <LocalTheme theme="light" {...props} />
+}