plass-ui 1.4.0 → 1.5.0

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

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

package/dist/components/select/PlSelect.js

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

package/dist/components/show/PlShow.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { PlassBreakpointFloor } from '../../types.js';
 export interface PlShowProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
@@ -16,6 +17,15 @@ export interface PlShowProps extends React.ComponentPropsWithoutRef<'div'> {
      * both and none that draws neither.
      */
     until?: PlassBreakpointFloor;
+    /**
+     * Renders something other than a `<div>`: `render={<span />}`. Base UI's own
+     * escape hatch.
+     *
+     * A paragraph cannot hold a `<div>`, so inside a `<p>` an HTML parser closes
+     * the paragraph in front of it and a page rendered on a server no longer
+     * hydrates. A gate in a line of text wants a `<span>`, and gates the same way.
+     */
+    render?: useRender.RenderProp;
     /** What is shown, at the widths it is shown at. */
     children?: React.ReactNode;
 }
@@ -53,6 +63,12 @@ export interface PlShowProps extends React.ComponentPropsWithoutRef<'div'> {
  * `usePlBreakpointValue` picks one and only that one is mounted, at the cost of
  * a server rendering the `xs` answer.
  *
+ * **A layer that portals out is not hidden with its half.** A `PlModal`, a
+ * `PlDrawer` or a popover renders at the end of `<body>`, outside the box that
+ * `display: none` hides, so an open one in the closed half shows. Two halves
+ * that read the same `open` open two windows. Keep layers outside `PlShow`, or
+ * choose between them with `usePlBreakpointValue`.
+ *
  * There is no `PlHide`, deliberately. `until` is the inverse of `from` and the
  * two together are a band, so a second component would be a second way to spell
  * the same three cases.

package/dist/components/show/PlShow.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import*as t from"react";import{cx as a}from"../../internal/styles.js";export const PlShow=/* @__PURE__ */t.forwardRef(function PlShow({from:t,until:o,className:s,children:e,...i},l){return r("div",{ref:l,className:a("plass-show",s),"data-from":t,"data-until":o,...i,children:e})});
+import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{cx as o}from"../../internal/styles.js";export const PlShow=/* @__PURE__ */r.forwardRef(function PlShow({from:r,until:a,render:s,className:t,children:n,...l},i){return e({render:s,ref:i,props:{className:o("plass-show",t),"data-from":r,"data-until":a,children:n,...l}})});

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

package/dist/components/sidebar/PlSidebarTrigger.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{collapsedOnlyClasses as o,PlPageLayoutContext as t}from"../../internal/page-layout.js";import{cx as i}from"../../internal/styles.js";function MenuIcon(){return e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:e("path",{d:"M4 7h16M4 12h16M4 17h16",strokeLinecap:"round"})})}export const PlSidebarTrigger=/* @__PURE__ */r.forwardRef(function PlSidebarTrigger({side:a="start",collapseBelow:s,icon:l,label:c,variant:u="ghost",className:p,onClick:d,...m},f){const h=r.useContext(t);if(!h.present)return null;const b=s??h.collapseBelow,g=h.open[a];return e(n,{ref:f,variant:u,icon:l??e(MenuIcon,{}),label:c??(g?"Close sidebar":"Open sidebar"),"aria-expanded":g,className:i(o[b],p),onClick:e=>{h.setOpen(a,!g),d?.(e)},...m})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{useLabels as o}from"../../internal/labels.js";import{collapsedOnlyClasses as t,PlPageLayoutContext as i}from"../../internal/page-layout.js";import{cx as a}from"../../internal/styles.js";function MenuIcon(){return e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:e("path",{d:"M4 7h16M4 12h16M4 17h16",strokeLinecap:"round"})})}export const PlSidebarTrigger=/* @__PURE__ */r.forwardRef(function PlSidebarTrigger({side:s="start",collapseBelow:l,icon:c,label:p,variant:u="ghost",className:m,onClick:d,...f},b){const h=r.useContext(i),g=o();if(!h.present)return null;const j=l??h.collapseBelow,x=h.open[s];return e(n,{ref:b,variant:u,icon:c??e(MenuIcon,{}),label:p??(x?g.sidebarClose:g.sidebarOpen),"aria-expanded":x,className:a(t[j],m),onClick:e=>{h.setOpen(s,!x),d?.(e)},...f})});

package/dist/components/skeleton/PlSkeleton.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useRender as s}from"@base-ui/react/use-render";import{controlHeightClasses as o,controlSquareClasses as d,surfaceSlots as n}from"../../internal/styles.js";const a={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},m={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},i={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},t={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},u={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"},h="relative overflow-hidden bg-(--p-soft-hover)";function length(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const PlSkeleton=/* @__PURE__ */r.forwardRef(function PlSkeleton({shape:r="line",lines:f=1,size:p,color:c,width:g,height:x,animated:w=!0,label:y,render:$,className:b,style:j,...v},k){const N=l(),z=p??N.size??"md",B=c??N.color??"secondary",P=w?"plass-skeleton":"",S="circle"===r?`shrink-0 rounded-full ${o[z]} ${d[z]}`:"rect"===r?`w-full ${u[z]} ${void 0===x?t[z]:""}`:`w-full ${i[z]} ${a[z]}`,A=y?{role:"status","aria-busy":!0,"aria-label":y}:{"aria-hidden":!0},R="line"===r&&f>1;return s({render:$,ref:k,props:{className:(R?["flex w-full flex-col",m[z],b??""]:[h,P,S,b??""]).filter(Boolean).join(" "),style:{...n(B,0),width:length(g),height:length(x),...j},...A,...R?{children:Array.from({length:f},(r,l)=>e("div",{className:[h,P,i[z],a[z],l===f-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});
+"use client";import{jsx as e,Fragment as r,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useRender as d}from"@base-ui/react/use-render";import{controlHeightClasses as o,controlSquareClasses as a,srOnlyClasses as m,surfaceSlots as t}from"../../internal/styles.js";const i={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},u={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},h={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},f={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},p={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"},c="relative overflow-hidden bg-(--p-soft-hover)";function length(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const PlSkeleton=/* @__PURE__ */s.forwardRef(function PlSkeleton({shape:s="line",lines:g=1,size:x,color:w,width:j,height:$,animated:v=!0,label:y,render:b,className:k,style:N,...z},B){const P=n(),S=x??P.size??"md",A=w??P.color??"secondary",F=v?"plass-skeleton":"",R="circle"===s?`shrink-0 rounded-full ${o[S]} ${a[S]}`:"rect"===s?`w-full ${p[S]} ${void 0===$?f[S]:""}`:`w-full ${h[S]} ${i[S]}`,q=y?{role:"status"}:{"aria-hidden":!0},C=y?e("span",{className:m,children:y}):null,D="line"===s&&g>1;return d({render:b,ref:B,props:{className:(D?["flex w-full flex-col",u[S],k??""]:[c,F,R,k??""]).filter(Boolean).join(" "),style:{...t(A,0),width:length(j),height:length($),...N},...q,...D||C?{children:l(r,{children:[D?Array.from({length:g},(r,l)=>e("div",{className:[c,F,h[S],i[S],l===g-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l)):null,C]})}:null,...z}})});

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

@@ -21,8 +21,20 @@ export interface PlSliderProps extends BaseSliderProps {
     orientation?: PlassOrientation;
     /** The label above the track. */
     label?: React.ReactNode;
-    /** Helper text below the track. */
+    /** Helper text below the track. Each thumb is described by it. */
     description?: React.ReactNode;
+    /**
+     * 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`.
+     */
+    getAriaLabel?: (index: number) => string;
+    /**
+     * What a screen reader says for the value of the thumb at `index`, given the
+     * value formatted for the locale and the raw number. Left out, it is the
+     * formatted number.
+     */
+    getAriaValueText?: (formattedValue: string, value: number, index: number) => string;
     /**
      * Shows the current value beside the label. Pass a function to format it —
      * the raw numbers and Base UI's already-localised strings are both handed in.

package/dist/components/slider/PlSlider.js

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

package/dist/components/sparkline/PlSparkline.js

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

package/dist/components/spoiler/PlSpoiler.d.ts

@@ -32,7 +32,9 @@ export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
     reversible?: boolean;
     /**
      * Clamps the covered box to this height — a CSS length, or a number in pixels.
-     * Revealing releases it and the content takes whatever height it needs.
+     * Revealing releases it and the content takes whatever height it needs, which
+     * makes this the one thing that changes the sheet's height between the two
+     * states.
      *
      * Left out, the box is exactly as tall as what it holds, which is the right
      * default for a paragraph or a picture. Set it for something long enough that
@@ -81,12 +83,17 @@ export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
  * photograph, a paragraph, a plot twist, and it arrives with its own colours.
  * The family shows up on the button and in the hairline and stops there.
  *
- * **The box is the same height covered and uncovered**, which takes both of the
- * things that could move it. The cover shares a grid cell with what it covers
- * rather than being positioned over it, so a cover that is taller than a
- * one-line spoiler makes the sheet taller instead of being clipped by it; and
- * the `reversible` Hide row is drawn from the start and merely held invisible,
- * so it is not a button's worth of height that arrives on the way in and leaves
- * again on the way out.
+ * **The box is the same height covered and uncovered**, which takes every one of
+ * the things that could move it. The cover shares a grid cell with what it
+ * covers rather than being positioned over it, so a cover taller than a one-line
+ * spoiler makes the sheet taller instead of being clipped by it; and neither the
+ * cover nor the `reversible` Hide row is ever taken out of the tree — both are
+ * drawn from the start and merely held `invisible`, so their space is paid for
+ * once instead of arriving on the way in and leaving again on the way out.
+ *
+ * `maxHeight` is the one exception, and it is deliberate: a clamp is released on
+ * reveal, so a spoiler that was holding back four screens of text grows to fit
+ * them. Keeping the clamp would leave the reader a scrollbar where they asked
+ * for the content.
  */
 export declare const PlSpoiler: React.ForwardRefExoticComponent<PlSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/PlSpoiler.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{PlButton as s}from"../button/PlButton.js";import{cx as t,hasContent as n,metaTextClasses as o,radiusClasses as d,sheetPaddingXClasses as c,sheetPaddingYClasses as m,sheetRestClasses as f,surfaceSlots as u,transitionClasses as p}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */l.forwardRef(function PlSpoiler({revealed:v,defaultRevealed:h=!1,onRevealedChange:x,label:y,hideLabel:g,description:b="This may contain spoilers",action:j,reversible:N=!1,maxHeight:w,blur:z=10,padded:k=!0,variant:_="glass",size:C,color:P,density:R,elevation:S=0,className:$,style:H,children:B,...I},L){const T=r(),q=a(),A=y??q.reveal,D=g??q.hide,E=C??T.size??"md",F=P??T.color??"primary",G=R??T.density??"default",J=l.useId(),[K,M]=l.useState(h),O=v??K,change=e=>{void 0===v&&M(e),x?.(e)},Q=c[G][E],U=m[G][E],V=!1===b?null:b;return i("div",{ref:L,className:t("isolate grid overflow-hidden",d[E],f[_],p,$),style:{...u(F,S),...H},...I,children:[i("div",{className:"flex min-w-0 flex-col [grid-area:1/1]",children:[e("div",{id:J,className:t("min-w-0",k?`${Q} ${U}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",O?"":"select-none"),style:{filter:O?void 0:`blur(${z}px)`,maxHeight:O?void 0:w,overflow:O?void 0:"hidden"},inert:!O,children:B}),N?e("div",{className:t("flex justify-end",Q,U,"pt-0",O?"":"invisible"),inert:!O,children:e(s,{variant:"ghost",size:E,color:F,density:G,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":J,children:D})}):null]}),O?null:i("div",{className:t("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",Q,U,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]"),children:[n(V)?e("p",{className:t("m-0 text-(--plass-muted-fg)",o[E]),children:V}):null,j??e(s,{size:E,color:F,density:G,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":J,children:A})]})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{inertProps as t}from"../../internal/inert.js";import{focusablesIn as s}from"../../internal/focusable.js";import{PlButton as a}from"../button/PlButton.js";import{cx as o,hasContent as c,metaTextClasses as d,radiusClasses as u,sheetPaddingXClasses as f,sheetPaddingYClasses as m,sheetRestClasses as p,surfaceSlots as v,transitionClasses as x}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */i.forwardRef(function PlSpoiler({revealed:h,defaultRevealed:b=!1,onRevealedChange:g,label:y,hideLabel:j,description:N,action:R,reversible:w=!1,maxHeight:z,blur:k=10,padded:S=!0,variant:_="glass",size:C,color:P,density:$,elevation:E=0,className:H,style:I,children:L,...B},W){const q=n(),A=l(),D=y??A.reveal,F=j??A.hide,G=void 0===N?A.spoilerWarning:N,J=C??q.size??"md",K=P??q.color??"primary",M=$??q.density??"default",O=i.useId(),Q=i.useRef(null),T=i.useRef(null),U=i.useRef(null),[V,X]=i.useState(b),Y=h??V,change=e=>{void 0===h&&X(e),g?.(e)},Z=i.useRef(Y);i.useLayoutEffect(()=>{if(Z.current===Y)return;Z.current=Y;const e=document.activeElement,r=Y?[T.current]:[U.current,Q.current];if(!e||!r.some(r=>r?.contains(e)))return;const i=Y?Q.current:s(T.current)[0];i?.focus({preventScroll:!0})},[Y]);const ee=f[M][J],re=m[M][J],ie=!1===G?null:G;return r("div",{ref:W,className:o("isolate grid overflow-hidden",u[J],p[_],x,H),style:{...v(K,E),...I},...B,children:[r("div",{className:"flex min-w-0 flex-col [grid-area:1/1]",children:[e("div",{ref:Q,id:O,tabIndex:-1,className:o("min-w-0 outline-none",S?`${ee} ${re}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",Y?"":"select-none"),style:{filter:Y?void 0:`blur(${k}px)`,maxHeight:Y?void 0:z,overflow:Y?void 0:"hidden"},...t(!Y),children:L}),w?e("div",{ref:U,className:o("flex justify-end",ee,re,"pt-0",Y?"":"invisible"),...t(!Y),children:e(a,{variant:"ghost",size:J,color:K,density:M,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":O,children:F})}):null]}),r("div",{ref:T,className:o("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",ee,re,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]",Y?"invisible":""),...t(Y),children:[c(ie)?e("p",{className:o("m-0 text-(--plass-muted-fg)",d[J]),children:ie}):null,R??e(a,{size:J,color:K,density:M,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":O,children:D})]})]})});

package/dist/components/stat/PlStat.d.ts

@@ -21,6 +21,10 @@ export interface PlStatProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     /**
      * How much it moved, as a percentage. Drawn with an arrow, and coloured by
      * whether that is good news rather than by its sign.
+     *
+     * Written to one decimal at most, with a sign on a rise: `+12.4%`, `-3%`. A
+     * change that rounds to 0 at that decimal is `0%`, with no arrow and in the
+     * muted colour.
      */
     change?: number;
     /**

package/dist/components/stat/PlStat.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as l}from"../skeleton/PlSkeleton.js";import{useDefaults as a}from"../../internal/defaults.js";import{controlSlots as n,cx as r,hasContent as i,metaTextClasses as c,stackGapClasses as o}from"../../internal/styles.js";const m={xs:"text-xl",sm:"text-2xl",md:"text-3xl",lg:"text-4xl",xl:"text-5xl"};function Arrow({up:t}){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:e("path",{d:t?"M8 12V4m0 0L4.5 7.5M8 4l3.5 3.5":"M8 4v8m0 0 3.5-3.5M8 12l-3.5-3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStat=/* @__PURE__ */s.forwardRef(function PlStat({label:s,value:d,description:u,icon:p,change:x,changeLabel:f,improvesWhen:h="up",loading:g=!1,size:v,color:N,density:j,className:b,style:k,children:y,...w},z){const L=a(),M=v??L.size??"md",P=N??L.color??"primary",S=j??L.density??"default",A=void 0!==x&&0!==x,W=(x??0)>0,$=A&&("up"===h?W:!W),B=void 0!==x||i(f);return t("div",{ref:z,className:r("flex flex-col","compact"===S?"gap-0.5":o[M],b),style:{...n(P,0,"ghost"),...k},...w,children:[i(s)||i(p)?t("div",{className:r("flex items-center gap-1.5 text-(--plass-muted-fg)",c[M]),children:[i(p)?e("span",{"aria-hidden":"true",className:"flex items-center text-(--p-accent) [&_svg]:size-[1.15em]",children:p}):null,s]}):null,t("div",{className:"flex items-baseline gap-2",children:[g?e(l,{shape:"line",size:M,color:P,width:"6ch"}):e("span",{className:r("font-semibold text-(--plass-fg) tabular-nums",m[M]),children:d}),B&&!g?t("span",{className:r("flex items-center gap-0.5 font-medium tabular-nums",c[M],A?$?"text-(--plass-success-accent)":"text-(--plass-danger-accent)":"text-(--plass-muted-fg)"),children:[A?e(Arrow,{up:W}):null,f??`${W?"+":""}${x}%`]}):null]}),i(u)?e("div",{className:r("text-(--plass-muted-fg)",c[M]),children:u}):null,y]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as n}from"../skeleton/PlSkeleton.js";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as a,cx as r,hasContent as i,metaTextClasses as o,stackGapClasses as c}from"../../internal/styles.js";const d={xs:"text-xl",sm:"text-2xl",md:"text-3xl",lg:"text-4xl",xl:"text-5xl"};function formatChange(e){const t=Number.isInteger(e)?e.toFixed(0):e.toFixed(1);return`${e>0?"+":""}${t}%`}function Arrow({up:t}){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:e("path",{d:t?"M8 12V4m0 0L4.5 7.5M8 4l3.5 3.5":"M8 4v8m0 0 3.5-3.5M8 12l-3.5-3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStat=/* @__PURE__ */s.forwardRef(function PlStat({label:s,value:m,description:u,icon:x,change:p,changeLabel:f,improvesWhen:h="up",loading:g=!1,size:v,color:N,density:b,className:j,style:M,children:k,...y},w){const z=l(),C=v??z.size??"md",L=N??z.color??"primary",P=b??z.density??"default",S=void 0===p?void 0:function roundChange(e){const t=Math.sign(e)*Math.round(10*Math.abs(e))/10;return 0===t?0:t}(p),A=void 0!==S&&0!==S,F=(S??0)>0,W=A&&("up"===h?F:!F),$=void 0!==p||i(f);return t("div",{ref:w,className:r("flex flex-col","compact"===P?"gap-0.5":c[C],j),style:{...a(L,0,"ghost"),...M},...y,children:[i(s)||i(x)?t("div",{className:r("flex items-center gap-1.5 text-(--plass-muted-fg)",o[C]),children:[i(x)?e("span",{"aria-hidden":"true",className:"flex items-center text-(--p-accent) [&_svg]:size-[1.15em]",children:x}):null,s]}):null,t("div",{className:"flex items-baseline gap-2",children:[g?e(n,{shape:"line",size:C,color:L,width:"6ch"}):e("span",{className:r("font-semibold text-(--plass-fg) tabular-nums",d[C]),children:m}),$&&!g?t("span",{className:r("flex items-center gap-0.5 font-medium tabular-nums",o[C],A?W?"text-(--plass-success-accent)":"text-(--plass-danger-accent)":"text-(--plass-muted-fg)"),children:[A?e(Arrow,{up:F}):null,f??formatChange(S??0)]}):null]}),i(u)?e("div",{className:r("text-(--plass-muted-fg)",o[C]),children:u}):null,k]})});

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

@@ -57,7 +57,7 @@ export interface PlStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>,
     disabled?: boolean;
     /** Overrides the stepper's family for this one step. */
     color?: PlassColor;
-    /** The panel this step shows while it is the current one. */
+    /** The panel this step shows while the stepper's `active` is on it, whatever `status` says. */
     children?: React.ReactNode;
 }
 /**

package/dist/components/stepper/PlStepper.js

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

package/dist/components/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as l}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{controlSlots as c,cx as n,focusRingClasses as o,hasContent as d,metaTextClasses as h,tickRowTextClasses as m}from"../../internal/styles.js";const p={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},u={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},f=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",o].join(" "),g=/* @__PURE__ */["cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),b=/* @__PURE__ */["cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),x=/* @__PURE__ */["cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),k=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:o,label:w,description:v,error:j,invalid:N,labelPlacement:y="end",disabled:_=!1,readOnly:P=!1,className:R,classNames:S,style:$,...z},B){const O=s(),q=t??O.size??"md",D=o??O.color??"primary",E=d(j),F=N??E,L=F?"danger":D,T=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(l.Root,{ref:B,className:n(f,p[q],_?x:P?b:g,S?.control),disabled:_,readOnly:P,...z,children:a(l.Thumb,{className:`${k} ${u[q]}`})})}),A=w||v?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===y?"flex-1":""].filter(Boolean).join(" "),children:[w?a(i.Label,{className:n(_?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",S?.label),children:w}):null,v?a(i.Description,{className:n(h[q],"text-(--plass-muted-fg)",S?.description),children:v}):null]}):null;return e(i.Root,{disabled:_,invalid:F,className:["inline-flex flex-col gap-1 align-top",R??""].filter(Boolean).join(" "),style:{...c(L,0,"solid"),...$},children:[a("div",{className:`flex items-start gap-2.5 ${m[q]}`,children:e(r,"start"===y?{children:[A,T]}:{children:[T,A]})}),a(i.Error,E?{match:!0,className:n(h[q],"text-(--p-accent)",S?.error),children:j}:{className:n(h[q],"text-(--p-accent)",S?.error)})]})});
+"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Switch as s}from"@base-ui/react/switch";import{Field as l}from"@base-ui/react/field";import{controlSlots as c,cx as i,focusRingClasses as n,hasContent as d,metaTextClasses as h,tickRowTextClasses as m}from"../../internal/styles.js";const p={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},f={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},u=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",n].join(" "),g=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),b=/* @__PURE__ */[g,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),x=/* @__PURE__ */[g,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),k=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),w=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:n,label:g,description:v,error:j,invalid:N,labelPlacement:y="end",disabled:_=!1,readOnly:T=!1,className:P,classNames:R,style:S,...$},z){const B=o(),C=t??B.size??"md",H=n??B.color??"primary",O=d(j),q=N??O,D=q?"danger":H,E=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(s.Root,{ref:z,className:i(u,p[C],_?k:T?x:b,R?.control),disabled:_,readOnly:T,...$,children:a(s.Thumb,{className:`${w} ${f[C]}`})})}),F=g||v?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===y?"flex-1":""].filter(Boolean).join(" "),children:[g?a(l.Label,{className:i(_?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",R?.label),children:g}):null,v?a(l.Description,{className:i(h[C],"text-(--plass-muted-fg)",R?.description),children:v}):null]}):null;return e(l.Root,{disabled:_,invalid:q,className:["inline-flex flex-col gap-1 align-top",P??""].filter(Boolean).join(" "),style:{...c(D,0,"solid"),...S},children:[a("div",{className:`flex items-start gap-2.5 ${m[C]}`,children:e(r,"start"===y?{children:[F,E]}:{children:[E,F]})}),a(l.Error,O?{match:!0,className:i(h[C],"text-(--p-accent)",R?.error),children:j}:{className:i(h[C],"text-(--p-accent)",R?.error)})]})});

package/dist/components/table/PlTable.d.ts

@@ -71,11 +71,11 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
     /**
      * Pins the header while the rows scroll under it.
      *
-     * It needs something to scroll *in*: a `position: sticky` header in a box
-     * that is as tall as its content has nowhere to stick, so this does nothing
-     * on its own. `maxHeight` is the usual answer and the two are made for each
-     * other; a table inside a pane that already caps its own height works just as
-     * well.
+     * It needs `maxHeight`. A `position: sticky` header sticks to the nearest box
+     * that scrolls, and here that is the table's own horizontal scroller, which
+     * without a cap is as tall as its content and has nowhere to stick. A pane
+     * around the table that scrolls or caps its own height does not change that,
+     * so this does nothing on its own.
      * @default false
      */
     stickyHeader?: boolean;

package/dist/components/tabs/PlTabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
+import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
 /** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
 export type PlTabValue = string | number;
 export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
@@ -45,6 +45,31 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
     loopFocus?: boolean;
     /** The tabs share the bar's full width, each taking an equal part of it. */
     fullWidth?: boolean;
+    /**
+     * Whether a vertical wheel over a bar with more tabs than room moves it along.
+     *
+     * A mouse has one wheel and it points down the page, which is the one
+     * direction a tab bar does not run in — so a reader who can see that there are
+     * more tabs has no way of reaching them but the scrollbar that is deliberately
+     * not drawn, or the arrow keys, which also change the selection. The bar is
+     * the same scroller a `PlScrollZone` is and answers the wheel the same way.
+     *
+     * Only while the bar overflows, and only across: a bar that runs down the side
+     * scrolls with the page, and a bar whose tabs all fit is not a scroller at
+     * all.
+     * @default true
+     */
+    wheel?: boolean;
+    /**
+     * What the bar does with a wheel it has run out of tabs for.
+     *
+     * `contain`, the default, keeps it, so a reader working along a long bar is
+     * not thrown down the page by the notch that arrives after the last tab.
+     * `auto` is the browser's own chaining, held only for as long as the gesture
+     * lasts. A bar whose tabs all fit holds nothing back either way.
+     * @default 'contain'
+     */
+    overscroll?: PlassOverscroll;
     children?: React.ReactNode;
 }
 export interface PlTabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {

package/dist/components/tabs/PlTabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,gapClasses as c,glassClasses as d,hasContent as f,iconClasses as h,paddingXClasses as u,radiusClasses as p,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";import{useResponsiveValue as m}from"../../internal/responsive.js";const g=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),x={solid:{horizontal:`${d} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${d} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},w={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},y={solid:`${d} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},z="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:d,disabled:v=!1,className:m,children:x,...w},y){const{variant:j,size:P,density:N,fullWidth:T}=a.useContext(g);return t(o.Tab,{ref:y,value:l,disabled:v,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]",s[P],r[P],c[P],u[N][P],"solid"===j?p[P]:"",b,h,z,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",m??""].filter(Boolean).join(" "),...w,children:[f(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,x,f(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(g);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,p[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:d,onValueChange:f,orientation:h,activateOnFocus:u=!1,loopFocus:b=!0,fullWidth:z=!1,className:j,style:P,children:N,...T},k){const C=m(h,"horizontal"),R=l(),S=r??R.size??"md",W=i??R.color??"primary",O=n??R.density??"default",V=a.useMemo(()=>({variant:s,size:S,density:O,orientation:C,fullWidth:z}),[s,S,O,C,z]),B=a.useRef(null),E=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(B,"horizontal"===C),F=[],L=[];return a.Children.forEach(N,e=>{a.isValidElement(e)&&e.type===PlTabPanel?L.push(e):null!=e&&!1!==e&&F.push(e)}),e(g.Provider,{value:V,children:t(o.Root,{ref:k,value:c,defaultValue:d,onValueChange:e=>f?.(e),orientation:C,className:["flex min-w-0","vertical"===C?"flex-row gap-4":"flex-col gap-4",j??""].filter(Boolean).join(" "),style:{...v(W,0),...P},...T,children:[t(o.List,{ref:B,activateOnFocus:u,loopFocus:b,className:["relative shrink-0",x[s][C],"solid"===s?p[S]:"",z&&"horizontal"===C?"w-full":"","horizontal"===C?"plass-fade-x overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),style:E.style,onScroll:E.onScroll,"data-overflow":E.state,children:[F,e(o.Indicator,{className:["pointer-events-none",w[s][C],y[s],"solid"===s?p[S]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),L]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as h,hasContent as u,iconClasses as p,paddingXClasses as v,radiusClasses as b,surfaceSlots as m,transitionClasses as g}from"../../internal/styles.js";import{useResponsiveValue as x}from"../../internal/responsive.js";import{overscrollClasses as w,useWheelScroll as y}from"../../internal/wheel.js";const z=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),j={solid:{horizontal:`${h} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`,vertical:`${h} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},P={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${h} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},T="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:c,disabled:d=!1,className:h,children:m,...x},w){const{variant:y,size:j,density:P,fullWidth:N}=a.useContext(z);return t(o.Tab,{ref:w,value:l,disabled:d,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]",s[j],r[j],f[j],v[P][j],"solid"===y?b[j]:"",g,p,T,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",N?"flex-1":"",h??""].filter(Boolean).join(" "),...x,children:[u(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,m,u(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(z);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,b[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:f,onValueChange:h,orientation:u,activateOnFocus:p=!1,loopFocus:v=!0,fullWidth:g=!1,wheel:T=!0,overscroll:k="contain",className:C,style:R,children:S,...V},W){const E=x(u,"horizontal"),F=l(),O=r??F.size??"md",$=i??F.color??"primary",B=n??F.density??"default",L=a.useMemo(()=>({variant:s,size:O,density:B,orientation:E,fullWidth:g}),[s,O,B,E,g]),M=a.useRef(null),I="horizontal"===E,H=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(M,I);y(M,{enabled:T&&I,overscroll:k});const q=[],A=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?A.push(e):null!=e&&!1!==e&&q.push(e)})};return sort(S),e(z.Provider,{value:L,children:t(o.Root,{ref:W,value:c,defaultValue:f,onValueChange:e=>h?.(e),orientation:E,className:["flex min-w-0","vertical"===E?"flex-row gap-4":"flex-col gap-4",C??""].filter(Boolean).join(" "),style:{...m($,0),...R},...V,children:[t(o.List,{ref:M,activateOnFocus:p,loopFocus:v,className:["relative shrink-0",j[s][E],"solid"===s?b[O]:"",g&&I?"w-full":"",I?"plass-fade-x overflow-x-auto overflow-y-hidden":"",I?w(k,!0):""].filter(Boolean).join(" "),style:H.style,onScroll:H.onScroll,"data-overflow":H.state,children:[q,e(o.Indicator,{className:["pointer-events-none",P[s][E],N[s],d,"solid"===s?b[O]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),A]})})});

package/dist/components/text-link/PlTextLink.js

@@ -1 +1 @@
-"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as l}from"../../internal/labels.js";import{useRender as i}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:v,size:h,newTab:k=!1,icon:b,startIcon:j,newTabLabel:x,render:g,className:y,style:w,children:_,...N},T){const L=l(),z=x??L.newTab,C=b??k,P=!0===C?n(k?a:o,{}):C,$=[u,h?t[h]:"",d[f],v?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${v??"primary"}-ring)`,...v?{"--p-accent":`var(--plass-${v}-accent)`}:null},E=s.isValidElement(g)&&void 0!==g.props.href,{rel:F,...I}=N,R=m(k?"_blank":void 0,F);return i({render:g??n("a",{}),ref:T,props:{...E?null:{href:c},target:k?"_blank":void 0,className:$,style:{...B,...w},children:r(e,{children:[j?n("span",{className:"me-[0.25em]",children:j}):null,_,P?n("span",{className:"ms-[0.25em]",children:P}):null,k?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...I,rel:R}})});
+"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as l}from"../../internal/labels.js";import{useRender as i}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:h,size:v,newTab:k=!1,icon:b,startIcon:g,newTabLabel:j,render:x,className:y,style:w,children:_,...N},T){const L=l(),z=j??L.newTab,C=b??k,P=!0===C?n(k?a:o,{}):C,$=[u,v?t[v]:"",d[f],h?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${h??"primary"}-ring)`,...h?{"--p-accent":`var(--plass-${h}-accent)`}:null},E=s.isValidElement(x)&&void 0!==x.props.href,{rel:F,target:I,...R}=N,V=I??(k?"_blank":void 0),q=k||"_blank"===V,A=m(V,F);return i({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,...w},children:r(e,{children:[g?n("span",{className:"me-[0.25em]",children:g}):null,_,P?n("span",{className:"ms-[0.25em]",children:P}):null,q?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...R,rel:A}})});

package/dist/components/time-picker/PlTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as i}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as r,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */o.forwardRef(function PlTimePicker({value:v,defaultValue:j,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",ne=L??Z.density??"default",oe=i(E),le=P??m($),[te,se]=o.useState(j??null),ie=void 0!==v?v:te,[ae,re]=o.useState(z??!1),ce=w??ae,[de]=o.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&re(e),k?.(e))},commit=e=>{void 0===v&&se(e),C?.(e)},ue=o.useCallback((e,n)=>{const[o,l]=f(n,e);return!!(p(D)&&l<h(D))||!!(p(O)&&o>h(O))||(T?.(e,n)??!1)},[D,O,T]),me=o.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=o.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:ne,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(ie)?u(ie,$,me):F??"",samples:ge,empty:!p(ie),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:oe,hiddenValues:G?[{name:G,value:p(ie)?g(ie,M):""}]:void 0,children:n("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:ne,locale:$,value:p(ie)?ie:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:oe,autoFocus:!0}),fe?n(r,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:oe.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:oe.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:oe.done})]}):null]})})});
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as r}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */n.forwardRef(function PlTimePicker({value:j,defaultValue:v,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",oe=L??Z.density??"default",ne=r(E),le=P??m($),[te,se]=n.useState(v??null),re=void 0!==j?j:te,[ae,ie]=n.useState(z??!1),ce=w??ae,[de]=n.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&ie(e),k?.(e))},commit=e=>{void 0===j&&se(e),C?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=f(o,e);return!!(p(D)&&l<h(D))||!!(p(O)&&n>h(O))||(T?.(e,o)??!1)},[D,O,T]),me=n.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=n.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:oe,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(re)?u(re,$,me):F??"",samples:ge,empty:!p(re),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:ne,name:G,formValue:p(re)?g(re,M):"",children:o("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:oe,locale:$,value:p(re)?re:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:ne,autoFocus:!0}),fe?o(i,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ne.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:ne.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:ne.done})]}):null]})})});

package/dist/components/timeline/PlTimeline.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as s}from"@base-ui/react/use-render";import{cx as a,hasContent as n,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";import{useResponsiveValue as N}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},w={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:N,status:P,color:C,connector:T="solid",className:_,children:I,...R},$){const k=t.useContext(g),{index:A,last:M}=t.useContext(j),q=k?.size??"md",B=k?.density??"default",D=k?.orientation??"vertical",E=C??k?.color??"primary",F=P??h(A,k?.active??null),G="horizontal"===D,H="none"!==T&&!M,J=e("span",{"aria-hidden":"true",className:a("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",x[F],m,i),children:N}),K=H?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",G?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[F],m)}):null,L=l("div",{className:a("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[n(r)||n(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[n(r)?e("span",{className:a("font-semibold",p[q],y[F],m),children:r}):null,n(s)?e("span",{className:a("text-(--plass-muted-fg)",o[q]),children:s}):null]}):null,n(I)?e("div",{className:a("text-(--plass-muted-fg)",c[q]),children:I}):null]});return l("li",{ref:$,"aria-current":"current"===F?"step":void 0,"data-status":F,className:a("relative",G?a("flex min-w-0 flex-1 flex-col",M?"":w[B][q]):a("flex",u[q],M?"":z[B][q]),_),style:{"--p-bullet":f[q],...d(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...R,children:[K,J,L]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:n,color:i,density:o,orientation:c,render:p,className:m,style:u,children:f,...x},b){const v=N(c,"vertical"),h=r(),y=n??h.size??"md",z=i??h.color??"primary",w=o??h.density??"default",P=t.Children.toArray(f),C=P.length,T=t.useMemo(()=>({size:y,density:w,orientation:v,color:z,active:l??null}),[y,w,v,z,l]),_=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:a("flex","horizontal"===v?"flex-row":"flex-col",m),style:{...d(z,0),...u},children:P.map((l,t)=>e(j.Provider,{value:{index:t,last:t===C-1},children:l},t)),...x}});return e(g.Provider,{value:T,children:_})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as s}from"@base-ui/react/use-render";import{cx as a,hasContent as n,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";import{useResponsiveValue as N}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},w={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:N,status:P,color:C,connector:T="solid",className:_,children:k,...I},R){const $=t.useContext(g),{index:A,last:E}=t.useContext(j),M=$?.size??"md",V=$?.density??"default",q=$?.orientation??"vertical",B=C??$?.color??"primary",D=P??h(A,$?.active??null),F="horizontal"===q,G="none"!==T&&!E,H=e("span",{"aria-hidden":"true",className:a("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",x[D],m,i),children:N}),J=G?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",F?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[D],m)}):null,K=l("div",{className:a("flex min-w-0 flex-col gap-0.5",F?"mt-2":""),children:[n(r)||n(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[n(r)?e("span",{className:a("font-semibold",p[M],y[D],m),children:r}):null,n(s)?e("span",{className:a("text-(--plass-muted-fg)",o[M]),children:s}):null]}):null,n(k)?e("div",{className:a("text-(--plass-muted-fg)",c[M]),children:k}):null]});return l("li",{ref:R,"aria-current":"current"===D?"step":void 0,"data-status":D,className:a("relative",F?a("flex min-w-0 flex-1 flex-col",E?"":w[V][M]):a("flex",u[M],E?"":z[V][M]),_),style:{"--p-bullet":f[M],...d(B,0),"--p-fill":`var(--plass-${B}-fill)`,"--p-on-solid":`var(--plass-${B}-on-solid)`},...I,children:[J,H,K]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:n,color:i,density:o,orientation:c,render:p,className:m,style:u,children:f,...x},b){const v=N(c,"vertical"),h=r(),y=n??h.size??"md",z=i??h.color??"primary",w=o??h.density??"default",P=t.Children.toArray(f),C=P.length,T=t.useMemo(()=>({size:y,density:w,orientation:v,color:z,active:l??null}),[y,w,v,z,l]),_=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:a("flex","horizontal"===v?"flex-row":"flex-col",m),style:{...d(z,0),...u},children:P.map((l,r)=>e(j.Provider,{value:{index:r,last:r===C-1},children:l},t.isValidElement(l)?l.key??r:r)),...x}});return e(g.Provider,{value:T,children:_})});

package/dist/components/timeline-chart/PlTimelineChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as a,barMaxThickness as s,barRadius as l,formatTimeTicks as i,formatTimeValue as c,markGap as m,resolveColor as d,seriesColor as u,timeScale as h,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as p}from"../../internal/styles.js";import{useDefaults as x}from"../../internal/defaults.js";export function PlTimelineChart({series:n,min:r,max:l,barSize:d,rounded:p=!0,size:M,density:b,xAxis:y,yAxis:k,locale:g,...v}){const j=x(),$=M??j.size??"md",w=b??j.density??"default",C=g??j.locale,T=t.useMemo(()=>n.map(packRow),[n]),z=t.useMemo(()=>T.map(e=>e.spans),[T]),A=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const o of z)for(const r of o)r&&(t=!0,e=Math.min(e,r.from),n=Math.max(n,r.to));return t?{min:e,max:n}:null},[z]),P=t.useMemo(()=>h(A,{min:f(r)??void 0,max:f(l)??void 0,tickCount:k?.tickCount}),[A,r,l,k?.tickCount]),E=t.useMemo(()=>i(P.ticks,P.unit,C),[P,C]),R=t.useMemo(()=>n.map((e,n)=>u(e,n)),[n]),S=t.useMemo(()=>[{data:z.map(e=>e.some(Boolean)?1:null)}],[z]),B=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),I=d??s[$],N=t.useCallback(e=>{const n=[];return T.forEach((t,o)=>{const r=Math.min(I,Math.max(1,(e.band.band-m*(t.lanes-1))/t.lanes)),a=r*t.lanes+m*(t.lanes-1),s=e.plot.top+e.categoryPx(o)-a/2+r/2;t.spans.forEach((t,a)=>{if(!t)return;const l=e.valuePx(t.from),i=e.valuePx(t.to);n.push({series:o,index:a,x:(l+i)/2,y:s+t.lane*(r+m),r:r/2,rx:Math.max(0,(i-l)/2),ry:r/2})})}),n},[T,I]),F=t.useCallback(e=>{const n=z[e.series]?.[e.index];if(!n)return null;const t=[{seriesIndex:e.series,name:B[e.series],color:n.color??R[e.series],value:n.to-n.from,formatted:`${c(n.from,P.unit,C)} – ${c(n.to,P.unit,C)}`}];return{heading:n.span.label??B[e.series],items:t}},[z,B,R,P.unit,C]);return e(o,{...v,series:S,categories:B,size:$,density:w,locale:C,horizontal:!0,scale:P,xAxis:y,yAxis:{tickFormat:(e,n)=>E[n]??"",...k},legend:!1,bandRatio:a[w],marks:N,markTooltip:F,table:t=>e(TimelineTable,{id:t,names:B,series:n,spans:z,unit:P.unit,label:v.label,corner:y?.label,locale:C}),children:n=>e(Spans,{context:n,spans:z,colors:R,rounded:p})})}function packRow(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?d(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),o=-1===n?t.length:n;t[o]=e.to,e.lane=o}),{spans:n,lanes:Math.max(1,t.length)}}function Spans({context:n,spans:t,colors:o,rounded:a}){const{marks:s,activeMark:i,plot:c}=n,m=a?l:0;return e("g",{children:s.map(n=>{const a=t[n.series]?.[n.index];if(!a)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,d=2*(n.ry??n.r),u=Math.max(c.left,n.x-l),h=Math.min(c.left+c.width,n.x+l);if(h<c.left||u>c.left+c.width)return null;const f=Math.max(1,h-u);return e("rect",{x:u,y:n.y-d/2,width:f,height:d,rx:Math.min(m,f/2,d/2),fill:a.color??o[n.series],opacity:s?1:.92,className:r},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:o,series:r,spans:a,unit:s,label:l,corner:i,locale:m}){const d=r.some(e=>e.data.some(e=>void 0!==e.label));return n("table",{id:t,className:p,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:i??""}),d?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:"start"}),e("th",{scope:"col",children:"end"})]})}),e("tbody",{children:a.flatMap((t,a)=>t.map((t,l)=>n("tr",{children:[e("th",{scope:"row",children:o[a]}),d?e("td",{children:r[a].data[l]?.label??""}):null,e("td",{children:t?c(t.from,s,m):""}),e("td",{children:t?c(t.to,s,m):""})]},`${a}-${l}`)))})]})}
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,markTransitionClasses as o}from"../../internal/chart-frame.js";import{barBandRatio as r,barMaxThickness as s,barRadius as l,formatTimeTicks as i,formatTimeValue as c,markGap as m,resolveColor as d,seriesColor as u,timeNeedsDate as h,timeScale as p,toNumber as x}from"../../internal/chart.js";import{srOnlyClasses as f}from"../../internal/styles.js";import{useDefaults as M}from"../../internal/defaults.js";import{useLabels as b}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:o,max:l,barSize:d,rounded:f=!0,size:b,density:k,xAxis:y,yAxis:w,locale:g,...j}){const v=M(),$=b??v.size??"md",C=k??v.density??"default",T=g??v.locale,z=t.useMemo(()=>n.map(packRow),[n]),A=t.useMemo(()=>z.map(e=>e.spans),[z]),P=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const a of A)for(const o of a)o&&(t=!0,e=Math.min(e,o.from),n=Math.max(n,o.to));return t?{min:e,max:n}:null},[A]),W=t.useMemo(()=>p(P,{min:x(o)??void 0,max:x(l)??void 0,tickCount:w?.tickCount}),[P,o,l,w?.tickCount]),E=t.useMemo(()=>i(W.ticks,W.unit,T),[W,T]),R=h(W.ticks,W.unit),S=t.useMemo(()=>n.map((e,n)=>u(e,n)),[n]),B=t.useMemo(()=>[{data:A.map(e=>e.some(Boolean)?1:null)}],[A]),D=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),I=d??s[$],N=t.useCallback(e=>{const n=[];return z.forEach((t,a)=>{const o=Math.min(I,Math.max(1,(e.band.band-m*(t.lanes-1))/t.lanes)),r=o*t.lanes+m*(t.lanes-1),s=e.plot.top+e.categoryPx(a)-r/2+o/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const l=e.valuePx(Math.max(t.from,e.scale.min)),i=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:a,index:r,x:(l+i)/2,y:s+t.lane*(o+m),r:o/2,rx:Math.max(0,(i-l)/2),ry:o/2})})}),n},[z,I]),F=t.useCallback(e=>{const n=A[e.series]?.[e.index];if(!n)return null;const t=[{seriesIndex:e.series,name:D[e.series],color:n.color??S[e.series],value:n.to-n.from,formatted:`${c(n.from,W.unit,T,R)} – ${c(n.to,W.unit,T,R)}`}];return{heading:n.span.label??D[e.series],items:t}},[A,D,S,W.unit,T,R]);return e(a,{...j,series:B,categories:D,size:$,density:C,locale:T,horizontal:!0,scale:W,xAxis:y,yAxis:{tickFormat:(e,n)=>E[n]??"",...w},legend:!1,bandRatio:r[C],marks:N,markTooltip:F,table:t=>e(TimelineTable,{id:t,names:D,series:n,spans:A,scale:W,withDate:R,label:j.label,corner:y?.label,locale:T}),children:n=>e(Spans,{context:n,spans:A,colors:S,rounded:f})})}function packRow(e){const n=e.data.map(e=>{const n=x(e.start),t=x(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?d(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),a=-1===n?t.length:n;t[a]=e.to,e.lane=a}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:a,rounded:r}){const{marks:s,activeMark:i}=n,c=r?l:0;return e("g",{children:s.map(n=>{const r=t[n.series]?.[n.index];if(!r)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,m=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-m/2,width:d,height:m,rx:Math.min(c,d/2,m/2),fill:r.color??a[n.series],opacity:s?1:.92,className:o},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:a,series:o,spans:r,scale:s,withDate:l,label:i,corner:m,locale:d}){const u=b(),h=r.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,s)&&void 0!==o[n].data[t]?.label));return n("table",{id:t,className:f,children:[i?e("caption",{children:i}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:m??""}),h?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:u.start}),e("th",{scope:"col",children:u.end})]})}),e("tbody",{children:r.flatMap((t,r)=>t.map((t,i)=>t&&inWindow(t,s)?n("tr",{children:[e("th",{scope:"row",children:a[r]}),h?e("td",{children:o[r].data[i]?.label??""}):null,e("td",{children:c(t.from,s.unit,d,l)}),e("td",{children:c(t.to,s.unit,d,l)})]},`${r}-${i}`):null))})]})}