neba 1.13.0 → 1.16.0

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.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ChartBaseProps } from '../../internal/chart-frame.js';
 import type { NebaThreshold } from '../../types.js';
-export interface GaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tooltip'> {
+export interface GaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tooltip' | 'exportable' | 'exportFileName' | 'onExport'> {
     /**
      * The reading. `null` draws the dial with nothing on it, which is the honest
      * picture of an instrument that has not been told anything.

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

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}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(e){const r=f(e),n=Object.entries(r),t={};let c=!1;for(const[e,r]of n)"number"==typeof r?t[e]=r:c=!0;const l=a("span",t,o);return c?{...l,...a("span-w",r,i),...a("grow",r,s)}:l}export const Grid=/*@__PURE__*/e.forwardRef(function({span:e,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 r({render:i,ref:u,props:{className:b,style:{...l(e),...a("offset",s,t),...m},children:p,...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}})});

package/dist/components/header/Header.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{boxPaddingXClasses as r}from"../box/Box.js";import{PageLayoutContext as s}from"../../internal/page-layout.js";import{cx as i,hasContent as l,measureValue as m,surfaceClasses as o,surfaceSlots as d,transitionClasses as c}from"../../internal/styles.js";import{responsiveSlots as f}from"../../internal/responsive.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const p={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-20"},u={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},g={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},b={solid:[o,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[o,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},h={static:"",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},v={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},y={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const Header=/*@__PURE__*/a.forwardRef(function(o,j){const{brand:w,actions:N,align:k="start",position:z="sticky",variant:C="outline",size:B="md",color:H="primary",density:R="default",elevation:W=0,divider:q=!0,maxWidth:A,padded:D=!0,label:E,render:F,className:G,style:I,children:J,...K}=x(o,["size","density","variant"]),L=a.useContext(s),{register:M}=L,O=a.useCallback(e=>{M("header",e),"function"==typeof j?j(e):j&&(j.current=e)},[M,j]),P=i("w-full min-w-0",b[C],q?"border-b [border-color:var(--n-line)]":"",h[z],c,G);return n({render:F??e("header",{}),ref:O,props:{"aria-label":E,className:P,style:{...d(H,W),...I},children:t("div",{className:i("flex w-full items-center",p[B],g[B],D?r[R][B]:"","neba-measure mx-auto max-w-(--n-max-w)"),style:f("max-w",A,m),children:[l(w)?e("div",{className:i("flex min-w-0 items-center",v[k],u[B]),children:w}):"center"===k?e("div",{"aria-hidden":"true",className:v[k]}):null,l(J)?e("div",{className:i(y[k],u[B]),children:J}):null,l(N)?e("div",{className:i("flex min-w-0 items-center justify-end",v[k],u[B]),children:N}):"center"===k?e("div",{"aria-hidden":"true",className:v[k]}):null]}),...K}})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as n}from"../box/Box.js";import{PageLayoutContext as s,PageLayoutSlotContext as i}from"../../internal/page-layout.js";import{cx as l,hasContent as m,measureValue as o,surfaceClasses as d,surfaceSlots as c,transitionClasses as x}from"../../internal/styles.js";import{responsiveSlots as f}from"../../internal/responsive.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const u={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-20"},g={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},h={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},b={solid:[d,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},v={static:"",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},y={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},j={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const Header=/*@__PURE__*/a.forwardRef(function Header(d,w){const{brand:N,actions:k,align:z="start",position:C="sticky",variant:H="outline",size:B="md",color:R="primary",density:W="default",elevation:q=0,divider:A=!0,maxWidth:D,padded:E=!0,label:F,render:G,className:I,style:J,children:K,...L}=p(d,["size","density","variant"]),M=a.useContext(s),{register:O}=M,P="header"===a.useContext(i),Q=a.useCallback(e=>{P&&O("header",e),"function"==typeof w?w(e):w&&(w.current=e)},[O,w,P,C]),S=l("w-full min-w-0",b[H],A?"border-b [border-color:var(--n-line)]":"",v[C],x,I);return r({render:G??e("header",{}),ref:Q,props:{"aria-label":F,className:S,style:{...c(R,q),...J},children:t("div",{className:l("flex w-full items-center",u[B],h[B],E?n[W][B]:"","neba-measure mx-auto max-w-(--n-max-w)"),style:f("max-w",D,o),children:[m(N)?e("div",{className:l("flex min-w-0 items-center",y[z],g[B]),children:N}):"center"===z?e("div",{"aria-hidden":"true",className:y[z]}):null,m(K)?e("div",{className:l(j[z],g[B]),children:K}):null,m(k)?e("div",{className:l("flex min-w-0 items-center justify-end",y[z],g[B]),children:k}):"center"===z?e("div",{"aria-hidden":"true",className:y[z]}):null]}),...L}})});

package/dist/components/heatmap-chart/HeatmapChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ChartScaleKind } from '../../internal/chart.js';
-import type { NebaChartCategory, NebaChartLegend, NebaChartSeries } from '../../types.js';
+import type { NebaChartAxis, NebaChartCategory, NebaChartLegend, NebaChartSeries } from '../../types.js';
 import type { ChartBaseProps } from '../../internal/chart-frame.js';
 export interface HeatmapChartProps extends Omit<ChartBaseProps, 'legend'> {
     /**
@@ -50,6 +50,25 @@ export interface HeatmapChartProps extends Omit<ChartBaseProps, 'legend'> {
     valueLabels?: 'none' | 'all';
     /** Where the scale legend sits. `false` leaves it off. */
     legend?: boolean | Pick<NebaChartLegend, 'side' | 'align'>;
+    /**
+     * The column axis — the names along the bottom of a `grid`.
+     *
+     * Both of a heatmap's axes are **category** axes: what the magnitude is drawn
+     * on is the colour ramp, which the scale legend describes rather than an
+     * axis. So `min`, `max`, `tickCount` and `grid` mean nothing here and are not
+     * read; the chart's own `min` and `max` are the ones that set the ramp.
+     * `hidden`, `label`, `tickFormat`, `tickAngle` and `thickness` all work.
+     *
+     * A `treemap` names its tiles on their own faces, so it has no axes and reads
+     * neither of these.
+     */
+    xAxis?: NebaChartAxis;
+    /**
+     * The row axis — the names down the side of a `grid`. The same five fields as
+     * `xAxis`, less `tickAngle`: a row already has a line of its own, and turning
+     * its name would take room it is not short of.
+     */
+    yAxis?: NebaChartAxis;
 }
 /**
  * A magnitude per cell, coloured rather than measured.