@ciridae/ui 1.0.5 → 1.0.9

package/dist/components/feedback-screenshot.js

@@ -18,8 +18,8 @@ export const MAX_SCREENSHOT_POINTERS = 7;
 const stage = css({
     position: "relative",
     justifySelf: "center",
-    width: "fit-content",
-    maxWidth: "100%",
+    width: "[fit-content]",
+    maxWidth: "full",
     overflow: "hidden",
     border: "1px solid token(colors.border.control)",
     borderRadius: "control",
@@ -33,7 +33,7 @@ const stageButton = css({
     cursor: "crosshair",
     "&[data-full]": { cursor: "default" },
     _focusVisible: { focusRing: "inset" },
-    "& img": { display: "block", maxWidth: "100%", maxHeight: "56dvh" },
+    "& img": { display: "block", maxWidth: "full", maxHeight: "[56dvh]" },
 });
 /* A pointer's number: on the image, and again before its note. */
 const pointerNumber = css.raw({
@@ -74,7 +74,7 @@ const pointerRow = css({
 const thumbnail = css({
     position: "relative",
     flexShrink: "0",
-    width: "96px",
+    width: "[96px]",
     padding: "none",
     border: "1px solid token(colors.border.control)",
     borderRadius: "keycap",
@@ -82,7 +82,7 @@ const thumbnail = css({
     cursor: "pointer",
     _focusVisible: { focusRing: "outer" },
     _disabled: { opacity: "disabled", cursor: "not-allowed" },
-    "& img": { display: "block", width: "100%", height: "auto", borderRadius: "keycap" },
+    "& img": { display: "block", width: "full", height: "auto", borderRadius: "keycap" },
 });
 const thumbnailDot = css({
     position: "absolute",
@@ -94,8 +94,8 @@ const thumbnailDot = css({
 });
 const thumbnailCount = css({
     position: "absolute",
-    top: "calc(token(spacing.layout.tightGap) * -1)",
-    insetInlineEnd: "calc(token(spacing.layout.tightGap) * -1)",
+    top: "[calc(token(spacing.layout.tightGap) * -1)]",
+    insetInlineEnd: "[calc(token(spacing.layout.tightGap) * -1)]",
     display: "grid",
     placeItems: "center",
     minWidth: "indicator.count",

package/dist/components/feedback-sheet.js

@@ -98,7 +98,7 @@ const whereDetail = css({
     letterSpacing: "compact",
     lineHeight: "tight",
 });
-const message = css({ minHeight: "132px" });
+const message = css({ minHeight: "[132px]" });
 const screenshotRow = css({
     display: "flex",
     alignItems: "flex-start",
@@ -117,8 +117,8 @@ const screenshotPreview = css({
     display: "grid",
     placeItems: "center",
     flexShrink: "0",
-    width: "96px",
-    height: "60px",
+    width: "[96px]",
+    height: "[60px]",
     border: "1px solid token(colors.border.control)",
     borderRadius: "keycap",
     background: "bg.field",
@@ -133,15 +133,15 @@ const sent = css({
     alignItems: "center",
     justifyContent: "center",
     gap: "layout.clusterGap",
-    maxWidth: "320px",
+    maxWidth: "[320px]",
     marginInline: "auto",
     textAlign: "center",
 });
 const sentIcon = css({
     display: "grid",
     placeItems: "center",
-    width: "48px",
-    height: "48px",
+    width: "[48px]",
+    height: "[48px]",
     border: "1px solid token(colors.border.control)",
     borderRadius: "round",
     background: "bg.field",
@@ -160,7 +160,7 @@ const sentRow = css({
     gridTemplateColumns: "minmax(0, 1fr) auto",
     alignItems: "center",
     gap: "layout.contentGap",
-    width: "100%",
+    width: "full",
     paddingBlock: "panel.default",
     paddingInline: "panel.comfortable",
     border: "0",
@@ -218,7 +218,7 @@ const listToolbar = css({
 /* An item: its subject and status pinned over the thread, which scrolls; the reply below. */
 const itemHeader = css({
     position: "sticky",
-    top: "0",
+    top: "none",
     zIndex: "raised",
     display: "flex",
     alignItems: "flex-start",

package/dist/components/filter-bar.js

@@ -45,7 +45,7 @@ export function matchesFilter(value, filter) {
     if (values.length === 0)
         return true;
     const own = (Array.isArray(value) ? value : value === null || value === undefined ? [] : [value]).map(String);
-    const [first = "", second = ""] = values;
+    const [first = ""] = values;
     const number = (text) => Number(text);
     switch (filter.operator) {
         case "is":
@@ -68,10 +68,14 @@ export function matchesFilter(value, filter) {
             return own.some((candidate) => candidate < first);
         case "after":
             return own.some((candidate) => candidate > first);
-        case "between":
-            return own.some((candidate) => typeof value === "number" || (Array.isArray(value) && typeof value[0] === "number")
-                ? number(candidate) >= number(first) && (!second || number(candidate) <= number(second))
-                : candidate >= first && (!second || candidate <= second));
+        case "between": {
+            const [rangeStart = "", rangeEnd = ""] = filter.values;
+            const isNumeric = typeof value === "number" || (Array.isArray(value) && typeof value[0] === "number");
+            return own.some((candidate) => isNumeric
+                ? (!rangeStart || number(candidate) >= number(rangeStart)) &&
+                    (!rangeEnd || number(candidate) <= number(rangeEnd))
+                : (!rangeStart || candidate >= rangeStart) && (!rangeEnd || candidate <= rangeEnd));
+        }
     }
 }
 /** A `yyyy-mm-dd` date as a local day, so it reads as the day it names in every zone. */
@@ -84,6 +88,19 @@ export function describeFilter(field, filter, locale) {
     const labelOf = (value) => field.options?.find((option) => option.value === value)?.label ??
         (field.kind === "date" ? locale.formatDate(localDay(value)) : value);
     const values = filter.values.filter((value) => value !== "").map(labelOf);
+    if (filter.operator === "between" && values.length === 1) {
+        // A range with one end typed keeps that end, as `matchesFilter` does.
+        const [rangeStart = "", rangeEnd = ""] = filter.values;
+        const oneEndedRangeOperators = locale.labels.filters.oneEndedRangeOperators;
+        const operator = field.kind === "number"
+            ? rangeStart !== ""
+                ? oneEndedRangeOperators.atLeast
+                : oneEndedRangeOperators.atMost
+            : rangeStart !== ""
+                ? oneEndedRangeOperators.onOrAfter
+                : oneEndedRangeOperators.onOrBefore;
+        return { operator, values: rangeEnd !== "" ? labelOf(rangeEnd) : labelOf(rangeStart) };
+    }
     return {
         operator: locale.labels.filters.chipOperators[filter.operator],
         values: filter.operator === "between"
@@ -91,21 +108,17 @@ 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",
     gap: "layout.tightGap",
-    maxWidth: "100%",
+    maxWidth: "full",
     height: "control.compact",
     paddingInlineStart: "control.compactInline",
     paddingInlineEnd: "control.iconGap",
     borderRadius: "pill",
-    background: "token(gradients.selected)",
-    _hover: { background: "token(gradients.raisedHover)" },
+    background: "[token(gradients.selected)]",
+    _hover: { background: "[token(gradients.raisedHover)]" },
     _light: { color: "fg.secondary" },
     color: "fg.muted",
     fontSize: "caption",
@@ -121,9 +134,9 @@ const chipBody = css({
     padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
-    letterSpacing: "inherit",
+    letterSpacing: "[inherit]",
     cursor: "pointer",
     borderRadius: "control",
     _focusVisible: { focusRing: "outer" },
@@ -183,22 +196,21 @@ const builder = css({
     display: "flex",
     flexDirection: "column",
     width: "overlay.popover",
-    maxWidth: "100%",
+    maxWidth: "full",
 });
-// A menu row: the field's icon, its name, and an arrow on to its operator and values.
 const fieldItem = css(glassMenuRow, {
-    width: "100%",
+    width: "full",
     border: "0",
     background: "transparent",
-    fontFamily: "inherit",
+    fontFamily: "[inherit]",
     textAlign: "start",
     "& > span": { flex: "1", minWidth: "0" },
     "& svg": {
         flexShrink: "0",
         color: "fg.muted",
         fontSize: "icon.small",
-        width: "1em",
-        height: "1em",
+        width: "[1em]",
+        height: "[1em]",
     },
 });
 const menuDivider = css(glassMenuDivider);
@@ -211,7 +223,6 @@ const groupLabel = css({
     fontWeight: "medium",
     letterSpacing: "compact",
 });
-// 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",
@@ -299,7 +310,7 @@ const operatorTrigger = css({
     _focusVisible: { focusRing: "outer" },
 });
 const fixedOperator = css({ color: "fg.muted", fontSize: "caption" });
-const valueList = css({ display: "grid", maxHeight: "240px", overflowY: "auto" });
+const valueList = css({ display: "grid", maxHeight: "[240px]", overflowY: "auto" });
 const inputs = css({ display: "grid", gap: "layout.tightGap", padding: "layout.tightGap" });
 const editorFooter = css({
     display: "flex",
@@ -333,12 +344,16 @@ export function FilterValueEditor({ field, value, onChange, onBack, }) {
     const options = field.options?.filter((option) => option.label.toLowerCase().includes(query.trim().toLowerCase()));
     const operatorLabel = labels.filters.operators[operator];
     const picked = values.filter((candidate) => candidate !== "").length;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: editorHeader, children: [onBack && (_jsx(IconButton, { "aria-label": labels.filters.backToFields, size: "compact", variant: "ghost", onClick: onBack, children: _jsx(CaretLeftIcon, { className: icon({ size: "small" }) }) })), _jsx("span", { className: css({ paddingInlineStart: onBack ? "0" : "menu.itemInline" }), children: field.label }), operators.length > 1 ? (_jsx(Menu, { trigger: _jsxs("button", { type: "button", className: operatorTrigger, "data-ciridae-ui": "", "data-edge": "glass", children: [operatorLabel, _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] }), items: operators.map((candidate) => ({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: editorHeader, children: [onBack && (_jsx(IconButton, { "aria-label": labels.filters.backToFields, size: "compact", variant: "ghost", onClick: onBack, children: _jsx(CaretLeftIcon, { className: icon({ size: "small" }) }) })), _jsx("span", { className: css({ paddingInlineStart: onBack ? "none" : "menu.itemInline" }), children: field.label }), operators.length > 1 ? (_jsx(Menu, { trigger: _jsxs("button", { type: "button", className: operatorTrigger, "data-ciridae-ui": "", "data-edge": "glass", children: [operatorLabel, _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] }), items: operators.map((candidate) => ({
                             label: labels.filters.operators[candidate],
                             checked: candidate === operator,
                             onSelect: () => {
-                                const keepsValues = multiValueOperators.includes(candidate) === multiple && candidate !== "between";
-                                report(candidate, keepsValues ? values : values.slice(0, 1));
+                                // A range's two values fit only a range: moving into or out of one keeps the first.
+                                const keepsValues = multiValueOperators.includes(candidate) === multiple &&
+                                    (candidate === "between") === (operator === "between");
+                                report(candidate, keepsValues
+                                    ? values
+                                    : values.filter((typedValue) => typedValue !== "").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", 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
@@ -355,8 +370,7 @@ export function FilterValueEditor({ field, value, onChange, onBack, }) {
                             ? labels.filters.from
                             : labels.filters.to
                         : labels.filters.value, value: values[index] ?? "", onChange: (event) => {
-                        const next = [...values];
-                        next[index] = event.target.value;
+                        const next = Array.from({ length: operator === "between" ? 2 : 1 }, (_, position) => position === index ? event.target.value : (values[position] ?? ""));
                         report(operator, next);
                     } }, index))) })), _jsx("div", { className: menuDivider, role: "separator" }), _jsxs("div", { className: editorFooter, children: [options
                         ? `${labels.filters.selectedCount(picked)} · ${labels.filters.updatesAsYouPick}`

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

@@ -18,18 +18,16 @@ export declare const checkMark: import("../styled-system/types/index.js").Recipe
         };
         row: {
             _focusVisible: {
-                outline: "none";
+                outline: "0";
             };
         };
     };
 }>;
-/** 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;
@@ -42,7 +40,7 @@ export declare function Textarea({ className, ...props }: ComponentProps<"textar
 export declare const radioDot: string;
 export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "children" | "defaultValue" | "name" | "onValueChange" | "value"> & {
     name: string;
-    options: readonly (SelectOption & {
+    options: readonly (RadioOption & {
         meta?: ReactNode;
     })[];
     label: string;
@@ -54,9 +52,8 @@ export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "child
     onValueChange?: (value: string) => void;
 };
 export declare function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout, className, ...props }: RadioGroupProps): import("react").JSX.Element;
-type SelectOption = {
+export type RadioOption = {
     label: string;
     value: string;
     disabled?: boolean;
 };
-export {};

package/dist/components/form-controls.js

@@ -6,12 +6,8 @@ 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: 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.
+ * 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: {
@@ -22,14 +18,14 @@ export const checkMark = cva({
         placeItems: "center",
         padding: "none",
         border: "1px solid transparent",
-        background: "token(gradients.selected)",
+        background: "[token(gradients.selected)]",
         color: "bg.canvas",
         _light: { color: "fg.onAccent", background: "bg.check" },
         cursor: "pointer",
-        transitionProperty: "background, opacity",
+        transitionProperty: "[background, opacity]",
         transitionDuration: "fast",
         _before: {
-            background: "token(gradients.border.selected)",
+            background: "[token(gradients.border.selected)]",
             _light: { background: "border.control" },
         },
         // Pointing anywhere at a row's label marks the box it would tick, while it is empty: a filled
@@ -37,15 +33,15 @@ export const checkMark = cva({
         "&: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)",
+                background: "[linear-gradient(token(colors.bg.controlHover), token(colors.bg.controlHover)), token(colors.bg.check)]",
             },
         },
         "&[data-checked], &[data-indeterminate]": {
-            background: "token(gradients.primary)",
-            _light: { background: "token(gradients.primary)" },
-            _before: { background: "token(gradients.border.primary)" },
+            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" } },
+        "&: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: {
@@ -53,7 +49,7 @@ export const checkMark = cva({
         focus: {
             ring: { _focusVisible: { focusRing: "outer" } },
             /* The row around the mark shows focus, so the mark itself draws nothing. */
-            row: { _focusVisible: { outline: "none" } },
+            row: { _focusVisible: { outline: "0" } },
         },
     },
     defaultVariants: { shape: "box", focus: "ring" },
@@ -64,23 +60,20 @@ const label = css({
     gap: "layout.controlGap",
     color: "fg.primary",
     fontSize: "caption",
-    fontWeight: "normal",
+    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",
+    lineHeight: "tight",
     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" });
 }
@@ -88,7 +81,7 @@ export function Checkbox({ children, className, wrapperClassName, ...props }) {
     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%",
+    width: "full",
     minHeight: "field.textarea",
     resize: "vertical",
     paddingBlock: "field.block",
@@ -131,7 +124,7 @@ const menuRadio = css({
     cursor: "pointer",
     _hover: {
         background: "bg.hover",
-        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+        boxShadow: "[inset 0 0 0 1px token(colors.border.menuHover)]",
     },
     "&:has([data-disabled])": { opacity: "disabled", cursor: "not-allowed" },
 });

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

@@ -6,15 +6,16 @@ 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`,
+ * A group round a `FieldLabel`, its control and any `FieldError`: the label names the control by
+ * its id, 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. A `hint` sits under the
- * control and describes it until the error takes its place.
+ * control and describes it until the error takes its place. `htmlFor` is the control's id when
+ * the control has its own.
  */
-export declare function Field({ className, htmlFor, invalid, hint, children, ...props }: ComponentProps<"label"> & {
+export declare function Field({ className, htmlFor, invalid, hint, children, ...props }: ComponentProps<"div"> & {
+    htmlFor?: string;
     invalid?: boolean;
     hint?: ReactNode;
 }): import("react").JSX.Element;
@@ -32,5 +33,4 @@ 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`: 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

@@ -14,7 +14,6 @@ const labelText = css({
     lineHeight: "tight",
     letterSpacing: "compact",
 });
-// Help and error lines under the control, which can wrap.
 const noteText = css({
     margin: "none",
     fontSize: "code",
@@ -24,11 +23,7 @@ const noteText = css({
 });
 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.
- */
+/* 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)",
@@ -47,7 +42,7 @@ const segmented = css({
         "--track-height": "token(sizes.control.compact)",
     },
     "& > *": {
-        height: "calc(var(--track-height) - 2 * (var(--track-inset) + 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" },
@@ -55,11 +50,10 @@ const segmented = css({
 });
 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)",
+    gridAutoColumns: "[minmax(0, 1fr)]",
     gap: "layout.contentGap",
 });
 const formActions = css({
@@ -77,15 +71,15 @@ 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`,
+ * A group round a `FieldLabel`, its control and any `FieldError`: the label names the control by
+ * its id, 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. A `hint` sits under the
- * control and describes it until the error takes its place.
+ * control and describes it until the error takes its place. `htmlFor` is the control's id when
+ * the control has its own.
  */
 export function Field({ className, htmlFor, invalid = false, hint, children, ...props }) {
     const generatedId = useId();
@@ -96,10 +90,11 @@ export function Field({ className, htmlFor, invalid = false, hint, children, ...
         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 }))] }) }));
+    return (_jsx(FieldControlContext, { value: fieldControl, children: _jsxs("div", { ...props, 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 });
+    const field = useContext(FieldControlContext);
+    return (_jsx("label", { htmlFor: field?.controlId, className: labelText, children: children }));
 }
 /** The field's error; its id is the one the field's control is described by. */
 export function FieldError({ id, children }) {
@@ -111,7 +106,6 @@ export function SegmentedControl({ className, ...props }) {
     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`: the selected one is raised, the others bare. */
 export function SegmentedOption({ selected, count, children, ...props }) {
     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

@@ -1,3 +1,5 @@
+/** How far a menu, popover or select list floats from its trigger, in pixels. */
+export declare const glassMenuOffsetFromTrigger = 4;
 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

@@ -1,26 +1,26 @@
 import { css } from "#primitives/css";
+/** How far a menu, popover or select list floats from its trigger, in pixels. */
+export const glassMenuOffsetFromTrigger = 4;
 /*
  * 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.
+ * styles for `css()` to merge with each popup's own.
  */
 export const glassMenuSurface = css.raw({
     padding: "menu.inset",
-    border: "1px solid token(colors.border.control)",
+    border: "1px solid token(colors.border.popover)",
     borderRadius: "action",
     background: "bg.popover",
-    backdropFilter: "blur(token(blurs.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",
+    outline: "0",
 });
 /*
- * 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.
+ * 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",
@@ -35,28 +35,24 @@ export const glassMenuRow = css.raw({
     lineHeight: "tight",
     letterSpacing: "compact",
     cursor: "pointer",
-    outline: "none",
+    outline: "0",
     "&[data-highlighted], &:is(button):hover": {
-        background: "token(gradients.raised)",
-        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+        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",
+        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)",
+    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

@@ -1,5 +1,4 @@
 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): {

package/dist/components/gradient-edge.js

@@ -1,20 +1,19 @@
 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.
+ * `[data-edge]` ring ciridae.css draws inside the element's box, which also keeps its corners. 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)" } },
+            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)]" } },
         },
     },
 });