plass-ui 1.7.0 → 1.8.1

package/dist/components/panes/PlPanes.js

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

package/dist/components/pie-chart/PlPieChart.d.ts

@@ -80,4 +80,4 @@ export interface PlPieChartProps extends ChartBaseProps {
  * A slice's colour follows the slice and not its size, so a chart that is
  * refiltered or resorted keeps every category the colour it had.
  */
-export declare function PlPieChart({ data, categories, shape, startAngle, innerRadius, padAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;
+export declare function PlPieChart({ data, categories, shape, startAngle, innerRadius, padAngle, center, valueLabels, height, initialWidth, format, locale: localeProp, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;

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

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

package/dist/components/pill/PlPill.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
 export interface PlPillProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `2` here, against the `0` almost everything else takes.
      *

package/dist/components/pill/PlPill.js

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

package/dist/components/popover/PlPopover.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 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","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]})})})]})}
+"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 i,plateRadiusClasses as n,plateSizeClasses as m,progressAriaText as c,progressFraction as u,progressSlots as f,progressText as d,progressValue as p,trackClasses as x}from"../../internal/progress.js";import{cx as h,metaTextClasses as g,stackGapClasses as y}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */a.forwardRef(function PlProgressBox({size:a,color:j,count:w=4,value:N=null,min:b=0,max:v=100,label:M,showValue:P=!1,format:V,className:k,style:z,...A},B){const R=s(),T=a??R.size??"md",L=j??R.color??"primary",$=u(N,b,v),q=null===$,C=void 0!==V,D=Math.max(1,Math.floor(w));return l(r.Root,{ref:B,value:p(N,b,v),min:b,max:v,format:V,locale:R.locale,getAriaValueText:c($,C,R.locale),className:h("inline-flex flex-col",y[T],k),style:{...f(L),...z},...A,children:[M||P?l("div",{className:h("flex items-baseline gap-2",M?"justify-between":"justify-end",g[T]),children:[M?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:M}):null,P?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>d($,e,C,R.locale)}):null]}):null,e(r.Track,{className:h("flex",i[T]),children:Array.from({length:D},(l,a)=>e("span",{className:h("relative overflow-hidden",x,m[T],n[T]),children:e("span",{"aria-hidden":"true",className:h("absolute inset-y-0 start-0",t,q?"plass-plate-wave w-full":o),style:q?{"--p-i":a}:{width:`${Math.min(100,Math.max(0,100*($*D-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 t}from"@base-ui/react/progress";import{progressAriaText as l,progressFraction as o,progressSlots as i,progressText as n,progressValue as c,ringDiameters as m,ringStrokes as f}from"../../internal/progress.js";import{cx as u,gapClasses as d,metaTextClasses as p}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:h,color:x,value:k=null,min:g=0,max:v=100,label:y,showValue:$=!1,format:j,className:w,style:N,...P},b){const C=a(),V=h??C.size??"md",z=x??C.color??"primary",D=o(k,g,v),I=null===D,L=void 0!==j,R=`${e.useId()}-fill`,W=m[V],_=f[V],A=W/2,B=A-_/2,G=2*Math.PI*B,M=I?`${.28*G} ${G}`:`${G}`,T=I?0:G*(1-D);return s(t.Root,{ref:b,value:c(k,g,v),min:g,max:v,format:j,locale:C.locale,getAriaValueText:l(D,L,C.locale),className:u("inline-flex items-center",d[V],p[V],w),style:{...i(z),...N},...P,children:[s("svg",{className:u("shrink-0",I&&"plass-ring-spin"),width:W,height:W,viewBox:`0 0 ${W} ${W}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:R,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:A,cy:A,r:B,stroke:"var(--plass-track)",strokeWidth:_}),r("circle",{cx:A,cy:A,r:B,stroke:`url(#${R})`,strokeWidth:_,strokeLinecap:"round",strokeDasharray:M,strokeDashoffset:T,transform:`rotate(-90 ${A} ${A})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)] motion-reduce:[transition-duration:0ms]"})]}),y?r(t.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:y}):null,$?r(t.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(D,r,L,C.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 c,progressText as u,progressValue as f,trackClasses as d}from"../../internal/progress.js";import{cx as p,metaTextClasses as x,stackGapClasses as g}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */s.forwardRef(function PlProgressLinear({size:s,color:h,value:j=null,min:w=0,max:b=100,label:N,showValue:v=!1,format:y,className:P,style:L,...V},k){const z=r(),R=s??z.size??"md",T=h??z.color??"primary",A=m(j,w,b),I=null===A,$=void 0!==y;return l(a.Root,{ref:k,value:f(j,w,b),min:w,max:b,format:y,locale:z.locale,getAriaValueText:i(A,$,z.locale),className:p("flex w-full flex-col",g[R],P),style:{...c(T),...L},...V,children:[N||v?l("div",{className:p("flex items-baseline gap-2",N?"justify-between":"justify-end",x[R]),children:[N?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:N}):null,v?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(A,e,$,z.locale)}):null]}):null,e(a.Track,{className:p("relative w-full overflow-hidden rounded-full",d,o[R]),children:e(a.Indicator,{className:p("rounded-full",t,I?"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 r}from"react/jsx-runtime";import*as a from"react";import{useDisabled as l}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Radio as s}from"@base-ui/react/radio";import{RadioGroup as t}from"@base-ui/react/radio-group";import{Field as i}from"@base-ui/react/field";import{controlSlots as n,cx as d,fieldDescriptionClasses as c,focusRingClasses as p,forcedCheckedClasses as m,forcedDisabledCheckedClasses as f,glassClasses as u,hasContent as h,metaTextClasses as b,tickDotClasses as x,tickRowTextClasses as g,tickSizeClasses as v,transitionClasses as y}from"../../internal/styles.js";const N=/* @__PURE__ */a.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),j=/* @__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]",y,p].join(" "),k=/* @__PURE__ */[u,"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",m].join(" "),R=/* @__PURE__ */[u,"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]",m].join(" "),z=/* @__PURE__ */[u,"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]",f].join(" "),w=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */a.forwardRef(function PlRadio({label:l,description:o,disabled:t=!1,className:n,style:d,...c},p){const m=a.useContext(N),f=c.readOnly??m.readOnly,u=t||m.disabled;return e(i.Root,{disabled:t,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:d,children:r("div",{className:`flex items-start gap-2 ${g[m.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(s.Root,{ref:p,className:[j,v[m.size],u?z:f?R:k].join(" "),disabled:t,...c,children:e(s.Indicator,{keepMounted:!0,className:`${w} ${x[m.size]}`})})}),l||o?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(i.Label,{className:u?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,o?e(i.Description,{className:`m-0 ${b[m.size]} text-(--plass-muted-fg)`,children:o}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */a.forwardRef(function PlRadioGroup({size:s,color:p,orientation:m="vertical",label:f,description:u,error:x,invalid:g,disabled:v=!1,readOnly:y=!1,className:j,classNames:k,style:R,children:z,...w},O){const P=o(),$=l(v),G=s??P.size??"md",B=p??P.color??"primary",C=h(x),D=g??C,L=D?"danger":B,M=a.useMemo(()=>({size:G,color:L,readOnly:y,disabled:$}),[G,L,y,$]);return e(N.Provider,{value:M,children:r(i.Root,{disabled:$,invalid:D,className:["flex flex-col gap-1.5",j??""].filter(Boolean).join(" "),style:{...n(L,0,"solid"),...R},children:[f?e(i.Label,{className:d(b[G],"font-semibold",$?"text-(--plass-muted-fg)":"text-(--plass-fg)",k?.label),children:f}):null,u?e(i.Description,{className:d(c(G),k?.description),children:u}):null,e(t,{ref:O,disabled:$,readOnly:y,className:d("flex","horizontal"===m?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",k?.control),...w,children:z}),e(i.Error,C?{match:!0,className:d(b[G],"text-(--p-accent)",k?.error),children:x}:{className:d(b[G],"text-(--p-accent)",k?.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/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 i,compactNumber as s,dimmedByHover as o,formatCategory as n,markerRadii as c,markGap as u,markPath as d,markShapes as m,plotHeights as h,pointX as x,seriesColor as f,toValues as p,writeChartValue as b}from"../../internal/chart.js";import{useDefaults 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=v(),g=u??z.size??"md",j=k.locale??z.locale,M=k.format,w=l??c[g],F=a.useMemo(()=>p(o),[o]),S=a.useMemo(()=>o.map((e,r)=>f(e,r)),[o]),$=s??Math.max(w+2,("number"==typeof k.height?k.height:h[g])/12),N=o.reduce((e,r)=>r.color?e:e+1,0),C="auto"===r||"varied"===r?"circle":r,E="varied"===r||"auto"===r&&N>3,L=a.useCallback(e=>E?m[e%m.length]:C,[E,C]),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=x(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,$,2)})})}),r},[n,w,$]),O=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:b(r.value,M,j),label:r.label,aside:void 0===r.z?void 0:b(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:O,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=>e(ScatterTable,{id:r,series:o,categories:n,label:k.label,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,series:t,categories:l,label:i,xLabel:s,yLabel:o,xFormat:n,locale:c,format:u}){const d=t.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:a,className:y(k),children:[i?e("caption",{children:i}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:s??"x"}),e("th",{scope:"col",children:o??"y"}),d?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:t.flatMap((a,t)=>a.data.map((i,s)=>{const o="object"==typeof i&&null!==i?i:null,m=o?o.y:"number"==typeof i?i:null,h=o?.x??l?.[s]??s;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:writeX(h,s,n,c)}),e("td",{children:void 0!==o?.label?o.label:null!==m&&Number.isFinite(m)?b(m,u,c):""}),d?e("td",{children:void 0===o?.z?"":b(o.z,u,c)}):null]},`${t}-${s}`)}))})]})}
+"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-zone/PlScrollZone.d.ts

@@ -48,6 +48,8 @@ export type PlScrollZoneMode = 'item' | 'page' | 'hold';
  */
 export type PlScrollZoneButtonPlacement = 'inline' | 'overlay';
 export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Which way the children run, and therefore which way the zone scrolls.
      * @default 'horizontal'

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.d.ts

@@ -33,7 +33,12 @@ export interface PlSegmentedButtonProps extends Omit<PlassStyleProps, 'variant'>
     readOnly?: boolean;
     /** Identifies the value when a form is submitted. */
     name?: string;
-    /** The segments share the full width, each taking an equal part of it. */
+    /**
+     * The segments share the full width, an equal part each. A segment whose
+     * label needs more than its part keeps the width it needs, and the others
+     * share the rest. Labels that together need more than the row end in an
+     * ellipsis.
+     */
     fullWidth?: boolean;
     children?: React.ReactNode;
 }

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{useDisabled as a}from"../../internal/form.js";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{controlHeightClasses as i,controlSlots as d,controlTextClasses as c,focusRingInsetClasses as u,forcedCheckedTextClasses as p,forcedFieldEdgeClasses as f,forcedFillClasses as h,gapClasses as g,glassClasses as m,hasContent as v,iconClasses as y,paddingXClasses as b,transitionClasses as x}from"../../internal/styles.js";const w=/* @__PURE__ */s.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1,disabled:!1,readOnly:!1}),k={solid:`${m} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${f}`,glass:`${m} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},j={solid:"plass-fill data-[placed]:[--p-fill-on:1] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${m} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${m} 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:l,startIcon:n,endIcon:d,disabled:f=!1,className:h,children:m,onPointerMove:k,...j},R){const{variant:$,size:z,density:N,fullWidth:C,disabled:O,readOnly:S}=s.useContext(w),W=a(f),A=!W&&!O&&!S;return t(o.Root,{ref:R,value:l,disabled:W,"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]",i[z],c[z],g[z],b[N][z],"rounded-full",x,y,A?"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)",P[$],p,u,"data-[disabled]:cursor-not-allowed",O?"":"data-[disabled]:opacity-50","data-[readonly]:cursor-default",C?"flex-1":"",h??""].filter(Boolean).join(" "),onPointerMove:r(A,k),...j,children:[v(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,m,v(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null]})});export const PlSegmentedButton=/* @__PURE__ */s.forwardRef(function PlSegmentedButton({variant:r="glass",size:o,color:i,density:c,elevation:u=0,value:p,defaultValue:f=null,onValueChange:g,disabled:m=!1,readOnly:v=!1,name:y,fullWidth:b=!1,className:P,style:R,children:$,...z},N){const C=l(),O=a(m),S=o??C.size??"md",W=i??C.color??"primary",A=c??C.density??"default",[B,E]=s.useState(f),M=void 0!==p,V=M?p:B,I=s.useRef(null),L=s.useRef(null),q=s.useRef(!1);s.useEffect(()=>{q.current=!0},[]);const G=s.useCallback(e=>{L.current=e,e&&!q.current&&e.setAttribute("data-placed","")},[]),H=s.useCallback(e=>{const t=I.current,s=L.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.setAttribute("data-placed","")},[]);s.useLayoutEffect(()=>{H(!0)},[H,V,r,S,A,b,$]),s.useEffect(()=>{const e=I.current;if(!e)return;const t=new ResizeObserver(()=>H(!1));return t.observe(e),()=>t.disconnect()},[H]);const T=s.useMemo(()=>({variant:r,size:S,density:A,fullWidth:b,disabled:O,readOnly:v}),[r,S,A,b,O,v]);return e(w.Provider,{value:T,children:t(n,{ref:e=>{I.current=e,"function"==typeof N?N(e):N&&(N.current=e)},value:V,onValueChange:e=>{const t=e??null;M||E(t),g?.(t)},disabled:O,readOnly:v,name:y,className:["relative inline-flex items-center rounded-full",k[r],x,v?"saturate-[0.55]":"",O?"opacity-50 saturate-[0.35]":"",b?"flex w-full":"",P??""].filter(Boolean).join(" "),style:{...d(W,u,r),...R},...z,children:[null!=V?e("span",{ref:G,"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)",j[r],h,"[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,$]})})});
+"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 l,useDisabled as r}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 h,forcedFieldEdgeClasses as m,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,overfull:!1,disabled:!1,readOnly:!1}),R={solid:`${b} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${m}`,glass:`${b} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},P={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)]`},S={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:l,endIcon:o,disabled:d=!1,className:u,children:m,onPointerMove:g,...b},R){const{variant:P,size:A,density:C,fullWidth:$,overfull:N,disabled:W,readOnly:z}=a.useContext(j),O=r(d),B=!O&&!W&&!z;return t(i.Root,{ref:R,value:s,disabled:O,"data-segment":"",className:["relative z-10 inline-flex 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[C][A],"rounded-full",k,x,B?"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)",S[P],h,f,"data-[disabled]:cursor-not-allowed",W?"":"data-[disabled]:opacity-50","data-[readonly]:cursor-default",$?N?"min-w-0 flex-[1_1_auto]":"flex-1 shrink-0":"shrink-0",u??""].filter(Boolean).join(" "),onPointerMove:n(B,g),...b,children:[y(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,$?e("span",{"data-segment-label":"",className:"min-w-0 truncate",children:m}):m,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:h,defaultValue:m=null,onValueChange:v,disabled:b=!1,readOnly:y=!1,name:x,fullWidth:w=!1,className:S,style:A,children:C,"aria-label":$,"aria-labelledby":N,...W},z){const O=o(),B=r(b),F=i??O.size??"md",q=c??O.color??"primary",E=p??O.density??"default",[M,V]=a.useState(m),I=void 0!==h,L=I?h:M,_=a.useRef(null),G=a.useRef(null),[H,T]=a.useState(!1),D=a.useCallback(()=>{const e=_.current;if(!e||!w)return void T(!1);const t=getComputedStyle(e),a=e.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight);let s=0;e.querySelectorAll("[data-segment]").forEach(e=>{const t=e.querySelector("[data-segment-label]");s+=e.getBoundingClientRect().width+(t?Math.max(0,t.scrollWidth-t.clientWidth):0)}),T(s>a+1)},[w]),J=a.useRef(!1);a.useEffect(()=>{J.current=!0},[]);const K=a.useRef(0),Q=a.useCallback(e=>{G.current=e,e&&!J.current&&e.setAttribute("data-placed","")},[]),U=a.useCallback(e=>{const t=_.current,a=G.current;if(!t||!a)return;const s=t.querySelector("[data-segment][data-checked]");if(!s)return;const l=s.offsetLeft,r=s.offsetTop,n=s.offsetWidth,o=s.offsetHeight,i=!e||!a.hasAttribute("data-ready");i&&(cancelAnimationFrame(K.current),a.removeAttribute("data-ready")),a.style.setProperty("--p-seg-x",`${l}px`),a.style.setProperty("--p-seg-y",`${r}px`),a.style.setProperty("--p-seg-w",`${n}px`),a.style.setProperty("--p-seg-h",`${o}px`),a.setAttribute("data-placed",""),i&&(K.current=requestAnimationFrame(()=>{a.setAttribute("data-ready","")}))},[]);a.useEffect(()=>()=>cancelAnimationFrame(K.current),[]),s(_,[L,n,F,E,w],()=>{D(),U(!0)},G),a.useEffect(()=>{const e=_.current;if(!e)return;const t=new ResizeObserver(()=>{D(),U(!1)});return t.observe(e),()=>t.disconnect()},[D,U]);const X=a.useMemo(()=>({variant:n,size:F,density:E,fullWidth:w,overfull:H,disabled:B,readOnly:y}),[n,F,E,w,H,B,y]);return e(j.Provider,{value:X,children:t(d,{ref:e=>{_.current=e,"function"==typeof z?z(e):z&&(z.current=e)},value:L,onValueChange:e=>{const t=e??null;I||V(t),v?.(t)},disabled:B,readOnly:y,name:x,className:["relative inline-flex items-center rounded-full",R[n],k,y?"saturate-[0.55]":"",B?"opacity-50 saturate-[0.35]":"",w?"flex w-full":"",S??""].filter(Boolean).join(" "),style:{...u(q,f,n),...A},...l($,N),...W,children:[null!=L?e("span",{ref:Q,"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)",P[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,C]})})});

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

@@ -19,6 +19,8 @@ export interface PlSelectOption {
     disabled?: boolean;
 }
 export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/select/PlSelect.js

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { type PlIconButtonProps } from '../icon-button/PlIconButton.js';
 import type { PlPageLayoutCollapse, PlassSidebarSide } from '../../internal/page-layout.js';
 export interface PlSidebarTriggerProps extends Omit<PlIconButtonProps, 'icon' | 'label'> {
+    /** @default 'ghost' */
+    variant?: PlIconButtonProps['variant'];
     /** Which of the layout's two sidebars it opens. @default 'start' */
     side?: PlassSidebarSide;
     /**

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