@ngrok/mantle 0.82.0 → 0.83.0

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/accordion.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"./icon-lZ48P8Nn.js";import{t as i}from"./slot-Dpsqz16D.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})},D=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};
+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"./icon-lZ48P8Nn.js";import{t as i}from"./slot-DpNWVci8.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})},D=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.82.0",
+	"version": "0.83.0",
 	"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-QMs0PqMq.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-Dpsqz16D.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./button-BUospUB3.js";import{t as a}from"./button-C0S8RbaJ.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,4 +1,5 @@
-import { t as Alert } from "./alert-BWwNPOMI.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { t as Alert } from "./alert-B1HXfkYn.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert-center/alert-center.d.ts
 /**
@@ -31,12 +32,21 @@ type AlertCenterIntent = "danger" | "important" | "info" | "success" | "warning"
  * ```
  */
 type AlertCenterRootProps = {
-  /** Controlled expanded state of the additional-alert list. */
+  /** Controlled expanded state of the additional-alert list. Pair with `onOpenChange`. */
   open?: boolean;
-  /** Uncontrolled initial expanded state of the additional-alert list. */
+  /**
+   * Uncontrolled initial expanded state of the additional-alert list.
+   *
+   * @default false
+   */
   defaultOpen?: boolean;
   /** Called when the additional-alert list expands or collapses. */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * The `AlertCenter.Bar`, `AlertCenter.Content`, and every `AlertCenter.Item`.
+   * Items may be authored anywhere under the root — their children stay in this
+   * tree and are projected into the bar or an expansion row by rank.
+   */
   children?: ReactNode;
 };
 /**
@@ -50,6 +60,12 @@ type AlertCenterRootProps = {
  * contains no bar; it enters with its height animation after hydration — the
  * same entrance every arriving alert gets by design.
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-announcer` | On the persistent visually-hidden `role="status"` live region Root mounts. |
+ *
  * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterroot
  *
  * @example
@@ -98,8 +114,10 @@ type AlertCenterItemProps = {
    * Stable identity. It keys the item's stable host element (children keep
    * their state as the host moves between the bar and a row), pins the
    * item's arrival order (a returning id resumes its original position), and
-   * is stamped on the chrome as `data-alert-id` for styling. Two mounted
-   * items sharing an id is an authoring error — the last registration wins.
+   * is stamped on the chrome as `data-alert-id` for styling. Must be unique
+   * among the items mounted under one `AlertCenter.Root` — a second mounted
+   * item claiming the same id throws, since both would project into that
+   * id's single host.
    */
   id: string;
   /**
@@ -112,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;
@@ -122,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
@@ -136,6 +154,13 @@ type AlertCenterItemProps = {
  * Server rendering emits no alert DOM — the bar enters after hydration with
  * its height animation, the same entrance every arriving alert gets.
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-item-host` | On the stable per-id host element the item's children portal into. |
+ * | `data-alert-host` | the item's `id` | On that same host — which alert's projected children it holds. |
+ *
  * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenteritem
  *
  * @example
@@ -157,7 +182,7 @@ type AlertCenterItemProps = {
  * ```
  */
 declare const Item: ({ children, className, id, intent }: AlertCenterItemProps) => import("react").ReactPortal | null;
-type AlertCenterDismissIconButtonProps = ComponentProps<typeof Alert.DismissIconButton> & {
+type AlertCenterDismissIconButtonProps = ComponentProps<typeof Alert.DismissIconButton> & WithDataSlot & {
   /**
    * Dismissal is consumer-owned: remove the alert by unmounting its
    * `AlertCenter.Item` (and persist that however you like). Required because a
@@ -174,10 +199,17 @@ type AlertCenterDismissIconButtonProps = ComponentProps<typeof Alert.DismissIcon
  * out — per alert; its presence IS the alert's dismissability.
  *
  * Where the control sits in each placement is the chrome's business, not this
- * wrapper's: `Alert.Root`'s existing expand-aware CSS seats it beside the bar's
+ * wrapper's: {@link dismissClearsExpandControl} seats it beside the bar's
  * expand control, and {@link singleLineBarControls} re-centers it in a
  * single-line bar.
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-dismiss-icon-button` | Replaces `Alert.DismissIconButton`'s own `alert-dismiss-icon-button` on the rendered button. |
+ * | `data-alert-dismiss` | present | Read, not stamped — `Alert` emits it, and `AlertCenter`'s bar CSS positions the control with it. |
+ *
  * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterdismissiconbutton
  *
  * @example
@@ -195,8 +227,8 @@ type AlertCenterDismissIconButtonProps = ComponentProps<typeof Alert.DismissIcon
  * </AlertCenter.Root>
  * ```
  */
-declare const DismissIconButton: ({ label, ref, ...props }: AlertCenterDismissIconButtonProps) => import("react").JSX.Element;
-type AlertCenterBarProps = Omit<ComponentProps<typeof Alert.Root>, "appearance" | "intent" | "children"> & {
+declare const DismissIconButton: ({ "data-slot": dataSlot, label, ref, ...props }: AlertCenterDismissIconButtonProps) => import("react").JSX.Element;
+type AlertCenterBarProps = Omit<ComponentProps<typeof Alert.Root>, "appearance" | "intent" | "children"> & WithDataSlot & {
   /** The bar renders the top-ranked item's authored children — it takes none of its own. */
   children?: never;
 };
@@ -219,6 +251,19 @@ type AlertCenterBarProps = Omit<ComponentProps<typeof Alert.Root>, "appearance"
  * — arrivals and re-ranks are announced by the persistent visually-hidden
  * `role="status"` region that `AlertCenter.Root` mounts.
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-bar-wrapper` | On the presence wrapper that owns the enter/exit animation. |
+ * | `data-slot` | `alert-center-bar` | On the banner chrome (`Alert.Root`) the top item's children render inside. |
+ * | `data-slot` | `alert-center-bar-mount` | On the layout-transparent element the top item's host is adopted into. |
+ * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the enter/exit transition, and stays `closed` while the exit plays. |
+ * | `data-placement` | `"bar"` | On the chrome — where the top item's children are currently rendering. |
+ * | `data-alert-id` | the top item's `id` | On the chrome; per-alert styling and testing hook. |
+ * | `data-alert-dismiss` | present on the dismiss control | Read, not stamped — `Alert` emits it; the bar's CSS centers and offsets the control with it. |
+ * | `data-alert-expand` | present on the expand control | Read, not stamped — `Alert` emits it; the bar's CSS centers the control with it. |
+ *
  * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterbar
  *
  * @example
@@ -227,13 +272,34 @@ type AlertCenterBarProps = Omit<ComponentProps<typeof Alert.Root>, "appearance"
  *   <AlertCenter.Bar />
  *   <AlertCenter.Content />
  *   <AlertCenter.Item id="payment-failed" intent="danger">
- *     …
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>
+ *         Payment failed — we couldn't charge your card.{" "}
+ *         <a href="/billing">Update payment method</a>
+ *       </Alert.Title>
+ *       <Alert.Description>
+ *         Update your payment method to avoid a service interruption.
+ *       </Alert.Description>
+ *     </Alert.Content>
  *   </AlertCenter.Item>
+ *   {!dismissed.has("transfer-limit") && (
+ *     <AlertCenter.Item id="transfer-limit" intent="warning">
+ *       <Alert.Icon />
+ *       <Alert.Content>
+ *         <Alert.Title>
+ *           You've used 92% of your monthly transfer.{" "}
+ *           <a href="/billing/choose-a-plan">Upgrade</a>
+ *         </Alert.Title>
+ *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *       </Alert.Content>
+ *     </AlertCenter.Item>
+ *   )}
  * </AlertCenter.Root>
  * ```
  */
-declare const Bar: ({ className, ref, ...props }: AlertCenterBarProps) => import("react").JSX.Element | null;
-type AlertCenterContentProps = Omit<ComponentProps<"div">, "children" | "id"> & {
+declare const Bar: ({ className, "data-slot": dataSlot, ref, ...props }: AlertCenterBarProps) => import("react").JSX.Element | null;
+type AlertCenterContentProps = Omit<ComponentProps<"div">, "children" | "id"> & WithDataSlot & {
   /** Rows are the registered items' authored children — Content takes none of its own. */
   children?: never;
 };
@@ -249,6 +315,17 @@ type AlertCenterContentProps = Omit<ComponentProps<"div">, "children" | "id"> &
  * list itself — the outer wrapper is `role="generic"`, where ARIA prohibits
  * accessible names, so a name passed here would otherwise be dropped.
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-content` | On the expansion wrapper that owns the collapse animation. |
+ * | `data-slot` | `alert-center-item` | On each row's banner chrome (`Alert.Root`). |
+ * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the collapse transition. |
+ * | `data-placement` | `"list"` | On each row's chrome — where that item's children are currently rendering. |
+ * | `data-alert-id` | the row item's `id` | On each row's chrome; per-alert styling and testing hook. |
+ * | `data-alert-mount` | the row item's `id` | On the row's layout-transparent mount point — the element that item's host is adopted into. |
+ *
  * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcentercontent
  *
  * @example
@@ -256,13 +333,27 @@ type AlertCenterContentProps = Omit<ComponentProps<"div">, "children" | "id"> &
  * <AlertCenter.Root>
  *   <AlertCenter.Bar />
  *   <AlertCenter.Content aria-label="Autres alertes" />
- *   <AlertCenter.Item id="transfer-limit" intent="warning">
- *     …
+ *   <AlertCenter.Item id="payment-failed" intent="danger">
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>
+ *         Payment failed — <a href="/billing">update your card</a>
+ *       </Alert.Title>
+ *     </Alert.Content>
  *   </AlertCenter.Item>
+ *   {!dismissed.has("transfer-limit") && (
+ *     <AlertCenter.Item id="transfer-limit" intent="warning">
+ *       <Alert.Icon />
+ *       <Alert.Content>
+ *         <Alert.Title>Approaching your data transfer limit</Alert.Title>
+ *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *       </Alert.Content>
+ *     </AlertCenter.Item>
+ *   )}
  * </AlertCenter.Root>
  * ```
  */
-declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, ref, ...props }: AlertCenterContentProps) => import("react").JSX.Element | null;
+declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, "data-slot": dataSlot, ref, ...props }: AlertCenterContentProps) => import("react").JSX.Element | null;
 /**
  * A single, top-level entry point for one-to-many account alerts and their
  * upgrade CTAs — the aggregation layer that replaces a stack of independent
@@ -286,6 +377,13 @@ declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabell
  * written) while their DOM renders through a stable per-id host that the bar
  * and rows physically adopt — so content keeps its state across re-ranks.
  *
+ * Siblings: `Alert` (`@ngrok/mantle/alert`) is a single inline banner you place
+ * and control yourself; `Toast` (`@ngrok/mantle/toast`) is for transient,
+ * ephemeral notifications; `AppLayout.Notice` (`@ngrok/mantle/app-layout`) is
+ * the layout slot this composes INTO, not a competitor. `AlertCenter` answers
+ * only the one-to-many case: persistent, ACCOUNT-level alerts that must be
+ * ranked and collapsed into a single top-level bar.
+ *
  * @see https://mantle.ngrok.com/components/feedback/alert-center
  *
  * @example
@@ -334,7 +432,7 @@ declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabell
  *       )}
  *     </AlertCenter.Root>
  *   </AppLayout.Notice>
- *   <AppLayout.Body>…</AppLayout.Body>
+ *   <AppLayout.Workspace>…</AppLayout.Workspace>
  * </AppLayout.Root>
  * ```
  */
@@ -343,6 +441,12 @@ declare const AlertCenter: {
    * The renderless state owner: creates the registration store, owns the
    * expansion's open state, and mounts the persistent live-region announcer.
    *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-announcer` | On the persistent visually-hidden `role="status"` live region Root mounts. |
+   *
    * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterroot
    *
    * @example
@@ -351,8 +455,29 @@ declare const AlertCenter: {
    *   <AlertCenter.Bar />
    *   <AlertCenter.Content />
    *   <AlertCenter.Item id="payment-failed" intent="danger">
-   *     …
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — we couldn't charge your card.{" "}
+   *         <a href="/billing">Update payment method</a>
+   *       </Alert.Title>
+   *       <Alert.Description>
+   *         Update your payment method to avoid a service interruption.
+   *       </Alert.Description>
+   *     </Alert.Content>
    *   </AlertCenter.Item>
+   *   {!dismissed.has("transfer-limit") && (
+   *     <AlertCenter.Item id="transfer-limit" intent="warning">
+   *       <Alert.Icon />
+   *       <Alert.Content>
+   *         <Alert.Title>
+   *           You've used 92% of your monthly transfer.{" "}
+   *           <a href="/billing/choose-a-plan">Upgrade</a>
+   *         </Alert.Title>
+   *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *       </Alert.Content>
+   *     </AlertCenter.Item>
+   *   )}
    * </AlertCenter.Root>
    * ```
    */
@@ -363,6 +488,19 @@ declare const AlertCenter: {
    * Collapses to nothing when empty. Claims no ARIA landmark; arrivals are
    * announced by Root's persistent live region.
    *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-bar-wrapper` | On the presence wrapper that owns the enter/exit animation. |
+   * | `data-slot` | `alert-center-bar` | On the banner chrome (`Alert.Root`) the top item's children render inside. |
+   * | `data-slot` | `alert-center-bar-mount` | On the layout-transparent element the top item's host is adopted into. |
+   * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the enter/exit transition, and stays `closed` while the exit plays. |
+   * | `data-placement` | `"bar"` | On the chrome — where the top item's children are currently rendering. |
+   * | `data-alert-id` | the top item's `id` | On the chrome; per-alert styling and testing hook. |
+   * | `data-alert-dismiss` | present on the dismiss control | Read, not stamped — `Alert` emits it; the bar's CSS centers and offsets the control with it. |
+   * | `data-alert-expand` | present on the expand control | Read, not stamped — `Alert` emits it; the bar's CSS centers the control with it. |
+   *
    * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterbar
    *
    * @example
@@ -371,8 +509,29 @@ declare const AlertCenter: {
    *   <AlertCenter.Bar />
    *   <AlertCenter.Content />
    *   <AlertCenter.Item id="payment-failed" intent="danger">
-   *     …
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — we couldn't charge your card.{" "}
+   *         <a href="/billing">Update payment method</a>
+   *       </Alert.Title>
+   *       <Alert.Description>
+   *         Update your payment method to avoid a service interruption.
+   *       </Alert.Description>
+   *     </Alert.Content>
    *   </AlertCenter.Item>
+   *   {!dismissed.has("transfer-limit") && (
+   *     <AlertCenter.Item id="transfer-limit" intent="warning">
+   *       <Alert.Icon />
+   *       <Alert.Content>
+   *         <Alert.Title>
+   *           You've used 92% of your monthly transfer.{" "}
+   *           <a href="/billing/choose-a-plan">Upgrade</a>
+   *         </Alert.Title>
+   *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *       </Alert.Content>
+   *     </AlertCenter.Item>
+   *   )}
    * </AlertCenter.Root>
    * ```
    */
@@ -382,6 +541,17 @@ declare const AlertCenter: {
    * highest-severity-first as full-width banner rows of the items' authored
    * children.
    *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-content` | On the expansion wrapper that owns the collapse animation. |
+   * | `data-slot` | `alert-center-item` | On each row's banner chrome (`Alert.Root`). |
+   * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the collapse transition. |
+   * | `data-placement` | `"list"` | On each row's chrome — where that item's children are currently rendering. |
+   * | `data-alert-id` | the row item's `id` | On each row's chrome; per-alert styling and testing hook. |
+   * | `data-alert-mount` | the row item's `id` | On the row's layout-transparent mount point — the element that item's host is adopted into. |
+   *
    * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcentercontent
    *
    * @example
@@ -389,9 +559,23 @@ declare const AlertCenter: {
    * <AlertCenter.Root>
    *   <AlertCenter.Bar />
    *   <AlertCenter.Content />
-   *   <AlertCenter.Item id="transfer-limit" intent="warning">
-   *     …
+   *   <AlertCenter.Item id="payment-failed" intent="danger">
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — <a href="/billing">update your card</a>
+   *       </Alert.Title>
+   *     </Alert.Content>
    *   </AlertCenter.Item>
+   *   {!dismissed.has("transfer-limit") && (
+   *     <AlertCenter.Item id="transfer-limit" intent="warning">
+   *       <Alert.Icon />
+   *       <Alert.Content>
+   *         <Alert.Title>Approaching your data transfer limit</Alert.Title>
+   *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *       </Alert.Content>
+   *     </AlertCenter.Item>
+   *   )}
    * </AlertCenter.Root>
    * ```
    */
@@ -402,6 +586,13 @@ declare const AlertCenter: {
    * expansion row adopts by rank — children stay in the author's React tree
    * and keep their state across re-ranks. Mount to show; unmount to dismiss.
    *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-item-host` | On the stable per-id host element the item's children portal into. |
+   * | `data-alert-host` | the item's `id` | On that same host — which alert's projected children it holds. |
+   *
    * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenteritem
    *
    * @example
@@ -426,6 +617,13 @@ declare const AlertCenter: {
    * enclosing banner's rendered title and the bar's control centering. Its
    * presence in an item's children is what makes that alert dismissable.
    *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-dismiss-icon-button` | Replaces `Alert.DismissIconButton`'s own `alert-dismiss-icon-button` on the rendered button. |
+   * | `data-alert-dismiss` | present | Read, not stamped — `Alert` emits it, and `AlertCenter`'s bar CSS positions the control with it. |
+   *
    * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterdismissiconbutton
    *
    * @example

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{n as r,t as i}from"./alert-QMs0PqMq.js";import{createContext as a,useCallback as o,useContext as s,useEffect as c,useId as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";import h from"tiny-invariant";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{createPortal as v}from"react-dom";const y={danger:5,warning:4,important:3,info:2,success:1};function b(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 x(e){return e.replace(/\s+/g,` `).trim()}function S(e){let t=e.querySelector(`[data-slot="alert-title"]`);if(t==null)return``;let n=t.cloneNode(!0);if(!(n instanceof Element))return x(t.textContent??``);for(let e of n.querySelectorAll(`button`))e.remove();let r=x(n.textContent??``);for(let e of n.querySelectorAll(`a`))e.remove();let i=x(n.textContent??``);return i===``?r:i}function C(e){return e.toSorted((e,t)=>y[t.intent]-y[e.intent]||e.sequence-t.sequence)}function w(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 T=[];var E=class{#e=new Set;#t=new Map;#n=new Map;#r=new Map;#i=0;#a=T;#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){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=C([...this.#t.values()]),this.#p()}#p(){for(let e of this.#e)e()}};const D=a(null),O=a(null);function k(e){let t=s(D);return h(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}function A(e){let t=s(O);return h(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}const j=e=>m(e.subscribe,e.getSnapshot,e.getSnapshot),M=a(!1);function N({store:e}){let t=j(e);return g(`div`,{className:`sr-only`,role:`status`,"aria-live":`polite`,children:w(m(e.subscribe,e.getTopLabel,e.getTopLabel),t.length)})}const P=({children:e,defaultOpen:t,onOpenChange:n,open:r})=>{let[i]=p(()=>new E),a=l(),[s,c]=p(t??!1),d=r??s,f=o(e=>{r??c(e),n?.(e)},[r,n]),m=u(()=>({store:i,contentId:a}),[i,a]),h=u(()=>({isExpanded:d,setExpanded:f}),[d,f]);return _(D.Provider,{value:m,children:[g(O.Provider,{value:h,children:e}),g(N,{store:i})]})},F=({children:t,className:n,id:i,intent:a})=>{let{store:o}=k(`AlertCenter.Item`);h(!s(M),`AlertCenter.Item cannot be rendered inside another item's children.`);let[c,l]=p(null);return e(()=>{l(o.getHost(i))},[o,i]),e(()=>o.register({id:i,intent:a,className:n}),[o,i,a,n]),e(()=>{o.captureHostSnapshot(i)}),c==null?null:v(g(r,{intent:a,children:g(M.Provider,{value:!0,children:t})}),c)},I=({label:n,ref:r,...a})=>{h(s(M),`AlertCenter.DismissIconButton must be composed inside an <AlertCenter.Item>'s children.`);let{store:o}=k(`AlertCenter.DismissIconButton`);m(o.subscribe,o.getPlacementVersion,o.getPlacementVersion);let c=f(null),l=t(c,r),[u,d]=p(null);return e(()=>{if(n!=null)return;let e=c.current?.closest(`[data-alert-id]`),t=e==null?``:S(e);d(t===``?null:`Dismiss ${t}`)}),g(i.DismissIconButton,{ref:l,label:n??u??void 0,...a})};function L(e,t){switch(t){case`show`:return`open`;case`hide`:return e===`closed`?`closed`:`closing`;case`exited`:return e===`closing`?`closed`:e}}function R({present:t}){let[n,r]=d(L,t?`open`:`closed`);e(()=>{r(t?`show`:`hide`)},[t]),c(()=>{if(n!==`closing`)return;let e=window.setTimeout(()=>r(`exited`),200);return()=>window.clearTimeout(e)},[n]);let i=o(e=>{e.target===e.currentTarget&&e.propertyName===`height`&&r(`exited`)},[]);return{isMounted:n!==`closed`,dataState:n===`open`?`open`:`closed`,onExitTransitionEnd:i}}function z({containerRef:t,isAttached:n}){let r=f(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 B(){let e=document.querySelector(`main, [role="main"]`);e!=null&&(e.hasAttribute(`tabindex`)||(e.tabIndex=-1),e.focus({preventScroll:!0}))}function V({isMounted:t,store:n,topId:r}){let i=f(null),{lastFocusedWithinRef:a}=z({containerRef:i,isAttached:t}),o=f(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){B();return}s!=null&&(s.querySelector(`[data-slot="alert-dismiss-icon-button"], [data-slot="alert-expand-button"]`)??s).focus()},[n,r]),{wrapperRef:i}}const H=`gap-2 py-2 pr-2 [&_[data-slot=alert-icon]]:shrink-0`,U={Root:P,Bar:({className:t,ref:r,...a})=>{let{store:o,contentId:s}=k(`AlertCenter.Bar`),{isExpanded:c,setExpanded:l}=A(`AlertCenter.Bar`),u=j(o),d=m(o.subscribe,o.getContentMounted,o.getContentMounted),p=u[0]??null,h=p!=null,{isMounted:v,dataState:y,onExitTransitionEnd:x}=R({present:h}),C=f(p);e(()=>{p!=null&&(C.current=p)},[p]);let w=p??C.current,T=f(null);e(()=>{let e=T.current;if(e==null)return;if(p!=null){let t=o.getHost(p.id);t.parentElement!==e&&e.childNodes.length>0&&e.replaceChildren(),b(e,t)&&o.notifyPlacementChange(),o.flushFocusRestore();return}let t=w==null?null:o.getHostSnapshot(w.id);t!=null&&t.parentNode!==e&&e.replaceChildren(t)});let{wrapperRef:E}=V({isMounted:v,store:o,topId:p?.id});if(e(()=>{let e=E.current;o.setTopLabel(h&&e!=null?S(e):``)}),e(()=>{let e=E.current;if(e==null)return;let t=new MutationObserver(()=>{o.setTopLabel(h?S(e):``)});return t.observe(e,{subtree:!0,childList:!0,characterData:!0}),()=>{t.disconnect()}},[o,h,v]),e(()=>()=>{o.setTopLabel(``)},[o]),e(()=>{o.setBarElement(E.current)}),e(()=>()=>{o.setBarElement(null)},[o]),!v||w==null)return null;let D=h?u.length-1:0;return g(`div`,{ref:E,tabIndex:-1,inert:!h,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":y,onTransitionEnd:x,children:_(i.Root,{ref:r,appearance:`banner`,intent:w.intent,className:n(H,`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`,t,w.className),...a,"data-slot":`alert-center-bar`,"data-placement":`bar`,"data-alert-id":w.id,children:[g(`div`,{ref:T,className:`contents`,"data-slot":`alert-center-bar-mount`}),D>0&&d&&g(i.ExpandButton,{count:D,expanded:c,"aria-controls":s,onClick:()=>l(!c)})]})})},Content:({"aria-label":r=`More alerts`,"aria-labelledby":a,className:o,ref:s,...c})=>{let{store:l,contentId:u}=k(`AlertCenter.Content`),{isExpanded:d,setExpanded:p}=A(`AlertCenter.Content`),m=j(l).slice(1),h=m.length>0;e(()=>(l.setContentMounted(!0),()=>{l.setContentMounted(!1)}),[l]);let _=f(h);e(()=>{let e=_.current&&!h;_.current=h,e&&d&&p(!1)},[h,d,p]);let v=f(null),y=t(v,s),{lastFocusedWithinRef:x}=z({containerRef:v,isAttached:h}),S=m.map(e=>e.id).join(` `);return e(()=>{let e=v.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&&b(n,l.getHost(e))&&(t=!0)}t&&l.notifyPlacementChange(),l.flushFocusRestore()},[l,S]),e(()=>{let e=x.current;if(e==null)return;if(e.isConnected){let t=v.current;e instanceof HTMLElement&&document.activeElement!==e&&(t==null||!t.contains(e))&&(x.current=null,e.focus({preventScroll:!0}));return}x.current=null;let t=v.current?.querySelector(`[data-slot="alert-dismiss-icon-button"]`);if(t!=null){t.focus();return}let n=l.getBarElement()?.querySelector(`[data-slot="alert-dismiss-icon-button"], [data-slot="alert-expand-button"]`);if(n!=null){n.focus();return}B()},[l,S]),m.length===0?null:g(`div`,{...c,ref:y,"data-slot":`alert-center-content`,id:u,"data-state":d?`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`,o),children:g(`ul`,{"aria-label":a==null?r:void 0,"aria-labelledby":a,className:`flex w-full flex-col`,children:m.map(e=>g(`li`,{children:g(i.Root,{appearance:`banner`,intent:e.intent,className:n(H,e.className),"data-slot":`alert-center-item`,"data-placement":`list`,"data-alert-id":e.id,children:g(`div`,{className:`contents`,"data-alert-mount":e.id})})},e.id))})})},Item:F,DismissIconButton:I};export{U 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};