plass-ui 1.4.0 → 1.6.0

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;
@@ -75,6 +83,12 @@ export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPr
     readOnly?: boolean;
     /** Puts the caret in the first slot on mount. @default false */
     autoFocus?: boolean;
+    /**
+     * What each slot is called after the field's label, given its place in the
+     * row and the length. Never drawn.
+     * @default `Character {n} of {length}`, from the label pack
+     */
+    slotLabel?: (index: number, count: number) => string;
 }
 /**
  * A row of one-character slots: a PIN, a texted verification code, an invite

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{OTPField as n}from"@base-ui/react/otp-field";import{hotKeyHandler as s}from"../../internal/keys.js";import{cx as o,disabledClasses as i,fieldReadOnlyClasses as m,fieldRestClasses as d,hasContent as u,metaTextClasses as c,stackGapClasses as p,surfaceSlots as f,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"},h={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]"},b={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"}},v={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:N="glass",size:w,color:V,density:j,elevation:F=0,length:C=6,charset:M="numeric",mask:O=!1,groupSize:k,separator:z="–",value:I,defaultValue:R,onValueChange:S,onComplete:q,onValueInvalid:D,autoSubmit:K=!1,label:P,description:_,error:A,invalid:E,name:L,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,className:J,hotKeys:Q,classNames:U,style:W,...X},Y){const Z=l(),$=w??Z.size??"md",ee=V??Z.color??"primary",ae=j??Z.density??"default",te=Math.min(12,Math.max(2,Math.round(C))),le=u(A),re=E??le,ne=re?"danger":ee,se=o("text-center font-medium [font-family:inherit]",g[$],y[$],h[$],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?i[N]:G?m[N]:d[N]),oe=k&&k>0?Math.round(k):0;return a(r.Root,{disabled:B,invalid:re,className:o("inline-flex flex-col align-top",p[$],J),style:{...f(ne,F),...W},children:[u(P)?e(r.Label,{className:o(c[$],"font-medium",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",U?.label),children:P}):null,e(n.Root,{ref:Y,onKeyDown:s(Q,void 0),length:te,validationType:v[M],mask:O,name:L,required:T,disabled:B,readOnly:G,autoSubmit:K,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>D?.(e),className:o("flex items-center",b[ae][$],U?.control),...X,children:Array.from({length:te},(l,r)=>a(t.Fragment,{children:[oe>0&&r>0&&r%oe===0?e("span",{"aria-hidden":"true",className:o("select-none px-0.5 text-(--plass-muted-fg)",y[$]),children:z}):null,e(n.Input,{className:se,autoFocus:H&&0===r})]},r))}),u(_)?e(r.Description,{className:o(c[$],"text-(--plass-muted-fg)",U?.description),children:_}):null,e(r.Error,le?{match:!0,className:o(c[$],"text-(--p-accent)",U?.error),children:A}:{className:o(c[$],"text-(--p-accent)",U?.error)})]})});
+"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-semibold",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("m-0",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)})]})});

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 f=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,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:B,...H},M){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 M?M(e):M&&(M.current=e)},[M]),V=o.useRef({header:null,footer:null}),W=o.useRef(null),X=o.useCallback(()=>{const e=Q.current;if(e)for(const l of f){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 f){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="content"===y,oe=c("viewport"===b||"auto"===b?void 0:b),te=void 0!==oe?"":"auto"===b?le?"h-full":"min-h-full":le?"h-dvh":"min-h-dvh",ne=u(d)?d:null,re=u(p)?p:null;return e(r.Provider,{value:ee,children:l("div",{ref:U,className:i("relative flex w-full flex-col",le?"overflow-hidden":"",te,"full"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",L),style:void 0===oe?E:{...le?{height:oe}:{minHeight:oe},...E},...H,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?ne:null,l("div",{className:i("flex w-full flex-1",le?"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",le?"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?ne:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",le?"min-h-0 overflow-y-auto":"",R?.className),children:B}),"content"===x?re:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?re: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 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]})})});

package/dist/components/pagination/PlPagination.d.ts

@@ -43,9 +43,10 @@ export interface PlPaginationProps extends PlassStyleProps, Omit<React.Component
      * press is going before making it.
      *
      * `onPageChange` still fires and the press is still cancelled first, so a
-     * client-side router keeps the page it already has. A link with nowhere to go
-     * — the current page, a stepper at the end of the row — stays a `<button>`,
-     * because `disabled` is not something an `<a>` can be.
+     * client-side router keeps the page it already has. The current page stays a
+     * link, marked `aria-current`, and a stepper at the end of the row stays an
+     * `<a>` with no address, marked `aria-disabled`: a pressed control that turned
+     * into a different element would take the reader's focus with it.
      */
     getPageHref?: (page: number) => string;
     /**
@@ -74,19 +75,21 @@ export interface PlPaginationProps extends PlassStyleProps, Omit<React.Component
     /**
      * The accessible names, none of which is ever drawn.
      *
-     * They are props rather than being read from a message catalogue for the same
-     * reason `PlTable` takes its `empty` line as one: a library that shipped
-     * translations would have to be told which language a page is in, and the page
-     * already knows.
+     * Left out, each one is read from the label pack a `PlassProvider` set, so a
+     * translated application passes none of them. Given, a prop wins over the
+     * pack for this one pager.
      */
     label?: string;
-    /** Accessible name of a page button. @default `Page {n}` */
+    /** Accessible name of a page button. @default `Page {n}`, from the label pack */
     pageLabel?: (page: number) => string;
     previousLabel?: string;
     nextLabel?: string;
     firstLabel?: string;
     lastLabel?: string;
-    /** The live-region sentence a screen reader hears when the page changes. */
+    /**
+     * The live-region sentence a screen reader hears when the page changes.
+     * @default `Page {n} of {total}`, from the label pack
+     */
     statusLabel?: (page: number, count: number) => string;
 }
 /**

package/dist/components/pagination/PlPagination.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a 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 m}from"../../internal/styles.js";function range(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}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 c={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__ */a.forwardRef(function PlPagination({variant:u="ghost",size:d,color:h,density:f,elevation:p=0,count:g,page:x,defaultPage:b=1,onPageChange:v,siblingCount:y=1,boundaryCount:M=1,showEdges:j=!1,showArrows:P=!0,disabled:w=!1,getPageHref:L,renderLink:N,label:C,pageLabel:k=e=>`Page ${e}`,previousLabel:$,nextLabel:z,firstLabel:D,lastLabel:I,statusLabel:K=(e,t)=>`Page ${e} of ${t}`,className:B,children:A,...R},E){const F=n(),H=r(),S=C??H.pagination,W=$??H.paginationPrevious,q=z??H.paginationNext,G=D??H.paginationFirst,J=I??H.paginationLast,O=d??F.size??"md",Q=h??F.color??"primary",T=f??F.density??"compact",[U,V]=a.useState(b),X=Math.min(Math.max(x??U,1),Math.max(g,1));if(g<2)return null;const Y=function paginationRange(e,t,a,n){const r=range(1,Math.min(n,e)),i=range(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+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,X,y,M),Z=X<=1,_=X>=g,linkProps=(t,a,n)=>{if(!L||a)return null;const r=L(t);return{render:N?N(t,r):e("a",{href:r}),rel:n}},press=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||L&&!v||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),g);t!==X&&(void 0===x&&V(t),v?.(t))})(t))},stepper=(t,a,n,r,l,o,s)=>e("li",{className:"flex",children:e(i,{variant:u,size:O,color:Q,density:T,elevation:p,disabled:w||r,"aria-label":a,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:e=>press(e,n),...linkProps(n,w||r,s)})},t);return t("nav",{ref:E,"aria-label":S,className:["flex items-center",B??""].filter(Boolean).join(" "),...R,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${s[O]}`,children:[j?stepper("first",G,1,Z,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,P?stepper("previous",W,X-1,Z,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,Y.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(i,{variant:t===X?"solid":u,size:O,color:Q,density:T,elevation:p,disabled:w,"aria-label":k(t),"aria-current":t===X?"page":void 0,className:"tabular-nums",onClick:e=>press(e,t),...linkProps(t,w||t===X),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",o[O],c[O]].join(" "),children:"…"},`slot-${a}`)),P?stepper("next",q,X+1,_,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,j?stepper("last",J,g,_,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:m,"aria-live":"polite",children:K(X,g)}),A]})});
+"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]})});

package/dist/components/panes/PlPanes.d.ts

@@ -32,6 +32,11 @@ export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     onResize?: (sizes: number[]) => void;
     /** Fires once, with the same shape, when the handle is let go. */
     onResizeEnd?: (sizes: number[]) => void;
+    /**
+     * What a screen reader calls a handle, before the share it is at. Without one,
+     * every handle of a split is read only as "separator" and a number.
+     */
+    label?: string;
     /** The panes. Anything that is not a `PlPane` is still laid out, but has no size. */
     children?: React.ReactNode;
 }

package/dist/components/panes/PlPanes.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{cx as i,transitionClasses as o}from"../../internal/styles.js";import{useResponsiveValue as s}from"../../internal/responsive.js";const a=/* @__PURE__ */r.createContext({basis:null}),l={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},c={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:u,resizable:d=!0,color:m,size:p,onResize:f,onResizeEnd:g,className:h,style:v,children:x,...b},y){const w=s(u,"horizontal"),z=n(),P=m??z.color??"primary",S=p??z.size??"md",R=r.Children.toArray(x).filter(r.isValidElement),C=R.length,E=r.useRef(null),k=r.useCallback(e=>{E.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),N=r.useRef([]);N.current=R.map(e=>e.props);const[M,j]=r.useState(null),L=M&&M.length===C?M:null,$=r.useRef(null);$.current=L;const A="horizontal"===w,D=c[S]*Math.max(0,C-1);function grip(e){const t=E.current,r=$.current;if(!d||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=(A?n.width:n.height)-D;if(i<=0)return null;const o=N.current[e],s=N.current[e+1],a=r[e]*i,l=a+r[e+1]*i,c=Math.max(toPixels(o?.minSize,i,t)??0,l-(toPixels(s?.maxSize,i,t)??l)),u=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return u<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(u,Math.max(c,a+t)),o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,j(o),f?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=E.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=(A?t.width:t.height)-D;r<=0||j(t=>t&&t.length===C?t:function initialFractions(e,t,r){const n=e.map(e=>toPixels(e.defaultSize,t,r)),i=n.reduce((e,t)=>e+(t??0),0),o=n.filter(e=>void 0===e).length,s=o>0?Math.max(0,t-i)/o:0,a=n.map(e=>Math.max(0,e??s)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(N.current,r,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[C,A,D]);const F=r.useRef(null);r.useEffect(()=>()=>F.current?.(),[]);const B=i("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",l[S],o,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",d?i(A?"cursor-col-resize":"cursor-row-resize","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:k,className:i("flex h-full w-full",A?"flex-row":"flex-col","min-h-0 min-w-0",h),style:{"--p-accent":`var(--plass-${P}-accent)`,"--p-soft":`var(--plass-${P}-soft)`,"--p-ring":`var(--plass-${P}-ring)`,...v},...b,children:R.map((n,s)=>t(r.Fragment,{children:[s>0?e("div",{role:"separator","aria-orientation":A?"vertical":"horizontal","aria-valuenow":L?Math.round(100*L[s-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,tabIndex:d?0:-1,className:B,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=t.currentTarget;n.setPointerCapture(t.pointerId),n.dataset.dragging="true";const i=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=A?t.clientX:t.clientY,s=A&&"rtl"===getComputedStyle(r.root).direction?-1:1;let a=r.current;const move=e=>{const t=A?e.clientX:e.clientY;a=r.resize((t-o)*s)},release=()=>{F.current=null,n.removeEventListener("pointermove",move),n.removeEventListener("pointerup",end),n.removeEventListener("pointercancel",end),delete n.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),g?.(a.map(e=>100*e))};F.current=release,n.addEventListener("pointermove",move),n.addEventListener("pointerup",end),n.addEventListener("pointercancel",end)}(s-1,e)},onKeyDown:e=>{const t=A?"ArrowLeft":"ArrowUp",r=A?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=A&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===r?16:-16;!function nudge(e,t){const r=grip(e);if(!r)return;const n=r.resize(t);g?.(n.map(e=>100*e))}(s-1,i*n)},children:e("span",{"aria-hidden":"true",className:i("pointer-events-none bg-(--plass-border)",o,A?"h-full w-px":"h-px w-full",d?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(a.Provider,{value:{basis:L?`calc((100% - ${D}px) * ${L[s].toFixed(6)})`:null},children:n})]},n.key??s))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:o,className:s,style:l,children:c,...u},d){const{basis:m}=r.useContext(a);return e("div",{ref:d,className:i("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{cx as o,transitionClasses as s}from"../../internal/styles.js";import{useResponsiveValue as a}from"../../internal/responsive.js";const l=/* @__PURE__ */r.createContext({basis:null,id:void 0}),c={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:d,resizable:m=!0,color:f,size:p,onResize:g,onResizeEnd:h,label:x,className:v,style:b,children:z,...w},y){const P=a(d,"horizontal"),S=n(),R=f??S.color??"primary",C=p??S.size??"md",M=r.Children.toArray(z).filter(r.isValidElement),N=M.length,$=r.useId(),paneId=e=>M[e]?.props.id??`${$}-pane-${e}`,j=r.useRef(null),k=r.useCallback(e=>{j.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),E=r.useRef([]);E.current=M.map(e=>e.props);const[A,D]=r.useState(null),F=A&&A.length===N?A:null,I=r.useRef(null);I.current=F;const B="horizontal"===P,T=u[C]*Math.max(0,N-1);function grip(e){const t=j.current,r=I.current;if(!m||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=(B?n.width:n.height)-T;if(i<=0)return null;const o=E.current[e],s=E.current[e+1],a=r[e]*i,l=a+r[e+1]*i,c=Math.max(toPixels(o?.minSize,i,t)??0,l-(toPixels(s?.maxSize,i,t)??l)),u=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return u<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(u,Math.max(c,a+t)),o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,D(o),g?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=j.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=(B?t.width:t.height)-T;r<=0||D(t=>t&&t.length===N?t:function initialFractions(e,t,r){const n=e.map(e=>toPixels(e.defaultSize,t,r)),i=n.reduce((e,t)=>e+(t??0),0),o=n.filter(e=>void 0===e).length,s=o>0?Math.max(0,t-i)/o:0,a=n.map(e=>Math.max(0,e??s)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(E.current,r,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[N,B,T]);const X=r.useRef(null);r.useEffect(()=>()=>X.current?.(),[]);const Y=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",c[C],s,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",m?o(B?"cursor-col-resize":"cursor-row-resize","touch-none","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:k,className:o("flex h-full w-full",B?"flex-row":"flex-col","min-h-0 min-w-0",v),style:{"--p-accent":`var(--plass-${R}-accent)`,"--p-soft":`var(--plass-${R}-soft)`,"--p-ring":`var(--plass-${R}-ring)`,...b},...w,children:M.map((n,a)=>t(r.Fragment,{children:[a>0?e("div",{role:"separator","aria-label":x,"aria-controls":paneId(a-1),"aria-orientation":B?"vertical":"horizontal","aria-valuenow":F?Math.round(100*F[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!m||void 0,tabIndex:m?0:-1,className:Y,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=B?t.clientX:t.clientY,o=B&&"rtl"===getComputedStyle(r.root).direction?-1:1;let s=r.current;const a=i({target:t.currentTarget,pointerId:t.pointerId,onMove:e=>{const t=B?e.clientX:e.clientY;s=r.resize((t-n)*o)},onEnd:()=>{X.current=null,h?.(s.map(e=>100*e))}});X.current=a}(a-1,e)},onKeyDown:e=>{const t=B?"ArrowLeft":"ArrowUp",r=B?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=B&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===r?16:-16;!function nudge(e,t){const r=grip(e);if(!r)return;const n=r.resize(t);h?.(n.map(e=>100*e))}(a-1,i*n)},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--plass-border)",s,B?"h-full w-px":"h-px w-full",m?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(l.Provider,{value:{basis:F?`calc((100% - ${T}px) * ${F[a].toFixed(6)})`:null,id:paneId(a)},children:n})]},n.key??a))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:i,className:s,style:a,children:c,...u},d){const{basis:m,id:f}=r.useContext(l);return e("div",{ref:d,id:f,className:o("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...a},...u,children:c})});

package/dist/components/pie-chart/PlPieChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartDataTable as a,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,formatCategory as f,markGap as p,plotHeights as x,seriesColor as b,toValue as g}from"../../internal/chart.js";import{useDefaults as y}from"../../internal/defaults.js";import{numberFormatter as M}from"../../internal/format.js";import{useLabels as j}from"../../internal/labels.js";import{cx as N,metaTextClasses as w}from"../../internal/styles.js";const I={pie:0,donut:.62,semi:.62};export function PlPieChart({data:P,categories:z,shape:k="pie",startAngle:A=0,center:S,valueLabels:$="none",height:L,format:B,locale:E,label:R,legend:C,tooltip:D,empty:O,size:_,variant:K="ghost",padded:V=!1,className:W,...q}){const F=y(),G=_??F.size??"md",H=E??F.locale,J=l.useRef(null),Q=d(J),T=j(),U=l.useId(),X=l.useCallback(e=>B?M(H,B).format(e):v(e,H),[B,H]),Y=l.useMemo(()=>P.map(g),[P]),Z=l.useMemo(()=>Y.map((e,t)=>({name:f(c(t,z,[Y]),H),data:[P[t]],color:e.color})),[Y,z,P,H]),ee=u(Z),[te,le]=l.useState(null),ae=Z.map((e,t)=>b(e,t)),ne=Y.reduce((e,t,l)=>ee.visible[l]&&null!==t.value?e+Math.abs(t.value):e,0),ie="semi"===k,re="number"==typeof L?L:x[G],se=h[G],oe=!1===C?{interactive:!1}:!0===C||void 0===C?{}:C,de=!1!==C&&Z.length>1,ue=oe.side??"bottom",me=!1===D?{mode:"none"}:!0===D||void 0===D?{}:D,ce="none"===me.mode,he=Q/2,ve=Math.max(0,Math.min(Q/2,ie?re:re/2)-2),fe=ie?Math.min(re,re/2+ve/2):re/2,pe=ve*I[k],xe=ne<=0||ve<=0,be=ve>0?Math.min(4,p/ve*(180/Math.PI)):0,ge=ie?180:360,ye=[];let Me=ie?-90:A;Y.forEach((e,t)=>{if(!ee.visible[t]||null===e.value||0===e.value)return;const l=Math.abs(e.value)/ne,a=l*ge;ye.push({index:t,start:Me,end:Me+a,value:e.value,share:l}),Me+=a});const je=null===te?[]:[{seriesIndex:te,name:Z[te]?.name,color:Y[te]?.color??ae[te],value:Y[te]?.value??null,formatted:`${X(Y[te]?.value??0)} · ${Math.round(10*(Math.abs(Y[te]?.value??0)/ne*100+Number.EPSILON))/10}%`,label:Y[te]?.label}];return t(r,{...q,size:G,variant:K,padded:V,className:W,legendSide:ue,legend:de?e(n,{series:Z,colors:ae,options:oe,visibility:ee,size:G,values:oe.showValue?Y.map(e=>null===e.value?void 0:X(e.value)):void 0}):null,table:xe?null:e(a,{id:U,caption:R,categories:Z.map(e=>e.name??""),series:[{name:R,data:P}],values:[Y],format:X,locale:H}),children:[t("div",{ref:J,role:"img",tabIndex:xe?void 0:0,"aria-label":R??T.chart,"aria-describedby":xe?void 0:U,onPointerLeave:()=>le(null),onBlur:()=>le(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=ye.map(e=>e.index);if(0===t.length)return;const l=null===te?-1:t.indexOf(te),a="ArrowRight"===e.key?l+1:l-1;le(t[(a+t.length)%t.length]),e.preventDefault()},className:N("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:re},children:[xe?e("div",{className:N("flex h-full items-center justify-center text-(--plass-muted-fg)",w[G]),children:O??T.empty}):Q>0?t("svg",{width:Q,height:re,viewBox:`0 0 ${Q} ${re}`,"aria-hidden":"true",className:"block",children:[ye.map(t=>{const l=null!==ee.hovered&&ee.hovered!==t.index||null!==te&&te!==t.index,a=t.end-t.start>2*be?be/2:0;return e("path",{d:m(he,fe,ve,pe,t.start+a,t.end-a),fill:Y[t.index].color??ae[t.index],opacity:l?.32:1,onPointerEnter:ce?void 0:()=>le(t.index),className:o},t.index)}),"all"===$?ye.map(t=>{const l=((t.start+t.end)/2-90)*(Math.PI/180),a=pe>0?(pe+ve)/2:.68*ve,n=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*a<2*se||ve-pe<1.6*se?null:e("text",{x:he+a*Math.cos(l),y:fe+a*Math.sin(l),textAnchor:"middle",dominantBaseline:"central",fontSize:se,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:n},t.index)}):null]}):null,S&&pe>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:he-pe,top:fe-pe,width:2*pe,height:ie?pe:2*pe},children:S}):null,null===te||ce?null:me.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:me.render({index:te,category:Z[te]?.name??te,items:je})}):e(s,{heading:Z[te]?.name,items:je,x:he,y:8,flip:!1,size:G})]}),ce?null:e(i,{heading:null===te?void 0:Z[te]?.name,items:je})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as t,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,dimmedByHover as f,formatCategory as p,markGap as x,plotHeights as b,seriesColor as g,toValue as y}from"../../internal/chart.js";import{useDefaults as M}from"../../internal/defaults.js";import{numberFormatter as N}from"../../internal/format.js";import{useLabels as j}from"../../internal/labels.js";import{cx as w,metaTextClasses as I,srOnlyClasses as P}from"../../internal/styles.js";const z={pie:0,donut:.62,semi:.62};export function PlPieChart({data:k,categories:A,shape:S="pie",startAngle:$=0,center:L,valueLabels:B="none",height:E,format:R,locale:C,label:D,legend:O,tooltip:_,empty:F,size:K,variant:V="ghost",padded:W=!1,className:q,...G}){const H=M(),J=K??H.size??"md",Q=C??H.locale,T=a.useRef(null),U=d(T),X=j(),Y=a.useId(),Z=a.useId(),ee=a.useCallback(e=>R?N(Q,R).format(e):v(e,Q),[R,Q]),le=a.useMemo(()=>k.map(y),[k]),ae=a.useMemo(()=>le.map((e,l)=>({name:p(c(l,A,[le]),Q),data:[k[l]],color:e.color})),[le,A,k,Q]),te=u(ae),[ne,ie]=a.useState(null),re=ae.map((e,l)=>g(e,l)),se=le.reduce((e,l,a)=>te.visible[a]&&null!==l.value?e+Math.abs(l.value):e,0),oe="semi"===S,de="number"==typeof E?E:b[J],ue=h[J],me=!1===O?{interactive:!1}:!0===O||void 0===O?{}:O,ce=!1!==O&&ae.length>1,he=me.side??"bottom",ve=!1===_?{mode:"none"}:!0===_||void 0===_?{}:_,fe="none"===ve.mode,pe=U/2,xe=Math.max(0,Math.min(U/2,oe?de:de/2)-2),be=oe?Math.min(de,de/2+xe/2):de/2,ge=xe*z[S],ye=se<=0,Me=xe>0?Math.min(4,x/xe*(180/Math.PI)):0,Ne=oe?180:360,je=[];let we=oe?-90:$;le.forEach((e,l)=>{if(!te.visible[l]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/se,t=a*Ne;je.push({index:l,start:we,end:we+t,value:e.value,share:a}),we+=t});const share=e=>`${ee(e)} · ${Math.round(10*(Math.abs(e)/se*100+Number.EPSILON))/10}%`,Ie=null===ne?[]:[{seriesIndex:ne,name:ae[ne]?.name,color:le[ne]?.color??re[ne],value:le[ne]?.value??null,formatted:share(le[ne]?.value??0),label:le[ne]?.label}];return l(r,{...G,size:J,variant:V,padded:W,className:q,legendSide:he,legend:ce?e(n,{series:ae,colors:re,options:me,visibility:te,size:J,values:me.showValue?le.map(e=>null===e.value?void 0:ee(e.value)):void 0}):null,table:ye?null:e(t,{id:Y,caption:D,categories:ae.map(e=>e.name??""),series:[{name:D,data:k}],values:[le],format:ee,locale:Q}),children:[l("div",{ref:T,role:"img",tabIndex:ye?void 0:0,"aria-label":D??X.chart,"aria-describedby":ye?void 0:Z,onPointerLeave:()=>ie(null),onBlur:()=>ie(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const l=je.map(e=>e.index);if(0===l.length)return;const a=null===ne?-1:l.indexOf(ne),t="ArrowRight"===e.key?a+1:a-1;ie(l[(t+l.length)%l.length]),e.preventDefault()},className:w("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:de},children:[ye?e("div",{className:w("flex h-full items-center justify-center text-(--plass-muted-fg)",I[J]),children:F??X.empty}):U>0&&xe>0?l("svg",{width:U,height:de,viewBox:`0 0 ${U} ${de}`,"aria-hidden":"true",className:"block",children:[je.map(l=>{const a=f(te.hovered,l.index,te.visible)||null!==ne&&ne!==l.index,t=l.end-l.start>2*Me?Me/2:0;return e("path",{d:m(pe,be,xe,ge,l.start+t,l.end-t),fill:le[l.index].color??re[l.index],opacity:a?.32:1,onPointerEnter:fe?void 0:()=>ie(l.index),className:o},l.index)}),"all"===B?je.map(l=>{const a=((l.start+l.end)/2-90)*(Math.PI/180),t=ge>0?(ge+xe)/2:.68*xe,n=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*t<2*ue||xe-ge<1.6*ue?null:e("text",{x:pe+t*Math.cos(a),y:be+t*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ue,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:n},l.index)}):null]}):null,L&&ge>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:pe-ge,top:be-ge,width:2*ge,height:oe?ge:2*ge},children:L}):null,null===ne||fe?null:ve.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:ve.render({index:ne,category:ae[ne]?.name??ne,items:Ie})}):e(s,{heading:ae[ne]?.name,items:Ie,x:pe,y:8,flip:!1,size:J})]}),ye?null:e("span",{id:Z,className:P,children:je.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,ae[e.index]?.name," ",le[e.index]?.label??share(e.value)]},e.index))}),fe?null:e(i,{heading:null===ne?void 0:ae[ne]?.name,items:Ie})]})}

package/dist/components/pill/PlPill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r}from"../../internal/defaults.js";import{controlSlots as n,controlTextClasses as o,cx as i,focusRingClasses as a,gapClasses as c,glassClasses as d,hasContent as m,iconClasses as p,iconSizeClasses as f,metaTextClasses as x,paddingXClasses as u,sheetBodyClasses as h,transitionClasses as g}from"../../internal/styles.js";const v={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]",glass:/* @__PURE__ */[d,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${d} text-(--p-accent) bg-(--p-soft)`},b={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},w={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},y={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},j={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:d="solid",size:k,color:z,density:_,elevation:P=2,startIcon:R,endIcon:C,title:H,description:I,details:O,expanded:$=!1,position:B="static",side:E="top",className:F,style:S,children:q,onClick:A,...D},G){const J=r(),K=k??J.size??"md",L=z??J.color??"secondary",M=_??J.density??"default",Q=l.useRef(null),[T,U]=l.useState(0);l.useEffect(()=>{const e=Q.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>U(e.scrollHeight));return s.observe(e),U(e.scrollHeight),()=>s.disconnect()},[O]);const V=Boolean(A),W=u[M][K],X=s(t,{children:[m(R)?e("span",{className:i("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",f[K]),children:R}):null,m(H)||m(I)||m(q)?s("span",{className:i("flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[M][K]),children:[m(H)?e("span",{className:"max-w-full truncate",children:H}):null,m(I)?e("span",{className:i("max-w-full truncate font-normal",x[K],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:I}):null,q]}):null]});return s("div",{ref:G,className:i("inline-flex max-w-full flex-col overflow-hidden align-middle",y[K],"font-medium whitespace-nowrap select-none",o[K],v[d],g,p,V?`plass-glow ${b[d]}`:"",j[B][E],F),style:{...n(L,P,d),...S},...D,children:[s("div",{className:i("flex shrink-0 items-center py-1",w[K],c[K],V?"ps-0":W,m(C)?"pe-1":V?"pe-0":""),children:[V?e("button",{type:"button",className:i("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[K],W,a),onClick:A,children:X}):X,m(C)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null]}),m(O)?e("div",{className:i("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:$?T:0},inert:!$,children:e("div",{ref:Q,className:i("whitespace-normal pb-2",W,h[K]),children:O})}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{inertProps as n}from"../../internal/inert.js";import{controlSlots as i,controlTextClasses as a,cx as c,focusRingClasses as d,forcedEdgeClasses as m,gapClasses as p,glassClasses as f,hasContent as x,iconClasses as u,iconSizeClasses as h,metaTextClasses as v,paddingXClasses as g,sheetBodyClasses as b,transitionClasses as w}from"../../internal/styles.js";const y={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)] ${m}`,glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${f} text-(--p-accent) bg-(--p-soft)`},j={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},N={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},k={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},z={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},P={static:{top:"relative",bottom:"relative"},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:m="solid",size:f,color:_,density:R,elevation:C=2,startIcon:I,endIcon:$,title:H,description:M,details:O,expanded:B=!1,position:E="static",side:F="top",className:S,style:q,children:A,onClick:D,onPointerMove:G,...J},K){const L=o(),Q=f??L.size??"md",T=_??L.color??"secondary",U=R??L.density??"default",V=l.useRef(null),W=l.useId(),[X,Y]=l.useState(0),Z=x(O);l.useEffect(()=>{const e=V.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>Y(e.scrollHeight));return s.observe(e),Y(e.scrollHeight),()=>s.disconnect()},[Z]);const ee=Boolean(D),se=g[U][Q],te=s(t,{children:[x(I)?e("span",{className:c("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",h[Q]),children:I}):null,x(H)||x(M)||x(A)?s("span",{className:c("flex min-w-0 flex-1 flex-col items-center justify-center text-center",z[U][Q]),children:[x(H)?e("span",{className:"max-w-full truncate",children:H}):null,x(M)?e("span",{className:c("max-w-full truncate font-normal",v[Q],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:M}):null,A]}):null]});return s("div",{ref:K,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",k[Q],"font-medium whitespace-nowrap select-none",a[Q],y[m],w,u,ee?`plass-glow ${j[m]}`:"",P[E][F],S),style:{...i(T,C,m),...q},onPointerMove:r(ee,G),...J,children:[s("div",{className:c("flex shrink-0 items-center py-1",N[Q],p[Q],ee?"ps-0":se,x($)?"pe-1":ee?"pe-0":""),children:[ee?e("button",{type:"button",className:c("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",p[Q],se,d),"aria-expanded":Z?B:void 0,"aria-controls":Z?W:void 0,onClick:D,children:te}):te,x($)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null]}),Z?e("div",{id:W,className:c("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:B?X:0},...n(!B),children:e("div",{ref:V,className:c("whitespace-normal pb-2",se,b[Q]),children:O})}):null]})});

package/dist/components/popover/PlPopover.d.ts

@@ -40,11 +40,11 @@ export interface PlPopoverProps extends Pick<PlassStyleProps, 'size' | 'color' |
     /**
      * Draws the little wedge pointing at the trigger.
      *
-     * Off by default, unlike on a `PlTooltip`. A tooltip is a filled plate and its
-     * wedge is the same solid colour; this surface is translucent over a blurred
-     * backdrop, and a wedge sticking out past the popup's own box cannot carry
-     * that backdrop with it. Turn it on where the trigger is far enough away that
-     * the popup needs to say what it belongs to.
+     * Off by default. This surface is translucent over a blurred backdrop, and a
+     * wedge sticking out past the popup's own box cannot carry that backdrop with
+     * it, so the wedge is the one part of the sheet the blur does not reach. Turn
+     * it on where the trigger is far enough away that the popup needs to say what
+     * it belongs to.
      * @default false
      */
     arrow?: boolean;

package/dist/components/popover/PlPopover.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as o}from"../../internal/icons.js";import{cx as r,focusRingClasses as i,glassClasses as n,hasContent as d,metaTextClasses as p,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as g,sheetPaddingYClasses as h,sheetSectionGapClasses as u,sheetTitleClasses as x,surfaceSlots as v}from"../../internal/styles.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},w=/* @__PURE__ */[n,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y={xs:8,sm:9,md:10,lg:11,xl:12},N=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",i].join(" ");export const PlPopoverClose=t.Close;export function PlPopover({size:i,color:n,density:j,trigger:k,title:O,description:P,children:_,side:z="bottom",align:C="center",sideOffset:L=6,alignOffset:M=0,arrow:T=!1,open:W,defaultOpen:A,onOpenChange:B,modal:D=!1,dismissible:E=!0,showClose:R=!1,closeLabel:$,width:q,className:F,style:G,...H}){const I=a(),J=l(),K=$??J.close,Q=i??I.size??"md",S=n??I.color??"primary",U=j??I.density??"default",V=g[U][Q],X=h[U][Q],Y=y[Q],Z=d(O)||d(P);return s(t.Root,{open:W,defaultOpen:A,modal:D,onOpenChange:(e,s)=>{E||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?B?.(e):s.cancel()},children:[k?e(t.Trigger,{render:k}):null,e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:z,align:C,sideOffset:L,alignOffset:M,children:s(t.Popup,{className:r(w,c[Q],m[Q],u[Q],V,X,void 0===q?b[Q]:"",F),style:{...v(S,3),...void 0===q?null:{maxWidth:"number"==typeof q?`${q}px`:q},...G},...H,children:[T?e(t.Arrow,{className:r("data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"),children:s("svg",{width:Y,height:Y/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,Z||R?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:r("flex min-w-0 flex-1 flex-col",f[Q]),children:[d(O)?e(t.Title,{className:r("m-0 font-semibold",x[Q]),children:O}):null,d(P)?e(t.Description,{className:r("m-0 text-(--plass-muted-fg)",p[Q]),children:P}):null]}),R?e(t.Close,{"aria-label":K,className:N,children:e(o,{})}):null]}):null,d(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Popover as o}from"@base-ui/react/popover";import{CloseIcon as r}from"../../internal/icons.js";import{PopupArrow as i}from"../../internal/picker.js";import{cx as n,focusRingClasses as t,glassClasses as p,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetPaddingXClasses as g,sheetPaddingYClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as v,surfaceSlots as b}from"../../internal/styles.js";const y={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},w=/* @__PURE__ */[p,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j={xs:8,sm:9,md:10,lg:11,xl:12},N=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" ");export const PlPopoverClose=o.Close;export function PlPopover({size:t,color:p,density:O,trigger:P,title:_,description:z,children:k,side:C="bottom",align:T="center",sideOffset:A=6,alignOffset:D=0,arrow:L=!1,open:R,defaultOpen:W,onOpenChange:$,modal:q=!1,dismissible:B=!0,showClose:E=!1,closeLabel:F,width:G,className:H,style:I,...J}){const K=l(),M=a(),Q=F??M.close,S=t??K.size??"md",U=p??K.color??"primary",V=O??K.density??"default",X=g[V][S],Y=x[V][S],Z=j[S],ss=d(_)||d(z);return e(o.Root,{open:R,defaultOpen:W,modal:q,onOpenChange:(s,e)=>{B||s||"escape-key"!==e.reason&&"outside-press"!==e.reason&&"focus-out"!==e.reason?$?.(s):e.cancel()},children:[P?s(o.Trigger,{render:P}):null,s(o.Portal,{children:s(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:C,align:T,sideOffset:A,alignOffset:D,children:e(o.Popup,{className:n(w,m[S],f[S],h[S],X,Y,void 0===G?y[S]:"",H),style:{...b(U,3),...void 0===G?null:{maxWidth:"number"==typeof G?`${G}px`:G},...I},...J,children:[L?s(i,{as:o.Arrow,size:Z}):null,ss||E?e("div",{className:"flex shrink-0 items-start gap-3",children:[e("div",{className:n("flex min-w-0 flex-1 flex-col",u[S]),children:[d(_)?s(o.Title,{className:n("m-0 font-semibold",v[S]),children:_}):null,d(z)?s(o.Description,{className:n("m-0 text-(--plass-muted-fg)",c[S]),children:z}):null]}),E?s(o.Close,{"aria-label":Q,className:N,children:s(r,{})}):null]}):null,d(k)?s("div",{className:"min-w-0",children:k}):null]})})})]})}

package/dist/components/progress-box/PlProgressBox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillTransitionClasses as t,plateGapClasses as i,plateRadiusClasses as n,plateSizeClasses as o,progressAriaText as m,progressFraction as c,progressSlots as u,progressText as f,trackClasses as d}from"../../internal/progress.js";import{cx as p,metaTextClasses as x,stackGapClasses as h}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l,color:g,count:y=4,value:b=null,min:j=0,max:v=100,label:w,showValue:N=!1,format:M,className:P,style:k,...V},z){const A=s(),B=l??A.size??"md",R=g??A.color??"primary",T=c(b,j,v),L=null===T,$=void 0!==M,q=Math.max(1,Math.floor(y));return a(r.Root,{ref:z,value:b??null,min:j,max:v,format:M,getAriaValueText:m(T,$),className:p("inline-flex flex-col",h[B],P),style:{...u(R),...k},...V,children:[w||N?a("div",{className:p("flex items-baseline gap-2",w?"justify-between":"justify-end",x[B]),children:[w?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:w}):null,N?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>f(T,e,$)}):null]}):null,e(r.Track,{className:p("flex",i[B]),children:Array.from({length:q},(a,l)=>e("span",{className:p("relative overflow-hidden",d,o[B],n[B]),children:e("span",{"aria-hidden":"true",className:p("absolute inset-y-0 start-0 [background-image:var(--p-fill)]",L?"plass-plate-wave w-full":t),style:L?{"--p-i":l}:{width:`${Math.min(100,Math.max(0,100*(T*q-l)))}%`}})},l))})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillClasses as t,fillTransitionClasses as o,plateGapClasses as n,plateRadiusClasses as i,plateSizeClasses as m,progressAriaText as c,progressFraction as u,progressSlots as f,progressText as d,trackClasses as p}from"../../internal/progress.js";import{cx as x,metaTextClasses as h,stackGapClasses as g}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */a.forwardRef(function PlProgressBox({size:a,color:y,count:j=4,value:w=null,min:N=0,max:b=100,label:v,showValue:M=!1,format:P,className:V,style:k,...z},A){const B=s(),R=a??B.size??"md",T=y??B.color??"primary",L=u(w,N,b),$=null===L,q=void 0!==P,C=Math.max(1,Math.floor(j));return l(r.Root,{ref:A,value:w??null,min:N,max:b,format:P,locale:B.locale,getAriaValueText:c(L,q,B.locale),className:x("inline-flex flex-col",g[R],V),style:{...f(T),...k},...z,children:[v||M?l("div",{className:x("flex items-baseline gap-2",v?"justify-between":"justify-end",h[R]),children:[v?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,M?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>d(L,e,q,B.locale)}):null]}):null,e(r.Track,{className:x("flex",n[R]),children:Array.from({length:C},(l,a)=>e("span",{className:x("relative overflow-hidden",p,m[R],i[R]),children:e("span",{"aria-hidden":"true",className:x("absolute inset-y-0 start-0",t,$?"plass-plate-wave w-full":o),style:$?{"--p-i":a}:{width:`${Math.min(100,Math.max(0,100*(L*C-a)))}%`}})},a))})]})});

package/dist/components/progress-circular/PlProgressCircular.js

@@ -1 +1 @@
-"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as t}from"@base-ui/react/progress";import{progressAriaText as l,progressFraction as o,progressSlots as i,progressText as n,ringDiameters as c,ringStrokes as m}from"../../internal/progress.js";import{cx as f,gapClasses as u,metaTextClasses as d}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:p,color:h,value:x=null,min:k=0,max:g=100,label:v,showValue:y=!1,format:$,className:j,style:w,...N},P){const b=a(),C=p??b.size??"md",V=h??b.color??"primary",z=o(x,k,g),D=null===z,I=void 0!==$,L=`${e.useId()}-fill`,R=c[C],W=m[C],_=R/2,A=_-W/2,B=2*Math.PI*A,G=D?`${.28*B} ${B}`:`${B}`,M=D?0:B*(1-z);return s(t.Root,{ref:P,value:x??null,min:k,max:g,format:$,getAriaValueText:l(z,I),className:f("inline-flex items-center",u[C],d[C],j),style:{...i(V),...w},...N,children:[s("svg",{className:f("shrink-0",D&&"plass-ring-spin"),width:R,height:R,viewBox:`0 0 ${R} ${R}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:L,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:_,cy:_,r:A,stroke:"var(--plass-track)",strokeWidth:W}),r("circle",{cx:_,cy:_,r:A,stroke:`url(#${L})`,strokeWidth:W,strokeLinecap:"round",strokeDasharray:G,strokeDashoffset:M,transform:`rotate(-90 ${_} ${_})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),v?r(t.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,y?r(t.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(z,r,I)}):null]})});
+"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as l}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as o,progressSlots as i,progressText as n,ringDiameters as c,ringStrokes as m}from"../../internal/progress.js";import{cx as f,gapClasses as u,metaTextClasses as d}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:p,color:h,value:x=null,min:k=0,max:g=100,label:v,showValue:y=!1,format:$,className:j,style:w,...N},P){const b=a(),C=p??b.size??"md",V=h??b.color??"primary",z=o(x,k,g),D=null===z,I=void 0!==$,L=`${e.useId()}-fill`,R=c[C],W=m[C],_=R/2,A=_-W/2,B=2*Math.PI*A,G=D?`${.28*B} ${B}`:`${B}`,M=D?0:B*(1-z);return s(l.Root,{ref:P,value:x??null,min:k,max:g,format:$,locale:b.locale,getAriaValueText:t(z,I,b.locale),className:f("inline-flex items-center",u[C],d[C],j),style:{...i(V),...w},...N,children:[s("svg",{className:f("shrink-0",D&&"plass-ring-spin"),width:R,height:R,viewBox:`0 0 ${R} ${R}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:L,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:_,cy:_,r:A,stroke:"var(--plass-track)",strokeWidth:W}),r("circle",{cx:_,cy:_,r:A,stroke:`url(#${L})`,strokeWidth:W,strokeLinecap:"round",strokeDasharray:G,strokeDashoffset:M,transform:`rotate(-90 ${_} ${_})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),v?r(l.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,y?r(l.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(z,r,I,b.locale)}):null]})});

package/dist/components/progress-linear/PlProgressLinear.js

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

package/dist/components/radio-group/PlRadioGroup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{Field as t}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as c,glassClasses as d,hasContent as p,metaTextClasses as m,tickDotClasses as u,tickRowTextClasses as f,tickSizeClasses as h,transitionClasses as b}from"../../internal/styles.js";const g=/* @__PURE__ */a.createContext({size:"md",color:"primary",readOnly:!1}),x=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,c].join(" "),v=/* @__PURE__ */[d,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105"].join(" "),k=/* @__PURE__ */[d,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),y=/* @__PURE__ */[d,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),N=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */a.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:n,style:c,...d},p){const b=a.useContext(g),j=d.readOnly??b.readOnly;return e(t.Root,{disabled:i,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:c,children:r("div",{className:`flex items-start gap-2 ${f[b.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[x,h[b.size],i?y:j?k:v].join(" "),disabled:i,...d,children:e(o.Indicator,{keepMounted:!0,className:`${N} ${u[b.size]}`})})}),l||s?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:i?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className:`${m[b.size]} text-(--plass-muted-fg)`,children:s}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */a.forwardRef(function PlRadioGroup({size:o,color:c,orientation:d="vertical",label:u,description:f,error:h,invalid:b,disabled:x=!1,readOnly:v=!1,className:k,classNames:y,style:N,children:j,...R},z){const w=l(),O=o??w.size??"md",P=c??w.color??"primary",$=p(h),G=b??$,B=G?"danger":P,C=a.useMemo(()=>({size:O,color:B,readOnly:v}),[O,B,v]);return e(g.Provider,{value:C,children:r(t.Root,{disabled:x,invalid:G,className:["flex flex-col gap-1.5",k??""].filter(Boolean).join(" "),style:{...i(B,0,"solid"),...N},children:[u?e(t.Label,{className:n(m[O],"font-semibold",x?"text-(--plass-muted-fg)":"text-(--plass-fg)",y?.label),children:u}):null,f?e(t.Description,{className:n(m[O],"text-(--plass-muted-fg)",y?.description),children:f}):null,e(s,{ref:z,disabled:x,readOnly:v,className:n("flex","horizontal"===d?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",y?.control),...R,children:j}),e(t.Error,$?{match:!0,className:n(m[O],"text-(--p-accent)",y?.error),children:h}:{className:n(m[O],"text-(--p-accent)",y?.error)})]})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{Field as t}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as d,forcedCheckedClasses as c,forcedDisabledCheckedClasses as p,glassClasses as m,hasContent as u,metaTextClasses as f,tickDotClasses as h,tickRowTextClasses as b,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),k=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,d].join(" "),y=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105",c].join(" "),N=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c].join(" "),j=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",p].join(" "),R=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:n,style:d,...c},p){const m=r.useContext(v),u=c.readOnly??m.readOnly,x=i||m.disabled;return e(t.Root,{disabled:i,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${b[m.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[k,g[m.size],x?j:u?N:y].join(" "),disabled:i,...c,children:e(o.Indicator,{keepMounted:!0,className:`${R} ${h[m.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className:`m-0 ${f[m.size]} text-(--plass-muted-fg)`,children:s}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:o,color:d,orientation:c="vertical",label:p,description:m,error:h,invalid:b,disabled:g=!1,readOnly:x=!1,className:k,classNames:y,style:N,children:j,...R},z){const w=l(),O=o??w.size??"md",P=d??w.color??"primary",$=u(h),G=b??$,B=G?"danger":P,C=r.useMemo(()=>({size:O,color:B,readOnly:x,disabled:g}),[O,B,x,g]);return e(v.Provider,{value:C,children:a(t.Root,{disabled:g,invalid:G,className:["flex flex-col gap-1.5",k??""].filter(Boolean).join(" "),style:{...i(B,0,"solid"),...N},children:[p?e(t.Label,{className:n(f[O],"font-semibold",g?"text-(--plass-muted-fg)":"text-(--plass-fg)",y?.label),children:p}):null,m?e(t.Description,{className:n("m-0",f[O],"text-(--plass-muted-fg)",y?.description),children:m}):null,e(s,{ref:z,disabled:g,readOnly:x,className:n("flex","horizontal"===c?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",y?.control),...R,children:j}),e(t.Error,$?{match:!0,className:n(f[O],"text-(--p-accent)",y?.error),children:h}:{className:n(f[O],"text-(--p-accent)",y?.error)})]})})});

package/dist/components/rating/PlRating.d.ts

@@ -60,7 +60,7 @@ export interface PlRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'
     label?: string;
     /**
      * What one star, and the whole control once it is read only, is called.
-     * @default `{value} out of {count}`
+     * @default `{value} out of {count}`, and `No rating` at zero, from the label pack
      */
     valueLabel?: (value: number, count: number) => string;
 }

package/dist/components/rating/PlRating.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{StarIcon as l,StarOutlineIcon as i}from"../../internal/icons.js";import{controlSlots as s,cx as o,focusWithinRingClasses as c,gapClasses as d,iconSizeClasses as m,radiusClasses as u,srOnlyClasses as f,transitionClasses as h}from"../../internal/styles.js";const p="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:b,defaultValue:y=0,onValueChange:x,count:v=5,precision:g=1,icon:N,emptyIcon:M,clearable:j=!0,readOnly:w=!1,disabled:L=!1,name:P,required:k=!1,size:V,color:q,label:C,valueLabel:I=defaultValueLabel,className:R,style:S,onPointerLeave:z,...A},$){const E=r(),F=n(),O=C??F.rating,B=V??E.size??"md",D=q??E.color??"warning",G=t.useId(),H=P??G,[J,K]=t.useState(y),Q=void 0!==b,T=Q?b:J,[U,W]=t.useState(null),X=Math.max(1,Math.floor(v)),Y=g>0&&g<=1?g:1,Z=Math.round(1/Y),_=Math.max(0,Math.min(X,U??T)),change=e=>{Q||K(e),x?.(e)},ee=Array.from({length:X},(t,r)=>{const n=Math.max(0,Math.min(1,_-r));return a("span",{className:o("relative inline-flex shrink-0",m[B],u.xs,w||L?"":c),children:[e("span",{className:o(p,m[B],"text-(--p-empty)"),children:M??e(i,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:o(p,m[B],"text-(--p-accent)",h),children:N??e(l,{})})}),w?null:Array.from({length:Z},(a,t)=>{const n=Number((r+(t+1)*Y).toFixed(4));return e("label",{className:o("absolute inset-y-0",L?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/Z+"%",width:100/Z+"%"},onPointerEnter:()=>{L||W(n)},children:e("input",{type:"radio",className:f,name:H,value:n,checked:T===n,disabled:L,required:k,"aria-label":I(n,X),onChange:()=>change(n),onClick:()=>{j&&T===n&&change(0)}})},n)})]},r)}),ae=o("inline-flex items-center align-middle",d[B],L?"cursor-not-allowed opacity-50 saturate-[0.35]":"",R),te={...s(D,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...S};return e("div",w?{ref:$,role:"img","aria-label":I(Math.max(0,Math.min(X,T)),X),className:ae,style:te,onPointerLeave:z,...A,children:ee}:{ref:$,role:"radiogroup","aria-label":O,"aria-disabled":L||void 0,"aria-required":k||void 0,className:ae,style:te,onPointerLeave:e=>{W(null),z?.(e)},...A,children:ee})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{StarIcon as l,StarOutlineIcon as i}from"../../internal/icons.js";import{controlSlots as s,cx as o,focusWithinRingClasses as c,gapClasses as m,iconSizeClasses as d,radiusClasses as u,srOnlyClasses as h,transitionClasses as p}from"../../internal/styles.js";const f="flex items-center justify-center";export const PlRating=/* @__PURE__ */r.forwardRef(function PlRating({value:y,defaultValue:x=0,onValueChange:b,count:g=5,precision:v=1,icon:N,emptyIcon:M,clearable:j=!0,readOnly:w=!1,disabled:P=!1,name:k,required:L=!1,size:q,color:C,label:I,valueLabel:R,className:S,style:V,onPointerLeave:z,...A},E){const F=t(),O=n(),B=I??O.rating,D=R??((e,a)=>e<=0?O.ratingNone:O.ratingValue(e,a)),G=q??F.size??"md",H=C??F.color??"warning",J=r.useId(),K=k??J,[Q,T]=r.useState(x),U=void 0!==y,W=U?y:Q,[X,Y]=r.useState(null),Z=Math.max(1,Math.floor(g)),$=v>0&&v<=1?v:1,_=Math.round(1/$),ee=Math.max(0,Math.min(Z,X??W)),change=e=>{U||T(e),b?.(e)},ae=Array.from({length:Z},(r,t)=>{const n=Math.max(0,Math.min(1,ee-t));return a("span",{className:o("relative inline-flex shrink-0",d[G],u.xs,w||P?"":c),children:[e("span",{className:o(f,d[G],"text-(--p-empty)"),children:M??e(i,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:o(f,d[G],"text-(--p-accent)",p),children:N??e(l,{})})}),w?null:Array.from({length:_},(a,r)=>{const n=Number((t+(r+1)*$).toFixed(4));return e("label",{className:o("absolute inset-y-0",P?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*r/_+"%",width:100/_+"%"},onPointerEnter:()=>{P||Y(n)},children:e("input",{type:"radio",className:h,name:K,value:n,checked:W===n,disabled:P,required:L,"aria-label":D(n,Z),onChange:()=>change(n),onClick:()=>{j&&W===n&&change(0)}})},n)})]},t)}),re=o("inline-flex items-center align-middle",m[G],P?"cursor-not-allowed opacity-50 saturate-[0.35]":"",S),te={...s(H,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...V};return e("div",w?{ref:E,role:"img","aria-label":D(Math.max(0,Math.min(Z,W)),Z),className:re,style:te,onPointerLeave:z,...A,children:ae}:{ref:E,role:"radiogroup","aria-label":B,"aria-disabled":P||void 0,"aria-required":L||void 0,className:re,style:te,onPointerLeave:e=>{Y(null),z?.(e)},...A,children:ae})});

package/dist/components/scatter-chart/PlScatterChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as t,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as s,formatCategory as i,markerRadii as o,markGap as c,markPath as n,markShapes as u,plotHeights as d,pointX as h}from"../../internal/chart.js";import{useDefaults as m}from"../../internal/defaults.js";import{cx as x,srOnlyClasses as f}from"../../internal/styles.js";export function PlScatterChart({shape:r="auto",pointRadius:l,maxRadius:i,series:c,categories:x,size:f,xAxis:p,...b}){const v=m(),y=f??v.size??"md",g=l??o[y],z=i??Math.max(g+2,("number"==typeof b.height?b.height:d[y])/12),k=c.reduce((e,r)=>r.color?e:e+1,0),j="auto"===r||"varied"===r?"circle":r,M="varied"===r||"auto"===r&&k>3,w=a.useCallback(e=>M?u[e%u.length]:j,[M,j]),N=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((t,l)=>{e.visible[l]&&t.forEach((t,i)=>{if(null===t.value)return;const o=h(t,i,x);null!==o&&r.push({series:l,index:i,x:e.categoryValuePx(o),y:e.valuePx(t.value),r:void 0===t.z?g:s(t.z,a,z,2)})})}),r},[x,g,z]);return e(t,{...b,series:c,categories:x,size:y,xScale:"value",xAxis:p,marks:N,markInset:z,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:n(w(r),5,5,4),fill:a})}),table:r=>e(ScatterTable,{id:r,series:c,categories:x,label:b.label,xLabel:p?.label,yLabel:b.yAxis?.label,locale:b.locale??v.locale,format:b.format}),children:r=>e(ScatterMarks,{context:r,shapeOf:w})})}function ScatterMarks({context:r,shapeOf:t}){const{marks:s,values:i,colors:o,hovered:u,activeMark:d}=r,h=a.useMemo(()=>[...s].sort((e,r)=>r.r-e.r),[s]);return e("g",{children:h.map(r=>{const a=i[r.series]?.[r.index],s=null!==u&&u!==r.series,h=d?.series===r.series&&d?.index===r.index;return e("path",{d:n(t(r.series),r.x,r.y,r.r),fill:a?.color??o[r.series],stroke:"var(--plass-chart-gap)",strokeWidth:c,opacity:s?.28:1,className:l,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:h&&r.r>0?(r.r+1)/r.r:1}},`${r.series}-${r.index}`)})})}function ScatterTable({id:t,series:l,categories:s,label:o,xLabel:c,yLabel:n,locale:u,format:d}){const h=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),m=l.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:t,className:x(f),children:[o?e("caption",{children:o}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:c??"x"}),e("th",{scope:"col",children:n??"y"}),m?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:l.flatMap((a,t)=>a.data.map((l,o)=>{const c="object"==typeof l&&null!==l?l:null,n=c?c.y:"number"==typeof l?l:null,d=c?.x??s?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:i(d,u)}),e("td",{children:null!==n&&Number.isFinite(n)?h.format(n):""}),m?e("td",{children:void 0===c?.z?"":h.format(c.z)}):null]},`${t}-${o}`)}))})]})}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as t,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as s,dimmedByHover as i,formatCategory as o,markerRadii as c,markGap as n,markPath as u,markShapes as d,plotHeights as h,pointX as m}from"../../internal/chart.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as f,srOnlyClasses as p}from"../../internal/styles.js";export function PlScatterChart({shape:r="auto",pointRadius:l,maxRadius:i,series:o,categories:n,size:f,xAxis:p,...b}){const v=x(),y=f??v.size??"md",g=l??c[y],z=i??Math.max(g+2,("number"==typeof b.height?b.height:h[y])/12),k=o.reduce((e,r)=>r.color?e:e+1,0),j="auto"===r||"varied"===r?"circle":r,M="varied"===r||"auto"===r&&k>3,w=a.useCallback(e=>M?d[e%d.length]:j,[M,j]),N=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((t,l)=>{e.visible[l]&&t.forEach((t,i)=>{if(null===t.value)return;const o=m(t,i,n);null!==o&&r.push({series:l,index:i,x:e.categoryValuePx(o),y:e.valuePx(t.value),r:void 0===t.z?g:s(t.z,a,z,2)})})}),r},[n,g,z]);return e(t,{...b,series:o,categories:n,size:y,xScale:"value",xAxis:p,marks:N,markInset:z,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:u(w(r),5,5,4),fill:a})}),table:r=>e(ScatterTable,{id:r,series:o,categories:n,label:b.label,xLabel:p?.label,yLabel:b.yAxis?.label,locale:b.locale??v.locale,format:b.format}),children:r=>e(ScatterMarks,{context:r,shapeOf:w})})}function ScatterMarks({context:r,shapeOf:t}){const{marks:s,values:o,colors:c,visible:d,hovered:h,activeMark:m}=r,x=a.useMemo(()=>[...s].sort((e,r)=>r.r-e.r),[s]);return e("g",{children:x.map(r=>{const a=o[r.series]?.[r.index],s=i(h,r.series,d),x=m?.series===r.series&&m?.index===r.index;return e("path",{d:u(t(r.series),r.x,r.y,r.r),fill:a?.color??c[r.series],stroke:"var(--plass-chart-gap)",strokeWidth:n,opacity:s?.28:1,className:l,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:x&&r.r>0?(r.r+1)/r.r:1}},`${r.series}-${r.index}`)})})}function ScatterTable({id:t,series:l,categories:s,label:i,xLabel:c,yLabel:n,locale:u,format:d}){const h=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),m=l.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:t,className:f(p),children:[i?e("caption",{children:i}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:c??"x"}),e("th",{scope:"col",children:n??"y"}),m?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:l.flatMap((a,t)=>a.data.map((l,i)=>{const c="object"==typeof l&&null!==l?l:null,n=c?c.y:"number"==typeof l?l:null,d=c?.x??s?.[i]??i;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:o(d,u)}),e("td",{children:null!==n&&Number.isFinite(n)?h.format(n):""}),m?e("td",{children:void 0===c?.z?"":h.format(c.z)}):null]},`${t}-${i}`)}))})]})}

package/dist/components/scroll-area/PlScrollArea.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{ScrollArea as r}from"@base-ui/react/scroll-area";import{useDefaults as l}from"../../internal/defaults.js";import{cx as i,focusRingInsetClasses as e,radiusClasses as n,toLength as s}from"../../internal/styles.js";const c={xs:"w-2 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-auto",sm:"w-2.5 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:w-auto",md:"w-3 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-auto",lg:"w-3.5 data-[orientation=horizontal]:h-3.5 data-[orientation=horizontal]:w-auto",xl:"w-4 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-auto"};export const PlScrollArea=/* @__PURE__ */o.forwardRef(function PlScrollArea({orientation:o="vertical",height:h,maxHeight:d,width:m,maxWidth:u,scrollbars:p="auto",label:f,size:w,classNames:z,className:b,style:x,children:v,...g},y){const N=l(),j=w??N.size??"md",S="horizontal"!==o,k="vertical"!==o,A=i("flex touch-none select-none","p-[0.125rem]",c[j],"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","always"===p?"opacity-100":"opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100",z?.scrollbar);return t(r.Root,{ref:y,className:i("plass-scroll-area relative overflow-hidden",n[j],b),style:{height:s(h),maxHeight:s(d),width:s(m),maxWidth:s(u),...x},...g,children:[a(r.Viewport,{role:f?"region":void 0,"aria-label":f,className:i("size-full overscroll-contain",n[j],e,z?.viewport),children:a(r.Content,{children:v})}),S?a(r.Scrollbar,{orientation:"vertical",className:A,children:a(r.Thumb,{className:i("flex-1 rounded-full bg-(--plass-track)",z?.thumb)})}):null,k?a(r.Scrollbar,{orientation:"horizontal",className:A,children:a(r.Thumb,{className:i("flex-1 rounded-full bg-(--plass-track)",z?.thumb)})}):null,S&&k?a(r.Corner,{}):null]})});
+"use client";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{ScrollArea as r}from"@base-ui/react/scroll-area";import{useDefaults as l}from"../../internal/defaults.js";import{cx as e,focusRingInsetClasses as i,radiusClasses as n,toLength as s}from"../../internal/styles.js";const c={xs:"w-2 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-auto",sm:"w-2.5 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:w-auto",md:"w-3 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-auto",lg:"w-3.5 data-[orientation=horizontal]:h-3.5 data-[orientation=horizontal]:w-auto",xl:"w-4 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-auto"},h="flex-1 rounded-full bg-(--plass-track) forced-colors:[background-color:CanvasText]";export const PlScrollArea=/* @__PURE__ */t.forwardRef(function PlScrollArea({orientation:t="vertical",height:d,maxHeight:m,width:u,maxWidth:w,scrollbars:f="auto",label:p,size:z,classNames:v,className:b,style:x,children:g,...y},N){const j=l(),S=z??j.size??"md",C="horizontal"!==t,T="vertical"!==t,k=e("flex touch-none select-none","p-[0.125rem]",c[S],"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","always"===f?"opacity-100":"opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100",v?.scrollbar);return o(r.Root,{ref:N,className:e("plass-scroll-area relative overflow-hidden",n[S],b),style:{height:s(d),maxHeight:s(m),width:s(u),maxWidth:s(w),...x},...y,children:[a(r.Viewport,{role:p?"region":void 0,"aria-label":p,className:e("size-full overscroll-contain",n[S],i,v?.viewport),style:{overflowX:T?"scroll":"hidden",overflowY:C?"scroll":"hidden"},children:a(r.Content,{children:g})}),C?a(r.Scrollbar,{orientation:"vertical",className:k,children:a(r.Thumb,{className:e(h,v?.thumb)})}):null,T?a(r.Scrollbar,{orientation:"horizontal",className:k,children:a(r.Thumb,{className:e(h,v?.thumb)})}):null,C&&T?a(r.Corner,{}):null]})});

package/dist/components/scroll-zone/PlScrollZone.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassResponsive, PlassStyleProps } from '../../types.js';
+import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps } from '../../types.js';
 /**
  * When the scroll buttons are drawn.
  *
@@ -104,14 +104,27 @@ export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.Component
      * reader happens to be in. The pointer being on the strip is them saying
      * which of the two things under it they meant to move.
      *
-     * Only the vertical half of a gesture, and only while the strip has somewhere
-     * to go. A trackpad's two fingers, a tilt wheel and Shift held down already
-     * scroll it sideways and are left alone; and the moment it reaches an end the
-     * wheel goes back to the page, so a reader on their way down a long page is
-     * held up by one shelf rather than caught in it.
+     * Only the vertical half of a gesture: a trackpad's two fingers, a tilt wheel
+     * and Shift held down already scroll the strip sideways and are left alone.
+     * What happens once the strip has nowhere left to go is `overscroll`.
      * @default true
      */
     wheel?: boolean;
+    /**
+     * What the strip does with a gesture it has run out of room for.
+     *
+     * `contain`, the default, keeps it: the pointer being on the shelf is the
+     * reader saying which of the two things under it they meant to move, and a
+     * page that starts moving the instant the last card arrives is that answer
+     * being overruled halfway through a flick. `auto` is the browser's own
+     * chaining, held only for as long as the gesture lasts.
+     *
+     * A strip everything fits in is never a scroller and holds nothing back
+     * either way, and only the axis the strip runs on is contained — a shelf that
+     * kept the other one would be a box a finger cannot scroll the page from.
+     * @default 'contain'
+     */
+    overscroll?: PlassOverscroll;
     /** Shows the native scrollbar. @default false */
     scrollbar?: boolean;
     /** What the scrollable region is called — "Categories", "Recent files". */

package/dist/components/scroll-zone/PlScrollZone.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlIconButton as s}from"../icon-button/PlIconButton.js";import{spacingValue as l}from"../../internal/grid.js";import{ChevronIcon as i}from"../../internal/icons.js";import{cx as a}from"../../internal/styles.js";import{useResponsiveValue as c}from"../../internal/responsive.js";const u={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},d={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const PlScrollZone=/* @__PURE__ */n.forwardRef(function PlScrollZone({orientation:p,lines:f=1,spacing:m=2,buttons:v="auto",buttonPlacement:b="inline",mode:w="item",step:g=1,speed:h=900,snap:y=!1,drag:x=!0,wheel:E=!0,scrollbar:L=!1,variant:k="glass",size:M,color:C,density:P,label:j,previousLabel:D,nextLabel:R,className:A,style:B,children:T,...N},z){const S=c(p,"horizontal"),W=r(),Y=o(),_=D??Y.previous,H=R??Y.next,F=M??W.size??"md",I=C??W.color??"primary",O=P??W.density??"default",X="horizontal"===S,$=Math.max(1,Math.round(f)),q=Math.max(1,Math.round(g)),Z=n.useRef(null),G=n.useRef(null),[K,V]=n.useState({back:!1,forward:!1}),J=n.useCallback(()=>{const e=Z.current;if(!e)return;const t=X?e.clientWidth:e.clientHeight,n=X?e.scrollWidth:e.scrollHeight,r=Math.abs(X?e.scrollLeft:e.scrollTop);V(e=>{const o=r>1,s=n-t-r>1;return e.back===o&&e.forward===s?e:{back:o,forward:s}})},[X]);n.useEffect(()=>{const e=Z.current,t=G.current;if(!e)return;if(J(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(J);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[J]);const Q=n.useCallback(()=>{const e=Z.current;return e&&X&&"rtl"===getComputedStyle(e).direction?-1:1},[X]),U=n.useCallback((e,t)=>{const n=Z.current;if(!n)return;const r=t?function scrollBehavior(){return"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}():"auto";n.scrollBy(X?{left:e,behavior:r}:{top:e,behavior:r})},[X]);n.useEffect(()=>{const e=Z.current;if(!e||!E||!X)return;const onWheel=t=>{if(Math.abs(t.deltaY)<=Math.abs(t.deltaX))return;const n=t.deltaMode===t.DOM_DELTA_LINE?16*t.deltaY:t.deltaMode===t.DOM_DELTA_PAGE?t.deltaY*e.clientWidth:t.deltaY,r=Math.abs(e.scrollLeft);(n>0?e.scrollWidth-e.clientWidth-r>1:r>1)&&(t.preventDefault(),U(n*Q(),!1))};return e.addEventListener("wheel",onWheel,{passive:!1}),()=>e.removeEventListener("wheel",onWheel)},[Q,X,U,E]);const ee=n.useCallback(()=>{const e=Z.current,t=G.current;if(!e||!t)return[];const n=X&&"rtl"===getComputedStyle(e).direction,r=X?n?"right":"left":"top",o=n?-1:1,s=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-s)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[X]),te=n.useCallback((e,t=w)=>{const n=Z.current;if(!n)return;const r=Q(),o=X?n.clientWidth:n.clientHeight;if("page"===t)return void U(o*(e?1:-1)*r,!0);const s=ee(),l=s.filter(e=>e>1),i=s.filter(e=>e<-1),a=e?l[q-1]:i[i.length-q];U(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[Q,X,ee,q,w,U]),ne=n.useRef(null);n.useEffect(()=>()=>ne.current?.(),[]);const re=n.useCallback((e,t)=>{if(ne.current)return;const n=Q(),r=performance.now();let o=r,s=0;const tick=t=>{const r=t-o;o=t,U(h*r/1e3*(e?1:-1)*n,!1),s=requestAnimationFrame(tick)};s=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(s),ne.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&te(e,"item")};ne.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[te,Q,U,h]),oe=n.useRef(null);function pressHandlers(e){return"hold"!==w?{onClick:()=>te(e)}:{onPointerDown:t=>{0===t.button&&re(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),re(e,"keyup"))}}}n.useEffect(()=>()=>oe.current?.(),[]);const se="none"!==v&&("always"===v||K.back||K.forward),le="inline"===b;function scrollButton(t){const n=t?K.forward:K.back;if("auto"===v&&!n&&!le)return e("span",{});const r=e(s,{variant:k,size:F,color:I,density:O,elevation:1,label:t?H:_,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:a("flex items-center",X?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(i,{})}),...pressHandlers(t)});return le?e("span",{className:"flex shrink-0 items-center justify-center",children:r}):r}return t("div",{ref:z,className:a("relative flex min-w-0",le&&X?"flex-row items-stretch":"flex-col",le?d[F]:"",A),style:{"--p-ring":`var(--plass-${I}-ring)`,...B},...N,children:[se&&le?scrollButton(!1):null,e("div",{ref:Z,tabIndex:0,role:j?"group":void 0,"aria-label":j,className:a("min-h-0 min-w-0 grow",X?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",y?X?"snap-x snap-mandatory":"snap-y snap-mandatory":"",L?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",x&&(K.back||K.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:J,onPointerDown:function beginDrag(e){if(!x||"touch"===e.pointerType||0!==e.button)return;oe.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,s=t.scrollTop;let l=!1;const i=document.body.style.getPropertyValue("-webkit-user-select"),move=e=>{const i=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(X?i:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}X?t.scrollLeft=o-i:t.scrollTop=s-a},release=()=>{oe.current=null,t.removeEventListener("pointermove",move),t.removeEventListener("pointerup",end),t.removeEventListener("pointercancel",release),delete t.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{const e=l;if(release(),!e)return;const swallow=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",swallow,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",swallow,!0),0)};oe.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:G,className:a(y?"[&>*]:snap-start":""),style:{display:"grid",gap:l(m),gridAutoFlow:X?"column":"row",...X?{width:"max-content",gridTemplateRows:`repeat(${$}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${$}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:T})}),se&&le?scrollButton(!0):null,se&&!le?t("div",{className:a("pointer-events-none absolute inset-0 flex justify-between",X?"items-center":"flex-col items-center",u[F]),children:[scrollButton(!1),scrollButton(!0)]}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{takeSelection as i}from"../../internal/drag.js";import{PlIconButton as s}from"../icon-button/PlIconButton.js";import{spacingValue as l}from"../../internal/grid.js";import{ChevronIcon as a}from"../../internal/icons.js";import{cx as c}from"../../internal/styles.js";import{useResponsiveValue as u}from"../../internal/responsive.js";import{overscrollClasses as d,useWheelScroll as f}from"../../internal/wheel.js";const p={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},m={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const PlScrollZone=/* @__PURE__ */n.forwardRef(function PlScrollZone({orientation:v,lines:g=1,spacing:w=2,buttons:b="auto",buttonPlacement:h="inline",mode:x="item",step:y=1,speed:k=900,snap:L=!1,drag:E=!0,wheel:j=!0,overscroll:C="contain",scrollbar:R=!1,variant:B="glass",size:M,color:N,density:P,label:T,previousLabel:z,nextLabel:A,className:D,style:S,children:H,...F},I){const W=u(v,"horizontal"),$=r(),q=o(),O=z??q.previous,X=A??q.next,Y=M??$.size??"md",Z=N??$.color??"primary",_=P??$.density??"default",K="horizontal"===W,G=Math.max(1,Math.round(g)),J=Math.max(1,Math.round(y)),Q=n.useRef(null),U=n.useRef(null),[V,ee]=n.useState({back:!1,forward:!1}),te=n.useCallback(()=>{const e=Q.current;if(!e)return;const t=K?e.clientWidth:e.clientHeight,n=K?e.scrollWidth:e.scrollHeight,r=Math.abs(K?e.scrollLeft:e.scrollTop);ee(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[K]);n.useEffect(()=>{const e=Q.current,t=U.current;if(!e)return;if(te(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(te);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[te]);const ne=n.useCallback(()=>{const e=Q.current;return e&&K&&"rtl"===getComputedStyle(e).direction?-1:1},[K]),re=n.useCallback((e,t)=>{const n=Q.current;if(!n)return;const r=t?function scrollBehavior(){return"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"instant":"smooth"}():"instant";n.scrollBy(K?{left:e,behavior:r}:{top:e,behavior:r})},[K]);f(Q,{enabled:j&&K,overscroll:C});const oe=n.useCallback(()=>{const e=Q.current,t=U.current;if(!e||!t)return[];const n=K&&"rtl"===getComputedStyle(e).direction,r=K?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],s=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);s.includes(t)||s.push(t)}return s.sort((e,t)=>e-t)},[K]),ie=n.useCallback((e,t=x)=>{const n=Q.current;if(!n)return;const r=ne(),o=K?n.clientWidth:n.clientHeight;if("page"===t)return void re(o*(e?1:-1)*r,!0);const i=oe(),s=i.filter(e=>e>1),l=i.filter(e=>e<-1),a=e?s[J-1]:l[l.length-J];re(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ne,K,oe,J,x,re]),se=n.useRef(null);n.useEffect(()=>()=>se.current?.(),[]);const le=n.useCallback((e,t)=>{if(se.current)return;const n=ne(),r=performance.now();let o=r,i=0;const tick=t=>{const r=t-o;o=t,re(k*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(tick)};i=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(i),se.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&ie(e,"item")};se.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[ie,ne,re,k]),ae=n.useRef(null);function pressHandlers(e){return"hold"!==x?{onClick:()=>ie(e)}:{onPointerDown:t=>{0===t.button&&le(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),le(e,"keyup"))}}}n.useEffect(()=>()=>ae.current?.(),[]);const ce="none"!==b&&("always"===b||V.back||V.forward),ue="inline"===h;function scrollButton(t){const n=t?V.forward:V.back;if("auto"===b&&!n&&!ue)return e("span",{});const r=e(s,{variant:B,size:Y,color:Z,density:_,elevation:1,label:t?X:O,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:c("flex items-center",K?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(a,{})}),...pressHandlers(t)});return ue?e("span",{className:"flex shrink-0 items-center justify-center",children:r}):r}return t("div",{ref:I,className:c("relative flex min-w-0",ue&&K?"flex-row items-stretch":"flex-col",ue?m[Y]:"",D),style:{"--p-ring":`var(--plass-${Z}-ring)`,...S},...F,children:[ce&&ue?scrollButton(!1):null,e("div",{ref:Q,tabIndex:V.back||V.forward?0:void 0,role:T?"group":void 0,"aria-label":T,className:c("min-h-0 min-w-0 grow",K?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",d(C,K),L?K?"snap-x snap-mandatory":"snap-y snap-mandatory":"",R?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",E&&(V.back||V.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:te,onPointerDown:function beginDrag(e){if(!E||"touch"===e.pointerType||0!==e.button)return;ae.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,s=t.scrollTop;let l=!1,a=null;const move=e=>{if(0===e.buttons)return void end();const c=e.clientX-n,u=e.clientY-r;if(!l){if(Math.abs(K?c:u)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",a=i()}K?t.scrollLeft=o-c:t.scrollTop=s-u},release=()=>{ae.current=null,t.removeEventListener("pointermove",move),t.removeEventListener("pointerup",end),t.removeEventListener("pointercancel",release),delete t.dataset.dragging,a?.(),a=null},end=()=>{const e=l;if(release(),!e)return;const swallow=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",swallow,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",swallow,!0),0)};ae.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:U,className:c(L?"[&>*]:snap-start":""),style:{display:"grid",gap:l(w),gridAutoFlow:K?"column":"row",...K?{width:"max-content",gridTemplateRows:`repeat(${G}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${G}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:H})}),ce&&ue?scrollButton(!0):null,ce&&!ue?t("div",{className:c("pointer-events-none absolute inset-0 flex justify-between",K?"items-center":"flex-col items-center",p[Y]),children:[scrollButton(!1),scrollButton(!0)]}):null]})});