@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/form-controls.js

@@ -2,13 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
+import { CheckIcon } from "@phosphor-icons/react";
 import { css, cva, cx } from "#primitives/css";
 import { useFieldControl } from "./field-context.js";
 /*
- * The one mark for a checkbox and a radio: a glass well in dark, a near-white one in light, that
- * fills with the primary face once on. Hover darkens the edge of an empty mark and the face of a
- * filled one. The ring is a variant, because a row that holds the mark draws its own ring instead.
+ * The one mark for a checkbox and a radio: the selected tint in dark, a near-white well in light,
+ * that fills with the primary button's face and gradient edge once on. The edge is the `[data-edge]`
+ * ring the element carries through `checkMarkEdge`: the selected face's gradient in dark, the
+ * control hairline in light. Hover darkens the edge of an empty mark, washes it in light, and fades
+ * a filled one in dark. The ring is a variant, because a row that holds the mark draws its own
+ * ring instead.
  */
 export const checkMark = cva({
     base: {
@@ -18,25 +21,31 @@ export const checkMark = cva({
         display: "inline-grid",
         placeItems: "center",
         padding: "none",
-        border: "1px solid token(colors.border.mark)",
-        background: "bg.check",
+        border: "1px solid transparent",
+        background: "token(gradients.selected)",
         color: "bg.canvas",
-        _light: { color: "fg.onAccent" },
+        _light: { color: "fg.onAccent", background: "bg.check" },
         cursor: "pointer",
-        transitionProperty: "background, border-color",
+        transitionProperty: "background, opacity",
         transitionDuration: "fast",
-        // Pointing anywhere at a row's label marks the box it would tick.
-        "&:is(label:hover > *, label:hover *, :hover):not([data-disabled])": {
-            borderColor: "fg.muted",
+        _before: {
+            background: "token(gradients.border.selected)",
+            _light: { background: "border.control" },
         },
-        "&[data-checked], &[data-indeterminate]": {
-            background: "bg.primary",
-            borderColor: "transparent",
+        // Pointing anywhere at a row's label marks the box it would tick, while it is empty: a filled
+        // mark, or a radio card's once chosen, keeps its face.
+        "&:not([data-checked], [data-indeterminate], [data-checked] > *):is(label:hover > *, label:hover *, :hover):not([data-disabled])": {
+            _before: { background: "fg.muted", _light: { background: "fg.secondary" } },
+            _light: {
+                background: "linear-gradient(token(colors.bg.controlHover), token(colors.bg.controlHover)), token(colors.bg.check)",
+            },
         },
-        "&:is([data-checked], [data-indeterminate]):is(label:hover > *, label:hover *, :hover):not([data-disabled])": {
-            background: "bg.primaryHover",
-            borderColor: "transparent",
+        "&[data-checked], &[data-indeterminate]": {
+            background: "token(gradients.primary)",
+            _light: { background: "token(gradients.primary)" },
+            _before: { background: "token(gradients.border.primary)" },
         },
+        "&:is([data-checked], [data-indeterminate]):is(label:hover > *, label:hover *, :hover):not([data-disabled])": { opacity: "checkedHover", _light: { opacity: "1" } },
         "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
     },
     variants: {
@@ -58,13 +67,25 @@ const label = css({
     fontWeight: "normal",
     cursor: "pointer",
 });
+/** What a check mark's element carries, so its filled face can draw the gradient edge. */
+export const checkMarkEdge = { "data-ciridae-ui": "", "data-edge": "gradient" };
 export const checkIndicator = css({
     display: "inline-flex",
     lineHeight: "1",
-    fontSize: "icon.compact",
+    fontSize: "icon.small",
+});
+// A mixed checkbox's mark: a short dash rather than a minus glyph.
+const mixedDash = css({
+    width: "indicator.swatch",
+    height: "border.hairline",
+    background: "currentColor",
 });
+/** The tick, or the dash of a mixed checkbox. */
+export function CheckGlyph({ mixed }) {
+    return mixed ? _jsx("span", { className: mixedDash }) : _jsx(CheckIcon, { weight: "bold" });
+}
 export function Checkbox({ children, className, wrapperClassName, ...props }) {
-    return (_jsxs("label", { className: cx(label, wrapperClassName), "data-ciridae-ui": "", children: [_jsx(BaseCheckbox.Root, { ...props, className: cx(checkMark(), className), children: _jsx(BaseCheckbox.Indicator, { className: checkIndicator, children: props.indeterminate ? _jsx(MinusIcon, { weight: "bold" }) : _jsx(CheckIcon, { weight: "bold" }) }) }), children] }));
+    return (_jsxs("label", { className: cx(label, wrapperClassName), "data-ciridae-ui": "", children: [_jsx(BaseCheckbox.Root, { ...props, ...checkMarkEdge, className: cx(checkMark(), className), children: _jsx(BaseCheckbox.Indicator, { className: checkIndicator, children: _jsx(CheckGlyph, { mixed: props.indeterminate }) }) }), children] }));
 }
 const textarea = css({
     width: "100%",
@@ -74,7 +95,7 @@ const textarea = css({
     paddingInline: "control.compactInline",
     border: "1px solid token(colors.border.control)",
     borderRadius: "control",
-    background: "bg.field",
+    background: "bg.formField",
     color: "fg.primary",
     fontFamily: "sans",
     fontSize: "body",
@@ -108,7 +129,10 @@ const menuRadio = css({
     fontWeight: "medium",
     letterSpacing: "compact",
     cursor: "pointer",
-    _hover: { background: "bg.hover" },
+    _hover: {
+        background: "bg.hover",
+        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+    },
     "&:has([data-disabled])": { opacity: "disabled", cursor: "not-allowed" },
 });
 const menuRadioMeta = css({ marginInlineStart: "auto", color: "fg.muted" });
@@ -119,5 +143,5 @@ export const radioDot = css({
     background: "currentColor",
 });
 export function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout = "inline", className, ...props }) {
-    return (_jsx(BaseRadioGroup, { ...props, className: cx(layout === "menu" ? menuRadios : radios, className), "aria-label": props["aria-label"] ?? groupLabel, "data-ciridae-ui": "", defaultValue: defaultValue, name: name, onValueChange: (nextValue) => onValueChange?.(String(nextValue)), value: value, children: options.map((option) => (_jsxs("label", { className: layout === "menu" ? menuRadio : label, children: [_jsx(BaseRadio.Root, { className: checkMark({ shape: "round" }), disabled: option.disabled, value: option.value, children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), option.label, option.meta !== undefined && _jsx("span", { className: menuRadioMeta, children: option.meta })] }, option.value))) }));
+    return (_jsx(BaseRadioGroup, { ...props, className: cx(layout === "menu" ? menuRadios : radios, className), "aria-label": props["aria-label"] ?? groupLabel, "data-ciridae-ui": "", defaultValue: defaultValue, name: name, onValueChange: (nextValue) => onValueChange?.(String(nextValue)), value: value, children: options.map((option) => (_jsxs("label", { className: layout === "menu" ? menuRadio : label, children: [_jsx(BaseRadio.Root, { ...checkMarkEdge, className: checkMark({ shape: "round" }), disabled: option.disabled, value: option.value, children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), option.label, option.meta !== undefined && _jsx("span", { className: menuRadioMeta, children: option.meta })] }, option.value))) }));
 }

package/dist/components/form-layout.d.ts

@@ -4,29 +4,33 @@ import type { ComponentProps, ReactNode } from "react";
  * Stacked form fields. Validation is the form library's, never the browser's, so this always
  * carries `noValidate`.
  */
-export declare function Form({ className, ...props }: ComponentProps<"form">): import("@types/react").JSX.Element;
-export declare function FormActions({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function Form({ className, ...props }: ComponentProps<"form">): import("react").JSX.Element;
+export declare function FormActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** Fields in one row of a `Form`, sharing its width equally. */
+export declare function FieldRow({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 /**
  * A label round a `FieldLabel`, its control and any `FieldError`: the label names the control it
  * holds, and while `invalid` the control is marked and described by the error, so `Input`,
- * `Textarea`, `Select` and `Combobox` inside need no ids of their own.
+ * `Textarea`, `Select` and `Combobox` inside need no ids of their own. A `hint` sits under the
+ * control and describes it until the error takes its place.
  */
-export declare function Field({ className, htmlFor, invalid, ...props }: ComponentProps<"label"> & {
+export declare function Field({ className, htmlFor, invalid, hint, children, ...props }: ComponentProps<"label"> & {
     invalid?: boolean;
-}): import("@types/react").JSX.Element;
+    hint?: ReactNode;
+}): import("react").JSX.Element;
 export declare function FieldLabel({ children }: {
     children: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** The field's error; its id is the one the field's control is described by. */
 export declare function FieldError({ id, children }: {
     id?: string;
     children: ReactNode;
-}): import("@types/react").JSX.Element;
-export declare function SegmentedControl({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function SegmentedControl({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 export type SegmentedOptionProps = Omit<ButtonProps, "variant" | "type" | "aria-pressed"> & {
     selected: boolean;
     /** Shown muted after the label, such as how many items the option lists. */
     count?: number;
 };
-/** One option of a `SegmentedControl`. */
-export declare function SegmentedOption({ selected, count, children, ...props }: SegmentedOptionProps): import("@types/react").JSX.Element;
+/** One option of a `SegmentedControl`: the selected one is raised, the others bare. */
+export declare function SegmentedOption({ selected, count, children, ...props }: SegmentedOptionProps): import("react").JSX.Element;

package/dist/components/form-layout.js

@@ -3,31 +3,65 @@ import { useContext, useId, useMemo } from "react";
 import { css, cx } from "#primitives/css";
 import { Button } from "./button.js";
 import { FieldControlContext } from "./field-context.js";
+import { faceEdge } from "./gradient-edge.js";
 import { useInToolbar } from "./layout.js";
 const field = css({ display: "grid", gap: "control.iconGap", minWidth: "0", fontSize: "caption" });
-const labelText = css({ color: "fg.muted" });
-const errorText = css({ margin: "none", color: "accent.red", fontSize: "caption" });
+// A single line, its box the type's own 12px, so the gap to the control is the field's 6px alone.
+const labelText = css({
+    color: "fg.primary",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+});
+// Help and error lines under the control, which can wrap.
+const noteText = css({
+    margin: "none",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "body",
+    letterSpacing: "compact",
+});
+const hintText = css({ color: "fg.muted" });
+const errorText = css({ color: "accent.red" });
+/*
+ * A grey well holding its options, the selected one raised on the secondary button's face. The
+ * track is a default button's height, or in a toolbar a small one's on a thinner inset, and each
+ * option clears it by the inset and a hairline.
+ */
 const segmented = css({
+    "--track-inset": "token(spacing.layout.tightGap)",
+    "--track-height": "token(sizes.control.default)",
     display: "inline-flex",
     alignSelf: "flex-start",
-    padding: "control.trackInset",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "pill",
-    // Children follow the track's own shape, so the selected pill nests inside it. Ghost text is
-    // white in dark, so the track mutes every option and lets only the selected one, on the accent
-    // wash, read fully.
-    "& > *": { borderColor: "transparent!", borderRadius: "pill", color: "fg.muted!" },
-    "& > [aria-pressed=true]": {
-        background: "bg.selected",
-        color: "fg.primary!",
+    alignItems: "center",
+    gap: "control.trackInset",
+    height: "var(--track-height)",
+    padding: "var(--track-inset)",
+    borderRadius: "inset",
+    // The well grey in light; in dark the panel's, where the field's white wash would read as glass.
+    background: "bg.panel",
+    _light: { background: "bg.field" },
+    "&[data-density=compact]": {
+        "--track-inset": "token(spacing.control.trackInset)",
+        "--track-height": "token(sizes.control.compact)",
     },
-    // In a toolbar the whole track, not each option, is a small button's height.
-    "&[data-density=compact] > *": {
-        height: "calc(token(sizes.control.compact) - 2 * (token(spacing.control.trackInset) + token(sizes.border.hairline)))",
+    "& > *": {
+        height: "calc(var(--track-height) - 2 * (var(--track-inset) + token(sizes.border.hairline)))!",
+        borderRadius: "action!",
     },
+    "& > [aria-pressed=false]:not(:hover)": { color: "fg.muted" },
+    "& > [aria-pressed=true]": { boxShadow: "soft" },
 });
 const countText = css({ color: "fg.muted", fontVariantNumeric: "tabular-nums" });
 const formStack = css({ display: "grid", gap: "layout.clusterGap", minWidth: "0" });
+// Fields side by side sit closer than stacked ones.
+const fieldRow = css({
+    display: "grid",
+    gridAutoFlow: "column",
+    gridAutoColumns: "minmax(0, 1fr)",
+    gap: "layout.contentGap",
+});
 const formActions = css({
     display: "flex",
     justifyContent: "flex-end",
@@ -43,16 +77,26 @@ export function Form({ className, ...props }) {
 export function FormActions({ className, ...props }) {
     return _jsx("div", { ...props, className: cx(formActions, className), "data-ciridae-ui": "" });
 }
+/** Fields in one row of a `Form`, sharing its width equally. */
+export function FieldRow({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(fieldRow, className), "data-ciridae-ui": "" });
+}
 /**
  * A label round a `FieldLabel`, its control and any `FieldError`: the label names the control it
  * holds, and while `invalid` the control is marked and described by the error, so `Input`,
- * `Textarea`, `Select` and `Combobox` inside need no ids of their own.
+ * `Textarea`, `Select` and `Combobox` inside need no ids of their own. A `hint` sits under the
+ * control and describes it until the error takes its place.
  */
-export function Field({ className, htmlFor, invalid = false, ...props }) {
+export function Field({ className, htmlFor, invalid = false, hint, children, ...props }) {
     const generatedId = useId();
     const controlId = htmlFor ?? `${generatedId}-control`;
-    const fieldControl = useMemo(() => ({ controlId, descriptionId: invalid ? `${controlId}-error` : undefined, invalid }), [controlId, invalid]);
-    return (_jsx(FieldControlContext, { value: fieldControl, children: _jsx("label", { ...props, htmlFor: htmlFor, className: cx(field, className), "data-ciridae-ui": "" }) }));
+    const showsHint = hint !== undefined && !invalid;
+    const fieldControl = useMemo(() => ({
+        controlId,
+        descriptionId: invalid ? `${controlId}-error` : showsHint ? `${controlId}-hint` : undefined,
+        invalid,
+    }), [controlId, invalid, showsHint]);
+    return (_jsx(FieldControlContext, { value: fieldControl, children: _jsxs("label", { ...props, htmlFor: htmlFor, className: cx(field, className), "data-ciridae-ui": "", children: [children, showsHint && (_jsx("span", { id: `${controlId}-hint`, className: cx(noteText, hintText), children: hint }))] }) }));
 }
 export function FieldLabel({ children }) {
     return _jsx("span", { className: labelText, children: children });
@@ -60,13 +104,14 @@ export function FieldLabel({ children }) {
 /** The field's error; its id is the one the field's control is described by. */
 export function FieldError({ id, children }) {
     const field = useContext(FieldControlContext);
-    return (_jsx("p", { id: id ?? (field ? `${field.controlId}-error` : undefined), role: "alert", className: errorText, children: children }));
+    return (_jsx("p", { id: id ?? (field ? `${field.controlId}-error` : undefined), role: "alert", className: cx(noteText, errorText), children: children }));
 }
 export function SegmentedControl({ className, ...props }) {
     const inToolbar = useInToolbar();
-    return (_jsx("div", { ...props, className: cx(segmented, className), "data-density": inToolbar ? "compact" : undefined, "data-ciridae-ui": "" }));
+    const edge = faceEdge("raised");
+    return (_jsx("div", { ...props, className: cx(segmented, edge.className, className), "data-density": inToolbar ? "compact" : undefined, "data-ciridae-ui": "", "data-edge": edge["data-edge"] }));
 }
-/** One option of a `SegmentedControl`. */
+/** One option of a `SegmentedControl`: the selected one is raised, the others bare. */
 export function SegmentedOption({ selected, count, children, ...props }) {
-    return (_jsxs(Button, { ...props, type: "button", variant: "ghost", "aria-pressed": selected, children: [children, count !== undefined && _jsx("span", { className: countText, children: count })] }));
+    return (_jsxs(Button, { ...props, type: "button", variant: selected ? "secondary" : "ghost", "aria-pressed": selected, children: [children, count !== undefined && _jsx("span", { className: countText, children: count })] }));
 }

package/dist/components/glass-menu.d.ts

@@ -0,0 +1,3 @@
+export declare const glassMenuSurface: import("../styled-system/types/index.js").SystemStyleObject;
+export declare const glassMenuRow: import("../styled-system/types/index.js").SystemStyleObject;
+export declare const glassMenuDivider: import("../styled-system/types/index.js").SystemStyleObject;

package/dist/components/glass-menu.js

@@ -0,0 +1,63 @@
+import { css } from "#primitives/css";
+/*
+ * The glass sheet every menu, popover and select list floats on, and the rows inside it, as raw
+ * styles for `css()` to merge with each popup's own: an 8-round sheet padded 4px all round that
+ * blurs what lies under it, holding 4-round rows 32px tall.
+ */
+export const glassMenuSurface = css.raw({
+    padding: "menu.inset",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.popover",
+    backdropFilter: "blur(token(blurs.popover))",
+    boxShadow: "soft",
+    color: "fg.primary",
+    textStyle: "body",
+    // The popup takes focus as it opens; it is a container, not a control, so it draws no ring.
+    outline: "none",
+});
+/*
+ * A row: hovered, it takes a wash inside the menu hover hairline, the raised glass in dark and the
+ * row's hover wash in light. A row that is a plain button has no highlight state, so it takes the
+ * wash on hover. Reached by the keyboard, away from the pointer, it draws the focus ring inside its
+ * own edge in place of the wash and the hairline.
+ */
+export const glassMenuRow = css.raw({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "control.compact",
+    paddingInline: "menu.itemInline",
+    borderRadius: "control",
+    color: "fg.primary",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    outline: "none",
+    "&[data-highlighted], &:is(button):hover": {
+        background: "token(gradients.raised)",
+        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+        _light: { background: "bg.rowHover" },
+    },
+    // Under the pointer the row keeps the wash, so the ring marks only the row the keys reached.
+    "&:focus-visible:not(:hover), &[data-highlighted]:focus-visible:not(:hover)": {
+        focusRing: "inset",
+        background: "transparent",
+        boxShadow: "none",
+        _light: { background: "transparent" },
+    },
+    "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+});
+/*
+ * The rule between groups of rows, inset 8px from the sheet's sides with 4px above and below: a
+ * hairline along the top of a 2px band, as the design draws it.
+ */
+export const glassMenuDivider = css.raw({
+    flexShrink: "0",
+    height: "calc(token(sizes.border.hairline) * 2)",
+    marginBlock: "layout.tightGap",
+    marginInline: "menu.itemInline",
+    borderTop: "1px solid token(colors.border.divider)",
+});

package/dist/components/gradient-edge.d.ts

@@ -0,0 +1,9 @@
+type GradientEdge = "raised" | "primary" | "danger" | "tinted" | "toolbar";
+/** A face's edge: a flat hairline ciridae.css paints by name, or one of the gradient edges. */
+export type FaceEdge = "glass" | "control" | GradientEdge;
+/** The class and `data-edge` that draw `edge`; nothing for a face with no edge. */
+export declare function faceEdge(edge: FaceEdge | undefined): {
+    className: string | undefined;
+    "data-edge": string | undefined;
+};
+export {};

package/dist/components/gradient-edge.js

@@ -0,0 +1,31 @@
+import { cva } from "#primitives/css";
+/*
+ * The 1px edge a face draws as a gradient. A gradient cannot be a border color, so it paints the
+ * `[data-edge]` ring ciridae.css draws inside the element's box, which also keeps its corners:
+ * `faceEdge` gives the class that paints the ring and the `data-edge` that turns it on. Dark draws
+ * no edge on the primary or destructive face. A toolbar control's edge is the selected face's: the
+ * raised gradient in dark and a paler grey gradient in light.
+ */
+const gradientEdge = cva({
+    base: {},
+    variants: {
+        edge: {
+            raised: { _before: { background: "token(gradients.border.raised)" } },
+            primary: { _before: { background: "token(gradients.border.primary)" } },
+            danger: { _before: { background: "token(gradients.border.danger)" } },
+            tinted: { _before: { background: "token(gradients.border.tinted)" } },
+            toolbar: { _before: { background: "token(gradients.border.selected)" } },
+        },
+    },
+});
+function isGradientEdge(edge) {
+    return edge !== "glass" && edge !== "control";
+}
+/** The class and `data-edge` that draw `edge`; nothing for a face with no edge. */
+export function faceEdge(edge) {
+    if (edge === undefined)
+        return { className: undefined, "data-edge": undefined };
+    if (isGradientEdge(edge))
+        return { className: gradientEdge({ edge }), "data-edge": "gradient" };
+    return { className: undefined, "data-edge": edge };
+}

package/dist/components/hotkeys.d.ts

@@ -7,7 +7,7 @@ export declare const PAGE_HOTKEY_SCOPE = "page";
 /** Gives the hotkeys registered inside it to the page, paused while an overlay is open. */
 export declare function PageHotkeys({ children }: {
     children: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * An overlay's keyboard: while mounted (and `enabled`), only the hotkeys registered inside it and
  * the global ones fire, so the top overlay owns the keyboard and the page under it pauses.
@@ -15,7 +15,7 @@ export declare function PageHotkeys({ children }: {
 export declare function HotkeyLayer({ enabled, children }: {
     enabled?: boolean;
     children: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * The person's rebound hotkeys, kept in `localStorage` as JSON under `storageKey`, as the root
  * `HotkeysProvider`'s `customHotkeys` and `onCustomHotkeysChange`. Entries that are no hotkey are

package/dist/components/icon.d.ts

@@ -55,4 +55,4 @@ export type SpinnerProps = Omit<IconProps, "size"> & {
     label?: string;
 };
 /** The one in-progress glyph: every pending state spins this, never a refresh or notch icon. */
-export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("@types/react").JSX.Element;
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/components/input.d.ts

@@ -1,11 +1,11 @@
 import { type ComponentProps, type MouseEvent } from "react";
 import type { Hotkey } from "./hotkeys.js";
 export type InputProps = Omit<ComponentProps<"input">, "size"> & {
-    size?: "small" | "medium" | "large";
+    size?: "inline" | "small" | "medium" | "large";
 };
-export declare function Input({ className, size, ...props }: InputProps): import("@types/react").JSX.Element;
+export declare function Input({ className, size, ...props }: InputProps): import("react").JSX.Element;
 export type SearchInputProps = Omit<ComponentProps<"input">, "size" | "value" | "defaultValue"> & {
-    variant?: "regular" | "flat" | "sidebar" | "dropdown";
+    variant?: "regular" | "flat" | "sidebar" | "ghost";
     /** Defaults to `compact` in a `Toolbar`, `regular` elsewhere. */
     size?: "regular" | "compact";
     /** `fill` takes the row's width; `field` grows from a name's width to a search field's. */
@@ -23,7 +23,7 @@ export type SearchInputProps = Omit<ComponentProps<"input">, "size" | "value" |
     shortcut?: Hotkey;
     wrapperClassName?: string;
 };
-export declare function SearchInput({ variant, size: ownSize, width, value, defaultValue, onValueCommit, debounceMs, shortcut, wrapperClassName, className, onChange, onKeyDown, ...props }: SearchInputProps): import("@types/react").JSX.Element;
+export declare function SearchInput({ variant, size: ownSize, width, value, defaultValue, onValueCommit, debounceMs, shortcut, wrapperClassName, className, onChange, onKeyDown, ...props }: SearchInputProps): import("react").JSX.Element;
 export type SearchFieldProps = Omit<ComponentProps<"input">, "size" | "type"> & {
     /** Defaults to `compact` in a `Toolbar`, `regular` elsewhere. */
     size?: "regular" | "compact";
@@ -31,6 +31,8 @@ export type SearchFieldProps = Omit<ComponentProps<"input">, "size" | "type"> &
     onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Shows this hotkey's hint while the field is empty, such as "/"; the host binds it. */
     shortcut?: Hotkey;
+    /** In a menu or popover: the hairline alone, as the sheet's divider, with no hover or ring. */
+    quiet?: boolean;
     wrapperClassName?: string;
 };
-export declare function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }: SearchFieldProps): import("@types/react").JSX.Element;
+export declare function SearchField({ size: ownSize, onClear, quiet, shortcut, wrapperClassName, className, disabled, ...props }: SearchFieldProps): import("react").JSX.Element;

package/dist/components/input.js

@@ -16,7 +16,7 @@ import { useCiridaeLocale } from "./locale.js";
 const fieldFace = {
     border: "1px solid token(colors.border.control)",
     borderRadius: "control",
-    background: "bg.field",
+    background: "bg.formField",
     color: "fg.primary",
     fontFamily: "sans",
     fontWeight: "medium",
@@ -34,13 +34,19 @@ const field = cva({
     base: { ...fieldFace, width: "100%", lineHeight: "tight" },
     variants: {
         size: {
-            /** Matches the small button, for forms and filters. */
+            /** The editor an inline-edit row opens in place of its value. */
+            inline: {
+                height: "field.inline",
+                paddingInline: "menu.itemInline",
+                fontSize: "body",
+            },
+            /** For a row of filters, beside compact selects and small buttons. */
             small: {
                 height: "control.compact",
                 paddingInline: "control.compactInline",
                 fontSize: "caption",
             },
-            /** The Round 2 field: the height of the default button. */
+            /** The field: the height of the default button. */
             medium: {
                 height: "control.default",
                 paddingInline: "control.compactInline",
@@ -55,9 +61,9 @@ const field = cva({
             },
         },
     },
-    defaultVariants: { size: "small" },
+    defaultVariants: { size: "medium" },
 });
-export function Input({ className, size = "small", ...props }) {
+export function Input({ className, size = "medium", ...props }) {
     const fieldIds = useFieldControl(props);
     return (_jsx(BaseInput, { ...props, ...fieldIds, className: cx(field({ size }), className), "data-ciridae-ui": "" }));
 }
@@ -89,7 +95,8 @@ const search = cva({
                 border: "1px solid token(colors.border.control)",
                 background: "bg.field",
             },
-            dropdown: {
+            // No face: the field reads as text until focused, beside ghost buttons in a toolbar.
+            ghost: {
                 borderRadius: "action",
                 paddingInline: "control.compactInline",
                 border: "0",
@@ -142,7 +149,7 @@ const searchText = cva({
             regular: {},
             sidebar: {},
             flat: {},
-            dropdown: { fontSize: "caption", fontWeight: "regular" },
+            ghost: { fontSize: "caption", fontWeight: "regular" },
         },
         size: { regular: {}, compact: { fontSize: "caption", fontWeight: "regular" } },
     },
@@ -178,12 +185,13 @@ export function SearchInput({ variant = "regular", size: ownSize, width = "fill"
                         onValueCommit(event.currentTarget.value);
                     }
                     onKeyDown?.(event);
-                }, className: cx(searchText({ variant, size }), className) }), shortcut && _jsx(ShortcutHint, { hotkey: shortcut })] }));
+                }, className: cx(searchText({ variant, size }), className) }), shortcut && _jsx(ShortcutHint, { boxed: true, hotkey: shortcut })] }));
 }
 /*
  * The Round 2 search field is an underline, not a box: an icon, the text, and a clear button on
- * one hairline. Focus turns that hairline into a 2px accent line, as the frames draw it, rather
- * than boxing a field that has no box.
+ * one hairline. Hovered it takes the hover wash, and focused the ring, both on its own nearly
+ * square corners. Quiet, in a menu or popover, the hairline is the sheet's divider and nothing
+ * else changes: the popup opens with the field focused, and its caret shows that.
  */
 const underline = cva({
     base: {
@@ -194,10 +202,6 @@ const underline = cva({
         paddingInline: "search.inline",
         borderBottom: "1px solid token(colors.border.control)",
         color: "fg.muted",
-        "&:has(:focus-visible)": {
-            borderBottomColor: "border.focus",
-            boxShadow: "inset 0 -1px 0 0 token(colors.border.focus)",
-        },
         "&:has(:disabled)": { opacity: "disabled" },
     },
     variants: {
@@ -205,8 +209,16 @@ const underline = cva({
             regular: { height: "control.default" },
             compact: { height: "control.compact" },
         },
+        quiet: {
+            false: {
+                borderRadius: "control",
+                _hover: { background: "bg.controlHover" },
+                "&:has(:focus-visible)": { focusRing: "outer" },
+            },
+            true: { paddingInline: "none", borderBottomColor: "border.divider" },
+        },
     },
-    defaultVariants: { size: "regular" },
+    defaultVariants: { size: "regular", quiet: false },
 });
 const underlineText = css({
     flex: "1",
@@ -241,9 +253,9 @@ const clear = css({
     _hover: { color: "fg.primary", background: "bg.hover" },
     _focusVisible: { focusRing: "inset" },
 });
-export function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }) {
+export function SearchField({ size: ownSize, onClear, quiet = false, shortcut, wrapperClassName, className, disabled, ...props }) {
     const inToolbar = useInToolbar();
     const { labels } = useCiridaeLocale();
     const size = ownSize ?? (inToolbar ? "compact" : "regular");
-    return (_jsxs("label", { className: cx(underline({ size }), wrapperClassName), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(BaseInput, { ...props, type: "search", disabled: disabled, className: cx(underlineText, className) }), onClear && (_jsx("button", { type: "button", className: clear, "aria-label": labels.common.clear, disabled: disabled, onClick: onClear, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })), shortcut && !onClear && _jsx(ShortcutHint, { hotkey: shortcut })] }));
+    return (_jsxs("label", { className: cx(underline({ size, quiet }), wrapperClassName), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(BaseInput, { ...props, type: "search", disabled: disabled, className: cx(underlineText, className) }), onClear && (_jsx("button", { type: "button", className: clear, "aria-label": labels.common.clear, disabled: disabled, onClick: onClear, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })), shortcut && !onClear && _jsx(ShortcutHint, { boxed: true, hotkey: shortcut })] }));
 }

package/dist/components/keyboard-shortcuts.d.ts

@@ -5,6 +5,6 @@ export type KeyboardShortcutsProps = {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
-export declare function KeyboardShortcuts({ hotkey, open: ownOpen, onOpenChange, }: KeyboardShortcutsProps): import("@types/react").JSX.Element;
+export declare function KeyboardShortcuts({ hotkey, open: ownOpen, onOpenChange, }: KeyboardShortcutsProps): import("react").JSX.Element;
 /** The app's rebindable hotkeys under their groups, each with Change and, once changed, Reset. */
-export declare function KeyboardShortcutSettings(): import("@types/react").JSX.Element[];
+export declare function KeyboardShortcutSettings(): import("react").JSX.Element[];

package/dist/components/keycap.d.ts

@@ -1,12 +1,16 @@
 import { type Hotkey } from "./hotkeys.js";
 import type { ComponentProps } from "react";
-/** One key as a 24px cap, such as the `K` after a search field. */
-export declare function Keycap({ className, ...props }: ComponentProps<"kbd">): import("@types/react").JSX.Element;
+/**
+ * One key as a 22px square cap, such as the `K` after a search field. A label of more than one
+ * character, such as `Esc`, takes the wider word cap on its own.
+ */
+export declare function Keycap({ className, children, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
 /**
  * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
- * elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
- * that wants it.
+ * elsewhere, and a sequence's steps are spaced ("G I"). `boxed` sets each key in its own
+ * `Keycap`, 2px apart, as a menu row or a search field shows it.
  */
-export declare function ShortcutHint({ hotkey, className, ...props }: ComponentProps<"kbd"> & {
+export declare function ShortcutHint({ hotkey, boxed, className, ...props }: ComponentProps<"kbd"> & {
     hotkey: Hotkey;
-}): import("@types/react").JSX.Element;
+    boxed?: boolean;
+}): import("react").JSX.Element;