neba 1.12.0 → 1.15.0

package/dist/components/drawer/Drawer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as t,useMessages as o}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{cx as i,hasContent as u,metaTextClasses as m,popupFadeClasses as b,sheetBodyClasses as c,sheetHeaderGapClasses as f,sheetSectionGapClasses as x,sheetTitleClasses as g,surfaceClasses as p,surfaceSlots as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const y={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},w={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},_={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"data-[starting-style]:[translate:-100%_0] data-[ending-style]:[translate:-100%_0]",right:"data-[starting-style]:[translate:100%_0] data-[ending-style]:[translate:100%_0]",top:"data-[starting-style]:[translate:0_-100%] data-[ending-style]:[translate:0_-100%]",bottom:"data-[starting-style]:[translate:0_100%] data-[ending-style]:[translate:0_100%]"},N={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},$=[p,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),k=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",b].join(" "),C="border-t [border-color:var(--n-line)]",z=["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" ");export const DrawerClose=l.Close;export function Drawer(b){const{side:p="left",mode:D="overlay",size:O="md",color:P="primary",density:B="default",open:T,defaultOpen:F,onOpenChange:L,trigger:R,title:V,description:q,actions:A,dividers:E=!1,showClose:G,locale:H,closeLabel:I,extent:J,rounded:K=!0,modal:M=!0,dismissible:Q=!0,className:S,style:U,children:W,...X}=v(b,["size","density","locale"]),Y=o(t,H),Z="overlay"===D,ee="left"===p||"right"===p,ae=G??Z,re=n[B][O],le=s[B][O],ne=E?`${re} ${le}`:re,se=u(V)||u(q),te=u(A),oe=void 0===J?null:{[ee?"width":"height"]:"number"==typeof J?`${J}px`:J},de=i($,c[O],_[p],K?w[p][O]:"",Z?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",Z?`[transition:translate_var(--neba-duration)_var(--neba-ease)] ${j[p]}`:"",ee?`h-full max-w-full ${void 0===J?y[O]:""}`:"w-full "+(void 0===J?"max-h-[85%]":""),E?"":`${le} ${x[O]}`,S??""),ie=Z?l.Title:"h2",ue=Z?l.Description:"p",me=a(r,{children:[se||ae?a("div",{className:`flex shrink-0 items-start gap-3 ${ne}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[O]}`,children:[u(V)?e(ie,{className:`m-0 font-semibold ${g[O]}`,children:V}):null,u(q)?e(ue,{className:`m-0 text-(--neba-muted-fg) ${m[O]}`,children:q}):null]}),ae?Z?e(l.Close,{"aria-label":I??Y.close,className:z,children:e(d,{})}):e("button",{type:"button","aria-label":I??Y.close,className:z,onClick:()=>L?.(!1),children:e(d,{})}):null]}):null,u(W)?e("div",{className:i("min-h-0 flex-1 overflow-y-auto overscroll-contain",ne,E&&(se||ae)?C:"",E?"":"py-1 -my-1"),children:W}):null,te?e("div",{className:i("flex shrink-0 flex-wrap items-center justify-end gap-2",ne,E?C:""),children:A}):null]});return Z?a(l.Root,{open:T,defaultOpen:F,modal:M,disablePointerDismissal:!Q,onOpenChange:(e,a)=>{Q||e||"escape-key"!==a.reason?L?.(e):a.cancel()},children:[R?e(l.Trigger,{render:R}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${k}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${N[p]}`,children:e(l.Popup,{className:de,style:{...h(P,3),...oe,...U},...X,children:me})})]})]}):T??F??!0?e("div",{className:de,style:{...h(P,0),...oe,...U},...X,children:me}):null}
+"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Dialog as t}from"@base-ui/react/dialog";import{boxPaddingXClasses as s,boxPaddingYClasses as o}from"../box/Box.js";import{actionMessages as l,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{cx as u,hasContent as b,headingTitleClasses as m,metaTextClasses as c,popupFadeClasses as f,sheetBodyClasses as p,sheetHeaderGapClasses as x,sheetSectionGapClasses as g,surfaceClasses as h,surfaceSlots as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const w={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},_={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},j={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},N={left:"data-[starting-style]:[translate:-100%_0] data-[ending-style]:[translate:-100%_0]",right:"data-[starting-style]:[translate:100%_0] data-[ending-style]:[translate:100%_0]",top:"data-[starting-style]:[translate:0_-100%] data-[ending-style]:[translate:0_-100%]",bottom:"data-[starting-style]:[translate:0_100%] data-[ending-style]:[translate:0_100%]"},$={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},k=[h,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),z=["fixed inset-0 z-(--neba-z-portal) bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",f].join(" "),C={top:{borderTop:"env(safe-area-inset-top) solid transparent"},bottom:{borderBottom:"env(safe-area-inset-bottom) solid transparent"},left:{borderTop:"env(safe-area-inset-top) solid transparent",borderBottom:"env(safe-area-inset-bottom) solid transparent"},right:{borderTop:"env(safe-area-inset-top) solid transparent",borderBottom:"env(safe-area-inset-bottom) solid transparent"}},B="border-t [border-color:var(--n-line)]",D=["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" ");export const DrawerClose=t.Close;export function Drawer(f){const{side:h="left",mode:T="overlay",size:O="md",color:P="primary",density:A="default",open:F,defaultOpen:L,onOpenChange:R,trigger:S,title:V,description:q,actions:E,dividers:G=!1,showClose:H,locale:I,closeLabel:J,extent:K,rounded:M=!0,modal:Q=!0,dismissible:U=!0,safeArea:W=!0,className:X,style:Y,children:Z,...ee}=y(f,["size","density","locale"]),ae=i(l,I),re="overlay"===T,ne="left"===h||"right"===h,te=H??re,[se,oe]=n.useState(L??!0),le=s[A][O],ie=o[A][O],de=G?`${le} ${ie}`:le,ue=b(V)||b(q),be=b(E),me=void 0===K?null:{[ne?"width":"height"]:"number"==typeof K?`${K}px`:K},ce=u(k,p[O],j[h],M?_[h][O]:"",re?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",re?`[transition:translate_var(--neba-duration)_var(--neba-ease)] ${N[h]}`:"",ne?`h-full max-w-full ${void 0===K?w[O]:""}`:"w-full "+(void 0===K?"max-h-[85%]":""),G?"":`${ie} ${g[O]}`,X??""),fe=re?t.Title:"h2",pe=re?t.Description:"p",xe=a(r,{children:[ue||te?a("div",{className:`flex shrink-0 items-start gap-3 ${de}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${x[O]}`,children:[b(V)?e(fe,{className:u("neba-heading","[&.neba-heading]:m-0 [&.neba-heading]:font-semibold [&.neba-heading]:text-inherit",m[O]),children:V}):null,b(q)?e(pe,{className:`m-0 text-(--neba-muted-fg) ${c[O]}`,children:q}):null]}),te?re?e(t.Close,{"aria-label":J??ae.close,className:D,children:e(d,{})}):e("button",{type:"button","aria-label":J??ae.close,className:D,onClick:()=>{void 0===F&&oe(!1),R?.(!1)},children:e(d,{})}):null]}):null,b(Z)?e("div",{className:u("min-h-0 flex-1 overflow-y-auto overscroll-contain",de,G&&(ue||te)?B:"",G?"":"py-1 -my-1"),children:Z}):null,be?e("div",{className:u("flex shrink-0 flex-wrap items-center justify-end gap-2",de,G?B:""),children:E}):null]});return re?a(t.Root,{open:F,defaultOpen:L,modal:Q,disablePointerDismissal:!U,onOpenChange:(e,a)=>{U||e||"escape-key"!==a.reason?R?.(e):a.cancel()},children:[S?e(t.Trigger,{render:S}):null,a(t.Portal,{children:[e(t.Backdrop,{className:u("neba-portal",z,!0===Q?"":"pointer-events-none")}),e(t.Viewport,{className:u("neba-portal fixed inset-0 z-(--neba-z-portal) flex",$[h],!0===Q?"":"pointer-events-none"),children:e(t.Popup,{className:u(ce,!0===Q?"":"pointer-events-auto"),style:{...v(P,3),...me,...W?C[h]:null,...Y},...ee,children:xe})})]})]}):F??se?e("div",{className:ce,style:{...v(P,0),...me,...Y},...ee,children:xe}):null}

package/dist/components/empty/Empty.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as x,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as v,surfaceSlots as y,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const j={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},N={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},k={solid:[v,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"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"};function w(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function(n,v){const{variant:$="text",size:L="md",color:z="secondary",density:B="default",elevation:C=0,title:W,icon:E,action:F,locale:M,transition:R,render:Z,className:q,style:A,children:D,...G}=g(n,["size","density","variant","locale"]),H=i(o,M),I=void 0===W?H.title:W,J=void 0===E?e(w,{}):E,K=s(R),O=c(I),P=m("flex w-full flex-col items-center justify-center text-center",a[B][L],j[B][L],x[L],u[L],b,k[$],K.className,q??"");return l({render:Z,ref:v,props:{role:"status",className:P,style:{...y(z,C),...K.style,...A},children:t(r,{children:[c(J)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${N[L]} ${d}`,children:J}):null,O||c(D)?t("div",{className:`flex max-w-prose flex-col items-center ${f[L]}`,children:[O?e("div",{className:`neba-title font-semibold ${h[L]}`,children:I}):null,c(D)?e("div",{className:`${p[L]} ${O?"text-(--neba-muted-fg)":""}`,children:D}):null]}):null,c(F)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:F}):null]}),...G}})});
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as p,sheetBodyClasses as x,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as y,surfaceClasses as h,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const j={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},N={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},k={solid:[h,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[h,"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"};function TrayIcon(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function Empty(h,w){const{variant:$="text",size:E="md",color:L="secondary",density:z="default",elevation:B=0,title:C,icon:I,action:T,locale:W,transition:F,render:M,className:R,style:V,children:Z,...q}=g(h,["size","density","variant","locale"]),A=i(o,W),D=void 0===C?A.title:C,G=void 0===I?e(TrayIcon,{}):I,H=s(F),J=c(D),K=n.isValidElement(M)&&("td"===M.type||"th"===M.type),{role:O,...P}=q,Q="role"in q?O:"status",S=m("flex w-full flex-col items-center justify-center text-center",a[z][E],j[z][E],p[E],u[E],b,k[$],H.className),U={...v(L,B),...H.style},X=t(r,{children:[c(G)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${N[E]} ${d}`,children:G}):null,J||c(Z)?t("div",{className:`flex max-w-prose flex-col items-center ${f[E]}`,children:[J?e("div",{className:`neba-title font-semibold ${y[E]}`,children:D}):null,c(Z)?e("div",{className:`${x[E]} ${J?"text-(--neba-muted-fg)":""}`,children:Z}):null]}):null,c(T)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:T}):null]});return l({render:M,ref:w,props:K?{className:R,style:V,children:e("div",{role:Q,className:S,style:U,children:X}),...P}:{role:Q,className:m(S,R??""),style:{...U,...V},children:X,...P}})});

package/dist/components/fieldset/Fieldset.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"react";import{Fieldset as r}from"@base-ui/react/fieldset";import{cx as n,hasContent as a,metaTextClasses as i,sheetHeaderGapClasses as t,sheetSectionGapClasses as o,sheetTitleClasses as c}from"../../internal/styles.js";export const Fieldset=/*@__PURE__*/l.forwardRef(function({legend:l,description:d,disabled:m=!1,size:f="md",className:p,children:u,...x},b){const h=a(l)||a(d);return s(r.Root,{ref:b,disabled:m,className:n("m-0 flex min-w-0 flex-col border-0 p-0",o[f],p??""),...x,children:[h?s(r.Legend,{className:`flex min-w-0 flex-col p-0 ${t[f]}`,children:[a(l)?e("span",{className:`font-semibold ${c[f]}`,children:l}):null,a(d)?e("span",{className:`text-(--neba-muted-fg) ${i[f]}`,children:d}):null]}):null,u]})});
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as s from"react";import{Fieldset as l}from"@base-ui/react/fieldset";import{cx as r,hasContent as d,metaTextClasses as a,sheetHeaderGapClasses as t,sheetSectionGapClasses as n,sheetTitleClasses as o}from"../../internal/styles.js";import{useStyleDefaults as m}from"../../internal/defaults.js";import{FieldsetDisabledContext as c}from"../../internal/fieldset.js";export const Fieldset=/*@__PURE__*/s.forwardRef(function Fieldset(f,u){const{legend:p,description:b,disabled:x=!1,size:j="md",className:h,children:v,"aria-describedby":N,...g}=m(f,["size"]),w=s.useId(),y=d(p),F=d(b);return e(c.Provider,{value:x,children:i(l.Root,{ref:u,disabled:x,className:r("m-0 flex min-w-0 flex-col border-0 p-0",n[j],h??""),"aria-describedby":[N,F?w:void 0].filter(Boolean).join(" ")||void 0,...g,children:[y||F?i("div",{className:`flex min-w-0 flex-col ${t[j]}`,children:[y?e(l.Legend,{className:`p-0 font-semibold ${o[j]}`,children:p}):null,F?e("span",{id:w,className:`text-(--neba-muted-fg) ${a[j]}`,children:b}):null]}):null,v]})})});

package/dist/components/file-picker/FilePicker.d.ts

@@ -23,8 +23,8 @@ export interface FilePickerProps extends NebaStyleProps, Omit<React.ComponentPro
     /** The largest a single file may be, in bytes. */
     maxSize?: number;
     /**
-     * How many files may be held at once. Implies `multiple`, and is checked
-     * against what is already chosen rather than against one drop.
+     * How many files may be held at once, counted only when `multiple` is on,
+     * and checked against what is already chosen rather than against one drop.
      */
     maxFiles?: number;
     /** The chosen files. Use with `onFilesChange` for a controlled picker. */
@@ -45,7 +45,7 @@ export interface FilePickerProps extends NebaStyleProps, Omit<React.ComponentPro
     error?: React.ReactNode;
     /** Forces the invalid state without a message. Defaults to `!!error`. */
     invalid?: boolean;
-    /** The line inside the box. Defaults to an English sentence. */
+    /** The line inside the box. Defaults to the `locale`'s sentence. */
     title?: React.ReactNode;
     /** The line under it — what is accepted, how big, how many. */
     hint?: React.ReactNode;
@@ -56,8 +56,16 @@ export interface FilePickerProps extends NebaStyleProps, Omit<React.ComponentPro
      * @default true
      */
     showList?: boolean;
-    /** Accessible name of a file's remove button. Receives the file's name. */
+    /**
+     * Accessible name of a file's remove button. Receives the file's name, and
+     * overrides the `locale`'s words.
+     */
     removeLabel?: (name: string) => string;
+    /**
+     * Which language the box's own words are in — the line inside it and the
+     * remove buttons — as a BCP 47 tag. Unsupported tags fall back to English.
+     */
+    locale?: string;
     /** Stretches to the width of the container. @default true */
     fullWidth?: boolean;
     /** Unavailable. */

package/dist/components/file-picker/FilePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CloseIcon as r}from"../../internal/icons.js";import{controlTextLeadingClasses as a,cx as l,disabledClasses as o,gapClasses as s,hasContent as i,iconClasses as c,metaTextClasses as d,radiusClasses as u,readOnlyFilterClasses as f,sheetTitleClasses as p,stackGapClasses as m,surfaceClasses as h,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const g={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},y={solid:[h,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),outline:[h,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"border-2 border-dashed text-(--neba-fg) bg-transparent [border-color:var(--n-line)]"},k={solid:"hover:bg-(--n-panel-press) hover:[border-color:var(--n-line-hover)]",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]",text:"hover:bg-(--n-soft) hover:[border-color:var(--n-line-hover)]"};function N(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const n=["kB","MB","GB","TB"];let t=e/1e3,r=0;for(;t>=1e3&&r<n.length-1;)t/=1e3,r+=1;return`${t<10?t.toFixed(1):Math.round(t)} ${n[r]}`}function $(e,n){const t=e.name.toLowerCase(),r=e.type.toLowerCase();return n.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?t.endsWith(e):e.endsWith("/*")?r.startsWith(`${e.slice(0,-1)}`):r===e)}export const FilePicker=/*@__PURE__*/t.forwardRef(function(h,j){const{variant:w="outline",size:z="md",color:L="primary",density:C="default",elevation:_=0,accept:E,multiple:D=!1,maxSize:F,maxFiles:I,value:M,defaultValue:B,onFilesChange:W,onReject:S,label:R,description:T,error:V,invalid:O,title:q,hint:A,icon:G,showList:P=!0,removeLabel:H=e=>`Remove ${e}`,fullWidth:Y=!0,disabled:J=!1,readOnly:K=!1,required:Q=!1,name:U,id:X,className:Z,style:ee,...ne}=x(h,["size","density","variant"]),te=t.useRef(null);t.useImperativeHandle(j,()=>te.current);const[re,ae]=t.useState(()=>[...B??[]]),le=t.useMemo(()=>M?[...M]:re,[M,re]),oe=t.useRef(0),[se,ie]=t.useState(!1);t.useEffect(()=>{const e=()=>{oe.current=0,ie(!1)};return document.addEventListener("dragend",e,!0),document.addEventListener("drop",e,!0),()=>{document.removeEventListener("dragend",e,!0),document.removeEventListener("drop",e,!0)}},[]);const ce=i(V),de=O??ce,ue=de?"danger":L,fe=J||K,pe=t.useId(),me=t.useCallback(e=>{M||ae(e),W?.(e)},[W,M]),he=t.useCallback(e=>{const n=[],t=[],r=D?I??Number.POSITIVE_INFINITY:1,a=D?le.length:0;for(const l of e)E&&!$(l,E)?t.push({file:l,reason:"type"}):void 0!==F&&l.size>F?t.push({file:l,reason:"size"}):a+n.length>=r?t.push({file:l,reason:"count"}):n.push(l);return{kept:n,rejections:t}},[E,le.length,I,F,D]),ve=t.useCallback(e=>{const{kept:n,rejections:t}=he(e);t.length>0&&S?.(t),n.length>0&&me(D?[...le,...n]:n)},[he,me,le,D,S]),be=l("flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",g[C][z],u[z],s[z],b,c,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",J?`${o[w]} border-2 border-dashed`:K?`${y[w]} ${f} cursor-default`:y[w],fe?"":k[w],se&&!fe?"bg-(--n-soft-press) [border-color:var(--n-ring)]":"");return n("div",{className:l("flex-col align-top",m[z],Y?"flex w-full":"inline-flex",Z??""),style:{...v(ue,_),...ee},...ne,children:[i(R)?e("span",{className:[d[z],"font-medium",J?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:R}):null,n("div",{className:"flex w-full flex-col",onDragEnter:e=>{fe||(e.preventDefault(),oe.current+=1,ie(!0))},onDragOver:e=>{fe||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{fe||(oe.current=Math.max(0,oe.current-1),0===oe.current&&ie(!1))},onDrop:e=>{fe||(e.preventDefault(),oe.current=0,ie(!1),ve(function(e){const n=[...e.items],t=[...e.files];return n.length!==t.length?t:t.filter((e,t)=>{const r=n[t]?.webkitGetAsEntry?.();return!r||r.isFile})}(e.dataTransfer)))},children:[n("button",{type:"button",id:X,disabled:J,"aria-describedby":i(T)||ce?pe:void 0,"aria-invalid":de||void 0,className:be,onClick:()=>{fe||te.current&&(te.current.value="",te.current.click())},children:[void 0===G?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:e(N,{})}):i(G)?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:G}):null,e("span",{className:`font-medium ${p[z]}`,children:q??"Drop files here, or click to browse"}),i(A)?e("span",{className:`text-(--neba-muted-fg) ${d[z]}`,children:A}):null]}),e("input",{ref:te,type:"file",name:U,accept:E,multiple:D,required:Q&&0===le.length,disabled:fe,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ve(Array.from(e.target.files??[]))})]}),P&&le.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${m[z]} m-0 list-none p-0`,children:le.map((t,l)=>n("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",u.xs,a[z],"bg-(--n-soft) text-(--neba-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:t.name}),e("span",{className:`shrink-0 text-(--neba-muted-fg) tabular-nums ${d[z]}`,children:formatFileSize(t.size)}),fe?null:e("button",{type:"button","aria-label":H(t.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--neba-muted-fg) opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","[&_svg]:size-[0.9em]","hover:text-(--neba-fg) hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"].join(" "),onClick:()=>me(le.filter((e,n)=>n!==l)),children:e(r,{})})]},`${t.name}-${t.size}-${t.lastModified}-${l}`))}):null,i(T)&&!ce?e("span",{id:pe,className:`${d[z]} text-(--neba-muted-fg)`,children:T}):null,ce?e("span",{id:pe,className:`${d[z]} text-(--n-accent)`,children:V}):null]})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{useDropZone as r}from"../../internal/drop.js";import{glowClasses as l,spotlightSlot as a,trackPointer as o}from"../../internal/glow.js";import{CloseIcon as i}from"../../internal/icons.js";import{fileMessages as s,fillMessage as c,useMessages as d}from"../../internal/i18n.js";import{controlTextLeadingClasses as u,cx as f,disabledClasses as m,gapClasses as p,hasContent as h,iconClasses as b,metaTextClasses as v,radiusClasses as x,readOnlyFilterClasses as g,sheetTitleClasses as y,stackGapClasses as k,surfaceClasses as $,surfaceSlots as j,transitionClasses as N}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const z={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},C={solid:[$,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),outline:[$,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"border-2 border-dashed text-(--neba-fg) bg-transparent [border-color:var(--n-line)]"},I={solid:"hover:bg-(--n-panel-press) hover:[border-color:var(--n-line-hover)]",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]",text:"hover:bg-(--n-soft) hover:[border-color:var(--n-line-hover)]"};function UploadIcon(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const n=["kB","MB","GB","TB"];let t=e/1e3,r=0;for(;t>=1e3&&r<n.length-1;)t/=1e3,r+=1;return`${t<10?t.toFixed(1):Math.round(t)} ${n[r]}`}function L(e,n){const t=e.name.toLowerCase(),r=e.type.toLowerCase();return n.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?t.endsWith(e):e.endsWith("/*")?r.startsWith(`${e.slice(0,-1)}`):r===e)}export const FilePicker=/*@__PURE__*/t.forwardRef(function FilePicker($,_){const{variant:M="outline",size:F="md",color:B="primary",density:E="default",elevation:W=0,accept:R,multiple:S=!1,maxSize:T,maxFiles:P,value:V,defaultValue:q,onFilesChange:A,onReject:D,label:O,description:U,error:G,invalid:H,title:Y,hint:J,icon:K,showList:Q=!0,removeLabel:X,fullWidth:Z=!0,disabled:ee=!1,readOnly:ne=!1,required:te=!1,name:re,id:le,locale:ae,className:oe,style:ie,...se}=w($,["size","density","variant","locale"]),ce=d(s,ae),de=X??(e=>c(ce.remove,{name:e})),ue=t.useRef(null);t.useImperativeHandle(_,()=>ue.current);const[fe,me]=t.useState(()=>[...q??[]]),pe=t.useMemo(()=>V?[...V]:fe,[V,fe]),he=h(G),be=H??he,ve=be?"danger":B,xe=ee||ne,ge=t.useId(),ye=t.useId(),ke=t.useId(),$e=le??ke,je=t.useCallback(e=>{V||me(e),A?.(e)},[A,V]),Ne=t.useCallback(e=>{const n=[],t=[],r=S?P??Number.POSITIVE_INFINITY:1,l=S?pe.length:0;for(const a of e)R&&!L(a,R)?t.push({file:a,reason:"type"}):void 0!==T&&a.size>T?t.push({file:a,reason:"size"}):l+n.length>=r?t.push({file:a,reason:"count"}):n.push(a);return{kept:n,rejections:t}},[R,pe.length,P,T,S]),we=t.useCallback(e=>{const{kept:n,rejections:t}=Ne(e);t.length>0&&D?.(t),n.length>0&&je(S?[...pe,...n]:n)},[Ne,je,pe,S,D]),{over:ze,handlers:Ce}=r(xe?void 0:we),Ie=t.useRef(null),Le=t.useRef(null),_e=t.useRef(null);t.useLayoutEffect(()=>{const e=_e.current;if(null===e)return;_e.current=null;const n=Le.current?.querySelectorAll("li button")??[],t=n[Math.min(e,n.length-1)]??Ie.current;t?.focus()},[pe]);const Me=t.useCallback(()=>{const e=ue.current;if(e&&"undefined"!=typeof DataTransfer)try{const n=new DataTransfer;pe.forEach(e=>n.items.add(e)),e.files=n.files}catch{}},[pe]);t.useEffect(()=>{Me();const e=ue.current;return e?.addEventListener("cancel",Me),()=>e?.removeEventListener("cancel",Me)},[Me]);const Fe=f("flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",z[E][F],x[F],p[F],N,b,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",ee?`${m[M]} border-2 border-dashed`:ne?`${C[M]} ${g} cursor-default`:C[M],xe?"":`${I[M]} ${l}`,ze&&!xe?"bg-(--n-soft-press) [border-color:var(--n-ring)]":"");return n("div",{className:f("flex-col align-top",k[F],Z?"flex w-full":"inline-flex",oe??""),style:{...j(ve,W),...xe?void 0:a,...ie},...se,children:[h(O)?e("span",{id:ye,className:[v[F],"font-medium",ee?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:O}):null,n("div",{className:"flex w-full flex-col",...Ce,children:[n("button",{ref:Ie,onPointerMove:o(void 0,!xe),type:"button",id:$e,disabled:ee,"aria-labelledby":h(O)?`${ye} ${$e}`:void 0,"aria-describedby":h(U)||he?ge:void 0,"aria-invalid":be||void 0,className:Fe,onClick:()=>{xe||ue.current&&(ue.current.value="",ue.current.click())},children:[void 0===K?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):h(K)?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:K}):null,e("span",{className:`font-medium ${y[F]}`,children:Y??ce.title}),h(J)?e("span",{className:`text-(--neba-muted-fg) ${v[F]}`,children:J}):null]}),e("input",{ref:ue,type:"file",name:re,accept:R,multiple:S,required:te&&0===pe.length,disabled:ee,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>we(Array.from(e.target.files??[]))})]}),Q&&pe.length>0?e("ul",{ref:Le,role:"list",className:`flex w-full flex-col ${k[F]} m-0 list-none p-0`,children:pe.map((t,r)=>n("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",x.xs,u[F],"bg-(--n-soft) text-(--neba-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:t.name}),e("span",{className:`shrink-0 text-(--neba-muted-fg) tabular-nums ${v[F]}`,children:formatFileSize(t.size)}),xe?null:e("button",{type:"button","aria-label":de(t.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--neba-muted-fg) opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","[&_svg]:size-[0.9em]","hover:text-(--neba-fg) hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"].join(" "),onClick:e=>{_e.current=e.currentTarget===document.activeElement?r:null,je(pe.filter((e,n)=>n!==r))},children:e(i,{})})]},`${t.name}-${t.size}-${t.lastModified}-${r}`))}):null,h(U)&&!he?e("span",{id:ge,className:`${v[F]} text-(--neba-muted-fg)`,children:U}):null,he?e("span",{id:ge,className:`${v[F]} text-(--n-accent)`,children:G}):null]})});

package/dist/components/flex/Flex.d.ts

@@ -34,9 +34,15 @@ export interface FlexProps extends React.ComponentPropsWithoutRef<'div'> {
      * @default 0
      */
     spacing?: NebaResponsive<number>;
-    /** The gutter between wrapped lines only. Falls back to `spacing`. */
+    /**
+     * The vertical gap only, whatever `direction` is: between wrapped lines in a
+     * row and between the children of a column. Falls back to `spacing`.
+     */
     rowSpacing?: NebaResponsive<number>;
-    /** The gutter along the row only. Falls back to `spacing`. */
+    /**
+     * The horizontal gap only, whatever `direction` is: between the children of a
+     * row and between wrapped lines in a column. Falls back to `spacing`.
+     */
     columnSpacing?: NebaResponsive<number>;
     /** How the row distributes the space its children did not use. */
     justifyContent?: NebaJustifyContent;

package/dist/components/flex/Flex.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as i,justifyContentClasses as t,spacingValue as a}from"../../internal/grid.js";import{overlayResponsive as o,responsiveSlots as l,withBaseline as s}from"../../internal/responsive.js";import{cx as p}from"../../internal/styles.js";function c(e){return r=>{const n="vertical"===r?"column":"row";return e?`${n}-reverse`:n}}export const Flex=/*@__PURE__*/e.forwardRef(function({direction:e,reverse:f=!1,spacing:m,rowSpacing:x,columnSpacing:g,justifyContent:d,alignItems:u,alignContent:y,wrap:w=!1,inline:v=!1,render:j,className:h,style:b,children:C,...N},S){const z=p("neba-flex",v?"inline-flex":"flex","[flex-direction:var(--n-flex-dir)] gap-x-(--n-gap-x) gap-y-(--n-gap-y)",w?"flex-wrap":"flex-nowrap",d?t[d]:"",u?i[u]:"",y?n[y]:"",h??"");return r({render:j,ref:S,props:{className:z,style:{...l("flex-dir",s(e,"horizontal"),c(f)),...l("gap-x",o(s(m,0),g),a),...l("gap-y",o(s(m,0),x),a),...b},children:C,...N}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as i,justifyContentClasses as t,spacingValue as a}from"../../internal/grid.js";import{overlayResponsive as o,responsiveSlots as l,withBaseline as s}from"../../internal/responsive.js";import{cx as p}from"../../internal/styles.js";function c(e){return r=>{const n="vertical"===r?"column":"row";return e?`${n}-reverse`:n}}export const Flex=/*@__PURE__*/e.forwardRef(function Flex({direction:e,reverse:f=!1,spacing:m,rowSpacing:x,columnSpacing:g,justifyContent:d,alignItems:u,alignContent:y,wrap:w=!1,inline:v=!1,render:j,className:h,style:b,children:C,...F},N){const S=p("neba-flex",v?"inline-flex":"flex","[flex-direction:var(--n-flex-dir)] gap-x-(--n-gap-x) gap-y-(--n-gap-y)",w?"flex-wrap":"flex-nowrap",d?t[d]:"",u?i[u]:"",y?n[y]:"",h??"");return r({render:j,ref:N,props:{className:S,style:{...l("flex-dir",s(e,"horizontal"),c(f)),...l("gap-x",o(s(m,0),g),a),...l("gap-y",o(s(m,0),x),a),...b},children:C,...F}})});

package/dist/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaCorner, NebaElevation, NebaPosition, NebaStyleProps } from '../../types.js';
+import type { NebaCorner, NebaElevation, NebaPosition, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * Where a floating button sits, with one value the shared vocabulary does not
  * have.
@@ -19,9 +19,17 @@ export type FloatingActionButtonPosition = NebaPosition | 'absolute';
  * a dial that fans sideways out of a corner fans into the edge of the screen.
  */
 export type FloatingActionButtonDirection = 'top' | 'bottom';
+/**
+ * The parts of a FloatingActionButton a `classNames` entry can reach. `className`
+ * and `style` are the button's; `frame` is the box pinned to the corner, which
+ * holds the button and its dial.
+ */
+export type FloatingActionButtonSlot = 'frame';
 export interface FloatingActionButtonProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick'> {
     /** The glyph on the button. @default a plus */
     icon?: React.ReactNode;
+    /** Classes for the box pinned to the corner. `className` goes on the button itself. */
+    classNames?: NebaSlots<FloatingActionButtonSlot>;
     /**
      * What the button does, in words.
      *
@@ -65,6 +73,13 @@ export interface FloatingActionButtonProps extends NebaStyleProps, Omit<React.Co
      * @default 16
      */
     offset?: number | string;
+    /**
+     * Adds the screen's `env(safe-area-inset-*)` to `offset` on the edge the
+     * corner is against, so a button pinned to the bottom of a phone clears its
+     * home indicator. Only a `fixed` or `sticky` button is ever against that edge.
+     * @default true
+     */
+    safeArea?: boolean;
     /**
      * Which way the actions fan out. Taken from `corner` when it is left out — up
      * from the bottom of the screen, down from the top — which is right often

package/dist/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"../button/Button.js";import{CloseIcon as s,PlusIcon as a}from"../../internal/icons.js";import{cx as r,hasContent as i,metaTextClasses as l,radiusClasses as d,surfaceClasses as c}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";const m=/*@__PURE__*/o.createContext({variant:"solid",size:"md",color:"primary",density:"default",elevation:1,showLabels:!0,reversed:!0,close:()=>{}}),p={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},u="lg",b={static:"",absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},v={"top-start":"top-(--n-fab-offset) start-(--n-fab-offset)","top-end":"top-(--n-fab-offset) end-(--n-fab-offset)","bottom-start":"bottom-(--n-fab-offset) start-(--n-fab-offset)","bottom-end":"bottom-(--n-fab-offset) end-(--n-fab-offset)"},x=r("pointer-events-none max-w-40 truncate select-none","px-2 py-0.5 text-(--neba-fg) bg-(--n-panel)",c,d.xs,"[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]");export const FloatingActionButton=/*@__PURE__*/o.forwardRef(function(i,l){const{variant:d="solid",size:c=u,color:x="primary",density:y="default",elevation:h=2,icon:g,label:w,extended:z=!1,openIcon:C,position:k="fixed",corner:L="bottom-end",offset:j=16,direction:N,open:E,defaultOpen:P=!1,onOpenChange:R,openOnHover:A=!0,closeOnAction:I=!0,showLabels:O=!0,disabled:_=!1,className:B,style:D,children:F,onClick:K,onKeyDown:T,onPointerEnter:W,onPointerLeave:H,...M}=f(i,["size","density","variant"]),S=o.useId(),$=o.useRef(null),q=o.useRef(null),[G,J]=o.useState(P),Q=void 0!==E,U=o.Children.toArray(F).length>0,V=(Q?E:G)&&U&&!_,X=o.useCallback(e=>{Q||J(e),R?.(e)},[Q,R]),Y=o.useCallback(()=>X(!1),[X]);o.useEffect(()=>{if(!V)return;const e=e=>{const t=q.current;t&&e.target instanceof Node&&!t.contains(e.target)&&Y()};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)},[V,Y]);const Z=N??(L.startsWith("bottom")?"top":"bottom"),ee=L.endsWith("end"),te=o.useMemo(()=>({variant:d,size:p[c],color:x,density:y,elevation:h,showLabels:O,reversed:ee,close:I?Y:()=>{}}),[d,c,x,y,h,O,ee,I,Y]),oe=V&&!1!==C?C??e(s,{}):g??e(a,{});return t("div",{ref:e=>{q.current=e,"function"==typeof l?l(e):l&&(l.current=e)},className:r("flex w-fit","top"===Z?"flex-col-reverse":"flex-col",ee?"items-end":"items-start","xs"===c||"sm"===c?"gap-1.5":"gap-2",b[k],"static"===k?"":v[L],B),style:{"--n-fab-offset":"number"==typeof j?`${j}px`:j,...D},onKeyDown:e=>{"Escape"===e.key&&V&&(e.stopPropagation(),Y(),$.current?.focus()),T?.(e)},onPointerEnter:e=>{A&&U&&!_&&"mouse"===e.pointerType&&X(!0),W?.(e)},onPointerLeave:e=>{A&&"mouse"===e.pointerType&&Y(),H?.(e)},...M,children:[e(n,{ref:$,variant:d,size:c,color:x,density:y,elevation:h,disabled:_,"aria-label":w,"aria-expanded":U?V:void 0,"aria-controls":U&&V?S:void 0,startIcon:oe,style:{borderRadius:"9999px"},onClick:e=>{U&&X(!V),K?.(e)},children:z?w:void 0}),V?e("div",{id:S,className:r("flex","top"===Z?"flex-col-reverse":"flex-col",ee?"items-end":"items-start","xs"===c||"sm"===c?"gap-1.5":"gap-2","[animation:neba-anim-fade_var(--neba-duration)_var(--neba-ease)_both]"),children:e(m.Provider,{value:te,children:F})}):null]})});export const FloatingAction=/*@__PURE__*/o.forwardRef(function({icon:s,label:a,disabled:d=!1,className:c,onClick:f,...p},u){const b=o.useContext(m);return t("div",{className:r("flex items-center gap-2",b.reversed?"flex-row-reverse":"flex-row",c),children:[e(n,{ref:u,variant:b.variant,size:b.size,color:b.color,density:b.density,elevation:b.elevation,disabled:d,"aria-label":a,startIcon:s,style:{borderRadius:"9999px"},onClick:e=>{f?.(e),b.close()},...p}),b.showLabels&&i(a)?e("span",{"aria-hidden":"true",className:r(x,l[b.size]),children:a}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"../button/Button.js";import{CloseIcon as s,PlusIcon as a}from"../../internal/icons.js";import{cx as r,hasContent as i,metaTextClasses as l,radiusClasses as c,surfaceClasses as f}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const m=/*@__PURE__*/o.createContext({variant:"solid",size:"md",color:"primary",density:"default",elevation:1,showLabels:!0,reversed:!0,close:()=>{},closesOnAction:!1,focusTrigger:()=>{}}),u={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},b="lg",p={static:"",absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},v={"top-start":"top-(--n-fab-offset) start-(--n-fab-offset)","top-end":"top-(--n-fab-offset) end-(--n-fab-offset)","bottom-start":"bottom-(--n-fab-offset) start-(--n-fab-offset)","bottom-end":"bottom-(--n-fab-offset) end-(--n-fab-offset)"},x={"top-start":"top-[calc(var(--n-fab-offset)_+_env(safe-area-inset-top))] start-(--n-fab-offset)","top-end":"top-[calc(var(--n-fab-offset)_+_env(safe-area-inset-top))] end-(--n-fab-offset)","bottom-start":"bottom-[calc(var(--n-fab-offset)_+_env(safe-area-inset-bottom))] start-(--n-fab-offset)","bottom-end":"bottom-[calc(var(--n-fab-offset)_+_env(safe-area-inset-bottom))] end-(--n-fab-offset)"},g=r("pointer-events-none max-w-40 truncate select-none","px-2 py-0.5 text-(--neba-fg) bg-(--n-panel)",f,c.xs,"[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]");export const FloatingActionButton=/*@__PURE__*/o.forwardRef(function FloatingActionButton(i,l){const{variant:c="solid",size:f=b,color:g="primary",density:y="default",elevation:h=2,icon:w,label:z,extended:_=!1,openIcon:k,position:A="fixed",corner:C="bottom-end",offset:N=16,safeArea:L=!0,direction:j,open:E,defaultOpen:O=!1,onOpenChange:R,openOnHover:P=!0,closeOnAction:T=!0,showLabels:F=!0,disabled:I=!1,className:B,classNames:D,style:K,children:W,onClick:H,onKeyDown:M,onPointerEnter:S,onPointerLeave:$,...q}=d(i,["size","density","variant"]),G=o.useId(),J=o.useRef(null),Q=o.useRef(null),[U,V]=o.useState(O),X=void 0!==E,Y=o.Children.toArray(W).length>0,Z=(X?E:U)&&Y&&!I,ee=o.useCallback(e=>{X||V(e),R?.(e)},[X,R]),te=o.useCallback(()=>ee(!1),[ee]),oe=o.useRef(!1);o.useEffect(()=>{if(!Z)return;const e=e=>{const t=Q.current;t&&e.target instanceof Node&&!t.contains(e.target)&&te()};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)},[Z,te]);const ne=j??(C.startsWith("bottom")?"top":"bottom"),se=C.endsWith("end"),ae=o.useMemo(()=>({variant:c,size:u[f],color:g,density:y,elevation:h,showLabels:F,reversed:se,close:T?te:()=>{},closesOnAction:T,focusTrigger:()=>J.current?.focus()}),[c,f,g,y,h,F,se,T,te]),re=Z&&!1!==k?k??e(s,{}):w??e(a,{});return t("div",{ref:e=>{Q.current=e,"function"==typeof l?l(e):l&&(l.current=e)},className:r("flex w-fit","top"===ne?"flex-col-reverse":"flex-col",se?"items-end":"items-start","xs"===f||"sm"===f?"gap-1.5":"gap-2",p[A],"static"===A?"":!L||"fixed"!==A&&"sticky"!==A?v[C]:x[C],D?.frame),style:{"--n-fab-offset":"number"==typeof N?`${N}px`:N},onKeyDown:e=>{"Escape"===e.key&&Z&&(e.stopPropagation(),te(),J.current?.focus()),M?.(e)},onPointerEnter:e=>{P&&Y&&!I&&"mouse"===e.pointerType&&(oe.current=!Z,ee(!0)),S?.(e)},onPointerLeave:e=>{P&&"mouse"===e.pointerType&&(oe.current=!1,te()),$?.(e)},...q,children:[e(n,{ref:J,variant:c,size:f,color:g,density:y,elevation:h,disabled:I,"aria-label":z,"aria-expanded":Y?Z:void 0,"aria-controls":Y&&Z?G:void 0,startIcon:re,className:B,style:{borderRadius:"9999px",...K},onClick:e=>{Y&&(Z&&oe.current?oe.current=!1:ee(!Z)),H?.(e)},children:_?z:void 0}),Z?e("div",{id:G,className:r("flex","top"===ne?"flex-col-reverse":"flex-col",se?"items-end":"items-start","xs"===f||"sm"===f?"gap-1.5":"gap-2","[animation:neba-anim-fade_var(--neba-duration)_var(--neba-ease)_both]"),children:e(m.Provider,{value:ae,children:W})}):null]})});export const FloatingAction=/*@__PURE__*/o.forwardRef(function FloatingAction({icon:s,label:a,disabled:c=!1,className:f,style:d,onClick:u,...b},p){const v=o.useContext(m);return t("div",{className:r("flex items-center gap-2",v.reversed?"flex-row-reverse":"flex-row",f),children:[e(n,{ref:p,variant:v.variant,size:v.size,color:v.color,density:v.density,elevation:v.elevation,disabled:c,"aria-label":a,startIcon:s,style:{borderRadius:"9999px",...d},onClick:e=>{const t=e.currentTarget===document.activeElement;u?.(e),v.close(),t&&v.closesOnAction&&v.focusTrigger()},...b}),v.showLabels&&i(a)?e("span",{"aria-hidden":"true",className:r(g,l[v.size]),children:a}):null]})});

package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{barMinHeightClasses as r,BottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{observeResize as s}from"../../internal/observe.js";import{cx as i,surfaceClasses as l,surfaceSlots as f,transitionClasses as u}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const p={solid:[l,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},m={static:"relative mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--n-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--n-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--n-nav-offset) z-40 mx-auto w-fit"},b={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-1.5",xl:"p-2"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1"}},c={solid:`${l} bg-(--n-panel-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:`${l} bg-(--n-soft-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:"bg-(--n-soft-hover)"},v={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const FloatingBottomNavigation=/*@__PURE__*/a.forwardRef(function(l,x){const{variant:g="outline",size:y="md",color:h="primary",density:w="default",elevation:j=2,value:$,defaultValue:z=null,onValueChange:k,position:P="fixed",offset:A=16,labels:C="selected",safeArea:N=!0,disabled:R=!1,label:E,render:L,className:S,style:V,children:W,...q}=d(l,["size","density","variant"]),[B,F]=a.useState(z),H=void 0!==$,M=H?$:B,T=a.useCallback(e=>{H||F(e),k?.(e)},[H,k]),D=a.useMemo(()=>({value:M??null,change:T,size:y,density:w,labels:C,disabled:R,floating:!0}),[M,T,y,w,C,R]),G=a.useRef(null),I=a.useRef(null),J=a.useCallback(e=>{G.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),K=a.useCallback(e=>{const t=G.current,a=I.current;if(!t||!a)return;const n=t.querySelector("[data-nav-item][aria-current]");if(!n)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-nav-x",`${n.offsetLeft}px`),a.style.setProperty("--n-nav-y",`${n.offsetTop}px`),a.style.setProperty("--n-nav-w",`${n.offsetWidth}px`),a.style.setProperty("--n-nav-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{K(!0)},[K,M,g,y,w,C,W]),a.useEffect(()=>{const e=G.current;if(e)return s(e,()=>K(!1))},[K]);const O="number"==typeof A?`${A}px`:A,Q=i("flex max-w-full min-w-0 items-center rounded-full",r[y],b[w][y],v[y],p[g],m[P],u,S);return n({render:L??e("nav",{}),ref:J,props:{"aria-label":E,className:Q,style:{...f(h,j),"--n-nav-offset":N?`calc(${O} + env(safe-area-inset-bottom))`:O,...V},children:t(o.Provider,{value:D,children:[null!=M?e("span",{ref:I,"aria-hidden":"true",className:i("pointer-events-none absolute rounded-full","top-(--n-nav-y) left-(--n-nav-x) h-(--n-nav-h) w-(--n-nav-w)",c[g],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]","motion-reduce:[transition-duration:0ms]")}):null,W]}),...q}})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{barMinHeightClasses as r,BottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{observeResize as s}from"../../internal/observe.js";import{cx as i,surfaceClasses as l,surfaceSlots as d,transitionClasses as f}from"../../internal/styles.js";import{useStyleDefaults as u}from"../../internal/defaults.js";const p={solid:[l,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},m={static:"relative mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--n-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--n-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--n-nav-offset) z-40 mx-auto w-fit"},v={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-1.5",xl:"p-2"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1"}},c={solid:`${l} bg-(--n-panel-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:`${l} bg-(--n-soft-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:"bg-(--n-soft-hover)"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const FloatingBottomNavigation=/*@__PURE__*/a.forwardRef(function FloatingBottomNavigation(l,x){const{variant:g="outline",size:y="md",color:h="primary",density:w="default",elevation:j=2,value:$,defaultValue:z=null,onValueChange:N,position:k="fixed",offset:A=16,labels:P="selected",safeArea:C=!0,disabled:E=!1,label:L,render:R,className:B,style:F,children:S,...V}=u(l,["size","density","variant"]),[W,q]=a.useState(z),H=void 0!==$,M=H?$:W,T=a.useCallback(e=>{H||q(e),N?.(e)},[H,N]),D=a.useMemo(()=>({value:M??null,change:T,size:y,density:w,labels:P,disabled:E,floating:!0}),[M,T,y,w,P,E]),G=a.useRef(null),I=a.useRef(null),J=a.useCallback(e=>{G.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),K=a.useCallback(e=>{const t=G.current,a=I.current;if(!t||!a)return;const n=t.querySelector("[data-nav-item][aria-current]");if(a.hidden=!n,!n)return void a.removeAttribute("data-ready");const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-nav-x",`${n.offsetLeft}px`),a.style.setProperty("--n-nav-y",`${n.offsetTop}px`),a.style.setProperty("--n-nav-w",`${n.offsetWidth}px`),a.style.setProperty("--n-nav-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{K(!0)},[K,M,g,y,w,P,S]),a.useEffect(()=>{const e=G.current;if(!e)return;const t=e=>{"grid-template-columns"===e.propertyName&&K(!0)},a=s(e,()=>K(!1));return e.addEventListener("transitionend",t),()=>{a(),e.removeEventListener("transitionend",t)}},[K]);const O="number"==typeof A?`${A}px`:A,Q=i("flex max-w-full min-w-0 items-center rounded-full",r[y],v[w][y],b[y],p[g],m[k],f,B);return n({render:R??e("nav",{}),ref:J,props:{"aria-label":L,className:Q,style:{...d(h,j),"--n-nav-offset":C?`calc(${O} + env(safe-area-inset-bottom))`:O,...F},children:t(o.Provider,{value:D,children:[null!=M?e("span",{ref:I,"aria-hidden":"true",className:i("pointer-events-none absolute rounded-full","top-(--n-nav-y) left-(--n-nav-x) h-(--n-nav-h) w-(--n-nav-w)",c[g],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]","motion-reduce:[transition-duration:0ms]")}):null,S]}),...V}})});

package/dist/components/footer/Footer.d.ts

@@ -11,6 +11,14 @@ export interface FooterProps extends Omit<React.ComponentPropsWithoutRef<'footer
      * @default 'static'
      */
     position?: NebaPosition;
+    /**
+     * Keeps it clear of a phone's home indicator and notch, on a page laid out
+     * under them with `viewport-fit=cover`, by adding the screen's
+     * `env(safe-area-inset-*)` on the edge it is held against. Only a `fixed` or
+     * `sticky` one is ever against that edge, so a `static` one is left alone.
+     * @default true
+     */
+    safeArea?: boolean;
     /**
      * Weight of the sheet, said the way a *container* says it: the bar is never
      * dyed, because what is on it arrives with colours of its own.

package/dist/components/footer/Footer.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as a,boxPaddingYClasses as o}from"../box/Box.js";import{PageLayoutContext as n}from"../../internal/page-layout.js";import{cx as s,measureValue as i,surfaceClasses as l,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";import{responsiveSlots as f}from"../../internal/responsive.js";import{useStyleDefaults as c}from"../../internal/defaults.js";const p={solid:[l,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},b={static:"",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const Footer=/*@__PURE__*/t.forwardRef(function(l,x){const{position:u="static",variant:v="outline",size:y="md",color:g="primary",density:j="default",elevation:w=0,divider:h=!0,maxWidth:z,padded:k=!0,label:N,render:C,className:B,style:F,children:R,...W}=c(l,["size","density","variant"]),q=t.useContext(n),{register:A}=q,D=t.useCallback(e=>{A("footer",e),"function"==typeof x?x(e):x&&(x.current=e)},[A,x]),E=s("w-full min-w-0",p[v],h?"border-t [border-color:var(--n-line)]":"",b[u],d,B);return r({render:C??e("footer",{}),ref:D,props:{"aria-label":N,className:E,style:{...m(g,w),...F},children:e("div",{className:s("w-full",k?s(a[j][y],o[j][y]):"","neba-measure mx-auto max-w-(--n-max-w)"),style:f("max-w",z,i),children:R}),...W}})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as a,boxPaddingYClasses as o}from"../box/Box.js";import{PageLayoutContext as n,PageLayoutSlotContext as s}from"../../internal/page-layout.js";import{cx as i,measureValue as l,surfaceClasses as m,surfaceSlots as f,transitionClasses as d}from"../../internal/styles.js";import{responsiveSlots as c}from"../../internal/responsive.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const b={solid:[m,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[m,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},x={static:"",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const Footer=/*@__PURE__*/t.forwardRef(function Footer(m,u){const{position:v="static",safeArea:y=!0,variant:g="outline",size:j="md",color:w="primary",density:h="default",elevation:z=0,divider:k=!0,maxWidth:C,padded:N=!0,label:F,render:A,className:B,style:R,children:W,...q}=p(m,["size","density","variant"]),D=t.useContext(n),{register:E}=D,G="footer"===t.useContext(s),H=t.useCallback(e=>{G&&E("footer",e),"function"==typeof u?u(e):u&&(u.current=e)},[E,u,G,v]),I=i("w-full min-w-0",b[g],k?"border-t [border-color:var(--n-line)]":"",x[v],y&&"static"!==v?"pb-[env(safe-area-inset-bottom)]":"",d,B);return r({render:A??e("footer",{}),ref:H,props:{"aria-label":F,className:I,style:{...f(w,z),...R},children:e("div",{className:i("w-full",N?i(a[h][j],o[h][j]):"","neba-measure mx-auto max-w-(--n-max-w)"),style:c("max-w",C,l),children:W}),...q}})});

package/dist/components/form/Form.d.ts

@@ -29,8 +29,10 @@ export interface FormProps extends Omit<React.ComponentPropsWithoutRef<'form'>,
      */
     errors?: FormErrors;
     /**
-     * Called on a valid submit, with the form's values. The native submit event is
-     * prevented, so nothing navigates.
+     * Called on a valid submit, with the form's values. When it is given, the
+     * native submit event is prevented, so nothing navigates. Without it the
+     * submit goes ahead, which is what lets an `action` run (a function `action`
+     * is React 19's).
      */
     onSubmit?: (values: Record<string, unknown>) => void;
     /**

package/dist/components/form/Form.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{cx as t,sheetSectionGapClasses as i}from"../../internal/styles.js";export const Form=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:s,size:a="md",className:n,children:l,...c},f){return r(e,{ref:f,validationMode:o,errors:m,onFormSubmit:r=>s?.(r),className:t("flex flex-col",i[a],n??""),...c,children:l})});
+"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{cx as t,sheetSectionGapClasses as i}from"../../internal/styles.js";import{useStyleDefaults as m}from"../../internal/defaults.js";export const Form=/*@__PURE__*/o.forwardRef(function Form(o,s){const{validationMode:a="onSubmit",errors:n,onSubmit:l,size:f="md",className:c,children:d,...u}=m(o,["size"]);return r(e,{ref:s,validationMode:a,errors:n,onFormSubmit:l?r=>l(r):void 0,className:t("flex flex-col",i[f],c??""),...u,children:d})});

package/dist/components/gallery/Gallery.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { NebaImageFilter, NebaImageFrame, NebaImageProtection, NebaImageWatermark } from '../image/Image.js';
+import type { NebaAspectFit } from '../aspect-ratio/AspectRatio.js';
+import type { NebaImageFilter, NebaImageFlip, NebaImageFrame, NebaImageLetterbox, NebaImagePlaceholderOptions, NebaImagePosition, NebaImageProtection, NebaImageRotation, NebaImageWatermark } from '../image/Image.js';
 import type { NebaResponsive, NebaSize, NebaSlots } from '../../types.js';
 /** The parts a Gallery draws behind its root. */
 export type GallerySlot = 'item' | 'image' | 'caption' | 'title' | 'description';
@@ -46,8 +47,31 @@ export interface NebaGalleryItem {
      * *before* anything has loaded — which is the whole reason it is data rather
      * than a measurement. A set without it falls back to the Gallery's own
      * `ratio`, and comes out as a grid of squares in a masonry's clothing.
+     *
+     * It is the file's proportion as stored: an item turned onto its side with
+     * `rotate` is laid out on its side without anybody working the ratio out
+     * again.
      */
     ratio?: number | string;
+    /**
+     * Turns the picture clockwise, a quarter at a time — for the photograph that
+     * was shot sideways. Follows the picture into the viewer.
+     * @default 0
+     */
+    rotate?: NebaImageRotation;
+    /** Mirrors the picture. Follows it into the viewer. @default 'none' */
+    flip?: NebaImageFlip;
+    /**
+     * Which part of the picture a tile keeps when it crops, or where the space
+     * goes when it does not.
+     * @default 'center'
+     */
+    position?: NebaImagePosition;
+    /**
+     * A small copy of the picture — a URL, a data URI or a `Blob` — to stand in
+     * while the tile's file arrives, instead of a Skeleton.
+     */
+    placeholder?: NebaImagePlaceholderOptions;
     /** How many columns the tile takes in `quilted`. @default 1 */
     cols?: number;
     /** How many rows the tile takes in `quilted`. @default 1 */
@@ -85,15 +109,33 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
     rowHeight?: number;
     /** Rounds the tiles. @default 'md' */
     rounded?: NebaSize | boolean;
+    /**
+     * How a picture fills its tile. `cover` crops it to the tile; `contain` and
+     * `scale-down` keep all of it, which is what a set of product shots on a
+     * contact sheet wants, and leave space that `letterbox` fills.
+     * @default 'cover'
+     */
+    fit?: NebaAspectFit;
+    /** Passed to every tile's picture: what fills the space `fit` leaves. */
+    letterbox?: NebaImageLetterbox | (string & {});
+    /**
+     * When the tiles' files load. `lazy` waits until a tile is near the screen,
+     * so a wall of forty photographs asks for the few a reader can see rather
+     * than all forty at once. Set `eager` when the gallery is the largest thing
+     * above the fold, where a lazy first row arrives later than it should.
+     * @default 'lazy'
+     */
+    loading?: 'lazy' | 'eager';
     /**
      * Where a tile's `title` and `description` go. `below` puts them under the
      * picture, `overlay` writes them across the foot of it, and `hover` is
-     * `overlay` that arrives with the pointer.
+     * `overlay` that arrives with the pointer or the keyboard focus, and stays up
+     * on a screen that cannot hover.
      * @default 'none'
      */
     caption?: NebaGalleryCaption;
     /**
-     * What a tile does under the pointer.
+     * What a tile does under the pointer, and under the keyboard focus.
      *
      * `lift` and `dim` are depth and colour, which is how everything else in the
      * library answers a pointer. `zoom` is the one that scales, and it is the
@@ -133,6 +175,17 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
     /** Class names for the parts behind the root. */
     classNames?: NebaSlots<GallerySlot>;
 }
+/**
+ * Whether an item is turned onto its side, whatever number its turn was written
+ * as. Exported for the viewer, and deliberately left out of the barrel.
+ */
+export declare function isSideways(item: NebaGalleryItem): boolean;
+/**
+ * The shape an item is drawn in: its own ratio, on its side when it is turned.
+ * An item with no ratio takes the Gallery's, which is the layout's shape and has
+ * nothing to turn.
+ */
+export declare function shownRatioOf(item: NebaGalleryItem, fallback: number): number;
 /**
  * A set of pictures, arranged.
  *

package/dist/components/gallery/Gallery.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as i from"react";import{Image as l}from"../image/Image.js";import{responsiveSlots as a,withBaseline as n}from"../../internal/responsive.js";import{useBreakpointValue as o}from"../../hooks/useMediaQuery.js";import{fill as s,galleryMessages as m,useMessages as u}from"../../internal/i18n.js";import{cx as c,hasContent as d,metaTextClasses as f,radiusClasses as p,sheetTitleClasses as g,toLength as h}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const b=i.lazy(()=>import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer}))),v={xs:2,sm:3,lg:4},y={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function w(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[r,i]=e.split("/"),l=void 0===i?Number(r):Number(r)/Number(i);return Number.isFinite(l)&&l>0?l:t}const N={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-focus-visible/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},j={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-focus-visible/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-focus-visible/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/i.forwardRef(function(_,k){const{items:M,layout:q="grid",columns:z,gap:S="md",ratio:$=1,rowHeight:A=220,rounded:C="md",caption:G="none",hover:F="lift",preview:I=!1,onItemSelect:R,filter:V,frame:B,watermark:E,protect:H=!1,label:Q,locale:T,empty:W,className:D,classNames:J,style:K,...L}=x(_,["locale"]),O=u(m,T),[P,U]=i.useState(null),X=n(z??v,2),Y=Math.max(1,o(X)??2),Z="string"==typeof S&&S in y?y[S]:h(S)??y.md,ee=!1===C?"":p[!0===C?"md":C],te=w($,1),re=(i,a,n)=>{const o=d(i.title)||d(i.description),m="none"!==G&&o,u="overlay"===G||"hover"===G,p=e(l,{src:i.src,alt:i.alt,ratio:"grid"===q?$:"quilted"===q?"auto":i.ratio??$,fit:"cover",rounded:!1,filter:V,frame:B,watermark:E,protect:H,className:c("size-full",J?.image),classNames:{image:c("[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",j[F])}}),h=m?t("div",{className:c("min-w-0",u?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===G?"opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",J?.caption),children:[d(i.title)?e("span",{className:c("truncate font-medium",g.sm,u?"":"text-(--neba-fg)",J?.title),children:i.title}):null,d(i.description)?e("span",{className:c("truncate",f.md,u?"text-white/80":"text-(--neba-muted-fg)",J?.description),children:i.description}):null]}):null,x=t("span",{className:c("relative block overflow-hidden",ee,"quilted"===q||"justified"===q?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",N[F]),children:[p,u?h:null]}),b=u||!m?x:t(r,{children:[x,h]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===q?"flex flex-col":"",J?.item),style:n,children:I||R?e("button",{type:"button","aria-label":`${i.alt} — ${s(O.item,{index:String(a+1),total:String(M.length)})}`,className:c("block w-full text-start [outline:none]",I?"cursor-zoom-in":"cursor-pointer","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:2px]",ee,"justified"===q?"flex-1":""),onClick:()=>(e=>{R?.(M[e],e),I&&U(e)})(a),children:b}):b},i.id??i.src)},ie=c("neba-gallery m-0 list-none p-0","justified"===q?"neba-gallery-justified flex flex-wrap":"","masonry"===q?"flex items-start":"","grid"===q||"quilted"===q?"grid":"",D??""),le={gap:Z,...a("cols",X,e=>String(Math.max(1,Math.round(e)))),..."grid"===q||"quilted"===q?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===q?{gridAutoRows:`${A}px`,gridAutoFlow:"dense"}:null,...K};let ae;if("masonry"===q){ae=function(e,t){const r=Array.from({length:t},()=>[]),i=new Array(t).fill(0);return e.forEach((e,l)=>{let a=0;for(let e=1;e<t;e+=1)i[e]<i[a]&&(a=e);r[a].push(l),i[a]+=1/e}),r}(M.map(e=>w(e.ratio,te)),Y).map((t,r)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:Z},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:Z},children:t.map(e=>re(M[e],e,{}))})},r))}else ae="justified"===q?M.map((e,t)=>{const r=w(e.ratio,te);return re(e,t,{flexGrow:r,flexBasis:r*A+"px",maxWidth:"100%"})}):M.map((e,t)=>re(e,t,"quilted"===q?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===M.length&&d(W)?e(r,{children:W}):t(r,{children:[e("ul",{ref:k,role:"list","aria-label":Q??O.label,className:ie,style:le,...L,children:ae}),I?e(i.Suspense,{fallback:null,children:e(b,{items:M,index:P,onIndexChange:U,locale:T,watermark:E,protect:H,messages:O})}):null]})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{Image as o}from"../image/Image.js";import{responsiveSlots as l,withBaseline as a}from"../../internal/responsive.js";import{useBreakpointValue as s}from"../../hooks/useMediaQuery.js";import{fillMessage as n,galleryMessages as u,useMessages as d}from"../../internal/i18n.js";import{cx as m,hasContent as c,metaTextClasses as p,radiusClasses as f,sheetTitleClasses as h,toLength as g,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=r.lazy(()=>import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer}))),w={xs:2,sm:3,lg:4},y={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function N(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[i,r]=e.split("/"),o=void 0===r?Number(i):Number(i)/Number(r);return Number.isFinite(o)&&o>0?o:t}export function isSideways(e){return Math.abs(Math.round((e.rotate??0)/90))%2==1}export function shownRatioOf(e,t){const i=N(e.ratio,t);return void 0!==e.ratio&&isSideways(e)?1/i:i}const j={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-has-[:focus-visible]/tile:[box-shadow:var(--neba-shadow-2)] supports-[not_selector(:has(*))]:group-focus-within/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},$={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-has-[:focus-visible]/tile:[filter:brightness(0.82)] supports-[not_selector(:has(*))]:group-focus-within/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-has-[:focus-visible]/tile:[transform:scale(1.06)] supports-[not_selector(:has(*))]:group-focus-within/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/r.forwardRef(function Gallery(_,k){const{items:M,layout:S="grid",columns:z,gap:R="md",ratio:q=1,rowHeight:G=220,rounded:A="md",fit:C="cover",letterbox:I,loading:O="lazy",caption:F="none",hover:V="lift",preview:B=!1,onItemSelect:E,filter:H,frame:Q,watermark:T,protect:W=!1,label:D,locale:J,empty:K,className:L,classNames:P,style:U,...X}=b(_,["locale"]),Y=d(u,J),Z=r.useId(),[ee,te]=r.useState(null),ie=a(z??w,2),re=Math.max(1,s(ie)??2),oe="string"==typeof R&&R in y?y[R]:g(R)??y.md,le=!1===A?"":f[!0===A?"md":A],ae=N(q,1),se=(r,l,a)=>{const s=c(r.title)||c(r.description),u="none"!==F&&s,d="overlay"===F||"hover"===F,f=`${Z}-${l}-title`,g=`${Z}-${l}-description`,b=`${Z}-${l}-position`,v=n(Y.item,{index:String(l+1),total:String(M.length)}),w=e(o,{src:r.src,alt:r.alt,ratio:"grid"===S?q:"quilted"===S?"auto":void 0!==r.ratio&&isSideways(r)?shownRatioOf(r,ae):r.ratio??q,fit:C,position:r.position,letterbox:I,rotate:r.rotate,flip:r.flip,placeholder:r.placeholder,loading:O,rounded:!1,filter:H,frame:Q,watermark:T,protect:W,className:m("size-full",P?.image),classNames:{image:m("motion-reduce:[transition-duration:0ms]",$[V])}}),y=u?t("div",{className:m("min-w-0",d?m("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===F?"opacity-0 group-hover/tile:opacity-100 group-has-[:focus-visible]/tile:opacity-100 supports-[not_selector(:has(*))]:group-focus-within/tile:opacity-100 [@media(hover:none)]:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",P?.caption),children:[c(r.title)?e("span",{id:f,className:m("truncate font-medium",h.sm,d?"":"text-(--neba-fg)",P?.title),children:r.title}):null,c(r.description)?e("span",{id:g,className:m("truncate",p.md,d?"text-white/80":"text-(--neba-muted-fg)",P?.description),children:r.description}):null]}):null,N=t("span",{className:m("relative block overflow-hidden",le,"quilted"===S||"justified"===S?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",j[V]),children:[w,d?y:null]}),_=d||!u?N:t(i,{children:[N,y]});return e("li",{className:m("group/tile relative m-0 min-w-0 list-none","justified"===S?"flex flex-col":"",P?.item),style:a,children:B||E?t("button",{type:"button","aria-label":u?void 0:`${r.alt} — ${v}`,"aria-labelledby":u?`${c(r.title)?f:g} ${b}`:void 0,"aria-describedby":u&&c(r.title)&&c(r.description)?g:void 0,className:m("block w-full text-start",B?"cursor-zoom-in":"cursor-pointer",x,"focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",le,"justified"===S?"flex-1":""),onClick:()=>(e=>{E?.(M[e],e),B&&te(e)})(l),children:[_,u?e("span",{id:b,hidden:!0,children:v}):null]}):_},r.id??r.src)},ne=m("neba-gallery m-0 list-none p-0","justified"===S?"neba-gallery-justified flex flex-wrap":"","masonry"===S?"flex items-start":"","grid"===S||"quilted"===S?"grid":"",L??""),ue={gap:oe,...l("cols",ie,e=>String(Math.max(1,Math.round(e)))),..."grid"===S||"quilted"===S?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===S?{gridAutoRows:`${G}px`,gridAutoFlow:"dense"}:null,...U};let de;if("masonry"===S){de=function(e,t){const i=Array.from({length:t},()=>[]),r=new Array(t).fill(0);return e.forEach((e,o)=>{let l=0;for(let e=1;e<t;e+=1)r[e]<r[l]&&(l=e);i[l].push(o),r[l]+=1/e}),i}(M.map(e=>shownRatioOf(e,ae)),re).map((t,i)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:oe},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:oe},children:t.map(e=>se(M[e],e,{}))})},i))}else de="justified"===S?M.map((e,t)=>{const i=shownRatioOf(e,ae);return se(e,t,{flexGrow:i,flexBasis:i*G+"px",maxWidth:"100%"})}):M.map((e,t)=>se(e,t,"quilted"===S?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===M.length&&c(K)?e(i,{children:K}):t(i,{children:[e("ul",{ref:k,role:"list","aria-label":D??Y.label,className:ne,style:ue,...X,children:de}),B?e(r.Suspense,{fallback:null,children:e(v,{items:M,index:ee,onIndexChange:te,locale:J,watermark:T,protect:W,messages:Y})}):null]})});

package/dist/components/gallery/GalleryViewer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as a}from"../image/Image.js";import{ChevronIcon as i}from"../../internal/icons.js";import{fill as r}from"../../internal/i18n.js";import{cx as o,metaTextClasses as s}from"../../internal/styles.js";export function GalleryViewer({items:c,index:m,onIndexChange:d,locale:u,watermark:p,protect:f,messages:x}){const h=null!==m,g=null===m?void 0:c[m],v=null===m||m<=0,j=null===m||m>=c.length-1,y=e=>{e>=0&&e<c.length&&d(e)};return e(l,{open:h,onOpenChange:e=>{e||d(null)},size:"xl",locale:u,title:g?.title??g?.alt??"",description:g?.description,onKeyDown:e=>{null===m||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),y(m+1)):"ArrowLeft"===e.key&&(e.preventDefault(),y(m-1)))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[g?e(a,{src:g.full??g.src,alt:g.alt,ratio:"auto",fit:"contain",rounded:"md",watermark:p,protect:f,className:"max-h-[70vh] w-auto",classNames:{image:"max-h-[70vh] w-auto object-contain"}},g.id??g.src):null,c.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:x.previous,disabled:v,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(i,{})}),onClick:()=>y((m??0)-1)}),e(n,{variant:"solid",elevation:1,label:x.next,disabled:j,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(i,{})}),onClick:()=>y((m??0)+1)})]}):null]}),c.length>1?e("p",{className:o("m-0 text-center text-(--neba-muted-fg)",s.md),"aria-live":"polite",children:r(x.item,{index:String((m??0)+1),total:String(c.length)})}):null]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as i}from"../image/Image.js";import{ChevronIcon as a}from"../../internal/icons.js";import{fillMessage as r}from"../../internal/i18n.js";import{cx as o,metaTextClasses as s}from"../../internal/styles.js";import{isSideways as c,shownRatioOf as m}from"./Gallery.js";export function GalleryViewer({items:d,index:u,onIndexChange:p,locale:f,watermark:v,protect:h,messages:x}){const g=null!==u,j=null===u?void 0:d[u],y=null===u||u<=0,w=null===u||u>=d.length-1,N=void 0!==j&&c(j),b=N&&void 0!==j.ratio?m(j,1):null,k=e=>{e>=0&&e<d.length&&p(e)};return e(l,{open:g,onOpenChange:e=>{e||p(null)},size:"xl",locale:f,title:j?.title??j?.alt??"",description:j?.description,onKeyDown:e=>{if(null===u||e.metaKey||e.ctrlKey||e.altKey)return;const t="rtl"===getComputedStyle(e.currentTarget).direction?-1:1;"ArrowRight"===e.key?(e.preventDefault(),k(u+t)):"ArrowLeft"===e.key&&(e.preventDefault(),k(u-t))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[j?e(i,{src:j.full??j.src,alt:j.alt,ratio:b??"auto",fit:"contain",rounded:"md",rotate:j.rotate,flip:j.flip,watermark:v,protect:h,className:N?null===b?"max-h-[70vh]":void 0:"max-h-[70vh] w-auto",classNames:N?void 0:{image:"max-h-[70vh] w-auto object-contain"},style:N?{width:null===b?"100%":`min(100%, calc(70vh * ${b}))`}:void 0},j.id??j.src):null,d.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:x.previous,disabled:y,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(a,{})}),onClick:()=>k((u??0)-1)}),e(n,{variant:"solid",elevation:1,label:x.next,disabled:w,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(a,{})}),onClick:()=>k((u??0)+1)})]}):null]}),d.length>1?e("p",{className:o("m-0 text-center text-(--neba-muted-fg)",s.md),"aria-live":"polite",children:r(x.item,{index:String((u??0)+1),total:String(d.length)})}):null]})})}

package/dist/components/gauge-chart/GaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l}from"../../internal/chart-frame.js";import{arcPath as s,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as f}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as u,useMessages as x}from"../../internal/i18n.js";import{cx as M,hasContent as p,metaTextClasses as b}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";function g(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(y){const{value:k,min:N=0,max:j=100,sweep:$=180,thickness:w=.22,thresholds:z,ticks:S=!1,showRange:W=!0,center:q,caption:A,height:C,format:D,locale:I,label:L,empty:P,size:R="md",variant:B="text",color:F="primary",padded:G=!1,className:Y,...E}=v(y,["size","variant","locale"]),H=n.useRef(null),J=l(H),K=x(u,I),O=n.useCallback(t=>D?d(I,D).format(t):o(t,I),[D,I]),Q=Math.max(1,Math.min(360,$)),T=Q/2,U=-T,V=T,X=j-N,Z=null===k||Number.isNaN(k)||0===X?null:Math.min(1,Math.max(0,(k-N)/X)),_=null===k?F:function(t,a,e){if(!e||0===e.length)return a;let n=a;for(const a of e)t>=a.from&&(n=a.color);return n}(k,F,z),tt="number"==typeof C?C:h[R],at=i[R],et=Math.min(.9,Math.max(.05,w)),nt=T*Math.PI/180,rt=Q>=360?1:Math.max(0,-Math.cos(nt)),lt=Q>=180?1:Math.sin(nt),st=Math.sin(nt),it=-Math.cos(nt),ot=W&&Q<330?[N,j].map(t=>f(O(t),Math.max(0,.28*J),at)):[],ht=ot.reduce((t,a)=>Math.max(t,c(a,at)),0),mt=.35*at,ct=!1===S?0:.85*at,ft=it<=.25,dt=ft?0:.5*at,ut=ft?at:at*(.35+.55*it),xt=ot.length>0?it*dt+ut+.25*at:0,Mt=Math.max(mt,ct),pt=Math.max(mt,ct),bt=Math.max(mt,ct,xt),vt=[(J/2-Mt)/Math.max(.05,lt),(tt-pt-bt)/(1+rt)];if(ht>0&&st>.05){const t=ft?ht/2:ht;vt.push(Math.max(0,J/2-mt-t)/st-dt)}const gt=Math.max(0,Math.min(...vt)),yt=gt*(1-et),kt=J/2,Nt=pt+gt*(1+rt)+bt,jt=pt+gt+Math.max(0,(tt-Nt)/2),$t=gt<=0||0===X,wt=p(A)?1.85*at:0,zt=jt-yt*(1-Math.min(1,rt))/2,St=Math.min(yt,Math.abs(jt-zt)),Wt=Math.min(yt,Math.abs(jt-zt-wt/2)),qt=2*Math.sqrt(Math.max(0,yt*yt-Wt*Wt)),At=q??(null===k?"—":O(k)),Ct="string"==typeof At?c(At,1):0,Dt=Ct>0?Math.max(at,Math.min(2*at,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Ct,St,yt,.42,.86))):2*at,It=!1===S?0:Math.max(2,Math.floor(S));return t(r,{...E,variant:B,color:F,size:R,padded:G,legendSide:"bottom",className:Y,legend:null,table:null,children:t("div",{ref:H,className:"relative w-full",style:{height:tt},role:void 0===L?void 0:"img","aria-label":void 0===L?void 0:null===k?L:`${L}: ${O(k)} / ${O(j)}`,children:$t?t("div",{className:M("flex h-full items-center justify-center text-(--neba-muted-fg)",b[R]),children:P??K.title}):J>0?a(e,{children:[a("svg",{width:J,height:tt,viewBox:`0 0 ${J} ${tt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:s(kt,jt,gt,yt,U,V),fill:`var(--neba-${F}-soft)`}),null!==Z?t("path",{d:m(kt,jt,(gt+yt)/2,U,V),fill:"none",stroke:`var(--neba-${_}-fill)`,strokeWidth:gt-yt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-Z,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,It>0?Array.from({length:It},(a,e)=>{const n=U+Q*e/(It-1),[r,l]=g(kt,jt,gt+.25*at,n),[s,i]=g(kt,jt,gt+.6*at,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ot.length>0?[[ot[0],U,"start"],[ot[1],V,"end"]].map(([a,e,n])=>{const[r,l]=g(kt,jt,gt+dt,e);return t("text",{x:r,y:l+ut,textAnchor:ft?"middle":"start"===n?"end":"start",fontSize:at,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:zt+wt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Dt},children:At}),A?t("span",{className:M("text-(--neba-muted-fg)",b[R]),children:A}):null]})]}):null})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l,chartHeight as s,useMeasuredHeight as i}from"../../internal/chart-frame.js";import{arcPath as o,chartFontSizes as m,compactNumber as h,ringPath as c,textWidth as f,truncate as u}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as x,useMessages as p}from"../../internal/i18n.js";import{thresholdColor as M}from"../../internal/progress.js";import{cx as g,hasContent as b,metaTextClasses as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";function N(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(j){const{value:k,min:w=0,max:z=100,sweep:S=180,thickness:$=.22,thresholds:W,ticks:q=!1,showRange:A=!0,center:B,caption:C,height:D,format:I,locale:L,label:P,empty:R,size:F="md",variant:G="text",color:Y="primary",padded:E=!1,className:H,...J}=y(j,["size","variant","locale"]),K=n.useRef(null),O=l(K),Q=p(x,L),T=n.useCallback(t=>I?d(L,I).format(t):h(t,L),[I,L]),U=Math.max(1,Math.min(360,S)),V=U/2,X=-V,Z=V,_=z-w,tt=null===k||Number.isNaN(k)||0===_?null:Math.min(1,Math.max(0,(k-w)/_)),at=null===k?Y:M(k,Y,W),et=i(K,"string"==typeof D),nt=s(D,F,et),rt=m[F],lt=Math.min(.9,Math.max(.05,$)),st=V*Math.PI/180,it=U>=360?1:Math.max(0,-Math.cos(st)),ot=U>=180?1:Math.sin(st),mt=Math.sin(st),ht=-Math.cos(st),ct=A&&U<330?[w,z].map(t=>u(T(t),Math.max(0,.28*O),rt)):[],ft=ct.reduce((t,a)=>Math.max(t,f(a,rt)),0),ut=.35*rt,dt=!1===q?0:.85*rt,xt=ht<=.25,pt=xt?0:.5*rt,Mt=xt?rt:rt*(.35+.55*ht),gt=ct.length>0?ht*pt+Mt+.25*rt:0,bt=Math.max(ut,dt),vt=Math.max(ut,dt),yt=Math.max(ut,dt,gt),Nt=[(O/2-bt)/Math.max(.05,ot),(nt-vt-yt)/(1+it)];if(ft>0&&mt>.05){const t=xt?ft/2:ft;Nt.push(Math.max(0,O/2-ut-t)/mt-pt)}const jt=Math.max(0,Math.min(...Nt)),kt=jt*(1-lt),wt=O/2,zt=vt+jt*(1+it)+yt,St=vt+jt+Math.max(0,(nt-zt)/2),$t=O>0,Wt=0===_||$t&&jt<=0,qt=b(C)?1.85*rt:0,At=St-kt*(1-Math.min(1,it))/2,Bt=Math.min(kt,Math.abs(St-At)),Ct=Math.min(kt,Math.abs(St-At-qt/2)),Dt=2*Math.sqrt(Math.max(0,kt*kt-Ct*Ct)),It=B??(null===k?"—":T(k)),Lt="string"==typeof It?f(It,1):0,Pt=Lt>0?Math.max(rt,Math.min(2*rt,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Lt,Bt,kt,.42,.86))):2*rt,Rt=!1===q?0:Math.max(2,Math.floor(q));return t(r,{...J,variant:G,color:Y,size:F,padded:E,legendSide:"bottom",className:H,legend:null,table:null,children:t("div",{ref:K,className:"relative w-full",style:{height:"string"==typeof D?D:nt},...void 0===P?{}:null===tt||null===k?{role:"img","aria-label":P}:{role:"meter","aria-label":P,"aria-valuenow":k,"aria-valuemin":w,"aria-valuemax":z,"aria-valuetext":["string"==typeof It||"number"==typeof It?String(It):T(k),"string"==typeof C||"number"==typeof C?String(C):""].filter(Boolean).join(" ")},children:Wt?t("div",{className:g("flex h-full items-center justify-center text-(--neba-muted-fg)",v[F]),children:R??Q.title}):$t?a(e,{children:[a("svg",{width:O,height:nt,viewBox:`0 0 ${O} ${nt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:o(wt,St,jt,kt,X,Z),fill:`var(--neba-${Y}-soft)`}),null!==tt?t("path",{d:c(wt,St,(jt+kt)/2,X,Z),fill:"none",stroke:`var(--neba-${at}-fill)`,strokeWidth:jt-kt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,Rt>0?Array.from({length:Rt},(a,e)=>{const n=X+U*e/(Rt-1),[r,l]=N(wt,St,jt+.25*rt,n),[s,i]=N(wt,St,jt+.6*rt,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ct.length>0?[[ct[0],X,"start"],[ct[1],Z,"end"]].map(([a,e,n])=>{const[r,l]=N(wt,St,jt+pt,e);return t("text",{x:r,y:l+Mt,textAnchor:xt?"middle":"start"===n?"end":"start",fontSize:rt,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:At+qt/2,maxWidth:Dt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Pt},children:It}),C?t("span",{className:g("text-(--neba-muted-fg)",v[F]),children:C}):null]})]}):a("div",{className:"flex h-full flex-col items-center justify-center gap-0.5 text-center",children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:2*rt},children:It}),C?t("span",{className:g("text-(--neba-muted-fg)",v[F]),children:C}):null]})})})}

package/dist/components/grid/Grid.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { NebaAlignSelf, NebaResponsive } from '../../types.js';
+/**
+ * How wide a cell is: a share of the container's columns, the width of what is
+ * in it, or the space the row has left.
+ */
+export type GridSpan = number | 'auto' | 'grow';
 export interface GridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many of the container's columns the item takes. Read against the
@@ -12,9 +17,14 @@ export interface GridProps extends React.ComponentPropsWithoutRef<'div'> {
      * breakpoint up, so two of them usually describe a whole layout.
      *
      * A span wider than the row is clamped to the row rather than overflowing.
+     *
+     * Two widths are not a share of twelve, and both are keywords: `'auto'` is
+     * as wide as the item's own contents — an icon, a chip, a button at the end
+     * of a row — and `'grow'` is that plus whatever the row has left over, which
+     * is how a title sits between the two. They mix with numbers in one map.
      * @default the container's full width
      */
-    span?: NebaResponsive<number>;
+    span?: NebaResponsive<GridSpan>;
     /**
      * Columns left empty *before* the item — space pushed in ahead of it, not an
      * absolute position in the row. First in a twelve-column row, `offset={4}`

package/dist/components/grid/Grid.js

@@ -1 +1 @@
-"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as n,spanValue as t}from"../../internal/grid.js";import{responsiveSlots as i}from"../../internal/responsive.js";import{cx as o}from"../../internal/styles.js";export const Grid=/*@__PURE__*/r.forwardRef(function({span:r,offset:a,alignSelf:f,render:l,className:m,style:p,children:c,...d},u){const g=o("neba-grid-item",f?s[f]:"",m??"");return e({render:l,ref:u,props:{className:g,style:{...i("span",r,t),...i("offset",a,n),...p},children:c,...d}})});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignSelfClasses as n,offsetValue as t,spanGrow as s,spanValue as o,spanWidth as i}from"../../internal/grid.js";import{breakpointMap as f,responsiveSlots as a}from"../../internal/responsive.js";import{cx as c}from"../../internal/styles.js";function l(r){const e=f(r),n=Object.entries(e),t={};let c=!1;for(const[r,e]of n)"number"==typeof e?t[r]=e:c=!0;const l=a("span",t,o);return c?{...l,...a("span-w",e,i),...a("grow",e,s)}:l}export const Grid=/*@__PURE__*/r.forwardRef(function Grid({span:r,offset:s,alignSelf:o,render:i,className:f,style:m,children:p,...d},u){const b=c("neba-grid-item",o?n[o]:"",f??"");return e({render:i,ref:u,props:{className:b,style:{...l(r),...a("offset",s,t),...m},children:p,...d}})});

package/dist/components/grid-container/GridContainer.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as t,columnCount as a,justifyContentClasses as s,spacingValue as i}from"../../internal/grid.js";import{overlayResponsive as o,responsiveSlots as p,withBaseline as l}from"../../internal/responsive.js";import{boxPaddingClasses as m}from"../box/Box.js";import{cx as d}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const GridContainer=/*@__PURE__*/e.forwardRef(function(e,c){const{columns:g,spacing:u,rowSpacing:x,columnSpacing:y,justifyContent:j,alignItems:w,alignContent:b,wrap:C=!0,padded:h=!0,size:z="md",density:N="default",render:S,className:v,style:B,children:G,...I}=f(e,["size","density"]),R=d("neba-grid flex",C?"flex-wrap":"flex-nowrap","gap-x-(--n-gap-x) gap-y-(--n-gap-y)",h?m[N][z]:"",j?s[j]:"",w?t[w]:"",b?n[b]:"",v??"");return r({render:S,ref:c,props:{className:R,style:{...p("cols",l(g,12),a),...p("gap-x",o(l(u,2),y),i),...p("gap-y",o(l(u,2),x),i),...B},children:G,...I}})});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as t,columnCount as a,justifyContentClasses as i,spacingValue as o}from"../../internal/grid.js";import{overlayResponsive as s,responsiveSlots as p,withBaseline as l}from"../../internal/responsive.js";import{boxPaddingClasses as m}from"../box/Box.js";import{cx as d}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const GridContainer=/*@__PURE__*/r.forwardRef(function GridContainer(r,c){const{columns:g,spacing:u,rowSpacing:x,columnSpacing:y,justifyContent:j,alignItems:w,alignContent:C,wrap:b=!0,padded:h=!0,size:z="md",density:G="default",render:N,className:S,style:v,children:B,...I}=f(r,["size","density"]),R=d("neba-grid flex",b?"flex-wrap":"flex-nowrap","gap-x-(--n-gap-x) gap-y-(--n-gap-y)",h?m[G][z]:"",j?i[j]:"",w?t[w]:"",C?n[C]:"",S??"");return e({render:N,ref:c,props:{className:R,style:{...p("cols",l(g,12),a),...p("gap-x",s(l(u,2),y),o),...p("gap-y",s(l(u,2),x),o),...v},children:B,...I}})});