plass-ui 1.3.0 → 1.4.0

package/dist/components/pagination/PlPagination.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+import type { PlassColor, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
 /**
  * A pane's share of the split, as a percentage of the container or as a CSS
  * length.
@@ -17,7 +17,7 @@ export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * handles between them; `vertical` stacks them.
      * @default 'horizontal'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /**
      * Whether the handles between the panes can be dragged. Turn it off for a
      * split that is a layout rather than a control.

package/dist/components/panes/PlPanes.js

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

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame.js';
+import type { PlassChartCategory, PlassChartDatum } from '../../types.js';
+export interface PlPieChartProps extends ChartBaseProps {
+    /**
+     * The slices. Numbers, or points that carry their own name and colour.
+     *
+     * One series and not an array of them, because that is what a pie *is*: the
+     * slices are the entities here, so each one takes a palette slot of its own
+     * and the legend lists them rather than listing series.
+     */
+    data: readonly PlassChartDatum[];
+    /** What each slice is called. Points may carry their own `x` instead. */
+    categories?: readonly PlassChartCategory[];
+    /**
+     * - `pie` — a filled disc. The default.
+     * - `donut` — a ring, with room in the middle for the total.
+     * - `semi` — half a ring, opened along the bottom. For a gauge, or for a
+     *   dashboard tile that is wider than it is tall.
+     * @default 'pie'
+     */
+    shape?: 'pie' | 'donut' | 'semi';
+    /**
+     * Where the first slice starts, in degrees clockwise from twelve o'clock.
+     * Ignored by `semi`, which is defined by where it opens.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * What goes in the hole. A `donut` or a `semi` with nothing in the middle is
+     * a pie with a bite out of it; the total, or the one figure the chart is
+     * about, is what the ring was drawn around.
+     */
+    center?: React.ReactNode;
+    /**
+     * Writes each slice's share on it, where the slice is wide enough for the
+     * text to fit with room either side. A label that does not fit is dropped
+     * rather than clipped — the tooltip and the table still have it.
+     *
+     * The number written is the **share**, not the value: a share is what a pie
+     * is a picture of, and the value is one hover away.
+     * @default 'none'
+     */
+    valueLabels?: 'none' | 'all';
+}
+/**
+ * Parts of a whole, at a glance.
+ *
+ * The narrowest chart in the library and the easiest one to misuse. An angle is
+ * a poor thing to compare — two slices within a few percent of each other are
+ * indistinguishable, and a reader cannot rank six of them — so the pie is right
+ * for exactly one question: *is one of these most of it?* Anything finer than
+ * that, and anything past six slices, is a [`PlBarChart`](./bar-chart).
+ *
+ * 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, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+export { PlPieChart } from './PlPieChart.js';
+export type { PlPieChartProps } from './PlPieChart.js';

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

@@ -0,0 +1 @@
+export{PlPieChart}from"./PlPieChart.js";

package/dist/components/popconfirm/PlPopconfirm.d.ts

@@ -58,4 +58,4 @@ export interface PlPopconfirmProps {
  * is not an inconsistency: nobody reaches for a popconfirm to ask whether to
  * save.
  */
-export declare function PlPopconfirm({ trigger, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;
+export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/PlPopconfirm.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as i}from"../button/PlButton.js";import{PlPopover as n}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{cx as s}from"../../internal/styles.js";export function PlPopconfirm({trigger:a,title:c,description:l,confirmLabel:m="Confirm",cancelLabel:d="Cancel",onConfirm:p,onCancel:f,color:u,size:g,side:h="top",align:C="center",width:j=280,open:y,defaultOpen:x,onOpenChange:P,className:v}){const w=r(),z=g??w.size??"md",b=u??"danger",[N,O]=t.useState(x??!1),k=y??N,[L,S]=t.useState(!1),setOpen=e=>{void 0===y&&O(e),P?.(e)};return e(n,{trigger:a,open:k,onOpenChange:e=>{L||(e||f?.(),setOpen(e))},title:c,description:l,side:h,align:C,width:j,color:b,size:z,showClose:!1,className:v,children:o("div",{className:s("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(i,{variant:"ghost",color:"secondary",size:z,density:"compact",disabled:L,onClick:()=>{f?.(),setOpen(!1)},children:d}),e(i,{color:b,size:z,density:"compact",loading:L,autoFocus:!0,onClick:async()=>{const e=p?.();if(e instanceof Promise){S(!0);try{await e,setOpen(!1)}catch{}finally{S(!1)}}else setOpen(!1)},children:m})]})})}
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as i}from"../button/PlButton.js";import{PlPopover as n}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a}from"../../internal/styles.js";export function PlPopconfirm({trigger:l,title:c,description:m,confirmLabel:p,cancelLabel:d,onConfirm:f,onCancel:u,color:g,size:h,side:j="top",align:y="center",width:C=280,open:x,defaultOpen:P,onOpenChange:b,className:v}){const w=r(),z=s(),N=p??z.confirm,O=d??z.cancel,k=h??w.size??"md",L=g??"danger",[S,B]=t.useState(P??!1),F=x??S,[q,A]=t.useState(!1),setOpen=e=>{void 0===x&&B(e),b?.(e)};return e(n,{trigger:l,open:F,onOpenChange:e=>{q||(e||u?.(),setOpen(e))},title:c,description:m,side:j,align:y,width:C,color:L,size:k,showClose:!1,className:v,children:o("div",{className:a("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(i,{variant:"ghost",color:"secondary",size:k,density:"compact",disabled:q,onClick:()=>{u?.(),setOpen(!1)},children:O}),e(i,{color:L,size:k,density:"compact",loading:q,autoFocus:!0,onClick:async()=>{const e=f?.();if(e instanceof Promise){A(!0);try{await e,setOpen(!1)}catch{}finally{A(!1)}}else setOpen(!1)},children:N})]})})}

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

@@ -104,4 +104,4 @@ export declare const PlPopoverClose: React.ForwardRefExoticComponent<Omit<import
  * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
  * surface, the width ladder and the header.
  */
-export declare function PlPopover({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;
+export declare function PlPopover({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel: closeLabelProp, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;

package/dist/components/popover/PlPopover.js

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

package/dist/components/portal/PlPortal.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+/**
+ * Somewhere in the document to put the children.
+ *
+ * Four shapes, and the last three exist because of the same fact: the element a
+ * portal targets is usually one React has not created yet when the prop is
+ * being built. A ref is `null` on the render that creates it, and a query
+ * finds nothing until the tree is in the document — so the target is resolved
+ * after mount rather than read off the props.
+ */
+export type PlPortalContainer = Element | DocumentFragment | React.RefObject<Element | null> | (() => Element | DocumentFragment | null) | null;
+export interface PlPortalProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Where the children go. `document.body` when it is not said.
+     *
+     * Takes an element, a fragment, a **ref**, or a function returning one of
+     * those. The ref and the function are resolved after mount, which is what
+     * lets a portal target something React itself renders.
+     */
+    container?: PlPortalContainer;
+    /**
+     * Renders in place instead of moving anything.
+     *
+     * **Decide it once, at mount.** A portalled subtree and an inline one are
+     * different children as far as React is concerned, so turning this on or off
+     * remounts everything inside and throws away what was in it: a half-filled
+     * form, a scroll position, a video that was playing. That is
+     * reconciliation rather than a shortcoming here, and no portal escapes it.
+     *
+     * It is a prop rather than an absence so that a caller can decide from
+     * something only they know — a subtree that is already inside a portal, an
+     * embed with no `document.body` worth reaching, a test that wants the markup
+     * where it was written.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<ul />}` for a portal
+     * whose target is a list, `render={<tbody />}` for one whose target is a
+     * table. Base UI's own escape hatch, and the answer to a wrapper that is the
+     * wrong element for where it landed.
+     */
+    render?: useRender.RenderProp;
+    /** What is moved. */
+    children?: React.ReactNode;
+}
+/**
+ * Children, rendered somewhere else in the document.
+ *
+ * `createPortal` with the three things this library has to add on top, and it
+ * is worth being clear that the first is the only real reason to reach for it.
+ *
+ * **It carries `plass-portal`.** Every surface the library sends through a
+ * portal — a modal, a drawer, a menu, a popover, a tooltip, a toast — lands with
+ * that class on it, because a portalled subtree leaves whatever element a host
+ * had scoped its CSS reset to and the class is how that host finds it again.
+ * A caller's own portal that did not carry it is the one subtree on the page
+ * the reset misses.
+ *
+ * **It renders nothing until it has mounted.** There is no `document` on a
+ * server, so the HTML that ships never contains a portalled subtree and the
+ * hydrating render does not either. That is not a limitation to work around —
+ * it is what a portal is — so anything that has to be in the server's HTML does
+ * not belong in one.
+ *
+ * **`container` is resolved after mount**, which is what lets it be a ref or a
+ * query. The element a portal targets is usually one React has not created yet
+ * at the moment the prop is written.
+ *
+ * What it does **not** do is carry the colour scheme. `styles.css` answers to a
+ * `.dark` or a `[data-theme]` on any ancestor, and a portal to `document.body`
+ * has left every ancestor it had — so a subtree pinned to one theme goes back
+ * to the page's. That is true of the library's own popups too, and the fix is
+ * the same for both: portal into an element that is inside the theme, with
+ * `container`.
+ */
+export declare const PlPortal: React.ForwardRefExoticComponent<PlPortalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/portal/PlPortal.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{createPortal as r}from"react-dom";import{useRender as t}from"@base-ui/react/use-render";import{cx as n}from"../../internal/styles.js";export const PlPortal=/* @__PURE__ */e.forwardRef(function PlPortal({container:o,disabled:c=!1,render:s,className:a,children:l,...u},i){const[d,m]=e.useState(null);e.useEffect(()=>{c||m(function resolveContainer(e){return"function"==typeof e?e()??document.body:e&&"current"in e?e.current??document.body:e??document.body}(o))},[o,c]);const f=t({render:s,ref:i,props:{className:n("plass-portal",a),children:l,...u}});return c?f:d?r(f,d):null});

package/dist/components/portal/index.d.ts

@@ -0,0 +1,2 @@
+export { PlPortal } from './PlPortal.js';
+export type { PlPortalContainer, PlPortalProps } from './PlPortal.js';

package/dist/components/portal/index.js

@@ -0,0 +1 @@
+export{PlPortal}from"./PlPortal.js";

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

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

package/dist/components/rating/PlRating.js

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

package/dist/components/scatter-chart/PlScatterChart.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type MarkShape } from '../../internal/chart.js';
+export interface PlScatterChartProps extends CartesianChartProps {
+    /**
+     * What each mark is drawn as.
+     *
+     * - `auto` — the default. A circle while colour alone can carry identity, and
+     *   a shape per series from the fourth on, because past three it cannot: two
+     *   of the palette's hues are indistinguishable under deuteranopia, and a
+     *   shape is the one channel a dot has going spare.
+     * - `varied` — a shape per series always, in the fixed order circle, square,
+     *   triangle, diamond, cross. Reach for it when the chart will be printed or
+     *   read in greyscale.
+     * - one of the five names — every mark the same shape. On four or more series
+     *   this is opting out of the second channel; do it only when each series
+     *   carries a `color` of its own.
+     * @default 'auto'
+     */
+    shape?: MarkShape | 'varied' | 'auto';
+    /**
+     * The radius of a mark with no `z`, in pixels.
+     * @default the `size` ladder — 4 at `md`
+     */
+    pointRadius?: number;
+    /**
+     * The radius of the largest bubble, in pixels. Everything else is scaled
+     * under it by area.
+     * @default a twelfth of the chart's height
+     */
+    maxRadius?: number;
+}
+/**
+ * Two numbers per point, and whether they move together.
+ *
+ * Both axes measure, which is what makes this the only chart in the library
+ * with no categories: there is no column a mark belongs to and no order the
+ * points could be shuffled out of. A point with a `z` is drawn as a bubble and
+ * one without it as a dot, so a scatter and a bubble chart are the same
+ * component reading the same data — the third number is simply present or not.
+ *
+ * `x` must be a number or a `Date`. A string has no place on a number line, and
+ * a chart of named things against one measure is a
+ * [`PlBarChart`](./bar-chart).
+ */
+export declare function PlScatterChart({ shape, pointRadius, maxRadius, series, categories, size: sizeProp, xAxis, ...props }: PlScatterChartProps): React.JSX.Element;

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

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

package/dist/components/scatter-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PlScatterChart } from './PlScatterChart.js';
+export type { PlScatterChartProps } from './PlScatterChart.js';

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

@@ -0,0 +1 @@
+export{PlScatterChart}from"./PlScatterChart.js";

package/dist/components/scroll-area/PlScrollArea.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassSize } from '../../types.js';
+/**
+ * Which axes may scroll.
+ *
+ * `PlassOrientation` plus a third value rather than the shared type widened,
+ * because "both" is meaningless everywhere else it is used — a `PlDivider`, a
+ * `PlButtonGroup` and a `PlSlider` each run one way — and widening it there to
+ * say it here would be a fourth value nobody can answer.
+ */
+export type PlScrollAreaAxis = PlassOrientation | 'both';
+/** Classes for the parts a `className` does not reach. */
+export interface PlScrollAreaClassNames {
+    /** The scrolling element itself — the one that takes the focus and the keys. */
+    viewport?: string;
+    /** The lane a scrollbar runs in. */
+    scrollbar?: string;
+    /** The bar inside it. */
+    thumb?: string;
+}
+export interface PlScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which axes may scroll.
+     * @default 'vertical'
+     */
+    orientation?: PlScrollAreaAxis;
+    /**
+     * A fixed height. A number is pixels; a string is any CSS length.
+     *
+     * **A vertical scroll area has to be bounded by something**, or there is
+     * nothing for the content to overflow and the box simply grows. This is that
+     * something, and it is a prop rather than a `className` because it is the one
+     * measurement without which the component does nothing at all.
+     */
+    height?: number | string;
+    /** The height it stops growing at, for a box that should shrink to short content. */
+    maxHeight?: number | string;
+    /** The same two for a horizontal area. */
+    width?: number | string;
+    maxWidth?: number | string;
+    /**
+     * When the scrollbars are drawn.
+     *
+     * - `auto` — while the pointer is over the box or the content is moving, and
+     *   never otherwise. The default, and what a reader is used to on a Mac.
+     * - `always` — kept at full strength. For a panel whose whole point is that
+     *   there is more below, where a bar that appears on hover is a signal
+     *   nobody standing back from the screen ever sees.
+     *
+     * Either way the lane is **overlaid**, so turning it on does not reflow the
+     * content underneath.
+     * @default 'auto'
+     */
+    scrollbars?: 'auto' | 'always';
+    /**
+     * A name for the region.
+     *
+     * Worth giving, and the reason is not obvious: a scrollable box **is a tab
+     * stop** when there is nothing focusable inside it, because a keyboard reader
+     * has to be able to scroll it. A tab stop with no name is announced as
+     * nothing at all, so a name is what turns it from a mystery landing point
+     * into "Release notes, region".
+     */
+    label?: string;
+    /** Thickness of the scrollbars and the corner the box is cut to. @default 'md' */
+    size?: PlassSize;
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlScrollAreaClassNames;
+    /** What scrolls. */
+    children?: React.ReactNode;
+}
+/**
+ * A bounded box that scrolls, with the library's own scrollbar in it.
+ *
+ * The reason to reach for it over `overflow: auto` is the **bar**. A platform
+ * scrollbar is either an overlay that vanishes the moment the content stops
+ * moving, or fifteen pixels of permanent grey furniture, and neither of them
+ * belongs beside a translucent sheet. This one is the library's own material:
+ * the thumb is `--plass-track`, the same neutral ink a slider's rail and a
+ * progress groove are cut in, and the lane is overlaid so drawing it costs the
+ * content no width.
+ *
+ * It is **not** a [PlScrollZone](./scroll-zone), which is the other answer to
+ * the same fact. A scroll zone is a strip that runs off the end of its box: it
+ * takes the scrollbar away entirely, fades the end that still has something
+ * behind it and adds a pair of buttons. That is right for a row of tabs or
+ * chips, where a bar under one line of labels is heavier than the labels. This
+ * is right for a panel of content, where the bar is the honest signal and where
+ * a reader wants to know **how far through** they are, which a fade cannot say.
+ *
+ * There is no fade here for that reason: two signals for one fact, one of which
+ * is measured and one of which is not, is one more than the box needs.
+ *
+ * Base UI owns the behaviour — the overlay measurement, the thumb's size and
+ * position, the drag, and making the viewport a tab stop exactly while there is
+ * something to scroll.
+ */
+export declare const PlScrollArea: React.ForwardRefExoticComponent<PlScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { PlScrollArea } from './PlScrollArea.js';
+export type { PlScrollAreaAxis, PlScrollAreaClassNames, PlScrollAreaProps } from './PlScrollArea.js';

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

@@ -0,0 +1 @@
+export{PlScrollArea}from"./PlScrollArea.js";

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

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+import type { PlassOrientation, PlassResponsive, PlassStyleProps } from '../../types.js';
 /**
  * When the scroll buttons are drawn.
  *
- * - `auto` — only the one that has somewhere to go, and neither of them while
- *   everything fits. The default: a control that cannot do anything is worse
- *   than no control, and a row that does not overflow is not a scroller.
+ * - `auto` — neither of them while everything fits, which is the whole of what
+ *   it decides: a row that does not overflow is not a scroller. Once it is one,
+ *   both lanes are drawn and the one with nowhere to go is `disabled`, exactly
+ *   as `always` draws it. What `auto` removes is a **pair of controls on a
+ *   strip that has nothing to scroll**, not one control on a strip that does.
+ *   `overlay` still drops the spare button outright, because there its lane
+ *   costs nothing to give up.
  * - `always` — both, from the first paint, with the one that has nowhere to go
  *   `disabled` rather than gone. What a row whose content arrives later wants,
  *   since the buttons do not appear under the pointer half a second in.
@@ -48,7 +52,7 @@ export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.Component
      * Which way the children run, and therefore which way the zone scrolls.
      * @default 'horizontal'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /**
      * How many rows a horizontal zone lays its children out in before it starts a
      * new column — and how many columns a vertical one uses. `2` is the shelf