@kismet-ux/constellation 1.9.0 → 1.11.0

package/dist/ui/Dialog/dialog.js

@@ -6,10 +6,12 @@ import cn from 'clsx';
 import { XIcon } from 'lucide-react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import { prefersReducedMotion } from '../../hooks/use-motion.js';
 import { Slot } from '../../internal/slot.js';
 import { useAnimationState, DEFAULT_ANIMATION_DURATION } from '../../internal/use-animation-state.js';
 import { useFocusTrap } from '../../internal/use-focus-trap.js';
 import { useScrollLock } from '../../internal/use-scroll-lock.js';
+import { isInConstellationPortal } from '../../utils/portal.js';
 import s from './dialog.module.scss.js';
 
 const DialogContext = React.createContext(null);
@@ -51,15 +53,249 @@ function DialogClose({ asChild, onClick, children, ...props }) {
     return (jsx(Comp, { "data-slot": 'dialog-close', onClick: handleClick, ...props, children: children }));
 }
 // ── Overlay ──────────────────────────────────────────────
-function DialogOverlay({ className, ...props }) {
+function DialogOverlay({ className, passThrough = false, ...props }) {
     const { open, onOpenChange } = useDialog();
-    return (jsx("div", { "data-slot": 'dialog-overlay', "data-state": open ? 'open' : 'closed', className: cn(s['dialog-overlay'], className), onClick: () => onOpenChange(false), "aria-hidden": 'true', ...props }));
+    return (jsx("div", { "data-slot": 'dialog-overlay', "data-state": open ? 'open' : 'closed', "data-pass-through": passThrough ? '' : undefined, className: cn(s['dialog-overlay'], className), 
+        // A pass-through scrim cannot be clicked at all — the click goes to the
+        // page under it, and DialogContent's document listener decides.
+        onClick: passThrough ? undefined : () => onOpenChange(false), "aria-hidden": 'true', ...props }));
 }
-function DialogContent({ className, children, width = 'max', ...props }) {
+/**
+ * Grow from `origin` on open, and shrink back into it on close.
+ *
+ * The animation is CSS. JavaScript supplies only the one thing a stylesheet
+ * cannot know — where on screen the panel came from — and flips a modifier;
+ * the transition between the two states does everything else. Closing is the
+ * same two states in the other order, so the exit is the entrance backwards by
+ * construction rather than a second animation kept in step by hand.
+ *
+ * The phase is React state, not an attribute poked in an effect, and that
+ * matters: the panel has to be PAINTED once in its `from` state before it can
+ * transition out of it. Setting both in one frame collapses them and nothing
+ * moves — which is exactly how the contents ended up at full strength from the
+ * first frame instead of building in as the box grew.
+ */
+function useMorphFrom(origin, state, duration) {
+    const ref = React.useRef(null);
+    const restingRef = React.useRef(null);
+    /*
+     * `from` is a starting position, and someone who has asked for less motion
+     * never travels — so they open in the resting state directly. Starting them
+     * at `from` would leave the panel wearing the modifier that hides its own
+     * contents, with nothing scheduled to take it off.
+     */
+    const [phase, setPhase] = React.useState(origin && !prefersReducedMotion() ? 'from' : 'to');
+    const rectOf = React.useCallback(() => {
+        if (!origin)
+            return null;
+        if (origin instanceof DOMRect)
+            return origin;
+        const el = origin.current;
+        return el ? el.getBoundingClientRect() : null;
+    }, [origin]);
+    /*
+     * Both ends are absolute pixels with no transform. Interpolating between
+     * `left: 283px` and `left: 50%` while a `translate(-50%, -50%)` also changes
+     * is not a straight line, and it shows.
+     */
+    const settled = React.useRef(false);
+    /*
+     * Force the pending style changes to be recalculated NOW.
+     *
+     * Everything below happens inside one task, and the browser is free to
+     * coalesce it into a single recalculation — which would see only the end
+     * state and have nothing to animate between. Reading a computed length is
+     * what makes the intermediate state real. It has to be a genuine style read:
+     * `void el.offsetWidth` proved unreliable here, returning the pre-pin width.
+     */
+    const reflow = (el) => getComputedStyle(el).width;
+    const pin = (el, r) => {
+        if (!el || !r)
+            return;
+        el.style.left = `${r.left}px`;
+        el.style.top = `${r.top}px`;
+        el.style.width = `${r.width}px`;
+        el.style.height = `${r.height}px`;
+        el.style.transform = 'none';
+        // Written here rather than from React state so the flag and the geometry
+        // it describes are always set in the same breath. The stylesheet hangs the
+        // travel transition and `overflow: hidden` off it — both belong to a panel
+        // whose box is being driven from here, and neither to one at rest.
+        el.dataset.morphPinned = '';
+    };
+    /*
+     * Give the box back to the stylesheet.
+     *
+     * The panel travels between two measured rectangles, which means it spends
+     * the journey wearing an inline `width` and `height`. Those must not outlive
+     * the journey: a dialog whose content can change — a disclosure opening, a
+     * list growing, a field validating — was frozen at whatever it measured on
+     * open, and `overflow: hidden` then clipped whatever no longer fit, so the
+     * buttons at the foot of a card left the card.
+     *
+     * Released with transitions suppressed. The declaration that animates the
+     * travel goes away with the flag, but the base rule's `transition: all` does
+     * not, and a panel snapping from a pinned pixel height to `auto` is a change
+     * it will happily animate — badly, since `auto` is not interpolable and the
+     * intermediate frames come out as a jump.
+     */
+    const release = (el) => {
+        if (!el)
+            return;
+        el.style.transitionProperty = 'none';
+        for (const prop of ['left', 'top', 'width', 'height', 'transform']) {
+            el.style.removeProperty(prop);
+        }
+        delete el.dataset.morphPinned;
+        reflow(el);
+        el.style.removeProperty('transition-property');
+    };
+    /*
+     * A callback ref, not a layout effect, and that is the whole trick.
+     *
+     * The panel does not exist on the render that opens the dialog — the mount
+     * is one state update behind — so a layout effect keyed on the phase runs
+     * once against a null node and never fires again, because the phase has not
+     * changed by the time the element finally lands. Attaching the measurement
+     * to the node itself means it happens exactly when there is a node, which is
+     * the actual precondition.
+     */
+    const attach = React.useCallback((node) => {
+        ref.current = node;
+        if (!node || !origin || settled.current || prefersReducedMotion())
+            return;
+        // The resting box, read before anything is pinned: where the panel would
+        // sit on its own, and therefore where it is travelling to.
+        restingRef.current = node.getBoundingClientRect();
+        // A starting position must not animate into place.
+        node.style.transitionProperty = 'none';
+        pin(node, rectOf());
+        reflow(node);
+    }, [origin, rectOf]);
+    /*
+     * Leave `from` one paint later.
+     *
+     * A plain effect, not a layout effect: it runs AFTER the browser has
+     * painted, which is the requirement — the panel has to have been drawn at
+     * the tile's size once, or there is nothing to travel from.
+     */
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el || !origin || settled.current || state !== 'open' || prefersReducedMotion())
+            return;
+        el.style.removeProperty('transition-property');
+        /*
+         * Settle that removal on its own. A transition compares the style before a
+         * change with the style after it, and `transition-property: none` in the
+         * "before" half means no transition is generated at all — so restoring the
+         * property and moving the panel inside one recalculation animates nothing.
+         */
+        reflow(el);
+        settled.current = true;
+        setPhase('to');
+    }, [origin, state]);
+    /*
+     * The travel itself, in both directions, and the handover at each end.
+     *
+     * `to` pins the resting box and then lets go of it once the panel has
+     * arrived, so the dialog sizes to its content for as long as it is open.
+     * `from` has to put the box back before it can travel home — and it measures
+     * where the panel actually IS rather than trusting the rectangle recorded on
+     * open, because between the two the content may well have changed the height.
+     */
+    React.useLayoutEffect(() => {
+        if (!origin || !settled.current || prefersReducedMotion())
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        if (phase === 'from') {
+            // Freeze the panel exactly where it stands — mid-travel included, since
+            // a rect read during a transition is the animated position — and only
+            // then send it home, or there is no geometry to leave from.
+            const here = el.getBoundingClientRect();
+            el.style.transitionProperty = 'none';
+            pin(el, here);
+            reflow(el);
+            el.style.removeProperty('transition-property');
+            reflow(el);
+            pin(el, rectOf());
+            return;
+        }
+        pin(el, restingRef.current);
+        /*
+         * Hand the box back when the journey ends. `transitionend` is the honest
+         * signal, but it never fires for a property whose two ends are equal — a
+         * tile already the height of the panel, most obviously — so the timer is
+         * not a belt-and-braces fallback, it is the path taken whenever the panel
+         * did not have to travel in that dimension.
+         */
+        let done = false;
+        const finish = () => {
+            if (done)
+                return;
+            done = true;
+            release(el);
+        };
+        const onEnd = (e) => {
+            if (e.target === el && (e.propertyName === 'height' || e.propertyName === 'width'))
+                finish();
+        };
+        el.addEventListener('transitionend', onEnd);
+        const timer = window.setTimeout(finish, duration + 60);
+        return () => {
+            el.removeEventListener('transitionend', onEnd);
+            window.clearTimeout(timer);
+        };
+    }, [phase, origin, rectOf, duration]);
+    // Closing puts the modifier back, and the opening animation runs in reverse.
+    React.useLayoutEffect(() => {
+        if (origin && state === 'closed' && !prefersReducedMotion())
+            setPhase('from');
+    }, [state, origin]);
+    return { ref: attach, phase, duration };
+}
+function DialogContent({ className, children, width = 'max', origin, measure, overlay = 'blocking', style, ...props }) {
     const { open, onOpenChange, onAfterClose, titleId, descriptionId } = useDialog();
-    const { mounted, state } = useAnimationState(open, DEFAULT_ANIMATION_DURATION);
+    /*
+     * A morph travels further than a fade, so it needs longer — and the unmount
+     * timer has to use the SAME number, or the panel is torn out of the DOM
+     * part way through its exit.
+     */
+    const duration = origin ? 300 : DEFAULT_ANIMATION_DURATION;
+    const { mounted, state } = useAnimationState(open, duration);
+    const { ref: morphRef, phase: morphPhase } = useMorphFrom(origin, state, duration);
     const focusTrapRef = useFocusTrap(open);
-    useScrollLock(mounted);
+    const passThrough = overlay === 'pass-through';
+    // A live page behind the panel has to be scrollable, or half of what you can
+    // now click is out of reach.
+    useScrollLock(mounted && !passThrough);
+    /*
+     * With a scrim that cannot be clicked, dismissing is a document listener —
+     * the one thing the library otherwise refuses to do, because a native
+     * listener sees clicks React's tree never shows it.
+     *
+     * That is exactly why it works here. A handler on the page that calls
+     * `stopPropagation()` never reaches this, so an element can claim a click
+     * and keep the dialog open; anything that does not, dismisses. The check is
+     * on the panel itself rather than on the click's coordinates, so a Select or
+     * a menu portaled out of the panel keeps it open too.
+     */
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!open || !passThrough)
+            return undefined;
+        const onDocumentClick = (e) => {
+            const target = e.target;
+            if (!target || contentRef.current?.contains(target))
+                return;
+            if (isInConstellationPortal(target))
+                return;
+            onOpenChange(false);
+        };
+        document.addEventListener('click', onDocumentClick);
+        return () => document.removeEventListener('click', onDocumentClick);
+    }, [open, passThrough, onOpenChange]);
     const wasClosingRef = React.useRef(false);
     const onAfterCloseRef = React.useRef(onAfterClose);
     onAfterCloseRef.current = onAfterClose;
@@ -88,8 +324,21 @@ function DialogContent({ className, children, width = 'max', ...props }) {
     }, [open, onOpenChange]);
     if (!mounted || state === 'idle')
         return null;
-    const widthClass = width === 'min' ? s['dialog-width-min'] : '';
-    return createPortal(jsxs("div", { ref: focusTrapRef, children: [jsx("div", { "data-slot": 'dialog-overlay', "data-state": state, className: s['dialog-overlay'], onClick: () => onOpenChange(false), "aria-hidden": 'true' }), jsxs("div", { "data-slot": 'dialog-content', "data-state": state, role: 'dialog', "aria-modal": 'true', "aria-labelledby": titleId, "aria-describedby": descriptionId, className: cn(s['dialog-content'], widthClass, className), onClick: e => e.stopPropagation(), ...props, children: [children, jsx(DialogClose, { className: s['close-button'], asChild: true, children: jsxs(Button, { variant: 'ghost', theme: 'inherit', iconOnly: true, size: 'sm', children: [jsx(XIcon, {}), jsx("span", { className: 'srOnly', children: "Close" })] }) })] })] }), document.body);
+    const widthClass = measure ? s['dialog-measure'] : width === 'min' ? s['dialog-width-min'] : '';
+    const measureValue = measure
+        ? ['text', 'content', 'wide'].includes(measure)
+            ? `var(--measure-${measure})`
+            : measure
+        : undefined;
+    return createPortal(jsxs("div", { "data-constellation-portal": '', ref: focusTrapRef, children: [jsx("div", { "data-slot": 'dialog-overlay', "data-state": state, "data-pass-through": passThrough ? '' : undefined, className: s['dialog-overlay'], 
+                // A pass-through scrim never takes the click: it goes to the page
+                // underneath, and the document listener above decides what it meant.
+                onClick: passThrough ? undefined : () => onOpenChange(false), "aria-hidden": 'true' }), jsxs("div", { ref: node => {
+                    contentRef.current = node;
+                    morphRef(node);
+                }, "data-slot": 'dialog-content', "data-state": state, "data-morph": origin ? '' : undefined, "data-morph-state": origin ? morphPhase : undefined, role: 'dialog', "aria-modal": passThrough ? undefined : 'true', "aria-labelledby": titleId, "aria-describedby": descriptionId, className: cn(s['dialog-content'], widthClass, className), style: measureValue
+                    ? { ...style, '--dialog-measure': measureValue }
+                    : style, onClick: e => e.stopPropagation(), ...props, children: [children, jsx(DialogClose, { className: s['close-button'], asChild: true, children: jsxs(Button, { variant: 'ghost', theme: 'inherit', iconOnly: true, size: 'sm', children: [jsx(XIcon, {}), jsx("span", { className: 'srOnly', children: "Close" })] }) })] })] }), document.body);
 }
 // ── Semantic sub-components ──────────────────────────────
 function DialogHeader({ className, ...props }) {

package/dist/ui/Dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../src/ui/Dialog/dialog.tsx"],"sourcesContent":["import { Row } from '@constellation/layout/Row';\nimport { Typography, type TypographyVariant } from '@constellation/typography/Typography';\nimport { Button } from '@constellation/ui/Button';\nimport cn from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { Slot } from '../../internal/slot';\nimport { DEFAULT_ANIMATION_DURATION, useAnimationState } from '../../internal/use-animation-state';\nimport { useFocusTrap } from '../../internal/use-focus-trap';\nimport { useScrollLock } from '../../internal/use-scroll-lock';\nimport s from './dialog.module.scss';\n\n// ── Context ──────────────────────────────────────────────\n\ntype DialogContextValue = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onAfterClose?: () => void;\n  titleId: string;\n  descriptionId: string;\n};\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\n\nfunction useDialog() {\n  const ctx = React.useContext(DialogContext);\n  if (!ctx) throw new Error('Dialog compound components must be used within <Dialog>');\n  return ctx;\n}\n\n// ── Root ─────────────────────────────────────────────────\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onAfterClose?: () => void;\n  children?: React.ReactNode;\n}\n\nfunction Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  onAfterClose,\n  children,\n}: DialogProps) {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const titleId = React.useId();\n  const descriptionId = React.useId();\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return (\n    <DialogContext.Provider\n      value={{ open, onOpenChange: handleOpenChange, onAfterClose, titleId, descriptionId }}\n    >\n      {children}\n    </DialogContext.Provider>\n  );\n}\n\n// ── Trigger ──────────────────────────────────────────────\n\nexport interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n}\n\nfunction DialogTrigger({ asChild, onClick, children, ...props }: DialogTriggerProps) {\n  const { onOpenChange } = useDialog();\n  const Comp = asChild ? Slot : 'button';\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onOpenChange(true);\n  };\n\n  return (\n    <Comp data-slot={'dialog-trigger'} onClick={handleClick} {...props}>\n      {children}\n    </Comp>\n  );\n}\n\n// ── Close ────────────────────────────────────────────────\n\nexport interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n}\n\nfunction DialogClose({ asChild, onClick, children, ...props }: DialogCloseProps) {\n  const { onOpenChange } = useDialog();\n  const Comp = asChild ? Slot : 'button';\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onOpenChange(false);\n  };\n\n  return (\n    <Comp data-slot={'dialog-close'} onClick={handleClick} {...props}>\n      {children}\n    </Comp>\n  );\n}\n\n// ── Overlay ──────────────────────────────────────────────\n\nfunction DialogOverlay({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  const { open, onOpenChange } = useDialog();\n\n  return (\n    <div\n      data-slot={'dialog-overlay'}\n      data-state={open ? 'open' : 'closed'}\n      className={cn(s['dialog-overlay'], className)}\n      onClick={() => onOpenChange(false)}\n      aria-hidden={'true'}\n      {...props}\n    />\n  );\n}\n\n// ── Content ──────────────────────────────────────────────\n\nexport type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  width?: 'max' | 'min';\n};\n\nfunction DialogContent({ className, children, width = 'max', ...props }: DialogContentProps) {\n  const { open, onOpenChange, onAfterClose, titleId, descriptionId } = useDialog();\n  const { mounted, state } = useAnimationState(open, DEFAULT_ANIMATION_DURATION);\n  const focusTrapRef = useFocusTrap(open);\n  useScrollLock(mounted);\n\n  const wasClosingRef = React.useRef(false);\n  const onAfterCloseRef = React.useRef(onAfterClose);\n  onAfterCloseRef.current = onAfterClose;\n\n  React.useEffect(() => {\n    if (state === 'closed') {\n      wasClosingRef.current = true;\n    } else if (state === 'idle' && wasClosingRef.current) {\n      wasClosingRef.current = false;\n      onAfterCloseRef.current?.();\n    }\n  }, [state]);\n\n  React.useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // A nested layer (an open Select, DatePicker or menu) marks Escape as\n      // handled with preventDefault. Escape should dismiss the topmost layer\n      // only, so the modal ignores an event something inside it already took.\n      if (e.key === 'Escape' && !e.defaultPrevented) {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open, onOpenChange]);\n\n  if (!mounted || state === 'idle') return null;\n\n  const widthClass = width === 'min' ? s['dialog-width-min'] : '';\n\n  return createPortal(\n    <div ref={focusTrapRef}>\n      <div\n        data-slot={'dialog-overlay'}\n        data-state={state}\n        className={s['dialog-overlay']}\n        onClick={() => onOpenChange(false)}\n        aria-hidden={'true'}\n      />\n      <div\n        data-slot={'dialog-content'}\n        data-state={state}\n        role={'dialog'}\n        aria-modal={'true'}\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        className={cn(s['dialog-content'], widthClass, className)}\n        onClick={e => e.stopPropagation()}\n        {...props}\n      >\n        {children}\n        <DialogClose className={s['close-button']} asChild>\n          <Button variant={'ghost'} theme={'inherit'} iconOnly size={'sm'}>\n            <XIcon />\n            <span className={'srOnly'}>Close</span>\n          </Button>\n        </DialogClose>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\n// ── Semantic sub-components ──────────────────────────────\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot={'dialog-header'} className={cn(s['dialog-header'], className)} {...props} />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <Row\n      data-slot={'dialog-footer'}\n      gap={1}\n      justify={'space-between'}\n      className={cn(s['dialog-footer'], className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the dialog's heading. Defaults to `<Typography variant='h6'>`\n * so consumers can write `<DialogTitle>My dialog</DialogTitle>` without\n * manually wrapping in Typography. Override the variant with the\n * `variant` prop, or opt out entirely with `asChild` to supply a custom\n * element (e.g., a Heading component).\n */\nfunction DialogTitle({\n  className,\n  asChild,\n  variant = 'h6',\n  ...props\n}: React.ComponentProps<'h2'> & {\n  asChild?: boolean;\n  variant?: TypographyVariant;\n}) {\n  const { titleId } = useDialog();\n\n  if (asChild) {\n    return (\n      <Slot\n        id={titleId}\n        data-slot={'dialog-title'}\n        className={cn(s['dialog-title'], className)}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <Typography\n      id={titleId}\n      variant={variant}\n      data-slot={'dialog-title'}\n      className={cn(s['dialog-title'], className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the dialog's supporting description text. Defaults to\n * `<Typography variant='body2'>`. Override with `variant` or supply a\n * custom element via `asChild`.\n */\nfunction DialogDescription({\n  className,\n  asChild,\n  variant = 'body2',\n  ...props\n}: React.ComponentProps<'p'> & {\n  asChild?: boolean;\n  variant?: TypographyVariant;\n}) {\n  const { descriptionId } = useDialog();\n\n  if (asChild) {\n    return (\n      <Slot\n        id={descriptionId}\n        data-slot={'dialog-description'}\n        className={cn(s['dialog-description'], className)}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <Typography\n      id={descriptionId}\n      variant={variant}\n      data-slot={'dialog-description'}\n      className={cn(s['dialog-description'], className)}\n      {...props}\n    />\n  );\n}\n\n// ── Kept for API compat but no-ops now ───────────────────\n\nfunction DialogPortal({ children }: { children?: React.ReactNode }) {\n  return <>{children}</>;\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../../src/ui/Dialog/dialog.tsx"],"sourcesContent":["import { Row } from '@constellation/layout/Row';\nimport { Typography, type TypographyVariant } from '@constellation/typography/Typography';\nimport { Button } from '@constellation/ui/Button';\nimport cn from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { prefersReducedMotion } from '../../hooks/use-motion';\nimport { Slot } from '../../internal/slot';\nimport { DEFAULT_ANIMATION_DURATION, useAnimationState } from '../../internal/use-animation-state';\nimport { useFocusTrap } from '../../internal/use-focus-trap';\nimport { useScrollLock } from '../../internal/use-scroll-lock';\nimport { isInConstellationPortal } from '../../utils/portal';\nimport s from './dialog.module.scss';\n\n// ── Context ──────────────────────────────────────────────\n\ntype DialogContextValue = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onAfterClose?: () => void;\n  titleId: string;\n  descriptionId: string;\n};\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\n\nfunction useDialog() {\n  const ctx = React.useContext(DialogContext);\n  if (!ctx) throw new Error('Dialog compound components must be used within <Dialog>');\n  return ctx;\n}\n\n// ── Root ─────────────────────────────────────────────────\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onAfterClose?: () => void;\n  children?: React.ReactNode;\n}\n\nfunction Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  onAfterClose,\n  children,\n}: DialogProps) {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const titleId = React.useId();\n  const descriptionId = React.useId();\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return (\n    <DialogContext.Provider\n      value={{ open, onOpenChange: handleOpenChange, onAfterClose, titleId, descriptionId }}\n    >\n      {children}\n    </DialogContext.Provider>\n  );\n}\n\n// ── Trigger ──────────────────────────────────────────────\n\nexport interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n}\n\nfunction DialogTrigger({ asChild, onClick, children, ...props }: DialogTriggerProps) {\n  const { onOpenChange } = useDialog();\n  const Comp = asChild ? Slot : 'button';\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onOpenChange(true);\n  };\n\n  return (\n    <Comp data-slot={'dialog-trigger'} onClick={handleClick} {...props}>\n      {children}\n    </Comp>\n  );\n}\n\n// ── Close ────────────────────────────────────────────────\n\nexport interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n}\n\nfunction DialogClose({ asChild, onClick, children, ...props }: DialogCloseProps) {\n  const { onOpenChange } = useDialog();\n  const Comp = asChild ? Slot : 'button';\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onOpenChange(false);\n  };\n\n  return (\n    <Comp data-slot={'dialog-close'} onClick={handleClick} {...props}>\n      {children}\n    </Comp>\n  );\n}\n\n// ── Overlay ──────────────────────────────────────────────\n\nfunction DialogOverlay({\n  className,\n  passThrough = false,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & { passThrough?: boolean }) {\n  const { open, onOpenChange } = useDialog();\n\n  return (\n    <div\n      data-slot={'dialog-overlay'}\n      data-state={open ? 'open' : 'closed'}\n      data-pass-through={passThrough ? '' : undefined}\n      className={cn(s['dialog-overlay'], className)}\n      // A pass-through scrim cannot be clicked at all — the click goes to the\n      // page under it, and DialogContent's document listener decides.\n      onClick={passThrough ? undefined : () => onOpenChange(false)}\n      aria-hidden={'true'}\n      {...props}\n    />\n  );\n}\n\n// ── Content ──────────────────────────────────────────────\n\nexport type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  width?: 'max' | 'min';\n  /**\n   * Give the panel a real width instead of letting its content decide.\n   *\n   * `width` is `max-content`/`min-content`, which is fine for a confirm but\n   * wrong for anything with a form in it: the panel ends up as narrow as the\n   * longest line allows and every row inside is squashed. Takes the same\n   * vocabulary as `Container` — `text`, `content`, `wide`, or a CSS length —\n   * and stays capped by the viewport either way.\n   */\n  measure?: 'text' | 'content' | 'wide' | (string & {});\n  /**\n   * The element the dialog came from, so it grows out of it and shrinks back\n   * into it rather than fading in over the top of the page.\n   *\n   * Pass the tile, row or card that was clicked. Where a modal has an obvious\n   * origin on screen, morphing from it says \"this is that thing, larger\" — a\n   * dialog that fades in centre-screen makes the reader find their place\n   * again when it closes.\n   *\n   * A `DOMRect` is accepted too, for the case where the origin has since been\n   * unmounted or moved.\n   */\n  origin?: React.RefObject<HTMLElement | null> | DOMRect | null;\n  /**\n   * Whether the scrim takes the pointer.\n   *\n   * `blocking` (the default) is a modal in the usual sense: the page behind is\n   * dimmed and inert, and a click on the scrim dismisses.\n   *\n   * `pass-through` dims the page but leaves it live, for a panel that is a\n   * DETAIL VIEW of something still on screen — a tile in a grid, a row in a\n   * table. Clicking the next tile should show the next thing, not spend one\n   * click closing and a second one opening. The dialog still dismisses on a\n   * click that lands outside it, so a click on the empty background behaves as\n   * it always did; a handler that calls `stopPropagation()` keeps it open,\n   * which is how the tile says \"I am taking this click\".\n   *\n   * Scroll is not locked in this mode, for the same reason: the thing you want\n   * to look at next may be further down the page.\n   */\n  overlay?: 'blocking' | 'pass-through';\n};\n\n/**\n * Grow from `origin` on open, and shrink back into it on close.\n *\n * The animation is CSS. JavaScript supplies only the one thing a stylesheet\n * cannot know — where on screen the panel came from — and flips a modifier;\n * the transition between the two states does everything else. Closing is the\n * same two states in the other order, so the exit is the entrance backwards by\n * construction rather than a second animation kept in step by hand.\n *\n * The phase is React state, not an attribute poked in an effect, and that\n * matters: the panel has to be PAINTED once in its `from` state before it can\n * transition out of it. Setting both in one frame collapses them and nothing\n * moves — which is exactly how the contents ended up at full strength from the\n * first frame instead of building in as the box grew.\n */\nfunction useMorphFrom(origin: DialogContentProps['origin'], state: string, duration: number) {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const restingRef = React.useRef<DOMRect | null>(null);\n  /*\n   * `from` is a starting position, and someone who has asked for less motion\n   * never travels — so they open in the resting state directly. Starting them\n   * at `from` would leave the panel wearing the modifier that hides its own\n   * contents, with nothing scheduled to take it off.\n   */\n  const [phase, setPhase] = React.useState<'from' | 'to'>(\n    origin && !prefersReducedMotion() ? 'from' : 'to',\n  );\n\n  const rectOf = React.useCallback(() => {\n    if (!origin) return null;\n    if (origin instanceof DOMRect) return origin;\n    const el = (origin as React.RefObject<HTMLElement | null>).current;\n    return el ? el.getBoundingClientRect() : null;\n  }, [origin]);\n\n  /*\n   * Both ends are absolute pixels with no transform. Interpolating between\n   * `left: 283px` and `left: 50%` while a `translate(-50%, -50%)` also changes\n   * is not a straight line, and it shows.\n   */\n  const settled = React.useRef(false);\n\n  /*\n   * Force the pending style changes to be recalculated NOW.\n   *\n   * Everything below happens inside one task, and the browser is free to\n   * coalesce it into a single recalculation — which would see only the end\n   * state and have nothing to animate between. Reading a computed length is\n   * what makes the intermediate state real. It has to be a genuine style read:\n   * `void el.offsetWidth` proved unreliable here, returning the pre-pin width.\n   */\n  const reflow = (el: HTMLElement) => getComputedStyle(el).width;\n\n  const pin = (el: HTMLElement | null, r: DOMRect | null) => {\n    if (!el || !r) return;\n    el.style.left = `${r.left}px`;\n    el.style.top = `${r.top}px`;\n    el.style.width = `${r.width}px`;\n    el.style.height = `${r.height}px`;\n    el.style.transform = 'none';\n    // Written here rather than from React state so the flag and the geometry\n    // it describes are always set in the same breath. The stylesheet hangs the\n    // travel transition and `overflow: hidden` off it — both belong to a panel\n    // whose box is being driven from here, and neither to one at rest.\n    el.dataset.morphPinned = '';\n  };\n\n  /*\n   * Give the box back to the stylesheet.\n   *\n   * The panel travels between two measured rectangles, which means it spends\n   * the journey wearing an inline `width` and `height`. Those must not outlive\n   * the journey: a dialog whose content can change — a disclosure opening, a\n   * list growing, a field validating — was frozen at whatever it measured on\n   * open, and `overflow: hidden` then clipped whatever no longer fit, so the\n   * buttons at the foot of a card left the card.\n   *\n   * Released with transitions suppressed. The declaration that animates the\n   * travel goes away with the flag, but the base rule's `transition: all` does\n   * not, and a panel snapping from a pinned pixel height to `auto` is a change\n   * it will happily animate — badly, since `auto` is not interpolable and the\n   * intermediate frames come out as a jump.\n   */\n  const release = (el: HTMLElement | null) => {\n    if (!el) return;\n    el.style.transitionProperty = 'none';\n    for (const prop of ['left', 'top', 'width', 'height', 'transform']) {\n      el.style.removeProperty(prop);\n    }\n    delete el.dataset.morphPinned;\n    reflow(el);\n    el.style.removeProperty('transition-property');\n  };\n\n  /*\n   * A callback ref, not a layout effect, and that is the whole trick.\n   *\n   * The panel does not exist on the render that opens the dialog — the mount\n   * is one state update behind — so a layout effect keyed on the phase runs\n   * once against a null node and never fires again, because the phase has not\n   * changed by the time the element finally lands. Attaching the measurement\n   * to the node itself means it happens exactly when there is a node, which is\n   * the actual precondition.\n   */\n  const attach = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      ref.current = node;\n      if (!node || !origin || settled.current || prefersReducedMotion()) return;\n      // The resting box, read before anything is pinned: where the panel would\n      // sit on its own, and therefore where it is travelling to.\n      restingRef.current = node.getBoundingClientRect();\n      // A starting position must not animate into place.\n      node.style.transitionProperty = 'none';\n      pin(node, rectOf());\n      reflow(node);\n    },\n    [origin, rectOf],\n  );\n\n  /*\n   * Leave `from` one paint later.\n   *\n   * A plain effect, not a layout effect: it runs AFTER the browser has\n   * painted, which is the requirement — the panel has to have been drawn at\n   * the tile's size once, or there is nothing to travel from.\n   */\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el || !origin || settled.current || state !== 'open' || prefersReducedMotion()) return;\n    el.style.removeProperty('transition-property');\n    /*\n     * Settle that removal on its own. A transition compares the style before a\n     * change with the style after it, and `transition-property: none` in the\n     * \"before\" half means no transition is generated at all — so restoring the\n     * property and moving the panel inside one recalculation animates nothing.\n     */\n    reflow(el);\n    settled.current = true;\n    setPhase('to');\n  }, [origin, state]);\n\n  /*\n   * The travel itself, in both directions, and the handover at each end.\n   *\n   * `to` pins the resting box and then lets go of it once the panel has\n   * arrived, so the dialog sizes to its content for as long as it is open.\n   * `from` has to put the box back before it can travel home — and it measures\n   * where the panel actually IS rather than trusting the rectangle recorded on\n   * open, because between the two the content may well have changed the height.\n   */\n  React.useLayoutEffect(() => {\n    if (!origin || !settled.current || prefersReducedMotion()) return;\n    const el = ref.current;\n    if (!el) return;\n\n    if (phase === 'from') {\n      // Freeze the panel exactly where it stands — mid-travel included, since\n      // a rect read during a transition is the animated position — and only\n      // then send it home, or there is no geometry to leave from.\n      const here = el.getBoundingClientRect();\n      el.style.transitionProperty = 'none';\n      pin(el, here);\n      reflow(el);\n      el.style.removeProperty('transition-property');\n      reflow(el);\n      pin(el, rectOf());\n      return;\n    }\n\n    pin(el, restingRef.current);\n\n    /*\n     * Hand the box back when the journey ends. `transitionend` is the honest\n     * signal, but it never fires for a property whose two ends are equal — a\n     * tile already the height of the panel, most obviously — so the timer is\n     * not a belt-and-braces fallback, it is the path taken whenever the panel\n     * did not have to travel in that dimension.\n     */\n    let done = false;\n    const finish = () => {\n      if (done) return;\n      done = true;\n      release(el);\n    };\n    const onEnd = (e: TransitionEvent) => {\n      if (e.target === el && (e.propertyName === 'height' || e.propertyName === 'width')) finish();\n    };\n    el.addEventListener('transitionend', onEnd);\n    const timer = window.setTimeout(finish, duration + 60);\n    return () => {\n      el.removeEventListener('transitionend', onEnd);\n      window.clearTimeout(timer);\n    };\n  }, [phase, origin, rectOf, duration]);\n\n  // Closing puts the modifier back, and the opening animation runs in reverse.\n  React.useLayoutEffect(() => {\n    if (origin && state === 'closed' && !prefersReducedMotion()) setPhase('from');\n  }, [state, origin]);\n\n  return { ref: attach, phase, duration };\n}\n\nfunction DialogContent({\n  className,\n  children,\n  width = 'max',\n  origin,\n  measure,\n  overlay = 'blocking',\n  style,\n  ...props\n}: DialogContentProps) {\n  const { open, onOpenChange, onAfterClose, titleId, descriptionId } = useDialog();\n  /*\n   * A morph travels further than a fade, so it needs longer — and the unmount\n   * timer has to use the SAME number, or the panel is torn out of the DOM\n   * part way through its exit.\n   */\n  const duration = origin ? 300 : DEFAULT_ANIMATION_DURATION;\n  const { mounted, state } = useAnimationState(open, duration);\n  const { ref: morphRef, phase: morphPhase } = useMorphFrom(origin, state, duration);\n  const focusTrapRef = useFocusTrap(open);\n  const passThrough = overlay === 'pass-through';\n  // A live page behind the panel has to be scrollable, or half of what you can\n  // now click is out of reach.\n  useScrollLock(mounted && !passThrough);\n\n  /*\n   * With a scrim that cannot be clicked, dismissing is a document listener —\n   * the one thing the library otherwise refuses to do, because a native\n   * listener sees clicks React's tree never shows it.\n   *\n   * That is exactly why it works here. A handler on the page that calls\n   * `stopPropagation()` never reaches this, so an element can claim a click\n   * and keep the dialog open; anything that does not, dismisses. The check is\n   * on the panel itself rather than on the click's coordinates, so a Select or\n   * a menu portaled out of the panel keeps it open too.\n   */\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!open || !passThrough) return undefined;\n\n    const onDocumentClick = (e: MouseEvent) => {\n      const target = e.target as Element | null;\n      if (!target || contentRef.current?.contains(target)) return;\n      if (isInConstellationPortal(target)) return;\n      onOpenChange(false);\n    };\n\n    document.addEventListener('click', onDocumentClick);\n    return () => document.removeEventListener('click', onDocumentClick);\n  }, [open, passThrough, onOpenChange]);\n\n  const wasClosingRef = React.useRef(false);\n  const onAfterCloseRef = React.useRef(onAfterClose);\n  onAfterCloseRef.current = onAfterClose;\n\n  React.useEffect(() => {\n    if (state === 'closed') {\n      wasClosingRef.current = true;\n    } else if (state === 'idle' && wasClosingRef.current) {\n      wasClosingRef.current = false;\n      onAfterCloseRef.current?.();\n    }\n  }, [state]);\n\n  React.useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // A nested layer (an open Select, DatePicker or menu) marks Escape as\n      // handled with preventDefault. Escape should dismiss the topmost layer\n      // only, so the modal ignores an event something inside it already took.\n      if (e.key === 'Escape' && !e.defaultPrevented) {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open, onOpenChange]);\n\n  if (!mounted || state === 'idle') return null;\n\n  const widthClass = measure ? s['dialog-measure'] : width === 'min' ? s['dialog-width-min'] : '';\n  const measureValue = measure\n    ? ['text', 'content', 'wide'].includes(measure)\n      ? `var(--measure-${measure})`\n      : measure\n    : undefined;\n\n  return createPortal(\n    <div data-constellation-portal={''} ref={focusTrapRef}>\n      <div\n        data-slot={'dialog-overlay'}\n        data-state={state}\n        data-pass-through={passThrough ? '' : undefined}\n        className={s['dialog-overlay']}\n        // A pass-through scrim never takes the click: it goes to the page\n        // underneath, and the document listener above decides what it meant.\n        onClick={passThrough ? undefined : () => onOpenChange(false)}\n        aria-hidden={'true'}\n      />\n      <div\n        ref={node => {\n          contentRef.current = node;\n          morphRef(node);\n        }}\n        data-slot={'dialog-content'}\n        data-state={state}\n        data-morph={origin ? '' : undefined}\n        data-morph-state={origin ? morphPhase : undefined}\n        role={'dialog'}\n        // Not modal when the page behind it is still live, and saying so is\n        // the difference between a screen reader offering the rest of the page\n        // or hiding it.\n        aria-modal={passThrough ? undefined : 'true'}\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        className={cn(s['dialog-content'], widthClass, className)}\n        style={\n          measureValue\n            ? ({ ...style, '--dialog-measure': measureValue } as React.CSSProperties)\n            : style\n        }\n        onClick={e => e.stopPropagation()}\n        {...props}\n      >\n        {children}\n        <DialogClose className={s['close-button']} asChild>\n          <Button variant={'ghost'} theme={'inherit'} iconOnly size={'sm'}>\n            <XIcon />\n            <span className={'srOnly'}>Close</span>\n          </Button>\n        </DialogClose>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\n// ── Semantic sub-components ──────────────────────────────\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot={'dialog-header'} className={cn(s['dialog-header'], className)} {...props} />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <Row\n      data-slot={'dialog-footer'}\n      gap={1}\n      justify={'space-between'}\n      className={cn(s['dialog-footer'], className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the dialog's heading. Defaults to `<Typography variant='h6'>`\n * so consumers can write `<DialogTitle>My dialog</DialogTitle>` without\n * manually wrapping in Typography. Override the variant with the\n * `variant` prop, or opt out entirely with `asChild` to supply a custom\n * element (e.g., a Heading component).\n */\nfunction DialogTitle({\n  className,\n  asChild,\n  variant = 'h6',\n  ...props\n}: React.ComponentProps<'h2'> & {\n  asChild?: boolean;\n  variant?: TypographyVariant;\n}) {\n  const { titleId } = useDialog();\n\n  if (asChild) {\n    return (\n      <Slot\n        id={titleId}\n        data-slot={'dialog-title'}\n        className={cn(s['dialog-title'], className)}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <Typography\n      id={titleId}\n      variant={variant}\n      data-slot={'dialog-title'}\n      className={cn(s['dialog-title'], className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the dialog's supporting description text. Defaults to\n * `<Typography variant='body2'>`. Override with `variant` or supply a\n * custom element via `asChild`.\n */\nfunction DialogDescription({\n  className,\n  asChild,\n  variant = 'body2',\n  ...props\n}: React.ComponentProps<'p'> & {\n  asChild?: boolean;\n  variant?: TypographyVariant;\n}) {\n  const { descriptionId } = useDialog();\n\n  if (asChild) {\n    return (\n      <Slot\n        id={descriptionId}\n        data-slot={'dialog-description'}\n        className={cn(s['dialog-description'], className)}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <Typography\n      id={descriptionId}\n      variant={variant}\n      data-slot={'dialog-description'}\n      className={cn(s['dialog-description'], className)}\n      {...props}\n    />\n  );\n}\n\n// ── Kept for API compat but no-ops now ───────────────────\n\nfunction DialogPortal({ children }: { children?: React.ReactNode }) {\n  return <>{children}</>;\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/ui/Dialog/dialog.module.scss.js

@@ -1,6 +1,6 @@
 import './dialog.css';
 
-var s = {"dialog-overlay":"dialog-module_dialog-overlay__m4sZN","dialog-content":"dialog-module_dialog-content__FgQr2","dialog-width-min":"dialog-module_dialog-width-min__dbFaL","close-button":"dialog-module_close-button__MA_5T","dialog-header":"dialog-module_dialog-header__H2vDS","dialog-footer":"dialog-module_dialog-footer__8E1_f"};
+var s = {"dialog-overlay":"dialog-module_dialog-overlay__m4sZN","dialog-content":"dialog-module_dialog-content__FgQr2","dialog-width-min":"dialog-module_dialog-width-min__dbFaL","dialog-measure":"dialog-module_dialog-measure__ajXF_","close-button":"dialog-module_close-button__MA_5T","dialog-header":"dialog-module_dialog-header__H2vDS","dialog-footer":"dialog-module_dialog-footer__8E1_f"};
 
 export { s as default };
 //# sourceMappingURL=dialog.module.scss.js.map

package/dist/ui/Icon/icon.css

@@ -51,37 +51,44 @@
   border: 1px solid;
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--primary__BjgWE {
-  background-color: color-mix(in srgb, var(--primary-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--primary-main) 16%, transparent);
   border-color: var(--primary-outlined-border);
   color: var(--primary-outlined-border);
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--secondary__zl-HC {
-  background-color: color-mix(in srgb, var(--secondary-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--secondary-main) 16%, transparent);
   border-color: var(--secondary-outlined-border);
   color: var(--secondary-outlined-border);
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--destructive__6BcZn {
-  background-color: color-mix(in srgb, var(--destructive-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--destructive-main) 16%, transparent);
   border-color: var(--destructive-outlined-border);
   color: var(--destructive-outlined-border);
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--warning__UGmqH {
-  background-color: color-mix(in srgb, var(--warning-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--warning-main) 16%, transparent);
   border-color: var(--warning-outlined-border);
   color: var(--warning-outlined-border);
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--success__arbgh {
-  background-color: color-mix(in srgb, var(--success-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--success-main) 16%, transparent);
   border-color: var(--success-outlined-border);
   color: var(--success-outlined-border);
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--info__8Rgda {
-  background-color: color-mix(in srgb, var(--info-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--info-main) 16%, transparent);
   border-color: var(--info-outlined-border);
   color: var(--info-outlined-border);
 }
 .icon-module_icon--outlined__9I-E-.icon-module_icon--slate__xUH7A {
-  background-color: color-mix(in srgb, var(--slate-hover) 20%, transparent);
+  /* On the solid, for the reason Button gives. */
+  background-color: color-mix(in srgb, var(--slate-main) 16%, transparent);
   border-color: var(--slate-outlined-border);
   color: var(--slate-outlined-border);
 }

package/dist/ui/ProgressBar/progress-bar.css

@@ -100,11 +100,18 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .progress-bar-module_progress-bar--indeterminate__aRllV .progress-bar-module_progress-bar-fill__6-qZt,
-  .progress-bar-module_progress-bar--animated__vcqbL.progress-bar-module_progress-bar--striped__GLD2b .progress-bar-module_progress-bar-fill__6-qZt {
+  :root:not([data-motion=full]) .progress-bar-module_progress-bar--indeterminate__aRllV .progress-bar-module_progress-bar-fill__6-qZt,
+  :root:not([data-motion=full]) .progress-bar-module_progress-bar--animated__vcqbL.progress-bar-module_progress-bar--striped__GLD2b .progress-bar-module_progress-bar-fill__6-qZt {
     animation: none;
   }
-  .progress-bar-module_progress-bar-fill__6-qZt {
+  :root:not([data-motion=full]) .progress-bar-module_progress-bar-fill__6-qZt {
     transition: none;
   }
+}
+:root[data-motion=reduced] .progress-bar-module_progress-bar--indeterminate__aRllV .progress-bar-module_progress-bar-fill__6-qZt,
+:root[data-motion=reduced] .progress-bar-module_progress-bar--animated__vcqbL.progress-bar-module_progress-bar--striped__GLD2b .progress-bar-module_progress-bar-fill__6-qZt {
+  animation: none;
+}
+:root[data-motion=reduced] .progress-bar-module_progress-bar-fill__6-qZt {
+  transition: none;
 }

package/dist/ui/StatCard/stat-card.css

@@ -3,6 +3,19 @@
   --stat-card-icon-color: var(--text-secondary);
   --stat-card-icon-size: 2.5rem;
   --line-height-default: 1.3;
+  text-align: left;
+}
+
+.stat-card-module_stat-card__Siea4:where(button) {
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  width: 100%;
+}
+.stat-card-module_stat-card__Siea4:where(button):hover {
+  background-color: var(--action-hover);
+}
+.stat-card-module_stat-card__Siea4:where(button)[aria-pressed=true] {
+  background-color: var(--action-selected);
 }
 
 .stat-card-module_stat-card-icon__VMLCm {

package/dist/ui/StatCard/stat-card.d.ts

@@ -25,6 +25,15 @@ export interface StatCardProps extends React.ComponentPropsWithoutRef<'div'> {
     direction?: StatCardDirection;
     /** Surface variant. */
     variant?: StatCardVariant;
+    /**
+     * The element the card renders as.
+     *
+     * A figure that FILTERS the thing it counts is a control, and should be a
+     * real one: `el='button'` makes the whole card the target, so it takes
+     * focus, answers the keyboard, and reads as pressable rather than as a
+     * number that happens to react to a click.
+     */
+    el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
 }
 declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
 export { StatCard };

package/dist/ui/StatCard/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/ui/StatCard/stat-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AACvD,MAAM,MAAM,aAAa,GACvB,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AACjG,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAuCjD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC1E,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iBAAiB;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,uBAAuB;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,sFA8Gb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/ui/StatCard/stat-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AACvD,MAAM,MAAM,aAAa,GACvB,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AACjG,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAuCjD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC1E,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iBAAiB;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,uBAAuB;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;CAC9D;AAED,QAAA,MAAM,QAAQ,sFAgHb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/ui/StatCard/stat-card.js

@@ -32,7 +32,7 @@ const statCardTypographyBySize = {
         trend: 'body1',
     },
 };
-const StatCard = React.forwardRef(({ label, value, icon, description, trend, trendLabel, theme, size, direction, variant, className, children, ...props }, ref) => {
+const StatCard = React.forwardRef(({ label, value, icon, description, trend, trendLabel, theme, size, direction, variant, el, className, children, ...props }, ref) => {
     const resolvedTheme = theme ?? DEFAULT_STAT_CARD_THEME;
     const resolvedSize = size ?? DEFAULT_STAT_CARD_SIZE;
     const resolvedVariant = variant ?? DEFAULT_STAT_CARD_VARIANT;
@@ -48,7 +48,7 @@ const StatCard = React.forwardRef(({ label, value, icon, description, trend, tre
         variant: resolvedVariant,
     };
     const typographyConfig = statCardTypographyBySize[resolvedSize];
-    return (jsxs(Container, { ref: ref, "data-slot": 'stat-card', gap: 1, styled: isFilled || isOutlined, padding: isFilled || isOutlined ? 'md' : 'none', outlined: isFilled || isOutlined, theme: containerTheme, className: cn(statCardVariants(variantOptions), className), ...rootProps, children: [jsxs(Container, { styled: false, gap: 2, direction: resolvedDirection, align: resolvedDirection === 'row' ? 'start' : 'center', children: [icon ? (jsx("span", { "data-slot": 'stat-card-icon', className: s['stat-card-icon'], "aria-hidden": 'true', children: icon })) : null, jsxs(Column, { "data-slot": 'stat-card-header', className: s['stat-card-header'], align: resolvedDirection === 'row' ? 'start' : 'center', children: [jsx(Typography, { "data-slot": 'stat-card-label', variant: typographyConfig.label, className: s['stat-card-label'], align: resolvedDirection === 'row' ? undefined : 'center', children: label }), value ? (jsx(Typography, { "data-slot": 'stat-card-value', variant: typographyConfig.value, className: s['stat-card-value'], align: resolvedDirection === 'row' ? undefined : 'center', children: jsx("strong", { children: value }) })) : null, description ? (jsx(Typography, { "data-slot": 'stat-card-description', variant: typographyConfig.description, theme: 'muted', className: s['stat-card-description'], children: description })) : null, trend ? (jsxs(Typography, { "data-slot": 'stat-card-trend', variant: typographyConfig.trend, theme: trendTheme, className: s['stat-card-trend'], children: [trend === 'up' ? jsx(TrendingUpIcon, { "aria-hidden": 'true' }) : null, trend === 'down' ? jsx(TrendingDownIcon, { "aria-hidden": 'true' }) : null, trendLabel] })) : null] })] }), children] }));
+    return (jsxs(Container, { ref: ref, el: el, "data-slot": 'stat-card', gap: 1, styled: isFilled || isOutlined, padding: isFilled || isOutlined ? 'md' : 'none', outlined: isFilled || isOutlined, theme: containerTheme, className: cn(statCardVariants(variantOptions), className), ...rootProps, children: [jsxs(Container, { styled: false, gap: 2, direction: resolvedDirection, align: resolvedDirection === 'row' ? 'start' : 'center', children: [icon ? (jsx("span", { "data-slot": 'stat-card-icon', className: s['stat-card-icon'], "aria-hidden": 'true', children: icon })) : null, jsxs(Column, { "data-slot": 'stat-card-header', className: s['stat-card-header'], align: resolvedDirection === 'row' ? 'start' : 'center', children: [jsx(Typography, { "data-slot": 'stat-card-label', variant: typographyConfig.label, className: s['stat-card-label'], align: resolvedDirection === 'row' ? undefined : 'center', children: label }), value ? (jsx(Typography, { "data-slot": 'stat-card-value', variant: typographyConfig.value, className: s['stat-card-value'], align: resolvedDirection === 'row' ? undefined : 'center', children: jsx("strong", { children: value }) })) : null, description ? (jsx(Typography, { "data-slot": 'stat-card-description', variant: typographyConfig.description, theme: 'muted', className: s['stat-card-description'], children: description })) : null, trend ? (jsxs(Typography, { "data-slot": 'stat-card-trend', variant: typographyConfig.trend, theme: trendTheme, className: s['stat-card-trend'], children: [trend === 'up' ? jsx(TrendingUpIcon, { "aria-hidden": 'true' }) : null, trend === 'down' ? jsx(TrendingDownIcon, { "aria-hidden": 'true' }) : null, trendLabel] })) : null] })] }), children] }));
 });
 StatCard.displayName = 'StatCard';