neba 1.11.0 → 1.13.0

package/dist/components/radio-group/RadioGroup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as i,cx as t,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickDotClasses as b,tickRowLeadingClasses as f,tickSizeClasses as m,transitionClasses as h}from"../../internal/styles.js";const p=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1}),u=["relative inline-flex shrink-0 items-center justify-center rounded-full border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),v=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),x=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),g=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function({label:l,description:s,disabled:d=!1,className:h,classNames:N,style:y,...k},j){const R=r.useContext(p),$=k.readOnly??R.readOnly;return e(o.Root,{disabled:d,className:t("flex flex-col",h??""),style:y,children:a("div",{className:`flex items-start gap-2 ${i[R.size]} ${f}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:j,className:t(u,m[R.size],d?g:$?x:v,N?.control),disabled:d,...k,children:e(n.Indicator,{className:t("rounded-full bg-current",b[R.size],N?.indicator)})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:t("leading-[1.4]",d?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",N?.label),children:l}):null,s?e(o.Description,{className:t(c[R.size],"text-(--neba-muted-fg)",N?.description),children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function({size:n="md",color:i="primary",orientation:s="vertical",label:d,description:b,error:f,invalid:m,disabled:h=!1,readOnly:u=!1,className:v,classNames:x,style:g,children:N,...y},k){const j=null!=f&&!1!==f&&""!==f,R=m??j,$=R?"danger":i,w={"--n-fill":`var(--neba-${$}-fill)`,"--n-fill-hover":`var(--neba-${$}-fill-hover)`,"--n-on-solid":`var(--neba-${$}-on-solid)`,"--n-accent":`var(--neba-${$}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${$}-line)`,"--n-line-hover":`var(--neba-${$}-line-hover)`,"--n-ring":`var(--neba-${$}-ring)`},z=r.useMemo(()=>({size:n,color:$,readOnly:u}),[n,$,u]);return e(p.Provider,{value:z,children:a(o.Root,{disabled:h,invalid:R,className:t("flex flex-col gap-1.5",v??""),style:{...w,...g},children:[d?e(o.Label,{className:t(c[n],"font-medium",h?"text-(--neba-disabled-fg)":"text-(--neba-fg)",x?.label),children:d}):null,b?e(o.Description,{className:t(c[n],"text-(--neba-muted-fg)",x?.description),children:b}):null,e(l,{ref:k,disabled:h,readOnly:u,className:t("flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",x?.control),...y,children:N}),e(o.Error,j?{match:!0,className:t(c[n],"text-(--n-accent)",x?.error),children:f}:{className:t(c[n],"text-(--n-accent)",x?.error)})]})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as o,cx as t,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickDotClasses as b,tickRowLeadingClasses as f,tickSizeClasses as h,transitionClasses as m}from"../../internal/styles.js";const u=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1}),p=["relative inline-flex shrink-0 items-center justify-center rounded-full border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),v=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),g=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),x=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),N=["rounded-full bg-current","[transition:width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:size-0 data-[ending-style]:size-0"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function({label:l,description:s,disabled:d=!1,className:m,classNames:y,style:k,...j},z){const w=r.useContext(u),R=j.readOnly??w.readOnly;return e(i.Root,{disabled:d,className:t("flex flex-col",m??""),style:k,children:a("div",{className:`flex items-start gap-2 ${o[w.size]} ${f}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:z,className:t(p,h[w.size],d?x:R?g:v,y?.control),disabled:d,...j,children:e(n.Indicator,{className:t(N,b[w.size],y?.indicator)})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(i.Label,{className:t("leading-[1.4]",d?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",y?.label),children:l}):null,s?e(i.Description,{className:t(c[w.size],"text-(--neba-muted-fg)",y?.description),children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function({size:n="md",color:o="primary",orientation:s="vertical",label:d,description:b,error:f,invalid:h,disabled:m=!1,readOnly:p=!1,className:v,classNames:g,style:x,children:N,...y},k){const j=null!=f&&!1!==f&&""!==f,z=h??j,w=z?"danger":o,R={"--n-fill":`var(--neba-${w}-fill)`,"--n-fill-hover":`var(--neba-${w}-fill-hover)`,"--n-on-solid":`var(--neba-${w}-on-solid)`,"--n-accent":`var(--neba-${w}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${w}-line)`,"--n-line-hover":`var(--neba-${w}-line-hover)`,"--n-ring":`var(--neba-${w}-ring)`},$=r.useMemo(()=>({size:n,color:w,readOnly:p}),[n,w,p]);return e(u.Provider,{value:$,children:a(i.Root,{disabled:m,invalid:z,className:t("flex flex-col gap-1.5",v??""),style:{...R,...x},children:[d?e(i.Label,{className:t(c[n],"font-medium",m?"text-(--neba-disabled-fg)":"text-(--neba-fg)",g?.label),children:d}):null,b?e(i.Description,{className:t(c[n],"text-(--neba-muted-fg)",g?.description),children:b}):null,e(l,{ref:k,disabled:m,readOnly:p,className:t("flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",g?.control),...y,children:N}),e(i.Error,j?{match:!0,className:t(c[n],"text-(--n-accent)",g?.error),children:f}:{className:t(c[n],"text-(--n-accent)",g?.error)})]})})});

package/dist/components/rating/Rating.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as l}from"../../internal/icons.js";import{fillMessage as r,ratingMessages as i,useMessages as s}from"../../internal/i18n.js";import{controlSlots as o,cx as d,focusWithinRingClasses as m,gapClasses as c,iconSizeClasses as u,radiusClasses as h,srOnlyClasses as f,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const x="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function(y,v){const{value:g,defaultValue:j=0,onValueChange:N,count:M=5,precision:w=1,icon:k,emptyIcon:S,clearable:C=!0,readOnly:L=!1,disabled:P=!1,name:q,required:I=!1,size:z="md",color:A="warning",locale:R,label:V,valueLabel:E,className:F,style:O,onPointerLeave:B,...D}=b(y,["size","locale"]),G=s(i,R),H=n.useId(),J=q??H,[K,Q]=n.useState(j),T=void 0!==g,U=T?g:K,[W,X]=n.useState(null),Y=Math.max(1,Math.floor(M)),Z=w>0&&w<=1?w:1,$=Math.round(1/Z),_=Math.max(0,Math.min(Y,W??U)),ee=n.useCallback(e=>E?E(e,Y):e<=0?G.empty:r(G.value,{value:String(e),max:String(Y)}),[E,Y,G]),ae=e=>{T||Q(e),N?.(e)},ne=Array.from({length:Y},(n,r)=>{const i=Math.max(0,Math.min(1,_-r));return a("span",{className:d("relative inline-flex shrink-0",u[z],h.xs,L||P?"":m),children:[e("span",{className:[x,u[z],P?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:S??e(l,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:[x,u[z],P?"text-(--neba-disabled-fg)":"text-(--n-fill)",p].join(" "),children:k??e(t,{})})}),L?null:Array.from({length:$},(a,n)=>{const t=Number((r+(n+1)*Z).toFixed(4));return e("label",{className:["absolute inset-y-0",P?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/$+"%",width:100/$+"%"},onPointerEnter:()=>{P||X(t)},children:e("input",{type:"radio",className:f,name:J,value:t,checked:U===t,disabled:P,required:I,"aria-label":ee(t),onChange:()=>ae(t),onClick:()=>{C&&U===t&&ae(0)}})},t)})]},r)}),te=d("inline-flex items-center align-middle",c[z],P?"cursor-not-allowed":"",F??""),le={...o(A,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...O};return e("div",L?{ref:v,role:"img","aria-label":ee(Math.max(0,Math.min(Y,U))),className:te,style:le,onPointerLeave:B,...D,children:ne}:{ref:v,role:"radiogroup","aria-label":V??G.label,"aria-disabled":P||void 0,"aria-required":I||void 0,className:te,style:le,onPointerLeave:e=>{X(null),B?.(e)},...D,children:ne})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as r}from"../../internal/icons.js";import{fillMessage as l,ratingMessages as i,useMessages as s}from"../../internal/i18n.js";import{controlSlots as o,cx as d,focusWithinRingClasses as m,gapClasses as c,iconSizeClasses as u,radiusClasses as h,srOnlyClasses as f,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const x="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function(v,y){const{value:g,defaultValue:j=0,onValueChange:N,count:M=5,precision:w=1,icon:k,emptyIcon:S,clearable:C=!0,readOnly:L=!1,disabled:P=!1,name:q,required:I=!1,size:z="md",color:A="warning",locale:R,label:V,valueLabel:_,className:E,style:F,onPointerLeave:O,...B}=p(v,["size","locale"]),D=s(i,R),G=n.useId(),H=q??G,[J,K]=n.useState(j),Q=void 0!==g,T=Q?g:J,[U,W]=n.useState(null),X=Math.max(1,Math.floor(M)),Y=w>0&&w<=1?w:1,Z=Math.round(1/Y),$=Math.max(0,Math.min(X,U??T)),ee=n.useCallback(e=>_?_(e,X):e<=0?D.empty:l(D.value,{value:String(e),max:String(X)}),[_,X,D]),ae=e=>{Q||K(e),N?.(e)},ne=Array.from({length:X},(n,l)=>{const i=Math.max(0,Math.min(1,$-l));return a("span",{className:d("relative inline-flex shrink-0",u[z],h.xs,L||P?"":m),children:[e("span",{className:[x,u[z],P?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:S??e(r,{})}),e("span",{"aria-hidden":"true",className:d("pointer-events-none absolute inset-y-0 start-0 overflow-hidden","[transition:width_var(--neba-duration)_var(--neba-ease)]"),style:{width:100*i+"%"},children:e("span",{className:[x,u[z],P?"text-(--neba-disabled-fg)":"text-(--n-fill)",b].join(" "),children:k??e(t,{})})}),L?null:Array.from({length:Z},(a,n)=>{const t=Number((l+(n+1)*Y).toFixed(4));return e("label",{className:["absolute inset-y-0",P?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Z+"%",width:100/Z+"%"},onPointerEnter:()=>{P||W(t)},children:e("input",{type:"radio",className:f,name:H,value:t,checked:T===t,disabled:P,required:I,"aria-label":ee(t),onChange:()=>ae(t),onClick:()=>{C&&T===t&&ae(0)}})},t)})]},l)}),te=d("inline-flex items-center align-middle",c[z],P?"cursor-not-allowed":"",E??""),re={...o(A,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...F};return e("div",L?{ref:y,role:"img","aria-label":ee(Math.max(0,Math.min(X,T))),className:te,style:re,onPointerLeave:O,...B,children:ne}:{ref:y,role:"radiogroup","aria-label":V??D.label,"aria-disabled":P||void 0,"aria-required":I||void 0,className:te,style:re,onPointerLeave:e=>{W(null),O?.(e)},...B,children:ne})});

package/dist/components/scatter-chart/ScatterChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as l}from"../../internal/chart-frame.js";import{bubbleRadius as t,formatCategory as i,markerRadii as s,markGap as o,markPath as n,markShapes as c,plotHeights as u,pointX as d}from"../../internal/chart.js";import{cx as h,srOnlyClasses as m}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export function ScatterChart(r){const{shape:i="auto",pointRadius:o,maxRadius:h,series:m,categories:b,size:v="md",xAxis:y,...z}=f(r,["size"]),g=o??s[v],j=h??Math.max(g+2,("number"==typeof z.height?z.height:u[v])/12),k=m.reduce((e,r)=>r.color?e:e+1,0),M="auto"===i||"varied"===i?"circle":i,w="varied"===i||"auto"===i&&k>3,N=a.useCallback(e=>w?c[e%c.length]:M,[w,M]),E=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((l,i)=>{e.visible[i]&&l.forEach((l,s)=>{if(null===l.value)return;const o=d(l,s,b);null!==o&&r.push({series:i,index:s,x:e.categoryValuePx(o),y:e.valuePx(l.value),r:void 0===l.z?g:t(l.z,a,j,2)})})}),r},[b,g,j]);return e(l,{...z,series:m,categories:b,size:v,xScale:"value",xAxis:y,marks:E,markInset:j,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:n(N(r),5,5,4),fill:a})}),table:r=>e(p,{id:r,series:m,categories:b,label:z.label,xLabel:y?.label,yLabel:z.yAxis?.label,locale:z.locale,format:z.format}),children:r=>e(x,{context:r,shapeOf:N})})}function x({context:r,shapeOf:l}){const{marks:t,values:i,colors:s,hovered:c,activeMark:u}=r,d=a.useMemo(()=>[...t].sort((e,r)=>r.r-e.r),[t]);return e("g",{children:d.map(r=>{const a=i[r.series]?.[r.index],t=null!==c&&c!==r.series,d=u?.series===r.series&&u?.index===r.index;return e("path",{d:n(l(r.series),r.x,r.y,d?r.r+1:r.r),fill:a?.color??s[r.series],stroke:"var(--neba-chart-gap)",strokeWidth:o,opacity:t?.28:1},`${r.series}-${r.index}`)})})}function p({id:l,series:t,categories:s,label:o,xLabel:n,yLabel:c,locale:u,format:d}){const f=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),x=t.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:l,className:h(m),children:[o?e("caption",{children:o}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:n??"x"}),e("th",{scope:"col",children:c??"y"}),x?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:t.flatMap((a,l)=>a.data.map((t,o)=>{const n="object"==typeof t&&null!==t?t:null,c=n?n.y:"number"==typeof t?t:null,d=n?.x??s?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:a.name??l+1}),e("td",{children:i(d,u)}),e("td",{children:null!==c&&Number.isFinite(c)?f.format(c):""}),x?e("td",{children:void 0===n?.z?"":f.format(n.z)}):null]},`${l}-${o}`)}))})]})}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as l from"react";import{CartesianChart as a,markTransitionClasses as t}from"../../internal/chart-frame.js";import{bubbleRadius as s,formatCategory as i,markerRadii as o,markGap as n,markPath as c,markShapes as u,plotHeights as d,pointX as h}from"../../internal/chart.js";import{cx as m,srOnlyClasses as x}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";export function ScatterChart(r){const{shape:t="auto",pointRadius:i,maxRadius:n,series:m,categories:x,size:v="md",xAxis:y,...z}=p(r,["size"]),g=i??o[v],j=n??Math.max(g+2,("number"==typeof z.height?z.height:d[v])/12),k=m.reduce((e,r)=>r.color?e:e+1,0),$="auto"===t||"varied"===t?"circle":t,w="varied"===t||"auto"===t&&k>3,M=l.useCallback(e=>w?u[e%u.length]:$,[w,$]),N=l.useCallback(e=>{const r=[];let l=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(l=Math.max(l,e.z))})}),e.values.forEach((a,t)=>{e.visible[t]&&a.forEach((a,i)=>{if(null===a.value)return;const o=h(a,i,x);null!==o&&r.push({series:t,index:i,x:e.categoryValuePx(o),y:e.valuePx(a.value),r:void 0===a.z?g:s(a.z,l,j,2)})})}),r},[x,g,j]);return e(a,{...z,series:m,categories:x,size:v,xScale:"value",xAxis:y,marks:N,markInset:j,includeZero:!1,swatch:(r,l)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:c(M(r),5,5,4),fill:l})}),table:(r,l)=>e(b,{id:r,series:m,categories:x,label:z.label,xLabel:y?.label,yLabel:z.yAxis?.label,locale:z.locale,format:l}),children:r=>e(f,{context:r,shapeOf:M})})}function f({context:r,shapeOf:a}){const{marks:s,values:i,colors:o,hovered:u,activeMark:d}=r,h=l.useMemo(()=>[...s].sort((e,r)=>r.r-e.r),[s]);return e("g",{children:h.map(r=>{const l=i[r.series]?.[r.index],s=null!==u&&u!==r.series,h=d?.series===r.series&&d?.index===r.index;return e("path",{d:c(a(r.series),r.x,r.y,r.r),fill:l?.color??o[r.series],stroke:"var(--neba-chart-gap)",strokeWidth:n,opacity:s?.28:1,className:t,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:h&&r.r>0?(r.r+1)/r.r:1}},`${r.series}-${r.index}`)})})}const b=/*@__PURE__*/l.memo(function({id:l,series:a,categories:t,label:s,xLabel:o,yLabel:n,locale:c,format:u}){const d=a.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:l,className:m(x),children:[s?e("caption",{children:s}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:o??"x"}),e("th",{scope:"col",children:n??"y"}),d?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:a.flatMap((l,a)=>l.data.map((s,o)=>{const n="object"==typeof s&&null!==s?s:null,h=n?n.y:"number"==typeof s?s:null,m=n?.x??t?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:l.name??a+1}),e("td",{children:i(m,c)}),e("td",{children:null!==h&&Number.isFinite(h)?u(h):""}),d?e("td",{children:void 0===n?.z?"":u(n.z)}):null]},`${a}-${o}`)}))})]})});

package/dist/components/scroll-area/ScrollArea.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,focusRingClasses as l,toLength as t}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const s={xs:"0.25rem",sm:"0.3125rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"},c={xs:"1rem",sm:"1.25rem",md:"1.5rem",lg:"2rem",xl:"2.5rem"},m=["flex touch-none select-none rounded-full p-px","bg-transparent hover:bg-(--n-soft)","opacity-0 transition-[opacity,background-color] duration-(--neba-duration) ease-(--neba-ease)","data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0"].join(" "),h="flex-1 rounded-full bg-(--n-thumb) hover:bg-(--n-thumb-hover)";export const ScrollArea=/*@__PURE__*/a.forwardRef(function(a,d){const{orientation:b="vertical",height:u,maxHeight:f,size:g="md",color:p="primary",fade:x=!1,className:v,style:y,children:N,...j}=i(a,["size"]),w="vertical"===b||"both"===b,$="horizontal"===b||"both"===b;return r(n.Root,{ref:d,className:o("relative overflow-hidden",v??""),style:{"--n-soft":`var(--neba-${p}-soft)`,"--n-ring":`var(--neba-${p}-ring)`,"--n-thumb":`color-mix(in oklab, var(--neba-${p}-accent) 35%, transparent)`,"--n-thumb-hover":`color-mix(in oklab, var(--neba-${p}-accent) 55%, transparent)`,"--n-rail":s[g],"--n-fade":c[g],height:t(u),maxHeight:t(f),...y},...j,children:[e(n.Viewport,{style:{height:"100%",width:"100%"},className:o("overscroll-contain [outline:none]",l,x?"neba-scroll-fade":""),children:e(n.Content,{className:"min-w-full",children:N})}),w?e(n.Scrollbar,{orientation:"vertical",className:`${m} w-(--n-rail) [margin-block:2px]`,children:e(n.Thumb,{className:h})}):null,$?e(n.Scrollbar,{orientation:"horizontal",className:`${m} h-(--n-rail) [margin-inline:2px]`,children:e(n.Thumb,{className:h})}):null,w&&$?e(n.Corner,{}):null]})});
+"use client";import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,focusRingClasses as l,toLength as t}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const s={xs:"0.25rem",sm:"0.3125rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"},c={xs:"1rem",sm:"1.25rem",md:"1.5rem",lg:"2rem",xl:"2.5rem"},m=["flex touch-none select-none rounded-full p-px","bg-transparent hover:bg-(--n-soft)","opacity-0 transition-[opacity,background-color] duration-(--neba-duration) ease-(--neba-ease)","data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0"].join(" "),h="flex-1 rounded-full bg-(--n-thumb) hover:bg-(--n-thumb-hover)";export const ScrollArea=/*@__PURE__*/a.forwardRef(function(a,d){const{orientation:b="vertical",height:u,maxHeight:f,size:g="md",color:p="primary",fade:x=!1,className:v,style:y,children:N,...j}=i(a,["size"]),w="vertical"===b||"both"===b,$="horizontal"===b||"both"===b;return e(n.Root,{ref:d,className:o("relative overflow-hidden",v??""),style:{"--n-soft":`var(--neba-${p}-soft)`,"--n-ring":`var(--neba-${p}-ring)`,"--n-thumb":`color-mix(in oklab, var(--neba-${p}-accent) 35%, transparent)`,"--n-thumb-hover":`color-mix(in oklab, var(--neba-${p}-accent) 55%, transparent)`,"--n-rail":s[g],"--n-fade":c[g],height:t(u),maxHeight:t(f),...y},...j,children:[r(n.Viewport,{style:{height:"100%",width:"100%"},className:o("overscroll-contain",l,x?"neba-scroll-fade":""),children:r(n.Content,{className:"min-w-full",children:N})}),w?r(n.Scrollbar,{orientation:"vertical",className:`${m} w-(--n-rail) [margin-block:2px]`,children:r(n.Thumb,{className:h})}):null,$?r(n.Scrollbar,{orientation:"horizontal",className:`${m} h-(--n-rail) [margin-inline:2px]`,children:r(n.Thumb,{className:h})}):null,w&&$?r(n.Corner,{}):null]})});

package/dist/components/scroll-zone/ScrollZone.d.ts

@@ -3,9 +3,12 @@ import type { NebaOrientation, NebaStyleProps } from '../../types.js';
 /**
  * When the scroll buttons are drawn.
  *
- * - `auto` — only the one that has somewhere to go, and neither of them while
- *   everything fits. The default: a control that cannot do anything is worse
- *   than no control, and a row that does not overflow is not a scroller.
+ * - `auto` — neither of them while everything fits, and at an end whichever
+ *   costs less: an `overlay` button with nowhere to go is not drawn at all, an
+ *   `inline` one is drawn `disabled`. The default. A control that cannot do
+ *   anything is worse than no control — but an inline lane is held open either
+ *   way, and an empty one is not one control fewer, it is the same width
+ *   reading as stray padding. A row that does not overflow is not a scroller.
  * - `always` — both, from the first paint, with the one that has nowhere to go
  *   `disabled` rather than gone. What a row whose content arrives later wants,
  *   since the buttons do not appear under the pointer half a second in.
@@ -40,7 +43,9 @@ export type ScrollZoneMode = 'item' | 'page' | 'hold';
  *
  * The lane an `inline` button sits in is kept even while that button has
  * nowhere to go, or the strip would resize under the pointer every time it
- * reached an end.
+ * reached an end. That is also what decides what `buttons="auto"` does at an
+ * end: the lane is paid for either way, so the button stays there and is
+ * `disabled`, while an `overlay` one — whose absence is free — is removed.
  */
 export type ScrollZoneButtonPlacement = 'inline' | 'overlay';
 export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
@@ -95,14 +100,15 @@ export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPro
      * Turns a wheel rolled over the strip into travel along it — the one axis a
      * mouse has, on a strip that does not run along it. Off by default, because a
      * wheel taken from the page is the page's: a reader who meant to scroll past
-     * the shelf is held by it instead.
+     * the shelf is held by it instead, and this strip has buttons for the pointer
+     * that has no other way along.
      *
-     * What it does take it gives back at the ends, so a strip with nothing left
-     * ahead of it is something to scroll past rather than something to be caught
-     * in. A trackpad swiping sideways is left alone — that already scrolls the
-     * strip, and answering it here would move twice as far as it was asked to —
-     * and a vertical zone ignores the prop, the wheel already pointing the way it
-     * runs.
+     * What it takes it keeps, at the ends as well, so a flick that runs out of
+     * strip does not become a jump down the article. The pointer leaving the
+     * strip is what gives the page its wheel back. A trackpad swiping sideways is
+     * left alone — that already scrolls the strip, and answering it here would
+     * move twice as far as it was asked to — and a vertical zone ignores the prop,
+     * the wheel already pointing the way it runs.
      * @default false
      */
     wheel?: boolean;

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

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

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

@@ -17,6 +17,19 @@ export interface SelectOption {
     label?: React.ReactNode;
     /** Unavailable, but still listed — the option exists, it just cannot be picked. */
     disabled?: boolean;
+    /**
+     * A heading over this option and the ones next to it that name the same
+     * group: time zones under their region, fonts under their family.
+     *
+     * A group is a **run of adjacent options**, so the array's order is the
+     * list's order and nothing is ever moved out from under a caller. Two runs
+     * naming the same group draw two headings, which is the array saying the
+     * options are not together.
+     *
+     * The heading is a heading and not a row: it cannot be highlighted, chosen
+     * or reached by typeahead.
+     */
+    group?: string;
 }
 /**
  * The parts a Select draws behind its root.

package/dist/components/select/Select.js

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

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaBreakpoint } from '../../types.js';
+export interface ShowProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The narrowest width the children are drawn at, inclusive. Below it they
+     * are not drawn.
+     *
+     * `above="md"` is the desktop half of a pair; `xs` is a floor of zero and so
+     * means "always", which is what makes it safe to pass a value straight
+     * through from a variable.
+     */
+    above?: NebaBreakpoint;
+    /**
+     * The width at which the children stop being drawn, exclusive — so
+     * `below="md"` is drawn under 48rem and not at it, and pairs exactly with
+     * `above="md"` to cover every width once.
+     *
+     * `below="xs"` draws nothing at all: there is no width under a floor of zero.
+     */
+    below?: NebaBreakpoint;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<td />}`. Base UI's own escape hatch, and the way to put this
+     * somewhere a `<div>` is not allowed.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Its children at some widths and not at others.
+ *
+ * `above` and `below` are a floor and a ceiling on the same ladder every other
+ * breakpoint in the library uses, and they compose: `above="sm" below="lg"` is
+ * drawn from 40rem up to but not including 64rem. Either alone is the common
+ * case — a pair of them, with the same breakpoint in both, is the two halves of
+ * one decision and covers every width exactly once.
+ *
+ * **The children are always rendered.** What changes is `display`, which is
+ * deliberate on both sides of it: the answer is right in the first frame the
+ * browser paints, so nothing flashes and nothing has to wait for JavaScript to
+ * find out how wide the window is, and it is the same answer on a server, where
+ * there is no window to ask. It also costs nothing to change — a resize repaints
+ * rather than re-rendering React.
+ *
+ * That is also its limit. A component that must not *run* below a width — one
+ * that fetches, or that mounts a map — is a decision CSS cannot make, and
+ * `useBreakpoint` is what makes it:
+ *
+ * ```tsx
+ * {useBreakpoint('md') && <Map />}
+ * ```
+ *
+ * The wrapper is `display: contents`, so it adds no box: a `Show` inside a
+ * `GridContainer` leaves its children as grid items, and one inside a flex row
+ * leaves them as flex items. Nothing it is given to style — padding, a
+ * background — would have anywhere to land, so put those on an element inside
+ * it or name the element with `render`.
+ */
+export declare const Show: React.ForwardRefExoticComponent<ShowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/show/Show.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{hiddenBelowClasses as o,hiddenFromClasses as n}from"../../internal/responsive.js";import{cx as s}from"../../internal/styles.js";export const Show=/*@__PURE__*/e.forwardRef(function({above:e,below:t,render:a,className:i,children:c,...m},l){const f=s("contents",e?o[e]:"",t?n[t]:"",i??"");return r({render:a,ref:l,props:{className:f,children:c,...m}})});

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

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

package/dist/components/show/index.js

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

package/dist/components/sidebar/Sidebar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as a}from"../drawer/Drawer.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{layoutMessages as l,useMessages as s}from"../../internal/i18n.js";import{drawerSide as d,expandedOnlyClasses as c,PageLayoutContext as u,SidebarSideContext as p,useCollapsed as f}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as b,surfaceSlots as v,toLength as g,toPixels as h,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const w={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},j={solid:[b,"text-(--neba-fg) bg-(--n-panel-press)","[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"};export const Sidebar=/*@__PURE__*/r.forwardRef(function(b,z){const{side:C,width:R,minWidth:k=160,maxWidth:S=480,resizable:B=!1,onResize:N,onResizeEnd:O,collapseBelow:D,open:M,defaultOpen:A=!1,onOpenChange:E,sticky:I=!0,title:T,variant:W="outline",size:L="md",color:P="primary",density:X="default",elevation:_=0,divider:K=!0,padded:$=!0,label:q,locale:F,className:G,style:H,children:J,...Q}=y(b,["size","density","variant","locale"]),U=r.useContext(u),V=r.useContext(p),Y=C??V??"start",Z=F??U.locale,ee=s(l,Z),te=D??(U.present?U.collapseBelow:"none"),re=f(te),[ne,oe]=r.useState(A),ae=void 0!==M,ie=ae?M:U.present?U.open[Y]:ne,le=e=>{ae||(U.present?U.setOpen(Y,e):oe(e)),E?.(e)},se=g(R)??w[L],de=r.useRef(null),ce=r.useCallback(e=>{de.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),ue=r.useRef(null);r.useEffect(()=>()=>ue.current?.(),[]);const pe=e=>{const t=de.current;if(!t)return e;const r=(e,r)=>null==e?r:"number"==typeof e?e:h(e,{percentOf:"undefined"==typeof window?0:window.innerWidth,relativeTo:t})??r,n=Math.min(r(S,480),Math.max(r(k,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${n}px`),n},fe=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",$?m(n[X][L],o[X][L]):""),children:J});return re?e(a,{side:d(Y),mode:"overlay",open:ie,onOpenChange:le,title:T,size:L,color:P,density:X,locale:Z,closeLabel:ee.closeSidebar,extent:void 0===R?void 0:se,"aria-label":T?void 0:q??ee.sidebar,className:G,style:H,children:J}):t("aside",{ref:ce,"aria-label":q??ee.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",j[W],K?m("start"===Y?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===U.scroll?"h-full":I?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",c[te],x,G),style:{...v(P,_),"--n-sidebar-w":se,...H},...Q,children:[fe,B?e("div",{role:"separator","aria-orientation":"vertical","aria-label":ee.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===Y?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=de.current;if(!t||0!==e.button)return;const r=e.currentTarget,n=e.clientX,o=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,l="start"===Y===a?-1:1;let s=o;ue.current=i({target:r,pointerId:e.pointerId,onMove:e=>{s=pe(o+(e.clientX-n)*l),N?.(s)},onEnd:()=>{ue.current=null,O?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===Y===t?-1:1;(e=>{const t=de.current;if(!t)return;const r=pe(t.getBoundingClientRect().width+e);N?.(r),O?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as a}from"../drawer/Drawer.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{layoutMessages as l,useMessages as s}from"../../internal/i18n.js";import{drawerSide as d,expandedOnlyClasses as c,PageLayoutContext as u,SidebarSideContext as p,useCollapsed as f}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as b,surfaceSlots as v,toLength as g,toPixels as h,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const w={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},j={solid:[b,"text-(--neba-fg) bg-(--n-panel-press)","[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"};export const Sidebar=/*@__PURE__*/r.forwardRef(function(b,z){const{side:C,width:R,minWidth:k=160,maxWidth:S=480,resizable:B=!1,onResize:N,onResizeEnd:O,collapseBelow:D,open:M,defaultOpen:A=!1,onOpenChange:E,sticky:I=!0,title:T,variant:W="outline",size:L="md",color:P="primary",density:X="default",elevation:_=0,divider:K=!0,padded:$=!0,label:q,locale:F,className:G,style:H,children:J,...Q}=y(b,["size","density","variant","locale"]),U=r.useContext(u),V=r.useContext(p),Y=C??V??"start",Z=F??U.locale,ee=s(l,Z),te=D??(U.present?U.collapseBelow:"none"),re=f(te),[ne,oe]=r.useState(A),ae=void 0!==M,ie=ae?M:U.present?U.open[Y]:ne,le=e=>{ae||(U.present?U.setOpen(Y,e):oe(e)),E?.(e)},se=g(R)??w[L],de=r.useRef(null),ce=r.useCallback(e=>{de.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),ue=r.useRef(null);r.useEffect(()=>()=>ue.current?.(),[]);const pe=e=>{const t=de.current;if(!t)return e;const r=(e,r)=>null==e?r:"number"==typeof e?e:h(e,{percentOf:"undefined"==typeof window?0:window.innerWidth,relativeTo:t})??r,n=Math.min(r(S,480),Math.max(r(k,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${n}px`),n},fe=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",$?m(n[X][L],o[X][L]):""),children:J});return re?e(a,{side:d(Y),mode:"overlay",open:ie,onOpenChange:le,title:T,size:L,color:P,density:X,locale:Z,closeLabel:ee.closeSidebar,extent:void 0===R?void 0:se,"aria-label":T?void 0:q??ee.sidebar,className:G,style:H,...Q,children:J}):t("aside",{ref:ce,"aria-label":q??ee.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",j[W],K?m("start"===Y?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===U.scroll?"h-full":I?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",c[te],x,G),style:{...v(P,_),"--n-sidebar-w":se,...H},...Q,children:[fe,B?e("div",{role:"separator","aria-orientation":"vertical","aria-label":ee.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===Y?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=de.current;if(!t||0!==e.button)return;const r=e.currentTarget,n=e.clientX,o=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,l="start"===Y===a?-1:1;let s=o;ue.current=i({target:r,pointerId:e.pointerId,onMove:e=>{s=pe(o+(e.clientX-n)*l),N?.(s)},onEnd:()=>{ue.current=null,O?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===Y===t?-1:1;(e=>{const t=de.current;if(!t)return;const r=pe(t.getBoundingClientRect().width+e);N?.(r),O?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});

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

@@ -1,7 +1,22 @@
 import * as React from 'react';
 import { Slider as BaseUISlider } from '@base-ui/react/slider';
-import type { NebaColor, NebaOrientation, NebaSize } from '../../types.js';
+import type { NebaColor, NebaFieldSlot, NebaOrientation, NebaSize, NebaSlots } from '../../types.js';
 type BaseSliderProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISlider.Root>, 'className' | 'style' | 'render' | 'children' | 'orientation'>;
+/**
+ * The parts a Slider draws behind its root.
+ *
+ * `control` is the whole strip a press lands on, which is deliberately taller
+ * than the `track` drawn inside it. There is no `error`: a slider always has a
+ * value in range, so there is nothing for one to say.
+ */
+export type SliderSlot = Exclude<NebaFieldSlot, 'error'> | 'track' | 'indicator' | 'thumb' | 'mark';
+/** One labelled point on the track. */
+export interface SliderMark {
+    /** Where it sits, in the slider's own units. */
+    value: number;
+    /** What is written under it. A mark with no label is a tick on its own. */
+    label?: React.ReactNode;
+}
 export interface SliderProps extends BaseSliderProps {
     /** @default 'md' */
     size?: NebaSize;
@@ -23,8 +38,28 @@ export interface SliderProps extends BaseSliderProps {
      * @default false
      */
     showValue?: boolean | ((formatted: readonly string[], values: readonly number[]) => React.ReactNode);
-    /** Class names for the wrapper, not for the track. */
+    /**
+     * Points named along the track: `1 / 100 / 250 / 500` under a count, or
+     * "realistic" and "abstract" at the two ends of a style axis.
+     *
+     * An array is the marks, each at its own `value`, and a mark with no `label`
+     * is a tick on its own. `true` is a tick at every `step`, which is worth
+     * pairing with a step you chose — the default `step={1}` over the default
+     * range is a hundred of them.
+     *
+     * A mark is read by the eye and not by a screen reader: the value is already
+     * announced by the thumb, and a second reading of the same numbers is noise.
+     * @default false
+     */
+    marks?: boolean | readonly SliderMark[];
+    /** Class names for the root: the column holding the label, the strip and the
+     * line under it. The parts behind it are `classNames`. */
     className?: string;
+    /**
+     * Class names for the parts behind the root — the strip, the rail, the fill,
+     * a thumb, a mark.
+     */
+    classNames?: NebaSlots<SliderSlot>;
     style?: React.CSSProperties;
 }
 /**

package/dist/components/slider/Slider.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as s}from"@base-ui/react/slider";import{cx as r,metaTextClasses as n,surfaceClasses as o,transitionClasses as t}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const c={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},d={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},f={xs:"size-3",sm:"size-3.5",md:"size-4",lg:"size-5",xl:"size-6"},u={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},m={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},h="rounded-full bg-(--n-soft)",b=`rounded-full bg-(--n-fill) ${t}`,x=["rounded-full border bg-(--neba-surface)",o,"[border-color:var(--n-line-hover)]","[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]","cursor-grab select-none active:cursor-grabbing",t,"hover:[box-shadow:var(--neba-shadow-2),0_0_0_4px_var(--n-soft)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[dragging]:[box-shadow:var(--neba-shadow-1),0_0_0_6px_var(--n-soft-hover)]"].join(" ");export const Slider=/*@__PURE__*/a.forwardRef(function(a,o){const{size:t="md",color:v="primary",orientation:g="horizontal",label:w,description:p,showValue:$=!1,disabled:_=!1,className:y,style:N,...j}=i(a,["size"]),z="vertical"===g,A={"--n-fill":`var(--neba-${v}-fill)`,"--n-accent":`var(--neba-${v}-accent)`,"--n-soft":`var(--neba-${v}-soft)`,"--n-soft-hover":`var(--neba-${v}-soft-hover)`,"--n-line-hover":`var(--neba-${v}-line-hover)`,"--n-ring":`var(--neba-${v}-ring)`},V=j.value??j.defaultValue,R=Array.isArray(V)?V.length:1;return l(s.Root,{ref:o,orientation:g,disabled:_,className:r("flex",z?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",_?"[filter:saturate(0.25)] opacity-70 [&_*]:cursor-not-allowed":"",y??""),style:{...A,...N},...j,children:[w||$?l("div",{className:`flex w-full items-baseline gap-2 ${n[t]}`,children:[w?e(s.Label,{className:_?"font-medium text-(--neba-disabled-fg)":"font-medium text-(--neba-fg)",children:w}):null,$?e(s.Value,{className:"ms-auto tabular-nums text-(--neba-muted-fg)",children:"function"==typeof $?$:null}):null]}):null,e(s.Control,{className:["flex touch-none select-none items-center justify-center",z?`${m[t]} h-40 flex-col`:`w-full ${u[t]}`].join(" "),children:l(s.Track,{className:[h,z?`${d[t]} h-full`:`${c[t]} w-full`].join(" "),children:[e(s.Indicator,{className:b}),Array.from({length:R},(l,a)=>e(s.Thumb,{index:a,className:`${x} ${f[t]}`},a))]})}),p?e("div",{className:`${n[t]} text-(--neba-muted-fg)`,children:p}):null]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as s}from"@base-ui/react/slider";import{cx as r,hasContent as n,metaTextClasses as t,surfaceClasses as o,transitionClasses as i}from"../../internal/styles.js";import{WidthSizer as c}from"../../internal/sizer.js";import{useStyleDefaults as m}from"../../internal/defaults.js";const u={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},f={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},d={xs:"size-3",sm:"size-3.5",md:"size-4",lg:"size-5",xl:"size-6"},h={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},b={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},x=`rounded-full bg-(--n-fill) ${i}`,p=["rounded-full border bg-(--neba-surface)",o,"[border-color:var(--n-line-hover)]","[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]","cursor-grab select-none active:cursor-grabbing",i,"hover:[box-shadow:var(--neba-shadow-2),0_0_0_4px_var(--n-soft)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[dragging]:[box-shadow:var(--neba-shadow-1),0_0_0_6px_var(--n-soft-hover)]"].join(" ");function v(e,l,a,s){const r=(e.value-l)/(a-l)*100;return s?{insetBlockEnd:`${r}%`}:{insetInlineStart:`${r}%`}}export const Slider=/*@__PURE__*/a.forwardRef(function(o,i){const{size:g="md",color:w="primary",orientation:N="horizontal",label:$,description:y,showValue:_=!1,marks:z=!1,disabled:j=!1,classNames:k,min:A=0,max:S=100,step:V=1,className:I,style:M,...R}=m(o,["size"]),T="vertical"===N,B=a.useMemo(()=>!0===z?function(e,l,a){const s=l-e;if(!(a>0)||!(s>0)||s/a>100)return[];const r=Math.floor(s/a);return Array.from({length:r+1},(l,s)=>({value:e+s*a}))}(A,S,V):!1===z?[]:[...z],[z,A,S,V]),C={"--n-fill":`var(--neba-${w}-fill)`,"--n-accent":`var(--neba-${w}-accent)`,"--n-soft":`var(--neba-${w}-soft)`,"--n-soft-hover":`var(--neba-${w}-soft-hover)`,"--n-line-hover":`var(--neba-${w}-line-hover)`,"--n-ring":`var(--neba-${w}-ring)`},E=R.value??R.defaultValue,L=Array.isArray(E)?E.length:1,q=e(s.Control,{className:r("flex touch-none select-none items-center justify-center",T?`${b[g]} h-full flex-col`:`w-full ${h[g]}`,k?.control),children:l(s.Track,{className:r("rounded-full bg-(--n-soft)",T?`${f[g]} h-full`:`${u[g]} w-full`,k?.track),children:[e(s.Indicator,{className:r(x,k?.indicator)}),Array.from({length:L},(l,a)=>e(s.Thumb,{index:a,className:r(p,d[g],k?.thumb)},a))]})}),D=B.some(e=>n(e.label)),F=B.length>0?l("div",{"aria-hidden":"true",className:r("relative",t[g],T?"h-full ps-3":D?"h-[calc(1lh+0.375rem)] w-full":"h-1.5 w-full"),children:[B.map((a,s)=>l("span",{className:r("absolute flex text-(--neba-muted-fg)",T?"start-0 h-0 items-center gap-1.5":"top-0 w-0 flex-col items-center",k?.mark),style:v(a,A,S,T),children:[e("span",{className:r("shrink-0 rounded-full bg-(--neba-border)",T?"h-px w-1.5":"h-1.5 w-px")}),n(a.label)?e("span",{className:"whitespace-nowrap",children:a.label}):null]},`${a.value}:${s}`)),T?e(c,{samples:B.filter(e=>n(e.label)).map(e=>e.label)}):null]}):null;return l(s.Root,{ref:i,orientation:N,disabled:j,className:r("flex",T?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",j?"[filter:saturate(0.25)] opacity-70 [&_*]:cursor-not-allowed":"",I??""),style:{...C,...M},min:A,max:S,step:V,...R,children:[$||_?l("div",{className:`flex w-full items-baseline gap-2 ${t[g]}`,children:[$?e(s.Label,{className:r("font-medium",j?"text-(--neba-disabled-fg)":"text-(--neba-fg)",k?.label),children:$}):null,_?e(s.Value,{className:"ms-auto tabular-nums text-(--neba-muted-fg)",children:"function"==typeof _?_:null}):null]}):null,T?l("div",{className:"flex h-40 items-stretch",children:[q,F]}):q,T?null:F,y?e("div",{className:r(t[g],"text-(--neba-muted-fg)",k?.description),children:y}):null]})});

package/dist/components/spoiler/Spoiler.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Button as r}from"../button/Button.js";import{spoilerMessages as i,useMessages as t}from"../../internal/i18n.js";import{boxPaddingClasses as l,boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{cx as d,hasContent as c,metaTextClasses as m,radiusClasses as v,surfaceClasses as u,surfaceSlots as f,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const x={solid:[u,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"},h="[background-color:color-mix(in_oklab,var(--neba-surface)_55%,transparent)]";export const Spoiler=/*@__PURE__*/n.forwardRef(function(u,j){const{revealed:y,defaultRevealed:g=!1,onRevealedChange:w,locale:N,label:z,hideLabel:k,description:_,action:C,reversible:R=!1,maxHeight:B,blur:H=10,padded:S=!0,variant:$="outline",size:I="md",color:L="primary",density:q="default",elevation:A=0,className:D,style:E,children:F,...G}=b(u,["size","density","variant","locale"]),J=t(i,N),K=n.useId(),[M,O]=n.useState(g),P=y??M,Q=e=>{void 0===y&&O(e),w?.(e)},T=!1===_?null:_??J.notice;return a("div",{ref:j,className:d("relative isolate overflow-hidden",v[I],x[$],p,D??""),style:{...f(L,A),...E},...G,children:[e("div",{id:K,className:d("min-w-0",S?l[q][I]:"","[transition:filter_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",P?"":"select-none"),style:{filter:P?void 0:`blur(${H}px)`,maxHeight:P?void 0:B,overflow:P?void 0:"hidden"},inert:!P,children:F}),P?null:a("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",l[q][I],h].join(" "),children:[c(T)?e("p",{className:`m-0 text-(--neba-muted-fg) ${m[I]}`,children:T}):null,C??e(r,{size:I,color:L,density:q,onClick:()=>Q(!0),"aria-expanded":!1,"aria-controls":K,children:z??J.reveal})]}),P&&R?e("div",{className:["flex justify-end",o[q][I],s[q][I],"pt-0"].join(" "),children:e(r,{variant:"text",size:I,color:L,density:q,onClick:()=>Q(!1),"aria-expanded":!0,"aria-controls":K,children:k??J.hide})}):null]})});
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"../button/Button.js";import{spoilerMessages as n,useMessages as t}from"../../internal/i18n.js";import{boxPaddingClasses as l,boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{cx as d,hasContent as c,metaTextClasses as m,radiusClasses as v,surfaceClasses as u,surfaceSlots as f,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const x={solid:[u,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"};export const Spoiler=/*@__PURE__*/r.forwardRef(function(u,h){const{revealed:g,defaultRevealed:j=!1,onRevealedChange:y,locale:w,label:N,hideLabel:z,description:C,action:R,reversible:k=!1,maxHeight:_,blur:A=10,padded:B=!0,variant:H="outline",size:S="md",color:T="primary",density:$="default",elevation:I=0,className:L,style:q,children:D,...E}=b(u,["size","density","variant","locale"]),F=t(n,w),G=r.useId(),[J,K]=r.useState(j),M=g??J,O=e=>{void 0===g&&K(e),y?.(e)},P=!1===C?null:C??F.notice;return i("div",{ref:h,className:d("isolate grid overflow-hidden",v[S],x[H],p,L??""),style:{gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:k?"auto auto":"auto",...f(T,I),...q},...E,children:[e("div",{id:G,className:d("min-w-0",B?l[$][S]:"","[transition:filter_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",M?"":"select-none"),style:{gridArea:"1 / 1",filter:M?void 0:`blur(${A}px)`,maxHeight:M?void 0:_,overflow:M?void 0:"hidden"},inert:!M,children:D}),k?e("div",{className:[M?"":"invisible","flex justify-end",o[$][S],s[$][S],"pt-0"].join(" "),style:{gridArea:"2 / 1"},inert:!M,children:e(a,{variant:"text",size:S,color:T,density:$,onClick:()=>O(!1),"aria-expanded":!0,"aria-controls":G,children:z??F.hide})}):null,i("div",{className:d("z-10 flex flex-col items-center justify-center gap-2 text-center",l[$][S],M?"invisible":"[background-color:color-mix(in_oklab,var(--neba-surface)_55%,transparent)]"),style:{gridRow:"1 / -1",gridColumn:"1"},inert:M,children:[c(P)?e("p",{className:`m-0 text-(--neba-muted-fg) ${m[S]}`,children:P}):null,R??e(a,{size:S,color:T,density:$,onClick:()=>O(!0),"aria-expanded":!1,"aria-controls":G,children:N??F.reveal})]})]})});

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

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import type { NebaSize, NebaStaggerProps, NebaTransition } from '../../types.js';
+/**
+ * Which way the pile grows.
+ *
+ * - `horizontal` — each item sits under the one before it along the inline
+ *   axis. A row of faces, a row of coins.
+ * - `vertical` — the same down the block axis. A pile seen from the front.
+ * - `diagonal` — flows along the inline axis like `horizontal` and drops each
+ *   item as it goes, which is a fanned deck: the item behind shows its corner
+ *   rather than its edge. How far it drops is `drop`.
+ */
+export type StackDirection = 'horizontal' | 'vertical' | 'diagonal';
+export interface StackProps extends NebaStaggerProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** Which way the pile grows. @default 'horizontal' */
+    direction?: StackDirection;
+    /**
+     * How far each item sits **under** the one before it — a CSS length, or a
+     * number of pixels — along the axis the stack flows on.
+     *
+     * Left out it is a fraction of `size`, roughly a third of a control at every
+     * step: enough that the pile reads as a pile, and not so much that the item
+     * behind is gone.
+     */
+    overlap?: number | string;
+    /**
+     * How far each item falls on the axis the stack does **not** flow along.
+     * Only `diagonal` moves on two axes, so only `diagonal` reads it.
+     *
+     * Defaults to `overlap`, which is a shallow fan. A true forty-five degrees
+     * would be the item's own width, which is the one number a stack cannot know
+     * without measuring what it was handed.
+     */
+    drop?: number | string;
+    /**
+     * The size of the things being stacked, which is only ever read to work out
+     * the default `overlap`. Set `overlap` and this does nothing.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * How many items are drawn before the rest become an overflow marker. Left
+     * out, every one of them is drawn.
+     */
+    max?: number;
+    /**
+     * How many there are altogether, when the stack was handed only the first
+     * few. Without it the count is worked out from the children, which is right
+     * only when all of them were passed.
+     */
+    total?: number;
+    /**
+     * What stands in for the ones that did not fit, given how many those are.
+     * Drawn as one more item at the back of the pile.
+     *
+     * A function rather than a node, because the number is the whole point of it:
+     * `(hidden) => <Avatar initials={`+${hidden}`} />`.
+     */
+    overflow?: (hidden: number) => React.ReactNode;
+    /**
+     * Which end of the list is at the front of the pile.
+     *
+     * `first` — the default — puts the first child on top, so a stack read from
+     * its leading edge is read front to back and the item the pile is *about*
+     * comes first rather than last.
+     * @default 'first'
+     */
+    front?: 'first' | 'last';
+    /**
+     * What each item is multiplied by against the one in front of it — `0.94`
+     * takes six per cent off at every step, so the pile recedes.
+     *
+     * It is the `scale` property rather than a `transform`, which is what lets it
+     * sit on the same element as an entrance without the two fighting: the
+     * individual transform properties are applied before the shorthand.
+     * @default 1
+     */
+    scaleStep?: number;
+    /**
+     * The same for opacity: `0.8` leaves each item four fifths as solid as the
+     * one in front. It multiplies with an entrance's own fade rather than
+     * replacing it.
+     * @default 1
+     */
+    opacityStep?: number;
+    /**
+     * Draws a hairline in the page's own surface colour around each item.
+     *
+     * The one place the library draws a hard outline rather than an acrylic edge,
+     * and it is not decoration: two shapes of similar tone laid over each other
+     * have no edge between them at all and the pile reads as one smeared shape.
+     * Written onto the items themselves, so it follows a circle round.
+     * @default false
+     */
+    ring?: boolean;
+    /**
+     * How each item arrives — the library's own `transition` vocabulary, so a
+     * Stack's fade and an `AnimateFade` are the same fade.
+     *
+     * `stagger` is what turns it into a pile being dealt rather than a pile
+     * appearing: it is added to each item's delay in turn.
+     */
+    transition?: NebaTransition;
+    /** The things being stacked. Every top-level child is one item. */
+    children?: React.ReactNode;
+}
+/**
+ * Things laid over each other, so the set reads as a pile rather than a row.
+ *
+ * The overlap is a **margin** rather than a `translate`, which is the whole
+ * reason a Stack can sit in a paragraph: a translated pile draws outside a box
+ * that is still the size of one item, so everything after it is laid out
+ * against the wrong width. Margins make the box exactly as big as what is in
+ * it, at every direction and every overlap.
+ *
+ * Each item is drawn into a wrapper of its own rather than cloned onto. Cloning
+ * would need every child to accept a `className` and a `style` — which a
+ * Tooltip around an avatar, or anything produced by a `.map()` through somebody
+ * else's component, is not obliged to do. The wrapper carries the offset, the
+ * depth and the entrance; the child is left exactly as it was passed.
+ *
+ * The one thing written onto the children is `ring`, and only because a ring
+ * has to follow the shape it is around: a hairline on the wrapper of a circular
+ * avatar is a square.
+ */
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stack/Stack.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import*as e from"react";import{animBaseClass as r,animationClasses as a,animationSlots as l,transitionParts as i}from"../../internal/animate.js";import{lengthOf as n}from"../../internal/responsive.js";import{cx as s}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const m={xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"};export const Stack=/*@__PURE__*/e.forwardRef(function(c,d){const{direction:f="horizontal",overlap:p,drop:g,size:u="md",max:h,total:x,overflow:v,front:y="first",scaleStep:S=1,opacityStep:j=1,ring:$=!1,transition:k,stagger:z=0,durationStep:M=0,reverse:N=!1,className:b,style:w,children:B,...I}=o(c,["size"]),A=e.Children.toArray(B),C=void 0===h?A:A.slice(0,Math.max(0,h)),R=Math.max(0,(x??A.length)-C.length),q=R>0?v?.(R):null,D=null==q?C:[...C,q],E=n(p??m[u]),F=n(g??p??m[u]),G="vertical"===f,H="diagonal"===f,J=i(k),K=J?`${r} ${a[J.effect]}`:"";return t("div",{ref:d,className:s("isolate inline-flex",G?"flex-col items-start":"items-start",$?"[&>*>*>*]:ring-2 [&>*>*>*]:ring-(--neba-surface)":"",b??""),style:w,...I,children:D.map((e,r)=>{const a=N?D.length-1-r:r,i=J?l({...J.slots,delay:J.slots.delay+a*z,duration:Math.max(0,J.slots.duration+a*M)}):void 0;return t("span",{"data-neba-stack-item":"",className:K||void 0,style:{...i,...0===r?null:G?{marginBlockStart:`calc(${E} * -1)`}:{marginInlineStart:`calc(${E} * -1)`},...H?{marginBlockStart:`calc(${F} * ${r})`}:null,zIndex:"first"===y?D.length-r:r+1},children:t("span",{style:{display:"inline-flex",scale:1===S?void 0:String(S**r),opacity:1===j?void 0:j**r},children:e})},r)})})});

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

@@ -0,0 +1 @@
+export * from './Stack.js';

package/dist/components/stack/index.js

@@ -0,0 +1 @@
+export*from"./Stack.js";

package/dist/components/statistic/Statistic.d.ts

@@ -12,10 +12,15 @@ export interface StatisticProps extends Omit<BoxProps, 'title' | 'prefix'> {
      */
     label?: React.ReactNode;
     /**
-     * The figure. A number is formatted; a string is printed exactly as given, for
-     * the values that are not numbers at all — "3h 42m", "A+", "—".
+     * The figure. A number is formatted; anything else is rendered exactly as
+     * given — a string, for the values that are not numbers at all ("3h 42m",
+     * "A+", "—"), or a node for the ones that have to do something on the way in,
+     * which is what an [AnimateCounter](../transitions/animate-counter) is.
+     *
+     * `delta` and `previous` are arithmetic and so only mean anything against a
+     * number; with anything else there is nothing to compare.
      */
-    value: number | string;
+    value: React.ReactNode;
     /**
      * How to write a numeric `value` — `Intl.NumberFormat` options, the same prop
      * the progress indicators take. Without it a number is grouped by the reader's