plass-ui 1.6.0 → 1.8.0

package/dist/components/date-time-picker/PlDateTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as n}from"../button/PlButton.js";import{Calendar as a,TimeGrid as s,usePickerLabels as i}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerDivider as c,PickerFooter as d,PickerShell as m}from"../../internal/picker.js";import{clampMoment as u,displaySamples as h,formatDate as p,isDayOutside as f,isHour12 as S,isValidDate as b,localeWeekStart as y,mergeDateAndTime as g,startOfDay as D,startOfMonth as j,timeUnitSpan as k,toISODateTime as v,today as w,withPlaceholder as C,withTime as x}from"../../internal/date.js";import{cx as z,gapClasses as O}from"../../internal/styles.js";export const PlDateTimePicker=/* @__PURE__ */l.forwardRef(function PlDateTimePicker({value:T,defaultValue:P,onValueChange:M,open:N,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,shouldDisableTime:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium",timeStyle:"short"},hour12:J,showSeconds:K=!1,hourStep:L=1,minuteStep:Q=1,secondStep:U=1,placeholder:W,clearable:X=!1,showNowButton:Y=!0,closeOnSelect:Z=!1,labels:$,name:_,size:ee,color:te,density:le,readOnly:oe=!1,disabled:ne=!1,startIcon:ae,...se},ie){const re=o(),ce=A??re.locale,de=ee??re.size??"md",me=te??re.color??"primary",ue=le??re.density??"default",he=i($),pe=G??re.weekStartsOn??y(ce),fe=J??S(ce),[Se,be]=l.useState(P??null),ye=void 0!==T?T:Se,[ge,De]=l.useState(V??!1),je=N??ge,[ke,ve]=l.useState(()=>j(b(ye)?ye:I??w()));l.useEffect(()=>{je&&ve(j(b(ye)?ye:I??w()))},[je]);const setOpen=e=>{e&&(oe||ne)||(void 0===N&&De(e),B?.(e))},commit=e=>{void 0===T&&be(e),M?.(e)},we=l.useCallback((e,t)=>{const[l,o]=k(t,e),n=D(e).getTime();return!!(b(R)&&n+1e3*o<R.getTime())||!!(b(E)&&n+1e3*l>E.getTime())||(q?.(e,t)??!1)},[R,E,q]),Ce=new Date,xe=x(Ce,{seconds:K?Ce.getSeconds():0}),ze=f(xe,R,E)||(F?.(xe)??!1)||we(xe,"second"),Oe=l.useMemo(()=>C(h(ce,H),W),[ce,H,W]);return e(m,{...se,size:de,color:me,density:ue,readOnly:oe,disabled:ne,triggerRef:ie,startIcon:ae??e(r,{}),display:b(ye)?p(ye,ce,H):W??"",samples:Oe,empty:!b(ye),clearable:X,onClear:()=>commit(null),open:je,onOpenChange:setOpen,labels:he,name:_,formValue:b(ye)?v(ye,K):"",children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:z("flex items-stretch",O[de]),children:[e(a,{size:de,color:me,locale:ce,weekStartsOn:pe,month:ke,onMonthChange:ve,selected:[ye],onSelect:e=>{const t=u(b(ye)?g(e,ye):D(e),R,E,K);commit(t),ve(j(t)),Z&&setOpen(!1)},minDate:R,maxDate:E,shouldDisableDate:F,labels:he,autoFocus:!0}),e(c,{}),e(s,{size:de,density:ue,locale:ce,value:b(ye)?ye:null,referenceDate:b(ye)?ye:w(),onChange:commit,hour12:fe,showSeconds:K,hourStep:L,minuteStep:Q,secondStep:U,shouldDisableTime:we,labels:he})]}),t(d,{size:de,children:[X?e(n,{variant:"ghost",size:de,color:me,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:he.clear}):null,Y?e(n,{variant:"ghost",size:de,color:me,density:"compact",disabled:ze,onClick:()=>{commit(xe),ve(j(xe))},children:he.now}):null,e(n,{variant:"solid",size:de,color:me,density:"compact",onClick:()=>setOpen(!1),children:he.done})]})]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l,useLocale as n}from"../../internal/defaults.js";import{PlButton as a}from"../button/PlButton.js";import{Calendar as s,TimeGrid as i,usePickerLabels as r}from"../../internal/calendar.js";import{CalendarIcon as c}from"../../internal/icons.js";import{PickerDivider as d,PickerFooter as m,PickerShell as u}from"../../internal/picker.js";import{clampMoment as h,displaySamples as p,formatDate as f,isDayOutside as S,isHour12 as b,isSameMonth as y,isValidDate as g,localeWeekStart as D,mergeDateAndTime as j,startOfDay as k,startOfMonth as v,timeUnitSpan as w,toISODateTime as C,today as x,withPlaceholder as z,withTime as O}from"../../internal/date.js";import{cx as T,gapClasses as P}from"../../internal/styles.js";export const PlDateTimePicker=/* @__PURE__ */o.forwardRef(function PlDateTimePicker({value:M,defaultValue:N,onValueChange:V,open:B,defaultOpen:I,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:q,shouldDisableDate:A,shouldDisableTime:G,locale:H,weekStartsOn:J,format:K={dateStyle:"medium",timeStyle:"short"},hour12:L,showSeconds:Q=!1,hourStep:U=1,minuteStep:W=1,secondStep:X=1,placeholder:Y,clearable:Z=!1,showNowButton:$=!0,closeOnSelect:_=!1,labels:ee,name:te,size:oe,color:le,density:ne,readOnly:ae=!1,disabled:se=!1,startIcon:ie,...re},ce){const de=l(),me=n(H),ue=oe??de.size??"md",he=le??de.color??"primary",pe=ne??de.density??"default",fe=r(ee),Se=J??de.weekStartsOn??D(me),be=L??b(me),[ye,ge]=o.useState(N??null),De=void 0!==M?M:ye,[je,ke]=o.useState(I??!1),ve=B??je,[we,Ce]=o.useState(()=>v(g(De)?De:E??x()));o.useEffect(()=>{if(ve){const e=v(g(De)?De:E??x());Ce(t=>y(t,e)?t:e)}},[ve]);const setOpen=e=>{e&&(ae||se)||(void 0===B&&ke(e),R?.(e))},commit=e=>{void 0===M&&ge(e),V?.(e)},xe=o.useCallback((e,t)=>{const[o,l]=w(t,e),n=k(e).getTime();return!!(g(F)&&n+1e3*l<F.getTime())||!!(g(q)&&n+1e3*o>q.getTime())||(G?.(e,t)??!1)},[F,q,G]),ze=new Date,Oe=O(ze,{seconds:Q?ze.getSeconds():0}),Te=S(Oe,F,q)||(A?.(Oe)??!1)||xe(Oe,"second"),Pe=o.useMemo(()=>z(p(me,K),Y),[me,K,Y]);return e(u,{...re,size:ue,color:he,density:pe,readOnly:ae,disabled:se,triggerRef:ce,startIcon:ie??e(c,{}),display:g(De)?f(De,me,K):Y??"",samples:Pe,empty:!g(De),clearable:Z,onClear:()=>commit(null),open:ve,onOpenChange:setOpen,labels:fe,name:te,formValue:g(De)?C(De,Q):"",children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:T("flex items-stretch",P[ue]),children:[e(s,{size:ue,color:he,locale:me,weekStartsOn:Se,month:we,onMonthChange:Ce,selected:[De],onSelect:e=>{const t=h(g(De)?j(e,De):k(e),F,q,Q);commit(t),Ce(v(t)),_&&setOpen(!1)},minDate:F,maxDate:q,shouldDisableDate:A,labels:fe,autoFocus:!0}),e(d,{}),e(i,{size:ue,density:pe,locale:me,value:g(De)?De:null,referenceDate:g(De)?De:x(),onChange:commit,hour12:be,showSeconds:Q,hourStep:U,minuteStep:W,secondStep:X,shouldDisableTime:xe,labels:fe})]}),t(m,{size:ue,children:[Z?e(a,{variant:"ghost",size:ue,color:he,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:fe.clear}):null,$?e(a,{variant:"ghost",size:ue,color:he,density:"compact",disabled:Te,onClick:()=>{commit(Oe),Ce(v(Oe))},children:fe.now}):null,e(a,{variant:"solid",size:ue,color:he,density:"compact",onClick:()=>setOpen(!1),children:fe.done})]})]})})});

package/dist/components/drawer/PlDrawer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import type { PlassPortalClassNames, PlassSide, PlassStyleProps } from '../../types.js';
+import type { PlassHeadingLevel, PlassPortalClassNames, PlassSide, PlassStyleProps } from '../../types.js';
 /**
  * How the panel relates to the page.
  *
@@ -57,6 +57,18 @@ export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' |
     trigger?: React.ReactElement;
     /** The heading. Rendered as the element that names the drawer. */
     title?: React.ReactNode;
+    /**
+     * The level of the heading `title` is, `1` to `6`.
+     *
+     * An `inline` drawer's title sits in the page's outline, and a heading has
+     * to sit one level under the one above it, or the outline skips a step. `2`
+     * fits a sidebar beside the page's `<h1>`; a panel inside a section headed by
+     * an `<h2>` wants `3`. An `overlay` drawer's title takes the level too and
+     * still names the dialog. Only the element changes: the type scale is the
+     * drawer's either way.
+     * @default 2
+     */
+    headingLevel?: PlassHeadingLevel;
     /** A line under the title, and the drawer's accessible description. */
     description?: React.ReactNode;
     /**
@@ -110,6 +122,19 @@ export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' |
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * Keeps the drawer's content in the document while it is closed, hidden, out
+     * of the focus order and off the accessibility tree, rather than taking it
+     * out. `overlay` only.
+     *
+     * For a drawer that holds a site's navigation. A closed drawer is otherwise
+     * not in the document, and neither are its links — which is what a search
+     * engine finds on a phone, where the navigation is a drawer nobody has
+     * opened. Off by default, because a drawer's content is usually work that
+     * only needs doing once somebody opens it.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** The body. */
     children?: React.ReactNode;
 }
@@ -143,4 +168,4 @@ export declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
  * focus to the trigger, and the inert page behind.
  */
-export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel: closeLabelProp, extent, rounded, modal, dismissible, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;
+export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, headingLevel: headingLevelProp, description, actions, dividers, showClose, closeLabel: closeLabelProp, extent, rounded, modal, dismissible, keepMounted, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/PlDrawer.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{Dialog as d}from"@base-ui/react/dialog";import{CloseIcon as i}from"../../internal/icons.js";import{cx as t,focusRingClasses as n,glassClasses as p,hasContent as u,metaTextClasses as m,sheetBodyClasses as c,sheetHeaderGapClasses as f,sheetLineClasses as x,sheetPaddingXClasses as g,sheetPaddingYClasses as h,sheetSectionGapClasses as b,sheetTitleClasses as v,surfaceSlots as y}from"../../internal/styles.js";const w={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},j={left:{xs:"rounded-r-(--plass-radius-xs)",sm:"rounded-r-(--plass-radius-sm)",md:"rounded-r-(--plass-radius-md)",lg:"rounded-r-(--plass-radius-lg)",xl:"rounded-r-(--plass-radius-xl)"},right:{xs:"rounded-l-(--plass-radius-xs)",sm:"rounded-l-(--plass-radius-sm)",md:"rounded-l-(--plass-radius-md)",lg:"rounded-l-(--plass-radius-lg)",xl:"rounded-l-(--plass-radius-xl)"},top:{xs:"rounded-b-(--plass-radius-xs)",sm:"rounded-b-(--plass-radius-sm)",md:"rounded-b-(--plass-radius-md)",lg:"rounded-b-(--plass-radius-lg)",xl:"rounded-b-(--plass-radius-xl)"},bottom:{xs:"rounded-t-(--plass-radius-xs)",sm:"rounded-t-(--plass-radius-sm)",md:"rounded-t-(--plass-radius-md)",lg:"rounded-t-(--plass-radius-lg)",xl:"rounded-t-(--plass-radius-xl)"}},N={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},k={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},z=/* @__PURE__ */[p,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),_=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),C=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",_].join(" "),$=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",n].join(" ");export const PlDrawerClose=d.Close;export function PlDrawer({side:n="left",mode:p="overlay",size:D,color:P,density:O,open:T,defaultOpen:B,onOpenChange:F,trigger:L,title:R,description:S,actions:V,dividers:q=!1,showClose:A,closeLabel:E,extent:G,rounded:H=!0,modal:I=!0,dismissible:J=!0,className:K,classNames:M,style:Q,children:U,...W}){const X=a(),Y=o(),Z=E??Y.close,ss=D??X.size??"md",ls=P??X.color??"primary",es=O??X.density??"default",rs="overlay"===p,as="left"===n||"right"===n,os=A??rs,[ds,is]=r.useState(B??!0),ts=g[es][ss],ns=h[es][ss],ps=q?`${ts} ${ns}`:ts,us=u(R)||u(S),ms=u(V),cs=void 0===G?null:{[as?"width":"height"]:"number"==typeof G?`${G}px`:G},fs=t(z,c[ss],N[n],H?j[n][ss]:"",rs?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",rs?_:"",as?`h-full max-w-full ${void 0===G?w[ss]:""}`:"w-full "+(void 0===G?"max-h-[85%]":""),q?"":`${ns} ${b[ss]}`,K),xs=rs?d.Title:"h2",gs=rs?d.Description:"p",hs=l(e,{children:[us||os?l("div",{className:t("flex shrink-0 items-start gap-3",ps),children:[l("div",{className:t("flex min-w-0 flex-1 flex-col",f[ss]),children:[u(R)?s(xs,{className:t("m-0 font-semibold",v[ss]),children:R}):null,u(S)?s(gs,{className:t("m-0 text-(--plass-muted-fg)",m[ss]),children:S}):null]}),os?rs?s(d.Close,{"aria-label":Z,className:$,children:s(i,{})}):s("button",{type:"button","aria-label":Z,className:$,onClick:()=>{void 0===T&&is(!1),F?.(!1)},children:s(i,{})}):null]}):null,u(U)?s("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",ps,q&&(us||os)?x:"",q?"":"-my-1 py-1"),children:U}):null,ms?s("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",ps,q?x:""),children:V}):null]});return rs?l(d.Root,{open:T,defaultOpen:B,modal:I,disablePointerDismissal:!J,onOpenChange:(s,l)=>{J||s||"escape-key"!==l.reason?F?.(s):l.cancel()},children:[L?s(d.Trigger,{render:L}):null,l(d.Portal,{children:[s(d.Backdrop,{className:t("plass-portal",C,M?.backdrop)}),s(d.Viewport,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal) flex",k[n]),children:s(d.Popup,{className:fs,style:{...y(ls,3),...cs,...Q},...W,children:hs})})]})]}):T??ds?s("div",{className:fs,style:{...y(ls,0),...cs,...Q},...W,children:hs}):null}
+"use client";import{jsx as s,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{headingLevelOf as o}from"../../internal/heading.js";import{useLabels as i}from"../../internal/labels.js";import{Dialog as d}from"@base-ui/react/dialog";import{CloseIcon as t}from"../../internal/icons.js";import{cx as n,focusRingClasses as p,glassClasses as u,hasContent as m,metaTextClasses as c,sheetBodyClasses as f,sheetHeaderGapClasses as x,sheetLineClasses as g,sheetPaddingXClasses as h,sheetPaddingYClasses as b,sheetSectionGapClasses as v,sheetTitleClasses as y,surfaceSlots as w,targetClasses as j}from"../../internal/styles.js";const N={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},k={left:{xs:"rounded-r-(--plass-radius-xs)",sm:"rounded-r-(--plass-radius-sm)",md:"rounded-r-(--plass-radius-md)",lg:"rounded-r-(--plass-radius-lg)",xl:"rounded-r-(--plass-radius-xl)"},right:{xs:"rounded-l-(--plass-radius-xs)",sm:"rounded-l-(--plass-radius-sm)",md:"rounded-l-(--plass-radius-md)",lg:"rounded-l-(--plass-radius-lg)",xl:"rounded-l-(--plass-radius-xl)"},top:{xs:"rounded-b-(--plass-radius-xs)",sm:"rounded-b-(--plass-radius-sm)",md:"rounded-b-(--plass-radius-md)",lg:"rounded-b-(--plass-radius-lg)",xl:"rounded-b-(--plass-radius-xl)"},bottom:{xs:"rounded-t-(--plass-radius-xs)",sm:"rounded-t-(--plass-radius-sm)",md:"rounded-t-(--plass-radius-md)",lg:"rounded-t-(--plass-radius-lg)",xl:"rounded-t-(--plass-radius-xl)"}},z={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},_={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},C=/* @__PURE__ */[u,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),$=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),D=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:var(--plass-scrim-blur)] [-webkit-backdrop-filter:var(--plass-scrim-blur)]",$].join(" "),P="[&[hidden]]:hidden",O=/* @__PURE__ */[j,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center p-0","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",p].join(" ");export const PlDrawerClose=d.Close;export function PlDrawer({side:p="left",mode:u="overlay",size:j,color:L,density:M,open:T,defaultOpen:B,onOpenChange:F,trigger:R,title:S,headingLevel:V=2,description:q,actions:A,dividers:E=!1,showClose:G,closeLabel:H,extent:I,rounded:J=!0,modal:K=!0,dismissible:Q=!0,keepMounted:U=!1,className:W,classNames:X,style:Y,children:Z,...ss}){const es=a(),ls=i(),rs=H??ls.close,as=j??es.size??"md",os=L??es.color??"primary",is=M??es.density??"default",ds="overlay"===u,ts="left"===p||"right"===p,ns=G??ds,[ps,us]=r.useState(B??!0),ms=h[is][as],cs=b[is][as],fs=E?`${ms} ${cs}`:ms,xs=m(S)||m(q),gs=m(A),hs=void 0===I?null:{[ts?"width":"height"]:"number"==typeof I?`${I}px`:I},bs=n(C,f[as],z[p],J?k[p][as]:"",ds?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",ds?$:"",ts?`h-full max-w-full ${void 0===I?N[as]:""}`:"w-full "+(void 0===I?"max-h-[85%]":""),E?"":`${cs} ${v[as]}`,W),vs=`h${o(V)??2}`,ys=ds?d.Description:"p",ws=e(l,{children:[xs||ns?e("div",{className:n("flex shrink-0 items-start gap-3",fs),children:[e("div",{className:n("flex min-w-0 flex-1 flex-col",x[as]),children:[m(S)?ds?s(d.Title,{render:s(vs,{}),className:n("m-0 font-semibold",y[as]),children:S}):s(vs,{className:n("m-0 font-semibold",y[as]),children:S}):null,m(q)?s(ys,{className:n("m-0 text-(--plass-muted-fg)",c[as]),children:q}):null]}),ns?ds?s(d.Close,{"aria-label":rs,className:O,children:s(t,{})}):s("button",{type:"button","aria-label":rs,className:O,onClick:()=>{void 0===T&&us(!1),F?.(!1)},children:s(t,{})}):null]}):null,m(Z)?s("div",{className:n("min-h-0 flex-1 overflow-y-auto overscroll-contain",fs,E&&(xs||ns)?g:"",E?"":"-my-1 py-1"),children:Z}):null,gs?s("div",{className:n("flex shrink-0 flex-wrap items-center justify-end gap-2",fs,E?g:""),children:A}):null]});return ds?e(d.Root,{open:T,defaultOpen:B,modal:K,disablePointerDismissal:!Q,onOpenChange:(s,e)=>{Q||s||"escape-key"!==e.reason?F?.(s):e.cancel()},children:[R?s(d.Trigger,{render:R}):null,e(d.Portal,{keepMounted:U,children:[s(d.Backdrop,{className:n("plass-portal",D,U?P:"",X?.backdrop)}),s(d.Viewport,{className:n("plass-portal fixed inset-0 z-(--plass-z-portal) flex",_[p],U?P:""),children:s(d.Popup,{className:n(bs,U?P:""),style:{...w(os,3),...hs,...Y},...ss,children:ws})})]})]}):T??ps?s("div",{className:bs,style:{...w(os,0),...hs,...Y},...ss,children:ws}):null}

package/dist/components/empty/PlEmpty.d.ts

@@ -6,7 +6,10 @@ export interface PlEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * `1em` fills it without being told a number.
      */
     icon?: React.ReactNode;
-    /** The one line that says what is not here. */
+    /**
+     * The one line that says what is not here. It is not a heading of its own;
+     * pass one when the page's outline needs it.
+     */
     title?: React.ReactNode;
     /** What to do about it. One or two sentences, never a paragraph. */
     description?: React.ReactNode;

package/dist/components/empty/PlEmpty.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("p",{className:n("m-0 font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("p",{className:n("m-0 max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("div",{className:n("m-0 font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("div",{className:n("m-0 max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});

package/dist/components/fieldset/PlFieldset.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"react";import{Fieldset as r}from"@base-ui/react/fieldset";import{cx as i,hasContent as t,metaTextClasses as a,sheetHeaderGapClasses as n,sheetSectionGapClasses as d,sheetTitleClasses as o}from"../../internal/styles.js";export const PlFieldset=/* @__PURE__ */l.forwardRef(function PlFieldset({legend:l,description:c,disabled:m=!1,size:f="md",className:p,children:u,...x},b){const h=t(l)||t(c);return s(r.Root,{ref:b,disabled:m,className:i("m-0 flex min-w-0 flex-col border-0 p-0",d[f],p),...x,children:[h?s(r.Legend,{className:i("flex min-w-0 flex-col p-0",n[f]),children:[t(l)?e("span",{className:i("font-semibold",o[f]),children:l}):null,t(c)?e("span",{className:i("text-(--plass-muted-fg)",a[f]),children:c}):null]}):null,u]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Fieldset as r}from"@base-ui/react/fieldset";import{FieldsetDisabledContext as i,useDisabled as n}from"../../internal/form.js";import{cx as t,hasContent as a,metaTextClasses as o,sheetHeaderGapClasses as d,sheetSectionGapClasses as m,sheetTitleClasses as c}from"../../internal/styles.js";export const PlFieldset=/* @__PURE__ */s.forwardRef(function PlFieldset({legend:s,description:f,disabled:p=!1,size:u="md",className:x,children:h,...b},j){const N=a(s)||a(f),g=n(p);return l(r.Root,{ref:j,disabled:p,className:t("m-0 flex min-w-0 flex-col border-0 p-0",m[u],x),...b,children:[N?l(r.Legend,{className:t("flex min-w-0 flex-col p-0",d[u]),children:[a(s)?e("span",{className:t("font-semibold",c[u]),children:s}):null,a(f)?e("span",{className:t("text-(--plass-muted-fg)",o[u]),children:f}):null]}):null,e(i.Provider,{value:g,children:h})]})});

package/dist/components/file-picker/PlFilePicker.d.ts

@@ -6,6 +6,15 @@ export interface PlFileRejection {
     file: File;
     reason: PlFileRejectionReason;
 }
+/** One drop, or one pick from the file dialog, as `onAdd` hands it over. */
+export interface PlFileBatch {
+    /** What the batch added to the list, in the order it arrived. */
+    kept: File[];
+    /** What it turned away, and why. */
+    rejected: PlFileRejection[];
+    /** Whether the files were dropped on the field or chosen in the dialog. */
+    source: 'drop' | 'dialog';
+}
 export interface PlFilePickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'title' | 'children'> {
     /**
      * Drop shadow depth. `0` is the default — a dropzone is cut into the page
@@ -38,10 +47,19 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
      * file disappears silently, which is the single worst thing a dropzone does.
      */
     onReject?: (rejections: PlFileRejection[]) => void;
+    /**
+     * Called once per drop or dialog pick with what it kept and what it turned
+     * away together, after `onReject` and `onFilesChange`. The place for a rule
+     * that needs both halves, such as an error only when nothing in the batch
+     * could be used. A batch with no file in it, and a removal, call nothing.
+     */
+    onAdd?: (batch: PlFileBatch) => void;
     /** The name of what the box collects. */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the box, or in its top edge.
+     * Where the `label` goes — above the box, or in its top edge. `float` puts it
+     * in the edge as well: the box always has words of its own where a floating
+     * label would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */
@@ -81,6 +99,19 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
      * @default `Remove {name}`, from the label pack
      */
     removeLabel?: (name: string) => string;
+    /**
+     * Keeps a file let go beside the box from leaving the page. A browser opens a
+     * file dropped where nothing takes it, in place of the page, or downloads
+     * it, so a near miss throws away whatever the reader had filled in.
+     *
+     * While the picker is mounted and neither disabled nor read-only, a file
+     * dragged over the rest of the page shows the no-drop pointer and is not
+     * dropped. A drop target of the page that takes the file itself, another
+     * picker or a native `<input type="file">` among them, is left alone, and so
+     * is a drag that carries no file.
+     * @default false
+     */
+    preventDocumentDrop?: boolean;
     /** Stretches to the width of the container. @default true */
     fullWidth?: boolean;
     /** Unavailable. */

package/dist/components/file-picker/PlFilePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Field as l}from"@base-ui/react/field";import{useDefaults as o}from"../../internal/defaults.js";import{FormControl as a,leaveFormControl as t,useFormReport as n}from"../../internal/form.js";import{glowPointerMove as i}from"../../internal/glow.js";import{CloseIcon as d}from"../../internal/icons.js";import{useLabels as c}from"../../internal/labels.js";import{FieldNotch as p,notchShellStyle as f}from"../../internal/notch.js";import{controlTextLeadingClasses as u,disabledClasses as m,focusRingClasses as h,gapClasses as b,glassClasses as v,hasContent as g,iconClasses as x,metaTextClasses as y,radiusClasses as j,readOnlyFilterClasses as $,sheetTitleClasses as k,stackGapClasses as w,surfaceSlots as N,transitionClasses as z}from"../../internal/styles.js";const _={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},C={solid:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},I={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"},B=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)]","group-hover/field:[border-color:var(--p-line-hover)]","group-has-[:focus-visible]/field:[border-color:var(--p-ring)]"].join(" "),R=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),L={solid:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),glass:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),ghost:/* @__PURE__ */["border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:0_0_0_4px_var(--p-soft)]"].join(" ")};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:v="glass",size:T,color:D,density:M,elevation:P=0,accept:F,multiple:S=!1,maxSize:W,maxFiles:E,value:V,defaultValue:A,onFilesChange:O,onReject:q,label:G,labelPlacement:U,description:H,error:Y,invalid:J,title:K,hint:Q,icon:X,showList:Z=!0,showRejections:ee=!0,removeLabel:re,fullWidth:se=!0,disabled:le=!1,readOnly:oe=!1,required:ae=!1,name:te,id:ne,className:ie,style:de,...ce},pe){const fe=o(),ue=c(),me=re??ue.removeItem,he=T??fe.size??"md",be=D??fe.color??"primary",ve=M??fe.density??"default",ge="notch"===(U??fe.labelPlacement??"top")&&g(G),xe=s.useRef(null),ye=s.useRef(null),je=s.useRef(null);s.useImperativeHandle(pe,()=>xe.current);const[$e,ke]=s.useState(()=>[...A??[]]),we=s.useMemo(()=>V?[...V]:$e,[V,$e]),Ne=s.useRef(0),[ze,_e]=s.useState(!1),[Ce,Ie]=s.useState({type:0,size:0,count:0}),Be=g(Y),Re=J??Be,Le=Re?"danger":be,Te=le||oe,De=s.useId(),Me=`${De}-error`,Pe=`${De}-label`,Fe=ne??`${De}-zone`,Se=s.useCallback(e=>{const r=xe.current;if(!r||"undefined"==typeof DataTransfer)return;const s=new DataTransfer;for(const r of e)s.items.add(r);r.files=s.files},[]);s.useEffect(()=>{Se(we)},[we,Se]),n(te,()=>[...we],!le);const We=s.useCallback(e=>{V||ke(e),O?.(e)},[O,V]),Ee=s.useCallback(e=>{const r=[],s=[],l=S?E??Number.POSITIVE_INFINITY:1,o=S?we.length:0;for(const a of e)F&&!matchesAccept(a,F)?s.push({file:a,reason:"type"}):void 0!==W&&a.size>W?s.push({file:a,reason:"size"}):o+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[F,we.length,E,W,S]),Ve=s.useCallback(e=>{const{kept:r,rejections:s}=Ee(e),l={type:0,size:0,count:0};for(const e of s)l[e.reason]+=1;Ie(l),s.length>0&&q?.(s),r.length>0&&We(S?[...we,...r]:r)},[Ee,We,we,S,q]),Ae=s.useCallback(()=>{Ie(e=>e.type||e.size||e.count?{type:0,size:0,count:0}:e)},[]),Oe=[["type",ue.filesRejectedType],["size",ue.filesRejectedSize],["count",ue.filesRejectedCount]].filter(([e])=>Ce[e]>0),browse=()=>{Te||(Ae(),xe.current?.click())},qe=["relative flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",_[ve][he],j[he],b[he],z,x,ge?"":h,le?`${m[v]} border-2 border-dashed`:oe?`${C[v]} ${$} cursor-default`:ze?L[v]:C[v],Te||ze?"":I[v],Te?"":"plass-glow"].filter(Boolean).join(" "),Ge=e("span",{id:Pe,className:[y[he],"font-semibold",le?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:G});return r(l.Root,{name:te,disabled:le,invalid:Re,className:["flex-col align-top",w[he],se?"flex w-full":"inline-flex",ie??""].filter(Boolean).join(" "),style:{...N(Le,P),...de},...ce,children:[g(G)&&!ge?Ge:null,r("div",{className:`flex w-full flex-col ${w[he]}`,onDragEnter:e=>{Te||(e.preventDefault(),Ne.current+=1,_e(!0))},onDragOver:e=>{Te||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{Te||(Ne.current=Math.max(0,Ne.current-1),0===Ne.current&&_e(!1))},onDrop:e=>{Te||(e.preventDefault(),Ne.current=0,_e(!1),Ve(Array.from(e.dataTransfer.files)))},children:[e(l.Validity,{children:({validity:s})=>{const l=!1===s.valid,o=!Be&&l&&!le&&!0!==J,a=[g(H)||Be?De:null,o?Me:null].filter(Boolean).join(" ")||void 0;return e(p,{notched:ge,size:he,density:ve,variant:v,disabled:le,readOnly:oe,label:Ge,edgeClassName:le?R:Te?"border-2 border-dashed [border-color:var(--plass-border)]":ze?"border-2 border-dashed [border-color:var(--p-ring)]":B,children:r("button",{ref:ye,type:"button",id:Fe,"aria-labelledby":g(G)?`${Pe} ${Fe}`:void 0,disabled:le,"aria-describedby":a,"aria-invalid":Re||l||void 0,className:qe,style:ge?f:void 0,onPointerMove:i(!Te),onClick:browse,onBlur:()=>t(je.current),children:[void 0===X?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):g(X)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:X}):null,e("span",{className:`font-semibold ${k[he]}`,children:K??ue.filePickerTitle}),g(Q)?e("span",{className:`text-(--plass-muted-fg) ${y[he]}`,children:Q}):null]})})}}),e("input",{ref:xe,type:"file",name:te,accept:F,multiple:S,disabled:Te,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>{Ve(Array.from(e.target.files??[])),Se(we)}}),Z&&we.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${w[he]} m-0 list-none p-0`,children:we.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",j.xs,u[he],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${y[he]}`,children:formatFileSize(s.size)}),Te?null:e("button",{type:"button","aria-label":me(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",h].join(" "),onClick:()=>{Ae(),We(we.filter((e,r)=>r!==l))},children:e(d,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null]}),ee&&Oe.length>0?e("div",{role:"status",className:`flex w-full flex-col ${y[he]} text-(--plass-danger-accent)`,children:Oe.map(([r,s])=>e("span",{children:s(Ce[r])},r))}):null,g(H)&&!Be?e("span",{id:De,className:`${y[he]} text-(--plass-muted-fg)`,children:H}):null,Be?e("span",{id:De,className:`${y[he]} text-(--p-accent)`,children:Y}):e(l.Error,{id:Me,className:`${y[he]} text-(--p-accent)`}),e(a,{ref:je,value:we.map(e=>e.name),required:ae&&!oe,disabled:le,standIn:()=>ye.current})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{Field as t}from"@base-ui/react/field";import{useDefaults as s}from"../../internal/defaults.js";import{FormControl as a,leaveFormControl as l,useFormReport as n,useDisabled as i,useLabelReference as d}from"../../internal/form.js";import{glowPointerMove as c}from"../../internal/glow.js";import{CloseIcon as p}from"../../internal/icons.js";import{useLabels as u}from"../../internal/labels.js";import{FieldNotch as f,notchShellStyle as v,resolveNotch as m}from"../../internal/notch.js";import{controlTextLeadingClasses as b,disabledClasses as h,fieldSlots as g,focusRingClasses as x,gapClasses as y,glassClasses as w,hasContent as j,iconClasses as $,metaTextClasses as k,radiusClasses as L,readOnlyFilterClasses as E,sheetTitleClasses as N,stackGapClasses as z,targetClasses as _,transitionClasses as D}from"../../internal/styles.js";const C={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},B={solid:/* @__PURE__ */[w,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[w,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},I={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"},T=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)]","group-hover/field:[border-color:var(--p-line-hover)]","group-has-[:focus-visible]/field:[border-color:var(--p-ring)]"].join(" "),R=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),M={solid:/* @__PURE__ */[w,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),glass:/* @__PURE__ */[w,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),ghost:/* @__PURE__ */["border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:0_0_0_4px_var(--p-soft)]"].join(" ")};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let o=e/1e3,t=0;for(;o>=1e3&&t<r.length-1;)o/=1e3,t+=1;return`${o<10?o.toFixed(1):Math.round(o)} ${r[t]}`}function matchesAccept(e,r){const o=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?o.endsWith(e):e.endsWith("/*")?t.startsWith(e.slice(0,-1)):t===e)}export const PlFilePicker=/* @__PURE__ */o.forwardRef(function PlFilePicker({variant:w="glass",size:P,color:F,density:S,elevation:W=0,accept:A,multiple:O=!1,maxSize:V,maxFiles:q,value:G,defaultValue:H,onFilesChange:U,onReject:Y,onAdd:J,label:K,labelPlacement:Q,description:X,error:Z,invalid:ee,title:re,hint:oe,icon:te,showList:se=!0,showRejections:ae=!0,removeLabel:le,preventDocumentDrop:ne=!1,fullWidth:ie=!0,disabled:de=!1,readOnly:ce=!1,required:pe=!1,name:ue,id:fe,className:ve,style:me,onDragEnter:be,onDragOver:he,onDragLeave:ge,onDrop:xe,"aria-label":ye,"aria-labelledby":we,...je},$e){const ke=s(),Le=i(de),Ee=u(),Ne=le??Ee.removeItem,ze=P??ke.size??"md",_e=F??ke.color??"primary",De=S??ke.density??"default",Ce=Q??ke.labelPlacement??"top",{notched:Be}=m(Ce,K,!0),Ie=o.useRef(null),Te=o.useRef(null),Re=o.useRef(null);o.useImperativeHandle($e,()=>Ie.current);const[Me,Pe]=o.useState(()=>[...H??[]]),Fe=o.useMemo(()=>G?[...G]:Me,[G,Me]),Se=o.useRef(0),[We,Ae]=o.useState(!1);o.useEffect(()=>{if(!We)return;const end=()=>{Se.current=0,Ae(!1)};return window.addEventListener("drop",end,!0),window.addEventListener("dragend",end,!0),window.addEventListener("pointermove",end,!0),window.addEventListener("blur",end),()=>{window.removeEventListener("drop",end,!0),window.removeEventListener("dragend",end,!0),window.removeEventListener("pointermove",end,!0),window.removeEventListener("blur",end)}},[We]);const[Oe,Ve]=o.useState({type:0,size:0,count:0}),qe=j(Z),Ge=ee??qe,He=Ge?"danger":_e,Ue=Le||ce,Ye=o.useId(),Je=`${Ye}-error`,Ke=`${Ye}-label`,Qe=fe??`${Ye}-zone`,Xe=d(ye,we),Ze=Xe.labelledBy??(j(K)?Ke:void 0);o.useEffect(()=>{if(!ne||Ue)return;const stray=e=>!e.defaultPrevented&&Boolean(e.dataTransfer?.types.includes("Files"))&&!(e.target instanceof HTMLInputElement&&"file"===e.target.type),refuse=e=>{stray(e)&&(e.preventDefault(),e.dataTransfer.dropEffect="none")},cancel=e=>{stray(e)&&e.preventDefault()};return document.addEventListener("dragover",refuse),document.addEventListener("drop",cancel),()=>{document.removeEventListener("dragover",refuse),document.removeEventListener("drop",cancel)}},[ne,Ue]);const er=o.useCallback(e=>{const r=Ie.current;if(!r||"undefined"==typeof DataTransfer)return;const o=new DataTransfer;for(const r of e)o.items.add(r);r.files=o.files},[]);o.useEffect(()=>{er(Fe)},[Fe,er]),n(ue,()=>[...Fe],!Le);const rr=o.useCallback(e=>{G||Pe(e),U?.(e)},[U,G]),or=o.useCallback(e=>{const r=[],o=[],t=O?q??Number.POSITIVE_INFINITY:1,s=O?Fe.length:0;for(const a of e)A&&!matchesAccept(a,A)?o.push({file:a,reason:"type"}):void 0!==V&&a.size>V?o.push({file:a,reason:"size"}):s+r.length>=t?o.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:o}},[A,Fe.length,q,V,O]),tr=o.useCallback((e,r)=>{const{kept:o,rejections:t}=or(e),s={type:0,size:0,count:0};for(const e of t)s[e.reason]+=1;Ve(s),t.length>0&&Y?.(t),o.length>0&&rr(O?[...Fe,...o]:o),e.length>0&&J?.({kept:o,rejected:t,source:r})},[or,rr,Fe,O,J,Y]),sr=o.useCallback(()=>{Ve(e=>e.type||e.size||e.count?{type:0,size:0,count:0}:e)},[]),ar=[["type",Ee.filesRejectedType],["size",Ee.filesRejectedSize],["count",Ee.filesRejectedCount]].filter(([e])=>Oe[e]>0),browse=()=>{Ue||(sr(),Ie.current?.click())},lr=["relative flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",C[De][ze],L[ze],y[ze],D,$,Be?"":x,Le?`${h[w]} border-2 border-dashed`:ce?`${B[w]} ${E} cursor-default`:We?M[w]:B[w],Ue||We?"":I[w],Ue?"":"plass-glow"].filter(Boolean).join(" "),nr=`flex items-center text-(--p-accent) [&_svg]:size-[1.8em] ${N[ze]}`,ir=e("span",{id:Ke,className:[k[ze],"font-semibold",Le?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:K});return r(t.Root,{name:ue,disabled:Le,invalid:Ge,className:["flex-col align-top",z[ze],ie?"flex w-full":"inline-flex",ve??""].filter(Boolean).join(" "),style:{...g(He,W),...me},...je,onDragEnter:e=>{Ue||(e.preventDefault(),Se.current+=1,Ae(!0)),be?.(e)},onDragOver:e=>{Ue||(e.preventDefault(),e.dataTransfer.dropEffect="copy"),he?.(e)},onDragLeave:e=>{Ue||(Se.current=Math.max(0,Se.current-1),0===Se.current&&Ae(!1)),ge?.(e)},onDrop:e=>{Ue||(e.preventDefault(),Se.current=0,Ae(!1),tr(Array.from(e.dataTransfer.files),"drop")),xe?.(e)},children:[j(K)&&!Be?ir:null,r("div",{className:`flex w-full flex-col ${z[ze]}`,children:[e(t.Validity,{children:({validity:o})=>{const t=!1===o.valid,s=!qe&&t&&!Le&&!0!==ee,a=[j(X)||qe?Ye:null,s?Je:null].filter(Boolean).join(" ")||void 0;return e(f,{notched:Be,size:ze,density:De,variant:w,disabled:Le,readOnly:ce,label:ir,edgeClassName:Le?R:Ue?"border-2 border-dashed [border-color:var(--plass-border)]":We?"border-2 border-dashed [border-color:var(--p-ring)]":T,children:r("button",{ref:Te,type:"button",id:Qe,"aria-labelledby":Ze?`${Ze} ${Qe}`:void 0,disabled:Le,"aria-describedby":a,"aria-invalid":Ge||t||void 0,className:lr,style:Be?v:void 0,onPointerMove:c(!Ue),onClick:browse,onBlur:()=>l(Re.current),children:[j(te)||void 0===te?e("span",{className:nr,children:void 0===te?e(UploadIcon,{}):te}):null,e("span",{className:`font-semibold ${N[ze]}`,children:re??Ee.filePickerTitle}),j(oe)?e("span",{className:`text-(--plass-muted-fg) ${k[ze]}`,children:oe}):null]})})}}),e("input",{ref:Ie,type:"file",name:ue,accept:A,multiple:O,disabled:Ue,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>{tr(Array.from(e.target.files??[]),"dialog"),er(Fe)}}),se&&Fe.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${z[ze]} m-0 list-none p-0`,children:Fe.map((o,t)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",L.xs,b[ze],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:o.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${k[ze]}`,children:formatFileSize(o.size)}),Ue?null:e("button",{type:"button","aria-label":Ne(o.name),className:[_,"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full p-0","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",x].join(" "),onClick:()=>{sr(),rr(Fe.filter((e,r)=>r!==t))},children:e(p,{})})]},`${o.name}-${o.size}-${o.lastModified}-${t}`))}):null]}),ae&&ar.length>0?e("div",{role:"status",className:`flex w-full flex-col ${k[ze]} text-(--plass-danger-accent)`,children:ar.map(([r,o])=>e("span",{children:o(Oe[r])},r))}):null,j(X)&&!qe?e("span",{id:Ye,className:`${k[ze]} text-(--plass-muted-fg)`,children:X}):null,qe?e("span",{id:Ye,className:`${k[ze]} text-(--p-accent)`,children:Z}):e(t.Error,{id:Je,className:`${k[ze]} text-(--p-accent)`}),e(a,{ref:Re,value:Fe.map(e=>e.name),required:pe&&!ce,disabled:Le,standIn:()=>Te.current}),Xe.node]})});

package/dist/components/file-picker/index.d.ts

@@ -1,2 +1,2 @@
 export { PlFilePicker, formatFileSize } from './PlFilePicker.js';
-export type { PlFilePickerProps, PlFileRejection, PlFileRejectionReason } from './PlFilePicker.js';
+export type { PlFileBatch, PlFilePickerProps, PlFileRejection, PlFileRejectionReason } from './PlFilePicker.js';

package/dist/components/floating-action-button/PlFloatingActionButton.d.ts

@@ -28,6 +28,11 @@ export interface PlFloatingActionButtonProps extends Omit<PlButtonProps, 'childr
     corner?: PlassCorner;
     /**
      * How far it stands off the two edges it is against. A number is pixels.
+     *
+     * The device's safe area on those two edges is added on top, so the button
+     * clears the home indicator, the navigation bar or a camera cutout of an
+     * edge-to-edge screen rather than sitting under it. On a screen with no such
+     * edge the safe area is `0`, and this is the whole distance.
      * @default '1.5rem'
      */
     offset?: number | string;

package/dist/components/floating-action-button/PlFloatingActionButton.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import*as o from"react";import{PlButton as n}from"../button/PlButton.js";import{PlIconButton as e}from"../icon-button/PlIconButton.js";import{useDefaults as r}from"../../internal/defaults.js";import{cx as i,toLength as s}from"../../internal/styles.js";const a={"top-start":["Start","Start"],"top-end":["Start","End"],"bottom-start":["End","Start"],"bottom-end":["End","End"]};export const PlFloatingActionButton=/* @__PURE__ */o.forwardRef(function PlFloatingActionButton({icon:o,label:l,extended:c=!1,corner:m="bottom-end",offset:f,floating:d=!0,variant:u="solid",size:p,elevation:b=3,className:j,style:x,...B},g){const v=r(),z=p??v.size??"lg",[E,P]=a[m],S=s(f)??"1.5rem",y=d?{position:"fixed",[`insetBlock${E}`]:S,[`insetInline${P}`]:S}:{},I={ref:g,variant:u,size:z,elevation:b,className:i(d?"z-30":"",j),style:{...y,...x},...B};return c?t(n,{...I,startIcon:o,children:l}):t(e,{...I,icon:o,label:l})});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as n from"react";import{PlButton as o}from"../button/PlButton.js";import{PlIconButton as e}from"../icon-button/PlIconButton.js";import{useDefaults as a}from"../../internal/defaults.js";import{cx as r,safeInlineClasses as i,toLength as s}from"../../internal/styles.js";const l={"top-start":["Start","Start"],"top-end":["Start","End"],"bottom-start":["End","Start"],"bottom-end":["End","End"]},c={Start:"env(safe-area-inset-top, 0px)",End:"env(safe-area-inset-bottom, 0px)"};export const PlFloatingActionButton=/* @__PURE__ */n.forwardRef(function PlFloatingActionButton({icon:n,label:m,extended:f=!1,corner:d="bottom-end",offset:p,floating:u=!0,variant:b="solid",size:x,elevation:v=3,className:j,style:B,...E},S){const $=a(),g=x??$.size??"lg",[z,P]=l[d],y=s(p)??"1.5rem",I=u?{position:"fixed",[`insetBlock${z}`]:`calc(${y} + ${c[z]})`,[`insetInline${P}`]:`calc(${y} + var(--p-safe-inline, 0px))`}:{},A={ref:S,variant:b,size:g,elevation:v,className:r(u&&"z-30",u&&i[P],j),style:{...I,...B},...E};return f?t(o,{...A,startIcon:n,children:m}):t(e,{...A,icon:n,label:m})});

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts

@@ -64,6 +64,16 @@ export interface PlFloatingBottomNavigationItemProps extends Omit<React.Componen
     icon?: React.ReactNode;
     /** Renders the item as a link rather than as a button. */
     href?: string;
+    /**
+     * Renders the disc's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the disc a link, as an `href` does, and an `href` on the
+     * element wins over the disc's own. A disabled disc is drawn on a plain `<a>`
+     * with no address instead, since the element's own `href` would keep it
+     * going somewhere.
+     */
+    render?: useRender.RenderProp;
     /** Unavailable, but still part of the set. */
     disabled?: boolean;
     /**

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","forced-colors:border-2 forced-colors:[border-color:Highlight]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),H=l??E.size??"md",I=n??E.color??"primary",L=c??E.density??"default",[O,S]=s.useState(f),V=void 0!==u,W=V?u:O,D=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=D.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return a.hidden=!0,void a.removeAttribute("data-ready");a.hidden=!1;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,W,a,H,L,P,q]),s.useEffect(()=>{const e=D.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{V||S(e),m?.(e)},[V,m]),J=s.useMemo(()=>({value:W??null,change:G,size:H,disabled:P}),[W,G,H,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[H]:v[H],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(I,p,"solid"),...F},children:e(b.Provider,{value:J,children:t("div",{ref:D,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[L][H],y[L][H],g),children:[null!=W?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:v,children:h,onClick:x,...y},w){const N=s.useContext(b),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",v),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{useBottomBarHeight as o}from"../../internal/bottom-bar.js";import{useCommitChange as n}from"../../internal/commit-change.js";import{controlHeightClasses as l,controlSlots as d,controlSquareClasses as c,cx as p,focusRingClasses as u,glassClasses as m,hasContent as f,iconSizeClasses as g,srOnlyClasses as b,transitionClasses as v}from"../../internal/styles.js";const h=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),x={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},y={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},w={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},N={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},k={solid:/* @__PURE__ */[m,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[m,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","forced-colors:border-2 forced-colors:[border-color:Highlight]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] motion-safe:data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:c,density:u,elevation:m=2,value:f,defaultValue:g=null,onValueChange:b,position:A="fixed",safeArea:F=!0,disabled:P=!1,label:C,render:R,className:q,style:B,children:$,...E},H){const I=r(),O=l??I.size??"md",S=c??I.color??"primary",V=u??I.density??"default",[D,L]=s.useState(g),M=void 0!==f,T=M?f:D,W=s.useRef(null),G=s.useRef(null),J=s.useRef(0),K=s.useCallback(e=>{const t=W.current,a=G.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return cancelAnimationFrame(J.current),a.hidden=!0,void a.removeAttribute("data-ready");const r=s.offsetLeft,i=s.offsetTop,o=s.offsetWidth,n=s.offsetHeight,l=!e||!a.hasAttribute("data-ready");l&&(cancelAnimationFrame(J.current),a.removeAttribute("data-ready")),a.hidden=!1,a.style.setProperty("--p-disc-x",`${r}px`),a.style.setProperty("--p-disc-y",`${i}px`),a.style.setProperty("--p-disc-w",`${o}px`),a.style.setProperty("--p-disc-h",`${n}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),l&&(J.current=requestAnimationFrame(()=>{a.setAttribute("data-ready","")}))},[]);s.useEffect(()=>()=>cancelAnimationFrame(J.current),[]),n(W,[T,a,O,V,P],()=>K(!0),G),s.useEffect(()=>{const e=W.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>K(!1));return t.observe(e),()=>t.disconnect()},[K]);const Q=s.useCallback(e=>{M||L(e),b?.(e)},[M,b]),U=s.useMemo(()=>({value:T??null,change:Q,size:O,disabled:P}),[T,Q,O,P]),X=s.useRef(null);o(X,"fixed"===A);const Y=p("flex w-full justify-center px-4","static"===A?"":"pointer-events-none",F?y[O]:x[O],N[A],q);return i({render:R??e("nav",{}),ref:[H,X],props:{"aria-label":C,className:Y,style:{...d(S,m,"solid"),...B},children:e(h.Provider,{value:U,children:t("div",{ref:W,className:p("pointer-events-auto relative inline-flex items-center rounded-full",k[a],w[V][O],j[V][O],v),children:[null!=T?e("span",{ref:G,"aria-hidden":"true",className:z}):null,$]})}),...E}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:o,href:n,render:d,disabled:m=!1,className:x,children:y,onClick:w,...j},N){const k=s.useContext(h),z=m||k.disabled,A=null!==k.value&&k.value===r,F=p("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full p-0",l[k.size],c[k.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",v,u,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":A?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",x),P=t(a,{children:[f(o)?e("span",{className:p("flex shrink-0 items-center justify-center",g[k.size]),children:o}):null,f(y)?e("span",{className:b,children:y}):null]}),C={"data-disc":"","data-current":A?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(k.change(r),w?.(e))};return i({render:z?e("a",{}):d??e("a",{}),enabled:Boolean(n||d),ref:N,props:{href:z?void 0:n,role:z?"link":void 0,"aria-current":A?"page":void 0,"aria-disabled":z||void 0,...C,className:F,onClick:press,...j,children:P}})||e("button",{ref:N,type:"button",disabled:z,"aria-current":A?"page":void 0,...C,className:F,onClick:press,...j,children:P})});

package/dist/components/footer/PlFooter.d.ts

@@ -12,7 +12,9 @@ export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * is: the thing at the end of the document, reached by scrolling to it.
      * `sticky` and `fixed` are for the bar that has to stay in reach — a form's
      * save row, a cookie notice — and a `PlPageLayout` reserves the height a
-     * `fixed` one takes out of the flow.
+     * `fixed` one takes out of the flow. A `fixed` one spans the window, so the
+     * layout ends the sidebars above it whatever `footerSpan` says, and a footer
+     * meant to sit between the sidebars is `sticky`.
      * @default 'static'
      */
     position?: PlassPosition;

package/dist/components/footer/PlFooter.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{PlPageLayoutContext as s}from"../../internal/page-layout.js";import{measureSlots as i}from"../../internal/responsive.js";import{cx as a,sheetPaddingXClasses as l,sheetPaddingYClasses as n,sheetRestClasses as d,surfaceSlots as m,transitionClasses as c}from"../../internal/styles.js";const f=d,p={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:d="static",variant:u="glass",size:y,color:x,density:b,elevation:v=0,divider:j=!0,maxWidth:h,padded:w=!0,label:z,render:N,className:g,style:k,children:C,...F},P){const R=i(h),W=t(),q=y??W.size??"md",A=x??W.color??"primary",B=b??W.density??"default",{register:D}=r.useContext(s),E=r.useCallback(e=>{D("footer",e),"function"==typeof P?P(e):P&&(P.current=e)},[D,P]),G=a("w-full min-w-0",f[u],j?"border-t [border-color:var(--plass-divider)]":"",p[d],c,g);return o({render:N??e("footer",{}),ref:E,props:{"aria-label":z,className:G,style:{...m(A,v),...k},children:e("div",{style:R.style,className:a("w-full",w?a(l[B][q],n[B][q]):"",R.className,void 0===h?"":"mx-auto"),children:C}),...F}})});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{PlPageLayoutContext as o,useSlotPosition as s}from"../../internal/page-layout.js";import{measureSlots as a}from"../../internal/responsive.js";import{cx as l,sheetPaddingXClasses as d,sheetPaddingYClasses as n,sheetRestClasses as c,surfaceSlots as m,transitionClasses as f}from"../../internal/styles.js";const p=c,u={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},y={static:"",sticky:"plass-footer-sticky",fixed:"plass-footer-fixed"};export const PlFooter=/* @__PURE__ */e.forwardRef(function PlFooter({position:c="static",variant:v="glass",size:x,color:b,density:j,elevation:k=0,divider:z=!0,maxWidth:h,padded:w=!0,label:N,render:g,className:C,style:F,children:P,...R},W){const q=a(h),A=r(),B=x??A.size??"md",D=b??A.color??"primary",E=j??A.density??"default",{register:G}=e.useContext(o),H=e.useCallback(t=>{G("footer",t),"function"==typeof W?W(t):W&&(W.current=t)},[G,W]);s(c);const I="static"!==c,J=l("w-full min-w-0",y[c],p[v],z?"border-t [border-color:var(--plass-divider)]":"",u[c],f,C);return i({render:g??t("footer",{}),ref:H,props:{"aria-label":N,"data-size":I&&w?B:void 0,"data-density":I&&w?E:void 0,"data-variant":I?v:void 0,"data-divider":I&&z?"":void 0,className:J,style:{...m(D,k),...F},children:t("div",{style:q.style,className:l("w-full",w?l(d[E][B],n[E][B]):"",q.className,void 0===h?"":"mx-auto"),children:P}),...R}})});

package/dist/components/gallery/PlGallery.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as i from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{isTurned as o,masonryRows as s,ratioOf as n,shownRatio as d}from"../../internal/gallery.js";import{responsiveSlots as m,withBaseline as p}from"../../internal/responsive.js";import{usePlBreakpointValue as u}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as g,hasContent as f,metaTextClasses as h,radiusClasses as v,surfaceSlots as x,toLength as y,transitionClasses as b}from"../../internal/styles.js";import{PlImage as w}from"../image/PlImage.js";const j=/* @__PURE__ */i.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),_={xs:2,sm:3,lg:4},$={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},z={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:[transform:scale(1.06)] group-focus-visible/tile:[&_img]:[transform:scale(1.06)]"};export const PlGallery=/* @__PURE__ */i.forwardRef(function PlGallery({items:R,layout:k="grid",columns:M,gap:q="md",ratio:P=1,rowHeight:S=220,rounded:C=!0,fit:G="cover",letterbox:I,loading:T="lazy",caption:B="none",hover:F="lift",preview:A=!1,onItemSelect:L,label:V,itemLabel:H,empty:W,size:D,color:E,className:J,classNames:K,style:O,...Q},U){const X=r(),Y=D??X.size??"md",Z=E??X.color??"primary",ee=a(),le=V??ee.gallery,te=H??ee.galleryItem,ie=i.useId(),[re,ae]=i.useState(null),oe=p(M??_,2),se=Math.max(1,u(oe)??2),ne="string"==typeof q&&q in $?$[q]:y(q)??$.md,de=C?v[Y]:"",me=n(P,1),tile=(i,r,a,s)=>{const m=f(i.title)||f(i.description),p="none"!==B&&m,u="overlay"===B||"hover"===B,v=`${ie}-${r}-title`,x=`${ie}-${r}-description`,y=p?[f(i.title)?v:null,f(i.description)?x:null].filter(Boolean).join(" "):void 0,j=e(w,{src:i.src,alt:i.alt,ratio:"grid"===k?P:"quilted"===k?"auto":o(i.rotate)?d(n(i.ratio,me),i.rotate):i.ratio??P,fit:G,letterbox:I,loading:T,rotate:i.rotate,flip:i.flip,position:i.position,placeholder:i.placeholder,rounded:!1,size:Y,color:Z,className:c("size-full",K?.image)}),_=p?l("div",{style:void 0===s||u?void 0:{gridRow:String(s)},className:c("min-w-0",u?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===B?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",K?.caption),children:[f(i.title)?e("span",{id:v,className:c("truncate font-medium",h[Y],u?"":"text-(--plass-fg)",K?.title),children:i.title}):null,f(i.description)?e("span",{id:x,className:c("truncate",h[Y],u?"text-white/80":"text-(--plass-muted-fg)",K?.description),children:i.description}):null]}):null,$=l("span",{style:void 0===s?void 0:{gridRow:`1 / span ${"below"===B?s-1:s}`},className:c("relative block overflow-hidden",de,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",z[F],N[F],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]"),children:[j,u?_:null]}),M=u||!p?$:l(t,{children:[$,_]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":void 0===s?"":"grid",K?.item),style:a,children:A||L?e("button",{type:"button","aria-label":`${i.alt} — ${te(r+1,R.length)}`,"aria-describedby":y,className:c(void 0===s?"block":"grid","w-full bg-transparent p-0 text-start",A?"cursor-zoom-in":"cursor-pointer",g,b,de,"justified"===k?"flex-1":""),style:void 0===s?void 0:{gridRow:`1 / span ${s}`,gridTemplateRows:"subgrid"},onClick:()=>(e=>{L?.(R[e],e),A&&ae(e)})(r),children:M}):M},i.id??i.src)};let pe,ue;if("masonry"===k){const e=R.map(e=>d(n(e.ratio,me),e.rotate)),{tracks:l,tiles:t}=s(e,se,"below"===B);ue=l.map(e=>"caption"===e?"auto":"gap"===e?ne:`${Number((100*e).toFixed(2))}fr`).join(" "),pe=R.map((e,l)=>{const{column:i,start:r,end:a}=t[l];return tile(e,l,{gridColumn:String(i),gridRow:`${r} / ${a}`,gridTemplateRows:"subgrid"},a-r)})}else pe="justified"===k?R.map((e,l)=>{const t=d(n(e.ratio,me),e.rotate);return tile(e,l,{flexGrow:t,flexBasis:t*S+"px",maxWidth:"100%"})}):R.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===R.length&&f(W)?e(t,{children:W}):l(t,{children:[e("ul",{ref:U,role:"list","aria-label":le,className:c("plass-gallery m-0 list-none p-0","justified"===k?"plass-gallery-justified flex flex-wrap":"","masonry"===k?"grid":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",J),style:{gap:"masonry"===k?`0 ${ne}`:ne,...x(Z,0),...m("cols",oe,e=>String(Math.max(1,Math.round(e)))),..."masonry"===k?{gridTemplateColumns:`repeat(${se}, minmax(0, 1fr))`,gridTemplateRows:ue}:null,..."quilted"===k?{gridAutoRows:`${S}px`,gridAutoFlow:"dense"}:null,...O},...Q,children:pe}),A?e(i.Suspense,{fallback:null,children:e(j,{items:R,index:re,onIndexChange:ae,size:Y,color:Z,label:le,itemLabel:te})}):null]})});
+"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as i from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{lazyPart as o}from"../../internal/lazy.js";import{isTurned as s,laneCount as n,masonrySlots as d,ratioOf as p,shownRatio as m}from"../../internal/gallery.js";import{responsiveSlots as u,withBaseline as c}from"../../internal/responsive.js";import{cx as g,focusRingClasses as f,hasContent as v,metaTextClasses as h,radiusClasses as x,surfaceSlots as y,toLength as b,transitionClasses as w}from"../../internal/styles.js";import{PlImage as _}from"../image/PlImage.js";const j=/* @__PURE__ */o(()=>import("./PlGalleryViewer.js").then(e=>e.PlGalleryViewer)),z={xs:2,sm:3,lg:4},N={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},$={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},R={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:[transform:scale(1.06)] group-focus-visible/tile:[&_img]:[transform:scale(1.06)]"};export const PlGallery=/* @__PURE__ */i.forwardRef(function PlGallery({items:o,layout:k="grid",columns:q,gap:P="md",ratio:S=1,rowHeight:G=220,rounded:I=!0,fit:F="cover",letterbox:M,loading:C="lazy",caption:T="none",hover:A="lift",preview:B=!1,onItemSelect:L,label:V,itemLabel:E,empty:H,size:U,color:W,className:D,classNames:J,style:K,...O},Q){const X=r(),Y=U??X.size??"md",Z=W??X.color??"primary",ee=a(),le=V??ee.gallery,te=E??ee.galleryItem,ie=i.useId(),[re,ae]=i.useState(null),[oe,se]=i.useState(!1),ne=c(q??z,2),de="string"==typeof P&&P in N?N[P]:b(P)??N.md,pe=I?x[Y]:"",me=p(S,1),tile=(i,r,a,n=!1)=>{const d=v(i.title)||v(i.description),u="none"!==T&&d,c="overlay"===T||"hover"===T,x=`${ie}-${r}-title`,y=`${ie}-${r}-description`,b=u?[v(i.title)?x:null,v(i.description)?y:null].filter(Boolean).join(" "):void 0,z=e(_,{src:i.src,alt:i.alt,ratio:"grid"===k?S:"quilted"===k?"auto":s(i.rotate)?m(p(i.ratio,me),i.rotate):i.ratio??S,fit:F,letterbox:M,loading:C,rotate:i.rotate,flip:i.flip,position:i.position,placeholder:i.placeholder,rounded:!1,size:Y,color:Z,className:g("size-full",J?.image)}),N=u?l("div",{style:!n||c?void 0:{gridRow:"var(--p-lane-span)"},className:g("min-w-0",c?g("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===T?g("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"):""):"flex flex-col gap-0.5 pt-1.5",J?.caption),children:[v(i.title)?e("span",{id:x,className:g("truncate font-medium",h[Y],c?"":"text-(--plass-fg)",J?.title),children:i.title}):null,v(i.description)?e("span",{id:y,className:g("truncate",h[Y],c?"text-white/80":"text-(--plass-muted-fg)",J?.description),children:i.description}):null]}):null,q=l("span",{style:n?{gridRow:"below"===T?"1 / span calc(var(--p-lane-span) - 1)":"1 / span var(--p-lane-span)"}:void 0,className:g("relative block overflow-hidden",pe,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",$[A],R[A],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms] motion-reduce:[&_img]:[transition-duration:0ms]"),children:[z,c?N:null]}),P=c||!u?q:l(t,{children:[q,N]});return e("li",{className:g("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":n?"grid":"",J?.item),style:a,children:B||L?e("button",{type:"button","aria-label":`${i.alt} — ${te(r+1,o.length)}`,"aria-describedby":b,className:g(n?"grid":"block","w-full bg-transparent p-0 text-start",B?"cursor-zoom-in":"cursor-pointer",f,w,pe,"justified"===k?"flex-1":""),style:n?{gridRow:"1 / span var(--p-lane-span)",gridTemplateRows:"subgrid"}:void 0,onClick:()=>(e=>{L?.(o[e],e),B&&(se(!0),ae(e))})(r),onPointerEnter:B?j.preload:void 0,onFocus:B?j.preload:void 0,onTouchStart:B?j.preload:void 0,children:P}):P},i.id??i.src)};let ue,ce=null;if("masonry"===k){const e=o.map(e=>m(p(e.ratio,me),e.rotate)),{list:l,tiles:t}=d(e,ne,"below"===T,e=>"caption"===e?"auto":"gap"===e?de:`${Number((100*e).toFixed(2))}fr`);ce=l,ue=o.map((e,l)=>tile(e,l,{...t[l],gridTemplateRows:"subgrid"},!0))}else ue="justified"===k?o.map((e,l)=>{const t=m(p(e.ratio,me),e.rotate);return tile(e,l,{flexGrow:t,flexBasis:t*G+"px",maxWidth:"100%"})}):o.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===o.length&&v(H)?e(t,{children:H}):l(t,{children:[e("ul",{ref:Q,role:"list","aria-label":le,className:g("plass-gallery m-0 list-none p-0","justified"===k?"plass-gallery-justified flex flex-wrap":"","masonry"===k?"plass-gallery-masonry grid":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",D),style:{gap:"masonry"===k?`0 ${de}`:de,...y(Z,0),...u("cols",ne,e=>String(n(e))),...ce,..."quilted"===k?{gridAutoRows:`${G}px`,gridAutoFlow:"dense"}:null,...K},...O,children:ue}),B&&oe?e(i.Suspense,{fallback:null,children:e(j,{items:o,index:re,onIndexChange:ae,onUnavailable:()=>{ae(null),se(!1)},size:Y,color:Z,label:le,itemLabel:te})}):null]})});

package/dist/components/gauge-chart/PlGaugeChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ChartBaseProps } from '../../internal/chart-frame.js';
 import type { PlassColor, PlassThreshold } from '../../types.js';
-export interface PlGaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tooltip'> {
+export interface PlGaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tooltip' | 'label'> {
     /**
      * The reading. `null` draws the dial with nothing on it, which is the honest
      * picture of an instrument that has not been told anything.
@@ -45,6 +45,15 @@ export interface PlGaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tool
     caption?: React.ReactNode;
     /** The family the arc takes where no threshold applies. @default 'primary' */
     color?: PlassColor;
+    /**
+     * What the dial is called — what it is a reading *of*. Read out in place of
+     * the drawing, with the reading after it.
+     *
+     * An `aria-label` names the dial in its place and an `aria-labelledby`
+     * outranks both. With none of the three the dial is a plain box, and the
+     * reading in the middle is read as the text it already is.
+     */
+    label?: string;
 }
 /**
  * One number on a scale that is known in advance, drawn as a dial.
@@ -61,4 +70,4 @@ export interface PlGaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tool
  * and the unfilled part of the arc is not a second category — it is the rest of
  * the dial.
  */
-export declare function PlGaugeChart({ value, min, max, sweep, thickness, thresholds, ticks, showRange, center, caption, height, format, locale: localeProp, label, empty, size: sizeProp, variant, color: colorProp, padded, className, ...box }: PlGaugeChartProps): React.JSX.Element;
+export declare function PlGaugeChart({ value, min, max, sweep, thickness, thresholds, ticks, showRange, center, caption, height, initialWidth, format, locale: localeProp, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, empty, size: sizeProp, variant, color: colorProp, padded, className, ...box }: PlGaugeChartProps): React.JSX.Element;

package/dist/components/gauge-chart/PlGaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0&&kt>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as l from"react";import{ChartSurface as s,givenHeight as n,useMeasuredSize as r}from"../../internal/chart-frame.js";import{arcPath as i,chartFontSizes as o,compactNumber as h,plotHeights as m,ringPath as d,textWidth as u,truncate as c}from"../../internal/chart.js";import{useDefaults as f,useLocale as p}from"../../internal/defaults.js";import{numberFormatter as x}from"../../internal/format.js";import{useLabels as M}from"../../internal/labels.js";import{cx as v,hasContent as g,metaTextClasses as b}from"../../internal/styles.js";import{bandColor as y}from"../../internal/threshold.js";function pointAt(t,a,e,l){const s=(l-90)*Math.PI/180;return[t+e*Math.cos(s),a+e*Math.sin(s)]}export function PlGaugeChart({value:k,min:N=0,max:j=100,sweep:$=180,thickness:w=.22,thresholds:A,ticks:I=!1,showRange:z=!0,center:W,caption:_,height:P,initialWidth:S,format:q,locale:C,label:D,"aria-label":L,"aria-labelledby":R,"aria-describedby":B,empty:F,size:G,variant:T="ghost",color:Y,padded:E=!1,className:H,...J}){const K=f(),O=G??K.size??"md",Q=Y??K.color??"primary",U=p(C),V=l.useRef(null),{width:X,height:Z,guessed:tt}=r(V,S),at=M(),et=l.useId(),lt=l.useId(),st=l.useId(),nt=l.useId(),rt=l.useCallback(t=>q?x(U,q).format(t):h(t,U),[q,U]),it=Math.max(1,Math.min(360,$)),ot=it/2,ht=-ot,mt=ot,dt=j-N,ut=null===k||Number.isNaN(k)||0===dt?null:Math.min(1,Math.max(0,(k-N)/dt)),ct=null===k?Q:y(k,Q,A),ft=n(P,m[O]),pt=ft??Z??0,xt=o[O],Mt=Math.min(.9,Math.max(.05,w)),vt=ot*Math.PI/180,gt=it>=360?1:Math.max(0,-Math.cos(vt)),bt=it>=180?1:Math.sin(vt),yt=Math.sin(vt),kt=-Math.cos(vt),Nt=z&&it<330?[N,j].map(t=>c(rt(t),Math.max(0,.28*X),xt)):[],jt=Nt.reduce((t,a)=>Math.max(t,u(a,xt)),0),$t=.35*xt,wt=!1===I?0:.85*xt,At=kt<=.25,It=At?0:.5*xt,zt=At?xt:xt*(.35+.55*kt),Wt=Nt.length>0?kt*It+zt+.25*xt:0,_t=Math.max($t,wt),Pt=Math.max($t,wt),St=Math.max($t,wt,Wt),qt=[(X/2-_t)/Math.max(.05,bt),(pt-Pt-St)/(1+gt)];if(jt>0&&yt>.05){const t=At?jt/2:jt;qt.push(Math.max(0,X/2-$t-t)/yt-It)}const Ct=Math.max(0,Math.min(...qt)),Dt=Ct*(1-Mt),Lt=X/2,Rt=Pt+Ct*(1+gt)+St,Bt=Pt+Ct+Math.max(0,(pt-Rt)/2),Ft=0===dt,Gt=g(_)?1.85*xt:0,Tt=Bt-Dt*(1-Math.min(1,gt))/2,Yt=Math.min(Dt,Math.abs(Bt-Tt)),Et=Math.min(Dt,Math.abs(Bt-Tt-Gt/2)),Ht=2*Math.sqrt(Math.max(0,Dt*Dt-Et*Et)),Jt=W??(null===k?"—":rt(k)),Kt="string"==typeof Jt?u(Jt,1):0,Ot=Kt>0?Math.max(xt,Math.min(2*xt,function fitType(t,a,e,l,s){const n=t*t/(4*s*s)+l*l,r=2*a*l,i=a*a-e*e;return n<=0||i>=0?0:(Math.sqrt(r*r-4*n*i)-r)/(2*n)}(Kt,Yt,Dt,.42,.86))):2*xt,Qt=!1===I?0:Math.max(2,Math.floor(I)),Ut=L??D,Vt=void 0!==R||void 0!==Ut,Xt=null===k||Ft?null:`${rt(k)} / ${rt(j)}`,Zt=!Ft&&X>0&&Ct>0,ta=[Ft?et:null,Zt&&g(W)?lt:null,Zt&&_?st:null].filter(t=>null!==t);return t(s,{...J,variant:T,color:Q,size:O,padded:E,legendSide:"bottom",className:H,legend:null,table:null,children:a("div",{ref:V,className:v("relative w-full",tt&&"overflow-hidden"),style:{height:ft??P},role:Vt?"img":void 0,"aria-labelledby":void 0===R||null===Xt?R:`${R} ${nt}`,"aria-label":void 0===Ut||null===Xt?Ut:`${Ut}: ${Xt}`,"aria-describedby":v(B,...Vt?ta:[])||void 0,children:[void 0!==R&&null!==Xt?t("span",{id:nt,hidden:!0,children:Xt}):null,Ft?t("div",{id:et,className:v("flex h-full items-center justify-center text-(--plass-muted-fg)",b[O]),children:F??at.empty}):X>0&&Ct>0?a(e,{children:[a("svg",{width:X,height:pt,viewBox:`0 0 ${X} ${pt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:i(Lt,Bt,Ct,Dt,ht,mt),fill:`var(--plass-${Q}-soft)`}),null!==ut?t("path",{d:d(Lt,Bt,(Ct+Dt)/2,ht,mt),fill:"none",stroke:`var(--plass-${ct}-fill)`,strokeWidth:Ct-Dt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-ut,className:v("[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease),stroke_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]")}):null,Qt>0?Array.from({length:Qt},(a,e)=>{const l=ht+it*e/(Qt-1),[s,n]=pointAt(Lt,Bt,Ct+.25*xt,l),[r,i]=pointAt(Lt,Bt,Ct+.6*xt,l);return t("line",{x1:s,y1:n,x2:r,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,Nt.length>0?[[Nt[0],ht,"start"],[Nt[1],mt,"end"]].map(([a,e,l])=>{const[s,n]=pointAt(Lt,Bt,Ct+It,e);return t("text",{x:s,y:n+zt,textAnchor:At?"middle":"start"===l?"end":"start",fontSize:xt,fill:"var(--plass-muted-fg)",children:a},l)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Tt+Gt/2,maxWidth:Ht,transform:"translateY(-50%)"},children:[t("span",{id:g(W)?lt:void 0,className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:Ot},children:Jt}),_?t("span",{id:st,className:v("text-(--plass-muted-fg)",b[O]),children:_}):null]})]}):null]})})}

package/dist/components/header/PlHeader.d.ts

@@ -37,8 +37,10 @@ export interface PlHeaderProps extends Omit<React.ComponentPropsWithoutRef<'head
      *
      * `sticky` — the default — holds it against the top of the window once the
      * page has scrolled to it, while leaving it in the flow so nothing has to be
-     * padded out of its way. `fixed` takes it out of the flow entirely, which a
-     * `PlPageLayout` answers by reserving its height. `static` lets it scroll
+     * padded out of its way. `fixed` takes it out of the flow entirely and
+     * spans the window, which a `PlPageLayout` answers by reserving its height
+     * and starting the sidebars below it whatever `headerSpan` says, so a header
+     * meant to sit between the sidebars is `sticky`. `static` lets it scroll
      * away.
      * @default 'sticky'
      */

package/dist/components/header/PlHeader.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as n}from"../../internal/page-layout.js";import{measureSlots as a}from"../../internal/responsive.js";import{cx as l,hasContent as m,sheetPaddingXClasses as d,sheetRestClasses as c,sheetSectionGapClasses as o,surfaceSlots as f,transitionClasses as p}from"../../internal/styles.js";const u={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},x={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},y={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},h=c,v={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},g={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},j={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */r.forwardRef(function PlHeader({brand:c,actions:b,align:w="start",position:N="sticky",variant:k="glass",size:z,color:C,density:H,elevation:P=0,divider:R=!0,maxWidth:W,padded:q=!0,label:A,render:B,className:D,style:E,children:F,...G},I){const J=a(W),K=i(),L=z??K.size??"md",M=C??K.color??"primary",O=H??K.density??"default",{register:Q}=r.useContext(n),S=r.useCallback(e=>{Q("header",e),"function"==typeof I?I(e):I&&(I.current=e)},[Q,I]),T=l("w-full min-w-0",h[k],R?"border-b [border-color:var(--plass-divider)]":"",v[N],p,D);return t({render:B??e("header",{}),ref:S,props:{"aria-label":A,className:T,style:{...f(M,P),...E},children:s("div",{style:J.style,className:l("flex w-full items-center",u[L],x[L],y[L],q?d[O][L]:"",J.className,void 0===W?"":"mx-auto"),children:[m(c)?e("div",{className:l("flex min-w-0 items-center",g[w],o[L]),children:c}):"center"===w?e("div",{"aria-hidden":"true",className:g[w]}):null,m(F)?e("div",{className:l(j[w],o[L]),children:F}):null,m(b)?e("div",{className:l("flex min-w-0 items-center justify-end",g[w],o[L]),children:b}):"center"===w?e("div",{"aria-hidden":"true",className:g[w]}):null]}),...G}})});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as i from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as r}from"@base-ui/react/use-render";import{PlPageLayoutContext as a,useSlotPosition as n}from"../../internal/page-layout.js";import{measureSlots as l}from"../../internal/responsive.js";import{cx as d,hasContent as m,sheetPaddingXClasses as c,sheetRestClasses as o,sheetSectionGapClasses as f,surfaceSlots as p,transitionClasses as x}from"../../internal/styles.js";const u={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},y={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},h={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},v=o,g={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},j={static:"",sticky:"plass-header-sticky",fixed:"plass-header-fixed"},k={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},b={start:"ms-auto shrink-0",center:"flex-1 basis-0",end:"ms-auto shrink-0"},w={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */i.forwardRef(function PlHeader({brand:o,actions:N,align:z="start",position:C="sticky",variant:H="glass",size:P,color:R,density:W,elevation:q=0,divider:A=!0,maxWidth:B,padded:D=!0,label:E,render:F,className:G,style:I,children:J,...K},L){const M=l(B),O=t(),Q=P??O.size??"md",S=R??O.color??"primary",T=W??O.density??"default",{register:U}=i.useContext(a),V=i.useCallback(e=>{U("header",e),"function"==typeof L?L(e):L&&(L.current=e)},[U,L]);n(C);const X="static"!==C,Y=d("w-full min-w-0",j[C],v[H],A?"border-b [border-color:var(--plass-divider)]":"",g[C],x,G);return r({render:F??e("header",{}),ref:V,props:{"aria-label":E,"data-size":X?Q:void 0,"data-variant":X?H:void 0,"data-divider":X&&A?"":void 0,className:Y,style:{...p(S,q),...I},children:s("div",{style:M.style,className:d("flex w-full items-center",u[Q],y[Q],h[Q],D?c[T][Q]:"",M.className,void 0===B?"":"mx-auto"),children:[m(o)?e("div",{className:d("flex min-w-0 items-center",k[z],f[Q]),children:o}):"center"===z?e("div",{"aria-hidden":"true",className:k[z]}):null,m(J)?e("div",{className:d(w[z],f[Q]),children:J}):null,m(N)?e("div",{className:d("flex min-w-0 items-center justify-end",b[z],f[Q]),children:N}):"center"===z?e("div",{"aria-hidden":"true",className:k[z]}):null]}),...K}})});

package/dist/components/heatmap-chart/PlHeatmapChart.d.ts

@@ -66,4 +66,4 @@ export interface PlHeatmapChartProps extends Omit<ChartBaseProps, 'legend'> {
  * rather than off the categorical palette — a heatmap in eight hues says its
  * cells are eight unrelated things.
  */
-export declare function PlHeatmapChart({ series, categories, shape, scale, midpoint, min, max, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlHeatmapChartProps): React.JSX.Element;
+export declare function PlHeatmapChart({ series, categories, shape, scale, midpoint, min, max, valueLabels, height, initialWidth, format, locale: localeProp, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlHeatmapChartProps): React.JSX.Element;