@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/HoverCard/useHoverCard.tsx

@@ -5,7 +5,7 @@
 /**
  * @file useHoverCard.ts
  * @input Uses useLayer, useTouchTrigger, React hooks
- * @output Exports useHoverCard hook for hover/focus/tap triggered layers
+ * @output Exports useHoverCard hook with stable trigger refs for hover/focus/tap layers
  * @position Layer hook; builds on useLayer for hover card behavior
  *
  * SYNC: When modified, update:
@@ -295,6 +295,21 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     onShow,
     onHide,
   });
+  // Destructure the layer and touch objects once: both are rebuilt every
+  // render, but their members are stable. Depending on the members instead of
+  // the enclosing objects keeps the refs below identity-stable across
+  // unchanged rerenders, so React never detaches and re-attaches the trigger
+  // (and never rewrites the trigger's `anchor-name`) while the card streams
+  // alongside it.
+  const {
+    ref: layerRef,
+    anchorId: layerAnchorId,
+    show: showLayer,
+    hide: hideLayer,
+    isOpen: isLayerOpen,
+    id: layerId,
+    render: renderLayer,
+  } = layer;
 
   const popoverXstyle = styles.container;
 
@@ -321,21 +336,27 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
   // passing across the trigger, and a tap is never that.
   const showNow = useCallback(() => {
     clearTimeouts();
-    layer.show();
-  }, [clearTimeouts, layer]);
+    showLayer();
+  }, [clearTimeouts, showLayer]);
 
   const hideNow = useCallback(() => {
     clearTimeouts();
     isHoveringContentRef.current = false;
-    layer.hide();
-  }, [clearTimeouts, layer]);
+    hideLayer();
+  }, [clearTimeouts, hideLayer]);
 
-  const touch = useTouchTrigger({
+  const {
+    isTouchPointerRef,
+    isTouchInteraction,
+    handlePointerEnter,
+    handlePointerDown: handleTouchPointerDown,
+    clearTapOpen,
+  } = useTouchTrigger({
     touchTrigger,
     isEnabled,
     isControlled: isOpen !== undefined,
-    isOpen: layer.isOpen,
-    layerId: layer.id,
+    isOpen: isLayerOpen,
+    layerId: layerId,
     triggerRef,
     show: showNow,
     hide: hideNow,
@@ -348,9 +369,9 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     }
     clearTimeouts();
     showTimeoutRef.current = setTimeout(() => {
-      layer.show();
+      showLayer();
     }, delay);
-  }, [isEnabled, isOpen, clearTimeouts, layer, delay]);
+  }, [isEnabled, isOpen, clearTimeouts, showLayer, delay]);
 
   // Schedule hide with delay (suppressed when isOpen is true)
   const scheduleHide = useCallback(() => {
@@ -361,37 +382,37 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     hideTimeoutRef.current = setTimeout(() => {
       // Don't hide if hovering content
       if (!isHoveringContentRef.current) {
-        layer.hide();
+        hideLayer();
       }
     }, hideDelay);
-  }, [isOpen, clearTimeouts, layer, hideDelay]);
+  }, [isOpen, clearTimeouts, hideLayer, hideDelay]);
 
   // Event handlers
   const handleMouseEnter = useCallback(() => {
     // A tap synthesizes mouseenter. On touch the tap path owns the decision,
     // so hover must not also fire — without this a hover card opens on every
     // tap of its trigger and has nothing to close it.
-    if (touch.isTouchPointerRef.current) {
+    if (isTouchPointerRef.current) {
       return;
     }
     scheduleShow();
-  }, [touch, scheduleShow]);
+  }, [isTouchPointerRef, scheduleShow]);
 
   const handleMouseLeave = useCallback(() => {
     // On touch the synthesized mouseleave arrives with the next tap elsewhere,
     // which the outside-tap dismissal already handles.
-    if (touch.isTouchPointerRef.current) {
+    if (isTouchPointerRef.current) {
       return;
     }
     scheduleHide();
-  }, [touch, scheduleHide]);
+  }, [isTouchPointerRef, scheduleHide]);
 
   // Tap-to-open on touch; on a mouse this does nothing and hover still rules.
   const handlePointerDown = useCallback(
     (event: PointerEvent) => {
-      touch.handlePointerDown(event);
+      handleTouchPointerDown(event);
     },
-    [touch],
+    [handleTouchPointerDown],
   );
 
   const handleFocusIn = useCallback(() => {
@@ -401,7 +422,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     // A tap focuses the trigger it activates. Opening on that focus would
     // reinstate exactly the behavior the touch path just decided against —
     // and on an action trigger it covers the thing the user tapped.
-    if (touch.isTouchInteraction()) {
+    if (isTouchInteraction()) {
       return;
     }
     // Skip showing if we're in the middle of an Escape dismiss
@@ -410,14 +431,14 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       return;
     }
     clearTimeouts();
-    layer.show();
-  }, [isEnabled, touch, clearTimeouts, layer]);
+    showLayer();
+  }, [isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
 
   const handleFocusOut = useCallback(
     (e: FocusEvent) => {
       // Check if focus is moving to the hover card content
       const relatedTarget = e.relatedTarget as HTMLElement | null;
-      const popoverElement = document.getElementById(layer.id);
+      const popoverElement = document.getElementById(layerId);
 
       if (popoverElement?.contains(relatedTarget)) {
         // Focus moving into hover card, keep it open
@@ -426,7 +447,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
 
       scheduleHide();
     },
-    [layer.id, scheduleHide],
+    [layerId, scheduleHide],
   );
 
   // Escape dismissal (WCAG 1.4.13) goes through the shared layer stack: a
@@ -453,7 +474,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       const el =
         typeof document === 'undefined'
           ? null
-          : document.getElementById(layer.id);
+          : document.getElementById(layerId);
       if (el == null) {
         return false;
       }
@@ -462,12 +483,12 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       } catch {
         // Browsers without the Popover API (and some test environments) cannot
         // answer the selector; fall back to the hook's own state.
-        return layer.isOpen;
+        return isLayerOpen;
       }
     },
     onDismiss: () => {
       clearTimeouts();
-      touch.clearTapOpen();
+      clearTapOpen();
       // Controlled: report and stop. The close — and the focus restore that
       // goes with it — happens in the controlled effect if and when the
       // consumer flips `isOpen`.
@@ -485,9 +506,9 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       const card =
         typeof document === 'undefined'
           ? null
-          : document.getElementById(layer.id);
+          : document.getElementById(layerId);
       const hadFocus = card?.contains(document.activeElement) ?? false;
-      layer.hide();
+      hideLayer();
       if (hadFocus) {
         isEscapeDismissingRef.current = true;
         triggerRef.current?.focus();
@@ -496,7 +517,6 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
   });
 
   // Interaction ref that handles event listeners only
-  const {handlePointerEnter} = touch;
   const interactionRef: RefCallback<HTMLElement> = useCallback(
     (el: HTMLElement | null) => {
       // Cleanup previous element
@@ -554,10 +574,10 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
   // Combined ref - shorthand for calling both positionRef and interactionRef
   const ref: RefCallback<HTMLElement> = useCallback(
     (el: HTMLElement | null) => {
-      layer.ref(el);
+      layerRef(el);
       interactionRef(el);
     },
-    [layer, interactionRef],
+    [layerRef, interactionRef],
   );
 
   // Cleanup on unmount
@@ -570,7 +590,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
   // Show on mount when isDefaultOpen is true
   useEffect(() => {
     if (isDefaultOpen) {
-      layer.show();
+      showLayer();
     }
     // eslint-disable-next-line @eslint-react/exhaustive-deps -- intentionally only on mount
   }, []);
@@ -582,7 +602,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     }
     if (isOpen) {
       clearTimeouts();
-      layer.show();
+      showLayer();
     } else {
       clearTimeouts();
       // A consumer closing the card while it holds focus would strand focus on
@@ -591,15 +611,15 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       const card =
         typeof document === 'undefined'
           ? null
-          : document.getElementById(layer.id);
+          : document.getElementById(layerId);
       const hadFocus = card?.contains(document.activeElement) ?? false;
-      layer.hide();
+      hideLayer();
       if (hadFocus) {
         isEscapeDismissingRef.current = true;
         triggerRef.current?.focus();
       }
     }
-  }, [isOpen, clearTimeouts, layer]);
+  }, [isOpen, clearTimeouts, showLayer, hideLayer, layerId]);
 
   // Render function that wraps layer.render with hover card behavior
   const renderHoverCard = useCallback(
@@ -636,20 +656,20 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
         as: 'div' as const,
       };
 
-      return layer.render(
+      return renderLayer(
         <div
           {...stylex.props(styles.content)}
           onMouseEnter={() => {
             // Touch synthesizes these over the card too; letting a tap inside
             // register as "hovering content" would block every later hide.
-            if (touch.isTouchPointerRef.current) {
+            if (isTouchPointerRef.current) {
               return;
             }
             isHoveringContentRef.current = true;
             clearTimeouts();
           }}
           onMouseLeave={() => {
-            if (touch.isTouchPointerRef.current) {
+            if (isTouchPointerRef.current) {
               return;
             }
             isHoveringContentRef.current = false;
@@ -679,27 +699,27 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
       );
     },
     [
-      layer,
+      renderLayer,
       placement,
       alignment,
       label,
       clearTimeouts,
       scheduleHide,
       popoverXstyle,
-      touch,
+      isTouchPointerRef,
     ],
   );
 
   return {
     ref,
-    positionRef: layer.ref,
+    positionRef: layerRef,
     interactionRef,
-    anchorId: layer.anchorId,
-    id: layer.id,
-    describedBy: layer.id,
-    isOpen: layer.isOpen,
+    anchorId: layerAnchorId,
+    id: layerId,
+    describedBy: layerId,
+    isOpen: isLayerOpen,
     renderHoverCard,
-    show: layer.show,
-    hide: layer.hide,
+    show: showLayer,
+    hide: hideLayer,
   };
 }

package/src/InputGroup/InputGroup.doc.mjs

@@ -30,7 +30,7 @@ export const docs = {
       name: 'children',
       type: 'ReactNode',
       description:
-        'InputGroupText and compatible input children: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector, or MultiSelector.',
+        'InputGroupText, Button addons, and compatible input children: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector, or MultiSelector.',
       required: true,
     },
     {
@@ -110,6 +110,11 @@ export const docs = {
         description:
           'Use InputGroupText for static prefixes/suffixes like "$", "kg", or "https://".',
       },
+      {
+        guidance: true,
+        description:
+          'Use Button for an action attached to the input; InputGroup connects its corners automatically.',
+      },
       {
         guidance: true,
         description:
@@ -181,6 +186,11 @@ export const docsDense = {
         description:
           'Use InputGroupText for static prefixes/suffixes like "$", "kg", or "https://".',
       },
+      {
+        guidance: true,
+        description:
+          'Use Button for an action attached to the input; InputGroup connects its corners automatically.',
+      },
       {
         guidance: true,
         description:

package/src/InputGroup/InputGroup.tsx

@@ -8,10 +8,8 @@
  * @output Exports InputGroup component with group label/description ARIA wiring
  * @position Groups input with prefix/suffix addons; consumed by index.ts
  *
- * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
- * Selector, MultiSelector) consume the InputGroup context
- * to remove their own border/radius so the group container provides
- * the unified border treatment.
+ * Compatible input children consume InputGroup context to remove competing
+ * border/radius geometry. Button addons consume it to join the same outer shape.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/InputGroup/InputGroup.doc.mjs

package/src/InputGroup/groupStyles.ts

@@ -3,8 +3,8 @@
 /**
  * @file groupStyles.ts
  * @input Uses StyleX, theme tokens, and layer-aware group end-cap selectors
- * @output Exports shared group-aware styles for input components
- * @position Shared styles consumed by InputGroup-compatible controls
+ * @output Exports shared group-aware styles for InputGroup children
+ * @position Shared styles consumed by InputGroup-compatible controls and addons
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -15,7 +15,45 @@ import {radiusVars, borderVars} from '../theme/tokens.stylex';
 // are not visual group members; skip them when finding the trailing edge.
 const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template):not(dialog)))';
 
+// Button consumes InputGroup context anywhere below the group, including buttons
+// inside an input's own implementation. Keep the visual adaptation on direct
+// children so internal clear, calendar, and disclosure actions stay unchanged.
+const DIRECT_INPUT_GROUP_ADDON = ':where(.astryx-input-group > *)';
+const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE =
+  ':where(.astryx-input-group > *):focus-visible';
+const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST =
+  ':where(.astryx-input-group > *):not(:first-child)';
+const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER =
+  ':where(.astryx-input-group > *):has(~ *:not([popover]):not(template):not(dialog))';
+
 export const groupStyles = stylex.create({
+  buttonAddon: {
+    borderStartStartRadius: {
+      default: null,
+      [DIRECT_INPUT_GROUP_ADDON_NOT_FIRST]: 0,
+    },
+    borderEndStartRadius: {
+      default: null,
+      [DIRECT_INPUT_GROUP_ADDON_NOT_FIRST]: 0,
+    },
+    borderStartEndRadius: {
+      default: null,
+      [DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER]: 0,
+    },
+    borderEndEndRadius: {
+      default: null,
+      [DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER]: 0,
+    },
+    height: {
+      default: null,
+      [DIRECT_INPUT_GROUP_ADDON]: '100%',
+    },
+    // Keep the keyboard ring above the adjacent group member at the shared edge.
+    zIndex: {
+      default: null,
+      [DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE]: 2,
+    },
+  },
   inGroup: {
     flex: 1,
     minWidth: 0,

package/src/Layer/useLayerDismissal.ts

@@ -96,16 +96,16 @@ export interface UseLayerDismissalReturn {
  *
  * The layer does NOT attach a key listener — the stack owns one listener and
  * routes each Escape press to the top-most REGISTERED layer, so one press
- * dismisses exactly one of them. Dialog (and what is built on it), Popover and
- * the menus built on it, Tooltip, HoverCard, Lightbox, MobileNav, BottomSheet,
- * BottomSheetSwitcher and lab's `Drawer` register today.
+ * dismisses exactly one of them. Dialog (and what is built on it, including
+ * CommandPalette), Popover and the menus built on it, ContextMenu, Tooltip,
+ * HoverCard, Lightbox, MobileNav, BottomSheet, BottomSheetSwitcher and lab's
+ * `Drawer` register today.
  *
- * `CommandPalette`, `ContextMenu`, `DropdownMenuSubMenu`, and
- * `PowerSearchEditPopover` still run their own Escape listeners. They stay safe
- * next to the stack only because each claims the press at element level, and the
- * stack stands down on an already-`defaultPrevented` press — but a registered
- * layer opened inside one of them does not get the press. Migrating them is the
- * fix.
+ * `DropdownMenuSubMenu` and `PowerSearchEditPopover` still run their own Escape
+ * listeners. They stay safe next to the stack only because each claims the press
+ * at element level, and the stack stands down on an already-`defaultPrevented`
+ * press — but a registered layer opened inside one of them does not get the
+ * press. Migrating them is the fix.
  *
  * Wrap the layer's own content in `LayerDepthProvider` so anything opened from
  * inside it registers as nested.

package/src/Link/__tests__/Link.a11y.chromium.spec.ts

@@ -0,0 +1,142 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Real-browser and accessibility-tree binding evidence for Link.
+ *
+ * A link's activation leaves no trace on the link, so the binding counts every
+ * navigation the story requests: native navigations through the browser's
+ * Navigation API (cancelled, so the story stays mounted), router navigations
+ * the story's router component records, and new tabs the page opens.
+ */
+
+import {expect, test, type CDPSession, type Page} from '@playwright/test';
+import {
+  LINK_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {LINK_A11Y_STATES, type LinkA11yRow} from './Link.a11y.states';
+
+const SUBJECT_SELECTOR = '[data-a11y-link]';
+const NEW_TAB_SETTLE_MS = 500;
+let storybook: StaticServer;
+
+interface NavigationWindow extends Window {
+  __a11yLinkNavigations?: number;
+}
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => storybook?.close());
+
+function storyUrl(id: string): string {
+  return `${storybook.origin}/iframe.html?id=${id}&viewMode=story`;
+}
+
+async function countNavigations(
+  page: Page,
+  opensNewTab: boolean,
+): Promise<() => Promise<number>> {
+  let newTabs = 0;
+  page.context().on('page', opened => {
+    newTabs += 1;
+    void opened.close();
+  });
+  await page.evaluate(() => {
+    const target = window as NavigationWindow & {navigation: EventTarget};
+    target.__a11yLinkNavigations = 0;
+    target.navigation.addEventListener('navigate', event => {
+      target.__a11yLinkNavigations = (target.__a11yLinkNavigations ?? 0) + 1;
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    });
+  });
+  return async () => {
+    // A new tab reaches the test through the browser's target events, after
+    // the click or key that opened it has returned. Give it time to arrive so
+    // a later reading cannot miss a navigation an earlier one started.
+    if (opensNewTab) {
+      await page.waitForTimeout(NEW_TAB_SETTLE_MS);
+    }
+    const inPage = await page.evaluate(
+      () => (window as NavigationWindow).__a11yLinkNavigations ?? 0,
+    );
+    return inPage + newTabs;
+  };
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: LinkA11yRow,
+): Promise<BindingResult> {
+  let navigations: () => Promise<number> = async () => {
+    throw new Error('the Link story was not mounted');
+  };
+  return checkAccessibilitySpec({
+    spec: LINK_PATTERN,
+    binding: 'Link',
+    state: state.id,
+    facts: state.facts,
+    mount: async () => {
+      await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+      await holdMotionStill(page);
+      const subject = page.locator(SUBJECT_SELECTOR);
+      await subject.waitFor({state: 'visible'});
+      await expect(subject).toHaveCount(1);
+      navigations = await countNavigations(
+        page,
+        state.id === 'external-new-tab',
+      );
+      return createChromiumHarness({page, cdp, subject});
+    },
+    activations: async () => navigations(),
+  });
+}
+
+test('every Link expectation is exercised by at least one Link state', async ({
+  page,
+}) => {
+  // Mounts every state in one test, so it gets every state's time budget.
+  test.setTimeout(30_000 * LINK_A11Y_STATES.length);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of LINK_A11Y_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+});
+
+for (const state of LINK_A11Y_STATES) {
+  test(`Link [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(LINK_PATTERN, [result]);
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(
+      result.results
+        .filter(row => row.status === 'fail')
+        .map(row => `${row.expectation}: ${row.detail ?? ''}`),
+    ).toEqual([]);
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}

package/src/Link/__tests__/Link.a11y.renders.tsx

@@ -0,0 +1,97 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/** Stable Link renders shared by jsdom, Storybook, and Chromium. */
+
+import type {ComponentProps, MouseEvent, ReactElement} from 'react';
+import {Icon} from '../../Icon';
+import {Link} from '../Link';
+import {LinkProvider} from '../LinkProvider';
+import {LINK_A11Y_DESTINATION, type LinkA11yRow} from './Link.a11y.states';
+
+interface NavigationWindow extends Window {
+  __a11yLinkNavigations?: number;
+}
+
+/**
+ * A minimal client-side router link. It takes over activation the way router
+ * links do — cancel the browser navigation, then navigate itself — and counts
+ * each navigation on the window, where the browser binding reads it.
+ */
+function RouterLink({onClick, children, ...props}: ComponentProps<'a'>) {
+  const navigate = (event: MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    const target = window as NavigationWindow;
+    target.__a11yLinkNavigations = (target.__a11yLinkNavigations ?? 0) + 1;
+  };
+  return (
+    // eslint-disable-next-line @astryx/no-hardcoded-anchor -- this stands in for a third-party router's own anchor, which Link receives through LinkProvider and `as`.
+    <a {...props} data-a11y-link-router onClick={navigate}>
+      {children}
+    </a>
+  );
+}
+
+/** A tab stop after the link, so focus has somewhere to go when it leaves. */
+function Frame({children}: {children: ReactElement}) {
+  return (
+    <div>
+      {children}
+      <button type="button">After</button>
+    </div>
+  );
+}
+
+export const LINK_A11Y_RENDERS: Readonly<
+  Record<LinkA11yRow['id'], () => ReactElement>
+> = {
+  'text-native': () => (
+    <Frame>
+      <Link data-a11y-link href={LINK_A11Y_DESTINATION}>
+        Documentation
+      </Link>
+    </Frame>
+  ),
+  'icon-labelled': () => (
+    <Frame>
+      <Link data-a11y-link href={LINK_A11Y_DESTINATION} label="Close dialog">
+        <Icon icon="close" />
+      </Link>
+    </Frame>
+  ),
+  'current-page': () => (
+    <Frame>
+      <Link aria-current="page" data-a11y-link href={LINK_A11Y_DESTINATION}>
+        Overview
+      </Link>
+    </Frame>
+  ),
+  'external-new-tab': () => (
+    <Frame>
+      <Link data-a11y-link href={LINK_A11Y_DESTINATION} isExternalLink>
+        GitHub
+      </Link>
+    </Frame>
+  ),
+  'provider-router': () => (
+    <LinkProvider component={RouterLink}>
+      <Frame>
+        <Link data-a11y-link href="/projects">
+          Projects
+        </Link>
+      </Frame>
+    </LinkProvider>
+  ),
+  'as-router': () => (
+    <Frame>
+      <Link as={RouterLink} data-a11y-link href="/settings">
+        Settings
+      </Link>
+    </Frame>
+  ),
+};