plass-ui 1.2.0 → 1.3.0

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

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

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{Radio as a}from"@base-ui/react/radio";import{RadioGroup as r}from"@base-ui/react/radio-group";import{controlHeightClasses as l,controlSlots as n,controlTextClasses as o,focusRingInsetClasses as i,gapClasses as d,glassClasses as u,hasContent as c,iconClasses as p,paddingXClasses as f,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */t.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1}),m={solid:`${u} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)]`,glass:`${u} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},v={solid:"[background-image:var(--p-fill)] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},y={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:r,startIcon:n,endIcon:u,disabled:m=!1,className:v,children:b,...x},w){const{variant:k,size:P,density:j,fullWidth:R}=t.useContext(g);return s(a.Root,{ref:w,value:r,disabled:m,"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]",l[P],o[P],d[P],f[j][P],"rounded-full",h,p,"text-(--plass-muted-fg) hover:text-(--plass-fg)",y[k],i,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[readonly]:cursor-default",R?"flex-1":"",v??""].filter(Boolean).join(" "),...x,children:[c(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,b,c(u)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:u}):null]})});export const PlSegmentedButton=/* @__PURE__ */t.forwardRef(function PlSegmentedButton({variant:a="glass",size:l="md",color:o="primary",density:i="default",elevation:d=0,value:u,defaultValue:c=null,onValueChange:p,disabled:f=!1,readOnly:y=!1,name:b,fullWidth:x=!1,className:w,style:k,children:P,...j},R){const[$,N]=t.useState(c),z=void 0!==u,S=z?u:$,W=t.useRef(null),C=t.useRef(null),B=t.useCallback(e=>{const s=W.current,t=C.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(()=>{B(!0)},[B,S,a,l,i,x,P]),t.useEffect(()=>{const e=W.current;if(!e)return;const s=new ResizeObserver(()=>B(!1));return s.observe(e),()=>s.disconnect()},[B]);const A=t.useMemo(()=>({variant:a,size:l,density:i,fullWidth:x}),[a,l,i,x]);return e(g.Provider,{value:A,children:s(r,{ref:e=>{W.current=e,"function"==typeof R?R(e):R&&(R.current=e)},value:S,onValueChange:e=>{const s=e??null;z||N(s),p?.(s)},disabled:f,readOnly:y,name:b,className:["relative inline-flex items-center rounded-full",m[a],h,y?"saturate-[0.55]":"",f?"opacity-50 saturate-[0.35]":"",x?"flex w-full":"",w??""].filter(Boolean).join(" "),style:{...n(o,d,a),...k},...j,children:[null!=S?e("span",{ref:C,"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)",v[a],"[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,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]})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * What a select's value may be.
  *
@@ -21,6 +21,15 @@ export interface PlSelectOption {
 export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * The options, as data. There is no `<PlSelect.Option>` to compose: what a
      * caller has is almost always an array already, and the list has to be

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

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{PlDrawer as n}from"../drawer/PlDrawer.js";import{drawerSide as o,expandedOnlyClasses as s,PlPageLayoutContext as i,PlassSidebarSideContext as a,useCollapsed as l}from"../../internal/page-layout.js";import{cx as d,sheetPaddingXClasses as c,sheetPaddingYClasses as u,sheetRestClasses as p,surfaceSlots as m,toLength as f,transitionClasses as y}from"../../internal/styles.js";const b={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},v=p;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:p,width:g,minWidth:w=160,maxWidth:h=480,resizable:x=!1,onResize:P,onResizeEnd:C,collapseBelow:k,open:z,defaultOpen:L=!1,onOpenChange:R,sticky:E=!0,title:N,variant:S="glass",size:j="md",color:B="primary",density:D="default",elevation:O=0,divider:A=!0,padded:M=!0,label:W="Sidebar",closeLabel:I="Close sidebar",resizeLabel:T="Resize sidebar",className:X,style:$,children:_,...F},K){const V=r.useContext(i),q=r.useContext(a),G=p??q??"start",H=k??(V.present?V.collapseBelow:"none"),J=l(H),[Q,U]=r.useState(L),Y=void 0!==z,Z=Y?z:V.present?V.open[G]:Q,ee=f(g)??b[j],te=r.useRef(null),re=r.useCallback(e=>{te.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),ne=r.useRef(null);r.useEffect(()=>()=>ne.current?.(),[]);const applyWidth=e=>{const t=te.current;if(!t)return e;const r=Math.min(toPixels(h,480),Math.max(toPixels(w,160),Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),r};return J?e(n,{side:o(G),mode:"overlay",open:Z,onOpenChange:e=>{Y||(V.present?V.setOpen(G,e):U(e)),R?.(e)},title:N,size:j,color:B,density:D,closeLabel:I,extent:void 0===g?void 0:ee,"aria-label":N?void 0:W,className:X,style:$,children:_}):t("aside",{ref:re,"aria-label":W,className:d("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",v[S],A?d("start"===G?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===V.scroll?"h-full":E?d("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",s[H],y,X),style:{...m(B,O),"--p-sidebar-w":ee,...$},...F,children:[e("div",{className:d("min-h-0 flex-1 overflow-y-auto overscroll-contain",M?d(c[D][j],u[D][j]):""),children:_}),x?e("div",{role:"separator","aria-orientation":"vertical","aria-label":T,tabIndex:0,className:d("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===G?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",y,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=te.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,a="start"===G===i?-1:1;let l=s;const move=e=>{l=applyWidth(s+(e.clientX-o)*a),P?.(l)},release=()=>{ne.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(),C?.(l)};ne.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"===G===t?-1:1;(e=>{const t=te.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);P?.(r),C?.(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{PlDrawer as o}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as i,PlPageLayoutContext as l,PlassSidebarSideContext as a,useCollapsed as d}from"../../internal/page-layout.js";import{cx as c,sheetPaddingXClasses as u,sheetPaddingYClasses as p,sheetRestClasses as m,surfaceSlots as f,toLength as y,transitionClasses as b}from"../../internal/styles.js";const v={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=m;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:m,width:w,minWidth:h=160,maxWidth:x=480,resizable:P=!1,onResize:C,onResizeEnd:k,collapseBelow:z,open:L,defaultOpen:R=!1,onOpenChange:E,sticky:N=!0,title:S,variant:j="glass",size:B,color:D,density:O,elevation:A=0,divider:M=!0,padded:W=!0,label:I="Sidebar",closeLabel:T="Close sidebar",resizeLabel:X="Resize sidebar",className:$,style:_,children:F,...K},V){const q=n(),G=B??q.size??"md",H=D??q.color??"primary",J=O??q.density??"default",Q=r.useContext(l),U=r.useContext(a),Y=m??U??"start",Z=z??(Q.present?Q.collapseBelow:"none"),ee=d(Z),[te,re]=r.useState(R),ne=void 0!==L,oe=ne?L:Q.present?Q.open[Y]:te,se=y(w)??v[G],ie=r.useRef(null),le=r.useCallback(e=>{ie.current=e,"function"==typeof V?V(e):V&&(V.current=e)},[V]),ae=r.useRef(null);r.useEffect(()=>()=>ae.current?.(),[]);const applyWidth=e=>{const t=ie.current;if(!t)return e;const r=Math.min(toPixels(x,480),Math.max(toPixels(h,160),Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),r};return ee?e(o,{side:s(Y),mode:"overlay",open:oe,onOpenChange:e=>{ne||(Q.present?Q.setOpen(Y,e):re(e)),E?.(e)},title:S,size:G,color:H,density:J,closeLabel:T,extent:void 0===w?void 0:se,"aria-label":S?void 0:I,className:$,style:_,children:F}):t("aside",{ref:le,"aria-label":I,className:c("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[j],M?c("start"===Y?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===Q.scroll?"h-full":N?c("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",i[Z],b,$),style:{...f(H,A),"--p-sidebar-w":se,..._},...K,children:[e("div",{className:c("min-h-0 flex-1 overflow-y-auto overscroll-contain",W?c(u[J][G],p[J][G]):""),children:F}),P?e("div",{role:"separator","aria-orientation":"vertical","aria-label":X,tabIndex:0,className:c("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===Y?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",b,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=ie.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"===Y===i?-1:1;let a=s;const move=e=>{a=applyWidth(s+(e.clientX-o)*l),C?.(a)},release=()=>{ae.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(),k?.(a)};ae.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"===Y===t?-1:1;(e=>{const t=ie.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);C?.(r),k?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});

package/dist/components/skeleton/PlSkeleton.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as s,controlSquareClasses as d,surfaceSlots as n}from"../../internal/styles.js";const o={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},a={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},m={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t={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)"},u="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:h=1,size:f="md",color:p="secondary",width:c,height:g,animated:x=!0,label:w,render:y,className:$,style:b,...v},j){const k=x?"plass-skeleton":"",N="circle"===r?`shrink-0 rounded-full ${s[f]} ${d[f]}`:"rect"===r?`w-full ${t[f]} ${void 0===g?i[f]:""}`:`w-full ${m[f]} ${o[f]}`,B=w?{role:"status","aria-busy":!0,"aria-label":w}:{"aria-hidden":!0},P="line"===r&&h>1;return l({render:y,ref:j,props:{className:(P?["flex w-full flex-col",a[f],$??""]:[u,k,N,$??""]).filter(Boolean).join(" "),style:{...n(p,0),width:length(c),height:length(g),...b},...B,...P?{children:Array.from({length:h},(r,l)=>e("div",{className:[u,k,m[f],o[f],l===h-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});
+"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}})});

package/dist/components/slider/PlSlider.js

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

package/dist/components/spoiler/PlSpoiler.js

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

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** Which way a change has to go to be good news. */
+export type PlStatDirection = 'up' | 'down';
+export interface PlStatProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** What the figure is of. The line above it. */
+    label?: React.ReactNode;
+    /**
+     * The figure itself, already formatted.
+     *
+     * A node rather than a number, and deliberately: how a figure is written —
+     * the currency, the grouping, the decimals, the locale — is the page's
+     * decision and `Intl.NumberFormat` already makes it. A component that took a
+     * number would have to guess at all four.
+     */
+    value?: React.ReactNode;
+    /** A line under the figure. What it is compared with, usually. */
+    description?: React.ReactNode;
+    /** A glyph beside the label. */
+    icon?: React.ReactNode;
+    /**
+     * How much it moved, as a percentage. Drawn with an arrow, and coloured by
+     * whether that is good news rather than by its sign.
+     */
+    change?: number;
+    /**
+     * What the change says, instead of the formatted percentage. For a figure
+     * that moved by a count rather than by a proportion — "+1,204 this week".
+     */
+    changeLabel?: React.ReactNode;
+    /**
+     * Which way is good news.
+     *
+     * `up` by default and worth setting on about a third of the figures a
+     * dashboard has: for churn, for a bounce rate, for a p95 latency, a rise is
+     * the bad one, and a component that painted it green would be reading the
+     * number and not the meaning.
+     * @default 'up'
+     */
+    improvesWhen?: PlStatDirection;
+    /** Draws a skeleton where the figure will be. */
+    loading?: boolean;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** The family the icon takes. @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * One figure, and what has happened to it.
+ *
+ * A row of these is the top of every dashboard, and the whole of what makes
+ * them worth a component rather than three `<div>`s is the **change**: a number
+ * on its own says what things are, and a number with a movement beside it says
+ * whether that is going anywhere.
+ *
+ * The colour of that movement is decided by `improvesWhen` and not by the
+ * sign, which is the one thing a naive version of this gets wrong. Churn going
+ * up is not good news, and a green arrow on it is a dashboard lying to
+ * somebody.
+ *
+ * It draws **no surface**. A figure sits in a `PlCard` or in a row of them, and
+ * a sheet inside a sheet is two sheets.
+ */
+export declare const PlStat: React.ForwardRefExoticComponent<PlStatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stat/PlStat.js

@@ -0,0 +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]})});

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

@@ -0,0 +1,2 @@
+export { PlStat } from './PlStat.js';
+export type { PlStatDirection, PlStatProps } from './PlStat.js';

package/dist/components/stat/index.js

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

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+/** The same three a `PlTimeline` draws, and the same marks. */
+export type PlStepStatus = PlassStepStatus;
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type PlStepConnector = PlassStepConnector;
+export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** Which step the reader is on. Use with `onActiveChange` for a controlled stepper. */
+    active?: number;
+    /** Which step it starts on, for an uncontrolled one. @default 0 */
+    defaultActive?: number;
+    onActiveChange?: (active: number) => void;
+    /**
+     * Whether a step ahead of the current one can be jumped to.
+     *
+     * On by default, because that is what makes it a process rather than a set of
+     * tabs: the third step of a sign-up cannot be filled in before the second.
+     * Turn it off for a review screen, where every step has already been answered
+     * and the reader is going back to check one.
+     * @default true
+     */
+    linear?: boolean;
+    /** @default 'horizontal' */
+    orientation?: PlassOrientation;
+    /** How the line between two steps is drawn. @default 'solid' */
+    connector?: PlStepConnector;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+    children?: React.ReactNode;
+}
+export interface PlStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color'> {
+    /** What the step is called. */
+    label?: React.ReactNode;
+    /** A second line under it — what the step asks for. */
+    description?: React.ReactNode;
+    /**
+     * What is drawn in the bullet. The step's own number by default, and a tick
+     * once it is complete.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides where the sequence says this step is. For the one that failed
+     * validation while the reader was three steps further on.
+     */
+    status?: PlStepStatus;
+    /**
+     * Marks the step as skippable. `true` draws the word "Optional"; a node draws
+     * that node instead, which is how the word is translated.
+     */
+    optional?: boolean | React.ReactNode;
+    /** Cannot be reached, whatever `linear` says. */
+    disabled?: boolean;
+    /** Overrides the stepper's family for this one step. */
+    color?: PlassColor;
+    /** The panel this step shows while it is the current one. */
+    children?: React.ReactNode;
+}
+/**
+ * A process the reader is moving through, and where they are in it.
+ *
+ * It draws the same rail a [`PlTimeline`](../display/timeline) does — the same
+ * three bullet states, the same connector — and the difference is what the two
+ * are *for*, which is also the whole of when to reach for which. A timeline
+ * **reports**: it is an `<ol>` of text about a sequence that already happened,
+ * and nothing on it can be pressed. A stepper **is** the sequence: its steps are
+ * buttons, the current one owns a panel, and pressing one moves the reader.
+ *
+ * `active` is an index rather than a value, exactly as a timeline's is, because
+ * a stepper has no selection: everything before it is done, the step at it is
+ * where you are, everything after it is ahead.
+ */
+export declare const PlStepper: React.ForwardRefExoticComponent<PlStepperProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: a step that had to be told where it
+ * was would be one every caller could put in the wrong place, and `active={2}`
+ * would stop meaning anything. The stepper numbers its children as it walks
+ * them and hands each one its index through a context.
+ */
+export declare const PlStep: React.ForwardRefExoticComponent<PlStepProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/stepper/PlStepper.js

@@ -0,0 +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";const y=/* @__PURE__ */t.createContext(null),z=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o="horizontal",connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...w},k){const C=r(),S=d??C.size??"md",g=m??C.color??"primary",j=f??C.density??"default",[P,$]=t.useState(s),A=n??P,I=t.useId(),L=t.useCallback(e=>{void 0===n&&$(e),a?.(e)},[n,a]),R=t.Children.toArray(b),T=R.length,B=t.useMemo(()=>({size:S,density:j,orientation:o,color:g,active:A,linear:i,connector:c,baseId:I,onSelect:L}),[S,j,o,g,A,i,c,I,L]),M="horizontal"===o,O=M?R[A]?.props?.children:null;return e(y.Provider,{value:B,children:l("div",{ref:k,className:u("flex w-full flex-col",x),style:{...N(g,0),...h},...w,children:[e("ol",{role:"list",className:u("flex w-full",M?"flex-row":"flex-col"),children:R.map((l,t)=>e(z.Provider,{value:{index:t,last:t===T-1},children:l},t))}),p(O)?e("div",{"aria-labelledby":`${I}-${A}`,className:u("mt-4",v[S]),children:O}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:k,bullet:C,status:S,optional:g,disabled:j=!1,color:P,className:$,children:A,...I},L){const R=t.useContext(y),{index:T,last:B}=t.useContext(z),M=R?.size??"md",O=R?.orientation??"horizontal",W=P??R?.color??"primary",q=R?.active??null,D=R?.connector??"solid",E=S??c(T,q),F="horizontal"===O,G=!j&&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:C??("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(k)?e("span",{className:u("text-(--plass-muted-fg)",x[M]),children:k}):null,g?e("span",{className:u("text-(--plass-muted-fg) italic",x[M]),children:!0===g?"Optional":g}):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],j?"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]})});

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

@@ -0,0 +1,2 @@
+export { PlStep, PlStepper } from './PlStepper.js';
+export type { PlStepConnector, PlStepProps, PlStepStatus, PlStepperProps } from './PlStepper.js';

package/dist/components/stepper/index.js

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

package/dist/components/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as s}from"@base-ui/react/field";import{controlSlots as c,cx as i,focusRingClasses as n,hasContent as o,metaTextClasses as d,tickRowTextClasses as h}from"../../internal/styles.js";const m={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"},p={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[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)]",n].join(" "),u=/* @__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(" "),g=/* @__PURE__ */["cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),b=/* @__PURE__ */["cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),x=/* @__PURE__ */["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","[transition:left_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t="md",color:n="primary",label:k,description:w,error:v,invalid:N,labelPlacement:j="end",disabled:y=!1,readOnly:_=!1,className:P,classNames:R,style:S,...$},B){const O=o(v),q=N??O,z=q?"danger":n,D=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:B,className:i(f,m[t],y?b:_?g:u,R?.control),disabled:y,readOnly:_,...$,children:e(l.Thumb,{className:`${x} ${p[t]}`})})}),E=k||w?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===j?"flex-1":""].filter(Boolean).join(" "),children:[k?e(s.Label,{className:i(y?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",R?.label),children:k}):null,w?e(s.Description,{className:i(d[t],"text-(--plass-muted-fg)",R?.description),children:w}):null]}):null;return a(s.Root,{disabled:y,invalid:q,className:["inline-flex flex-col gap-1 align-top",P??""].filter(Boolean).join(" "),style:{...c(z,0,"solid"),...S},children:[e("div",{className:`flex items-start gap-2.5 ${h[t]}`,children:a(r,"start"===j?{children:[E,D]}:{children:[D,E]})}),e(s.Error,O?{match:!0,className:i(d[t],"text-(--p-accent)",R?.error),children:v}:{className:i(d[t],"text-(--p-accent)",R?.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 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)})]})});

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{Tabs as l}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as s,focusRingClasses as i,focusRingInsetClasses as n,gapClasses as r,glassClasses as c,hasContent as d,iconClasses as h,paddingXClasses as f,radiusClasses as u,surfaceSlots as p,transitionClasses as b}from"../../internal/styles.js";const v=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),m={solid:{horizontal:`${c} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${c} 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"}},x={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"}},g={solid:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},w="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:i,startIcon:c,endIcon:p,disabled:m=!1,className:x,children:g,...z},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(v);return t(l.Tab,{ref:y,value:i,disabled:m,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]",o[j],s[j],r[j],f[N][j],"solid"===P?u[j]:"",b,h,w,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...z,children:[d(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null,g,d(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:o=!1,className:s,children:n,...r},c){const{size:d}=a.useContext(v);return e(l.Panel,{ref:c,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--plass-fg)",i,u[d],s??""].filter(Boolean).join(" "),...r,children:n})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:o="glass",size:s="md",color:i="primary",density:n="default",value:r,defaultValue:c,onValueChange:d,orientation:h="horizontal",activateOnFocus:f=!1,loopFocus:b=!0,fullWidth:w=!1,className:z,style:y,children:P,...j},N){const T=a.useMemo(()=>({variant:o,size:s,density:n,orientation:h,fullWidth:w}),[o,s,n,h,w]),k=[],C=[];return a.Children.forEach(P,e=>{a.isValidElement(e)&&e.type===PlTabPanel?C.push(e):null!=e&&!1!==e&&k.push(e)}),e(v.Provider,{value:T,children:t(l.Root,{ref:N,value:r,defaultValue:c,onValueChange:e=>d?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...p(i,0),...y},...j,children:[t(l.List,{activateOnFocus:f,loopFocus:b,className:["relative shrink-0",m[o][h],"solid"===o?u[s]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[k,e(l.Indicator,{className:["pointer-events-none",x[o][h],g[o],"solid"===o?u[s]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),C]})})});
+"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 i,focusRingClasses as n,focusRingInsetClasses as r,gapClasses as c,glassClasses as d,hasContent as h,iconClasses as f,paddingXClasses as u,radiusClasses as p,surfaceSlots as b,transitionClasses as v}from"../../internal/styles.js";const m=/* @__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"}},g={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"}},w={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:n,endIcon:d,disabled:b=!1,className:x,children:g,...w},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(m);return t(o.Tab,{ref:y,value:l,disabled:b,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],i[j],c[j],u[N][j],"solid"===P?p[j]:"",v,f,z,r,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...w,children:[h(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,g,h(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:i,...r},c){const{size:d}=a.useContext(m);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",n,p[d],s??""].filter(Boolean).join(" "),...r,children:i})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:i,color:n,density:r,value:c,defaultValue:d,onValueChange:h,orientation:f="horizontal",activateOnFocus:u=!1,loopFocus:v=!0,fullWidth:z=!1,className:y,style:P,children:j,...N},T){const k=l(),C=i??k.size??"md",V=n??k.color??"primary",B=r??k.density??"default",F=a.useMemo(()=>({variant:s,size:C,density:B,orientation:f,fullWidth:z}),[s,C,B,f,z]),R=[],W=[];return a.Children.forEach(j,e=>{a.isValidElement(e)&&e.type===PlTabPanel?W.push(e):null!=e&&!1!==e&&R.push(e)}),e(m.Provider,{value:F,children:t(o.Root,{ref:T,value:c,defaultValue:d,onValueChange:e=>h?.(e),orientation:f,className:["flex min-w-0","vertical"===f?"flex-row gap-4":"flex-col gap-4",y??""].filter(Boolean).join(" "),style:{...b(V,0),...P},...N,children:[t(o.List,{activateOnFocus:u,loopFocus:v,className:["relative shrink-0",x[s][f],"solid"===s?p[C]:"",z&&"horizontal"===f?"w-full":"","horizontal"===f?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[R,e(o.Indicator,{className:["pointer-events-none",g[s][f],w[s],"solid"===s?p[C]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),W]})})});

package/dist/components/text-field/PlTextField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /** How the multiline control may be resized by the user. Ignored when single line. */
 export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
 /**
@@ -11,6 +11,15 @@ type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color'
 export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it, and the one place in the library where a

package/dist/components/text-field/PlTextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Field as s}from"@base-ui/react/field";import{Input as r}from"@base-ui/react/input";import{Spinner as n}from"../../internal/icons.js";import{controlHeightClasses as a,controlTextLeadingClasses as i,cx as o,disabledClasses as c,fieldReadOnlyClasses as m,fieldRestClasses as d,focusWithinRingClasses as p,gapClasses as x,hasContent as u,iconClasses as f,metaTextClasses as h,paddingXClasses as g,radiusClasses as $,stackGapClasses as b,surfaceSlots as y,transitionClasses as N}from"../../internal/styles.js";const v={xs:`${x.xs} ${$.xs} ${i.xs}`,sm:`${x.sm} ${$.sm} ${i.sm}`,md:`${x.md} ${$.md} ${i.md}`,lg:`${x.lg} ${$.lg} ${i.lg}`,xl:`${x.xl} ${$.xl} ${i.xl}`},w={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},j={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},z=/* @__PURE__ */["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",N,p,f].join(" "),k=d,D=m;export const PlTextField=/* @__PURE__ */l.forwardRef(function PlTextField({variant:i="glass",size:m="md",color:d="primary",density:p="default",elevation:x=0,multiline:f=!1,rows:$=3,resize:N="vertical",label:P,description:R,error:T,invalid:B,startIcon:F,endIcon:I,loading:O=!1,fullWidth:C=!1,readOnly:E=!1,disabled:L=!1,type:W="text",className:q,classNames:A,style:G,...H},J){const K=u(T),M=B??K,Q=M?"danger":d,S=l.useRef(null),U=l.useCallback(e=>{S.current=e,"function"==typeof J?J(e):J&&(J.current=e)},[J]),V=[z,v[m],f?`${w[m]} items-start`:`${a[m]} items-center`,g[p][m],L?c[i]:E?D[i]:k[i]].filter(Boolean).join(" "),X=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",f?`block ${j[N]}`:"self-stretch"].join(" "),Y="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)";return t(s.Root,{disabled:L,invalid:M,className:["flex-col align-top",b[m],C?"flex w-full":"inline-flex",q??""].filter(Boolean).join(" "),style:{...y(Q,x),...G},children:[P?e(s.Label,{className:o(h[m],"font-semibold",L?"text-(--plass-muted-fg)":"text-(--plass-fg)",A?.label),children:P}):null,t("span",{className:o(V,A?.control),onPointerDown:e=>{e.target!==e.currentTarget||L||(e.preventDefault(),S.current?.focus())},children:[F?e("span",{className:Y,children:F}):null,e(r,{ref:U,className:X,disabled:L,readOnly:E,"aria-busy":O||void 0,"data-loading":O||void 0,...f?{render:e("textarea",{rows:$})}:{type:W},...H}),O?e("span",{className:Y,children:e(n,{})}):I?e("span",{className:Y,children:I}):null]}),R?e(s.Description,{className:o(h[m],"text-(--plass-muted-fg)",A?.description),children:R}):null,e(s.Error,K?{match:!0,className:o(h[m],"text-(--p-accent)",A?.error),children:T}:{className:o(h[m],"text-(--p-accent)",A?.error)})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{Input as n}from"@base-ui/react/input";import{Spinner as i}from"../../internal/icons.js";import{hotKeyHandler as a}from"../../internal/keys.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as m,disabledClasses as d,fieldReadOnlyClasses as p,fieldRestClasses as f,focusWithinRingClasses as u,gapClasses as x,hasContent as h,iconClasses as g,metaTextClasses as y,paddingXClasses as $,radiusClasses as b,stackGapClasses as w,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";const v={xs:`${x.xs} ${b.xs} ${c.xs}`,sm:`${x.sm} ${b.sm} ${c.sm}`,md:`${x.md} ${b.md} ${c.md}`,lg:`${x.lg} ${b.lg} ${c.lg}`,xl:`${x.xl} ${b.xl} ${c.xl}`},z={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},k={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},D=/* @__PURE__ */["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",j,u,g].join(" "),K=f,P=p;export const PlTextField=/* @__PURE__ */l.forwardRef(function PlTextField({variant:c="glass",size:p,color:f,density:u,elevation:x=0,multiline:g=!1,rows:b=3,resize:j="vertical",label:R,description:T,error:B,invalid:F,startIcon:I,endIcon:O,loading:C=!1,fullWidth:E=!1,readOnly:L=!1,disabled:W=!1,type:q="text",hotKeys:A,onKeyDown:G,className:H,classNames:J,style:M,...Q},S){const U=s(),V=p??U.size??"md",X=f??U.color??"primary",Y=u??U.density??"default",Z=h(B),_=F??Z,ee=_?"danger":X,te=l.useRef(null),le=l.useCallback(e=>{te.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),se=[D,v[V],g?`${z[V]} items-start`:`${o[V]} items-center`,$[Y][V],W?d[c]:L?P[c]:K[c]].filter(Boolean).join(" "),re=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",g?`block ${k[j]}`:"self-stretch"].join(" "),ne="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)";return t(r.Root,{disabled:W,invalid:_,className:["flex-col align-top",w[V],E?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:{...N(ee,x),...M},children:[R?e(r.Label,{className:m(y[V],"font-semibold",W?"text-(--plass-muted-fg)":"text-(--plass-fg)",J?.label),children:R}):null,t("span",{className:m(se,J?.control),onPointerDown:e=>{e.target!==e.currentTarget||W||(e.preventDefault(),te.current?.focus())},children:[I?e("span",{className:ne,children:I}):null,e(n,{ref:le,className:re,disabled:W,readOnly:L,"aria-busy":C||void 0,"data-loading":C||void 0,onKeyDown:a(A,G),...g?{render:e("textarea",{rows:b})}:{type:q},...Q}),C?e("span",{className:ne,children:e(i,{})}):O?e("span",{className:ne,children:O}):null]}),T?e(r.Description,{className:m(y[V],"text-(--plass-muted-fg)",J?.description),children:T}):null,e(r.Error,Z?{match:!0,className:m(y[V],"text-(--p-accent)",J?.error),children:B}:{className:m(y[V],"text-(--p-accent)",J?.error)})]})});

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

package/dist/components/timeline/PlTimeline.d.ts

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
 import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
 /**
- * How far along one item is.
- *
- * Three states rather than two, because "the one you are on" is not the same
- * claim as "done", and a sequence that cannot say which step is current is a
- * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
- * around it, an empty one — rather than three shades of the same thing.
+ * How far along one item is. The same three a `PlStepper` draws, from
+ * `internal/steps.ts`, because a haloed bullet must not mean two things.
  */
-export type PlTimelineStatus = 'complete' | 'current' | 'upcoming';
+export type PlTimelineStatus = PlassStepStatus;
 /** How the line between two items is drawn. `none` leaves the gap open. */
-export type PlTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export type PlTimelineConnector = PlassStepConnector;
 export interface PlTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
     /**
      * How far the sequence has got: the index of the item being worked on now.