neba 1.13.0 → 1.15.0

package/dist/components/animate-rotate/AnimateRotate.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e=460,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:g=!0,threshold:p=.2,stagger:f=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=-180,to:R=0,origin:S="center",fade:$=!0,render:b,className:w,style:x,children:A,...O},T){const k=a({effect:"rotate",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:j,angle:`${v}deg`,angleTo:`${R}deg`,opacity:$?0:1,trigger:m,play:c,once:g,threshold:p,paused:d,infinite:t(s),timeline:h,range:N,children:A,stagger:f,durationStep:u,reverse:y});return r({render:b,ref:[T,k.ref],props:{...O,className:n(k.className,w),style:{transformOrigin:S,...k.style,...x},...k.props,children:k.children}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateRotate=/*@__PURE__*/e.forwardRef(function AnimateRotate({duration:e=460,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:g=!0,threshold:p=.2,stagger:f=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:R="in",from:j=-180,to:v=0,origin:A="center",fade:S=!0,render:$,className:b,style:w,children:x,...O},T){const k=a({caller:O,effect:"rotate",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:R,angle:`${j}deg`,angleTo:`${v}deg`,opacity:S?0:1,trigger:m,play:c,once:g,threshold:p,paused:d,infinite:t(s),timeline:h,range:N,children:x,stagger:f,durationStep:u,reverse:y});return r({render:$,ref:[T,k.ref],props:{...O,className:n(k.className,b),style:{transformOrigin:A,...k.style,...w},...k.props,children:k.children}})});

package/dist/components/animate-scramble/AnimateScramble.d.ts

@@ -33,9 +33,11 @@ export interface AnimateScrambleProps extends Omit<NebaAnimateProps, 'easing' |
  * Text arriving through noise, one character at a time.
  *
  * `AnimateTyping`'s sibling: a typewriter reveals a string from an empty line,
- * this one resolves it out of a line that was already the right length. That is
- * the whole reason to choose it — the box never changes size, so nothing around
- * it reflows and a heading does not push the page down as it lands.
+ * this one resolves it out of a line that was already the right length. The box
+ * is laid out from the final text, so nothing around it reflows and a heading
+ * does not push the page down as it lands. In a proportional font the noise can
+ * be wider than the text for a moment, and spills past the box without moving
+ * anything.
  *
  * Whitespace is never scrambled. A space that flickers into a letter and back
  * reads as the words having moved, which is the one thing this effect is for

package/dist/components/animate-scramble/AnimateScramble.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{useRender as s}from"@base-ui/react/use-render";import{isInfinite as n,useAnimationRun as i,usePrefersReducedMotion as l}from"../../internal/animate.js";import{graphemesOf as o,textOf as m}from"../../internal/text.js";import{srOnlyClasses as c}from"../../internal/styles.js";const u="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&$@*";export const AnimateScramble=/*@__PURE__*/a.forwardRef(function({text:d,speed:h=18,tick:p=45,characters:f=u,duration:g,delay:x=0,repeat:M=1,paused:j,trigger:y="mount",play:v,once:N=!0,threshold:b=.2,locale:I,render:T,className:w,style:R,children:S,...A},E){const F=i({trigger:y,play:v,once:N,threshold:b,paused:j,infinite:n(M)}),k=l(),B=d??m(S),C=a.useMemo(()=>o(B,I),[B,I]),D=C.length,[G,H]=a.useState(0),[J,K]=a.useReducer(e=>e+1,0),L=a.useMemo(()=>void 0!==g&&D>0?Math.max(1,g/D):1e3/Math.max(1,h),[g,h,D]);a.useEffect(()=>{if(!F.started||j)return;if(k||0===D)return void H(D);let e,t=0;const r=()=>{t+=1,H(t),t<D?e=setTimeout(r,L):clearInterval(a)};H(0);const a=setInterval(K,p);return e=setTimeout(r,x+L),()=>{clearTimeout(e),clearInterval(a)}},[F.started,j,k,D,L,p,x]);const O=f.length>0?f:u,P=C.map((e,t)=>t<G||""===e.trim()?e:O[function(e,t,r){let a=Math.imul(e+1,2246822507)^Math.imul(t+1,3266489909);return a^=a>>>15,a=Math.imul(a,625341585),a^=a>>>13,(a>>>0)%r}(J,t,O.length)]).join("");return s({render:T,ref:[E,F.ref],props:{...A,className:w,style:R,"data-neba-animation":"scramble","data-state":F.state,...F.handlers,children:r(t,{children:[e("span",{className:c,children:B}),e("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:P})]})}})});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{isInfinite as s,useAnimationRun as i,usePrefersReducedMotion as l}from"../../internal/animate.js";import{graphemesOf as c,textOf as o}from"../../internal/text.js";import{cx as m,srOnlyClasses as u}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const p="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&$@*";export const AnimateScramble=/*@__PURE__*/a.forwardRef(function AnimateScramble(f,h){const{text:g,speed:M=18,tick:j=45,characters:v=p,duration:x,delay:b=0,repeat:y=1,paused:N,trigger:w="mount",play:I,once:R=!0,threshold:S=.2,locale:T,render:A,className:E,style:F,children:k,...B}=d(f,["locale"]),C=i({caller:B,trigger:w,play:I,once:R,threshold:S,paused:N,infinite:s(y)}),D=l(),G=g??o(k),H=a.useMemo(()=>c(G,T),[G,T]),J=H.length,[K,L]=a.useState(0),[O,P]=a.useReducer(e=>e+1,0),Q=a.useMemo(()=>void 0!==x&&J>0?Math.max(1,x/J):1e3/Math.max(1,M),[x,M,J]),U=a.useRef(0);a.useEffect(()=>{U.current=0},[J]),a.useEffect(()=>{if(!C.started)return void(U.current=0);if(N)return;if(D||0===J)return void L(J);let e,t=Math.min(U.current,J);if(t>=J)return void L(J);const r=()=>{t+=1,U.current=t,L(t),t<J?e=setTimeout(r,Q):clearInterval(a)};L(t);const a=setInterval(P,j);return e=setTimeout(r,0===t?b+Q:Q),()=>{clearTimeout(e),clearInterval(a)}},[C.started,N,D,J,Q,j,b]);const V=v.length>0?v:p,W=H.map((e,t)=>D||t<K||""===e.trim()?e:V[function(e,t,r){let a=Math.imul(e+1,2246822507)^Math.imul(t+1,3266489909);return a^=a>>>15,a=Math.imul(a,625341585),a^=a>>>13,(a>>>0)%r}(O,t,V.length)]).join("");return n({render:A,ref:[h,C.ref],props:{...B,className:m("inline-grid",E),style:F,"data-neba-animation":"scramble","data-state":C.state,...C.handlers,children:r(t,{children:[e("span",{className:u,children:G}),e("span",{"aria-hidden":"true",className:"whitespace-pre-wrap [grid-area:1/1]",children:W}),e("span",{"aria-hidden":"true","data-sample":G,className:"invisible whitespace-pre-wrap [grid-area:1/1] before:content-[attr(data-sample)]"})]})}})});

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

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,lengthValue as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const AnimateShake=/*@__PURE__*/e.forwardRef(function({duration:e=420,delay:i=0,easing:l="ease-in-out",repeat:o=1,alternate:d,paused:c,trigger:m="manual",play:p,once:f=!0,threshold:u=.2,stagger:g=0,durationStep:h=0,reverse:y=!1,timeline:k,range:N,distance:S=6,render:b,className:j,style:v,children:x,...w},A){const C=n({effect:null,effectClass:"neba-anim-shake",name:"shake",duration:e,delay:i,easing:l,repeat:o,alternate:d,x:t(S),trigger:m,play:p,once:f,threshold:u,paused:c,infinite:a(o),timeline:k,range:N,children:x,stagger:g,durationStep:h,reverse:y});return r({render:b,ref:[A,C.ref],props:{...w,className:s(C.className,j),style:{...C.style,...v},...C.props,children:C.children}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,lengthValue as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const AnimateShake=/*@__PURE__*/e.forwardRef(function AnimateShake({duration:e=420,delay:i=0,easing:l="ease-in-out",repeat:o=1,alternate:c,paused:d,trigger:m="manual",play:p,once:f=!0,threshold:u=.2,stagger:g=0,durationStep:h=0,reverse:y=!1,timeline:k,range:S,distance:N=6,render:b,className:j,style:v,children:x,...A},w){const C=n({caller:A,effect:null,effectClass:"neba-anim-shake",name:"shake",duration:e,delay:i,easing:l,repeat:o,alternate:c,x:t(N),trigger:m,play:p,once:f,threshold:u,paused:d,infinite:a(o),timeline:k,range:S,children:x,stagger:g,durationStep:h,reverse:y});return r({render:b,ref:[w,C.ref],props:{...A,className:s(C.className,j),style:{...C.style,...v},...C.props,children:C.children}})});

package/dist/components/animate-slide/AnimateSlide.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e=380,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:g=.2,stagger:u=0,durationStep:y=0,reverse:h=!1,timeline:x,range:N,mode:S="in",from:b="bottom",distance:j="100%",fade:v=!0,render:w,className:A,style:R,children:k,...q},z){const{x:B,y:C}=a(b,j),D=n({effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:S,x:B,y:C,opacity:v?0:1,trigger:c,play:p,once:f,threshold:g,paused:m,infinite:t(l),timeline:x,range:N,children:k,stagger:u,durationStep:y,reverse:h});return r({render:w,ref:[z,D.ref],props:{...q,className:i(D.className,A),style:{...D.style,...R},...D.props,children:D.children}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateSlide=/*@__PURE__*/e.forwardRef(function AnimateSlide({duration:e=380,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:g=.2,stagger:u=0,durationStep:y=0,reverse:h=!1,timeline:S,range:x,mode:N="in",from:b="bottom",distance:j="100%",fade:v=!0,render:A,className:w,style:R,children:k,...q},z){const{x:B,y:C}=a(b,j),D=n({caller:q,effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:N,x:B,y:C,opacity:v?0:1,trigger:c,play:p,once:f,threshold:g,paused:m,infinite:t(l),timeline:S,range:x,children:k,stagger:u,durationStep:y,reverse:h});return r({render:A,ref:[z,D.ref],props:{...q,className:i(D.className,w),style:{...D.style,...R},...D.props,children:D.children}})});

package/dist/components/animate-split/AnimateSplit.d.ts

@@ -56,6 +56,8 @@ export interface AnimateSplitProps extends NebaAnimateProps, NebaStaggerProps, N
  *
  * Every piece is an `inline-block`, which is what lets it be moved at all — an
  * inline box cannot be translated up. Each keeps the space that followed it, so
- * a line still breaks between words and never inside the gap.
+ * a line still breaks between words and never inside the gap. Split by
+ * character, the pieces of a word are held in a span that does not wrap, and
+ * the space after it is left as text, which is where the line breaks.
  */
 export declare const AnimateSplit: React.ForwardRefExoticComponent<AnimateSplitProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as i,isInfinite as l,staggerChildren as o,transitionParts as d,useAnimationRun as m}from"../../internal/animate.js";import{graphemesOf as c,textOf as p,wordsOf as u}from"../../internal/text.js";import{cx as f,srOnlyClasses as g}from"../../internal/styles.js";export const AnimateSplit=/*@__PURE__*/r.forwardRef(function({text:h,by:y="word",effect:j="slide",duration:x=520,delay:b=0,easing:w,repeat:N=1,alternate:S,paused:v,trigger:$="mount",play:k,once:A=!0,threshold:F=.2,stagger:M=45,durationStep:R=0,reverse:q=!1,timeline:z,range:B,from:C="bottom",distance:D="0.4em",scale:E,angle:G,side:H,locale:I,render:J,className:K,style:L,children:O,...P},Q){const T=m({trigger:$,play:k,once:A,threshold:F,paused:v,infinite:l(N)}),U=h??p(O),V=r.useMemo(()=>"word"===y?u(U,I):c(U,I),[y,U,I]),W=d({type:j,duration:x,delay:b,easing:w,repeat:N,alternate:S,from:C,distance:D,scale:E,angle:G,side:H,timeline:z,range:B}),X=o(W?V.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a},t)):null,`${s} ${i[j]}`,W?.slots??{duration:x,delay:b,repeat:N},{stagger:M,durationStep:R,reverse:q});return n({render:J,ref:[Q,T.ref],props:{...P,className:K,style:{"--n-anim-state":T.state,...L},...T.handlers,"data-neba-animation":"split","data-state":T.state,children:t(a,{children:[e("span",{className:f(g),children:U}),e("span",{"aria-hidden":"true",children:X})]})}})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as i,isInfinite as l,staggerChildren as o,transitionParts as m,useAnimationRun as c}from"../../internal/animate.js";import{graphemesOf as p,textOf as d,wordsOf as g}from"../../internal/text.js";import{cx as u,srOnlyClasses as h}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const AnimateSplit=/*@__PURE__*/r.forwardRef(function AnimateSplit(y,b){const{text:j,by:w="word",effect:x="slide",duration:N=520,delay:M=0,easing:S,repeat:v,alternate:$,paused:k,trigger:A="mount",play:F,once:R=!0,threshold:q=.2,stagger:z=45,durationStep:B=0,reverse:C=!1,timeline:D,range:E,from:G="bottom",distance:H="0.4em",scale:I,angle:J,side:K,locale:L,render:O,className:P,style:Q,children:T,...U}=f(y,["locale"]),V=v??("blink"===x?"infinite":1),W=c({caller:U,parts:":scope > [aria-hidden] .neba-anim",trigger:A,play:F,once:R,threshold:q,paused:k,infinite:l(V)}),X="view"===D?"running":W.state,Y=j??d(T),Z=r.useMemo(()=>g(Y,L),[Y,L]),_=r.useMemo(()=>{if("word"===w)return null;let e=0;return Z.map(t=>{const a=/\s*$/.exec(t)?.[0]??"",r=p(t.slice(0,t.length-a.length),L),n={start:e,letters:r,gap:a};return e+=r.length,n})},[w,Z,L]),ee=r.useMemo(()=>_?_.flatMap(e=>e.letters):Z,[_,Z]),te=m({type:x,duration:N,delay:M,easing:S,repeat:V,alternate:$,from:G,distance:H,scale:I,angle:J,side:K,timeline:D,range:E}),ae=o(ee.map((t,a)=>e("span",{className:"inline-block whitespace-pre",children:t},a)),`${s} ${i[x]}`,te.slots,{stagger:z,durationStep:B,reverse:C}),re=_?_.map((a,n)=>t(r.Fragment,{children:[a.letters.length>0?e("span",{className:"whitespace-nowrap",children:ae.slice(a.start,a.start+a.letters.length)}):null,a.gap]},n)):ae;return n({render:O,ref:[b,W.ref],props:{...U,className:P,style:{"--n-anim-state":X,...Q},...W.handlers,"data-neba-animation":"split","data-state":X,children:t(a,{children:[e("span",{className:u(h),children:Y}),e("span",{"aria-hidden":"true",children:re})]})}})});

package/dist/components/animate-typing/AnimateTyping.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { NebaAnimateProps } from '../../types.js';
-export interface AnimateTypingProps extends Omit<NebaAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export interface AnimateTypingProps extends Omit<NebaAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /**
+     * Renders something other than a `<span>`, such as `render={<h1 />}` for a
+     * headline being typed. A `<span>` by default, with a block display, so the
+     * component can sit inside a paragraph. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
     /**
      * The text, when it is easier to pass than to nest. Overrides `children`.
      */
@@ -44,8 +51,9 @@ export interface AnimateTypingProps extends Omit<NebaAnimateProps, 'alternate' |
  * for a screen reader, which reads it once and is not made to sit through the
  * performance — and what animates is a visible copy that is `aria-hidden`. So
  * the effect costs a reader who cannot see it nothing, and costs a reader who
- * can nothing either: the box is not laid out from the characters that have
- * arrived, so the text around it does not reflow on every frame.
+ * can nothing either: the box is laid out from the whole string rather than
+ * from the characters that have arrived, so the text around it does not reflow
+ * on every frame.
  *
  * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
  * type again. Without `erase` a repeat clears in one frame, which is right for
@@ -55,4 +63,4 @@ export interface AnimateTypingProps extends Omit<NebaAnimateProps, 'alternate' |
  * contributes its text and nothing about its markup, because there is no honest
  * way to reveal half of a link.
  */
-export declare const AnimateTyping: React.ForwardRefExoticComponent<AnimateTypingProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AnimateTyping: React.ForwardRefExoticComponent<AnimateTypingProps & React.RefAttributes<HTMLElement>>;

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as a,useAnimationRun as n,usePrefersReducedMotion as i}from"../../internal/animate.js";import{cx as s,srOnlyClasses as o}from"../../internal/styles.js";import{graphemesOf as u,textOf as c}from"../../internal/text.js";export const AnimateTyping=/*@__PURE__*/r.forwardRef(function({text:l,speed:m=24,hold:f=1400,erase:d=!1,eraseSpeed:p,caret:h=!0,caretChar:y="|",duration:x,delay:g=0,repeat:T=1,paused:j,trigger:v="mount",play:N,once:M=!0,threshold:w=.2,className:b,style:E,children:R,...S},A){const C=n({trigger:v,play:N,once:M,threshold:w,paused:j,infinite:a(T)}),k=i(),q=l??c(R),z=r.useMemo(()=>u(q),[q]),B=z.length,[D,F]=r.useState(0),G=r.useRef(0),H=x&&B>0?x/B:1e3/Math.max(m,1),I=1e3/Math.max(p??2*m,1);return r.useEffect(()=>{G.current=0},[B]),r.useEffect(()=>{if(k||0===B)return void F(B);if(!C.started)return G.current=0,void F(0);if(j)return;let e,t=!1,r=G.current,a=1,n=!1;const i="infinite"===T?1/0:Math.max(1,T);if(r>=B&&1===i)return;const s=()=>{if(!t){if(n)return r-=1,G.current=r,F(r),r<=0&&(n=!1,a+=1),void(e=setTimeout(s,n?I:H));if(r+=1,G.current=r,F(r),r<B)e=setTimeout(s,H);else if(!(a>=i)){if(d)return n=!0,void(e=setTimeout(s,f));a+=1,e=setTimeout(()=>{t||(r=0,G.current=0,F(0),e=setTimeout(s,H))},f)}}};return F(r),e=setTimeout(s,0===r?g:H),()=>{t=!0,clearTimeout(e)}},[C.started,j,k,B,H,I,g,f,d,T]),t("div",{ref:e=>{C.ref(e),"function"==typeof A?A(e):A&&(A.current=e)},className:b,style:E,"data-neba-animation":"typing","data-state":C.state,...C.handlers,...S,children:[e("span",{className:o,children:q}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[z.slice(0,D).join(""),h?e("span",{className:s("neba-typing-caret"),children:y}):null]})]})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{isInfinite as s,useAnimationRun as i,usePrefersReducedMotion as o}from"../../internal/animate.js";import{cx as c,srOnlyClasses as u}from"../../internal/styles.js";import{graphemesOf as l,textOf as d}from"../../internal/text.js";export const AnimateTyping=/*@__PURE__*/r.forwardRef(function AnimateTyping({text:p,speed:m=24,hold:f=1400,erase:g=!1,eraseSpeed:h,caret:y=!0,caretChar:x="|",duration:T,delay:j=0,repeat:b=1,paused:v,trigger:N="mount",play:w,once:M=!0,threshold:A=.2,render:C,className:E,style:R,children:S,...k},F){const q=i({caller:k,trigger:N,play:w,once:M,threshold:A,paused:v,infinite:s(b)}),z=o(),B=p??d(S),D=r.useMemo(()=>l(B),[B]),G=D.length,[H,I]=r.useState(0),J=r.useRef({count:0,pass:1,deleting:!1}),K=T&&G>0?T/G:1e3/Math.max(m,1),L=1e3/Math.max(h??2*m,1);r.useEffect(()=>{J.current={count:0,pass:1,deleting:!1}},[B]),r.useEffect(()=>{if(z||0===G)return void I(G);if(!q.started)return J.current={count:0,pass:1,deleting:!1},void I(0);if(v||q.offscreen)return;let e,t=!1;const a=J.current,r="infinite"===b?1/0:Math.max(1,b);if(a.count>=G&&a.pass>=r&&!a.deleting)return;const n=()=>{if(!t){if(a.deleting)return a.count-=1,I(a.count),a.count<=0&&(a.deleting=!1,a.pass+=1),void(e=setTimeout(n,a.deleting?L:K));if(a.count<G&&(a.count+=1,I(a.count)),a.count<G)e=setTimeout(n,K);else if(!(a.pass>=r))return g?(a.deleting=!0,void(e=setTimeout(n,f))):void(e=setTimeout(()=>{t||(a.count=0,a.pass+=1,I(0),e=setTimeout(n,K))},f))}};return I(a.count),e=setTimeout(n,0===a.count&&1===a.pass?j:a.deleting?L:K),()=>{t=!0,clearTimeout(e)}},[q.started,q.offscreen,v,z,B,G,K,L,j,f,g,b]);const O=q.ref,P=r.useCallback(e=>{O(e),"function"==typeof F?F(e):F&&(F.current=e)},[F,O]);return n({render:C??e("span",{}),ref:P,props:{className:c("grid",E),style:R,"data-neba-animation":"typing","data-state":q.state,...k,...q.handlers,children:t(a,{children:[e("span",{className:u,children:B}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap [grid-area:1/1]",children:[D.slice(0,H).join(""),y?e("span",{className:c("neba-typing-caret"),children:x}):null]}),e("span",{"aria-hidden":"true","data-sample":B,className:"invisible whitespace-pre-wrap [grid-area:1/1] before:content-[attr(data-sample)]"})]})}})});

package/dist/components/animate-zoom/AnimateZoom.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:m,trigger:d="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=.4,fade:S=!0,render:b,className:w,style:x,children:z,...A},O){const R=a({effect:"zoom",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:j,scale:v,opacity:S?0:1,trigger:d,play:c,once:p,threshold:f,paused:m,infinite:t(s),timeline:h,range:N,children:z,stagger:g,durationStep:u,reverse:y});return r({render:b,ref:[O,R.ref],props:{...A,className:n(R.className,w),style:{transformOrigin:"center",...R.style,...x},...R.props,children:R.children}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateZoom=/*@__PURE__*/e.forwardRef(function AnimateZoom({duration:e=340,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:m,trigger:d="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=.4,fade:A=!0,render:S,className:Z,style:b,children:w,...x},z){const O=a({caller:x,effect:"zoom",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:j,scale:v,opacity:A?0:1,trigger:d,play:c,once:p,threshold:f,paused:m,infinite:t(s),timeline:h,range:N,children:w,stagger:g,durationStep:u,reverse:y});return r({render:S,ref:[z,O.ref],props:{...x,className:n(O.className,Z),style:{transformOrigin:"center",...O.style,...b},...O.props,children:O.children}})});

package/dist/components/app-logo/AppLogo.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{initialsOf as s}from"../../internal/initials.js";import{safeRel as l}from"../../internal/link.js";import{controlHeightClasses as i,controlSlots as o,controlSquareClasses as m,cx as d,gapClasses as c,hasContent as u,srOnlyClasses as x,surfaceClasses as f,toLength as g,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const v={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.375rem]",xl:"text-[1.625rem]"},b={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.3125rem]",xl:"text-[1.5625rem]"},w={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},j={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[f,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press) [box-shadow:var(--n-elev)]"};export const AppLogo=/*@__PURE__*/t.forwardRef(function(t,f){const{src:_,srcSet:y,alt:N,name:k,initials:z,showName:S=!1,shape:A="bare",variant:F="solid",size:L="md",color:P="primary",elevation:R=0,padded:$=!0,height:q,href:B,target:C,rel:D,imageProps:E,render:G,className:H,style:I,children:J,...K}=p(t,["size","variant"]),M="bare"!==A,O=u(J)?J:_?"image":null,Q=M&&$,T=null===O&&!M,U=S&&!T&&u(k),V=N??k,W=z??(k?s(k):""),X="image"===O&&!U&&u(V),Y=T||X,Z=!Y&&!U&&u(V),ee=g(q),re=ee?{height:ee,width:M?ee:void 0}:null,ne=e("span",{"aria-hidden":!Y||void 0,className:d("flex shrink-0 items-center justify-center overflow-hidden","font-semibold tracking-tight whitespace-nowrap",ee?"":i[L],M?d(ee?"":m[L],"circle"===A?"rounded-full":w[L],b[L],j[F]):d("w-auto text-(--neba-fg)",v[L]),"[&_svg]:w-auto [&_svg]:shrink-0",Q?"[&_svg]:h-[72%] [&_svg]:max-w-[72%]":"[&_svg]:h-full [&_svg]:max-w-full",h),style:{...M?o(P,R,F):null,...re},children:"image"===O?e("img",{src:_,srcSet:y,alt:X?V??"":"",className:d("w-auto object-contain",Q?"h-[72%] max-w-[72%]":"h-full max-w-full"),decoding:"async",...E}):O??(T?k:W)});return a({render:G??e(B?"a":"span",{}),ref:f,props:{href:B,target:C,rel:l(C,D),className:d("inline-flex max-w-full min-w-0 items-center align-middle","text-(--neba-fg) no-underline select-none",c[L],B?"cursor-pointer rounded-(--neba-radius-sm)":"",B?"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2":"",H),style:{"--n-ring":`var(--neba-${P}-ring)`,...I},children:n(r,{children:[ne,U?e("span",{className:d("min-w-0 truncate font-semibold",v[L]),children:k}):null,Z?e("span",{className:x,children:V}):null]}),...K}})});
+"use client";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{initialsOf as l}from"../../internal/initials.js";import{safeHref as s,safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlSlots as m,controlSquareClasses as d,cx as c,gapClasses as u,hasContent as x,srOnlyClasses as f,surfaceClasses as g,tintPlateClasses as p,toLength as h,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const w={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.375rem]",xl:"text-[1.625rem]"},j={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.3125rem]",xl:"text-[1.5625rem]"},N={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},_={solid:[g,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[g,"border text-(--n-on-tint) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`text-(--n-on-tint) ${p} [box-shadow:var(--n-elev)]`};export const AppLogo=/*@__PURE__*/t.forwardRef(function AppLogo(t,g){const{src:p,srcSet:y,alt:k,name:z,initials:A,showName:L=!1,shape:S="bare",variant:$="solid",size:F="md",color:P="primary",elevation:R=0,padded:q=!0,height:B,href:C,target:D,rel:E,imageProps:G,render:H,className:I,style:J,children:K,...M}=b(t,["size","variant"]),O="bare"!==S,Q=x(K)?K:p?"image":null,T=O&&q,U=null===Q&&!O,V=L&&!U&&x(z),W=k??z,X=A??(z?l(z):""),Y="image"===Q&&!V&&x(W),Z=U||Y,ee=!Z&&!V&&x(W),re=h(B),ne=re?{height:re,width:O?re:void 0}:null,te=e("span",{"aria-hidden":!Z||void 0,className:c("flex shrink-0 items-center justify-center overflow-hidden","font-semibold tracking-tight whitespace-nowrap",re?"":o[F],O?c(re?"":d[F],"circle"===S?"rounded-full":N[F],j[F],_[$]):c("w-auto text-(--neba-fg)",w[F]),"[&_svg]:w-auto [&_svg]:shrink-0",T?"[&_svg]:h-[72%] [&_svg]:max-w-[72%]":"[&_svg]:h-full [&_svg]:max-w-full",v),style:{...O?m(P,R,$):null,...ne},children:"image"===Q?e("img",{src:p,srcSet:y,alt:Y?W??"":"",decoding:"async",...G,className:c("w-auto object-contain",T?"h-[72%] max-w-[72%]":"h-full max-w-full",G?.className)}):Q??(U?z:X)}),ae=s(C);return a({render:H??e(ae?"a":"span",{}),ref:g,props:{href:ae,target:D,rel:i(D,E),className:c("inline-flex max-w-full min-w-0 items-center align-middle","text-(--neba-fg) no-underline select-none",u[F],ae?"cursor-pointer rounded-(--neba-radius-sm)":"",ae?"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2":"",I),style:{"--n-ring":`var(--neba-${P}-ring)`,...J},children:n(r,{children:[te,V?e("span",{className:c("min-w-0 truncate font-semibold",w[F]),children:z}):null,ee?e("span",{className:f,children:W}):null]}),...M}})});

package/dist/components/approval/Approval.d.ts

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { type ApprovalMessages } from '../../internal/i18n.js';
+import type { NebaColor, NebaElevation, NebaSlots, NebaStyleProps, NebaVariant } from '../../types.js';
+/**
+ * How much is at stake if the answer is wrong.
+ *
+ * Three rather than a number, because what a reader does with this is decide
+ * how carefully to read the rest of the card, and a 0-to-10 scale is a decision
+ * every product would calibrate differently. It is drawn as a word on a chip
+ * and never as a colour alone.
+ */
+export type ApprovalRisk = 'low' | 'medium' | 'high';
+/** One answer the agent is offering. */
+export interface ApprovalOption {
+    /** What is reported to `onDecide`, and what identifies the answer afterwards. */
+    value: string;
+    /** The word on the button. */
+    label: React.ReactNode;
+    /** A line under the row of buttons, saying what this answer commits to. */
+    description?: React.ReactNode;
+    /** Overrides the card's family for this one button. */
+    color?: NebaColor;
+    /**
+     * Overrides the weight of this one button. Every option is `outline` by
+     * default, and that is the decision rather than the absence of one — see the
+     * note on the component.
+     */
+    variant?: NebaVariant;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /** Offered but not available — a permission the reader cannot grant. */
+    disabled?: boolean;
+}
+/**
+ * The parts an Approval draws behind its root.
+ *
+ * `details` is the block holding what the agent is actually asking to do, and
+ * `actions` the row of answers. Both are parts a caller can see and has no
+ * other way to name: a details block with its own scroll and an action row that
+ * runs full width on a phone are the two things every product changes.
+ */
+export type ApprovalSlot = 'title' | 'description' | 'details' | 'actions';
+export interface ApprovalProps extends Pick<NebaStyleProps, 'size' | 'variant' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /** The answers. At least one; three is the usual shape. */
+    options: readonly ApprovalOption[];
+    /**
+     * What is being asked. Defaults to the `locale`'s "Permission needed", for
+     * the reason an [Empty](../feedback/empty) has a default title: a request
+     * with nothing written on it still has to say what kind of thing it is.
+     */
+    title?: React.ReactNode;
+    /** The sentence under the heading, saying why. */
+    description?: React.ReactNode;
+    /**
+     * What the agent is asking to do — a command, a payload, a file path. A
+     * string is drawn as preformatted text with its own line breaks kept; a node
+     * is rendered as it is, which is where an editable form of the arguments
+     * goes.
+     */
+    details?: React.ReactNode;
+    /**
+     * How much is at stake. Drawn as a word on a chip beside the heading, and it
+     * takes over the card's colour family: `low` is `info`, `medium` is
+     * `warning`, `high` is `danger`.
+     */
+    risk?: ApprovalRisk;
+    /**
+     * Which option was taken. `null` — the default — is a request still waiting
+     * for an answer.
+     *
+     * Pass it to drive the Approval yourself. Left out, the card remembers the
+     * button that was pressed, which is enough for a transcript that is not
+     * re-rendered from a server.
+     */
+    decision?: string | null;
+    /** Called with an option's `value` when its button is pressed. */
+    onDecide?: (value: string) => void;
+    /**
+     * The glyph at the start. Defaults to the severity mark that goes with the
+     * family; pass `false` to drop it, or a node to replace it.
+     */
+    icon?: React.ReactNode | false;
+    /** Every option stops answering. The card stays exactly as it is otherwise. */
+    disabled?: boolean;
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Which language the default heading and the risk chip are written in. */
+    locale?: string;
+    /** Those words, written out. Overrides the `locale`'s. */
+    labels?: Partial<ApprovalMessages>;
+    /** Class names for the parts behind the root. */
+    classNames?: NebaSlots<ApprovalSlot>;
+    /** Anything else the body needs, under the details and above the answers. */
+    children?: React.ReactNode;
+}
+/**
+ * The agent asking permission, and the record of what was decided.
+ *
+ * A [Confirm](../feedback/confirm) and a [Popconfirm](./../feedback/popconfirm)
+ * are opened by the reader, offer two answers, and are gone the moment one is
+ * taken. This is opened by the agent, offers as many answers as the agent has
+ * — allow once, always allow, deny — and **stays**: a transcript in which the
+ * question disappears once it is answered is a transcript that cannot be read
+ * back to find out what was agreed to.
+ *
+ * **No option is emphasised by default.** Every button is `outline` in the
+ * card's own family, and an option's own `variant` is how one is singled out.
+ * A permission request whose most prominent button is "Allow" is a request
+ * answered by the shape of the buttons rather than by the reader, and the whole
+ * point of asking is that the answer should be the reader's.
+ */
+export declare const Approval: React.ForwardRefExoticComponent<ApprovalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/approval/Approval.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l,Fragment as n}from"react/jsx-runtime";import*as a from"react";import{Button as i}from"../button/Button.js";import{boxPaddingClasses as t}from"../box/Box.js";import{CheckIcon as s,severityIcon as r}from"../../internal/icons.js";import{approvalMessages as o,useMessages as d}from"../../internal/i18n.js";import{cx as c,hasContent as m,iconClasses as f,metaTextClasses as p,preformattedClasses as u,radiusClasses as x,sheetBodyClasses as h,sheetHeaderGapClasses as v,sheetSectionGapClasses as b,sheetTitleClasses as g,surfaceClasses as N,surfaceSlots as w,transitionClasses as j}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const k={low:"info",medium:"warning",high:"danger"},z={solid:[N,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[N,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-(--n-soft)"};export const Approval=/*@__PURE__*/a.forwardRef(function Approval(N,A){const{variant:B="outline",size:I="md",color:q="warning",density:C="default",elevation:D=0,options:F,title:R,description:S,details:E,risk:G,decision:H,onDecide:J,icon:K,disabled:L=!1,locale:M,labels:O,classNames:P,className:Q,style:T,children:U,...V}=y(N,["size","density","variant","locale"]),W={...d(o,M),...O},[X,Y]=a.useState(null),Z=void 0!==H,$=Z?H:X,_=G?k[G]:q,ee=void 0===K?r(_):K,le=m(R)?R:W.request,ne=a.useId(),ae=null===$?void 0:F.find(e=>e.value===$);return l("div",{ref:A,role:"group","aria-labelledby":ne,"data-decided":$??void 0,className:c("flex w-full flex-col",t[C][I],x[I],b[I],h[I],z[B],j,f,Q??""),style:{...w(_,D),...T},...V,children:[l("div",{className:"flex items-start gap-3",children:[m(ee)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--n-accent)",children:ee}):null,l("div",{className:c("flex min-w-0 flex-1 flex-col",v[I]),children:[e("div",{id:ne,className:c("font-semibold text-(--n-accent)",g[I],P?.title??""),children:le}),m(S)?e("div",{className:c("text-(--neba-muted-fg)",P?.description??""),children:S}):null]}),G?e("span",{className:c("shrink-0 rounded-full bg-(--n-soft) px-2 py-0.5 font-medium text-(--n-on-tint)",p[I]),children:W[G]}):null]}),m(E)?e("div",{className:c("min-w-0",P?.details??""),children:"string"==typeof E?e("pre",{className:c(u,"max-h-56"),children:E}):E}):null,U,e("div",{className:c("flex min-w-0 flex-col gap-1.5",P?.actions??""),children:ae?l("div",{className:"flex items-center gap-2 text-(--neba-muted-fg)",children:[e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--n-accent)",children:e(s,{})}),e("span",{className:p[I],children:W.answered}),e("span",{className:"min-w-0 font-medium text-(--neba-fg)",children:ae.label})]}):l(n,{children:[e("div",{className:"flex flex-wrap gap-2",children:F.map(l=>e(i,{size:I,variant:l.variant??"outline",color:l.color??_,startIcon:l.icon,disabled:L||l.disabled,onClick:()=>{Z||Y(l.value),J?.(l.value)},children:l.label},l.value))}),F.some(e=>m(e.description))?e("ul",{className:c("m-0 flex list-none flex-col gap-0.5 p-0 text-(--neba-muted-fg)",p[I]),children:F.filter(e=>m(e.description)).map(n=>l("li",{children:[e("span",{className:"font-medium text-(--neba-fg)",children:n.label})," — ",n.description]},n.value))}):null]})})]})});

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

@@ -0,0 +1,2 @@
+export { Approval } from './Approval.js';
+export type { ApprovalOption, ApprovalProps, ApprovalRisk, ApprovalSlot } from './Approval.js';

package/dist/components/approval/index.js

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

package/dist/components/area-chart/AreaChart.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{toValues as n}from"../../internal/chart.js";export function AreaChart({curve:o="linear",stacked:l=!1,markers:s="none",valueLabels:i="none",connectNulls:c=!1,series:u,yAxis:m,format:f,...d}){const x=r.useId().replace(/:/g,""),p="full"===l,h=r.useMemo(()=>{if(!p)return u;const e=n(u),r=[];for(const a of e)a.forEach((e,a)=>{r[a]=(r[a]??0)+Math.abs(e.value??0)});return u.map((a,t)=>({...a,data:e[t].map((e,a)=>{if(null===e.value)return null;const t=r[a];return{x:e.x,y:0===t?0:e.value/t*100,color:e.color,label:e.label??String(e.value)}})}))},[u,p]);return e(a,{...d,series:h,format:f,yAxis:p?{min:0,max:100,tickFormat:e=>`${e}%`,...m}:m,stacked:!1!==l,inset:!0,includeZero:!0,headroom:"none"===i?0:10,children:r=>e(t,{context:r,curve:o,filled:!0,stacked:!1!==l,markers:s,valueLabels:i,connectNulls:c,gradient:!1,idPrefix:x})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as a}from"../../internal/chart-line.js";export function AreaChart({curve:n="linear",stacked:s=!1,markers:i="none",valueLabels:o="none",connectNulls:c=!1,series:l,yAxis:m,format:u,...d}){const f=r.useId().replace(/:/g,""),x="full"===s;return e(t,{...d,series:l,stackedFull:x,format:u,yAxis:x?{min:0,max:100,tickFormat:e=>`${e}%`,...m}:m,stacked:!1!==s,inset:!0,includeZero:!0,headroom:"none"===o?0:10,children:r=>e(a,{context:r,curve:n,filled:!0,stacked:!1!==s,markers:i,valueLabels:o,connectNulls:c,gradient:!1,idPrefix:f})})}

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -8,7 +8,7 @@ import type { NebaSize } from '../../types.js';
  * same reason `NebaPosition` keeps `static`/`sticky`/`fixed`: inventing
  * `fill-the-box` would only make a reader look up which CSS it maps to.
  */
-export type NebaAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export type NebaAspectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export interface AspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * The proportion the box holds, written the way CSS writes it — a number
@@ -18,9 +18,11 @@ export interface AspectRatioProps extends React.ComponentPropsWithoutRef<'div'>
     ratio?: number | string;
     /**
      * How a single piece of media inside is fitted. Applies to an `img`, a
-     * `video`, a `canvas`, an `svg` or an `iframe` that is a direct child; those
-     * are stretched to the full box and then fitted. Anything else is laid out
-     * normally and this prop does not reach it.
+     * `picture`, a `video` or a `canvas` that is a direct child, which is
+     * stretched to the full box and then fitted. An `svg` or an `iframe` is
+     * stretched and lays its own content out, an `svg` through its
+     * `preserveAspectRatio`. Anything else is laid out normally and this prop does
+     * not reach it.
      * @default 'cover'
      */
     fit?: NebaAspectFit;

package/dist/components/aspect-ratio/AspectRatio.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,radiusClasses as t}from"../../internal/styles.js";import{useStyleDefaults as r}from"../../internal/defaults.js";const c=["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),l={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const AspectRatio=/*@__PURE__*/e.forwardRef(function(e,n){const{ratio:s=1,fit:a="cover",rounded:f=!1,size:m="md",render:u,className:d,style:j,children:p,...b}=r(e,["size"]),v=o("relative block w-full overflow-hidden",c,l[a],f?t[m]:"",d??"");return i({render:u,ref:n,props:{className:v,style:{aspectRatio:s,...j},children:p,...b}})});
+"use client";import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{cx as i,radiusClasses as c}from"../../internal/styles.js";import{useStyleDefaults as t}from"../../internal/defaults.js";const n=["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),l={cover:["[&>img]:object-cover","[&>video]:object-cover","[&>canvas]:object-cover","[&>picture>img]:object-cover"].join(" "),contain:["[&>img]:object-contain","[&>video]:object-contain","[&>canvas]:object-contain","[&>picture>img]:object-contain"].join(" "),fill:["[&>img]:object-fill","[&>video]:object-fill","[&>canvas]:object-fill","[&>picture>img]:object-fill"].join(" "),none:["[&>img]:object-none","[&>video]:object-none","[&>canvas]:object-none","[&>picture>img]:object-none"].join(" "),"scale-down":["[&>img]:object-scale-down","[&>video]:object-scale-down","[&>canvas]:object-scale-down","[&>picture>img]:object-scale-down"].join(" ")};export const AspectRatio=/*@__PURE__*/e.forwardRef(function AspectRatio(e,r){const{ratio:s=1,fit:a="cover",rounded:j=!1,size:f="md",render:m,className:d,style:b,children:u,...v}=t(e,["size"]),p=i("relative block w-full overflow-hidden",n,l[a],j?c[f]:"",d??"");return o({render:m,ref:r,props:{className:p,style:{aspectRatio:s,...b},children:u,...v}})});

package/dist/components/avatar/Avatar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Avatar as t}from"@base-ui/react/avatar";import{transitionProps as r}from"../../internal/animate.js";import{initialsOf as i}from"../../internal/initials.js";import{controlHeightClasses as s,controlSlots as o,controlSquareClasses as l,cx as d,hasContent as c,srOnlyClasses as m,surfaceClasses as f,transitionClasses as u}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const x={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},h={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},p={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev)]"].join(" "),outline:[f,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press) [box-shadow:var(--n-elev)]"},b="after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",g={solid:`${b} after:[box-shadow:var(--neba-plate-solid)]`,outline:`${b} after:[box-shadow:var(--neba-plate-glass)]`,text:""},j=["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle font-semibold tracking-wide whitespace-nowrap leading-none","[&_svg]:pointer-events-none [&_svg]:size-[55%]",u].join(" ");function w(){return a("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 Avatar=/*@__PURE__*/n.forwardRef(function(n,f){const{src:u,srcSet:b,alt:y,name:N,initials:z,shape:_,variant:S,size:k,color:C,elevation:A,delay:B,imageProps:L,onLoadingStatusChange:M,transition:R,className:Z,style:$,children:F,...I}=v(n,["size","variant"]),P=_??"circle",q=S??"text",D=k??"md",E=C??"primary",G=A??0,H=N?i(N):"",J=r(R),K=y??N,O=c(F)?F:(z??H)||e(w,{}),Q=c(F)||Boolean(z??H),T=d(j,s[D],l[D],x[D],"circle"===P?"rounded-full":h[D],p[q],g[q],J.className,Z??"");return a(t.Root,{ref:f,className:T,style:{...o(E,G,q),...J.style,...$},...I,children:[u?e(t.Image,{src:u,srcSet:b,alt:K??"",className:"size-full object-cover [animation:neba-anim-fade_var(--neba-duration-fill)_var(--neba-ease)_both]",decoding:"async",onLoadingStatusChange:M,...L}):null,a(t.Fallback,{delay:u?B:void 0,className:"flex size-full items-center justify-center",children:[K&&Q?e("span",{className:m,children:K}):null,e("span",{"aria-hidden":!(!K||!Q)||void 0,className:"contents",children:O})]})]})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Avatar as t}from"@base-ui/react/avatar";import{transitionProps as r}from"../../internal/animate.js";import{initialsOf as o}from"../../internal/initials.js";import{controlHeightClasses as i,controlSlots as s,controlSquareClasses as l,cx as d,hasContent as c,srOnlyClasses as m,surfaceClasses as f,tintPlateClasses as u,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const h={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},p={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},b={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev)]"].join(" "),outline:[f,"border text-(--n-on-tint) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev)]"].join(" "),text:`text-(--n-on-tint) ${u} [box-shadow:var(--n-elev)]`},g="after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",j={solid:`${g} after:[box-shadow:var(--neba-plate-solid)]`,outline:`${g} after:[box-shadow:var(--neba-plate-glass)]`,text:""},w=["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle font-semibold tracking-wide whitespace-nowrap leading-none","[&_svg]:pointer-events-none [&_svg]:size-[55%]",v].join(" ");function PersonIcon(){return n("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 Avatar=/*@__PURE__*/a.forwardRef(function Avatar(a,f){const{src:u,srcSet:v,alt:g,name:y,initials:N,shape:z,variant:_,size:S,color:k,elevation:A,delay:C,imageProps:I,onLoadingStatusChange:P,transition:$,className:B,style:L,children:M,...R}=x(a,["size","variant"]),Z=z??"circle",F=_??"text",q=S??"md",D=k??"primary",E=A??0,G=y?o(y):"",H=r($),J=g??y,K=c(M)?M:(N??G)||e(PersonIcon,{}),O=Boolean(J),Q=""===J,T=d(w,i[q],l[q],h[q],"circle"===Z?"rounded-full":p[q],b[F],j[F],H.className,B??"");return n(t.Root,{ref:f,className:T,style:{...s(D,E,F),...H.style,...L},...R,children:[u?e(t.Image,{src:u,srcSet:v,alt:J??"",decoding:"async",onLoadingStatusChange:P,...I,className:d("size-full object-cover [animation:neba-anim-fade_var(--neba-duration-fill)_var(--neba-ease)_both]",I?.className)}):null,n(t.Fallback,{delay:u?C:void 0,className:"flex size-full items-center justify-center",children:[O?e("span",{className:m,children:J}):null,e("span",{"aria-hidden":!(!O&&!Q)||void 0,className:"contents",children:K})]})]})});

package/dist/components/badge/Badge.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as s from"react";import{controlSlots as n,cx as a,hasContent as o,srOnlyClasses as l,surfaceClasses as i,transitionClasses as r}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const b={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},x={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},p={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},c={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},u={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},f={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},g={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},h={solid:[i,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[i,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press)"};export const Badge=/*@__PURE__*/s.forwardRef(function(s,i){const{variant:v="solid",size:w="md",color:j="primary",density:y="default",elevation:z=0,content:N,max:k=99,dot:$=!1,showZero:q=!1,invisible:B=!1,placement:F="top-end",overlap:R="square",label:Z,className:A,style:C,children:D,...E}=d(s,["size","density","variant"]),G=o(D),H=!o(N)||0===N&&!q,I=$||H,J=B||H&&!$,K=a("pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap","rounded-full",r,h[v],I?x[w]:[b[w],p[w],c[y][w]].join(" "),G?`absolute ${f[F]}`:"relative align-middle",G?I?u[w].dot:u[w].badge:"",G&&"circle"===R?g[F]:"",J?"invisible":"",A??""),L=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(N,k),M=e("span",{ref:i,className:K,style:{...n(j,z,v),...C},"aria-hidden":!!J||void 0,...E,children:J?null:m(t,{children:[I||Z?e("span",{className:l,children:Z??L}):null,I?null:e("span",{"aria-hidden":!!Z||void 0,children:L})]})});return G?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[D,M]}):M});
+"use client";import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as n from"react";import{controlSlots as s,cx as o,hasContent as a,srOnlyClasses as i,surfaceClasses as l,tintPlateClasses as r,transitionClasses as d}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const b={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},p={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},c={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},u={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},g={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},f={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},h={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},v={solid:[l,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--n-on-tint) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`text-(--n-on-tint) ${r}`};export const Badge=/*@__PURE__*/n.forwardRef(function Badge(n,l){const{variant:r="solid",size:w="md",color:j="primary",density:y="default",elevation:z=0,content:N,max:$=99,dot:k=!1,showZero:B=!1,invisible:q=!1,placement:F="top-end",overlap:R="square",label:Z,className:A,style:C,children:D,...E}=x(n,["size","density","variant"]),G=a(D),H=0===N&&!B,I=!a(N)||H,J=k||I,K=q||H&&!k,L=K||J&&void 0===Z&&!a(N),M=o("pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap","rounded-full",d,v[r],J?p[w]:[b[w],c[w],u[y][w]].join(" "),G?`absolute ${f[F]}`:"relative align-middle",G?J?g[w].dot:g[w].badge:"",G&&"circle"===R?h[F]:"",K?"invisible":"",A??""),O=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(N,$),P=e("span",{ref:l,className:M,style:{...s(j,z,r),...C},"aria-hidden":!!L||void 0,...E,children:K?null:m(t,{children:[!J&&!Z||L?null:e("span",{className:i,children:Z??O}),J?null:e("span",{"aria-hidden":!!Z||void 0,children:O})]})});return G?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[D,P]}):P});

package/dist/components/bar-chart/BarChart.d.ts

@@ -51,7 +51,7 @@ export interface BarChartProps extends CartesianChartProps {
  * Lengths, compared.
  *
  * A bar says *how much*, and it says it by being longer — which is the whole
- * reason its axis starts at zero and cannot be talked out of it. Crop the scale
+ * reason its axis includes zero unless `yAxis` pins an end. Crop the scale
  * and a bar twice as long stops meaning twice as much, and the reader has no
  * way to know it happened. Reach for a [LineChart](./line-chart) when what
  * matters is the shape of a change rather than the size of each value.

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

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

package/dist/components/blockquote/Blockquote.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{boxPaddingClasses as n}from"../box/Box.js";import{transitionProps as a}from"../../internal/animate.js";import{cx as l,hasContent as s,metaTextClasses as i,radiusClasses as o,surfaceClasses as c,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";const x={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},u={solid:[c,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[c,"border border-s-2 bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"};function p(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const Blockquote=/*@__PURE__*/t.forwardRef(function(t,c){const{variant:b="text",size:h="md",color:v="primary",density:g="default",elevation:j=0,author:N,source:y,cite:w,icon:z,transition:k,className:B,style:q,children:M,...Z}=f(t,["size","density","variant"]),C=a(k),R=s(N)||s(y),$=void 0===z?e(p,{}):z,A=l("flex flex-col text-(--neba-fg)","border-s-2 [border-inline-start-color:var(--n-accent)]","text"===b?"":`${o[h]} rounded-s-none`,u[b],n[g][h],d,C.className,B??""),D=r("blockquote",{cite:w,className:x[h],children:[s($)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--n-soft-press) [&>svg]:size-full",children:$}):null,M]}),E={...m(v,j),...C.style,...q};return R?r("figure",{ref:c,className:A,style:E,...Z,children:[D,r("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--neba-muted-fg)",i[h]].join(" "),children:[s(N)?r("span",{className:"font-medium text-(--neba-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),N]}):null,s(y)?e("cite",{className:"not-italic",children:y}):null]})]}):e("div",{ref:c,className:A,style:E,...Z,children:D})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{boxPaddingClasses as n}from"../box/Box.js";import{transitionProps as a}from"../../internal/animate.js";import{cx as l,hasContent as o,metaTextClasses as s,radiusClasses as i,surfaceClasses as c,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";const u={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},x={solid:[c,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[c,"border border-s-2 bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const Blockquote=/*@__PURE__*/t.forwardRef(function Blockquote(t,c){const{variant:p="text",size:b="md",color:h="primary",density:v="default",elevation:g=0,author:j,source:N,cite:y,icon:k,transition:w,className:z,style:B,children:M,...q}=f(t,["size","density","variant"]),I=a(w),Q=o(j)||o(N),Z=void 0===k?e(QuoteMarkIcon,{}):k,C=l("flex flex-col text-(--neba-fg)","border-s-2 [border-inline-start-color:var(--n-accent)]","text"===p?"":`${i[b]} rounded-s-none`,x[p],n[v][b],d,I.className,z??""),R=r("blockquote",{cite:y,className:u[b],children:[o(Z)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--n-soft-press) [&>svg]:size-full",children:Z}):null,M]}),$={...m(h,g),...I.style,...B};return Q?r("figure",{ref:c,className:C,style:$,...q,children:[R,r("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--neba-muted-fg)",s[b]].join(" "),children:[o(j)?r("span",{className:"font-medium text-(--neba-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),j]}):null,o(N)?e("cite",{className:"not-italic",children:N}):null]})]}):e("div",{ref:c,className:C,style:$,...q,children:R})});

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

@@ -31,7 +31,8 @@ export interface BottomNavigationProps extends NebaStyleProps, Omit<React.Compon
     /**
      * Keeps the bar clear of the home indicator on a phone, by adding
      * `env(safe-area-inset-bottom)` under it. The sheet still reaches the bottom
-     * of the screen; only the items move up.
+     * of the screen; only the items move up. A `static` bar is not at the bottom
+     * of the screen, so it is left alone.
      * @default true
      */
     safeArea?: boolean;

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

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{useRender as i}from"@base-ui/react/use-render";import{barMinHeightClasses as r,BottomNavigationContext as l}from"../../internal/bottom-navigation.js";import{safeRel as o}from"../../internal/link.js";import{cx as s,hasContent as d,iconSizeClasses as c,metaTextClasses as m,paddingXClasses as u,radiusClasses as p,srOnlyClasses as f,surfaceClasses as g,surfaceSlots as b,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const h={solid:[g,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[g,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},y={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},w={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"}},j={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const BottomNavigation=/*@__PURE__*/n.forwardRef(function(t,a){const{variant:o="outline",size:d="md",color:c="primary",density:m="default",elevation:u=0,value:f,defaultValue:g=null,onValueChange:j,position:z="fixed",labels:N="all",divider:k=!0,safeArea:C=!0,disabled:B=!1,label:R,render:V,className:_,style:A,children:D,...F}=x(t,["size","density","variant"]),[I,M]=n.useState(g),P=void 0!==f,S=P?f:I,q=n.useCallback(e=>{P||M(e),j?.(e)},[P,j]),E=n.useMemo(()=>({value:S??null,change:q,size:d,density:m,labels:N,disabled:B,floating:!1}),[S,q,d,m,N,B]),G=s("w-full min-w-0","static"===z?p[d]:"",h[o],"outline"===o&&"static"===z?"border [border-color:var(--n-line)]":"",k?"border-t [border-color:var(--n-line)]":"",y[z],C?"pb-[env(safe-area-inset-bottom)]":"",v,_);return i({render:V??e("nav",{}),ref:a,props:{"aria-label":R,className:G,style:{...b(c,u),...A},children:e(l.Provider,{value:E,children:e("div",{className:s("flex w-full items-stretch",r[d],w[m][d]),children:D})}),...F}})});export const BottomNavigationItem=/*@__PURE__*/n.forwardRef(function({value:i,icon:r,href:g,target:b,rel:x,disabled:h=!1,className:y,children:w,onClick:z,...N},k){const C=n.useContext(l),B=h||C.disabled,R=null!==C.value&&C.value===i,V="all"===C.labels||"selected"===C.labels&&R,_=s("flex min-w-0 flex-col items-center justify-center py-1.5",C.floating?s("relative z-10",u[C.density][C.size],"rounded-full"):s("flex-1 px-1",p[C.size]),j[C.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",v,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",B?"cursor-not-allowed text-(--neba-disabled-fg)":R?C.floating?"cursor-pointer font-medium text-(--n-accent)":"cursor-pointer font-medium text-(--n-accent) bg-(--n-soft) hover:bg-(--n-soft-hover)":"cursor-pointer text-(--neba-muted-fg) hover:text-(--neba-fg) hover:bg-(--n-panel-hover)",y),A=a(t,{children:[d(r)?e("span",{className:s("flex shrink-0 items-center justify-center",c[C.size]),children:r}):null,d(w)?C.floating&&"selected"===C.labels?e("span",{"data-drawn":V?"":void 0,className:s("grid justify-items-center [grid-template-rows:1fr]","[transition-property:grid-template-columns,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",V?"[grid-template-columns:1fr] opacity-100":"[grid-template-columns:0fr] opacity-0"),children:e("span",{className:s("min-w-0 truncate leading-tight",m[C.size]),children:w})}):e("span",{"data-drawn":V?"":void 0,className:V?s("max-w-full truncate leading-tight",m[C.size]):f,children:w}):null]}),D=e=>{B?e.preventDefault():(C.change(i),z?.(e))};return g?e("a",{ref:k,"data-nav-item":"",href:B?void 0:g,"aria-current":R?"page":void 0,"aria-disabled":B||void 0,className:_,onClick:D,target:b,rel:o(b,x),...N,children:A}):e("button",{ref:k,"data-nav-item":"",type:"button",disabled:B,"aria-current":R?"page":void 0,className:_,onClick:D,...N,children:A})});
+"use client";import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as i from"react";import{useRender as n}from"@base-ui/react/use-render";import{barMinHeightClasses as l,BottomNavigationContext as r}from"../../internal/bottom-navigation.js";import{safeHref as o,safeRel as s}from"../../internal/link.js";import{cx as d,hasContent as c,iconSizeClasses as m,metaTextClasses as u,paddingXClasses as p,radiusClasses as f,srOnlyClasses as g,surfaceClasses as b,surfaceSlots as v,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";const y={solid:[b,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},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 BottomNavigation=/*@__PURE__*/i.forwardRef(function BottomNavigation(t,a){const{variant:o="outline",size:s="md",color:c="primary",density:m="default",elevation:u=0,value:p,defaultValue:g=null,onValueChange:b,position:z="fixed",labels:j="all",divider:k=!0,safeArea:C=!0,disabled:B=!1,label:I,render:R,className:V,style:_,children:A,...D}=h(t,["size","density","variant"]),[F,M]=i.useState(g),P=void 0!==p,S=P?p:F,q=i.useCallback(e=>{P||M(e),b?.(e)},[P,b]),E=i.useMemo(()=>({value:S??null,change:q,size:s,density:m,labels:j,disabled:B,floating:!1}),[S,q,s,m,j,B]),G=d("w-full min-w-0","static"===z?f[s]:"",y[o],"outline"===o&&"static"===z?"border [border-color:var(--n-line)]":"",k?"border-t [border-color:var(--n-line)]":"",w[z],C&&"static"!==z?"pb-[env(safe-area-inset-bottom)]":"",x,V);return n({render:R??e("nav",{}),ref:a,props:{"aria-label":I,className:G,style:{...v(c,u),..._},children:e(r.Provider,{value:E,children:e("div",{className:d("flex w-full items-stretch",l[s],N[m][s]),children:A})}),...D}})});export const BottomNavigationItem=/*@__PURE__*/i.forwardRef(function BottomNavigationItem({value:n,icon:l,href:b,target:v,rel:h,disabled:y=!1,className:w,children:N,onClick:j,...k},C){const B=i.useContext(r),I=y||B.disabled,R=null!==B.value&&B.value===n,V="all"===B.labels||"selected"===B.labels&&R,_=d("flex min-w-0 flex-col items-center justify-center py-1.5",B.floating?d("relative z-10",p[B.density][B.size],"rounded-full"):d("flex-1 px-1",f[B.size]),z[B.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",I?"cursor-not-allowed text-(--neba-disabled-fg)":R?B.floating?"cursor-pointer font-medium text-(--n-on-tint)":"cursor-pointer font-medium text-(--n-on-tint) bg-(--n-soft) hover:bg-(--n-soft-hover)":"cursor-pointer text-(--neba-muted-fg) hover:text-(--neba-fg) hover:bg-(--n-panel-hover)",w),A=a(t,{children:[c(l)?e("span",{className:d("flex shrink-0 items-center justify-center",m[B.size]),children:l}):null,c(N)?B.floating&&"selected"===B.labels?e("span",{"data-drawn":V?"":void 0,className:d("grid justify-items-center [grid-template-rows:1fr]","[transition-property:grid-template-columns,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",V?"[grid-template-columns:1fr] opacity-100":"[grid-template-columns:0fr] opacity-0"),children:e("span",{className:d("min-w-0 truncate leading-tight",u[B.size]),children:N})}):e("span",{"data-drawn":V?"":void 0,className:V?d("max-w-full truncate leading-tight",u[B.size]):"selected"===B.labels?d("max-w-full truncate leading-tight opacity-0",u[B.size]):g,children:N}):null]}),D=e=>{I?e.preventDefault():(B.change(n),j?.(e))},F=o(b);return F?e("a",{ref:C,"data-nav-item":"",href:I?void 0:F,"aria-current":R?"page":void 0,"aria-disabled":I||void 0,className:_,onClick:D,target:v,rel:s(v,h),...k,children:A}):e("button",{ref:C,"data-nav-item":"",type:"button",disabled:I,"aria-current":R?"page":void 0,className:_,onClick:D,...k,children:A})});

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

@@ -41,6 +41,11 @@ export interface BoxProps extends NebaStyleProps, Omit<React.ComponentPropsWitho
 export declare const boxPaddingClasses: Record<NebaDensity, Record<NebaSize, string>>;
 export declare const boxPaddingXClasses: Record<NebaDensity, Record<NebaSize, string>>;
 export declare const boxPaddingYClasses: Record<NebaDensity, Record<NebaSize, string>>;
+/**
+ * The same ladder as lengths, for the one thing a class cannot do with it: add
+ * a screen inset to it. Keep the two in step.
+ */
+export declare const boxPaddingYValues: Record<NebaDensity, Record<NebaSize, string>>;
 /**
  * A sheet of acrylic with content on it. The plainest surface in the library:
  * it groups things, and that is all it does.

package/dist/components/box/Box.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as s}from"@base-ui/react/use-render";import{transitionProps as a}from"../../internal/animate.js";import{cx as t,radiusClasses as n,surfaceClasses as o,surfaceSlots as r,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as l}from"../../internal/defaults.js";const d=n;export const boxPaddingClasses={default:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"},compact:{xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-4"}};export const boxPaddingXClasses={default:{xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const boxPaddingYClasses={default:{xs:"py-2",sm:"py-3",md:"py-4",lg:"py-5",xl:"py-6"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-4"}};const x=["block",p].join(" "),i={solid:[o,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[o,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};export const Box=/*@__PURE__*/e.forwardRef(function(e,n){const{variant:o="outline",size:p="md",color:m="primary",density:c="default",elevation:b=0,padded:f=!0,transition:g,render:y,className:u,style:v,children:j,...h}=l(e,["size","density","variant"]),C=a(g),P=t(x,d[p],f?boxPaddingClasses[c][p]:"",i[o],C.className,u??"");return s({render:y,ref:n,props:{className:P,style:{...r(m,b),...C.style,...v},children:j,...h}})});
+"use client";import*as e from"react";import{useRender as s}from"@base-ui/react/use-render";import{transitionProps as a}from"../../internal/animate.js";import{cx as r,radiusClasses as t,surfaceClasses as o,surfaceSlots as l,transitionClasses as n}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const m=t;export const boxPaddingClasses={default:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"},compact:{xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-4"}};export const boxPaddingXClasses={default:{xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const boxPaddingYClasses={default:{xs:"py-2",sm:"py-3",md:"py-4",lg:"py-5",xl:"py-6"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-4"}};export const boxPaddingYValues={default:{xs:"0.5rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};const x=["block",n].join(" "),d={solid:[o,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[o,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};export const Box=/*@__PURE__*/e.forwardRef(function Box(e,t){const{variant:o="outline",size:n="md",color:i="primary",density:c="default",elevation:g=0,padded:b=!0,transition:f,render:y,className:u,style:v,children:j,...h}=p(e,["size","density","variant"]),P=a(f),C=r(x,m[n],b?boxPaddingClasses[c][n]:"",d[o],P.className,u??"");return s({render:y,ref:t,props:{className:C,style:{...l(i,g),...P.style,...v},children:j,...h}})});

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { NebaColor, NebaDensity, NebaSize } from '../../types.js';
 /**
  * What is drawn between two steps of the trail.
@@ -82,6 +83,15 @@ export interface BreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef
     href?: string;
     /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
     onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Renders the link as something other than an `<a>` — the `Link` a router
+     * brings, so a step moves without reloading the page. `href` still goes
+     * through. Only a step that is a link uses it: the current step and a
+     * disabled one stay text.
+     */
+    render?: useRender.RenderProp;
+    /** Where the link opens. Anything but this tab also gets `rel="noopener noreferrer"`. */
+    target?: string;
     /** Content before the label — a home glyph, a repository avatar. */
     startIcon?: React.ReactNode;
     /** Content after the label. */