neba 1.13.0 → 1.15.0

package/dist/components/menubar/Menubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as n from"react";import{Menubar as o}from"@base-ui/react/menubar";import{Menu as r}from"../menu/Menu.js";import{MenuContext as s}from"../../internal/menu.js";import{controlTextClasses as i,cx as a,gapClasses as l,hasContent as c,iconClasses as d,paddingXClasses as u,radiusClasses as f,transitionClasses as m}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg) disabled:hover:bg-transparent"].join(" ");export function MenubarMenu({label:o,startIcon:a,disabled:d=!1,children:m}){const{size:p,color:x,density:v}=n.useContext(s);return t(r,{size:p,color:x,density:v,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:[h,b[p],i[p],l[p],u["default"===v?"compact":v][p],f[p]].join(" "),children:[c(a)?a:null,o]}),children:m})}export const Menubar=/*@__PURE__*/n.forwardRef(function(e,r){const{size:i="md",color:c="primary",density:d="default",orientation:u="horizontal",modal:f=!0,loopFocus:m=!0,disabled:b=!1,className:h,style:x,children:v,...g}=p(e,["size","density"]),y=n.useMemo(()=>({size:i,color:c,density:d}),[i,c,d]);return t(s.Provider,{value:y,children:t(o,{ref:r,orientation:u,modal:f,loopFocus:m,disabled:b,className:a("flex items-center","vertical"===u?"flex-col items-stretch":"flex-row",l[i],h??""),style:{"--n-soft":`var(--neba-${c}-soft)`,"--n-soft-hover":`var(--neba-${c}-soft-hover)`,"--n-accent":`var(--neba-${c}-accent)`,"--n-ring":`var(--neba-${c}-ring)`,...x},...g,children:v})})});
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as n from"react";import{useDirection as o}from"@base-ui/react/direction-provider";import{Menubar as r}from"@base-ui/react/menubar";import{Menu as i}from"../menu/Menu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as s,cx as l,gapClasses as c,hasContent as d,iconClasses as u,paddingXClasses as f,radiusClasses as m,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const h={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},v=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",p,u,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-on-tint)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg) disabled:hover:bg-transparent"].join(" ");export function MenubarMenu({label:r,startIcon:l,disabled:u=!1,children:p}){const{size:b,color:x,density:g,orientation:y}=n.useContext(a),j=o();return t(i,{size:b,color:x,density:g,disabled:u,side:"vertical"===y?"rtl"===j?"left":"right":void 0,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:u,className:[v,h[b],s[b],c[b],f["default"===g?"compact":g][b],m[b]].join(" "),children:[d(l)?l:null,r]}),children:p})}export const Menubar=/*@__PURE__*/n.forwardRef(function Menubar(e,o){const{size:i="md",color:s="primary",density:d="default",orientation:u="horizontal",modal:f=!0,loopFocus:m=!0,disabled:p=!1,className:h,style:v,children:x,...g}=b(e,["size","density"]),y=n.useMemo(()=>({size:i,color:s,density:d,orientation:u}),[i,s,d,u]);return t(a.Provider,{value:y,children:t(r,{ref:o,orientation:u,modal:f,loopFocus:m,disabled:p,className:l("flex items-center","vertical"===u?"flex-col items-stretch":"flex-row",c[i],h??""),style:{"--n-soft":`var(--neba-${s}-soft)`,"--n-soft-hover":`var(--neba-${s}-soft-hover)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-on-tint":`var(--neba-${s}-on-tint)`,"--n-ring":`var(--neba-${s}-ring)`,...v},...g,children:x})})});

package/dist/components/meter/Meter.d.ts

@@ -26,6 +26,12 @@ export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
      * this matters more than it does on a progress bar.
      */
     format?: Intl.NumberFormatOptions;
+    /**
+     * The language the value is written in, as a BCP 47 tag such as `de-DE`. Left
+     * out, it is a provider's `locale`, and then the reader's runtime, which a
+     * server and a browser do not always share.
+     */
+    locale?: string;
     /**
      * Where the bar changes colour, smallest `from` first. The family of the last
      * threshold the value has reached wins; below all of them `color` stands.

package/dist/components/meter/Meter.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Meter as l}from"@base-ui/react/meter";import{barThicknessClasses as t,progressFraction as s,progressSlots as n,thresholdColor as i}from"../../internal/progress.js";import{cx as o,metaTextClasses as m,stackGapClasses as u}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const Meter=/*@__PURE__*/r.forwardRef(function(r,c){const{value:d,min:b=0,max:h=100,label:p,showValue:v=!1,format:x,thresholds:j,thickness:g,size:w="md",color:y="primary",className:N,style:k,..._}=f(r,["size"]),M=s(d,b,h),$=i(d,y,j),z=void 0!==x;return a(l.Root,{ref:c,value:d,min:b,max:h,format:x,className:o("flex w-full flex-col",u[w],N??""),style:{...n($),...k},..._,children:[p||v?a("div",{className:["flex items-baseline gap-2",p?"justify-between":"justify-end",m[w]].join(" "),children:[p?e(l.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:p}):null,v?e(l.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>z?e:`${Math.round(100*(M??0))}%`}):null]}):null,e(l.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${t[w]}`,style:void 0===g?void 0:{height:`${g}px`},children:e(l.Indicator,{className:"absolute top-0 rounded-full bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease),background-color_var(--neba-duration)_var(--neba-ease)]"})})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Meter as r}from"@base-ui/react/meter";import{barThicknessClasses as t,progressAriaText as s,progressFraction as n,progressSlots as o,thresholdColor as i}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as c}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const Meter=/*@__PURE__*/l.forwardRef(function Meter(l,d){const{value:b,min:h=0,max:x=100,label:p,showValue:v=!1,format:g,locale:j,thresholds:w,thickness:y,size:N="md",color:k="primary",className:M,style:_,...V}=f(l,["size","locale"]),$=n(b,h,x),z=i(b,k,w),R=void 0!==g;return a(r.Root,{ref:d,value:b,min:h,max:x,format:g,locale:j,getAriaValueText:s($,R),className:m("flex w-full flex-col",c[N],M??""),style:{...o(z),..._},...V,children:[p||v?a("div",{className:["flex items-baseline gap-2",p?"justify-between":"justify-end",u[N]].join(" "),children:[p?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:p}):null,v?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>R?e:`${Math.round(100*($??0))}%`}):null]}):null,e(r.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${t[N]}`,style:void 0===y?void 0:{height:`${y}px`},children:e(r.Indicator,{className:"absolute top-0 rounded-full bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease),background-color_var(--neba-duration)_var(--neba-ease)]"})})]})});

package/dist/components/mockup/Mockup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as n}from"../../internal/animate.js";import{MockupCutout as o,defaultNotch as s,elevationFilters as h,finishSlots as d,mockupChrome as l,mockupMetrics as c,resolveOs as u,shellClasses as m}from"../../internal/mockup.js";import{observeResize as p}from"../../internal/observe.js";import{cx as f,surfaceSlots as g}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/r.forwardRef(function(w,y){const{device:x,os:k,hardware:N="monitor",size:R="md",resolution:$,orientation:z="portrait",bezel:j="standard",finish:M="graphite",notch:W,systemUi:H=!0,scroll:B=!1,wallpaper:C,time:E="9:41",width:L,height:P,color:S="primary",elevation:F=0,transition:I,render:T,className:U,style:q,children:A,...D}=b(w,["size"]),G=u(x,k),J=W??s(x,G),K="desktop"!==x&&"landscape"===z,O=c({device:x,size:R,resolution:$,orientation:z,bezel:j,hardware:N}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),[ee,te]=r.useState(null);v(()=>{const e=_.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/V.width,t.height/V.height);te(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};return t(),p(e,t)},[V.width,V.height]);const ie=r.useCallback(e=>{_.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),re=H?l({os:G,notch:J,landscape:K,time:E}):{},ae=n(I),ne="none"===j,oe=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:C??"var(--neba-surface)",boxShadow:ne?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(B?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:A})]}),re.bottom?.node,e(o,{notch:J,screen:Q,landscape:K})]}),se=f("neba-mockup relative block",ae.className,U??"");return a({render:T,ref:ie,props:{className:se,style:{...g(S,F),...d[M],...ae.style,width:L??(void 0===P?"100%":"auto"),height:P??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:h[F],...q},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:V.width,height:V.height,transform:`translate(-50%, -50%) scale(${ee??1})`,visibility:null===ee?"hidden":void 0},children:[e("div",{className:ne?"":m,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:oe}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:m,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${m}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),marginLeft:-Z.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...D}})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{ScreenContext as n}from"../../internal/screen.js";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as o}from"../../internal/animate.js";import{MockupCutout as h,defaultNotch as s,elevationFilters as d,finishSlots as l,mockupChrome as c,mockupMetrics as u,resolveOs as m,shellClasses as p}from"../../internal/mockup.js";import{observeResize as f}from"../../internal/observe.js";import{cx as g,surfaceSlots as b}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const w="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/r.forwardRef(function Mockup(y,x){const{device:k,os:N,hardware:R="monitor",size:M="md",resolution:$,orientation:j="portrait",bezel:z="standard",finish:W="graphite",notch:H,systemUi:P=!0,scroll:B=!1,wallpaper:C,time:E="9:41",width:L,height:S,color:F="primary",elevation:I=0,transition:T,render:U,className:q,style:A,children:D,...G}=v(y,["size"]),J=m(k,N),K=H??s(k,J),O="desktop"!==k&&"landscape"===j,Q=u({device:k,size:M,resolution:$,orientation:j,bezel:z,hardware:R}),{screen:V,frame:X,body:Y,stand:Z,base:_}=Q,ee=r.useRef(null),[te,ie]=r.useState(null),re="number"==typeof L?"number"==typeof S?Math.min(L/X.width,S/X.height):L/X.width:"number"==typeof S&&void 0===L?S/X.height:null,ne=te??re;w(()=>{const e=ee.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/X.width,t.height/X.height);ie(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};return t(),f(e,t)},[X.width,X.height]);const ae=r.useCallback(e=>{ee.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),oe=P?c({os:J,notch:K,landscape:O,time:E}):{},he=o(T),se="none"===z,de=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:V.width,height:V.height,borderRadius:Q.screenRadius,background:C??"var(--neba-surface)",boxShadow:se?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[oe.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[oe.start?.node,e("div",{className:"min-w-0 flex-1 "+(B?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:e(n.Provider,{value:!0,children:D})})]}),oe.bottom?.node,e(h,{notch:K,screen:V,landscape:O})]}),le=g("neba-mockup relative block overflow-hidden",he.className,q??"");return a({render:U,ref:ae,props:{className:le,style:{...b(F,I),...l[W],...he.style,width:L??(void 0===S?"100%":"auto"),height:S??"auto",aspectRatio:`${X.width} / ${X.height}`,filter:d[I],...A},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:X.width,height:X.height,transform:`translate(-50%, -50%) scale(${ne??1})`,visibility:null===ne?"hidden":void 0},children:[e("div",{className:se?"":p,style:{width:Y.width,height:Y.height,borderRadius:Q.frameRadius,paddingBlock:`${Q.bezel.top}px ${Q.bezel.bottom}px`,paddingInline:Q.bezel.x},children:de}),Z?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Z.neckWidth,height:Z.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:p,style:{width:Z.footWidth,height:Z.footHeight,borderRadius:Z.footHeight/2}})]}):null,_?e("div",{"aria-hidden":"true",className:`relative ${p}`,style:{width:_.width,height:_.height,borderRadius:`0 0 ${Math.round(.55*_.height)}px ${Math.round(.55*_.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:_.lipWidth,height:Math.round(.34*_.height),marginLeft:-_.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*_.height)}px ${Math.round(.2*_.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...G}})});

package/dist/components/navigation-menu/NavigationMenu.d.ts

@@ -51,6 +51,15 @@ export interface NavigationMenuItemProps {
     disabled?: boolean;
     /** How many columns the panel lays its links out in. @default 1 */
     columns?: number;
+    /**
+     * Renders the panel's links, hidden, before the panel is ever opened.
+     *
+     * On by default, because a link that is only created when a pointer rests on
+     * the row is a link a server render does not contain and a crawler never
+     * follows. Turn it off for a panel whose contents are expensive to build.
+     * @default true
+     */
+    keepMounted?: boolean;
     /** The panel's contents — usually `NavigationMenuLink`s. */
     children?: React.ReactNode;
 }
@@ -81,7 +90,7 @@ export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Navigat
  * is a link, and the difference is not cosmetic — the second one is announced as
  * a destination and the first as something that expands.
  */
-export declare function NavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children }: NavigationMenuItemProps): React.JSX.Element;
+export declare function NavigationMenuItem({ label, href: hrefProp, target, rel, startIcon, value, disabled, columns, keepMounted, children }: NavigationMenuItemProps): React.JSX.Element;
 /**
  * A site's navigation: a row of destinations, some of which open a panel of
  * more of them.

package/dist/components/navigation-menu/NavigationMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as o}from"../../internal/link.js";import{controlHeightClasses as s,controlTextClasses as l,controlTextLeadingClasses as d,cx as c,gapClasses as u,hasContent as f,iconClasses as p,metaTextClasses as m,paddingXClasses as h,popupFadeStateClasses as b,radiusClasses as g,surfaceClasses as v,surfaceSlots as x,transitionClasses as N}from"../../internal/styles.js";const y=/*@__PURE__*/t.createContext({size:"md",density:"default"}),w=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,p,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[disabled]:hover:bg-transparent"].join(" "),j=[v,"relative border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--neba-duration)_var(--neba-ease),width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]",b].join(" "),_=["flex min-w-0 cursor-pointer items-start no-underline","text-(--neba-fg) bg-transparent",N,p,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),z={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const NavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,className:l,children:p,...b},v){const{size:x,density:N}=t.useContext(y);return n(i.Link,{ref:v,href:a,className:c(_,g[x],u[x],h[N??"default"][x],"py-2",l??""),...b,children:[f(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${d[x]}`,children:r}),f(o)?e("span",{className:`text-(--neba-muted-fg) ${m[x]}`,children:o}):null,p]})]})});export function NavigationMenuItem({label:d,href:c,target:p,rel:m,startIcon:b,value:v,disabled:x=!1,columns:N=1,children:j}){const{size:_,density:k}=t.useContext(y),C=void 0!==c&&!f(j),$=[w,s[_],l[_],u[_],h[k??"default"][_],g[_]].join(" ");return e(i.Item,{value:v,children:C?n(i.Link,{href:c,target:p,rel:o(p,m),className:$,children:[f(b)?b:null,d]}):n(a,{children:[n(i.Trigger,{disabled:x,className:$,children:[f(b)?b:null,d,e(i.Icon,{className:"flex items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(i.Content,{className:`grid gap-1 ${z[_]}`,style:N>1?{gridTemplateColumns:`repeat(${N}, minmax(0, 1fr))`}:void 0,children:j})]})})}export const NavigationMenu=/*@__PURE__*/t.forwardRef(function({size:a="md",color:r="primary",density:o="default",orientation:s="horizontal",value:l,defaultValue:d,onValueChange:c,delay:f,closeDelay:p,sideOffset:m=8,className:h,style:b,children:v,...N},w){const _=t.useMemo(()=>({size:a,density:o}),[a,o]),z=x(r,3);return e(y.Provider,{value:_,children:n(i.Root,{ref:w,orientation:s,value:l,defaultValue:d,onValueChange:e=>c?.(e),delay:f,closeDelay:p,className:h,style:{...z,...b},...N,children:[e(i.List,{className:["flex items-center","vertical"===s?"flex-col items-stretch":"flex-row",u[a]].join(" "),children:v}),e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:m,collisionPadding:12,children:e(i.Popup,{className:`${j} ${g[a]}`,style:z,children:e(i.Viewport,{})})})})]})})});
+"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeHref as s,safeRel as o}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as d,controlTextLeadingClasses as c,cx as u,gapClasses as p,hasContent as f,iconClasses as m,metaTextClasses as h,paddingXClasses as b,popupFadeStateClasses as g,radiusClasses as v,surfaceClasses as x,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const j=/*@__PURE__*/t.createContext({size:"md",density:"default"}),_=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,m,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-on-tint)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[disabled]:hover:bg-transparent"].join(" "),k=[x,"relative border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--neba-duration)_var(--neba-ease),width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]",g].join(" "),z=["flex min-w-0 cursor-pointer items-start no-underline","text-(--neba-fg) bg-transparent",y,m,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),M={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const NavigationMenuLink=/*@__PURE__*/t.forwardRef(function NavigationMenuLink({href:a,title:r,description:l,startIcon:d,target:m,rel:g,className:x,children:N,...y},w){const{size:_,density:k}=t.useContext(j);return n(i.Link,{ref:w,href:s(a),target:m,rel:o(m,g),className:u(z,v[_],p[_],b[k??"default"][_],"py-2",x??""),...y,children:[f(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null,n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${c[_]}`,children:r}),f(l)?e("span",{className:`text-(--neba-muted-fg) ${h[_]}`,children:l}):null,N]})]})});export function NavigationMenuItem({label:c,href:u,target:m,rel:h,startIcon:g,value:x,disabled:N=!1,columns:y=1,keepMounted:w=!0,children:k}){const{size:z,density:C}=t.useContext(j),$=s(u),I=void 0!==$&&!f(k),L=[_,l[z],d[z],p[z],b[C??"default"][z],v[z]].join(" ");return e(i.Item,{value:x,children:I&&N?n("span",{"aria-disabled":"true","data-disabled":"",className:L,children:[f(g)?g:null,c]}):I?n(i.Link,{href:$,target:m,rel:o(m,h),className:L,children:[f(g)?g:null,c]}):n(a,{children:[n(i.Trigger,{disabled:N,className:L,children:[f(g)?g:null,c,e(i.Icon,{className:"flex items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(i.Content,{keepMounted:w,className:`grid gap-1 [&[hidden]]:hidden ${M[z]}`,style:y>1?{gridTemplateColumns:`repeat(${y}, minmax(0, 1fr))`}:void 0,children:k})]})})}export const NavigationMenu=/*@__PURE__*/t.forwardRef(function NavigationMenu(a,r){const{size:s="md",color:o="primary",density:l="default",orientation:d="horizontal",value:c,defaultValue:u,onValueChange:f,delay:m,closeDelay:h,sideOffset:b=8,className:g,style:x,children:y,..._}=w(a,["size","density"]),z=t.useMemo(()=>({size:s,density:l}),[s,l]),M=N(o,3);return e(j.Provider,{value:z,children:n(i.Root,{ref:r,orientation:d,value:c,defaultValue:u,onValueChange:e=>f?.(e),delay:m,closeDelay:h,className:g,style:{...M,...x},..._,children:[e(i.List,{className:["flex items-center","vertical"===d?"flex-col items-stretch":"flex-row",p[s]].join(" "),children:y}),e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:"vertical"===d?"inline-end":"bottom",sideOffset:b,collisionPadding:12,children:e(i.Popup,{className:`${k} ${v[s]}`,style:M,children:e(i.Viewport,{})})})})]})})});

package/dist/components/number-field/NumberField.d.ts

@@ -54,12 +54,26 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
     /** Whether stepping snaps to multiples of the step. @default false */
     snapOnStep?: boolean;
     /**
-     * Whether the wheel changes the value while the field is focused and hovered.
-     * Off by default: a page that scrolls under the pointer and a field that
-     * changes under it are the same gesture, and only one of them was meant.
-     * @default false
+     * Whether the wheel changes the value while the field is focused and the
+     * pointer is over the number.
+     *
+     * On, because both halves of that sentence have to be true before anything
+     * happens: a reader who has not put the caret in the field scrolls the page
+     * over it as they would over any other box, and one who has is working the
+     * field and expects the wheel to reach it — which is what a browser's own
+     * number input does. The gesture is taken from the page only for as long as
+     * the field holds the focus and the pointer is on it.
+     *
+     * Off is for a field inside something that scrolls under a pointer that has
+     * to stay put — a long form in a Drawer, a cell in a table body.
+     *
+     * The same prop [ScrollZone](../layout/scroll-zone) and
+     * [Tabs](../surfaces/tabs) have, and deliberately the same word: "does this
+     * answer the wheel" is one question, and a library that spells it three ways
+     * is a library you have to look up three times.
+     * @default true
      */
-    allowWheelScrub?: boolean;
+    wheel?: boolean;
     /**
      * How the number is written — currency, percent, decimal places. Passed
      * straight to `Intl.NumberFormat`, so the field shows `$1,240.00` and still
@@ -139,4 +153,4 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
  * clamping, the press-and-hold repeat on the steppers, and the hidden input
  * that submits with a form.
  */
-export declare function NumberField(rawProps: NumberFieldProps): React.JSX.Element;
+export declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/number-field/NumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as r}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as i}from"../../internal/icons.js";import{keyHandler as o}from"../../internal/keys.js";import{controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldFocusTransitionClasses as u,fieldHeightClasses as p,fieldReadOnlyClasses as f,fieldRestClasses as b,fieldRingClasses as h,gapClasses as x,hasContent as g,iconClasses as v,metaTextClasses as N,paddingXClasses as j,radiusClasses as y,stackGapClasses as w,surfaceSlots as k,transitionClasses as S}from"../../internal/styles.js";import{useStyleDefaults as _}from"../../internal/defaults.js";const V=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",S,u,h,v].join(" "),z=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField(u){const{variant:h="outline",size:v="md",color:S="primary",density:C="default",elevation:I=0,value:O,defaultValue:D,onValueChange:L,onValueCommitted:W,min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K=!1,format:$,locale:A,steppers:H="end",incrementLabel:J,decrementLabel:M,label:P,description:Q,error:T,invalid:U,startIcon:X,endIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ne=!1,required:te=!1,name:ae,placeholder:le,id:re,className:se,classNames:ie,shortcuts:oe,style:ce,...de}=_(u,["size","density","variant","locale"]),me=r(l,"string"==typeof A?A:void 0),ue=g(T),pe=U??ue,fe=pe?"danger":S,be=j[C][v],he={end:`${be} pe-1`,split:"px-1",none:be},xe=e(t.Decrement,{"aria-label":M??me.decrease,className:d(z,ie?.stepper),children:e(s,{})}),ge=e(t.Increment,{"aria-label":J??me.increase,className:d(z,ie?.stepper),children:e(i,{})}),ve="none"!==H&&!ne;return n(a.Root,{disabled:ee,invalid:pe,className:d("flex-col align-top",w[v],Z?"flex w-full":"inline-flex",se??""),style:{...k(fe,I),...ce},...de,children:[P?e(a.Label,{className:d(N[v],"font-medium",ee?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ie?.label),children:P}):null,e(t.Root,{id:re,name:ae,className:"contents",value:O,defaultValue:D,onValueChange:e=>L?.(e),onValueCommitted:e=>W?.(e),min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K,format:$,locale:A,disabled:ee,readOnly:ne,required:te,children:n(t.Group,{className:d(V,p[v],c[v],y[v],x[v],ve?he[H]:be,ee?m[h]:ne?f[h]:b[h],ie?.shell),children:[ve&&"split"===H?xe:null,X?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:X}):null,e(t.Input,{onKeyDown:o(oe),placeholder:le,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===H&&ve?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ie?.control].filter(Boolean).join(" ")}),Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Y}):null,ve&&"end"===H?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[xe,ge]}):null,ve&&"split"===H?ge:null]})}),Q?e(a.Description,{className:d(N[v],"text-(--neba-muted-fg)",ie?.description),children:Q}):null,e(a.Error,ue?{match:!0,className:d(N[v],"text-(--n-accent)",ie?.error),children:T}:{className:d(N[v],"text-(--n-accent)",ie?.error)})]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{NumberField as n}from"@base-ui/react/number-field";import{Field as l}from"@base-ui/react/field";import{numberMessages as r,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as o}from"../../internal/icons.js";import{keyHandler as c}from"../../internal/keys.js";import{controlTextLeadingClasses as d,cx as m,disabledClasses as u,fieldFocusTransitionClasses as p,fieldHeightClasses as f,fieldReadOnlyClasses as b,fieldRestClasses as h,fieldRingClasses as g,gapClasses as x,hasContent as v,iconClasses as N,metaTextClasses as y,paddingXClasses as j,radiusClasses as w,stackGapClasses as k,surfaceSlots as _,transitionClasses as S}from"../../internal/styles.js";import{useStyleDefaults as V}from"../../internal/defaults.js";import{spotlightSlot as z,glowClasses as C,trackPointer as I}from"../../internal/glow.js";import{useFieldsetDisabled as O}from"../../internal/fieldset.js";const D=["group relative flex w-full items-center","[-webkit-tap-highlight-color:transparent]",S,p,g,N].join(" "),F=["relative inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","neba-hit-row","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-on-tint)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export const NumberField=/*@__PURE__*/a.forwardRef(function NumberField(a,p){const{variant:g="outline",size:N="md",color:S="primary",density:L="default",elevation:R=0,value:$,defaultValue:q,onValueChange:W,onValueCommitted:B,min:E,max:G,step:K,largeStep:M,smallStep:P,snapOnStep:A,wheel:H=!0,format:J,locale:Q,steppers:T="end",incrementLabel:U,decrementLabel:X,label:Y,description:Z,error:ee,invalid:te,startIcon:ae,endIcon:ne,fullWidth:le=!1,disabled:re,readOnly:ie=!1,required:se=!1,name:oe,placeholder:ce,id:de,className:me,classNames:ue,shortcuts:pe,style:fe,"aria-label":be,"aria-labelledby":he,...ge}=V(a,["size","density","variant","locale"]),xe=O(re),ve=!xe&&!ie,Ne=i(r,"string"==typeof Q?Q:void 0),ye=v(ee),je=te??ye,we=je?"danger":S,ke=j[L][N],_e={end:`${ke} pe-1`,split:"px-1",none:ke},Se=e(n.Decrement,{"aria-label":X??Ne.decrease,className:m(F,ue?.stepper),children:e(s,{})}),Ve=e(n.Increment,{"aria-label":U??Ne.increase,className:m(F,ue?.stepper),children:e(o,{})}),ze="none"!==T&&!ie;return t(l.Root,{disabled:xe,invalid:je,className:m("flex-col align-top",k[N],le?"flex w-full":"inline-flex",me??""),style:{..._(we,R),...ve?z:void 0,...fe},...ge,children:[Y?e(l.Label,{className:m(y[N],"font-medium",xe?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ue?.label),children:Y}):null,e(n.Root,{id:de,name:oe,className:"contents",value:$,defaultValue:q,onValueChange:e=>W?.(e),onValueCommitted:e=>B?.(e),min:E,max:G,step:K,largeStep:M,smallStep:P,snapOnStep:A,allowWheelScrub:H,format:J,locale:Q,disabled:xe,readOnly:ie,required:se,children:t(n.Group,{onPointerMove:I(void 0,ve),className:m(D,f[N],d[N],w[N],x[N],ze?_e[T]:ke,xe?u[g]:ie?b[g]:`${h[g]} ${C}`,xe?"":"cursor-text",ue?.shell),children:[ze&&"split"===T?Se:null,ae?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ae}):null,e(n.Input,{ref:p,"aria-label":be,"aria-labelledby":he,onKeyDown:c(pe),placeholder:ce,className:["neba-input min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===T&&ze?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ue?.control].filter(Boolean).join(" ")}),ne?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ne}):null,ze&&"end"===T?t("span",{className:"flex shrink-0 items-center gap-0.5",style:{"--n-hit-gap":"0.125rem"},children:[Se,Ve]}):null,ze&&"split"===T?Ve:null]})}),Z?e(l.Description,{className:m(y[N],"text-(--neba-muted-fg)",ue?.description),children:Z}):null,e(l.Error,ye?{match:!0,className:m(y[N],"text-(--n-accent)",ue?.error),children:ee}:{className:m(y[N],"text-(--n-accent)",ue?.error)})]})});

package/dist/components/otp-field/OtpField.d.ts

@@ -67,6 +67,13 @@ export interface OtpFieldProps extends NebaStyleProps, Omit<React.ComponentProps
     readOnly?: boolean;
     /** Puts the caret in the first slot on mount. @default false */
     autoFocus?: boolean;
+    /**
+     * Which language the slots are named in — a BCP 47 tag. The first slot takes
+     * `label`; every other is "Character 2 of 6" in the `locale`'s words.
+     */
+    locale?: string;
+    /** Names a slot after the first, by its position. Overrides the `locale`'s words. */
+    slotLabel?: (index: number, total: number) => string;
 }
 /**
  * A row of one-character slots: a PIN, a texted verification code, an invite

package/dist/components/otp-field/OtpField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as i,fieldReadOnlyClasses as o,fieldRestClasses as s,metaTextClasses as m,stackGapClasses as d,surfaceSlots as u,transitionClasses as c}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function(v,y){const{variant:N="outline",size:V="md",color:w="primary",density:j="default",elevation:C=0,length:F=6,charset:M="numeric",mask:_=!1,groupSize:z,separator:I="–",value:O,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:A=!1,label:D,description:E,error:L,invalid:T,name:B,required:G=!1,disabled:H=!1,readOnly:J=!1,autoFocus:K=!1,className:P,style:Q,...U}=p(v,["size","density","variant"]),W=Math.min(12,Math.max(2,Math.round(F))),X=null!=L&&!1!==L&&""!==L,Y=T??X,Z=Y?"danger":w,$=r("text-center font-medium [font-family:inherit]",f[V],g[V],x[V],c,"caret-(--n-accent) selection:bg-(--n-soft-press)","[outline:0_solid_var(--n-ring)] outline-offset-0 focus:[outline:2px_solid_var(--n-ring)]","focus:[transition-duration:var(--neba-duration)]",H?i[N]:J?o[N]:s[N]),ee=z&&z>0?Math.round(z):0;return a(n.Root,{disabled:H,invalid:Y,className:r("inline-flex flex-col align-top",d[V],P),style:{...u(Z,C),...Q},children:[D?e(n.Label,{className:r(m[V],"font-medium",H?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:D}):null,e(l.Root,{ref:y,length:W,validationType:b[M],mask:_,name:B,required:G,disabled:H,readOnly:J,autoSubmit:A,value:O,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:r("flex items-center",h[j][V]),...U,children:Array.from({length:W},(n,i)=>a(t.Fragment,{children:[ee>0&&i>0&&i%ee===0?e("span",{"aria-hidden":"true",className:r("select-none px-0.5 text-(--neba-muted-fg)",g[V]),children:I}):null,e(l.Input,{className:$,autoFocus:K&&0===i})]},i))}),E?e(n.Description,{className:r(m[V],"text-(--neba-muted-fg)"),children:E}):null,e(n.Error,X?{match:!0,className:r(m[V],"text-(--n-accent)"),children:L}:{className:r(m[V],"text-(--n-accent)")})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{fillMessage as r,otpMessages as i,useMessages as o}from"../../internal/i18n.js";import{cx as s,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as u,metaTextClasses as c,ringRestClasses as p,stackGapClasses as f,surfaceSlots as x,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";import{useFieldsetDisabled as b}from"../../internal/fieldset.js";const v={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},y={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},N={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},V={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function OtpField(w,F){const{variant:S="outline",size:C="md",color:M="primary",density:O="default",elevation:z=0,length:I=6,charset:R="numeric",mask:k=!1,groupSize:q,separator:L="–",value:_,defaultValue:A,onValueChange:D,onComplete:E,onValueInvalid:T,autoSubmit:$=!1,label:B,description:G,error:H,invalid:J,name:K,required:P=!1,disabled:Q,readOnly:U=!1,autoFocus:W=!1,locale:X,slotLabel:Y,className:Z,style:ee,...ae}=h(w,["size","density","variant","locale"]),te=b(Q),ne=o(i,X),le=Y??((e,a)=>r(ne.slot,{index:String(e),total:String(a)})),re=Math.min(12,Math.max(2,Math.round(I))),ie=null!=H&&!1!==H&&""!==H,oe=J??ie,se=oe?"danger":M,me=s("text-center font-medium [font-family:inherit]","xs"===C||"sm"===C?"neba-input":"",v[C],N[C],y[C],g,"caret-(--n-accent) selection:bg-(--n-soft-press)",`${p} outline-offset-0 focus:[outline:2px_solid_var(--n-ring)]`,"focus:[transition-duration:var(--neba-duration)]",te?m[S]:U?d[S]:u[S]),de=q&&q>0?Math.round(q):0;return a(n.Root,{disabled:te,invalid:oe,className:s("inline-flex flex-col align-top",f[C],Z),style:{...x(se,z),...ee},children:[B?e(n.Label,{className:s(c[C],"font-medium",te?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:B}):null,e(l.Root,{ref:F,length:re,validationType:V[R],mask:k,name:K,required:P,disabled:te,readOnly:U,autoSubmit:$,value:_,defaultValue:A,onValueChange:e=>D?.(e),onValueComplete:e=>E?.(e),onValueInvalid:e=>T?.(e),className:s("flex items-center",j[O][C]),...ae,children:Array.from({length:re},(n,r)=>a(t.Fragment,{children:[de>0&&r>0&&r%de===0?e("span",{"aria-hidden":"true",className:s("select-none px-0.5 text-(--neba-muted-fg)",N[C]),children:L}):null,e(l.Input,{className:me,autoFocus:W&&0===r,"aria-label":0===r?void 0:le(r+1,re)})]},r))}),G?e(n.Description,{className:s(c[C],"text-(--neba-muted-fg)"),children:G}):null,e(n.Error,ie?{match:!0,className:s(c[C],"text-(--n-accent)"),children:H}:{className:s(c[C],"text-(--n-accent)")})]})});

package/dist/components/overlay/Overlay.d.ts

@@ -68,7 +68,7 @@ export interface OverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     /**
      * The accessible name of the overlay. An overlay that holds nothing readable
      * — a bare spinner, a `clear` sheet — still has to say what it is, so this
-     * falls back to the `locale`'s word for it rather than to nothing.
+     * falls back to the `locale`'s word for "Loading" rather than to nothing.
      */
     label?: string;
     /** What sits on top of the scrim — a spinner, a line of text, a small card. */

package/dist/components/overlay/Overlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{overlayMessages as r,useMessages as n}from"../../internal/i18n.js";import{cx as s,popupFadeClasses as t,surfaceSlots as i}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const c={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},m={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"};export function Overlay(d){const{open:b,defaultOpen:f,onOpenChange:u,tone:x="scrim",dismissible:g=!1,modal:j=!0,align:h="center",size:y="md",color:k="primary",locale:z,label:O,className:N,style:P,children:_,...v}=o(d,["size","locale"]),w=n(r,z);return e(l.Root,{open:b,defaultOpen:f,modal:j,disablePointerDismissal:!g,onOpenChange:(e,a)=>{g||e||"escape-key"!==a.reason?u?.(e):a.cancel()},children:a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal fixed inset-0 z-(--neba-z-portal) ${t} ${c[x]}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-(--neba-z-portal) flex justify-center",m[h],p[y]].join(" "),children:e(l.Popup,{"aria-label":O??w.label,className:s("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",t,N??""),style:{...i(k,0),...P},...v,children:_})})]})})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as n}from"@base-ui/react/dialog";import{overlayMessages as r,useMessages as l}from"../../internal/i18n.js";import{cx as t,popupFadeClasses as s,surfaceSlots as o}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const c={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},p={start:"items-start",center:"items-center",end:"items-end"},m={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"};export function Overlay(d){const{open:b,defaultOpen:f,onOpenChange:u,tone:x="scrim",dismissible:g=!1,modal:j=!0,align:h="center",size:y="md",color:k="primary",locale:z,label:v,className:O,style:N,children:P,..._}=i(d,["size","locale"]),w=l(r,z);return e(n.Root,{open:b,defaultOpen:f,modal:j,disablePointerDismissal:!g,onOpenChange:(e,a)=>{g||e||"escape-key"!==a.reason?u?.(e):a.cancel()},children:a(n.Portal,{children:[e(n.Backdrop,{className:t("neba-portal fixed inset-0 z-(--neba-z-portal)",s,c[x],!0===j?"":"pointer-events-none")}),e(n.Viewport,{className:["neba-portal fixed inset-0 z-(--neba-z-portal) flex justify-center",p[h],m[y],!0===j?"":"pointer-events-none"].join(" "),children:e(n.Popup,{"aria-label":v??w.label,className:t("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",!0===j?"":"pointer-events-auto",s,O??""),style:{...o(k,0),...N},..._,children:P})})]})})}

package/dist/components/page-layout/PageLayout.d.ts

@@ -99,6 +99,17 @@ export interface PageLayoutProps extends React.ComponentPropsWithoutRef<'div'> {
     skipLink?: boolean;
     /** What that link says. Defaults to the `locale`'s word for it. */
     skipLabel?: string;
+    /**
+     * Whether the content goes in a `<main>` named by `mainId`, with the skip
+     * link in front of it.
+     *
+     * A document has one `<main>` and one element for each `id`, so a layout that
+     * is not the page — a preview of an app shell inside the page's own layout —
+     * turns it off, and the content goes in a plain `<div>` with no skip link. A
+     * layout on a [Mockup]'s screen is off unless it says otherwise.
+     * @default true
+     */
+    main?: boolean;
     /**
      * The `id` the skip link jumps to, put on the `<main>`.
      * @default 'main'

package/dist/components/page-layout/PageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as a}from"../../internal/page-layout.js";import{observeResize as s}from"../../internal/observe.js";import{controlSlots as i,cx as u,hasContent as f,toLength as c}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const p=["header","footer"];export const PageLayout=/*@__PURE__*/o.forwardRef(function(m,h){const{header:v,footer:x,sidebar:y,endSidebar:b,headerSpan:g="full",footerSpan:w="full",scroll:S="page",height:k="viewport",collapseBelow:C="md",sidebarOpen:P,defaultSidebarOpen:j=!1,onSidebarOpenChange:N,endSidebarOpen:O,defaultEndSidebarOpen:$=!1,onEndSidebarOpenChange:R,skipLink:z=!0,skipLabel:E,mainId:L="main",mainProps:B,locale:H,color:M="primary",className:_,style:I,children:T,...q}=d(m,["locale"]),A=t(n,H),[D,F]=o.useState(j),[G,J]=o.useState($),K=o.useMemo(()=>({start:P??D,end:O??G}),[P,D,O,G]),Q=o.useCallback((e,l)=>{if("start"===e)return void 0===P&&F(l),void N?.(l);void 0===O&&J(l),R?.(l)},[P,O,N,R]),U=o.useRef(null),V=o.useCallback(e=>{U.current=e,"function"==typeof h?h(e):h&&(h.current=e)},[h]),W=o.useRef({header:null,footer:null}),X=o.useRef({header:null,footer:null}),Y=o.useCallback(()=>{const e=U.current;if(e)for(const l of p){const o=W.current[l],n="header"===l?g:w;if(!o){e.style.setProperty(`--n-layout-${l}`,"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"0px");continue}const t=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${l}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"fixed"===t?r:"0px")}},[g,w]),Z=o.useCallback(()=>{for(const e of p){X.current[e]?.();const l=W.current[e];X.current[e]=l?s(l,()=>Y()):null}Y()},[Y]);o.useEffect(()=>{const e=X.current;return Z(),()=>{for(const l of p)e[l]?.(),e[l]=null}},[Z]);const ee=o.useCallback((e,l)=>{W.current[e]=l,Z()},[Z]),le=o.useMemo(()=>({present:!0,register:ee,collapseBelow:C,open:K,setOpen:Q,scroll:S,locale:H}),[ee,C,K,Q,S,H]),oe="content"===S,ne=c("viewport"===k||"auto"===k?void 0:k),te=void 0!==ne?"":"auto"===k?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=f(v)?v:null,ae=f(x)?x:null;return e(r.Provider,{value:le,children:l("div",{ref:V,className:u("relative flex w-full flex-col",oe?"overflow-hidden":"",te,"full"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",_),style:void 0===ne?I:{...oe?{height:ne}:{minHeight:ne},...I},...q,children:[z?e("a",{href:`#${L}`,className:u("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:i(M,2,"solid"),children:E??A.skipToContent}):null,"full"===g?re:null,l("div",{className:u("flex w-full flex-1",oe?"min-h-0":""),children:[f(y)?e(a.Provider,{value:"start",children:y}):null,l("div",{className:u("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===g?re:null,e("main",{...B,id:L,className:u("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",B?.className),children:T}),"content"===w?ae:null]}),f(b)?e(a.Provider,{value:"end",children:b}):null]}),"full"===w?ae:null]})})});
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as l from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as a,PageLayoutSlotContext as s}from"../../internal/page-layout.js";import{observeResize as i}from"../../internal/observe.js";import{controlSlots as u,cx as c,hasContent as d,toLength as f}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";import{ScreenContext as m}from"../../internal/screen.js";const h=["header","footer"];export const PageLayout=/*@__PURE__*/l.forwardRef(function PageLayout(v,x){const{header:y,footer:b,sidebar:w,endSidebar:g,headerSpan:P="full",footerSpan:S="full",scroll:k="page",height:C="viewport",collapseBelow:j="md",sidebarOpen:N,defaultSidebarOpen:O=!1,onSidebarOpenChange:$,endSidebarOpen:L,defaultEndSidebarOpen:R=!1,onEndSidebarOpenChange:z,skipLink:E=!0,skipLabel:B,main:H,mainId:M="main",mainProps:_,locale:I,color:T="primary",className:q,style:A,children:D,...F}=p(v,["locale"]),G=t(n,I),J=l.useContext(m),K=H??!J,[Q,U]=l.useState(O),[V,W]=l.useState(R),X=l.useMemo(()=>({start:N??Q,end:L??V}),[N,Q,L,V]),Y=l.useCallback((e,o)=>{if("start"===e)return void 0===N&&U(o),void $?.(o);void 0===L&&W(o),z?.(o)},[N,L,$,z]),Z=l.useRef(null),ee=l.useCallback(e=>{Z.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),oe=l.useRef({header:null,footer:null}),le=l.useRef({header:null,footer:null}),ne=l.useCallback(()=>{const e=Z.current;if(e)for(const o of h){const l=oe.current[o],n="header"===o?P:S;if(!l){e.style.setProperty(`--n-layout-${o}`,"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"0px");continue}const t=getComputedStyle(l).position,r=`${l.offsetHeight}px`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${o}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"fixed"===t?r:"0px")}},[P,S]),te=l.useCallback(()=>{for(const e of h){le.current[e]?.();const o=oe.current[e];le.current[e]=o?i(o,()=>ne()):null}ne()},[ne]);l.useEffect(()=>{const e=le.current;return te(),()=>{for(const o of h)e[o]?.(),e[o]=null}},[te]);const re=l.useCallback((e,o)=>{oe.current[e]=o,te()},[te]),ae=l.useMemo(()=>({present:!0,register:re,collapseBelow:j,open:X,setOpen:Y,scroll:k,locale:I}),[re,j,X,Y,k,I]),se="content"===k,ie=f("viewport"===C||"auto"===C?void 0:C),ue=void 0!==ie?"":"auto"===C?se?"h-full":"min-h-full":se?"h-dvh":"min-h-dvh",ce=d(y)?e(s.Provider,{value:"header",children:y}):null,de=d(b)?e(s.Provider,{value:"footer",children:b}):null;return e(r.Provider,{value:ae,children:o("div",{ref:ee,className:c("relative flex w-full flex-col",se?"overflow-hidden":"",ue,"full"===P?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===S?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",q),style:void 0===ie?A:{...se?{height:ie}:{minHeight:ie},...A},...F,children:[E&&K?e("a",{href:`#${M}`,className:c("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:u(T,2,"solid"),children:B??G.skipToContent}):null,"full"===P?ce:null,o("div",{className:c("flex w-full flex-1",se?"min-h-0":""),children:[d(w)?e(a.Provider,{value:"start",children:w}):null,o("div",{className:c("flex min-w-0 flex-1 flex-col",se?"min-h-0":"","content"===P?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===S?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===P?ce:null,K?e("main",{..._,id:M,className:c("min-w-0 flex-1",se?"min-h-0 overflow-y-auto":"",_?.className),children:D}):e("div",{..._,className:c("min-w-0 flex-1",se?"min-h-0 overflow-y-auto":"",_?.className),children:D}),"content"===S?de:null]}),d(g)?e(a.Provider,{value:"end",children:g}):null]}),"full"===S?de:null]})})});

package/dist/components/pagination/Pagination.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{fillMessage as r,paginationMessages as l,useMessages as i}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as o,cx as m,gapClasses as c,srOnlyClasses as u}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";function h(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function f(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function(x,g){const{variant:b="text",size:v="md",color:y="primary",density:M="compact",elevation:j=0,count:w,page:N,defaultPage:L=1,onPageChange:k,siblingCount:C=1,boundaryCount:z=1,showEdges:K=!1,showArrows:P=!0,disabled:S=!1,getPageHref:$,locale:A,label:B,pageLabel:D,previousLabel:E,nextLabel:H,firstLabel:I,lastLabel:R,className:W,children:q,...F}=d(x,["size","density","variant","locale"]),G=i(l,A),J=D??(e=>r(G.page,{page:String(e)})),[O,Q]=a.useState(L),T=Math.min(Math.max(N??O,1),Math.max(w,1));if(w<2)return null;const U=function(e,t,a,n){const r=h(1,Math.min(n,e)),l=h(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),s=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...h(i,s),...s<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(w,T,C,z),V=T<=1,X=T>=w,Y=(t,a,n)=>$&&!a?{render:e("a",{href:$(t),rel:n})}:null,Z=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!k||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),w);t!==T&&(void 0===N&&Q(t),k?.(t))})(t))},_=(t,a,r,l,i,s,o)=>e("li",{className:"flex",children:e(n,{variant:b,size:v,color:y,density:M,elevation:j,disabled:S||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:s}),onClick:e=>Z(e,r),...Y(r,S||l,o)})},t);return t("nav",{ref:g,"aria-label":B??G.label,className:m("flex items-center",W??""),...F,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${c[v]}`,children:[K?_("first",I??G.first,1,V,"rotate-180 rtl:rotate-0",e(f,{})):null,P?_("previous",E??G.previous,T-1,V,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,U.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===T?"solid":b,size:v,color:y,density:M,elevation:j,disabled:S,"aria-label":J(t),"aria-current":t===T?"page":void 0,className:"tabular-nums",onClick:e=>Z(e,t),...Y(t,S||t===T),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",o[v],p[v]].join(" "),children:"…"},`slot-${a}`)),P?_("next",H??G.next,T+1,X,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,K?_("last",R??G.last,w,X,"rtl:rotate-180",e(f,{})):null]}),e("span",{className:u,"aria-live":"polite",children:r(G.status,{page:String(T),total:String(w)})}),q]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{safeHref as n}from"../../internal/link.js";import{Button as r}from"../button/Button.js";import{fillMessage as l,paginationMessages as i,useMessages as o}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as m,cx as c,gapClasses as u,srOnlyClasses as d}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";function f(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function Pagination(x,b){const{variant:g="text",size:v="md",color:y="primary",density:M="compact",elevation:j=0,count:w,page:C,defaultPage:N=1,onPageChange:k,siblingCount:L=1,boundaryCount:D=1,showEdges:I=!1,showArrows:P=!0,disabled:z=!1,getPageHref:K,locale:S,label:$,pageLabel:A,previousLabel:B,nextLabel:W,firstLabel:E,lastLabel:H,className:R,children:q,...F}=h(x,["size","density","variant","locale"]),G=o(i,S),J=A??(e=>l(G.page,{page:String(e)})),[O,Q]=a.useState(N),T=Math.min(Math.max(C??O,1),Math.max(w,1));if(w<2)return null;const U=function(e,t,a,n){const r=f(1,Math.min(n,e)),l=f(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...f(i,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(w,T,L,D),V=T<=1,X=T>=w,Y=(t,a,r)=>!K||z?null:a?{render:e("a",{role:"link","aria-disabled":"true",tabIndex:0})}:{render:e("a",{href:n(K(t)),rel:r})},Z=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||K&&!k||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),w);t!==T&&(void 0===C&&Q(t),k?.(t))})(t))},_=(t,a,n,l,i,o,s)=>e("li",{className:"flex",children:e(r,{variant:g,size:v,color:y,density:M,elevation:j,disabled:z||l,focusableWhenDisabled:!z,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>Z(e,n),...Y(n,l,s)})},t);return t("nav",{ref:b,"aria-label":$??G.label,className:c("flex items-center",R??""),...F,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${u[v]}`,children:[I?_("first",E??G.first,1,V,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,P?_("previous",B??G.previous,T-1,V,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,U.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(r,{variant:t===T?"solid":g,size:v,color:y,density:M,elevation:j,disabled:z,"aria-label":J(t),"aria-current":t===T?"page":void 0,className:"tabular-nums",onClick:e=>Z(e,t),...Y(t,t===T),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",m[v],p[v]].join(" "),children:"…"},`slot-${a}`)),P?_("next",W??G.next,T+1,X,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,I?_("last",H??G.last,w,X,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:d,"aria-live":"polite",children:l(G.status,{page:String(T),total:String(w)})}),q]})});

package/dist/components/panes/Panes.d.ts

@@ -32,6 +32,17 @@ export interface PanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     onResize?: (sizes: number[]) => void;
     /** Fires once, with the same shape, when the handle is let go. */
     onResizeEnd?: (sizes: number[]) => void;
+    /**
+     * Names each handle. A string names them all; a function is handed the
+     * handle's index, from 0, for a split of more than two panes where each handle
+     * wants a name of its own. Defaults to the `locale`'s words for resizing panes.
+     */
+    handleLabel?: string | ((index: number) => string);
+    /**
+     * Which language the handle's default name is in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`.
+     */
+    locale?: string;
     /** The Panes. Anything that is not a Pane is still laid out, but has no size. */
     children?: React.ReactNode;
 }

package/dist/components/panes/Panes.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const c=/*@__PURE__*/t.createContext({basis:null}),u={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},f={xs:4,sm:6,md:8,lg:10,xl:12};function m(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function(a,d){const{orientation:h="horizontal",resizable:p=!0,color:g="primary",size:x="md",onResize:v,onResizeEnd:b,className:z,style:w,children:y,...R}=s(a,["size"]),M=t.Children.toArray(y).filter(t.isValidElement),S=M.length,j=t.useRef(null),C=t.useCallback(e=>{j.current=e,"function"==typeof d?d(e):d&&(d.current=e)},[d]),k=t.useRef([]);k.current=M.map(e=>e.props);const[E,N]=t.useState(null),$=E&&E.length===S?E:null,A=t.useRef(null);t.useEffect(()=>{A.current=$});const D="horizontal"===h,P=f[x]*Math.max(0,S-1);function I(e){const n=j.current,t=A.current;if(!p||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(D?r.width:r.height)-P;if(i<=0)return null;const o=k.current[e],a=k.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(m(o?.minSize,i,n)??0,s-(m(a?.maxSize,i,n)??s)),u=Math.min(m(o?.maxSize,i,n)??s,s-(m(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,N(o),v?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=j.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(D?n.width:n.height)-P;t<=0||N(n=>n&&n.length===S?n:function(e,n,t){const r=e.map(e=>m(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(k.current,t,e))};return n(),i(e,n)},[S,D,P]);const B=t.useRef(null);t.useEffect(()=>()=>B.current?.(),[]);const F=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",u[x],l,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",p?o(D?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:C,className:o("flex h-full w-full",D?"flex-row":"flex-col","min-h-0 min-w-0",z),style:{"--n-accent":`var(--neba-${g}-accent)`,"--n-soft":`var(--neba-${g}-soft)`,"--n-ring":`var(--neba-${g}-ring)`,...w},...R,children:M.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":D?"vertical":"horizontal","aria-valuenow":$?Math.round(100*$[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!p||void 0,tabIndex:p?0:-1,className:F,onPointerDown:e=>{0===e.button&&function(e,n){const t=I(e);if(!t)return;const i=n.currentTarget,o=D?n.clientX:n.clientY,a=D&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;B.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=D?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{B.current=null,b?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=D?"ArrowLeft":"ArrowUp",t=D?"ArrowRight":"ArrowDown";e.key!==n&&e.key!==t||(e.preventDefault(),function(e,n){const t=I(e);if(!t)return;const r=t.resize(n);b?.(r.map(e=>100*e))}(a-1,e.key===t?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,D?"h-full w-px":"h-px w-full",p?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(c.Provider,{value:{basis:$?`calc((100% - ${P}px) * ${$[a].toFixed(6)})`:null},children:i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:s,...u},f){const{basis:m}=t.useContext(c);return e("div",{ref:f,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:s})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";import{panesMessages as c,useMessages as u}from"../../internal/i18n.js";const f=/*@__PURE__*/t.createContext({basis:null}),d={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},m={xs:4,sm:6,md:8,lg:10,xl:12};function h(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function Panes(a,p){const{orientation:g="horizontal",resizable:x=!0,color:b="primary",size:v="md",onResize:w,onResizeEnd:z,handleLabel:y,locale:R,className:S,style:M,children:$,...j}=s(a,["size","locale"]),C=t.Children.toArray($).filter(t.isValidElement),A=C.length,E=u(c,R),k=t.useId(),N=e=>C[e]?.props.id??`${k}-pane-${e}`,P=t.useRef(null),D=t.useCallback(e=>{P.current=e,"function"==typeof p?p(e):p&&(p.current=e)},[p]),I=t.useRef([]);I.current=C.map(e=>e.props);const[L,T]=t.useState(null),B=L&&L.length===A?L:null,F=t.useRef(null);t.useEffect(()=>{F.current=B});const X="horizontal"===g,Y=m[v]*Math.max(0,A-1);function _(e){const n=P.current,t=F.current;if(!x||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(X?r.width:r.height)-Y;if(i<=0)return null;const o=I.current[e],a=I.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(h(o?.minSize,i,n)??0,s-(h(a?.maxSize,i,n)??s)),u=Math.min(h(o?.maxSize,i,n)??s,s-(h(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,T(o),w?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=P.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(X?n.width:n.height)-Y;t<=0||T(n=>n&&n.length===A?n:function(e,n,t){const r=e.map(e=>h(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(I.current,t,e))};return n(),i(e,n)},[A,X,Y]);const K=t.useRef(null);t.useEffect(()=>()=>K.current?.(),[]);const O=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",d[v],l,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",x?o(X?"cursor-col-resize":"cursor-row-resize","neba-hit","touch-none","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:D,className:o("flex h-full w-full",X?"flex-row":"flex-col","min-h-0 min-w-0",S),style:{"--n-accent":`var(--neba-${b}-accent)`,"--n-soft":`var(--neba-${b}-soft)`,"--n-ring":`var(--neba-${b}-ring)`,...M},...j,children:C.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-label":"function"==typeof y?y(a-1):y??E.handle,"aria-controls":`${N(a-1)} ${N(a)}`,"aria-orientation":X?"vertical":"horizontal","aria-valuenow":B?Math.round(100*B[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!x||void 0,tabIndex:x?0:-1,className:O,onPointerDown:e=>{0===e.button&&function(e,n){const t=_(e);if(!t)return;const i=n.currentTarget,o=X?n.clientX:n.clientY,a=X&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;K.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=X?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{K.current=null,z?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=X&&"rtl"===getComputedStyle(e.currentTarget).direction,t=X?n?"ArrowRight":"ArrowLeft":"ArrowUp",r=X?n?"ArrowLeft":"ArrowRight":"ArrowDown";e.key!==t&&e.key!==r||(e.preventDefault(),function(e,n){const t=_(e);if(!t)return;const r=t.resize(n);z?.(r.map(e=>100*e))}(a-1,e.key===r?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,X?"h-full w-px":"h-px w-full",x?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(f.Provider,{value:{basis:B?`calc((100% - ${Y}px) * ${B[a].toFixed(6)})`:null},children:void 0===i.props.id?t.cloneElement(i,{id:N(a)}):i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function Pane({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:s,...c},u){const{basis:d}=t.useContext(f);return e("div",{ref:u,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:d?`0 0 ${d}`:"1 1 0%",...l},...c,children:s})});

package/dist/components/pie-chart/PieChart.d.ts

@@ -50,9 +50,11 @@ export interface PieChartProps extends ChartBaseProps {
  * a poor thing to compare — two slices within a few percent of each other are
  * indistinguishable, and a reader cannot rank six of them — so the pie is right
  * for exactly one question: *is one of these most of it?* Anything finer than
- * that, and anything past six slices, is a [BarChart](./bar-chart).
+ * that, and anything past six slices, is a [BarChart](./bar-chart); a pie of
+ * two slices is a [Statistic](./statistic).
  *
- * A slice's colour follows the slice and not its size, so a chart that is
- * refiltered or resorted keeps every category the colour it had.
+ * A slice's colour follows its place in `data`, so a filter that drops one
+ * moves every slice after it onto the next colour; a point's own `color`
+ * holds it.
  */
 export declare function PieChart(rawProps: PieChartProps): React.JSX.Element;

package/dist/components/pie-chart/PieChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as l,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,formatCategory as f,markGap as p,plotHeights as x,seriesColor as b,toValue as g}from"../../internal/chart.js";import{numberFormatter as y}from"../../internal/format.js";import{cx as M,metaTextClasses as j}from"../../internal/styles.js";import{chartMessages as N,emptyMessages as w,useMessages as z}from"../../internal/i18n.js";import{useStyleDefaults as I}from"../../internal/defaults.js";const P={pie:0,donut:.62,semi:.62};export function PieChart(k){const{data:A,categories:$,shape:L="pie",startAngle:S=0,center:B,valueLabels:E="none",height:R,format:C,locale:D,label:O,legend:_,tooltip:K,empty:V,size:W="md",variant:q="text",padded:F=!1,className:G,...H}=I(k,["size","variant","locale"]),J=a.useRef(null),Q=d(J),T=z(w,D),U=z(N,D),X=a.useId(),Y=a.useCallback(e=>C?y(D,C).format(e):v(e,D),[C,D]),Z=a.useMemo(()=>A.map(g),[A]),ee=a.useMemo(()=>Z.map((e,t)=>({name:f(c(t,$,[Z]),D),data:[A[t]],color:e.color})),[Z,$,A,D]),te=u(ee),[ae,le]=a.useState(null),ne=ee.map((e,t)=>b(e,t)),ie=Z.reduce((e,t,a)=>te.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),re="semi"===L,se="number"==typeof R?R:x[W],oe=h[W],de=!1===_?{interactive:!1}:!0===_||void 0===_?{}:_,ue=!1!==_&&ee.length>1,me=de.side??"bottom",ce=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,he="none"===ce.mode,ve=Q/2,fe=Math.max(0,Math.min(Q/2,re?se:se/2)-2),pe=re?Math.min(se,se/2+fe/2):se/2,xe=fe*P[L],be=ie<=0||fe<=0,ge=fe>0?Math.min(4,p/fe*(180/Math.PI)):0,ye=re?180:360,Me=[];let je=re?-90:S;Z.forEach((e,t)=>{if(!te.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/ie,l=a*ye;Me.push({index:t,start:je,end:je+l,value:e.value,share:a}),je+=l});const Ne=null===ae?[]:[{seriesIndex:ae,name:ee[ae]?.name,color:Z[ae]?.color??ne[ae],value:Z[ae]?.value??null,formatted:`${Y(Z[ae]?.value??0)} · ${Math.round(10*(Math.abs(Z[ae]?.value??0)/ie*100+Number.EPSILON))/10}%`,label:Z[ae]?.label}];return t(r,{...H,size:W,variant:q,padded:F,className:G,legendSide:me,legend:ue?e(n,{series:ee,colors:ne,options:de,visibility:te,size:W,values:de.showValue?Z.map(e=>null===e.value?void 0:Y(e.value)):void 0}):null,table:be?null:e(l,{id:X,caption:O,categories:ee.map(e=>e.name??""),series:[{name:O,data:A}],values:[Z],format:Y,locale:D}),children:[t("div",{ref:J,role:"img",tabIndex:be?void 0:0,"aria-label":O??U.label,"aria-describedby":be?void 0:X,onPointerLeave:()=>le(null),onBlur:()=>le(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=Me.map(e=>e.index);if(0===t.length)return;const a=null===ae?-1:t.indexOf(ae),l="ArrowRight"===e.key?a+1:a-1;le(t[(l+t.length)%t.length]),e.preventDefault()},className:M("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:se},children:[be?e("div",{className:M("flex h-full items-center justify-center text-(--neba-muted-fg)",j[W]),children:V??T.title}):Q>0?t("svg",{width:Q,height:se,viewBox:`0 0 ${Q} ${se}`,"aria-hidden":"true",className:"block",children:[Me.map(t=>{const a=null!==te.hovered&&te.hovered!==t.index||null!==ae&&ae!==t.index,l=t.end-t.start>2*ge?ge/2:0;return e("path",{d:m(ve,pe,fe,xe,t.start+l,t.end-l),fill:Z[t.index].color??ne[t.index],opacity:a?.32:1,onPointerEnter:he?void 0:()=>le(t.index),className:o},t.index)}),"all"===E?Me.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),l=xe>0?(xe+fe)/2:.68*fe,n=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*l<2*oe||fe-xe<1.6*oe?null:e("text",{x:ve+l*Math.cos(a),y:pe+l*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:oe,fontWeight:600,fill:"var(--neba-surface)",className:"tabular-nums",children:n},t.index)}):null]}):null,B&&xe>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:ve-xe,top:pe-xe,width:2*xe,height:re?xe:2*xe},children:B}):null,null===ae||he?null:ce.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:ce.render({index:ae,category:ee[ae]?.name??ae,items:Ne})}):e(s,{heading:ee[ae]?.name,items:Ne,x:ve,y:8,flip:!1,size:W})]}),he?null:e(i,{heading:null===ae?void 0:ee[ae]?.name,items:Ne})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartDataTable as n,ChartLegendBar as a,ChartStatus as i,ChartSummary as r,ChartSurface as o,ChartTooltipPanel as s,markTransitionClasses as u,summarise as d,useMeasuredWidth as m,useReleaseOutside as c,useVisibility as h,chartHeight as f,useMeasuredHeight as v}from"../../internal/chart-frame.js";import{arcPath as p,categoryAt as x,chartFontSizes as g,compactNumber as b,formatCategory as y,inkOn as M,markGap as j,seriesColor as N,toValue as w,warnPaletteOverflow as k}from"../../internal/chart.js";import{numberFormatter as I}from"../../internal/format.js";import{cx as z,metaTextClasses as P}from"../../internal/styles.js";import{chartMessages as E,emptyMessages as A,useMessages as $}from"../../internal/i18n.js";import{useStyleDefaults as L}from"../../internal/defaults.js";const S={pie:0,donut:.62,semi:.62};export function PieChart(B){const{data:R,categories:C,shape:D="pie",startAngle:O=0,center:_,valueLabels:H="none",height:K,format:T,locale:V,label:W,legend:q,tooltip:F,empty:G,size:J="md",variant:Q="text",padded:U=!1,className:X,...Y}=L(B,["size","variant","locale"]),Z=t.useRef(null),ee=m(Z),le=$(A,V),te=$(E,V),ne=t.useId(),ae=t.useCallback(e=>T?I(V,T).format(e):b(e,V),[T,V]),ie=t.useMemo(()=>R.map(w),[R]),re=t.useMemo(()=>ie.map((e,l)=>({name:y(x(l,C,[ie]),V),data:[R[l]],color:e.color})),[ie,C,R,V]),oe=h(re);t.useEffect(()=>{k(re.length)},[re.length]);const[se,ue]=t.useState(null);c(Z,null!==se,()=>ue(null));const de=t.useId(),me=re.map((e,l)=>N(e,l)),ce=ie.reduce((e,l,t)=>oe.visible[t]&&null!==l.value?e+Math.max(0,l.value):e,0),he="semi"===D,fe=v(Z,"string"==typeof K),ve=f(K,J,fe),pe=g[J],xe=!1===q?{interactive:!1}:!0===q||void 0===q?{}:q,ge=!1!==q&&re.length>1,be=xe.side??"bottom",ye=!1===F?{mode:"none"}:!0===F||void 0===F?{}:F,Me="none"===ye.mode,je=ee/2,Ne=Math.max(0,Math.min(ee/2,he?ve:ve/2)-2),we=he?Math.min(ve,ve/2+Ne/2):ve/2,ke=Ne*S[D],Ie=ce<=0||Ne<=0,ze=Ne>0?Math.min(4,j/Ne*(180/Math.PI)):0,Pe=he?180:360,Ee=[];let Ae=he?-90:O;ie.forEach((e,l)=>{if(!oe.visible[l]||null===e.value||e.value<=0)return;const t=e.value/ce,n=t*Pe;Ee.push({index:l,start:Ae,end:Ae+n,value:e.value,share:t}),Ae+=n});const $e=null===se?[]:[{seriesIndex:se,name:re[se]?.name,color:ie[se]?.color??me[se],value:ie[se]?.value??null,formatted:`${ae(ie[se]?.value??0)} · ${Math.round(10*(Math.max(0,ie[se]?.value??0)/ce*100+Number.EPSILON))/10}%`,label:ie[se]?.label}];return l(o,{...Y,size:J,variant:Q,padded:U,className:X,legendSide:be,legend:ge?e(a,{series:re,colors:me,options:xe,visibility:oe,size:J,values:xe.showValue?ie.map(e=>null===e.value?void 0:ae(e.value)):void 0}):null,table:Ie?null:e(n,{id:ne,caption:W,categories:re.map(e=>e.name??""),series:[{name:W,data:R}],values:[ie],format:ae,locale:V}),children:[l("div",{ref:Z,role:"img",tabIndex:Ie?void 0:0,"aria-label":W??te.label,"aria-describedby":Ie?void 0:de,onPointerLeave:e=>{"touch"!==e.pointerType&&ue(null)},onBlur:()=>ue(null),onKeyDown:e=>{const l=Ee.map(e=>e.index);if("Escape"===e.key){if(null===se)return;ue(null)}else{if(Me||0===l.length)return;if("Home"===e.key)ue(l[0]);else if("End"===e.key)ue(l[l.length-1]);else{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;{const t=null===se?-1:l.indexOf(se),n="ArrowRight"===e.key?t+1:t-1;ue(l[(n+l.length)%l.length])}}}e.preventDefault()},className:z("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof K?K:ve},children:[Ie?e("div",{className:z("flex h-full items-center justify-center text-(--neba-muted-fg)",P[J]),children:G??le.title}):ee>0?l("svg",{width:ee,height:ve,viewBox:`0 0 ${ee} ${ve}`,"aria-hidden":"true",className:"block",children:[Ee.map(l=>{const t=null!==oe.hovered&&oe.hovered!==l.index||null!==se&&se!==l.index,n=l.end-l.start>2*ze?ze/2:0;return e("path",{d:p(je,we,Ne,ke,l.start+n,l.end-n),fill:ie[l.index].color??me[l.index],opacity:t?.32:1,onPointerEnter:Me?void 0:()=>ue(l.index),className:u},l.index)}),"all"===H?Ee.map(l=>{const t=((l.start+l.end)/2-90)*(Math.PI/180),n=ke>0?(ke+Ne)/2:.68*Ne,a=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*n<2*pe||Ne-ke<1.6*pe?null:e("text",{x:je+n*Math.cos(t),y:we+n*Math.sin(t),textAnchor:"middle",dominantBaseline:"central",fontSize:pe,fontWeight:600,fill:M(ie[l.index].color,l.index),className:"tabular-nums",children:a},l.index)}):null]}):null,_&&ke>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:je-ke,top:we-ke,width:2*ke,height:he?ke:2*ke},children:_}):null,null===se||Me?null:ye.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:ye.render({index:se,category:re[se]?.name??se,items:$e})}):e(s,{heading:re[se]?.name,items:$e,x:je,y:8,flip:!1,size:J})]}),Ie?null:e(r,{id:de,template:te.summary,locale:V,...d(ie.filter((e,l)=>oe.visible[l]).map(e=>[e]),ae)}),Me?null:e(i,{heading:null===se?void 0:re[se]?.name,items:$e})]})}

package/dist/components/pill/Pill.d.ts

@@ -51,6 +51,14 @@ export interface PillProps extends NebaStyleProps, Omit<React.ComponentPropsWith
     position?: NebaPosition;
     /** Which edge it is held against when `position` is not `static`. @default 'top' */
     side?: 'top' | 'bottom';
+    /**
+     * Keeps it clear of a phone's home indicator and notch, on a page laid out
+     * under them with `viewport-fit=cover`, by adding the screen's
+     * `env(safe-area-inset-*)` on the edge it is held against. Only a `fixed` or
+     * `sticky` one is ever against that edge, so a `static` one is left alone.
+     * @default true
+     */
+    safeArea?: boolean;
     /** Passing it makes the row a real button. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /**

package/dist/components/pill/Pill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observeResize as o}from"../../internal/observe.js";import{controlSlots as i,controlTextClasses as r,cx as s,focusRingClasses as a,gapClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as f,metaTextClasses as x,paddingXClasses as p,pressTransitionClasses as u,sheetBodyClasses as h,surfaceClasses as v,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const w={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${v} text-(--n-accent) bg-(--n-soft)`},j={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},y={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},N={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},k={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},z={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/l.forwardRef(function(v,$){const{variant:_="solid",size:C="md",color:H="secondary",density:I="default",elevation:R=2,startIcon:B,endIcon:E,title:F,description:P,details:S,expanded:q=!1,position:A="static",side:D="top",className:G,style:J,children:K,onClick:L,...M}=g(v,["size","density","variant"]),O=l.useRef(null),[Q,T]=l.useState(0);l.useEffect(()=>{const e=O.current;if(e)return T(e.scrollHeight),o(e,()=>T(e.scrollHeight))},[S]);const U=Boolean(L),V=p[I][C],W=n(t,{children:[d(B)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${f[C]}`,children:B}):null,d(F)||d(P)||d(K)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",k[I][C]].join(" "),children:[d(F)?e("span",{className:"max-w-full truncate",children:F}):null,d(P)?e("span",{className:`max-w-full truncate font-normal ${x[C]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:P}):null,K]}):null]});return n("div",{ref:$,className:s("inline-flex max-w-full flex-col overflow-hidden align-middle",N[C],"font-medium whitespace-nowrap select-none",r[C],w[_],b,u,m,U?`neba-glow ${j[_]}`:"",z[A][D],G??""),style:{...i(H,R,_),...J},...M,children:[n("div",{className:["flex shrink-0 items-center py-1",y[C],c[C],U?"ps-0":V,d(E)?"pe-1":U?"pe-0":""].join(" "),children:[U?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[C],V,a].join(" "),onClick:L,children:W}):W,d(E)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:E}):null]}),d(S)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:q?Q:0},inert:!q,children:e("div",{ref:O,className:`whitespace-normal ${V} pb-2 ${h[C]}`,children:S})}):null]})});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{trackPointer as i}from"../../internal/glow.js";import{observeResize as l}from"../../internal/observe.js";import{controlSlots as r,controlTextClasses as s,cx as a,focusRingClasses as c,gapClasses as m,hasContent as d,iconClasses as f,iconSizeClasses as x,metaTextClasses as p,paddingXClasses as u,pressTransitionClasses as h,sheetBodyClasses as v,surfaceClasses as b,transitionClasses as g}from"../../internal/styles.js";import{inertValue as w}from"../../internal/inert.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const j={solid:[b,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"border text-(--n-on-tint) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${b} text-(--n-on-tint) bg-(--n-soft)`},_={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},k={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},z={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},$={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}},P={static:{top:"",bottom:""},sticky:{top:"sticky top-[calc(0.75rem_+_env(safe-area-inset-top))] z-20",bottom:"sticky bottom-[calc(0.75rem_+_env(safe-area-inset-bottom))] z-20"},fixed:{top:"fixed inset-x-0 top-[calc(0.75rem_+_env(safe-area-inset-top))] z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-[calc(0.75rem_+_env(safe-area-inset-bottom))] z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/o.forwardRef(function Pill(b,I){const{variant:C="solid",size:H="md",color:M="secondary",density:R="default",elevation:A=2,startIcon:B,endIcon:E,title:F,description:L,details:S,expanded:q=!1,position:D="static",side:G="top",safeArea:J=!0,className:K,style:O,children:Q,onClick:T,...U}=y(b,["size","density","variant"]),V=o.useRef(null),W=o.useId(),[X,Y]=o.useState(null),Z=d(S);o.useLayoutEffect(()=>{const e=V.current;if(e)return Y(e.scrollHeight),l(e,()=>Y(e.scrollHeight))},[Z]);const ee=Boolean(T),te=u[R][H],ne=t(n,{children:[d(B)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${x[H]}`,children:B}):null,d(F)||d(L)||d(Q)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[R][H]].join(" "),children:[d(F)?e("span",{className:"max-w-full truncate",children:F}):null,d(L)?e("span",{className:`max-w-full truncate font-normal ${p[H]}`,children:L}):null,Q]}):null]});return t("div",{ref:I,className:a("inline-flex max-w-full flex-col overflow-hidden align-middle",z[H],"font-medium whitespace-nowrap select-none",s[H],j[C],g,h,f,ee?`neba-glow ${_[C]}`:"",(J?P:$)[D][G],K??""),style:{...r(M,A,C),...O},...U,onPointerMove:i(U.onPointerMove,ee),children:[t("div",{className:["flex shrink-0 items-center py-1",k[H],m[H],ee?"ps-0":te,d(E)?"pe-1":ee?"pe-0":""].join(" "),children:[ee?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",m[H],te,c].join(" "),"aria-expanded":Z?q:void 0,"aria-controls":Z?W:void 0,onClick:T,children:ne}):ne,d(E)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:E}):null]}),Z?e("div",{id:W,className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:q?X??"auto":0},inert:w(!q),children:e("div",{ref:V,className:`whitespace-normal ${te} pb-2 ${v[H]}`,children:S})}):null]})});

package/dist/components/popconfirm/Popconfirm.d.ts

@@ -14,7 +14,12 @@ export interface PopconfirmProps {
     description?: React.ReactNode;
     /** Called when the reader confirms. May return a promise; see `onConfirm`. */
     onConfirm?: () => void | Promise<unknown>;
-    /** Called when the reader cancels. Dismissing does not call it. */
+    /**
+     * Called when the reader cancels. Dismissing does not call it.
+     *
+     * Walking away from a question is not answering it _no_, so a handler that
+     * undoes something here does not run every time somebody presses Escape.
+     */
     onCancel?: () => void;
     /** Overrides the confirming button's label. Defaults to the locale's word. */
     confirmLabel?: React.ReactNode;
@@ -42,7 +47,7 @@ export interface PopconfirmProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** BCP 47 tag deciding the two default labels. Defaults to the browser's. */
+    /** BCP 47 tag deciding the two default labels. Falls back to the provider's, then to English. */
     locale?: string;
     /** How wide the bubble is. */
     width?: number | string;
@@ -63,8 +68,10 @@ export interface PopconfirmProps {
  * So the rule is about *reach* rather than about danger: one row, a Popconfirm;
  * the page, a Confirm.
  *
- * It closes itself once `onConfirm` settles, so an async handler keeps the
+ * It closes itself once `onConfirm` resolves, so an async handler keeps the
  * bubble up — and its confirming button busy — until the work is actually done.
+ * A handler that rejects leaves the bubble open with its button ready again, and
+ * the error is not caught: it belongs to the page's own error reporting.
  * A question that vanished before its answer landed is a question the reader
  * has no way to know was heard.
  */

package/dist/components/popconfirm/Popconfirm.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as i from"react";import{Button as o}from"../button/Button.js";import{Popover as t,PopoverClose as l}from"../popover/Popover.js";import{severityIcon as r}from"../../internal/icons.js";import{confirmMessages as a,useMessages as s}from"../../internal/i18n.js";import{cx as c,gapClasses as m}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";export function Popconfirm(p){const{trigger:f,title:u,description:h,onConfirm:x,onCancel:g,confirmLabel:j,cancelLabel:N,color:v="danger",size:C="sm",icon:y=!0,side:b="top",align:w="center",open:z,defaultOpen:k,onOpenChange:O,locale:L,width:P=280,className:S,classNames:B}=d(p,["size","locale"]),q=s(a,L),[A,D]=i.useState(k??!1),E=z??A,[F,G]=i.useState(!1),H=e=>{void 0===z&&D(e),O?.(e)},I=!0===y?r(v):y;return e(t,{trigger:f,open:E,onOpenChange:H,side:b,align:w,size:C,color:v,width:P,showClose:!1,className:S,children:n("div",{className:c("flex",m[C]),children:[I?e("span",{"aria-hidden":"true",className:c("mt-px shrink-0 text-(--n-accent)",B?.icon),children:I}):null,n("div",{className:c("flex min-w-0 flex-1 flex-col",m[C]),children:[u?e("p",{className:c("font-medium text-(--neba-fg)",B?.title),children:u}):null,h?e("p",{className:c("text-(--neba-muted-fg)",B?.description),children:h}):null,n("div",{className:c("flex justify-end gap-1.5 pt-0.5",B?.actions),children:[e(l,{render:e(o,{size:C,variant:"text",color:"secondary",onClick:()=>g?.(),children:N??q.cancel})}),e(o,{size:C,color:v,loading:F,onClick:async()=>{try{G(!0),await(x?.()),H(!1)}finally{G(!1)}},children:j??q.confirm})]})]})]})})}
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as i from"react";import{Popover as r}from"@base-ui/react/popover";import{Button as o}from"../button/Button.js";import{Popover as t,PopoverClose as a}from"../popover/Popover.js";import{severityIcon as l}from"../../internal/icons.js";import{confirmMessages as s,useMessages as c}from"../../internal/i18n.js";import{cx as m,gapClasses as d}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";export function Popconfirm(f){const{trigger:u,title:h,description:x,onConfirm:g,onCancel:j,confirmLabel:v,cancelLabel:N,color:C="danger",size:b="sm",icon:y=!0,side:w="top",align:z="center",open:k,defaultOpen:O,onOpenChange:P,locale:L,width:S=280,className:B,classNames:D}=p(f,["size","locale"]),T=c(s,L),[q,A]=i.useState(O??!1),E=k??q,[F,G]=i.useState(!1),H=e=>{void 0===k&&A(e),P?.(e)},I=!0===y?l(C):y;return e(t,{trigger:u,open:E,onOpenChange:H,side:w,align:z,size:b,color:C,width:S,showClose:!1,className:B,children:n("div",{className:m("flex",d[b]),children:[I?e("span",{"aria-hidden":"true",className:m("mt-px shrink-0 text-(--n-accent)",D?.icon),children:I}):null,n("div",{className:m("flex min-w-0 flex-1 flex-col",d[b]),children:[h?e(r.Title,{render:e("p",{}),className:m("font-medium text-(--neba-fg)",D?.title),children:h}):null,x?e(r.Description,{render:e("p",{}),className:m("text-(--neba-muted-fg)",D?.description),children:x}):null,n("div",{className:m("flex justify-end gap-1.5 pt-0.5",D?.actions),children:[e(a,{render:e(o,{size:b,variant:"text",color:"secondary",onClick:()=>j?.(),children:N??T.cancel})}),e(o,{size:b,color:C,loading:F,onClick:async()=>{try{G(!0),await(g?.()),H(!1)}finally{G(!1)}},children:v??T.confirm})]})]})]})})}

package/dist/components/popover/Popover.d.ts

@@ -67,7 +67,14 @@ export interface PopoverProps extends Pick<NebaStyleProps, 'size' | 'color' | 'd
      * @default true
      */
     dismissible?: boolean;
-    /** Shows the × in the corner. @default false */
+    /**
+     * Shows the × in the corner.
+     *
+     * A `modal` popover without one still gets a close button, visually hidden
+     * until it takes the keyboard focus: a focus trap needs a way out a screen
+     * reader can reach, and VoiceOver on iOS has no Escape key to press.
+     * @default false
+     */
     showClose?: boolean;
     /**
      * Which language the × is named in — a BCP 47 tag such as `ko`, `pt-BR` or