@edgeandnode/eds-react 1.1.0 → 1.2.0

package/src/components/Address.tsx

@@ -26,15 +26,14 @@ export declare namespace AddressProps {
   interface ButtonProps
     extends
       CommonProps,
-      Omit<MaybeButtonOrLinkProps.ButtonProps, 'as'>,
+      MaybeButtonOrLinkProps.ButtonProps,
       MaybeButtonOrLinkProps.DisableableProps {}
   interface LinkProps
     extends
       CommonProps,
-      Omit<MaybeButtonOrLinkProps.LinkProps, 'as'>,
+      MaybeButtonOrLinkProps.LinkProps,
       MaybeButtonOrLinkProps.DisableableProps {}
-  interface OtherElementProps
-    extends CommonProps, Omit<MaybeButtonOrLinkProps.OtherElementProps, 'as'> {}
+  interface OtherElementProps extends CommonProps, MaybeButtonOrLinkProps.OtherElementProps {}
 }
 
 export type AddressProps =
@@ -55,12 +54,15 @@ export function Address({
 
   const { rootProps, nestedProps } = splitProps(props)
 
-  const [stateRef, state] = useCSSState({
-    pointer: undefined,
-    focus: undefined,
-    disabled: Boolean(props.disabled),
-    'show-copy': false,
-  })
+  const [stateRef, state] = useCSSState(
+    {
+      pointer: undefined,
+      focus: undefined,
+      disabled: Boolean(props.disabled),
+      'show-copy': false,
+    },
+    { returnState: false },
+  )
   const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     AddressMeta,
     { variant, size, copy },

package/src/components/Avatar.tsx

@@ -13,6 +13,7 @@ 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 { Render } from './base/Render.tsx'
 import { Tooltip, type TooltipProps } from './Tooltip.tsx'
 
 const PLACEHOLDER_SRC_CIRCLE = createIdenticon(PLACEHOLDER_ADDRESS)
@@ -37,13 +38,11 @@ export declare namespace AvatarProps {
   }
   interface CommonProps extends OwnProps, EDSComponentProps<typeof AvatarMeta> {}
   interface ButtonProps
-    extends CommonProps, Omit<MaybeButtonOrLinkProps.ButtonProps, 'as' | 'children' | 'render'> {}
+    extends CommonProps, Omit<MaybeButtonOrLinkProps.ButtonProps, 'children' | 'render'> {}
   interface LinkProps
-    extends CommonProps, Omit<MaybeButtonOrLinkProps.LinkProps, 'as' | 'children' | 'render'> {}
+    extends CommonProps, Omit<MaybeButtonOrLinkProps.LinkProps, 'children' | 'render'> {}
   interface OtherElementProps
-    extends
-      CommonProps,
-      Omit<MaybeButtonOrLinkProps.OtherElementProps, 'as' | 'children' | 'render'> {}
+    extends CommonProps, Omit<MaybeButtonOrLinkProps.OtherElementProps, 'children' | 'render'> {}
 }
 
 export type AvatarProps =
@@ -96,55 +95,68 @@ export function Avatar({
         props,
       )}
       render={(renderProps, { Element, elementProps, category }) => {
+        const avatar = (
+          <Element {...elementProps}>
+            <span className="nested/avatar-paint pointer-events-none shrink-0">
+              <span
+                className="
+                  block overflow-clip bg-default
+                  group-clickable-focus-visible/avatar:outline
+                  @prop-size-xsmall/avatar:size-4
+                  @prop-size-small/avatar:size-5
+                  @prop-size-medium/avatar:size-6
+                  @prop-size-large/avatar:size-8
+                  @prop-size-xlarge/avatar:size-12
+                  @prop-shape-circle/avatar:rounded-full
+                  @prop-shape-rounded/avatar:rounded-4
+                  @prop-shape-rounded/avatar:@prop-size-xsmall/avatar:rounded-2
+                  @prop-shape-rounded/avatar:@prop-size-xlarge/avatar:rounded-8
+                  uu:*:absolute
+                  uu:*:inset-0
+                  uu:*:m-auto
+                  uu:*:size-full
+                  uu:*:object-cover
+                  i:@prop-size-xsmall/avatar:**:icon:default-size-2.5
+                  i:@prop-size-small/avatar:**:icon:default-size-3
+                  i:@prop-size-medium/avatar:**:icon:default-size-4
+                  i:@prop-size-large/avatar:**:icon:default-size-5
+                  i:@prop-size-xlarge/avatar:**:icon:default-size-8
+                "
+              >
+                {src ? (
+                  typeof src === 'string' ? (
+                    <img
+                      src={src}
+                      alt=""
+                      onError={() => setCurrentSourceIndex(currentSourceIndex + 1)}
+                      className="[[src^='data:image/bmp']]:[image-rendering:pixelated]"
+                    />
+                  ) : (
+                    <Tooltip.Collector>{src}</Tooltip.Collector>
+                  )
+                ) : null}
+                {alt ? <span className="sr-only">{alt}</span> : null}
+              </span>
+            </span>
+          </Element>
+        )
+        const clickable = category !== 'other'
+        const focusable = clickable || props.as !== undefined || props.tabIndex !== undefined
+        /**
+         * Without any content to show (or collect from `src`), a `Tooltip` would only cost its
+         * trigger and observers. Avatars that can take focus keep it anyway, since adding or
+         * removing it remounts the element, which would lose focus.
+         */
+        if (!focusable && tooltip === undefined && typeof src === 'string') {
+          return <Render render={avatar} {...renderProps} />
+        }
         return (
           <Tooltip
-            content={category !== 'other' ? alt : undefined}
+            content={clickable ? alt : undefined}
             {...getTooltipProps(tooltip)}
             triggerProps={renderProps}
           >
-            <Element {...elementProps}>
-              <span className="nested/avatar-paint pointer-events-none shrink-0">
-                <span
-                  className="
-                    block overflow-clip bg-default
-                    group-clickable-focus-visible/avatar:outline
-                    @prop-size-xsmall/avatar:size-4
-                    @prop-size-small/avatar:size-5
-                    @prop-size-medium/avatar:size-6
-                    @prop-size-large/avatar:size-8
-                    @prop-size-xlarge/avatar:size-12
-                    @prop-shape-circle/avatar:rounded-full
-                    @prop-shape-rounded/avatar:rounded-4
-                    @prop-shape-rounded/avatar:@prop-size-xsmall/avatar:rounded-2
-                    @prop-shape-rounded/avatar:@prop-size-xlarge/avatar:rounded-8
-                    uu:*:absolute
-                    uu:*:inset-0
-                    uu:*:m-auto
-                    uu:*:size-full
-                    uu:*:object-cover
-                    i:@prop-size-xsmall/avatar:**:icon:default-size-2.5
-                    i:@prop-size-small/avatar:**:icon:default-size-3
-                    i:@prop-size-medium/avatar:**:icon:default-size-4
-                    i:@prop-size-large/avatar:**:icon:default-size-5
-                    i:@prop-size-xlarge/avatar:**:icon:default-size-8
-                  "
-                >
-                  {src ? (
-                    typeof src === 'string' ? (
-                      <img
-                        src={src}
-                        alt=""
-                        onError={() => setCurrentSourceIndex(currentSourceIndex + 1)}
-                        className="[[src^='data:image/bmp']]:[image-rendering:pixelated]"
-                      />
-                    ) : (
-                      <Tooltip.Collector>{src}</Tooltip.Collector>
-                    )
-                  ) : null}
-                  {alt ? <span className="sr-only">{alt}</span> : null}
-                </span>
-              </span>
-            </Element>
+            {avatar}
           </Tooltip>
         )
       }}

package/src/components/Breadcrumbs.parts.tsx

@@ -269,10 +269,9 @@ export declare namespace BreadcrumbsItemProps {
     current?: boolean | undefined
   }
   interface CommonProps extends OwnProps, EDSComponentProps<typeof BreadcrumbsItemMeta> {}
-  interface ButtonProps extends CommonProps, Omit<MaybeButtonOrLinkProps.ButtonProps, 'as'> {}
-  interface LinkProps extends CommonProps, Omit<MaybeButtonOrLinkProps.LinkProps, 'as'> {}
-  interface OtherElementProps
-    extends CommonProps, Omit<MaybeButtonOrLinkProps.OtherElementProps, 'as'> {}
+  interface ButtonProps extends CommonProps, MaybeButtonOrLinkProps.ButtonProps {}
+  interface LinkProps extends CommonProps, MaybeButtonOrLinkProps.LinkProps {}
+  interface OtherElementProps extends CommonProps, MaybeButtonOrLinkProps.OtherElementProps {}
 }
 
 export type BreadcrumbsItemProps =
@@ -291,11 +290,14 @@ export function BreadcrumbsItem({
   const current = passedCurrent ?? isLastItem
   const { rootProps, nestedProps } = splitProps(props)
 
-  const [stateRef, state] = useCSSState({
-    pointer: undefined,
-    focus: undefined,
-    current,
-  })
+  const [stateRef, state] = useCSSState(
+    {
+      pointer: undefined,
+      focus: undefined,
+      current,
+    },
+    { returnState: false },
+  )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     BreadcrumbsItemMeta,
     { hideLabel },

package/src/components/Button.tsx

@@ -76,7 +76,7 @@ export function Button({
       disabled: Boolean(disabled),
       'addon-only': !children ? 'auto' : '0',
     },
-    { ref: passedRef },
+    { ref: passedRef, returnState: false, exposeState: false },
   )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes, cssProps] =
     useCSSPropsPolyfill(

package/src/components/Card.tsx

@@ -72,7 +72,7 @@ export function Card({ ref: passedRef, as, variant, disabled, children, ...props
       checked: props.checked,
       disabled: Boolean(disabled),
     },
-    { ref: passedRef },
+    { ref: passedRef, returnState: false },
   )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     CardMeta,

package/src/components/Chip.parts.tsx

@@ -65,12 +65,15 @@ export function ChipRoot({
 
   const groupContext = useContext(ChipGroupContext)
 
-  const [stateRef, state] = useCSSState({
-    pointer: undefined,
-    focus: undefined,
-    checked: undefined,
-    disabled: Boolean(disabled),
-  })
+  const [stateRef, state] = useCSSState(
+    {
+      pointer: undefined,
+      focus: undefined,
+      checked: undefined,
+      disabled: Boolean(disabled),
+    },
+    { returnState: false },
+  )
   const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     ChipMeta,
     { size },

package/src/components/Cluster.tsx

@@ -11,13 +11,11 @@ import { ClusterMeta } from './Cluster.meta.ts'
 
 export declare namespace ClusterProps {
   interface ButtonProps
-    extends EDSComponentProps<typeof ClusterMeta>, Omit<MaybeButtonOrLinkProps.ButtonProps, 'as'> {}
+    extends EDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.ButtonProps {}
   interface LinkProps
-    extends EDSComponentProps<typeof ClusterMeta>, Omit<MaybeButtonOrLinkProps.LinkProps, 'as'> {}
+    extends EDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.LinkProps {}
   interface OtherElementProps
-    extends
-      EDSComponentProps<typeof ClusterMeta>,
-      Omit<MaybeButtonOrLinkProps.OtherElementProps, 'as'> {}
+    extends EDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.OtherElementProps {}
 }
 
 export type ClusterProps =

package/src/components/Icon.tsx

@@ -54,8 +54,6 @@ export function Icon({ src, alt, size, color, ...props }: IconPropsWithSrc) {
         {
           className: cn(`
             eds-icon root-flex items-center justify-center
-            ${/* Fix icons wobbling in Safari when rendered on top of opacity/background transitions */ ''}
-            u:will-change-transform
             ${/* Flip some icons horizontally in RTL so that `ArrowLeft` points right, etc. */ ''}
             rtl:data-[name*=Left]:*:-scale-x-100
             rtl:data-[name*=Right]:*:-scale-x-100

package/src/components/Link.tsx

@@ -54,6 +54,8 @@ export function Link({
     },
     {
       ref: passedRef,
+      returnState: false,
+      exposeState: false,
     },
   )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes, cssProps] =

package/src/components/Menu.parts.tsx

@@ -1015,7 +1015,7 @@ export function MenuItem<T extends OptionValue>({
       checked,
       disabled,
     },
-    { ref: elementPassedRef },
+    { ref: elementPassedRef, returnState: false, exposeState: false },
   )
 
   const groupContext = useContext(MenuGroupContext)

package/src/components/Search.tsx

@@ -54,12 +54,15 @@ export function Search({
   const previousActiveElementRef = useRef<HTMLElement | null>(null)
   const [value, setValue] = useControlled(controlledValue, defaultValue ?? '', onValueChange)
 
-  const [stateRef, state] = useCSSState({
-    pointer: undefined,
-    focus: undefined,
-    blank: value === '',
-    open: value !== '',
-  })
+  const [stateRef, state] = useCSSState(
+    {
+      pointer: undefined,
+      focus: undefined,
+      blank: value === '',
+      open: value !== '',
+    },
+    { returnState: false },
+  )
   const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
     SearchMeta,
     { size, layout },

package/src/components/SegmentedControl.parts.tsx

@@ -152,11 +152,14 @@ export function SegmentedControlOption<T extends OptionValue>({
   const autoValue = useAutoValue(children)
   const value = passedValue !== undefined ? passedValue : autoValue
 
-  const [stateRef, state] = useCSSState({
-    pointer: undefined,
-    checked: undefined,
-    'is-toggle': undefined,
-  })
+  const [stateRef, state] = useCSSState(
+    {
+      pointer: undefined,
+      checked: undefined,
+      'is-toggle': undefined,
+    },
+    { returnState: false },
+  )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     SegmentedControlOptionMeta,
     { hideLabel },

package/src/components/TabSet.parts.tsx

@@ -203,7 +203,7 @@ export function TabSetTab({
       checked: selected,
       disabled: Boolean(disabled),
     },
-    { ref: passedRef },
+    { ref: passedRef, returnState: false, exposeState: false },
   )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     TabSetTabMeta,

package/src/components/Tooltip.parts.tsx

@@ -176,7 +176,10 @@ export function TooltipRoot({
             <Render render={children} {...renderProps} disabled={triggerDisabled} />
           )}
         />
-        {/* Ensure changes to CSS props are detected even when the tooltip is not mounted */}
+        {/**
+         * Observe CSS props even without content: changing `disabled` can make a descendant's collected
+         * content available to another tooltip.
+         */}
         <Portal>
           <span
             ref={cssPropsPolyfillRef}

package/src/components/base/Checkable.parts.tsx

@@ -209,7 +209,7 @@ export function CheckableLabel({
 
   const [statePassedRef, state] = useCSSState(
     { pointer: undefined, focus: undefined, checked, disabled },
-    { ref: passedRef },
+    { ref: passedRef, returnState: false },
   )
 
   return (

package/src/components/base/Field.parts.tsx

@@ -107,7 +107,7 @@ export const FieldRoot = ({
       blank: typeof value === 'object' ? value.optionValue === null : !value,
       disabled,
     },
-    { ref: passedRef },
+    { ref: passedRef, returnState: false },
   )
   const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     FieldMeta,

package/src/components/base/Portal.tsx

@@ -3,13 +3,13 @@
 import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 
-import { useFirstRender } from '../../hooks/index.ts'
+import { useIsHydrated } from '../../hooks/index.ts'
 
 export function Portal({ children }: { children: ReactNode }) {
-  const firstRender = useFirstRender({ immediatelyRerender: true })
+  const hydrated = useIsHydrated()
 
   // Don't render until after hydration
-  if (firstRender) {
+  if (!hydrated) {
     return null
   }
 

package/src/components/base/Transition.tsx

@@ -94,7 +94,7 @@ export function Transition({
     {
       transition: 'idle',
     },
-    { ref: passedRef },
+    { ref: passedRef, returnState: false, exposeState: false },
   )
 
   // Collapse to the early-exit branch under reduced-motion — `global.css`'s `@media` block can't skip the cross-fade structure (both `<m.span>`s mount during a swap), only `duration <= 0` can.

package/src/hooks/useCSSPropsPolyfill.ts

@@ -9,8 +9,9 @@ import {
   type EDSComponent,
 } from '@edgeandnode/eds-css'
 
+import { getStyleQueriesSupported } from '../utils/internal/index.ts'
 import { useCSSProps, type PassedValues, type PropValues } from './useCSSProps.ts'
-import { useFirstRender } from './useFirstRender.ts'
+import { useIsHydrated } from './useIsHydrated.ts'
 
 type ExtractPolyfillValues<P extends CSSPropsConfig> = {
   [K in keyof P as P[K]['type'] extends 'values' ? K : never]: CSSPropType<P[K]> | undefined
@@ -114,16 +115,14 @@ export function useCSSPropsPolyfill<
   })
 
   /**
-   * Always include the polyfill attributes on the first render (even if the polyfill is disabled)
-   * to prevent hydration errors. It would be nice to optimize for the case where the polyfill is
-   * not needed instead (by always excluding the attributes on the first render, thereby not having
-   * to immediately rerender in browsers that support style queries); unfortunately, that would
-   * cause a flash of missing styles in browsers that need the polyfill.
+   * Include the polyfill attributes until hydration completes (even if the polyfill is disabled) to
+   * prevent hydration errors. Components mounted after hydration (e.g. on client-side navigation)
+   * skip them, so they don't have to rerender (and restyle their subtree) just to remove them.
    */
-  const firstRender = useFirstRender({ immediatelyRerender: !polyfillEnabled })
+  const hydrated = useIsHydrated()
   const polyfillAttributes = cssPropsOverride
     ? cssPropsOverride.polyfillAttributes
-    : polyfillEnabled || firstRender
+    : polyfillEnabled || !hydrated
       ? Object.fromEntries(
           cssProps
             .filter((prop) => prop.name in passedValues)
@@ -148,15 +147,3 @@ export function useCSSPropsPolyfill<
 
   return [callbackRef, polyfillAttributes, returnedPropValues] as const
 }
-
-let privateStyleQueriesSupported: boolean | null = null
-
-function getStyleQueriesSupported(): boolean {
-  if (typeof window === 'undefined' || typeof document === 'undefined') return false
-  if (privateStyleQueriesSupported === null) {
-    privateStyleQueriesSupported =
-      window.getComputedStyle(document.body).getPropertyValue('--eds-style-queries-test') ===
-      'success'
-  }
-  return privateStyleQueriesSupported
-}

package/src/hooks/useCSSState.ts

@@ -2,6 +2,8 @@ import type { Ref } from 'react'
 
 import { cssStateVariables } from '@edgeandnode/eds-css'
 
+import { getStyleQueriesSupported } from '../utils/internal/index.ts'
+import { useIsHydrated } from './useIsHydrated.ts'
 import { useMapWithInit } from './useMapWithInit.ts'
 import { useRefWithInit } from './useRefWithInit.ts'
 import { useStyleObserver } from './useStyleObserver.ts'
@@ -50,9 +52,16 @@ export function useCSSState<
   options: {
     ref?: Ref<HTMLElement> | undefined
     onChange?: (state: CSSStateType<T>) => void
+    /** Set to `false` when only the attributes are consumed; the polyfill still observes state. */
+    returnState?: boolean | undefined
+    /** Set to `false` when the component does not spread `exposedAttributes` or `allAttributes`. */
+    exposeState?: boolean | undefined
   } = {},
 ) {
-  const { ref, onChange } = options
+  const { ref, onChange, returnState = true, exposeState = true } = options
+  const polyfillEnabled = !getStyleQueriesSupported()
+  const hydrated = useIsHydrated()
+  const observeState = returnState || Boolean(onChange) || polyfillEnabled
 
   const variables = useRefWithInit(() =>
     Object.keys(variableInitialValues).map((variableName) => {
@@ -60,10 +69,21 @@ export function useCSSState<
       const defaultValue = !isArbitrary
         ? cssStateVariables[variableName as CSSStateVariableName].defaultValue
         : undefined
+      const passedValue = variableInitialValues[variableName as keyof T]
       return {
         name: variableName,
         defaultValue,
-        initialValue: variableInitialValues[variableName as keyof T] ?? defaultValue,
+        initialValue: passedValue ?? defaultValue,
+        /**
+         * Nothing is exposed until CSS says otherwise, and a missing `data-eds-exposed-*` attribute
+         * falls back to the native state. Starting from the default value instead would make the
+         * first style observation remove the attribute, rerendering the component and restyling its
+         * whole subtree.
+         */
+        initialExposedValue:
+          passedValue === undefined || String(passedValue) === String(defaultValue)
+            ? undefined
+            : passedValue,
         observedProperty: isArbitrary
           ? `--eds-state-${variableName}`
           : `--eds-observed-${variableName}`,
@@ -74,14 +94,15 @@ export function useCSSState<
     }),
   ).current
 
-  const properties = useRefWithInit(() =>
-    variables.flatMap((variable) => [variable.observedProperty, variable.exposedProperty]),
-  ).current
+  const properties = variables.flatMap((variable) => [
+    ...(observeState ? [variable.observedProperty] : []),
+    ...(exposeState ? [variable.exposedProperty] : []),
+  ])
 
   const propertyValues = useMapWithInit(() =>
     variables.flatMap((variable) => [
       [variable.observedProperty, String(variable.initialValue ?? '')],
-      [variable.exposedProperty, String(variable.initialValue ?? '')],
+      [variable.exposedProperty, String(variable.initialExposedValue ?? '')],
     ]),
   )
 
@@ -131,12 +152,12 @@ export function useCSSState<
   }>(
     (result, variable) => {
       const exposedValue = getStateValue(variable, 'exposed')
-      if (exposedValue !== undefined) {
+      if (exposeState && exposedValue !== undefined) {
         result.exposedAttributes[variable.exposedAttribute] = String(exposedValue)
         result.allAttributes[variable.exposedAttribute] = String(exposedValue)
       }
       const observedValue = getStateValue(variable, 'observed')
-      if (observedValue !== undefined) {
+      if ((polyfillEnabled || !hydrated) && observedValue !== undefined) {
         result.polyfillAttributes[variable.polyfillAttribute] = String(observedValue)
         result.allAttributes[variable.polyfillAttribute] = String(observedValue)
       }

package/src/hooks/useStyleObserver.ts

@@ -32,25 +32,29 @@ export function useStyleObserver<T extends string>(
       if (!element || properties.length === 0 || disabled) return
 
       // TODO: Use `style-observer`'s `immediate` option when it exists: https://github.com/LeaVerou/style-observer/issues/45
-      if (immediate) {
-        styleScheduler.schedule(() => {
-          const computedStyle = window.getComputedStyle(element)
-          memoizedOnChange(
-            properties.map((property) => ({
-              target: element,
-              property,
-              value: computedStyle.getPropertyValue(property),
-              oldValue: '',
-            })),
-          )
-        })
-      }
+      const cancelImmediate = immediate
+        ? styleScheduler.schedule(() => {
+            const computedStyle = window.getComputedStyle(element)
+            memoizedOnChange(
+              properties.map((property) => ({
+                target: element,
+                property,
+                value: computedStyle.getPropertyValue(property),
+                oldValue: '',
+              })),
+            )
+          })
+        : undefined
 
-      return styleObserver.subscribe(
+      const unsubscribe = styleObserver.subscribe(
         element,
         properties,
         memoizedOnChange as (records: StyleObserverRecord[]) => void,
       )
+      return () => {
+        cancelImmediate?.()
+        unsubscribe()
+      }
     },
     [properties, memoizedOnChange, immediate, disabled],
     [watchedRef],

package/src/postcss-plugin.ts

@@ -0,0 +1 @@
+export { default } from '@edgeandnode/eds-css/postcss-plugin'

package/src/utils/internal/BatchedElementStyleObserver.ts

@@ -0,0 +1,31 @@
+import { ElementStyleObserver } from 'style-observer'
+
+/**
+ * `style-observer` reads computed styles between its transition writes on each new target. Buffer
+ * those first writes so every target can read its original styles before any transitions change.
+ * Subsequent updates retain the library's transition and browser compatibility handling.
+ */
+export class BatchedElementStyleObserver extends ElementStyleObserver {
+  private pendingStyles: Map<string, { value: string; priority: string | undefined }> | undefined =
+    new Map()
+
+  override setProperty(property: string, value: string, priority?: string) {
+    if (this.pendingStyles) {
+      this.pendingStyles.set(property, { value, priority })
+    } else {
+      super.setProperty(property, value, priority)
+    }
+  }
+
+  override getProperty(property: string) {
+    return this.pendingStyles?.get(property)?.value ?? super.getProperty(property)
+  }
+
+  flush() {
+    const pendingStyles = this.pendingStyles
+    this.pendingStyles = undefined
+    for (const [property, { value, priority }] of pendingStyles ?? []) {
+      super.setProperty(property, value, priority)
+    }
+  }
+}

package/src/utils/internal/getStyleQueriesSupported.ts

@@ -0,0 +1,11 @@
+let styleQueriesSupported: boolean | null = null
+
+export function getStyleQueriesSupported(): boolean {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return false
+  if (styleQueriesSupported === null) {
+    styleQueriesSupported =
+      window.getComputedStyle(document.body).getPropertyValue('--eds-style-queries-test') ===
+      'success'
+  }
+  return styleQueriesSupported
+}

package/src/utils/internal/index.ts

@@ -1,3 +1,5 @@
 export { getTooltipProps } from './getTooltipProps.ts'
 export { isLazy, resolveLazy } from './resolveLazy.ts'
 export { styleScheduler } from './styleScheduler.ts'
+export { BatchedElementStyleObserver } from './BatchedElementStyleObserver.ts'
+export { getStyleQueriesSupported } from './getStyleQueriesSupported.ts'