@ngrok/mantle 0.82.1 → 0.83.1

package/dist/accordion.d.ts

@@ -59,7 +59,7 @@ type AccordionMultipleProps = {
 type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit<ComponentProps<"div">, "defaultValue"> & WithAsChild;
 /**
  * A vertically stacked set of disclosure sections. The root owns the open/closed
- * state and provides it to its items.
+ * state and passes it to its items.
  *
  * Built without a UI framework's collapsible: each section's collapsed content
  * stays in the DOM with `hidden="until-found"`, so the browser's find-in-page
@@ -73,10 +73,10 @@ type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit
  * the classic accordion where opening a section auto-closes the previously open
  * one.
  *
- * Items are separated by a hairline divider drawn with `divide-y` on the root,
- * colored with the shared `separator` token so it matches `Separator` and every
- * other divider in the system. Disable the dividers with `divide-y-0` on the root
- * (e.g. pair it with `space-y-*` for a spaced-card layout).
+ * `divide-y` on the root draws a hairline divider between items. The shared
+ * `separator` token colors it, so it matches `Separator` and every other divider
+ * in the system. Disable the dividers with `divide-y-0` on the root (e.g. pair it
+ * with `space-y-*` for a spaced-card layout).
  *
  * @see https://mantle.ngrok.com/components/data-display/accordion#accordionroot
  *
@@ -99,7 +99,7 @@ declare const Root: (props: AccordionRootProps) => import("react").JSX.Element;
  * same accessibility role the browser gives a native `<details>`. Derives its
  * open state from {@link Root}.
  *
- * Because the item is just a `<div>`, its header can be any layout — e.g. a flex
+ * Because the item is a plain `<div>`, its header can be any layout — e.g. a flex
  * row with the {@link Trigger} alongside a separate, non-toggling action button.
  *
  * @see https://mantle.ngrok.com/components/data-display/accordion#accordionitem
@@ -123,7 +123,7 @@ declare const Item: ({ children, value, ref, ...props }: ComponentProps<"div"> &
 }) => import("react").JSX.Element;
 /**
  * The interactive header that toggles its section, rendered as a `<button>` with
- * `aria-expanded` — the disclosure semantics a native `<summary>` provides, but
+ * `aria-expanded` — the disclosure semantics a native `<summary>` carries, but
  * via a real button so the role is consistent across browsers (native summary's
  * role varies). Place the {@link TriggerIcon} as the last child so the default
  * `justify-between` layout pushes it to the trailing edge.

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.82.1",
+	"version": "0.83.1",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -23,6 +23,7 @@
 		"@ngrok/mantle/anchor",
 		"@ngrok/mantle/app-layout",
 		"@ngrok/mantle/area-chart",
+		"@ngrok/mantle/avatar",
 		"@ngrok/mantle/badge",
 		"@ngrok/mantle/bar-chart",
 		"@ngrok/mantle/breadcrumb",
@@ -65,6 +66,7 @@
 		"@ngrok/mantle/progress",
 		"@ngrok/mantle/qr-code",
 		"@ngrok/mantle/radio-group",
+		"@ngrok/mantle/sandbar",
 		"@ngrok/mantle/sandboxed-on-click",
 		"@ngrok/mantle/scatter-plot",
 		"@ngrok/mantle/select",

package/dist/{alert-BWwNPOMI.d.ts → alert-B1HXfkYn.d.ts}

@@ -1,7 +1,7 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
-import { r as ButtonProps } from "./button-DARFK2KJ.js";
-import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
+import { r as ButtonProps } from "./button-PoIujPMX.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-DJ7AAgII.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert/alert.d.ts
 declare const intents: readonly ["danger", "important", "info", "success", "warning"];
@@ -16,7 +16,7 @@ type AlertProps = ComponentProps<"div"> & {
   intent: AlertIntent;
   /**
    * Controls the visual style of the Alert.
-   * - "default" provides standard rounded corners and borders.
+   * - "default" keeps the standard rounded corners and borders.
    * - "banner" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.
    *
    * @default "default"
@@ -59,9 +59,9 @@ type AlertIconProps = Omit<SvgAttributes, "children"> & {
   svg?: ReactNode;
 };
 /**
- * An optional icon that visually represents the intent of the Alert.
+ * An optional icon that visually represents the intent of the `Alert`.
  *
- * The default rendered icon be overridden with a custom icon using the `svg` prop.
+ * Pass the `svg` prop to replace the default icon.
  *
  * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
  *
@@ -327,7 +327,7 @@ declare const Alert: {
    */
   readonly Description: typeof Description;
   /**
-   * An optional dismiss button that can be used to close the alert.
+   * An optional, compact, trailing control for dismissing an alert.
    * It inherits the `--alert-control-color`, `--alert-control-hover-color`, and
    * `--alert-control-hover-bg` variables from `Alert.Root`, shared with the
    * expand control.
@@ -349,7 +349,9 @@ declare const Alert: {
    */
   readonly DismissIconButton: typeof DismissIconButton;
   /**
-   * An optional icon that visually represents the intent of the Alert.
+   * An optional icon that visually represents the intent of the `Alert`.
+   *
+   * Pass the `svg` prop to replace the default icon.
    *
    * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
    *

package/dist/{alert-vwFd7qdp.js → alert-BuG2qS5l.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./button-Cnja9Bsr.js";import{t as a}from"./button-IlxHhjPK.js";import{CaretDownIcon as o}from"@phosphor-icons/react/CaretDown";import{createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as m}from"@phosphor-icons/react/Info";import{MegaphoneIcon as h}from"@phosphor-icons/react/Megaphone";import{WarningIcon as g}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as _}from"@phosphor-icons/react/WarningDiamond";import{XIcon as v}from"@phosphor-icons/react/X";import{cva as y}from"class-variance-authority";const b=s(null),x=d(v,{});function S(){let e=c(b);return u(e,`useAlertContext hook used outside of Alert parent!`),e}const C=({children:e,intent:t})=>{let n=l(()=>({intent:t}),[t]);return d(b.Provider,{value:n,children:e})},w=y(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{intent:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a:not([data-slot=button])]:text-danger-700 [&_a:not([data-slot=button])]:underline`,important:`border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a:not([data-slot=button])]:text-important-700 [&_a:not([data-slot=button])]:underline`,info:`border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a:not([data-slot=button])]:text-info-700 [&_a:not([data-slot=button])]:underline`,success:`border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a:not([data-slot=button])]:text-success-700 [&_a:not([data-slot=button])]:underline`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a:not([data-slot=button])]:text-warning-700 [&_a:not([data-slot=button])]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}}}),T=({appearance:t=`default`,className:n,intent:i,ref:a,style:o,...s})=>d(C,{intent:i,children:d(`div`,{ref:a,"data-slot":`alert`,className:e(w({appearance:t,intent:i}),`has-data-alert-dismiss:pr-10`,`has-data-alert-expand:[&_[data-slot=alert-dismiss-icon-button]]:right-16`,`md:has-data-alert-expand:[&_[data-slot=alert-dismiss-icon-button]]:right-24`,`has-data-alert-expand:[&_[data-slot=alert-content]]:pr-12`,`md:has-data-alert-expand:[&_[data-slot=alert-content]]:pr-[5.5rem]`,n),style:r({"--alert-control-color":j(i),"--alert-control-hover-color":M(i),"--alert-control-hover-bg":N(i),...o}),...s})}),E={danger:d(g,{}),important:d(h,{mirrored:!0}),info:d(m,{}),success:d(p,{}),warning:d(_,{})},D=({className:n,ref:r,svg:i,...a})=>{let o=S(),s=E[o.intent];return d(t,{ref:r,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:i??s,...a})},O=({className:t,ref:n,...r})=>d(`div`,{ref:n,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...r}),k=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`h5`,{ref:i,"data-slot":`alert-title`,className:e(`font-medium`,r),...a}),A=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`div`,{ref:i,"data-slot":`alert-description`,className:e(`text-sm`,r),...a}),j=e=>`var(--color-${e}-700)`,M=e=>`var(--color-${e}-800)`,N=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,P={Root:T,Content:O,ExpandButton:({count:t,expanded:n,className:r,...a})=>f(i,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,"aria-expanded":n,"aria-label":n?`Collapse additional alerts`:`Show ${t} more ${t===1?`alert`:`alerts`}`,"data-slot":`alert-expand-button`,"data-alert-expand":!0,className:e(`right-1.5 top-1.5 absolute gap-1 px-1.5`,`text-[var(--alert-control-color,currentColor)]`,`not-disabled:hover:bg-[var(--alert-control-hover-bg,transparent)] not-disabled:hover:text-[var(--alert-control-hover-color,currentColor)]`,r),...a,children:[f(`span`,{className:`min-w-[2ch] text-center tabular-nums`,children:[`+`,t]}),d(`span`,{className:`hidden md:inline`,children:`more`}),d(o,{weight:`bold`,className:e(`size-4 transition-transform ease-out duration-150`,n&&`-rotate-180`)})]}),Description:A,DismissIconButton:({size:t=`sm`,type:n=`button`,label:r=`Dismiss Alert`,appearance:i=`ghost`,className:o,icon:s=x,...c})=>d(a,{appearance:i,icon:s,intent:`neutral`,label:r,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-[var(--alert-control-color,currentColor)]`,`not-disabled:hover:bg-[var(--alert-control-hover-bg,transparent)] not-disabled:hover:text-[var(--alert-control-hover-color,currentColor)]`,o),type:n,...c}),Icon:D,Title:k};export{C as n,P as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./button-Cnja9Bsr.js";import{t as a}from"./button-CCkGqE1t.js";import{CaretDownIcon as o}from"@phosphor-icons/react/CaretDown";import{createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as m}from"@phosphor-icons/react/Info";import{MegaphoneIcon as h}from"@phosphor-icons/react/Megaphone";import{WarningIcon as g}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as _}from"@phosphor-icons/react/WarningDiamond";import{XIcon as v}from"@phosphor-icons/react/X";import{cva as y}from"class-variance-authority";const b=s(null),x=d(v,{});function S(){let e=c(b);return u(e,`useAlertContext hook used outside of Alert parent!`),e}const C=({children:e,intent:t})=>{let n=l(()=>({intent:t}),[t]);return d(b.Provider,{value:n,children:e})},w=y(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{intent:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a:not([data-slot=button])]:text-danger-700 [&_a:not([data-slot=button])]:underline`,important:`border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a:not([data-slot=button])]:text-important-700 [&_a:not([data-slot=button])]:underline`,info:`border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a:not([data-slot=button])]:text-info-700 [&_a:not([data-slot=button])]:underline`,success:`border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a:not([data-slot=button])]:text-success-700 [&_a:not([data-slot=button])]:underline`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a:not([data-slot=button])]:text-warning-700 [&_a:not([data-slot=button])]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}}}),T=({appearance:t=`default`,className:n,intent:i,ref:a,style:o,...s})=>d(C,{intent:i,children:d(`div`,{ref:a,"data-slot":`alert`,className:e(w({appearance:t,intent:i}),`has-data-alert-dismiss:pr-10`,`has-data-alert-expand:[&_[data-slot=alert-dismiss-icon-button]]:right-16`,`md:has-data-alert-expand:[&_[data-slot=alert-dismiss-icon-button]]:right-24`,`has-data-alert-expand:[&_[data-slot=alert-content]]:pr-12`,`md:has-data-alert-expand:[&_[data-slot=alert-content]]:pr-[5.5rem]`,n),style:r({"--alert-control-color":j(i),"--alert-control-hover-color":M(i),"--alert-control-hover-bg":N(i),...o}),...s})}),E={danger:d(g,{}),important:d(h,{mirrored:!0}),info:d(m,{}),success:d(p,{}),warning:d(_,{})},D=({className:n,ref:r,svg:i,...a})=>{let o=S(),s=E[o.intent];return d(t,{ref:r,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:i??s,...a})},O=({className:t,ref:n,...r})=>d(`div`,{ref:n,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...r}),k=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`h5`,{ref:i,"data-slot":`alert-title`,className:e(`font-medium`,r),...a}),A=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`div`,{ref:i,"data-slot":`alert-description`,className:e(`text-sm`,r),...a}),j=e=>`var(--color-${e}-700)`,M=e=>`var(--color-${e}-800)`,N=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,P={Root:T,Content:O,ExpandButton:({count:t,expanded:n,className:r,...a})=>f(i,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,"aria-expanded":n,"aria-label":n?`Collapse additional alerts`:`Show ${t} more ${t===1?`alert`:`alerts`}`,"data-slot":`alert-expand-button`,"data-alert-expand":!0,className:e(`right-1.5 top-1.5 absolute gap-1 px-1.5`,`text-[var(--alert-control-color,currentColor)]`,`not-disabled:hover:bg-[var(--alert-control-hover-bg,transparent)] not-disabled:hover:text-[var(--alert-control-hover-color,currentColor)]`,r),...a,children:[f(`span`,{className:`min-w-[2ch] text-center tabular-nums`,children:[`+`,t]}),d(`span`,{className:`hidden md:inline`,children:`more`}),d(o,{weight:`bold`,className:e(`size-4 transition-transform ease-out duration-150`,n&&`-rotate-180`)})]}),Description:A,DismissIconButton:({size:t=`sm`,type:n=`button`,label:r=`Dismiss Alert`,appearance:i=`ghost`,className:o,icon:s=x,...c})=>d(a,{appearance:i,icon:s,intent:`neutral`,label:r,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-[var(--alert-control-color,currentColor)]`,`not-disabled:hover:bg-[var(--alert-control-hover-bg,transparent)] not-disabled:hover:text-[var(--alert-control-hover-color,currentColor)]`,o),type:n,...c}),Icon:D,Title:k};export{C as n,P as t};

package/dist/alert-center.d.ts

@@ -1,5 +1,5 @@
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
-import { t as Alert } from "./alert-BWwNPOMI.js";
+import { t as Alert } from "./alert-B1HXfkYn.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert-center/alert-center.d.ts
 /**
@@ -130,7 +130,7 @@ type AlertCenterItemProps = {
   /**
    * The banner content: compose `Alert.Icon`, `Alert.Content`, `Alert.Title`,
    * `Alert.Description`, and `AlertCenter.DismissIconButton`. Do NOT include
-   * `Alert.Root` — the center provides the chrome (with this item's `intent`)
+   * `Alert.Root` — the center renders the chrome (with this item's `intent`)
    * at whichever placement the item ranks into.
    */
   children: ReactNode;
@@ -140,7 +140,7 @@ type AlertCenterItemProps = {
  * with the center and renders its children through a portal into a stable
  * per-id host element that `AlertCenter.Bar` / `AlertCenter.Content`
  * physically adopt into their chrome. Mount it to show the alert, unmount it
- * to remove it — dismissal is just your state flipping the condition off.
+ * to remove it — dismissal is your state flipping the condition off.
  *
  * Because the children stay in YOUR React tree (only their DOM lands in the
  * chrome), context providers and error boundaries around the item work, and

package/dist/alert-center.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{n as i,t as a}from"./alert-vwFd7qdp.js";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useReducer as f,useRef as p,useState as m,useSyncExternalStore as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{createPortal as y}from"react-dom";const b={danger:5,warning:4,important:3,info:2,success:1};function x(e,t){if(t.parentElement===e)return!1;if(typeof e.moveBefore==`function`&&t.isConnected&&e.isConnected)try{return e.moveBefore(t,null),!0}catch{}return e.appendChild(t),!0}function S(e){return e.replace(/\s+/g,` `).trim()}function C(e){let t=e.querySelector(`[data-slot="alert-title"]`);if(t==null)return``;let n=t.cloneNode(!0);if(!(n instanceof Element))return S(t.textContent??``);for(let e of n.querySelectorAll(`button`))e.remove();let r=S(n.textContent??``);for(let e of n.querySelectorAll(`a`))e.remove();let i=S(n.textContent??``);return i===``?r:i}function w(e){return e.toSorted((e,t)=>b[t.intent]-b[e.intent]||e.sequence-t.sequence)}function T(e,t){if(t===0)return``;if(e===``)return`${t} alert${t===1?``:`s`}`;let n=t-1;return n===0?e:`${e}, and ${n} more alert${n===1?``:`s`}`}const E=[];var D=class{#e=new Set;#t=new Map;#n=new Map;#r=new Map;#i=0;#a=E;#o=``;#s=!1;getHost(e){let t=this.#r.get(e);if(t!=null)return t;let n=document.createElement(`div`);return n.style.display=`contents`,n.setAttribute(`data-slot`,`alert-center-item-host`),n.setAttribute(`data-alert-host`,e),this.#r.set(e,n),n}#c=null;captureHostSnapshot(e){if(e!==this.#a[0]?.id)return;let t=this.#r.get(e);t!=null&&t.hasChildNodes()&&(this.#c={id:e,content:t.cloneNode(!0)})}getHostSnapshot=e=>this.#c?.id===e?this.#c.content:null;subscribe=e=>(this.#e.add(e),()=>{this.#e.delete(e)});getSnapshot=()=>this.#a;hasAlert=e=>this.#t.has(e);getTopLabel=()=>this.#o;setTopLabel(e){this.#o!==e&&(this.#o=e,this.#p())}#l=null;requestFocusRestore(e){this.#l=e}flushFocusRestore(){let e=this.#l;e==null||!e.isConnected||(this.#l=null,document.activeElement!==e&&e.focus({preventScroll:!0}))}#u=null;#d=0;getPlacementVersion=()=>this.#d;notifyPlacementChange(){this.#d++,this.#p()}setBarElement(e){this.#u=e}getBarElement=()=>this.#u;getContentMounted=()=>this.#s;setContentMounted(e){this.#s!==e&&(this.#s=e,this.#p())}register(e){g(!this.#t.has(e.id),`AlertCenter.Item id "${e.id}" is already registered by another mounted item — ids must be unique under one <AlertCenter.Root>. Render one item per id, or give each alert its own id.`);let t=this.#n.get(e.id)??this.#i++;this.#n.set(e.id,t);let n={...e,sequence:t};return this.#t.set(e.id,n),this.#f(),()=>{this.#t.get(e.id)===n&&(this.#t.delete(e.id),this.#f())}}#f(){this.#a=w([...this.#t.values()]),this.#p()}#p(){for(let e of this.#e)e()}};const O=o(null),k=o(null);function A(e){let t=c(O);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}function j(e){let t=c(k);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}const M=e=>h(e.subscribe,e.getSnapshot,e.getSnapshot),N=o(!1);function P({store:e}){let t=M(e);return _(`div`,{"data-slot":`alert-center-announcer`,className:`sr-only`,role:`status`,"aria-live":`polite`,children:T(h(e.subscribe,e.getTopLabel,e.getTopLabel),t.length)})}const F=({children:e,defaultOpen:t,onOpenChange:n,open:r})=>{let[i]=m(()=>new D),a=u(),[o,c]=m(t??!1),l=r??o,f=s(e=>{r??c(e),n?.(e)},[r,n]),p=d(()=>({store:i,contentId:a}),[i,a]),h=d(()=>({isExpanded:l,setExpanded:f}),[l,f]);return v(O.Provider,{value:p,children:[_(k.Provider,{value:h,children:e}),_(P,{store:i})]})},I=({children:t,className:n,id:r,intent:a})=>{let{store:o}=A(`AlertCenter.Item`);g(!c(N),`AlertCenter.Item cannot be rendered inside another item's children.`);let[s,l]=m(null);return e(()=>{l(o.getHost(r))},[o,r]),e(()=>o.register({id:r,intent:a,className:n}),[o,r,a,n]),e(()=>{o.captureHostSnapshot(r)}),s==null?null:y(_(i,{intent:a,children:_(N.Provider,{value:!0,children:t})}),s)},L=({"data-slot":n,label:i,ref:o,...s})=>{g(c(N),`AlertCenter.DismissIconButton must be composed inside an <AlertCenter.Item>'s children.`);let{store:l}=A(`AlertCenter.DismissIconButton`);h(l.subscribe,l.getPlacementVersion,l.getPlacementVersion);let u=p(null),d=t(u,o),[f,v]=m(null);return e(()=>{if(i!=null)return;let e=u.current?.closest(`[data-alert-id]`),t=e==null?``:C(e);v(t===``?null:`Dismiss ${t}`)}),_(a.DismissIconButton,{ref:d,label:i??f??void 0,...s,"data-slot":r(n,`alert-center-dismiss-icon-button`)})};function R(e,t){switch(t){case`show`:return`open`;case`hide`:return e===`closed`?`closed`:`closing`;case`exited`:return e===`closing`?`closed`:e}}function z({present:t}){let[n,r]=f(R,t?`open`:`closed`);e(()=>{r(t?`show`:`hide`)},[t]),l(()=>{if(n!==`closing`)return;let e=window.setTimeout(()=>r(`exited`),200);return()=>window.clearTimeout(e)},[n]);let i=s(e=>{e.target===e.currentTarget&&e.propertyName===`height`&&r(`exited`)},[]);return{isMounted:n!==`closed`,dataState:n===`open`?`open`:`closed`,onExitTransitionEnd:i}}function B({containerRef:t,isAttached:n}){let r=p(null);return e(()=>{let e=t.current;if(!n||e==null)return;let i=e=>{e.target instanceof Element&&(r.current=e.target)},a=t=>{t.relatedTarget instanceof Node&&!e.contains(t.relatedTarget)&&(r.current=null)};return e.addEventListener(`focusin`,i),e.addEventListener(`focusout`,a),()=>{e.removeEventListener(`focusin`,i),e.removeEventListener(`focusout`,a)}},[t,n]),{lastFocusedWithinRef:r}}function V(){let e=document.querySelector(`main, [role="main"]`);e!=null&&(e.hasAttribute(`tabindex`)||(e.tabIndex=-1),e.focus({preventScroll:!0}))}function H({isMounted:t,store:n,topId:r}){let i=p(null),{lastFocusedWithinRef:a}=B({containerRef:i,isAttached:t}),o=p(r);return e(()=>{let e=o.current;if(o.current=r,e==null||r===e)return;let t=a.current;if(n.hasAlert(e)){t instanceof HTMLElement&&document.activeElement!==t&&n.requestFocusRestore(t);return}if(t==null||t.isConnected)return;a.current=null;let s=i.current;if(r==null){V();return}s!=null&&(s.querySelector(`[data-alert-dismiss], [data-alert-expand]`)??s).focus()},[n,r]),{wrapperRef:i}}const U=`gap-2 py-2 pr-2 [&_[data-slot=alert-icon]]:shrink-0`,W={Root:F,Bar:({className:t,"data-slot":i,ref:o,...s})=>{let{store:c,contentId:l}=A(`AlertCenter.Bar`),{isExpanded:u,setExpanded:d}=j(`AlertCenter.Bar`),f=M(c),m=h(c.subscribe,c.getContentMounted,c.getContentMounted),g=f[0]??null,y=g!=null,{isMounted:b,dataState:S,onExitTransitionEnd:w}=z({present:y}),T=p(g);e(()=>{g!=null&&(T.current=g)},[g]);let E=g??T.current,D=p(null);e(()=>{let e=D.current;if(e==null)return;if(g!=null){let t=c.getHost(g.id);t.parentElement!==e&&e.childNodes.length>0&&e.replaceChildren(),x(e,t)&&c.notifyPlacementChange(),c.flushFocusRestore();return}let t=E==null?null:c.getHostSnapshot(E.id);t!=null&&t.parentNode!==e&&e.replaceChildren(t)});let{wrapperRef:O}=H({isMounted:b,store:c,topId:g?.id});if(e(()=>{let e=O.current;c.setTopLabel(y&&e!=null?C(e):``)}),e(()=>{let e=O.current;if(e==null)return;let t=new MutationObserver(()=>{c.setTopLabel(y?C(e):``)});return t.observe(e,{subtree:!0,childList:!0,characterData:!0}),()=>{t.disconnect()}},[c,y,b]),e(()=>()=>{c.setTopLabel(``)},[c]),e(()=>{c.setBarElement(O.current)}),e(()=>()=>{c.setBarElement(null)},[c]),!b||E==null)return null;let k=y?f.length-1:0;return _(`div`,{ref:O,"data-slot":`alert-center-bar-wrapper`,tabIndex:-1,inert:!y,className:`shrink-0 overflow-hidden transition-[height,opacity] duration-200 ease-out [interpolate-size:allow-keywords] starting:h-0 starting:opacity-0 data-state-closed:h-0 data-state-closed:opacity-0 data-state-closed:duration-150 motion-reduce:transition-none`,"data-state":S,onTransitionEnd:w,children:v(a.Root,{ref:o,appearance:`banner`,intent:E.intent,className:n(U,`not-has-data-[slot=alert-description]:[&_[data-alert-dismiss],&_[data-alert-expand]]:top-1/2 not-has-data-[slot=alert-description]:[&_[data-alert-dismiss],&_[data-alert-expand]]:-translate-y-1/2`,`has-data-alert-expand:[&_[data-alert-dismiss]]:right-16 md:has-data-alert-expand:[&_[data-alert-dismiss]]:right-24`,t,E.className),...s,"data-slot":r(i,`alert-center-bar`),"data-placement":`bar`,"data-alert-id":E.id,children:[_(`div`,{ref:D,className:`contents`,"data-slot":`alert-center-bar-mount`}),k>0&&m&&_(a.ExpandButton,{count:k,expanded:u,"aria-controls":l,onClick:()=>d(!u)})]})})},Content:({"aria-label":i=`More alerts`,"aria-labelledby":o,className:s,"data-slot":c,ref:l,...u})=>{let{store:d,contentId:f}=A(`AlertCenter.Content`),{isExpanded:m,setExpanded:h}=j(`AlertCenter.Content`),g=M(d).slice(1),v=g.length>0;e(()=>(d.setContentMounted(!0),()=>{d.setContentMounted(!1)}),[d]);let y=p(v);e(()=>{let e=y.current&&!v;y.current=v,e&&m&&h(!1)},[v,m,h]);let b=p(null),S=t(b,l),{lastFocusedWithinRef:C}=B({containerRef:b,isAttached:v}),w=g.map(e=>e.id).join(` `);return e(()=>{let e=b.current;if(e==null)return;let t=!1;for(let n of e.querySelectorAll(`[data-alert-mount]`)){let e=n.getAttribute(`data-alert-mount`);e!=null&&x(n,d.getHost(e))&&(t=!0)}t&&d.notifyPlacementChange(),d.flushFocusRestore()},[d,w]),e(()=>{let e=C.current;if(e==null)return;if(e.isConnected){let t=b.current;e instanceof HTMLElement&&document.activeElement!==e&&(t==null||!t.contains(e))&&(C.current=null,e.focus({preventScroll:!0}));return}C.current=null;let t=b.current?.querySelector(`[data-alert-dismiss]`);if(t!=null){t.focus();return}let n=d.getBarElement()?.querySelector(`[data-alert-dismiss], [data-alert-expand]`);if(n!=null){n.focus();return}V()},[d,w]),g.length===0?null:_(`div`,{...u,ref:S,"data-slot":r(c,`alert-center-content`),id:f,"data-state":m?`open`:`closed`,className:n(`h-0 overflow-hidden invisible [content-visibility:hidden] transition-[height,visibility,content-visibility] transition-discrete duration-200 ease-out [interpolate-size:allow-keywords] data-state-open:h-auto data-state-open:visible data-state-open:[content-visibility:visible] motion-reduce:transition-none`,s),children:_(`ul`,{"aria-label":o==null?i:void 0,"aria-labelledby":o,className:`flex w-full flex-col`,children:g.map(e=>_(`li`,{children:_(a.Root,{appearance:`banner`,intent:e.intent,className:n(U,e.className),"data-slot":`alert-center-item`,"data-placement":`list`,"data-alert-id":e.id,children:_(`div`,{className:`contents`,"data-alert-mount":e.id})})},e.id))})})},Item:I,DismissIconButton:L};export{W as AlertCenter};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{n as i,t as a}from"./alert-BuG2qS5l.js";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useReducer as f,useRef as p,useState as m,useSyncExternalStore as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{createPortal as y}from"react-dom";const b={danger:5,warning:4,important:3,info:2,success:1};function x(e,t){if(t.parentElement===e)return!1;if(typeof e.moveBefore==`function`&&t.isConnected&&e.isConnected)try{return e.moveBefore(t,null),!0}catch{}return e.appendChild(t),!0}function S(e){return e.replace(/\s+/g,` `).trim()}function C(e){let t=e.querySelector(`[data-slot="alert-title"]`);if(t==null)return``;let n=t.cloneNode(!0);if(!(n instanceof Element))return S(t.textContent??``);for(let e of n.querySelectorAll(`button`))e.remove();let r=S(n.textContent??``);for(let e of n.querySelectorAll(`a`))e.remove();let i=S(n.textContent??``);return i===``?r:i}function w(e){return e.toSorted((e,t)=>b[t.intent]-b[e.intent]||e.sequence-t.sequence)}function T(e,t){if(t===0)return``;if(e===``)return`${t} alert${t===1?``:`s`}`;let n=t-1;return n===0?e:`${e}, and ${n} more alert${n===1?``:`s`}`}const E=[];var D=class{#e=new Set;#t=new Map;#n=new Map;#r=new Map;#i=0;#a=E;#o=``;#s=!1;getHost(e){let t=this.#r.get(e);if(t!=null)return t;let n=document.createElement(`div`);return n.style.display=`contents`,n.setAttribute(`data-slot`,`alert-center-item-host`),n.setAttribute(`data-alert-host`,e),this.#r.set(e,n),n}#c=null;captureHostSnapshot(e){if(e!==this.#a[0]?.id)return;let t=this.#r.get(e);t!=null&&t.hasChildNodes()&&(this.#c={id:e,content:t.cloneNode(!0)})}getHostSnapshot=e=>this.#c?.id===e?this.#c.content:null;subscribe=e=>(this.#e.add(e),()=>{this.#e.delete(e)});getSnapshot=()=>this.#a;hasAlert=e=>this.#t.has(e);getTopLabel=()=>this.#o;setTopLabel(e){this.#o!==e&&(this.#o=e,this.#p())}#l=null;requestFocusRestore(e){this.#l=e}flushFocusRestore(){let e=this.#l;e==null||!e.isConnected||(this.#l=null,document.activeElement!==e&&e.focus({preventScroll:!0}))}#u=null;#d=0;getPlacementVersion=()=>this.#d;notifyPlacementChange(){this.#d++,this.#p()}setBarElement(e){this.#u=e}getBarElement=()=>this.#u;getContentMounted=()=>this.#s;setContentMounted(e){this.#s!==e&&(this.#s=e,this.#p())}register(e){g(!this.#t.has(e.id),`AlertCenter.Item id "${e.id}" is already registered by another mounted item — ids must be unique under one <AlertCenter.Root>. Render one item per id, or give each alert its own id.`);let t=this.#n.get(e.id)??this.#i++;this.#n.set(e.id,t);let n={...e,sequence:t};return this.#t.set(e.id,n),this.#f(),()=>{this.#t.get(e.id)===n&&(this.#t.delete(e.id),this.#f())}}#f(){this.#a=w([...this.#t.values()]),this.#p()}#p(){for(let e of this.#e)e()}};const O=o(null),k=o(null);function A(e){let t=c(O);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}function j(e){let t=c(k);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}const M=e=>h(e.subscribe,e.getSnapshot,e.getSnapshot),N=o(!1);function P({store:e}){let t=M(e),n=h(e.subscribe,e.getTopLabel,e.getTopLabel);return _(`div`,{"data-slot":`alert-center-announcer`,className:`sr-only`,role:`status`,"aria-live":`polite`,children:T(n,t.length)})}const F=({children:e,defaultOpen:t,onOpenChange:n,open:r})=>{let[i]=m(()=>new D),a=u(),[o,c]=m(t??!1),l=r??o,f=s(e=>{r??c(e),n?.(e)},[r,n]),p=d(()=>({store:i,contentId:a}),[i,a]),h=d(()=>({isExpanded:l,setExpanded:f}),[l,f]);return v(O.Provider,{value:p,children:[_(k.Provider,{value:h,children:e}),_(P,{store:i})]})},I=({children:t,className:n,id:r,intent:a})=>{let{store:o}=A(`AlertCenter.Item`),s=c(N);g(!s,`AlertCenter.Item cannot be rendered inside another item's children.`);let[l,u]=m(null);return e(()=>{u(o.getHost(r))},[o,r]),e(()=>o.register({id:r,intent:a,className:n}),[o,r,a,n]),e(()=>{o.captureHostSnapshot(r)}),l==null?null:y(_(i,{intent:a,children:_(N.Provider,{value:!0,children:t})}),l)},L=({"data-slot":n,label:i,ref:o,...s})=>{let l=c(N);g(l,`AlertCenter.DismissIconButton must be composed inside an <AlertCenter.Item>'s children.`);let{store:u}=A(`AlertCenter.DismissIconButton`);h(u.subscribe,u.getPlacementVersion,u.getPlacementVersion);let d=p(null),f=t(d,o),[v,y]=m(null);return e(()=>{if(i!=null)return;let e=d.current?.closest(`[data-alert-id]`),t=e==null?``:C(e);y(t===``?null:`Dismiss ${t}`)}),_(a.DismissIconButton,{ref:f,label:i??v??void 0,...s,"data-slot":r(n,`alert-center-dismiss-icon-button`)})};function R(e,t){switch(t){case`show`:return`open`;case`hide`:return e===`closed`?`closed`:`closing`;case`exited`:return e===`closing`?`closed`:e}}function z({present:t}){let[n,r]=f(R,t?`open`:`closed`);e(()=>{r(t?`show`:`hide`)},[t]),l(()=>{if(n!==`closing`)return;let e=window.setTimeout(()=>r(`exited`),200);return()=>window.clearTimeout(e)},[n]);let i=s(e=>{e.target===e.currentTarget&&e.propertyName===`height`&&r(`exited`)},[]);return{isMounted:n!==`closed`,dataState:n===`open`?`open`:`closed`,onExitTransitionEnd:i}}function B({containerRef:t,isAttached:n}){let r=p(null);return e(()=>{let e=t.current;if(!n||e==null)return;let i=e=>{e.target instanceof Element&&(r.current=e.target)},a=t=>{t.relatedTarget instanceof Node&&!e.contains(t.relatedTarget)&&(r.current=null)};return e.addEventListener(`focusin`,i),e.addEventListener(`focusout`,a),()=>{e.removeEventListener(`focusin`,i),e.removeEventListener(`focusout`,a)}},[t,n]),{lastFocusedWithinRef:r}}function V(){let e=document.querySelector(`main, [role="main"]`);e!=null&&(e.hasAttribute(`tabindex`)||(e.tabIndex=-1),e.focus({preventScroll:!0}))}function H({isMounted:t,store:n,topId:r}){let i=p(null),{lastFocusedWithinRef:a}=B({containerRef:i,isAttached:t}),o=p(r);return e(()=>{let e=o.current;if(o.current=r,e==null||r===e)return;let t=a.current;if(n.hasAlert(e)){t instanceof HTMLElement&&document.activeElement!==t&&n.requestFocusRestore(t);return}if(t==null||t.isConnected)return;a.current=null;let s=i.current;if(r==null){V();return}s!=null&&(s.querySelector(`[data-alert-dismiss], [data-alert-expand]`)??s).focus()},[n,r]),{wrapperRef:i}}const U=`gap-2 py-2 pr-2 [&_[data-slot=alert-icon]]:shrink-0`,W={Root:F,Bar:({className:t,"data-slot":i,ref:o,...s})=>{let{store:c,contentId:l}=A(`AlertCenter.Bar`),{isExpanded:u,setExpanded:d}=j(`AlertCenter.Bar`),f=M(c),m=h(c.subscribe,c.getContentMounted,c.getContentMounted),g=f[0]??null,y=g!=null,{isMounted:b,dataState:S,onExitTransitionEnd:w}=z({present:y}),T=p(g);e(()=>{g!=null&&(T.current=g)},[g]);let E=g??T.current,D=p(null);e(()=>{let e=D.current;if(e==null)return;if(g!=null){let t=c.getHost(g.id);t.parentElement!==e&&e.childNodes.length>0&&e.replaceChildren(),x(e,t)&&c.notifyPlacementChange(),c.flushFocusRestore();return}let t=E==null?null:c.getHostSnapshot(E.id);t!=null&&t.parentNode!==e&&e.replaceChildren(t)});let{wrapperRef:O}=H({isMounted:b,store:c,topId:g?.id});if(e(()=>{let e=O.current;c.setTopLabel(y&&e!=null?C(e):``)}),e(()=>{let e=O.current;if(e==null)return;let t=new MutationObserver(()=>{c.setTopLabel(y?C(e):``)});return t.observe(e,{subtree:!0,childList:!0,characterData:!0}),()=>{t.disconnect()}},[c,y,b]),e(()=>()=>{c.setTopLabel(``)},[c]),e(()=>{c.setBarElement(O.current)}),e(()=>()=>{c.setBarElement(null)},[c]),!b||E==null)return null;let k=y?f.length-1:0;return _(`div`,{ref:O,"data-slot":`alert-center-bar-wrapper`,tabIndex:-1,inert:!y,className:`shrink-0 overflow-hidden transition-[height,opacity] duration-200 ease-out [interpolate-size:allow-keywords] starting:h-0 starting:opacity-0 data-state-closed:h-0 data-state-closed:opacity-0 data-state-closed:duration-150 motion-reduce:transition-none`,"data-state":S,onTransitionEnd:w,children:v(a.Root,{ref:o,appearance:`banner`,intent:E.intent,className:n(U,`not-has-data-[slot=alert-description]:[&_[data-alert-dismiss],&_[data-alert-expand]]:top-1/2 not-has-data-[slot=alert-description]:[&_[data-alert-dismiss],&_[data-alert-expand]]:-translate-y-1/2`,`has-data-alert-expand:[&_[data-alert-dismiss]]:right-16 md:has-data-alert-expand:[&_[data-alert-dismiss]]:right-24`,t,E.className),...s,"data-slot":r(i,`alert-center-bar`),"data-placement":`bar`,"data-alert-id":E.id,children:[_(`div`,{ref:D,className:`contents`,"data-slot":`alert-center-bar-mount`}),k>0&&m&&_(a.ExpandButton,{count:k,expanded:u,"aria-controls":l,onClick:()=>d(!u)})]})})},Content:({"aria-label":i=`More alerts`,"aria-labelledby":o,className:s,"data-slot":c,ref:l,...u})=>{let{store:d,contentId:f}=A(`AlertCenter.Content`),{isExpanded:m,setExpanded:h}=j(`AlertCenter.Content`),g=M(d).slice(1),v=g.length>0;e(()=>(d.setContentMounted(!0),()=>{d.setContentMounted(!1)}),[d]);let y=p(v);e(()=>{let e=y.current&&!v;y.current=v,e&&m&&h(!1)},[v,m,h]);let b=p(null),S=t(b,l),{lastFocusedWithinRef:C}=B({containerRef:b,isAttached:v}),w=g.map(e=>e.id).join(` `);return e(()=>{let e=b.current;if(e==null)return;let t=!1;for(let n of e.querySelectorAll(`[data-alert-mount]`)){let e=n.getAttribute(`data-alert-mount`);e!=null&&x(n,d.getHost(e))&&(t=!0)}t&&d.notifyPlacementChange(),d.flushFocusRestore()},[d,w]),e(()=>{let e=C.current;if(e==null)return;if(e.isConnected){let t=b.current;e instanceof HTMLElement&&document.activeElement!==e&&(t==null||!t.contains(e))&&(C.current=null,e.focus({preventScroll:!0}));return}C.current=null;let t=b.current?.querySelector(`[data-alert-dismiss]`);if(t!=null){t.focus();return}let n=d.getBarElement()?.querySelector(`[data-alert-dismiss], [data-alert-expand]`);if(n!=null){n.focus();return}V()},[d,w]),g.length===0?null:_(`div`,{...u,ref:S,"data-slot":r(c,`alert-center-content`),id:f,"data-state":m?`open`:`closed`,className:n(`h-0 overflow-hidden invisible [content-visibility:hidden] transition-[height,visibility,content-visibility] transition-discrete duration-200 ease-out [interpolate-size:allow-keywords] data-state-open:h-auto data-state-open:visible data-state-open:[content-visibility:visible] motion-reduce:transition-none`,s),children:_(`ul`,{"aria-label":o==null?i:void 0,"aria-labelledby":o,className:`flex w-full flex-col`,children:g.map(e=>_(`li`,{children:_(a.Root,{appearance:`banner`,intent:e.intent,className:n(U,e.className),"data-slot":`alert-center-item`,"data-placement":`list`,"data-alert-id":e.id,children:_(`div`,{className:`contents`,"data-alert-mount":e.id})})},e.id))})})},Item:I,DismissIconButton:L};export{W as AlertCenter};

package/dist/alert-dialog.d.ts

@@ -1,7 +1,7 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
 import { t as ButtonIntent } from "./button-DdSKSj1c.js";
-import { n as ButtonAppearance, r as ButtonProps } from "./button-DARFK2KJ.js";
+import { n as ButtonAppearance, r as ButtonProps } from "./button-PoIujPMX.js";
 import { a as Root$1, n as Content$1, o as Title$1, r as Description$1, s as Trigger$1, t as Close$1 } from "./dialog-BM4wPCft.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert-dialog/alert-dialog.d.ts
@@ -17,8 +17,8 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
 };
 /**
  * A modal dialog that interrupts the user with important content and expects a
- * response.
- * The root stateful component for the Alert Dialog.
+ * response. Holds the open state and the `intent` that `AlertDialog.Icon` and
+ * `AlertDialog.Action` read.
  *
  * `AlertDialog` renders its floating layer at Tailwind `z-50`, Mantle's
  * shared floating z-index. When multiple shared layers are open, the most
@@ -257,7 +257,7 @@ declare const Footer: ({ asChild, className, ref, ...props }: ComponentProps<"di
 /**
  * An accessible name to be announced when the dialog is opened.
  *
- * Alternatively, you can provide `aria-label` or `aria-labelledby` to
+ * Alternatively, pass `aria-label` or `aria-labelledby` to
  * `AlertDialogContent` and exclude this component.
  *
  * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtitle
@@ -298,7 +298,7 @@ declare const Title: ({ className, ref, ...props }: ComponentProps<typeof Title$
  * Renders as a `div` by default, but can be changed to any other element using
  * the `asChild` prop.
  *
- * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and
+ * Alternatively, pass `aria-describedby` to `AlertDialogContent` and
  * exclude this component.
  *
  * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogdescription
@@ -353,8 +353,9 @@ type AlertDialogActionProps = Omit<ButtonProps, "appearance" | "intent"> & {
 };
 /**
  * A button that confirms the Alert Dialog action.
- * Will default to appearance="filled", with a tone derived from the `AlertDialog`'s
- * intent: danger dialogs get a danger button, info dialogs get a neutral one.
+ * Defaults to `appearance="filled"`, with a tone derived from the parent
+ * `AlertDialog.Root`'s intent: danger dialogs get a danger button, info dialogs
+ * get a neutral one.
  * Does not close the alert dialog by default.
  *
  * These buttons should be distinguished visually from the AlertDialogCancel button.
@@ -413,7 +414,7 @@ type AlertDialogCancelProps = Omit<ButtonProps, "appearance" | "intent"> & {
 };
 /**
  * A button that closes the dialog and cancels the action.
- * Will default to appearance="outlined" and intent="neutral".
+ * Defaults to `appearance="outlined"` and `intent="neutral"`.
  *
  * This button should be distinguished visually from AlertDialogAction buttons.
  *
@@ -502,7 +503,7 @@ declare const Icon: ({ className, ref, svg, ...props }: AlertDialogIconProps) =>
  * `AlertDialog.Cancel` already closes the dialog by default. Reach for
  * `AlertDialog.Close` when you need to attach close behavior to a custom
  * element (typically wrapping `AlertDialog.Action` with `asChild` so the
- * action both performs the operation and dismisses the dialog).
+ * action both runs the operation and dismisses the dialog).
  *
  * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogclose
  *
@@ -602,11 +603,10 @@ declare const Close: ({ ref, ...props }: ComponentProps<typeof Close$1>) => impo
  */
 declare const AlertDialog: {
   /**
-   * The root stateful component for the Alert Dialog. Wraps the trigger and
-   * content and exposes the required `intent` prop (`"danger"` for
-   * destructive actions, `"info"` for informational confirmations) — the tone
-   * its color communicates — which propagates color to descendants like
-   * `AlertDialog.Icon` and `AlertDialog.Action`.
+   * Wraps the trigger and the content. Holds the open state and the required
+   * `intent` prop — `"danger"` for destructive actions, `"info"` for
+   * informational confirmations. `AlertDialog.Icon` and `AlertDialog.Action`
+   * read that intent for their color.
    *
    * `AlertDialog` renders its floating layer at Tailwind `z-50`, Mantle's
    * shared floating z-index. When multiple shared layers are open, the most
@@ -649,8 +649,8 @@ declare const AlertDialog: {
    * A button that confirms the Alert Dialog action. Defaults to
    * `appearance="filled"`, with a tone derived from the parent
    * `AlertDialog.Root`'s intent: danger dialogs get a danger button, info
-   * dialogs get a neutral one. Does not close the dialog by default — wrap with
-   * `AlertDialog.Close asChild` if the action should also dismiss.
+   * dialogs get a neutral one. Does not close the dialog by default — if the
+   * action should also dismiss, wrap it with `AlertDialog.Close asChild`.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogaction
    *
@@ -762,7 +762,7 @@ declare const AlertDialog: {
   readonly Cancel: typeof Cancel;
   /**
    * A button that closes the Alert Dialog. (Unstyled) Typically wrapped
-   * around `AlertDialog.Action` with `asChild` so the action both performs
+   * around `AlertDialog.Action` with `asChild` so the action both runs
    * the operation and dismisses the dialog.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogclose
@@ -992,7 +992,7 @@ declare const AlertDialog: {
   readonly Icon: typeof Icon;
   /**
    * An accessible name to be announced when the dialog is opened.
-   * Alternatively, provide `aria-label` or `aria-labelledby` to
+   * Alternatively, pass `aria-label` or `aria-labelledby` to
    * `AlertDialog.Content` and exclude this component.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtitle

package/dist/alert.d.ts

@@ -1,2 +1,2 @@
-import { t as Alert } from "./alert-BWwNPOMI.js";
+import { t as Alert } from "./alert-B1HXfkYn.js";
 export { Alert };

package/dist/alert.js

@@ -1 +1 @@
-import{t as e}from"./alert-vwFd7qdp.js";export{e as Alert};
+import{t as e}from"./alert-BuG2qS5l.js";export{e as Alert};

package/dist/anchor.d.ts

@@ -66,7 +66,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  *
  * **Accessibility.** Link text must be self-describing — avoid "click
  * here" / "read more". For purely decorative icons, no extra labeling is
- * needed; for icon-only links, provide an `aria-label`.
+ * needed; for icon-only links, pass an `aria-label`.
  *
  * @see https://mantle.ngrok.com/components/navigation/anchor
  *
@@ -99,7 +99,7 @@ declare const Anchor: ({ asChild, children, className, rel: propRel, icon, iconP
 /**
  * Resolves the `rel` attribute to a string.
  *
- * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.
+ * If the value is an array, it drops the empty values, de-duplicates, sorts, and joins with a space.
  */
 declare function resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]): string | undefined;
 //#endregion

package/dist/app-layout.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout`),className:e(`group/app-layout bg-base relative isolate flex h-full w-full flex-col`,`overflow-clip`,o),...c,children:a}),Notice:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-notice`),className:e(`flex w-full shrink-0 flex-col`,o),...c,children:a}),Workspace:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-workspace`),className:e(`flex min-h-0 flex-1`,o),...c,children:a}),Content:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-content`),className:e(`bg-card border-card-muted relative flex min-w-0 flex-1 flex-col rounded-xl border shadow-sm`,`m-[var(--app-layout-card-gutter,0.5rem)]`,`overflow-clip`,o),...c,children:a}),Header:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-header`),className:e(`border-card-muted flex h-14 shrink-0 items-center gap-2 border-b px-4`,`group-has-[[data-slot~=sidebar-header]]/app-layout:h-[calc(var(--sidebar-header-height,4.5rem)-2*var(--app-layout-card-gutter,0.5rem)-2px)]`,o),...c,children:a}),Body:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-body`),className:e(`scrollbar relative min-h-0 w-full flex-1 overflow-y-auto overscroll-none`,o),...c,children:a})};export{i as AppLayout};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout`),className:e(`group/app-layout bg-base relative isolate flex h-full w-full flex-col`,`overflow-clip`,o),...c,children:a}),Notice:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-notice`),className:e(`flex w-full shrink-0 flex-col`,o),...c,children:a}),Workspace:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-workspace`),className:e(`flex min-h-0 flex-1`,o),...c,children:a}),Content:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-content`),className:e(`bg-card border-card-muted relative flex min-w-0 flex-1 flex-col rounded-xl border shadow-sm`,`m-(--app-layout-card-gutter,0.5rem)`,`overflow-clip`,o),...c,children:a}),Header:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-header`),className:e(`border-card-muted flex h-14 shrink-0 items-center gap-2 border-b px-4`,`group-has-data-[slot~=sidebar-header]/app-layout:h-[calc(var(--sidebar-header-height,4.5rem)-2*var(--app-layout-card-gutter,0.5rem)-2px)]`,o),...c,children:a}),Body:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-body`),className:e(`scrollbar relative min-h-0 w-full flex-1 overflow-y-auto overscroll-none`,o),...c,children:a})};export{i as AppLayout};

package/dist/area-chart.d.ts

@@ -1,4 +1,4 @@
-import { _ as SeriesColor, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as PointShape, h as CurveKind, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ContinuousXScale, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps } from "./chart-1cVjAcj8.js";
+import { _ as PointShape, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as CurveKind, h as ContinuousXScale, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ChartSeriesSlot, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, v as SeriesColor } from "./chart-0zcFJh4n.js";
 //#region src/components/area-chart/area-chart.d.ts
 /**
  * Props for {@link AreaChart.Root}. Areas fill from a shared zero baseline, so
@@ -27,12 +27,26 @@ type AreaChartAreaProps = {
   /** Display name for the legend, tooltip, and data table. Defaults to `dataKey`. */
   label?: string;
   /**
-   * One of the validated chart tokens (`"chart-1"`…`"chart-8"`, `"chart-other"`)
-   * or any CSS color as an escape hatch. Defaults to the next sticky slot in
-   * mount order. Static colors (raw hex) do not adapt across themes; custom
-   * palettes must be validated for colorblind-safe adjacency and surface
-   * contrast, and a series that carries good/bad meaning should wear the
-   * semantic status colors, never a categorical slot.
+   * A fixed visual identity slot. Slots `1` through `8` select a paired chart
+   * color and point shape. `"other"` selects the shared neutral treatment.
+   *
+   * Series receive unreserved slots in composition order. Set `seriesSlot` to
+   * give a series a fixed visual identity.
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Area dataKey="errors" seriesSlot={4} />
+   * ```
+   */
+  seriesSlot?: ChartSeriesSlot;
+  /**
+   * Override the color channel with a chart token or any CSS color. This does
+   * not change the series slot or its paired point shape. When omitted, the
+   * series paints the color from its slot.
+   *
+   * A static color (raw hex) cannot follow the four themes, so prefer a
+   * `var(--your-token)` declared per theme. A series that carries good/bad
+   * meaning should wear the semantic status colors, never a categorical slot.
    */
   color?: SeriesColor;
   /**
@@ -46,9 +60,11 @@ type AreaChartAreaProps = {
    */
   connectNulls?: boolean;
   /**
-   * The glyph the hover dot wears: `"circle"` (default), `"square"`,
-   * `"triangle"`, or `"diamond"` — a redundant encoding alongside color that
-   * keeps series distinguishable without color vision.
+   * The glyph the hover dot and the legend key wear: `"circle"`, `"square"`,
+   * `"triangle"`, `"diamond"`, `"triangle-down"`, `"plus"`, `"cross"`, or
+   * `"star"`. Shape is a redundant encoding alongside color that keeps series
+   * distinguishable without color vision. When omitted, the series wears the
+   * glyph paired to its series slot, so both channels name one slot.
    */
   shape?: PointShape;
 };
@@ -88,8 +104,18 @@ type AreaChartCopyButtonProps = CopyButtonPrimitiveProps;
  * tooltip, keyboard stepping with polite announcements, an sr-only data
  * table, Enter/Space + click activation). Areas fill with a 10% wash of the
  * series color plus a 2px band-edge stroke; `stacked` on the Root stacks the
- * composed series, the first series at the baseline. Large datasets decimate
- * before painting on canvas. Compose the chrome and series parts as children.
+ * series in registration order, the first-registered series at the baseline.
+ * Large datasets decimate before painting on canvas. Compose the chrome and
+ * series parts as children.
+ *
+ * The Root's own subtree is addressable by slot: `area-chart` on the wrapper,
+ * then `area-chart-plot`, `area-chart-canvas`, `area-chart-crosshair`,
+ * `area-chart-hover-band`, `area-chart-markers`, `area-chart-tooltip`, and
+ * `area-chart-data-table`. An area chart shows the crosshair and one marker dot
+ * per series, and never the band, but all three layers mount on every kind.
+ * Each hover dot carries `chart-active-point` plus a `data-shape` of
+ * `"circle"`, `"square"`, `"triangle"`, `"diamond"`, `"triangle-down"`,
+ * `"plus"`, `"cross"`, or `"star"`, naming the glyph its series wears.
  *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areachartroot
  *
@@ -116,8 +142,9 @@ declare const Root: <TDatum extends ChartDatum = ChartDatum>(props: AreaChartRoo
 /**
  * One area series. Renders nothing itself — it registers the series with the
  * chart, which paints it on canvas. Compose one `Area` per series; with
- * `stacked` on the Root, areas stack in composition order with the first
- * series at the baseline.
+ * `stacked` on the Root, areas stack in registration order with the
+ * first-registered series at the baseline, so an `Area` that mounts later
+ * stacks on top whatever its position in the JSX.
  *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areachartarea
  *
@@ -218,9 +245,9 @@ declare const YAxis: (props: AreaChartYAxisProps) => null;
 declare const ReferenceLine: (props: AreaChartReferenceLineProps) => null;
 /**
  * Customizes the hover/keyboard tooltip readout. The tooltip itself is part
- * of `AreaChart.Root`'s interaction contract and renders whether or not this
- * part is composed — compose it to format the label or values, append a
- * footer, or replace the content entirely via the render-prop `children`.
+ * of `AreaChart.Root`'s interaction contract and renders even when this part
+ * is absent — compose it to format the label or values, append a footer, or
+ * replace the content entirely via the render-prop `children`.
  *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areacharttooltip
  *
@@ -244,6 +271,13 @@ declare const Tooltip: (props: AreaChartTooltipProps) => null;
  * must never rely on color-matching alone. It renders nothing for a single
  * series (the chart's title already names it).
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"area-chart-legend"` | The legend list. `AreaChart.Legend` renders it in flow below the plot. |
+ * | `data-shape` | `"circle"` \| `"square"` \| `"triangle"` \| `"diamond"` \| `"triangle-down"` \| `"plus"` \| `"cross"` \| `"star"` | On each series' swatch, naming the glyph its `AreaChart.Area` wears — the `shape` it set, else the one paired to its series slot. The swatch clips itself to that glyph, so target this only to restyle a key. |
+ *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areachartlegend
  *
  * @example
@@ -285,14 +319,28 @@ declare const CopyButton: (props: AreaChartCopyButtonProps) => import("react").J
  * A canvas-rendered area chart for showing how values — and, when stacked, a
  * total and its parts — change over a continuous x axis. Each area fills with
  * a 10% wash of the series color plus a 2px band-edge stroke; the Root-level
- * `stacked` prop stacks the composed series in composition order from the
- * baseline. Series colors come from the theme's validated `--color-chart-*`
+ * `stacked` prop stacks the series in registration order from the baseline.
+ * Series colors come from the theme's validated `--color-chart-*`
  * tokens; areas keep a fixed slot color for the chart's lifetime even as
  * other series are filtered in and out. Interaction — a crosshair with an
  * every-series tooltip, keyboard stepping, aria-live announcements, and an
  * sr-only data table — ships with `Root` unconditionally; large datasets
  * decimate before painting on canvas.
  *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--color-chart-1` … `--color-chart-8` | per theme | The validated categorical series slots, in assignment order. |
+ * | `--color-chart-other` | `--color-neutral-500` | The neutral overflow slot a series wears once every slot is held. |
+ *
+ * Two ways to change a series color, both public API. The `color` prop on
+ * `AreaChart.Area` sets one series and takes any CSS color. To restyle a slot itself,
+ * redeclare its token on `Root` —
+ * `className="[--color-chart-1:var(--color-brand)]"`. The engine resolves every
+ * token through a probe inside `Root`, so a declaration scoped there wins for
+ * that chart and leaves every other chart on the page alone.
+ *
  * @see https://mantle.ngrok.com/components/charts/area-chart
  *
  * @example

package/dist/area-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-B3pAvmkk.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`area`,componentName:`AreaChart`,slotName:`area-chart`,...e}),Area:e=>a(`AreaChart.Area`,`area`,e),Grid:e=>n(`AreaChart.Grid`,e),XAxis:e=>t(`AreaChart.XAxis`,e),YAxis:e=>r(`AreaChart.YAxis`,e),ReferenceLine:t=>e(`AreaChart.ReferenceLine`,t),Tooltip:e=>s(`AreaChart.Tooltip`,e),Legend:e=>l(i,{partName:`AreaChart.Legend`,slotName:`area-chart`,...e}),CopyButton:e=>l(c,{partName:`AreaChart.CopyButton`,slotName:`area-chart`,...e})};export{u as AreaChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DBxT9BNl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`area`,componentName:`AreaChart`,slotName:`area-chart`,...e}),Area:e=>a(`AreaChart.Area`,`area`,e),Grid:e=>n(`AreaChart.Grid`,e),XAxis:e=>t(`AreaChart.XAxis`,e),YAxis:e=>r(`AreaChart.YAxis`,e),ReferenceLine:t=>e(`AreaChart.ReferenceLine`,t),Tooltip:e=>s(`AreaChart.Tooltip`,e),Legend:e=>l(i,{partName:`AreaChart.Legend`,slotName:`area-chart`,...e}),CopyButton:e=>l(c,{partName:`AreaChart.CopyButton`,slotName:`area-chart`,...e})};export{u as AreaChart};