@ngrok/mantle 0.84.1 → 0.84.2

package/dist/description-list.d.ts

@@ -1,13 +1,21 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
 import "./index-DA4ig3gj.js";
 import { ComponentProps } from "react";
 //#region src/components/description-list/description-list.d.ts
-type DescriptionListProps = ComponentProps<"dl"> & WithAsChild;
+/**
+ * Props for `DescriptionList.Root`.
+ */
+type DescriptionListProps = ComponentProps<"dl"> & WithAsChild & WithDataSlot;
 /**
  * A semantically correct description list built on the HTML `<dl>` element.
  * Renders a list of label/value pairs with alternating row backgrounds,
  * commonly used in detail views to display metadata about a resource.
  *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"description-list"` | The `<dl>`. A consumer `data-slot` joins in front of it. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistroot
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
  *
@@ -21,13 +29,20 @@ type DescriptionListProps = ComponentProps<"dl"> & WithAsChild;
  * </DescriptionList.Root>
  * ```
  */
-declare const Root: ({ asChild, className, children, ref, ...rest }: DescriptionListProps) => import("react").JSX.Element;
+declare const Root: ({ asChild, className, children, "data-slot": dataSlot, ref, ...rest }: DescriptionListProps) => import("react").JSX.Element;
+/**
+ * Props for `DescriptionList.Item`.
+ */
 type DescriptionListItemProps = ComponentProps<"div"> & WithAsChild;
 /**
  * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`
  * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that
  * inherits column tracks from the root.
  *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"description-list-item"` | The row wrapper. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistitem
  *
  * @example
@@ -41,10 +56,17 @@ type DescriptionListItemProps = ComponentProps<"div"> & WithAsChild;
  * ```
  */
 declare const Item: ({ asChild, className, children, ref, ...rest }: DescriptionListItemProps) => import("react").JSX.Element;
+/**
+ * Props for `DescriptionList.Label`.
+ */
 type DescriptionListLabelProps = ComponentProps<"dt"> & WithAsChild;
 /**
  * The label for a description list item. Renders as a `<dt>` element.
  *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"description-list-label"` | The `<dt>`. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistlabel
  *
  * @example
@@ -58,12 +80,19 @@ type DescriptionListLabelProps = ComponentProps<"dt"> & WithAsChild;
  * ```
  */
 declare const Label: ({ asChild, className, children, ref, ...rest }: DescriptionListLabelProps) => import("react").JSX.Element;
+/**
+ * Props for `DescriptionList.Value`.
+ */
 type DescriptionListValueProps = ComponentProps<"dd"> & WithAsChild;
 /**
  * The value for a description list item. Renders as a `<dd>` element.
- * Compose any content inside — the component is intentionally "dumb" and
+ * Compose any content inside: the component is intentionally "dumb" and
  * imposes no layout on its children.
  *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"description-list-value"` | The `<dd>`. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistvalue
  *
  * @example
@@ -116,7 +145,9 @@ declare const Value: ({ asChild, className, children, ref, ...rest }: Descriptio
  */
 declare const DescriptionList: {
   /**
-   * The root container for a description list. Renders a `<dl>` element.
+   * A semantically correct description list built on the HTML `<dl>` element.
+   * Renders a list of label/value pairs with alternating row backgrounds,
+   * commonly used in detail views to display metadata about a resource.
    *
    * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistroot
    *
@@ -132,8 +163,9 @@ declare const DescriptionList: {
    */
   readonly Root: typeof Root;
   /**
-   * A wrapper that groups a label/value pair. Renders a `<div>` with a default
-   * subgrid layout.
+   * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`
+   * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that
+   * inherits column tracks from the root.
    *
    * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistitem
    *
@@ -149,7 +181,7 @@ declare const DescriptionList: {
    */
   readonly Item: typeof Item;
   /**
-   * The label for a description list item. Renders a `<dt>` element.
+   * The label for a description list item. Renders as a `<dt>` element.
    *
    * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistlabel
    *
@@ -165,7 +197,9 @@ declare const DescriptionList: {
    */
   readonly Label: typeof Label;
   /**
-   * The value for a description list item. Renders a `<dd>` element.
+   * The value for a description list item. Renders as a `<dd>` element.
+   * Compose any content inside: the component is intentionally "dumb" and
+   * imposes no layout on its children.
    *
    * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistvalue
    *
@@ -182,4 +216,4 @@ declare const DescriptionList: {
   readonly Value: typeof Value;
 };
 //#endregion
-export { DescriptionList, type DescriptionListProps };
+export { DescriptionList, type DescriptionListItemProps, type DescriptionListLabelProps, type DescriptionListProps, type DescriptionListValueProps };

package/dist/description-list.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CxM7jdFi.js";import{jsx as n}from"react/jsx-runtime";const r={Root:({asChild:r=!1,className:i,children:a,ref:o,...s})=>n(r?t:`dl`,{ref:o,"data-slot":`description-list`,className:e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1`,i),...s,children:a}),Item:({asChild:r=!1,className:i,children:a,ref:o,...s})=>n(r?t:`div`,{ref:o,"data-slot":`description-list-item`,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...s,children:a}),Label:({asChild:r=!1,className:i,children:a,ref:o,...s})=>n(r?t:`dt`,{ref:o,"data-slot":`description-list-label`,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...s,children:a}),Value:({asChild:r=!1,className:i,children:a,ref:o,...s})=>n(r?t:`dd`,{ref:o,"data-slot":`description-list-value`,className:e(`text-body font-mono text-mono py-2 px-3`,i),...s,children:a})};export{r as DescriptionList};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-C3gII_9c.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i=!1,className:a,children:o,"data-slot":s,ref:c,...l})=>r(i?n:`dl`,{ref:c,"data-slot":t(s,`description-list`),className:e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1`,a),...l,children:o}),Item:({asChild:t=!1,className:i,children:a,ref:o,...s})=>r(t?n:`div`,{ref:o,"data-slot":`description-list-item`,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...s,children:a}),Label:({asChild:t=!1,className:i,children:a,ref:o,...s})=>r(t?n:`dt`,{ref:o,"data-slot":`description-list-label`,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...s,children:a}),Value:({asChild:t=!1,className:i,children:a,ref:o,...s})=>r(t?n:`dd`,{ref:o,"data-slot":`description-list-value`,className:e(`text-body font-mono text-mono py-2 px-3`,i),...s,children:a})};export{i as DescriptionList};

package/dist/{dialog-u8PtHYES.d.ts → dialog-B8YvfyIo.d.ts}

@@ -1,8 +1,10 @@
 import { ComponentProps, ComponentPropsWithoutRef, Ref } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-//#region src/components/dialog/primitive.d.ts
+declare namespace primitive_d_exports {
+  export { Close, Content, Description, Overlay, Portal, Root, Title, Trigger, isDialogOverlayTarget };
+}
 type DialogPrimitiveContentProps = ComponentProps<typeof DialogPrimitive.Content>;
-declare function Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react").JSX.Element;
+declare const Root: import("react").FC<DialogPrimitive.DialogProps>;
 declare const Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 /**
  * Mounts dialog layers into the nearest layer container — an enclosing
@@ -27,4 +29,4 @@ declare const Description: ({ asChild, children, ref, ...props }: ComponentProps
  */
 declare function isDialogOverlayTarget(target: EventTarget | null): boolean;
 //#endregion
-export { Portal as a, Trigger as c, Overlay as i, isDialogOverlayTarget as l, Content as n, Root as o, Description as r, Title as s, Close as t };
+export { Portal as a, Trigger as c, Overlay as i, isDialogOverlayTarget as l, Content as n, Root as o, Description as r, Title as s, Close as t, primitive_d_exports as u };

package/dist/{dialog-CSUE-jw8.js → dialog-CA-1Z0Np.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-BCk0KpWb.js";import{t as n}from"./layer-container-CglTh9-6.js";import{a as r,c as i,i as a,n as o,o as s,r as c,s as l,t as u}from"./primitive-BSBmlRyy.js";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=s,h=e=>d(i,{"data-slot":`dialog-trigger`,...e}),g=r,_=e=>d(u,{"data-slot":`dialog-close`,...e}),v=({className:t,ref:n,...r})=>d(a,{ref:n,"data-slot":`dialog-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-60 backdrop-blur-xs`,t),...r}),y={centered:`inset-4`,"full-page":`inset-4`,"full-bleed":`inset-0`},b={centered:`border-dialog rounded-xl border`,"full-page":`border-dialog h-full max-w-none rounded-xl border`,"full-bleed":`h-full max-w-none`},x={Root:m,Body:({className:t,...n})=>d(`div`,{"data-slot":`dialog-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n}),Close:_,CloseIconButton:({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,intent:a=`neutral`,...o})=>d(u,{asChild:!0,children:d(t,{appearance:i,"data-slot":`dialog-close-icon-button`,icon:d(p,{}),intent:a,label:r,size:e,type:n,...o})}),Content:({appearance:t=`centered`,children:r,className:i,preferredWidth:a,ref:s,...c})=>f(g,{children:[d(v,{}),d(n,{"data-slot":`dialog-positioner`,className:e(`fixed z-60 flex items-center justify-center`,y[t]),children:d(o,{"data-appearance":t,"data-mantle-modal-content":!0,"data-slot":`dialog-content`,className:e(`flex max-h-full w-full flex-1 flex-col`,`outline-hidden focus-within:outline-hidden`,`bg-dialog shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,b[t],t===`centered`&&(a??`max-w-lg`),i),ref:s,...c,children:r})})]}),Description:({className:t,ref:n,...r})=>d(c,{ref:n,"data-slot":`dialog-description`,className:e(`text-muted`,t),...r}),Footer:({className:t,...n})=>d(`div`,{"data-slot":`dialog-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-4`,t),...n}),Header:({className:t,children:n,...r})=>d(`div`,{"data-slot":`dialog-header`,className:e(`border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4`,`has-[.icon-button]:pr-4`,t),...r,children:n}),Overlay:v,Portal:g,Title:({className:t,ref:n,...r})=>d(l,{ref:n,"data-slot":`dialog-title`,className:e(`text-strong truncate text-lg font-medium`,t),...r}),Trigger:h};export{x as t};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./button-CaM-ZAH5.js";import{t as n}from"./layer-container-BTcQpd4K.js";import{a as r,c as i,i as a,n as o,o as s,r as c,s as l,t as u}from"./primitive-CejGAoGb.js";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=s,h=e=>d(i,{"data-slot":`dialog-trigger`,...e}),g=r,_=e=>d(u,{"data-slot":`dialog-close`,...e}),v=({className:t,ref:n,...r})=>d(a,{ref:n,"data-slot":`dialog-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-60 backdrop-blur-xs`,t),...r}),y={centered:`inset-4`,"full-page":`inset-4`,"full-bleed":`inset-0`},b={centered:`border-dialog rounded-xl border`,"full-page":`border-dialog h-full max-w-none rounded-xl border`,"full-bleed":`h-full max-w-none`},x={Root:m,Body:({className:t,...n})=>d(`div`,{"data-slot":`dialog-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n}),Close:_,CloseIconButton:({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,intent:a=`neutral`,...o})=>d(u,{asChild:!0,children:d(t,{appearance:i,"data-slot":`dialog-close-icon-button`,icon:d(p,{}),intent:a,label:r,size:e,type:n,...o})}),Content:({appearance:t=`centered`,children:r,className:i,preferredWidth:a,ref:s,...c})=>f(g,{children:[d(v,{}),d(n,{"data-slot":`dialog-positioner`,className:e(`fixed z-60 flex items-center justify-center`,y[t]),children:d(o,{"data-appearance":t,"data-mantle-modal-content":!0,"data-slot":`dialog-content`,className:e(`flex max-h-full w-full flex-1 flex-col`,`outline-hidden focus-within:outline-hidden`,`bg-dialog shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,b[t],t===`centered`&&(a??`max-w-lg`),i),ref:s,...c,children:r})})]}),Description:({className:t,ref:n,...r})=>d(c,{ref:n,"data-slot":`dialog-description`,className:e(`text-muted`,t),...r}),Footer:({className:t,...n})=>d(`div`,{"data-slot":`dialog-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-4`,t),...n}),Header:({className:t,children:n,...r})=>d(`div`,{"data-slot":`dialog-header`,className:e(`border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4`,`has-[.icon-button]:pr-4`,t),...r,children:n}),Overlay:v,Portal:g,Title:({className:t,ref:n,...r})=>d(l,{ref:n,"data-slot":`dialog-title`,className:e(`text-strong truncate text-lg font-medium`,t),...r}),Trigger:h};export{x as t};

package/dist/{dialog-CEk0L7M7.d.ts → dialog-CtLI_uex.d.ts}

@@ -1,5 +1,5 @@
-import { i as IconButtonIntent, n as IconButtonProps, r as IconButtonAppearance } from "./button-C39M5h4K.js";
-import { a as Portal, c as Trigger$1, i as Overlay$1, n as Content$1, o as Root, r as Description$1, s as Title$1, t as Close$1 } from "./dialog-u8PtHYES.js";
+import { a as Portal, c as Trigger$1, i as Overlay$1, n as Content$1, r as Description$1, s as Title$1, t as Close$1, u as primitive_d_exports } from "./dialog-B8YvfyIo.js";
+import { i as IconButtonIntent, n as IconButtonProps, r as IconButtonAppearance } from "./button-crUf0hbR.js";
 import { ComponentProps } from "react";
 //#region src/components/dialog/dialog.d.ts
 /**
@@ -510,7 +510,7 @@ declare const Dialog: {
    * </Dialog.Root>
    * ```
    */
-  readonly Root: typeof Root;
+  readonly Root: import("react").FC<import("@radix-ui/react-dialog").DialogProps>;
   /**
    * Contains the main content of the dialog.
    *
@@ -677,6 +677,8 @@ declare const Dialog: {
   readonly Content: typeof Content;
   /**
    * An accessible description to be announced when the dialog is opened.
+   * Renders as a `div` by default, but can be changed to any other element using
+   * the `asChild` prop.
    *
    * @see https://mantle.ngrok.com/components/overlays/dialog#dialogdescription
    *

package/dist/dialog.d.ts

@@ -1,3 +1,3 @@
-import { l as isDialogOverlayTarget } from "./dialog-u8PtHYES.js";
-import { t as Dialog } from "./dialog-CEk0L7M7.js";
+import { l as isDialogOverlayTarget } from "./dialog-B8YvfyIo.js";
+import { t as Dialog } from "./dialog-CtLI_uex.js";
 export { Dialog, isDialogOverlayTarget };

package/dist/dialog.js

@@ -1 +1 @@
-import{l as e}from"./primitive-BSBmlRyy.js";import{t}from"./dialog-CSUE-jw8.js";export{t as Dialog,e as isDialogOverlayTarget};
+import{l as e}from"./primitive-CejGAoGb.js";import{t}from"./dialog-CA-1Z0Np.js";export{t as Dialog,e as isDialogOverlayTarget};

package/dist/{dropdown-menu-CpsUJGbn.d.ts → dropdown-menu-BYapTV0f.d.ts}

@@ -1,5 +1,5 @@
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
-import { n as Separator } from "./separator-CNDs98Dv.js";
+import { n as Separator } from "./separator-Bo4nY_3M.js";
 import { ComponentProps } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 //#region src/components/dropdown-menu/dropdown-menu.d.ts
@@ -63,7 +63,8 @@ declare const Group: ({ className, ...props }: ComponentProps<typeof DropdownMen
  */
 declare const RadioGroup: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) => import("react").JSX.Element;
 /**
- * A trigger for a dropdown menu sub-menu.
+ * A trigger for a dropdown menu sub-menu. It opens the submenu on hover, or on
+ * ArrowRight or Enter.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenusubtrigger
  *
@@ -255,7 +256,8 @@ declare const Label: ({ className, inset, ...props }: ComponentProps<typeof Drop
  */
 declare const DropdownSeparator: ({ className, ...props }: ComponentProps<typeof Separator>) => import("react").JSX.Element;
 /**
- * A keyboard shortcut indicator for dropdown menu items.
+ * A keyboard shortcut indicator for dropdown menu items. It locks
+ * `translate="no"`, because a translated key name names the wrong key.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenushortcut
  *
@@ -272,7 +274,7 @@ declare const DropdownSeparator: ({ className, ...props }: ComponentProps<typeof
  * </DropdownMenu.Root>
  * ```
  */
-declare const Shortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+declare const Shortcut: ({ className, ...props }: Omit<ComponentProps<"span">, "translate">) => import("react").JSX.Element;
 /**
  * A menu of options or actions, triggered by a button.
  *
@@ -577,7 +579,8 @@ declare const DropdownMenu: {
    */
   readonly SubContent: typeof SubContent;
   /**
-   * The trigger item that opens a submenu when hovered or focused.
+   * A trigger for a dropdown menu sub-menu. It opens the submenu on hover, or on
+   * ArrowRight or Enter.
    *
    * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenusubtrigger
    *

package/dist/dropdown-menu-BkPBh_8y.d.ts

@@ -0,0 +1 @@
+import "./dropdown-menu-BYapTV0f.js";

package/dist/{dropdown-menu-Cy7mLIpJ.js → dropdown-menu-lxHsgLiw.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./data-slot-EM6s2WEU.js";import{r}from"./layer-container-CglTh9-6.js";import{n as i}from"./separator-D1K7DSTv.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{CheckIcon as s}from"@phosphor-icons/react/Check";import{CaretRightIcon as c}from"@phosphor-icons/react/CaretRight";import*as l from"@radix-ui/react-dropdown-menu";const u=l.Root,d=e=>a(l.Trigger,{"data-slot":`dropdown-menu-trigger`,...e}),f=({className:t,...n})=>a(l.Group,{"data-slot":`dropdown-menu-group`,className:e(`space-y-px`,t),...n}),p=({container:e,...t})=>{let n=r();return a(l.Portal,{container:e??n,...t})},m={Root:u,CheckboxItem:({className:n,children:r,checked:i,...c})=>o(l.CheckboxItem,{"data-slot":`dropdown-menu-checkbox-item`,className:e(`text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden`,`data-highlighted:bg-active-menu-item`,`aria-checked:bg-selected-menu-item`,`data-highlighted:aria-checked:bg-active-selected-menu-item!`,`[&>svg]:size-5 [&_svg]:shrink-0`,n),checked:i,...c,children:[a(`span`,{className:`absolute right-2 flex items-center`,children:a(l.ItemIndicator,{children:a(t,{svg:a(s,{weight:`bold`}),className:`size-4 text-accent-600`})})}),r]}),Content:({className:t,"data-slot":r,onClick:i,loop:o=!0,width:s,...c})=>a(p,{children:a(l.Content,{"data-slot":n(r,`dropdown-menu-content`),className:e(`scrollbar`,`text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans`,`data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,`my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto`,s===`trigger`&&`w-(--radix-dropdown-menu-trigger-width)`,t),loop:o,onClick:e=>{e.stopPropagation(),i?.(e)},...c})}),Group:f,Item:({className:t,inset:n,...r})=>a(l.Item,{"data-slot":`dropdown-menu-item`,className:e(`relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors`,`data-highlighted:bg-active-menu-item`,`focus:bg-accent focus:text-accent-foreground`,`data-disabled:cursor-default data-disabled:opacity-50`,`[&>svg]:size-5 [&_svg]:shrink-0`,n&&`pl-8`,t),...r}),Label:({className:t,inset:n,...r})=>a(l.Label,{"data-slot":`dropdown-menu-label`,className:e(`px-2 py-1.5 text-sm font-medium`,n&&`pl-8`,t),...r}),RadioGroup:({className:t,...n})=>a(l.RadioGroup,{"data-slot":`dropdown-menu-radio-group`,className:e(`space-y-px`,t),...n}),RadioItem:({className:n,children:r,...i})=>o(l.RadioItem,{"data-slot":`dropdown-menu-radio-item`,className:e(`group/dropdown-menu-radio-item`,`text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none`,`data-highlighted:bg-active-menu-item`,`aria-checked:bg-selected-menu-item aria-checked:pr-9`,`data-highlighted:aria-checked:bg-active-selected-menu-item!`,`[&>svg]:size-5 [&_svg]:shrink-0`,n),...i,children:[a(`span`,{className:`absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex`,children:a(l.ItemIndicator,{children:a(t,{svg:a(s,{weight:`bold`}),className:`size-4 text-accent-600`})})}),r]}),Separator:({className:t,...n})=>a(i,{"data-slot":`dropdown-menu-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...n}),Shortcut:({className:t,...n})=>a(`span`,{"data-slot":`dropdown-menu-shortcut`,className:e(`ml-auto text-xs tracking-widest opacity-60`,t),...n}),Sub:l.Sub,SubContent:({className:t,loop:n=!0,...r})=>a(p,{children:a(l.SubContent,{"data-slot":`dropdown-menu-sub-content`,className:e(`scrollbar`,`text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans`,`my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto`,t),loop:n,...r})}),SubTrigger:({className:n,inset:r,children:i,...s})=>o(l.SubTrigger,{"data-slot":`dropdown-menu-sub-trigger`,className:e(`focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden`,`data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item`,`[&>svg]:size-5 [&_svg]:shrink-0`,r&&`pl-8`,n),...s,children:[i,a(`span`,{className:`absolute right-2 flex items-center`,children:a(t,{svg:a(c,{weight:`bold`}),className:`size-4`})})]}),Trigger:d};export{m as t};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-CGKaq_tV.js";import{t as n}from"./data-slot-EM6s2WEU.js";import{r}from"./layer-container-BTcQpd4K.js";import{n as i}from"./separator-Da8lDnio.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{CheckIcon as s}from"@phosphor-icons/react/Check";import{CaretRightIcon as c}from"@phosphor-icons/react/CaretRight";import*as l from"@radix-ui/react-dropdown-menu";const u=l.Root,d=e=>a(l.Trigger,{"data-slot":`dropdown-menu-trigger`,...e}),f=({className:t,...n})=>a(l.Group,{"data-slot":`dropdown-menu-group`,className:e(`space-y-px`,t),...n}),p=({container:e,...t})=>{let n=r();return a(l.Portal,{container:e??n,...t})},m={Root:u,CheckboxItem:({className:n,children:r,checked:i,...c})=>o(l.CheckboxItem,{"data-slot":`dropdown-menu-checkbox-item`,className:e(`text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden`,`data-highlighted:bg-active-menu-item`,`aria-checked:bg-selected-menu-item`,`data-highlighted:aria-checked:bg-active-selected-menu-item!`,`[&>svg]:size-5 [&_svg]:shrink-0`,n),checked:i,...c,children:[a(`span`,{className:`absolute right-2 flex items-center`,children:a(l.ItemIndicator,{children:a(t,{svg:a(s,{weight:`bold`}),className:`size-4 text-accent-600`})})}),r]}),Content:({className:t,"data-slot":r,onClick:i,loop:o=!0,width:s,...c})=>a(p,{children:a(l.Content,{"data-slot":n(r,`dropdown-menu-content`),className:e(`scrollbar`,`text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans`,`data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,`my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto`,s===`trigger`&&`w-(--radix-dropdown-menu-trigger-width)`,t),loop:o,onClick:e=>{e.stopPropagation(),i?.(e)},...c})}),Group:f,Item:({className:t,inset:n,...r})=>a(l.Item,{"data-slot":`dropdown-menu-item`,className:e(`relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors`,`data-highlighted:bg-active-menu-item`,`focus:bg-accent focus:text-accent-foreground`,`data-disabled:cursor-default data-disabled:opacity-50`,`[&>svg]:size-5 [&_svg]:shrink-0`,n&&`pl-8`,t),...r}),Label:({className:t,inset:n,...r})=>a(l.Label,{"data-slot":`dropdown-menu-label`,className:e(`px-2 py-1.5 text-sm font-medium`,n&&`pl-8`,t),...r}),RadioGroup:({className:t,...n})=>a(l.RadioGroup,{"data-slot":`dropdown-menu-radio-group`,className:e(`space-y-px`,t),...n}),RadioItem:({className:n,children:r,...i})=>o(l.RadioItem,{"data-slot":`dropdown-menu-radio-item`,className:e(`group/dropdown-menu-radio-item`,`text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none`,`data-highlighted:bg-active-menu-item`,`aria-checked:bg-selected-menu-item aria-checked:pr-9`,`data-highlighted:aria-checked:bg-active-selected-menu-item!`,`[&>svg]:size-5 [&_svg]:shrink-0`,n),...i,children:[a(`span`,{className:`absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex`,children:a(l.ItemIndicator,{children:a(t,{svg:a(s,{weight:`bold`}),className:`size-4 text-accent-600`})})}),r]}),Separator:({className:t,...n})=>a(i,{"data-slot":`dropdown-menu-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...n}),Shortcut:({className:t,...n})=>a(`span`,{"data-slot":`dropdown-menu-shortcut`,className:e(`ml-auto text-xs tracking-widest opacity-60`,t),...n,translate:`no`}),Sub:l.Sub,SubContent:({className:t,loop:n=!0,...r})=>a(p,{children:a(l.SubContent,{"data-slot":`dropdown-menu-sub-content`,className:e(`scrollbar`,`text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans`,`my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto`,t),loop:n,...r})}),SubTrigger:({className:n,inset:r,children:i,...s})=>o(l.SubTrigger,{"data-slot":`dropdown-menu-sub-trigger`,className:e(`focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden`,`data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item`,`[&>svg]:size-5 [&_svg]:shrink-0`,r&&`pl-8`,n),...s,children:[i,a(`span`,{className:`absolute right-2 flex items-center`,children:a(t,{svg:a(c,{weight:`bold`}),className:`size-4`})})]}),Trigger:d};export{m as t};

package/dist/dropdown-menu.d.ts

@@ -1,3 +1,3 @@
-import { t as DropdownMenu } from "./dropdown-menu-CpsUJGbn.js";
-import "./dropdown-menu-CNaaABck.js";
+import { t as DropdownMenu } from "./dropdown-menu-BYapTV0f.js";
+import "./dropdown-menu-BkPBh_8y.js";
 export { DropdownMenu };

package/dist/dropdown-menu.js

@@ -1 +1 @@
-import{t as e}from"./dropdown-menu-Cy7mLIpJ.js";export{e as DropdownMenu};
+import{t as e}from"./dropdown-menu-lxHsgLiw.js";export{e as DropdownMenu};

package/dist/empty.d.ts

@@ -1,6 +1,6 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
-import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
 //#region src/components/empty/empty.d.ts
 /**
  * The root container for an empty state. Centers content horizontally
@@ -68,7 +68,7 @@ declare const Icon: ({ className, svg, ...props }: EmptyIconProps) => import("re
  * </Empty.Title>
  * ```
  */
-declare const Title: ({ asChild, children, className, ...props }: HTMLAttributes<HTMLHeadingElement> & WithAsChild) => import("react").JSX.Element;
+declare const Title: ({ asChild, children, className, ...props }: ComponentProps<"h3"> & WithAsChild) => import("react").JSX.Element;
 /**
  * Supporting descriptive text below the title. Renders as a `div` with
  * `space-y-4` so multiple paragraphs can be placed inside. Use the `asChild`
@@ -145,8 +145,8 @@ declare const Actions: ({ asChild, children, className, ...props }: ComponentPro
  */
 declare const Empty: {
   /**
-   * The root container for an empty state. Centers content vertically and
-   * horizontally with consistent padding and max-width.
+   * The root container for an empty state. Centers content horizontally
+   * with consistent vertical padding and max-width.
    *
    * @see https://mantle.ngrok.com/components/feedback/empty
    *

package/dist/empty.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-CxM7jdFi.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty`,className:e(`mx-auto flex max-w-lg flex-col items-center p-6 text-center`,a),...o,children:i}),Icon:({className:n,svg:i,...a})=>r(t,{"data-slot":`empty-icon`,className:e(`mb-1 size-10 text-neutral-400`,n),svg:i,...a}),Title:({asChild:t,children:i,className:a,...o})=>r(t?n:`h3`,{"data-slot":`empty-title`,className:e(`text-strong text-sm font-medium font-sans`,a),...o,children:i}),Description:({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-description`,className:e(`text-muted space-y-4 text-sm font-sans`,a),...o,children:i}),Actions:({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-actions`,className:e(`mt-4 flex items-center gap-2`,a),...o,children:i})};export{i as Empty};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-U24NfYv7.js";import{t as n}from"./slot-C3gII_9c.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty`,className:e(`mx-auto flex max-w-lg flex-col items-center p-6 text-center`,a),...o,children:i}),Icon:({className:n,svg:i,...a})=>r(t,{"data-slot":`empty-icon`,className:e(`mb-1 size-10 text-neutral-400`,n),svg:i,...a}),Title:({asChild:t,children:i,className:a,...o})=>r(t?n:`h3`,{"data-slot":`empty-title`,className:e(`text-strong text-sm font-medium font-sans`,a),...o,children:i}),Description:({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-description`,className:e(`text-muted space-y-4 text-sm font-sans`,a),...o,children:i}),Actions:({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-actions`,className:e(`mt-4 flex items-center gap-2`,a),...o,children:i})};export{i as Empty};

package/dist/field.d.ts

@@ -1,9 +1,9 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
-import { i as IconButtonIntent, n as IconButtonProps, r as IconButtonAppearance } from "./button-C39M5h4K.js";
+import { i as IconButtonIntent, n as IconButtonProps, r as IconButtonAppearance } from "./button-crUf0hbR.js";
 import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./field-7QeiTFwl.js";
-import { t as Label } from "./label-C6YH9skg.js";
+import { t as Label } from "./label-Bnfe9YJ6.js";
 import { t as Slot } from "./slot-DdgxmuI5.js";
-import { t as Popover } from "./popover-DDuw1UaJ.js";
+import { t as Popover } from "./popover-s2LhmzfQ.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/field/field-context.d.ts
 /**
@@ -25,8 +25,8 @@ type FieldControlAriaProps = {
    */
   "aria-invalid"?: ComponentProps<"input">["aria-invalid"];
   /**
-   * Stable DOM id for the focusable control, generated by `Field.Item` and
-   * also used as `Field.Label`'s default `htmlFor`.
+   * Stable DOM id for the focusable control: `Field.Item`'s `id` when set,
+   * else an id it generates. `Field.Label` uses it as the default `htmlFor`.
    */
   id?: string;
   /**
@@ -96,25 +96,27 @@ declare const FieldSet: ({ className, ref, ...props }: ComponentProps<"fieldset"
  * ```
  */
 declare const Legend: ({ className, ref, ...props }: ComponentProps<"legend">) => import("react").JSX.Element;
+/**
+ * Props for `Field.Label`: the Mantle `Label` props without `htmlFor`.
+ */
+type FieldLabelProps = Omit<ComponentProps<typeof Label>, "htmlFor">;
 /**
  * Caption for a `Field.Item`. Renders the Mantle `Label` with the same
- * `htmlFor`, click-to-focus, disabled, and typography behavior — but inside a
- * `Field.Item`, the label-to-control association is automatic: `Field.Item`
- * generates a stable control id, `Field.Control` splats that id onto its
- * focusable child, and `Field.Label` consumes the same id as the default
- * `htmlFor`. The required `name` on `Field.Item` is the single source of truth
- * for the control's form name — no matching `htmlFor` / `id` pair, no separate
- * `useId()` call.
+ * click-to-focus, disabled, and typography behavior, and always points its
+ * `htmlFor` at the surrounding `Field.Item`'s control id. `Field.Item` owns
+ * that id (its `id` prop, else a generated one), `Field.Control` splats it
+ * onto the focusable child, and `Field.Label` follows it. `htmlFor` is not a
+ * prop here, so a label and its control cannot drift apart.
  *
- * Pass an explicit `htmlFor` to opt out — for example when the focusable
- * element is rendered outside of `Field.Control` and the auto-generated id
- * never lands on it.
+ * Render the focusable element inside `Field.Control` so the id lands on it.
+ * For a checkbox or switch row, wrap the `Field.Control` in the `Field.Label`;
+ * the label then also names the control by nesting.
  *
  * @see https://mantle.ngrok.com/components/forms/field
  *
  * @example
  * ```tsx
- * // htmlFor is wired automatically from Field.Item's name.
+ * // htmlFor is wired automatically from Field.Item.
  * <Field.Item name="apiKey">
  *   <Field.Label>API key</Field.Label>
  *   <Field.Control>
@@ -122,14 +124,26 @@ declare const Legend: ({ className, ref, ...props }: ComponentProps<"legend">) =
  *   </Field.Control>
  * </Field.Item>
  *
- * // Opt out with an explicit htmlFor when needed.
- * <Field.Item name="legacy">
- *   <Field.Label htmlFor="legacy-control">Legacy field</Field.Label>
- *   <input id="legacy-control" />
+ * // Field.Item's id names the control; the label follows it.
+ * <Field.Item name="password" id="password">
+ *   <Field.Label>Password</Field.Label>
+ *   <Field.Control>
+ *     <PasswordInput />
+ *   </Field.Control>
+ * </Field.Item>
+ *
+ * // A checkbox row: the label wraps the control.
+ * <Field.Item name="terms">
+ *   <Field.Label className="flex items-center gap-2">
+ *     <Field.Control>
+ *       <Checkbox />
+ *     </Field.Control>
+ *     Accept terms and conditions
+ *   </Field.Label>
  * </Field.Item>
  * ```
  */
-declare const FieldLabel: ({ htmlFor, ref, ...props }: ComponentProps<typeof Label>) => import("react").JSX.Element;
+declare const FieldLabel: ({ ref, ...props }: FieldLabelProps) => import("react").JSX.Element;
 /**
  * Static, label-styled text for a `Field.Item` row that does **not** caption a
  * focusable form control. Renders a `<p>` (not a `<label>`) with the same
@@ -374,7 +388,15 @@ declare const Group: ({ asChild, className, ref, ...props }: ComponentProps<"div
 /**
  * Props for `Field.Item`.
  */
-type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
+type FieldItemProps = Omit<ComponentProps<"div">, "id"> & WithAsChild & WithValidation & {
+  /**
+   * DOM id for the focusable control, not for the wrapping `<div>`.
+   * `Field.Control` splats it onto the control and `Field.Label` uses it
+   * as the default `htmlFor`. When omitted, `Field.Item` generates a
+   * stable id. Set it when a test locator or an anchor link must find the
+   * control by id.
+   */
+  id?: string;
   /**
    * Form-value name for the field. Required so `Field.Control` can splat
    * it onto the focusable child while `Field.Item` owns the stable
@@ -395,6 +417,18 @@ type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
  * infer an `"error"` validation state unless `validation` is supplied as an
  * explicit override.
  *
+ * **Server rendering.** The inference runs on the client, so the inferred
+ * `"error"` state applies after hydration. Before that, the server HTML
+ * carries the error list but no `aria-invalid="true"`, `aria-errormessage`, or
+ * `data-validation="error"`. When an error can render on the server, set
+ * `validation={messages.length > 0 && "error"}` on `Field.Item`: an explicit
+ * `validation` reaches the server HTML.
+ *
+ * **Control id.** `Field.Item` owns the control's DOM id, so its `id` prop
+ * names the control, not the wrapping `<div>`. It generates one by default;
+ * pass `id` to set it yourself, and both `Field.Control` and `Field.Label`
+ * follow it. An `id` on the control element itself is overwritten.
+ *
  * **Single-slot constraint.** A `Field.Item` owns one description ID and one
  * errors ID, so render at most one `Field.Description` and one
  * `Field.Errors` *or* `Field.ErrorList` (not both) per item. A second instance
@@ -426,12 +460,13 @@ type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
  * </Field.Group>
  * ```
  */
-declare const Item: ({ asChild, children, className, name, ref, validation: validationProp, ...props }: FieldItemProps) => import("react").JSX.Element;
-type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby" | "aria-errormessage" | "aria-invalid" | "children">;
+declare const Item: ({ asChild, children, className, id: idProp, name, ref, validation: validationProp, ...props }: FieldItemProps) => import("react").JSX.Element;
+type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby" | "aria-errormessage" | "aria-invalid" | "children" | "id">;
 /**
  * Element-child form of `Field.Control`. Renders via `Slot`, so it accepts
  * any HTML/Slot props, including `ref` — those land on the single child
- * element along with the generated ARIA props.
+ * element along with the generated ARIA props. `id` is not a prop here;
+ * `Field.Item` owns the control id.
  */
 type FieldControlElementProps = FieldControlSlotProps & {
   /**
@@ -501,8 +536,9 @@ type FieldControlProps = FieldControlElementProps | FieldControlRenderProps;
  * `Field.Item` owns the full control contract — `id`, `name`, `aria-*`, and
  * `validation` all flow down from the surrounding `Field.Item` and overwrite
  * anything passed on the child. To override these values, set them on
- * `Field.Item` itself (e.g. `<Field.Item validation="error">`); to opt out of
- * the contract entirely, render your control without `Field.Control`.
+ * `Field.Item` itself (`<Field.Item id="password">`,
+ * `<Field.Item validation="error">`); to opt out of the contract entirely,
+ * render your control without `Field.Control`.
  *
  * @see https://mantle.ngrok.com/components/forms/field
  *
@@ -622,6 +658,11 @@ type FieldErrorsProps = Omit<ComponentProps<"ul">, "children" | "id"> & {
  * `Field.Errors` *or* `Field.ErrorList` per item, not both, and pass multiple
  * messages to one `Field.Errors` instead of rendering it twice.
  *
+ * **Server rendering.** The `"error"` state this list infers applies after
+ * hydration. The server HTML carries the list but not the invalid state. When
+ * the messages can render on the server, set
+ * `validation={messages.length > 0 && "error"}` on `Field.Item`.
+ *
  * @see https://mantle.ngrok.com/components/forms/field
  *
  * @example
@@ -663,6 +704,11 @@ declare const FieldErrors: ({ messages, ref, ...props }: FieldErrorsProps) => im
  * per item, not both, and put multiple `Field.ErrorItem` children inside the
  * single list instead of rendering two `Field.ErrorList`s.
  *
+ * **Server rendering.** The `"error"` state this list infers applies after
+ * hydration. The server HTML carries the list but not the invalid state. When
+ * the items can render on the server, set
+ * `validation={errors.length > 0 && "error"}` on `Field.Item`.
+ *
  * @see https://mantle.ngrok.com/components/forms/field
  *
  * @example
@@ -739,6 +785,9 @@ declare const Field: {
    * A single form field. Passes message IDs and validation state to
    * `Field.Control`; rendered errors infer `"error"` validation.
    *
+   * The inferred state applies after hydration. For a server-rendered error,
+   * set `validation` on `Field.Item`.
+   *
    * @see https://mantle.ngrok.com/components/forms/field
    *
    * @example
@@ -868,19 +917,17 @@ declare const Field: {
    */
   readonly Legend: typeof Legend;
   /**
-   * The Mantle `Label`, exposed on `Field` for field composition. Inside a
-   * `Field.Item`, `htmlFor` defaults to the same stable id that `Field.Control`
-   * splats onto its focusable child — so the label-to-control association is
-   * automatic from `Field.Item`'s required `name` and you don't need to thread
-   * a matching `htmlFor` / `id` pair by hand. Pass an explicit `htmlFor` to
-   * opt out (e.g. when the focusable element is rendered outside of
-   * `Field.Control`).
+   * The Mantle `Label`, exposed on `Field` for field composition. Its
+   * `htmlFor` always points at the surrounding `Field.Item`'s control id, the
+   * same id `Field.Control` splats onto its focusable child, so the
+   * label-to-control association needs no `htmlFor` / `id` pair by hand.
+   * `htmlFor` is not a prop; set `id` on `Field.Item` to choose the id.
    *
    * @see https://mantle.ngrok.com/components/forms/field#fieldlabel
    *
    * @example
    * ```tsx
-   * // htmlFor is wired automatically from Field.Item's name.
+   * // htmlFor is wired automatically from Field.Item.
    * <Field.Group>
    *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
@@ -1108,6 +1155,9 @@ declare const Field: {
    * filters empty values, and renders a `Field.ErrorList` with one
    * `Field.ErrorItem` for each remaining message.
    *
+   * The inferred `"error"` state applies after hydration. For a
+   * server-rendered error, set `validation` on `Field.Item`.
+   *
    * @see https://mantle.ngrok.com/components/forms/field
    *
    * @example
@@ -1137,6 +1187,9 @@ declare const Field: {
    * Wraps one or more `Field.ErrorItem` children in a semantic `<ul>`.
    * Renders nothing when given no renderable children.
    *
+   * The inferred `"error"` state applies after hydration. For a
+   * server-rendered error, set `validation` on `Field.Item`.
+   *
    * @see https://mantle.ngrok.com/components/forms/field
    *
    * @example
@@ -1205,10 +1258,10 @@ type FieldError = {
  *
  * @example
  * ```tsx
- * <Field.Item>
- *   <Field.Label htmlFor={field.name}>Email</Field.Label>
+ * <Field.Item name={field.name}>
+ *   <Field.Label>Email</Field.Label>
  *   <Field.Control>
- *     <Input id={field.name} value={field.state.value} />
+ *     <Input value={field.state.value} />
  *   </Field.Control>
  *   <Field.Errors messages={toErrorMessages(field.state.meta.errors)} />
  * </Field.Item>

package/dist/field.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./slot-CxM7jdFi.js";import{t as r}from"./button-BCk0KpWb.js";import{i,n as a,r as o,t as s}from"./field-Bpptk_9t.js";import{n as c,r as l,t as u}from"./field-B1wqeZr4.js";import{t as d}from"./label-D-D11mlp.js";import{t as f}from"./popover-D6x6Bq-G.js";import{Children as p,Fragment as m,cloneElement as h,isValidElement as g,useCallback as _,useContext as v,useId as y,useMemo as b,useState as x}from"react";import S from"tiny-invariant";import{jsx as C}from"react/jsx-runtime";import{QuestionIcon as w}from"@phosphor-icons/react/Question";const T=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},E=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),D=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!g(e)){n=!0;return}if(e.type===t){n=E(e.props.children);return}if(e.type===m){n=D({children:e.props.children,errorItemType:t});return}n=!0}}),n},O=({className:e,ref:n,...r})=>C(`fieldset`,{ref:n,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...r}),k=({className:e,ref:n,...r})=>C(`legend`,{ref:n,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...r}),A=({htmlFor:e,ref:t,...n})=>{let r=v(c);return C(d,{ref:t,htmlFor:e??r?.controlId,...n})},j=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...a}),M=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...a}),N=f.Root,P=C(w,{}),F=({appearance:e=`ghost`,className:n,icon:i=P,intent:a=`neutral`,label:o,ref:s,size:c=`xs`,type:l=`button`,...u})=>C(f.Trigger,{asChild:!0,children:C(r,{ref:s,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,intent:a,label:o,size:c,type:l,...u})}),I=({ref:e,...t})=>C(f.Content,{ref:e,"data-slot":`field-help-content`,...t}),L=({asChild:e,children:r,className:i,ref:a,...o})=>C(e?n:`span`,{ref:a,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...o,children:r??`(Optional)`}),R=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...a}),z=({asChild:e,children:r,className:a,name:o,ref:l,validation:u,...d})=>{let f=e?n:`div`,p=y(),m=y(),h=y(),[g,v]=x(!1),S=i(u??(g?`error`:void 0)),w=_(()=>(v(!0),()=>{v(!1)}),[]),T=b(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:o,registerError:w,validation:S}),[p,m,h,g,o,w,S]);return C(c.Provider,{value:T,children:C(s,{validation:S,children:C(f,{ref:l,"data-slot":`field-item`,"data-validation":S,className:t(`flex w-full flex-col gap-1.5`,a),...d,children:r})})})},B=({children:e,ref:t,...r})=>{let i=v(c),a=l({context:i});return typeof e==`function`?C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(S(g(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:C(n,{ref:t,...r,children:h(e,a.ariaProps)})})}))},V=({asChild:e,className:r,ref:i,...a})=>{let o=e?n:`p`,s=v(c);return C(o,{ref:i,"data-slot":`field-description`,id:s?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...a})},H=({children:e,className:n,ref:r,...i})=>E(e)?C(`li`,{ref:r,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...i,children:e}):null,U=({messages:e,ref:t,...n})=>C(W,{ref:t,...n,children:T(e).map(e=>C(H,{children:e},e))}),W=({asChild:r,children:i,className:a,ref:o,...s})=>{let l=D({children:i,errorItemType:H}),u=v(c),d=u?.registerError;return e(()=>{if(!(!l||d==null))return d()},[l,d]),l?C(r?n:`ul`,{ref:o,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...s,children:i}):null},G={Item:z,Control:B,Group:R,Set:O,Legend:k,Label:A,LabelText:j,LabelRow:M,Help:N,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>T(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,K as toErrorMessages};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-0HCjnNv1.js";import{t as n}from"./slot-C3gII_9c.js";import{t as r}from"./button-CaM-ZAH5.js";import{i,n as a,r as o,t as s}from"./field-Bpptk_9t.js";import{n as c,r as l,t as u}from"./field-B1wqeZr4.js";import{t as d}from"./label-BqIp6kFx.js";import{t as f}from"./popover-Bp-9B3GR.js";import{Children as p,Fragment as m,cloneElement as h,isValidElement as g,useCallback as _,useContext as v,useId as y,useMemo as b,useState as x}from"react";import S from"tiny-invariant";import{jsx as C}from"react/jsx-runtime";import{QuestionIcon as w}from"@phosphor-icons/react/Question";const T=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},E=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),D=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!g(e)){n=!0;return}if(e.type===t){n=E(e.props.children);return}if(e.type===m){n=D({children:e.props.children,errorItemType:t});return}n=!0}}),n},O=({className:e,ref:n,...r})=>C(`fieldset`,{ref:n,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...r}),k=({className:e,ref:n,...r})=>C(`legend`,{ref:n,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...r}),A=({ref:e,...t})=>{let n=v(c);return C(d,{ref:e,...t,htmlFor:n?.controlId})},j=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...a}),M=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...a}),N=f.Root,P=C(w,{}),F=({appearance:e=`ghost`,className:n,icon:i=P,intent:a=`neutral`,label:o,ref:s,size:c=`xs`,type:l=`button`,...u})=>C(f.Trigger,{asChild:!0,children:C(r,{ref:s,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,intent:a,label:o,size:c,type:l,...u})}),I=({ref:e,...t})=>C(f.Content,{ref:e,"data-slot":`field-help-content`,...t}),L=({asChild:e,children:r,className:i,ref:a,...o})=>C(e?n:`span`,{ref:a,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...o,children:r??`(Optional)`}),R=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...a}),z=({asChild:e,children:r,className:a,id:o,name:l,ref:u,validation:d,...f})=>{let p=e?n:`div`,m=y(),h=o??m,g=y(),v=y(),[S,w]=x(!1),T=i(d??(S?`error`:void 0)),E=_(()=>(w(!0),()=>{w(!1)}),[]),D=b(()=>({controlId:h,descriptionId:g,errorId:v,name:l,registerError:E,validation:T}),[h,g,v,l,E,T]);return C(c.Provider,{value:D,children:C(s,{validation:T,children:C(p,{ref:u,"data-slot":`field-item`,"data-validation":T,className:t(`flex w-full flex-col gap-1.5`,a),...f,children:r})})})},B=({children:e,ref:t,...r})=>{let i=v(c),a=l({context:i});return typeof e==`function`?C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(S(g(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:C(n,{ref:t,...r,children:h(e,a.ariaProps)})})}))},V=({asChild:e,className:r,ref:i,...a})=>{let o=e?n:`p`,s=v(c);return C(o,{ref:i,"data-slot":`field-description`,id:s?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...a})},H=({children:e,className:n,ref:r,...i})=>E(e)?C(`li`,{ref:r,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...i,children:e}):null,U=({messages:e,ref:t,...n})=>C(W,{ref:t,...n,children:T(e).map(e=>C(H,{children:e},e))}),W=({asChild:r,children:i,className:a,ref:o,...s})=>{let l=D({children:i,errorItemType:H}),u=v(c),d=u?.registerError;return e(()=>{if(l&&d!=null)return d()},[l,d]),l?C(r?n:`ul`,{ref:o,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...s,children:i}):null},G={Item:z,Control:B,Group:R,Set:O,Legend:k,Label:A,LabelText:j,LabelRow:M,Help:N,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>T(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,K as toErrorMessages};