plass-ui 1.7.0 → 1.8.1

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 i}from"@base-ui/react/dialog";import{CloseIcon as d}from"../../internal/icons.js";import{cx as t,focusRingClasses as n,glassClasses as u,hasContent as p,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,targetClasses as w}from"../../internal/styles.js";const j={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},N={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)"}},k={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},z={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},_=/* @__PURE__ */[u,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),C=/* @__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(" "),$=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",C].join(" "),D=/* @__PURE__ */[w,"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)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",n].join(" ");export const PlDrawerClose=i.Close;export function PlDrawer({side:n="left",mode:u="overlay",size:w,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=w??X.size??"md",ls=P??X.color??"primary",es=O??X.density??"default",rs="overlay"===u,as="left"===n||"right"===n,os=A??rs,[is,ds]=r.useState(B??!0),ts=g[es][ss],ns=h[es][ss],us=q?`${ts} ${ns}`:ts,ps=p(R)||p(S),ms=p(V),cs=void 0===G?null:{[as?"width":"height"]:"number"==typeof G?`${G}px`:G},fs=t(_,c[ss],k[n],H?N[n][ss]:"",rs?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",rs?C:"",as?`h-full max-w-full ${void 0===G?j[ss]:""}`:"w-full "+(void 0===G?"max-h-[85%]":""),q?"":`${ns} ${b[ss]}`,K),xs=rs?i.Title:"h2",gs=rs?i.Description:"p",hs=l(e,{children:[ps||os?l("div",{className:t("flex shrink-0 items-start gap-3",us),children:[l("div",{className:t("flex min-w-0 flex-1 flex-col",f[ss]),children:[p(R)?s(xs,{className:t("m-0 font-semibold",v[ss]),children:R}):null,p(S)?s(gs,{className:t("m-0 text-(--plass-muted-fg)",m[ss]),children:S}):null]}),os?rs?s(i.Close,{"aria-label":Z,className:D,children:s(d,{})}):s("button",{type:"button","aria-label":Z,className:D,onClick:()=>{void 0===T&&ds(!1),F?.(!1)},children:s(d,{})}):null]}):null,p(U)?s("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",us,q&&(ps||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",us,q?x:""),children:V}):null]});return rs?l(i.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(i.Trigger,{render:L}):null,l(i.Portal,{children:[s(i.Backdrop,{className:t("plass-portal",$,M?.backdrop)}),s(i.Viewport,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal) flex",z[n]),children:s(i.Popup,{className:fs,style:{...y(ls,3),...cs,...Q},...W,children:hs})})]})]}):T??is?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/file-picker/PlFilePicker.d.ts

@@ -6,7 +6,18 @@ 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'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a dropzone is cut into the page
      * rather than floating over it.
@@ -38,6 +49,13 @@ 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;
     /**
@@ -83,6 +101,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 o}from"@base-ui/react/field";import{useDefaults as l}from"../../internal/defaults.js";import{FormControl as a,leaveFormControl as t,useFormReport as n,useDisabled as i}from"../../internal/form.js";import{glowPointerMove as d}from"../../internal/glow.js";import{CloseIcon as c}from"../../internal/icons.js";import{useLabels as p}from"../../internal/labels.js";import{FieldNotch as f,notchShellStyle as u,resolveNotch as m}from"../../internal/notch.js";import{controlTextLeadingClasses as h,disabledClasses as b,fieldSlots as v,focusRingClasses as g,gapClasses as x,glassClasses as y,hasContent as j,iconClasses as $,metaTextClasses as k,radiusClasses as w,readOnlyFilterClasses as N,sheetTitleClasses as z,stackGapClasses as _,targetClasses as C,transitionClasses as I}from"../../internal/styles.js";const B={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"}},R={solid:/* @__PURE__ */[y,"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__ */[y,"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)]"},L={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(" "),D=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),M={solid:/* @__PURE__ */[y,"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__ */[y,"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,o=0;for(;s>=1e3&&o<r.length-1;)s/=1e3,o+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[o]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),o=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?o.startsWith(e.slice(0,-1)):o===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:y="glass",size:P,color:F,density:S,elevation:W=0,accept:E,multiple:V=!1,maxSize:A,maxFiles:O,value:q,defaultValue:G,onFilesChange:U,onReject:H,label:Y,labelPlacement:J,description:K,error:Q,invalid:X,title:Z,hint:ee,icon:re,showList:se=!0,showRejections:oe=!0,removeLabel:le,fullWidth:ae=!0,disabled:te=!1,readOnly:ne=!1,required:ie=!1,name:de,id:ce,className:pe,style:fe,...ue},me){const he=l(),be=i(te),ve=p(),ge=le??ve.removeItem,xe=P??he.size??"md",ye=F??he.color??"primary",je=S??he.density??"default",$e=J??he.labelPlacement??"top",{notched:ke}=m($e,Y,!0),we=s.useRef(null),Ne=s.useRef(null),ze=s.useRef(null);s.useImperativeHandle(me,()=>we.current);const[_e,Ce]=s.useState(()=>[...G??[]]),Ie=s.useMemo(()=>q?[...q]:_e,[q,_e]),Be=s.useRef(0),[Re,Le]=s.useState(!1),[Te,De]=s.useState({type:0,size:0,count:0}),Me=j(Q),Pe=X??Me,Fe=Pe?"danger":ye,Se=be||ne,We=s.useId(),Ee=`${We}-error`,Ve=`${We}-label`,Ae=ce??`${We}-zone`,Oe=s.useCallback(e=>{const r=we.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(()=>{Oe(Ie)},[Ie,Oe]),n(de,()=>[...Ie],!be);const qe=s.useCallback(e=>{q||Ce(e),U?.(e)},[U,q]),Ge=s.useCallback(e=>{const r=[],s=[],o=V?O??Number.POSITIVE_INFINITY:1,l=V?Ie.length:0;for(const a of e)E&&!matchesAccept(a,E)?s.push({file:a,reason:"type"}):void 0!==A&&a.size>A?s.push({file:a,reason:"size"}):l+r.length>=o?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[E,Ie.length,O,A,V]),Ue=s.useCallback(e=>{const{kept:r,rejections:s}=Ge(e),o={type:0,size:0,count:0};for(const e of s)o[e.reason]+=1;De(o),s.length>0&&H?.(s),r.length>0&&qe(V?[...Ie,...r]:r)},[Ge,qe,Ie,V,H]),He=s.useCallback(()=>{De(e=>e.type||e.size||e.count?{type:0,size:0,count:0}:e)},[]),Ye=[["type",ve.filesRejectedType],["size",ve.filesRejectedSize],["count",ve.filesRejectedCount]].filter(([e])=>Te[e]>0),browse=()=>{Se||(He(),we.current?.click())},Je=["relative flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",B[je][xe],w[xe],x[xe],I,$,ke?"":g,be?`${b[y]} border-2 border-dashed`:ne?`${R[y]} ${N} cursor-default`:Re?M[y]:R[y],Se||Re?"":L[y],Se?"":"plass-glow"].filter(Boolean).join(" "),Ke=e("span",{id:Ve,className:[k[xe],"font-semibold",be?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:Y});return r(o.Root,{name:de,disabled:be,invalid:Pe,className:["flex-col align-top",_[xe],ae?"flex w-full":"inline-flex",pe??""].filter(Boolean).join(" "),style:{...v(Fe,W),...fe},...ue,children:[j(Y)&&!ke?Ke:null,r("div",{className:`flex w-full flex-col ${_[xe]}`,onDragEnter:e=>{Se||(e.preventDefault(),Be.current+=1,Le(!0))},onDragOver:e=>{Se||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{Se||(Be.current=Math.max(0,Be.current-1),0===Be.current&&Le(!1))},onDrop:e=>{Se||(e.preventDefault(),Be.current=0,Le(!1),Ue(Array.from(e.dataTransfer.files)))},children:[e(o.Validity,{children:({validity:s})=>{const o=!1===s.valid,l=!Me&&o&&!be&&!0!==X,a=[j(K)||Me?We:null,l?Ee:null].filter(Boolean).join(" ")||void 0;return e(f,{notched:ke,size:xe,density:je,variant:y,disabled:be,readOnly:ne,label:Ke,edgeClassName:be?D:Se?"border-2 border-dashed [border-color:var(--plass-border)]":Re?"border-2 border-dashed [border-color:var(--p-ring)]":T,children:r("button",{ref:Ne,type:"button",id:Ae,"aria-labelledby":j(Y)?`${Ve} ${Ae}`:void 0,disabled:be,"aria-describedby":a,"aria-invalid":Pe||o||void 0,className:Je,style:ke?u:void 0,onPointerMove:d(!Se),onClick:browse,onBlur:()=>t(ze.current),children:[void 0===re?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):j(re)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:re}):null,e("span",{className:`font-semibold ${z[xe]}`,children:Z??ve.filePickerTitle}),j(ee)?e("span",{className:`text-(--plass-muted-fg) ${k[xe]}`,children:ee}):null]})})}}),e("input",{ref:we,type:"file",name:de,accept:E,multiple:V,disabled:Se,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>{Ue(Array.from(e.target.files??[])),Oe(Ie)}}),se&&Ie.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${_[xe]} m-0 list-none p-0`,children:Ie.map((s,o)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",w.xs,h[xe],"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 ${k[xe]}`,children:formatFileSize(s.size)}),Se?null:e("button",{type:"button","aria-label":ge(s.name),className:[C,"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)]","motion-reduce:[transition-duration:0ms]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",g].join(" "),onClick:()=>{He(),qe(Ie.filter((e,r)=>r!==o))},children:e(c,{})})]},`${s.name}-${s.size}-${s.lastModified}-${o}`))}):null]}),oe&&Ye.length>0?e("div",{role:"status",className:`flex w-full flex-col ${k[xe]} text-(--plass-danger-accent)`,children:Ye.map(([r,s])=>e("span",{children:s(Te[r])},r))}):null,j(K)&&!Me?e("span",{id:We,className:`${k[xe]} text-(--plass-muted-fg)`,children:K}):null,Me?e("span",{id:We,className:`${k[xe]} text-(--p-accent)`,children:Q}):e(o.Error,{id:Ee,className:`${k[xe]} text-(--p-accent)`}),e(a,{ref:ze,value:Ie.map(e=>e.name),required:ie&&!ne,disabled:be,standIn:()=>Ne.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-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{useBottomBarHeight as o}from"../../internal/bottom-bar.js";import{controlHeightClasses as l,controlSlots as n,controlSquareClasses as d,cx as c,focusRingClasses as p,glassClasses as u,hasContent as f,iconSizeClasses as m,srOnlyClasses as g,transitionClasses as b}from"../../internal/styles.js";const v=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),h={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},x={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)]"},y={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"}},w={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"},j={solid:/* @__PURE__ */[u,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[u,"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:d,density:p,elevation:u=2,value:f,defaultValue:m=null,onValueChange:g,position:k="fixed",safeArea:P=!0,disabled:C=!1,label:A,render:R,className:F,style:q,children:B,...$},E){const H=r(),I=l??H.size??"md",L=d??H.color??"primary",O=p??H.density??"default",[S,V]=s.useState(m),W=void 0!==f,D=W?f:S,M=s.useRef(null),T=s.useRef(null),G=s.useCallback(e=>{const t=M.current,a=T.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(()=>{G(!0)},[G,D,a,I,O,C,B]),s.useEffect(()=>{const e=M.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>G(!1));return t.observe(e),()=>t.disconnect()},[G]);const J=s.useCallback(e=>{W||V(e),g?.(e)},[W,g]),K=s.useMemo(()=>({value:D??null,change:J,size:I,disabled:C}),[D,J,I,C]),Q=s.useRef(null);o(Q,"fixed"===k);const U=c("flex w-full justify-center px-4","static"===k?"":"pointer-events-none",P?x[I]:h[I],N[k],F);return i({render:R??e("nav",{}),ref:[E,Q],props:{"aria-label":A,className:U,style:{...n(L,u,"solid"),...q},children:e(v.Provider,{value:K,children:t("div",{ref:M,className:c("pointer-events-auto relative inline-flex items-center rounded-full",j[a],y[O][I],w[O][I],b),children:[null!=D?e("span",{ref:T,"aria-hidden":"true",className:z}):null,B]})}),...$}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:n=!1,className:u,children:h,onClick:x,...y},w){const N=s.useContext(v),j=n||N.disabled,z=null!==N.value&&N.value===r,k=c("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],d[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,p,j?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":z?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",u),P=t(a,{children:[f(i)?e("span",{className:c("flex shrink-0 items-center justify-center",m[N.size]),children:i}):null,f(h)?e("span",{className:g,children:h}):null]}),C={"data-disc":"","data-current":z?"":void 0,"data-disabled":j?"":void 0},press=e=>{j?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:j?void 0:o,"aria-current":z?"page":void 0,"aria-disabled":j||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:j,"aria-current":z?"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.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 t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{isTurned as a,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__ */r.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__ */r.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=l(),Y=D??X.size??"md",Z=E??X.color??"primary",ee=o(),te=V??ee.gallery,ie=H??ee.galleryItem,re=r.useId(),[le,oe]=r.useState(null),ae=p(M??_,2),se=Math.max(1,u(ae)??2),ne="string"==typeof q&&q in $?$[q]:y(q)??$.md,de=C?v[Y]:"",me=n(P,1),tile=(r,l,o,s)=>{const m=f(r.title)||f(r.description),p="none"!==B&&m,u="overlay"===B||"hover"===B,v=`${re}-${l}-title`,x=`${re}-${l}-description`,y=p?[f(r.title)?v:null,f(r.description)?x:null].filter(Boolean).join(" "):void 0,j=e(w,{src:r.src,alt:r.alt,ratio:"grid"===k?P:"quilted"===k?"auto":a(r.rotate)?d(n(r.ratio,me),r.rotate):r.ratio??P,fit:G,letterbox:I,loading:T,rotate:r.rotate,flip:r.flip,position:r.position,placeholder:r.placeholder,rounded:!1,size:Y,color:Z,className:c("size-full",K?.image)}),_=p?t("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)]","motion-reduce:[transition-duration:0ms]"):""):"flex flex-col gap-0.5 pt-1.5",K?.caption),children:[f(r.title)?e("span",{id:v,className:c("truncate font-medium",h[Y],u?"":"text-(--plass-fg)",K?.title),children:r.title}):null,f(r.description)?e("span",{id:x,className:c("truncate",h[Y],u?"text-white/80":"text-(--plass-muted-fg)",K?.description),children:r.description}):null]}):null,$=t("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)]","motion-reduce:[transition-duration:0ms] motion-reduce:[&_img]:[transition-duration:0ms]"),children:[j,u?_:null]}),M=u||!p?$:t(i,{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:o,children:A||L?e("button",{type:"button","aria-label":`${r.alt} — ${ie(l+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&&oe(e)})(l),children:M}):M},r.id??r.src)};let pe,ue;if("masonry"===k){const e=R.map(e=>d(n(e.ratio,me),e.rotate)),{tracks:t,tiles:i}=s(e,se,"below"===B);ue=t.map(e=>"caption"===e?"auto":"gap"===e?ne:`${Number((100*e).toFixed(2))}fr`).join(" "),pe=R.map((e,t)=>{const{column:r,start:l,end:o}=i[t];return tile(e,t,{gridColumn:String(r),gridRow:`${l} / ${o}`,gridTemplateRows:"subgrid"},o-l)})}else pe="justified"===k?R.map((e,t)=>{const i=d(n(e.ratio,me),e.rotate);return tile(e,t,{flexGrow:i,flexBasis:i*S+"px",maxWidth:"100%"})}):R.map((e,t)=>tile(e,t,"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(i,{children:W}):t(i,{children:[e("ul",{ref:U,role:"list","aria-label":te,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",ae,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(r.Suspense,{fallback:null,children:e(j,{items:R,index:le,onIndexChange:oe,size:Y,color:Z,label:te,itemLabel:ie})}):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 n}from"../../internal/chart-frame.js";import{arcPath as r,chartFontSizes as i,compactNumber as o,plotHeights as m,ringPath as h,textWidth as d,truncate as c}from"../../internal/chart.js";import{useDefaults as u}from"../../internal/defaults.js";import{numberFormatter as f}from"../../internal/format.js";import{useLabels as p}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as v}from"../../internal/styles.js";import{bandColor as g}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:I,height:_,format:P,locale:S,label:W,empty:q,size:C,variant:D="ghost",color:L,padded:R=!1,className:B,...F}){const G=u(),T=C??G.size??"md",Y=L??G.color??"primary",E=S??G.locale,H=s.useRef(null),J=n(H),K=p(),O=s.useId(),Q=s.useId(),U=s.useId(),V=s.useCallback(t=>P?f(E,P).format(t):o(t,E),[P,E]),X=Math.max(1,Math.min(360,j)),Z=X/2,tt=-Z,at=Z,et=k-b,st=null===y||Number.isNaN(y)||0===et?null:Math.min(1,Math.max(0,(y-b)/et)),lt=null===y?Y:g(y,Y,$),nt="number"==typeof _?_:m[T],rt=i[T],it=Math.min(.9,Math.max(.05,N)),ot=Z*Math.PI/180,mt=X>=360?1:Math.max(0,-Math.cos(ot)),ht=X>=180?1:Math.sin(ot),dt=Math.sin(ot),ct=-Math.cos(ot),ut=A&&X<330?[b,k].map(t=>c(V(t),Math.max(0,.28*J),rt)):[],ft=ut.reduce((t,a)=>Math.max(t,d(a,rt)),0),pt=.35*rt,xt=!1===w?0:.85*rt,Mt=ct<=.25,vt=Mt?0:.5*rt,gt=Mt?rt:rt*(.35+.55*ct),yt=ut.length>0?ct*vt+gt+.25*rt:0,bt=Math.max(pt,xt),kt=Math.max(pt,xt),jt=Math.max(pt,xt,yt),Nt=[(J/2-bt)/Math.max(.05,ht),(nt-kt-jt)/(1+mt)];if(ft>0&&dt>.05){const t=Mt?ft/2:ft;Nt.push(Math.max(0,J/2-pt-t)/dt-vt)}const $t=Math.max(0,Math.min(...Nt)),wt=$t*(1-it),At=J/2,zt=kt+$t*(1+mt)+jt,It=kt+$t+Math.max(0,(nt-zt)/2),_t=0===et,Pt=M(I)?1.85*rt:0,St=It-wt*(1-Math.min(1,mt))/2,Wt=Math.min(wt,Math.abs(It-St)),qt=Math.min(wt,Math.abs(It-St-Pt/2)),Ct=2*Math.sqrt(Math.max(0,wt*wt-qt*qt)),Dt=z??(null===y?"—":V(y)),Lt="string"==typeof Dt?d(Dt,1):0,Rt=Lt>0?Math.max(rt,Math.min(2*rt,function fitType(t,a,e,s,l){const n=t*t/(4*l*l)+s*s,r=2*a*s,i=a*a-e*e;return n<=0||i>=0?0:(Math.sqrt(r*r-4*n*i)-r)/(2*n)}(Lt,Wt,wt,.42,.86))):2*rt,Bt=!1===w?0:Math.max(2,Math.floor(w)),Ft=!_t&&J>0&&$t>0,Gt=[_t?O:null,Ft&&M(z)?Q:null,Ft&&I?U:null].filter(t=>null!==t);return t(l,{...F,variant:D,color:Y,size:T,padded:R,legendSide:"bottom",className:B,legend:null,table:null,children:t("div",{ref:H,className:"relative w-full",style:{height:nt},role:void 0===W?void 0:"img","aria-label":void 0===W?void 0:null===y||_t?W:`${W}: ${V(y)} / ${V(k)}`,"aria-describedby":void 0===W||0===Gt.length?void 0:Gt.join(" "),children:_t?t("div",{id:O,className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",v[T]),children:q??K.empty}):J>0&&$t>0?a(e,{children:[a("svg",{width:J,height:nt,viewBox:`0 0 ${J} ${nt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:r(At,It,$t,wt,tt,at),fill:`var(--plass-${Y}-soft)`}),null!==st?t("path",{d:h(At,It,($t+wt)/2,tt,at),fill:"none",stroke:`var(--plass-${lt}-fill)`,strokeWidth:$t-wt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-st,className:x("[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease),stroke_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]")}):null,Bt>0?Array.from({length:Bt},(a,e)=>{const s=tt+X*e/(Bt-1),[l,n]=pointAt(At,It,$t+.25*rt,s),[r,i]=pointAt(At,It,$t+.6*rt,s);return t("line",{x1:l,y1:n,x2:r,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ut.length>0?[[ut[0],tt,"start"],[ut[1],at,"end"]].map(([a,e,s])=>{const[l,n]=pointAt(At,It,$t+vt,e);return t("text",{x:l,y:n+gt,textAnchor:Mt?"middle":"start"===s?"end":"start",fontSize:rt,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:St+Pt/2,maxWidth:Ct,transform:"translateY(-50%)"},children:[t("span",{id:M(z)?Q:void 0,className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:Rt},children:Dt}),I?t("span",{id:U,className:x("text-(--plass-muted-fg)",v[T]),children:I}):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.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as i}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:"ms-auto shrink-0",center:"flex-1 basis-0",end:"ms-auto shrink-0"},b={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:k,align:w="start",position:N="sticky",variant:z="glass",size:C,color:H,density:P,elevation:R=0,divider:W=!0,maxWidth:q,padded:A=!0,label:B,render:D,className:E,style:F,children:G,...I},J){const K=a(q),L=t(),M=C??L.size??"md",O=H??L.color??"primary",Q=P??L.density??"default",{register:S}=r.useContext(n),T=r.useCallback(e=>{S("header",e),"function"==typeof J?J(e):J&&(J.current=e)},[S,J]),U=l("w-full min-w-0",h[z],W?"border-b [border-color:var(--plass-divider)]":"",v[N],p,E);return i({render:D??e("header",{}),ref:T,props:{"aria-label":B,className:U,style:{...f(O,R),...F},children:s("div",{style:K.style,className:l("flex w-full items-center",u[M],x[M],y[M],A?d[Q][M]:"",K.className,void 0===q?"":"mx-auto"),children:[m(c)?e("div",{className:l("flex min-w-0 items-center",g[w],o[M]),children:c}):"center"===w?e("div",{"aria-hidden":"true",className:g[w]}):null,m(G)?e("div",{className:l(b[w],o[M]),children:G}):null,m(k)?e("div",{className:l("flex min-w-0 items-center justify-end",j[w],o[M]),children:k}):"center"===w?e("div",{"aria-hidden":"true",className:g[w]}):null]}),...I}})});
+"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;

package/dist/components/heatmap-chart/PlHeatmapChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as a,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as $}from"../../internal/chart.js";import{numberFormatter as k}from"../../internal/format.js";import{cx as A,metaTextClasses as N,srOnlyClasses as j}from"../../internal/styles.js";import{useLabels as z}from"../../internal/labels.js";import{useDefaults as E}from"../../internal/defaults.js";export function PlHeatmapChart({series:I,categories:S,shape:C="grid",scale:D="sequential",midpoint:B=0,min:P,max:L,valueLabels:R="none",height:U,format:_,locale:q,label:F,legend:H,tooltip:K,empty:W,size:G,variant:J="ghost",padded:O=!1,className:Q,...T}){const V=E(),X=G??V.size??"md",Y=q??V.locale,Z=t.useRef(null),ee=d(Z),le=z(),te=t.useId(),ne=t.useId(),ie=t.useId(),[re,ae]=t.useState(null),oe=t.useCallback(e=>_?k(Y,_).format(e):c(e,Y),[_,Y]),de=t.useMemo(()=>M(I),[I]),he=de.reduce((e,l)=>Math.max(e,l.length),0),se=t.useMemo(()=>Array.from({length:he},(e,l)=>h(l,S,de)),[he,S,de]),ce=t.useMemo(()=>I.map((e,l)=>e.name??`${l+1}`),[I]),me=t.useMemo(()=>de.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:ce[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[de,ce]),ue=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of de)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[de]),xe=P??ue?.min??0,fe=L??ue?.max??1,pe=t.useCallback(e=>g(e,xe,fe,D,B),[xe,fe,D,B]),ge="number"==typeof U?U:x[X]??220,we=s[X],ve=!0===H||void 0===H||!1===H?{}:H,ye=!1!==H,be=ve.side??"bottom",Me=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,$e="none"===Me.mode,ke=null===ue||0===he||0===I.length,Ae=t.useMemo(()=>{if("treemap"===C||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=ce.map(l=>$(l,e,we));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,we)),0)+10}},[C,ce,ee,we]),Ne="treemap"===C?0:we+8,je={left:Ae.band,width:Math.max(0,ee-Ae.band),height:Math.max(0,ge-Ne)},ze=t.useMemo(()=>{if("treemap"===C)return{texts:[],widest:0};const e=se.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,we)),0)}},[C,se,Y,we]),Ee=b(he,je.width,ze.widest+8),Ie=t.useMemo(()=>{if(je.width<=0||je.height<=0)return[];if("treemap"===C){const e=[];return de.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),je.width,je.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:je.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=je.height/Math.max(1,I.length),l=je.width/Math.max(1,he),t=[];return de.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:je.left+r*l,y:i*e,width:l,height:e})})),t},[C,de,I.length,he,je.left,je.width,je.height]),Se=t.useCallback((e,l)=>m(e.x??S?.[l]??se[l]??l,Y),[S,se,Y]),Ce=t.useCallback(e=>Se(e.cell,e.index),[Se]),De=null===re?null:Ie.find(e=>e.row===re.row&&e.index===re.index)??null;null!==re&&null===De&&ae(null);const Be=null===De?[]:[{seriesIndex:De.row,color:De.cell.color??f(pe(De.cell.value??0),D),value:De.cell.value,formatted:oe(De.cell.value??0),label:De.cell.label}],Pe=Array.from({length:w},(e,l)=>f(l,D));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:be,legend:ye&&!ke?e(n,{steps:Pe,from:oe("diverging"===D?-reach(xe,fe,B)+B:xe),to:oe("diverging"===D?reach(xe,fe,B)+B:fe),middle:"diverging"===D?oe(B):void 0,align:ve.align??"center",vertical:"left"===be||"right"===be,size:X}):null,table:ke?null:l("table","treemap"===C?{id:te,className:j,children:[F?e("caption",{children:F}):null,de.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:ce[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:Se(t,n)}),e("td",{children:void 0!==t.label?t.label:oe(t.value)})]},n))]},n))]}:{id:te,className:j,children:[F?e("caption",{children:F}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),se.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:de.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:ce[n]}),se.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":oe(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:ke?void 0:0,"aria-label":F??le.chart,"aria-describedby":ke?ie:ne,onPointerLeave:()=>ae(null),onBlur:()=>ae(null),onKeyDown:e=>{if($e||0===Ie.length)return;const l=null===re?-1:Ie.findIndex(e=>e.row===re.row&&e.index===re.index);if("grid"!==C||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ie[Math.min(Ie.length-1,l+1)];ae({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ie[Math.max(0,(-1===l?Ie.length:l)-1)];ae({row:e.row,index:e.index})}else{if("Escape"!==e.key||null===re)return;ae(null),e.stopPropagation()}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ie.length&&Ie[n].index!==Ie[l].index;)n+=t;n>=0&&n<Ie.length&&ae({row:Ie[n].row,index:Ie[n].index})}e.preventDefault()},className:A("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:ge},children:[ke?e("div",{id:ie,className:A("flex h-full items-center justify-center text-(--plass-muted-fg)",N[X]),children:W??le.empty}):ee>0?l("svg",{width:ee,height:ge,viewBox:`0 0 ${ee} ${ge}`,"aria-hidden":"true",className:"block",children:[Ie.map(t=>{const n=pe(t.cell.value??0),i=re?.row===t.row&&re?.index===t.index,r=Math.max(0,t.width-u),a=Math.max(0,t.height-u);if(r<=0||a<=0)return null;const d=oe(t.cell.value??0),h="treemap"===C?"all"===R?[Ce(t),d]:[Ce(t)]:"all"===R?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,r,a/h.length,we)),c=t.cell.color?"var(--plass-surface)":p(n,D);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:r,height:a,rx:Math.min(3,r/2,a/2),fill:t.cell.color??f(n,D),opacity:i?1:.94,onPointerEnter:$e?void 0:()=>ae({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(we+2),textAnchor:"middle",dominantBaseline:"central",fontSize:we,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===C?void 0:"tabular-nums",children:$(l,t.width-8,we)},n))]},`${t.row}-${t.index}`)}),"grid"===C?Ae.texts.map((l,t)=>e("text",{x:je.left-8,y:(t+.5)*je.height/Math.max(1,I.length),textAnchor:"end",dominantBaseline:"central",fontSize:we,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===C?ze.texts.map((l,t)=>{const n=je.width/Math.max(1,he);return t%Ee!==0?null:e("text",{x:je.left+(t+.5)*n,y:je.height+we,textAnchor:"middle",fontSize:we,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,De&&!$e?Me.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:De.x+De.width/2,top:De.y},children:Me.render({index:De.index,category:De.cell.x??se[De.index]??De.index,items:Be})}):e(a,{heading:`${ce[De.row]} · ${Ce(De)}`,items:Be,x:De.x+De.width/2,y:De.y,flip:De.x+De.width/2>.6*ee,size:X}):null]}),ke?null:e("span",{id:ne,className:j,children:me.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${oe(e.low)}`:`${e.name} ${oe(e.low)}–${oe(e.high)}`]},n))}),$e?null:e(i,{heading:De?`${ce[De.row]} · ${Ce(De)}`:void 0,items:Be})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as a,ChartSurface as i,ChartTooltipPanel as r,chartTableName as o,givenHeight as d,markTransitionClasses as h,useMeasuredSize as s}from"../../internal/chart-frame.js";import{categoryAt as c,chartFontSizes as u,compactNumber as m,formatCategory as x,markGap as f,plotHeights as p,rampFill as g,rampInk as w,rampStep as b,rampSteps as v,squarify as y,textWidth as M,tickStride as $,toValues as k,truncate as A}from"../../internal/chart.js";import{numberFormatter as N}from"../../internal/format.js";import{cx as j,metaTextClasses as z,srOnlyClasses as E}from"../../internal/styles.js";import{useLabels as B}from"../../internal/labels.js";import{useDefaults as I,useLocale as S}from"../../internal/defaults.js";export function PlHeatmapChart({series:C,categories:D,shape:P="grid",scale:L="sequential",midpoint:R=0,min:U,max:W,valueLabels:_="none",height:q,initialWidth:F,format:H,locale:K,label:G,"aria-label":J,"aria-labelledby":O,"aria-describedby":Q,legend:T,tooltip:V,empty:X,size:Y,variant:Z="ghost",padded:ee=!1,className:le,...te}){const ne=I(),ae=Y??ne.size??"md",ie=S(K),re=t.useRef(null),{width:oe,height:de,guessed:he}=s(re,F),se=B(),ce=t.useId(),ue=t.useId(),me=t.useId(),[xe,fe]=t.useState(null),pe=t.useCallback(e=>H?N(ie,H).format(e):m(e,ie),[H,ie]),ge=t.useMemo(()=>k(C),[C]),we=ge.reduce((e,l)=>Math.max(e,l.length),0),be=t.useMemo(()=>Array.from({length:we},(e,l)=>c(l,D,ge)),[we,D,ge]),ve=t.useMemo(()=>C.map((e,l)=>e.name??`${l+1}`),[C]),ye=t.useMemo(()=>ge.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:ve[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[ge,ve]),Me=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of ge)for(const a of n)null!==a.value&&(t=!0,e=Math.min(e,a.value),l=Math.max(l,a.value));return t?{min:e,max:l}:null},[ge]),$e=U??Me?.min??0,ke=W??Me?.max??1,Ae=t.useCallback(e=>b(e,$e,ke,L,R),[$e,ke,L,R]),Ne=d(q,p[ae]??220),je=Ne??de??0,ze=u[ae],Ee=!0===T||void 0===T||!1===T?{}:T,Be=!1!==T,Ie=Ee.side??"bottom",Se=!1===V?{mode:"none"}:!0===V||void 0===V?{}:V,Ce="none"===Se.mode,De=null===Me||0===we||0===C.length,Pe=t.useMemo(()=>{if("treemap"===P||oe<=0)return{texts:[],band:0};const e=Math.min(150,.25*oe),l=ve.map(l=>A(l,e,ze));return{texts:l,band:l.reduce((e,l)=>Math.max(e,M(l,ze)),0)+10}},[P,ve,oe,ze]),Le="treemap"===P?0:ze+8,Re={left:Pe.band,width:Math.max(0,oe-Pe.band),height:Math.max(0,je-Le)},Ue=t.useMemo(()=>{if("treemap"===P)return{texts:[],widest:0};const e=be.map(e=>x(e,ie));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,M(l,ze)),0)}},[P,be,ie,ze]),We=$(we,Re.width,Ue.widest+8),_e=t.useMemo(()=>{if(Re.width<=0||Re.height<=0)return[];if("treemap"===P){const e=[];return ge.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),y(e.map(e=>Math.max(0,e.cell.value??0)),Re.width,Re.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Re.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Re.height/Math.max(1,C.length),l=Re.width/Math.max(1,we),t=[];return ge.forEach((n,a)=>n.forEach((n,i)=>{null!==n.value&&t.push({row:a,index:i,cell:n,x:Re.left+i*l,y:a*e,width:l,height:e})})),t},[P,ge,C.length,we,Re.left,Re.width,Re.height]),qe=t.useCallback((e,l)=>x(e.x??D?.[l]??be[l]??l,ie),[D,be,ie]),Fe=t.useCallback(e=>qe(e.cell,e.index),[qe]),He=null===xe?null:_e.find(e=>e.row===xe.row&&e.index===xe.index)??null;null!==xe&&null===He&&fe(null);const Ke=null===He?[]:[{seriesIndex:He.row,color:He.cell.color??g(Ae(He.cell.value??0),L),value:He.cell.value,formatted:pe(He.cell.value??0),label:He.cell.label}],Ge=Array.from({length:v},(e,l)=>g(l,L)),Je=o({label:G,"aria-label":J,"aria-labelledby":O});return l(i,{...te,size:ae,variant:Z,padded:ee,className:le,legendSide:Ie,legend:Be&&!De?e(n,{steps:Ge,from:pe("diverging"===L?-reach($e,ke,R)+R:$e),to:pe("diverging"===L?reach($e,ke,R)+R:ke),middle:"diverging"===L?pe(R):void 0,align:Ee.align??"center",vertical:"left"===Ie||"right"===Ie,size:ae}):null,table:De?null:l("table","treemap"===P?{id:ce,className:E,"aria-labelledby":Je.labelledBy,children:[Je.caption?e("caption",{children:Je.caption}):null,ge.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:ve[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:qe(t,n)}),e("td",{children:void 0!==t.label?t.label:pe(t.value)})]},n))]},n))]}:{id:ce,className:E,"aria-labelledby":Je.labelledBy,children:[Je.caption?e("caption",{children:Je.caption}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),be.map((l,t)=>e("th",{scope:"col",children:x(l,ie)},t))]})}),e("tbody",{children:ge.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:ve[n]}),be.map((l,n)=>{const a=t[n];return e("td",{children:void 0!==a?.label?a.label:null==a?.value?"":pe(a.value)},n)})]},n))})]}),children:[l("div",{ref:re,role:"img",tabIndex:De?void 0:0,"aria-labelledby":O,"aria-label":J??G??se.chart,"aria-describedby":j(Q,De?me:ue),onPointerLeave:()=>fe(null),onBlur:()=>fe(null),onKeyDown:e=>{if(Ce||0===_e.length)return;const l=null===xe?-1:_e.findIndex(e=>e.row===xe.row&&e.index===xe.index);if("grid"!==P||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=_e[Math.min(_e.length-1,l+1)];fe({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=_e[Math.max(0,(-1===l?_e.length:l)-1)];fe({row:e.row,index:e.index})}else{if("Escape"!==e.key||null===xe)return;fe(null),e.stopPropagation()}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<_e.length&&_e[n].index!==_e[l].index;)n+=t;n>=0&&n<_e.length&&fe({row:_e[n].row,index:_e[n].index})}e.preventDefault()},className:j("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",he&&"overflow-hidden"),style:{height:Ne??q},children:[De?e("div",{id:me,className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",z[ae]),children:X??se.empty}):oe>0&&(null!==Ne||je>0)?l("svg",{width:oe,height:je,viewBox:`0 0 ${oe} ${je}`,"aria-hidden":"true",className:"block",children:[_e.map(t=>{const n=Ae(t.cell.value??0),a=xe?.row===t.row&&xe?.index===t.index,i=Math.max(0,t.width-f),r=Math.max(0,t.height-f);if(i<=0||r<=0)return null;const o=pe(t.cell.value??0),d="treemap"===P?"all"===_?[Fe(t),o]:[Fe(t)]:"all"===_?[o]:[],s=d.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(M(e,n),2.5*n)+8}(e,i,r/d.length,ze)),c=t.cell.color?"var(--plass-surface)":w(n,L);return l("g",{children:[e("rect",{x:t.x+f/2,y:t.y+f/2,width:i,height:r,rx:Math.min(3,i/2,r/2),fill:t.cell.color??g(n,L),opacity:a?1:.94,onPointerEnter:Ce?void 0:()=>fe({row:t.row,index:t.index}),className:h}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(ze+2),textAnchor:"middle",dominantBaseline:"central",fontSize:ze,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===P?void 0:"tabular-nums",children:A(l,t.width-8,ze)},n))]},`${t.row}-${t.index}`)}),"grid"===P?Pe.texts.map((l,t)=>e("text",{x:Re.left-8,y:(t+.5)*Re.height/Math.max(1,C.length),textAnchor:"end",dominantBaseline:"central",fontSize:ze,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===P?Ue.texts.map((l,t)=>{const n=Re.width/Math.max(1,we);return t%We!==0?null:e("text",{x:Re.left+(t+.5)*n,y:Re.height+ze,textAnchor:"middle",fontSize:ze,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,He&&!Ce?Se.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:He.x+He.width/2,top:He.y},children:Se.render({index:He.index,category:He.cell.x??be[He.index]??He.index,items:Ke})}):e(r,{heading:`${ve[He.row]} · ${Fe(He)}`,items:Ke,x:He.x+He.width/2,y:He.y,flip:He.x+He.width/2>.6*oe,size:ae}):null]}),De?null:e("span",{id:ue,className:E,children:ye.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${pe(e.low)}`:`${e.name} ${pe(e.low)}–${pe(e.high)}`]},n))}),Ce?null:e(a,{heading:He?`${ve[He.row]} · ${Fe(He)}`:void 0,items:Ke})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}

package/dist/components/hot-keys/PlHotKeys.d.ts

@@ -17,6 +17,8 @@ export interface PlHotKeysCluster {
     right: string;
 }
 export interface PlHotKeysProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * The keys, innermost punctuation and all.
      *
@@ -54,6 +56,8 @@ export interface PlHotKeysProps extends PlassStyleProps, Omit<React.ComponentPro
     elevation?: PlassElevation;
 }
 export interface PlKbdProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'>, Omit<React.ComponentPropsWithoutRef<'kbd'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     children?: React.ReactNode;
 }
 /**

package/dist/components/image/PlImage.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as l from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlSkeleton as i}from"../skeleton/PlSkeleton.js";import{PlassWatermark as a}from"../../internal/watermark.js";import{isSideways as s,layerStyle as u,objectPosition as c,poseStyle as d,quartersOf as f}from"../../internal/image.js";import{cx as p,focusRingClasses as h,radiusClasses as m,transitionClasses as b}from"../../internal/styles.js";function boxLength(e){return"number"==typeof e||/^\d+(\.\d+)?$/.test(e.trim())?`${Number(e)}px`:e}const g=Number.parseInt(l.version,10)>=19?"fetchPriority":"fetchpriority",v={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",saturate:"saturate(1.35)",desaturate:"saturate(0.45)",contrast:"contrast(1.2)",dim:"brightness(0.82)"},y={draggable:!1,onDragStart:e=>e.preventDefault(),onContextMenu:e=>e.preventDefault()},w={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},j=/* @__PURE__ */l.lazy(()=>import("./PlImagePreview.js").then(e=>({default:e.PlImagePreview})));export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:x,src:k,ratio:P,fit:S="cover",position:N,letterbox:z="none",rotate:L=0,flip:R="none",filter:$,watermark:C,protect:I=!1,rounded:W=!1,size:O,color:U,placeholder:E,fallback:D,preview:B=!1,previewLabel:T,onStatusChange:q,className:A,style:F,loading:H,priority:M=!1,width:V,height:G,...J},K){const Q=n(),X=o(),Y=T??X.preview,Z=O??Q.size??"md",_=U??Q.color??"primary",[ee,te]=l.useState({status:"loading",natural:null}),re=ee.status,[le,ne]=l.useState(!1),oe=H??(M?"eager":"lazy"),ie=J.fetchPriority??(M?"high":void 0),ae=void 0===ie?null:{[g]:ie},se=function isPicturePlaceholder(e){return"object"==typeof e&&null!==e&&!l.isValidElement(e)&&"src"in e}(E)?E:null,ue=function useStandInUrl(e){const[t,r]=l.useState(null);return l.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return r({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(se?.src),ce=l.useRef(null),de=l.useCallback(e=>{ce.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),fe=l.useRef("loading"),pe=l.useRef(k),he=l.useRef(null),settle=(e,t)=>{const r="loaded"===e?function naturalSize(e){return null!==e&&e.naturalWidth>0?{width:e.naturalWidth,height:e.naturalHeight}:null}(t):null;te(t=>t.status===e&&t.natural?.width===r?.width&&t.natural?.height===r?.height?t:{status:e,natural:r}),fe.current!==e&&(fe.current=e,q?.(e))};l.useLayoutEffect(()=>{const e=ce.current;if(null!==e){if(pe.current!==k&&(pe.current=k,fe.current="loading"),e.getAttribute("src")&&e.complete)return e.naturalWidth>0&&(he.current={src:k,file:e.currentSrc}),void settle(e.naturalWidth>0?"loaded":"error",e);te(e=>"loading"===e.status?e:{status:"loading",natural:null})}},[k]);const me=W?m[Z]:"",be=void 0===$?void 0:v[$]??$,ge=f(L),ve=s(ge),ye=d(ge,R),we=void 0===N?void 0:c(N,ge,R),je=void 0===be&&null===ye&&void 0===we?void 0:{...void 0===be?null:{"--p-filter":be},objectPosition:we,...ye},xe="blur"===z&&"cover"!==S&&"fill"!==S,ke="none"===z||"blur"===z?void 0:z,Pe=void 0===be||"none"===be?"":`${be} `,Se=xe&&"error"!==re?e("img",{src:k,srcSet:J.srcSet,sizes:J.sizes,loading:oe,decoding:J.decoding,crossOrigin:J.crossOrigin,referrerPolicy:J.referrerPolicy,...ae,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block object-cover select-none",b,"loaded"===re?"opacity-100":"opacity-0"),style:{...u(ge,R,48),objectPosition:we,filter:`${Pe}blur(24px)`}}):null,Ne=null!==se&&se.blur?!0===se.blur?20:se.blur:0,ze=null===se||void 0===ue||"error"===re?null:e("img",{src:ue,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block select-none","[--p-hold:var(--plass-duration)] motion-reduce:[--p-hold:0ms]",w[S]),style:{...u(ge,R,2*Ne),objectPosition:we,filter:""===Pe&&0===Ne?void 0:`${Pe}blur(${Ne}px)`,..."loaded"===re?{opacity:0,transition:"opacity 0ms linear var(--p-hold)"}:null}}),Le=e("img",{ref:de,src:k,alt:x,loading:oe,width:V,height:G,onLoad:e=>{const t=e.currentTarget,r=he.current;he.current=null,null!==r&&r.src!==k&&r.file===t.currentSrc||settle("loaded",t)},onError:()=>settle("error",null),style:je,className:p("block size-full",w[S],void 0===be?"":"[filter:var(--p-filter,none)]",b,xe||null!==ze?"relative":"","loaded"===re?"opacity-100":"opacity-0","error"===re?"hidden":"",I?"select-none [-webkit-touch-callout:none]":""),...ae,...J,...I?y:null}),Re=r(t,{children:[Se,ze,Le,"loading"===re&&null===se?e("span",{className:"absolute inset-0",children:void 0===E?e(i,{shape:"rect",color:_,size:Z,width:"100%",height:"100%",className:me}):E}):null,"error"===re?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:D??x}):null,void 0!==C&&"loaded"===re?e(a,{watermark:C}):null]}),$e=function pixelSize(e,t){const r=Number(e),l=Number(t);return void 0!==e&&void 0!==t&&r>0&&l>0?{width:r,height:l}:null}(V,G)??ee.natural,Ce=void 0===G&&void 0!==V?boxLength(V):void 0,Ie=void 0===V&&void 0!==G?boxLength(G):void 0,We=void 0===P&&ve&&null!==$e&&void 0===Ie?`${$e.height} / ${$e.width}`:P,Oe=p("relative block overflow-hidden",me,A),Ue={...void 0===Ce?null:{width:Ce,maxWidth:"100%"},...void 0===Ie?null:{height:Ie,...void 0===P?null:{width:"auto",maxWidth:"100%"}},aspectRatio:We,background:ke,containerType:ve?"size":void 0,...F};return B?r(t,{children:[e("button",{type:"button","aria-label":x?`${x} — ${Y.toLowerCase()}`:Y,onClick:()=>ne(!0),disabled:"loaded"!==re,className:p(Oe,"w-full cursor-zoom-in p-0",h),style:Ue,children:Re}),e(l.Suspense,{fallback:null,children:e(j,{open:le,onOpenChange:ne,src:k,alt:x,label:Y,color:_,protect:I,watermark:C,quarters:ge,flip:R,file:$e})})]}):e("span",{className:Oe,style:Ue,children:Re})});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{lazyPart as i}from"../../internal/lazy.js";import{PlSkeleton as a}from"../skeleton/PlSkeleton.js";import{PlassWatermark as s}from"../../internal/watermark.js";import{isSideways as u,layerStyle as c,objectPosition as d,poseStyle as f,quartersOf as h}from"../../internal/image.js";import{cx as p,focusRingClasses as b,radiusClasses as m,transitionClasses as v}from"../../internal/styles.js";function boxLength(e){return"number"==typeof e||/^\d+(\.\d+)?$/.test(e.trim())?`${Number(e)}px`:e}const g=Number.parseInt(n.version,10)>=19?"fetchPriority":"fetchpriority",y={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",saturate:"saturate(1.35)",desaturate:"saturate(0.45)",contrast:"contrast(1.2)",dim:"brightness(0.82)"},w={draggable:!1,onDragStart:e=>e.preventDefault(),onContextMenu:e=>e.preventDefault()},j={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"};function subscribeToNothing(){return()=>{}}function onClient(){return!1}function onServer(){return!0}const S=/* @__PURE__ */i(()=>import("./PlImagePreview.js").then(e=>e.PlImagePreview));export const PlImage=/* @__PURE__ */n.forwardRef(function PlImage({alt:i,src:x,ratio:k,fit:P="cover",position:N,letterbox:z="none",rotate:L=0,flip:R="none",filter:$,watermark:C,protect:E=!1,rounded:I=!1,size:U,color:W,placeholder:O,fallback:T,preview:B=!1,previewLabel:D,onStatusChange:F,className:q,style:A,loading:H,priority:M=!1,width:V,height:G,...J},K){const Q=l(),X=o(),Y=D??X.preview,Z=U??Q.size??"md",_=W??Q.color??"primary",[ee,te]=n.useState({status:"loading",natural:null}),re=ee.status,[ne,le]=n.useState(!1),[oe,ie]=n.useState(!1),ae=function useServedSrc(e){const t=n.useSyncExternalStore(subscribeToNothing,onClient,onServer),[r]=n.useState(t?e:void 0);return r}(x),se=Boolean(x)&&ae===x&&void 0===C&&!E,ue=se||"loaded"===re?"opacity-100":"opacity-0",ce=H??(M?"eager":"lazy"),de=J.fetchPriority??(M?"high":void 0),fe=void 0===de?null:{[g]:de},he=function isPicturePlaceholder(e){return"object"==typeof e&&null!==e&&!n.isValidElement(e)&&"src"in e}(O)?O:null,pe=function useStandInUrl(e){const[t,r]=n.useState(null);return n.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return r({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(he?.src),be=n.useRef(null),me=n.useCallback(e=>{be.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),ve=n.useRef("loading"),ge=n.useRef(x),ye=n.useRef(null),settle=(e,t)=>{const r="loaded"===e?function naturalSize(e){return null!==e&&e.naturalWidth>0?{width:e.naturalWidth,height:e.naturalHeight}:null}(t):null;te(t=>t.status===e&&t.natural?.width===r?.width&&t.natural?.height===r?.height?t:{status:e,natural:r}),ve.current!==e&&(ve.current=e,F?.(e))};n.useLayoutEffect(()=>{const e=be.current;if(null!==e){if(ge.current!==x&&(ge.current=x,ve.current="loading"),e.getAttribute("src")&&e.complete)return e.naturalWidth>0&&(ye.current={src:x,file:e.currentSrc}),void settle(e.naturalWidth>0?"loaded":"error",e);te(e=>"loading"===e.status?e:{status:"loading",natural:null})}},[x]);const we=I?m[Z]:"",je=void 0===$?void 0:y[$]??$,Se=h(L),xe=u(Se),ke=f(Se,R),Pe=void 0===N?void 0:d(N,Se,R),Ne=void 0===je&&null===ke&&void 0===Pe?void 0:{...void 0===je?null:{"--p-filter":je},objectPosition:Pe,...ke},ze="blur"===z&&"cover"!==P&&"fill"!==P,Le="none"===z||"blur"===z?void 0:z,Re=void 0===je||"none"===je?"":`${je} `,$e=ze&&"error"!==re?e("img",{src:x,srcSet:J.srcSet,sizes:J.sizes,loading:ce,decoding:J.decoding,crossOrigin:J.crossOrigin,referrerPolicy:J.referrerPolicy,...fe,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block object-cover select-none",v,ue),style:{...c(Se,R,48),objectPosition:Pe,filter:`${Re}blur(24px)`}}):null,Ce=null!==he&&he.blur?!0===he.blur?20:he.blur:0,Ee=null===he||void 0===pe||"error"===re?null:e("img",{src:pe,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block select-none","[--p-hold:var(--plass-duration)] motion-reduce:[--p-hold:0ms]",j[P]),style:{...c(Se,R,2*Ce),objectPosition:Pe,filter:""===Re&&0===Ce?void 0:`${Re}blur(${Ce}px)`,..."loaded"===re?{opacity:0,transition:"opacity 0ms linear var(--p-hold)"}:null}}),Ie="loading"===re&&null===he?e("span",{className:"absolute inset-0",children:void 0===O?e(a,{shape:"rect",color:_,size:Z,width:"100%",height:"100%",className:we}):O}):null,Ue=e("img",{ref:me,src:x,alt:i,loading:ce,width:V,height:G,onLoad:e=>{const t=e.currentTarget,r=ye.current;ye.current=null,null!==r&&r.src!==x&&r.file===t.currentSrc||settle("loaded",t)},onError:()=>settle("error",null),style:Ne,className:p("block size-full",j[P],void 0===je?"":"[filter:var(--p-filter,none)]",v,ze||null!==Ee||se&&null!==Ie?"relative":"",ue,"error"===re?"hidden":"",E?"select-none [-webkit-touch-callout:none]":""),...fe,...J,...E?w:null}),We=r(t,{children:[$e,Ee,se?Ie:null,Ue,se?null:Ie,"error"===re?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:T??i}):null,void 0!==C&&"loaded"===re?e(s,{watermark:C}):null]}),Oe=function pixelSize(e,t){const r=Number(e),n=Number(t);return void 0!==e&&void 0!==t&&r>0&&n>0?{width:r,height:n}:null}(V,G)??ee.natural,Te=void 0===G&&void 0!==V?boxLength(V):void 0,Be=void 0===V&&void 0!==G?boxLength(G):void 0,De=void 0===k&&xe&&null!==Oe&&void 0===Be?`${Oe.height} / ${Oe.width}`:k,Fe=p("relative block overflow-hidden",we,q),qe={...void 0===Te?null:{width:Te,maxWidth:"100%"},...void 0===Be?null:{height:Be,...void 0===k?null:{width:"auto",maxWidth:"100%"}},aspectRatio:De,background:Le,containerType:xe?"size":void 0,...A};return B?r(t,{children:[e("button",{type:"button","aria-label":i?`${i} — ${Y.toLowerCase()}`:Y,onClick:()=>{ie(!0),le(!0)},onPointerEnter:S.preload,onFocus:S.preload,onTouchStart:S.preload,disabled:"loaded"!==re,className:p(Fe,"w-full cursor-zoom-in p-0",b),style:qe,children:We}),oe?e(n.Suspense,{fallback:null,children:e(S,{open:ne,onOpenChange:le,onUnavailable:()=>{le(!1),ie(!1)},src:x,alt:i,label:Y,color:_,protect:E,watermark:C,quarters:Se,flip:R,file:Oe})}):null]}):e("span",{className:Fe,style:qe,children:We})});

package/dist/components/image/PlImagePreview.d.ts

@@ -49,8 +49,9 @@ export interface PlImagePreviewProps {
  * overlay and the chrome around it — several times the weight of the picture
  * component that opens it — and `preview` is off by default, so a page drawing
  * a wall of thumbnails would otherwise be paying for a lightbox it never shows.
- * Reached through `React.lazy`, the chunk arrives after the first paint on the
- * pages that ask for one and is never fetched by the pages that do not.
+ * Reached through `React.lazy` and rendered from the first open, the chunk is
+ * fetched once a reader points at, focuses or opens a picture, and never on a
+ * page where nobody does.
  *
  * The same bargain `PlGallery` makes with `PlGalleryViewer`, for the same
  * reason.