@ngrok/mantle 0.84.1 → 0.84.2

package/dist/accordion.d.ts

@@ -1,5 +1,5 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
-import { n as IconProps } from "./icon-k4E9yNWD.js";
+import { n as IconProps } from "./icon-BmJ57Tgh.js";
 import { ComponentProps } from "react";
 //#region src/components/accordion/accordion.d.ts
 /**
@@ -125,8 +125,9 @@ declare const Item: ({ children, value, ref, ...props }: ComponentProps<"div"> &
  * The interactive header that toggles its section, rendered as a `<button>` with
  * `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.
+ * role varies). Its `aria-controls` points at the item's {@link Content}, as the
+ * WAI-ARIA disclosure pattern requires. Place the {@link TriggerIcon} as the last
+ * child so the default `justify-between` layout pushes it to the trailing edge.
  *
  * @see https://mantle.ngrok.com/components/data-display/accordion#accordiontrigger
  *
@@ -190,12 +191,15 @@ declare const TriggerIcon: ({ className, svg, ...props }: Omit<IconProps, "svg">
  * The collapsible region of an {@link Item} — the zero-padding viewport that
  * slides open and closed. Wrap its children in {@link Body} for the standard
  * padding (text inherits the ambient size); `Content` itself stays unpadded so
- * its `h-0` collapse can reach zero height. Always rendered into the DOM; when
- * collapsed (in
- * supporting browsers) it carries `hidden="until-found"` so its text stays
- * discoverable by the browser's find-in-page, and a `beforematch` listener opens
- * the section when the browser reveals a match. It is flow content, so it may
- * contain anything — including interactive elements.
+ * its `h-0` collapse can reach zero height. Always rendered into the DOM. When
+ * collapsed, it leaves the accessibility tree and the tab order, like a closed
+ * `<details>`: in browsers that support `hidden="until-found"` it carries that
+ * attribute, so its text stays discoverable by find-in-page and a `beforematch`
+ * listener opens the section when the browser reveals a match; in other
+ * browsers, and in the server HTML, it carries `inert`. Its `id` is the target
+ * of the {@link Trigger}'s `aria-controls`; `Item` generates it, so `id` is not
+ * a prop here. It is flow content, so it may contain anything, including
+ * interactive elements.
  *
  * @see https://mantle.ngrok.com/components/data-display/accordion#accordioncontent
  *
@@ -212,7 +216,7 @@ declare const TriggerIcon: ({ className, svg, ...props }: Omit<IconProps, "svg">
  *   </Accordion.Item>
  * </Accordion.Root>
  */
-declare const Content: ({ className, children, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+declare const Content: ({ className, children, ref, ...props }: Omit<ComponentProps<"div">, "id">) => import("react").JSX.Element;
 /**
  * The padded inner region of an {@link Item}'s {@link Content} — where the
  * section's body content lives. Owns the body's padding so {@link Content} can

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-CxM7jdFi.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-DdUwopIY.js";import{t as n}from"./cx-0HCjnNv1.js";import{t as r}from"./icon-CGKaq_tV.js";import{t as i}from"./slot-C3gII_9c.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";function g(e,t){return e.includes(t)}function _(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 v(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function y(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function b(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const x=o(null);function S(e){let t=c(x);return m(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const C=o(null);function w(e){let t=c(C);return m(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const T=t=>{let{type:r=`multiple`,value:a,defaultValue:o,onValueChange:s,asChild:c,children:l,className:u,ref:m,...g}=t,b=a!=null,[S,C]=p(()=>v(o)),w=d(()=>b?v(a):S,[b,a,S]),T=f(t);e(()=>{T.current=t});let E=d(()=>({type:r,openValues:w,setItemOpen:(e,t)=>{let n=_(w,e,t,r);n!==w&&(b||C(n),y(T.current,n))}}),[r,w,b]),D={...g,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,u)};return h(x.Provider,{value:E,children:h(c?i:`div`,{ref:m,...D,children:l})})},E=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=S(`Accordion.Item`),o=g(i,t),c=u(),l=s(e=>{a(t,e)},[a,t]),f=d(()=>({open:o,setOpen:l,contentId:c}),[o,l,c]);return h(C.Provider,{value:f,children:h(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},D=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s,contentId:c}=w(`Accordion.Trigger`);return h(`button`,{ref:i,type:`button`,...a,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,"aria-controls":c,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})},O=h(a,{weight:`bold`}),k={Root:T,Item:E,Trigger:D,TriggerIcon:({className:e,svg:t=O,...i})=>h(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,contentId:u}=w(`Accordion.Content`),d=f(null),p=t(d,a);return l(()=>{let e=d.current;if(!e||!b())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=d.current;e&&b()&&(e.removeAttribute(`inert`),s?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),h(`div`,{ref:p,...o,id:u,inert:!s,"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})=>h(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{k as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.84.1",
+	"version": "0.84.2",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",

package/dist/{alert-Blmunr_D.d.ts → alert-DCVfviBx.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-DjsmeoJ2.js";
-import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C39M5h4K.js";
+import { r as ButtonProps } from "./button-B5i9n7Qp.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-crUf0hbR.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert/alert.d.ts
 declare const intents: readonly ["danger", "important", "info", "success", "warning"];
@@ -26,6 +26,12 @@ type AlertProps = ComponentProps<"div"> & {
 /**
  * Displays a callout for user attention. Root container for all Alert sub-components.
  *
+ * It has no ARIA role of its own. When your code inserts the alert after an
+ * action, pass `role="alert"` so a screen reader announces it. Assistive tech
+ * can miss a live region that mounts already populated, so also move focus to
+ * the alert with `tabIndex={-1}`. Pass `role="status"` on a region that is
+ * already mounted for a less urgent message.
+ *
  * Trailing controls inherit these public CSS variables:
  *
  * | Variable | Default | Purpose |
@@ -166,6 +172,12 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" |
 /**
  * A compact, trailing control for dismissing an alert.
  *
+ * It removes nothing itself: stop rendering the alert in its `onClick`
+ * handler. When that unmount happens while the button holds focus, focus
+ * moves to the nearest tabbable element outside the alert (the next one in
+ * document order, else the previous one) instead of falling to `<body>`. If
+ * your handler or a layout effect places focus first, that choice stands.
+ *
  * It inherits `--alert-control-color`, `--alert-control-hover-color`, and
  * `--alert-control-hover-bg` from `Alert.Root`, shared with
  * `Alert.ExpandButton` when both controls are composed together.
@@ -184,7 +196,7 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" |
  * </Alert.Root>
  * ```
  */
-declare const DismissIconButton: ({ size, type, label, appearance, className, icon, ...props }: AlertDismissIconButtonProps) => import("react").JSX.Element;
+declare const DismissIconButton: ({ size, type, label, appearance, className, icon, ref, ...props }: AlertDismissIconButtonProps) => import("react").JSX.Element;
 type AlertExpandButtonProps = Omit<ButtonProps, "appearance" | "asChild" | "children" | "icon" | "iconPlacement" | "intent" | "size"> & {
   /** The number of alerts hidden by a collapsed alert center. */
   count: number;
@@ -328,6 +340,9 @@ declare const Alert: {
   readonly Description: typeof Description;
   /**
    * An optional, compact, trailing control for dismissing an alert.
+   * Stop rendering the alert in its `onClick` handler. When that unmount
+   * happens while the button holds focus, focus moves to the nearest tabbable
+   * element outside the alert instead of falling to `<body>`.
    * It inherits the `--alert-control-color`, `--alert-control-hover-color`, and
    * `--alert-control-hover-bg` variables from `Alert.Root`, shared with the
    * expand control.

package/dist/alert-DtBQuuuP.js

@@ -0,0 +1 @@
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-DdUwopIY.js";import{t as n}from"./cx-0HCjnNv1.js";import{t as r}from"./icon-U24NfYv7.js";import{t as i}from"./slot-C3gII_9c.js";import{t as a}from"./types-D85fCNV3.js";import{t as o}from"./button-DGsTE3P2.js";import{t as s}from"./button-CaM-ZAH5.js";import{CaretDownIcon as c}from"@phosphor-icons/react/CaretDown";import{createContext as l,useContext as u,useEffect as d,useMemo as f,useRef as p}from"react";import m from"tiny-invariant";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{CheckCircleIcon as _}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as v}from"@phosphor-icons/react/Info";import{MegaphoneIcon as y}from"@phosphor-icons/react/Megaphone";import{WarningIcon as b}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as x}from"@phosphor-icons/react/WarningDiamond";import{XIcon as S}from"@phosphor-icons/react/X";import{cva as C}from"class-variance-authority";function w(e){if(e.name===``)return!0;let t=Array.from(e.ownerDocument.querySelectorAll(`input`)).filter(t=>t.type===`radio`&&t.name===e.name&&t.form===e.form&&!t.disabled),n=t.find(e=>e.checked);return n==null?t[0]===e:n===e}function T(e){return!(!(e instanceof HTMLElement)||e.tabIndex<0||e.matches(`:disabled`)||e instanceof HTMLInputElement&&(e.type===`hidden`||e.type===`radio`&&!w(e))||e.closest(`[hidden], [inert]`)!=null||typeof e.checkVisibility==`function`&&!e.checkVisibility({visibilityProperty:!0}))}function E(e){let t=[],n=[];for(let r of e.ownerDocument.querySelectorAll(`a[href], area[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]`))!e.contains(r)&&T(r)&&((e.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING)===0?n.push(r):t.push(r));return n.reverse(),[...t,...n]}const D=l(null),O=h(S,{});function k(){let e=u(D);return m(e,`useAlertContext hook used outside of Alert parent!`),e}const A=({children:e,intent:t,redirectDismissFocus:n=!0})=>{let r=f(()=>({intent:t,redirectDismissFocus:n}),[t,n]);return h(D.Provider,{value:r,children:e})},j=C(`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:``}}}),M=({appearance:e=`default`,className:t,intent:r,ref:i,style:o,...s})=>h(A,{intent:r,children:h(`div`,{ref:i,"data-slot":`alert`,className:n(j({appearance:e,intent:r}),`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]`,t),style:a({"--alert-control-color":R(r),"--alert-control-hover-color":z(r),"--alert-control-hover-bg":B(r),...o}),...s})}),N={danger:h(b,{}),important:h(y,{mirrored:!0}),info:h(v,{}),success:h(_,{}),warning:h(x,{})},P=({className:e,ref:t,svg:i,...a})=>{let o=k(),s=N[o.intent];return h(r,{ref:t,"data-slot":`alert-icon`,className:n(`size-5`,e),svg:i??s,...a})},F=({className:e,ref:t,...r})=>h(`div`,{ref:t,"data-slot":`alert-content`,className:n(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,e),...r}),I=({asChild:e=!1,className:t,ref:r,...a})=>h(e?i:`h5`,{ref:r,"data-slot":`alert-title`,className:n(`font-medium`,t),...a}),L=({asChild:e=!1,className:t,ref:r,...a})=>h(e?i:`div`,{ref:r,"data-slot":`alert-description`,className:n(`text-sm`,t),...a}),R=e=>`var(--color-${e}-700)`,z=e=>`var(--color-${e}-800)`,B=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`;function V({buttonRef:t,enabled:n}){let r=p([]);e(()=>{if(n)return()=>{let e=t.current;if(e==null||document.activeElement!==e)return;let n=e.closest(`[data-slot~="alert"]`)??e;r.current=E(n)}},[t,n]),d(()=>{if(n)return()=>{let e=r.current;if(r.current=[],e.length===0)return;let{activeElement:t}=document;if(t==null||t===document.body){for(let t of e)if(t.isConnected&&T(t)&&(t.focus(),document.activeElement===t))return}}},[n])}const H={Root:M,Content:F,ExpandButton:({count:e,expanded:t,className:r,...i})=>g(o,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,"aria-expanded":t,"aria-label":t?`Collapse additional alerts`:`Show ${e} more ${e===1?`alert`:`alerts`}`,"data-slot":`alert-expand-button`,"data-alert-expand":!0,icon:h(c,{weight:`bold`,className:n(`size-4 transition-transform ease-out duration-150`,t&&`-rotate-180`)}),iconPlacement:`end`,className:n(`right-1.5 top-1.5 absolute gap-1 ps-1.5 pe-1`,`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),...i,children:[g(`span`,{className:`min-w-[2ch] text-center tabular-nums`,children:[`+`,e]}),h(`span`,{className:`hidden md:inline`,children:`more`})]}),Description:L,DismissIconButton:({size:e=`sm`,type:r=`button`,label:i=`Dismiss Alert`,appearance:a=`ghost`,className:o,icon:c=O,ref:l,...d})=>{let f=u(D),m=p(null),g=t(m,l);return V({buttonRef:m,enabled:f?.redirectDismissFocus??!0}),h(s,{ref:g,appearance:a,icon:c,intent:`neutral`,label:i,size:e,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:n(`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:r,...d})},Icon:P,Title:I};export{A as n,H 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-Blmunr_D.js";
+import { t as Alert } from "./alert-DCVfviBx.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert-center/alert-center.d.ts
 /**
@@ -127,6 +127,15 @@ type AlertCenterItemProps = {
   intent: AlertCenterIntent;
   /** Optional classes for this item's chrome `Alert.Root`, in both placements. */
   className?: string;
+  /**
+   * The position among same-intent peers. Lower comes first. Items that share
+   * an order keep arrival order. An item with no order follows every item that
+   * declares one, `Infinity` included. Set it when two same-intent alerts come
+   * from independent sources, because arrival order then depends on which
+   * source answers first. `intent` still decides the tier: a `warning` with
+   * `order={0}` never outranks a `danger`.
+   */
+  order?: number;
   /**
    * The banner content: compose `Alert.Icon`, `Alert.Content`, `Alert.Title`,
    * `Alert.Description`, and `AlertCenter.DismissIconButton`. Do NOT include
@@ -181,7 +190,7 @@ type AlertCenterItemProps = {
  * </AlertCenter.Root>
  * ```
  */
-declare const Item: ({ children, className, id, intent }: AlertCenterItemProps) => import("react").ReactPortal | null;
+declare const Item: ({ children, className, id, intent, order }: AlertCenterItemProps) => import("react").ReactPortal | null;
 type AlertCenterDismissIconButtonProps = ComponentProps<typeof Alert.DismissIconButton> & WithDataSlot & {
   /**
    * Dismissal is consumer-owned: remove the alert by unmounting its
@@ -365,10 +374,10 @@ declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabell
  * the remaining items as full-width banners.
  *
  * Ranking is deterministic: severity first (`danger` › `warning` ›
- * `important` › `info` › `success`), then arrival order within an intent —
- * items mounting together rank in tree order, later arrivals append after
- * their same-intent peers, and a dismissed-then-returning id resumes its
- * original position.
+ * `important` › `info` › `success`), then each item's declared `order`, then
+ * arrival order within an intent: items mounting together rank in tree
+ * order, later arrivals append after the same-intent peers that share their
+ * `order`, and a dismissed-then-returning id resumes its original position.
  *
  * Compose `Bar` and `Content` into `AppLayout.Notice`, alongside any other
  * window-level notice. Items may be authored anywhere under `Root`: their

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-D8StKSjK.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};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-DdUwopIY.js";import{t as n}from"./cx-0HCjnNv1.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{n as i,t as a}from"./alert-DtBQuuuP.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]||T(e.order,t.order)||e.sequence-t.sequence)}function T(e,t){return e===t?0:e==null?1:t==null||e<t?-1:1}function E(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 D=[];var O=class{#e=new Set;#t=new Map;#n=new Map;#r=new Map;#i=0;#a=D;#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 k=o(null),A=o(null);function j(e){let t=c(k);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}function M(e){let t=c(A);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}const N=e=>h(e.subscribe,e.getSnapshot,e.getSnapshot),P=o(!1);function F({store:e}){let t=N(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:E(n,t.length)})}const I=({children:e,defaultOpen:t,onOpenChange:n,open:r})=>{let[i]=m(()=>new O),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(k.Provider,{value:p,children:[_(A.Provider,{value:h,children:e}),_(F,{store:i})]})},L=({children:t,className:n,id:r,intent:a,order:o})=>{let{store:s}=j(`AlertCenter.Item`),l=c(P);g(!l,`AlertCenter.Item cannot be rendered inside another item's children.`);let[u,d]=m(null);return e(()=>{d(s.getHost(r))},[s,r]),e(()=>s.register({id:r,intent:a,className:n,order:o}),[s,r,a,n,o]),e(()=>{s.captureHostSnapshot(r)}),u==null?null:y(_(i,{intent:a,redirectDismissFocus:!1,children:_(P.Provider,{value:!0,children:t})}),u)},R=({"data-slot":n,label:i,ref:o,...s})=>{let l=c(P);g(l,`AlertCenter.DismissIconButton must be composed inside an <AlertCenter.Item>'s children.`);let{store:u}=j(`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 z(e,t){switch(t){case`show`:return`open`;case`hide`:return e===`closed`?`closed`:`closing`;case`exited`:return e===`closing`?`closed`:e}}function B({present:t}){let[n,r]=f(z,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 V({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 H(){let e=document.querySelector(`main, [role="main"]`);e!=null&&(e.hasAttribute(`tabindex`)||(e.tabIndex=-1),e.focus({preventScroll:!0}))}function U({isMounted:t,store:n,topId:r}){let i=p(null),{lastFocusedWithinRef:a}=V({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){H();return}s!=null&&(s.querySelector(`[data-alert-dismiss], [data-alert-expand]`)??s).focus()},[n,r]),{wrapperRef:i}}const W=`gap-2 py-2 pr-2 [&_[data-slot=alert-icon]]:shrink-0`,G={Root:I,Bar:({className:t,"data-slot":i,ref:o,...s})=>{let{store:c,contentId:l}=j(`AlertCenter.Bar`),{isExpanded:u,setExpanded:d}=M(`AlertCenter.Bar`),f=N(c),g=h(c.subscribe,c.getContentMounted,c.getContentMounted),y=f[0]??null,b=y!=null,{isMounted:S,dataState:w,onExitTransitionEnd:T}=B({present:b}),[E,D]=m(y);y!=null&&y!==E&&D(y);let O=y??E,k=p(null);e(()=>{let e=k.current;if(e==null)return;if(y!=null){let t=c.getHost(y.id);t.parentElement!==e&&e.childNodes.length>0&&e.replaceChildren(),x(e,t)&&c.notifyPlacementChange(),c.flushFocusRestore();return}let t=O==null?null:c.getHostSnapshot(O.id);t!=null&&t.parentNode!==e&&e.replaceChildren(t)});let{wrapperRef:A}=U({isMounted:S,store:c,topId:y?.id});if(e(()=>{let e=A.current;c.setTopLabel(b&&e!=null?C(e):``)}),e(()=>{let e=A.current;if(e==null)return;let t=new MutationObserver(()=>{c.setTopLabel(b?C(e):``)});return t.observe(e,{subtree:!0,childList:!0,characterData:!0}),()=>{t.disconnect()}},[c,b,S]),e(()=>()=>{c.setTopLabel(``)},[c]),e(()=>{c.setBarElement(A.current)}),e(()=>()=>{c.setBarElement(null)},[c]),!S||O==null)return null;let P=b?f.length-1:0;return _(`div`,{ref:A,"data-slot":`alert-center-bar-wrapper`,tabIndex:-1,inert:!b,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":w,onTransitionEnd:T,children:v(a.Root,{ref:o,appearance:`banner`,intent:O.intent,className:n(W,`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,O.className),...s,"data-slot":r(i,`alert-center-bar`),"data-placement":`bar`,"data-alert-id":O.id,children:[_(`div`,{ref:k,className:`contents`,"data-slot":`alert-center-bar-mount`}),P>0&&g&&_(a.ExpandButton,{count:P,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}=j(`AlertCenter.Content`),{isExpanded:m,setExpanded:h}=M(`AlertCenter.Content`),g=N(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}=V({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}H()},[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(W,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:L,DismissIconButton:R};export{G as AlertCenter};

package/dist/alert-dialog.d.ts

@@ -1,7 +1,7 @@
+import { c as Trigger$1, n as Content$1, o as Root$1, r as Description$1, s as Title$1, t as Close$1, u as primitive_d_exports } from "./dialog-B8YvfyIo.js";
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
-import { i as ButtonIntent, n as ButtonAppearance, r as ButtonProps } from "./button-DjsmeoJ2.js";
-import { c as Trigger$1, n as Content$1, o as Root$1, r as Description$1, s as Title$1, t as Close$1 } from "./dialog-u8PtHYES.js";
+import { i as ButtonIntent, n as ButtonAppearance, r as ButtonProps } from "./button-B5i9n7Qp.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert-dialog/alert-dialog.d.ts
 declare const intents: readonly ["info", "danger"];
@@ -108,7 +108,10 @@ type AlertDialogContentProps = ComponentProps<typeof Content$1> & {
 /**
  * The popover alert dialog container.
  *
- * Renders on top of the overlay and is centered in the viewport.
+ * Renders on top of the overlay and is centered in the viewport. It carries
+ * `role="alertdialog"`, and a pointer interaction outside the content does not
+ * close it: the user must acknowledge the dialog through `AlertDialog.Cancel`,
+ * `AlertDialog.Close`, or the Escape key.
  *
  * `AlertDialog.Content` renders its floating layer at Tailwind `z-60`, Mantle's
  * overlay tier, above every float (`z-50`). Floats composed inside the content
@@ -148,7 +151,7 @@ type AlertDialogContentProps = ComponentProps<typeof Content$1> & {
  * </AlertDialog.Root>
  * ```
  */
-declare const Content: ({ className, preferredWidth, ref, ...props }: AlertDialogContentProps) => import("react").JSX.Element;
+declare const Content: ({ className, onInteractOutside, preferredWidth, ref, ...props }: AlertDialogContentProps) => import("react").JSX.Element;
 /**
  * Contains the main content of the alert dialog.
  *
@@ -608,16 +611,15 @@ declare const Close: ({ ref, ...props }: ComponentProps<typeof Close$1>) => impo
  */
 declare const AlertDialog: {
   /**
-   * 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.
+   * A modal dialog that interrupts the user with important content and expects a
+   * response. Holds the open state and the `intent` that `AlertDialog.Icon` and
+   * `AlertDialog.Action` read.
    *
-   * `AlertDialog` renders its floating layer at Tailwind `z-60`, Mantle's
-   * overlay tier, above every float (`z-50`). Floats composed inside the content
-   * portal into the positioner (`data-slot="alert-dialog-positioner"`) and paint
-   * above the content. When multiple overlays are open, the most recently
-   * mounted overlay renders on top.
+   * `AlertDialog` renders its floating layer at Tailwind `z-60`, Mantle's overlay
+   * tier, above every float (`z-50`). Floats composed inside the content portal
+   * into the positioner (`data-slot="alert-dialog-positioner"`) and paint above
+   * the content. When multiple overlays are open, the most recently mounted
+   * overlay renders on top.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogroot
    *
@@ -653,11 +655,15 @@ declare const AlertDialog: {
    */
   readonly Root: typeof Root;
   /**
-   * 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 — if the
-   * action should also dismiss, wrap it with `AlertDialog.Close asChild`.
+   * 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 alert dialog by default.
+   *
+   * These buttons should be distinguished visually from the AlertDialogCancel button.
+   *
+   * Composes around the mantle Button component.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogaction
    *
@@ -693,8 +699,7 @@ declare const AlertDialog: {
    */
   readonly Action: typeof Action;
   /**
-   * Contains the main content of the alert dialog. Wraps the header and footer
-   * inside `AlertDialog.Content` next to `AlertDialog.Icon`.
+   * Contains the main content of the alert dialog.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogbody
    *
@@ -730,9 +735,12 @@ declare const AlertDialog: {
    */
   readonly Body: typeof Body;
   /**
-   * A button that closes the dialog and cancels the action. Defaults to
-   * `appearance="outlined"` and `intent="neutral"` so it visually
-   * de-emphasizes against `AlertDialog.Action`.
+   * A button that closes the dialog and cancels the action.
+   * Defaults to `appearance="outlined"` and `intent="neutral"`.
+   *
+   * This button should be distinguished visually from AlertDialogAction buttons.
+   *
+   * Composes around the mantle Button component.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcancel
    *
@@ -768,9 +776,12 @@ 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 runs
-   * the operation and dismisses the dialog.
+   * A button that closes the Alert Dialog. (Unstyled)
+   *
+   * `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 runs the operation and dismisses the dialog).
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogclose
    *
@@ -808,15 +819,18 @@ declare const AlertDialog: {
    */
   readonly Close: typeof Close;
   /**
-   * The popover alert dialog container. Renders on top of the overlay,
-   * centered in the viewport.
+   * The popover alert dialog container.
    *
-   * `AlertDialog.Content` renders its floating layer at Tailwind `z-60`,
-   * Mantle's overlay tier, above every float (`z-50`). Floats composed inside
-   * the content portal into the positioner
-   * (`data-slot="alert-dialog-positioner"`) and paint above the content. When
-   * multiple overlays are open, the most recently mounted overlay renders on
-   * top.
+   * Renders on top of the overlay and is centered in the viewport. It carries
+   * `role="alertdialog"`, and a pointer interaction outside the content does not
+   * close it: the user must acknowledge the dialog through `AlertDialog.Cancel`,
+   * `AlertDialog.Close`, or the Escape key.
+   *
+   * `AlertDialog.Content` renders its floating layer at Tailwind `z-60`, Mantle's
+   * overlay tier, above every float (`z-50`). Floats composed inside the content
+   * portal into the positioner (`data-slot="alert-dialog-positioner"`) and paint
+   * above the content. When multiple overlays are open, the most recently mounted
+   * overlay renders on top.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcontent
    *
@@ -853,7 +867,11 @@ declare const AlertDialog: {
   readonly Content: typeof Content;
   /**
    * An accessible description to be announced when the dialog is opened.
-   * Renders as a `div` by default; can be changed via the `asChild` prop.
+   * Renders as a `div` by default, but can be changed to any other element using
+   * the `asChild` prop.
+   *
+   * Alternatively, pass `aria-describedby` to `AlertDialogContent` and
+   * exclude this component.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogdescription
    *
@@ -964,8 +982,11 @@ declare const AlertDialog: {
   readonly Header: typeof Header;
   /**
    * An icon that visually represents the intent of the AlertDialog.
-   * Defaults to a warning icon for `danger` and an info icon for `info`. Can
-   * be overridden via the `svg` prop.
+   *
+   * Defaults to a warning icon for danger intent and an info icon for info
+   * intent with the appropriate color.
+   *
+   * Can be overridden with a custom icon using the `svg` prop.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogicon
    *

package/dist/alert-dialog.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-CxM7jdFi.js";import{t as r}from"./button-DwFvQWu4.js";import{t as i}from"./layer-container-CglTh9-6.js";import{a,c as o,i as s,n as c,o as l,r as u,s as d,t as f}from"./primitive-BSBmlRyy.js";import{createContext as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=p(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({intent:e,...t}){let n=h(()=>({intent:e}),[e]);return _(x.Provider,{value:n,children:_(l,{...t})})}const w=({ref:e,...t})=>_(o,{ref:e,"data-slot":`alert-dialog-trigger`,...t}),T=a,E=({className:t,ref:n,...r})=>_(s,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-60 backdrop-blur-xs`,t),...r,ref:n}),D=({className:t,preferredWidth:n=`max-w-md`,ref:r,...a})=>v(T,{children:[_(E,{}),_(i,{"data-slot":`alert-dialog-positioner`,className:`fixed inset-4 z-60 flex items-center justify-center`,children:_(c,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:r,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...a})})]}),O=({asChild:t=!1,className:r,ref:i,...a})=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:i,...a}),k=({asChild:t=!1,className:r,ref:i,...a})=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:i,...a}),A=({asChild:t=!1,className:r,ref:i,...a})=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:i,...a}),j=({className:t,ref:n,...r})=>_(d,{ref:n,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...r}),M=({className:t,ref:n,...r})=>_(u,{ref:n,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...r}),N={danger:`danger`,info:`neutral`},P=({appearance:e=`filled`,intent:t,ref:n,...i})=>{let a=S(),o=N[a.intent];return _(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:n,...i})},F=({appearance:t=`outlined`,className:n,intent:i=`neutral`,ref:a,...o})=>_(f,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:a,...o})}),I={danger:_(b,{}),info:_(y,{})},L={danger:`text-danger-600`,info:`text-accent-600`},R={Root:C,Action:P,Body:O,Cancel:F,Close:({ref:e,...t})=>_(f,{ref:e,"data-slot":`alert-dialog-close`,...t}),Content:D,Description:M,Footer:A,Header:k,Icon:({className:n,ref:r,svg:i,...a})=>{let o=S(),s=L[o.intent],c=I[o.intent];return _(t,{ref:r,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:i??c,...a})},Title:j,Trigger:w};export{R as AlertDialog};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-U24NfYv7.js";import{t as n}from"./slot-C3gII_9c.js";import{t as r}from"./button-DGsTE3P2.js";import{t as i}from"./layer-container-BTcQpd4K.js";import{a,c as o,i as s,n as c,o as l,r as u,s as d,t as f}from"./primitive-CejGAoGb.js";import{createContext as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=p(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({intent:e,...t}){let n=h(()=>({intent:e}),[e]);return _(x.Provider,{value:n,children:_(l,{...t})})}const w=({ref:e,...t})=>_(o,{ref:e,"data-slot":`alert-dialog-trigger`,...t}),T=a,E=({className:t,ref:n,...r})=>_(s,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-60 backdrop-blur-xs`,t),...r,ref:n}),D=({className:t,onInteractOutside:n,preferredWidth:r=`max-w-md`,ref:a,...o})=>v(T,{children:[_(E,{}),_(i,{"data-slot":`alert-dialog-positioner`,className:`fixed inset-4 z-60 flex items-center justify-center`,children:_(c,{role:`alertdialog`,"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:a,onInteractOutside:e=>{n?.(e),e.preventDefault()},className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,r,t),...o})})]}),O=({asChild:t=!1,className:r,ref:i,...a})=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:i,...a}),k=({asChild:t=!1,className:r,ref:i,...a})=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:i,...a}),A=({asChild:t=!1,className:r,ref:i,...a})=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:i,...a}),j=({className:t,ref:n,...r})=>_(d,{ref:n,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...r}),M=({className:t,ref:n,...r})=>_(u,{ref:n,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...r}),N={danger:`danger`,info:`neutral`},P=({appearance:e=`filled`,intent:t,ref:n,...i})=>{let a=S(),o=N[a.intent];return _(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:n,...i})},F=({appearance:t=`outlined`,className:n,intent:i=`neutral`,ref:a,...o})=>_(f,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:a,...o})}),I={danger:_(b,{}),info:_(y,{})},L={danger:`text-danger-600`,info:`text-accent-600`},R={Root:C,Action:P,Body:O,Cancel:F,Close:({ref:e,...t})=>_(f,{ref:e,"data-slot":`alert-dialog-close`,...t}),Content:D,Description:M,Footer:A,Header:k,Icon:({className:n,ref:r,svg:i,...a})=>{let o=S(),s=L[o.intent],c=I[o.intent];return _(t,{ref:r,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:i??c,...a})},Title:j,Trigger:w};export{R as AlertDialog};

package/dist/alert.d.ts

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

package/dist/alert.js

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

package/dist/alternate-announcement-BkH4bOKp.js

@@ -0,0 +1 @@
+function e(e,t){let n=t.current?`${e}\u00A0`:e;return t.current=!t.current,n}export{e as t};

package/dist/anchor-Cqu4GPPV.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-CGKaq_tV.js";import{t as n}from"./data-slot-EM6s2WEU.js";import{t as r}from"./slot-C3gII_9c.js";import{Children as i,cloneElement as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),f=({"data-slot":e,asChild:f,children:h,className:g,rel:_,icon:v,iconPlacement:y=`start`,ref:b,...x})=>{let S=m(_);if(f){let f=i.only(h);s(o(f),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let m=f.props?.children,_=x.target===`_blank`||f.props?.target===`_blank`;return l(r,{"data-slot":n(e,`anchor`),className:d(g),ref:b,rel:S??p(_),...x,children:a(f,{},u(c,{children:[v&&y===`start`&&l(t,{className:`inline-block mr-1.5`,svg:v}),l(`span`,{"data-slot":`anchor-label`,children:m}),v&&y===`end`&&l(t,{className:`inline-block ml-1.5`,svg:v})]}))})}return u(`a`,{"data-slot":n(e,`anchor`),className:d(g),ref:b,rel:S??p(x.target===`_blank`),...x,children:[v&&y===`start`&&l(t,{className:`inline-block mr-1.5`,svg:v}),l(`span`,{"data-slot":`anchor-label`,children:h}),v&&y===`end`&&l(t,{className:`inline-block ml-1.5`,svg:v})]})};function p(e){return e?`noopener noreferrer`:void 0}function m(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,m as r,f as t};

package/dist/anchor.d.ts

@@ -1,4 +1,5 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/anchor/types.d.ts
 /**
@@ -18,7 +19,7 @@ declare const anchorClassNames: (className?: string) => string;
 /**
  * The props for the `Anchor` component.
  */
-type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
+type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & WithDataSlot & {
   /**
    * An icon to render inside the anchor
    */
@@ -32,6 +33,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
    * The rel attribute defines the relationship between a linked resource and the current document.
    *
    * Every keyword within a space-separated value should be unique within that value.
+   * When omitted and `target="_blank"`, the anchor renders `rel="noopener noreferrer"`.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
    */
@@ -60,13 +62,15 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * icon — useful for "external link" or "download" affordances. Icons are
  * decorative; the link text must still describe the destination on its own.
  *
- * **Security.** When `target="_blank"`, `rel` should include
- * `"noopener noreferrer"`. The `rel` prop accepts an array — duplicates
- * are de-duped and sorted, so it's safe to merge token sets.
+ * **Security.** When `target="_blank"` and `rel` is omitted, the anchor
+ * renders `rel="noopener noreferrer"`. A `rel` you pass is used as-is. The
+ * `rel` prop accepts an array: duplicates are de-duped and sorted, so it's
+ * safe to merge token sets.
  *
- * **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, pass an `aria-label`.
+ * **Accessibility.** Link text must be self-describing: avoid "click
+ * here" / "read more". The icon is decorative by default: it renders
+ * `aria-hidden` unless the SVG carries `aria-label`, `aria-labelledby`, `role`,
+ * or an explicit `aria-hidden`. For icon-only links, pass an `aria-label`.
  *
  * **Structure.** `children` render inside an inline
  * `<span data-slot="anchor-label">`, between the two `icon` slots. Target that
@@ -87,13 +91,9 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * // Basic external link.
  * <Anchor href="https://ngrok.com/">ngrok.com</Anchor>
  *
- * // External link in a new tab with a leading icon.
- * <Anchor
- *   href="https://ngrok.com/docs"
- *   target="_blank"
- *   rel={["noopener", "noreferrer"]}
- *   icon={<BookIcon />}
- * >
+ * // External link in a new tab with a leading icon. `rel` defaults to
+ * // "noopener noreferrer" when `target="_blank"`.
+ * <Anchor href="https://ngrok.com/docs" target="_blank" icon={<BookIcon />}>
  *   ngrok docs
  * </Anchor>
  *
@@ -103,7 +103,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * </Anchor>
  * ```
  */
-declare const Anchor: ({ asChild, children, className, rel: propRel, icon, iconPlacement, ref, ...props }: AnchorProps) => import("react").JSX.Element;
+declare const Anchor: ({ "data-slot": dataSlot, asChild, children, className, rel: propRel, icon, iconPlacement, ref, ...props }: AnchorProps) => import("react").JSX.Element;
 /**
  * Resolves the `rel` attribute to a string.
  *

package/dist/anchor.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./anchor-BjyGV6tB.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};
+import{n as e,r as t,t as n}from"./anchor-Cqu4GPPV.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};

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-CxM7jdFi.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};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-C3gII_9c.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i,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.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-DVt4hvnu.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-B_rZqf8a.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};

package/dist/avatar.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-CxM7jdFi.js";import{useState as r}from"react";import{jsx as i}from"react/jsx-runtime";const a={circle:`rounded-full`,square:`rounded-md`},o=[`bg-emerald-500`,`bg-gray-500`,`bg-red-500`,`bg-violet-500`,`bg-cyan-500`,`bg-rose-500`,`bg-purple-500`,`bg-fuchsia-500`,`bg-green-500`,`bg-orange-500`,`bg-indigo-500`,`bg-teal-500`,`bg-yellow-500`,`bg-sky-500`,`bg-pink-500`,`bg-blue-500`,`bg-amber-500`];function s(e){let t=5381;for(let n=0;n<e.length;n+=1)t=t*33^e.charCodeAt(n);return t>>>0}function c(e){let t=s(e)%o.length;return o[t]??`bg-neutral-500`}function l(e){return e.replace(/[\p{P}`~!@#$%^&*+|=<>]/gu,``).trim().split(/\s+/).slice(0,2).map(e=>Array.from(e.toUpperCase())[0]??``).join(``)||`?`}const u={Root:({appearance:r=`circle`,asChild:o,className:s,colorSeed:l,"data-slot":u,...d})=>i(o?n:`span`,{className:e(`text-body bg-neutral-500/15 relative flex size-7 shrink-0 items-center justify-center overflow-hidden text-xs font-medium select-none`,a[r],l!=null&&[`text-static-white`,c(l)],s),"data-slot":t(u,`avatar`),...d}),Image:({asChild:a,className:o,"data-slot":s,onError:c,src:l,...u})=>{let[d,f]=r();return l==null||l===``||l===d?null:i(a?n:`img`,{className:e(`absolute inset-0 size-full object-cover`,o),"data-slot":t(s,`avatar-image`),onError:e=>{c?.(e),e.defaultPrevented||f(l)},src:l,...u})},Fallback:({asChild:r,children:a,className:o,"data-slot":s,name:c,...u})=>i(r?n:`span`,{"aria-hidden":c!=null||void 0,className:e(`flex size-full items-center justify-center`,o),"data-slot":t(s,`avatar-fallback`),...u,children:c==null?a:l(c)})};export{u as Avatar};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-C3gII_9c.js";import{useState as r}from"react";import{jsx as i}from"react/jsx-runtime";const a={circle:`rounded-full`,square:`rounded-md`},o=[`bg-emerald-500`,`bg-gray-500`,`bg-red-500`,`bg-violet-500`,`bg-cyan-500`,`bg-rose-500`,`bg-purple-500`,`bg-fuchsia-500`,`bg-green-500`,`bg-orange-500`,`bg-indigo-500`,`bg-teal-500`,`bg-yellow-500`,`bg-sky-500`,`bg-pink-500`,`bg-blue-500`,`bg-amber-500`];function s(e){let t=5381;for(let n=0;n<e.length;n+=1)t=t*33^e.charCodeAt(n);return t>>>0}function c(e){let t=s(e)%o.length;return o[t]??`bg-neutral-500`}function l(e){return e.replace(/[\p{P}`~!@#$%^&*+|=<>]/gu,``).trim().split(/\s+/).slice(0,2).map(e=>Array.from(e.toUpperCase())[0]??``).join(``)||`?`}const u={Root:({appearance:r=`circle`,asChild:o,className:s,colorSeed:l,"data-slot":u,...d})=>i(o?n:`span`,{className:e(`text-body bg-neutral-500/15 relative flex size-7 shrink-0 items-center justify-center overflow-hidden text-xs font-medium select-none`,a[r],l!=null&&[`text-static-white`,c(l)],s),"data-slot":t(u,`avatar`),...d}),Image:({asChild:a,className:o,"data-slot":s,onError:c,src:l,...u})=>{let[d,f]=r();return l==null||l===``||l===d?null:i(a?n:`img`,{className:e(`absolute inset-0 size-full object-cover`,o),"data-slot":t(s,`avatar-image`),onError:e=>{c?.(e),e.defaultPrevented||f(l)},src:l,...u})},Fallback:({asChild:r,children:a,className:o,"data-slot":s,name:c,...u})=>i(r?n:`span`,{"aria-hidden":c!=null||void 0,className:e(`flex size-full items-center justify-center`,o),"data-slot":t(s,`avatar-fallback`),...u,children:c==null?a:l(c)})};export{u as Avatar};

package/dist/badge.d.ts

@@ -10,7 +10,9 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
    */
   color?: Color;
   /**
-   * The icon to render inside the badge.
+   * The icon to render inside the badge. Decorative by default: it renders
+   * `aria-hidden` unless the SVG carries `aria-label`, `aria-labelledby`,
+   * `role`, or an explicit `aria-hidden`.
    */
   icon?: ReactNode;
   /**

package/dist/badge.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-CxM7jdFi.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),c(`span`,{"data-slot":`badge-label`,className:`contents`,children:u})]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),c(`span`,{"data-slot":`badge-label`,className:`contents`,children:p})]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-U24NfYv7.js";import{t as n}from"./slot-C3gII_9c.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),c(`span`,{"data-slot":`badge-label`,className:`contents`,children:u})]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),c(`span`,{"data-slot":`badge-label`,className:`contents`,children:p})]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};