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

package/dist/components/select/PlSelect.js

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

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { PlassBreakpointFloor } from '../../types.js';
+export interface PlShowProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The narrowest width this is drawn at. Below it, nothing.
+     *
+     * There is no `xs`: everything is at or above the bottom rung, so `from="xs"`
+     * would mean "always" — which is what leaving the prop out already means.
+     */
+    from?: PlassBreakpointFloor;
+    /**
+     * The width it stops being drawn at. From that rung up, nothing.
+     *
+     * Exclusive, and it has to be: `until="md"` on one element and `from="md"` on
+     * another are then the two halves of one decision, with no width that draws
+     * both and none that draws neither.
+     */
+    until?: PlassBreakpointFloor;
+    /** What is shown, at the widths it is shown at. */
+    children?: React.ReactNode;
+}
+/**
+ * Content at some widths and not others.
+ *
+ * ```tsx
+ * <PlShow from="md">
+ *   <PlTable columns={columns} rows={rows} />
+ * </PlShow>
+ * <PlShow until="md">
+ *   <PlList>…</PlList>
+ * </PlShow>
+ * ```
+ *
+ * **It is not a box.** While it is showing it is `display: contents`, so its
+ * children take part in the layout around it exactly as they would have without
+ * it — a gate inside a flex row does not become a flex item, and one inside a
+ * grid does not become a cell. Which also means a `className` carrying a margin
+ * or a width does nothing here: there is no box for it to land on. Put your own
+ * element inside.
+ *
+ * **It decides in CSS, and that is the whole point.** A media query answered in
+ * JavaScript is `false` on a server and on the first frame a browser renders,
+ * so a `useMediaQuery` and a ternary draw the wrong half of a responsive layout
+ * and then throw it away — a flash on every page load rather than an edge case.
+ * The stylesheet knows the width before React has been asked anything.
+ *
+ * What follows from that is the trade worth knowing: **both halves are in the
+ * document**. Hiding is `display: none`, which takes the subtree off the
+ * accessibility tree and out of the layout, so nothing is read twice and
+ * nothing is drawn — but both were rendered and both were sent. That is right
+ * for two arrangements of the same content and wrong for a subtree that is
+ * expensive to build or that must not mount at all; for those,
+ * `usePlBreakpointValue` picks one and only that one is mounted, at the cost of
+ * a server rendering the `xs` answer.
+ *
+ * There is no `PlHide`, deliberately. `until` is the inverse of `from` and the
+ * two together are a band, so a second component would be a second way to spell
+ * the same three cases.
+ */
+export declare const PlShow: React.ForwardRefExoticComponent<PlShowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/show/PlShow.js

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

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

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

package/dist/components/show/index.js

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

package/dist/components/sidebar/PlSidebar.js

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

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

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { PlassChartCurve, PlassChartDatum, PlassColor, PlassSize } from '../../types.js';
+export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The values. `null` is a gap, exactly as it is on every other chart. */
+    data: readonly PlassChartDatum[];
+    /**
+     * Which mark. A line for a trend, an area for a quantity, bars for a count of
+     * discrete things — the same three sentences the full charts say, at a size
+     * where nothing else is being said at all.
+     * @default 'line'
+     */
+    shape?: 'line' | 'area' | 'bar';
+    /** How the line gets from one point to the next. @default 'linear' */
+    curve?: PlassChartCurve;
+    /**
+     * How tall the strip is. Sized against the line of text it sits beside rather
+     * than against the page — a sparkline is a word in a sentence, not a picture.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * The mark's colour. A `PlassColor` family, or any CSS colour.
+     *
+     * Unlike the full charts this one takes it directly: a sparkline has exactly
+     * one series and no legend, so there is nothing for a palette to hand out.
+     * @default the first chart slot
+     */
+    color?: PlassColor | (string & {});
+    /**
+     * Puts a dot on the last point. The one direct label a strip this small has
+     * room for, and it says where the series ended up.
+     * @default false
+     */
+    endDot?: boolean;
+    /**
+     * Draws a rule across the strip at this value — a target, a budget, last
+     * year's average. The one piece of context a sparkline can carry.
+     */
+    baseline?: number;
+    /**
+     * The bottom of the scale. Left out, the strip fills itself with its own
+     * range, which is what makes a sparkline legible at twenty pixels tall — and
+     * what makes two of them side by side incomparable. Pass the same `min` and
+     * `max` to a row of them and they become a small-multiples chart.
+     */
+    min?: number;
+    /** And the top of it. */
+    max?: number;
+    /** How wide. Fills its container by default. */
+    width?: number | string;
+    /** A name for the strip, read out in place of it. */
+    label?: string;
+}
+/**
+ * A chart with everything taken away except the shape.
+ *
+ * No axes, no grid, no legend, no tooltip — it is not a small chart, it is a
+ * different thing: a word-sized picture that goes inside a sentence, beside a
+ * [`PlStat`](../display/stat), or in a table cell, and says which way something
+ * has been going. Every number it could label is one the surrounding text
+ * already has, which is why it labels none of them.
+ *
+ * It scales itself to its own range, so the strip is always full. That is what
+ * makes it readable this small and it is also the trap: two sparklines side by
+ * side are drawn on two different scales unless they are given the same `min`
+ * and `max`.
+ */
+export declare const PlSparkline: React.ForwardRefExoticComponent<PlSparklineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sparkline/PlSparkline.js

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

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

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

package/dist/components/sparkline/index.js

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

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

@@ -80,5 +80,13 @@ export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
  * The sheet is never dyed, exactly as on a `PlCard`: what a spoiler holds is a
  * photograph, a paragraph, a plot twist, and it arrives with its own colours.
  * The family shows up on the button and in the hairline and stops there.
+ *
+ * **The box is the same height covered and uncovered**, which takes both of the
+ * things that could move it. The cover shares a grid cell with what it covers
+ * rather than being positioned over it, so a cover that is taller than a
+ * one-line spoiler makes the sheet taller instead of being clipped by it; and
+ * the `reversible` Hide row is drawn from the start and merely held invisible,
+ * so it is not a button's worth of height that arrives on the way in and leaves
+ * again on the way out.
  */
 export declare const PlSpoiler: React.ForwardRefExoticComponent<PlSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/PlSpoiler.js

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

package/dist/components/stack/PlStack.d.ts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import type { PlassResponsive, PlassSize } from '../../types.js';
+/** Which way the pile grows. */
+export type PlStackDirection = 'horizontal' | 'vertical' | 'diagonal';
+/** Which end of the list is on top. */
+export type PlStackFront = 'first' | 'last';
+export interface PlStackProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the pile grows.
+     *
+     * `diagonal` is a **fan** rather than a true 45°, and it cannot be anything
+     * else: the horizontal advance is `item width − overlap`, and a component that
+     * takes arbitrary children does not know how wide they are. `drop` is the
+     * vertical step, stated separately, and the two are independent on purpose.
+     * @default 'horizontal'
+     */
+    direction?: PlassResponsive<PlStackDirection>;
+    /**
+     * How far each item sits under the one before it, along the axis the pile
+     * flows on — a number of pixels or any CSS length.
+     *
+     * Left out it is a fraction of `size`, which keeps the overlap looking the
+     * same at every step.
+     */
+    overlap?: number | string;
+    /**
+     * The step on the *other* axis, for `direction="diagonal"` only. Defaults to
+     * whatever `overlap` resolved to, which is a 45° fan for square items and a
+     * shallower one for anything wider than it is tall.
+     */
+    drop?: number | string;
+    /**
+     * Which rung of the ladder the default `overlap` comes off.
+     *
+     * It decides **nothing else**. A stack draws no surface of its own and has no
+     * type in it, so there is no height to set and no ink to colour — the items
+     * are whatever they already were.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** How many items are drawn. Left out, every one of them is. */
+    max?: number;
+    /**
+     * How many there are altogether, when the stack was handed only the first few.
+     * Without it the count is worked out from the children, which is right only
+     * when all of them were passed.
+     */
+    total?: number;
+    /**
+     * Draws a last item standing for the ones that did not fit, given how many
+     * that is: `(n) => <PlAvatar initials={`+${n}`} />`.
+     *
+     * A function rather than a node, because the number **is** the item — a node
+     * would have to be given a count it has no way to work out, and would then be
+     * wrong every time the list changed.
+     */
+    overflow?: (hidden: number) => React.ReactNode;
+    /**
+     * Which end of the list is on top.
+     *
+     * `last` is what the DOM does on its own and what a row of faces wants — the
+     * newest arrival in front. `first` is what a deck of cards is: the top card is
+     * the one you read first.
+     * @default 'last'
+     */
+    front?: PlStackFront;
+    /**
+     * What each item further back is multiplied by, compounding. `0.94` takes four
+     * steps down to about 78%.
+     *
+     * On the standalone `scale` property rather than inside a `transform`, so a
+     * caller's own transform on the same item survives.
+     * @default 1
+     */
+    scaleStep?: number;
+    /** The same, for opacity. @default 1 */
+    opacityStep?: number;
+    /**
+     * Draws a hairline of the page's own surface colour around each item, which
+     * is the *hole* the near item is cut out of rather than an edge on it.
+     *
+     * Two shapes of similar tone laid over each other have no boundary between
+     * them at all and the pile reads as one smeared shape. A translucent line
+     * would not help, because what is behind it is the other item.
+     *
+     * It lands on **the element you passed**, so it takes that element's shape.
+     * Wrap an avatar in something square and the ring is square; there is no way
+     * for a component that accepts arbitrary children to know better.
+     * @default false
+     */
+    ring?: boolean;
+    /** The things in the pile. */
+    children?: React.ReactNode;
+}
+/**
+ * Things piled up, overlapping.
+ *
+ * A row of faces is one arrangement of this and not a component of its own: a
+ * deck of cards, a pile of documents, a fan of thumbnails and a stack of avatars
+ * differ in what is in them, not in how they are laid out. So this takes
+ * whatever it is given and never looks inside.
+ *
+ * Which is also what it gives up. It cannot set an axis on its items the way a
+ * `PlAvatarGroup` used to, because it does not know what they are — put a
+ * `PlassProvider` around it for `size` and `color`, and write anything narrower
+ * on the items themselves.
+ *
+ * Two boxes are drawn per item rather than one, and the second is not spare. The
+ * outer one carries the offset and the stacking order; the inner one carries the
+ * depth, on the standalone `scale` and `opacity` properties. Kept on one box,
+ * an entrance animation that writes `scale` — every keyframe in this library
+ * that grows or zooms does — would overwrite the depth on its first frame.
+ */
+export declare const PlStack: React.ForwardRefExoticComponent<PlStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stack/PlStack.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{cx as e,toLength as a}from"../../internal/styles.js";import{useResponsiveValue as i}from"../../internal/responsive.js";const n={xs:"0.5rem",sm:"0.625rem",md:"0.875rem",lg:"1rem",xl:"1.25rem"},s={horizontal:/* @__PURE__ */["flex-row","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--p-overlap)*-1)]"].join(" "),vertical:/* @__PURE__ */["flex-col","[&>*:not(:first-child)]:[margin-block-start:calc(var(--p-overlap)*-1)]"].join(" "),diagonal:/* @__PURE__ */["flex-row","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--p-overlap)*-1)]"].join(" ")};export const PlStack=/* @__PURE__ */l.forwardRef(function PlStack({direction:o,overlap:c,drop:m,size:p,max:f,total:d,overflow:h,front:g="last",scaleStep:v=1,opacityStep:x=1,ring:u=!1,className:j,style:y,children:S,...k},z){const w=i(o,"horizontal"),N=t(),M=p??N.size??"md",P=void 0===c?n[M]:a(c),$=void 0===m?P:a(m),b=l.Children.toArray(S),A=void 0===f?b:b.slice(0,Math.max(0,f)),B=d??b.length,C=Math.max(0,B-A.length),I=h&&C>0?[...A,h(C)]:[...A];return r("div",{ref:z,className:e("isolate inline-flex items-start",s[w],u?"[&>*>*>*]:ring-2 [&>*>*>*]:ring-(--plass-surface)":"",j),style:{"--p-overlap":P,...y},...k,children:I.map((l,t)=>{const e="first"===g?t:I.length-1-t;return r("span",{className:"flex shrink-0",style:{zIndex:"first"===g?I.length-t:t+1,..."diagonal"===w&&t>0?{marginBlockStart:`calc(${$} * ${t})`}:null},children:r("span",{className:"flex",style:{...1===v?null:{scale:String(v**e)},...1===x?null:{opacity:x**e}},children:l})},t)})})});

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

@@ -0,0 +1,2 @@
+export { PlStack } from './PlStack.js';
+export type { PlStackDirection, PlStackFront, PlStackProps } from './PlStack.js';

package/dist/components/stack/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
-import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassResponsive, 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. */
@@ -22,7 +22,7 @@ export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div
      */
     linear?: boolean;
     /** @default 'horizontal' */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /** How the line between two steps is drawn. @default 'solid' */
     connector?: PlStepConnector;
     /** @default 'md' */

package/dist/components/stepper/PlStepper.js

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

package/dist/components/table/PlTable.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{controlTextLeadingClasses as a,focusRingInsetClasses as t,metaTextClasses as l,paddingXValues as s,radiusClasses as o,sheetRestClasses as n,srOnlyClasses as i,surfaceSlots as d}from"../../internal/styles.js";const c={default:{xs:"0.375rem",sm:"0.5rem",md:"0.75rem",lg:"0.875rem",xl:"1rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.4375rem",lg:"0.5625rem",xl:"0.6875rem"}},p={display:"table",width:"100%",margin:0,borderCollapse:"collapse",borderSpacing:0},m=/* @__PURE__ */["[--p-row:transparent]","[transition:background-color_var(--plass-duration)_var(--plass-ease)]"].join(" "),g=/* @__PURE__ */["cursor-pointer [outline:none]",t].join(" "),h="1px solid var(--plass-divider)";export function PlTable({variant:t="glass",size:v="md",color:y="primary",density:u="default",elevation:x=0,columns:f,rows:b,getRowKey:w,caption:k,empty:N="No data",striped:j=!1,hoverable:B=!1,stickyHeader:$=!1,maxHeight:A,onRowClick:C,className:H,style:S,...T}){const z=s[u][v],D=c[u][v],K=Boolean(C),R=B||K,_=void 0!==A,E={padding:`${D} ${z}`,border:0,background:"none"},I={...E,...$?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:"1px solid var(--plass-border)"},...$?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?E:{...E,borderTop:h};return r("div",{className:["overflow-hidden",o[v],n[t],H??""].filter(Boolean).join(" "),style:{...d(y,x),...S},...T,children:[k?e("div",{"aria-hidden":"true",className:`${l[v]} font-semibold text-(--plass-muted-fg)`,style:{...E,borderBottom:h,textAlign:"start"},children:k}):null,e("div",{className:["overflow-x-auto",_?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:_?{maxHeight:A}:void 0,children:r("table",{className:`text-start ${a[v]} text-(--plass-fg)`,style:p,children:[k?e("caption",{className:i,children:k}):null,e("colgroup",{children:f.map(r=>e("col",{style:void 0===r.width?void 0:{width:"number"==typeof r.width?`${r.width}px`:r.width}},r.key))}),e("thead",{children:e("tr",{children:f.map(r=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",$?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...I,textAlign:r.align??"start"},children:r.header??r.key},r.key))})}),e("tbody",{children:0===b.length?e("tr",{className:m,children:e("td",{colSpan:f.length,className:"text-(--plass-muted-fg)",style:{...E,padding:`2rem ${z}`,textAlign:"center"},children:N})}):b.map((r,a)=>e("tr",{className:[m,j&&a%2==1?"[--p-row:var(--plass-stripe)]":"",R?"hover:[--p-row:var(--p-soft)]":"",K?g:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:K?0:void 0,onClick:C?()=>C(r,a):void 0,onKeyDown:C?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),C(r,a)))}:void 0,children:f.map(t=>e("td",{style:{...bodyCellStyle(a),textAlign:t.align??"start"},children:t.render?t.render(r,a):r[t.key]},t.key))},w?w(r,a):a))})]})})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as r,metaTextClasses as a,paddingXValues as l,radiusClasses as o,sheetRestClasses as s,srOnlyClasses as n,surfaceSlots as i}from"../../internal/styles.js";import{cellPaddingYValues as d,clickableRowClasses as c,headRule as p,rowClasses as m,rowRule as h,tableStyle as g}from"../../internal/table.js";export function PlTable({variant:y="glass",size:v="md",color:f="primary",density:u="default",elevation:x=0,columns:b,rows:w,getRowKey:k,caption:N,empty:j="No data",striped:B=!1,hoverable:$=!1,stickyHeader:A=!1,maxHeight:C,onRowClick:H,className:T,style:z,...D}){const K=l[u][v],R=d[u][v],S=Boolean(H),E=$||S,I=void 0!==C,P={padding:`${R} ${K}`,border:0,background:"none"},q={...P,...A?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:p},...A?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?P:{...P,borderTop:h};return t("div",{className:["overflow-hidden",o[v],s[y],T??""].filter(Boolean).join(" "),style:{...i(f,x),...z},...D,children:[N?e("div",{"aria-hidden":"true",className:`${a[v]} font-semibold text-(--plass-muted-fg)`,style:{...P,borderBottom:h,textAlign:"start"},children:N}):null,e("div",{className:["overflow-x-auto",I?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:I?{maxHeight:C}:void 0,children:t("table",{className:`text-start ${r[v]} text-(--plass-fg)`,style:g,children:[N?e("caption",{className:n,children:N}):null,e("colgroup",{children:b.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:b.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",A?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...q,textAlign:t.align??"start"},children:t.header??t.key},t.key))})}),e("tbody",{children:0===w.length?e("tr",{className:m,children:e("td",{colSpan:b.length,className:"text-(--plass-muted-fg)",style:{...P,padding:`2rem ${K}`,textAlign:"center"},children:j})}):w.map((t,r)=>e("tr",{className:[m,B&&r%2==1?"[--p-row:var(--plass-stripe)]":"",E?"hover:[--p-row:var(--p-soft)]":"",S?c:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:S?0:void 0,onClick:H?()=>H(t,r):void 0,onKeyDown:H?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),H(t,r)))}:void 0,children:b.map(a=>e("td",{style:{...bodyCellStyle(r),textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},k?k(t,r):r))})]})})]})}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassStyleProps, PlassVariant } from '../../types.js';
+import type { PlassOrientation, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
 /** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
 export type PlTabValue = string | number;
 export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
@@ -28,7 +28,7 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
      * UI's doing, and is what makes a vertical tab bar reachable.
      * @default 'horizontal'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /**
      * Whether moving the arrow keys also chooses the tab it lands on.
      *

package/dist/components/tabs/PlTabs.js

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

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

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