@rtzll/reflow 0.1.0 → 0.3.0

package/dist/compositions.css

@@ -730,10 +730,12 @@ html[data-rf-message-transition]::view-transition-old(root) {
   column-gap: 10px;
   min-height: 0;
   overflow: clip;
+  /* As in the reference: the step opens its height on the slow spring, and
+     its icon and text fade in once that space starts opening. */
+  animation: rf-thinking-step-enter 240ms ease-out 80ms both;
 }
 .rf-thinking-timeline-row {
   padding: 6px 8px 6px 0;
-  animation: rf-thinking-step-enter 240ms ease-out var(--rf-step-delay, 0ms) both;
 }
 .rf-thinking-timeline > li {
   padding-inline-start: 8px;
@@ -748,7 +750,8 @@ html[data-rf-message-transition]::view-transition-old(root) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 8px;
+  /* The connector stops where the step's text ends, as in the reference. */
+  padding-block: 8px 6px;
   color: var(--rf-muted);
 }
 .rf-thinking-timeline-icon > svg {
@@ -843,7 +846,6 @@ html[data-rf-message-transition]::view-transition-old(root) {
 @keyframes rf-thinking-step-enter {
   from {
     opacity: 0;
-    translate: 0 -3px;
   }
 }
 
@@ -1051,18 +1053,36 @@ html[data-rf-message-transition]::view-transition-old(root) {
   color: var(--rf-muted);
   font: var(--rf-text-caption) / var(--rf-leading-caption) var(--rf-font);
 }
-.rf-thinking-step-source,
+/* As in the reference: a source chip scales up on the moderate spring as it
+   unblurs; an image fades in as it unblurs. */
+.rf-thinking-step-source {
+  animation:
+    rf-thinking-source-enter var(--rf-spring-moderate) var(--rf-thinking-part-delay, 0ms) both,
+    rf-thinking-part-unblur 120ms ease-out var(--rf-thinking-part-delay, 0ms) both;
+}
 .rf-thinking-step-image {
-  animation: rf-thinking-part-enter 200ms ease-out var(--rf-thinking-part-delay, 0ms) both;
+  animation:
+    rf-thinking-part-fade 200ms ease-out var(--rf-thinking-part-delay, 0ms) both,
+    rf-thinking-part-unblur 150ms ease-out var(--rf-thinking-part-delay, 0ms) both;
 }
-@keyframes rf-thinking-part-enter {
+@keyframes rf-thinking-source-enter {
   from {
     opacity: 0;
+    scale: 0.85;
+  }
+}
+@keyframes rf-thinking-part-fade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes rf-thinking-part-unblur {
+  from {
     filter: blur(4px);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .rf-thinking-timeline-row,
+  .rf-thinking-step-body,
   .rf-thinking-step-source,
   .rf-thinking-step-image {
     animation: none;

package/dist/compositions.js

@@ -2,10 +2,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/compone
 import { Icon } from './icon.js';
 import { messageTransitionName, transitionMessage } from './message-transition.js';
 import { on, ref } from 'remix/component';
+import { prefersReducedMotion } from '@remix-run/ui/animation';
 import { Badge, Button, Textarea } from './basic.js';
 import { Accordion } from './groups.js';
 import { QueuedStack } from './queued-stack.js';
 import { fluidHover } from './interactive.js';
+import { motion } from './systems.js';
 import { Tooltip } from './overlays.js';
 export function CarouselDots(handle) {
     const trackVisibility = ref((element, signal) => {
@@ -23,9 +25,72 @@ export function CarouselDots(handle) {
     };
 }
 export function ChatMessage(handle) {
+    // As in the reference, a message glides to its new place when the
+    // conversation re-renders around it, such as earlier messages moving up as a
+    // new one is sent and the transcript scrolls to it. Its place is read before
+    // the update lands and again on the next frame, once the transcript has
+    // scrolled. A message still playing its entrance does not glide.
+    let element = null;
+    let entered = false;
+    let glide;
+    const track = ref((node, signal) => {
+        if (!(node instanceof HTMLElement))
+            return;
+        element = node;
+        entered = !node.hasAttribute('data-animate') || node.getAnimations().length === 0;
+        const settle = (event) => {
+            if (event.target === node)
+                entered = true;
+        };
+        node.addEventListener('animationend', settle, { signal });
+        node.addEventListener('animationcancel', settle, { signal });
+        signal.addEventListener('abort', () => {
+            glide?.cancel();
+            if (element === node)
+                element = null;
+        }, { once: true });
+    });
+    function followMove() {
+        const node = element;
+        if (!node ||
+            !entered ||
+            !node.isConnected ||
+            prefersReducedMotion() ||
+            document.documentElement.hasAttribute('data-rf-message-transition'))
+            return;
+        // Where the message shows now, a glide in flight included.
+        const before = node.getBoundingClientRect().top;
+        const glideFrom = (shown) => {
+            if (element !== node || !node.isConnected)
+                return;
+            glide?.cancel();
+            const offset = shown - node.getBoundingClientRect().top;
+            if (Math.abs(offset) < 0.5)
+                return;
+            glide = node.animate([{ transform: `translateY(${offset}px)` }, { transform: 'none' }], motion.moderate);
+            // A starting animation holds its first frame from now, not from its
+            // first tick, so the next paint already shows the old place.
+            glide.currentTime = 0;
+        };
+        // Glide as soon as the update lands, so no frame shows the jump. If the
+        // transcript scrolls before the next frame, the glide restarts from the
+        // same place against the scrolled layout.
+        handle.queueTask(() => {
+            glideFrom(before);
+            const started = glide;
+            const shown = node.getBoundingClientRect().top;
+            requestAnimationFrame(() => {
+                // The message has not been painted elsewhere yet, so a restart is seamless.
+                if (glide === started && Math.abs(node.getBoundingClientRect().top - shown) >= 0.5) {
+                    glideFrom(before);
+                }
+            });
+        });
+    }
     return () => {
         const { role, label, attachments, children, size, time, actions, animate = true } = handle.props;
-        return (_jsxs("article", { class: "rf-chat-message", "data-role": role, "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? (role === 'user' ? 'You' : 'Assistant'), 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
+        followMove();
+        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 })] }))] }));
     };
@@ -428,7 +493,7 @@ export function ThinkingSteps(handle) {
         const list = children ??
             (timeline ? (_jsx("ol", { class: "rf-thinking-timeline", children: steps
                     .filter((step) => step.status !== 'pending')
-                    .map((step, index) => (_jsx("li", { "data-status": step.status ?? 'complete', style: { '--rf-step-delay': `${Math.min(index, 6) * 24}ms` }, children: _jsxs("div", { class: "rf-thinking-step-body", children: [_jsx("span", { class: "rf-thinking-timeline-icon", "aria-hidden": "true", children: step.icon ?? _jsx("span", { class: "rf-thinking-timeline-dot" }) }), _jsxs("div", { class: "rf-thinking-timeline-row", children: [_jsxs("span", { class: "rf-thinking-timeline-title", children: [step.title, step.status === 'active' && !step.title.endsWith('…') ? '…' : ''] }), _jsxs("span", { class: "rf-basic-sr-only", children: [" (", step.status ?? 'complete', ")"] }), step.description && (_jsx("span", { class: "rf-thinking-timeline-description", children: step.description })), step.content != null && (_jsx("div", { class: "rf-thinking-timeline-content", children: step.content }))] })] }) }, step.value))) })) : (_jsx(Accordion, { defaultValue: defaultValue, items: steps.map((step) => ({
+                    .map((step) => (_jsx("li", { "data-status": step.status ?? 'complete', children: _jsxs("div", { class: "rf-thinking-step-body", children: [_jsx("span", { class: "rf-thinking-timeline-icon", "aria-hidden": "true", children: step.icon ?? _jsx("span", { class: "rf-thinking-timeline-dot" }) }), _jsxs("div", { class: "rf-thinking-timeline-row", children: [_jsxs("span", { class: "rf-thinking-timeline-title", children: [step.title, step.status === 'active' && !step.title.endsWith('…') ? '…' : ''] }), _jsxs("span", { class: "rf-basic-sr-only", children: [" (", step.status ?? 'complete', ")"] }), step.description && (_jsx("span", { class: "rf-thinking-timeline-description", children: step.description })), step.content != null && (_jsx("div", { class: "rf-thinking-timeline-content", children: step.content }))] })] }) }, step.value))) })) : (_jsx(Accordion, { defaultValue: defaultValue, items: steps.map((step) => ({
                     ...step,
                     content: step.content,
                     title: (_jsxs("span", { class: "rf-step-title", "data-status": step.status ?? 'pending', children: [_jsx("span", { "aria-hidden": "true", children: step.status === 'complete' ? '✓' : '○' }), step.title, _jsxs("span", { class: "rf-basic-sr-only", children: [" (", step.status ?? 'pending', ")"] })] })),

package/dist/dates.css

@@ -31,6 +31,42 @@
     'opsz' 18;
 }
 
+/* With week numbers, the title belongs to the days: it starts past the
+   week column. */
+.rf-calendar[data-week-numbers] .rf-calendar-header {
+  padding-inline-start: calc(var(--rf-date-cell) * 0.75 + 8px);
+}
+
+/* Months side by side, as in the reference: each title centered over its
+   days, previous at the far left, next at the far right. */
+.rf-calendar-header[data-centered] {
+  position: relative;
+  justify-content: center;
+  padding-inline: 0;
+}
+.rf-calendar[data-week-numbers] .rf-calendar-header[data-centered] {
+  padding-inline-start: calc(var(--rf-date-cell) * 0.75);
+}
+.rf-calendar-header[data-centered] .rf-calendar-months-label {
+  margin-inline-end: 0;
+  text-align: center;
+}
+.rf-calendar-header[data-centered] .rf-calendar-nav {
+  position: absolute;
+  inset-block-start: 0;
+}
+.rf-calendar-header[data-centered] .rf-calendar-nav[data-direction='previous'] {
+  inset-inline-start: 0;
+}
+.rf-calendar[data-week-numbers]
+  .rf-calendar-header[data-centered]
+  .rf-calendar-nav[data-direction='previous'] {
+  inset-inline-start: calc(var(--rf-date-cell) * 0.75);
+}
+.rf-calendar-header[data-centered] .rf-calendar-nav[data-direction='next'] {
+  inset-inline-end: 0;
+}
+
 .rf-calendar-nav,
 .rf-calendar-day {
   appearance: none;
@@ -102,6 +138,46 @@
   gap: 4px;
 }
 
+/* Stacked months, as in the reference: one weekday row above them, kept in
+   view while a short popup scrolls, 16px between the months, and arrows that
+   page up and down. */
+.rf-calendar[data-stacked] .rf-calendar-months {
+  gap: 16px;
+}
+.rf-calendar-weekdays {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 3;
+  display: flex;
+  margin-block-end: 16px;
+  background: inherit;
+  color: var(--rf-muted);
+  font-size: var(--rf-text-caption, 12px);
+  line-height: var(--rf-leading-caption, 16px);
+}
+.rf-calendar-weekdays > span {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--rf-date-cell);
+  block-size: calc(var(--rf-date-cell) * 0.8);
+  block-size: round(down, calc(var(--rf-date-cell) * 0.8), 1px);
+}
+.rf-calendar-weekdays > .rf-calendar-weekdays-week {
+  inline-size: calc(var(--rf-date-cell) * 0.75);
+}
+.rf-calendar[data-stacked] .rf-calendar-grid thead {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.rf-calendar[data-stacked] .rf-calendar-nav svg {
+  rotate: 90deg;
+}
+
 .rf-calendar-grid {
   border-collapse: separate;
   border-spacing: 0;
@@ -186,13 +262,42 @@
   color: var(--rf-bg);
 }
 
+/* Picking a range's end, as in the reference: the proposed end is filled
+   like a selected day and glides to the pointer, with a faint ring 1px inside
+   it that goes solid while pressed. Its number draws above the fill. */
 .rf-calendar-preview-end {
   z-index: 1;
-  box-shadow: inset 0 0 0 1px var(--rf-accent, #6b97ff);
+  background: var(--rf-fg);
+}
+.rf-calendar-preview-end::before {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border: 1px solid var(--rf-bg);
+  border-radius: max(0px, calc(var(--rf-radius, 8px) - 1px));
+  opacity: 0.4;
+  transition: opacity 80ms ease;
+}
+.rf-calendar-months:has(.rf-calendar-day[data-rf-selected]:active)
+  .rf-calendar-preview-end::before {
+  opacity: 1;
+}
+.rf-calendar-day {
+  z-index: 2;
+}
+.rf-calendar-day[data-rf-selected] {
+  color: var(--rf-bg);
 }
-
 .rf-calendar-months:not([data-rf-has-selection]) .rf-calendar-day[data-rf-selected] {
-  box-shadow: inset 0 0 0 1px var(--rf-accent, #6b97ff);
+  background: var(--rf-fg);
+}
+/* The same faint ring marks a filled day under the pointer. */
+.rf-calendar-day[data-selected][data-rf-hovered] {
+  outline: 1px solid color-mix(in oklab, var(--rf-bg) 40%, transparent);
+  outline-offset: -2px;
+}
+.rf-calendar-day[data-selected][data-rf-hovered]:active {
+  outline-color: var(--rf-bg);
 }
 
 @media (forced-colors: active) {

package/dist/dates.js

@@ -255,7 +255,7 @@ export function Calendar(handle) {
         }
         function monthButton(direction, disabled) {
             const label = direction === 'left' ? 'Previous month' : 'Next month';
-            return (_jsx(Tooltip, { content: label, side: "bottom", renderTrigger: (trigger) => (_jsx("button", { ...trigger, type: "button", class: "rf-calendar-nav", "data-rf-hover-item": true, "aria-label": label, disabled: disabled, mix: [trigger.mix, on('click', () => moveMonth(direction === 'left' ? -1 : 1))], children: _jsx(DateArrow, { direction: direction }) })) }));
+            return (_jsx(Tooltip, { content: label, side: "bottom", renderTrigger: (trigger) => (_jsx("button", { ...trigger, type: "button", class: "rf-calendar-nav", "data-direction": direction === 'left' ? 'previous' : 'next', "data-rf-hover-item": true, "aria-label": label, disabled: disabled, mix: [trigger.mix, on('click', () => moveMonth(direction === 'left' ? -1 : 1))], children: _jsx(DateArrow, { direction: direction }) })) }));
         }
         function onDayKey(event, day) {
             let next;
@@ -300,9 +300,19 @@ export function Calendar(handle) {
             event.preventDefault();
             focusDay(next);
         }
-        return (_jsxs("section", { class: "rf-calendar", "aria-label": label, "data-orientation": orientation, style: cellSize && Number.isFinite(cellSize) && cellSize > 0
+        // As in the reference: side by side, each title is centered over its
+        // month, previous sits at the far left and next at the far right. One
+        // month, or months stacked, keep the title left and both arrows together
+        // on the first month's right.
+        const sideBySide = months.length > 1 && orientation !== 'vertical';
+        // Stacked months share one weekday row above them, as in the reference;
+        // each month's own header stays in its table for screen readers.
+        const stacked = months.length > 1 && orientation === 'vertical';
+        const previousDisabled = firstMonth <= monthStart(min);
+        const nextDisabled = firstMonth >= monthStart(max);
+        return (_jsxs("section", { class: "rf-calendar", "aria-label": label, "data-orientation": orientation, "data-week-numbers": showWeekNumbers ? '' : undefined, "data-stacked": stacked ? '' : undefined, style: cellSize && Number.isFinite(cellSize) && cellSize > 0
                 ? { '--rf-date-cell-size': `${cellSize}px` }
-                : undefined, children: [_jsxs("div", { class: "rf-calendar-months", mix: [
+                : undefined, children: [stacked && (_jsxs("div", { class: "rf-calendar-weekdays", "aria-hidden": "true", children: [showWeekNumbers && _jsx("span", { class: "rf-calendar-weekdays-week" }), weekdays.map((weekday) => (_jsx("span", { children: weekday.slice(0, 2) }, weekday)))] })), _jsxs("div", { class: "rf-calendar-months", mix: [
                         gridRef,
                         hover,
                         on('pointerleave', () => {
@@ -318,8 +328,9 @@ export function Calendar(handle) {
                             const weekCount = Math.ceil((firstDayOffset + daysInMonth) / 7);
                             const weeks = Array.from({ length: weekCount }, (_, row) => Array.from({ length: 7 }, (_, column) => addDays(start, row * 7 + column)));
                             const monthIso = iso(month).slice(0, 7);
-                            return (_jsxs("div", { class: "rf-calendar-month", children: [_jsxs("div", { class: "rf-calendar-header", children: [index === 0 && monthButton('left', firstMonth <= monthStart(min)), _jsx("div", { class: "rf-calendar-months-label", "aria-live": index === 0 ? 'polite' : undefined, "aria-atomic": index === 0 ? 'true' : undefined, children: monthLabel.format(month) }), index === months.length - 1 &&
-                                                monthButton('right', firstMonth >= monthStart(max))] }), _jsxs("table", { class: "rf-calendar-grid", role: "grid", "aria-label": monthLabel.format(month), children: [_jsx("thead", { children: _jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "col", class: "rf-calendar-week", abbr: "Week number", children: _jsx("span", { class: "rf-basic-sr-only", children: "Week number" }) })), weekdays.map((weekday) => (_jsx("th", { scope: "col", abbr: weekday, children: weekday.slice(0, 2) }, weekday)))] }) }), _jsx("tbody", { children: weeks.map((week) => (_jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "row", class: "rf-calendar-week", children: getWeekNumber(week[0]) })), week.map((day) => {
+                            return (_jsxs("div", { class: "rf-calendar-month", children: [_jsxs("div", { class: "rf-calendar-header", "data-centered": sideBySide ? '' : undefined, children: [sideBySide && index === 0 && monthButton('left', previousDisabled), _jsx("div", { class: "rf-calendar-months-label", "aria-live": index === 0 ? 'polite' : undefined, "aria-atomic": index === 0 ? 'true' : undefined, children: monthLabel.format(month) }), sideBySide
+                                                ? index === months.length - 1 && monthButton('right', nextDisabled)
+                                                : index === 0 && (_jsxs(_Fragment, { children: [monthButton('left', previousDisabled), monthButton('right', nextDisabled)] }))] }), _jsxs("table", { class: "rf-calendar-grid", role: "grid", "aria-label": monthLabel.format(month), children: [_jsx("thead", { children: _jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "col", class: "rf-calendar-week", abbr: "Week number", children: _jsx("span", { class: "rf-basic-sr-only", children: "Week number" }) })), weekdays.map((weekday) => (_jsx("th", { scope: "col", abbr: weekday, children: weekday.slice(0, 2) }, weekday)))] }) }), _jsx("tbody", { children: weeks.map((week) => (_jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "row", class: "rf-calendar-week", children: getWeekNumber(week[0]) })), week.map((day) => {
                                                             const dayIso = iso(day);
                                                             const outside = !dayIso.startsWith(monthIso);
                                                             if (!dayIso || (months.length > 1 && outside))

package/dist/flows.css

@@ -131,7 +131,75 @@
   flex: 1 1 auto;
   flex-direction: column;
   min-block-size: 0;
-  border-block-start: 1px solid color-mix(in oklab, var(--rf-border) 60%, transparent);
+  /* Room for the header hairline, drawn by ::before so it can strengthen.
+     The scroll root clips its overflow, so the line cannot sit on a border. */
+  padding-block-start: 1px;
+  --rf-scroll-divider-size: 48px;
+}
+/* Scroll dividers, as in the reference: the top hairline closes the header
+   and strengthens once rows pass under it; the bottom hairline stands while
+   rows continue below and goes at the end, which is why the footer draws no
+   line of its own. Without a footer the list is the panel's last child and
+   that line would double the panel edge, so it is dropped. The lines ride the
+   scroll root because the viewport's fade mask would erase them.
+   This follows the reference's intent, not its pixels: there the stronger
+   line sits on the root's border, which the root's overflow clip hides, so
+   its header line never strengthens. Keep the strengthening. */
+.rf-command-scroll::before,
+.rf-command-scroll::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  block-size: 1px;
+  pointer-events: none;
+}
+.rf-command-scroll::before {
+  inset-block-start: 0;
+  background: color-mix(in oklab, var(--rf-border) 60%, transparent);
+}
+.rf-command-scroll::after {
+  inset-block-end: 0;
+  background: var(--rf-border);
+  opacity: 0;
+}
+@keyframes rf-scroll-divider-start {
+  to {
+    background: var(--rf-border);
+  }
+}
+@keyframes rf-scroll-divider-end {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@supports (timeline-scope: --rf-command-scroller) {
+  .rf-command-scroll {
+    timeline-scope: --rf-command-scroller;
+  }
+  .rf-command-scroll > .rf-scroll-viewport {
+    scroll-timeline-name: --rf-command-scroller;
+  }
+  /* Keep the timeline separate, as in systems.css: CSS transformers can emit
+     a shorthand timeline syntax that browsers do not yet support. */
+  .rf-command-scroll::before {
+    --rf-scroll-divider-animation: rf-scroll-divider-start 1ms linear both;
+    animation: var(--rf-scroll-divider-animation);
+    animation-timeline: --rf-command-scroller;
+    animation-range: 0 var(--rf-scroll-divider-size);
+  }
+  .rf-command-scroll::after {
+    --rf-scroll-divider-animation: rf-scroll-divider-end 1ms linear both;
+    animation: var(--rf-scroll-divider-animation);
+    animation-timeline: --rf-command-scroller;
+    animation-range: calc(100% - var(--rf-scroll-divider-size)) 100%;
+  }
+  .rf-command-scroll:last-child::after {
+    content: none;
+  }
 }
 .rf-command-scroll > .rf-scroll-viewport {
   flex: 1 1 auto;

package/dist/groups.css

@@ -243,6 +243,40 @@
 .rf-choice-group-list[data-orientation='horizontal'] .rf-choice-group-row {
   border-radius: var(--rf-radius);
 }
+/* Once hydrated, a vertical group draws its checked fill as moving blocks, one
+   per run of checked rows, under the hover fill; the rows draw none. */
+.rf-choice-runs {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  pointer-events: none;
+}
+.rf-choice-run {
+  position: absolute;
+  background: var(--rf-active);
+  transition:
+    top var(--rf-spring-moderate),
+    left var(--rf-spring-moderate),
+    width var(--rf-spring-moderate),
+    height var(--rf-spring-moderate),
+    border-radius var(--rf-spring-moderate) var(--rf-corner-delay, 0ms),
+    opacity 80ms ease;
+}
+.rf-choice-run[data-instant] {
+  transition: none;
+}
+.rf-choice-run[data-leaving] {
+  opacity: 0;
+  transition: opacity var(--rf-exit-moderate);
+}
+.rf-choice-group-list[data-rf-selection-blocks] > .rf-choice-group-row:has(input:checked) {
+  background: transparent;
+}
+@media (prefers-reduced-motion: reduce) {
+  .rf-choice-run:not([data-leaving]) {
+    transition: opacity 80ms ease;
+  }
+}
 .rf-choice-group-row[aria-disabled='true'] {
   opacity: 0.45;
 }

package/dist/groups.js

@@ -4,6 +4,7 @@ import * as accordion from '@remix-run/ui/accordion';
 import { on } from 'remix/component';
 import { Checkbox } from './basic.js';
 import { fluidHover } from './interactive.js';
+import { selectionRuns } from './selection-runs.js';
 export function Accordion(handle) {
     return () => {
         const { items, variant = 'grouped', highlight = 'item', headingLevel = 3, children: _children, ...props } = handle.props;
@@ -12,9 +13,16 @@ export function Accordion(handle) {
     };
 }
 export function CheckboxGroup(handle) {
+    // The checked fill moves with the selection, as in the reference. A
+    // controlled value changes without a change event, so each render resyncs.
+    const runs = selectionRuns();
     return () => {
         const { options, label, hideLabel, name, disabled, value, defaultValue, onValueChange, orientation = 'vertical', } = handle.props;
+        const vertical = orientation !== 'horizontal';
+        if (vertical)
+            handle.queueTask(runs.sync);
         return (_jsxs("fieldset", { class: "rf-choice-group", disabled: disabled, children: [_jsx("legend", { class: hideLabel ? 'rf-basic-sr-only' : undefined, children: label }), _jsxs("div", { class: "rf-choice-group-list", "data-orientation": orientation, mix: [
+                        vertical && runs.mix,
                         fluidHover({
                             axis: orientation === 'horizontal' ? 'x' : 'y',
                             focusSelector: ':has(input:focus-visible)',
@@ -43,7 +51,7 @@ export function CheckboxGroup(handle) {
                                 const selected = event.currentTarget.querySelectorAll('input[type="checkbox"]:checked');
                                 onValueChange(Array.from(selected, (input) => input.value));
                             }),
-                    ], children: [_jsx("div", { class: "rf-highlight", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("div", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), options.map((option) => (_jsx("div", { class: "rf-choice-group-row", "data-rf-hover-item": true, "aria-disabled": disabled || option.disabled || undefined, children: _jsx(Checkbox, { name: name, value: option.value, disabled: option.disabled, checked: value?.includes(option.value), defaultChecked: value === undefined ? defaultValue?.includes(option.value) : undefined, label: _jsxs(_Fragment, { children: [option.label, option.description && _jsx("small", { children: option.description })] }) }) }, option.value)))] })] }));
+                    ], children: [vertical && _jsx("div", { class: "rf-choice-runs", "aria-hidden": "true", "data-rf-selection-runs": true }), _jsx("div", { class: "rf-highlight", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("div", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), options.map((option) => (_jsx("div", { class: "rf-choice-group-row", "data-rf-hover-item": true, "aria-disabled": disabled || option.disabled || undefined, children: _jsx(Checkbox, { name: name, value: option.value, disabled: option.disabled, checked: value?.includes(option.value), defaultChecked: value === undefined ? defaultValue?.includes(option.value) : undefined, label: _jsxs(_Fragment, { children: [option.label, option.description && _jsx("small", { children: option.description })] }) }) }, option.value)))] })] }));
     };
 }
 export function RadioGroup(handle) {

package/dist/icon-data.d.ts

@@ -281,6 +281,19 @@ export declare const defaultIcons: {
     }], readonly ['path', {
         readonly d: 'M12 5v14';
     }]];
+    readonly pause: readonly [readonly ['rect', {
+        readonly x: '14';
+        readonly y: '3';
+        readonly width: '5';
+        readonly height: '18';
+        readonly rx: '1';
+    }], readonly ['rect', {
+        readonly x: '5';
+        readonly y: '3';
+        readonly width: '5';
+        readonly height: '18';
+        readonly rx: '1';
+    }]];
     readonly 'rotate-ccw': readonly [readonly ['path', {
         readonly d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8';
     }], readonly ['path', {
@@ -398,4 +411,17 @@ export declare const defaultIcons: {
         readonly cy: '19';
         readonly r: '1';
     }]];
+    readonly 'more-horizontal': readonly [readonly ['circle', {
+        readonly cx: '12';
+        readonly cy: '12';
+        readonly r: '1';
+    }], readonly ['circle', {
+        readonly cx: '19';
+        readonly cy: '12';
+        readonly r: '1';
+    }], readonly ['circle', {
+        readonly cx: '5';
+        readonly cy: '12';
+        readonly r: '1';
+    }]];
 };

package/dist/icon-data.js

@@ -246,6 +246,10 @@ export const defaultIcons = {
         ['path', { d: 'M5 12h14' }],
         ['path', { d: 'M12 5v14' }],
     ],
+    pause: [
+        ['rect', { x: '14', y: '3', width: '5', height: '18', rx: '1' }],
+        ['rect', { x: '5', y: '3', width: '5', height: '18', rx: '1' }],
+    ],
     'rotate-ccw': [
         ['path', { d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }],
         ['path', { d: 'M3 3v5h5' }],
@@ -314,4 +318,9 @@ export const defaultIcons = {
         ['circle', { cx: '12', cy: '5', r: '1' }],
         ['circle', { cx: '12', cy: '19', r: '1' }],
     ],
+    'more-horizontal': [
+        ['circle', { cx: '12', cy: '12', r: '1' }],
+        ['circle', { cx: '19', cy: '12', r: '1' }],
+        ['circle', { cx: '5', cy: '12', r: '1' }],
+    ],
 };

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './dates.tsx';
 export * from './flows.tsx';
 export * from './range-color.tsx';
 export * from './color-picker.tsx';
+export * from './breadcrumb.tsx';
 export * from './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './dates.js';
 export * from './flows.js';
 export * from './range-color.js';
 export * from './color-picker.js';
+export * from './breadcrumb.js';
 export * from './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';

package/dist/interactive.d.ts

@@ -1,4 +1,4 @@
-import type { Handle, RemixNode } from 'remix/component';
+import type { Handle, MixInput, RemixNode } from 'remix/component';
 export interface FluidHoverOptions {
     /** Track the pointer on one axis or across a two-dimensional grid. */
     axis?: 'x' | 'y' | 'both';
@@ -62,6 +62,8 @@ export interface DropdownProps {
     /** `bare` renders an unstyled button trigger that takes its look from `triggerClass`, for sidebar rows and actions. */
     variant?: 'outline' | 'ghost' | 'bare';
     triggerClass?: string;
+    /** Extra behavior on the trigger, such as a Tooltip's trigger props. */
+    triggerMix?: MixInput;
     /** Which side of the trigger the menu opens on. Default bottom. */
     side?: 'top' | 'bottom';
     searchable?: boolean;
@@ -73,5 +75,11 @@ export interface DropdownProps {
     chevron?: boolean;
     /** Text shown when a search matches nothing. */
     emptyMessage?: string;
+    /** Opens the menu when a mouse rests on the trigger and closes it once the pointer leaves the trigger and the menu. A click pins it open; touch and the keyboard open it as usual. */
+    openOnHover?: boolean;
+    /** With openOnHover: ms the pointer rests on the trigger before the menu opens. Default 100. */
+    delay?: number;
+    /** With openOnHover: ms before the menu closes once the pointer has left, long enough to cross the gap to the menu. Default 150. */
+    closeDelay?: number;
 }
 export declare function Dropdown(handle: Handle<DropdownProps>): () => import("remix/component").RemixElement;