@rtzll/reflow 0.3.0 → 0.4.0

package/dist/basic.js

@@ -13,7 +13,7 @@ export function Button(handle) {
         const iconOnly = props.size === 'icon' || props.size === 'icon-compact';
         const leading = iconOnly ? undefined : props.leadingIcon;
         const trailing = iconOnly ? undefined : props.trailingIcon;
-        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { class: "rf-button-content", children: [leading && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: leading })), _jsx("span", { class: "rf-button-label", children: props.children }), trailing && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: trailing }))] }), props.loading && (_jsx("svg", { class: "rf-button-spinner", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M12 12C14 8.5 19 8.5 19 12C19 15.5 14 15.5 12 12C10 8.5 5 8.5 5 12C5 15.5 10 15.5 12 12Z", stroke: "currentColor", "stroke-width": "1.125", "stroke-linecap": "round", pathLength: "100" }) }))] }));
+        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { class: "rf-button-content", children: [leading && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: leading })), _jsx("span", { class: "rf-button-label", children: props.children }), trailing && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: trailing }))] }), props.loading && (_jsx("svg", { class: "rf-button-spinner", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("g", { children: _jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", pathLength: "100", transform: "rotate(-90 8 8)" }) }) }))] }));
         const appearance = {
             class: classNames,
             'data-slot': 'button',

package/dist/breadcrumb.css

@@ -33,6 +33,16 @@
   font-size: var(--rf-text-body);
   line-height: var(--rf-leading-body);
 }
+.rf-breadcrumb-measure {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  overflow: clip;
+  visibility: hidden;
+}
+.rf-breadcrumb-measure > .rf-breadcrumb-list {
+  inline-size: max-content;
+}
 
 /* Steps keep their width; only the current page gives way and truncates. */
 .rf-breadcrumb-item {

package/dist/breadcrumb.js

@@ -11,14 +11,12 @@ const fallbackEllipsisWidth = 44;
  */
 export function Breadcrumb(handle) {
     let list = null;
-    let hidden = 0;
+    let hidden;
     // 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.
+    // Steps whose label is cut, by index, read as the pointer or keyboard focus arrives.
     let cut = new Set();
-    let menuOpen;
     const listRef = ref((node, signal) => {
         if (!(node instanceof HTMLOListElement))
             return;
@@ -26,18 +24,8 @@ export function Breadcrumb(handle) {
         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;
         });
@@ -54,34 +42,39 @@ export function Breadcrumb(handle) {
     }
     function measure() {
         const nav = list?.parentElement;
-        if (!list || !nav)
+        if (!list || !nav || !handle.props.collapse)
             return;
         const count = handle.props.items.length;
+        const maxHidden = Math.max(0, count - 3);
         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);
-        });
+        const measuring = nav.querySelector('.rf-breadcrumb-measure > ol');
+        if (measuring) {
+            widths = Array.from(measuring.children, (item) => item.getBoundingClientRect().width);
+        }
+        else {
+            // The rendered steps are 0, then hidden + 1 onward.
+            const hiddenCount = Math.min(hidden ?? 0, maxHidden);
+            steps.forEach((item, i) => {
+                const index = i === 0 ? i : i + hiddenCount;
+                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++;
-                }
+        const available = nav.clientWidth;
+        const width = (i) => widths[i] ?? 0;
+        let total = 0;
+        for (let i = 0; i < count; i++)
+            total += width(i);
+        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) {
@@ -110,17 +103,19 @@ export function Breadcrumb(handle) {
     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;
+        const maxHidden = Math.max(0, items.length - 3);
+        if (!collapse)
+            hidden = undefined;
+        // Start with the shortest usable trail, then restore the steps that fit.
+        const hide = collapse ? Math.min(hidden ?? maxHidden, maxHidden) : 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 }) }));
+        // the reference. 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) ? 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;
@@ -159,6 +154,9 @@ export function Breadcrumb(handle) {
                 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 })] }));
+            ], 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 }), collapse && hidden === undefined && maxHidden > 0 && (_jsx("div", { class: "rf-breadcrumb-measure", "aria-hidden": "true", inert: true, children: _jsx("ol", { class: "rf-breadcrumb-list", children: items.map((item, index) => {
+                            const last = index === items.length - 1;
+                            return (_jsx("li", { class: "rf-breadcrumb-item", children: _jsxs("span", { class: last ? 'rf-breadcrumb-crumb rf-breadcrumb-page' : 'rf-breadcrumb-crumb', children: [content(item), !last && trailing] }) }, index));
+                        }) }) }))] }));
     };
 }

package/dist/foundations.css

@@ -441,38 +441,45 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: var(--rf-control-height);
-  height: var(--rf-control-height);
+  width: var(--rf-icon-size);
+  height: var(--rf-icon-size);
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
 
-.rf-button-spinner path {
-  stroke-dasharray: 15 85;
-  animation:
-    rf-button-spinner 2s linear infinite,
-    rf-button-spinner-dash 4s ease-in-out infinite;
+.rf-button-spinner g {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: rf-button-spinner-turn 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+.rf-button-spinner circle {
+  /* A nonzero dash keeps Safari's round caps visible as dots. */
+  stroke-dasharray: 0.01 49.99;
+  stroke-dashoffset: -25;
+  animation: rf-button-spinner-breathe 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }
 
-@keyframes rf-button-spinner {
+@keyframes rf-button-spinner-turn {
   to {
-    stroke-dashoffset: -100;
+    transform: rotate(360deg);
   }
 }
 
-@keyframes rf-button-spinner-dash {
+@keyframes rf-button-spinner-breathe {
   0%,
   100% {
-    stroke-dasharray: 15 85;
+    stroke-dasharray: 0.01 49.99;
+    stroke-dashoffset: -25;
   }
   50% {
-    stroke-dasharray: 40 60;
+    stroke-dasharray: 26 24;
+    stroke-dashoffset: -12;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rf-button-spinner path {
-    stroke-dasharray: none;
+  .rf-button-spinner :is(g, circle) {
     animation: none;
   }
 }

package/dist/hover-card.d.ts

@@ -0,0 +1,32 @@
+import { type Handle, type MixInput, type RemixNode } from 'remix/component';
+import type { PopoverPlacement } from './popover.tsx';
+export interface HoverCardTriggerProps {
+    mix: MixInput<HTMLElement>;
+}
+export interface HoverCardProps {
+    /** The card's content. */
+    children?: RemixNode;
+    /** Renders the trigger, usually a link. Spread the provided props onto it. */
+    renderTrigger: (props: HoverCardTriggerProps) => RemixNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which side of the trigger the card opens on. Default bottom. */
+    placement?: PopoverPlacement;
+    /** Distance from the trigger in pixels. Default 8. */
+    offset?: number;
+    /** Milliseconds the pointer rests on the trigger, or focus stays on it, before the card opens. Default 500. */
+    openDelay?: number;
+    /** Milliseconds after the pointer leaves the trigger and the card before it closes. Default 200. */
+    closeDelay?: number;
+    size?: 'default' | 'compact';
+}
+/**
+ * A preview card for a link or a name, such as a profile or a page, shown
+ * while the pointer rests on its trigger or keyboard focus is on it. It is
+ * supplementary: the trigger still works on its own, a tap on a touch screen
+ * follows it, and the card never takes focus or locks scrolling. The pointer
+ * can cross into the card and use its links; it closes once the pointer has
+ * left both, or on Escape. It shares Popover's surface and motion.
+ */
+export declare function HoverCard(handle: Handle<HoverCardProps>): () => import("remix/component").RemixElement;

package/dist/hover-card.js

@@ -0,0 +1,119 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { ref } from 'remix/component';
+import { anchor } from '@remix-run/ui/anchor';
+/**
+ * A preview card for a link or a name, such as a profile or a page, shown
+ * while the pointer rests on its trigger or keyboard focus is on it. It is
+ * supplementary: the trigger still works on its own, a tap on a touch screen
+ * follows it, and the card never takes focus or locks scrolling. The pointer
+ * can cross into the card and use its links; it closes once the pointer has
+ * left both, or on Escape. It shares Popover's surface and motion.
+ */
+export function HoverCard(handle) {
+    let trigger = null;
+    let card = null;
+    let localOpen = handle.props.defaultOpen ?? false;
+    let stopAnchor;
+    let openTimer;
+    let closeTimer;
+    const isOpen = () => handle.props.open ?? localOpen;
+    function setOpen(next) {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        if (isOpen() === next)
+            return;
+        localOpen = next;
+        handle.props.onOpenChange?.(next);
+        void handle.update();
+    }
+    function scheduleOpen() {
+        clearTimeout(closeTimer);
+        if (isOpen())
+            return;
+        clearTimeout(openTimer);
+        openTimer = setTimeout(() => setOpen(true), Math.max(0, handle.props.openDelay ?? 500));
+    }
+    function scheduleClose() {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        if (!isOpen())
+            return;
+        closeTimer = setTimeout(() => setOpen(false), Math.max(0, handle.props.closeDelay ?? 200));
+    }
+    // Shows or hides the card to match the open state, after each render.
+    function sync() {
+        if (!trigger?.isConnected || !card?.isConnected)
+            return;
+        const showing = card.matches(':popover-open');
+        if (isOpen() && !showing) {
+            card.showPopover?.();
+            stopAnchor = anchor(card, trigger, {
+                placement: handle.props.placement ?? 'bottom',
+                offset: handle.props.offset ?? 8,
+            });
+        }
+        else if (!isOpen() && showing) {
+            stopAnchor?.();
+            stopAnchor = undefined;
+            if (card.contains(document.activeElement))
+                trigger.focus({ preventScroll: true });
+            card.hidePopover?.();
+        }
+    }
+    const triggerMix = ref((element, signal) => {
+        if (!(element instanceof HTMLElement))
+            return;
+        trigger = element;
+        const options = { signal };
+        element.addEventListener('pointerenter', (event) => {
+            if (event.pointerType !== 'touch')
+                scheduleOpen();
+        }, options);
+        element.addEventListener('pointerleave', (event) => {
+            if (event.pointerType !== 'touch')
+                scheduleClose();
+        }, options);
+        element.addEventListener('focus', scheduleOpen, options);
+        element.addEventListener('blur', (event) => {
+            // Tabbing on into the card keeps it open.
+            if (!(event.relatedTarget instanceof Node && card?.contains(event.relatedTarget)))
+                scheduleClose();
+        }, options);
+        element.ownerDocument.addEventListener('keydown', (event) => {
+            if (event.key !== 'Escape' || !isOpen())
+                return;
+            setOpen(false);
+        }, options);
+        signal.addEventListener('abort', () => {
+            clearTimeout(openTimer);
+            clearTimeout(closeTimer);
+            stopAnchor?.();
+            if (trigger === element)
+                trigger = null;
+        }, { once: true });
+    });
+    const cardMix = ref((element, signal) => {
+        if (!(element instanceof HTMLElement))
+            return;
+        card = element;
+        const options = { signal };
+        element.addEventListener('pointerenter', () => clearTimeout(closeTimer), options);
+        element.addEventListener('pointerleave', (event) => {
+            if (event.pointerType !== 'touch')
+                scheduleClose();
+        }, options);
+        element.addEventListener('focusout', (event) => {
+            const next = event.relatedTarget;
+            if (!(next instanceof Node && (element.contains(next) || next === trigger)))
+                scheduleClose();
+        }, options);
+        signal.addEventListener('abort', () => {
+            if (card === element)
+                card = null;
+        }, { once: true });
+    });
+    return () => {
+        handle.queueTask(sync);
+        return (_jsxs(_Fragment, { children: [handle.props.renderTrigger({ mix: triggerMix }), _jsx("div", { class: "rf-menu-surface rf-popover-surface rf-hover-card", popover: "manual", "data-density": handle.props.size, mix: cardMix, children: handle.props.children })] }));
+    };
+}

package/dist/index.d.ts

@@ -10,6 +10,9 @@ export * from './flows.tsx';
 export * from './range-color.tsx';
 export * from './color-picker.tsx';
 export * from './breadcrumb.tsx';
+export * from './segmented-control.tsx';
+export * from './popover.tsx';
+export * from './hover-card.tsx';
 export * from './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -10,6 +10,9 @@ export * from './flows.js';
 export * from './range-color.js';
 export * from './color-picker.js';
 export * from './breadcrumb.js';
+export * from './segmented-control.js';
+export * from './popover.js';
+export * from './hover-card.js';
 export * from './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';

package/dist/overlays.js

@@ -134,10 +134,14 @@ export function Tooltip(handle) {
         internalOpen = next;
         handle.props.onOpenChange?.(next);
     }
+    function menuIsOpen() {
+        return (trigger?.getAttribute('aria-haspopup') === 'menu' &&
+            trigger.getAttribute('aria-expanded') === 'true');
+    }
     // The tooltip is shown when `open` forces it, otherwise when hover or focus asks for it.
     function sync() {
         const visible = handle.props.open ?? internalOpen;
-        if (visible)
+        if (visible && !menuIsOpen())
             open();
         else
             close();
@@ -150,7 +154,7 @@ export function Tooltip(handle) {
     }
     function show() {
         clearTimeout(hideTimer);
-        if (!trigger?.isConnected || !popup?.isConnected || dismissed)
+        if (!trigger?.isConnected || !popup?.isConnected || dismissed || menuIsOpen())
             return;
         setInternal(true);
         sync();
@@ -199,6 +203,14 @@ export function Tooltip(handle) {
         if (!(element instanceof HTMLElement))
             return;
         trigger = element;
+        if (element.getAttribute('aria-haspopup') === 'menu') {
+            const observer = new MutationObserver(() => {
+                if (menuIsOpen())
+                    hide();
+            });
+            observer.observe(element, { attributeFilter: ['aria-expanded'] });
+            signal.addEventListener('abort', () => observer.disconnect(), { once: true });
+        }
         element.addEventListener('pointerenter', (event) => {
             if (event.pointerType === 'touch')
                 return;

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/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

package/package.json

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