neba 1.13.0 → 1.16.0

package/dist/components/list/List.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r,Fragment as s}from"react/jsx-runtime";import*as n from"react";import{useRender as t}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";import{cx as a,focusRingClasses as i,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceClasses as p,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=/*@__PURE__*/n.createContext({size:"md",density:"default",dividers:!1}),y={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},g={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const List=/*@__PURE__*/n.forwardRef(function(r,s){const{variant:l="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:x,className:p,style:g,children:N,...w}=b(r,["size","density","variant"]),j=n.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",f[i],y[l],h,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",p??""),z=t({render:x,ref:s,props:{role:"list",className:k,style:{...u(o,c),...g},children:N,...w}});return e(v.Provider,{value:j,children:z})});export const ListItem=/*@__PURE__*/n.forwardRef(function({startIcon:t,endIcon:f,description:p,action:u,href:b,selected:y=!1,disabled:w=!1,className:j,children:k,onClick:z,...C},I){const{size:$,density:B,dividers:L}=n.useContext(v),R=Boolean(z||b)&&!w,F=l[B][$],M=g[B][$],P=a("flex min-w-0 flex-1 items-center text-start",F,M,o[$],x[$],h,c,L?"":N[$],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",R?`cursor-pointer ${i}`:"",R&&!y?"hover:bg-(--n-soft)":"",R&&y?"hover:bg-(--n-soft-press)":""),q=r(s,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:t}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(k)?e("span",{className:"truncate",children:k}):null,d(p)?e("span",{className:`truncate text-(--neba-muted-fg) ${m[$]}`,children:p}):null]}),d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:f}):null]});return r("li",{ref:I,className:a("flex w-full items-center",j??""),...C,children:[R&&b?e("a",{href:b,className:P,"aria-current":y?"page":void 0,onClick:z,children:q}):R?e("button",{type:"button",className:P,"aria-current":!!y||void 0,onClick:z,children:q}):e("div",{className:P,"aria-disabled":w||void 0,children:q}),d(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});
+"use client";import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{safeHref as s}from"../../internal/link.js";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as i}from"../box/Box.js";import{cx as a,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as p,sheetBodyClasses as x,surfaceClasses as u,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const g=/*@__PURE__*/t.createContext({size:"md",density:"default",dividers:!1}),y={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},N={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},j={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md};export const List=/*@__PURE__*/t.forwardRef(function List(n,r){const{variant:s="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:f,className:x,style:u,children:N,...j}=b(n,["size","density","variant"]),w=t.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",p[i],y[s],v,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",x??""),z=l({render:f,ref:r,props:{role:"list",className:k,style:{...h(o,c),...u},children:N,...j}});return e(g.Provider,{value:w,children:z})});export const ListItem=/*@__PURE__*/t.forwardRef(function ListItem({startIcon:l,endIcon:p,description:u,action:h,href:b,selected:y=!1,disabled:w=!1,className:k,children:z,onClick:C,...I},L){const{size:_,density:B,dividers:R}=t.useContext(g),$=s(b),F=Boolean(C||$)&&!w,M=i[B][_],P=N[B][_],q=a("flex min-w-0 flex-1 items-center text-start",M,P,d[_],x[_],v,m,R?"":j[_],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-on-tint)":"",F?`cursor-pointer ${R?"[outline:0_solid_var(--n-ring)] outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]":o}`:"",F&&!y?"hover:bg-(--n-soft)":"",F&&y?"hover:bg-(--n-soft-press)":""),A=n(r,{children:[c(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:l}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(z)?e("span",{className:"truncate",children:z}):null,c(u)?e("span",{className:a("truncate",f[_],y?"":"text-(--neba-muted-fg)"),children:u}):null]}),c(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:p}):null]});return n("li",{ref:L,className:a("flex w-full items-center",k??""),...I,children:[F&&$?e("a",{href:$,className:q,"aria-current":y?"page":void 0,onClick:C,children:A}):F?e("button",{type:"button",className:q,"aria-current":!!y||void 0,onClick:C,children:A}):e("div",{className:q,"aria-disabled":w||void 0,"aria-current":!!y||void 0,children:A}),c(h)?e("div",{className:`flex shrink-0 items-center ${M}`,children:h}):null]})});

package/dist/components/menu/Menu.d.ts

@@ -60,10 +60,13 @@ export interface ContextMenuProps extends MenuSurfaceProps {
     /** The rows, exactly as they are written inside a `Menu`. */
     content: React.ReactNode;
     /**
-     * The area that answers a right-click or a long press. Rendered inside a
-     * `<div>` of Base UI's, which is what listens for the gesture.
+     * The area that answers a right-click or a long press. Exactly one element,
+     * which must accept a ref and spread props — every Neba component does.
+     *
+     * Base UI's Trigger merges itself onto it rather than wrapping it, so the
+     * menu adds no element to the layout and the area stays whatever it was.
      */
-    children: React.ReactNode;
+    children: React.ReactElement;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -120,7 +123,10 @@ export interface MenuSubmenuProps {
     label?: React.ReactNode;
     startIcon?: React.ReactNode;
     disabled?: boolean;
-    /** Which edge of the parent row it opens against. @default 'right' */
+    /**
+     * Which edge of the parent row it opens against. Left out, it opens at the
+     * row's inline end: to the right, or to the left under RTL.
+     */
     side?: NebaSide;
     /** Distance from the parent menu, in pixels. @default 4 */
     sideOffset?: number;
@@ -170,7 +176,7 @@ export type MenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * links that are not links cannot be opened in a new tab, cannot be copied, and
  * tells a screen reader the wrong thing about every one of them.
  */
-export declare function MenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
+export declare function MenuItem({ onClick, href: hrefProp, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
 export declare function MenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */
@@ -214,15 +220,23 @@ export declare function MenuSubmenu({ label, startIcon, disabled, side, sideOffs
  * shape a row can take, which is a component tree spelled as a discriminated
  * union.
  */
-export declare function Menu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MenuProps): React.JSX.Element;
+export declare function Menu(rawProps: MenuProps): React.JSX.Element;
 /**
  * The same menu, opened by a right-click or a long press instead of by a button.
  *
  * It takes the rows as `content` and the area as `children`, which is Tooltip's
- * shape rather than Menu's — because here the trigger is not one element you
- * hand over, it is a region of the page, and the region is the thing being
- * wrapped. Base UI positions the popup at the pointer rather than against an
- * anchor, and the long press is what makes it reachable on a touch screen at all.
+ * shape rather than Menu's — because here the trigger is a region of the page
+ * rather than a control, and a region is almost always an element the caller
+ * already had: the table, the list, the box. So it is that element that answers
+ * the gesture. Base UI's Trigger merges onto it exactly as Tooltip's does, and
+ * the menu costs the layout nothing.
+ *
+ * That last part is not a nicety. The trigger is an element in the flow, so a
+ * box of Base UI's between a caller's scroll container and the thing inside it
+ * is a box with no height to scroll in, and the content spills instead.
+ *
+ * Base UI positions the popup at the pointer rather than against an anchor, and
+ * the long press is what makes it reachable on a touch screen at all.
  */
-export declare function ContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu(rawProps: ContextMenuProps): React.JSX.Element;
 export {};

package/dist/components/menu/Menu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as s}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu.js";import{CheckIcon as r,ChevronIcon as i,DotIcon as c}from"../../internal/icons.js";import{safeRel as d}from"../../internal/link.js";import{controlTextLeadingClasses as u,cx as m,gapClasses as p,hasContent as h,iconClasses as x,metaTextClasses as b,popupFadeClasses as f,radiusClasses as g,surfaceClasses as N,surfaceSlots as y,transitionClasses as C}from"../../internal/styles.js";const k=[N,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",f].join(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},O={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function z(e,n,l,t){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--n-accent)":"text-(--neba-fg)",v[n][e],O[e],p[e],u[e],C,x,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",t??"")}const I="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function M({children:l,description:t,size:a}){return h(t)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:`truncate text-(--neba-muted-fg) ${b[a]}`,children:t})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function MenuItem({onClick:s,href:r,target:i,rel:c,startIcon:u,endIcon:m,shortcut:p,description:x,color:f,closeOnClick:g=!0,disabled:N=!1,label:C,children:k,className:v,style:O}){const j=t.useContext(o),{size:$,density:w}=j,P=n(l,{children:[h(u)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:u}):null,e(M,{description:x,size:$,children:k}),h(m)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:m}):null,h(p)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${b[$]}`,children:p}):null]}),R=f?y(f,0):void 0,F=R||O?{...R,...O}:void 0;return void 0!==r?e(a.LinkItem,{href:r,target:i,rel:d(i,c),label:C,closeOnClick:g,onClick:s,className:z($,w,Boolean(f),v),style:F,children:P}):e(a.Item,{disabled:N,label:C,closeOnClick:g,onClick:s,className:z($,w,Boolean(f),v),style:F,children:P})}export function MenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:i,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:p=!1,disabled:x=!1,label:f,children:g,className:N,style:C}){const{size:k,density:v}=t.useContext(o),O=m?y(m,0):void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>i?.(e),disabled:x,label:f,closeOnClick:p,className:z(k,v,Boolean(m),N),style:O||C?{...O,...C}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{})})}),e(M,{description:u,size:k,children:g}),h(c)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:c}):null,h(d)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${b[k]}`,children:d}):null]})}export function MenuRadioGroup({value:n,defaultValue:l,onValueChange:t,disabled:s=!1,children:o,className:r}){return e(a.RadioGroup,{value:n,defaultValue:l,onValueChange:e=>t?.(e),disabled:s,className:r,children:o})}export function MenuRadioItem({value:l,endIcon:s,shortcut:r,description:i,color:d,closeOnClick:u=!1,disabled:m=!1,label:p,children:x,className:f,style:g}){const{size:N,density:C}=t.useContext(o),k=d?y(d,0):void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:u,className:z(N,C,Boolean(d),f),style:k||g?{...k,...g}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(M,{description:i,size:N,children:x}),h(s)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:s}):null,h(r)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${b[N]}`,children:r}):null]})}export function MenuGroup({label:l,children:s,className:r}){const{size:i,density:c}=t.useContext(o);return n(a.Group,{className:r,children:[h(l)?e(a.GroupLabel,{className:[v[c][i],b[i],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:l}):null,s]})}export function MenuSeparator({className:n,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--n-line)",n??""),...l})}export function MenuSubmenu({label:l,startIcon:s,disabled:r=!1,side:c="right",sideOffset:d=4,children:p,className:x,style:b}){const f=t.useContext(o),{size:N,density:C,color:v}=f;return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:r,className:z(N,C,!1),children:[h(s)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:s}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-(--neba-muted-fg) -rotate-90`,children:e(i,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:c,sideOffset:d,align:"start",children:e(a.Popup,{className:m(k,g[N],u[N],x??""),style:{...y(v,3),...b},children:p})})})]})}export function Menu({size:l="md",color:s="primary",density:r="default",trigger:i,open:c,defaultOpen:d,onOpenChange:p,side:h="bottom",align:x="start",sideOffset:b=6,modal:f,openOnHover:N=!1,loopFocus:C=!0,disabled:v=!1,className:O,style:z,children:I}){const M=t.useMemo(()=>({size:l,color:s,density:r}),[l,s,r]);return e(o.Provider,{value:M,children:n(a.Root,{open:c,defaultOpen:d,onOpenChange:e=>p?.(e),modal:f,loopFocus:C,disabled:v,children:[i?e(a.Trigger,{render:i,openOnHover:N,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:h,align:x,sideOffset:b,children:e(a.Popup,{className:m(k,g[l],u[l],O??""),style:{...y(s,3),...z},children:I})})})]})})}export function ContextMenu({size:l="md",color:a="primary",density:r="default",content:i,children:c,open:d,defaultOpen:p,onOpenChange:h,loopFocus:x=!0,disabled:b=!1,className:f,style:N}){const C=t.useMemo(()=>({size:l,color:a,density:r}),[l,a,r]);return e(o.Provider,{value:C,children:n(s.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),loopFocus:x,disabled:b,children:[e(s.Trigger,{children:c}),e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(s.Popup,{className:m(k,g[l],u[l],f??""),style:{...y(a,3),...N},children:i})})})]})})}
+"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowClasses as a,spotlightSlot as s,trackPointer as o}from"../../internal/glow.js";import{Menu as r}from"@base-ui/react/menu";import{useDirection as i}from"@base-ui/react/direction-provider";import{ContextMenu as c}from"@base-ui/react/context-menu";import{MenuContext as d}from"../../internal/menu.js";import{CheckIcon as u,ChevronIcon as m,DotIcon as p}from"../../internal/icons.js";import{safeHref as h,safeRel as f}from"../../internal/link.js";import{controlTextLeadingClasses as x,cx as b,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as v,popupFadeClasses as C,radiusClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as M}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const I=[z,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",C].join(" "),P={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},j={xs:k.xs,sm:k.xs,md:k.sm,lg:k.sm,xl:k.md};function $(e,n,t,l,s){return b("relative flex w-full cursor-pointer items-center select-none",l?a:"",t?"text-(--n-on-tint)":"text-(--neba-fg)",P[n][e],j[e],g[e],x[e],M,N,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",s??"")}const R="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function RowBody({children:t,description:l,size:a}){return y(l)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`truncate text-(--neba-muted-fg) ${v[a]}`,children:l})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:t})}export function MenuItem({onClick:a,href:i,target:c,rel:u,startIcon:m,endIcon:p,shortcut:x,description:b,color:g,closeOnClick:N=!0,disabled:C=!1,label:k,children:z,className:M,style:w}){const I=l.useContext(d),{size:P,density:j}=I,B=n(t,{children:[y(m)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:m}):null,e(RowBody,{description:b,size:P,children:z}),y(p)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:p}):null,y(x)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[P]}`,children:x}):null]}),F={...g?O(g,0):void 0,...s,...w},G=h(i);return void 0===G||C?e(r.Item,{disabled:C,label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!C),children:B}):e(r.LinkItem,{href:G,target:c,rel:f(c,u),label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!0),children:B})}export function MenuCheckboxItem({checked:t,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:m,description:p,color:h,closeOnClick:f=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:z}=l.useContext(d),M=h?O(h,0):void 0;return n(r.CheckboxItem,{checked:t,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:f,className:$(k,z,Boolean(h),!x,N),style:{...M,...s,...C},onPointerMove:o(void 0,!x),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(u,{})})}),e(RowBody,{description:p,size:k,children:g}),y(c)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:c}):null,y(m)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[k]}`,children:m}):null]})}export function MenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:a=!1,children:s,className:o}){return e(r.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:a,className:o,children:s})}export function MenuRadioItem({value:t,endIcon:a,shortcut:i,description:c,color:u,closeOnClick:m=!1,disabled:h=!1,label:f,children:x,className:b,style:g}){const{size:N,density:C}=l.useContext(d),k=u?O(u,0):void 0;return n(r.RadioItem,{value:t,disabled:h,label:f,closeOnClick:m,className:$(N,C,Boolean(u),!h,b),style:{...k,...s,...g},onPointerMove:o(void 0,!h),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:c,size:N,children:x}),y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,y(i)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[N]}`,children:i}):null]})}export function MenuGroup({label:t,children:a,className:s}){const{size:o,density:i}=l.useContext(d);return n(r.Group,{className:s,children:[y(t)?e(r.GroupLabel,{className:[P[i][o],v[o],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:t}):null,a]})}export function MenuSeparator({className:n,...t}){return e(r.Separator,{className:b("-mx-1 my-1 h-px bg-(--n-line)",n??""),...t})}export function MenuSubmenu({label:t,startIcon:a,disabled:c=!1,side:u,sideOffset:p=4,children:h,className:f,style:g}){const N=l.useContext(d),{size:v,density:C,color:z}=N,M=i();return n(r.SubmenuRoot,{children:[n(r.SubmenuTrigger,{disabled:c,className:$(v,C,!1,!c),style:s,onPointerMove:o(void 0,!c),children:[y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:t}),e("span",{className:`${R} text-(--neba-muted-fg) ${"rtl"===M?"rotate-90":"-rotate-90"}`,children:e(m,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:u??"inline-end",sideOffset:p,align:"start",children:e(r.Popup,{className:b(I,k[v],x[v],f??""),style:{...O(z,3),...g},children:h})})})]})}export function Menu(t){const{size:a="md",color:s="primary",density:o="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:p="bottom",align:h="start",sideOffset:f=6,modal:g,openOnHover:y=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:z,children:M}=w(t,["size","density"]),P=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:P,children:n(r.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:g,loopFocus:N,disabled:v,children:[i?e(r.Trigger,{render:i,openOnHover:y,disabled:v}):null,e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:p,align:h,sideOffset:f,children:e(r.Popup,{className:b(I,k[a],x[a],C??""),style:{...O(s,3),...z},children:M})})})]})})}export function ContextMenu(t){const{size:a="md",color:s="primary",density:o="default",content:r,children:i,open:u,defaultOpen:m,onOpenChange:p,loopFocus:h=!0,disabled:f=!1,className:g,style:y}=w(t,["size","density"]),N=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:N,children:n(c.Root,{open:u,defaultOpen:m,onOpenChange:e=>p?.(e),loopFocus:h,disabled:f,children:[e(c.Trigger,{render:i}),e(c.Portal,{children:e(c.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(c.Popup,{className:b(I,k[a],x[a],g??""),style:{...O(s,3),...y},children:r})})})]})})}

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{fieldLight as z,fieldSpotlightSlot as C,glowClasses 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:A,smallStep:H,snapOnStep:J,wheel:M=!0,format:P,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?C: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:A,smallStep:H,snapOnStep:J,allowWheelScrub:M,format:P,locale:Q,disabled:xe,readOnly:ie,required:se,children:t(n.Group,{...z(ve),className:m(D,f[N],d[N],w[N],x[N],ze?_e[T]:ke,xe?u[g]:ie?b[g]:`${h[g]} ${I}`,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})});