@rtzll/reflow 0.2.0 → 0.4.0

package/dist/dates.css

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

package/dist/dates.js

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

package/dist/flows.css

@@ -141,7 +141,10 @@
    rows continue below and goes at the end, which is why the footer draws no
    line of its own. Without a footer the list is the panel's last child and
    that line would double the panel edge, so it is dropped. The lines ride the
-   scroll root because the viewport's fade mask would erase them. */
+   scroll root because the viewport's fade mask would erase them.
+   This follows the reference's intent, not its pixels: there the stronger
+   line sits on the root's border, which the root's overflow clip hides, so
+   its header line never strengthens. Keep the strengthening. */
 .rf-command-scroll::before,
 .rf-command-scroll::after {
   content: '';

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/groups.css

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

package/dist/groups.js

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

package/dist/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/icon-data.d.ts

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

package/dist/icon-data.js

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

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/interactive.d.ts

@@ -1,4 +1,4 @@
-import type { Handle, RemixNode } from 'remix/component';
+import type { Handle, MixInput, RemixNode } from 'remix/component';
 export interface FluidHoverOptions {
     /** Track the pointer on one axis or across a two-dimensional grid. */
     axis?: 'x' | 'y' | 'both';
@@ -62,6 +62,8 @@ export interface DropdownProps {
     /** `bare` renders an unstyled button trigger that takes its look from `triggerClass`, for sidebar rows and actions. */
     variant?: 'outline' | 'ghost' | 'bare';
     triggerClass?: string;
+    /** Extra behavior on the trigger, such as a Tooltip's trigger props. */
+    triggerMix?: MixInput;
     /** Which side of the trigger the menu opens on. Default bottom. */
     side?: 'top' | 'bottom';
     searchable?: boolean;

package/dist/interactive.js

@@ -376,12 +376,14 @@ export function Dropdown(handle) {
                                 offset: 6,
                             }),
                             hoverMix,
+                            handle.props.triggerMix,
                         ], children: handle.props.triggerContent ?? label })), !handle.props.inline && variant !== 'bare' && (_jsx(Button, { class: "rf-dropdown-trigger", variant: variant === 'ghost' ? 'ghost' : 'tertiary', size: size, trailingIcon: handle.props.chevron === false ? undefined : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) })), mix: [
                             menu.trigger({
                                 placement: `${handle.props.side ?? 'bottom'}-${align}`,
                                 offset: 6,
                             }),
                             hoverMix,
+                            handle.props.triggerMix,
                         ], children: handle.props.triggerContent ?? label })), _jsx(DropdownSurface, { inline: handle.props.inline, hover: hovering ? { control: hover, closeDelay } : undefined, items: displayedItems, emptyMessage: handle.props.emptyMessage, search: searchable || handle.props.creatable
                             ? { query, setQuery, placeholder: searchPlaceholder }
                             : undefined })] }) }));
@@ -517,7 +519,7 @@ function DropdownSurface(handle) {
                                     ? search.query.slice(0, -1)
                                     : search.query + event.key);
                             }, true),
-                    ], children: [_jsx("span", { class: "rf-highlight rf-menu-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), handle.props.inline && (_jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true })), items.length === 0 && search && (_jsx("div", { class: "rf-menu-empty", role: "status", children: handle.props.emptyMessage ?? 'No results' })), items.map((item, index) => (_jsxs("div", { role: "none", class: "rf-menu-entry", children: [item.separatorBefore && (index > 0 || !normalized) && (_jsx("div", { class: "rf-menu-separator", role: "separator" })), item.group && item.group !== items[index - 1]?.group && (_jsx("div", { class: "rf-menu-group-label", children: item.group })), item.children && item.children.length > 0 ? (_jsxs(menu.Context, { label: item.label, children: [_jsx("div", { class: "rf-menu-item", "data-rf-hover-item": true, mix: menu.submenuTrigger({
+                    ], children: [_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 }), items.length === 0 && search && (_jsx("div", { class: "rf-menu-empty", role: "status", children: handle.props.emptyMessage ?? 'No results' })), items.map((item, index) => (_jsxs("div", { role: "none", class: "rf-menu-entry", children: [item.separatorBefore && (index > 0 || !normalized) && (_jsx("div", { class: "rf-menu-separator", role: "separator" })), item.group && item.group !== items[index - 1]?.group && (_jsx("div", { class: "rf-menu-group-label", children: item.group })), item.children && item.children.length > 0 ? (_jsxs(menu.Context, { label: item.label, children: [_jsx("div", { class: "rf-menu-item", "data-rf-hover-item": true, mix: menu.submenuTrigger({
                                                 value: item.value,
                                                 label: item.label,
                                                 disabled: item.disabled,

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;