plass-ui 1.7.0 → 1.8.1

package/dist/components/animate-marquee/PlAnimateMarquee.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as i,repeatValue as n,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{cx as p}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:u,delay:c=0,easing:d,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:w=!0,label:z,className:A,style:N,children:O,...S},W){const G=void 0===u&&R<=0,P=o({trigger:g,play:y,once:b,threshold:j,paused:v||G,infinite:a(f)}),$=t.useRef(null),k=t.useRef(null),[C,E]=t.useState(0),[F,I]=t.useState(!1),B="vertical"===q,D=m();t.useEffect(()=>{const e=$.current,t=k.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(B?r.rowGap:r.columnGap)||0,i=B?t.offsetHeight:t.offsetWidth;E(i+a),I(B?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[B,D]);const J=u??(C>0&&!G?C/R*1e3:12e3);return e("div",{ref:e=>{$.current=e,P.ref(e),"function"==typeof W?W(e):W&&(W.current=e)},className:p("plass-marquee",B&&"plass-marquee-vertical",A),style:{"--p-anim-gap":i(H),...d?{"--p-anim-ease":d}:{},"--p-anim-duration":`${Math.round(J)}ms`,"--p-anim-delay":`${c}ms`,"--p-anim-repeat":n(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":P.state,...N},"data-plass-animation":"marquee","data-state":P.state,"data-pause-on-hover":w?"":void 0,tabIndex:D&&F?0:void 0,role:z?"group":void 0,"aria-label":z,...r(S,P.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?k:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:O},t))(r))})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as n,repeatValue as i,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as m}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:d,delay:p=0,easing:c,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:S=!0,label:w,className:z,style:A,children:N,...O},W){const G=void 0===d&&R<=0,P=o({trigger:g,play:y,once:b,threshold:j,paused:v||G,infinite:a(f),endless:a(f)}),$=t.useRef(null),k=t.useRef(null),[B,C]=t.useState(0),[E,F]=t.useState(!1),I="vertical"===q,D=u(),J=P.started&&Boolean(v||G),[K,L]=t.useState(null),Q=J&&(D||K===P.runs),T=Q?P.runs:null;T!==K&&L(T);const U=D||Q;t.useEffect(()=>{const e=$.current,t=k.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(I?r.rowGap:r.columnGap)||0,n=I?t.offsetHeight:t.offsetWidth;C(n+a),F(I?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[I,U]);const V=d??(B>0&&!G?B/R*1e3:12e3);return e("div",{ref:e=>{$.current=e,P.ref(e),"function"==typeof W?W(e):W&&(W.current=e)},className:m("plass-marquee",I&&"plass-marquee-vertical",z),style:{"--p-anim-gap":n(H),...c?{"--p-anim-ease":c}:{},"--p-anim-duration":`${Math.round(V)}ms`,"--p-anim-delay":`${p}ms`,"--p-anim-repeat":i(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":P.state,...A},"data-plass-animation":"marquee","data-plass-finite":a(f)?void 0:"","data-state":P.state,"data-pause-on-hover":S?"":void 0,tabIndex:U&&E?0:void 0,role:w?"group":void 0,"aria-label":w,...r(O,P.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?k:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:N},t))(r))})});

package/dist/components/animate-scramble/PlAnimateScramble.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{poolOf as o,scrambleAt as c}from"../../internal/scramble.js";import{cx as l,srOnlyCopyClasses as u}from"../../internal/styles.js";export const PlAnimateScramble=/* @__PURE__ */a.forwardRef(function PlAnimateScramble({children:d,characters:f,duration:p=1200,delay:h=0,tick:x=45,trigger:b="visible",play:j,once:M=!0,threshold:g=.2,paused:A,render:y,className:F,...v},N){const S=m(),q=i({trigger:b,play:j,once:M,threshold:g,paused:A,infinite:!1,nonce:d}),E=a.useMemo(()=>f??o(d),[f,d]),[P,R]=a.useState(()=>d),k=a.useRef(0);return a.useEffect(()=>{k.current=0},[q.runs,d]),a.useEffect(()=>{if(S)return void R(d);if(!q.started)return k.current=0,void R(c(d,E,0,0));if(A)return;const e=Math.max(1,p);let r,t=0,a=0,n=-1;const step=s=>{r??=s-k.current,k.current=s-r;const i=k.current-h,m=Math.min(1,i/e),o=Math.floor(Math.max(0,i)/Math.max(1,x));o!==n&&(n=o,a+=1,R(c(d,E,Math.max(0,m),a))),m<1?t=requestAnimationFrame(step):R(d)};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[q.started,q.runs,S,A,d,E,p,h,x]),s({render:y??e("span",{}),ref:[N,q.ref],props:{className:l(F),"data-plass-animation":"scramble","data-state":q.state,children:t(r,{children:[e("span",{className:u,children:d}),e("span",{"aria-hidden":"true",children:P})]}),...n(v,q.handlers)}})});
+"use client";import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as c}from"../../internal/animate.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{poolOf as i,scrambleAt as m}from"../../internal/scramble.js";import{cx as o,drawnCopyClasses as l,srOnlyClasses as f}from"../../internal/styles.js";export const PlAnimateScramble=/* @__PURE__ */n.forwardRef(function PlAnimateScramble({children:d,characters:p,duration:h=1200,delay:x=0,tick:A=45,trigger:M="visible",play:b,once:g=!0,threshold:j=.2,paused:F,render:q,className:y,...N},R){const v=u(),E=c({trigger:M,play:b,once:g,threshold:j,paused:F,infinite:!1,target:d}),S=n.useMemo(()=>p??i(d),[p,d]),[P,k]=n.useState(()=>d),w=n.useRef(0),z=n.useRef(null),B=n.useRef(x);return n.useEffect(()=>{B.current=x}),n.useEffect(()=>{w.current=0,z.current=null},[E.runs,d]),n.useEffect(()=>{const r=Math.max(1,h);let e,t=0;if(v){if(k(d),!E.started)return;const land=()=>{z.current??=B.current,w.current=Math.max(w.current,z.current+r)};if(null!==z.current||w.current>=B.current)return void land();if(F)return;const wait=r=>{e??=r-w.current,w.current=r-e,w.current<B.current?t=requestAnimationFrame(wait):land()};return t=requestAnimationFrame(wait),()=>cancelAnimationFrame(t)}if(!E.started)return w.current=0,z.current=null,void k(m(d,S,0,0));if(F)return;let n=0,a=-1;const step=s=>{e??=s-w.current,w.current=s-e;const c=w.current-(z.current??B.current),u=Math.min(1,c/r),i=Math.floor(Math.max(0,c)/Math.max(1,A));c>=0&&(z.current??=B.current),i!==a&&(a=i,n+=1,k(m(d,S,Math.max(0,u),n))),u<1?t=requestAnimationFrame(step):k(d)};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[E.started,E.runs,v,F,d,S,h,A]),s({render:q??r("span",{}),ref:[R,E.ref],props:{className:o(y),"data-plass-animation":"scramble","data-state":E.state,children:t(e,{children:[r("span",{className:f,children:d}),r("span",{"aria-hidden":"true","data-text":P,"data-sample":d,className:l})]}),...a(N,E.handlers)}})});

package/dist/components/animate-shake/PlAnimateShake.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as s}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:o,repeat:p=1,alternate:m,paused:c,trigger:d="manual",play:f=!1,once:h=!0,threshold:u=.2,replay:y,distance:g=6,render:k,className:N,style:b,children:j,...x},A){const P=s({effect:null,duration:e,delay:l,easing:o,repeat:p,alternate:m,x:n(g),trigger:d,play:f,once:h,threshold:u,paused:c,infinite:!1,nonce:y,children:j});return r({render:k,ref:[A,P.ref],props:{...a(x,P.props),className:i(t,"plass-anim-shake",P.className,N),style:{...P.style,...b},"data-plass-animation":"shake",children:P.children}})});
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as s}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:o,repeat:m=1,alternate:p,paused:c,trigger:d="manual",play:f=!1,once:h=!0,threshold:u=.2,replay:y,distance:g=6,render:k,className:N,style:b,children:j,...x},A){const P=s({effect:null,duration:e,delay:l,easing:o,repeat:m,alternate:p,x:n(g),trigger:d,play:f,once:h,threshold:u,paused:c,infinite:!1,moves:!0,nonce:y,children:j});return r({render:k,ref:[A,P.ref],props:{...a(x,P.props),className:i(t,"plass-anim-shake",P.className,N),style:{...P.style,...b},"data-plass-animation":"shake",children:P.children}})});

package/dist/components/animate-split/PlAnimateSplit.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as i}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as o,animationSlots as c,isInfinite as p,revealClip as l,slideOffsets as m,staggerSlots as d,useAnimationRun as u}from"../../internal/animate.js";import{cx as f,srOnlyCopyClasses as g}from"../../internal/styles.js";import{graphemesOf as h}from"../../internal/text.js";const y=/[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;function effectStart(e){switch(e){case"slide":return{opacity:0,...m("bottom","100%")};case"grow":return{opacity:0,scale:.8};case"zoom":return{opacity:0,scale:.4};case"rotate":return{opacity:0,angle:"-180deg",angleTo:"0deg"};case"reveal":return{opacity:1,clip:l("left")};default:return{opacity:0}}}export const PlAnimateSplit=/* @__PURE__ */a.forwardRef(function PlAnimateSplit({children:l,by:m="word",effect:S="fade",mode:w="in",duration:b=400,delay:j=0,easing:x,repeat:N=1,alternate:v,paused:k,trigger:$="mount",play:A,once:F=!0,threshold:H=.2,timeline:K,range:M,stagger:P=40,durationStep:T=0,reverse:z=!1,render:B,className:L,style:O,...R},q){const C=a.useMemo(()=>function piecesOf(e,t){const r=[];for(const a of e.split(/(\s+)/)){if(""===a)continue;if("word"===t||""===a.trim()){r.push([a]);continue}let e=[];for(const t of h(a))0===e.length||y.test(t)?(e=[t],r.push(e)):e.push(t)}return r}(l,m),[l,m]),D=u({trigger:"view"===K?"mount":$,play:A,once:F,threshold:H,paused:k,infinite:p(N)}),E={...effectStart(S),duration:b,delay:j,easing:x,repeat:N,alternate:v,mode:w,timeline:K,range:M},G=C.reduce((e,t)=>""===t[0].trim()?e:e+t.length,0),I=`${s} ${o[S]}`;let J=-1;const renderPart=(t,r)=>(J+=1,e("span",{className:`${I} inline-block whitespace-normal`,style:{...c(d(E,{index:J,count:G,stagger:P,durationStep:T,reverse:z})),"--p-anim-state":D.state},children:t},r));return i({render:B??e("span",{}),ref:[q,D.ref],props:{...n(R,D.handlers),className:f(L),style:O,"data-plass-animation":S,"data-state":D.state,children:r(t,{children:[e("span",{className:g,children:l}),e("span",{"aria-hidden":"true",children:C.map((t,r)=>""===t[0].trim()?e(a.Fragment,{children:t[0]},r):1===t.length?renderPart(t[0],r):e("span",{className:"inline-block",children:t.map((e,t)=>renderPart(e,t))},r))})]})}})});
+"use client";import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as i}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as o,animationSlots as c,isInfinite as p,revealClip as l,slideOffsets as m,staggerSlots as d,useAnimationRun as u}from"../../internal/animate.js";import{cx as f,srOnlyClasses as g}from"../../internal/styles.js";import{graphemesOf as h}from"../../internal/text.js";const y=/[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;function effectStart(e){switch(e){case"slide":return{opacity:0,...m("bottom","100%")};case"grow":return{opacity:0,scale:.8};case"zoom":return{opacity:0,scale:.4};case"rotate":return{opacity:0,angle:"-180deg",angleTo:"0deg"};case"reveal":return{opacity:1,clip:l("left")};default:return{opacity:0}}}export const PlAnimateSplit=/* @__PURE__ */r.forwardRef(function PlAnimateSplit({children:l,by:m="word",effect:S="fade",mode:w="in",duration:x=400,delay:b=0,easing:j,repeat:N=1,alternate:v,paused:k,trigger:$="mount",play:A,once:F=!0,threshold:H=.2,timeline:K,range:M,stagger:P=40,durationStep:T=0,reverse:z=!1,render:B,className:L,style:O,...R},q){const C=r.useMemo(()=>function piecesOf(e,t){const a=[];for(const r of e.split(/(\s+)/)){if(""===r)continue;if("word"===t||""===r.trim()){a.push([r]);continue}let e=[];for(const t of h(r))0===e.length||y.test(t)?(e=[t],a.push(e)):e.push(t)}return a}(l,m),[l,m]),D=u({trigger:"view"===K?"mount":$,play:A,once:F,threshold:H,paused:k,infinite:p(N),endless:p(N)&&"view"!==K}),E={...effectStart(S),duration:x,delay:b,easing:j,repeat:N,alternate:v,mode:w,timeline:K,range:M},G=C.reduce((e,t)=>""===t[0].trim()?e:e+t.length,0),I=`${s} ${o[S]}`;let J=-1;const renderPart=(t,a)=>(J+=1,e("span",{"data-text":t,className:`${I} inline-block whitespace-normal before:content-[attr(data-text)]`,style:{...c(d(E,{index:J,count:G,stagger:P,durationStep:T,reverse:z})),"--p-anim-state":D.state}},a));return i({render:B??e("span",{}),ref:[q,D.ref],props:{...n(R,D.handlers),className:f(L),style:O,"data-plass-animation":S,"data-state":D.state,children:a(t,{children:[e("span",{className:g,children:l}),e("span",{"aria-hidden":"true",className:"select-none",children:C.map((t,a)=>""===t[0].trim()?e(r.Fragment,{children:t[0]},a):1===t.length?renderPart(t[0],a):e("span",{className:"inline-block",children:t.map((e,t)=>renderPart(e,t))},a))})]})}})});

package/dist/components/animate-typing/PlAnimateTyping.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{isInfinite as s,useAnimationRun as i}from"../../internal/animate.js";import{usePrefersReducedMotion as n}from"../../internal/media.js";import{srOnlyCopyClasses as l}from"../../internal/styles.js";import{graphemesOf as o,textOf as c}from"../../internal/text.js";export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:m,speed:u=24,hold:p=1400,erase:d=!1,eraseSpeed:f,caret:h=!0,caretChar:y="|",duration:g,delay:j=0,repeat:x=1,paused:T,trigger:v="mount",play:N,once:b=!0,threshold:M=.2,className:w,style:A,children:E,...P},R){const S=i({trigger:v,play:N,once:b,threshold:M,paused:T,infinite:s(x)}),k=n(),C=m??c(E),q=r.useMemo(()=>o(C),[C]),z=q.length,[B,D]=r.useState(0),F=r.useRef(0),G=g&&z>0?g/z:1e3/Math.max(u,1),H=1e3/Math.max(f??2*u,1);return r.useEffect(()=>{F.current=0},[C,S.runs]),r.useEffect(()=>{if(k||0===z)return void D(z);if(!S.started)return F.current=0,void D(0);if(T)return;let e,t=!1,r=F.current,a=1,s=!1;const i="infinite"===x?1/0:Math.max(1,x);if(r>=z&&1===i)return;const step=()=>{if(!t){if(s)return r-=1,F.current=r,D(r),r<=0&&(s=!1,a+=1),void(e=setTimeout(step,s?H:G));if(r+=1,F.current=r,D(r),r<z)e=setTimeout(step,G);else if(!(a>=i)){if(d)return s=!0,void(e=setTimeout(step,p));a+=1,e=setTimeout(()=>{t||(r=0,F.current=0,D(0),e=setTimeout(step,G))},p)}}};return D(r),e=setTimeout(step,0===r?j:G),()=>{t=!0,clearTimeout(e)}},[S.started,S.runs,C,T,k,z,G,H,j,p,d,x]),t("div",{ref:e=>{S.ref(e),"function"==typeof R?R(e):R&&(R.current=e)},className:w,style:A,"data-plass-animation":"typing","data-state":S.state,...a(P,S.handlers),children:[e("span",{className:l,children:C}),t("span",{"aria-hidden":"true",className:"relative whitespace-pre-wrap",children:[q.slice(0,B).join(""),h?e("span",{className:"plass-caret absolute",children:y}):null,e("span",{"data-sample":q.slice(B).join(""),className:"invisible before:content-[attr(data-sample)]",children:h?e("span",{className:"inline-block",children:y}):null})]})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{isInfinite as a,useAnimationRun as u,useOffScreen as c}from"../../internal/animate.js";import{usePrefersReducedMotion as s}from"../../internal/media.js";import{srOnlyClasses as i}from"../../internal/styles.js";import{graphemesOf as l,textOf as o}from"../../internal/text.js";export const PlAnimateTyping=/* @__PURE__ */t.forwardRef(function PlAnimateTyping({text:m,speed:f=24,hold:d=1400,erase:p=!1,eraseSpeed:h,caret:x=!0,caretChar:y="|",duration:g,delay:v=0,repeat:j=1,paused:b,trigger:R="mount",play:w,once:M=!0,threshold:N=.2,className:T,style:S,children:P,...A},E){const k=u({trigger:R,play:w,once:M,threshold:N,paused:b,infinite:a(j),endless:a(j)}),C=s(),$=t.useRef(null),q=c($,x&&!C),z=m??o(P),B=t.useMemo(()=>l(z),[z]),D=B.length,[F,G]=t.useState(()=>({line:B,count:0})),H=t.useRef(0),I=t.useRef(!1),J=t.useRef(1),K=t.useRef(!1),L=t.useRef(null),O=t.useRef(0),Q=g&&D>0?g/D:1e3/Math.max(f,1),U=1e3/Math.max(h??2*f,1);t.useEffect(()=>{H.current=0,I.current=!1,J.current=1,K.current=!1,L.current=null,O.current=0},[z,k.runs]),t.useEffect(()=>{const show=e=>{G(r=>r.line===B&&r.count===e?r:{line:B,count:e})},e="infinite"===j?1/0:Math.max(1,j);if(C){if(show(D),!k.started||b||e>1||0===D)return;const land=()=>{H.current=D,L.current=null};if(H.current>0)return void land();const r=performance.now(),t=setTimeout(land,Math.max(0,v-O.current));return()=>{clearTimeout(t),O.current+=performance.now()-r}}if(!k.started)return H.current=0,I.current=!1,J.current=1,K.current=!1,L.current=null,O.current=0,void show(0);if(b)return;if(k.resting)return void show(H.current);if(0===D)return void show(0);let r,t=!1,n=H.current,a=I.current,u=0,c=!1;if(n>=D&&!a&&J.current>=e)return;const wait=(e,n)=>{L.current=e,u=performance.now(),r=setTimeout(()=>{t||(L.current=null,c=!1,n())},e)},finish=()=>{J.current>=e||(K.current=!0,wait(d,release))},release=()=>{if(K.current=!1,p)return a=!0,I.current=!0,void step();J.current+=1,n=0,H.current=0,show(0),wait(Q,step)},step=()=>{if(a)return n-=1,H.current=n,show(n),n<=0&&(a=!1,I.current=!1,J.current+=1),void wait(a?U:Q,step);n+=1,H.current=n,show(n),n<D?wait(Q,step):finish()};show(n);const s=L.current;return 0!==n||1!==J.current||a?K.current?wait(s??d,release):n>=D&&!a?finish():wait(s??(0===n?v:a?U:Q),step):(c=!0,wait(Math.max(0,v-O.current),step)),()=>{t=!0,clearTimeout(r);const e=performance.now()-u;c&&(O.current+=e),null!==L.current&&(L.current=Math.max(0,L.current-e))}},[k.started,k.runs,B,b,k.resting,C,D,Q,U,v,d,p,j]);const V="string"==typeof y||"number"==typeof y?String(y):null,caretGlyph=(r,t)=>e("span",null===V?{className:r,style:t,children:y}:{"data-text":V,className:`${r} before:content-[attr(data-text)]`,style:t});return r("div",{ref:e=>{$.current=e,k.ref(e),"function"==typeof E?E(e):E&&(E.current=e)},className:T,style:S,"data-plass-animation":"typing","data-state":k.state,...n(A,k.handlers),children:[e("span",{className:i,children:z}),r("span",{"aria-hidden":"true","data-text":F.line.slice(0,F.count).join(""),className:"relative whitespace-pre-wrap before:content-[attr(data-text)]",children:[x?caretGlyph("plass-caret absolute",q?{animationPlayState:"paused"}:void 0):null,e("span",{"data-sample":F.line.slice(F.count).join(""),className:"invisible before:content-[attr(data-sample)]",children:x?caretGlyph("inline-block"):null})]})]})});

package/dist/components/app-logo/PlAppLogo.d.ts

@@ -15,24 +15,12 @@ import type { PlassColor, PlassSize, PlassVariant } from '../../types.js';
  * - `circle` — the same tile, round. For the products whose icon is a disc.
  */
 export type PlAppLogoShape = 'bare' | 'plate' | 'circle';
-export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+interface PlAppLogoBaseProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * The mark. An `<img>`, an inline `<svg>`, a `PlIcon` — whatever the product's
-     * artwork actually is.
+     * artwork actually is. It says what it says itself: `alt` does not reach it.
      */
     children?: React.ReactNode;
-    /** A picture to draw as the mark, instead of `children`. */
-    src?: string;
-    /**
-     * What the picture says, for a reader who cannot see it.
-     *
-     * Leave it empty when `name` is set: the wordmark beside the mark already
-     * says the product's name, and a picture that repeats it is a screen reader
-     * saying it twice.
-     */
-    alt?: string;
-    /** The product's name, set beside the mark. */
-    name?: React.ReactNode;
     /** A line under the name — an environment, a tenant, a plan. */
     description?: React.ReactNode;
     /** How the artwork is framed. @default 'bare' */
@@ -52,6 +40,52 @@ export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'spa
      */
     render?: useRender.RenderProp;
 }
+/** A name that is there: anything React draws, short of nothing at all. */
+type PlAppLogoName = Exclude<React.ReactNode, null | undefined | boolean>;
+/** A logo with its name beside it, which makes the picture decorative. */
+interface PlAppLogoNamedProps extends PlAppLogoBaseProps {
+    /** The product's name, set beside the mark. */
+    name: PlAppLogoName;
+    /** A picture to draw as the mark, instead of `children`. */
+    src?: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Leave it out: the
+     * wordmark beside the mark already says the product's name, and a picture
+     * that repeats it is a screen reader saying it twice.
+     * @default ''
+     */
+    alt?: string;
+}
+/** A picture with no name beside it, which has to say what it is. */
+interface PlAppLogoPictureProps extends PlAppLogoBaseProps {
+    /** The product's name, set beside the mark. */
+    name?: React.ReactNode;
+    /** A picture to draw as the mark, instead of `children`. */
+    src: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Required here: a
+     * logo that is the link home with nothing else in it is named by this alone.
+     * `alt=""` says the picture is decorative.
+     */
+    alt: string;
+}
+/** Artwork drawn as `children`, which speaks for itself. */
+interface PlAppLogoArtworkProps extends PlAppLogoBaseProps {
+    /** The product's name, set beside the mark. */
+    name?: React.ReactNode;
+    src?: undefined;
+    /** Only read with `src`. */
+    alt?: string;
+}
+/**
+ * The props of a `PlAppLogo`.
+ *
+ * A union, so that a picture with no name beside it cannot leave out `alt`. A
+ * `src` with neither is a mark nothing describes, and as the link home it is a
+ * link with no name. A call that passes a `name` is the same as before, and a
+ * decorative picture says so with `alt=""`.
+ */
+export type PlAppLogoProps = PlAppLogoNamedProps | PlAppLogoPictureProps | PlAppLogoArtworkProps;
 /**
  * A product's mark, and its name beside it.
  *
@@ -70,9 +104,11 @@ export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'spa
  * **With a `name`, the mark is decorative.** The wordmark beside it already
  * says what the product is called, and a picture that says it again is a screen
  * reader reading the name twice. That is why `alt` is a prop rather than
- * something derived from `name`.
+ * something derived from `name`, and why the type asks for it only when a `src`
+ * has no `name` beside it.
  *
  * A logo is nearly always the way back to the front page. `render={<a href="/"
  * />}` makes it one without changing anything about how it is drawn.
  */
 export declare const PlAppLogo: React.ForwardRefExoticComponent<PlAppLogoProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/area-chart/PlAreaChart.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{stackToFull as l,writeChartValue as o,zeroNulls as n}from"../../internal/chart.js";import{useDefaults as s}from"../../internal/defaults.js";export function PlAreaChart({curve:i="linear",stacked:c=!1,markers:m="none",valueLabels:u="none",valueLabelColor:f="series",nulls:d,connectNulls:p=!1,series:x,yAxis:k,format:h,locale:j,...v}){const b=s(),L=j??b.locale,g=r.useId().replace(/:/g,""),A="full"===c,C=d??(p?"connect":"gap"),y=r.useMemo(()=>{const e="zero"===C?n(x):x;return A?l(e,e=>o(e,h,L)):e},[x,C,A,h,L]);return e(a,{...v,series:y,format:h,locale:j,yAxis:A?{min:0,max:100,tickFormat:e=>`${e}%`,...k}:k,stacked:!1!==c,stroked:!1===c,inset:!0,includeZero:!0,headroom:"none"===u?0:10,children:r=>e(t,{context:r,curve:i,filled:!0,stacked:!1!==c,markers:m,valueLabels:u,valueLabelColor:f,nulls:C,gradient:!1,idPrefix:g})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{stackToFull as o,writeChartValue as l,zeroNulls as n}from"../../internal/chart.js";import{useLocale as s}from"../../internal/defaults.js";export function PlAreaChart({curve:i="linear",stacked:c=!1,markers:m="none",valueLabels:u="none",valueLabelColor:f="series",nulls:d,connectNulls:p=!1,series:x,yAxis:k,format:h,locale:j,...v}){const b=s(j),L=r.useId().replace(/:/g,""),g="full"===c,A=d??(p?"connect":"gap"),C=r.useMemo(()=>{const e="zero"===A?n(x):x;return g?o(e,e=>l(e,h,b)):e},[x,A,g,h,b]);return e(a,{...v,series:C,format:h,locale:j,yAxis:g?{min:0,max:100,tickFormat:e=>`${e}%`,...k}:k,stacked:!1!==c,stroked:!1===c,inset:!0,includeZero:!0,headroom:"none"===u?0:10,children:r=>e(t,{context:r,curve:i,filled:!0,stacked:!1!==c,markers:m,valueLabels:u,valueLabelColor:f,nulls:A,gradient:!1,idPrefix:L})})}

package/dist/components/avatar/PlAvatar.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{Avatar as a}from"@base-ui/react/avatar";import{controlHeightClasses as s,controlSlots as i,controlSquareClasses as l,hasContent as o,markRestClasses as c,pictureSlotClasses as m,radiusClasses as d,srOnlyClasses as f,transitionClasses as u}from"../../internal/styles.js";const h={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},p=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",u].join(" ");function PersonIcon(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */r.forwardRef(function PlAvatar({src:r,srcSet:u,alt:g,name:v,initials:x,shape:j,variant:y,size:N,color:w,elevation:z,delay:A,imageProps:C,onLoadingStatusChange:P,className:b,style:B,children:S,...k},I){const L=n(),F=j??"circle",M=y??"ghost",R=N??L.size??"md",Z=w??L.color??"primary",_=z??0,O=v?function initialsOf(e){const t=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===t.length?"":((Array.from(t[0])[0]??"")+(t.length>1?Array.from(t[t.length-1])[0]??"":"")).toLocaleUpperCase()}(v):"",U=g??v,$=o(S)?S:(x??O)||e(PersonIcon,{}),q=o(S)||Boolean(x??O),D=[p,s[R],l[R],h[R],"circle"===F?"rounded-full":d[R],c[M],b??""].filter(Boolean).join(" ");return t(a.Root,{ref:I,className:D,style:{...i(Z,_,M),...B},...k,children:[r?e(a.Image,{src:r,srcSet:u,alt:U??"",className:"size-full object-cover",onLoadingStatusChange:P,...C}):null,t(a.Fallback,{delay:r?A:void 0,className:"flex size-full items-center justify-center",children:[U&&q?e("span",{className:f,children:U}):null,e("span",{"aria-hidden":!(!U||!q)||void 0,className:`contents ${m}`,children:$})]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as n,useRuntimeLocale as r}from"../../internal/defaults.js";import{Avatar as i}from"@base-ui/react/avatar";import{controlHeightClasses as s,controlSlots as l,controlSquareClasses as o,cx as c,hasContent as m,markRestClasses as d,pictureSlotClasses as f,radiusClasses as u,srOnlyClasses as h,transitionClasses as p}from"../../internal/styles.js";const g={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},v=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",p].join(" ");function PersonIcon(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:a,srcSet:p,alt:x,name:j,initials:y,shape:N,variant:b,size:w,color:z,elevation:A,delay:C,imageProps:P,onLoadingStatusChange:S,className:k,style:B,children:L,...I},M){const F=n(),R=r(void 0),Z=N??"circle",_=b??"ghost",O=w??F.size??"md",U=z??F.color??"primary",$=A??0,q=j?function initialsOf(e,t){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase(t)}(j,R):"",D=x??j,E=m(L)?L:(y??q)||e(PersonIcon,{}),G=m(L)||Boolean(y??q),{className:H,...J}=P??{},K=H??"size-full object-cover",Q=[v,s[O],o[O],g[O],"circle"===Z?"rounded-full":u[O],d[_],k??""].filter(Boolean).join(" ");return t(i.Root,{ref:M,className:Q,style:{...l(U,$,_),...B},...I,children:[a?e(i.Image,{src:a,srcSet:p,alt:D??"",keepMounted:!0,className:e=>"loaded"===e.imageLoadingStatus?K:c(K,"invisible absolute inset-0"),onLoadingStatusChange:S,...J}):null,t(i.Fallback,{delay:a?C:void 0,className:"flex size-full items-center justify-center",children:[D&&G?e("span",{className:h,children:D}):null,e("span",{"aria-hidden":!(!D||!G)||void 0,className:`contents ${f}`,children:E})]})]})});

package/dist/components/badge/PlBadge.d.ts

@@ -6,6 +6,8 @@ import type { PlassCorner, PlassElevation, PlassStyleProps } from '../../types.j
  */
 export type PlBadgeOverlap = 'square' | 'circle';
 export interface PlBadgeProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * What the badge says — usually a count, sometimes a word.
      *

package/dist/components/bar-chart/PlBarChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as r,markTransitionClasses as l}from"../../internal/chart-frame.js";import{barBandRatio as o,barMaxThickness as s,barPath as i,barRadius as n,chartFontSizes as c,dimmedByHover as u,labelledPoints as d,markGap as m,rankCategories as h,stackToFull as f,writeChartValue as v}from"../../internal/chart.js";import{useDefaults as x}from"../../internal/defaults.js";import{useLabels as p}from"../../internal/labels.js";export function PlBarChart({orientation:a="vertical",stacked:l=!1,rounded:i=!0,barSize:n,valueLabels:c="none",valueLabelColor:u="series",sort:d="none",maxCategories:m,otherLabel:b,series:g,categories:y,yAxis:z,format:k,locale:M,size:j,density:L,...C}){const B=x(),P=j??B.size??"md",S=L??B.density??"default",A=M??B.locale,N="horizontal"===a,W="full"===l,w=p(),F=b??w.chartOther,I=t.useMemo(()=>h(g,y,{sort:d,max:m,other:F}),[g,y,d,m,F]),O=t.useMemo(()=>W?f(I.series,e=>v(e,k,A)):I.series,[I.series,W,k,A]);return e(r,{...C,series:O,categories:I.categories,format:k,locale:M,size:P,density:S,horizontal:N,stacked:!1!==l,yAxis:W?{min:0,max:100,tickFormat:e=>`${e}%`,...z}:z,includeZero:!0,bandRatio:o[S],headroom:"none"===c?0:12,children:a=>e(Bars,{context:a,stacked:!1!==l,rounded:i,barSize:n??s[P],valueLabels:c,valueLabelColor:u,size:P})})}function Bars({context:t,stacked:r,rounded:o,barSize:s,valueLabels:h,valueLabelColor:f,size:v}){const{values:x,visible:p,colors:b,hovered:g,activeIndex:y,plot:z,band:k,horizontal:M,valuePx:j,categoryPx:L,zeroPx:C,format:B}=t,P=x.map((e,a)=>({one:e,index:a})).filter(e=>p[e.index]),S=r?1:Math.max(1,P.length),A=Math.min(s,Math.max(1,(k.band-m*(S-1))/S)),N=A*S+m*(S-1),W=[],w=[],F=c[v];return a("g",{children:[P.map(({one:t,index:s},c)=>{const v=b[s],x=u(g,s,p),k=d(t,h);return e("g",{opacity:x?.28:1,className:l,children:t.map((t,s)=>{if(null===t.value)return null;const u=L(s),d=r?0:c*(A+m)-N/2+A/2,h=r?t.value>=0?W[s]??0:w[s]??0:0,x=j(h),p=j(h+t.value);r&&(t.value>=0?W[s]=h+t.value:w[s]=h+t.value);const b=r&&0!==h?m:0,g=Math.abs(p-x)-b;if(g<=0)return null;const C=p<x,P=s===y,S=M?i(Math.min(x,p)+(C?0:b),z.top+u+d-A/2,g,A,o&&!r?n:o?n/2:0,t.value>=0?"right":"left"):i(z.left+u+d-A/2,Math.min(x,p)+(C?0:b),A,g,o&&!r?n:o?n/2:0,t.value>=0?"up":"down");return a("g",{children:[e("path",{d:S,fill:t.color??v,opacity:P?1:.92,className:l}),k(s)?e("text",{x:M?p+(t.value>=0?5:-5):z.left+u+d,y:M?z.top+u+d:t.value>=0?p-5:p+F+2,textAnchor:M?t.value>=0?"start":"end":"middle",dominantBaseline:M?"central":void 0,fontSize:F,fontWeight:600,fill:"ink"===f?"var(--plass-fg)":t.color??v,className:"tabular-nums",children:t.label??B(t.value)}):null]},s)})},s)}),e("line",M?{x1:C,x2:C,y1:z.top,y2:z.top+z.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:z.left,x2:z.left+z.width,y1:C,y2:C,stroke:"var(--plass-chart-baseline)",strokeWidth:1})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as r,markTransitionClasses as l}from"../../internal/chart-frame.js";import{barBandRatio as o,barMaxThickness as s,barPath as i,barRadius as n,chartFontSizes as c,dimmedByHover as u,labelledPoints as d,markGap as m,rankCategories as h,stackToFull as f,writeChartValue as v}from"../../internal/chart.js";import{useDefaults as x,useLocale as p}from"../../internal/defaults.js";import{useLabels as b}from"../../internal/labels.js";export function PlBarChart({orientation:a="vertical",stacked:l=!1,rounded:i=!0,barSize:n,valueLabels:c="none",valueLabelColor:u="series",sort:d="none",maxCategories:m,otherLabel:g,series:y,categories:z,yAxis:k,format:M,locale:j,size:L,density:C,...B}){const P=x(),S=L??P.size??"md",A=C??P.density??"default",N=p(j),W="horizontal"===a,w="full"===l,F=b(),I=g??F.chartOther,O=t.useMemo(()=>h(y,z,{sort:d,max:m,other:I}),[y,z,d,m,I]),R=t.useMemo(()=>w?f(O.series,e=>v(e,M,N)):O.series,[O.series,w,M,N]);return e(r,{...B,series:R,categories:O.categories,format:M,locale:j,size:S,density:A,horizontal:W,stacked:!1!==l,yAxis:w?{min:0,max:100,tickFormat:e=>`${e}%`,...k}:k,includeZero:!0,bandRatio:o[A],headroom:"none"===c?0:12,children:a=>e(Bars,{context:a,stacked:!1!==l,rounded:i,barSize:n??s[S],valueLabels:c,valueLabelColor:u,size:S})})}function Bars({context:t,stacked:r,rounded:o,barSize:s,valueLabels:h,valueLabelColor:f,size:v}){const{values:x,visible:p,colors:b,hovered:g,activeIndex:y,plot:z,band:k,horizontal:M,valuePx:j,categoryPx:L,zeroPx:C,format:B}=t,P=x.map((e,a)=>({one:e,index:a})).filter(e=>p[e.index]),S=r?1:Math.max(1,P.length),A=Math.min(s,Math.max(1,(k.band-m*(S-1))/S)),N=A*S+m*(S-1),W=[],w=[],F=c[v];return a("g",{children:[P.map(({one:t,index:s},c)=>{const v=b[s],x=u(g,s,p),k=d(t,h);return e("g",{opacity:x?.28:1,className:l,children:t.map((t,s)=>{if(null===t.value)return null;const u=L(s),d=r?0:c*(A+m)-N/2+A/2,h=r?t.value>=0?W[s]??0:w[s]??0:0,x=j(h),p=j(h+t.value);r&&(t.value>=0?W[s]=h+t.value:w[s]=h+t.value);const b=r&&0!==h?m:0,g=Math.abs(p-x)-b;if(g<=0)return null;const C=p<x,P=s===y,S=M?i(Math.min(x,p)+(C?0:b),z.top+u+d-A/2,g,A,o&&!r?n:o?n/2:0,t.value>=0?"right":"left"):i(z.left+u+d-A/2,Math.min(x,p)+(C?0:b),A,g,o&&!r?n:o?n/2:0,t.value>=0?"up":"down");return a("g",{children:[e("path",{d:S,fill:t.color??v,opacity:P?1:.92,className:l}),k(s)?e("text",{x:M?p+(t.value>=0?5:-5):z.left+u+d,y:M?z.top+u+d:t.value>=0?p-5:p+F+2,textAnchor:M?t.value>=0?"start":"end":"middle",dominantBaseline:M?"central":void 0,fontSize:F,fontWeight:600,fill:"ink"===f?"var(--plass-fg)":t.color??v,className:"tabular-nums",children:t.label??B(t.value)}):null]},s)})},s)}),e("line",M?{x1:C,x2:C,y1:z.top,y2:z.top+z.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:z.left,x2:z.left+z.width,y1:C,y2:C,stroke:"var(--plass-chart-baseline)",strokeWidth:1})]})}

package/dist/components/blockquote/PlBlockquote.d.ts

@@ -7,6 +7,8 @@ import type { PlassElevation, PlassStyleProps } from '../../types.js';
  * an event handler written against one works on the other.
  */
 export interface PlBlockquoteProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'figure'>, 'color'> {
+    /** @default 'ghost' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a quote is set *into* a page rather
      * than floating over it, so it is raised even less often than a `PlCard`.

package/dist/components/bottom-navigation/PlBottomNavigation.d.ts

@@ -16,6 +16,8 @@ export type PlBottomNavigationValue = string | number;
  */
 export type PlBottomNavigationLabels = 'all' | 'selected' | 'none';
 export interface PlBottomNavigationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
     value?: PlBottomNavigationValue | null;
     /** Which starts current, for an uncontrolled bar. */
@@ -77,6 +79,16 @@ export interface PlBottomNavigationItemProps extends Omit<React.ComponentPropsWi
     icon?: React.ReactNode;
     /** Renders the item as a link rather than as a button. */
     href?: string;
+    /**
+     * Renders the item's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the item a link, as an `href` does, and an `href` on the
+     * element wins over the item's own. A disabled item is drawn on a plain `<a>`
+     * with no address instead, since the element's own `href` would keep it
+     * going somewhere.
+     */
+    render?: useRender.RenderProp;
     /** Unavailable, but still part of the set. */
     disabled?: boolean;
     /** The destination's name. Read out even when `labels` keeps it undrawn. */
@@ -105,10 +117,10 @@ export declare const PlBottomNavigation: React.ForwardRefExoticComponent<PlBotto
  * the bar, which is the only place they can be set once and mean the same thing
  * for every item.
  *
- * With an `href` it is a real `<a>`, which is what makes a long press offer
- * "open in a new tab" and what puts the destination in the status bar — neither
- * of which a `<button>` that calls `router.push` can do. Without one it is a
- * `<button>`, because a `<div>` carrying a click handler is invisible to a
- * keyboard.
+ * With an `href` or a `render` it is a real `<a>`, which is what makes a long
+ * press offer "open in a new tab" and what puts the destination in the status
+ * bar — neither of which a `<button>` that calls `router.push` can do. Without
+ * either it is a `<button>`, because a `<div>` carrying a click handler is
+ * invisible to a keyboard.
  */
 export declare const PlBottomNavigationItem: React.ForwardRefExoticComponent<PlBottomNavigationItemProps & React.RefAttributes<HTMLElement>>;

package/dist/components/bottom-navigation/PlBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{useBottomBarHeight as r}from"../../internal/bottom-bar.js";import{cx as n,focusRingInsetClasses as o,hasContent as c,iconSizeClasses as d,metaTextClasses as m,radiusClasses as u,sheetLineClasses as p,sheetRestClasses as f,srOnlyClasses as g,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const b=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),v={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},y={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},N={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},z={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:t="glass",size:a,color:o,density:c,elevation:d=0,value:m,defaultValue:g=null,onValueChange:z,position:w="fixed",labels:j="all",divider:k=!0,safeArea:C=!0,disabled:P=!1,label:B,render:R,className:I,style:V,children:A,...D},F){const M=s(),S=a??M.size??"md",q=o??M.color??"primary",E=c??M.density??"default",[G,H]=l.useState(g),J=void 0!==m,K=J?m:G,L=l.useCallback(e=>{J||H(e),z?.(e)},[J,z]),O=l.useMemo(()=>({value:K??null,change:L,size:S,density:E,labels:j,disabled:P}),[K,L,S,E,j,P]),Q=l.useRef(null);r(Q,"fixed"===w);const T=n("w-full min-w-0","static"===w?u[S]:"",f[t],"glass"===t&&"static"!==w?"border-0":"",k?p:"",v[w],C?"pb-[env(safe-area-inset-bottom)]":"",x,I);return i({render:R??e("nav",{}),ref:[F,Q],props:{"aria-label":B,className:T,style:{...h(q,d),...V},children:e(b.Provider,{value:O,children:e("div",{className:n("flex w-full items-stretch",y[S],N[E][S]),children:A})}),...D}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:i,href:r,disabled:p=!1,className:f,children:h,onClick:v,...y},N){const w=l.useContext(b),j=p||w.disabled,k=null!==w.value&&w.value===s,C="all"===w.labels||"selected"===w.labels&&k,P=n("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",z[w.size],u[w.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,o,j?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":k?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",f),B=a(t,{children:[c(i)?e("span",{className:n("flex shrink-0 items-center justify-center",d[w.size]),children:i}):null,c(h)?e("span",{className:C?n("max-w-full truncate leading-tight",m[w.size]):g,children:h}):null]}),press=e=>{j?e.preventDefault():(w.change(s),v?.(e))};return r?e("a",{ref:N,href:j?void 0:r,"aria-current":k?"page":void 0,"aria-disabled":j||void 0,className:P,onClick:press,...y,children:B}):e("button",{ref:N,type:"button",disabled:j,"aria-current":k?"page":void 0,className:P,onClick:press,...y,children:B})});
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{useBottomBarHeight as r}from"../../internal/bottom-bar.js";import{cx as n,focusRingInsetClasses as o,hasContent as d,iconSizeClasses as c,metaTextClasses as m,radiusClasses as u,sheetLineClasses as p,sheetRestClasses as f,srOnlyClasses as g,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const b=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),v={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},y={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},N={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},z={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t,color:o,density:d,elevation:c=0,value:m,defaultValue:g=null,onValueChange:z,position:k="fixed",labels:w="all",divider:j=!0,safeArea:C=!0,disabled:B=!1,label:P,render:R,className:I,style:V,children:A,...D},F){const M=s(),S=t??M.size??"md",q=o??M.color??"primary",E=d??M.density??"default",[G,H]=l.useState(g),J=void 0!==m,K=J?m:G,L=l.useCallback(e=>{J||H(e),z?.(e)},[J,z]),O=l.useMemo(()=>({value:K??null,change:L,size:S,density:E,labels:w,disabled:B}),[K,L,S,E,w,B]),Q=l.useRef(null);r(Q,"fixed"===k);const T=n("w-full min-w-0","static"===k?u[S]:"",f[a],"glass"===a&&"static"!==k?"border-0":"",j?p:"",v[k],C?"pb-[env(safe-area-inset-bottom)]":"",x,I);return i({render:R??e("nav",{}),ref:[F,Q],props:{"aria-label":P,className:T,style:{...h(q,c),...V},children:e(b.Provider,{value:O,children:e("div",{className:n("flex w-full items-stretch",y[S],N[E][S]),children:A})}),...D}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:r,href:p,render:f,disabled:h=!1,className:v,children:y,onClick:N,...k},w){const j=l.useContext(b),C=h||j.disabled,B=null!==j.value&&j.value===s,P="all"===j.labels||"selected"===j.labels&&B,R=n("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",z[j.size],u[j.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,o,C?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":B?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",v),I=t(a,{children:[d(r)?e("span",{className:n("flex shrink-0 items-center justify-center",c[j.size]),children:r}):null,d(y)?e("span",{className:P?n("max-w-full truncate leading-tight",m[j.size]):g,children:y}):null]}),press=e=>{C?e.preventDefault():(j.change(s),N?.(e))};return i({render:C?e("a",{}):f??e("a",{}),enabled:Boolean(p||f),ref:w,props:{href:C?void 0:p,role:C?"link":void 0,"aria-current":B?"page":void 0,"aria-disabled":C||void 0,className:R,onClick:press,...k,children:I}})||e("button",{ref:w,type:"button",disabled:C,"aria-current":B?"page":void 0,className:R,onClick:press,...k,children:I})});

package/dist/components/box/PlBox.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlBoxProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default and it is flat — the glass edge is
      * what separates the box from the page. Raise it only for a surface that

package/dist/components/breadcrumb/PlBreadcrumb.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
 /**
  * What is drawn between two steps of the trail.
@@ -106,6 +107,16 @@ export interface PlBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutR
     current?: boolean;
     /** Unavailable. Stops answering, keeps its place in the trail. */
     disabled?: boolean;
+    /**
+     * Renders the step's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the step a link, as an `href` does, and an `href` on the
+     * element wins over the step's own, both on the anchor and in
+     * `structuredData`. The current step is not a link and a disabled one goes
+     * nowhere, so neither uses it.
+     */
+    render?: useRender.RenderProp;
     /** The step's label. */
     children?: React.ReactNode;
 }
@@ -131,8 +142,10 @@ export declare const PlBreadcrumb: React.ForwardRefExoticComponent<PlBreadcrumbP
  * One step of the trail.
  *
  * It renders three different things and the caller picks by what they pass: an
- * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
- * neither — which is what the last step is, because the page you are already on
- * is not somewhere to go.
+ * `<a>` with an `href` or a `render`, a `<button>` with an `onClick`, and a
+ * plain `<span>` with neither — which is what the last step is, because the
+ * page you are already on is not somewhere to go. A disabled link is still an
+ * `<a>`, with no address, and a disabled button is still a `<button>`, with
+ * `disabled`.
  */
 export declare const PlBreadcrumbItem: React.ForwardRefExoticComponent<PlBreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{ArrowRightIcon as l,ChevronIcon as c,EllipsisIcon as i}from"../../internal/icons.js";import{textOf as o}from"../../internal/text.js";import{controlTextClasses as m,cx as u,focusRingClasses as d,gapClasses as p,hasContent as f,iconClasses as h,radiusClasses as x,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */a.createContext({size:"md",last:!1}),y={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:x.xs,sm:x.xs,md:x.xs,lg:x.sm,xl:x.sm},v=["chevron","arrow","slash","dot"];function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:o(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r,color:o,density:p,separator:f="chevron",maxItems:x,itemsBeforeCollapse:N=1,itemsAfterCollapse:k=1,expandable:w=!0,label:j,expandLabel:C,structuredData:L=!1,baseUrl:B,className:I,style:M,children:z,...P},R){const S=s(),A=n(),E=j??A.breadcrumb,D=C??A.breadcrumbExpand,H=r??S.size??"md",$=o??S.color??"primary",F=p??S.density??"default",[U,_]=a.useState(!1),q=a.useRef(null),J=a.useRef(!1);a.useEffect(()=>{if(!U||!J.current)return;J.current=!1;const e=Array.from(q.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const t of e.slice(Math.max(0,N))){const e=t.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,N]);const O=a.Children.toArray(z).filter(a.isValidElement),T=O.length,V=O.some(e=>!0===e.props.current),G=!U&&void 0!==x&&T>Math.max(x,1)&&T-N-k>1?[...O.slice(0,Math.max(0,N)),null,...O.slice(T-Math.max(0,k))]:O,K=function isSeparatorName(e){return"string"==typeof e&&v.includes(e)}(f)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(l,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=u("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",g,h,w?u("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",d):"");return t("nav",{ref:R,"aria-label":E,className:u("flex",m[H],h,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...P,children:[L&&T>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(O,B)}}):null,e("ol",{ref:q,role:"list",className:u("m-0 flex list-none flex-wrap items-center p-0",y[F][H]),children:G.map((r,s)=>t(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,r?e(b.Provider,{value:{size:H,last:!V&&s===G.length-1},children:r}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":D,onClick:()=>{J.current=!0,_(!0)},children:e(i,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(i,{})})})]},r?r.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:c,current:i,disabled:o=!1,className:m,children:h,...x},y){const{size:v,last:k}=a.useContext(b),w=i??k,j=Boolean(s||n)&&!w&&!o,C=u("inline-flex min-w-0 items-center px-1",p[v],N[v],g,o?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":w?"font-medium text-(--plass-fg)":j?u("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",d):"text-(--plass-muted-fg)"),L=t(r,{children:[f(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:h}),f(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return e("li",{ref:y,className:u("flex min-w-0 items-center",m),...x,children:j&&s?e("a",{href:s,className:C,onClick:n,children:L}):j?e("button",{type:"button",className:C,onClick:n,children:L}):e("span",{className:C,"aria-current":w?"page":void 0,"aria-disabled":o||void 0,children:L})})});
+"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{useRender as s}from"@base-ui/react/use-render";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{ArrowRightIcon as i,ChevronIcon as c,EllipsisIcon as o}from"../../internal/icons.js";import{textOf as m}from"../../internal/text.js";import{controlTextClasses as d,cx as p,focusRingClasses as u,gapClasses as f,hasContent as h,iconClasses as x,radiusClasses as b,transitionClasses as g}from"../../internal/styles.js";const y=/* @__PURE__ */a.createContext({size:"md",last:!1}),v={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:b.xs,sm:b.xs,md:b.xs,lg:b.sm,xl:b.sm},k=["chevron","arrow","slash","dot"];function absoluteHref(e,r){if(!r)return e;try{return new URL(e,r).href}catch{return e}}function breadcrumbListData(e,r){const t=e.map((e,t)=>{const s=function stepHref({href:e,render:r}){const t=a.isValidElement(r)?r.props.href:void 0;return"string"==typeof t&&t?t:e}(e.props),{children:n}=e.props;return{"@type":"ListItem",position:t+1,name:m(n),...s?{item:absoluteHref(s,r)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:t}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:t,color:s,density:m,separator:f="chevron",maxItems:h,itemsBeforeCollapse:b=1,itemsAfterCollapse:N=1,expandable:w=!0,label:j,expandLabel:B,structuredData:C=!1,baseUrl:L,className:I,style:M,children:z,...E},P){const R=n(),S=l(),A=j??S.breadcrumb,H=B??S.breadcrumbExpand,D=t??R.size??"md",$=s??R.color??"primary",F=m??R.density??"default",[U,V]=a.useState(!1),_=a.useRef(null),q=a.useRef(!1);a.useEffect(()=>{if(!U||!q.current)return;q.current=!1;const e=Array.from(_.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const r of e.slice(Math.max(0,b))){const e=r.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,b]);const J=a.Children.toArray(z).filter(a.isValidElement),O=J.length,T=J.some(e=>!0===e.props.current),G=!U&&void 0!==h&&O>Math.max(h,1)&&O-b-N>1?[...J.slice(0,Math.max(0,b)),null,...J.slice(O-Math.max(0,N))]:J,K=function isSeparatorName(e){return"string"==typeof e&&k.includes(e)}(f)?function separatorMark(r){switch(r){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(i,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=p("inline-flex items-center rounded-(--plass-radius-xs) px-0.5 py-0","text-(--plass-muted-fg)",g,x,w?p("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",u):"");return r("nav",{ref:P,"aria-label":A,className:p("flex",d[D],x,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...E,children:[C&&O>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(J,L)}}):null,e("ol",{ref:_,role:"list",className:p("m-0 flex list-none flex-wrap items-center p-0",v[F][D]),children:G.map((t,s)=>r(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,t?e(y.Provider,{value:{size:D,last:!T&&s===G.length-1},children:t}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":H,onClick:()=>{q.current=!0,V(!0)},children:e(o,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(o,{})})})]},t?t.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:n,onClick:l,startIcon:i,endIcon:c,current:o,disabled:m=!1,render:d,className:x,children:b,...v},k){const{size:w,last:j}=a.useContext(y),B=o??j,C=Boolean(n||d),L=Boolean(l)&&!C&&!B,I=(C||Boolean(l))&&!B&&!m,M=p("inline-flex min-w-0 items-center px-1 py-0",f[w],N[w],g,m?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":B?"font-medium text-(--plass-fg)":I?p("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",u):"text-(--plass-muted-fg)"),z=r(t,{children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,e("span",{className:"truncate",children:b}),h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]}),E=s({render:m?e("a",{}):d??e("a",{}),enabled:C&&!B,props:{href:m?void 0:n,role:m?"link":void 0,"aria-disabled":m||void 0,className:M,onClick:m?void 0:l,children:z}});return e("li",{ref:k,className:p("flex min-w-0 items-center",x),...v,children:E||(L?e("button",{type:"button",className:M,disabled:m,onClick:l,children:z}):e("span",{className:M,"aria-current":B?"page":void 0,"aria-disabled":m||void 0,children:z}))})});

package/dist/components/button/PlButton.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlButtonProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `1` is the default, because a moulded key **rests on**
      * the sheet rather than lying flush with it. Hover adds a level and pressing

package/dist/components/button/PlButton.js

@@ -1 +1 @@
-"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{useDisabled as n}from"../../internal/form.js";import{glowPointerMove as d}from"../../internal/glow.js";import{Spinner as p}from"../../internal/icons.js";import{loadingLabel as c}from"../../internal/loading.js";import{controlHeightClasses as g,controlSlots as v,controlSquareClasses as m,controlTextClasses as b,cx as f,disabledClasses as h,focusRingClasses as u,forcedEdgeClasses as x,gapClasses as $,glassClasses as j,hasContent as w,iconClasses as y,paddingXClasses as k,radiusClasses as P,readOnlyFilterClasses as B,transitionClasses as z}from"../../internal/styles.js";const C={xs:`${g.xs} ${$.xs} ${P.xs} ${b.xs}`,sm:`${g.sm} ${$.sm} ${P.sm} ${b.sm}`,md:`${g.md} ${$.md} ${P.md} ${b.md}`,lg:`${g.lg} ${$.lg} ${P.lg} ${b.lg}`,xl:`${g.xl} ${$.xl} ${P.xl} ${b.xl}`},D={xs:`${m.xs} px-0`,sm:`${m.sm} px-0`,md:`${m.md} px-0`,lg:`${m.lg} px-0`,xl:`${m.xl} px-0`},I=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",z,u,y].join(" "),W={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[j,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},M={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},N={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${B}`].join(" "),glass:/* @__PURE__ */[j,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${B}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${B}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:g,size:m,color:b,density:u,elevation:x,startIcon:$,endIcon:j,loading:y=!1,loadingLabel:P,readOnly:B=!1,fullWidth:z=!1,disabled:F,focusableWhenDisabled:L=!1,render:O,className:R,style:q,children:A,onClick:E,onPointerMove:G,"aria-describedby":H,...J},K){const Q=a(),S=r.useId(),T=r.useContext(i),U=g??T?.variant??"solid",V=m??T?.size??Q.size??"md",X=b??T?.color??Q.color??"primary",Y=u??T?.density??Q.density??"default",Z=x??T?.elevation??1,_=n(!1),ss=(F??T?.disabled??!1)||_&&!O,es=!w(A),os=y||B,rs=!ss&&!os,as=[I,C[V],es?D[V]:k[Y][V],ss?h[U]:B?N[U]:W[U],rs?`${M[U]} cursor-pointer`:"",rs?"plass-glow":"",y?"cursor-progress":"",z?"w-full":"",R??""].filter(Boolean).join(" ");return t({render:O??s(l,{disabled:ss,focusableWhenDisabled:L}),ref:K,props:{className:as,style:{...v(X,Z,U),...q},"aria-disabled":os||ss&&L||void 0,"aria-busy":y||void 0,"aria-describedby":y?f(H,S):H,"data-loading":y||void 0,"data-readonly":B||void 0,onClick:s=>{if(os)return s.preventDefault(),void s.stopPropagation();E?.(s)},onPointerMove:d(rs,G),...J,children:o(e,{children:[y?s(p,{}):$,A,j,y?s("span",{id:S,hidden:!0,children:P??Q.labels?.loading??c}):null]})}})});
+"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{useDisabled as n}from"../../internal/form.js";import{glowPointerMove as d}from"../../internal/glow.js";import{Spinner as p}from"../../internal/icons.js";import{loadingLabel as c}from"../../internal/loading.js";import{controlHeightClasses as g,controlSlots as v,controlSquareClasses as m,controlTextClasses as b,cx as f,disabledClasses as h,focusRingClasses as u,forcedEdgeClasses as x,gapClasses as $,glassClasses as j,hasContent as w,iconClasses as y,paddingXClasses as k,radiusClasses as P,readOnlyFilterClasses as B,transitionClasses as z}from"../../internal/styles.js";const C={xs:`${g.xs} ${$.xs} ${P.xs} ${b.xs}`,sm:`${g.sm} ${$.sm} ${P.sm} ${b.sm}`,md:`${g.md} ${$.md} ${P.md} ${b.md}`,lg:`${g.lg} ${$.lg} ${P.lg} ${b.lg}`,xl:`${g.xl} ${$.xl} ${P.xl} ${b.xl}`},D={xs:`${m.xs} px-0`,sm:`${m.sm} px-0`,md:`${m.md} px-0`,lg:`${m.lg} px-0`,xl:`${m.xl} px-0`},I=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center p-0","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",z,u,y].join(" "),W={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[j,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},M={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},N={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${B}`].join(" "),glass:/* @__PURE__ */[j,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${B}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${B}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:g,size:m,color:b,density:u,elevation:x,startIcon:$,endIcon:j,loading:y=!1,loadingLabel:P,readOnly:B=!1,fullWidth:z=!1,disabled:F,focusableWhenDisabled:L=!1,render:O,className:R,style:q,children:A,onClick:E,onPointerMove:G,"aria-describedby":H,...J},K){const Q=a(),S=r.useId(),T=r.useContext(i),U=g??T?.variant??"solid",V=m??T?.size??Q.size??"md",X=b??T?.color??Q.color??"primary",Y=u??T?.density??Q.density??"default",Z=x??T?.elevation??1,_=n(!1),ss=(F??T?.disabled??!1)||_&&!O,es=!w(A),os=y||B,rs=!ss&&!os,as=[I,C[V],es?D[V]:k[Y][V],ss?h[U]:B?N[U]:W[U],rs?`${M[U]} cursor-pointer`:"",rs?"plass-glow":"",y?"cursor-progress":"",z?"w-full":"",R??""].filter(Boolean).join(" ");return t({render:O??s(l,{disabled:ss,focusableWhenDisabled:L}),ref:K,props:{className:as,style:{...v(X,Z,U),...q},"aria-disabled":os||ss&&L||void 0,"aria-busy":y||void 0,"aria-describedby":y?f(H,S):H,"data-loading":y||void 0,"data-readonly":B||void 0,onClick:s=>{if(os)return s.preventDefault(),void s.stopPropagation();E?.(s)},onPointerMove:d(rs,G),...J,children:o(e,{children:[y?s(p,{}):$,A,j,y?s("span",{id:S,hidden:!0,children:P??Q.labels?.loading??c}):null]})}})});

package/dist/components/button-group/PlButtonGroup.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassOrientation, PlassStyleProps } from '../../types.js';
 export interface PlButtonGroupProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Which way the buttons run. A vertical group is a stacked menu of equal
      * actions; a horizontal one is the default because that is what a toolbar is.

package/dist/components/calendar/PlCalendar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Calendar as l,usePickerLabels as n}from"../../internal/calendar.js";import{popupPaddingClasses as s,popupSlots as r}from"../../internal/picker.js";import{FieldsetDisabledContext as i,useDisabled as m,useFormReport as d}from"../../internal/form.js";import{inertProps as c}from"../../internal/inert.js";import{isValidDate as u,localeWeekStart as f,mergeDateAndTime as h,startOfDay as p,startOfMonth as j,today as v,toISODate as y,toISOMonth as D,toISOYear as x}from"../../internal/date.js";import{controlTextLeadingClasses as b,cx as w,disabledClasses as S,radiusClasses as C,sheetRestClasses as O}from"../../internal/styles.js";const g={day:y,month:D,year:x};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:y="glass",size:D,color:x,elevation:k=1,value:z,defaultValue:M,onValueChange:P,precision:F="day",month:N,defaultMonth:V,onMonthChange:R,minDate:q,maxDate:A,shouldDisableDate:B,locale:E,weekStartsOn:G,showOutsideDays:H=!0,autoFocus:I=!1,disabled:J=!1,name:K,labels:L,className:Q,style:T,...U},W){const X=o(),Y=m(J),Z=E??X.locale,$=D??X.size??"md",_=x??X.color??"primary",ee=n(L),ae=G??X.weekStartsOn??f(Z),[te,oe]=t.useState(M??null),le=void 0!==z?z:te,[ne,se]=t.useState(()=>j(u(le)?le:V??v())),re=N??ne,setMonth=e=>{void 0===N&&se(e),R?.(e)},ie=u(le)?g[F](le):"";return d(K,()=>ie,!Y),a("div",{ref:W,...c(Y),className:w("inline-flex flex-col",O[y],C[$],s[$],b[$],Y?S[y]:"",Q),style:{...r(_,k),...T},...U,children:[e(i.Provider,{value:!1,children:e(l,{size:$,color:_,locale:Z,weekStartsOn:ae,month:re,onMonthChange:setMonth,precision:F,selected:[le],onSelect:e=>{const a=u(le)?h(e,le):p(e);void 0===z&&oe(a),P?.(a),setMonth(j(a))},minDate:q,maxDate:A,shouldDisableDate:B,showOutsideDays:H,autoFocus:I,labels:ee})}),K?e("input",{type:"hidden",name:K,value:ie,disabled:Y}):null]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o,useLocale as r,useRuntimeTimeZone as n}from"../../internal/defaults.js";import{Calendar as l,usePickerLabels as s}from"../../internal/calendar.js";import{popupPaddingClasses as i,popupSlots as d}from"../../internal/picker.js";import{FieldsetDisabledContext as m,useDisabled as c,useFormReport as u}from"../../internal/form.js";import{inertProps as f}from"../../internal/inert.js";import{isSameMonth as p,isValidDate as h,localeWeekStart as v,mergeDateAndTime as y,startOfDay as j,startOfMonth as D,today as b,todayIn as x,toISODate as w,toISOMonth as S,toISOYear as g}from"../../internal/date.js";import{controlTextLeadingClasses as C,cx as O,disabledClasses as k,radiusClasses as z,sheetRestClasses as M}from"../../internal/styles.js";const P={day:w,month:S,year:g};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:w="glass",size:S,color:g,elevation:F=1,value:N,defaultValue:R,onValueChange:V,precision:E="day",month:q,defaultMonth:A,onMonthChange:B,minDate:G,maxDate:H,shouldDisableDate:I,locale:J,weekStartsOn:K,showOutsideDays:L=!0,autoFocus:Q=!1,disabled:T=!1,name:U,labels:W,className:X,style:Y,...Z},$){const _=o(),ee=c(T),ae=r(J),te=S??_.size??"md",oe=g??_.color??"primary",re=s(W),ne=K??_.weekStartsOn??v(ae),[le,se]=t.useState(R??null),ie=void 0!==N?N:le,de=n(),[me,ce]=t.useState(()=>D(h(ie)?ie:A??x(de))),ue=q??me,fe=t.useRef(!h(ie)&&void 0===A);t.useEffect(()=>{if(void 0!==de||!fe.current)return;fe.current=!1;const e=D(b());ce(a=>p(a,e)?a:e)},[de]);const setMonth=e=>{void 0===q&&ce(e),B?.(e)},pe=h(ie)?P[E](ie):"";return u(U,()=>pe,!ee),a("div",{ref:$,...f(ee),className:O("inline-flex flex-col",M[w],z[te],i[te],C[te],ee?k[w]:"",X),style:{...d(oe,F),...Y},role:Z["aria-label"]||Z["aria-labelledby"]?"group":void 0,...Z,children:[e(m.Provider,{value:!1,children:e(l,{size:te,color:oe,locale:ae,weekStartsOn:ne,month:ue,onMonthChange:setMonth,precision:E,selected:[ie],onSelect:e=>{const a=h(ie)?y(e,ie):j(e);void 0===N&&se(a),V?.(a),setMonth(D(a))},minDate:G,maxDate:H,shouldDisableDate:I,showOutsideDays:L,autoFocus:Q,labels:re})}),U?e("input",{type:"hidden",name:U,value:pe,disabled:ee}):null]})});

package/dist/components/card/PlCard.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `1` is the default: a card is a sheet lying **on** the
      * page wash rather than printed into it, and the small amount of grey under
@@ -20,7 +22,8 @@ export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsW
     subtitle?: React.ReactNode;
     /**
      * Content pinned to the end of the header row — a menu button, a status
-     * chip. Stays on the title's line while the title wraps beside it.
+     * chip. Centred on the title's first line, and stays there while the title
+     * wraps beside it. The header grows to hold whichever of the two is taller.
      */
     headerAction?: React.ReactNode;
     /**

package/dist/components/card/PlCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useRender as l}from"@base-ui/react/use-render";import{focusRingClasses as t,hasContent as n,metaTextClasses as i,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as v,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as h,sheetSectionGapClasses as u,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const y=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:N,color:j,density:$,elevation:w=1,title:k,subtitle:z,headerAction:B,footer:C,dividers:P=!1,padded:A=!0,interactive:F=!1,render:R,className:q,style:D,children:E,...G},H){const I=o(),J=N??I.size??"md",K=j??I.color??"primary",L=$??I.density??"default",M=A?m[L][J]:"",O=A?f[L][J]:"",Q=P?`${M} ${O}`:M,S=n(k)||n(z)||n(B),T=s(r,{children:[n(k)||n(z)?s("div",{className:`flex min-w-0 flex-1 flex-col ${v[J]}`,children:[n(k)?e("div",{className:`plass-title font-semibold ${g[J]}`,children:k}):null,n(z)?e("div",{className:`text-(--plass-muted-fg) ${i[J]}`,children:z}):null]}):null,n(B)?e("div",{className:"ms-auto shrink-0",children:B}):null]}),U=[S?{key:"header",className:"flex items-start gap-3",content:T}:null,n(E)?{key:"content",className:d[J],content:E}:null,n(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${d[J]}`,content:C}:null].filter(e=>null!==e),V=["flex flex-col",c[J],h[a],y,F?`${b[a]} ${t}`:"",P?"overflow-hidden":`${O} ${u[J]}`,q??""].filter(Boolean).join(" ");return l({render:R??e("div",{}),ref:H,props:{className:V,style:{...x(K,w),...D},...G,children:U.map((s,r)=>e("div",{className:[Q,s.className,P&&r>0?p:""].filter(Boolean).join(" "),children:s.content},s.key))}})});
+"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{focusRingClasses as t,hasContent as n,metaTextClasses as i,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as v,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as u,sheetSectionGapClasses as h,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const b=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),y={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:N,color:$,density:j,elevation:w=1,title:k,subtitle:z,headerAction:B,footer:C,dividers:P=!1,padded:A=!0,interactive:F=!1,render:R,className:q,style:D,children:E,...G},H){const I=l(),J=N??I.size??"md",K=$??I.color??"primary",L=j??I.density??"default",M=A?m[L][J]:"",O=A?f[L][J]:"",Q=P?`${M} ${O}`:M,S=n(k)||n(z)||n(B),T=`font-semibold ${g[J]}`,U=i[J],V=n(k)?T:n(z)?U:null,W=s(r,{children:[n(k)||n(z)?s("div",{className:`flex min-w-0 flex-1 flex-col ${v[J]}`,children:[n(k)?e("div",{className:`plass-title ${T}`,children:k}):null,n(z)?e("div",{className:`text-(--plass-muted-fg) ${U}`,children:z}):null]}):null,n(B)?s("div",{className:"ms-auto flex shrink-0 items-center",children:[V?e("span",{"aria-hidden":"true",className:`plass-strut w-0 ${V}`}):null,B]}):null]}),X=[S?{key:"header",className:"flex items-baseline gap-3",content:W}:null,n(E)?{key:"content",className:d[J],content:E}:null,n(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${d[J]}`,content:C}:null].filter(e=>null!==e),Y=["flex flex-col",c[J],u[a],b,F?`${y[a]} ${t}`:"",P?"overflow-hidden":`${O} ${h[J]}`,q??""].filter(Boolean).join(" ");return o({render:R??e("div",{}),ref:H,props:{className:Y,style:{...x(K,w),...D},...G,children:X.map((s,r)=>e("div",{className:[Q,s.className,P&&r>0?p:""].filter(Boolean).join(" "),children:s.content},s.key))}})});

package/dist/components/carousel/PlCarousel.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth of the frame. `0` — the default — is flat.
      * @default 0

package/dist/components/carousel/PlCarousel.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as l,PauseIcon as i,PlayIcon as c}from"../../internal/icons.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as d,pictureSlotClasses as f,radiusClasses as m,sheetRestClasses as h,srOnlyClasses as p,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";const g={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:"top-1 start-1",sm:"top-1.5 start-1.5",md:"top-2 start-2",lg:"top-3 start-3",xl:"top-4 start-4"},x={xs:{rest:"h-1 w-1",current:"h-1 w-3"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5"},xl:{rest:"h-2 w-2",current:"h-2 w-6"}};function scrollTrackTo(e,t,r){e.scrollTo({left:e.scrollLeft+t.getBoundingClientRect().left-e.getBoundingClientRect().left,behavior:r})}export const PlCarousel=/* @__PURE__ */r.forwardRef(function PlCarousel({variant:y="glass",size:R,color:T,density:N,elevation:k=0,value:C,defaultValue:L=0,onValueChange:j,loop:E=!0,autoPlay:S=!1,interval:z=5e3,arrows:P=!0,indicators:M=!0,label:B,previousLabel:I,nextLabel:W,playLabel:_,stopLabel:V,slideLabel:O,className:$,style:A,children:F,...q},D){const G=s(),H=o(),J=B??H.carousel,K=I??H.carouselPrevious,Q=W??H.carouselNext,U=_??H.carouselPlay,X=V??H.carouselStop,Y=R??G.size??"md",Z=T??G.color??"primary",ee=N??G.density??"default",te=O??H.carouselSlide,re=r.Children.toArray(F),ne=re.length,[se,oe]=r.useState(L),ae=Math.min(Math.max(C??se,0),Math.max(ne-1,0)),le=r.useRef(null),ie=r.useRef([]),ce=r.useRef(!1),ue=r.useRef(!1),de=r.useRef(!1),fe=r.useRef(!1),me=r.useRef(0),[he,pe]=r.useState(0),[ve,be]=r.useState(!1),ge=r.useRef(new Set),[we,xe]=r.useState(!1),[ye,Re]=r.useState(null),Te=u(),Ne=ye??Te,ke=S&&!Ne,Ce=r.useRef(null),Le=r.useRef(!1),je=r.useCallback((e,t=!1)=>{if(0===ne)return;const r=E?(e%ne+ne)%ne:Math.min(Math.max(e,0),ne-1);ce.current=t,void 0===C&&oe(r),r!==ae&&j?.(r)},[ne,E,C,ae,j]),Ee=r.useRef(ae);r.useLayoutEffect(()=>{Ee.current=ae}),r.useLayoutEffect(()=>{const e=le.current;if(!e)return;const place=()=>{const t=ie.current[Ee.current];t&&scrollTrackTo(e,t,"instant")};if("undefined"==typeof ResizeObserver)return void(Ee.current>0&&place());fe.current=0===e.clientWidth,!fe.current&&Ee.current>0&&place();const t=new ResizeObserver(e=>{0===e[e.length-1].contentRect.width?fe.current=!0:fe.current&&(fe.current=!1,place(),me.current+=1,pe(me.current))});return t.observe(e),()=>t.disconnect()},[]),r.useEffect(()=>{if(ce.current)return void(ce.current=!1);if(!ue.current)return void(ue.current=!0);const e=le.current,t=ie.current[ae];e&&t&&scrollTrackTo(e,t),de.current=!0;const r=window.setTimeout(()=>{de.current=!1},700);return()=>window.clearTimeout(r)},[ae]);const Se=r.useRef(je);r.useEffect(()=>{Se.current=je}),r.useEffect(()=>{if(!ke)return;const handleVisibility=()=>{document.hidden||(me.current+=1,pe(me.current))};return document.addEventListener("visibilitychange",handleVisibility),()=>document.removeEventListener("visibilitychange",handleVisibility)},[ke]),r.useEffect(()=>{if(!ke||ve||we||ne<2)return;const e=window.setInterval(()=>{document.hidden||fe.current||me.current!==he||0===le.current?.clientWidth||Se.current(ae+1)},z);return()=>window.clearInterval(e)},[ke,ve,we,ne,z,ae,he]);const handleTouch=e=>{const t="touchstart"===e.type;for(let r=0;r<e.changedTouches.length;r+=1){const{identifier:n}=e.changedTouches[r];t?ge.current.add(n):ge.current.delete(n)}xe(ge.current.size>0)},hold=()=>{S&&!Le.current&&Re(!0)},steer=e=>{hold(),je(e)},ze=ae<=0,Pe=ae>=ne-1;return t("div",{ref:D,role:"region","aria-roledescription":H.carousel,"aria-label":J,className:d("flex flex-col",$),style:{...v(Z,k),...A},...n(q,{onPointerEnter:()=>be(!0),onPointerLeave:()=>be(!1),onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||(Le.current=!1),e.target!==Ce.current&&hold()},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(Le.current=!1)}}),children:[t("div",{className:d("relative min-w-0 overflow-hidden",m[Y],h[y],b),children:[S&&ne>1?e("div",{className:d("absolute z-10 flex",w[Y]),children:e(a,{ref:Ce,variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:Ne?U:X,icon:e(Ne?c:i,{}),onClick:()=>{const e=!Ne;Re(e),Le.current=!e}})}):null,e("div",{ref:le,tabIndex:0,role:"group","aria-label":J,className:d("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=le.current;if(de.current||fe.current||!e||0===e.clientWidth)return;const t=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);t!==ae&&t>=0&&t<ne&&je(t,!0)},onTouchStart:handleTouch,onTouchEnd:handleTouch,onTouchCancel:handleTouch,children:re.map((t,n)=>e("div",{ref:e=>{ie.current[n]=e},role:"group","aria-roledescription":H.slide,"aria-label":te(n+1,ne),className:d("w-full shrink-0 grow-0 basis-full snap-start",f),children:t},r.isValidElement(t)?t.key??n:n))}),P&&ne>1?t("div",{className:d("pointer-events-none absolute inset-y-0 flex items-center",g[Y]),children:[e(a,{variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:K,disabled:!E&&ze,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(l,{})}),onClick:()=>steer(ae-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:Q,disabled:!E&&Pe,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(l,{})}),onClick:()=>steer(ae+1)})]}):null]}),M&&ne>1?e("div",{className:"flex shrink-0 items-center justify-center",children:re.map((t,r)=>e("button",{type:"button","aria-label":te(r+1,ne),"aria-current":r===ae?"true":void 0,className:d("group flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0"),onClick:()=>steer(r),children:e("span",{"aria-hidden":"true",className:d("rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",r===ae?`${x[Y].current} bg-(--p-accent)`:`${x[Y].rest} bg-(--plass-border) group-hover:bg-(--p-accent)`)})},r))}):null,e("span",{className:p,"aria-live":ke?"off":"polite",children:ne>0?te(ae+1,ne):""})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as l,PauseIcon as i,PlayIcon as c}from"../../internal/icons.js";import{layoutBox as u}from"../../internal/layout-box.js";import{usePrefersReducedMotion as d}from"../../internal/media.js";import{cx as f,pictureSlotClasses as m,radiusClasses as h,sheetRestClasses as p,srOnlyClasses as v,surfaceSlots as b,transitionClasses as g}from"../../internal/styles.js";const w={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},x={xs:"top-1 start-1",sm:"top-1.5 start-1.5",md:"top-2 start-2",lg:"top-3 start-3",xl:"top-4 start-4"},y={xs:{rest:"h-1 w-1",current:"h-1 w-3"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5"},xl:{rest:"h-2 w-2",current:"h-2 w-6"}};function scrollTrackTo(e,t,r){const{perPixel:n}=u(e,!0),s=t.getBoundingClientRect().left-e.getBoundingClientRect().left;e.scrollTo({left:e.scrollLeft+s*n,behavior:r})}export const PlCarousel=/* @__PURE__ */r.forwardRef(function PlCarousel({variant:u="glass",size:R,color:T,density:N,elevation:k=0,value:j,defaultValue:C=0,onValueChange:L,loop:E=!0,autoPlay:S=!1,interval:z=5e3,arrows:P=!0,indicators:M=!0,label:B,previousLabel:I,nextLabel:W,playLabel:_,stopLabel:V,slideLabel:O,className:$,style:A,children:F,...q},D){const G=s(),H=o(),J=B??H.carousel,K=I??H.carouselPrevious,Q=W??H.carouselNext,U=_??H.carouselPlay,X=V??H.carouselStop,Y=R??G.size??"md",Z=T??G.color??"primary",ee=N??G.density??"default",te=O??H.carouselSlide,re=r.Children.toArray(F),ne=re.length,[se,oe]=r.useState(C),ae=Math.min(Math.max(j??se,0),Math.max(ne-1,0)),le=r.useRef(null),ie=r.useRef([]),ce=r.useRef(!1),ue=r.useRef(!1),de=r.useRef(!1),fe=r.useRef(!1),me=r.useRef(0),[he,pe]=r.useState(0),[ve,be]=r.useState(!1),ge=r.useRef(new Set),[we,xe]=r.useState(!1),[ye,Re]=r.useState(null),Te=d(),Ne=ye??Te,ke=S&&!Ne,je=r.useRef(null),Ce=r.useRef(!1),Le=r.useCallback((e,t=!1)=>{if(0===ne)return;const r=E?(e%ne+ne)%ne:Math.min(Math.max(e,0),ne-1);ce.current=t,void 0===j&&oe(r),r!==ae&&L?.(r)},[ne,E,j,ae,L]),Ee=r.useRef(ae);r.useLayoutEffect(()=>{Ee.current=ae}),r.useLayoutEffect(()=>{const e=le.current;if(!e)return;const place=()=>{const t=ie.current[Ee.current];t&&scrollTrackTo(e,t,"instant")};if("undefined"==typeof ResizeObserver)return void(Ee.current>0&&place());fe.current=0===e.clientWidth,!fe.current&&Ee.current>0&&place();const t=new ResizeObserver(e=>{0===e[e.length-1].contentRect.width?fe.current=!0:fe.current&&(fe.current=!1,place(),me.current+=1,pe(me.current))});return t.observe(e),()=>t.disconnect()},[]),r.useEffect(()=>{if(ce.current)return void(ce.current=!1);if(!ue.current)return void(ue.current=!0);const e=le.current,t=ie.current[ae];e&&t&&scrollTrackTo(e,t),de.current=!0;const r=window.setTimeout(()=>{de.current=!1},700);return()=>window.clearTimeout(r)},[ae]);const Se=r.useRef(Le);r.useEffect(()=>{Se.current=Le}),r.useEffect(()=>{if(!ke)return;const handleVisibility=()=>{document.hidden||(me.current+=1,pe(me.current))};return document.addEventListener("visibilitychange",handleVisibility),()=>document.removeEventListener("visibilitychange",handleVisibility)},[ke]),r.useEffect(()=>{if(!ke||ve||we||ne<2)return;const e=window.setInterval(()=>{document.hidden||fe.current||me.current!==he||0===le.current?.clientWidth||Se.current(ae+1)},z);return()=>window.clearInterval(e)},[ke,ve,we,ne,z,ae,he]);const handleTouch=e=>{const t="touchstart"===e.type;for(let r=0;r<e.changedTouches.length;r+=1){const{identifier:n}=e.changedTouches[r];t?ge.current.add(n):ge.current.delete(n)}xe(ge.current.size>0)},hold=()=>{S&&!Ce.current&&Re(!0)},steer=e=>{hold(),Le(e)},ze=ae<=0,Pe=ae>=ne-1;return t("div",{ref:D,role:"region","aria-roledescription":H.carousel,"aria-label":J,className:f("flex flex-col",$),style:{...b(Z,k),...A},...n(q,{onPointerEnter:()=>be(!0),onPointerLeave:()=>be(!1),onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||(Ce.current=!1),e.target!==je.current&&hold()},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(Ce.current=!1)}}),children:[t("div",{className:f("relative min-w-0 overflow-hidden",h[Y],p[u],g),children:[S&&ne>1?e("div",{className:f("absolute z-10 flex",x[Y]),children:e(a,{ref:je,variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:Ne?U:X,icon:e(Ne?c:i,{}),onClick:()=>{const e=!Ne;Re(e),Ce.current=!e}})}):null,e("div",{ref:le,tabIndex:0,role:"group","aria-label":J,className:f("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=le.current;if(de.current||fe.current||!e||0===e.clientWidth)return;const t=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);t!==ae&&t>=0&&t<ne&&Le(t,!0)},onTouchStart:handleTouch,onTouchEnd:handleTouch,onTouchCancel:handleTouch,children:re.map((t,n)=>e("div",{ref:e=>{ie.current[n]=e},role:"group","aria-roledescription":H.slide,"aria-label":te(n+1,ne),className:f("w-full shrink-0 grow-0 basis-full snap-start",m),children:t},r.isValidElement(t)?t.key??n:n))}),P&&ne>1?t("div",{className:f("pointer-events-none absolute inset-y-0 flex items-center",w[Y]),children:[e(a,{variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:K,disabled:!E&&ze,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(l,{})}),onClick:()=>steer(ae-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:Q,disabled:!E&&Pe,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(l,{})}),onClick:()=>steer(ae+1)})]}):null]}),M&&ne>1?e("div",{className:"flex shrink-0 items-center justify-center",children:re.map((t,r)=>e("button",{type:"button","aria-label":te(r+1,ne),"aria-current":r===ae?"true":void 0,className:f("group flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full p-0","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0"),onClick:()=>steer(r),children:e("span",{"aria-hidden":"true",className:f("rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",r===ae?`${y[Y].current} bg-(--p-accent)`:`${y[Y].rest} bg-(--plass-border) group-hover:bg-(--p-accent)`)})},r))}):null,e("span",{className:v,"aria-live":ke?"off":"polite",children:ne>0?te(ae+1,ne):""})]})});