@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/filter-bar.js

@@ -7,14 +7,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * alone, such as a column head's "Filter by". Nothing here filters rows: `matchesFilter` tests one
  * value for a list that filters on the client.
  */
-import { CaretDownIcon, CaretLeftIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, PlusIcon, XIcon, } from "@phosphor-icons/react";
 import { useState } from "react";
 import { css, cx } from "#primitives/css";
 import { Button, IconButton } from "./button.js";
 import { CheckboxItem } from "./checkbox-item.js";
 import { useControllableState } from "./controllable-state.js";
-import { Divider } from "./data-display.js";
-import { icon } from "./icon.js";
+import { glassMenuDivider, glassMenuRow } from "./glass-menu.js";
+import { faceEdge } from "./gradient-edge.js";
+import { directional, icon } from "./icon.js";
 import { Input, SearchField } from "./input.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
@@ -90,6 +91,10 @@ export function describeFilter(field, filter, locale) {
             : values.join(", "),
     };
 }
+/*
+ * The slicer's face: the selected tint, hovering to the raised face. The field reads in the
+ * secondary grey, the operator a step quieter.
+ */
 const chip = css({
     display: "inline-flex",
     alignItems: "center",
@@ -99,7 +104,9 @@ const chip = css({
     paddingInlineStart: "control.compactInline",
     paddingInlineEnd: "control.iconGap",
     borderRadius: "pill",
-    background: "bg.raised",
+    background: "token(gradients.selected)",
+    _hover: { background: "token(gradients.raisedHover)" },
+    _light: { color: "fg.secondary" },
     color: "fg.muted",
     fontSize: "caption",
     fontWeight: "medium",
@@ -122,6 +129,7 @@ const chipBody = css({
     _focusVisible: { focusRing: "outer" },
     "& svg": { flexShrink: "0" },
 });
+const chipOperator = css({ color: "fg.muted" });
 const chipValue = css({ color: "fg.primary", overflow: "hidden", textOverflow: "ellipsis" });
 const chipRemove = css({
     display: "inline-grid",
@@ -138,10 +146,11 @@ const chipRemove = css({
     _hover: { color: "fg.primary", background: "bg.hover" },
     _focusVisible: { focusRing: "outer" },
 });
+const toolbarEdge = faceEdge("toolbar");
 /** One set filter: the field and operator muted, its values in full; the text reopens it. */
 export function FilterChip({ label, icon: fieldIcon, operator, values, onEdit, onRemove, className, ...props }) {
     const { labels } = useCiridaeLocale();
-    return (_jsxs("span", { ...props, className: cx(chip, className), "data-ciridae-ui": "", "data-edge": "glass", children: [_jsxs("button", { type: "button", className: chipBody, onClick: onEdit, children: [fieldIcon, label, " ", operator, _jsx("span", { className: chipValue, children: values })] }), _jsx("button", { type: "button", className: chipRemove, "aria-label": labels.filters.remove(label), onClick: onRemove, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }));
+    return (_jsxs("span", { ...props, className: cx(chip, toolbarEdge.className, className), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsxs("button", { type: "button", className: chipBody, onClick: onEdit, children: [fieldIcon, label, " ", _jsx("span", { className: chipOperator, children: operator }), _jsx("span", { className: chipValue, children: values })] }), _jsx("button", { type: "button", className: chipRemove, "aria-label": labels.filters.remove(label), onClick: onRemove, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }));
 }
 const bar = css({
     display: "flex",
@@ -170,28 +179,29 @@ const tools = css({
     "& > button": { flexShrink: "0" },
     "& > :not(button)": { minWidth: "0" },
 });
-const builder = css({ display: "flex", flexDirection: "column", width: "300px", maxWidth: "100%" });
-const fieldItem = css({
+const builder = css({
     display: "flex",
-    alignItems: "center",
-    gap: "layout.controlGap",
+    flexDirection: "column",
+    width: "overlay.popover",
+    maxWidth: "100%",
+});
+// A menu row: the field's icon, its name, and an arrow on to its operator and values.
+const fieldItem = css(glassMenuRow, {
     width: "100%",
-    minHeight: "control.compact",
-    paddingInline: "menu.itemInline",
     border: "0",
-    borderRadius: "control",
     background: "transparent",
-    color: "fg.primary",
-    font: "inherit",
-    fontSize: "body",
-    fontWeight: "medium",
-    letterSpacing: "compact",
+    fontFamily: "inherit",
     textAlign: "start",
-    cursor: "pointer",
-    _hover: { background: "bg.hover" },
-    _focusVisible: { background: "bg.hover", outline: "none" },
-    "& svg": { color: "fg.muted", width: "icon.small", height: "icon.small" },
+    "& > span": { flex: "1", minWidth: "0" },
+    "& svg": {
+        flexShrink: "0",
+        color: "fg.muted",
+        fontSize: "icon.small",
+        width: "1em",
+        height: "1em",
+    },
 });
+const menuDivider = css(glassMenuDivider);
 const groupLabel = css({
     paddingBlockStart: "control.block",
     paddingBlockEnd: "layout.tightGap",
@@ -201,7 +211,8 @@ const groupLabel = css({
     fontWeight: "medium",
     letterSpacing: "compact",
 });
-const searchWrap = css({ padding: "layout.tightGap" });
+// The quiet search's hairline is inset as the dividers are.
+const searchWrap = css({ paddingInline: "menu.itemInline", paddingBlockEnd: "layout.tightGap" });
 const noMatches = css({
     paddingBlock: "control.block",
     paddingInline: "menu.itemInline",
@@ -235,7 +246,7 @@ export function FilterBar({ fields, value, defaultValue = [], onValueChange, ope
                             setEditing(field.key);
                             setOpen(true);
                         }, onRemove: () => setFilters(filters.filter((candidate) => candidate.field !== filter.field)) }, filter.field));
-                }) })), _jsxs("div", { className: tools, children: [filters.length > 0 && (_jsx(Button, { variant: "ghost", onClick: () => setFilters([]), children: labels.filters.clearAll })), _jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsx(Button, { variant: "ghost", icon: _jsx(PlusIcon, { className: icon({ size: "small" }) }), onClick: () => setEditing(null), children: labels.filters.addFilter }), children: open && (_jsx(FilterBuilder, { fields: fields, startField: editing, filters: filters, onChange: (filter) => setFilters(replaceFilter(filters, filter)) }, editing ?? "")) }), children] })] }));
+                }) })), _jsxs("div", { className: tools, children: [filters.length > 0 && (_jsx(Button, { variant: "ghost", onClick: () => setFilters([]), children: labels.filters.clearAll })), _jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsx(Button, { variant: "secondary", size: "medium", icon: _jsx(PlusIcon, { className: icon({ size: "small" }) }), onClick: () => setEditing(null), children: labels.filters.addFilter }), children: open && (_jsx(FilterBuilder, { fields: fields, startField: editing, filters: filters, onChange: (filter) => setFilters(replaceFilter(filters, filter)) }, editing ?? "")) }), children] })] }));
 }
 function FilterBuilder({ fields, startField, filters, onChange, }) {
     const { labels } = useCiridaeLocale();
@@ -254,10 +265,10 @@ function FilterBuilder({ fields, startField, filters, onChange, }) {
         else
             groups.push({ label: candidate.group, fields: [candidate] });
     }
-    return (_jsxs("div", { className: builder, children: [_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", "aria-label": labels.filters.filterBy, placeholder: labels.filters.filterBy, value: query, onChange: (event) => setQuery(event.target.value) }) }), groups.map((group, index) => (_jsxs("div", { className: css({ display: "grid" }), children: [index > 0 && _jsx(Divider, { inset: "menu" }), group.label && _jsx("span", { className: groupLabel, children: group.label }), group.fields.map((candidate) => (_jsxs("button", { type: "button", className: fieldItem, onClick: () => {
+    return (_jsxs("div", { className: builder, children: [_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", quiet: true, "aria-label": labels.filters.filterBy, placeholder: labels.filters.filterBy, value: query, onChange: (event) => setQuery(event.target.value) }) }), groups.map((group, index) => (_jsxs("div", { className: css({ display: "grid" }), children: [index > 0 && _jsx("div", { className: menuDivider, role: "separator" }), group.label && _jsx("span", { className: groupLabel, children: group.label }), group.fields.map((candidate) => (_jsxs("button", { type: "button", className: fieldItem, onClick: () => {
                             setFieldKey(candidate.key);
                             setQuery("");
-                        }, children: [candidate.icon, candidate.label] }, candidate.key)))] }, group.label ?? ""))), matching.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noFields })] }));
+                        }, children: [candidate.icon, _jsx("span", { children: candidate.label }), _jsx(CaretRightIcon, { className: directional, "aria-hidden": "true" })] }, candidate.key)))] }, group.label ?? ""))), matching.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noFields })] }));
 }
 const editorHeader = css({
     display: "flex",
@@ -329,13 +340,13 @@ export function FilterValueEditor({ field, value, onChange, onBack, }) {
                                 const keepsValues = multiValueOperators.includes(candidate) === multiple && candidate !== "between";
                                 report(candidate, keepsValues ? values : values.slice(0, 1));
                             },
-                        })) })) : (_jsx("span", { className: fixedOperator, children: operatorLabel }))] }), options ? (_jsxs(_Fragment, { children: [field.options && field.options.length > 6 && (_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", "aria-label": labels.filters.searchValues(field.label), placeholder: labels.filters.searchValues(field.label), value: query, onChange: (event) => setQuery(event.target.value) }) })), _jsxs("div", { className: valueList, children: [options.map((option) => (_jsxs(CheckboxItem, { checked: values.includes(option.value), onCheckedChange: (checked) => report(operator, multiple
+                        })) })) : (_jsx("span", { className: fixedOperator, children: operatorLabel }))] }), options ? (_jsxs(_Fragment, { children: [field.options && field.options.length > 6 && (_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", quiet: true, "aria-label": labels.filters.searchValues(field.label), placeholder: labels.filters.searchValues(field.label), value: query, onChange: (event) => setQuery(event.target.value) }) })), _jsxs("div", { className: valueList, children: [options.map((option) => (_jsxs(CheckboxItem, { checked: values.includes(option.value), onCheckedChange: (checked) => report(operator, multiple
                                     ? checked
                                         ? [...values, option.value]
                                         : values.filter((candidate) => candidate !== option.value)
                                     : checked
                                         ? [option.value]
-                                        : []), meta: option.count, children: [option.icon, option.label] }, option.value))), options.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noValues })] })] })) : (_jsx("div", { className: inputs, children: (operator === "between" ? [0, 1] : [0]).map((index) => (_jsx(Input, { type: field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text", "aria-label": operator === "between"
+                                        : []), meta: option.count, children: [option.icon, option.label] }, option.value))), options.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noValues })] })] })) : (_jsx("div", { className: inputs, children: (operator === "between" ? [0, 1] : [0]).map((index) => (_jsx(Input, { size: "small", type: field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text", "aria-label": operator === "between"
                         ? index === 0
                             ? labels.filters.from
                             : labels.filters.to
@@ -347,7 +358,7 @@ export function FilterValueEditor({ field, value, onChange, onBack, }) {
                         const next = [...values];
                         next[index] = event.target.value;
                         report(operator, next);
-                    } }, index))) })), _jsx(Divider, { inset: "menu" }), _jsxs("div", { className: editorFooter, children: [options
+                    } }, index))) })), _jsx("div", { className: menuDivider, role: "separator" }), _jsxs("div", { className: editorFooter, children: [options
                         ? `${labels.filters.selectedCount(picked)} · ${labels.filters.updatesAsYouPick}`
                         : labels.filters.updatesAsYouPick, _jsx(Button, { variant: "ghost", onClick: () => report(operator, []), children: labels.common.clear })] })] }));
 }

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

@@ -23,7 +23,16 @@ export declare const checkMark: import("../styled-system/types/index.js").Recipe
         };
     };
 }>;
+/** What a check mark's element carries, so its filled face can draw the gradient edge. */
+export declare const checkMarkEdge: {
+    readonly "data-ciridae-ui": "";
+    readonly "data-edge": "gradient";
+};
 export declare const checkIndicator: string;
+/** The tick, or the dash of a mixed checkbox. */
+export declare function CheckGlyph({ mixed }: {
+    mixed: boolean | undefined;
+}): import("react").JSX.Element;
 export declare function Checkbox({ children, className, wrapperClassName, ...props }: Omit<ComponentProps<typeof BaseCheckbox.Root>, "children" | "className"> & {
     children?: ReactNode;
     className?: string;

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

@@ -6,13 +6,17 @@ import type { ComponentProps, ReactNode } from "react";
  */
 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;
+    hint?: ReactNode;
 }): import("react").JSX.Element;
 export declare function FieldLabel({ children }: {
     children: ReactNode;
@@ -28,5 +32,5 @@ export type SegmentedOptionProps = Omit<ButtonProps, "variant" | "type" | "aria-
     /** Shown muted after the label, such as how many items the option lists. */
     count?: number;
 };
-/** One option of a `SegmentedControl`. */
+/** 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/input.d.ts

@@ -1,7 +1,7 @@
 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("react").JSX.Element;
 export type SearchInputProps = Omit<ComponentProps<"input">, "size" | "value" | "defaultValue"> & {
@@ -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("react").JSX.Element;
+export declare function SearchField({ size: ownSize, onClear, quiet, shortcut, wrapperClassName, className, disabled, ...props }: SearchFieldProps): import("react").JSX.Element;