@rtzll/reflow 0.3.0 → 0.5.0

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

@@ -926,68 +926,27 @@
   margin-inline-start: 8px;
 }
 
-/* Mobile drawer: below 768px the rail becomes a sheet that slides in from the left. */
+/* Mobile drawer: below 768px the rail moves into a left Drawer, which brings
+   the slide, the drag to close and the backdrop; it keeps the rail's width,
+   surface and shadow. */
 .rf-sidebar-drawer-trigger {
   display: none;
 }
-.rf-sidebar-drawer {
-  position: fixed;
-  inset-block: 0;
-  inset-inline-start: 0;
-  box-sizing: border-box;
-  width: min(288px, 100vw);
-  max-width: none;
-  height: 100dvh;
-  max-height: none;
-  margin: 0;
-  padding: 0;
+.rf-drawer.rf-sidebar-drawer[data-side] {
+  --rf-drawer-bg: var(--rf-surface-2);
+  inline-size: min(288px, 100vw);
   overflow: hidden;
-  border: 0;
-  background: var(--rf-surface-2);
-  box-shadow: var(--rf-sb-surface-shadow);
-  color: var(--rf-fg);
-  translate: -100% 0;
-  transition:
-    translate var(--rf-exit-moderate),
-    display var(--rf-exit-moderate) allow-discrete,
-    overlay var(--rf-exit-moderate) allow-discrete;
-}
-.rf-sidebar-drawer[open] {
-  translate: 0 0;
-  transition:
-    translate var(--rf-spring-moderate),
-    display var(--rf-spring-moderate) allow-discrete,
-    overlay var(--rf-spring-moderate) allow-discrete;
-}
-@starting-style {
-  .rf-sidebar-drawer[open] {
-    translate: -100% 0;
-  }
-}
-.rf-sidebar-drawer::backdrop {
-  background: light-dark(rgb(0 0 0 / 40%), rgb(0 0 0 / 80%));
-  opacity: 0;
-  transition:
-    opacity var(--rf-exit-moderate),
-    display var(--rf-exit-moderate) allow-discrete,
-    overlay var(--rf-exit-moderate) allow-discrete;
-}
-.rf-sidebar-drawer[open]::backdrop {
-  opacity: 1;
-  transition:
-    opacity 160ms ease,
-    display 160ms allow-discrete,
-    overlay 160ms allow-discrete;
+  box-shadow: var(--rf-drawer-tail), var(--rf-sb-surface-shadow);
 }
-@starting-style {
-  .rf-sidebar-drawer[open]::backdrop {
-    opacity: 0;
-  }
+.rf-sidebar-drawer .rf-drawer-body {
+  display: flex;
+  flex-direction: column;
 }
-.rf-sidebar-drawer-content {
-  height: 100%;
+.rf-sidebar-drawer .rf-sidebar-inner {
+  flex: 1;
+  min-block-size: 0;
 }
-.rf-sidebar-drawer-content > .rf-basic-sr-only:focus-visible {
+.rf-sidebar-drawer .rf-drawer-body > .rf-basic-sr-only:focus-visible {
   clip-path: none;
   width: auto;
   height: auto;
@@ -996,8 +955,6 @@
   position: static;
 }
 @media (prefers-reduced-motion: reduce) {
-  .rf-sidebar-drawer,
-  .rf-sidebar-drawer::backdrop,
   .rf-sidebar-layout,
   .rf-sidebar-card {
     transition-duration: 0s !important;

package/dist/sidebar.js

@@ -4,6 +4,7 @@ import { on, ref } from 'remix/component';
 import { Button, Card, CardGroup, CardHeader, CardTitle, CardDescription, CardMedia, CardImage, } from './basic.js';
 import { fluidHover } from './interactive.js';
 import { ScrollArea } from './scroll-area.js';
+import { Drawer } from './drawer.js';
 /** How far past the minimum width a drag has to travel before it previews the collapse. */
 const collapseSlop = 56;
 function SidebarNavigation(handle) {
@@ -113,13 +114,14 @@ export function Sidebar(handle) {
     let exitingPeek;
     let peekTimer;
     let drag;
-    let drawer;
+    let drawerOpen = false;
     const panelId = `${handle.id}-sidebar`;
-    const drawerId = `${panelId}-drawer`;
-    const captureDrawer = ref((node) => {
-        if (node instanceof HTMLDialogElement)
-            drawer = node;
-    });
+    const setDrawer = (open) => {
+        if (drawerOpen === open)
+            return;
+        drawerOpen = open;
+        void handle.update();
+    };
     function limits() {
         const minimum = handle.props.minWidth ?? 160;
         return { minimum, maximum: Math.max(minimum, handle.props.maxWidth ?? 360) };
@@ -375,13 +377,7 @@ export function Sidebar(handle) {
                                                     if (!peeking)
                                                         cancelPeekTimer();
                                                 }),
-                                            ], children: _jsx(Icon, { name: "panel-left" }) }), _jsx(Button, { class: "rf-sidebar-drawer-trigger", variant: "ghost", size: "compact", "aria-controls": drawerId, "aria-haspopup": "dialog", mix: on('click', () => drawer?.showModal()), children: "Open navigation" })] })), toolbar != null && _jsx("div", { class: "rf-sidebar-toolbar-content", children: toolbar })] })), children] }), _jsx("dialog", { id: drawerId, class: "rf-sidebar-drawer", "aria-label": label, mix: [
-                        captureDrawer,
-                        on('click', (event) => {
-                            if (event.target === drawer)
-                                drawer?.close();
-                        }),
-                    ], children: _jsxs("div", { class: "rf-sidebar-drawer-content", children: [_jsx("button", { type: "button", class: "rf-basic-sr-only", mix: on('click', () => drawer?.close()), children: "Close navigation" }), _jsx(SidebarNavigation, { ...navigation, variant: "default", onNavigate: () => drawer?.close() })] }) })] }));
+                                            ], children: _jsx(Icon, { name: "panel-left" }) }), _jsxs(Drawer, { side: "left", title: label, flush: true, class: "rf-sidebar-drawer", open: drawerOpen, onOpenChange: setDrawer, renderTrigger: (trigger) => (_jsx(Button, { class: "rf-sidebar-drawer-trigger", variant: "ghost", size: "compact", ...trigger, children: "Open navigation" })), children: [_jsx("button", { type: "button", class: "rf-basic-sr-only", mix: on('click', () => setDrawer(false)), children: "Close navigation" }), _jsx(SidebarNavigation, { ...navigation, variant: "default", onNavigate: () => setDrawer(false) })] })] })), toolbar != null && _jsx("div", { class: "rf-sidebar-toolbar-content", children: toolbar })] })), children] })] }));
     };
 }
 /** A measured, dismissible pile of real Cards. Keyboard focus opens the inline pile too. */

package/dist/status-icon.d.ts

@@ -0,0 +1,3 @@
+/** The status glyphs Banner and toasts share. Internal: not exported from the package. */
+export type StatusIconName = 'default' | 'info' | 'success' | 'warning' | 'error';
+export declare function statusIcon(status: StatusIconName): import("remix/component").RemixElement;

package/dist/status-icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+export function statusIcon(status) {
+    if (status === 'default') {
+        return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 16v-4m0-4h.01" })] }));
+    }
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", children: [status === 'warning' ? (_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })) : (_jsx("circle", { cx: "12", cy: "12", r: "10.5", fill: "currentColor" })), _jsx("g", { stroke: "var(--rf-bg)", "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round", children: status === 'success' ? (_jsx("path", { d: "m8.5 12.25 2.5 2.5 4.5-5" })) : status === 'warning' ? (_jsx("path", { d: "M12 9.5v3.5M12 17h.01" })) : status === 'error' ? (_jsx("path", { d: "M12 7.5v5M12 16.5h.01" })) : (_jsx("path", { d: "M12 16.5v-5M12 7.5h.01" })) })] }));
+}

package/dist/styles.css

@@ -10,4 +10,8 @@
 @import './range-color.css';
 @import './color-picker.css';
 @import './breadcrumb.css';
+@import './segmented-control.css';
+@import './popover.css';
+@import './toaster.css';
+@import './drawer.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