@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/drawer/drawer.css

@@ -1,61 +1,61 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._backdrop_17y86_3 {
-    --overlay-dim: 0.4;
+  ._backdrop_5n47l_3 {
+    --_overlay-dim: 0.4;
     --overlay-opacity: 1;
     position: fixed;
     inset: 0;
-    background-color: rgb(0, 0, 0, var(--overlay-dim));
-    backdrop-filter: blur(1px);
+    background-color: var(--overlay-bg, rgb(0, 0, 0, var(--overlay-dim, var(--_overlay-dim))));
+    backdrop-filter: var(--overlay-backdrop-filter, blur(1px));
     opacity: var(--overlay-opacity);
   }
   @media not (prefers-reduced-motion) {
-    ._backdrop_17y86_3 {
+    ._backdrop_5n47l_3 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  html[data-theme="dark"] ._backdrop_17y86_3 {
-    --overlay-dim: 0.6;
+  html[data-theme="dark"] ._backdrop_5n47l_3 {
+    --_overlay-dim: 0.6;
   }
   @media (prefers-color-scheme: dark) {
-    html:not([data-theme="light"]) ._backdrop_17y86_3 {
-      --overlay-dim: 0.6;
+    html:not([data-theme="light"]) ._backdrop_5n47l_3 {
+      --_overlay-dim: 0.6;
     }
   }
-  ._backdrop_17y86_3[data-starting-style], ._backdrop_17y86_3[data-ending-style] {
+  ._backdrop_5n47l_3[data-starting-style], ._backdrop_5n47l_3[data-ending-style] {
     opacity: 0;
   }
-  ._backdrop_17y86_3 {
-    --overlay-dim: 0.22;
+  ._backdrop_5n47l_3 {
+    --_overlay-dim: 0.22;
     --overlay-opacity: calc(
     	1 - var(--drawer-swipe-progress)
     );
   }
   @media not (prefers-reduced-motion) {
-    ._backdrop_17y86_3 {
+    ._backdrop_5n47l_3 {
       transition-timing-function: var(--sys-motion-emphasized);
     }
   }
   @supports (-webkit-touch-callout: none) {
-    ._backdrop_17y86_3 {
+    ._backdrop_5n47l_3 {
       position: absolute;
     }
   }
-  html[data-theme="dark"] ._backdrop_17y86_3 {
-    --overlay-dim: 0.4;
+  html[data-theme="dark"] ._backdrop_5n47l_3 {
+    --_overlay-dim: 0.4;
   }
   @media (prefers-color-scheme: dark) {
-    html:not([data-theme="light"]) ._backdrop_17y86_3 {
-      --overlay-dim: 0.4;
+    html:not([data-theme="light"]) ._backdrop_5n47l_3 {
+      --_overlay-dim: 0.4;
     }
   }
-  ._backdrop_17y86_3[data-swiping] {
+  ._backdrop_5n47l_3[data-swiping] {
     transition-duration: 0ms;
   }
-  ._backdrop_17y86_3[data-ending-style] {
+  ._backdrop_5n47l_3[data-ending-style] {
     transition-duration: calc(var(--drawer-swipe-strength) * 0.2s);
   }
-  ._viewport_17y86_58 {
+  ._viewport_5n47l_58 {
     --drawer-viewport-padding: 0px;
     position: fixed;
     inset: 0;
@@ -64,89 +64,88 @@
     padding: var(--drawer-viewport-padding);
   }
   @supports (-webkit-touch-callout: none) {
-    ._viewport_17y86_58 {
+    ._viewport_5n47l_58 {
       --drawer-viewport-padding: var(--sys-unit-8);
     }
   }
-  ._popup_17y86_71 {
+  ._popup_5n47l_71 {
     --drawer-bleed: 3rem;
-    --drawer-inset: var(--sys-unit-16);
     position: relative;
     box-sizing: border-box;
-    inline-size: calc(33dvw + var(--drawer-bleed));
-    min-inline-size: 24rem;
+    inline-size: calc(var(--drawer-inline-size, 33dvw) + var(--drawer-bleed));
+    min-inline-size: var(--drawer-min-inline-size, 24rem);
     block-size: 100%;
     background: var(--drawer-surface, var(--sys-color-surface));
-    padding: var(--drawer-inset);
-    padding-right: calc(var(--drawer-inset) + var(--drawer-bleed));
+    padding: var(--drawer-inset, var(--sys-unit-16));
+    padding-right: calc(var(--drawer-inset, var(--sys-unit-16)) + var(--drawer-bleed));
     margin-right: calc(-1 * var(--drawer-bleed));
-    color: var(--sys-color-text);
+    color: var(--drawer-fg, var(--sys-color-text));
     overflow-y: auto;
     overscroll-behavior: contain;
     touch-action: auto;
     transform: translateX(var(--drawer-swipe-movement-x));
   }
   @media not (prefers-reduced-motion) {
-    ._popup_17y86_71 {
+    ._popup_5n47l_71 {
       transition: transform var(--sys-motion-short) var(--sys-motion-emphasized);
       will-change: transform;
     }
   }
-  ._popup_17y86_71::before {
+  ._popup_5n47l_71::before {
     content: "";
     position: absolute;
     inset-inline-start: var(--sys-unit-3);
     inset-block-start: 50%;
-    inline-size: var(--sys-unit-2);
-    block-size: var(--sys-unit-16);
-    border-radius: var(--sys-radius-full);
-    background: var(--sys-color-outline);
+    inline-size: var(--drawer-handle-thickness, var(--sys-unit-2));
+    block-size: var(--drawer-handle-length, var(--sys-unit-16));
+    border-radius: var(--drawer-handle-radius, var(--sys-radius-full));
+    background: var(--drawer-handle-bg, var(--sys-color-outline));
     translate: 0 -50%;
   }
-  ._popup_17y86_71[data-swiping] {
+  ._popup_5n47l_71[data-swiping] {
     user-select: none;
   }
-  ._popup_17y86_71[data-starting-style], ._popup_17y86_71[data-ending-style] {
+  ._popup_5n47l_71[data-starting-style], ._popup_5n47l_71[data-ending-style] {
     transform: translateX(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding) + 2px));
   }
-  ._popup_17y86_71[data-ending-style] {
+  ._popup_5n47l_71[data-ending-style] {
     transition-duration: calc(var(--drawer-swipe-strength) * 0.2s);
   }
   @supports (-webkit-touch-callout: none) {
-    ._popup_17y86_71 {
+    ._popup_5n47l_71 {
       --drawer-bleed: 0px;
       margin-right: 0;
-      border-radius: var(--sys-radius-lg);
+      border-radius: var(--drawer-radius, var(--sys-radius-lg));
     }
   }
-  ._popup_17y86_71[data-swipe-direction=down] {
+  ._popup_5n47l_71[data-swipe-direction=down] {
     align-self: flex-end;
     inline-size: 100%;
     min-inline-size: 0;
     block-size: var(--drawer-sheet-block-size, auto);
     max-block-size: var(--drawer-sheet-max, 85dvh);
-    border-radius: var(--sys-radius-xl) var(--sys-radius-xl) 0 0;
+    border-radius: var(--drawer-sheet-radius, var(--sys-radius-xl)) var(--drawer-sheet-radius, var(--sys-radius-xl)) 0 0;
     margin-right: 0;
     margin-bottom: calc(-1 * var(--drawer-bleed));
-    padding-top: var(--sys-unit-6);
-    padding-right: var(--drawer-inset);
-    padding-bottom: calc(var(--drawer-inset) + var(--drawer-bleed) + 1.75rem);
+    padding-top: var(--drawer-handle-space, var(--sys-unit-6));
+    padding-right: var(--drawer-inset, var(--sys-unit-16));
+    padding-bottom: calc(var(--drawer-inset, var(--sys-unit-16)) + var(--drawer-bleed) + 1.75rem);
     transform: translateY(var(--drawer-swipe-movement-y));
   }
-  ._popup_17y86_71[data-swipe-direction=down]::before {
+  ._popup_5n47l_71[data-swipe-direction=down]::before {
     position: static;
     display: block;
     flex-shrink: 0;
-    inline-size: var(--sys-unit-16);
-    block-size: var(--sys-unit-2);
+    inline-size: var(--drawer-handle-length, var(--sys-unit-16));
+    block-size: var(--drawer-handle-thickness, var(--sys-unit-2));
     margin-inline: auto;
-    margin-block-end: var(--sys-unit-6);
+    margin-block-end: var(--drawer-handle-space, var(--sys-unit-6));
     translate: none;
   }
-  ._popup_17y86_71[data-swipe-direction=down][data-starting-style], ._popup_17y86_71[data-swipe-direction=down][data-ending-style] {
+  ._popup_5n47l_71[data-swipe-direction=down][data-starting-style], ._popup_5n47l_71[data-swipe-direction=down][data-ending-style] {
     transform: translateY(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding) + 2px));
   }
-  ._filled_17y86_149 {
+  ._filled_5n47l_148 {
     --drawer-sheet-block-size: var(
     	--drawer-sheet-max,
     	85dvh
@@ -155,14 +154,14 @@
     flex-direction: column;
     overflow: hidden;
   }
-  ._header_17y86_158 {
+  ._header_5n47l_157 {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--sys-unit-8);
+    gap: var(--drawer-header-gap, var(--sys-unit-8));
   }
-  ._title_17y86_164 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-heading-small);
+  ._title_5n47l_163 {
+    color: var(--drawer-title-fg, var(--drawer-fg, var(--sys-color-text)));
+    font: var(--drawer-title-font, var(--sys-font-heading-small));
   }
 }

package/dist/components/drawer/drawer.d.ts

@@ -1,6 +1,5 @@
 import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
 import type { ComponentProps, ReactNode } from "react";
-import { type CloseButtonProps } from "../button/close-button.tsx";
 export type DrawerRootProps<Payload = unknown> = Omit<BaseDrawer.Root.Props<Payload>, "open" | "defaultOpen" | "onOpenChange" | "modal" | "children" | "swipeDirection"> & Readonly<{
     /** Whether the drawer is open. Leave it out for a drawer that keeps its own state. */
     open?: boolean;
@@ -33,11 +32,8 @@ declare const Popup: ({ className, filled, ...props }: DrawerPopupProps) => Reac
 /** The drawer's heading, which names it. */
 declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Title>) => ReactNode;
 export type DrawerHeaderProps = ComponentProps<"div">;
-/** The title's line. Put a `Drawer.CloseButton` in it to trail a way out. */
+/** The title's line. Put a `Drawer.Close` in it to trail a way out. */
 declare const Header: ({ className, ...props }: DrawerHeaderProps) => ReactNode;
-export type DrawerCloseButtonProps = Pick<CloseButtonProps, "closeLabel" | "icon">;
-/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
-declare const CloseButton: ({ closeLabel, icon, }: DrawerCloseButtonProps) => ReactNode;
 export type DrawerSheetProps = DrawerPopupProps & Readonly<{
     /** The element the drawer is portalled into. @default document.body */
     container?: BaseDrawer.Portal.Props["container"];
@@ -59,7 +55,6 @@ type DrawerParts = Readonly<{
     Header: typeof Header;
     Title: typeof Title;
     Close: typeof BaseDrawer.Close;
-    CloseButton: typeof CloseButton;
     createHandle: typeof BaseDrawer.createHandle;
 }>;
 /**
@@ -73,7 +68,13 @@ type DrawerParts = Readonly<{
  *   <Drawer.Sheet>
  *     <Drawer.Header>
  *       <Drawer.Title>Filters</Drawer.Title>
- *       <Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+ *       <Drawer.Close
+ *         render={
+ *           <IconButton label="Close" variant="tertiary">
+ *             <CloseIcon />
+ *           </IconButton>
+ *         }
+ *       />
  *     </Drawer.Header>
  *     <Drawer.Close>Done</Drawer.Close>
  *   </Drawer.Sheet>

package/dist/components/drawer/drawer.js

@@ -1,4 +1,3 @@
-import { CloseButton as CloseButton$1 } from "../button/close-button.js";
 import drawer_module_default from "./drawer.module.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
@@ -149,7 +148,7 @@ var Title = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The title's line. Put a `Drawer.CloseButton` in it to trail a way out. */
+/** The title's line. Put a `Drawer.Close` in it to trail a way out. */
 var Header = (t0) => {
 	const $ = c(8);
 	let className;
@@ -181,28 +180,6 @@ var Header = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
-var CloseButton = (t0) => {
-	const $ = c(4);
-	const { closeLabel, icon } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Drawer.Close, {});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== closeLabel || $[2] !== icon) {
-		t2 = /* @__PURE__ */ jsx(CloseButton$1, {
-			closeLabel,
-			icon,
-			render: t1
-		});
-		$[1] = closeLabel;
-		$[2] = icon;
-		$[3] = t2;
-	} else t2 = $[3];
-	return t2;
-};
 /**
 * `Portal`, `Backdrop`, `Viewport`, `Popup` and `Content` in one: the drawer's
 * surface, above the page, holding its children.
@@ -267,7 +244,13 @@ var Sheet = (t0) => {
 *   <Drawer.Sheet>
 *     <Drawer.Header>
 *       <Drawer.Title>Filters</Drawer.Title>
-*       <Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+*       <Drawer.Close
+*         render={
+*           <IconButton label="Close" variant="tertiary">
+*             <CloseIcon />
+*           </IconButton>
+*         }
+*       />
 *     </Drawer.Header>
 *     <Drawer.Close>Done</Drawer.Close>
 *   </Drawer.Sheet>
@@ -285,7 +268,6 @@ var Drawer$1 = {
 	Header,
 	Title,
 	Close: Drawer.Close,
-	CloseButton,
 	createHandle: Drawer.createHandle
 };
 export { Drawer$1 as Drawer };

package/dist/components/drawer/drawer.module.js

@@ -1,10 +1,10 @@
 import './drawer.css';// src/components/drawer/drawer.module.scss
-var backdrop = "_backdrop_17y86_3";
-var viewport = "_viewport_17y86_58";
-var popup = "_popup_17y86_71";
-var filled = "_filled_17y86_149";
-var header = "_header_17y86_158";
-var title = "_title_17y86_164";
+var backdrop = "_backdrop_5n47l_3";
+var viewport = "_viewport_5n47l_58";
+var popup = "_popup_5n47l_71";
+var filled = "_filled_5n47l_148";
+var header = "_header_5n47l_157";
+var title = "_title_5n47l_163";
 var drawer_module_default = {
 	backdrop,
 	viewport,

package/dist/components/field/field.css

@@ -1,67 +1,77 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._field_dzutr_3 {
+  ._field_160cj_3 {
     display: flex;
     flex-direction: column;
     gap: var(--field-gap, var(--sys-unit-4));
     inline-size: 100%;
   }
-  ._field_dzutr_3[data-field-group-member] > * {
+  ._field_160cj_3[data-disabled] {
+    opacity: var(--field-disabled-opacity, 1);
+  }
+  ._field_160cj_3[data-field-group-member] > * {
     grid-row: extra;
     margin-block-start: var(--field-gap, var(--sys-unit-4));
   }
-  ._field_dzutr_3[data-field-group-member] > ._label_dzutr_13 {
+  ._field_160cj_3[data-field-group-member] > :is(._label_160cj_16, ._labelRow_160cj_16) {
     grid-row: label;
     margin-block: 0 var(--field-gap, var(--sys-unit-4));
   }
-  ._field_dzutr_3[data-field-group-member] > :first-child:not(._label_dzutr_13),
-  ._field_dzutr_3[data-field-group-member] > ._label_dzutr_13 + * {
+  ._field_160cj_3[data-field-group-member] > :first-child:not(._label_160cj_16, ._labelRow_160cj_16),
+  ._field_160cj_3[data-field-group-member] > :is(._label_160cj_16, ._labelRow_160cj_16) + * {
     grid-row: control;
     margin-block-start: 0;
   }
-  ._field_dzutr_3[data-field-group-member] > ._description_dzutr_22 {
+  ._field_160cj_3[data-field-group-member] > ._description_160cj_25 {
     grid-row: description;
   }
-  ._field_dzutr_3[data-field-group-member] > ._error_dzutr_25 {
+  ._field_160cj_3[data-field-group-member] > ._error_160cj_28 {
     grid-row: error;
   }
-  ._label_dzutr_13 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-label-medium);
+  ._label_160cj_16 {
+    color: var(--field-label-fg, var(--sys-color-text));
+    font: var(--field-label-font, var(--sys-font-label-medium));
     cursor: default;
   }
-  ._optional_dzutr_33 {
+  ._labelRow_160cj_16 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: var(--field-label-row-align, baseline);
+    justify-content: space-between;
+    gap: var(--field-label-row-gap, var(--sys-unit-4));
+  }
+  ._optional_160cj_43 {
     vertical-align: middle;
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-body-small);
-    font-size: 0.75rem;
+    color: var(--field-optional-fg, var(--sys-color-text-muted));
+    font: var(--field-optional-font, var(--sys-font-body-small));
+    font-size: var(--field-optional-font-size, 0.75rem);
   }
-  ._inlineText_dzutr_39 {
+  ._inlineText_160cj_49 {
     grid-area: text;
   }
-  ._inlineOptional_dzutr_42 {
+  ._inlineOptional_160cj_52 {
     grid-area: optional;
   }
-  ._required_dzutr_45 {
+  ._required_160cj_55 {
     display: inline-block;
     vertical-align: middle;
     translate: 0 -1px;
-    inline-size: 0.625rem;
-    block-size: 0.625rem;
+    inline-size: var(--field-required-size, 0.625rem);
+    block-size: var(--field-required-size, 0.625rem);
     background-color: var(--field-required-fg, var(--sys-color-primary));
     mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='16%2016%2032%2032'%20fill='currentColor'%3e%3cpath%20d='M45.475%2036.291c.377.162.549.477.523.943-.027.469-.35%201.223-.967%202.264-.617%201.072-1.121%201.725-1.51%201.967-.389.24-.744.24-1.066%200l-8.574-6.215%201.129%2010.508c.078.398-.096.707-.525.92-.428.215-1.262.322-2.495.322-1.236%200-2.066-.107-2.496-.322-.43-.213-.604-.521-.523-.92l1.127-10.508-8.533%206.215c-.322.24-.686.24-1.088%200-.402-.242-.912-.895-1.529-1.967-.617-1.041-.934-1.795-.945-2.264-.016-.467.168-.781.543-.943l9.701-4.29-9.701-4.252c-.375-.188-.559-.516-.543-.984.012-.467.328-1.223.945-2.264.617-1.045%201.127-1.686%201.529-1.926s.766-.24%201.088%200l8.533%206.176-1.127-10.467c-.08-.428.094-.748.523-.963s1.26-.321%202.496-.321c1.232%200%202.066.107%202.494.322.43.215.604.535.525.963l-1.129%2010.467%208.574-6.176c.322-.24.678-.24%201.066%200s.893.896%201.51%201.965c.617%201.018.939%201.758.967%202.225.025.469-.146.797-.523.984l-9.701%204.252%209.702%204.289'/%3e%3c/svg%3e") center/contain no-repeat;
   }
-  ._description_dzutr_22 {
+  ._description_160cj_25 {
     color: var(--field-description-fg, var(--sys-color-text-muted));
     font: var(--field-description-font, var(--sys-font-body-medium));
   }
-  ._pending_dzutr_58 {
+  ._pending_160cj_68 {
     display: inline-flex;
     flex: none;
     align-items: center;
-    gap: var(--sys-unit-2);
-    color: var(--field-muted-fg);
-    font: var(--sys-font-body-medium);
+    gap: var(--field-inlay-content-gap, var(--sys-unit-2));
+    color: var(--field-inlay-fg, var(--_field-muted-fg));
+    font: var(--field-inlay-font, var(--sys-font-body-medium));
     cursor: default;
     pointer-events: none;
     line-height: normal;

package/dist/components/field/field.d.ts

@@ -1,5 +1,6 @@
 import { Field as BaseField } from "@base-ui/react/field";
-import { type ComponentProps, type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
 import type { Requiredness } from "./field-state.ts";
 /**
  * The props every field takes, on every tier: the raw compound's root, the
@@ -28,9 +29,13 @@ export type FieldProps = Readonly<{
  * handler. Every `<Control>Field` and its bridge take this one type.
  */
 export type FieldBlurHandler = () => void;
-/** The copy and assertion a label carries about requiredness. */
-export type RequirednessProps = Readonly<{
+/** What a requiredness part asserts: its own `requiredness`, or the field's it sits in. */
+export type RequiredMarkProps = Readonly<{
+    /** What the label asserts. Left out, it reads the `requiredness` of the field it sits in. */
     requiredness?: Requiredness;
+}>;
+/** The copy and assertion a label carries about requiredness. */
+export type RequirednessProps = RequiredMarkProps & Readonly<{
     /** The word an optional field's label trails, such as "optional". */
     optionalLabel: string;
 }>;
@@ -39,36 +44,43 @@ export type RequirednessProps = Readonly<{
  * control's own `required` tells assistive tech.
  *
  * @example
- * <Field.RequiredMark requiredness="required" />
+ * <Field.Label>Email <Field.RequiredMark /></Field.Label>
  */
-declare const RequiredMark: ({ requiredness, }: Readonly<{
-    requiredness?: Requiredness;
-}>) => ReactNode;
+declare const RequiredMark: ({ requiredness, }: RequiredMarkProps) => ReactNode;
 /**
  * The suffix a label trails: the required mark, or the optional word.
  *
  * @example
- * <Field.Requiredness requiredness="optional" optionalLabel="optional" />
+ * <Field.Label>Notes <Field.Requiredness optionalLabel="optional" /></Field.Label>
  */
 declare const FieldRequiredness: ({ requiredness, optionalLabel, }: RequirednessProps) => ReactNode;
-export type InlineLabelTextProps = RequirednessProps & Readonly<{
-    label: string;
-    /** The label of the field the row sits in, which carries the suffix instead. */
-    fieldLabel?: string;
-}>;
 /**
- * The text beside a control that shares its label, carrying the suffix a
- * `fieldLabel` above the row would otherwise carry.
+ * The optional word of a label beside its control, on a row of its own under
+ * the label's text. Renders nothing unless the field is optional.
+ *
+ * @example
+ * <Checkbox.Label>
+ * 	<Checkbox.Control>…</Checkbox.Control>
+ * 	<Field.InlineLabelText>Send me a copy <Field.RequiredMark /></Field.InlineLabelText>
+ * 	<Field.InlineOptional optionalLabel="optional" />
+ * </Checkbox.Label>
+ */
+declare const InlineOptional: ({ requiredness, optionalLabel, }: RequirednessProps) => ReactNode;
+export type InlineLabelTextProps = ComponentProps<"span">;
+/**
+ * The text of a label beside its control, such as a lone checkbox's.
  *
  * @example
  * <Checkbox.Label>
  * 	<Checkbox.Control><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox.Control>
- * 	<Field.InlineLabelText label={label} requiredness="optional" optionalLabel="optional" />
+ * 	<Field.InlineLabelText>I agree to the terms <Field.RequiredMark /></Field.InlineLabelText>
  * </Checkbox.Label>
  */
-declare const InlineLabelText: ({ label, fieldLabel, requiredness, optionalLabel, }: InlineLabelTextProps) => ReactNode;
+declare const InlineLabelText: ({ className, ...props }: InlineLabelTextProps) => ReactNode;
 export type FieldRootProps = BaseField.Root.Props & Readonly<{
     className?: string;
+    /** What the field asserts about being required, which the requiredness parts inside it read. */
+    requiredness?: Requiredness;
 }>;
 /**
  * The field frame: label, control, description and error stacked full width.
@@ -77,28 +89,27 @@ export type FieldRootProps = BaseField.Root.Props & Readonly<{
  * @example
  * <Field.Root name="email" invalid={invalid}>…</Field.Root>
  */
-declare const FieldRoot: ({ className, children, ...props }: FieldRootProps) => ReactNode;
-export type FieldLabelProps = Omit<BaseField.Label.Props, "className"> & RequirednessProps & Readonly<{
+declare const FieldRoot: ({ className, requiredness, children, ...props }: FieldRootProps) => ReactNode;
+export type FieldLabelProps = Omit<BaseField.Label.Props, "className"> & Readonly<{
     className?: string;
 }>;
 /**
- * The label above a control, trailing its requiredness. Renders nothing without
- * children.
+ * The label above a control. Renders nothing without children.
  *
  * @example
- * <Field.Label requiredness="optional" optionalLabel="optional">Notes</Field.Label>
+ * <Field.Label>Notes <Field.Requiredness optionalLabel="optional" /></Field.Label>
  */
-declare const FieldLabel: ({ children, requiredness, optionalLabel, className, ...props }: FieldLabelProps) => ReactNode;
-export type FieldCaptionProps = ComponentProps<"p"> & RequirednessProps;
+declare const FieldLabel: ({ children, className, ...props }: FieldLabelProps) => ReactNode;
+export type FieldCaptionProps = ComponentProps<"p">;
 /**
  * A caption styled like a field label, which names nothing: a paragraph, with
  * no `for` and no `aria-labelledby` of its own. Use it for standing text above
  * a control that already carries its own name. To name something, use `Label`.
  *
  * @example
- * <Field.Caption optionalLabel="optional">Theme</Field.Caption>
+ * <Field.Caption>Theme <Field.Requiredness requiredness="optional" optionalLabel="optional" /></Field.Caption>
  */
-declare const FieldCaption: ({ children, requiredness, optionalLabel, className, ...props }: FieldCaptionProps) => ReactNode;
+declare const FieldCaption: ({ children, className, ...props }: FieldCaptionProps) => ReactNode;
 /**
  * The help under a control. Renders nothing without children.
  *
@@ -122,19 +133,29 @@ export type FieldErrorProps = Omit<BaseField.Error.Props, "match" | "render" | "
  * <Field.Error>{errors}</Field.Error>
  */
 declare const FieldError: ({ children: errors, ...props }: FieldErrorProps) => ReactNode;
-export type FieldPendingProps = Readonly<{
-    className?: string;
-}>;
+export type FieldPendingProps = useRender.ComponentProps<"span">;
+/**
+ * The box beside the control that a field's wait shows in, holding what it is
+ * given, such as a spinner. The control decides when it is mounted, once the
+ * wait is worth showing. It is decoration: the wait reaches assistive tech as
+ * the `aria-busy` that `fieldStateAttributes` projects.
+ *
+ * @example
+ * {phase !== "fresh" && <Field.Pending><Spinner size={1} /></Field.Pending>}
+ */
+declare const FieldPending: ({ className, render, ref, ...props }: FieldPendingProps) => ReactElement;
+export type FieldLabelRowProps = useRender.ComponentProps<"div">;
 /**
- * The spinner a field shows while background work is in flight, sized to sit
- * in the box beside the control. The control decides when it is mounted, once
- * the wait is worth showing. It is decoration: the wait reaches assistive tech
- * as the `aria-busy` that `fieldStateAttributes` projects.
+ * A row holding a field's label and what sits beside it, such as a link or a
+ * counter, in place of the bare label.
  *
  * @example
- * {phase !== "fresh" && <Field.Pending />}
+ * <Field.LabelRow>
+ * 	<TextInput.Label>Password</TextInput.Label>
+ * 	<Link href="/reset">Forgot password?</Link>
+ * </Field.LabelRow>
  */
-declare const FieldPending: ({ className, }: FieldPendingProps) => ReactNode;
+declare const FieldLabelRow: ({ className, render, ref, ...props }: FieldLabelRowProps) => ReactElement;
 /** Stable ids for the parts of one field. */
 export type FieldIds = Readonly<{
     labelId: string;
@@ -157,6 +178,7 @@ declare const useFieldIds: () => FieldIds;
 export type FieldParts = Readonly<{
     Root: typeof FieldRoot;
     Label: typeof FieldLabel;
+    LabelRow: typeof FieldLabelRow;
     Caption: typeof FieldCaption;
     Control: typeof BaseField.Control;
     Description: typeof FieldDescription;
@@ -167,6 +189,7 @@ export type FieldParts = Readonly<{
     Requiredness: typeof FieldRequiredness;
     RequiredMark: typeof RequiredMark;
     InlineLabelText: typeof InlineLabelText;
+    InlineOptional: typeof InlineOptional;
     useIds: typeof useFieldIds;
 }>;
 /**
@@ -175,8 +198,8 @@ export type FieldParts = Readonly<{
  * before `Error`, the field's only live region.
  *
  * @example
- * <Field.Root name="email" invalid={invalid}>
- * 	<Field.Label requiredness="required" optionalLabel="optional">Email</Field.Label>
+ * <Field.Root name="email" invalid={invalid} requiredness="required">
+ * 	<Field.Label>Email <Field.Requiredness optionalLabel="optional" /></Field.Label>
  * 	<Field.Control />
  * 	<Field.Description>We send the receipt here.</Field.Description>
  * 	<Field.Error>{errors}</Field.Error>