plass-ui 1.7.0 → 1.8.0

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/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.

package/dist/components/list/PlList.d.ts

@@ -52,6 +52,15 @@ export interface PlListItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     selected?: boolean;
     /** Unavailable. The light goes out, the same way it does everywhere else. */
     disabled?: boolean;
+    /**
+     * Renders the row'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 row a link, as an `href` does, and an `href` on the
+     * element wins over the row's own. A disabled row goes nowhere, so it does
+     * not use it.
+     */
+    render?: useRender.RenderProp;
     /** The label. */
     children?: React.ReactNode;
 }
@@ -73,10 +82,12 @@ export declare const PlList: React.ForwardRefExoticComponent<PlListProps & React
  * One row.
  *
  * The shell is always an `<li>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` or `href` is given — a real `<button>` or
- * `<a>` wrapping that content, with `action` sitting outside it as a separate
- * control. This is the same shape a `PlChip` uses, for the same two reasons: a
- * `<span>` carrying a click handler is invisible to a keyboard, and a
- * `<button>` inside a `<button>` is markup the browser silently un-nests.
+ * of content, or — when `onClick`, `href` or `render` is given — a real
+ * `<button>` or `<a>` wrapping that content, with `action` sitting outside it
+ * as a separate control. This is the same shape a `PlChip` uses, for the same
+ * two reasons: a `<span>` carrying a click handler is invisible to a keyboard,
+ * and a `<button>` inside a `<button>` is markup the browser silently un-nests.
+ * A disabled row keeps its element: the `<a>` loses its address and the
+ * `<button>` takes `disabled`.
  */
 export declare const PlListItem: React.ForwardRefExoticComponent<PlListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/PlList.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),v={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),C=["m-0 flex list-none flex-col",f[j],v[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),P=a({render:c,ref:b,props:{role:"list",className:C,style:{...u(w,o),...m},children:x,...y}});return e(g.Provider,{value:z,children:P})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:a,description:o,action:m,href:f,selected:u=!1,disabled:v=!1,className:j,children:w,onClick:k,...z},C){const{size:P,density:B,dividers:I}=r.useContext(g),L=Boolean(k||f)&&!v,$=b[B][P],R=["flex min-w-0 flex-1 items-center text-start",$,y[B][P],n[P],x[P],h,c,I?"":N[P],v?"cursor-not-allowed opacity-50 saturate-[0.35]":u?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${i}`:"",L&&!u?"hover:bg-(--p-soft)":"",L&&u?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(w)?e("span",{className:"truncate",children:w}):null,d(o)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[P]}`,children:o}):null]}),d(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:a}):null]});return s("li",{ref:C,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...z,children:[L&&f?e("a",{href:f,className:R,"aria-current":u?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!u||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":v||void 0,children:F}),d(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),g={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),B=["m-0 flex list-none flex-col",f[j],g[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),C=a({render:c,ref:b,props:{role:"list",className:B,style:{...u(w,o),...m},children:x,...y}});return e(v.Provider,{value:z,children:C})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:o,description:m,action:f,href:u,selected:g=!1,disabled:j=!1,render:w,className:k,children:z,onClick:B,...C},P){const{size:I,density:L,dividers:$}=r.useContext(v),R=Boolean(u||w),F=(R||Boolean(B))&&!j,M=b[L][I],q=["flex min-w-0 flex-1 items-center text-start",M,y[L][I],n[I],x[I],h,c,$?"":N[I],j?"cursor-not-allowed opacity-50 saturate-[0.35]":g?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",F?`cursor-pointer ${i}`:"",F&&!g?"hover:bg-(--p-soft)":"",F&&g?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),A=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(z)?e("span",{className:"truncate",children:z}):null,d(m)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[I]}`,children:m}):null]}),d(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:o}):null]}),D=a({render:j?e("a",{}):w??e("a",{}),enabled:R,props:{href:j?void 0:u,role:j?"link":void 0,"aria-disabled":j||void 0,className:q,"aria-current":g&&!j?"page":void 0,onClick:j?void 0:B,children:A}});return s("li",{ref:P,className:["flex w-full items-center",k??""].filter(Boolean).join(" "),...C,children:[D||(B?e("button",{type:"button",className:q,disabled:j,"aria-current":!(!g||j)||void 0,onClick:B,children:A}):e("div",{className:q,"aria-disabled":j||void 0,children:A})),d(f)?e("div",{className:`flex shrink-0 items-center ${M}`,children:f}):null]})});

package/dist/components/menu/PlMenu.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Menu as BaseUIMenu } from '@base-ui/react/menu';
+import type { useRender } from '@base-ui/react/use-render';
 import type { PlassAlign, PlassColor, PlassSide, PlassStyleProps } from '../../types.js';
 /**
  * A menu takes `size`, `color` and `density` and stops there.
@@ -73,6 +75,16 @@ export interface PlMenuItemProps {
     target?: string;
     /** The link's `rel`. Ignored without `href`. */
     rel?: string;
+    /**
+     * Renders the row's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, handed to its link row.
+     *
+     * Giving one makes the row a link, as an `href` does, and an `href` on the
+     * element wins over the row's own. The row's role, its highlight and the
+     * arrow keys stay Base UI's. A disabled row is not a link, so it does not use
+     * it.
+     */
+    render?: useRender.RenderProp<BaseUIMenu.LinkItem.State>;
     /** Content before the label — an icon, a swatch, a check. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -124,7 +136,7 @@ export interface PlMenuGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
+export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'render' | 'startIcon' | 'onClick'> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -145,7 +157,7 @@ export interface PlMenuRadioGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
+export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'render' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
     value: string | number;
     /** @default false */
@@ -155,12 +167,12 @@ export type PlMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
 /**
  * One row of a menu.
  *
- * Renders a real `<a>` when it is given an `href` and Base UI's own item
- * otherwise — the same split `PlListItem` makes, for the same reason. A menu of
- * links that are not links cannot be opened in a new tab, cannot be copied, and
- * tells a screen reader the wrong thing about every one of them.
+ * Renders a real `<a>` when it is given an `href` or a `render` and Base UI's
+ * own item otherwise — the same split `PlListItem` makes, for the same reason.
+ * A menu of links that are not links cannot be opened in a new tab, cannot be
+ * copied, and tells a screen reader the wrong thing about every one of them.
  */
-export declare function PlMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
+export declare function PlMenuItem({ onClick, href, target, rel, render, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
 export declare function PlMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/PlMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{safeRel as r}from"../../internal/link.js";import{MenuContext as i}from"../../internal/menu.js";import{CheckIcon as c,ChevronIcon as d,DotIcon as p}from"../../internal/icons.js";import{controlTextLeadingClasses as u,cx as m,forcedHighlightedClasses as h,gapClasses as f,glassClasses as x,hasContent as y,iconClasses as g,metaTextClasses as b,radiusClasses as C,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const k=/* @__PURE__ */[x,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},z={xs:C.xs,sm:C.xs,md:C.sm,lg:C.sm,xl:C.md};function rowClasses(e,s,l,n){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",w[s][e],z[e],f[e],u[e],v,g,"data-[highlighted]:bg-(--p-soft-hover)",h,"data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const O="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return m("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",b[e])}function RowBody({children:l,description:n,size:t}){return y(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:m("truncate text-(--plass-muted-fg)",b[t]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:o,target:c,rel:d,startIcon:p,endIcon:u,shortcut:h,description:f,color:x,closeOnClick:g=!0,disabled:b=!1,label:C,children:v,className:k,style:w}){const{size:z,density:P}=n.useContext(i),I=s(l,{children:[y(p)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:p}):null,e(RowBody,{description:f,size:z,children:v}),y(u)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:u}):null,y(h)?e("span",{className:shortcutClasses(z),children:h}):null]}),M=x?N(x,0):void 0,j=M||w?{...M,...w}:void 0;return void 0===o||b?e(a.Item,{disabled:b,label:C,closeOnClick:g,onClick:t,className:rowClasses(z,P,Boolean(x),k),style:j,children:I}):e(a.LinkItem,{href:o,target:c,rel:r(c,d),label:C,closeOnClick:g,onClick:t,className:rowClasses(z,P,Boolean(x),k),style:j,children:I})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:o,endIcon:r,shortcut:d,description:p,color:u,closeOnClick:h=!1,disabled:f=!1,label:x,children:g,className:b,style:C}){const{size:v,density:k}=n.useContext(i),w=u?N(u,0):void 0;return s(a.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>o?.(e),disabled:f,label:x,closeOnClick:h,className:rowClasses(v,k,Boolean(u),b),style:w||C?{...w,...C}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:p,size:v,children:g}),y(r)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:r}):null,y(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:t=!1,children:o,className:r,style:i}){return e(a.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:t,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:o,description:r,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:g}){const{size:b,density:C}=n.useContext(i),v=c?N(c,0):void 0;return s(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:rowClasses(b,C,Boolean(c),x),style:v||g?{...v,...g}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:r,size:b,children:f}),y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,y(o)?e("span",{className:shortcutClasses(b),children:o}):null]})}export function PlMenuGroup({label:l,children:t,className:o,style:r}){const{size:c,density:d}=n.useContext(i);return s(a.Group,{className:o,style:r,children:[y(l)?e(a.GroupLabel,{className:m(w[d][c],b[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:o=!1,side:r,sideOffset:c=4,children:p,className:h,style:f}){const{size:x,density:g,color:b}=n.useContext(i);return s(a.SubmenuRoot,{children:[s(a.SubmenuTrigger,{disabled:o,className:rowClasses(x,g,!1),children:[y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:m(O,"text-(--plass-muted-fg) -rotate-90 rtl:rotate-90"),children:e(d,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:r??"inline-end",sideOffset:c,align:"start",children:e(a.Popup,{className:m(k,C[x],u[x],h),style:{...N(b,3),...f},children:p})})})]})}export function PlMenu({size:l,color:o,density:r,trigger:c,open:d,defaultOpen:p,onOpenChange:h,side:f="bottom",align:x="start",sideOffset:y=6,modal:g=!0,openOnHover:b=!1,loopFocus:v=!0,disabled:w=!1,className:z,style:O,children:P}){const I=t(),M=l??I.size??"md",j=o??I.color??"primary",R=r??I.density??"default",B=n.useMemo(()=>({size:M,color:j,density:R}),[M,j,R]);return e(i.Provider,{value:B,children:s(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),modal:g,loopFocus:v,disabled:w,children:[c?e(a.Trigger,{render:c,openOnHover:b,disabled:w}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:f,align:x,sideOffset:y,children:e(a.Popup,{className:m(k,C[M],u[M],z),style:{...N(j,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:a,density:r,content:c,children:d,open:p,defaultOpen:h,onOpenChange:f,loopFocus:x=!0,disabled:y=!1,className:g,style:b}){const v=t(),w=l??v.size??"md",z=a??v.color??"primary",O=r??v.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(i.Provider,{value:P,children:s(o.Root,{open:p,defaultOpen:h,onOpenChange:e=>f?.(e),loopFocus:x,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:m(k,C[w],u[w],g),style:{...N(z,3),...b},children:c})})})]})})}
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{safeRel as r}from"../../internal/link.js";import{MenuContext as i}from"../../internal/menu.js";import{CheckIcon as c,ChevronIcon as d,DotIcon as p}from"../../internal/icons.js";import{controlTextLeadingClasses as u,cx as m,forcedHighlightedClasses as h,gapClasses as f,glassClasses as x,hasContent as y,iconClasses as g,metaTextClasses as b,radiusClasses as C,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const k=/* @__PURE__ */[x,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},z={xs:C.xs,sm:C.xs,md:C.sm,lg:C.sm,xl:C.md};function rowClasses(e,s,l,n){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",w[s][e],z[e],f[e],u[e],v,g,"data-[highlighted]:bg-(--p-soft-hover)",h,"data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const O="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return m("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",b[e])}function RowBody({children:l,description:n,size:t}){return y(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:m("truncate text-(--plass-muted-fg)",b[t]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:o,target:c,rel:d,render:p,startIcon:u,endIcon:h,shortcut:f,description:x,color:g,closeOnClick:b=!0,disabled:C=!1,label:v,children:k,className:w,style:z}){const{size:P,density:I}=n.useContext(i),M=s(l,{children:[y(u)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:u}):null,e(RowBody,{description:x,size:P,children:k}),y(h)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:h}):null,y(f)?e("span",{className:shortcutClasses(P),children:f}):null]}),j=g?N(g,0):void 0,R=j||z?{...j,...z}:void 0;return void 0===o&&void 0===p||C?e(a.Item,{disabled:C,label:v,closeOnClick:b,onClick:t,className:rowClasses(P,I,Boolean(g),w),style:R,children:M}):e(a.LinkItem,{render:p,href:o,target:c,rel:r(c,d),label:v,closeOnClick:b,onClick:t,className:rowClasses(P,I,Boolean(g),w),style:R,children:M})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:o,endIcon:r,shortcut:d,description:p,color:u,closeOnClick:h=!1,disabled:f=!1,label:x,children:g,className:b,style:C}){const{size:v,density:k}=n.useContext(i),w=u?N(u,0):void 0;return s(a.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>o?.(e),disabled:f,label:x,closeOnClick:h,className:rowClasses(v,k,Boolean(u),b),style:w||C?{...w,...C}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:p,size:v,children:g}),y(r)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:r}):null,y(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:t=!1,children:o,className:r,style:i}){return e(a.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:t,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:o,description:r,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:g}){const{size:b,density:C}=n.useContext(i),v=c?N(c,0):void 0;return s(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:rowClasses(b,C,Boolean(c),x),style:v||g?{...v,...g}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:r,size:b,children:f}),y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,y(o)?e("span",{className:shortcutClasses(b),children:o}):null]})}export function PlMenuGroup({label:l,children:t,className:o,style:r}){const{size:c,density:d}=n.useContext(i);return s(a.Group,{className:o,style:r,children:[y(l)?e(a.GroupLabel,{className:m(w[d][c],b[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:o=!1,side:r,sideOffset:c=4,children:p,className:h,style:f}){const{size:x,density:g,color:b}=n.useContext(i);return s(a.SubmenuRoot,{children:[s(a.SubmenuTrigger,{disabled:o,className:rowClasses(x,g,!1),children:[y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:m(O,"text-(--plass-muted-fg) -rotate-90 rtl:rotate-90"),children:e(d,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:r??"inline-end",sideOffset:c,align:"start",children:e(a.Popup,{className:m(k,C[x],u[x],h),style:{...N(b,3),...f},children:p})})})]})}export function PlMenu({size:l,color:o,density:r,trigger:c,open:d,defaultOpen:p,onOpenChange:h,side:f="bottom",align:x="start",sideOffset:y=6,modal:g=!0,openOnHover:b=!1,loopFocus:v=!0,disabled:w=!1,className:z,style:O,children:P}){const I=t(),M=l??I.size??"md",j=o??I.color??"primary",R=r??I.density??"default",B=n.useMemo(()=>({size:M,color:j,density:R}),[M,j,R]);return e(i.Provider,{value:B,children:s(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),modal:g,loopFocus:v,disabled:w,children:[c?e(a.Trigger,{render:c,openOnHover:b,disabled:w}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:f,align:x,sideOffset:y,children:e(a.Popup,{className:m(k,C[M],u[M],z),style:{...N(j,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:a,density:r,content:c,children:d,open:p,defaultOpen:h,onOpenChange:f,loopFocus:x=!0,disabled:y=!1,className:g,style:b}){const v=t(),w=l??v.size??"md",z=a??v.color??"primary",O=r??v.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(i.Provider,{value:P,children:s(o.Root,{open:p,defaultOpen:h,onOpenChange:e=>f?.(e),loopFocus:x,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:m(k,C[w],u[w],g),style:{...N(z,3),...b},children:c})})})]})})}

package/dist/components/menubar/PlMenubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});

package/dist/components/meter/PlMeter.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as s}from"@base-ui/react/meter";import{useDefaults as a}from"../../internal/defaults.js";import{barThicknessClasses as t,fillClasses as o,fillTransitionClasses as m,progressSlots as n,trackClasses as i}from"../../internal/progress.js";import{cx as c,metaTextClasses as f,stackGapClasses as u}from"../../internal/styles.js";import{bandColor as d}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:p=0,max:h=100,label:x,showValue:j=!1,format:w,thresholds:N,size:b,color:y,className:v,style:g,...k},z){const M=a(),P=b??M.size??"md",R=y??M.color??"primary";return l(s.Root,{ref:z,value:r,min:p,max:h,format:w,locale:M.locale,className:c("flex w-full flex-col",u[P],v),style:{...n(d(r,R,N)),...g},...k,children:[x||j?l("div",{className:c("flex items-baseline gap-2",x?"justify-between":"justify-end",f[P]),children:[x?e(s.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:x}):null,j?e(s.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(s.Track,{className:c("relative w-full overflow-hidden rounded-full",i,t[P]),children:e(s.Indicator,{className:c("rounded-full",o,m)})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as a}from"@base-ui/react/meter";import{useDefaults as s,useLocale as t}from"../../internal/defaults.js";import{controlNaming as o}from"../../internal/form.js";import{barThicknessClasses as i,fillClasses as m,fillTransitionClasses as n,progressSlots as f,trackClasses as c}from"../../internal/progress.js";import{cx as u,metaTextClasses as d,stackGapClasses as p}from"../../internal/styles.js";import{bandColor as h}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:x=0,max:j=100,label:b,showValue:w=!1,format:y,thresholds:N,size:v,color:g,className:k,style:z,"aria-label":M,"aria-labelledby":P,...R},V){const I=s(),L=t(),T=v??I.size??"md",q=g??I.color??"primary";return l(a.Root,{ref:V,value:r,min:x,max:j,format:y,locale:L,className:u("flex w-full flex-col",p[T],k),style:{...f(h(r,q,N)),...z},...o(M,P),...R,children:[b||w?l("div",{className:u("flex items-baseline gap-2",b?"justify-between":"justify-end",d[T]),children:[b?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:b}):null,w?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(a.Track,{className:u("relative w-full overflow-hidden rounded-full",c,i[T]),children:e(a.Indicator,{className:u("rounded-full",m,n)})})]})});

package/dist/components/mockup/PlMockup.d.ts

@@ -101,9 +101,10 @@ export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'
      * worth rather than a page's worth shrunk.
      *
      * A number, with `height` left out or a number too, is a size known on the
-     * server, so a server-rendered page has the device in its first HTML. Any
-     * other length is measured in the browser first, and the device is hidden
-     * until it has been.
+     * server, and the device is drawn at that scale in the first HTML. With any
+     * other length the stylesheet works the scale out from the box until the
+     * browser has measured it, so a server-rendered page has the device in its
+     * first HTML either way.
      * @default '100%'
      */
     width?: number | string;