@rtzll/reflow 0.4.0 → 0.5.0

package/dist/basic.js

@@ -4,6 +4,7 @@ import { on, ref } from 'remix/component';
 import { jsx } from 'remix/component/jsx-runtime';
 import { fluidHover } from './interactive.js';
 import { Tooltip } from './overlays.js';
+import { statusIcon } from './status-icon.js';
 export function Button(handle) {
     return () => {
         const props = handle.props;
@@ -308,7 +309,7 @@ export function Banner(handle) {
         if (visible)
             handOff = false;
         wasVisible = visible;
-        return (_jsx("div", { class: "rf-banner-collapse", "data-open": visible ? 'true' : 'false', "data-variant": variant, mix: rootRef, children: _jsx("div", { class: "rf-banner-overflow", inert: !visible, "aria-hidden": !visible || undefined, children: _jsxs("div", { ...props, class: classList('rf-banner', classProp, className), "data-slot": "banner", "data-size": size, "data-status": status, "data-contrast": contrast, role: role ?? (status === 'error' || status === 'warning' ? 'alert' : 'status'), children: [_jsx("span", { class: "rf-banner-icon", "aria-hidden": "true", children: icon ?? bannerIcon(status) }), _jsx("div", { class: "rf-banner-content", children: children }), dismissible && (_jsx("button", { type: "button", class: "rf-banner-dismiss", "aria-label": dismissLabel, mix: on('click', (event) => {
+        return (_jsx("div", { class: "rf-banner-collapse", "data-open": visible ? 'true' : 'false', "data-variant": variant, mix: rootRef, children: _jsx("div", { class: "rf-banner-overflow", inert: !visible, "aria-hidden": !visible || undefined, children: _jsxs("div", { ...props, class: classList('rf-banner', classProp, className), "data-slot": "banner", "data-size": size, "data-status": status, "data-contrast": contrast, role: role ?? (status === 'error' || status === 'warning' ? 'alert' : 'status'), children: [_jsx("span", { class: "rf-banner-icon", "aria-hidden": "true", children: icon ?? statusIcon(status) }), _jsx("div", { class: "rf-banner-content", children: children }), dismissible && (_jsx("button", { type: "button", class: "rf-banner-dismiss", "aria-label": dismissLabel, mix: on('click', (event) => {
                                 handOff = event.currentTarget === document.activeElement;
                                 onDismiss?.();
                                 if (open === undefined) {
@@ -318,12 +319,6 @@ export function Banner(handle) {
                             }), children: _jsx(Icon, { name: "x" }) }))] }) }) }));
     };
 }
-function bannerIcon(status) {
-    if (status === 'default') {
-        return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 16v-4m0-4h.01" })] }));
-    }
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", children: [status === 'warning' ? (_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })) : (_jsx("circle", { cx: "12", cy: "12", r: "10.5", fill: "currentColor" })), _jsx("g", { stroke: "var(--rf-bg)", "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round", children: status === 'success' ? (_jsx("path", { d: "m8.5 12.25 2.5 2.5 4.5-5" })) : status === 'warning' ? (_jsx("path", { d: "M12 9.5v3.5M12 17h.01" })) : status === 'error' ? (_jsx("path", { d: "M12 7.5v5M12 16.5h.01" })) : (_jsx("path", { d: "M12 16.5v-5M12 7.5h.01" })) })] }));
-}
 export function BannerTitle(handle) {
     return () => {
         const { class: classProp, className, ...props } = handle.props;

package/dist/compositions.css

@@ -470,7 +470,7 @@
 }
 .rf-queue {
   --rf-queue-row: 44px;
-  --rf-queue-gap: 5px;
+  --rf-queue-gap: var(--rf-stack-gap);
   position: relative;
   list-style: none;
   padding: 0;
@@ -502,7 +502,7 @@
   padding: 0 8px;
   cursor: grab;
   z-index: calc(3 - var(--rf-queue-depth));
-  scale: calc(1 - var(--rf-queue-depth) * 0.035) 1;
+  scale: calc(1 - var(--rf-queue-depth) * var(--rf-stack-scale-step)) 1;
   transition:
     margin-block-start var(--rf-spring-moderate),
     scale var(--rf-spring-moderate),
@@ -511,7 +511,7 @@
 .rf-queue > li + li {
   margin-block-start: var(
     --rf-queue-spacing,
-    calc(var(--rf-queue-peek, 6px) - var(--rf-queue-row))
+    calc(var(--rf-queue-peek, var(--rf-stack-peek)) - var(--rf-queue-row))
   );
 }
 .rf-queue > li:nth-child(n + 4) {

package/dist/drawer.css

@@ -0,0 +1,240 @@
+/* Drawer: a modal panel attached to one edge of the viewport. It slides in
+   on the moderate spring, which has no bounce, so the panel never lifts off
+   its edge, and leaves on Dialog's exit tween. While dragged it follows
+   --rf-drawer-drag, the distance toward its edge, and the backdrop fades
+   with --rf-drawer-progress. A strip of panel color past the edge covers
+   the gap when a drag pulls it the other way. */
+.rf-drawer {
+  --rf-drawer-bg: var(--rf-surface-5);
+  --rf-drawer-drag: 0px;
+  --rf-drawer-closed: 0 100%;
+  --rf-drawer-tail: 0 32px 0 0 var(--rf-drawer-bg);
+  position: fixed;
+  box-sizing: border-box;
+  inset: auto 0 0;
+  inline-size: 100%;
+  max-inline-size: none;
+  block-size: auto;
+  max-block-size: calc(100dvh - 48px);
+  margin: 0;
+  padding: 24px;
+  border: 0;
+  border-radius: var(--rf-panel-radius) var(--rf-panel-radius) 0 0;
+  outline: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background: var(--rf-drawer-bg);
+  color: var(--rf-fg);
+  box-shadow:
+    var(--rf-drawer-tail),
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 6%)),
+    0 0 24px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
+  font: var(--rf-text-body) / var(--rf-leading-body) var(--rf-font);
+  translate: var(--rf-drawer-closed);
+  transition:
+    translate var(--rf-exit-slow),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+.rf-drawer[open] {
+  translate: 0 var(--rf-drawer-drag);
+  transition:
+    translate var(--rf-spring-moderate),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+@starting-style {
+  .rf-drawer[open] {
+    translate: var(--rf-drawer-closed);
+  }
+  .rf-drawer[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+/* Top and bottom drawers keep their content in a readable column. */
+.rf-drawer[data-side='bottom'],
+.rf-drawer[data-side='top'] {
+  padding-inline: max(24px, calc((100% - 560px) / 2));
+}
+.rf-drawer[data-side='top'] {
+  --rf-drawer-closed: 0 -100%;
+  --rf-drawer-tail: 0 -32px 0 0 var(--rf-drawer-bg);
+  inset: 0 0 auto;
+  border-radius: 0 0 var(--rf-panel-radius) var(--rf-panel-radius);
+}
+.rf-drawer[data-side='top'][open] {
+  translate: 0 calc(-1 * var(--rf-drawer-drag));
+}
+.rf-drawer[data-side='right'],
+.rf-drawer[data-side='left'] {
+  inline-size: min(calc(100% - 48px), 400px);
+  block-size: 100dvh;
+  max-block-size: none;
+}
+.rf-drawer[data-side='right'] {
+  --rf-drawer-closed: 100% 0;
+  --rf-drawer-tail: 32px 0 0 0 var(--rf-drawer-bg);
+  inset: 0 0 0 auto;
+  border-radius: var(--rf-panel-radius) 0 0 var(--rf-panel-radius);
+}
+.rf-drawer[data-side='right'][open] {
+  translate: var(--rf-drawer-drag) 0;
+}
+.rf-drawer[data-side='left'] {
+  --rf-drawer-closed: -100% 0;
+  --rf-drawer-tail: -32px 0 0 0 var(--rf-drawer-bg);
+  inset: 0 auto 0 0;
+  border-radius: 0 var(--rf-panel-radius) var(--rf-panel-radius) 0;
+}
+.rf-drawer[data-side='left'][open] {
+  translate: calc(-1 * var(--rf-drawer-drag)) 0;
+}
+.rf-drawer[data-dragging] {
+  cursor: grabbing;
+  user-select: none;
+  transition: none;
+}
+
+.rf-drawer::backdrop {
+  background: rgb(0 0 0 / 40%);
+  opacity: 0;
+  transition:
+    opacity var(--rf-exit-slow),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+[data-theme='dark'] .rf-drawer::backdrop {
+  background: rgb(0 0 0 / 70%);
+}
+.rf-drawer[open]::backdrop {
+  opacity: calc(1 - var(--rf-drawer-progress, 0));
+  transition:
+    opacity var(--rf-spring-moderate),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+.rf-drawer[data-dragging]::backdrop {
+  transition: none;
+}
+
+.rf-drawer-handle {
+  inline-size: 40px;
+  block-size: 4px;
+  margin: -12px auto 16px;
+  border-radius: 9999px;
+  background: var(--rf-border);
+  cursor: grab;
+}
+.rf-drawer[open] {
+  display: flex;
+  flex-direction: column;
+}
+/* At the top, the handle sits on the edge that pulls away. */
+.rf-drawer[data-side='top'] .rf-drawer-handle {
+  order: 1;
+  margin: 16px auto -12px;
+}
+/* On the sides, the footer stays at the bottom of the panel. */
+.rf-drawer:is([data-side='left'], [data-side='right']) .rf-drawer-body {
+  flex: 1;
+}
+.rf-drawer-handle,
+.rf-drawer-header {
+  touch-action: none;
+}
+.rf-drawer-header {
+  display: grid;
+  gap: 6px;
+  padding-inline-end: 32px;
+}
+.rf-drawer-header h2 {
+  margin: 0;
+  font: 400 var(--rf-text-title) / var(--rf-leading-title) var(--rf-heading-font);
+  font-variation-settings: var(--rf-weight-strong);
+}
+.rf-drawer-header p {
+  margin: 0;
+  color: var(--rf-muted);
+}
+.rf-drawer:not(:has(.rf-drawer-close)) .rf-drawer-header {
+  padding-inline-end: 0;
+}
+.rf-drawer-body {
+  margin-block-start: 16px;
+}
+.rf-drawer-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-block-start: 24px;
+}
+.rf-drawer-close {
+  gap: normal;
+  position: absolute;
+  inset-block-start: 12px;
+  inset-inline-end: 12px;
+}
+
+[data-density='compact'] .rf-drawer {
+  padding: 16px;
+}
+[data-density='compact'] .rf-drawer:is([data-side='bottom'], [data-side='top']) {
+  padding-inline: max(16px, calc((100% - 520px) / 2));
+}
+[data-density='compact'] .rf-drawer-handle {
+  margin-block: -6px 12px;
+}
+
+/* Reduced motion: the drawer fades in place; a drag still moves it. */
+@media (prefers-reduced-motion: reduce) {
+  .rf-drawer {
+    translate: none;
+    opacity: 0;
+    transition:
+      opacity var(--rf-exit-slow),
+      overlay 160ms allow-discrete,
+      display 160ms allow-discrete;
+  }
+  .rf-drawer[open] {
+    opacity: 1;
+    transition:
+      opacity var(--rf-spring-moderate),
+      overlay 160ms allow-discrete,
+      display 160ms allow-discrete;
+  }
+  @starting-style {
+    .rf-drawer[open] {
+      translate: none;
+      opacity: 0;
+    }
+  }
+}
+@media (forced-colors: active) {
+  .rf-drawer {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* Flush: the content fills the panel and the title stays for assistive technology. */
+.rf-drawer[data-flush] {
+  padding: 0;
+}
+.rf-drawer[data-flush] .rf-drawer-body {
+  flex: 1;
+  min-block-size: 0;
+  margin: 0;
+}
+.rf-drawer[data-flush] .rf-drawer-header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.rf-drawer[data-flush] .rf-drawer-handle {
+  position: absolute;
+  inset-inline: 0;
+  margin-block: 8px;
+}

package/dist/drawer.d.ts

@@ -0,0 +1,45 @@
+import { type Handle, type MixInput, type RemixNode } from 'remix/component';
+import { type ButtonProps } from './basic.tsx';
+export type DrawerSide = 'bottom' | 'top' | 'left' | 'right';
+export interface DrawerTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    mix: MixInput<HTMLElement>;
+}
+export interface DrawerProps {
+    /** Contents of the button that opens the drawer. */
+    trigger?: RemixNode;
+    triggerVariant?: ButtonProps['variant'];
+    triggerSize?: ButtonProps['size'];
+    /** Renders your own trigger instead of the built-in button. Spread the provided props onto it. */
+    renderTrigger?: (props: DrawerTriggerProps) => RemixNode;
+    title: string;
+    description?: string;
+    children?: RemixNode;
+    /** Footer actions; a callback receives a function that closes the drawer. */
+    footer?: RemixNode | ((close: () => void) => RemixNode);
+    /** The edge the drawer slides in from. Default bottom. */
+    side?: DrawerSide;
+    /** Shows a grab handle. Default true for dismissible top and bottom drawers. */
+    handle?: boolean;
+    /** Shows a close button. Default true for left and right drawers. */
+    showCloseButton?: boolean;
+    /** Whether Escape, a click on the backdrop or a drag can close it. Default true. */
+    dismissible?: boolean;
+    /** Let the content fill the panel edge to edge, and visually hide the title. */
+    flush?: boolean;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A panel that slides in from an edge of the screen, for navigation on small
+ * screens, filters, details or a short task. It is a modal dialog built on
+ * the native element, like Dialog: it traps focus, closes on Escape or a
+ * click on the backdrop, and returns focus to its trigger. It follows a drag
+ * toward its edge and closes past a quarter of its size or on a quick flick;
+ * a drag the other way resists.
+ */
+export declare function Drawer(handle: Handle<DrawerProps>): () => import("remix/component").RemixElement;

package/dist/drawer.js

@@ -0,0 +1,228 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { Button } from './basic.js';
+import { Icon } from './icon.js';
+// A release past this share of the panel's size, or faster than this many
+// pixels per millisecond, closes it; anything less springs back.
+const closeShare = 0.25;
+const flickVelocity = 0.4;
+const interactive = 'button, a, input, select, textarea, label, [contenteditable], [role="slider"]';
+/**
+ * A panel that slides in from an edge of the screen, for navigation on small
+ * screens, filters, details or a short task. It is a modal dialog built on
+ * the native element, like Dialog: it traps focus, closes on Escape or a
+ * click on the backdrop, and returns focus to its trigger. It follows a drag
+ * toward its edge and closes past a quarter of its size or on a quick flick;
+ * a drag the other way resists.
+ */
+export function Drawer(handle) {
+    let dialog = null;
+    let invoker = null;
+    let internalOpen = handle.props.defaultOpen ?? false;
+    let pressedBackdrop = false;
+    let drag;
+    const id = handle.id;
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const open = () => handle.props.open ?? internalOpen;
+    const side = () => handle.props.side ?? 'bottom';
+    const dismissible = () => handle.props.dismissible ?? true;
+    function requestOpen(next) {
+        if (open() === next)
+            return;
+        internalOpen = next;
+        handle.props.onOpenChange?.(next);
+        void handle.update();
+    }
+    function close() {
+        requestOpen(false);
+    }
+    function sync() {
+        if (!dialog?.isConnected || dialog.open === open())
+            return;
+        if (open()) {
+            setDrag(dialog, 0);
+            dialog.showModal();
+        }
+        else
+            dialog.close();
+    }
+    function setDrag(element, offset, size = 1) {
+        element.style.setProperty('--rf-drawer-drag', `${Math.round(offset)}px`);
+        element.style.setProperty('--rf-drawer-progress', String(Math.min(1, Math.max(0, offset / size))));
+    }
+    function outsidePanel(event, element) {
+        if (event.target !== element)
+            return false;
+        const rect = element.getBoundingClientRect();
+        return (event.clientX < rect.left ||
+            event.clientX > rect.right ||
+            event.clientY < rect.top ||
+            event.clientY > rect.bottom);
+    }
+    // Whether the content under the pointer would scroll instead: a drag
+    // toward the edge belongs to a scroller that is not at its start.
+    function scrollsFirst(target, element) {
+        const vertical = side() === 'bottom' || side() === 'top';
+        for (let node = target; node; node = node.parentElement) {
+            if (node instanceof HTMLElement) {
+                const style = getComputedStyle(node);
+                const overflow = vertical ? style.overflowY : style.overflowX;
+                if (/auto|scroll/.test(overflow)) {
+                    if (side() === 'bottom' && node.scrollTop > 0)
+                        return true;
+                    if (side() === 'top' && node.scrollTop + node.clientHeight < node.scrollHeight - 1)
+                        return true;
+                    if (side() === 'right' && node.scrollLeft > 0)
+                        return true;
+                    if (side() === 'left' && node.scrollLeft + node.clientWidth < node.scrollWidth - 1)
+                        return true;
+                }
+            }
+            if (node === element)
+                break;
+        }
+        return false;
+    }
+    // How far the pointer has moved toward the drawer's edge, and across it.
+    function travel(event, start) {
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        switch (side()) {
+            case 'bottom':
+                return [dy, dx];
+            case 'top':
+                return [-dy, dx];
+            case 'right':
+                return [dx, dy];
+            case 'left':
+                return [-dx, dy];
+        }
+    }
+    function endDrag(event, element) {
+        if (!drag || drag.pointer !== event.pointerId)
+            return;
+        const current = drag;
+        drag = undefined;
+        if (!current.started)
+            return;
+        element.removeAttribute('data-dragging');
+        const now = performance.now();
+        // Held still before letting go, the throw has no speed left.
+        const velocity = now - current.time > 100
+            ? 0
+            : (current.offset - current.previousOffset) /
+                Math.max(1, current.time - current.previousTime);
+        if (current.offset > 0 &&
+            (current.offset > current.size * closeShare || velocity > flickVelocity)) {
+            close();
+            return;
+        }
+        setDrag(element, 0);
+    }
+    const dialogMix = ref((element, signal) => {
+        if (!(element instanceof HTMLDialogElement))
+            return;
+        dialog = element;
+        const options = { signal };
+        element.addEventListener('cancel', (event) => {
+            event.preventDefault();
+            if (dismissible())
+                close();
+        }, options);
+        element.addEventListener('close', () => {
+            if (element.open)
+                return;
+            close();
+            const target = invoker;
+            invoker = null;
+            if (target?.isConnected &&
+                element.ownerDocument.activeElement === element.ownerDocument.body)
+                target.focus({ preventScroll: true });
+        }, options);
+        element.addEventListener('pointerdown', (event) => {
+            pressedBackdrop = outsidePanel(event, element);
+            if (pressedBackdrop || !dismissible() || event.button !== 0)
+                return;
+            const target = event.target;
+            if (!(target instanceof Element) || target.closest(interactive))
+                return;
+            if (scrollsFirst(target, element))
+                return;
+            const rect = element.getBoundingClientRect();
+            const now = performance.now();
+            drag = {
+                pointer: event.pointerId,
+                x: event.clientX,
+                y: event.clientY,
+                started: false,
+                offset: 0,
+                size: side() === 'bottom' || side() === 'top' ? rect.height : rect.width,
+                time: now,
+                previousTime: now,
+                previousOffset: 0,
+            };
+        }, options);
+        element.addEventListener('pointermove', (event) => {
+            if (!drag || drag.pointer !== event.pointerId)
+                return;
+            const [along, across] = travel(event, drag);
+            if (!drag.started) {
+                if (Math.abs(along) < 4 && Math.abs(across) < 4)
+                    return;
+                // Sideways first, it is a selection or a scroll, not a drag.
+                if (Math.abs(across) > Math.abs(along)) {
+                    drag = undefined;
+                    return;
+                }
+                drag.started = true;
+                element.setAttribute('data-dragging', '');
+                try {
+                    element.setPointerCapture(event.pointerId);
+                }
+                catch {
+                    // Synthetic pointers have nothing to capture.
+                }
+            }
+            // Toward the edge it follows the pointer; away from it, it resists.
+            const offset = along >= 0 ? along : along / (1 + Math.abs(along) / 24);
+            drag.previousOffset = drag.offset;
+            drag.previousTime = drag.time;
+            drag.offset = offset;
+            drag.time = performance.now();
+            setDrag(element, offset, drag.size);
+        }, options);
+        element.addEventListener('pointerup', (event) => endDrag(event, element), options);
+        element.addEventListener('pointercancel', (event) => endDrag(event, element), options);
+        element.addEventListener('click', (event) => {
+            if (pressedBackdrop && outsidePanel(event, element) && dismissible())
+                close();
+            pressedBackdrop = false;
+        }, options);
+        signal.addEventListener('abort', () => {
+            if (dialog === element)
+                dialog = null;
+        }, { once: true });
+    });
+    return () => {
+        const props = handle.props;
+        handle.queueTask(sync);
+        const footer = typeof props.footer === 'function' ? props.footer(close) : props.footer;
+        const vertical = side() === 'bottom' || side() === 'top';
+        const showHandle = props.handle ?? (vertical && dismissible());
+        const showClose = props.showCloseButton ?? (!vertical && !props.flush);
+        const triggerProps = {
+            'aria-haspopup': 'dialog',
+            'aria-expanded': open(),
+            'aria-controls': id,
+            mix: on('click', (event) => {
+                if (event.currentTarget instanceof HTMLElement)
+                    invoker = event.currentTarget;
+                requestOpen(true);
+            }),
+        };
+        return (_jsxs(_Fragment, { children: [props.renderTrigger
+                    ? props.renderTrigger(triggerProps)
+                    : props.trigger != null && (_jsx(Button, { variant: props.triggerVariant ?? 'tertiary', size: props.triggerSize, ...triggerProps, children: props.trigger })), _jsxs("dialog", { id: id, class: props.class ? `rf-drawer ${props.class}` : 'rf-drawer', "data-side": side(), "data-flush": props.flush || undefined, "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": props.description ? descriptionId : undefined, mix: dialogMix, children: [showHandle && _jsx("div", { class: "rf-drawer-handle", "aria-hidden": "true" }), _jsxs("header", { class: "rf-drawer-header", children: [_jsx("h2", { id: titleId, children: props.title }), props.description && _jsx("p", { id: descriptionId, children: props.description })] }), props.children != null && _jsx("div", { class: "rf-drawer-body", children: props.children }), footer != null && _jsx("footer", { class: "rf-drawer-footer", children: footer }), showClose && (_jsx(Button, { variant: "ghost", size: "icon-compact", class: "rf-drawer-close", "aria-label": "Close drawer", mix: on('click', close), children: _jsx(Icon, { name: "x", size: 14 }) }))] })] }));
+    };
+}

package/dist/foundations.css

@@ -198,6 +198,12 @@
   --rf-exit-fast: 60ms ease-out;
   --rf-exit-moderate: 120ms ease-out;
   --rf-exit-slow: 160ms ease-out;
+  /* Piles: QueuedStack and the Toaster share these. Each card behind the
+     front one peeks out by the peek and narrows by the scale step; spread
+     out, cards sit a gap apart. */
+  --rf-stack-peek: 6px;
+  --rf-stack-gap: 5px;
+  --rf-stack-scale-step: 0.035;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export * from './breadcrumb.tsx';
 export * from './segmented-control.tsx';
 export * from './popover.tsx';
 export * from './hover-card.tsx';
+export * from './toaster.tsx';
+export * from './drawer.tsx';
 export * from './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -13,6 +13,8 @@ export * from './breadcrumb.js';
 export * from './segmented-control.js';
 export * from './popover.js';
 export * from './hover-card.js';
+export * from './toaster.js';
+export * from './drawer.js';
 export * from './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';