plass-ui 1.6.0 → 1.7.0

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

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

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

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

package/dist/components/gallery/PlGallery.js

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

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

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

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

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

package/dist/components/header/PlHeader.js

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

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:S,categories:C,shape:D="grid",scale:I="sequential",midpoint:B=0,min:L,max:P,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,re]=t.useState(null),ae=t.useCallback(e=>_?k(Y,_).format(e):c(e,Y),[_,Y]),oe=t.useMemo(()=>M(S),[S]),de=oe.reduce((e,l)=>Math.max(e,l.length),0),he=t.useMemo(()=>Array.from({length:de},(e,l)=>h(l,C,oe)),[de,C,oe]),se=t.useMemo(()=>S.map((e,l)=>e.name??`${l+1}`),[S]),ce=t.useMemo(()=>oe.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:se[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[oe,se]),me=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of oe)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},[oe]),ue=L??me?.min??0,xe=P??me?.max??1,fe=t.useCallback(e=>g(e,ue,xe,I,B),[ue,xe,I,B]),pe="number"==typeof U?U:x[X]??220,ge=s[X],we=!0===H||void 0===H||!1===H?{}:H,ve=!1!==H,ye=we.side??"bottom",be=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,Me="none"===be.mode,$e=null===me||0===de||0===S.length,ke=t.useMemo(()=>{if("treemap"===D||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=se.map(l=>$(l,e,ge));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,ge)),0)+10}},[D,se,ee,ge]),Ae="treemap"===D?0:ge+8,Ne={left:ke.band,width:Math.max(0,ee-ke.band),height:Math.max(0,pe-Ae)},je=t.useMemo(()=>{if("treemap"===D)return{texts:[],widest:0};const e=he.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,ge)),0)}},[D,he,Y,ge]),ze=b(de,Ne.width,je.widest+8),Ee=t.useMemo(()=>{if(Ne.width<=0||Ne.height<=0)return[];if("treemap"===D){const e=[];return oe.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)),Ne.width,Ne.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Ne.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Ne.height/Math.max(1,S.length),l=Ne.width/Math.max(1,de),t=[];return oe.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:Ne.left+r*l,y:i*e,width:l,height:e})})),t},[D,oe,S.length,de,Ne.left,Ne.width,Ne.height]),Se=t.useCallback((e,l)=>m(e.x??C?.[l]??he[l]??l,Y),[C,he,Y]),Ce=t.useCallback(e=>Se(e.cell,e.index),[Se]),De=null===ie?null:Ee.find(e=>e.row===ie.row&&e.index===ie.index)??null,Ie=null===De?[]:[{seriesIndex:De.row,color:De.cell.color??f(fe(De.cell.value??0),I),value:De.cell.value,formatted:ae(De.cell.value??0),label:De.cell.label}],Be=Array.from({length:w},(e,l)=>f(l,I));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:ye,legend:ve&&!$e?e(n,{steps:Be,from:ae("diverging"===I?-reach(ue,xe,B)+B:ue),to:ae("diverging"===I?reach(ue,xe,B)+B:xe),middle:"diverging"===I?ae(B):void 0,align:we.align??"center",vertical:"left"===ye||"right"===ye,size:X}):null,table:$e?null:l("table","treemap"===D?{id:te,className:j,children:[F?e("caption",{children:F}):null,oe.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:se[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:ae(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"}),he.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:oe.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:se[n]}),he.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ae(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:$e?void 0:0,"aria-label":F??le.chart,"aria-describedby":$e?void 0:ne,onPointerLeave:()=>re(null),onBlur:()=>re(null),onKeyDown:e=>{if(Me||0===Ee.length)return;const l=null===ie?-1:Ee.findIndex(e=>e.row===ie.row&&e.index===ie.index);if("grid"!==D||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ee[Math.min(Ee.length-1,l+1)];re({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ee[Math.max(0,(-1===l?Ee.length:l)-1)];re({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;re(null)}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ee.length&&Ee[n].index!==Ee[l].index;)n+=t;n>=0&&n<Ee.length&&re({row:Ee[n].row,index:Ee[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:pe},children:[$e?e("div",{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:pe,viewBox:`0 0 ${ee} ${pe}`,"aria-hidden":"true",className:"block",children:[Ee.map(t=>{const n=fe(t.cell.value??0),i=ie?.row===t.row&&ie?.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=ae(t.cell.value??0),h="treemap"===D?"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,ge)),c=t.cell.color?"var(--plass-surface)":p(n,I);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,I),opacity:i?1:.94,onPointerEnter:Me?void 0:()=>re({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)*(ge+2),textAnchor:"middle",dominantBaseline:"central",fontSize:ge,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===D?void 0:"tabular-nums",children:$(l,t.width-8,ge)},n))]},`${t.row}-${t.index}`)}),"grid"===D?ke.texts.map((l,t)=>e("text",{x:Ne.left-8,y:(t+.5)*Ne.height/Math.max(1,S.length),textAnchor:"end",dominantBaseline:"central",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===D?je.texts.map((l,t)=>{const n=Ne.width/Math.max(1,de);return t%ze!==0?null:e("text",{x:Ne.left+(t+.5)*n,y:Ne.height+ge,textAnchor:"middle",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,De&&!Me?be.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:De.x+De.width/2,top:De.y},children:be.render({index:De.index,category:De.cell.x??he[De.index]??De.index,items:Ie})}):e(a,{heading:`${se[De.row]} · ${Ce(De)}`,items:Ie,x:De.x+De.width/2,y:De.y,flip:De.x+De.width/2>.6*ee,size:X}):null]}),$e?null:e("span",{id:ne,className:j,children:ce.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${ae(e.low)}`:`${e.name} ${ae(e.low)}–${ae(e.high)}`]},n))}),Me?null:e(i,{heading:De?`${se[De.row]} · ${Ce(De)}`:void 0,items:Ie})]})}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 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))}

package/dist/components/hover-card/PlHoverCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as l}from"@base-ui/react/preview-card";import{useDefaults as a}from"../../internal/defaults.js";import{PopupArrow as r}from"../../internal/picker.js";import{cx as i,glassClasses as n,hasContent as t,metaTextClasses as o,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetPaddingXClasses as p,sheetPaddingYClasses as f,sheetSectionGapClasses as g,sheetTitleClasses as x,surfaceSlots as u}from"../../internal/styles.js";const y={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},h=/* @__PURE__ */[n,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[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)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:n,color:w,density:b,trigger:O,title:j,description:N,children:z,side:P="bottom",align:C="center",sideOffset:D=8,alignOffset:_=0,delay:k=600,closeDelay:A=300,arrow:H=!1,open:R,defaultOpen:T,onOpenChange:W,width:$,className:q,style:B,...E}){const F=a(),G=n??F.size??"md",I=w??F.color??"primary",J=b??F.density??"default",K=v[G],L=t(j)||t(N);return s(l.Root,{open:R,defaultOpen:T,onOpenChange:e=>W?.(e),children:[e(l.Trigger,{delay:k,closeDelay:A,render:O}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:C,sideOffset:D,alignOffset:_,children:s(l.Popup,{className:i(h,d[G],m[G],g[G],p[J][G],f[J][G],void 0===$?y[G]:"",q),style:{...u(I,3),...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...B},...E,children:[H?e(r,{as:l.Arrow,size:K}):null,L?s("div",{className:i("flex min-w-0 flex-col",c[G]),children:[t(j)?e("div",{className:i("m-0 font-semibold",x[G]),children:j}):null,t(N)?e("div",{className:i("m-0 text-(--plass-muted-fg)",o[G]),children:N}):null]}):null,t(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as l}from"@base-ui/react/preview-card";import{useDefaults as a}from"../../internal/defaults.js";import{PopupArrow as i}from"../../internal/picker.js";import{cx as r,glassClasses as n,hasContent as t,metaTextClasses as o,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetPaddingXClasses as p,sheetPaddingYClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const y={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},h=/* @__PURE__ */[n,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[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(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:n,color:w,density:b,trigger:O,title:j,description:N,children:z,side:P="bottom",align:C="center",sideOffset:D=8,alignOffset:_=0,delay:k=600,closeDelay:A=300,arrow:H=!1,open:R,defaultOpen:T,onOpenChange:W,width:$,className:q,style:B,...E}){const F=a(),G=n??F.size??"md",I=w??F.color??"primary",J=b??F.density??"default",K=v[G],L=t(j)||t(N);return s(l.Root,{open:R,defaultOpen:T,onOpenChange:e=>W?.(e),children:[e(l.Trigger,{delay:k,closeDelay:A,render:O}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:C,sideOffset:D,alignOffset:_,children:s(l.Popup,{className:r(h,d[G],m[G],u[G],p[J][G],f[J][G],void 0===$?y[G]:"",q),style:{...x(I,3),...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...B},...E,children:[H?e(i,{as:l.Arrow,size:K}):null,L?s("div",{className:r("flex min-w-0 flex-col",c[G]),children:[t(j)?e("div",{className:r("m-0 font-semibold",g[G]),children:j}):null,t(N)?e("div",{className:r("m-0 text-(--plass-muted-fg)",o[G]),children:N}):null]}):null,t(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}

package/dist/components/how-to-steps/PlHowToSteps.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{useDefaults as s}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as i,connectorColorClasses as a,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as u,iconClasses as f,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v=/* @__PURE__ */l.createContext(null),w=/* @__PURE__ */l.createContext({index:0,last:!1}),y={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */l.forwardRef(function PlHowToSteps({active:t,numbered:n=!0,connector:o="solid",size:i,color:a,density:c,render:d,className:m,style:u,children:f,...h},N){const b=s(),P=i??b.size??"md",j=a??b.color??"primary",H=c??b.density??"default",S=l.Children.toArray(f).filter(l.isValidElement),T=l.useMemo(()=>({size:P,density:H,color:j,active:t??null,numbered:n,connector:o}),[P,H,j,t,n,o]);return e(v.Provider,{value:T,children:r({render:d??e("ol",{}),ref:N,props:{role:"list",className:p("m-0 flex list-none flex-col p-0",y[H][P],x[P],m),style:{...g(j,0),...u},children:S.map((t,l)=>e(w.Provider,{value:{index:l,last:l===S.length-1},children:t},t.key??l)),...h}})})});export const PlHowToStep=/* @__PURE__ */l.forwardRef(function PlHowToStep({title:r,icon:s,status:x,className:y,children:N,...b},P){const j=l.useContext(v),{index:H,last:S}=l.useContext(w);if(!j)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:T,color:C,active:z,numbered:k,connector:E}=j,R=x??d(H,z),A=o[T];return t("li",{ref:P,"aria-current":"current"===R?"step":void 0,className:p("relative flex",n[T],y),style:g(C,0),...b,children:[t("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",f,i[R]),style:{width:A,height:A},children:u(s)?s:k?H+1:null}),S||"none"===E?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[E],a[R])})]}),t("div",{className:"min-w-0 flex-1 pb-0.5",children:[u(r)?e("div",{className:p("font-semibold",h[T],m[R]),children:r}):null,u(N)?e("div",{className:p(u(r)?"mt-1":"","text-(--plass-muted-fg)"),children:N}):null]})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useRender as s}from"@base-ui/react/use-render";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as i,connectorColorClasses as a,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as f,iconClasses as u,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g,transitionClasses as v}from"../../internal/styles.js";const w=/* @__PURE__ */t.createContext(null),y=/* @__PURE__ */t.createContext({index:0,last:!1}),N={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */t.forwardRef(function PlHowToSteps({active:l,numbered:n=!0,connector:o="solid",size:i,color:a,density:c,render:d,className:m,style:f,children:u,...h},v){const b=r(),P=i??b.size??"md",j=a??b.color??"primary",H=c??b.density??"default",S=t.Children.toArray(u).filter(t.isValidElement),T=t.useMemo(()=>({size:P,density:H,color:j,active:l??null,numbered:n,connector:o}),[P,H,j,l,n,o]);return e(w.Provider,{value:T,children:s({render:d??e("ol",{}),ref:v,props:{role:"list",className:p("m-0 flex list-none flex-col p-0",N[H][P],x[P],m),style:{...g(j,0),...f},children:S.map((l,t)=>e(y.Provider,{value:{index:t,last:t===S.length-1},children:l},l.key??t)),...h}})})});export const PlHowToStep=/* @__PURE__ */t.forwardRef(function PlHowToStep({title:s,icon:r,status:x,className:N,children:b,...P},j){const H=t.useContext(w),{index:S,last:T}=t.useContext(y);if(!H)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:C,color:z,active:k,numbered:E,connector:R}=H,$=x??d(S,k),A=o[C];return l("li",{ref:j,"aria-current":"current"===$?"step":void 0,className:p("relative flex",n[C],N),style:{...g(z,0),"--p-fill":`var(--plass-${z}-fill)`,"--p-on-solid":`var(--plass-${z}-on-solid)`},...P,children:[l("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",u,i[$],v),style:{width:A,height:A},children:f(r)?r:E?S+1:null}),T||"none"===R?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[R],a[$],v)})]}),l("div",{className:"min-w-0 flex-1 pb-0.5",children:[f(s)?e("div",{className:p("font-semibold",h[C],m[$],v),children:s}):null,f(b)?e("div",{className:p(f(s)?"mt-1":"","text-(--plass-muted-fg)"),children:b}):null]})]})});

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 b,transitionClasses as m}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 be=W?b[Z]:"",me=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===me&&null===ye&&void 0===we?void 0:{...void 0===me?null:{"--p-filter":me},objectPosition:we,...ye},xe="blur"===z&&"cover"!==S&&"fill"!==S,ke="none"===z||"blur"===z?void 0:z,Pe=void 0===me||"none"===me?"":`${me} `,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",m,"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",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(--plass-duration)"}: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===me?"":"[filter:var(--p-filter,none)]",m,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:be}):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",be,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 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})});

package/dist/components/line-chart/PlLineChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/chart-frame.js';
 import { type ChartMarkers } from '../../internal/chart-line.js';
-import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+import type { PlassChartCurve, PlassChartLabelColor, PlassChartNulls, PlassChartValueLabels } from '../../types.js';
 export interface PlLineChartProps extends CartesianChartProps {
     /**
      * How the line gets from one point to the next.
@@ -33,11 +33,24 @@ export interface PlLineChartProps extends CartesianChartProps {
      */
     gradient?: boolean;
     /**
-     * Draws the line straight through a `null` instead of breaking at it.
+     * What a gap in a series does to the line.
      *
-     * Off, and it should stay off unless the gap is an artefact of how the data
-     * was collected. A bridged gap is a number the chart made up.
-     * @default false
+     * - `gap` — it breaks at the `null`. The default, and the only answer that
+     *   claims nothing the data did not: the blank says the reading is missing.
+     * - `connect` — the two sides are joined. Only when the gap is an artefact of
+     *   how the data was collected; otherwise the segment is a number the chart
+     *   made up.
+     * - `zero` — the gap is read as a zero, everywhere: on the axis, in the
+     *   tooltip and in the table as well as under the line. For a missing row
+     *   that genuinely means none.
+     * @default 'gap'
+     */
+    nulls?: PlassChartNulls;
+    /**
+     * Bridges a gap instead of breaking at it.
+     * @deprecated Use `nulls`. `connectNulls` is `nulls="connect"`, and `nulls`
+     * also has the third answer — reading the gap as a zero — which a boolean
+     * cannot express. It is still honoured when `nulls` is not given.
      */
     connectNulls?: boolean;
     /**
@@ -47,6 +60,19 @@ export interface PlLineChartProps extends CartesianChartProps {
      * @default 'none'
      */
     valueLabels?: PlassChartValueLabels;
+    /**
+     * What colour those numbers are written in.
+     *
+     * `series` — the default — gives each label the colour of the line it is
+     * sitting on, so a plot with four labelled series says which number belongs
+     * to which without the reader tracing it back. `ink` writes them all in the
+     * page's own foreground: the chart palette clears 4:1 against the sheet,
+     * which is the floor a *mark* is held to rather than the 4.5:1 body text
+     * wants, so reach for it where the labels have to meet the text contrast rule
+     * on their own.
+     * @default 'series'
+     */
+    valueLabelColor?: PlassChartLabelColor;
     /**
      * Stacks the series, each line riding on the total of the ones below it.
      *
@@ -71,4 +97,4 @@ export interface PlLineChartProps extends CartesianChartProps {
  * from the shared frame, which is what makes a PlLineChart and a PlBarChart on one
  * dashboard read as one drawing rather than two.
  */
-export declare function PlLineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: PlLineChartProps): React.JSX.Element;
+export declare function PlLineChart({ curve, markers, gradient, nulls: nullsProp, connectNulls, valueLabels, valueLabelColor, stacked, series, ...props }: PlLineChartProps): React.JSX.Element;

package/dist/components/line-chart/PlLineChart.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function PlLineChart({curve:a="linear",markers:c="auto",gradient:i=!1,connectNulls:o=!1,valueLabels:l="none",stacked:s=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:s,inset:!0,includeZero:!1,headroom:"none"===l?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:s,markers:c,valueLabels:l,connectNulls:o,gradient:i,idPrefix:u})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{zeroNulls as t}from"../../internal/chart.js";import{LineSeries as n}from"../../internal/chart-line.js";export function PlLineChart({curve:o="linear",markers:s="auto",gradient:l=!1,nulls:i,connectNulls:c=!1,valueLabels:u="none",valueLabelColor:m="series",stacked:d=!1,series:f,...p}){const h=r.useId().replace(/:/g,""),k=i??(c?"connect":"gap"),v=r.useMemo(()=>"zero"===k?t(f):f,[k,f]);return e(a,{...p,series:v,stacked:d,stroked:!0,inset:!0,includeZero:!1,headroom:"none"===u?0:10,children:r=>e(n,{context:r,curve:o,filled:!1,stacked:d,markers:s,valueLabels:u,valueLabelColor:m,nulls:k,gradient:l,idPrefix:h})})}

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)]","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,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})})})]})})}

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

@@ -99,6 +99,11 @@ export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'
      * any CSS length. The device is laid out at its own resolution and then scaled
      * to whatever this comes to, so the content inside is genuinely a screen's
      * 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.
      * @default '100%'
      */
     width?: number | string;

package/dist/components/mockup/PlMockup.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{useRender as a}from"@base-ui/react/use-render";import{PlMockupCutout as s,defaultNotch as l,elevationFilters as o,finishSlots as h,mockupChrome as d,mockupMetrics as n,resolveOs as c,shellClasses as u}from"../../internal/mockup.js";import{cx as p,surfaceSlots as m}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */r.forwardRef(function PlMockup(v,w){const{device:b,os:x,hardware:y="monitor",size:k,resolution:N,orientation:z="portrait",bezel:R="standard",finish:$="graphite",notch:j,systemUi:M=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:S,height:B,color:C,elevation:E=0,render:F,className:I,style:T,children:U,...q}=v,A=g(),D=k??A.size??"md",G=C??A.color??"primary",J=c(b,x),K=j??l(b,J),L="desktop"!==b&&"landscape"===z,O=n({device:b,size:D,resolution:N,orientation:z,bezel:R,hardware:y}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),ee=f(_),te=null===ee||ee.width<=0||ee.height<=0?null:Math.min(ee.width/V.width,ee.height/V.height),ie=r.useCallback(e=>{_.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),re=M?d({os:J,notch:K,landscape:L,time:W}):{},ae="none"===R,se=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:ae?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),re.bottom?.node,e(s,{notch:K,screen:Q,landscape:L})]}),le=p("plass-mockup relative block",I??"");return a({render:F,ref:ie,props:{className:le,style:{...m(G,E),...h[$],width:S??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:o[E],...T},children:e("div",{className:"absolute inset-0 flex items-center justify-center",style:{visibility:null===te?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${te??1})`},children:[e("div",{className:ae?"":u,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:se}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:u,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${u}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...q}})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{PlMockupCutout as s,defaultNotch as o,elevationFilters as l,finishSlots as h,mockupChrome as d,mockupMetrics as n,resolveOs as c,shellClasses as u}from"../../internal/mockup.js";import{cx as p,surfaceSlots as m}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */r.forwardRef(function PlMockup(v,w){const{device:b,os:y,hardware:x="monitor",size:k,resolution:N,orientation:z="portrait",bezel:R="standard",finish:$="graphite",notch:M,systemUi:j=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:S,height:B,color:C,elevation:E=0,render:F,className:I,style:T,children:U,...q}=v,A=g(),D=k??A.size??"md",G=C??A.color??"primary",J=c(b,y),K=M??o(b,J),L="desktop"!==b&&"landscape"===z,O=n({device:b,size:D,resolution:N,orientation:z,bezel:R,hardware:x}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),ee=f(_),te=null===ee||ee.width<=0||ee.height<=0?null:Math.min(ee.width/V.width,ee.height/V.height),ie="number"==typeof S&&S>0?void 0===B?S/V.width:"number"==typeof B&&B>0?Math.min(S/V.width,B/V.height):null:"number"==typeof B&&B>0&&void 0===S?B/V.height:null,re=te??ie,ae=r.useCallback(e=>{_.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),se=j?d({os:J,notch:K,landscape:L,time:W}):{},oe="none"===R,le=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:oe?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[se.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[se.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),se.bottom?.node,e(s,{notch:K,screen:Q,landscape:L})]}),he=p("plass-mockup relative block",I??"");return a({render:F,ref:ae,props:{className:he,style:{...m(G,E),...h[$],width:S??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:l[E],...T},children:e("div",{className:"absolute inset-0 flex items-center justify-center",style:{visibility:null===re?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${re??1})`},children:[e("div",{className:oe?"":u,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:le}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:u,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${u}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...q}})});

package/dist/components/modal/PlModal.js

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

package/dist/components/navigation-menu/PlNavigationMenu.d.ts

@@ -102,8 +102,9 @@ export declare function PlNavigationMenuItem({ label, href, target, rel, startIc
  * index. Reach for a menu when the row *does* something and for this when the
  * row *goes* somewhere.
  *
- * One panel is open at a time and it resizes between items rather than closing
- * and reopening, which is Base UI's doing and is what makes crossing the row
- * read as one surface rather than three.
+ * One panel is open at a time, which is Base UI's doing, and the sheet eases
+ * from one item's panel to the next, in size and in place, rather than closing
+ * and reopening, which is what makes crossing the row read as one surface
+ * rather than three.
  */
 export declare const PlNavigationMenu: React.ForwardRefExoticComponent<PlNavigationMenuProps & React.RefAttributes<HTMLElement>>;

package/dist/components/navigation-menu/PlNavigationMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as r}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as c,controlTextLeadingClasses as d,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */s.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */s.forwardRef(function PlNavigationMenuLink({href:t,title:n,description:l,startIcon:o,className:c,children:u,target:m,rel:h,...v},b){const{size:w,density:P}=s.useContext(j);return a(r.Link,{ref:b,href:t,target:m,rel:i(m,h),className:p(k,N[w],f[w],y[P][w],"py-2",c),...v,children:[g(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",d[w]),children:n}),g(l)?e("span",{className:p("text-(--plass-muted-fg)",x[w]),children:l}):null,u]})]})});export function PlNavigationMenuItem({label:n,href:d,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,active:b=!1,columns:w=1,children:z,className:k,style:C}){const{size:M,density:I}=s.useContext(j),L=void 0!==d&&!g(z),V=p(P,o[M],c[M],f[M],y[I][M],N[M],k);return e(r.Item,{value:v,children:L?a(r.Link,{href:d,target:u,rel:i(u,m),"aria-current":b?"page":void 0,className:V,style:C,children:[g(h)?h:null,n]}):a(t,{children:[a(r.Trigger,{disabled:x,className:V,style:C,children:[g(h)?h:null,n,e(r.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(r.Content,{className:p("grid gap-1",_[M]),style:w>1?{gridTemplateColumns:`repeat(${w}, minmax(0, 1fr))`}:void 0,children:z})]})})}export const PlNavigationMenu=/* @__PURE__ */s.forwardRef(function PlNavigationMenu({size:t,color:l,density:i,orientation:o="horizontal",value:c,defaultValue:d,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=t??k.size??"md",C=l??k.color??"primary",M=i??k.density??"default",I=s.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(r.Root,{ref:P,orientation:o,value:c,defaultValue:d,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(r.List,{className:p("m-0 flex list-none items-center p-0","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(r.Popup,{className:p(z,N[_]),children:e(r.Viewport,{})})})})]})})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as o}from"../../internal/icons.js";import{safeRel as s}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as p,controlTextLeadingClasses as c,cx as d,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as y,metaTextClasses as v,paddingXClasses as b,radiusClasses as x,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */n.createContext({size:"md",density:"default",orientation:"horizontal"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,y,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),F=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),z=/* @__PURE__ */["[transition-property:opacity,width,height]","in-data-[instant]:[transition-property:opacity]"].join(" "),C=/* @__PURE__ */["plass-portal z-(--plass-z-portal) [outline:none]","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]"].join(" "),S=/* @__PURE__ */["[transition-property:top,left,right,bottom]","motion-reduce:[transition-property:none] data-[instant]:[transition-property:none]"].join(" "),k=/* @__PURE__ */new Set(["width","height","top","left","right","bottom"]),M=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",N,y,"hover:bg-(--p-soft)",m].join(" "),A={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */n.forwardRef(function PlNavigationMenuLink({href:a,title:r,description:o,startIcon:l,className:p,children:u,target:m,rel:h,...y},w){const{size:N,density:P}=n.useContext(j);return t(i.Link,{ref:w,href:a,target:m,rel:s(m,h),className:d(M,x[N],f[N],b[P][N],"py-2",p),...y,children:[g(l)?e("span",{className:d("flex h-[1lh] shrink-0 items-center",c[N]),children:l}):null,t("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:d("font-medium",c[N]),children:r}),g(o)?e("span",{className:d("text-(--plass-muted-fg)",v[N]),children:o}):null,u]})]})});export function PlNavigationMenuItem({label:r,href:c,target:u,rel:m,startIcon:h,value:y,disabled:v=!1,active:w=!1,columns:N=1,children:F,className:z,style:C}){const{size:S,density:k,orientation:M}=n.useContext(j),L=void 0!==c&&!g(F),R=d(P,"vertical"===M&&"w-full",l[S],p[S],f[S],b[k][S],x[S],z);return e(i.Item,{value:y,children:L?t(i.Link,{href:c,target:u,rel:s(u,m),"aria-current":w?"page":void 0,className:R,style:C,children:[g(h)?h:null,r]}):t(a,{children:[t(i.Trigger,{disabled:v,className:R,style:C,children:[g(h)?h:null,r,e(i.Icon,{className:d("flex items-center","vertical"===M?"-rotate-90 rtl:rotate-90":"[transition:rotate_var(--plass-duration)_var(--plass-ease)] motion-reduce:[transition-duration:0ms] data-[popup-open]:rotate-180"),children:e(o,{})})]}),e(i.Content,{keepMounted:!0,className:d("grid w-max max-w-[calc(var(--available-width)-2px)] gap-1 [&[hidden]]:hidden",A[S]),style:N>1?{gridTemplateColumns:`repeat(${N}, minmax(0, 1fr))`}:void 0,children:F})]})})}export const PlNavigationMenu=/* @__PURE__ */n.forwardRef(function PlNavigationMenu({size:a,color:o,density:s,orientation:l="horizontal",value:p,defaultValue:c,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:y,style:v,children:b,...N},P){const M=r(),A=a??M.size??"md",L=o??M.color??"primary",R=s??M.density??"default",V=n.useMemo(()=>({size:A,density:R,orientation:l}),[A,R,l]),[I,O]=n.useState(c??null),T=void 0!==p?p:I,[W,q]=n.useState(T),[E,$]=n.useState(!1);W!==T&&(q(T),$(null!==T&&null!==W));const[D,_]=n.useState(null),[B,G]=n.useState(null),H=n.useRef(null),J=n.useCallback(()=>{const e=H.current;if(!D||!e||!B)return;const t=getComputedStyle(B),a=Number.parseFloat(t.width),n=Number.parseFloat(t.height);if(!(a>0&&n>0))return;const r=getComputedStyle(e),i=Number.parseFloat(r.borderLeftWidth)+Number.parseFloat(r.borderRightWidth),o=Number.parseFloat(r.borderTopWidth)+Number.parseFloat(r.borderBottomWidth);D.style.setProperty("--p-panel-w",`${a+i}px`),D.style.setProperty("--p-panel-h",`${n+o}px`)},[D,B]);return n.useLayoutEffect(()=>{null!==T&&J()},[T,J]),n.useEffect(()=>{if(!B||"undefined"==typeof ResizeObserver)return;let e=0;const t=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(J)});return t.observe(B),()=>{cancelAnimationFrame(e),t.disconnect()}},[B,J]),n.useEffect(()=>{const e=H.current;if(!E||!D||!e)return;const t=[D,e];let a=0;const settle=()=>{for(const e of t)getComputedStyle(e).getPropertyValue("width");t.some(e=>e.getAnimations().some(e=>e instanceof CSSTransition&&k.has(e.transitionProperty)&&"finished"!==e.playState))?a=requestAnimationFrame(settle):$(!1)};return a=requestAnimationFrame(settle),()=>{cancelAnimationFrame(a)}},[E,D]),e(j.Provider,{value:V,children:t(i.Root,{ref:P,orientation:l,value:p,defaultValue:c,onValueChange:e=>{void 0===p&&O(e),u?.(e)},delay:m,closeDelay:h,className:y,style:{...w(L,3),...v},...N,children:[e(i.List,{className:d("m-0 flex list-none items-center p-0","vertical"===l?"flex-col items-stretch":"flex-row",f[A]),children:b}),e(i.Portal,{keepMounted:!0,children:e(i.Positioner,{ref:_,className:d(C,E?S:"[transition-property:none]"),side:"vertical"===l?"inline-end":"bottom",align:"vertical"===l?"start":"center",sideOffset:g,collisionPadding:12,children:e(i.Popup,{ref:H,className:d(F,E?z:"[transition-property:opacity]",x[A]),children:e(i.Viewport,{ref:G,className:"w-max"})})})})]})})});

package/dist/components/number-field/PlNumberField.d.ts

@@ -99,13 +99,15 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
     decrementLabel?: string;
     /**
      * The name of what the field holds, wired to the control by Base UI's Field.
-     * `labelPlacement` decides whether it sits above the box or in its top edge.
-     * There is still no floating variant on purpose: a floating label needs a
-     * `transform` on the thing being typed into, and the notch does not move.
+     * `labelPlacement` decides whether it sits above the box, in its top edge, or
+     * inside it until the field is focused or filled.
      */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the control, or in its top edge.
+     * Where the `label` goes — above the control, in its top edge, or inside it
+     * where the number would be written until the field is focused or filled.
+     * With a `startIcon` or `split` steppers a `float` label stays in the edge,
+     * because that is where it would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */
@@ -149,4 +151,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
  * submits with a form.
  */
-export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
+export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled: disabledProp, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;