@rtzll/reflow 0.2.0 → 0.4.0

package/dist/popover.css

@@ -0,0 +1,69 @@
+/* Popover: a panel anchored to its trigger. It shares the menu surfaces'
+   elevation and motion: it drops 4px and grows from 96% on the fast spring,
+   toward the trigger's side, and leaves on the fast exit. */
+.rf-popover {
+  display: inline-block;
+  max-inline-size: 100%;
+}
+
+.rf-popover-surface {
+  gap: 12px;
+  inline-size: max-content;
+  min-inline-size: 200px;
+  max-inline-size: min(320px, calc(100vw - 16px));
+  padding: 12px;
+  border: 0;
+  outline: none;
+  background: var(--rf-surface-3, white);
+  box-shadow:
+    inset 0 1px light-dark(transparent, rgb(255 255 255 / 2%)),
+    inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 2%)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 12%)),
+    0 1px 1px -0.5px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 18%)),
+    0 3px 3px -1.5px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 18%)),
+    0 12px 28px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 24%));
+  font-size: var(--rf-text-body, 13px);
+  line-height: var(--rf-leading-body, 20px);
+}
+/* Only while open: a display value on the closed panel would override the
+   browser's hiding, leaving an invisible panel that catches clicks. */
+.rf-popover-surface:popover-open {
+  display: grid;
+}
+.rf-popover-surface[data-density='compact'] {
+  gap: 8px;
+  padding: 10px;
+}
+
+/* Beside the trigger, the panel slides in sideways instead. */
+.rf-popover-surface[data-anchor-placement^='left'] {
+  --rf-menu-rest-transform: translateX(4px) scaleX(0.96);
+  transform-origin: right;
+}
+.rf-popover-surface[data-anchor-placement^='right'] {
+  --rf-menu-rest-transform: translateX(-4px) scaleX(0.96);
+  transform-origin: left;
+}
+
+.rf-popover-header {
+  display: grid;
+  gap: 4px;
+}
+.rf-popover-title {
+  margin: 0;
+  color: var(--rf-fg);
+  font-size: inherit;
+  line-height: inherit;
+  font-variation-settings: var(--rf-weight-strong);
+}
+.rf-popover-description {
+  margin: 0;
+  color: var(--rf-muted);
+  font-size: var(--rf-text-caption, 12px);
+  line-height: var(--rf-leading-caption, 16px);
+}
+.rf-popover-body {
+  display: grid;
+  gap: 8px;
+  min-inline-size: 0;
+}

package/dist/popover.d.ts

@@ -0,0 +1,38 @@
+import { type Handle, type MixInput, type RemixNode } from 'remix/component';
+import { type ButtonProps } from './basic.tsx';
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface PopoverTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    mix: MixInput<HTMLElement>;
+}
+export interface PopoverProps {
+    /** Names the panel when it has no visible title. */
+    label?: string;
+    /** A visible heading that names the panel. */
+    title?: RemixNode;
+    description?: RemixNode;
+    children?: RemixNode;
+    /** Contents of the button that opens the panel. */
+    trigger?: RemixNode;
+    triggerVariant?: ButtonProps['variant'];
+    triggerSize?: ButtonProps['size'];
+    /** Renders your own trigger. Spread the provided props onto a focusable element. */
+    renderTrigger?: (props: PopoverTriggerProps) => RemixNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which side of the trigger the panel opens on. Default bottom. */
+    placement?: PopoverPlacement;
+    /** Distance from the trigger in pixels. Default 8. */
+    offset?: number;
+    size?: 'default' | 'compact';
+}
+/**
+ * A panel anchored to a trigger, for content that needs more room than a
+ * tooltip: a filter, inline settings, a share sheet. A click opens it; Escape
+ * and a click outside close it. It is a non-modal dialog: focus moves to its
+ * first field, or to the panel, on open and returns to the trigger on close.
+ */
+export declare function Popover(handle: Handle<PopoverProps>): () => import("remix/component").RemixElement;

package/dist/popover.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on } from 'remix/component';
+import * as popover from '@remix-run/ui/popover';
+import { Button } from './basic.js';
+// A field to type into, or an element the content marks to take focus. Buttons
+// and links are left to Tab, so opening never fires a control's own tooltip.
+const initialFocus = '[autofocus], input:not(:disabled, [readonly], [type="hidden"]), select:not(:disabled), textarea:not(:disabled, [readonly])';
+/**
+ * A panel anchored to a trigger, for content that needs more room than a
+ * tooltip: a filter, inline settings, a share sheet. A click opens it; Escape
+ * and a click outside close it. It is a non-modal dialog: focus moves to its
+ * first field, or to the panel, on open and returns to the trigger on close.
+ */
+export function Popover(handle) {
+    let localOpen = handle.props.defaultOpen ?? false;
+    const panelId = `${handle.id}-panel`;
+    const titleId = `${handle.id}-title`;
+    const descriptionId = `${handle.id}-description`;
+    const isOpen = () => handle.props.open ?? localOpen;
+    function setOpen(next) {
+        if (isOpen() === next)
+            return;
+        localOpen = next;
+        handle.props.onOpenChange?.(next);
+        void handle.update();
+    }
+    // On open, focus the panel's first field, or the panel itself.
+    const focusInside = on('toggle', (event) => {
+        if (event.newState !== 'open')
+            return;
+        const panel = event.currentTarget;
+        const target = panel.querySelector(initialFocus) ?? panel;
+        target.focus({ preventScroll: true });
+    });
+    return () => {
+        const { label, title, description, children, trigger, triggerVariant = 'secondary', triggerSize, renderTrigger, placement = 'bottom', offset = 8, size, } = handle.props;
+        const open = isOpen();
+        const triggerProps = {
+            'aria-haspopup': 'dialog',
+            'aria-expanded': open,
+            'aria-controls': panelId,
+            mix: [
+                popover.anchor({ placement, offset }),
+                popover.focusOnHide(),
+                on('click', () => setOpen(!isOpen())),
+            ],
+        };
+        return (_jsx("span", { class: "rf-popover", "data-density": size, children: _jsxs(popover.Context, { children: [renderTrigger ? (renderTrigger(triggerProps)) : (_jsx(Button, { variant: triggerVariant, size: triggerSize ?? size, ...triggerProps, children: trigger })), _jsxs("div", { class: "rf-menu-surface rf-popover-surface", id: panelId, role: "dialog", tabIndex: -1, "aria-label": title == null ? label : undefined, "aria-labelledby": title == null ? undefined : titleId, "aria-describedby": description == null ? undefined : descriptionId, "data-density": size, mix: [
+                            popover.surface({
+                                open,
+                                closeOnAnchorClick: false,
+                                onHide: () => setOpen(false),
+                            }),
+                            focusInside,
+                        ], children: [(title != null || description != null) && (_jsxs("header", { class: "rf-popover-header", children: [title != null && (_jsx("h2", { class: "rf-popover-title", id: titleId, children: title })), description != null && (_jsx("p", { class: "rf-popover-description", id: descriptionId, children: description }))] })), children != null && _jsx("div", { class: "rf-popover-body", children: children })] })] }) }));
+    };
+}

package/dist/segmented-control.css

@@ -0,0 +1,172 @@
+/* SegmentedControl: a filled track around a row of segments, with a raised
+   thumb that glides to the selected one. The track's padding keeps the whole
+   control on the size ladder: 4px around 28px segments makes 36px, 2px around
+   24px makes 28px compact. Corners stay concentric: the track's radius is the
+   thumb's plus the padding. */
+.rf-segmented {
+  --rf-segment-pad: 4px;
+  display: inline-flex;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: var(--rf-fg);
+}
+.rf-segmented[data-density='compact'],
+[data-density='compact'] .rf-segmented:not([data-density='default']) {
+  --rf-segment-pad: 2px;
+}
+.rf-segmented[data-fill] {
+  display: flex;
+  inline-size: 100%;
+}
+
+.rf-segmented-track {
+  display: inline-flex;
+  flex: 1;
+  align-items: stretch;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--rf-control-height, 36px);
+  padding: var(--rf-segment-pad);
+  border-radius: calc(var(--rf-radius, 8px) + var(--rf-segment-pad));
+  background: var(--rf-hover);
+}
+.rf-segmented[data-fill] .rf-segmented-track {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+}
+
+.rf-segment {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  padding: 0 var(--rf-control-padding, 12px);
+  border-radius: var(--rf-radius, 8px);
+  color: var(--rf-muted);
+  font-size: var(--rf-text-body, 13px);
+  line-height: var(--rf-leading-body, 20px);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 80ms ease;
+}
+.rf-segment[data-icon-only] {
+  inline-size: calc(var(--rf-control-height, 36px) - var(--rf-segment-pad) * 2);
+  padding: 0;
+}
+.rf-segmented[data-fill] .rf-segment[data-icon-only] {
+  inline-size: auto;
+}
+.rf-segment:is([data-rf-hovered], :has(:checked), :has(:focus-visible)) {
+  color: var(--rf-fg);
+}
+.rf-segment[aria-disabled='true'] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* The radio stays focusable and in the form, out of sight. */
+.rf-segment-input {
+  position: absolute;
+  overflow: hidden;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  appearance: none;
+}
+
+.rf-segment-icon {
+  display: inline-flex;
+  flex: none;
+}
+.rf-segment-icon > svg {
+  inline-size: var(--rf-icon-size, 16px);
+  block-size: var(--rf-icon-size, 16px);
+}
+
+/* An invisible copy at the strong weight reserves the width, so the selected
+   label's weight shift never moves its neighbours. */
+.rf-segment-text {
+  display: inline-grid;
+  min-inline-size: 0;
+}
+.rf-segment-sizer,
+.rf-segment-label {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf-segment-sizer {
+  visibility: hidden;
+  font-variation-settings: var(--rf-weight-strong);
+}
+.rf-segment-label {
+  font-variation-settings: var(--rf-weight-normal);
+  transition: font-variation-settings 80ms ease;
+}
+.rf-segment:has(:checked) .rf-segment-label {
+  font-variation-settings: var(--rf-weight-strong);
+}
+
+/* The thumb rides the shared selection layer; pressing any segment squeezes it. */
+.rf-segmented-thumb {
+  background: var(--rf-surface-5);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 12%),
+    0 0 0 1px light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 4%));
+  transition:
+    opacity 80ms ease,
+    scale var(--rf-spring-fast);
+}
+.rf-segmented-thumb[data-moving] {
+  transition:
+    var(--rf-highlight-travel),
+    opacity 80ms ease,
+    scale var(--rf-spring-fast);
+}
+.rf-segmented-track:has(.rf-segment:not([aria-disabled='true']):active) .rf-segmented-thumb {
+  scale: 0.97;
+}
+.rf-segmented-hover {
+  background: var(--rf-hover);
+}
+
+/* Before the layers mount, the checked segment carries the thumb itself. */
+.rf-segmented-track:not([data-rf-has-selection]) .rf-segment:has(:checked) {
+  background: var(--rf-surface-5);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
+}
+
+.rf-segment:has(:focus-visible) {
+  outline: 1px solid var(--rf-accent, #6b97ff);
+  outline-offset: 1px;
+}
+@media (forced-colors: none) {
+  .rf-segmented-track:has(> .rf-focus-ring[data-visible]) .rf-segment:has(:focus-visible) {
+    outline-color: transparent;
+  }
+}
+@media (forced-colors: active) {
+  .rf-segment:has(:checked) {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rf-segmented-thumb,
+  .rf-segmented-thumb[data-moving] {
+    transition: opacity 80ms ease;
+  }
+}

package/dist/segmented-control.d.ts

@@ -0,0 +1,34 @@
+import { type Handle, type RemixNode } from 'remix/component';
+export interface SegmentedControlOption {
+    value: string;
+    /** Names the segment; for an icon-only segment it is read out and shown in a Tooltip. */
+    label: string;
+    icon?: RemixNode;
+    /** Shows only the icon. The label stays for screen readers and appears in a Tooltip on hover. */
+    iconOnly?: boolean;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** Names the group for assistive technology. */
+    label: string;
+    options: readonly SegmentedControlOption[];
+    /** The selected option in controlled mode. */
+    value?: string;
+    /** The option selected first in uncontrolled mode. Defaults to the first enabled option. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Submits the selected value with a surrounding form. */
+    name?: string;
+    disabled?: boolean;
+    size?: 'default' | 'compact';
+    /** Stretches the control to its container, with equal-width segments. */
+    fill?: boolean;
+}
+/**
+ * One choice from a short row of options, such as a view or a time range. A
+ * segmented control is never empty: without a value, the first enabled option
+ * is selected. Each segment is a native radio, so arrow keys move the
+ * selection and the value takes part in forms. A raised thumb glides to the
+ * selected segment and squeezes while a segment is pressed.
+ */
+export declare function SegmentedControl(handle: Handle<SegmentedControlProps>): () => import("remix/component").RemixElement;

package/dist/segmented-control.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on } from 'remix/component';
+import { fluidHover } from './interactive.js';
+import { Tooltip } from './overlays.js';
+/**
+ * One choice from a short row of options, such as a view or a time range. A
+ * segmented control is never empty: without a value, the first enabled option
+ * is selected. Each segment is a native radio, so arrow keys move the
+ * selection and the value takes part in forms. A raised thumb glides to the
+ * selected segment and squeezes while a segment is pressed.
+ */
+export function SegmentedControl(handle) {
+    const indicators = fluidHover({
+        axis: 'x',
+        selectedSelector: ':has(input:checked)',
+        focusSelector: ':has(input:focus-visible)',
+    });
+    return () => {
+        const { label, options, value, defaultValue, onValueChange, name = handle.id, disabled, size, fill, } = handle.props;
+        const selectable = (candidate) => options.some((option) => option.value === candidate && !option.disabled);
+        const fallback = options.find((option) => !option.disabled)?.value;
+        const selected = value !== undefined
+            ? selectable(value)
+                ? value
+                : fallback
+            : selectable(defaultValue)
+                ? defaultValue
+                : fallback;
+        const segment = (option, mix) => (_jsxs("label", { class: "rf-segment", "data-rf-hover-item": true, "data-icon-only": option.iconOnly && option.icon != null ? '' : undefined, "aria-disabled": disabled || option.disabled || undefined, mix: mix, children: [_jsx("input", { type: "radio", class: "rf-segment-input", name: name, value: option.value, disabled: option.disabled, ...(value === undefined
+                        ? { defaultChecked: selected === option.value }
+                        : { checked: selected === option.value }), mix: onValueChange &&
+                        on('change', (event) => {
+                            if (event.currentTarget.checked)
+                                onValueChange(option.value);
+                        }) }), option.icon != null && (_jsx("span", { class: "rf-segment-icon", "aria-hidden": "true", children: option.icon })), option.iconOnly && option.icon != null ? (_jsx("span", { class: "rf-basic-sr-only", children: option.label })) : (_jsxs("span", { class: "rf-segment-text", children: [_jsx("span", { class: "rf-segment-sizer", "aria-hidden": "true", children: option.label }), _jsx("span", { class: "rf-segment-label", children: option.label })] }))] }, option.value));
+        return (_jsxs("fieldset", { class: "rf-segmented", "data-density": size, "data-fill": fill ? '' : undefined, disabled: disabled, children: [_jsx("legend", { class: "rf-basic-sr-only", children: label }), _jsxs("div", { class: "rf-segmented-track", mix: indicators, children: [_jsx("span", { class: "rf-highlight rf-segmented-thumb", "aria-hidden": "true", "data-rf-selection-layer": true }), _jsx("span", { class: "rf-highlight rf-segmented-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 }), options.map((option) => option.iconOnly && option.icon != null ? (_jsx(Tooltip, { content: option.label, renderTrigger: (trigger) => segment(option, trigger.mix) }, option.value)) : (segment(option)))] })] }));
+    };
+}

package/dist/selection-runs.d.ts

@@ -0,0 +1,4 @@
+export declare function selectionRuns(): {
+    mix: import("remix/component").MixinDescriptor<Element, [callback: (node: Element, signal: AbortSignal) => void], import("remix/component").ElementProps>;
+    sync: () => void;
+};

package/dist/selection-runs.js

@@ -0,0 +1,221 @@
+import { ref } from 'remix/component';
+// The reference's merged-background timing: the inner corners trail the edges
+// by 70ms, and a merge commits once the halves have met.
+const cornerDelay = 70;
+const springMs = 200;
+const convergeMs = springMs + cornerDelay + 80;
+/** Groups sorted row indices into runs, keeping each run's id while any of its rows had one. */
+function assignRuns(sorted, previous, last) {
+    const spans = [];
+    for (const index of sorted) {
+        const span = spans[spans.length - 1];
+        if (span && index === span.end + 1)
+            span.end = index;
+        else
+            spans.push({ start: index, end: index });
+    }
+    const used = new Set();
+    const byRow = new Map();
+    const runs = spans.map((span) => {
+        let id;
+        for (let i = span.start; i <= span.end && id === undefined; i++) {
+            const prior = previous.get(i);
+            if (prior !== undefined && !used.has(prior))
+                id = prior;
+        }
+        id ??= ++last.id;
+        used.add(id);
+        for (let i = span.start; i <= span.end; i++)
+            byRow.set(i, id);
+        return { ...span, id };
+    });
+    return { runs, byRow };
+}
+/** Two runs inside `outer`, separated by exactly one row: the shape one click merges or splits. */
+function bridge(outer, runs) {
+    const inside = runs
+        .filter((run) => run.start >= outer.start && run.end <= outer.end)
+        .sort((a, b) => a.start - b.start);
+    if (inside.length !== 2)
+        return null;
+    const [up, low] = inside;
+    return low.start === up.end + 2 ? { up, low, gap: up.end + 1 } : null;
+}
+export function selectionRuns() {
+    let host = null;
+    let layer = null;
+    let runs = [];
+    let byRow = new Map();
+    const last = { id: 0 };
+    const blocks = new Map();
+    // Halves absorbed by a merge, dropped when the merge commits.
+    const ghosts = new Set();
+    let commit;
+    let frame = 0;
+    function rowBoxes(rows) {
+        const parent = host.getBoundingClientRect();
+        // Translate back into local CSS pixels when a preview scales its contents.
+        const scaleX = parent.width / host.offsetWidth || 1;
+        const scaleY = parent.height / host.offsetHeight || 1;
+        return rows.map((row) => {
+            const rect = row.getBoundingClientRect();
+            return {
+                top: (rect.top - parent.top) / scaleY - host.clientTop,
+                left: (rect.left - parent.left) / scaleX - host.clientLeft,
+                width: rect.width / scaleX,
+                height: rect.height / scaleY,
+            };
+        });
+    }
+    function paint(block, box, radii, { instant = false, delayCorners = false } = {}) {
+        block.toggleAttribute('data-instant', instant);
+        block.style.setProperty('--rf-corner-delay', delayCorners ? `${cornerDelay}ms` : '0ms');
+        block.style.top = `${box.top}px`;
+        block.style.left = `${box.left}px`;
+        block.style.width = `${box.width}px`;
+        block.style.height = `${box.height}px`;
+        block.style.borderRadius = radii.map((r) => `${r}px`).join(' ');
+        if (instant)
+            void block.offsetWidth;
+    }
+    function create() {
+        const block = host.ownerDocument.createElement('span');
+        block.className = 'rf-choice-run';
+        block.setAttribute('data-instant', '');
+        layer.append(block);
+        return block;
+    }
+    function drop(block, instant) {
+        ghosts.delete(block);
+        if (instant) {
+            block.remove();
+            return;
+        }
+        block.setAttribute('data-leaving', '');
+        setTimeout(() => block.remove(), 200);
+    }
+    function sync() {
+        frame = 0;
+        if (!host || !layer)
+            return;
+        const rows = Array.from(host.querySelectorAll(':scope > .rf-choice-group-row'));
+        const checked = rows.flatMap((row, index) => row.querySelector('input:checked') ? [index] : []);
+        const previous = runs;
+        const next = assignRuns(checked, byRow, last);
+        runs = next.runs;
+        byRow = next.byRow;
+        const boxes = rowBoxes(rows);
+        const radius = parseFloat(getComputedStyle(rows[0] ?? host).borderTopLeftRadius) || 0;
+        const full = [radius, radius, radius, radius];
+        const span = (run) => {
+            const start = boxes[run.start];
+            const end = boxes[run.end];
+            return {
+                top: start.top,
+                left: Math.min(start.left, end.left),
+                width: Math.max(start.width, end.width),
+                height: end.top + end.height - start.top,
+            };
+        };
+        // A merge in flight that this change undid leaves its ghost behind.
+        clearTimeout(commit);
+        for (const ghost of ghosts)
+            drop(ghost, true);
+        // Runs that are gone fade out, unless a merge absorbs them below.
+        const live = new Set(runs.map((run) => run.id));
+        const merges = runs.flatMap((run) => {
+            const pair = bridge(run, previous);
+            return pair && (pair.up.id === run.id || pair.low.id === run.id) ? [{ run, ...pair }] : [];
+        });
+        const splits = previous.flatMap((run) => {
+            const pair = bridge(run, runs);
+            return pair ? [{ run, ...pair }] : [];
+        });
+        const absorbed = new Set(merges.map(({ run, up, low }) => (run.id === up.id ? low.id : up.id)));
+        // Blocks of runs a merge absorbed, kept to glide in as the lower half.
+        const retired = new Map();
+        for (const [id, block] of blocks) {
+            if (live.has(id))
+                continue;
+            blocks.delete(id);
+            if (absorbed.has(id))
+                retired.set(id, block);
+            else
+                drop(block, false);
+        }
+        for (const run of runs) {
+            const fresh = !blocks.has(run.id);
+            const block = blocks.get(run.id) ?? create();
+            blocks.set(run.id, block);
+            if (fresh)
+                paint(block, span(run), full, { instant: true });
+            else
+                paint(block, span(run), full);
+        }
+        for (const { run, up, low, gap } of merges) {
+            const otherId = run.id === up.id ? low.id : up.id;
+            const ghost = retired.get(otherId);
+            const survivor = blocks.get(run.id);
+            const box = span(run);
+            const middle = boxes[gap].top + boxes[gap].height / 2;
+            // The halves glide to the middle of the bridge row, inner corners straightening.
+            paint(survivor, { ...box, height: middle - box.top }, [radius, radius, 0, 0], {
+                delayCorners: true,
+            });
+            if (ghost) {
+                ghosts.add(ghost);
+                paint(ghost, { ...box, top: middle, height: box.top + box.height - middle }, [0, 0, radius, radius], { delayCorners: true });
+            }
+            commit = setTimeout(() => {
+                // One block over the whole run, swapped in without visible motion.
+                paint(survivor, span(run), full, { instant: true });
+                for (const ghost of ghosts)
+                    drop(ghost, true);
+            }, convergeMs);
+        }
+        for (const { run, up, low, gap } of splits) {
+            const upper = blocks.get(up.id);
+            const lower = blocks.get(low.id);
+            if (!upper || !lower)
+                continue;
+            const box = span(run);
+            const middle = boxes[gap].top + boxes[gap].height / 2;
+            // Snap into two abutting halves at the seam, then glide apart.
+            paint(upper, { ...box, height: middle - box.top }, [radius, radius, 0, 0], {
+                instant: true,
+            });
+            paint(lower, { ...box, top: middle, height: box.top + box.height - middle }, [0, 0, radius, radius], { instant: true });
+            paint(upper, span(up), full);
+            paint(lower, span(low), full);
+        }
+    }
+    function schedule() {
+        if (!frame)
+            frame = requestAnimationFrame(sync);
+    }
+    const mix = ref((element, signal) => {
+        if (!(element instanceof HTMLElement))
+            return;
+        host = element;
+        layer = element.querySelector(':scope > [data-rf-selection-runs]');
+        if (!layer)
+            return;
+        host.setAttribute('data-rf-selection-blocks', '');
+        const size = new ResizeObserver(schedule);
+        size.observe(element);
+        element.addEventListener('change', () => sync(), { signal });
+        element.closest('form')?.addEventListener('reset', () => setTimeout(sync), { signal });
+        sync();
+        signal.addEventListener('abort', () => {
+            size.disconnect();
+            cancelAnimationFrame(frame);
+            clearTimeout(commit);
+            if (host === element) {
+                host.removeAttribute('data-rf-selection-blocks');
+                host = null;
+                layer = null;
+            }
+        });
+    });
+    return { mix, sync: schedule };
+}

package/dist/sidebar.css

@@ -184,6 +184,14 @@
     }
   }
 }
+/* These menus mark keyboard focus with the row highlight, not the moving ring. */
+:is(.rf-sidebar-header, .rf-sidebar-footer)
+  .rf-sidebar-row
+  + .rf-dropdown-surface
+  > .rf-menu-list
+  > .rf-focus-ring {
+  display: none;
+}
 .rf-sidebar-row {
   position: relative;
   display: flex;

package/dist/styles.css

@@ -10,4 +10,6 @@
 @import './range-color.css';
 @import './color-picker.css';
 @import './breadcrumb.css';
+@import './segmented-control.css';
+@import './popover.css';
 @import './systems.css';

package/dist/systems.js

@@ -55,7 +55,11 @@ export function reveal(options = {}) {
                 return;
             observer.disconnect();
             animation = element.animate([
-                { opacity: 0.3, translate: `0 ${preset?.distance ?? 6}px`, scale: preset?.scale ?? 1 },
+                {
+                    opacity: preset ? 0 : 0.3,
+                    translate: `0 ${preset?.distance ?? 6}px`,
+                    scale: preset?.scale ?? 1,
+                },
                 { opacity: 1, translate: '0 0', scale: 1 },
             ], {
                 ...(preset