@rtzll/reflow 0.4.0 → 0.6.0

package/dist/colors.js

@@ -0,0 +1,21 @@
+/** The colours Badge and Avatar share. Internal: not exported from the package. */
+export const badgeColors = {
+    accent: 'var(--rf-accent)',
+    gray: '#a3a3a3',
+    red: '#ef4444',
+    orange: '#f97316',
+    amber: '#f59e0b',
+    yellow: '#eab308',
+    lime: '#84cc16',
+    green: '#22c55e',
+    emerald: '#10b981',
+    teal: '#14b8a6',
+    cyan: '#06b6d4',
+    blue: '#3b82f6',
+    indigo: '#6366f1',
+    violet: '#8b5cf6',
+    purple: '#a855f7',
+    fuchsia: '#d946ef',
+    pink: '#ec4899',
+    rose: '#f43f5e',
+};

package/dist/compositions.css

@@ -141,6 +141,57 @@
     pointer-events: auto;
   }
 }
+/* System: an event in the conversation, such as a model switch, as a quiet
+   centred caption between hairlines. It spans the transcript, fades in
+   where it lands, and keeps its time and actions in view. */
+.rf-chat-message[data-role='system'] {
+  align-items: stretch;
+  align-self: stretch;
+  justify-self: stretch;
+  max-width: none;
+  transform-origin: center;
+}
+.rf-chat-system {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding-block: 8px;
+  color: var(--rf-muted);
+  font: var(--rf-text-caption) / var(--rf-leading-caption) var(--rf-font);
+  text-align: center;
+}
+.rf-chat-system::before,
+.rf-chat-system::after {
+  content: '';
+  flex: 1;
+  min-inline-size: 16px;
+  border-block-start: 1px solid color-mix(in oklab, var(--rf-border) 70%, transparent);
+}
+.rf-chat-system-icon {
+  display: inline-flex;
+  flex: none;
+}
+.rf-chat-system-icon > svg {
+  inline-size: 14px;
+  block-size: 14px;
+}
+.rf-chat-system-text {
+  min-inline-size: 0;
+  text-wrap: balance;
+}
+.rf-chat-system .rf-chat-time::before {
+  content: '·';
+  margin-inline-end: 8px;
+}
+.rf-chat-message[data-role='system'][data-animate] {
+  animation-name: rf-message-fade;
+}
+@keyframes rf-message-fade {
+  from {
+    opacity: 0;
+  }
+}
 @keyframes rf-message-enter {
   from {
     opacity: 0;
@@ -470,7 +521,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 +553,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 +562,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/compositions.d.ts

@@ -22,13 +22,20 @@ export interface ChatAttachment {
 }
 export interface ChatMessageProps {
     transitionId?: string;
-    role: 'user' | 'assistant';
+    /** `system` shows an event in the conversation, such as a model switch, as a quiet centred line. */
+    role: 'user' | 'assistant' | 'system';
     children?: RemixNode;
+    /** Files shown with a user or assistant message. */
     attachments?: readonly ChatAttachment[];
+    /** Names the message. Defaults to You, Assistant or System. */
     label?: string;
     size?: ControlSize;
+    /** Shown under a user message on hover, and inline after a system event. */
     time?: string;
+    /** Shown on hover under a message, and always after a system event. */
     actions?: RemixNode;
+    /** A small glyph before a system event. */
+    icon?: RemixNode;
     animate?: boolean;
 }
 export declare function ChatMessage(handle: Handle<ChatMessageProps>): () => import("remix/component").RemixElement;

package/dist/compositions.js

@@ -90,6 +90,8 @@ export function ChatMessage(handle) {
     return () => {
         const { role, label, attachments, children, size, time, actions, animate = true } = handle.props;
         followMove();
+        if (role === 'system')
+            return (_jsx("article", { class: "rf-chat-message", "data-role": "system", "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? 'System', mix: track, children: _jsxs("p", { class: "rf-chat-system", children: [handle.props.icon != null && (_jsx("span", { class: "rf-chat-system-icon", "aria-hidden": "true", children: handle.props.icon })), _jsx("span", { class: "rf-chat-system-text", children: children }), time && _jsx("span", { class: "rf-chat-time", children: time }), actions != null && _jsx("span", { class: "rf-chat-actions", children: actions })] }) }));
         return (_jsxs("article", { class: "rf-chat-message", "data-role": role, "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? (role === 'user' ? 'You' : 'Assistant'), mix: track, children: [attachments?.length ? (_jsx("ul", { class: "rf-chat-attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => (_jsxs("li", { class: "rf-chat-thumb", title: attachment.detail ? `${attachment.name} (${attachment.detail})` : undefined, children: [attachment.previewUrl ? (_jsx("img", { src: attachment.previewUrl, alt: attachment.name })) : (_jsx("span", { class: "rf-chat-thumb-glyph", role: "img", "aria-label": attachment.name, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }) })), attachment.url && _jsx("a", { href: attachment.url, "aria-label": attachment.name })] }, index))) })) : null, children != null && children !== '' && (_jsx("div", { class: "rf-chat-body", style: handle.props.transitionId
                         ? { viewTransitionName: messageTransitionName(handle.props.transitionId) }
                         : undefined, children: children })), ((role === 'user' && time) || actions) && (_jsxs("div", { class: "rf-chat-meta", children: [role === 'user' && time && _jsx("span", { class: "rf-chat-time", children: time }), actions != null && _jsx("span", { class: "rf-chat-actions", children: actions })] }))] }));

package/dist/drawer.css

@@ -0,0 +1,236 @@
+/* Drawer: a modal panel attached to one edge of the viewport. The panel
+   and the backdrop share one motion, in and out and back from a drag: a
+   long ease that starts fast and settles gently, with no overshoot, so the
+   panel never lifts off its edge and the backdrop darkens as it arrives.
+   While dragged the panel follows --rf-drawer-drag, the distance toward its
+   edge, and the backdrop lightens 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-motion: 500ms cubic-bezier(0.32, 0.72, 0, 1);
+  --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-drawer-motion),
+    overlay var(--rf-drawer-motion) allow-discrete,
+    display var(--rf-drawer-motion) allow-discrete;
+}
+.rf-drawer[open] {
+  translate: 0 var(--rf-drawer-drag);
+}
+
+/* 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 500ms cubic-bezier(0.32, 0.72, 0, 1),
+    overlay 500ms cubic-bezier(0.32, 0.72, 0, 1) allow-discrete,
+    display 500ms cubic-bezier(0.32, 0.72, 0, 1) allow-discrete;
+}
+[data-theme='dark'] .rf-drawer::backdrop {
+  background: rgb(0 0 0 / 70%);
+}
+.rf-drawer[open]::backdrop {
+  opacity: 1;
+}
+.rf-drawer[data-dragging]::backdrop {
+  opacity: calc(1 - var(--rf-drawer-progress, 0));
+  transition: none;
+}
+/* Where the panel and backdrop start from as the drawer opens. Starting
+   styles cascade with the rest, so these follow the open rules above and
+   match the per-side ones in specificity, or those would win and the
+   drawer would appear without its slide. */
+@starting-style {
+  .rf-drawer[data-side][open] {
+    translate: var(--rf-drawer-closed);
+  }
+  .rf-drawer[data-side][open]::backdrop {
+    opacity: 0;
+  }
+}
+
+.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-drawer-motion),
+      overlay var(--rf-drawer-motion) allow-discrete,
+      display var(--rf-drawer-motion) allow-discrete;
+  }
+  .rf-drawer[open] {
+    opacity: 1;
+  }
+  @starting-style {
+    .rf-drawer[data-side][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) {