@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/src/Tooltip/useTooltip.tsx

@@ -4,8 +4,8 @@
 
 /**
  * @file useTooltip.tsx
- * @input Uses useLayer, React hooks
- * @output Exports useTooltip hook for hover/focus triggered tooltips
+ * @input Uses useLayer, useTouchTrigger, React hooks
+ * @output Exports useTooltip hook for hover/focus/tap triggered tooltips
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
  * SYNC: When modified, update:
@@ -26,6 +26,10 @@ import {
   type LayerAlignment,
   type LayerPlacement,
 } from '../Layer/useLayer';
+import {
+  useTouchTrigger,
+  type LayerTouchTrigger,
+} from '../Layer/useTouchTrigger';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {themeProps} from '../utils/themeProps';
 import {isImeKeyEvent} from '../utils/ime';
@@ -73,6 +77,11 @@ const styles = stylex.create({
  */
 export type TooltipFocusTrigger = 'auto' | 'always' | 'never';
 
+/**
+ * Touch trigger behavior for tooltips
+ */
+export type TooltipTouchTrigger = LayerTouchTrigger;
+
 export interface TooltipOptions {
   /**
    * Position placement relative to anchor
@@ -108,6 +117,20 @@ export interface TooltipOptions {
    */
   focusTrigger?: TooltipFocusTrigger;
 
+  /**
+   * What a tap does on a touch pointer, where there is no hover:
+   * - `auto`: tap opens the tooltip, unless the trigger performs an action of
+   *   its own (a button, a link, a form control) — that tap belongs to the
+   *   control, and a hint about a control the user just operated is noise
+   * - `tap`: tap always opens the tooltip. This is what an info icon rendered
+   *   as a button wants: it looks like an action to the DOM, but revealing the
+   *   tooltip is the only thing it does
+   * - `none`: touch never opens the tooltip
+   *
+   * @default 'auto'
+   */
+  touchTrigger?: TooltipTouchTrigger;
+
   /**
    * Whether the tooltip is enabled.
    * When false, hover/focus triggers are disabled.
@@ -218,6 +241,7 @@ function isFocusable(element: HTMLElement): boolean {
  * Builds on useLayer to add:
  * - Hover triggers with configurable delay
  * - Focus triggers with auto-detection for focusable elements
+ * - Tap triggers on touch, where there is no hover (see useTouchTrigger)
  * - Inverted color palette for high contrast
  *
  * Unlike HoverCard, tooltips:
@@ -242,6 +266,7 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
     delay = 200,
     hideDelay = 0,
     focusTrigger = 'auto',
+    touchTrigger = 'auto',
     isEnabled = true,
     isOpen,
     isDefaultOpen = false,
@@ -273,6 +298,29 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
     }
   }, []);
 
+  // Touch resolves immediately: the hover delays exist to filter out a pointer
+  // passing across the trigger, and a tap is never that.
+  const showNow = useCallback(() => {
+    clearTimeouts();
+    layer.show();
+  }, [clearTimeouts, layer]);
+
+  const hideNow = useCallback(() => {
+    clearTimeouts();
+    layer.hide();
+  }, [clearTimeouts, layer]);
+
+  const touch = useTouchTrigger({
+    touchTrigger,
+    isEnabled,
+    isControlled: isOpen !== undefined,
+    isOpen: layer.isOpen,
+    layerId: layer.id,
+    triggerRef,
+    show: showNow,
+    hide: hideNow,
+  });
+
   // Schedule show with delay (suppressed when isOpen is false)
   const scheduleShow = useCallback(() => {
     if (!isEnabled || isOpen === false) {
@@ -309,26 +357,38 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
 
   // Event handlers
   const handleMouseEnter = useCallback(() => {
-    // Suppress tooltips on touch devices — hover is simulated and eats a tap
-    if (
-      typeof window !== 'undefined' &&
-      typeof window.matchMedia === 'function' &&
-      window.matchMedia('(hover: none)').matches
-    ) {
+    // A tap synthesizes mouseenter. On touch the tap path owns the decision,
+    // so hover must not also fire — including the tap that just opened the
+    // tooltip, which would otherwise be double-handled.
+    if (touch.isTouchPointerRef.current) {
       return;
     }
     scheduleShow();
-  }, [scheduleShow]);
+  }, [touch, scheduleShow]);
 
   const handleMouseLeave = useCallback(() => {
+    // On touch the synthesized mouseleave arrives with the next tap elsewhere,
+    // which the outside-tap dismissal already handles — and handling it here
+    // too would close the tooltip behind the tap-open bookkeeping's back.
+    if (touch.isTouchPointerRef.current) {
+      return;
+    }
     scheduleHide();
-  }, [scheduleHide]);
+  }, [touch, scheduleHide]);
 
   const handleFocusIn = useCallback(
     (e: Event) => {
       if (!isEnabled) {
         return;
       }
+      // A tap focuses the trigger it activates, and `:focus-visible` does not
+      // filter that out on every element: a tapped `<input>` or contenteditable
+      // matches it. Those are exactly the action triggers `auto` just decided
+      // to keep shut, so without this the focus reopens what the tap
+      // suppressed, over the field the user is trying to type into.
+      if (touch.isTouchInteraction()) {
+        return;
+      }
       // Only show tooltip for keyboard focus (:focus-visible),
       // not programmatic focus (e.g. dialog auto-focus, touch tap)
       const target = e.target as HTMLElement;
@@ -338,7 +398,7 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
       clearTimeouts();
       layer.show();
     },
-    [isEnabled, clearTimeouts, layer],
+    [isEnabled, touch, clearTimeouts, layer],
   );
 
   const handleFocusOut = useCallback(() => {
@@ -350,15 +410,24 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
   // just-pressed control reads as stale. Fires on pointerdown so it feels
   // immediate. Uncontrolled tooltips only — a controlled tooltip's visibility
   // is owned by the consumer. `layer.hide()` self-guards when already closed.
-  const handlePointerDown = useCallback(() => {
-    if (isOpen !== undefined) {
-      return;
-    }
-    clearTimeouts();
-    layer.hide();
-  }, [isOpen, clearTimeouts, layer]);
+  // A touch press is a different gesture (it may be the only way to open the
+  // tooltip at all), so the touch path answers it first.
+  const handlePointerDown = useCallback(
+    (event: PointerEvent) => {
+      if (touch.handlePointerDown(event)) {
+        return;
+      }
+      if (isOpen !== undefined) {
+        return;
+      }
+      clearTimeouts();
+      layer.hide();
+    },
+    [touch, isOpen, clearTimeouts, layer],
+  );
 
   // Interaction ref that handles event listeners only
+  const {handlePointerEnter, clearTapOpen} = touch;
   const interactionRef: RefCallback<HTMLElement> = useCallback(
     (el: HTMLElement | null) => {
       // Cleanup previous element
@@ -367,6 +436,10 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
         triggerRef.current.removeEventListener('mouseleave', handleMouseLeave);
         triggerRef.current.removeEventListener('focusin', handleFocusIn);
         triggerRef.current.removeEventListener('focusout', handleFocusOut);
+        triggerRef.current.removeEventListener(
+          'pointerenter',
+          handlePointerEnter,
+        );
         triggerRef.current.removeEventListener(
           'pointerdown',
           handlePointerDown,
@@ -374,10 +447,13 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
       }
 
       if (el) {
-        // Attach hover listeners
+        // Attach hover listeners. `pointerenter` runs before the synthesized
+        // `mouseenter` a tap produces, which is what lets the hover path know
+        // it is looking at a finger.
+        el.addEventListener('pointerenter', handlePointerEnter);
         el.addEventListener('mouseenter', handleMouseEnter);
         el.addEventListener('mouseleave', handleMouseLeave);
-        // Press-to-dismiss: activating the trigger hides its own tooltip.
+        // Press-to-dismiss on a mouse; tap-to-open on a touch pointer.
         el.addEventListener('pointerdown', handlePointerDown);
 
         // Attach focus listeners based on focusTrigger option
@@ -399,6 +475,7 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
       handleMouseLeave,
       handleFocusIn,
       handleFocusOut,
+      handlePointerEnter,
       handlePointerDown,
     ],
   );
@@ -461,13 +538,14 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
         return;
       }
       clearTimeouts();
+      clearTapOpen();
       layer.hide();
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [isOpen, layer, clearTimeouts]);
+  }, [isOpen, layer, clearTimeouts, clearTapOpen]);
 
   // Render function that wraps layer.render with tooltip styling
   const renderTooltip = useCallback(

package/src/TopNav/TopNavHeading.tsx

@@ -72,7 +72,7 @@ const styles = stylex.create({
     fontSize: 'inherit',
     fontWeight: fontWeightVars['--font-weight-normal'],
     textAlign: 'start',
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       '@media (hover: hover)': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },

package/src/TopNav/TopNavItem.tsx

@@ -59,7 +59,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
       ':active': colorVars['--color-overlay-pressed'],
@@ -70,7 +70,7 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-semibold'],
     backgroundColor: {
       default: colorVars['--color-neutral'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-neutral'],
       },
       ':active': colorVars['--color-neutral'],

package/src/TopNav/TopNavMegaMenu.tsx

@@ -84,7 +84,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/TopNav/TopNavMegaMenuItem.tsx

@@ -56,7 +56,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
       ':active': colorVars['--color-overlay-pressed'],

package/src/TopNav/TopNavMenu.tsx

@@ -71,7 +71,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -121,7 +121,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/TreeList/TreeListItem.tsx

@@ -101,7 +101,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,

package/src/hooks/containerReveal.stylex.ts

@@ -32,13 +32,17 @@ export const styles = stylex.create({
     '--_hover-delay': '0s',
     '--_reveal-opacity': {
       default: 0,
-      ':hover': {'@media (hover: hover)': 1},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 1,
+      },
       ':focus-within': 1,
       '@media (any-pointer: coarse)': 1,
     },
     '--_reveal-position': {
       default: 'absolute',
-      ':hover': {'@media (hover: hover)': 'static'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 'static',
+      },
       ':focus-within': 'static',
       '@media (any-pointer: coarse)': 'static',
     },
@@ -49,7 +53,9 @@ export const styles = stylex.create({
     // content would snap out of flow at full opacity and flicker.
     '--_reveal-delay': {
       default: REST_DELAY,
-      ':hover': {'@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY,
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
@@ -57,7 +63,9 @@ export const styles = stylex.create({
     // for) but keeps the dwell: an intent gate is timing, not motion.
     '--_reveal-delay-reduced': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY,
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
@@ -66,13 +74,17 @@ export const styles = stylex.create({
     // coarse-pointer branch (it stays visible on touch).
     '--_conceal-opacity': {
       default: 1,
-      ':hover': {'@media (hover: hover)': 0},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 0,
+      },
     },
     // Single-value dwell for the opacity-only blocks, which have no discrete
     // position to sequence.
     '--_fade-delay': {
       default: '0s',
-      ':hover': {'@media (hover: hover)': HOVER_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': HOVER_DELAY,
+      },
       ':focus-within': '0s',
       '@media (any-pointer: coarse)': '0s',
     },
@@ -87,35 +99,47 @@ export const styles = stylex.create({
   stateInactive: {
     '--_reveal-opacity': {
       default: 0,
-      ':hover': {'@media (hover: hover)': 0},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 0,
+      },
       ':focus-within': 1,
       '@media (any-pointer: coarse)': 1,
     },
     '--_reveal-position': {
       default: 'absolute',
-      ':hover': {'@media (hover: hover)': 'absolute'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 'absolute',
+      },
       ':focus-within': 'static',
       '@media (any-pointer: coarse)': 'static',
     },
     '--_reveal-delay': {
       default: REST_DELAY,
-      ':hover': {'@media (hover: hover)': REST_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': REST_DELAY,
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_reveal-delay-reduced': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': '0s, 0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s, 0s',
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_conceal-opacity': {
       default: 1,
-      ':hover': {'@media (hover: hover)': 1},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 1,
+      },
     },
     '--_fade-delay': {
       default: '0s',
-      ':hover': {'@media (hover: hover)': '0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s',
+      },
       ':focus-within': '0s',
       '@media (any-pointer: coarse)': '0s',
     },
@@ -126,35 +150,47 @@ export const styles = stylex.create({
   stateActive: {
     '--_reveal-opacity': {
       default: 1,
-      ':hover': {'@media (hover: hover)': 1},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 1,
+      },
       ':focus-within': 1,
       '@media (any-pointer: coarse)': 1,
     },
     '--_reveal-position': {
       default: 'static',
-      ':hover': {'@media (hover: hover)': 'static'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 'static',
+      },
       ':focus-within': 'static',
       '@media (any-pointer: coarse)': 'static',
     },
     '--_reveal-delay': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': '0s, 0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s, 0s',
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_reveal-delay-reduced': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': '0s, 0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s, 0s',
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_conceal-opacity': {
       default: 0,
-      ':hover': {'@media (hover: hover)': 0},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 0,
+      },
     },
     '--_fade-delay': {
       default: '0s',
-      ':hover': {'@media (hover: hover)': '0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s',
+      },
       ':focus-within': '0s',
       '@media (any-pointer: coarse)': '0s',
     },

package/src/hooks/scrollbarGutter.test.ts

@@ -0,0 +1,167 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file scrollbarGutter.test.ts
+ * @input Uses vitest and a stubbed viewport + element box (jsdom does no layout)
+ * @output Unit tests for holdScrollbarGutter
+ * @position Testing; validates scrollbarGutter.ts implementation
+ *
+ * SYNC: When scrollbarGutter.ts changes, update tests to match new behavior
+ */
+
+import {afterEach, describe, expect, it} from 'vitest';
+import {holdScrollbarGutter} from './scrollbarGutter';
+
+/**
+ * jsdom does no layout, so both halves of the measurement are stubbed: the
+ * viewport (`innerWidth` vs `documentElement.clientWidth`) and the element's
+ * own box, which `widths` reads from and a test flips to simulate the lock
+ * widening it.
+ */
+function stub({
+  innerWidth,
+  clientWidth,
+  widths,
+}: {
+  innerWidth: number;
+  clientWidth: number;
+  widths?: () => number;
+}) {
+  Object.defineProperty(window, 'innerWidth', {
+    value: innerWidth,
+    configurable: true,
+    writable: true,
+  });
+  Object.defineProperty(document.documentElement, 'clientWidth', {
+    value: clientWidth,
+    configurable: true,
+  });
+  if (widths) {
+    document.body.getBoundingClientRect = () => ({width: widths()}) as DOMRect;
+  }
+}
+
+const rootGutter = () => document.documentElement.style.scrollbarGutter;
+
+describe('holdScrollbarGutter', () => {
+  afterEach(() => {
+    document.body.style.cssText = '';
+    document.documentElement.style.cssText = '';
+    // @ts-expect-error -- drop the stubs so jsdom's own values come back
+    delete document.documentElement.clientWidth;
+    // @ts-expect-error -- restore the prototype's implementation
+    delete document.body.getBoundingClientRect;
+  });
+
+  it('holds the gutter open when a space-taking scrollbar is about to be hidden', () => {
+    // A 1024px window over a 1009px layout viewport = a 15px classic scrollbar.
+    stub({innerWidth: 1024, clientWidth: 1009});
+
+    const hold = holdScrollbarGutter(document.body);
+
+    expect(rootGutter()).toBe('stable');
+
+    hold.settle();
+    hold.release();
+
+    expect(rootGutter()).toBe('');
+  });
+
+  it('leaves an overlay scrollbar alone — there is no gutter to hold', () => {
+    stub({innerWidth: 1024, clientWidth: 1024});
+
+    const hold = holdScrollbarGutter(document.body);
+    hold.settle();
+
+    expect(rootGutter()).toBe('');
+    expect(document.body.style.paddingRight).toBe('');
+
+    hold.release();
+  });
+
+  it('does not pad when holding the gutter kept the element still', () => {
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => 1009});
+
+    const hold = holdScrollbarGutter(document.body);
+    hold.settle();
+
+    expect(rootGutter()).toBe('stable');
+    expect(document.body.style.paddingRight).toBe('');
+
+    hold.release();
+  });
+
+  it('falls back to padding when the element grew anyway', () => {
+    // What an engine without scrollbar-gutter support does: the gutter request
+    // is ignored, the scrollbar goes away, and the element widens by 15px.
+    let width = 1009;
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
+
+    const hold = holdScrollbarGutter(document.body);
+    width = 1024;
+    hold.settle();
+
+    expect(document.body.style.paddingRight).toBe('15px');
+
+    hold.release();
+
+    expect(document.body.style.paddingRight).toBe('');
+  });
+
+  it("adds to the page's own padding instead of replacing it", () => {
+    let width = 1009;
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
+    document.body.style.paddingRight = '24px';
+
+    const hold = holdScrollbarGutter(document.body);
+    width = 1024;
+    hold.settle();
+
+    expect(document.body.style.paddingRight).toBe('39px');
+
+    hold.release();
+
+    expect(document.body.style.paddingRight).toBe('24px');
+  });
+
+  it('restores the page\u2019s own scrollbar-gutter rather than clearing it', () => {
+    stub({innerWidth: 1024, clientWidth: 1009});
+    document.documentElement.style.scrollbarGutter = 'stable both-edges';
+
+    const hold = holdScrollbarGutter(document.body);
+
+    expect(rootGutter()).toBe('stable');
+
+    hold.settle();
+    hold.release();
+
+    expect(rootGutter()).toBe('stable both-edges');
+  });
+
+  it('settles once, however many times it is called', () => {
+    let width = 1009;
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
+
+    const hold = holdScrollbarGutter(document.body);
+    width = 1024;
+    hold.settle();
+    hold.settle();
+    hold.settle();
+
+    expect(document.body.style.paddingRight).toBe('15px');
+
+    hold.release();
+  });
+
+  it('does nothing where there is no layout to measure', () => {
+    stub({innerWidth: 1024, clientWidth: 0});
+
+    const hold = holdScrollbarGutter(document.body);
+    hold.settle();
+
+    expect(rootGutter()).toBe('');
+    expect(document.body.style.paddingRight).toBe('');
+
+    hold.release();
+  });
+});