@astryxdesign/lab 0.1.9-canary.fef7dca → 0.2.0-canary.210e195

package/dist/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @file BottomSheet.tsx
+ * @input Uses React, StyleX, theme tokens, Drawer, useSheetGestures, themeProps
+ * @output Exports BottomSheet component and BottomSheetProps
+ * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
+ *
+ * A mobile touch surface that rises from the bottom edge with a grab handle
+ * and swipe-to-dismiss. Built ON TOP OF the lab Drawer's native `<dialog>`
+ * engine (`side="bottom"`) rather than forking it — Drawer owns
+ * showModal/show, the open/close slide animation, focus trap + restore,
+ * scroll lock, the Escape/scrim contract, and the LIFO overlay registry.
+ * BottomSheet layers the grab handle and the drag-to-dismiss gesture on top,
+ * inside the dialog.
+ *
+ * The gesture translate is applied to an inner sheet wrapper, not the
+ * `<dialog>` itself, so Drawer owns the open/close slide and the drag
+ * translates within it without the two transforms fighting.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs (props table, features, usage)
+ * - /packages/lab/src/BottomSheet/BottomSheet.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/BottomSheet/index.ts (exports if types change)
+ * - /apps/storybook/stories/BottomSheet.stories.tsx (examples and visual coverage)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+/**
+ * Height budget for each named size. `medium`/`tall` track the viewport so
+ * the sheet scales with the device; `short` is a fixed peek height. `auto`
+ * is handled separately (fits content, capped at the `tall` budget).
+ */
+declare const HEIGHT_BUDGETS: {
+    readonly short: "240px";
+    readonly medium: "50dvh";
+    readonly tall: "90dvh";
+    readonly auto: "90dvh";
+};
+export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
+export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
+    /** Ref forwarded to the underlying <dialog> element. */
+    ref?: React.Ref<HTMLDialogElement>;
+    /** Whether the sheet is open. Fully controlled — pair with `onOpenChange`. */
+    isOpen: boolean;
+    /**
+     * Called when the sheet opens or closes. The boolean is the requested
+     * next state (`false` on Escape, scrim click, or a swipe past the dismiss
+     * threshold). The caller owns the open state.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Accessible label for the sheet (required — the sheet has no built-in
+     * heading to derive a name from).
+     */
+    label: string;
+    /** Sheet content, rendered below the grab handle in a scrollable area. */
+    children: ReactNode;
+    /**
+     * How tall the sheet is:
+     * - `'short'` — a fixed peek height
+     * - `'medium'` — half the viewport
+     * - `'tall'` — nearly the full viewport
+     * - `'auto'` — fits its content, capped at the `'tall'` budget
+     *
+     * On viewports shorter than the budget the sheet fills the available
+     * height.
+     * @default 'medium'
+     */
+    height?: BottomSheetHeight;
+    /** Test ID for the root element. */
+    'data-testid'?: string;
+}
+/**
+ * A mobile touch sheet that rises from the bottom edge, with a grab handle
+ * and swipe-to-dismiss. Built on the lab Drawer's `<dialog>` engine
+ * (`side="bottom"`): Drawer owns the open/close slide, focus trap + restore,
+ * scroll lock, and the Escape/scrim contract, while BottomSheet layers the
+ * grab handle and drag-to-dismiss on top.
+ *
+ * @example
+ * ```
+ * const [isOpen, setIsOpen] = useState(false);
+ * <BottomSheet
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   label="Filters">
+ *   <FilterControls />
+ * </BottomSheet>
+ * ```
+ */
+export declare function BottomSheet({ isOpen, onOpenChange, label, children, height, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
+export declare namespace BottomSheet {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=BottomSheet.d.ts.map

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAUlD;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAoE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoClB;yBA5Ce,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -0,0 +1,150 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file BottomSheet.tsx
+ * @input Uses React, StyleX, theme tokens, Drawer, useSheetGestures, themeProps
+ * @output Exports BottomSheet component and BottomSheetProps
+ * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
+ *
+ * A mobile touch surface that rises from the bottom edge with a grab handle
+ * and swipe-to-dismiss. Built ON TOP OF the lab Drawer's native `<dialog>`
+ * engine (`side="bottom"`) rather than forking it — Drawer owns
+ * showModal/show, the open/close slide animation, focus trap + restore,
+ * scroll lock, the Escape/scrim contract, and the LIFO overlay registry.
+ * BottomSheet layers the grab handle and the drag-to-dismiss gesture on top,
+ * inside the dialog.
+ *
+ * The gesture translate is applied to an inner sheet wrapper, not the
+ * `<dialog>` itself, so Drawer owns the open/close slide and the drag
+ * translates within it without the two transforms fighting.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs (props table, features, usage)
+ * - /packages/lab/src/BottomSheet/BottomSheet.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/BottomSheet/index.ts (exports if types change)
+ * - /apps/storybook/stories/BottomSheet.stories.tsx (examples and visual coverage)
+ */
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, radiusVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { mergeProps, themeProps } from '@astryxdesign/core/utils';
+import { Drawer } from "../Drawer/index.js";
+import { useSheetGestures } from "./useSheetGestures.js";
+
+/**
+ * Height budget for each named size. `medium`/`tall` track the viewport so
+ * the sheet scales with the device; `short` is a fixed peek height. `auto`
+ * is handled separately (fits content, capped at the `tall` budget).
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HEIGHT_BUDGETS = {
+  short: '240px',
+  medium: '50dvh',
+  tall: '90dvh',
+  auto: '90dvh'
+};
+// Sheets on wide touch devices (tablets) shouldn't stretch edge to edge;
+// cap and center them. Matches the `sm` layout breakpoint. On phones the
+// viewport is narrower than this, so the sheet stays full-width.
+const MAX_SHEET_WIDTH = 640;
+const styles = {
+  sheet: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kAzted: "x2lwn1j",
+    kZKoxP: "x5yr21d",
+    kzqmXN: "xh8yej3",
+    ks0D6T: "x11gisft",
+    kUOVxO: "xvueqy4",
+    kWkggS: "x10xzikg",
+    krdFHd: "x183tx6i",
+    kfmiAY: "x663v1",
+    kVQacm: "xb3r6kr",
+    kGO01o: "x1a148e8",
+    k6sLGO: "x1so62im",
+    $$css: true
+  },
+  dialogSurface: {
+    kWkggS: "xjbqb8w",
+    kGVxlE: "x1gnnqk1",
+    kEafiO: "x972fbf",
+    $$css: true
+  },
+  autoHeight: {
+    kZKoxP: "xg7h5cd",
+    kskxy: "x1ismmbu",
+    $$css: true
+  }
+};
+/**
+ * A mobile touch sheet that rises from the bottom edge, with a grab handle
+ * and swipe-to-dismiss. Built on the lab Drawer's `<dialog>` engine
+ * (`side="bottom"`): Drawer owns the open/close slide, focus trap + restore,
+ * scroll lock, and the Escape/scrim contract, while BottomSheet layers the
+ * grab handle and drag-to-dismiss on top.
+ *
+ * @example
+ * ```
+ * const [isOpen, setIsOpen] = useState(false);
+ * <BottomSheet
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   label="Filters">
+ *   <FilterControls />
+ * </BottomSheet>
+ * ```
+ */
+export function BottomSheet({
+  isOpen,
+  onOpenChange,
+  label,
+  children,
+  height = 'medium',
+  xstyle,
+  ...props
+}) {
+  const close = () => onOpenChange(false);
+  const {
+    contentProps,
+    handleProps
+  } = useSheetGestures({
+    isOpen,
+    onDismiss: close
+  });
+  return /*#__PURE__*/_jsx(Drawer, {
+    isOpen: isOpen,
+    onClose: close,
+    side: "bottom",
+    size: HEIGHT_BUDGETS[height],
+    label: label,
+    hasScrim: true,
+    hasCloseButton: false,
+    xstyle: [styles.dialogSurface, height === 'auto' && styles.autoHeight],
+    ...props,
+    children: /*#__PURE__*/_jsxs("div", {
+      "data-astryx-sheet": "",
+      ...mergeProps(themeProps('bottom-sheet'), stylex.props(styles.sheet, xstyle), contentProps.style),
+      children: [/*#__PURE__*/_jsx("div", {
+        "data-astryx-sheet-handle": "",
+        ...{
+          className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xce4md1 x5ve5x3 x1jm3nie"
+        },
+        ...handleProps,
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x14qfxbe xqu0tyb xjspbzw x1m4xfpy"
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x1iyjqo2 x2lwn1j x1odjw0f xish69e"
+        },
+        children: children
+      })]
+    })
+  });
+}
+BottomSheet.displayName = 'BottomSheet';

package/dist/BottomSheet/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file index.ts
+ * @input BottomSheet.tsx
+ * @output Re-exports BottomSheet component and BottomSheetProps type
+ * @position Lab entry point for the BottomSheet directory
+ */
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
+//# sourceMappingURL=index.d.ts.map

package/dist/BottomSheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC"}

package/dist/BottomSheet/index.js

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input BottomSheet.tsx
+ * @output Re-exports BottomSheet component and BottomSheetProps type
+ * @position Lab entry point for the BottomSheet directory
+ */
+
+export { BottomSheet } from "./BottomSheet.js";

package/dist/BottomSheet/useSheetGestures.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @file useSheetGestures.ts
+ * @input Uses React (useCallback, useEffect, useMemo, useRef, useState)
+ * @output Exports useSheetGestures hook and its option/result types
+ * @position Internal to BottomSheet; not exported from the lab entry point
+ *
+ * Drag-to-dismiss machinery for the bottom sheet. Tracks a pointer drag
+ * down the block axis, translates the sliding surface live, and on release
+ * either dismisses (past a distance or velocity threshold) or springs back
+ * to fully open. Pointer-events based so one code path covers mouse + touch.
+ *
+ * Kept private to BottomSheet: the behavior is sheet-specific (a dismiss
+ * edge on a bottom-anchored surface). It is not a general primitive and is
+ * intentionally not exported.
+ *
+ * SSR-safe: no window/document access at module scope; all measurement
+ * happens inside handlers. Respects prefers-reduced-motion by skipping the
+ * settle transition.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/BottomSheet/useSheetGestures.doc.mjs
+ * - /packages/lab/src/BottomSheet/useSheetGestures.test.ts
+ */
+import { type CSSProperties, type PointerEvent as ReactPointerEvent } from 'react';
+export interface UseSheetGesturesOptions {
+    /** Whether the owning sheet is open. Drag state resets when it closes. */
+    isOpen: boolean;
+    /** Called when a drag crosses the dismiss threshold (distance or flick). */
+    onDismiss: () => void;
+}
+export interface SheetContentProps {
+    style: CSSProperties;
+}
+export interface SheetHandleProps {
+    style: CSSProperties;
+    onPointerDown: (event: ReactPointerEvent) => void;
+    onPointerMove: (event: ReactPointerEvent) => void;
+    onPointerUp: (event: ReactPointerEvent) => void;
+    onPointerCancel: (event: ReactPointerEvent) => void;
+}
+export interface UseSheetGesturesResult {
+    /** Spread on the sliding surface: live translate + touch-action guard. */
+    contentProps: SheetContentProps;
+    /** Spread on the grab-handle element: pointer drag handlers. */
+    handleProps: SheetHandleProps;
+    /** Current live drag offset in px (positive = dragged toward the edge). */
+    dragOffset: number;
+    /** Whether a drag is currently in progress. */
+    isDragging: boolean;
+}
+/**
+ * Drag-to-dismiss machinery for the bottom sheet. Returns props to spread on
+ * the grab handle and the sliding surface, plus live drag state for callers
+ * that want to drive their own animation.
+ *
+ * @example
+ * ```
+ * const {contentProps, handleProps} = useSheetGestures({
+ *   isOpen,
+ *   onDismiss: () => onOpenChange(false),
+ * });
+ * <div {...contentProps}>
+ *   <div {...handleProps} />
+ *   {children}
+ * </div>
+ * ```
+ */
+export declare function useSheetGestures({ isOpen, onDismiss, }: UseSheetGesturesOptions): UseSheetGesturesResult;
+//# sourceMappingURL=useSheetGestures.d.ts.map

package/dist/BottomSheet/useSheetGestures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,iBAAiB,EACvC,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,sBAAsB;IACrC,0EAA0E;IAC1E,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,2EAA2E;IAC3E,UAAU,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,GACV,EAAE,uBAAuB,GAAG,sBAAsB,CA4HlD"}

package/dist/BottomSheet/useSheetGestures.js

@@ -0,0 +1,163 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useSheetGestures.ts
+ * @input Uses React (useCallback, useEffect, useMemo, useRef, useState)
+ * @output Exports useSheetGestures hook and its option/result types
+ * @position Internal to BottomSheet; not exported from the lab entry point
+ *
+ * Drag-to-dismiss machinery for the bottom sheet. Tracks a pointer drag
+ * down the block axis, translates the sliding surface live, and on release
+ * either dismisses (past a distance or velocity threshold) or springs back
+ * to fully open. Pointer-events based so one code path covers mouse + touch.
+ *
+ * Kept private to BottomSheet: the behavior is sheet-specific (a dismiss
+ * edge on a bottom-anchored surface). It is not a general primitive and is
+ * intentionally not exported.
+ *
+ * SSR-safe: no window/document access at module scope; all measurement
+ * happens inside handlers. Respects prefers-reduced-motion by skipping the
+ * settle transition.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/BottomSheet/useSheetGestures.doc.mjs
+ * - /packages/lab/src/BottomSheet/useSheetGestures.test.ts
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// Fraction of the measured sheet height a drag must cross (with low
+// velocity) before release dismisses instead of springing back.
+const DISMISS_DISTANCE_RATIO = 0.25;
+// A quick flick past this speed (px/ms) dismisses regardless of distance.
+const DISMISS_VELOCITY = 0.5;
+function prefersReducedMotion() {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return false;
+  }
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Drag-to-dismiss machinery for the bottom sheet. Returns props to spread on
+ * the grab handle and the sliding surface, plus live drag state for callers
+ * that want to drive their own animation.
+ *
+ * @example
+ * ```
+ * const {contentProps, handleProps} = useSheetGestures({
+ *   isOpen,
+ *   onDismiss: () => onOpenChange(false),
+ * });
+ * <div {...contentProps}>
+ *   <div {...handleProps} />
+ *   {children}
+ * </div>
+ * ```
+ */
+export function useSheetGestures({
+  isOpen,
+  onDismiss
+}) {
+  const [dragOffset, setDragOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Latest callback ref so pointer handlers stay stable across renders.
+  const onDismissRef = useRef(onDismiss);
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  });
+
+  // Live drag bookkeeping (refs so pointermove doesn't churn renders).
+  const dragStateRef = useRef(null);
+
+  // Reset drag state each time the sheet re-opens.
+  useEffect(() => {
+    if (isOpen) {
+      setDragOffset(0);
+      setIsDragging(false);
+    }
+  }, [isOpen]);
+  const measureHeight = useCallback(el => {
+    const sheet = el?.closest('[data-astryx-sheet]') ?? el;
+    return sheet?.getBoundingClientRect().height ?? 0;
+  }, []);
+  const settleFromDrag = useCallback((offset, velocity, height) => {
+    const dismiss = offset > height * DISMISS_DISTANCE_RATIO || velocity > DISMISS_VELOCITY;
+    if (dismiss) {
+      onDismissRef.current();
+      return;
+    }
+    // Below threshold: spring back to fully open.
+    setDragOffset(0);
+  }, []);
+  const handlePointerDown = useCallback(event => {
+    const target = event.currentTarget;
+    target.setPointerCapture?.(event.pointerId);
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startCoord: event.clientY,
+      lastCoord: event.clientY,
+      lastTime: event.timeStamp,
+      velocity: 0,
+      height: measureHeight(target)
+    };
+    setIsDragging(true);
+  }, [measureHeight]);
+  const handlePointerMove = useCallback(event => {
+    const state = dragStateRef.current;
+    if (!state || state.pointerId !== event.pointerId) {
+      return;
+    }
+    // Dragging DOWN (increasing Y) collapses/dismisses. Only allow drag in
+    // the closing direction past the fully-open position (no overscroll).
+    const delta = event.clientY - state.startCoord;
+    const dt = event.timeStamp - state.lastTime;
+    if (dt > 0) {
+      state.velocity = (event.clientY - state.lastCoord) / dt;
+      state.lastCoord = event.clientY;
+      state.lastTime = event.timeStamp;
+    }
+    setDragOffset(Math.max(0, delta));
+  }, []);
+  const endDrag = useCallback(event => {
+    const state = dragStateRef.current;
+    if (!state || state.pointerId !== event.pointerId) {
+      return;
+    }
+    const target = event.currentTarget;
+    target.releasePointerCapture?.(event.pointerId);
+    const offset = Math.max(0, event.clientY - state.startCoord);
+    dragStateRef.current = null;
+    setIsDragging(false);
+    settleFromDrag(offset, state.velocity, state.height || 1);
+  }, [settleFromDrag]);
+
+  // Reduced motion skips the settle transition (snaps instantly).
+  const reducedMotion = useMemo(prefersReducedMotion, [isOpen]);
+  const contentProps = useMemo(() => ({
+    style: {
+      transform: dragOffset !== 0 ? `translateY(${dragOffset}px)` : undefined,
+      transition: isDragging || reducedMotion ? 'none' : undefined,
+      touchAction: 'none',
+      overscrollBehavior: 'contain'
+    }
+  }), [dragOffset, isDragging, reducedMotion]);
+  const handleProps = useMemo(() => ({
+    style: {
+      touchAction: 'none',
+      cursor: 'grab'
+    },
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: endDrag,
+    onPointerCancel: endDrag
+  }), [handlePointerDown, handlePointerMove, endDrag]);
+  return {
+    contentProps,
+    handleProps,
+    dragOffset,
+    isDragging
+  };
+}

package/dist/Chart/Chart.d.ts

@@ -5,6 +5,10 @@
  *
  * Handles the d3 margin convention: outer SVG at full size, inner <g> translated
  * by margins. Children receive scales and dimensions via context.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`), and small datasets are mirrored in a visually
+ * hidden data table so screen reader users can read the underlying values.
  */
 import { type ReactNode } from 'react';
 import type { ChartMargin } from './types';
@@ -58,6 +62,13 @@ export interface ChartProps {
      * interference on mobile.
      */
     interactive?: boolean;
+    /**
+     * Accessible name for the chart, announced by screen readers (the svg is
+     * exposed as `role="img"`). Defaults to an English description derived from
+     * the keys (e.g. "Chart of revenue by month") — pass a localized string to
+     * override.
+     */
+    label?: string;
     /** Chart contents — axes, marks, tooltips */
     children: ReactNode;
 }
@@ -73,5 +84,5 @@ export interface ChartProps {
  * </Chart>
  * ```
  */
-export declare function Chart({ data, xKey, yKeys, height, margin: marginOverride, yBaseline, yDomain: yDomainProp, xDomain: xDomainProp, interactive, children, }: ChartProps): import("react").JSX.Element;
+export declare function Chart({ data, xKey, yKeys, height, margin: marginOverride, yBaseline, yDomain: yDomainProp, xDomain: xDomainProp, interactive, label, children, }: ChartProps): import("react").JSX.Element;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,+BA6MZ"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA+OZ"}

package/dist/Chart/Chart.js

@@ -7,10 +7,15 @@
  *
  * Handles the d3 margin convention: outer SVG at full size, inner <g> translated
  * by margins. Children receive scales and dimensions via context.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`), and small datasets are mirrored in a visually
+ * hidden data table so screen reader users can read the underlying values.
  */
 
 import { useMemo, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import { scaleLinear, scaleBand } from 'd3-scale';
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { isBandScale } from "./utils.js";
 import { ChartProvider } from "./ChartContext.js";
 
@@ -28,6 +33,18 @@ const DEFAULT_MARGIN = {
   left: 48
 };
 
+/**
+ * Maximum number of data points (rows × series) for which the visually hidden
+ * data-table fallback is rendered. Beyond this a table is more noise than
+ * signal for screen reader users, so larger charts are name-only.
+ */
+const MAX_TABLE_POINTS = 100;
+
+/** Stringify a cell value for the hidden data table. */
+function tableCell(value) {
+  return value == null ? '' : String(value);
+}
+
 /**
  * Root chart container. Computes scales from data and provides them to children.
  *
@@ -50,6 +67,7 @@ export function Chart({
   yDomain: yDomainProp,
   xDomain: xDomainProp,
   interactive = false,
+  label,
   children
 }) {
   const containerRef = useRef(null);
@@ -215,11 +233,15 @@ export function Chart({
     touchAction: interactive ? 'none' : undefined,
     userSelect: interactive ? 'none' : undefined
   };
-  return /*#__PURE__*/_jsx("div", {
+  const accessibleLabel = label ?? `Chart of ${yKeys.join(', ')} by ${xKey}`;
+  const showDataTable = data.length > 0 && data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
+  return /*#__PURE__*/_jsxs("div", {
     ref: containerRef,
     style: containerStyle,
-    children: containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
+    children: [containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
       ref: svgRef,
+      role: "img",
+      "aria-label": accessibleLabel,
       width: containerWidth,
       height: height,
       style: interactive ? {
@@ -242,6 +264,32 @@ export function Chart({
           children: children
         })
       })]
-    })
+    }), showDataTable && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      children: /*#__PURE__*/_jsxs("table", {
+        children: [/*#__PURE__*/_jsx("caption", {
+          children: `${accessibleLabel} data`
+        }), /*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: xKey
+            }), yKeys.map(key => /*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: key
+            }, key))]
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: data.map((d, i) => /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "row",
+              children: tableCell(d[xKey])
+            }), yKeys.map(key => /*#__PURE__*/_jsx("td", {
+              children: tableCell(d[key])
+            }, key))]
+          }, i))
+        })]
+      })
+    })]
   });
 }