plass-ui 1.6.0 → 1.8.0

package/README.md

@@ -55,12 +55,12 @@ If your project already runs Tailwind v4, import the token sheet instead:
 
 ```css
 @import 'tailwindcss';
-@import 'plass-ui/css/base.css'; /* tokens + what every component shares */
+@import 'plass-ui/css/base.css'; /* the tokens, once */
 @import 'plass-ui/css/button.css';
 @import 'plass-ui/css/text-field.css';
 ```
 
-Still one Tailwind pass, so the utilities keep Tailwind's own order, and about 5 kB gzipped smaller for a small set of components. There is one manifest per component, named after its folder in `dist/components`.
+Still one Tailwind pass, so the utilities keep Tailwind's own order, and about 10 kB gzipped smaller for a small set of components. There is one manifest per component, named after its folder in `dist/components`.
 
 ### The page under the components
 
@@ -120,7 +120,9 @@ One thing does **not** change with the theme, and it is deliberate: the colour o
 
 Every component is exported under a `Pl` prefix. `Button`, `Card` and `Table` are the most-taken identifiers in the ecosystem, and a consumer should not have to alias ours on import.
 
-130 of them. The [Flutter package](https://pub.dev/packages/plass_ui) holds 127 of these under the same names: `PlFlex`, `PlPortal` and `PlVisuallyHidden` answer problems only the DOM has, and `PlContextMenu` is a second trigger onto `PlMenu`'s surface. Every component has a page of its own with live previews and the full props table.
+130 of them, one for each folder in `dist/components`. The [Flutter package](https://pub.dev/packages/plass_ui) holds 127 of these under the same names, and the other three, `PlFlex`, `PlPortal` and `PlVisuallyHidden`, answer problems only the DOM has. Every component has a page of its own with live previews and the full props table.
+
+The list also names two exports that are not counted, because each shares a folder and a page with another component: `PlToggleGroup`, beside `PlToggle`, and `PlContextMenu`, a second trigger onto `PlMenu`'s surface. Flutter has `PlToggleGroup` but not `PlContextMenu`, for a reason of its own: no right-click gesture means the same thing on every platform Flutter runs on, so a Flutter app opens a `PlMenu` from `onLongPress` itself.
 
 ### Charts
 

package/dist/components/accordion/PlAccordion.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassHeadingLevel, PlassStyleProps } from '../../types.js';
+/**
+ * The six levels an HTML heading has.
+ *
+ * @deprecated Use `PlassHeadingLevel`, the same type in the shared vocabulary,
+ * which `PlDrawer` takes too.
+ */
+export type PlAccordionHeadingLevel = PlassHeadingLevel;
 export interface PlAccordionProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
     /**
      * Drop shadow depth. `0` is the default — an accordion is part of the page it
@@ -32,6 +39,17 @@ export interface PlAccordionProps extends PlassStyleProps, Omit<React.ComponentP
     dividers?: boolean;
     /** Unavailable. Every section stops answering. */
     disabled?: boolean;
+    /**
+     * The level of the heading every section's header is, `1` to `6`.
+     *
+     * A header is a heading, so a screen reader's list of headings can take the
+     * reader from one question to the next — and a heading has to sit one level
+     * under the one above it, or the outline skips a step. `3` fits an accordion
+     * under a section's `<h2>`; an FAQ directly under the page's `<h1>` wants `2`.
+     * Only the element changes: the type scale is the accordion's either way.
+     * @default 3
+     */
+    headingLevel?: PlassHeadingLevel;
     /**
      * Keeps closed panels in the DOM so the browser's own page search can find
      * and open them. Overrides `keepMounted`.

package/dist/components/accordion/PlAccordion.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Accordion as a}from"@base-ui/react/accordion";import{ChevronIcon as n}from"../../internal/icons.js";import{focusRingClasses as i,focusRingInsetClasses as r,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as p,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetPaddingXClasses as x,sheetPaddingYClasses as h,sheetRestClasses as v,sheetTitleClasses as b,surfaceSlots as g,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */l.createContext({size:"md",density:"default",dividers:!0}),y={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md},w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},$={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlAccordion=/* @__PURE__ */l.forwardRef(function PlAccordion({variant:t="glass",size:n,color:i,density:r,elevation:o=0,multiple:d=!1,value:c,defaultValue:m,onValueChange:f,dividers:u=!0,disabled:x=!1,hiddenUntilFound:h=!1,keepMounted:b=!1,className:y,style:w,children:$,...P},k){const z=s(),A=n??z.size??"md",C=i??z.color??"primary",I=r??z.density??"default",V=l.useMemo(()=>({size:A,density:I,dividers:u}),[A,I,u]),_=["flex flex-col",p[A],v[t],N,u?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--plass-divider)]":"p-1",y??""].filter(Boolean).join(" ");return e(j.Provider,{value:V,children:e(a.Root,{ref:k,multiple:d,value:c,defaultValue:m,onValueChange:e=>f?.(e),disabled:x,hiddenUntilFound:h,keepMounted:b,className:_,style:{...g(C,o),...w},...P,children:$})})});export const PlAccordionItem=/* @__PURE__ */l.forwardRef(function PlAccordionItem({value:s,title:p,subtitle:v,startIcon:g,action:P,truncate:k=!1,disabled:z=!1,className:A,children:C,...I},V){const{size:_,density:B,dividers:M}=l.useContext(j),R=x[B][_],F=h[B][_],U=k?"truncate":"";return t(a.Item,{ref:V,value:s,disabled:z,className:["flex flex-col",A??""].filter(Boolean).join(" "),...I,children:[t(a.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[t(a.Trigger,{className:["flex min-w-0 flex-1 cursor-pointer items-center text-start",R,F,o[_],N,c,M?r:`${i} ${y[_]}`,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"].filter(Boolean).join(" "),children:[d(g)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:g}):null,t("span",{className:`flex min-w-0 flex-1 flex-col ${u[_]}`,children:[d(p)?e("span",{className:`plass-title font-semibold ${U} ${b[_]}`.trim(),children:p}):null,d(v)?e("span",{className:`text-(--plass-muted-fg) ${U} ${m[_]}`.trim(),children:v}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(n,{})})]}),d(P)?e("span",{className:`flex shrink-0 items-center ${R}`,children:P}):null]}),e(a.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--plass-muted-fg)",f[_],R,w[B][_],$[B][_]].join(" "),children:C})})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{headingLevelOf as a}from"../../internal/heading.js";import{Accordion as n}from"@base-ui/react/accordion";import{ChevronIcon as i}from"../../internal/icons.js";import{focusRingClasses as r,focusRingInsetClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as p,radiusClasses as u,sheetBodyClasses as f,sheetHeaderGapClasses as h,sheetPaddingXClasses as x,sheetPaddingYClasses as v,sheetRestClasses as g,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";const y=/* @__PURE__ */l.createContext({size:"md",density:"default",dividers:!0,headingLevel:3}),w={xs:u.xs,sm:u.xs,md:u.sm,lg:u.sm,xl:u.md},$={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},P={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlAccordion=/* @__PURE__ */l.forwardRef(function PlAccordion({variant:t="glass",size:i,color:r,density:o,elevation:d=0,multiple:c=!1,value:m,defaultValue:p,onValueChange:f,dividers:h=!0,disabled:x=!1,headingLevel:v=3,hiddenUntilFound:b=!1,keepMounted:w,className:$,style:P,children:k,...z},A){const C=s(),I=i??C.size??"md",L=r??C.color??"primary",V=o??C.density??"default",_=a(v)??3,B=l.useMemo(()=>({size:I,density:V,dividers:h,headingLevel:_}),[I,V,h,_]),M=["flex flex-col",u[I],g[t],j,h?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--plass-divider)]":"p-1",$??""].filter(Boolean).join(" ");return e(y.Provider,{value:B,children:e(n.Root,{ref:A,multiple:c,value:m,defaultValue:p,onValueChange:e=>f?.(e),disabled:x,hiddenUntilFound:b,keepMounted:w,className:M,style:{...N(L,d),...P},...z,children:k})})});export const PlAccordionItem=/* @__PURE__ */l.forwardRef(function PlAccordionItem({value:s,title:a,subtitle:u,startIcon:g,action:N,truncate:k=!1,disabled:z=!1,className:A,children:C,...I},L){const{size:V,density:_,dividers:B,headingLevel:M}=l.useContext(y),R=`h${M}`,F=x[_][V],U=v[_][V],H=k?"truncate":"";return t(n.Item,{ref:L,value:s,disabled:z,className:["flex flex-col",A??""].filter(Boolean).join(" "),...I,children:[t(n.Header,{render:e(R,{}),className:"m-0 flex w-full items-center [font:inherit]",children:[t(n.Trigger,{className:["flex min-w-0 flex-1 cursor-pointer items-center text-start",F,U,d[V],j,m,B?o:`${r} ${w[V]}`,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"].filter(Boolean).join(" "),children:[c(g)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:g}):null,t("span",{className:`flex min-w-0 flex-1 flex-col ${h[V]}`,children:[c(a)?e("span",{className:`plass-title font-semibold ${H} ${b[V]}`.trim(),children:a}):null,c(u)?e("span",{className:`text-(--plass-muted-fg) ${H} ${p[V]}`.trim(),children:u}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[panel-open]:rotate-180"].join(" "),children:e(i,{})})]}),c(N)?e("span",{className:`flex shrink-0 items-center ${F}`,children:N}):null]}),e(n.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--plass-muted-fg)",f[V],F,$[_][V],P[_][V]].join(" "),children:C})})]})});

package/dist/components/accordion/index.d.ts

@@ -1,2 +1,2 @@
 export { PlAccordion, PlAccordionItem } from './PlAccordion.js';
-export type { PlAccordionProps, PlAccordionItemProps } from './PlAccordion.js';
+export type { PlAccordionHeadingLevel, PlAccordionProps, PlAccordionItemProps } from './PlAccordion.js';

package/dist/components/alert/PlAlert.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i,severityIcon as r}from"../../internal/icons.js";import{controlSlots as o,focusRingClasses as n,forcedFieldEdgeClasses as c,glassClasses as d,hasContent as m,iconClasses as f,radiusClasses as p,sheetBodyClasses as u,sheetHeaderGapClasses as h,sheetPaddingXClasses as v,sheetPaddingYClasses as x,sheetSectionGapClasses as g,sheetTitleClasses as b,transitionClasses as y}from"../../internal/styles.js";const j={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",c].join(" "),glass:/* @__PURE__ */[d,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},N={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},w={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},k={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:c,color:d,density:$,elevation:z=0,title:A,icon:C,action:P,onClose:_,closeLabel:B,className:L,style:R,children:q,...D},E){const F=t(),G=a(),H=B??G.dismiss,I=c??F.size??"md",J=d??F.color??"info",K=$??F.density??"default",M=void 0===C?r(J):C,O=N[l],Q=m(A);return e("div",{ref:E,role:k[J],className:["flex w-full items-start",v[K][I],x[K][I],p[I],g[I],u[I],y,j[l],f,L??""].filter(Boolean).join(" "),style:{...o(J,z,l),...R},...D,children:[m(M)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${O}`,children:M}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${h[I]}`,children:[Q?s("div",{className:`plass-title font-semibold ${b[I]} ${O}`,children:A}):null,m(q)?s("div",{className:Q?w[l]:void 0,children:q}):null]}),m(P)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:P}):null,_?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":H,onClick:_,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",n].join(" "),children:s(i,{})})}):null]})});
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i,severityIcon as r}from"../../internal/icons.js";import{controlSlots as o,focusRingClasses as n,forcedFieldEdgeClasses as c,glassClasses as d,hasContent as m,iconClasses as f,radiusClasses as p,sheetBodyClasses as u,sheetHeaderGapClasses as h,sheetPaddingXClasses as v,sheetPaddingYClasses as x,sheetSectionGapClasses as g,sheetTitleClasses as b,targetClasses as y,transitionClasses as j}from"../../internal/styles.js";const N={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",c].join(" "),glass:/* @__PURE__ */[d,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},w={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},k={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},$={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:c,color:d,density:z,elevation:A=0,title:C,icon:P,action:_,onClose:B,closeLabel:L,className:R,style:q,children:D,...E},F){const G=t(),H=a(),I=L??H.dismiss,J=c??G.size??"md",K=d??G.color??"info",M=z??G.density??"default",O=void 0===P?r(K):P,Q=w[l],S=m(C);return e("div",{ref:F,role:$[K],className:["flex w-full items-start",v[M][J],x[M][J],p[J],g[J],u[J],j,N[l],f,R??""].filter(Boolean).join(" "),style:{...o(K,A,l),...q},...E,children:[m(O)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${Q}`,children:O}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${h[J]}`,children:[S?s("div",{className:`plass-title font-semibold ${b[J]} ${Q}`,children:C}):null,m(D)?s("div",{className:S?k[l]:void 0,children:D}):null]}),m(_)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:_}):null,B?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":I,onClick:B,className:[y,"inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full p-0","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:opacity-100 focus-visible:opacity-100",n].join(" "),children:s(i,{})})}):null]})});

package/dist/components/anchor/PlAnchor.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{resolveScrollTarget as s}from"../../internal/scroll-target.js";import{useLabels as o}from"../../internal/labels.js";import{controlTextLeadingClasses as l,cx as a,focusRingClasses as i,surfaceSlots as c,transitionClasses as m}from"../../internal/styles.js";export const PlAnchor=/* @__PURE__ */r.forwardRef(function PlAnchor({items:f,active:d,offset:p=0,target:u,onSelect:h,label:g,navLabel:v,size:x,color:b,className:w,style:j,...y},E){const N=n(),A=o(),L=v??A.onThisPage,z=x??N.size??"sm",H=b??N.color??"primary",[B,C]=r.useState(void 0),P=void 0!==d;r.useEffect(()=>{if(P)return;const e=s(u);if(!e)return;let t=0;const measure=()=>{t=0,C(function readingAt(e,t,r){if(0===e.length)return;const n=r instanceof Window,s=n?document.documentElement.scrollHeight:r.scrollHeight,o=n?window.innerHeight:r.clientHeight,l=n?window.scrollY:r.scrollTop;if(s>o+1&&o+l>=s-2)return e[e.length-1].href;const a=n?0:r.getBoundingClientRect().top+r.clientTop;let i;for(const r of e){const e=document.getElementById(r.href.replace(/^#/,""));e&&e.getBoundingClientRect().top-a-t<=1&&(i=r.href)}return i}(f,p,e))},onScroll=()=>{t||=requestAnimationFrame(measure)};return measure(),e.addEventListener("scroll",onScroll,{passive:!0}),window.addEventListener("resize",onScroll,{passive:!0}),()=>{t&&cancelAnimationFrame(t),e.removeEventListener("scroll",onScroll),window.removeEventListener("resize",onScroll)}},[P,f,p,u]);const R=P?d:B;return t("nav",{ref:E,"aria-label":L,className:a("flex flex-col gap-2",l[z],w),style:{...c(H,0),...j},...y,children:[g?e("span",{className:"font-semibold text-(--plass-fg)",children:g}):null,e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:f.map(t=>{const r=t.href===R;return e("li",{className:"min-w-0",children:e("a",{href:t.href,"aria-current":r?"location":void 0,onClick:e=>h?.(t,e),className:a("block truncate rounded-(--plass-radius-xs) px-2 py-1","border-s-2",m,i,r?"[border-color:var(--p-accent)] bg-(--p-soft) font-medium text-(--p-accent)":"border-transparent text-(--plass-muted-fg) hover:bg-(--plass-glass-hover) hover:text-(--plass-fg)"),style:{paddingInlineStart:`calc(0.5rem + ${t.depth??0} * 0.75rem)`},children:t.label})},t.href)})})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{layoutBox as o}from"../../internal/layout-box.js";import{resolveScrollTarget as s}from"../../internal/scroll-target.js";import{useLabels as l}from"../../internal/labels.js";import{controlTextLeadingClasses as i,cx as a,focusRingClasses as c,surfaceSlots as m,transitionClasses as f}from"../../internal/styles.js";export const PlAnchor=/* @__PURE__ */r.forwardRef(function PlAnchor({items:d,active:p,offset:u=0,target:h,onSelect:g,label:v,navLabel:x,size:b,color:w,className:j,style:y,...E},N){const A=n(),L=l(),z=x??L.onThisPage,H=b??A.size??"sm",P=w??A.color??"primary",[B,C]=r.useState(void 0),R=void 0!==p;r.useEffect(()=>{if(R)return;const e=s(h);if(!e)return;let t=0;const measure=()=>{t=0,C(function readingAt(e,t,r){if(0===e.length)return;const n=r instanceof Window,s=n?document.documentElement.scrollHeight:r.scrollHeight,l=n?window.innerHeight:r.clientHeight,i=n?window.scrollY:r.scrollTop;if(s>l+1&&l+i>=s-2)return e[e.length-1].href;const a=n?0:r.getBoundingClientRect().top,c=n?0:r.clientTop,m=n?1:o(r,!1).perPixel;let f;for(const r of e){const e=document.getElementById(r.href.replace(/^#/,""));e&&(e.getBoundingClientRect().top-a)*m-c-t<=1&&(f=r.href)}return f}(d,u,e))},onScroll=()=>{t||=requestAnimationFrame(measure)};return measure(),e.addEventListener("scroll",onScroll,{passive:!0}),window.addEventListener("resize",onScroll,{passive:!0}),()=>{t&&cancelAnimationFrame(t),e.removeEventListener("scroll",onScroll),window.removeEventListener("resize",onScroll)}},[R,d,u,h]);const S=R?p:B;return t("nav",{ref:N,"aria-label":z,className:a("flex flex-col gap-2",i[H],j),style:{...m(P,0),...y},...E,children:[v?e("span",{className:"font-semibold text-(--plass-fg)",children:v}):null,e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:d.map(t=>{const r=t.href===S;return e("li",{className:"min-w-0",children:e("a",{href:t.href,"aria-current":r?"location":void 0,onClick:e=>g?.(t,e),className:a("block truncate rounded-(--plass-radius-xs) px-2 py-1","border-s-2",f,c,r?"[border-color:var(--p-accent)] bg-(--p-soft) font-medium text-(--p-accent)":"border-transparent text-(--plass-muted-fg) hover:bg-(--plass-glass-hover) hover:text-(--plass-fg)"),style:{paddingInlineStart:`calc(0.5rem + ${t.depth??0} * 0.75rem)`},children:t.label})},t.href)})})]})});

package/dist/components/animate-appear/PlAnimateAppear.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,animateChildren as n,animationClasses as s,animationSlots as i,isInfinite as o,slideOffsets as p,staggerSlots as d,useAnimationRun as l}from"../../internal/animate.js";export const PlAnimateAppear=/* @__PURE__ */e.forwardRef(function PlAnimateAppear({duration:e=380,delay:m=0,easing:c,repeat:u=1,alternate:f,paused:g,trigger:y="mount",play:h,once:x=!0,threshold:A=.2,stagger:b=70,durationStep:v=0,from:N="bottom",distance:P="0.75rem",fade:S=!0,reverse:$=!1,render:j,className:w,style:R,children:k,...q},z){const B=l({trigger:y,play:h,once:x,threshold:A,paused:g,infinite:o(u)}),{x:C,y:D}=p(N,P),E=n(k,`${t} ${s.slide}`,(a,r)=>i(d({duration:e,delay:m,easing:c,repeat:u,alternate:f,x:C,y:D,opacity:S?0:1},{index:a,count:r,stagger:b,durationStep:v,reverse:$})));return r({render:j,ref:[z,B.ref],props:{...a(q,B.handlers),className:w,style:{"--p-anim-state":B.state,...R},"data-plass-animation":"appear","data-state":B.state,children:E}})});
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,animateChildren as n,animationClasses as s,animationSlots as i,isInfinite as o,slideOffsets as p,staggerSlots as d,useAnimationRun as l}from"../../internal/animate.js";export const PlAnimateAppear=/* @__PURE__ */e.forwardRef(function PlAnimateAppear({duration:e=380,delay:m=0,easing:c,repeat:u=1,alternate:f,paused:g,trigger:y="mount",play:h,once:x=!0,threshold:A=.2,stagger:b=70,durationStep:v=0,from:N="bottom",distance:P="0.75rem",fade:S=!0,reverse:$=!1,render:j,className:w,style:R,children:k,...q},z){const B=l({trigger:y,play:h,once:x,threshold:A,paused:g,infinite:o(u),endless:o(u)}),{x:C,y:D}=p(N,P),E=n(k,`${t} ${s.slide}`,(a,r)=>i(d({duration:e,delay:m,easing:c,repeat:u,alternate:f,x:C,y:D,opacity:S?0:1},{index:a,count:r,stagger:b,durationStep:v,reverse:$})));return r({render:j,ref:[z,B.ref],props:{...a(q,B.handlers),className:w,style:{"--p-anim-state":B.state,...R},"data-plass-animation":"appear","data-state":B.state,children:E}})});

package/dist/components/animate-counter/PlAnimateCounter.d.ts

@@ -5,7 +5,9 @@ export interface PlAnimateCounterProps extends Omit<React.ComponentPropsWithoutR
     /** The number it arrives at, and the one a screen reader is told. */
     value: number;
     /**
-     * The number it starts from.
+     * The number the first count starts from, and a replay of it: a second
+     * hover, a new `play`, a `visible` trigger seen again. A new `value` counts
+     * on from the figure on screen instead.
      * @default 0
      */
     from?: number;
@@ -18,7 +20,8 @@ export interface PlAnimateCounterProps extends Omit<React.ComponentPropsWithoutR
     delay?: number;
     /**
      * How the number is written — `Intl.NumberFormat` options, so a currency, a
-     * percentage or a compact `1.2M` all work.
+     * percentage or a compact `1.2M` all work. The figures on the way are written
+     * with them too, and never with more decimals than the answer has.
      *
      * This is the reason the count is JavaScript rather than a `@property` and a
      * CSS counter, which is otherwise the neater way to animate a number: CSS can

package/dist/components/animate-counter/PlAnimateCounter.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{useDefaults as o}from"../../internal/defaults.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as m,srOnlyCopyClasses as c}from"../../internal/styles.js";function easeOut(e){return 1-(1-e)**3}export const PlAnimateCounter=/* @__PURE__ */n.forwardRef(function PlAnimateCounter({value:l,from:f=0,duration:d=1200,delay:p=0,format:h,easing:g=easeOut,trigger:j="visible",play:y,once:A=!0,threshold:F=.2,paused:b,render:x,className:N,...v},R){const q=o(),E=u(),O=i({trigger:j,play:y,once:A,threshold:F,paused:b,infinite:!1,nonce:l}),k=`${q.locale??""}\0${JSON.stringify(h??null)}`,w=n.useRef(null);null!==w.current&&w.current.key===k||(w.current={key:k,formatter:new Intl.NumberFormat(q.locale,h)});const C=w.current.formatter,[M,P]=n.useState(()=>E?l:f),S=n.useRef(0),$=n.useRef(g);n.useEffect(()=>{$.current=g}),n.useEffect(()=>{S.current=0},[O.runs,l,f]),n.useEffect(()=>{if(E)return void P(l);if(!O.started)return S.current=0,void P(f);if(b)return;const e=Math.max(1,d);let r,t=0;const step=n=>{r??=n-S.current,S.current=n-r;const a=Math.min(1,(S.current-p)/e);a<0?t=requestAnimationFrame(step):(P(f+(l-f)*$.current(a)),a<1&&(t=requestAnimationFrame(step)))};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[O.started,O.runs,E,b,l,f,d,p]);const I=C.format(l);return s({render:x??e("span",{}),ref:[R,O.ref],props:{className:m("tabular-nums",N),"data-plass-animation":"counter","data-state":O.state,children:t(r,{children:[e("span",{className:c,children:I}),e("span",{"aria-hidden":"true",children:C.format(M)})]}),...a(v,O.handlers)}})});
+"use client";import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as u}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{useLocale as o}from"../../internal/defaults.js";import{usePrefersReducedMotion as s}from"../../internal/media.js";import{cx as c,drawnCopyClasses as m,srOnlyClasses as l}from"../../internal/styles.js";function easeOut(r){return 1-(1-r)**3}function fractionDigitsIn(r){return r.reduce((r,t)=>"fraction"===t.type?r+[...t.value].length:r,0)}export const PlAnimateCounter=/* @__PURE__ */n.forwardRef(function PlAnimateCounter({value:f,from:d=0,duration:g=1200,delay:p=0,format:h,easing:F=easeOut,trigger:v="visible",play:y,once:x=!0,threshold:A=.2,paused:b,render:j,className:D,...N},P){const R=o(),w=s(),q=i({trigger:v,play:y,once:x,threshold:A,paused:b,infinite:!1,target:f}),I=`${R??""}\0${JSON.stringify(h??null)}`,k=n.useRef(null);null!==k.current&&k.current.key===I||(k.current={key:I,formatter:new Intl.NumberFormat(R,h)});const M=k.current.formatter,O=M.format(f),S=`${I}\0${f}`,$=n.useRef(null);if(null===$.current||$.current.key!==S){const r=function frameFormatter(r,t,e,n){const a=fractionDigitsIn(r.formatToParts(t)),u=r.resolvedOptions(),i=u.roundingPriority??"auto",o=u.maximumFractionDigits??a,s=void 0!==u.maximumSignificantDigits&&"auto"===i,c="auto"!==i&&void 0===n?.roundingPriority;if(o<=a&&!s&&!c)return r;let m;try{m=new Intl.NumberFormat(e,{...n,...s?{roundingPriority:"lessPrecision"}:{},minimumFractionDigits:Math.min(u.minimumFractionDigits??0,a),maximumFractionDigits:a})}catch{return r}return c?{format(t){const e=r.formatToParts(t);return fractionDigitsIn(e)>a?m.format(t):e.map(r=>r.value).join("")}}:m}(M,f,R,h),t=r.format(-0),e=r.format(0);$.current={key:S,write:n=>{const a=r.format(n);return a===t?e:a}}}const E=$.current,[C,T]=n.useState(()=>w?f:d),[J,z]=n.useState({value:f,from:d,runs:q.runs,origin:d,pending:!1,count:0});J.value!==f||J.from!==d?z({value:f,from:d,runs:q.runs,origin:J.from!==d?d:C,pending:J.pending||J.value!==f,count:J.count+1}):J.runs!==q.runs&&z(J.pending?{...J,runs:q.runs,pending:!1}:{...J,runs:q.runs,origin:d,count:J.count+1});const B=J.origin,G=n.useRef(0),H=n.useRef(null),K=n.useRef(F),L=n.useRef(p);n.useEffect(()=>{K.current=F,L.current=p}),n.useEffect(()=>{G.current=0,H.current=null},[J.count]),n.useEffect(()=>{const r=Math.max(1,g);let t,e=0;if(w){if(T(f),!q.started)return;const land=()=>{H.current??=L.current,G.current=Math.max(G.current,H.current+r)};if(null!==H.current||G.current>=L.current)return void land();if(b)return;const wait=r=>{t??=r-G.current,G.current=r-t,G.current<L.current?e=requestAnimationFrame(wait):land()};return e=requestAnimationFrame(wait),()=>cancelAnimationFrame(e)}if(!q.started)return G.current=0,H.current=null,void T(d);if(b)return;null===H.current&&G.current<L.current&&T(B);const step=n=>{t??=n-G.current,G.current=n-t;const a=Math.min(1,(G.current-(H.current??L.current))/r);a<0?e=requestAnimationFrame(step):(H.current??=L.current,T(B+(f-B)*K.current(a)),a<1&&(e=requestAnimationFrame(step)))};return e=requestAnimationFrame(step),()=>cancelAnimationFrame(e)},[q.started,J.count,w,b,f,d,B,g]);const Q=C===f?O:E.write(C),U=C===f?null:E.write(B);return u({render:j??r("span",{}),ref:[P,q.ref],props:{className:c("tabular-nums",D),"data-plass-animation":"counter","data-state":q.state,children:e(t,{children:[r("span",{className:l,children:O}),r("span",{"aria-hidden":"true","data-text":Q,"data-sample":O,className:m,children:null===U?null:r("span",{"data-text":U,className:"invisible [grid-area:1/1] before:content-[attr(data-text)]"})})]}),...a(N,q.handlers)}})});

package/dist/components/animate-float/PlAnimateFloat.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as i}from"../../internal/animate.js";import{cx as l}from"../../internal/styles.js";export const PlAnimateFloat=/* @__PURE__ */e.forwardRef(function PlAnimateFloat({duration:e=3e3,delay:s=0,easing:o="ease-in-out",repeat:c="infinite",alternate:p,paused:m,trigger:d="mount",play:f,once:u=!0,threshold:y=.2,distance:h=8,orientation:g="vertical",render:b,className:x,style:N,children:j,...v},A){const F=n(h),P="vertical"===g,w=i({effect:null,duration:e,delay:s,easing:o,repeat:c,alternate:p,x:P?"0":F,y:P?"number"==typeof h?-h+"px":`calc(-1 * ${F})`:"0",trigger:d,play:f,once:u,threshold:y,paused:m,infinite:!0,children:j});return r({render:b,ref:[A,w.ref],props:{...a(v,w.props),className:l(t,"plass-anim-float",w.className,x),style:{...w.style,...N},"data-plass-animation":"float",children:w.children}})});
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as i}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateFloat=/* @__PURE__ */e.forwardRef(function PlAnimateFloat({duration:e=3e3,delay:l=0,easing:o="ease-in-out",repeat:c="infinite",alternate:m,paused:p,trigger:d="mount",play:f,once:u=!0,threshold:y=.2,distance:h=8,orientation:g="vertical",render:b,className:v,style:x,children:N,...j},A){const F=n(h),P="vertical"===g,w=i({effect:null,duration:e,delay:l,easing:o,repeat:c,alternate:m,x:P?"0":F,y:P?"number"==typeof h?-h+"px":`calc(-1 * ${F})`:"0",trigger:d,play:f,once:u,threshold:y,paused:p,infinite:!0,moves:!0,children:N});return r({render:b,ref:[A,w.ref],props:{...a(j,w.props),className:s(t,"plass-anim-float",w.className,v),style:{...w.style,...x},"data-plass-animation":"float",children:w.children}})});

package/dist/components/animate-headline/PlAnimateHeadline.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassAnimateProps } from '../../types.js';
+import type { PlassAnimateProps, PlassAnimateRepeat } from '../../types.js';
 export interface PlAnimateHeadlineProps extends Omit<PlassAnimateProps, 'alternate'>, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How long each line is held before the next one comes up, in milliseconds.
@@ -23,6 +23,15 @@ export interface PlAnimateHeadlineProps extends Omit<PlassAnimateProps, 'alterna
      * @default true
      */
     loop?: boolean;
+    /**
+     * How the headline stops, and nothing else. It counts neither lines nor
+     * cycles: `loop` decides whether the lines start again after the last one.
+     * With `trigger="hover"`, `'infinite'` stops the reel where it is when the
+     * pointer and the focus leave, and a count leaves it turning after they have
+     * gone. Under any other `trigger` it changes nothing.
+     * @default 'infinite'
+     */
+    repeat?: PlassAnimateRepeat;
     /**
      * How far a line travels as it comes up or leaves — a CSS length, or a number
      * in pixels. `'100%'` is one line's own height.

package/dist/components/animate-headline/PlAnimateHeadline.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as r,useAnimationRun as s}from"../../internal/animate.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{cx as l}from"../../internal/styles.js";export const PlAnimateHeadline=/* @__PURE__ */t.forwardRef(function PlAnimateHeadline({duration:o=460,delay:u=0,easing:c,repeat:m="infinite",paused:d,trigger:f="mount",play:p,once:h=!0,threshold:g=.2,interval:v=2600,index:y,defaultIndex:x=0,onIndexChange:E,loop:j=!0,rise:N="100%",className:R,style:T,children:A,...C},b){const k=s({trigger:f,play:p,once:h,threshold:g,paused:d,infinite:a(m)}),H=i(),I=t.Children.toArray(A),M=I.length,[P,S]=t.useState(x),w=Math.min(y??P,Math.max(M-1,0)),[V,$]=t.useState(null),q=t.useRef(w);t.useEffect(()=>{q.current!==w&&($(q.current),q.current=w)},[w]),t.useEffect(()=>{if(null===V)return;const e=setTimeout(()=>$(null),o);return()=>clearTimeout(e)},[V,o]);const z=t.useCallback(()=>{const e=w+1;if(e>=M){if(!j)return;return void 0===y&&S(0),void E?.(0)}void 0===y&&S(e),E?.(e)},[w,M,j,y,E]),B=t.useRef(z);t.useEffect(()=>{B.current=z});const D=t.useRef(!1);return t.useEffect(()=>{if(void 0!==y||M<2||"running"!==k.state)return;if(!j&&w===M-1)return;const e=setTimeout(()=>{D.current=!0,B.current()},v+(D.current?0:u));return()=>clearTimeout(e)},[y,M,k.state,v,u,j,w]),e("div",{ref:e=>{k.ref(e),"function"==typeof b?b(e):b&&(b.current=e)},className:l("plass-headline",R),style:{"--p-anim-duration":`${o}ms`,"--p-anim-rise":r(N),...c?{"--p-anim-ease":c}:{},"--p-anim-state":k.state,...T},"data-plass-animation":"headline","data-state":k.state,...n(C,k.handlers),children:I.map((n,a)=>{const r=a===w?"active":a!==V||H?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"plass-headline-item","data-state":r,children:n},a);const s=n.props;return t.cloneElement(n,{key:a,className:l("plass-headline-item",s.className),"data-state":r})})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as i,useAnimationRun as s}from"../../internal/animate.js";import{usePrefersReducedMotion as l}from"../../internal/media.js";import{cx as o}from"../../internal/styles.js";export const PlAnimateHeadline=/* @__PURE__ */n.forwardRef(function PlAnimateHeadline({duration:u=460,delay:c=0,easing:m,repeat:d="infinite",paused:f,trigger:p="mount",play:h,once:g=!0,threshold:v=.2,interval:x=2600,index:y,defaultIndex:j=0,onIndexChange:E,loop:N=!0,rise:R="100%",className:T,style:w,children:A,...C},M){const b=s({trigger:p,play:h,once:g,threshold:v,paused:f,infinite:a(d),endless:N&&void 0===y}),H=l(),I=n.Children.toArray(A),P=I.length,[S,k]=n.useState(j),F=Math.min(y??S,Math.max(P-1,0)),[V,$]=n.useState(null),q=n.useRef(F);n.useEffect(()=>{q.current!==F&&($(q.current),q.current=F)},[F]),n.useEffect(()=>{if(null===V)return;const e=setTimeout(()=>$(null),u);return()=>clearTimeout(e)},[V,u]);const z=n.useCallback(()=>{const e=F+1;if(e>=P){if(!N)return;return void 0===y&&k(0),void E?.(0)}void 0===y&&k(e),E?.(e)},[F,P,N,y,E]),B=n.useRef(z);n.useEffect(()=>{B.current=z});const D=n.useRef(!1),G=n.useRef({line:F,gone:0});return n.useEffect(()=>{if(!b.started)return void(G.current={line:F,gone:0});if(P<1)return void(G.current={line:F,gone:0});if(void 0!==y)return void(G.current={line:F,gone:0});if("running"!==b.state)return;G.current.line!==F&&(G.current={line:F,gone:0});const e=G.current,t=performance.now(),n=P<2||!N&&F===P-1?void 0:setTimeout(()=>{D.current=!0,B.current()},Math.max(0,x+(D.current?0:c)-e.gone));return()=>{clearTimeout(n),e.gone+=performance.now()-t}},[y,P,b.started,b.state,x,c,N,F]),e("div",{ref:e=>{b.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:o("plass-headline",T),style:{"--p-anim-duration":`${u}ms`,"--p-anim-rise":i(R),...m?{"--p-anim-ease":m}:{},"--p-anim-state":b.state,...w},"data-plass-animation":"headline","data-state":b.state,...r(C,b.handlers),children:I.map((r,a)=>{const i=a===F?"active":a!==V||H?void 0:"leaving",s=n.isValidElement(r)?r.props:null,l=s?n.cloneElement(r,{className:o("plass-headline-item",s.className),"data-state":i}):e("span",{className:"plass-headline-item","data-state":i,children:r});return t(n.Fragment,{children:[a>0?" ":null,l]},a)})})});

package/dist/components/animate-lighting/PlAnimateLighting.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useDefaults as a}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as o,radiusClasses as l}from"../../internal/styles.js";export const PlAnimateLighting=/* @__PURE__ */e.forwardRef(function PlAnimateLighting({duration:e=3e3,delay:s=0,easing:p,repeat:m="infinite",alternate:d,paused:g,trigger:c="mount",play:f,once:u=!0,threshold:h=.2,color:y,glow:w,size:$,spread:b=3,arc:j=50,blur:v=5,reverse:x=!1,render:z,className:A,style:L,children:N,...P},R){const k=a(),q=y??k.color??"primary",B=$??k.size??"md",C=n({effect:null,duration:e,delay:s,easing:p,repeat:m,alternate:d,mode:x?"out":"in",trigger:c,play:f,once:u,threshold:h,paused:g,infinite:t(m)});return i({render:z,ref:[R,C.ref],props:{...r(P,C.props),className:o("plass-anim-lighting",l[B],A),style:{...C.style,"--p-anim-glow-from":w??`var(--plass-${q}-solid)`,"--p-anim-glow-to":w??`var(--plass-${q}-solid-to)`,"--p-anim-glow-width":`${b}px`,"--p-anim-glow-arc":`${j}deg`,"--p-anim-glow-blur":`${v}px`,...L},"data-plass-animation":"lighting",children:N}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useDefaults as a}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as o,radiusClasses as s}from"../../internal/styles.js";export const PlAnimateLighting=/* @__PURE__ */e.forwardRef(function PlAnimateLighting({duration:e=3e3,delay:l=0,easing:p,repeat:m="infinite",alternate:d,paused:g,trigger:c="mount",play:f,once:u=!0,threshold:h=.2,color:y,glow:w,size:$,spread:b=3,arc:v=50,blur:j=5,reverse:x=!1,render:z,className:A,style:L,children:N,...P},R){const k=a(),q=y??k.color??"primary",B=$??k.size??"md",C=n({effect:null,duration:e,delay:l,easing:p,repeat:m,alternate:d,mode:x?"out":"in",trigger:c,play:f,once:u,threshold:h,paused:g,infinite:t(m)});return i({render:z,ref:[R,C.ref],props:{...r(P,C.props),className:o("plass-anim-lighting",s[B],A),style:{...C.style,"--p-anim-glow-from":w??`var(--plass-${q}-solid)`,"--p-anim-glow-to":w??`var(--plass-${q}-solid-to)`,"--p-anim-glow-width":`${b}px`,"--p-anim-glow-arc":`${v}deg`,"--p-anim-glow-blur":`${j}px`,...L},"data-plass-animation":"lighting","data-plass-finite":t(m)?void 0:"",children:N}})});

package/dist/components/animate-marquee/PlAnimateMarquee.d.ts

@@ -41,6 +41,13 @@ export interface PlAnimateMarqueeProps extends PlassAnimateProps, React.Componen
      * @default true
      */
     pauseOnHover?: boolean;
+    /**
+     * What the strip is called — "Partners", "Customers". It names the box as a
+     * group, and under `prefers-reduced-motion` that box is the tab stop a
+     * keyboard reader scrolls it with, which is otherwise announced with no name
+     * of its own.
+     */
+    label?: string;
     /** The things that scroll past. */
     children?: React.ReactNode;
 }
@@ -66,7 +73,7 @@ export interface PlAnimateMarqueeProps extends PlassAnimateProps, React.Componen
  * the box would be out of sight for good. So the stylesheet draws only the
  * first copy and lets the box scroll along it instead of clipping it, and the
  * box is a tab stop while there is anything to scroll, for a reader with no
- * pointer to scroll it with.
+ * pointer to scroll it with. `label` is that stop's name.
  *
  * Only the first copy is read out or reached with Tab. The rest carry
  * `aria-hidden`, or a screen reader would announce everything on the strip as

package/dist/components/animate-marquee/PlAnimateMarquee.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as n,repeatValue as i,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{cx as p}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:u,delay:c=0,easing:d,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:w=!0,className:z,style:A,children:N,...O},S){const W=void 0===u&&R<=0,G=o({trigger:g,play:y,once:b,threshold:j,paused:v||W,infinite:a(f)}),P=t.useRef(null),$=t.useRef(null),[k,C]=t.useState(0),[E,F]=t.useState(!1),I="vertical"===q,B=m();t.useEffect(()=>{const e=P.current,t=$.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(I?r.rowGap:r.columnGap)||0,n=I?t.offsetHeight:t.offsetWidth;C(n+a),F(I?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[I,B]);const D=u??(k>0&&!W?k/R*1e3:12e3);return e("div",{ref:e=>{P.current=e,G.ref(e),"function"==typeof S?S(e):S&&(S.current=e)},className:p("plass-marquee",I&&"plass-marquee-vertical",z),style:{"--p-anim-gap":n(H),...d?{"--p-anim-ease":d}:{},"--p-anim-duration":`${Math.round(D)}ms`,"--p-anim-delay":`${c}ms`,"--p-anim-repeat":i(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":G.state,...A},"data-plass-animation":"marquee","data-state":G.state,"data-pause-on-hover":w?"":void 0,tabIndex:B&&E?0:void 0,...r(O,G.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?$:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:N},t))(r))})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as n,repeatValue as i,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as m}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:d,delay:p=0,easing:c,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:S=!0,label:w,className:z,style:A,children:N,...O},W){const G=void 0===d&&R<=0,P=o({trigger:g,play:y,once:b,threshold:j,paused:v||G,infinite:a(f),endless:a(f)}),$=t.useRef(null),k=t.useRef(null),[B,C]=t.useState(0),[E,F]=t.useState(!1),I="vertical"===q,D=u(),J=P.started&&Boolean(v||G),[K,L]=t.useState(null),Q=J&&(D||K===P.runs),T=Q?P.runs:null;T!==K&&L(T);const U=D||Q;t.useEffect(()=>{const e=$.current,t=k.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(I?r.rowGap:r.columnGap)||0,n=I?t.offsetHeight:t.offsetWidth;C(n+a),F(I?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[I,U]);const V=d??(B>0&&!G?B/R*1e3:12e3);return e("div",{ref:e=>{$.current=e,P.ref(e),"function"==typeof W?W(e):W&&(W.current=e)},className:m("plass-marquee",I&&"plass-marquee-vertical",z),style:{"--p-anim-gap":n(H),...c?{"--p-anim-ease":c}:{},"--p-anim-duration":`${Math.round(V)}ms`,"--p-anim-delay":`${p}ms`,"--p-anim-repeat":i(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":P.state,...A},"data-plass-animation":"marquee","data-plass-finite":a(f)?void 0:"","data-state":P.state,"data-pause-on-hover":S?"":void 0,tabIndex:U&&E?0:void 0,role:w?"group":void 0,"aria-label":w,...r(O,P.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?k:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:N},t))(r))})});

package/dist/components/animate-scramble/PlAnimateScramble.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{poolOf as o,scrambleAt as c}from"../../internal/scramble.js";import{cx as l,srOnlyCopyClasses as u}from"../../internal/styles.js";export const PlAnimateScramble=/* @__PURE__ */a.forwardRef(function PlAnimateScramble({children:d,characters:f,duration:p=1200,delay:h=0,tick:x=45,trigger:b="visible",play:j,once:M=!0,threshold:g=.2,paused:A,render:y,className:F,...v},N){const S=m(),q=i({trigger:b,play:j,once:M,threshold:g,paused:A,infinite:!1,nonce:d}),E=a.useMemo(()=>f??o(d),[f,d]),[P,R]=a.useState(()=>d),k=a.useRef(0);return a.useEffect(()=>{k.current=0},[q.runs,d]),a.useEffect(()=>{if(S)return void R(d);if(!q.started)return k.current=0,void R(c(d,E,0,0));if(A)return;const e=Math.max(1,p);let r,t=0,a=0,n=-1;const step=s=>{r??=s-k.current,k.current=s-r;const i=k.current-h,m=Math.min(1,i/e),o=Math.floor(Math.max(0,i)/Math.max(1,x));o!==n&&(n=o,a+=1,R(c(d,E,Math.max(0,m),a))),m<1?t=requestAnimationFrame(step):R(d)};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[q.started,q.runs,S,A,d,E,p,h,x]),s({render:y??e("span",{}),ref:[N,q.ref],props:{className:l(F),"data-plass-animation":"scramble","data-state":q.state,children:t(r,{children:[e("span",{className:u,children:d}),e("span",{"aria-hidden":"true",children:P})]}),...n(v,q.handlers)}})});
+"use client";import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as c}from"../../internal/animate.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{poolOf as i,scrambleAt as m}from"../../internal/scramble.js";import{cx as o,drawnCopyClasses as l,srOnlyClasses as f}from"../../internal/styles.js";export const PlAnimateScramble=/* @__PURE__ */n.forwardRef(function PlAnimateScramble({children:d,characters:p,duration:h=1200,delay:x=0,tick:A=45,trigger:M="visible",play:b,once:g=!0,threshold:j=.2,paused:F,render:q,className:y,...N},R){const v=u(),E=c({trigger:M,play:b,once:g,threshold:j,paused:F,infinite:!1,target:d}),S=n.useMemo(()=>p??i(d),[p,d]),[P,k]=n.useState(()=>d),w=n.useRef(0),z=n.useRef(null),B=n.useRef(x);return n.useEffect(()=>{B.current=x}),n.useEffect(()=>{w.current=0,z.current=null},[E.runs,d]),n.useEffect(()=>{const r=Math.max(1,h);let e,t=0;if(v){if(k(d),!E.started)return;const land=()=>{z.current??=B.current,w.current=Math.max(w.current,z.current+r)};if(null!==z.current||w.current>=B.current)return void land();if(F)return;const wait=r=>{e??=r-w.current,w.current=r-e,w.current<B.current?t=requestAnimationFrame(wait):land()};return t=requestAnimationFrame(wait),()=>cancelAnimationFrame(t)}if(!E.started)return w.current=0,z.current=null,void k(m(d,S,0,0));if(F)return;let n=0,a=-1;const step=s=>{e??=s-w.current,w.current=s-e;const c=w.current-(z.current??B.current),u=Math.min(1,c/r),i=Math.floor(Math.max(0,c)/Math.max(1,A));c>=0&&(z.current??=B.current),i!==a&&(a=i,n+=1,k(m(d,S,Math.max(0,u),n))),u<1?t=requestAnimationFrame(step):k(d)};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[E.started,E.runs,v,F,d,S,h,A]),s({render:q??r("span",{}),ref:[R,E.ref],props:{className:o(y),"data-plass-animation":"scramble","data-state":E.state,children:t(e,{children:[r("span",{className:f,children:d}),r("span",{"aria-hidden":"true","data-text":P,"data-sample":d,className:l})]}),...a(N,E.handlers)}})});

package/dist/components/animate-shake/PlAnimateShake.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as s}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:o,repeat:p=1,alternate:m,paused:c,trigger:d="manual",play:f=!1,once:h=!0,threshold:u=.2,replay:y,distance:g=6,render:k,className:N,style:b,children:j,...x},A){const P=s({effect:null,duration:e,delay:l,easing:o,repeat:p,alternate:m,x:n(g),trigger:d,play:f,once:h,threshold:u,paused:c,infinite:!1,nonce:y,children:j});return r({render:k,ref:[A,P.ref],props:{...a(x,P.props),className:i(t,"plass-anim-shake",P.className,N),style:{...P.style,...b},"data-plass-animation":"shake",children:P.children}})});
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as s}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:o,repeat:m=1,alternate:p,paused:c,trigger:d="manual",play:f=!1,once:h=!0,threshold:u=.2,replay:y,distance:g=6,render:k,className:N,style:b,children:j,...x},A){const P=s({effect:null,duration:e,delay:l,easing:o,repeat:m,alternate:p,x:n(g),trigger:d,play:f,once:h,threshold:u,paused:c,infinite:!1,moves:!0,nonce:y,children:j});return r({render:k,ref:[A,P.ref],props:{...a(x,P.props),className:i(t,"plass-anim-shake",P.className,N),style:{...P.style,...b},"data-plass-animation":"shake",children:P.children}})});

package/dist/components/animate-split/PlAnimateSplit.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as i}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as o,animationSlots as c,isInfinite as p,revealClip as l,slideOffsets as m,staggerSlots as d,useAnimationRun as u}from"../../internal/animate.js";import{cx as f,srOnlyCopyClasses as g}from"../../internal/styles.js";import{graphemesOf as h}from"../../internal/text.js";const y=/[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;function effectStart(e){switch(e){case"slide":return{opacity:0,...m("bottom","100%")};case"grow":return{opacity:0,scale:.8};case"zoom":return{opacity:0,scale:.4};case"rotate":return{opacity:0,angle:"-180deg",angleTo:"0deg"};case"reveal":return{opacity:1,clip:l("left")};default:return{opacity:0}}}export const PlAnimateSplit=/* @__PURE__ */a.forwardRef(function PlAnimateSplit({children:l,by:m="word",effect:S="fade",mode:w="in",duration:b=400,delay:j=0,easing:x,repeat:N=1,alternate:v,paused:k,trigger:$="mount",play:A,once:F=!0,threshold:H=.2,timeline:K,range:M,stagger:P=40,durationStep:T=0,reverse:z=!1,render:B,className:L,style:O,...R},q){const C=a.useMemo(()=>function piecesOf(e,t){const r=[];for(const a of e.split(/(\s+)/)){if(""===a)continue;if("word"===t||""===a.trim()){r.push([a]);continue}let e=[];for(const t of h(a))0===e.length||y.test(t)?(e=[t],r.push(e)):e.push(t)}return r}(l,m),[l,m]),D=u({trigger:"view"===K?"mount":$,play:A,once:F,threshold:H,paused:k,infinite:p(N)}),E={...effectStart(S),duration:b,delay:j,easing:x,repeat:N,alternate:v,mode:w,timeline:K,range:M},G=C.reduce((e,t)=>""===t[0].trim()?e:e+t.length,0),I=`${s} ${o[S]}`;let J=-1;const renderPart=(t,r)=>(J+=1,e("span",{className:`${I} inline-block whitespace-normal`,style:{...c(d(E,{index:J,count:G,stagger:P,durationStep:T,reverse:z})),"--p-anim-state":D.state},children:t},r));return i({render:B??e("span",{}),ref:[q,D.ref],props:{...n(R,D.handlers),className:f(L),style:O,"data-plass-animation":S,"data-state":D.state,children:r(t,{children:[e("span",{className:g,children:l}),e("span",{"aria-hidden":"true",children:C.map((t,r)=>""===t[0].trim()?e(a.Fragment,{children:t[0]},r):1===t.length?renderPart(t[0],r):e("span",{className:"inline-block",children:t.map((e,t)=>renderPart(e,t))},r))})]})}})});
+"use client";import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as i}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as o,animationSlots as c,isInfinite as p,revealClip as l,slideOffsets as m,staggerSlots as d,useAnimationRun as u}from"../../internal/animate.js";import{cx as f,srOnlyClasses as g}from"../../internal/styles.js";import{graphemesOf as h}from"../../internal/text.js";const y=/[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;function effectStart(e){switch(e){case"slide":return{opacity:0,...m("bottom","100%")};case"grow":return{opacity:0,scale:.8};case"zoom":return{opacity:0,scale:.4};case"rotate":return{opacity:0,angle:"-180deg",angleTo:"0deg"};case"reveal":return{opacity:1,clip:l("left")};default:return{opacity:0}}}export const PlAnimateSplit=/* @__PURE__ */r.forwardRef(function PlAnimateSplit({children:l,by:m="word",effect:S="fade",mode:w="in",duration:x=400,delay:b=0,easing:j,repeat:N=1,alternate:v,paused:k,trigger:$="mount",play:A,once:F=!0,threshold:H=.2,timeline:K,range:M,stagger:P=40,durationStep:T=0,reverse:z=!1,render:B,className:L,style:O,...R},q){const C=r.useMemo(()=>function piecesOf(e,t){const a=[];for(const r of e.split(/(\s+)/)){if(""===r)continue;if("word"===t||""===r.trim()){a.push([r]);continue}let e=[];for(const t of h(r))0===e.length||y.test(t)?(e=[t],a.push(e)):e.push(t)}return a}(l,m),[l,m]),D=u({trigger:"view"===K?"mount":$,play:A,once:F,threshold:H,paused:k,infinite:p(N),endless:p(N)&&"view"!==K}),E={...effectStart(S),duration:x,delay:b,easing:j,repeat:N,alternate:v,mode:w,timeline:K,range:M},G=C.reduce((e,t)=>""===t[0].trim()?e:e+t.length,0),I=`${s} ${o[S]}`;let J=-1;const renderPart=(t,a)=>(J+=1,e("span",{"data-text":t,className:`${I} inline-block whitespace-normal before:content-[attr(data-text)]`,style:{...c(d(E,{index:J,count:G,stagger:P,durationStep:T,reverse:z})),"--p-anim-state":D.state}},a));return i({render:B??e("span",{}),ref:[q,D.ref],props:{...n(R,D.handlers),className:f(L),style:O,"data-plass-animation":S,"data-state":D.state,children:a(t,{children:[e("span",{className:g,children:l}),e("span",{"aria-hidden":"true",className:"select-none",children:C.map((t,a)=>""===t[0].trim()?e(r.Fragment,{children:t[0]},a):1===t.length?renderPart(t[0],a):e("span",{className:"inline-block",children:t.map((e,t)=>renderPart(e,t))},a))})]})}})});

package/dist/components/animate-typing/PlAnimateTyping.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{isInfinite as s,useAnimationRun as i}from"../../internal/animate.js";import{usePrefersReducedMotion as n}from"../../internal/media.js";import{srOnlyCopyClasses as l}from"../../internal/styles.js";import{graphemesOf as o,textOf as c}from"../../internal/text.js";export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:m,speed:u=24,hold:p=1400,erase:d=!1,eraseSpeed:f,caret:h=!0,caretChar:y="|",duration:g,delay:j=0,repeat:x=1,paused:T,trigger:v="mount",play:N,once:b=!0,threshold:M=.2,className:w,style:A,children:E,...P},R){const S=i({trigger:v,play:N,once:b,threshold:M,paused:T,infinite:s(x)}),k=n(),C=m??c(E),q=r.useMemo(()=>o(C),[C]),z=q.length,[B,D]=r.useState(0),F=r.useRef(0),G=g&&z>0?g/z:1e3/Math.max(u,1),H=1e3/Math.max(f??2*u,1);return r.useEffect(()=>{F.current=0},[C,S.runs]),r.useEffect(()=>{if(k||0===z)return void D(z);if(!S.started)return F.current=0,void D(0);if(T)return;let e,t=!1,r=F.current,a=1,s=!1;const i="infinite"===x?1/0:Math.max(1,x);if(r>=z&&1===i)return;const step=()=>{if(!t){if(s)return r-=1,F.current=r,D(r),r<=0&&(s=!1,a+=1),void(e=setTimeout(step,s?H:G));if(r+=1,F.current=r,D(r),r<z)e=setTimeout(step,G);else if(!(a>=i)){if(d)return s=!0,void(e=setTimeout(step,p));a+=1,e=setTimeout(()=>{t||(r=0,F.current=0,D(0),e=setTimeout(step,G))},p)}}};return D(r),e=setTimeout(step,0===r?j:G),()=>{t=!0,clearTimeout(e)}},[S.started,S.runs,C,T,k,z,G,H,j,p,d,x]),t("div",{ref:e=>{S.ref(e),"function"==typeof R?R(e):R&&(R.current=e)},className:w,style:A,"data-plass-animation":"typing","data-state":S.state,...a(P,S.handlers),children:[e("span",{className:l,children:C}),t("span",{"aria-hidden":"true",className:"relative whitespace-pre-wrap",children:[q.slice(0,B).join(""),h?e("span",{className:"plass-caret absolute",children:y}):null,e("span",{"data-sample":q.slice(B).join(""),className:"invisible before:content-[attr(data-sample)]",children:h?e("span",{className:"inline-block",children:y}):null})]})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{isInfinite as a,useAnimationRun as u,useOffScreen as c}from"../../internal/animate.js";import{usePrefersReducedMotion as s}from"../../internal/media.js";import{srOnlyClasses as i}from"../../internal/styles.js";import{graphemesOf as l,textOf as o}from"../../internal/text.js";export const PlAnimateTyping=/* @__PURE__ */t.forwardRef(function PlAnimateTyping({text:m,speed:f=24,hold:d=1400,erase:p=!1,eraseSpeed:h,caret:x=!0,caretChar:y="|",duration:g,delay:v=0,repeat:j=1,paused:b,trigger:R="mount",play:w,once:M=!0,threshold:N=.2,className:T,style:S,children:P,...A},E){const k=u({trigger:R,play:w,once:M,threshold:N,paused:b,infinite:a(j),endless:a(j)}),C=s(),$=t.useRef(null),q=c($,x&&!C),z=m??o(P),B=t.useMemo(()=>l(z),[z]),D=B.length,[F,G]=t.useState(()=>({line:B,count:0})),H=t.useRef(0),I=t.useRef(!1),J=t.useRef(1),K=t.useRef(!1),L=t.useRef(null),O=t.useRef(0),Q=g&&D>0?g/D:1e3/Math.max(f,1),U=1e3/Math.max(h??2*f,1);t.useEffect(()=>{H.current=0,I.current=!1,J.current=1,K.current=!1,L.current=null,O.current=0},[z,k.runs]),t.useEffect(()=>{const show=e=>{G(r=>r.line===B&&r.count===e?r:{line:B,count:e})},e="infinite"===j?1/0:Math.max(1,j);if(C){if(show(D),!k.started||b||e>1||0===D)return;const land=()=>{H.current=D,L.current=null};if(H.current>0)return void land();const r=performance.now(),t=setTimeout(land,Math.max(0,v-O.current));return()=>{clearTimeout(t),O.current+=performance.now()-r}}if(!k.started)return H.current=0,I.current=!1,J.current=1,K.current=!1,L.current=null,O.current=0,void show(0);if(b)return;if(k.resting)return void show(H.current);if(0===D)return void show(0);let r,t=!1,n=H.current,a=I.current,u=0,c=!1;if(n>=D&&!a&&J.current>=e)return;const wait=(e,n)=>{L.current=e,u=performance.now(),r=setTimeout(()=>{t||(L.current=null,c=!1,n())},e)},finish=()=>{J.current>=e||(K.current=!0,wait(d,release))},release=()=>{if(K.current=!1,p)return a=!0,I.current=!0,void step();J.current+=1,n=0,H.current=0,show(0),wait(Q,step)},step=()=>{if(a)return n-=1,H.current=n,show(n),n<=0&&(a=!1,I.current=!1,J.current+=1),void wait(a?U:Q,step);n+=1,H.current=n,show(n),n<D?wait(Q,step):finish()};show(n);const s=L.current;return 0!==n||1!==J.current||a?K.current?wait(s??d,release):n>=D&&!a?finish():wait(s??(0===n?v:a?U:Q),step):(c=!0,wait(Math.max(0,v-O.current),step)),()=>{t=!0,clearTimeout(r);const e=performance.now()-u;c&&(O.current+=e),null!==L.current&&(L.current=Math.max(0,L.current-e))}},[k.started,k.runs,B,b,k.resting,C,D,Q,U,v,d,p,j]);const V="string"==typeof y||"number"==typeof y?String(y):null,caretGlyph=(r,t)=>e("span",null===V?{className:r,style:t,children:y}:{"data-text":V,className:`${r} before:content-[attr(data-text)]`,style:t});return r("div",{ref:e=>{$.current=e,k.ref(e),"function"==typeof E?E(e):E&&(E.current=e)},className:T,style:S,"data-plass-animation":"typing","data-state":k.state,...n(A,k.handlers),children:[e("span",{className:i,children:z}),r("span",{"aria-hidden":"true","data-text":F.line.slice(0,F.count).join(""),className:"relative whitespace-pre-wrap before:content-[attr(data-text)]",children:[x?caretGlyph("plass-caret absolute",q?{animationPlayState:"paused"}:void 0):null,e("span",{"data-sample":F.line.slice(F.count).join(""),className:"invisible before:content-[attr(data-sample)]",children:x?caretGlyph("inline-block"):null})]})]})});

package/dist/components/app-logo/PlAppLogo.d.ts

@@ -15,24 +15,12 @@ import type { PlassColor, PlassSize, PlassVariant } from '../../types.js';
  * - `circle` — the same tile, round. For the products whose icon is a disc.
  */
 export type PlAppLogoShape = 'bare' | 'plate' | 'circle';
-export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+interface PlAppLogoBaseProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * The mark. An `<img>`, an inline `<svg>`, a `PlIcon` — whatever the product's
-     * artwork actually is.
+     * artwork actually is. It says what it says itself: `alt` does not reach it.
      */
     children?: React.ReactNode;
-    /** A picture to draw as the mark, instead of `children`. */
-    src?: string;
-    /**
-     * What the picture says, for a reader who cannot see it.
-     *
-     * Leave it empty when `name` is set: the wordmark beside the mark already
-     * says the product's name, and a picture that repeats it is a screen reader
-     * saying it twice.
-     */
-    alt?: string;
-    /** The product's name, set beside the mark. */
-    name?: React.ReactNode;
     /** A line under the name — an environment, a tenant, a plan. */
     description?: React.ReactNode;
     /** How the artwork is framed. @default 'bare' */
@@ -52,6 +40,52 @@ export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'spa
      */
     render?: useRender.RenderProp;
 }
+/** A name that is there: anything React draws, short of nothing at all. */
+type PlAppLogoName = Exclude<React.ReactNode, null | undefined | boolean>;
+/** A logo with its name beside it, which makes the picture decorative. */
+interface PlAppLogoNamedProps extends PlAppLogoBaseProps {
+    /** The product's name, set beside the mark. */
+    name: PlAppLogoName;
+    /** A picture to draw as the mark, instead of `children`. */
+    src?: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Leave it out: the
+     * wordmark beside the mark already says the product's name, and a picture
+     * that repeats it is a screen reader saying it twice.
+     * @default ''
+     */
+    alt?: string;
+}
+/** A picture with no name beside it, which has to say what it is. */
+interface PlAppLogoPictureProps extends PlAppLogoBaseProps {
+    /** The product's name, set beside the mark. */
+    name?: React.ReactNode;
+    /** A picture to draw as the mark, instead of `children`. */
+    src: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Required here: a
+     * logo that is the link home with nothing else in it is named by this alone.
+     * `alt=""` says the picture is decorative.
+     */
+    alt: string;
+}
+/** Artwork drawn as `children`, which speaks for itself. */
+interface PlAppLogoArtworkProps extends PlAppLogoBaseProps {
+    /** The product's name, set beside the mark. */
+    name?: React.ReactNode;
+    src?: undefined;
+    /** Only read with `src`. */
+    alt?: string;
+}
+/**
+ * The props of a `PlAppLogo`.
+ *
+ * A union, so that a picture with no name beside it cannot leave out `alt`. A
+ * `src` with neither is a mark nothing describes, and as the link home it is a
+ * link with no name. A call that passes a `name` is the same as before, and a
+ * decorative picture says so with `alt=""`.
+ */
+export type PlAppLogoProps = PlAppLogoNamedProps | PlAppLogoPictureProps | PlAppLogoArtworkProps;
 /**
  * A product's mark, and its name beside it.
  *
@@ -70,9 +104,11 @@ export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'spa
  * **With a `name`, the mark is decorative.** The wordmark beside it already
  * says what the product is called, and a picture that says it again is a screen
  * reader reading the name twice. That is why `alt` is a prop rather than
- * something derived from `name`.
+ * something derived from `name`, and why the type asks for it only when a `src`
+ * has no `name` beside it.
  *
  * A logo is nearly always the way back to the front page. `render={<a href="/"
  * />}` makes it one without changing anything about how it is drawn.
  */
 export declare const PlAppLogo: React.ForwardRefExoticComponent<PlAppLogoProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/app-logo/PlAppLogo.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{useDefaults as r}from"../../internal/defaults.js";import{controlSlots as n,cx as i,forcedFieldEdgeClasses as o,glassClasses as c,hasContent as m,metaTextClasses as d,radiusClasses as p}from"../../internal/styles.js";const x={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},g={xs:"size-5",sm:"size-6",md:"size-8",lg:"size-10",xl:"size-12"},f={xs:"text-sm",sm:"text-base",md:"text-lg",lg:"text-xl",xl:"text-2xl"},u={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},h={solid:`[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:var(--p-lift)] ${o}`,glass:`${c} bg-(--plass-glass) text-(--p-accent) border [border-color:var(--plass-glass-line)]`,ghost:"bg-(--p-soft) text-(--p-accent)"};export const PlAppLogo=/* @__PURE__ */a.forwardRef(function PlAppLogo({children:a,src:o,alt:c="",name:b,description:v,shape:z="bare",variant:j="solid",size:N,color:w,render:y,className:k,style:A,...L},P){const $=r(),_=N??$.size??"md",F=w??$.color??"primary",R="bare"!==z,q=m(b)||m(v),B=o?e("img",{src:o,alt:c,className:R?"size-[70%] object-contain":"h-full w-auto"}):a;return t({render:y,ref:P,props:{className:i("inline-flex items-center text-(--plass-fg) [&_svg]:h-full [&_svg]:w-auto",u[_],k),style:{...n(F,1,j),...A},children:s(l,{children:[e("span",{"aria-hidden":!!m(b)||void 0,className:i("flex shrink-0 items-center justify-center overflow-hidden",R?g[_]:x[_],R?h[j]:"","circle"===z?"rounded-full":R?p[_]:""),children:B}),q?s("span",{className:"flex min-w-0 flex-col",children:[m(b)?e("span",{className:i("truncate font-semibold",f[_]),children:b}):null,m(v)?e("span",{className:i("truncate text-(--plass-muted-fg)",d[_]),children:v}):null]}):null]}),...L}})});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{useDefaults as a}from"../../internal/defaults.js";import{controlSlots as n,cx as i,focusRingClasses as o,hasContent as c,markRestClasses as m,metaTextClasses as d,radiusClasses as p,transitionClasses as x}from"../../internal/styles.js";const f={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},u={xs:"size-5",sm:"size-6",md:"size-8",lg:"size-10",xl:"size-12"},g={xs:"text-sm",sm:"text-base",md:"text-lg",lg:"text-xl",xl:"text-2xl"},h={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"};export const PlAppLogo=/* @__PURE__ */r.forwardRef(function PlAppLogo({children:r,src:z,alt:j="",name:N,description:b,shape:v="bare",variant:w="solid",size:y,color:A,render:L,className:P,style:$,..._},k){const F=a(),R=y??F.size??"md",q=A??F.color??"primary",B="bare"!==v,C=c(N)||c(b),D=z?e("img",{src:z,alt:j,className:B?"size-[70%] object-contain":"h-full w-auto"}):r;return t({render:L,ref:k,props:{className:i("inline-flex items-center text-(--plass-fg) [&_svg]:h-full [&_svg]:w-auto",h[R],o,P),style:{...n(q,1,w),...$},children:s(l,{children:[e("span",{"aria-hidden":!!c(N)||void 0,className:i("flex shrink-0 items-center justify-center overflow-hidden",B?u[R]:f[R],B?`${x} ${m[w]}`:"","circle"===v?"rounded-full":B?p[R]:""),children:D}),C?s("span",{className:"flex min-w-0 flex-col",children:[c(N)?e("span",{className:i("truncate font-semibold",g[R]),children:N}):null,c(b)?e("span",{className:i("truncate text-(--plass-muted-fg)",d[R]),children:b}):null]}):null]}),..._}})});

package/dist/components/area-chart/PlAreaChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/chart-frame.js';
 import { type ChartMarkers } from '../../internal/chart-line.js';
-import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+import type { PlassChartCurve, PlassChartLabelColor, PlassChartNulls, PlassChartValueLabels } from '../../types.js';
 export interface PlAreaChartProps extends CartesianChartProps {
     /**
      * How the edge of the band gets from one point to the next. The same three
@@ -30,10 +30,39 @@ export interface PlAreaChartProps extends CartesianChartProps {
     /** @default 'none' */
     valueLabels?: PlassChartValueLabels;
     /**
-     * Draws the band straight through a `null` instead of breaking at it. Off,
-     * and on an area it matters more than on a line: a fill that closes across a
-     * missing month paints a made-up number over a larger part of the chart.
-     * @default false
+     * What colour those numbers are written in.
+     *
+     * `series` — the default — gives each label the colour of the band it is
+     * sitting on, so a plot with four labelled series says which number belongs
+     * to which without the reader tracing it back. `ink` writes them all in the
+     * page's own foreground: the chart palette clears 4:1 against the sheet,
+     * which is the floor a *mark* is held to rather than the 4.5:1 body text
+     * wants, so reach for it where the labels have to meet the text contrast rule
+     * on their own.
+     * @default 'series'
+     */
+    valueLabelColor?: PlassChartLabelColor;
+    /**
+     * What a gap in a series does to the band.
+     *
+     * - `gap` — it breaks at the `null`. The default, and the only answer that
+     *   claims nothing the data did not: the blank says the reading is missing.
+     * - `connect` — the two sides are joined. Only when the gap is an artefact of
+     *   how the data was collected; otherwise the segment is a number the chart
+     *   made up.
+     * - `zero` — the gap is read as a zero, everywhere: on the axis, in the
+     *   tooltip and in the table as well as under the band. For a missing row
+     *   that genuinely means none.
+     * @default 'gap'
+     */
+    nulls?: PlassChartNulls;
+    /**
+     * Bridges a gap instead of breaking at it. It matters more on an area than on
+     * a line: a fill that closes across a missing month paints the made-up number
+     * over a larger part of the chart.
+     * @deprecated Use `nulls`. `connectNulls` is `nulls="connect"`, and `nulls`
+     * also has the third answer — reading the gap as a zero — which a boolean
+     * cannot express. It is still honoured when `nulls` is not given.
      */
     connectNulls?: boolean;
 }
@@ -51,4 +80,4 @@ export interface PlAreaChartProps extends CartesianChartProps {
  * so two of them overlapping stay readable. Stacked bands are opaquer, because
  * there the fill *is* the mark rather than a hint at the line above it.
  */
-export declare function PlAreaChart({ curve, stacked, markers, valueLabels, connectNulls, series, yAxis, format, locale, ...props }: PlAreaChartProps): React.JSX.Element;
+export declare function PlAreaChart({ curve, stacked, markers, valueLabels, valueLabelColor, nulls: nullsProp, connectNulls, series, yAxis, format, locale, ...props }: PlAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/PlAreaChart.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as a}from"../../internal/chart-line.js";import{stackToFull as n,writeChartValue as o}from"../../internal/chart.js";import{useDefaults as l}from"../../internal/defaults.js";export function PlAreaChart({curve:s="linear",stacked:i=!1,markers:c="none",valueLabels:m="none",connectNulls:u=!1,series:f,yAxis:d,format:p,locale:x,...h}){const j=l(),k=x??j.locale,v=r.useId().replace(/:/g,""),A="full"===i,b=r.useMemo(()=>A?n(f,e=>o(e,p,k)):f,[f,A,p,k]);return e(t,{...h,series:b,format:p,locale:x,yAxis:A?{min:0,max:100,tickFormat:e=>`${e}%`,...d}:d,stacked:!1!==i,inset:!0,includeZero:!0,headroom:"none"===m?0:10,children:r=>e(a,{context:r,curve:s,filled:!0,stacked:!1!==i,markers:c,valueLabels:m,connectNulls:u,gradient:!1,idPrefix:v})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{stackToFull as o,writeChartValue as l,zeroNulls as n}from"../../internal/chart.js";import{useLocale as s}from"../../internal/defaults.js";export function PlAreaChart({curve:i="linear",stacked:c=!1,markers:m="none",valueLabels:u="none",valueLabelColor:f="series",nulls:d,connectNulls:p=!1,series:x,yAxis:k,format:h,locale:j,...v}){const b=s(j),L=r.useId().replace(/:/g,""),g="full"===c,A=d??(p?"connect":"gap"),C=r.useMemo(()=>{const e="zero"===A?n(x):x;return g?o(e,e=>l(e,h,b)):e},[x,A,g,h,b]);return e(a,{...v,series:C,format:h,locale:j,yAxis:g?{min:0,max:100,tickFormat:e=>`${e}%`,...k}:k,stacked:!1!==c,stroked:!1===c,inset:!0,includeZero:!0,headroom:"none"===u?0:10,children:r=>e(t,{context:r,curve:i,filled:!0,stacked:!1!==c,markers:m,valueLabels:u,valueLabelColor:f,nulls:A,gradient:!1,idPrefix:L})})}

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,radiusClasses as c}from"../../internal/styles.js";const l=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:n="cover",rounded:s=!1,size:a,render:f,className:m,style:d,children:u,...j},b){const p=i(),v=a??p.size??"md",g=t("relative block w-full overflow-hidden",l,r[n],s?c[v]:"",m);return o({render:f,ref:b,props:{className:g,style:{aspectRatio:e,...d},children:u,...j}})});
+"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,focusRingClasses as c,radiusClasses as r}from"../../internal/styles.js";const l=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),n={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:s="cover",rounded:a=!1,size:m,render:f,className:d,style:u,children:p,...j},b){const v=i(),g=m??v.size??"md",z=v.color??"primary",w=t("relative block w-full overflow-hidden",l,n[s],a?r[g]:"",c,d);return o({render:f,ref:b,props:{className:w,style:{aspectRatio:e,"--p-ring":`var(--plass-${z}-ring)`,...u},children:p,...j}})});

package/dist/components/avatar/PlAvatar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Avatar as s}from"@base-ui/react/avatar";import{controlHeightClasses as o,controlSlots as l,controlSquareClasses as n,forcedFieldEdgeClasses as i,glassClasses as c,hasContent as d,radiusClasses as m,srOnlyClasses as p,transitionClasses as f}from"../../internal/styles.js";const g={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},v={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",i].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]"},h=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",f].join(" ");function PersonIcon(){return r("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:a,srcSet:i,alt:c,name:f,initials:u,shape:x,variant:b,size:j,color:y,elevation:w,delay:N,imageProps:z,onLoadingStatusChange:A,className:C,style:P,children:k,...B},S){const I=t(),L=x??"circle",F=b??"ghost",M=j??I.size??"md",R=y??I.color??"primary",Z=w??0,_=f?function initialsOf(e){const r=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===r.length?"":((Array.from(r[0])[0]??"")+(r.length>1?Array.from(r[r.length-1])[0]??"":"")).toLocaleUpperCase()}(f):"",O=c??f,U=d(k)?k:(u??_)||e(PersonIcon,{}),q=d(k)||Boolean(u??_),D=[h,o[M],n[M],g[M],"circle"===L?"rounded-full":m[M],v[F],C??""].filter(Boolean).join(" ");return r(s.Root,{ref:S,className:D,style:{...l(R,Z,F),...P},...B,children:[a?e(s.Image,{src:a,srcSet:i,alt:O??"",className:"size-full object-cover",onLoadingStatusChange:A,...z}):null,r(s.Fallback,{delay:a?N:void 0,className:"flex size-full items-center justify-center",children:[O&&q?e("span",{className:p,children:O}):null,e("span",{"aria-hidden":!(!O||!q)||void 0,className:"contents",children:U})]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as n,useRuntimeLocale as r}from"../../internal/defaults.js";import{Avatar as i}from"@base-ui/react/avatar";import{controlHeightClasses as s,controlSlots as l,controlSquareClasses as o,cx as c,hasContent as m,markRestClasses as d,pictureSlotClasses as f,radiusClasses as u,srOnlyClasses as h,transitionClasses as p}from"../../internal/styles.js";const g={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},v=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",p].join(" ");function PersonIcon(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:a,srcSet:p,alt:x,name:j,initials:y,shape:N,variant:b,size:w,color:z,elevation:A,delay:C,imageProps:P,onLoadingStatusChange:S,className:k,style:B,children:L,...I},M){const F=n(),R=r(void 0),Z=N??"circle",_=b??"ghost",O=w??F.size??"md",U=z??F.color??"primary",$=A??0,q=j?function initialsOf(e,t){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase(t)}(j,R):"",D=x??j,E=m(L)?L:(y??q)||e(PersonIcon,{}),G=m(L)||Boolean(y??q),{className:H,...J}=P??{},K=H??"size-full object-cover",Q=[v,s[O],o[O],g[O],"circle"===Z?"rounded-full":u[O],d[_],k??""].filter(Boolean).join(" ");return t(i.Root,{ref:M,className:Q,style:{...l(U,$,_),...B},...I,children:[a?e(i.Image,{src:a,srcSet:p,alt:D??"",keepMounted:!0,className:e=>"loaded"===e.imageLoadingStatus?K:c(K,"invisible absolute inset-0"),onLoadingStatusChange:S,...J}):null,t(i.Fallback,{delay:a?C:void 0,className:"flex size-full items-center justify-center",children:[D&&G?e("span",{className:h,children:D}):null,e("span",{"aria-hidden":!(!D||!G)||void 0,className:`contents ${f}`,children:E})]})]})});