plass-ui 1.6.0 → 1.8.0

package/dist/components/popover/PlPopover.js

@@ -1 +1 @@
-"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]})})})]})}
+"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 d,hasContent as m,metaTextClasses as p,radiusClasses as c,sheetBodyClasses as u,sheetHeaderGapClasses as f,sheetPaddingXClasses as g,sheetPaddingYClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as v,surfaceSlots as b,targetClasses as y}from"../../internal/styles.js";const w={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j=/* @__PURE__ */[d,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={xs:8,sm:9,md:10,lg:11,xl:12},O=/* @__PURE__ */[y,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center p-0","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" ");export const PlPopoverClose=o.Close;export function PlPopover({size:t,color:d,density:y,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=d??K.color??"primary",V=y??K.density??"default",X=g[V][S],Y=x[V][S],Z=N[S],ss=m(_)||m(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(j,c[S],u[S],h[S],X,Y,void 0===G?w[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",f[S]),children:[m(_)?s(o.Title,{className:n("m-0 font-semibold",v[S]),children:_}):null,m(z)?s(o.Description,{className:n("m-0 text-(--plass-muted-fg)",p[S]),children:z}):null]}),E?s(o.Close,{"aria-label":Q,className:O,children:s(r,{})}):null]}):null,m(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 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))})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r,useLocale as s}from"../../internal/defaults.js";import{controlNaming as t}from"../../internal/form.js";import{Progress as i}from"@base-ui/react/progress";import{fillClasses as n,fillTransitionClasses as o,plateGapClasses as m,plateRadiusClasses as c,plateSizeClasses as f,progressAriaText as u,progressFraction as d,progressSlots as p,progressText as x,progressValue as h,trackClasses as b}from"../../internal/progress.js";import{cx as y,metaTextClasses as g,stackGapClasses as j}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l,color:w,count:N=4,value:v=null,min:M=0,max:P=100,label:V,showValue:k=!1,format:z,className:A,style:B,"aria-label":R,"aria-labelledby":T,...L},$){const q=r(),C=s(),D=l??q.size??"md",E=w??q.color??"primary",F=d(v,M,P),G=null===F,H=void 0!==z,I=Math.max(1,Math.floor(N));return a(i.Root,{ref:$,value:h(v,M,P),min:M,max:P,format:z,locale:C,getAriaValueText:u(F,H,C),className:y("inline-flex flex-col",j[D],A),style:{...p(E),...B},...t(R,T),...L,children:[V||k?a("div",{className:y("flex items-baseline gap-2",V?"justify-between":"justify-end",g[D]),children:[V?e(i.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:V}):null,k?e(i.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>x(F,e,H,C)}):null]}):null,e(i.Track,{className:y("flex",m[D]),children:Array.from({length:I},(a,l)=>e("span",{className:y("relative overflow-hidden",b,f[D],c[D]),children:e("span",{"aria-hidden":"true",className:y("absolute inset-y-0 start-0",n,G?"plass-plate-wave w-full":o),style:G?{"--p-i":l}:{width:`${Math.min(100,Math.max(0,100*(F*I-l)))}%`}})},l))})]})});

package/dist/components/progress-circular/PlProgressCircular.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { type PlassProgressProps } from '../../internal/progress.js';
 export interface PlProgressCircularProps extends PlassProgressProps {
-    /** Diameter of the ring. Sits just under the control ladder at every step. */
+    /**
+     * Diameter of the ring, and the size of the text beside it. Sits just under
+     * the control ladder at every step. `diameter` overrides the ring's part.
+     */
     size?: PlassProgressProps['size'];
+    /**
+     * The ring's diameter in pixels, for a ring larger than the ladder goes: a
+     * loading screen rather than a row. It takes the place of `size`'s diameter
+     * and the stroke follows it; `size` still sets the gap and the text beside
+     * the ring. Anything but a finite number above zero is ignored.
+     */
+    diameter?: number;
 }
 /**
  * A ring that fills, and the one to reach for where there is no room for a bar

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 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]})});
+"use client";import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{useDefaults as a,useLocale as t}from"../../internal/defaults.js";import{controlNaming as l}from"../../internal/form.js";import{Progress as o}from"@base-ui/react/progress";import{progressAriaText as i,progressFraction as n,progressSlots as m,progressText as c,progressValue as d,ringMetrics as f}from"../../internal/progress.js";import{cx as u,gapClasses as p,metaTextClasses as h}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */s.forwardRef(function PlProgressCircular({size:x,diameter:k,color:g,value:v=null,min:y=0,max:$=100,label:b,showValue:j=!1,format:w,className:N,style:P,"aria-label":C,"aria-labelledby":V,...z},D){const I=a(),L=t(),R=x??I.size??"md",W=g??I.color??"primary",_=n(v,y,$),A=null===_,B=void 0!==w,G=`${s.useId()}-fill`,{diameter:M,stroke:T}=f(R,k),q=M/2,E=q-T/2,F=2*Math.PI*E,H=A?`${.28*F} ${F}`:`${F}`,J=A?0:F*(1-_);return e(o.Root,{ref:D,value:d(v,y,$),min:y,max:$,format:w,locale:L,getAriaValueText:i(_,B,L),className:u("inline-flex items-center",p[R],h[R],N),style:{...m(W),...P},...l(C,V),...z,children:[e("svg",{className:u("shrink-0",A&&"plass-ring-spin"),width:M,height:M,viewBox:`0 0 ${M} ${M}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:e("linearGradient",{id:G,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:q,cy:q,r:E,stroke:"var(--plass-track)",strokeWidth:T}),r("circle",{cx:q,cy:q,r:E,stroke:`url(#${G})`,strokeWidth:T,strokeLinecap:"round",strokeDasharray:H,strokeDashoffset:J,transform:`rotate(-90 ${q} ${q})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)] motion-reduce:[transition-duration:0ms]"})]}),b?r(o.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:b}):null,j?r(o.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>c(_,r,B,L)}):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 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}`)})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a,useLocale as s}from"../../internal/defaults.js";import{controlNaming as t}from"../../internal/form.js";import{Progress as o}from"@base-ui/react/progress";import{barThicknessClasses as i,fillClasses as n,fillTransitionClasses as m,progressAriaText as u,progressFraction as f,progressSlots as c,progressText as d,progressValue as p,trackClasses as x}from"../../internal/progress.js";import{cx as b,metaTextClasses as g,stackGapClasses as j}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */r.forwardRef(function PlProgressLinear({size:r,color:h,value:w=null,min:y=0,max:N=100,label:v,showValue:P=!1,format:L,className:V,style:k,"aria-label":z,"aria-labelledby":R,...T},A){const I=a(),$=s(),q=r??I.size??"md",B=h??I.color??"primary",C=f(w,y,N),D=null===C,E=void 0!==L;return l(o.Root,{ref:A,value:p(w,y,N),min:y,max:N,format:L,locale:$,getAriaValueText:u(C,E,$),className:b("flex w-full flex-col",j[q],V),style:{...c(B),...k},...t(z,R),...T,children:[v||P?l("div",{className:b("flex items-baseline gap-2",v?"justify-between":"justify-end",g[q]),children:[v?e(o.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,P?e(o.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>d(C,e,E,$)}):null]}):null,e(o.Track,{className:b("relative w-full overflow-hidden rounded-full",x,i[q]),children:e(o.Indicator,{className:b("rounded-full",n,D?"plass-progress-sweep":`absolute top-0 ${m}`)})})]})});

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

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

package/dist/components/rating/PlRating.js

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

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,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}`)}))})]})}
+"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 i,compactNumber as s,dimmedByHover as o,formatCategory as n,markerRadii as c,markGap as u,markPath as d,markShapes as m,pointX as h,seriesColor as x,toValues as p,writeChartValue as f}from"../../internal/chart.js";import{useDefaults as b,useLocale as v}from"../../internal/defaults.js";import{cx as y,srOnlyClasses as k}from"../../internal/styles.js";import{textOf as z}from"../../internal/text.js";function writeX(e,r,a,t){return"number"!=typeof e?n(e,t):a?z(a(e,r)):s(e,t)}export function PlScatterChart({shape:r="auto",pointRadius:l,maxRadius:s,series:o,categories:n,size:u,xAxis:y,...k}){const z=b(),g=u??z.size??"md",j=v(k.locale),M=k.format,w=l??c[g],F=a.useMemo(()=>p(o),[o]),S=a.useMemo(()=>o.map((e,r)=>x(e,r)),[o]),$=a.useCallback(e=>s??Math.max(w+2,e/12),[s,w]),C=o.reduce((e,r)=>r.color?e:e+1,0),N="auto"===r||"varied"===r?"circle":r,E="varied"===r||"auto"===r&&C>3,L=a.useCallback(e=>E?m[e%m.length]:N,[E,N]),A=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,s)=>{if(null===t.value)return;const o=h(t,s,n);null!==o&&r.push({series:l,index:s,x:e.categoryValuePx(o),y:e.valuePx(t.value),r:void 0===t.z?w:i(t.z,a,$(e.height),2)})})}),r},[n,w,$]),B=a.useCallback(e=>{const r=F[e.series]?.[e.index];if(!r||null===r.value)return null;const a=[{seriesIndex:e.series,name:o[e.series]?.name,color:r.color??S[e.series],value:r.value,formatted:f(r.value,M,j),label:r.label,aside:void 0===r.z?void 0:f(r.z,M,j)}];return{heading:writeX(r.x??n?.[e.index]??e.index,e.index,y?.tickFormat,j),items:a}},[F,o,S,n,y?.tickFormat,M,j]);return e(t,{...k,series:o,categories:n,size:g,xScale:"value",xAxis:y,marks:A,markTooltip:B,markInset:$,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:d(L(r),5,5,4),fill:a})}),table:(r,a)=>e(ScatterTable,{id:r,...a,series:o,categories:n,xLabel:y?.label,yLabel:k.yAxis?.label,xFormat:y?.tickFormat,locale:j,format:M}),children:r=>e(ScatterMarks,{context:r,shapeOf:L})})}function ScatterMarks({context:r,shapeOf:t}){const{marks:i,values:s,colors:n,visible:c,hovered:m,activeMark:h}=r,x=a.useMemo(()=>[...i].sort((e,r)=>r.r-e.r),[i]);return e("g",{children:x.map(r=>{const a=s[r.series]?.[r.index],i=o(m,r.series,c),x=h?.series===r.series&&h?.index===r.index;return e("path",{d:d(t(r.series),r.x,r.y,r.r),fill:a?.color??n[r.series],stroke:"var(--plass-chart-gap)",strokeWidth:u,opacity:i?.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:a,caption:t,labelledBy:l,series:i,categories:s,xLabel:o,yLabel:n,xFormat:c,locale:u,format:d}){const m=i.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:a,className:y(k),"aria-labelledby":l,children:[t?e("caption",{children:t}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:o??"x"}),e("th",{scope:"col",children:n??"y"}),m?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:i.flatMap((a,t)=>a.data.map((l,i)=>{const o="object"==typeof l&&null!==l?l:null,n=o?o.y:"number"==typeof l?l:null,h=o?.x??s?.[i]??i;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:writeX(h,i,c,u)}),e("td",{children:void 0!==o?.label?o.label:null!==n&&Number.isFinite(n)?f(n,d,u):""}),m?e("td",{children:void 0===o?.z?"":f(o.z,d,u)}):null]},`${t}-${i}`)}))})]})}

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

@@ -1 +1 @@
-"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]})});
+"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 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"},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=i("flex touch-none select-none","p-[0.125rem]",c[S],"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","always"===f?"opacity-100":"opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100",v?.scrollbar);return o(r.Root,{ref:N,className:i("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:i("size-full overscroll-contain",n[S],e,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:i(h,v?.thumb)})}):null,T?a(r.Scrollbar,{orientation:"horizontal",className:k,children:a(r.Thumb,{className:i(h,v?.thumb)})}):null,C&&T?a(r.Corner,{}):null]})});

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

package/dist/components/segmented-button/PlSegmentedButton.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{glowPointerMove as a}from"../../internal/glow.js";import{useDefaults as r}from"../../internal/defaults.js";import{Radio as l}from"@base-ui/react/radio";import{RadioGroup as o}from"@base-ui/react/radio-group";import{controlHeightClasses as n,controlSlots as i,controlTextClasses as d,focusRingInsetClasses as c,forcedCheckedTextClasses as u,forcedFieldEdgeClasses as p,forcedFillClasses as f,gapClasses as h,glassClasses as g,hasContent as m,iconClasses as v,paddingXClasses as y,transitionClasses as b}from"../../internal/styles.js";const x=/* @__PURE__ */s.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1}),w={solid:`${g} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${p}`,glass:`${g} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},k={solid:"[background-image:var(--p-fill)] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${g} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${g} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},P={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */s.forwardRef(function PlSegment({value:r,startIcon:o,endIcon:i,disabled:p=!1,className:f,children:g,onPointerMove:w,...k},j){const{variant:$,size:R,density:z,fullWidth:N}=s.useContext(x);return t(l.Root,{ref:j,value:r,disabled:p,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",n[R],d[R],h[R],y[z][R],"rounded-full",b,v,p?"":"plass-glow","not-data-[checked]:[--p-glow:var(--p-soft)]","not-data-[checked]:[--p-flash:var(--p-soft-hover)]","text-(--plass-muted-fg) hover:text-(--plass-fg)",P[$],u,c,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[readonly]:cursor-default",N?"flex-1":"",f??""].filter(Boolean).join(" "),onPointerMove:a(!p,w),...k,children:[m(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,g,m(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null]})});export const PlSegmentedButton=/* @__PURE__ */s.forwardRef(function PlSegmentedButton({variant:a="glass",size:l,color:n,density:d,elevation:c=0,value:u,defaultValue:p=null,onValueChange:h,disabled:g=!1,readOnly:m=!1,name:v,fullWidth:y=!1,className:P,style:j,children:$,...R},z){const N=r(),S=l??N.size??"md",W=n??N.color??"primary",C=d??N.density??"default",[B,A]=s.useState(p),M=void 0!==u,O=M?u:B,V=s.useRef(null),E=s.useRef(null),I=s.useCallback(e=>{const t=V.current,s=E.current;if(!t||!s)return;const a=t.querySelector("[data-segment][data-checked]");if(!a)return;const r=!e||!s.hasAttribute("data-ready");r&&s.removeAttribute("data-ready"),s.style.setProperty("--p-seg-x",`${a.offsetLeft}px`),s.style.setProperty("--p-seg-y",`${a.offsetTop}px`),s.style.setProperty("--p-seg-w",`${a.offsetWidth}px`),s.style.setProperty("--p-seg-h",`${a.offsetHeight}px`),r&&s.offsetWidth,s.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{I(!0)},[I,O,a,S,C,y,$]),s.useEffect(()=>{const e=V.current;if(!e)return;const t=new ResizeObserver(()=>I(!1));return t.observe(e),()=>t.disconnect()},[I]);const L=s.useMemo(()=>({variant:a,size:S,density:C,fullWidth:y}),[a,S,C,y]);return e(x.Provider,{value:L,children:t(o,{ref:e=>{V.current=e,"function"==typeof z?z(e):z&&(z.current=e)},value:O,onValueChange:e=>{const t=e??null;M||A(t),h?.(t)},disabled:g,readOnly:m,name:v,className:["relative inline-flex items-center rounded-full",w[a],b,m?"saturate-[0.55]":"",g?"opacity-50 saturate-[0.35]":"",y?"flex w-full":"",P??""].filter(Boolean).join(" "),style:{...i(W,c,a),...j},...R,children:[null!=O?e("span",{ref:E,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",k[a],f,"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,$]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useCommitChange as s}from"../../internal/commit-change.js";import{controlNaming as r,useDisabled as l}from"../../internal/form.js";import{glowPointerMove as n}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as d}from"@base-ui/react/radio-group";import{controlHeightClasses as c,controlSlots as u,controlTextClasses as p,focusRingInsetClasses as f,forcedCheckedTextClasses as m,forcedFieldEdgeClasses as h,forcedFillClasses as g,gapClasses as v,glassClasses as b,hasContent as y,iconClasses as x,paddingXClasses as w,transitionClasses as k}from"../../internal/styles.js";const j=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1,disabled:!1,readOnly:!1}),P={solid:`${b} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${h}`,glass:`${b} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},R={solid:"plass-fill data-[placed]:[--p-fill-on:1] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${b} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${b} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},$={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */a.forwardRef(function PlSegment({value:s,startIcon:r,endIcon:o,disabled:d=!1,className:u,children:h,onPointerMove:g,...b},P){const{variant:R,size:A,density:z,fullWidth:N,disabled:C,readOnly:O}=a.useContext(j),S=l(d),W=!S&&!C&&!O;return t(i.Root,{ref:P,value:s,disabled:S,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",c[A],p[A],v[A],w[z][A],"rounded-full",k,x,W?"plass-glow":"","not-data-[checked]:[--p-glow:var(--p-soft)]","not-data-[checked]:[--p-flash:var(--p-soft-hover)]","text-(--plass-muted-fg) not-data-[checked]:not-data-[disabled]:not-data-[readonly]:hover:text-(--plass-fg)",$[R],m,f,"data-[disabled]:cursor-not-allowed",C?"":"data-[disabled]:opacity-50","data-[readonly]:cursor-default",N?"flex-1":"",u??""].filter(Boolean).join(" "),onPointerMove:n(W,g),...b,children:[y(r)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r}):null,h,y(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]})});export const PlSegmentedButton=/* @__PURE__ */a.forwardRef(function PlSegmentedButton({variant:n="glass",size:i,color:c,density:p,elevation:f=0,value:m,defaultValue:h=null,onValueChange:v,disabled:b=!1,readOnly:y=!1,name:x,fullWidth:w=!1,className:$,style:A,children:z,"aria-label":N,"aria-labelledby":C,...O},S){const W=o(),B=l(b),E=i??W.size??"md",F=c??W.color??"primary",M=p??W.density??"default",[V,q]=a.useState(h),I=void 0!==m,G=I?m:V,H=a.useRef(null),L=a.useRef(null),T=a.useRef(!1);a.useEffect(()=>{T.current=!0},[]);const D=a.useRef(0),J=a.useCallback(e=>{L.current=e,e&&!T.current&&e.setAttribute("data-placed","")},[]),K=a.useCallback(e=>{const t=H.current,a=L.current;if(!t||!a)return;const s=t.querySelector("[data-segment][data-checked]");if(!s)return;const r=s.offsetLeft,l=s.offsetTop,n=s.offsetWidth,o=s.offsetHeight,i=!e||!a.hasAttribute("data-ready");i&&(cancelAnimationFrame(D.current),a.removeAttribute("data-ready")),a.style.setProperty("--p-seg-x",`${r}px`),a.style.setProperty("--p-seg-y",`${l}px`),a.style.setProperty("--p-seg-w",`${n}px`),a.style.setProperty("--p-seg-h",`${o}px`),a.setAttribute("data-placed",""),i&&(D.current=requestAnimationFrame(()=>{a.setAttribute("data-ready","")}))},[]);a.useEffect(()=>()=>cancelAnimationFrame(D.current),[]),s(H,[G,n,E,M,w],()=>K(!0),L),a.useEffect(()=>{const e=H.current;if(!e)return;const t=new ResizeObserver(()=>K(!1));return t.observe(e),()=>t.disconnect()},[K]);const Q=a.useMemo(()=>({variant:n,size:E,density:M,fullWidth:w,disabled:B,readOnly:y}),[n,E,M,w,B,y]);return e(j.Provider,{value:Q,children:t(d,{ref:e=>{H.current=e,"function"==typeof S?S(e):S&&(S.current=e)},value:G,onValueChange:e=>{const t=e??null;I||q(t),v?.(t)},disabled:B,readOnly:y,name:x,className:["relative inline-flex items-center rounded-full",P[n],k,y?"saturate-[0.55]":"",B?"opacity-50 saturate-[0.35]":"",w?"flex w-full":"",$??""].filter(Boolean).join(" "),style:{...u(F,f,n),...A},...r(N,C),...O,children:[null!=G?e("span",{ref:J,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",R[n],g,"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] motion-safe:data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,z]})})});

package/dist/components/select/PlSelect.d.ts

@@ -54,7 +54,10 @@ export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentProp
     /** The name of what the select holds, wired to the trigger by Base UI's Field. */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the trigger, or in its top edge.
+     * Where the `label` goes — above the trigger, in its top edge, or inside it
+     * where the choice would be written until the select is focused, open or
+     * holds a value. With a `startIcon` a `float` label stays in the edge,
+     * because the icon is where it would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */

package/dist/components/select/PlSelect.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Select as s}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{CheckIcon as n,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as o}from"../../internal/sizer.js";import{glowPointerMove as c}from"../../internal/glow.js";import{FieldNotch as d,notchShellStyle as m}from"../../internal/notch.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{controlHeightClasses as u,controlTextLeadingClasses as f,cx as h,disabledClasses as g,fieldReadOnlyClasses as v,fieldRestClasses as b,focusWithinRingClasses as x,forcedHighlightedClasses as y,gapClasses as j,glassClasses as N,hasContent as w,iconClasses as P,metaTextClasses as S,paddingXClasses as z,radiusClasses as I,stackGapClasses as O,surfaceSlots as V,transitionClasses as k}from"../../internal/styles.js";const $=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",k,P].join(" "),_=x,C=/* @__PURE__ */[N,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),M=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",k,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",y,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" ");export const PlSelect=/* @__PURE__ */l.forwardRef(function PlSelect({variant:x="glass",size:y,color:N,density:P,elevation:k=0,items:R,value:T,defaultValue:q,onValueChange:B,placeholder:D,label:E,labelPlacement:K,description:W,error:L,invalid:A,startIcon:F,fullWidth:G=!1,disabled:H=!1,readOnly:J=!1,required:Q=!1,name:U,id:X,className:Y,hotKeys:Z,classNames:ee,style:ae,...le},te){const se=t(),re=y??se.size??"md",ne=N??se.color??"primary",ie=P??se.density??"default",oe="notch"===(K??se.labelPlacement??"top")&&w(E),ce=w(L),de=A??ce,me=de?"danger":ne,pe=!H&&!J,ue=l.useMemo(()=>R.map(e=>({label:e.label??String(e.value),value:e.value})),[R]),[fe,he]=l.useState(!1);l.useEffect(()=>{J&&he(!1)},[J]);const ge=l.useMemo(()=>G?[]:[...R.map(e=>e.label??String(e.value)),...w(D)?[D]:[]],[G,R,D]),ve=e(r.Label,{className:h(S[re],"font-semibold",H?"text-(--plass-muted-fg)":"text-(--plass-fg)",ee?.label),children:E});return a(r.Root,{disabled:H,invalid:de,className:["flex-col align-top",O[re],G?"flex w-full":"inline-flex",Y??""].filter(Boolean).join(" "),style:{...V(me,k),...ae},...le,children:[w(E)&&!oe?ve:null,a(s.Root,{id:X,name:U,items:ue,value:T,defaultValue:q,onValueChange:e=>B?.(e),disabled:H,readOnly:J,required:Q,open:fe&&!J,onOpenChange:e=>he(e&&!J),children:[e(d,{notched:oe,size:re,density:ie,variant:x,disabled:H,readOnly:J,label:ve,children:a(s.Trigger,{ref:te,onKeyDown:p(Z,void 0),onPointerMove:c(pe),style:oe?m:void 0,className:[$,oe?"":_,u[re],f[re],I[re],j[re],z[ie][re],H?g[x]:J?`${v[x]} cursor-default`:b[x],pe?"plass-glow":"",ee?.control].filter(Boolean).join(" "),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(s.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)"].join(" "),placeholder:D}),e(o,{samples:ge})]}),e(s.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]})}),e(s.Portal,{children:e(s.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(s.Popup,{className:`${C} ${I[re]} ${f[re]}`,style:V(me,3),children:R.map(l=>a(s.Item,{value:l.value,disabled:l.disabled,className:M,children:[e(s.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(n,{})}),e(s.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)))})})})]}),W?e(r.Description,{className:h("m-0",S[re],"text-(--plass-muted-fg)",ee?.description),children:W}):null,e(r.Error,ce?{match:!0,className:h(S[re],"text-(--p-accent)",ee?.error),children:L}:{className:h(S[re],"text-(--p-accent)",ee?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{controlNaming as t,useDisabled as s}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{Select as n}from"@base-ui/react/select";import{Field as o}from"@base-ui/react/field";import{CheckIcon as i,ChevronIcon as c}from"../../internal/icons.js";import{WidthSizer as d}from"../../internal/sizer.js";import{textOf as m}from"../../internal/text.js";import{glowPointerMove as p}from"../../internal/glow.js";import{FieldNotch as u,floatControlClassName as f,floatPlaceholderClassName as h,notchShellStyle as g,resolveNotch as v}from"../../internal/notch.js";import{hotKeyHandler as b}from"../../internal/keys.js";import{controlHeightClasses as x,controlTextLeadingClasses as y,cx as j,disabledClasses as N,fieldDescriptionClasses as w,fieldReadOnlyClasses as P,fieldRestClasses as S,fieldSlots as z,focusWithinRingClasses as I,forcedHighlightedClasses as O,gapClasses as V,glassClasses as k,hasContent as M,iconClasses as R,metaTextClasses as $,paddingXClasses as _,radiusClasses as C,stackGapClasses as D,surfaceSlots as E,transitionClasses as T}from"../../internal/styles.js";const q=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none p-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",T,R].join(" "),B=I,K=/* @__PURE__ */[k,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),W=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",T,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",O,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" ");export const PlSelect=/* @__PURE__ */l.forwardRef(function PlSelect({variant:I="glass",size:O,color:k,density:R,elevation:T=0,items:L,value:A,defaultValue:F,onValueChange:G,placeholder:H,label:J,labelPlacement:Q,description:U,error:X,invalid:Y,startIcon:Z,fullWidth:ee=!1,disabled:ae=!1,readOnly:le=!1,required:te=!1,name:se,id:re,className:ne,hotKeys:oe,classNames:ie,style:ce,"aria-label":de,"aria-labelledby":me,...pe},ue){const fe=r(),he=s(ae),ge=O??fe.size??"md",ve=k??fe.color??"primary",be=R??fe.density??"default",xe=Q??fe.labelPlacement??"top",{notched:ye,float:je}=v(xe,J,M(Z)),Ne=M(X),we=Y??Ne,Pe=we?"danger":ve,Se=!he&&!le,ze=l.useMemo(()=>L.map(e=>({label:e.label??String(e.value),value:e.value})),[L]),[Ie,Oe]=l.useState(!1);l.useEffect(()=>{le&&Oe(!1)},[le]);const Ve=l.useRef(null),ke=je?m(J):"",Me=l.useMemo(()=>ee?[]:[...L.map(e=>e.label??String(e.value)),H].map(m).concat(ke).filter(e=>""!==e),[ee,L,H,ke]),Re=e(o.Label,{className:j($[ge],"font-semibold",he?"text-(--plass-muted-fg)":"text-(--plass-fg)",ie?.label),children:J});return a(o.Root,{disabled:he,invalid:we,className:["flex-col align-top",D[ge],ee?"flex w-full":"inline-flex",ne??""].filter(Boolean).join(" "),style:{...z(Pe,T),...ce},...pe,children:[M(J)&&!ye?Re:null,a(n.Root,{id:re,name:se,items:ze,value:A,defaultValue:F,onValueChange:e=>G?.(e),disabled:he,readOnly:le,required:te,open:Ie&&!le,onOpenChange:(e,a)=>Oe(e&&!le&&a.event!==Ve.current),children:[e(u,{notched:ye,size:ge,density:be,variant:I,disabled:he,readOnly:le,float:je,label:Re,children:a(n.Trigger,{ref:ue,...t(de,me),onKeyDown:b(oe,void 0),onMouseDown:e=>{Ve.current=le?e.nativeEvent:null},onPointerMove:p(Se),style:ye?g:void 0,className:[q,ye?"":B,x[ge],y[ge],C[ge],V[ge],_[be][ge],he?N[I]:le?`${P[I]} cursor-default`:S[I],Se?"plass-glow":"",je?f:"",ie?.control].filter(Boolean).join(" "),children:[Z?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Z}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(n.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)",je?h:""].join(" "),placeholder:H}),e(d,{samples:Me})]}),e(n.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"].join(" "),children:e(c,{})})]})}),e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(n.Popup,{className:`${K} ${C[ge]} ${y[ge]}`,style:E(Pe,3),children:L.map(l=>a(n.Item,{value:l.value,disabled:l.disabled,className:W,children:[e(n.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e(n.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)))})})})]}),U?e(o.Description,{className:j(w(ge),ie?.description),children:U}):null,e(o.Error,Ne?{match:!0,className:j($[ge],"text-(--p-accent)",ie?.error),children:X}:{className:j($[ge],"text-(--p-accent)",ie?.error)})]})});

package/dist/components/sidebar/PlSidebar.d.ts

@@ -62,6 +62,18 @@ export interface PlSidebarProps extends Omit<React.ComponentPropsWithoutRef<'asi
     /** Which state it starts in, for an uncontrolled standalone sidebar. @default false */
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Keeps the children in the document once the sidebar has collapsed into a
+     * drawer that is closed, hidden and out of reach, as `PlDrawer`'s own
+     * `keepMounted` does.
+     *
+     * For a sidebar that is the site's navigation. Below `collapseBelow` a closed
+     * drawer is otherwise not in the document, and neither are its links — and
+     * that is the width a search engine reads a page at. Above it nothing
+     * changes, because the column is always there.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * Whether the column holds its place while the page scrolls past it.
      *

package/dist/components/sidebar/PlSidebar.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{useLabels as o}from"../../internal/labels.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{PlDrawer as a}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as l,PlPageLayoutContext as u,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as b,surfaceSlots as h,toLength as v,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=b;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:b,width:w,minWidth:z=160,maxWidth:C=480,resizable:R=!1,onResize:j,onResizeEnd:N,collapseBelow:P,open:S,defaultOpen:k=!1,onOpenChange:M,sticky:A=!0,title:B,variant:D="glass",size:E,color:L,density:O,elevation:I=0,divider:W=!0,padded:T=!0,label:X,closeLabel:$,resizeLabel:_,className:F,style:K,children:q,...G},H){const J=n(),Q=o(),U=X??Q.sidebar,V=$??Q.sidebarClose,Y=_??Q.sidebarResize,Z=E??J.size??"md",ee=L??J.color??"primary",te=O??J.density??"default",re=r.useContext(u),ne=r.useContext(d),oe=b??ne??"start",ie=P??(re.present?re.collapseBelow:"none"),ae=c(ie),[se,le]=r.useState(k),ue=void 0!==S,de=ue?S:re.present?re.open[oe]:se,ce=v(w)??y[Z],pe=r.useRef(null),me=r.useCallback(e=>{pe.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),fe=r.useRef(null);r.useEffect(()=>()=>fe.current?.(),[]);const be=r.useRef(null),he=toPixels(z,160),ve=toPixels(C,480),xe=Math.min(ve,Math.max(he,Math.round(toPixels(ce,he)))),applyWidth=e=>{const t=pe.current;if(!t)return e;const r=Math.min(ve,Math.max(he,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),be.current?.setAttribute("aria-valuenow",String(r)),r};return ae?e(a,{side:s(oe,J.direction),mode:"overlay",open:de,onOpenChange:e=>{ue||(re.present?re.setOpen(oe,e):le(e)),M?.(e)},title:B,size:Z,color:ee,density:te,closeLabel:V,extent:void 0===w?void 0:ce,"aria-label":B?void 0:U,className:F,style:K,children:q}):t("aside",{ref:me,"aria-label":U,className:p("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[D],W?p("start"===oe?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===re.scroll?"h-full":A?p("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[ie],x,F),style:{...h(ee,I),"--p-sidebar-w":ce,...K},...G,children:[e("div",{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?p(m[te][Z],f[te][Z]):""),children:q}),R?e("div",{ref:be,role:"separator","aria-orientation":"vertical","aria-label":Y,"aria-valuenow":xe,"aria-valuemin":he,"aria-valuemax":ve,tabIndex:0,className:p("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===oe?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=pe.current;if(!t||0!==e.button)return;const r=e.clientX,n=t.getBoundingClientRect().width,o="rtl"===getComputedStyle(t).direction,a="start"===oe===o?-1:1;let s=n;fe.current=i({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{s=applyWidth(n+(e.clientX-r)*a),j?.(s)},onEnd:()=>{fe.current=null,N?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===oe===t?-1:1;(e=>{const t=pe.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);j?.(r),N?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
+"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{useDocumentDirection as o}from"../../internal/direction.js";import{useLabels as i}from"../../internal/labels.js";import{beginPointerDrag as a}from"../../internal/drag.js";import{layoutBox as s}from"../../internal/layout-box.js";import{lazyPart as l}from"../../internal/lazy.js";import{drawerSide as u,expandedOnlyClasses as d,PlPageLayoutContext as c,PlassSidebarSideContext as p,useCollapsed as m}from"../../internal/page-layout.js";import{cx as f,sheetPaddingXClasses as b,sheetPaddingYClasses as x,sheetRestClasses as y,surfaceSlots as h,toLength as v,transitionClasses as w}from"../../internal/styles.js";const g={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},z=y,j=/* @__PURE__ */l(()=>import("../drawer/PlDrawer.js").then(e=>e.PlDrawer));function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:l,width:y,minWidth:P=160,maxWidth:S=480,resizable:k=!1,onResize:C,onResizeEnd:M,collapseBelow:N,open:R,defaultOpen:D=!1,onOpenChange:A,keepMounted:E=!1,sticky:L=!0,title:O,variant:I="glass",size:W,color:B,density:T,elevation:X=0,divider:$=!0,padded:_=!0,label:F,closeLabel:K,resizeLabel:U,className:q,style:G,children:H,...J},Q){const V=n(),Y=i(),Z=F??Y.sidebar,ee=K??Y.sidebarClose,te=U??Y.sidebarResize,re=W??V.size??"md",ne=B??V.color??"primary",oe=T??V.density??"default",ie=r.useContext(c),ae=r.useContext(p),se=l??ae??"start",le=N??(ie.present?ie.collapseBelow:"none"),ue=m(le),de=o(ue&&!V.direction),[ce,pe]=r.useState(D),me=void 0!==R,fe=me?R:ie.present?ie.open[se]:ce,changeOpen=e=>{me||(ie.present?ie.setOpen(se,e):pe(e)),A?.(e)},[be,xe]=r.useState(!1),[ye,he]=r.useState(fe);fe!==ye&&(he(fe),fe&&be&&xe(!1));const ve=v(y)??g[re],we=r.useRef(null),ge=r.useCallback(e=>{we.current=e,"function"==typeof Q?Q(e):Q&&(Q.current=e)},[Q]),ze=r.useRef(null);r.useEffect(()=>()=>ze.current?.(),[]);const je=r.useRef(null),Pe=k?toPixels(P,160):0,Se=k?toPixels(S,480):0,ke=k?Math.min(Se,Math.max(Pe,Math.round(toPixels(ve,Pe)))):0,applyWidth=e=>{const t=we.current;if(!t)return e;const r=Math.min(Se,Math.max(Pe,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),je.current?.setAttribute("aria-valuenow",String(r)),r},Ce=t("aside",{ref:ge,"aria-label":Z,className:f("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",z[I],$?f("start"===se?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===ie.scroll?"h-full":L?f("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",d[le],w,q),style:{...h(ne,X),"--p-sidebar-w":ve,...G},...J,children:[e("div",{className:f("min-h-0 flex-1 overflow-y-auto overscroll-contain",_?f(b[oe][re],x[oe][re]):""),children:H}),k?e("div",{ref:je,role:"separator","aria-orientation":"vertical","aria-label":te,"aria-valuenow":ke,"aria-valuemin":Pe,"aria-valuemax":Se,tabIndex:0,className:f("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===se?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",w,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=we.current;if(!t||0!==e.button)return;const r=e.clientX,{size:n,perPixel:o}=s(t,!0),i="rtl"===getComputedStyle(t).direction,l="start"===se===i?-1:1;let u=n;ze.current=a({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{u=applyWidth(n+(e.clientX-r)*l*o),C?.(u)},onEnd:()=>{ze.current=null,M?.(u)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===se===t?-1:1;(e=>{const t=we.current;if(!t)return;const r=s(t,!0).size,n=applyWidth(r+e);n!==r&&(C?.(n),M?.(n))})(("ArrowRight"===e.key?16:-16)*r)}}):null]});return!ue||be?Ce:e(r.Suspense,{fallback:Ce,children:e(j,{side:u(se,V.direction??de),mode:"overlay",open:fe,onOpenChange:changeOpen,onUnavailable:()=>{xe(!0),fe&&changeOpen(!1)},keepMounted:E,title:O,size:re,color:ne,density:oe,closeLabel:ee,extent:void 0===y?void 0:ve,"aria-label":O?void 0:Z,className:q,style:G,children:H})})});

package/dist/components/slider/PlSlider.d.ts

@@ -26,7 +26,8 @@ export interface PlSliderProps extends BaseSliderProps {
     /**
      * The name of the thumb at `index`, for a range whose two ends need names of
      * their own, such as "Minimum price" and "Maximum price". Left out, every
-     * thumb is named by `label`.
+     * thumb takes the slider's own name: an `aria-labelledby`, else an
+     * `aria-label`, else `label`.
      */
     getAriaLabel?: (index: number) => string;
     /**

package/dist/components/slider/PlSlider.js

@@ -1 +1 @@
-"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{Slider as o}from"@base-ui/react/slider";import{controlSlots as s,focusRingClasses as t,forcedFieldEdgeClasses as i,forcedFillClasses as n,metaTextClasses as d}from"../../internal/styles.js";const c={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},u={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},m={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},f={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},p={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},g=`rounded-full bg-(--plass-track) ${i}`,h=/* @__PURE__ */["[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","data-[dragging]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),x=/* @__PURE__ */["rounded-full [background-image:var(--p-fill)]",n,"forced-colors:data-[disabled]:[background-color:GrayText]","[transition-property:width,height,inset-inline-start,bottom,filter,opacity]",h].join(" "),b=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","forced-colors:[background-color:CanvasText] forced-colors:[border-color:Canvas]","forced-colors:data-[disabled]:[background-color:GrayText]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing","[transition-property:box-shadow,inset-inline-start,bottom,filter,opacity]",h,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",t,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */r.forwardRef(function PlSlider({size:t,color:i,elevation:n=1,orientation:h="horizontal",label:v,description:w,getAriaLabel:y,getAriaValueText:j,showValue:N=!1,disabled:$=!1,className:_,style:z,...k},A){const T=r.useId(),V=l(),C=t??V.size??"md",L=i??V.color??"primary",S="vertical"===h,G=k.value??k.defaultValue,I=Array.isArray(G)?G.length:1;return a(o.Root,{ref:A,orientation:h,disabled:$,className:["flex",S?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",$?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",_??""].filter(Boolean).join(" "),style:{...s(L,n,"solid"),...z},...k,children:[v||N?a("div",{className:`flex w-full items-baseline gap-2 ${d[C]}`,children:[v?e(o.Label,{className:"font-semibold text-(--plass-fg)",children:v}):null,N?e(o.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof N?N:null}):null]}):null,e(o.Control,{className:["flex touch-none items-center justify-center select-none",S?`${p[C]} h-40 flex-col`:`w-full ${f[C]}`].join(" "),children:a(o.Track,{className:[g,S?`${u[C]} h-full`:`${c[C]} w-full`].join(" "),children:[e(o.Indicator,{className:x}),Array.from({length:I},(a,r)=>e(o.Thumb,{index:r,getAriaLabel:y,getAriaValueText:j,"aria-describedby":w?T:void 0,className:`${b} ${m[C]}`},r))]})}),w?e("div",{id:T,className:`${d[C]} text-(--plass-muted-fg)`,children:w}):null]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDisabled as r,useLabelReference as o}from"../../internal/form.js";import{useDefaults as s,useLocale as i}from"../../internal/defaults.js";import{Slider as t}from"@base-ui/react/slider";import{controlSlots as n,focusRingClasses as d,forcedFieldEdgeClasses as c,forcedFillClasses as u,metaTextClasses as m}from"../../internal/styles.js";const f={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},b={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},p={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},g={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},h={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},x=`rounded-full bg-(--plass-track) ${c}`,v=/* @__PURE__ */["[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","data-[dragging]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),w=/* @__PURE__ */["rounded-full [background-image:var(--p-fill)]",u,"forced-colors:data-[disabled]:[background-color:GrayText]","[transition-property:width,height,inset-inline-start,bottom,filter,opacity]",v].join(" "),y=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","forced-colors:[background-color:CanvasText] forced-colors:[border-color:Canvas]","forced-colors:data-[disabled]:[background-color:GrayText]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing","[transition-property:box-shadow,inset-inline-start,bottom,filter,opacity]",v,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",d,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */l.forwardRef(function PlSlider({size:d,color:c,elevation:u=1,orientation:v="horizontal",label:j,description:N,getAriaLabel:$,getAriaValueText:_,showValue:z=!1,disabled:k=!1,locale:A,className:T,style:V,"aria-label":C,"aria-labelledby":L,...S},B){const G=l.useId(),I=o(C,L),P=s(),R=i(A),q=r(k),D=d??P.size??"md",E=c??P.color??"primary",F="vertical"===v,H=S.value??S.defaultValue,J=Array.isArray(H)?H.length:1;return a(t.Root,{ref:B,orientation:v,disabled:q,locale:R,className:["flex",F?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",q?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",T??""].filter(Boolean).join(" "),style:{...n(E,u,"solid"),...V},"aria-label":C,"aria-labelledby":I.labelledBy,...S,children:[j||z?a("div",{className:`flex w-full items-baseline gap-2 ${m[D]}`,children:[j?e(t.Label,{className:"font-semibold text-(--plass-fg)",children:j}):null,z?e(t.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof z?z:null}):null]}):null,e(t.Control,{className:["flex touch-none items-center justify-center select-none",F?`${h[D]} h-40 flex-col`:`w-full ${g[D]}`].join(" "),children:a(t.Track,{className:[x,F?`${b[D]} h-full`:`${f[D]} w-full`].join(" "),children:[e(t.Indicator,{className:w}),Array.from({length:J},(a,l)=>e(t.Thumb,{index:l,"aria-label":void 0===L?C:void 0,getAriaLabel:$,getAriaValueText:_,"aria-describedby":N?G:void 0,className:`${y} ${p[D]}`},l))]})}),N?e("div",{id:G,className:`${m[D]} text-(--plass-muted-fg)`,children:N}):null,I.node]})});

package/dist/components/sparkline/PlSparkline.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame.js';
 import type { PlassChartCurve, PlassChartDatum, PlassColor, PlassSize } from '../../types.js';
-export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'>, Pick<ChartBaseProps, 'initialWidth'> {
     /** The values. `null` is a gap, exactly as it is on every other chart. */
     data: readonly PlassChartDatum[];
     /**
@@ -46,9 +47,20 @@ export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'d
     min?: number;
     /** And the top of it. */
     max?: number;
-    /** How wide. Fills its container by default. */
+    /**
+     * How wide. Fills its container by default.
+     *
+     * A number is the width the strip is drawn at from the first render, the
+     * server's included, so `initialWidth` only matters for any other length.
+     */
     width?: number | string;
-    /** A name for the strip, read out in place of it. */
+    /**
+     * A name for the strip, read out in place of it.
+     *
+     * An `aria-label` names the strip in its place and an `aria-labelledby`
+     * outranks both. With none of the three the strip is decoration, and is
+     * taken off the accessibility tree.
+     */
     label?: string;
 }
 /**

package/dist/components/sparkline/PlSparkline.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{areaPath as t,barMaxThickness as n,barPath as i,barRadius as s,extentOf as o,linePath as m,lineWidths as h,markerRadii as u,markGap as c,resolveColor as d,sparklineHeights as p,toValue as f}from"../../internal/chart.js";import{useMeasuredWidth as v}from"../../internal/chart-frame.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as b,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */r.forwardRef(function PlSparkline({data:M,shape:g="line",curve:j="linear",size:w,color:$,endDot:N=!1,baseline:W,min:z,max:C,width:L,label:P,className:R,style:S,...B},D){const F=x(),G=w??F.size??"md",I=r.useRef(null),q=v(I),A=r.useId().replace(/:/g,""),E=r.useMemo(()=>M.map(f),[M]),H=p[G],J=h[G],K=u[G],O=o([E],!1),Q=z??(O?Math.min(O.min,W??O.min):0),T=C??(O?Math.max(O.max,W??O.max):1),U=T-Q||1,V="number"==typeof L?L:q,X=d($??"var(--plass-chart-1)"),Y="bar"===g?0:J/2+(N?K:0),Z=Math.max(1,H-2*Y),y=a=>Y+(1-(a-Q)/U)*Z,_=E.length>1?V/(E.length-1):V,aa=E.map((a,e)=>null===a.value?null:{x:e*_,y:y(a.value)}),ea=(()=>{for(let a=E.length-1;a>=0;a--)if(null!==E[a].value)return a;return-1})(),la=V/Math.max(1,E.length),ra=Math.min(n[G]/2,Math.max(1,la-c)),ta=y(Math.min(Math.max(Q,0),T)),barTop=a=>{const e=Math.min(y(a),ta);return Math.abs(y(a)-ta)<1?Math.min(e,H-1):e};return e("div",{ref:D,className:b("relative block",R??void 0),style:{width:L??"100%",height:H,...S},...B,children:[a("div",{ref:I,className:"absolute inset-0",children:V>0&&E.length>0?e("svg",{width:V,height:H,viewBox:`0 0 ${V} ${H}`,role:P?"img":"presentation","aria-label":P,"aria-hidden":!P||void 0,className:"block overflow-visible",children:["area"===g?e(l,{children:[a("defs",{children:e("linearGradient",{id:`${A}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${X} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${X} 2%, transparent)`})]})}),a("path",{d:t(aa,H,j),fill:`url(#${A}-fill)`})]}):null,void 0!==W?a("line",{x1:0,x2:V,y1:y(W),y2:y(W),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===g?E.map((e,l)=>null===e.value?null:a("path",{d:i(l*la+(la-ra)/2,barTop(e.value),ra,Math.max(1,Math.abs(y(e.value)-ta)),s/2,e.value>=0?"up":"down"),fill:e.color??X},l)):a("path",{d:m(aa,j),fill:"none",stroke:X,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"}),N&&ea>=0&&"bar"!==g?a("circle",{cx:aa[ea].x,cy:aa[ea].y,r:K,fill:X,stroke:"var(--plass-chart-gap)",strokeWidth:c}):null]}):null}),P?a("span",{className:k,children:E.map(a=>null===a.value?"—":a.value).join(", ")}):null]})});
+"use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{areaPath as i,barMaxThickness as r,barPath as t,barRadius as n,extentOf as o,linePath as s,lineWidths as h,markerRadii as d,markGap as m,resolveColor as u,sparklineHeights as c,toValue as p,writeChartValue as f}from"../../internal/chart.js";import{useMeasuredSize as v}from"../../internal/chart-frame.js";import{useDefaults as b,useLocale as x}from"../../internal/defaults.js";import{cx as g,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */e.forwardRef(function PlSparkline({data:M,shape:w="line",curve:j="linear",size:$,color:N,endDot:P=!1,baseline:W,min:z,max:B,width:C,initialWidth:L,label:R,"aria-label":S,"aria-labelledby":D,"aria-describedby":G,className:I,style:q,...A},E){const F=b(),H=x(),J=$??F.size??"md",K=e.useRef(null),{width:O,guessed:Q}=v(K,L),T=e.useId().replace(/:/g,""),U=S||R,V=Boolean(D||U),X=e.useMemo(()=>M.map(p),[M]),Y=c[J],Z=h[J],_=d[J],ll=o([X],!1),al=z??(ll?Math.min(ll.min,W??ll.min):0),el=B??(ll?Math.max(ll.max,W??ll.max):1),il=el-al||1,rl="number"==typeof C,tl=rl?C:O,nl=u(N??"var(--plass-chart-1)"),ol="bar"===w?0:Z/2+(P?_:0),sl=Math.max(1,Y-2*ol),y=l=>ol+(1-(l-al)/il)*sl,hl=X.length>1?tl/(X.length-1):tl,dl=X.map((l,a)=>null===l.value?null:{x:a*hl,y:y(l.value)}),ml=(()=>{for(let l=X.length-1;l>=0;l--)if(null!==X[l].value)return l;return-1})(),ul=ml>=0?X[ml].value:null,cl=null!==ul&&ul>=al&&ul<=el,pl=tl/Math.max(1,X.length),fl=Math.min(r[J]/2,Math.max(1,pl-m)),vl=y(Math.min(Math.max(al,0),el)),barTop=l=>{const a=Math.min(y(l),vl);return Math.abs(y(l)-vl)<1?Math.min(a,Y-1):a};return a("div",{ref:E,className:g("relative block",I??void 0),style:{width:C??"100%",height:Y,...q},...A,children:[l("div",{ref:K,className:g("absolute inset-0",Q&&!rl&&"overflow-hidden"),children:tl>0&&X.length>0?a("svg",{width:tl,height:Y,viewBox:`0 0 ${tl} ${Y}`,role:V?"img":"presentation","aria-labelledby":D||void 0,"aria-label":U||void 0,"aria-describedby":V&&G||void 0,"aria-hidden":!V||void 0,className:"block overflow-visible",children:[a("defs",{children:[l("clipPath",{id:`${T}-strip`,children:l("rect",{x:-tl,y:0,width:3*tl,height:Y})}),"area"===w?a("linearGradient",{id:`${T}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${nl} 32%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${nl} 2%, transparent)`})]}):null]}),a("g",{clipPath:`url(#${T}-strip)`,children:["area"===w?l("path",{d:i(dl,Y,j),fill:`url(#${T}-fill)`}):null,void 0!==W?l("line",{x1:0,x2:tl,y1:y(W),y2:y(W),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===w?X.map((a,e)=>null===a.value?null:l("path",{d:t(e*pl+(pl-fl)/2,barTop(a.value),fl,Math.max(1,Math.abs(y(a.value)-vl)),n/2,a.value>=0?"up":"down"),fill:a.color??nl},e)):l("path",{d:s(dl,j),fill:"none",stroke:nl,strokeWidth:Z,strokeLinecap:"round",strokeLinejoin:"round"})]}),P&&cl&&"bar"!==w?l("circle",{cx:dl[ml].x,cy:dl[ml].y,r:_,fill:nl,stroke:"var(--plass-chart-gap)",strokeWidth:m}):null]}):null}),V?l("span",{className:k,children:X.map(l=>null===l.value?"—":f(l.value,void 0,H)).join(", ")}):null]})});

package/dist/components/stepper/PlStepper.d.ts

@@ -25,6 +25,17 @@ export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div
     orientation?: PlassResponsive<PlassOrientation>;
     /** How the line between two steps is drawn. @default 'solid' */
     connector?: PlStepConnector;
+    /**
+     * Keeps every step's panel in the document, hidden while `active` is on
+     * another step, rather than only the panel of the step it is on.
+     *
+     * For panels a search engine should read: the others are otherwise not in
+     * the HTML a server sends. A kept panel is `hidden`, so it is out of the
+     * layout, the focus order and the accessibility tree, and what it holds
+     * survives the reader stepping away from it. Off by default.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** @default 'md' */
     size?: PlassSize;
     /** @default 'primary' */

package/dist/components/stepper/PlStepper.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as p,focusRingClasses as m,hasContent as u,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useLabels as w}from"../../internal/labels.js";import{useResponsiveValue as z}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o,connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...y},w){const k=z(o,"horizontal"),C=r(),S=d??C.size??"md",$=m??C.color??"primary",P=f??C.density??"default",[I,A]=t.useState(s),L=n??I,R=t.useId(),T=t.useCallback(e=>{void 0===n&&A(e),a?.(e)},[n,a]),B=t.Children.toArray(b),M=B.length,W=t.useMemo(()=>({size:S,density:P,orientation:k,color:$,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[S,P,k,$,L,i,c,R,T]),q="horizontal"===k,D=q?B[L]?.props?.children:null;return e(g.Provider,{value:W,children:l("div",{ref:w,className:p("flex w-full flex-col",x),style:{...N($,0),...h},...y,children:[e("ol",{role:"list",className:p("m-0 flex w-full list-none p-0",q?"flex-row":"flex-col"),children:B.map((l,t)=>e(j.Provider,{value:{index:t,last:t===M-1},children:l},t))}),u(D)?e("div",{role:"group","aria-labelledby":`${R}-${L}`,className:p("mt-4",v[S]),children:D}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:z,bullet:k,status:C,optional:S,disabled:$=!1,color:P,className:I,children:A,...L},R){const T=t.useContext(g),{index:B,last:M}=t.useContext(j),W=w(),q=T?.size??"md",D=T?.orientation??"horizontal",E=P??T?.color??"primary",F=T?.active??null,G=T?.connector??"solid",H=C??c(B,F),J="horizontal"===D,K=!$&&null!==T&&(!T.linear||B<=T.active),O="none"!==G&&!M,Q=e("span",{"aria-hidden":"true",className:p("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[H],y,f),children:k??("complete"===H?e(StepTick,{}):B+1)}),U=l("span",{className:p("flex min-w-0 flex-col",J?"items-center text-center":""),children:[e("span",{id:T?`${T.baseId}-${B}`:void 0,className:p("font-semibold",b[q],d[H]),children:r}),u(z)?e("span",{className:p("text-(--plass-muted-fg)",x[q]),children:z}):null,S?e("span",{className:p("text-(--plass-muted-fg) italic",x[q]),children:!0===S?W.optional:S}):null]}),V=l("span",{className:p("flex items-center",J?"flex-col":"flex-row",n[q]),children:[Q,J?U:null]}),X=K?l("button",{type:"button","aria-current":"current"===H?"step":void 0,onClick:()=>T?.onSelect(B),className:p("flex cursor-pointer items-center bg-transparent p-1",J?"flex-col":"flex-row",n[q],h[q],m,y,"hover:bg-(--p-soft)"),children:[J?V:Q,J?null:U]}):l("span",{"aria-current":"current"===H?"step":void 0,className:p("flex items-center p-1",J?"flex-col":"flex-row",n[q],$?"opacity-50":""),children:[J?V:Q,J?null:U]});return l("li",{ref:R,className:p("relative flex min-w-0",J?"flex-1 flex-col items-center":"flex-col",I),style:{"--p-bullet":s[q],...N(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...L,children:[l("span",{className:p("flex w-full",J?"flex-row items-start":"flex-col"),children:[X,O?e("span",{"aria-hidden":"true",className:p(J?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[G],i[H],y)}):null]}),!J&&B===F&&u(A)?e("div",{role:"group","aria-labelledby":T?`${T.baseId}-${B}`:void 0,className:p("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[q]),children:A}):null]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{bulletGapClasses as r,bulletSizeValues as s,bulletStatusClasses as o,connectorColorClasses as a,connectorStyleClasses as i,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as u,focusRingClasses as p,hasContent as f,iconClasses as m,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";import{useLabels as g}from"../../internal/labels.js";import{useResponsiveValue as y}from"../../internal/responsive.js";const k=/* @__PURE__ */t.createContext(null),z=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function followPanelFocus(){const e=new Map,l=new Map,t=new Map,n=new Map;let r=!1,s=null;const holdsFocus=e=>Boolean(e?.contains(e.ownerDocument.activeElement));return{step(e){let t=n.get(e);return t||(t=t=>{t?l.set(e,t):l.delete(e)},n.set(e,t)),t},ref(l){let n=t.get(l);return n||(n=t=>{t?e.set(l,t):(r||=holdsFocus(e.get(l)),e.delete(l))},t.set(l,n)),n},settle(t){const n=s,o=r||null!==n&&holdsFocus(e.get(n));s=t,r=!1,null!==n&&n!==t&&o&&(e.get(t)??l.get(t))?.focus()}}}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:r,defaultActive:s=0,onActiveChange:o,linear:a=!0,orientation:i,connector:c="solid",keepMounted:d=!1,size:p,color:m,density:x,className:h,style:b,children:N,...g},j){const S=y(i,"horizontal"),C=n(),M=p??C.size??"md",P=m??C.color??"primary",$=x??C.density??"default",[I,R]=t.useState(s),A=r??I,L=t.useId(),B=t.useCallback(e=>{void 0===r&&R(e),o?.(e)},[r,o]),[E]=t.useState(followPanelFocus);t.useLayoutEffect(()=>{E.settle(A)});const F=t.Children.toArray(N),T=F.length,D=t.useMemo(()=>({size:M,density:$,orientation:S,color:P,active:A,linear:a,connector:c,keepMounted:d,baseId:L,onSelect:B,panelRef:E.ref,stepRef:E.step}),[M,$,S,P,A,a,c,d,L,B,E]),W="horizontal"===S,panelAt=(l,t)=>{const n=F[l]?.props?.children;return f(n)?e("div",{ref:E.ref(l),role:"group","aria-labelledby":`${L}-${l}`,hidden:l!==A,tabIndex:-1,className:u("mt-4 outline-none",v[M]),children:n},t):null};return e(k.Provider,{value:D,children:l("div",{ref:j,className:u("flex w-full flex-col",h),style:{...w(P,0),...b},...g,children:[e("ol",{role:"list",className:u("m-0 flex w-full list-none p-0",W?"flex-row":"flex-col"),children:F.map((l,t)=>e(z.Provider,{value:{index:t,last:t===T-1},children:l},t))}),W?d?F.map((e,l)=>panelAt(l,l)):panelAt(A,A):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:n,description:y,bullet:j,status:S,optional:C,disabled:M=!1,color:P,className:$,children:I,...R},A){const L=t.useContext(k),{index:B,last:E}=t.useContext(z),F=g(),T=L?.size??"md",D=L?.orientation??"horizontal",W=P??L?.color??"primary",q=L?.active??null,G=L?.connector??"solid",H=L?.keepMounted??!1,J=S??c(B,q),K="horizontal"===D,O=!M&&null!==L&&(!L.linear||B<=L.active),Q="none"!==G&&!E,U=e("span",{"aria-hidden":"true",className:u("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",o[J],N,m),children:j??("complete"===J?e(StepTick,{}):B+1)}),V=l("span",{className:u("flex min-w-0 flex-col",K?"items-center text-center":""),children:[e("span",{id:L?`${L.baseId}-${B}`:void 0,className:u("font-semibold",b[T],d[J],N),children:n}),f(y)?e("span",{className:u("text-(--plass-muted-fg)",x[T]),children:y}):null,C?e("span",{className:u("text-(--plass-muted-fg) italic",x[T]),children:!0===C?F.optional:C}):null]}),X=l("span",{className:u("flex items-center",K?"flex-col":"flex-row",r[T]),children:[U,K?V:null]}),Y=O?l("button",{ref:L?.stepRef(B),type:"button","aria-current":"current"===J?"step":void 0,onClick:()=>L?.onSelect(B),className:u("flex cursor-pointer items-center bg-transparent p-1",K?"flex-col":"flex-row",r[T],h[T],p,N,"hover:bg-(--p-soft)"),children:[K?X:U,K?null:V]}):l("span",{"aria-current":"current"===J?"step":void 0,className:u("flex items-center p-1",K?"flex-col":"flex-row",r[T],M?"opacity-50":""),children:[K?X:U,K?null:V]});return l("li",{ref:A,className:u("relative flex min-w-0",K?"flex-1 flex-col items-center":"flex-col",$),style:{"--p-bullet":s[T],...w(W,0),"--p-fill":`var(--plass-${W}-fill)`,"--p-on-solid":`var(--plass-${W}-on-solid)`},...R,children:[l("span",{className:u("flex w-full",K?"flex-row items-start":"flex-col"),children:[Y,Q?e("span",{"aria-hidden":"true",className:u(K?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",i[G],a[J],N)}):null]}),K||B!==q&&!H||!f(I)?null:e("div",{ref:L?.panelRef(B),role:"group","aria-labelledby":L?`${L.baseId}-${B}`:void 0,hidden:B!==q,tabIndex:-1,className:u("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4 outline-none",v[T]),children:I})]})});