plass-ui 1.5.0 → 1.7.0

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/list/PlList.js

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

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("flex items-center","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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -98,10 +98,20 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
      */
     decrementLabel?: string;
     /**
-     * Label above the control, wired to it by Base UI's Field. There is no
-     * floating variant on purpose: floating labels need a `transform`.
+     * The name of what the field holds, wired to the control by Base UI's Field.
+     * `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, 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'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below the control. */
     description?: React.ReactNode;
     /** Error message below the control. Its presence also turns the field invalid. */
@@ -141,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, 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;

package/dist/components/number-field/PlNumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MinusIcon as r,PlusIcon as i}from"../../internal/icons.js";import{hotKeyHandler as o}from"../../internal/keys.js";import{controlHeightClasses as c,controlTextLeadingClasses as d,cx as m,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as f,focusRingClasses as h,focusWithinRingClasses as b,gapClasses as x,hasContent as g,iconClasses as v,metaTextClasses as N,paddingXClasses as y,radiusClasses as j,stackGapClasses as w,surfaceSlots as k,transitionClasses as S}from"../../internal/styles.js";const _=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",S,"focus-within:[transition-duration:0ms]",b,v].join(" "),V=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",h,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:h="glass",size:b,color:v,density:S,elevation:z=0,value:C,defaultValue:I,onValueChange:O,onValueCommitted:B,min:D,max:L,step:W,largeStep:q,smallStep:F,snapOnStep:K,allowWheelScrub:R=!1,format:E,locale:G,steppers:P="end",incrementLabel:$,decrementLabel:A,label:H,description:J,error:M,invalid:Q,startIcon:T,endIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:le,placeholder:ae,id:te,className:se,hotKeys:ne,classNames:re,style:ie,...oe}){const ce=a(),de=t(),me=$??de.increase,pe=A??de.decrease,ue=G??ce.locale,fe=b??ce.size??"md",he=v??ce.color??"primary",be=S??ce.density??"default",xe=g(M),ge=Q??xe,ve=ge?"danger":he,Ne=y[be][fe],ye={end:`${Ne} pe-1`,split:"px-1",none:Ne},je=e(s.Decrement,{"aria-label":pe,className:V,children:e(r,{})}),we=e(s.Increment,{"aria-label":me,className:V,children:e(i,{})}),ke="none"!==P&&!Z;return l(n.Root,{disabled:Y,invalid:ge,className:["flex-col align-top",w[fe],X?"flex w-full":"inline-flex",se??""].filter(Boolean).join(" "),style:{...k(ve,z),...ie},...oe,children:[H?e(n.Label,{className:m(N[fe],"font-medium text-(--plass-fg)",Y?"opacity-50":"",re?.label),children:H}):null,e(s.Root,{id:te,name:le,className:"contents",value:C,defaultValue:I,onValueChange:e=>O?.(e),onValueCommitted:e=>B?.(e),min:D,max:L,step:W,largeStep:q,smallStep:F,snapOnStep:K,allowWheelScrub:R,format:E,locale:ue,disabled:Y,readOnly:Z,required:ee,children:l(s.Group,{className:[_,c[fe],d[fe],j[fe],x[fe],ke?ye[P]:Ne,Y?p[h]:Z?u[h]:f[h],re?.control].filter(Boolean).join(" "),children:[ke&&"split"===P?je:null,T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:T}):null,e(s.Input,{placeholder:ae,onKeyDown:o(ne,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===P&&ke?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,ke&&"end"===P?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[je,we]}):null,ke&&"split"===P?we:null]})}),J?e(n.Description,{className:m(N[fe],"text-(--plass-muted-fg)",re?.description),children:J}):null,e(n.Error,xe?{match:!0,className:m(N[fe],"text-(--p-accent)",re?.error),children:M}:{className:m(N[fe],"text-(--p-accent)",re?.error)})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as a}from"../../internal/defaults.js";import{ownsPress as n}from"../../internal/focusable.js";import{useLabels as r}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as i}from"@base-ui/react/field";import{MinusIcon as o,PlusIcon as c}from"../../internal/icons.js";import{hotKeyHandler as d}from"../../internal/keys.js";import{useFieldLight as m}from"../../internal/glow.js";import{FieldNotch as p,floatControlClassName as u,notchShellStyle as f,resolveNotch as h}from"../../internal/notch.js";import{controlHeightClasses as b,controlTextLeadingClasses as g,cx as x,disabledClasses as v,fieldDescriptionClasses as y,fieldReadOnlyClasses as j,fieldRestClasses as N,fieldSlots as w,focusRingClasses as k,focusWithinRingClasses as S,gapClasses as _,hasContent as V,iconClasses as z,metaTextClasses as D,paddingXClasses as O,radiusClasses as C,stackGapClasses as I,transitionClasses as P}from"../../internal/styles.js";const q=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",P,z].join(" "),B=S,L=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) enabled:hover:text-(--p-accent)","active:bg-(--p-soft-press)",k,"disabled:cursor-not-allowed disabled:bg-transparent"].join(" ");export function PlNumberField({variant:k="glass",size:S,color:z,density:P,elevation:W=0,value:F,defaultValue:K,onValueChange:R,onValueCommitted:T,min:E,max:G,step:$,largeStep:A,smallStep:H,snapOnStep:J,allowWheelScrub:M=!1,format:Q,locale:U,steppers:X="end",incrementLabel:Y,decrementLabel:Z,label:ee,labelPlacement:le,description:te,error:ae,invalid:ne,startIcon:re,endIcon:se,fullWidth:ie=!1,disabled:oe=!1,readOnly:ce=!1,required:de=!1,name:me,placeholder:pe,id:ue,className:fe,hotKeys:he,classNames:be,style:ge,...xe}){const ve=a(),ye=t(oe),je=r(),Ne=Y??je.increase,we=Z??je.decrease,ke=U??ve.locale,Se=S??ve.size??"md",_e=z??ve.color??"primary",Ve=P??ve.density??"default",ze=le??ve.labelPlacement??"top",De="none"!==X&&!ce,{notched:Oe,float:Ce}=h(ze,ee,V(re)||De&&"split"===X),Ie=V(ae),Pe=ne??Ie,qe=Pe?"danger":_e,Be=!ye&&!ce,Le=m(Be),We=O[Ve][Se],Fe={end:`${We} pe-1`,split:"px-1",none:We},Ke=x(L,!ye&&"disabled:opacity-50"),Re=e(s.Decrement,{"aria-label":we,className:Ke,children:e(o,{})}),Te=e(s.Increment,{"aria-label":Ne,className:Ke,children:e(c,{})}),Ee=e(i.Label,{className:x(D[Se],"font-semibold",ye?"text-(--plass-muted-fg)":"text-(--plass-fg)",be?.label),children:ee});return l(i.Root,{disabled:ye,invalid:Pe,className:["flex-col align-top",I[Se],ie?"flex w-full":"inline-flex",fe??""].filter(Boolean).join(" "),style:{...w(qe,W),...ge},...xe,children:[V(ee)&&!Oe?Ee:null,e(s.Root,{id:ue,name:me,className:"contents",value:F,defaultValue:K,onValueChange:e=>R?.(e),onValueCommitted:e=>T?.(e),min:E,max:G,step:$,largeStep:A,smallStep:H,snapOnStep:J,allowWheelScrub:M,format:Q,locale:ke,disabled:ye,readOnly:ce,required:de,children:e(p,{notched:Oe,size:Se,density:Ve,variant:k,disabled:ye,readOnly:ce,float:Ce,label:Ee,children:l(s.Group,{style:Oe?f:void 0,...Le,onPointerDown:e=>{const l=e.currentTarget.querySelector('input:not([type="hidden"])');ye||n(e.target,e.currentTarget,l)||(e.preventDefault(),l?.focus())},className:[q,Oe?"":B,b[Se],g[Se],C[Se],_[Se],De?Fe[X]:We,ye?v[k]:ce?j[k]:N[k],Be?"plass-glow":"",be?.control].filter(Boolean).join(" "),children:[De&&"split"===X?Re:null,re?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:re}):null,e(s.Input,{placeholder:Ce?pe||" ":pe,onKeyDown:d(he,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===X&&De?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",Ce?u:""].filter(Boolean).join(" ")}),se?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:se}):null,De&&"end"===X?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[Re,Te]}):null,De&&"split"===X?Te:null]})})}),te?e(i.Description,{className:x(y(Se),be?.description),children:te}):null,e(i.Error,Ie?{match:!0,className:x(D[Se],"text-(--p-accent)",be?.error),children:ae}:{className:x(D[Se],"text-(--p-accent)",be?.error)})]})}

package/dist/components/otp-field/PlOtpField.d.ts

@@ -54,7 +54,15 @@ export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPr
     onValueInvalid?: (value: string) => void;
     /** Submits the owning form as soon as the code is complete. @default false */
     autoSubmit?: boolean;
-    /** Label above the row, wired to the slots by Base UI's Field. */
+    /**
+     * The name of the code, above the row and wired to the slots by Base UI's
+     * Field.
+     *
+     * Above it and nowhere else: this is the one labelled field in the library
+     * that takes no `labelPlacement`, because a notch is a segment taken out of
+     * one continuous edge and a row of separate boxes has none. It keeps the
+     * label above the row under a `PlassProvider` that notches every other field.
+     */
     label?: React.ReactNode;
     /** Helper text below the row. */
     description?: React.ReactNode;

package/dist/components/otp-field/PlOtpField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Field as n}from"@base-ui/react/field";import{OTPField as s}from"@base-ui/react/otp-field";import{hotKeyHandler as o}from"../../internal/keys.js";import{cx as i,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as c,hasContent as u,metaTextClasses as p,stackGapClasses as f,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const g={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},b={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},v={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={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:$="glass",size:j,color:w,density:V,elevation:F=0,length:C=6,charset:I="numeric",mask:M=!1,groupSize:O,separator:S="–",value:k,defaultValue:z,onValueChange:R,onComplete:q,onValueInvalid:A,autoSubmit:D=!1,label:K,description:L,error:P,invalid:_,name:E,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,slotLabel:J,className:Q,hotKeys:U,classNames:W,style:X,...Y},Z){const ee=t(),ae=r(),le=J??ae.otpSlot,te=l.useId(),re=j??ee.size??"md",ne=w??ee.color??"primary",se=V??ee.density??"default",oe=Math.min(12,Math.max(2,Math.round(C))),ie=u(P),me=_??ie,de=me?"danger":ne,ce=i("text-center font-medium [font-family:inherit]",g[re],y[re],b[re],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?m[$]:G?d[$]:c[$]),ue=O&&O>0?Math.round(O):0;return a(n.Root,{disabled:B,invalid:me,className:i("inline-flex flex-col align-top",f[re],Q),style:{...h(de,F),...X},children:[u(K)?e(n.Label,{className:i(p[re],"font-medium",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",W?.label),children:e("span",{id:`${te}-label`,children:K})}):null,e(s.Root,{ref:Z,onKeyDown:o(U,void 0),length:oe,validationType:N[I],mask:M,name:E,required:T,disabled:B,readOnly:G,autoSubmit:D,value:k,defaultValue:z,onValueChange:e=>R?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>A?.(e),className:i("flex items-center",v[se][re],W?.control),...Y,children:Array.from({length:oe},(t,r)=>a(l.Fragment,{children:[ue>0&&r>0&&r%ue===0?e("span",{"aria-hidden":"true",className:i("select-none px-0.5 text-(--plass-muted-fg)",y[re]),children:S}):null,e(s.Input,{className:ce,autoFocus:H&&0===r,"aria-labelledby":u(K)?`${te}-label ${te}-${r}`:`${te}-${r}`})]},r))}),Array.from({length:oe},(a,l)=>e("span",{id:`${te}-${l}`,hidden:!0,children:le(l+1,oe)},l)),u(L)?e(n.Description,{className:i(p[re],"text-(--plass-muted-fg)",W?.description),children:L}):null,e(n.Error,ie?{match:!0,className:i(p[re],"text-(--p-accent)",W?.error),children:P}:{className:i(p[re],"text-(--p-accent)",W?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{Field as s}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{hotKeyHandler as i}from"../../internal/keys.js";import{cx as m,disabledClasses as d,fieldDescriptionClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as p,hasContent as f,metaTextClasses as h,stackGapClasses as x,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const y={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},v={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},N={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},$={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:w="glass",size:V,color:F,density:C,elevation:I=0,length:M=6,charset:O="numeric",mask:S=!1,groupSize:k,separator:z="–",value:R,defaultValue:q,onValueChange:A,onComplete:D,onValueInvalid:K,autoSubmit:L=!1,label:P,description:_,error:E,invalid:T,name:B,required:G=!1,disabled:H=!1,readOnly:J=!1,autoFocus:Q=!1,slotLabel:U,className:W,hotKeys:X,classNames:Y,style:Z,...ee},ae){const le=r(),te=t(H),re=n(),ne=U??re.otpSlot,se=l.useId(),oe=V??le.size??"md",ie=F??le.color??"primary",me=C??le.density??"default",de=Math.min(12,Math.max(2,Math.round(M))),ce=f(E),ue=T??ce,pe=ue?"danger":ie,fe=m("text-center font-medium [font-family:inherit]",y[oe],N[oe],v[oe],b,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]",te?d[w]:J?u[w]:p[w]),he=k&&k>0?Math.round(k):0;return a(s.Root,{disabled:te,invalid:ue,className:m("inline-flex flex-col align-top",x[oe],W),style:{...g(pe,I),...Z},children:[f(P)?e(s.Label,{className:m(h[oe],"font-semibold",te?"text-(--plass-muted-fg)":"text-(--plass-fg)",Y?.label),children:e("span",{id:`${se}-label`,children:P})}):null,e(o.Root,{ref:ae,onKeyDown:i(X,void 0),length:de,validationType:$[O],mask:S,name:B,required:G,disabled:te,readOnly:J,autoSubmit:L,value:R,defaultValue:q,onValueChange:e=>A?.(e),onValueComplete:e=>D?.(e),onValueInvalid:e=>K?.(e),className:m("flex items-center",j[me][oe],Y?.control),...ee,children:Array.from({length:de},(t,r)=>a(l.Fragment,{children:[he>0&&r>0&&r%he===0?e("span",{"aria-hidden":"true",className:m("select-none px-0.5 text-(--plass-muted-fg)",N[oe]),children:z}):null,e(o.Input,{className:fe,autoFocus:Q&&0===r,"aria-labelledby":f(P)?`${se}-label ${se}-${r}`:`${se}-${r}`})]},r))}),Array.from({length:de},(a,l)=>e("span",{id:`${se}-${l}`,hidden:!0,children:ne(l+1,de)},l)),f(_)?e(s.Description,{className:m(c(oe),Y?.description),children:_}):null,e(s.Error,ce?{match:!0,className:m(h[oe],"text-(--p-accent)",Y?.error),children:E}:{className:m(h[oe],"text-(--p-accent)",Y?.error)})]})});

package/dist/components/overlay/PlOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:b="scrim",dismissible:u=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[b],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:u="scrim",dismissible:b=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!b,onOpenChange:(e,a)=>{b||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[u],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}

package/dist/components/page-layout/PlPageLayout.d.ts

@@ -28,13 +28,17 @@ export interface PlPageLayoutProps extends React.ComponentPropsWithoutRef<'div'>
      * - `content` — the sidebars run the full height of the window and the header
      *   sits between them, belonging to the view rather than to the site. The
      *   arrangement of an application.
+     *
+     * A `fixed` header spans the window whatever this says, so the sidebars
+     * start below it; a header meant to sit between them is `sticky`.
      * @default 'full'
      */
     headerSpan?: PlPageLayoutSpan;
     /**
      * The same question for the footer, and it is worth answering separately: a
      * dashboard with a full-height navigation rail still usually wants its
-     * copyright line under the content rather than under the rail.
+     * copyright line under the content rather than under the rail. A `fixed`
+     * footer spans the window whatever this says, so the sidebars end above it.
      * @default 'full'
      */
     footerSpan?: PlPageLayoutSpan;
@@ -95,17 +99,24 @@ export interface PlPageLayoutProps extends React.ComponentPropsWithoutRef<'div'>
      * to walk past all forty on every page before reaching the article, and this
      * is the one link that spares them. It costs a sighted reader nothing,
      * because it is invisible until it is tabbed to.
+     *
+     * Never drawn by a layout inside another `PlPageLayout`, whose content is a
+     * `<div>` rather than a second `<main>`: the page has one of each already.
      * @default true
      */
     skipLink?: boolean;
     /** What that link says. @default 'Skip to content' */
     skipLabel?: React.ReactNode;
     /**
-     * The `id` the skip link jumps to, put on the `<main>`.
+     * The `id` the skip link jumps to, put on the `<main>`. Not put anywhere by
+     * a layout inside another, which has neither.
      * @default 'main'
      */
     mainId?: string;
-    /** Anything else the `<main>` needs — a `className`, an `aria-label`. */
+    /**
+     * Anything else the `<main>` needs — a `className`, an `aria-label`. Inside
+     * another layout it goes on the `<div>` that takes the `<main>`'s place.
+     */
     mainProps?: Omit<React.ComponentPropsWithoutRef<'main'>, 'id' | 'children'>;
     /** The colour family the skip link lights up in. @default 'primary' */
     color?: PlassColor;

package/dist/components/page-layout/PlPageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const d=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:f,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:R,color:z,className:L,style:E,children:M,...B},H){const _=t(),I=n(),T=N??I.skipToContent,q=z??_.color??"primary",[A,D]=o.useState(P),[F,G]=o.useState(C),J=o.useMemo(()=>({start:w??A,end:S??F}),[w,A,S,F]),K=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&D(l),void k?.(l);void 0===S&&G(l),O?.(l)},[w,S,k,O]),Q=o.useRef(null),U=o.useCallback(e=>{Q.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),V=o.useRef({header:null,footer:null}),W=o.useRef(null),X=o.useCallback(()=>{const e=Q.current;if(e)for(const l of d){const o=V.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[v,x]),Y=o.useCallback(()=>{const e=W.current;if(e){e.disconnect();for(const l of d){const o=V.current[l];o&&e.observe(o)}}X()},[X]);o.useEffect(()=>(W.current=new ResizeObserver(()=>X()),Y(),()=>{W.current?.disconnect(),W.current=null}),[X,Y]);const Z=o.useCallback((e,l)=>{V.current[e]=l,Y()},[Y]),ee=o.useMemo(()=>({present:!0,register:Z,collapseBelow:g,open:J,setOpen:K,scroll:y}),[Z,g,J,K,y]),le=o.useMemo(()=>({...ee,register:()=>{}}),[ee]),oe="content"===y,te=c("viewport"===b||"auto"===b?void 0:b),ne=void 0!==te?"":"auto"===b?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=u(f)?f:null,se=u(p)?p:null;return e(r.Provider,{value:ee,children:l("div",{ref:U,className:i("relative flex w-full flex-col",oe?"overflow-hidden":"",ne,"full"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",L),style:void 0===te?E:{...oe?{height:te}:{minHeight:te},...E},...B,children:[j?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(q,2,"solid"),children:T}):null,"full"===v?re:null,l("div",{className:i("flex w-full flex-1",oe?"min-h-0":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:i("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===v?re:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",R?.className),children:e(r.Provider,{value:le,children:M})}),"content"===x?se:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?se:null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as i,cx as a,hasContent as u,toLength as c}from"../../internal/styles.js";const d=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:f,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:z="main",mainProps:$,color:R,className:L,style:E,children:M,...B},H){const _=t(),I=n(),T=N??I.skipToContent,q=R??_.color??"primary",A=o.useContext(r).present,D=A?"div":"main",[F,G]=o.useState(P),[J,K]=o.useState(C),Q=o.useMemo(()=>({start:w??F,end:S??J}),[w,F,S,J]),U=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&G(l),void k?.(l);void 0===S&&K(l),O?.(l)},[w,S,k,O]),V=o.useRef(null),W=o.useCallback(e=>{V.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),X=o.useRef({header:null,footer:null}),Y=o.useRef(null),Z=o.useCallback(()=>{const e=V.current;if(e)for(const l of d){const o=X.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="fixed"===n;e.style.setProperty(`--p-layout-${l}`,s||"sticky"===n&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,s?r:"0px")}},[v,x]),ee=o.useCallback(()=>{const e=Y.current;if(e){e.disconnect();for(const l of d){const o=X.current[l];o&&e.observe(o)}}Z()},[Z]);o.useEffect(()=>(Y.current=new ResizeObserver(()=>Z()),ee(),()=>{Y.current?.disconnect(),Y.current=null}),[Z,ee]);const le=o.useCallback((e,l)=>{X.current[e]=l,ee()},[ee]),oe=o.useMemo(()=>({present:!0,register:le,collapseBelow:g,open:Q,setOpen:U,scroll:y}),[le,g,Q,U,y]),te=o.useMemo(()=>({...oe,register:()=>{}}),[oe]),ne="content"===y,re=c("viewport"===b||"auto"===b?void 0:b),se=void 0!==re?"":"auto"===b?ne?"h-full":"min-h-full":ne?"h-dvh":"min-h-dvh",ie=u(f)?f:null,ae=u(p)?p:null,ue=(u(m)||u(h))&&("content"===v&&null!==ie||"content"===x&&null!==ae);return e(r.Provider,{value:oe,children:l("div",{ref:W,className:a("relative flex w-full flex-col",ne?"overflow-hidden":"",se,"[padding-top:var(--p-layout-header-inset,0px)]","[padding-bottom:var(--p-layout-footer-inset,0px)]",L),style:void 0===re?E:{...ne?{height:re}:{minHeight:re},...E},...B,children:[j&&!A?e("a",{href:`#${z}`,className:a("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:i(q,2,"solid"),children:T}):null,"full"===v?ie:null,l("div",{className:a("flex w-full flex-1",ne?"min-h-0":"",ue?"z-1 [&>aside]:z-21":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:a("flex min-w-0 flex-1 flex-col",ne?"min-h-0":""),children:["content"===v?ie:null,e(D,{...$,id:A?void 0:z,className:a("min-w-0 flex-1",ne?"min-h-0 overflow-y-auto":"",$?.className),children:e(r.Provider,{value:te,children:M})}),"content"===x?ae:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?ae:null]})})});

package/dist/components/pagination/PlPagination.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PlButton as i}from"../button/PlButton.js";import{ChevronIcon as l}from"../../internal/icons.js";import{controlTextClasses as o,gapClasses as s,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,t)=>e+t)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const m={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */t.forwardRef(function PlPagination({variant:u="ghost",size:d,color:h,density:f,elevation:p=0,count:g,page:b,defaultPage:x=1,onPageChange:v,siblingCount:y=1,boundaryCount:M=1,showEdges:j=!1,showArrows:w=!0,disabled:L=!1,getPageHref:N,renderLink:P,label:C,pageLabel:k,previousLabel:D,nextLabel:I,firstLabel:z,lastLabel:K,statusLabel:B,className:$,children:A,...R},S){const W=n(),E=r(),F=C??E.pagination,H=D??E.paginationPrevious,q=I??E.paginationNext,G=z??E.paginationFirst,J=K??E.paginationLast,O=k??E.paginationPage,Q=B??E.paginationStatus,T=d??W.size??"md",U=h??W.color??"primary",V=f??W.density??"compact",[X,Y]=t.useState(x),Z=Math.min(Math.max(b??X,1),Math.max(g,1));if(g<2)return null;const _=function paginationRange(e,a,t,n){const r=range(1,Math.min(n,e)),i=range(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(a-t,e-n-2*t-1),n+2),o=Math.min(Math.max(a+t,n+2*t+2),i.length>0?i[0]-2:e-1);return[...r,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...i]}(g,Z,y,M),ee=Z<=1,ae=Z>=g,linkProps=(a,t,n)=>{if(!N||L)return null;if(t)return{render:e("a",{role:"link"}),"aria-disabled":!0,tabIndex:0};const r=N(a);return{render:P?P(a,r):e("a",{href:r}),rel:n}},press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||N&&!v||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),g);a!==Z&&(void 0===b&&Y(a),v?.(a))})(a))},stepper=(a,t,n,r,l,o,s)=>e("li",{className:"flex",children:e(i,{variant:u,size:T,color:U,density:V,elevation:p,disabled:L||r,focusableWhenDisabled:!L,"aria-label":t,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:e=>press(e,n),...linkProps(n,r,s)})},a);return a("nav",{ref:S,"aria-label":F,className:["flex items-center",$??""].filter(Boolean).join(" "),...R,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${s[T]}`,children:[j?stepper("first",G,1,ee,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,w?stepper("previous",H,Z-1,ee,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,_.map((a,t)=>e("li","number"==typeof a?{className:"flex",children:e(i,{variant:a===Z?"solid":u,size:T,color:U,density:V,elevation:p,disabled:L,"aria-label":O(a),"aria-current":a===Z?"page":void 0,className:"tabular-nums",onClick:e=>press(e,a),...linkProps(a,!1),children:a})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",o[T],m[T]].join(" "),children:"…"},`slot-${t}`)),w?stepper("next",q,Z+1,ae,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,j?stepper("last",J,g,ae,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:c,"aria-live":"polite",children:Q(Z,g)}),A]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{PlButton as l}from"../button/PlButton.js";import{ChevronIcon as o}from"../../internal/icons.js";import{controlTextClasses as s,gapClasses as m,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,n)=>e+n)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const u={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"},d={backgroundImage:"none"};export const PlPagination=/* @__PURE__ */n.forwardRef(function PlPagination({variant:h="ghost",size:f,color:p,density:g,elevation:b=0,count:x,page:v,defaultPage:y=1,onPageChange:j,siblingCount:M=1,boundaryCount:N=1,showEdges:w=!1,showArrows:L=!0,disabled:P=!1,getPageHref:k,renderLink:C,label:I,pageLabel:D,previousLabel:z,nextLabel:K,firstLabel:B,lastLabel:$,statusLabel:A,className:R,children:S,...W},E){const F=r(),H=t(P),q=i(),G=I??q.pagination,J=z??q.paginationPrevious,O=K??q.paginationNext,Q=B??q.paginationFirst,T=$??q.paginationLast,U=D??q.paginationPage,V=A??q.paginationStatus,X=f??F.size??"md",Y=p??F.color??"primary",Z=g??F.density??"compact",[_,ee]=n.useState(y),ae=Math.min(Math.max(v??_,1),Math.max(x,1));if(x<2)return null;const ne=function paginationRange(e,a,n,t){const r=range(1,Math.min(t,e)),i=range(Math.max(e-t+1,t+1),e),l=Math.max(Math.min(a-n,e-t-2*n-1),t+2),o=Math.min(Math.max(a+n,t+2*n+2),i.length>0?i[0]-2:e-1);return[...r,...l>t+2?["start-ellipsis"]:t+1<e-t?[t+1]:[],...range(l,o),...o<e-t-1?["end-ellipsis"]:e-t>t?[e-t]:[],...i]}(x,ae,M,N),te=ae<=1,re=ae>=x,linkProps=(a,n,t)=>{if(!k||H)return null;if(n)return{render:e("a",{role:"link"}),"aria-disabled":!0,tabIndex:0};const r=k(a);return{render:C?C(a,r):e("a",{href:r}),rel:t}},press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||k&&!j||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),x);a!==ae&&(void 0===v&&ee(a),j?.(a))})(a))},stepper=(a,n,t,r,i,o,s)=>e("li",{className:"flex",children:e(l,{variant:h,size:X,color:Y,density:Z,elevation:b,disabled:H||r,focusableWhenDisabled:!H,"aria-label":n,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,t),...linkProps(t,r,s)})},a);return a("nav",{ref:E,"aria-label":G,className:["flex items-center",R??""].filter(Boolean).join(" "),...W,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${m[X]}`,children:[w?stepper("first",Q,1,te,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,L?stepper("previous",J,ae-1,te,"rotate-90 rtl:-rotate-90",e(o,{}),"prev"):null,ne.map((n,t)=>e("li","number"==typeof n?{className:"flex",children:a(l,{variant:n===ae?"solid":h,size:X,color:Y,density:Z,elevation:b,disabled:H,"aria-label":U(n),"aria-current":n===ae?"page":void 0,className:n===ae||"solid"===h?"tabular-nums [--p-fill-on:1]":"tabular-nums",style:d,onClick:e=>press(e,n),...linkProps(n,!1),children:[e("span",{"aria-hidden":"true",className:"plass-fill-layer"}),n]})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",s[X],u[X]].join(" "),children:"…"},`slot-${t}`)),L?stepper("next",O,ae+1,re,"-rotate-90 rtl:rotate-90",e(o,{}),"next"):null,w?stepper("last",T,x,re,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:c,"aria-live":"polite",children:V(ae,x)}),S]})});