@rtzll/reflow 0.1.0 → 0.2.0

package/README.md

@@ -11,7 +11,7 @@ import { Button, Dialog, Sidebar, Switch } from '@rtzll/reflow'
 Serve `@rtzll/reflow/styles.css` with your app and enable Remix's browser runtime for interactive controls.
 
 - [Installation and runtime setup](https://github.com/rtzll/reflow/blob/main/docs/integration.md)
-- [All 33 components and known gaps](https://github.com/rtzll/reflow/blob/main/docs/coverage.md)
+- [All 35 components and known gaps](https://github.com/rtzll/reflow/blob/main/docs/coverage.md)
 - [Customization](https://github.com/rtzll/reflow/blob/main/docs/customization.md)
 - [Standalone Remix starter](https://github.com/rtzll/reflow/tree/main/examples/starter)
 

package/dist/basic.js

@@ -275,12 +275,41 @@ export function Switch(handle) {
                     ] }), _jsx("span", { class: "rf-switch-track", "aria-hidden": "true", children: _jsx("span", { class: "rf-switch-thumb" }) }), label != null && _jsx("span", { class: "rf-choice-label", children: label })] }));
     };
 }
+const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/** Where keyboard focus goes when a banner holding it closes, as in the
+ *  reference: the first focusable element after it, else the last before it. */
+function focusNeighbour(banner) {
+    const candidates = Array.from(banner.ownerDocument.querySelectorAll(focusableSelector)).filter((node) => !banner.contains(node) && !node.closest('[inert]') && node.checkVisibility());
+    const after = candidates.find((node) => banner.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING);
+    const before = candidates
+        .filter((node) => banner.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING)
+        .pop();
+    (after ?? before)?.focus({ preventScroll: true });
+}
 export function Banner(handle) {
     let dismissed = false;
+    let root = null;
+    let wasVisible = true;
+    // Set when the dismiss button held focus, so the close hands it on.
+    let handOff = false;
+    const rootRef = ref((node) => {
+        root = node;
+    });
     return () => {
         const { class: classProp, className, status = 'default', contrast = 'low', variant = 'inline', size, icon, dismissible, dismissLabel = 'Dismiss', open, onDismiss, role, children, ...props } = handle.props;
         const visible = open ?? !dismissed;
-        return (_jsx("div", { class: "rf-banner-collapse", "data-open": visible ? 'true' : 'false', "data-variant": variant, 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', () => {
+        if (wasVisible && !visible && handOff) {
+            handOff = false;
+            handle.queueTask(() => {
+                if (root)
+                    focusNeighbour(root);
+            });
+        }
+        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) => {
+                                handOff = event.currentTarget === document.activeElement;
                                 onDismiss?.();
                                 if (open === undefined) {
                                     dismissed = true;

package/dist/breadcrumb.css

@@ -0,0 +1,165 @@
+/* Breadcrumb: a trail of steps on one fluid hover scope. Each step carries
+   its trailing separator, so steps sit flush and the highlight never goes
+   dark between them. Values from the reference: 28px steps (24px compact),
+   8px (6px) side padding, a 6px (4px) icon gap. */
+.rf-breadcrumb {
+  --rf-crumb-height: 28px;
+  --rf-crumb-padding: 8px;
+  --rf-crumb-gap: 6px;
+  --rf-crumb-icon: 16px;
+  --rf-crumb-separator: 14px;
+  --rf-crumb-max: 12rem;
+  min-inline-size: 0;
+}
+.rf-breadcrumb[data-density='compact'],
+[data-density='compact'] .rf-breadcrumb:not([data-density='default']) {
+  --rf-crumb-height: 24px;
+  --rf-crumb-padding: 6px;
+  --rf-crumb-gap: 4px;
+  --rf-crumb-icon: 14px;
+  --rf-crumb-separator: 12px;
+  --rf-crumb-max: 10rem;
+}
+
+.rf-breadcrumb-list {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--rf-muted);
+  font-size: var(--rf-text-body);
+  line-height: var(--rf-leading-body);
+}
+
+/* Steps keep their width; only the current page gives way and truncates. */
+.rf-breadcrumb-item {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  min-inline-size: 0;
+}
+.rf-breadcrumb-item:has(> [aria-current='page']) {
+  flex-shrink: 1;
+}
+.rf-breadcrumb-item > .rf-dropdown {
+  display: inline-flex;
+  min-inline-size: 0;
+}
+
+.rf-breadcrumb-crumb {
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--rf-crumb-gap);
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: var(--rf-crumb-max);
+  block-size: var(--rf-crumb-height);
+  padding: 0 var(--rf-crumb-padding);
+  border: 0;
+  border-radius: var(--rf-item-radius, 8px);
+  outline: none;
+  background: transparent;
+  color: var(--rf-muted);
+  font: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 80ms ease;
+}
+/* The separator's glyph carries its own side bearing. */
+.rf-breadcrumb-item:not(:last-child) .rf-breadcrumb-crumb:has(> .rf-breadcrumb-separator) {
+  padding-inline-end: var(--rf-crumb-gap);
+}
+.rf-breadcrumb-crumb > svg,
+.rf-breadcrumb-crumb > :not(.rf-breadcrumb-separator) svg {
+  flex: none;
+  inline-size: var(--rf-crumb-icon);
+  block-size: var(--rf-crumb-icon);
+}
+.rf-breadcrumb-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rf-breadcrumb-page {
+  flex-shrink: 1;
+  max-inline-size: none;
+  color: var(--rf-fg);
+  cursor: default;
+}
+
+.rf-breadcrumb-item[data-rf-hovered] .rf-breadcrumb-crumb,
+.rf-breadcrumb-crumb:focus-visible,
+.rf-breadcrumb-crumb[aria-expanded='true'] {
+  color: var(--rf-fg);
+}
+.rf-breadcrumb-crumb:focus-visible {
+  outline: 1px solid var(--rf-accent, #6b97ff);
+  outline-offset: -1px;
+}
+@media (forced-colors: none) {
+  .rf-breadcrumb:has(> .rf-focus-ring[data-visible]) .rf-breadcrumb-crumb:focus-visible {
+    outline-color: transparent;
+  }
+}
+@media (hover: hover) {
+  [data-hover='standard'] .rf-breadcrumb-crumb:not(.rf-breadcrumb-page):hover {
+    background: var(--rf-hover);
+    color: var(--rf-fg);
+  }
+}
+
+.rf-breadcrumb-hover {
+  border-radius: var(--rf-item-radius, 8px);
+  background: var(--rf-hover);
+}
+
+.rf-breadcrumb-separator {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--rf-muted);
+  user-select: none;
+}
+.rf-breadcrumb-separator > svg {
+  inline-size: var(--rf-crumb-separator);
+  block-size: var(--rf-crumb-separator);
+}
+.rf-breadcrumb-item:last-child .rf-breadcrumb-separator {
+  display: none;
+}
+/* A step that opens a menu says so: its chevron turns down on hover, on
+   keyboard focus and while the menu is open. A link's chevron stays put. */
+.rf-breadcrumb[data-separator='chevron'] [aria-haspopup] > .rf-breadcrumb-separator {
+  transition: transform 150ms ease-out;
+}
+.rf-breadcrumb[data-separator='chevron']
+  :is(
+    .rf-breadcrumb-item[data-rf-hovered] [aria-haspopup],
+    [aria-haspopup]:focus-visible,
+    [aria-haspopup][aria-expanded='true']
+  )
+  > .rf-breadcrumb-separator {
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .rf-breadcrumb [aria-haspopup] > .rf-breadcrumb-separator,
+  .rf-breadcrumb-crumb {
+    transition: none;
+  }
+}
+
+/* Step and ellipsis menus fit their entries, as in the reference, rather than
+   taking the fixed Dropdown width. */
+.rf-breadcrumb .rf-dropdown-surface {
+  inline-size: max-content;
+  min-inline-size: 8rem;
+}

package/dist/breadcrumb.d.ts

@@ -0,0 +1,30 @@
+import type { Handle, RemixNode } from 'remix/component';
+import { type DropdownItem } from './interactive.tsx';
+export interface BreadcrumbItem {
+    label: string;
+    /** Where the step goes. The last item is the current page and is not a link. */
+    href?: string;
+    icon?: RemixNode;
+    /** Turns a step before the current page into a menu trigger, such as its siblings. */
+    menu?: readonly DropdownItem[];
+    onMenuSelect?: (value: string, checked?: boolean) => void;
+}
+export interface BreadcrumbProps {
+    /** The trail, ending with the current page. */
+    items: readonly BreadcrumbItem[];
+    /** Names the navigation landmark. Default "Breadcrumb". */
+    label?: string;
+    size?: 'default' | 'compact';
+    /** Trailing glyph of every step but the last. Defaults to a chevron; null drops it. */
+    separator?: RemixNode | null;
+    /** Hide middle steps behind an ellipsis menu while the trail is wider than its container. The first step, the last link and the current page always stay. */
+    collapse?: boolean;
+    /** Open step menus and the ellipsis menu when a mouse rests on them, as Dropdown's openOnHover. */
+    openOnHover?: boolean;
+}
+/**
+ * A trail of links to the current page, as in the reference. Every step shares
+ * one fluid hover scope, and the separator is part of each step, so the
+ * highlight glides along the trail without going dark between steps.
+ */
+export declare function Breadcrumb(handle: Handle<BreadcrumbProps>): () => import("remix/component").RemixElement;

package/dist/breadcrumb.js

@@ -0,0 +1,133 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { Icon } from './icon.js';
+import { Dropdown, fluidHover } from './interactive.js';
+const fallbackEllipsisWidth = 44;
+/**
+ * A trail of links to the current page, as in the reference. Every step shares
+ * one fluid hover scope, and the separator is part of each step, so the
+ * highlight glides along the trail without going dark between steps.
+ */
+export function Breadcrumb(handle) {
+    let list = null;
+    let hidden = 0;
+    // Natural widths per step, remembered so a hidden step returns as soon as it fits.
+    let widths = [];
+    let ellipsisWidth = 0;
+    const listRef = ref((node, signal) => {
+        if (!(node instanceof HTMLOListElement))
+            return;
+        list = node;
+        const observer = new ResizeObserver(() => measure());
+        if (node.parentElement)
+            observer.observe(node.parentElement);
+        signal.addEventListener('abort', () => {
+            observer.disconnect();
+            if (list === node)
+                list = null;
+        });
+    });
+    function naturalWidth(item) {
+        let width = item.getBoundingClientRect().width;
+        // The current page shrinks to fit; add back what its label hides.
+        if (item.querySelector('[aria-current="page"]')) {
+            for (const label of item.querySelectorAll('.rf-breadcrumb-label')) {
+                width += label.scrollWidth - label.clientWidth;
+            }
+        }
+        return width;
+    }
+    function measure() {
+        const nav = list?.parentElement;
+        if (!list || !nav)
+            return;
+        const count = handle.props.items.length;
+        const items = Array.from(list.children);
+        const steps = items.filter((item) => !item.hasAttribute('data-ellipsis'));
+        const ellipsis = items.find((item) => item.hasAttribute('data-ellipsis'));
+        if (ellipsis)
+            ellipsisWidth = naturalWidth(ellipsis);
+        // The rendered steps are 0, then hidden + 1 onward.
+        steps.forEach((item, i) => {
+            const index = hidden > 0 && i > 0 ? i + hidden : i;
+            if (index < count)
+                widths[index] = naturalWidth(item);
+        });
+        let next = 0;
+        if (handle.props.collapse) {
+            const available = nav.clientWidth;
+            const width = (i) => widths[i] ?? 0;
+            let total = 0;
+            for (let i = 0; i < count; i++)
+                total += width(i);
+            const maxHidden = Math.max(0, count - 3);
+            if (total > available + 0.5) {
+                let shown = total + (ellipsisWidth || fallbackEllipsisWidth);
+                while (next < maxHidden && shown > available + 0.5) {
+                    shown -= width(1 + next);
+                    next++;
+                }
+            }
+        }
+        if (next !== hidden) {
+            hidden = next;
+            void handle.update();
+        }
+    }
+    // Show the full name of a cut step on hover and focus.
+    function showFullName(event) {
+        const crumb = event.target instanceof Element
+            ? event.target.closest('.rf-breadcrumb-crumb')
+            : null;
+        const label = crumb?.querySelector('.rf-breadcrumb-label');
+        if (!crumb || !label)
+            return;
+        if (label.scrollWidth > label.clientWidth + 0.5)
+            crumb.title = label.textContent ?? '';
+        else
+            crumb.removeAttribute('title');
+    }
+    return () => {
+        const { items, label = 'Breadcrumb', size, separator, collapse, openOnHover } = handle.props;
+        widths.length = items.length;
+        const hide = collapse ? Math.min(hidden, Math.max(0, items.length - 3)) : 0;
+        // Every render: a label change can change a step's width.
+        if (collapse)
+            handle.queueTask(() => measure());
+        const trailing = separator === null ? null : (_jsx("span", { class: "rf-breadcrumb-separator", "aria-hidden": "true", children: separator ?? _jsx(Icon, { name: "chevron-right" }) }));
+        const content = (item) => (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { class: "rf-breadcrumb-label", children: item.label })] }));
+        const step = (item, index) => {
+            const last = index === items.length - 1;
+            if (last) {
+                return (_jsx("span", { class: "rf-breadcrumb-crumb rf-breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", children: content(item) }));
+            }
+            if (item.menu) {
+                return (_jsx(Dropdown, { label: item.label, variant: "bare", triggerClass: "rf-breadcrumb-crumb", size: size, openOnHover: openOnHover, items: item.menu, onSelect: item.onMenuSelect, triggerContent: _jsxs(_Fragment, { children: [content(item), trailing] }) }));
+            }
+            return (_jsxs("a", { class: "rf-breadcrumb-crumb", href: item.href, children: [content(item), trailing] }));
+        };
+        const hiddenItems = items.slice(1, 1 + hide);
+        const visible = items
+            .map((item, index) => ({ item, index }))
+            .filter(({ index }) => index === 0 || index > hide);
+        const ellipsis = hide > 0 && (_jsx("li", { class: "rf-breadcrumb-item", "data-rf-hover-item": true, "data-ellipsis": true, children: _jsx(Dropdown, { label: `Show ${hide} hidden ${hide === 1 ? 'step' : 'steps'}`, variant: "bare", triggerClass: "rf-breadcrumb-crumb", size: size, openOnHover: openOnHover, items: hiddenItems.map((hiddenItem, offset) => ({
+                    value: String(offset),
+                    label: hiddenItem.label,
+                    icon: hiddenItem.icon,
+                    disabled: !hiddenItem.href,
+                })), onSelect: (value) => {
+                    const href = hiddenItems[Number(value)]?.href;
+                    if (href)
+                        window.location.assign(href);
+                }, triggerContent: _jsxs(_Fragment, { children: [_jsx(Icon, { name: "more-horizontal" }), trailing] }) }) }, "ellipsis"));
+        const rows = visible.flatMap(({ item, index }) => [
+            _jsx("li", { class: "rf-breadcrumb-item", "data-rf-hover-item": true, children: step(item, index) }, index),
+            index === 0 && ellipsis,
+        ]);
+        return (_jsxs("nav", { class: "rf-breadcrumb", "aria-label": label, "data-density": size, "data-separator": separator === undefined ? 'chevron' : undefined, mix: [
+                fluidHover({ axis: 'x', focusSelector: ':has(:focus-visible)' }),
+                on('pointerover', showFullName),
+                on('focusin', showFullName),
+            ], children: [_jsx("span", { class: "rf-highlight rf-breadcrumb-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), _jsx("ol", { class: "rf-breadcrumb-list", mix: listRef, children: rows })] }));
+    };
+}

package/dist/color-picker.css

@@ -234,6 +234,19 @@
   padding: 0;
 }
 
+.rf-color-format-surface .rf-menu-selection {
+  border-radius: var(--rf-radius, 8px);
+  background: var(--rf-active);
+}
+
+@media (forced-colors: none) {
+  .rf-color-format-surface
+    .rf-menu-list:has(> .rf-focus-ring[data-visible])
+    > .rf-menu-item:focus-visible {
+    outline-color: transparent;
+  }
+}
+
 .rf-color-format-surface .rf-menu-item {
   gap: 0;
   min-block-size: 0;

package/dist/color-picker.js

@@ -358,10 +358,15 @@ function SaturationSquare(handle) {
 // Format menu
 // ---------------------------------------------------------------------------
 function FormatMenu(handle) {
-    const highlight = fluidHover({ highlightedSelector: '[data-highlighted]' });
+    // As in the reference: the checked format keeps its own background, the
+    // hover grows out of it, and one focus ring glides between rows.
+    const highlight = fluidHover({
+        highlightedSelector: '[data-highlighted]',
+        selectedSelector: '[aria-checked="true"]',
+    });
     return () => {
         const { value, disabled, onChange } = handle.props;
-        return (_jsx("div", { class: "rf-color-format", mix: menu.onMenuSelect((event) => onChange((event.item.value ?? event.item.name))), children: _jsxs(menu.Context, { label: "Color format", children: [_jsxs("button", { type: "button", class: "rf-color-format-trigger", disabled: disabled, mix: menu.trigger({ placement: 'bottom-start', offset: 6 }), children: [_jsx("span", { children: formatLabels[value] }), _jsx(Icon, { name: "chevron-down", size: 14 })] }), _jsx("div", { class: "rf-menu-surface rf-dropdown-surface rf-color-format-surface", mix: menu.popover(), children: _jsxs("div", { class: "rf-menu-list", mix: [menu.list(), highlight], children: [_jsx("span", { class: "rf-highlight rf-menu-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), formats.map((format) => (_jsx("div", { class: "rf-menu-item", "data-rf-hover-item": true, mix: menu.item({
+        return (_jsx("div", { class: "rf-color-format", mix: menu.onMenuSelect((event) => onChange((event.item.value ?? event.item.name))), children: _jsxs(menu.Context, { label: "Color format", children: [_jsxs("button", { type: "button", class: "rf-color-format-trigger", disabled: disabled, mix: menu.trigger({ placement: 'bottom-start', offset: 6 }), children: [_jsx("span", { children: formatLabels[value] }), _jsx(Icon, { name: "chevron-down", size: 14 })] }), _jsx("div", { class: "rf-menu-surface rf-dropdown-surface rf-color-format-surface", mix: menu.popover(), children: _jsxs("div", { class: "rf-menu-list", mix: [menu.list(), highlight], children: [_jsx("span", { class: "rf-highlight rf-menu-selection", "aria-hidden": "true", "data-rf-selection-layer": true }), _jsx("span", { class: "rf-highlight rf-menu-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), formats.map((format) => (_jsx("div", { class: "rf-menu-item", "data-rf-hover-item": true, mix: menu.item({
                                         name: format,
                                         value: format,
                                         label: formatLabels[format],

package/dist/flows.css

@@ -131,7 +131,72 @@
   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. */
+.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/icon-data.d.ts

@@ -398,4 +398,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

@@ -314,4 +314,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

@@ -73,5 +73,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;

package/dist/interactive.js

@@ -250,7 +250,86 @@ export function Tabs(handle) {
                         ], children: [_jsx("span", { class: "rf-highlight rf-tab-selection", "aria-hidden": "true", "data-rf-selection-layer": true }), _jsx("span", { class: "rf-highlight rf-tab-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), items.map((item) => (_jsxs("button", { class: "rf-tab", type: "button", "aria-label": item.label, "data-rf-hover-item": true, "data-active-label": activeLabel && item.icon != null ? '' : undefined, mix: tabs.tab({ name: item.value, disabled: item.disabled }), children: [item.icon != null && (_jsx("span", { class: "rf-tab-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { class: "rf-tab-label", "data-label": item.label, children: _jsx("span", { children: item.label }) })] }, item.value)))] }), items.map((item) => (_jsx("div", { class: "rf-tab-panel", tabIndex: item.panel != null ? 0 : undefined, mix: tabs.panel({ name: item.value }), children: item.panel }, item.value)))] }) }));
     };
 }
+/**
+ * One timer shared by a hover-opening trigger and its menu surface, as in the
+ * reference. A menu opened by hover closes when the pointer leaves both; one
+ * opened by a click or the keyboard, or pinned by a click, stays until it is
+ * dismissed as usual. A hover open is a preview, so it leaves focus in place.
+ */
+function createHoverControl(signal) {
+    let timer;
+    let menu;
+    // True while the open menu is one the hover timer opened.
+    let hoverOpened = false;
+    const cancel = () => clearTimeout(timer);
+    signal.addEventListener('abort', cancel, { once: true });
+    return {
+        attach(next) {
+            menu = next;
+        },
+        cancel,
+        enter(delay) {
+            cancel();
+            const open = () => {
+                // A menu already open from a click or a pin stays the reader's.
+                if (!menu || menu.isOpen)
+                    return;
+                // The menu ignores opens while a close is still settling; keep
+                // asking while the pointer rests on the trigger.
+                if (menu.state !== 'idle') {
+                    timer = setTimeout(open, 16);
+                    return;
+                }
+                hoverOpened = true;
+                void menu.open({ strategy: 'none' });
+            };
+            timer = setTimeout(open, delay);
+        },
+        leave(closeDelay) {
+            cancel();
+            timer = setTimeout(() => {
+                if (!menu || !hoverOpened)
+                    return;
+                hoverOpened = false;
+                if (menu.isOpen)
+                    void menu.closeAll({ focusRoot: false });
+            }, closeDelay);
+        },
+        /** A click on a hover-opened trigger pins the menu instead of closing it. Returns true when it pinned. */
+        pin() {
+            cancel();
+            const pinned = hoverOpened && !!menu?.isOpen;
+            hoverOpened = false;
+            return pinned;
+        },
+        /** Any other open (click, keyboard) belongs to the reader. */
+        release() {
+            hoverOpened = false;
+        },
+    };
+}
+function hoverTrigger(hover, delay, closeDelay) {
+    return [
+        on('pointerenter', (event) => {
+            if (event.pointerType === 'mouse')
+                hover.enter(delay);
+        }),
+        on('pointerleave', (event) => {
+            if (event.pointerType === 'mouse')
+                hover.leave(closeDelay);
+        }),
+        // Capture runs before the menu trigger's own click toggle.
+        on('click', (event) => {
+            if (!hover.pin())
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }, true),
+        on('keydown', () => hover.release()),
+    ];
+}
 export function Dropdown(handle) {
+    const hover = createHoverControl(handle.signal);
     let query = '';
     let created = [];
     const createValue = `${handle.id}-create`;
@@ -261,7 +340,9 @@ export function Dropdown(handle) {
         void handle.update();
     }
     return () => {
-        const { label, items, size, align = 'start', variant = 'outline', searchable, searchPlaceholder = 'Search…', } = handle.props;
+        const { label, items, size, align = 'start', variant = 'outline', searchable, searchPlaceholder = 'Search…', delay = 100, closeDelay = 150, } = handle.props;
+        const hovering = !!handle.props.openOnHover && !handle.props.inline;
+        const hoverMix = hovering ? hoverTrigger(hover, delay, closeDelay) : undefined;
         const allItems = [
             ...items,
             ...created.filter((entry) => !items.some((item) => item.value === entry.value)),
@@ -289,13 +370,19 @@ export function Dropdown(handle) {
                     return;
                 }
                 handle.props.onSelect?.(event.item.value ?? event.item.name, event.item.checked);
-            }), children: _jsxs(menu.Context, { label: label, children: [!handle.props.inline && variant === 'bare' && (_jsx("button", { type: "button", "aria-label": label, class: `rf-dropdown-trigger ${handle.props.triggerClass ?? ''}`, mix: menu.trigger({
-                            placement: `${handle.props.side ?? 'bottom'}-${align}`,
-                            offset: 6,
-                        }), children: handle.props.triggerContent ?? label })), !handle.props.inline && variant !== 'bare' && (_jsx(Button, { class: "rf-dropdown-trigger", variant: variant === 'ghost' ? 'ghost' : 'tertiary', size: size, trailingIcon: handle.props.chevron === false ? undefined : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) })), mix: menu.trigger({
-                            placement: `${handle.props.side ?? 'bottom'}-${align}`,
-                            offset: 6,
-                        }), children: handle.props.triggerContent ?? label })), _jsx(DropdownSurface, { inline: handle.props.inline, items: displayedItems, emptyMessage: handle.props.emptyMessage, search: searchable || handle.props.creatable
+            }), children: _jsxs(menu.Context, { label: label, children: [!handle.props.inline && variant === 'bare' && (_jsx("button", { type: "button", "aria-label": label, class: `rf-dropdown-trigger ${handle.props.triggerClass ?? ''}`, mix: [
+                            menu.trigger({
+                                placement: `${handle.props.side ?? 'bottom'}-${align}`,
+                                offset: 6,
+                            }),
+                            hoverMix,
+                        ], children: handle.props.triggerContent ?? label })), !handle.props.inline && variant !== 'bare' && (_jsx(Button, { class: "rf-dropdown-trigger", variant: variant === 'ghost' ? 'ghost' : 'tertiary', size: size, trailingIcon: handle.props.chevron === false ? undefined : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) })), mix: [
+                            menu.trigger({
+                                placement: `${handle.props.side ?? 'bottom'}-${align}`,
+                                offset: 6,
+                            }),
+                            hoverMix,
+                        ], children: handle.props.triggerContent ?? label })), _jsx(DropdownSurface, { inline: handle.props.inline, hover: hovering ? { control: hover, closeDelay } : undefined, items: displayedItems, emptyMessage: handle.props.emptyMessage, search: searchable || handle.props.creatable
                             ? { query, setQuery, placeholder: searchPlaceholder }
                             : undefined })] }) }));
     };
@@ -306,6 +393,7 @@ function matchesMenuQuery(item, query) {
 }
 function DropdownSurface(handle) {
     const context = handle.context.get(menu.Context);
+    handle.props.hover?.control.attach(context);
     const highlight = fluidHover({ highlightedSelector: '[data-highlighted]' });
     const checked = new Map();
     // Remix UI 0.13.1 unconditionally closes after its activation path. Keep
@@ -361,6 +449,20 @@ function DropdownSurface(handle) {
             : handle.props.items;
         return (_jsxs("div", { class: "rf-menu-surface rf-dropdown-surface", "data-inline": handle.props.inline || undefined, mix: [
                 !handle.props.inline && menu.popover(),
+                // A hover-opened menu stays while the pointer is over it, submenus
+                // included (they render inside this surface), and closes once the
+                // pointer leaves both the menu and its trigger.
+                handle.props.hover && [
+                    on('pointerenter', (event) => {
+                        if (event.pointerType === 'mouse')
+                            handle.props.hover?.control.cancel();
+                    }),
+                    on('pointerleave', (event) => {
+                        const hover = handle.props.hover;
+                        if (event.pointerType === 'mouse' && hover)
+                            hover.control.leave(hover.closeDelay);
+                    }),
+                ],
                 search &&
                     on('toggle', (event) => {
                         if (event.newState === 'open')

package/dist/styles.css

@@ -9,4 +9,5 @@
 @import './flows.css';
 @import './range-color.css';
 @import './color-picker.css';
+@import './breadcrumb.css';
 @import './systems.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtzll/reflow",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "dist",