@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/segmented-control.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cva } from "class-variance-authority";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "../lib/utils.js";
+const segmentedControlVariants = cva("max-w-full auto-cols-[minmax(max-content,1fr)] grid-flow-col bg-background p-1 ring-1 ring-border", {
+    variants: {
+        fullWidth: {
+            true: "grid w-full",
+            false: "inline-grid",
+        },
+        size: {
+            sm: "rounded-sm",
+            default: "rounded-sm",
+            lg: "rounded-md",
+        },
+    },
+});
+const segmentedItemVariants = cva("relative flex cursor-pointer items-center justify-center gap-1.5 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 text-muted-foreground nc-transition-paint select-none not-data-disabled:hover:text-foreground data-checked:bg-selection data-checked:text-selection-foreground data-checked:nc-elevation-resting data-disabled:cursor-not-allowed data-disabled:text-muted-foreground/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [@media(hover:hover)_and_(pointer:fine)]:after:hidden", {
+    variants: {
+        size: {
+            sm: "h-nadicode-control-height-xs rounded-xs-plus text-button [&_svg:not([class*='size-'])]:size-4",
+            default: "h-7 rounded-xs-plus text-button [&_svg:not([class*='size-'])]:size-4",
+            lg: "h-nadicode-control-height-sm rounded-sm text-button-lg [&_svg:not([class*='size-'])]:size-5",
+        },
+        iconOnly: {
+            true: "px-0",
+            false: "min-w-0 px-3",
+        },
+    },
+    compoundVariants: [
+        { size: ["sm", "default"], iconOnly: true, className: "min-w-8" },
+        { size: "lg", iconOnly: true, className: "min-w-11" },
+        { size: "lg", iconOnly: false, className: "px-4" },
+    ],
+});
+/**
+ * Two or three options that show different views of one surface, the chosen one filled.
+ *
+ * @family Choices
+ * @when "Use Switch as a segmented selector for 2–3 mutually exclusive options that show different
+ * views of the same surface, like `Source` vs `Output`." (https://vercel.com/geist/switch) Ours:
+ * Geist's `Switch` is our `SegmentedControl`.
+ * @instead "For a boolean on/off setting, use `Toggle`." (https://vercel.com/geist/switch) "Switch
+ * implements radio semantics, so two options stay mutually exclusive rather than reading as a
+ * checkbox." (https://vercel.com/geist/switch) "Past 3 options or when labels grow beyond a couple
+ * of words, switch to `Tabs` or a `Select`." (https://vercel.com/geist/switch) Ours: Geist's
+ * `Toggle` is our `Switch`. The theme is `ThemeModeSwitcher`, never a second picker. Four to six
+ * that must be compared are a `RadioGroup`. Pressed buttons that can be several or none are a
+ * `ToggleGroup`. Panels of one object are `Tabs`.
+ * @behaviour "Pass a `name` so the underlying radios are grouped; without it, more than one option
+ * can appear selected at once." (https://vercel.com/geist/switch) "Set `defaultChecked` (or
+ * controlled `checked`) on exactly one `Switch.Control` so the group has a defined initial state."
+ * (https://vercel.com/geist/switch) "Pad each `Switch.Control` so the widest label fits without the
+ * active pill resizing on selection." (https://vercel.com/geist/switch) "Test with the longest copy
+ * in the set." (https://vercel.com/geist/switch) Ours: the group's name (`aria-label` or
+ * `aria-labelledby`), a label on every option and a starting choice (`defaultValue` or `value`) are
+ * required; without them it does not compile. The options are one radio group, so they stay
+ * exclusive without a form `name`. The
+ * options share the width of the widest, so the fill never resizes as the choice moves; where the
+ * row is narrower than that, each option keeps its own word's width rather than cutting it. The track
+ * is white with a hairline and a 4 px inset, so it is 32, 36 or 40 px high around options of 24, 28
+ * or 32 px. Colour: neutral throughout, the chosen option filled grey with ink words and the others
+ * grey words that turn ink on hover; nothing takes a hue. Icons are 16 px, 20 px at `lg`. A
+ * disabled option keeps the chosen fill, lightens only its words and has no hover change. The
+ * options are radios in one group: arrows move and choose, and pressing the chosen one changes
+ * nothing. It applies at once; it is not a field that waits for a Save. `fullWidth` when it heads a
+ * form or a dialog, as the two-factor form's method switch does.
+ * @words "Title Case each `Switch.Control` label." (https://vercel.com/geist/switch) "Keep labels
+ * to one or two words and parallel: `Source` / `Output`, not `Source` / `Show output`."
+ * (https://vercel.com/geist/switch) Ours: sentence case: *Source*, *Output*.
+ * @access "Always provide a `label` on every `Switch.Control`, even when an `icon` carries the
+ * meaning, so screen readers announce the option." (https://vercel.com/geist/switch) "The component
+ * renders it as `geist-sr-only` for icon-only controls." (https://vercel.com/geist/switch) "Pair an
+ * icon-only Switch with a `Tooltip` on each control so sighted users get the same label assistive
+ * tech receives." (https://vercel.com/geist/switch) Ours: `role="radiogroup"` named by `aria-label`
+ * or `aria-labelledby`; each option a radio named by its label, shown as a tooltip on an icon-only
+ * option.
+ */
+function SegmentedControl({ options, size = "default", fullWidth = false, className, ...props }) {
+    const items = options;
+    return (_jsx(RadioGroupPrimitive, { "data-slot": "segmented-control", className: cn(segmentedControlVariants({ fullWidth, size }), className), ...props, children: items.map((option) => {
+            const iconOnly = option.iconOnly === true;
+            const item = (_jsxs(RadioPrimitive.Root, { className: cn(segmentedItemVariants({ size, iconOnly })), "data-slot": "segmented-control-item", disabled: option.disabled, value: option.value, children: [option.icon ? _jsx("span", { "aria-hidden": "true", children: option.icon }) : null, _jsx("span", { className: cn("min-w-0 truncate", iconOnly && "sr-only"), children: option.label })] }, option.value));
+            return iconOnly ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: item }), _jsx(TooltipContent, { children: option.label })] }, option.value)) : (item);
+        }) }));
+}
+export { SegmentedControl };

package/dist/components/select.d.ts

@@ -1,32 +1,72 @@
 import * as React from "react";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
 /**
  * A short fixed list in our style, opened from a trigger that shows the choice.
  *
  * @family Choices
- * @when Four to about ten fixed options in our style, each short enough to need no sentence: how
- * often a task runs.
- * @instead Two or three options are radios or a segmented control. A list to type into is a
- * `Combobox`. Inside a native form a long list is `NativeSelect`.
- * @behaviour The trigger shows the chosen value; the list floats under it with 12 px corners and a
- * check at the chosen row's end. Arrows, typing, Enter, Escape. A placeholder reads in the muted
- * grey and is never an option.
- * @words Options are parallel phrases in sentence case: *Every hour*, *Every weekday*. The trigger
- * never says *Select…*.
- * @access A visible label tied to the trigger; listbox and option roles from Base UI; focus returns
- * to the trigger on close.
+ * @when "Display a dropdown list of items." (https://vercel.com/geist/select) "Pick `<Select>` for
+ * short, fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once
+ * filtering helps." (https://vercel.com/geist/select) Ours: four or more
+ * options, each short enough to need no sentence: how often a task runs.
+ * @instead "Use `MultiSelect` when more than one value can be chosen at once; use `Switch` for a
+ * 2–3 option segmented choice." (https://vercel.com/geist/select) Ours: two or three options are
+ * radios or a segmented control. Inside a native form a long list is `NativeSelect`.
+ * @behaviour The trigger is `Input`'s box: its sizes, its ring, hover, focus halo and disabled, the
+ * label above it and the message under it. Colour sits in one place: an error turns the ring red
+ * and fills the halo, and colours the message; the fill, the value, the chevron and the label stay
+ * neutral. It shows the chosen value, after an optional `prefix` mark, with the chevron at the end
+ * in the muted grey (a `suffix` mark takes the chevron's place), and fills its container; it keeps
+ * the hover edge while its list is open. The list opens under it, 8 px away, never covering the
+ * trigger (`alignItemWithTrigger` is off), in a 6 px inset, with a 14 px check at the chosen row's
+ * end, rows 36 px tall and no gap between them; a row that cannot be chosen turns its text muted,
+ * never dimmed. Arrows, typing, Enter, Escape. A placeholder reads in the muted grey and is never
+ * an option. `label` and `error` go on `SelectTrigger`, and a string `label` requires `id`; a
+ * trigger with no name does not compile. "Group options past ~10 items with native `<optgroup>`;
+ * Geist `<Select>` has no `.Group` static." (https://vercel.com/geist/select) Ours: group the
+ * options with `SelectGroup`. "Validate on blur and pass a string to `error`; messages name the
+ * field and end in a period (`Select a framework.`)." (https://vercel.com/geist/select) "Don’t wrap
+ * a labelled `<Select>` in a `Tooltip`; put the hint on a sibling icon button so the label stays
+ * announced." (https://vercel.com/geist/select) Other form rules are `Field`'s.
+ * @words "Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`);
+ * keep the same register across the list." (https://vercel.com/geist/select) "Label is a short
+ * Title Case noun (`Framework`, `Region`); accept the prop directly on `<Select>`."
+ * (https://vercel.com/geist/select) "Placeholder is action-oriented (`Select a framework`), never
+ * `Choose one…`, `Pick`, or the label restated." (https://vercel.com/geist/select) Ours: options
+ * are parallel phrases in sentence case (*Every hour*, *Every weekday*), the label is a short noun
+ * in sentence case, and the trigger never says *Select…* or *Choose one*.
+ * @access A visible label tied to the trigger by `id`, or `aria-label` or `aria-labelledby`.
+ * Listbox and option roles from Base UI; focus returns to the trigger on close. The prefix and
+ * suffix are decorative and not part of the trigger's name.
  */
 declare const Select: typeof SelectPrimitive.Root;
 declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
 declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
-    size?: "sm" | "default";
-}): React.JSX.Element;
+/**
+ * The box of a field-shaped trigger that opens a floating list, so a trigger that is not a
+ * `SelectTrigger`, such as `MultiSelectTrigger`, wears the same box.
+ */
+declare const selectTriggerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, "prefix"> & {
+    size?: FieldSize;
+    /** A mark before the value, such as an icon. */
+    prefix?: React.ReactNode;
+    /** A mark at the end, in place of the chevron. */
+    suffix?: React.ReactNode;
+    /** One muted sentence under the box that says what to enter, read with the box. */
+    description?: string;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName;
+declare function SelectTrigger({ className, size, prefix, suffix, label, description, error, children, ...props }: SelectTriggerProps): React.JSX.Element;
 declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
 declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
 declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
 declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
 declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, selectTriggerVariants, SelectValue, };
 //# sourceMappingURL=select.d.ts.map

package/dist/components/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMlE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM,6BAAuB,CAAC;AAEpC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,qBAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC5B,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE,qBA6BF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,qBAQ7E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAsBhF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,qBAQhF;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,qBAa5D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,qBAa9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKlE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,QAAA,MAAM,MAAM,6BAAuB,CAAC;AAEpC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED;;;GAGG;AACH,QAAA,MAAM,qBAAqB;;8EAgB1B,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,MAAM,EACN,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAyCpB;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA4B,EAC5B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC5B,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE,qBA6BF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,qBAQ7E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAsBhF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,qBAQhF;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,qBAa5D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,qBAa9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,WAAW,GACZ,CAAC"}

package/dist/components/select.js

@@ -1,43 +1,86 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
 import { anchoredOverlayMotion } from "../lib/motion.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldDisabled, fieldOpen, fieldRing, fieldStates, } from "../internal/input-box.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 /**
  * A short fixed list in our style, opened from a trigger that shows the choice.
  *
  * @family Choices
- * @when Four to about ten fixed options in our style, each short enough to need no sentence: how
- * often a task runs.
- * @instead Two or three options are radios or a segmented control. A list to type into is a
- * `Combobox`. Inside a native form a long list is `NativeSelect`.
- * @behaviour The trigger shows the chosen value; the list floats under it with 12 px corners and a
- * check at the chosen row's end. Arrows, typing, Enter, Escape. A placeholder reads in the muted
- * grey and is never an option.
- * @words Options are parallel phrases in sentence case: *Every hour*, *Every weekday*. The trigger
- * never says *Select…*.
- * @access A visible label tied to the trigger; listbox and option roles from Base UI; focus returns
- * to the trigger on close.
+ * @when "Display a dropdown list of items." (https://vercel.com/geist/select) "Pick `<Select>` for
+ * short, fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once
+ * filtering helps." (https://vercel.com/geist/select) Ours: four or more
+ * options, each short enough to need no sentence: how often a task runs.
+ * @instead "Use `MultiSelect` when more than one value can be chosen at once; use `Switch` for a
+ * 2–3 option segmented choice." (https://vercel.com/geist/select) Ours: two or three options are
+ * radios or a segmented control. Inside a native form a long list is `NativeSelect`.
+ * @behaviour The trigger is `Input`'s box: its sizes, its ring, hover, focus halo and disabled, the
+ * label above it and the message under it. Colour sits in one place: an error turns the ring red
+ * and fills the halo, and colours the message; the fill, the value, the chevron and the label stay
+ * neutral. It shows the chosen value, after an optional `prefix` mark, with the chevron at the end
+ * in the muted grey (a `suffix` mark takes the chevron's place), and fills its container; it keeps
+ * the hover edge while its list is open. The list opens under it, 8 px away, never covering the
+ * trigger (`alignItemWithTrigger` is off), in a 6 px inset, with a 14 px check at the chosen row's
+ * end, rows 36 px tall and no gap between them; a row that cannot be chosen turns its text muted,
+ * never dimmed. Arrows, typing, Enter, Escape. A placeholder reads in the muted grey and is never
+ * an option. `label` and `error` go on `SelectTrigger`, and a string `label` requires `id`; a
+ * trigger with no name does not compile. "Group options past ~10 items with native `<optgroup>`;
+ * Geist `<Select>` has no `.Group` static." (https://vercel.com/geist/select) Ours: group the
+ * options with `SelectGroup`. "Validate on blur and pass a string to `error`; messages name the
+ * field and end in a period (`Select a framework.`)." (https://vercel.com/geist/select) "Don’t wrap
+ * a labelled `<Select>` in a `Tooltip`; put the hint on a sibling icon button so the label stays
+ * announced." (https://vercel.com/geist/select) Other form rules are `Field`'s.
+ * @words "Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`);
+ * keep the same register across the list." (https://vercel.com/geist/select) "Label is a short
+ * Title Case noun (`Framework`, `Region`); accept the prop directly on `<Select>`."
+ * (https://vercel.com/geist/select) "Placeholder is action-oriented (`Select a framework`), never
+ * `Choose one…`, `Pick`, or the label restated." (https://vercel.com/geist/select) Ours: options
+ * are parallel phrases in sentence case (*Every hour*, *Every weekday*), the label is a short noun
+ * in sentence case, and the trigger never says *Select…* or *Choose one*.
+ * @access A visible label tied to the trigger by `id`, or `aria-label` or `aria-labelledby`.
+ * Listbox and option roles from Base UI; focus returns to the trigger on close. The prefix and
+ * suffix are decorative and not part of the trigger's name.
  */
 const Select = SelectPrimitive.Root;
 function SelectGroup({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn("scroll-my-1 p-nadicode-xxs", className), ...props }));
+    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn("scroll-my-1", className), ...props }));
 }
 function SelectValue({ className, ...props }) {
     return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn("flex flex-1 text-left", className), ...props }));
 }
-function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex h-control-height min-h-touch-target w-fit items-center justify-between gap-1.5 rounded-sm border border-input bg-background py-2 pr-2 pl-control-padding-inline text-sm whitespace-nowrap transition-colors select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-placeholder:text-placeholder data-[size=sm]:h-nadicode-control-height-sm [@media(hover:hover)_and_(pointer:fine)]:min-h-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+/**
+ * The box of a field-shaped trigger that opens a floating list, so a trigger that is not a
+ * `SelectTrigger`, such as `MultiSelectTrigger`, wears the same box.
+ */
+const selectTriggerVariants = cva([
+    "flex min-h-touch-target w-full items-center justify-between gap-1.5 bg-(--nc-field,var(--background)) py-0 pr-3 pl-control-padding-inline text-sm whitespace-nowrap select-none data-placeholder:text-placeholder [@media(hover:hover)_and_(pointer:fine)]:min-h-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    fieldRing,
+    fieldDisabled,
+], {
+    variants: {
+        size: {
+            sm: "h-nadicode-control-height-sm rounded-sm",
+            default: "h-control-height rounded-sm",
+            lg: "h-nadicode-control-height-lg rounded-md text-base",
+        },
+    },
+    defaultVariants: { size: "default" },
+});
+function SelectTrigger({ className, size = "default", prefix, suffix, label, description, error, children, ...props }) {
+    return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, "data-field-frame": "", className: cn(selectTriggerVariants({ size }), fieldStates, fieldOpen, className), ...props, ...aria, children: [prefix ? (_jsx("span", { "data-slot": "select-prefix", "aria-hidden": "true", className: "mr-1.5 flex shrink-0 items-center text-muted-foreground", children: prefix })) : null, children, suffix ? (_jsx("span", { "data-slot": "select-suffix", "aria-hidden": "true", className: "flex shrink-0 items-center text-muted-foreground", children: suffix })) : (_jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) }))] })) }));
 }
-function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("pointer-events-auto", "relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+function SelectContent({ className, children, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("pointer-events-auto", "relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { className: "p-1.5", children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));
+    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm whitespace-nowrap outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-1.5 rounded-sm py-2 pr-8 pl-2 text-sm whitespace-nowrap outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-3.5 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none size-3.5" }) })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
@@ -48,4 +91,4 @@ function SelectScrollUpButton({ className, ...props }) {
 function SelectScrollDownButton({ className, ...props }) {
     return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center nc-glass py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
 }
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, selectTriggerVariants, SelectValue, };

package/dist/components/separator.d.ts

@@ -3,13 +3,20 @@ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
  * A 1 px line between groups.
  *
  * @family Other
- * @when Separating groups inside one surface: menu sections, a card's header from its toolbar.
- * @instead A card's footer draws its own seam; a list in a card is a `divided` `ItemGroup`. Never a
+ * @when Ours: separating groups inside one surface: menu sections, a card's header from its toolbar,
+ * inline items in a row. Horizontal between stacked groups, vertical between items in a row.
+ * @instead Ours: a card's footer draws its own seam; a list in a card is a `divided` `ItemGroup`. Never a
  * border around a region.
- * @behaviour Horizontal or vertical, in the line colour.
+ * @behaviour “Use `inset` when a divider meets a 1px frame painted over the content. The separator reserves 1px at each end and uses solid `gray-400`. A physical parent border already reserves its edge space and does not need this inset.” (https://vercel.com/geist/separator)
+ * Ours: horizontal or vertical, exactly 1 px, in the `border` colour (not `gray-400`) and never any
+ * other: a separator has no hue, no state and no padding. A vertical one takes its height from the
+ * flex row that holds it, so give the row a height and `items-center`.
  * @words None.
- * @access A `separator` from Base UI with no name of its own.
+ * @access Ours: hidden from assistive technology, since it only paints a line; pass `aria-hidden={false}`
+ * when the line divides content a reader should hear as divided.
  */
-declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
+declare function Separator({ className, inset, orientation, ...props }: SeparatorPrimitive.Props & {
+    inset?: boolean;
+}): import("react").JSX.Element;
 export { Separator };
 //# sourceMappingURL=separator.d.ts.map

package/dist/components/separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E;;;;;;;;;;GAUG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,KAAK,+BAY/F;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,KAAa,EACb,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,+BAchD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/separator.js

@@ -5,14 +5,19 @@ import { cn } from "../lib/utils.js";
  * A 1 px line between groups.
  *
  * @family Other
- * @when Separating groups inside one surface: menu sections, a card's header from its toolbar.
- * @instead A card's footer draws its own seam; a list in a card is a `divided` `ItemGroup`. Never a
+ * @when Ours: separating groups inside one surface: menu sections, a card's header from its toolbar,
+ * inline items in a row. Horizontal between stacked groups, vertical between items in a row.
+ * @instead Ours: a card's footer draws its own seam; a list in a card is a `divided` `ItemGroup`. Never a
  * border around a region.
- * @behaviour Horizontal or vertical, in the line colour.
+ * @behaviour “Use `inset` when a divider meets a 1px frame painted over the content. The separator reserves 1px at each end and uses solid `gray-400`. A physical parent border already reserves its edge space and does not need this inset.” (https://vercel.com/geist/separator)
+ * Ours: horizontal or vertical, exactly 1 px, in the `border` colour (not `gray-400`) and never any
+ * other: a separator has no hue, no state and no padding. A vertical one takes its height from the
+ * flex row that holds it, so give the row a height and `items-center`.
  * @words None.
- * @access A `separator` from Base UI with no name of its own.
+ * @access Ours: hidden from assistive technology, since it only paints a line; pass `aria-hidden={false}`
+ * when the line divides content a reader should hear as divided.
  */
-function Separator({ className, orientation = "horizontal", ...props }) {
-    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
+function Separator({ className, inset = false, orientation = "horizontal", ...props }) {
+    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, "aria-hidden": true, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", inset && "data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px", className), ...props }));
 }
 export { Separator };

package/dist/components/settings-facts.d.ts

@@ -10,10 +10,8 @@ export type SettingsFact = {
     label: string;
     value: ReactNode;
 };
-export type SettingsFactsSectionProps = Omit<ComponentPropsWithoutRef<"section">, "children" | "className"> & {
+type SettingsFactsBase = Omit<ComponentPropsWithoutRef<"section">, "children" | "className"> & {
     action?: ReactNode;
-    presentation?: "card" | "summary";
-    description?: string;
     facts: readonly SettingsFact[];
     footer?: ReactNode;
     missingValueLabel: string;
@@ -23,29 +21,51 @@ export type SettingsFactsSectionProps = Omit<ComponentPropsWithoutRef<"section">
      */
     headingId: string;
     title: string;
+};
+export type SettingsFactsSectionProps = SettingsFactsBase & ({
+    presentation?: "card";
+    /** One line saying what these facts are. */
+    description: string;
+    /** The footer's left line, one muted sentence: a Learn more link, what the facts are for. */
+    footerHint: NonNullable<ReactNode>;
     surface?: CardSurface;
     /**
      * The card's density. The default matches the settings sections it sits
      * among; `sm` is for a compact card in a side column.
      */
     size?: ComponentPropsWithoutRef<typeof Card>["size"];
-};
+} | {
+    presentation: "summary";
+    description?: string;
+    footerHint?: never;
+    surface?: never;
+    size?: never;
+});
 /**
- * Read-only facts about one object, framed as a card with a title and one action.
+ * Read-only facts about one object, framed as a card with a title, a line, one action and a footer.
  *
  * @family Data
  * @when Read-only facts about one object: who it is, where it belongs, its identifiers.
  * `SettingsFactsSection` frames them as a card with a title and one action; `ObjectFacts` is the
  * list alone.
- * @instead Facts a person changes are a `SettingsSection` with its own Save. Facts compared across
- * records are a table. A relation is its identity or a `Tag`, never its own card.
- * @behaviour Label above value, two equal columns, one column on a phone. Every label stays when
- * its value is missing, as *—*. A long value spans both columns. No fact gets a box of its own. In
- * a side column, `presentation="summary"` drops the card.
- * @words Labels are nouns, sentence case, no colon: *VAT number*. Values are exact: identifiers in
- * mono with a copy button, dates in the person's locale.
- * @access A `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
+ * @instead Facts a person changes are a `SettingsSection` with its own Save. One server-given value,
+ * an ID, is a `SettingsSection` with the value in a read-only mono `InputGroup` and its copy button, no Save. Facts
+ * compared across records are a table. A relation is its identity or a `Tag`, never its own card.
+ * @behaviour "Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`)." (https://vercel.com/geist/description)
+ * Ours: required: the description and the footer's left line (`footerHint`), as on a
+ * `SettingsSection`; `footer` holds actions, never a Save. Label above value, two equal
+ * columns, one column on a phone. Every label stays when its value is missing, as *—*. A long value
+ * spans both columns. No fact gets a box of its own. In a side column, `presentation="summary"`
+ * drops the card, the description and the footer line.
+ * @words "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description)
+ * Ours: labels are nouns in sentence case, no colon: *VAT number*. Identifiers in
+ * mono with a copy button, dates in the person's locale. The footer line says what the facts are
+ * for or links to the docs.
+ * @access "Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description)
+ * "Don’t put interactive controls in the title slot." (https://vercel.com/geist/description)
+ * Ours: a `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
  * when an editor closes. A dash carries screen-reader text.
  */
-export declare function SettingsFactsSection({ action, presentation, description, facts, footer, missingValueLabel, headingId, title, surface, size, ...props }: SettingsFactsSectionProps): import("react").JSX.Element;
+export declare function SettingsFactsSection({ action, presentation, description, facts, footer, footerHint, missingValueLabel, headingId, title, surface, size, ...props }: SettingsFactsSectionProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=settings-facts.d.ts.map

package/dist/components/settings-facts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAK7E,OAAO,EACL,IAAI,EAOJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,wBAAwB,CAAC,SAAS,CAAC,EACnC,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,YAAqB,EACrB,WAAW,EACX,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA+D3B"}
+{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAM7E,OAAO,EACL,IAAI,EAMJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GACvD,CACI;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,GACD;IACE,YAAY,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CACJ,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,YAAqB,EACrB,WAAW,EACX,KAAK,EACL,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAiE3B"}

package/dist/components/settings-facts.js

@@ -1,26 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { FooterStrip } from "../internal/footer-strip.js";
 import { ObjectFacts } from "./object-workspace.js";
 import { TableValue } from "./table-value.js";
-import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
 /**
- * Read-only facts about one object, framed as a card with a title and one action.
+ * Read-only facts about one object, framed as a card with a title, a line, one action and a footer.
  *
  * @family Data
  * @when Read-only facts about one object: who it is, where it belongs, its identifiers.
  * `SettingsFactsSection` frames them as a card with a title and one action; `ObjectFacts` is the
  * list alone.
- * @instead Facts a person changes are a `SettingsSection` with its own Save. Facts compared across
- * records are a table. A relation is its identity or a `Tag`, never its own card.
- * @behaviour Label above value, two equal columns, one column on a phone. Every label stays when
- * its value is missing, as *—*. A long value spans both columns. No fact gets a box of its own. In
- * a side column, `presentation="summary"` drops the card.
- * @words Labels are nouns, sentence case, no colon: *VAT number*. Values are exact: identifiers in
- * mono with a copy button, dates in the person's locale.
- * @access A `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
+ * @instead Facts a person changes are a `SettingsSection` with its own Save. One server-given value,
+ * an ID, is a `SettingsSection` with the value in a read-only mono `InputGroup` and its copy button, no Save. Facts
+ * compared across records are a table. A relation is its identity or a `Tag`, never its own card.
+ * @behaviour "Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`)." (https://vercel.com/geist/description)
+ * Ours: required: the description and the footer's left line (`footerHint`), as on a
+ * `SettingsSection`; `footer` holds actions, never a Save. Label above value, two equal
+ * columns, one column on a phone. Every label stays when its value is missing, as *—*. A long value
+ * spans both columns. No fact gets a box of its own. In a side column, `presentation="summary"`
+ * drops the card, the description and the footer line.
+ * @words "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description)
+ * Ours: labels are nouns in sentence case, no colon: *VAT number*. Identifiers in
+ * mono with a copy button, dates in the person's locale. The footer line says what the facts are
+ * for or links to the docs.
+ * @access "Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description)
+ * "Don’t put interactive controls in the title slot." (https://vercel.com/geist/description)
+ * Ours: a `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
  * when an editor closes. A dash carries screen-reader text.
  */
-export function SettingsFactsSection({ action, presentation = "card", description, facts, footer, missingValueLabel, headingId, title, surface = "resting", size = "default", ...props }) {
+export function SettingsFactsSection({ action, presentation = "card", description, facts, footer, footerHint, missingValueLabel, headingId, title, surface = "resting", size = "default", ...props }) {
     const termId = useId();
     if (presentation === "summary") {
         return (_jsxs("section", { ...props, "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h2", { id: headingId, tabIndex: -1, className: "text-sm font-medium", children: title }), action] }), description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null, _jsx("dl", { className: "flex flex-wrap items-start gap-x-6 gap-y-3", children: facts.map((fact, index) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", id: `${termId}-${index}`, children: fact.label }), _jsx("dd", { "aria-labelledby": `${termId}-${index}`, className: "text-sm", children: fact.value ?? _jsx(TableValue, { missingLabel: missingValueLabel, value: null }) })] }, fact.label))) }), footer] }));
@@ -29,5 +38,5 @@ export function SettingsFactsSection({ action, presentation = "card", descriptio
                         label: fact.label,
                         block: fact.block,
                         value: fact.value == null || fact.value === "" ? (_jsx(TableValue, { missingLabel: missingValueLabel, value: null })) : (fact.value),
-                    })) }) }), footer ? _jsx(CardFooter, { className: "flex-wrap gap-3", children: footer }) : null] }));
+                    })) }) }), _jsx(FooterStrip, { hint: footerHint, hintSlot: "settings-facts-hint", children: footer })] }));
 }

package/dist/components/settings-page.d.ts

@@ -7,13 +7,13 @@ export type SettingsPageProps = {
     children: ReactNode;
 };
 /**
- * A page of settings: a centred column of section cards, each saving its own values.
+ * A page of settings: section cards across the page's width under its title, each saving its own values.
  *
  * @family Compositions
  * @when A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.
- * @instead One object's page with a settings card among its sections is an ObjectPage.
- * @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: a choice applies at once, and each SettingsSection of typed values saves from its footer.
- * @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest.
+ * @instead One object's page with a settings card among its sections is an ObjectPage; "Place it once per app, in the footer or settings, not duplicated across pages." (https://vercel.com/geist/theme-switcher) Ours: Theme and Language, which apply on change, stay in the account menu.
+ * @behaviour One setting per card (the card's shapes are SettingsSection's: one field, a row of short parts of one value, rows of switches or of selects, a header switch), the cards stacked 24 apart across the page's content width under the page's title row, as Vercel's settings cards fill their column, with no heading between them; a field inside keeps its own bound. A page that mixes cards with other content, such as a table or a list of rules, is not a SettingsPage: its sections take a plain h2 above each card. The page draws no header and no save of its own: each SettingsSection saves from its footer. The danger zone closes the page, in rising severity: transfer, then pause, then delete; only delete is `tone="error"`, and only delete and pause take a button in a hue.
+ * @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest. A card's title is never the page's h1.
  * @access `title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.
  */
 export declare function SettingsPage({ title, headingProps, children }: SettingsPageProps): ReactElement;

package/dist/components/settings-page.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { ReadingColumn } from "./reading-column.js";
 /**
- * A page of settings: a centred column of section cards, each saving its own values.
+ * A page of settings: section cards across the page's width under its title, each saving its own values.
  *
  * @family Compositions
  * @when A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.
- * @instead One object's page with a settings card among its sections is an ObjectPage.
- * @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: a choice applies at once, and each SettingsSection of typed values saves from its footer.
- * @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest.
+ * @instead One object's page with a settings card among its sections is an ObjectPage; "Place it once per app, in the footer or settings, not duplicated across pages." (https://vercel.com/geist/theme-switcher) Ours: Theme and Language, which apply on change, stay in the account menu.
+ * @behaviour One setting per card (the card's shapes are SettingsSection's: one field, a row of short parts of one value, rows of switches or of selects, a header switch), the cards stacked 24 apart across the page's content width under the page's title row, as Vercel's settings cards fill their column, with no heading between them; a field inside keeps its own bound. A page that mixes cards with other content, such as a table or a list of rules, is not a SettingsPage: its sections take a plain h2 above each card. The page draws no header and no save of its own: each SettingsSection saves from its footer. The danger zone closes the page, in rising severity: transfer, then pause, then delete; only delete is `tone="error"`, and only delete and pause take a button in a hue.
+ * @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest. A card's title is never the page's h1.
  * @access `title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.
  */
 export function SettingsPage({ title, headingProps, children }) {
-    return (_jsxs(ReadingColumn, { className: "gap-5", width: "configuration", children: [title ? (_jsx("h1", { ...headingProps, className: cn("sr-only", headingProps?.className), children: title })) : null, children] }));
+    return (_jsxs(ReadingColumn, { width: "full", children: [title ? (_jsx("h1", { ...headingProps, className: cn("sr-only", headingProps?.className), children: title })) : null, children] }));
 }