@rtzll/reflow 0.1.0 → 0.3.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)
+- [Components and roadmap](https://github.com/rtzll/reflow/blob/main/docs/components.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,164 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { attrs, on, ref } from 'remix/component';
+import { Icon } from './icon.js';
+import { Dropdown, fluidHover } from './interactive.js';
+import { Tooltip } from './overlays.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;
+    // Steps whose label is cut, by index, read as the pointer or keyboard focus
+    // arrives; and the step whose menu is open, whose full name stays hidden.
+    let cut = new Set();
+    let menuOpen;
+    const listRef = ref((node, signal) => {
+        if (!(node instanceof HTMLOListElement))
+            return;
+        list = node;
+        const observer = new ResizeObserver(() => measure());
+        if (node.parentElement)
+            observer.observe(node.parentElement);
+        const menus = new MutationObserver(() => {
+            const open = node.querySelector('[data-rf-step][aria-expanded="true"]');
+            const next = open ? Number(open.dataset.rfStep) : undefined;
+            if (next === menuOpen)
+                return;
+            menuOpen = next;
+            void handle.update();
+        });
+        menus.observe(node, { subtree: true, attributeFilter: ['aria-expanded'] });
+        signal.addEventListener('abort', () => {
+            observer.disconnect();
+            menus.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();
+        }
+    }
+    // Whether a step's label is cut, read as the pointer or keyboard focus
+    // arrives: cheap, and current when its tooltip could show.
+    function checkCut(event) {
+        const crumb = event.target instanceof Element ? event.target.closest('[data-rf-step]') : null;
+        const label = crumb?.querySelector('.rf-breadcrumb-label');
+        if (!crumb || !label)
+            return;
+        const index = Number(crumb.dataset.rfStep);
+        const isCut = label.scrollWidth > label.clientWidth + 0.5;
+        if (isCut === cut.has(index))
+            return;
+        cut = new Set(cut);
+        if (isCut)
+            cut.add(index);
+        else
+            cut.delete(index);
+        void handle.update();
+    }
+    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 })] }));
+        // The full name of a cut step, in the library tooltip under it, as in
+        // the reference. It stays closed while the name fits and while the
+        // step's own menu is open, so it never stacks on the menu. The step is
+        // described by the tooltip only while its name is cut.
+        const withFullName = (item, index, render) => (_jsx(Tooltip, { content: item.label, side: "bottom", open: cut.has(index) && menuOpen !== index ? undefined : false, renderTrigger: (props) => render(cut.has(index) ? props : { 'aria-describedby': '', mix: props.mix }) }));
+        const described = (trigger) => trigger['aria-describedby'] || undefined;
+        const step = (item, index) => {
+            const last = index === items.length - 1;
+            if (last) {
+                return withFullName(item, index, (trigger) => (_jsx("span", { class: "rf-breadcrumb-crumb rf-breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", "aria-describedby": described(trigger), "data-rf-step": index, mix: trigger.mix, children: content(item) })));
+            }
+            const menu = item.menu;
+            if (menu) {
+                return withFullName(item, index, (trigger) => (_jsx(Dropdown, { label: item.label, variant: "bare", triggerClass: "rf-breadcrumb-crumb", triggerMix: [
+                        trigger.mix,
+                        attrs({ 'data-rf-step': String(index) }),
+                        described(trigger) && attrs({ 'aria-describedby': described(trigger) }),
+                    ], size: size, openOnHover: openOnHover, items: menu, onSelect: item.onMenuSelect, triggerContent: _jsxs(_Fragment, { children: [content(item), trailing] }) })));
+            }
+            return withFullName(item, index, (trigger) => (_jsxs("a", { class: "rf-breadcrumb-crumb", href: item.href, "aria-describedby": described(trigger), "data-rf-step": index, mix: trigger.mix, 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', checkCut),
+                on('focusin', checkCut),
+            ], 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;
@@ -284,6 +297,22 @@
   cursor: ew-resize;
 }
 
+/* The drawn cursor of a locked-pointer scrub. */
+.rf-scrub-cursor {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  background: transparent;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
+}
+.rf-scrub-cursor > svg {
+  display: block;
+}
+
 .rf-color-field[data-editing] .rf-color-field-body {
   cursor: text;
 }

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],
@@ -370,11 +375,64 @@ function FormatMenu(handle) {
                                     }), children: _jsx("span", { class: "rf-menu-label", "data-label": formatLabels[format], children: _jsx("span", { children: formatLabels[format] }) }) }, format)))] }) })] }) }));
     };
 }
+// The stand-in for the OS cursor while a channel scrub holds the pointer lock,
+// as in the reference: a black ↔ arrow with a white stroke and a drop shadow,
+// legible on any surface. It lives in the top layer so it also shows over a
+// ColorPicker inside a popover.
+function scrubCursor(doc) {
+    let cursor = doc.querySelector(':scope > body > .rf-scrub-cursor');
+    if (cursor)
+        return cursor;
+    cursor = doc.createElement('div');
+    cursor.className = 'rf-scrub-cursor';
+    cursor.setAttribute('popover', 'manual');
+    cursor.setAttribute('aria-hidden', 'true');
+    cursor.innerHTML =
+        '<svg width="24" height="14" viewBox="0 0 24 14" fill="#000" stroke="#fff" stroke-width="1"><path d="M0.5 7l5-5v3.5h13V2l5 5-5 5V8.5h-13V12l-5-5z"/></svg>';
+    doc.body.append(cursor);
+    return cursor;
+}
 function ColorField(handle) {
     let draft;
     let editing = false;
     let scrubbing;
     let input = null;
+    // Drag travel is unbounded under the pointer lock; the drawn cursor wraps
+    // at the viewport edges instead of stopping.
+    function placeCursor(scrub, element) {
+        const doc = element.ownerDocument;
+        const cursor = scrubCursor(doc);
+        const width = doc.documentElement.clientWidth;
+        const x = (((scrub.x + scrub.travel) % width) + width) % width;
+        cursor.style.left = `${x - 12}px`;
+        cursor.style.top = `${scrub.y - 7}px`;
+    }
+    function lockPointer(scrub, element) {
+        const doc = element.ownerDocument;
+        if (scrub.lock || !scrub.mouse || !element.requestPointerLock)
+            return;
+        scrub.lock = new AbortController();
+        doc.addEventListener('pointerlockchange', () => {
+            const cursor = scrubCursor(doc);
+            if (doc.pointerLockElement === element && scrubbing === scrub) {
+                placeCursor(scrub, element);
+                cursor.showPopover?.();
+            }
+            else {
+                cursor.hidePopover?.();
+                scrub.lock?.abort();
+            }
+        }, { signal: scrub.lock.signal });
+        // Without the lock (refused, or unsupported) the scrub carries on with the
+        // OS cursor.
+        void Promise.resolve(element.requestPointerLock()).catch(() => scrub.lock?.abort());
+    }
+    function endScrub(element) {
+        const doc = element.ownerDocument;
+        if (doc.pointerLockElement === element)
+            doc.exitPointerLock();
+        doc.querySelector(':scope > body > .rf-scrub-cursor')?.hidePopover?.();
+    }
     const inputRef = ref((node, signal) => {
         if (!(node instanceof HTMLInputElement))
             return;
@@ -431,26 +489,46 @@ function ColorField(handle) {
                                 return;
                             scrubbing = {
                                 id: event.pointerId,
-                                x: event.clientX,
                                 start: numeric(value),
+                                x: event.clientX,
+                                y: event.clientY,
+                                lastX: event.clientX,
+                                travel: 0,
                                 moved: false,
+                                mouse: event.pointerType === 'mouse',
+                                locked: false,
                             };
                             event.currentTarget.setPointerCapture(event.pointerId);
                         }),
                         on('pointermove', (event) => {
-                            if (!scrubbing || scrubbing.id !== event.pointerId)
+                            const scrub = scrubbing;
+                            if (!scrub || scrub.id !== event.pointerId)
                                 return;
-                            const travel = event.clientX - scrubbing.x;
-                            if (!scrubbing.moved && Math.abs(travel) < 2)
+                            const element = event.currentTarget;
+                            // Under the pointer lock clientX stands still; movementX carries the travel.
+                            const locked = element.ownerDocument.pointerLockElement === element;
+                            // The move that crosses into or out of the lock is not travel:
+                            // granting the lock can warp the cursor, and leaving it lets
+                            // clientX jump back to where the cursor really is.
+                            if (locked === scrub.locked) {
+                                scrub.travel += locked ? event.movementX : event.clientX - scrub.lastX;
+                            }
+                            scrub.locked = locked;
+                            scrub.lastX = event.clientX;
+                            if (!scrub.moved && Math.abs(scrub.travel) < 2)
                                 return;
-                            scrubbing.moved = true;
-                            if (Number.isNaN(scrubbing.start))
+                            scrub.moved = true;
+                            lockPointer(scrub, element);
+                            if (locked)
+                                placeCursor(scrub, element);
+                            if (Number.isNaN(scrub.start))
                                 return;
-                            commitNumber(scrubbing.start + Math.round(travel) * step);
+                            commitNumber(scrub.start + Math.round(scrub.travel) * step);
                         }),
-                        on('pointerup', () => {
+                        on('pointerup', (event) => {
                             const moved = scrubbing?.moved;
                             scrubbing = undefined;
+                            endScrub(event.currentTarget);
                             if (moved)
                                 return;
                             editing = true;
@@ -460,8 +538,9 @@ function ColorField(handle) {
                                 input?.select();
                             });
                         }),
-                        on('pointercancel', () => {
+                        on('pointercancel', (event) => {
                             scrubbing = undefined;
+                            endScrub(event.currentTarget);
                         }),
                     ]
                     : undefined, children: [prefix && (_jsx("span", { class: "rf-color-field-prefix", "aria-hidden": "true", children: prefix })), _jsx("input", { type: "text", "aria-label": ariaLabel, inputMode: scrub ? 'numeric' : 'text', autocomplete: "off", spellcheck: false, disabled: disabled, value: shown, mix: [