neba 1.10.0 → 1.12.0

package/dist/internal/i18n.d.ts

@@ -78,6 +78,25 @@ export interface ActionMessages {
 }
 /** The `action` namespace, as Alert, Chip, Combobox, Dialog, Drawer, Popover and Toast read it. */
 export declare const actionMessages: MessageTable<ActionMessages>;
+/** ConfirmProvider. */
+export interface ConfirmMessages {
+    /** The button that answers yes. */
+    confirm: string;
+    /**
+     * And the one that answers no — which is also what Escape and a click on the
+     * backdrop mean, so it is the label on the way out rather than a third option.
+     */
+    cancel: string;
+}
+/**
+ * The `confirm` namespace.
+ *
+ * Its own rather than two more keys on `action`, which holds the words on four
+ * different × buttons. A confirm's two buttons are a question being answered,
+ * not a thing being dismissed, and a namespace a Chip pulls in for the word
+ * "Remove" should not also carry them.
+ */
+export declare const confirmMessages: MessageTable<ConfirmMessages>;
 /** TextLink. */
 export interface LinkMessages {
     /**
@@ -160,6 +179,8 @@ export interface TableMessages {
      * same nothing to report and no chrome of its own to say it with.
      */
     empty: string;
+    /** The button that writes what is on screen out as a file. */
+    exportCsv: string;
 }
 /** The `table` namespace, as Table and DataTable read it. */
 export declare const tableMessages: MessageTable<TableMessages>;
@@ -267,6 +288,24 @@ export interface CarouselMessages {
 }
 /** The `carousel` namespace, as Carousel read it. */
 export declare const carouselMessages: MessageTable<CarouselMessages>;
+/**
+ * The gallery, and the viewer a tile opens into.
+ *
+ * A Carousel's words are next to these and are deliberately not reused: a
+ * carousel moves between *slides* and this moves between pictures, and a
+ * screen reader saying "next slide" over a wall of photographs is describing
+ * something the reader is not looking at.
+ */
+export interface GalleryMessages {
+    /** Names the list, when the caller did not. */
+    label: string;
+    /** One tile's position. `{index}` and `{total}` are replaced with the numbers. */
+    item: string;
+    previous: string;
+    next: string;
+}
+/** The `gallery` namespace, as Gallery and its viewer read it. */
+export declare const galleryMessages: MessageTable<GalleryMessages>;
 /**
  * The charts.
  *
@@ -522,6 +561,8 @@ export interface NebaLocale {
     pagination?: Partial<PaginationMessages>;
     /** Carousel. */
     carousel?: Partial<CarouselMessages>;
+    /** Gallery. */
+    gallery?: Partial<GalleryMessages>;
     /** Chart. */
     chart?: Partial<ChartMessages>;
     /** Scroll. */
@@ -546,6 +587,8 @@ export interface NebaLocale {
     code?: Partial<CodeMessages>;
     /** Steps. */
     steps?: Partial<StepsMessages>;
+    /** Confirm. */
+    confirm?: Partial<ConfirmMessages>;
 }
 /**
  * Teaches the library a language.

package/dist/internal/i18n.js

@@ -1 +1 @@
-import*as e from"react";export function fill(e,s){return e.replace(/\{(\w+)\}/g,(e,t)=>s[t]??e)}export const actionMessages={"":{close:"Close",dismiss:"Dismiss",clear:"Clear",remove:"Remove"}};export const linkMessages={"":{newTab:"(opens in a new tab)"}};export const spoilerMessages={"":{reveal:"Reveal",hide:"Hide",notice:"This may contain spoilers"}};export const chatMessages={"":{sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",typing:"Typing…"}};export const emptyMessages={"":{title:"Nothing here"}};export const tableMessages={"":{search:"Search",selectAll:"Select all rows",selectRow:"Select row",rowsPerPage:"Rows per page",range:"{start}–{end} of {total}",selected:"{count} selected",empty:"No data"}};export const colorMessages={"":{area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Preset colours",clear:"Clear",empty:"Choose a colour"}};export const ratingMessages={"":{label:"Rating",value:"{value} out of {max}",empty:"No rating"}};export const numberMessages={"":{increase:"Increase",decrease:"Decrease"}};export const paginationMessages={"":{label:"Pagination",page:"Page {page}",status:"Page {page} of {total}",previous:"Previous page",next:"Next page",first:"First page",last:"Last page"}};export const carouselMessages={"":{label:"Carousel",slide:"Slide {index} of {total}",previous:"Previous slide",next:"Next slide"}};export const chartMessages={"":{label:"Chart"}};export const scrollMessages={"":{label:"Scrollable content",previous:"Scroll back",next:"Scroll forward"}};export const breadcrumbMessages={"":{label:"Breadcrumb",expand:"Show hidden steps"}};export const commandMessages={"":{label:"Command palette",search:"Type a command or search…",empty:"No commands found"}};export const transferMessages={"":{source:"Available",target:"Selected",toTarget:"Move to selected",toSource:"Move to available",search:"Search",selectAll:"Select all",empty:"Nothing here"}};export const anchorMessages={"":{label:"On this page"}};export const comboboxMessages={"":{empty:"No matches",remove:"Remove {label}"}};export const overlayMessages={"":{label:"Overlay"}};export const windowMessages={"":{minimize:"Minimize",maximize:"Maximize",restore:"Restore",resize:"Resize window"}};export const layoutMessages={"":{skipToContent:"Skip to content",sidebar:"Sidebar",openSidebar:"Open sidebar",closeSidebar:"Close sidebar",resizeSidebar:"Resize sidebar"}};export const codeMessages={"":{code:"Code",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",prompt:"Prompt"}};export const stepsMessages={"":{previous:"Previous",next:"Next",done:"Done",skip:"Skip",restart:"Start over",completed:"All steps complete",steps:"Steps",position:"{index} of {total}",step:"Step {index}: {title}"}};const s={zh:"zh-hans","zh-cn":"zh-hans","zh-my":"zh-hans","zh-sg":"zh-hans","zh-hk":"zh-hant","zh-mo":"zh-hant","zh-tw":"zh-hant"};const t=new WeakMap;export function resolveMessages(e,o){const a=e[""],r=o?.trim()??"";if(!r)return a;let n=t.get(e);n||(n=new Map,t.set(e,n));const l=n.get(r);if(l)return l;const c=function(e){const s=e.toLowerCase().split(/[-_]/).filter(Boolean),t=s[0];if(!t)return[];const o=s.slice(1),a=o.find(e=>/^[a-z]{4}$/.test(e)),r=o.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[a?`${t}-${a}`:"",r?`${t}-${r}`:"",t].filter(Boolean)}(r).map(t=>{const o=s[t];return e[t]??(o?e[o]:void 0)}).find(Boolean),i=c?{...a,...c}:a;return n.set(r,i),i}export function useMessages(s,t){return e.useMemo(()=>resolveMessages(s,t),[s,t])}export function fillMessage(e,s){return e.replace(/\{(\w+)\}/g,(e,t)=>s[t]??e)}const o={action:actionMessages,link:linkMessages,spoiler:spoilerMessages,chat:chatMessages,empty:emptyMessages,table:tableMessages,color:colorMessages,rating:ratingMessages,number:numberMessages,pagination:paginationMessages,carousel:carouselMessages,chart:chartMessages,scroll:scrollMessages,breadcrumb:breadcrumbMessages,anchor:anchorMessages,transfer:transferMessages,command:commandMessages,combobox:comboboxMessages,overlay:overlayMessages,window:windowMessages,layout:layoutMessages,code:codeMessages,steps:stepsMessages};export function registerMessages(e,s){const a=e.trim().toLowerCase();for(const[e,r]of Object.entries(s)){const s=o[e];s&&r&&(s[a]=r,t.delete(s))}}
+import*as e from"react";export function fill(e,s){return e.replace(/\{(\w+)\}/g,(e,o)=>s[o]??e)}export const actionMessages={"":{close:"Close",dismiss:"Dismiss",clear:"Clear",remove:"Remove"}};export const confirmMessages={"":{confirm:"Confirm",cancel:"Cancel"}};export const linkMessages={"":{newTab:"(opens in a new tab)"}};export const spoilerMessages={"":{reveal:"Reveal",hide:"Hide",notice:"This may contain spoilers"}};export const chatMessages={"":{sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",typing:"Typing…"}};export const emptyMessages={"":{title:"Nothing here"}};export const tableMessages={"":{search:"Search",selectAll:"Select all rows",selectRow:"Select row",rowsPerPage:"Rows per page",range:"{start}–{end} of {total}",selected:"{count} selected",empty:"No data",exportCsv:"Export CSV"}};export const colorMessages={"":{area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Preset colours",clear:"Clear",empty:"Choose a colour"}};export const ratingMessages={"":{label:"Rating",value:"{value} out of {max}",empty:"No rating"}};export const numberMessages={"":{increase:"Increase",decrease:"Decrease"}};export const paginationMessages={"":{label:"Pagination",page:"Page {page}",status:"Page {page} of {total}",previous:"Previous page",next:"Next page",first:"First page",last:"Last page"}};export const carouselMessages={"":{label:"Carousel",slide:"Slide {index} of {total}",previous:"Previous slide",next:"Next slide"}};export const galleryMessages={"":{label:"Gallery",item:"Image {index} of {total}",previous:"Previous image",next:"Next image"}};export const chartMessages={"":{label:"Chart"}};export const scrollMessages={"":{label:"Scrollable content",previous:"Scroll back",next:"Scroll forward"}};export const breadcrumbMessages={"":{label:"Breadcrumb",expand:"Show hidden steps"}};export const commandMessages={"":{label:"Command palette",search:"Type a command or search…",empty:"No commands found"}};export const transferMessages={"":{source:"Available",target:"Selected",toTarget:"Move to selected",toSource:"Move to available",search:"Search",selectAll:"Select all",empty:"Nothing here"}};export const anchorMessages={"":{label:"On this page"}};export const comboboxMessages={"":{empty:"No matches",remove:"Remove {label}"}};export const overlayMessages={"":{label:"Overlay"}};export const windowMessages={"":{minimize:"Minimize",maximize:"Maximize",restore:"Restore",resize:"Resize window"}};export const layoutMessages={"":{skipToContent:"Skip to content",sidebar:"Sidebar",openSidebar:"Open sidebar",closeSidebar:"Close sidebar",resizeSidebar:"Resize sidebar"}};export const codeMessages={"":{code:"Code",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",prompt:"Prompt"}};export const stepsMessages={"":{previous:"Previous",next:"Next",done:"Done",skip:"Skip",restart:"Start over",completed:"All steps complete",steps:"Steps",position:"{index} of {total}",step:"Step {index}: {title}"}};const s={zh:"zh-hans","zh-cn":"zh-hans","zh-my":"zh-hans","zh-sg":"zh-hans","zh-hk":"zh-hant","zh-mo":"zh-hant","zh-tw":"zh-hant"};const o=new WeakMap;export function resolveMessages(e,t){const a=e[""],r=t?.trim()??"";if(!r)return a;let n=o.get(e);n||(n=new Map,o.set(e,n));const l=n.get(r);if(l)return l;const c=function(e){const s=e.toLowerCase().split(/[-_]/).filter(Boolean),o=s[0];if(!o)return[];const t=s.slice(1),a=t.find(e=>/^[a-z]{4}$/.test(e)),r=t.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[a?`${o}-${a}`:"",r?`${o}-${r}`:"",o].filter(Boolean)}(r).map(o=>{const t=s[o];return e[o]??(t?e[t]:void 0)}).find(Boolean),i=c?{...a,...c}:a;return n.set(r,i),i}export function useMessages(s,o){return e.useMemo(()=>resolveMessages(s,o),[s,o])}export function fillMessage(e,s){return e.replace(/\{(\w+)\}/g,(e,o)=>s[o]??e)}const t={action:actionMessages,confirm:confirmMessages,link:linkMessages,spoiler:spoilerMessages,chat:chatMessages,empty:emptyMessages,table:tableMessages,color:colorMessages,rating:ratingMessages,number:numberMessages,pagination:paginationMessages,carousel:carouselMessages,gallery:galleryMessages,chart:chartMessages,scroll:scrollMessages,breadcrumb:breadcrumbMessages,anchor:anchorMessages,transfer:transferMessages,command:commandMessages,combobox:comboboxMessages,overlay:overlayMessages,window:windowMessages,layout:layoutMessages,code:codeMessages,steps:stepsMessages};export function registerMessages(e,s){const a=e.trim().toLowerCase();for(const[e,r]of Object.entries(s)){const s=t[e];s&&r&&(s[a]=r,o.delete(s))}}

package/dist/internal/keys.d.ts

@@ -0,0 +1,92 @@
+/**
+ * A key combination, read rather than drawn.
+ *
+ * This is in `internal/` for `button-group.ts`'s reason with a sharper edge on
+ * it. `Shortcut` *draws* `Mod+K` and `CommandPalette` *binds* it, and the two
+ * were written separately — so the drawing side understood `Cmd`, `Command`,
+ * `Meta` and `Esc` and the binding side did not. `<Shortcut keys="Cmd+K" />`
+ * put a correct key cap on the screen over a shortcut that could never fire,
+ * which is the worst shape this bug can take: the label is the only evidence a
+ * reader has that the key exists at all.
+ *
+ * So the split is by job rather than by component. Everything that decides
+ * *which key a token means* is here and both sides read it. What a key *looks
+ * like* — `⌘`, `⇧`, the arrow glyphs — stays in `Shortcut`, because a TextField
+ * that binds `Mod+Enter` has no business carrying a table of Mac glyphs.
+ *
+ * Nothing here allocates at import time beyond two small object literals, and
+ * the platform is worked out once for the page.
+ */
+import type * as React from 'react';
+import type { NebaShortcuts } from '../types.js';
+/** The three platforms a combination can be named for, once `auto` is resolved. */
+export type ResolvedOS = 'mac' | 'windows' | 'linux';
+/**
+ * Splits the string form. Empty segments are what `'Ctrl++'` leaves behind, and
+ * dropping them is why the array form exists for that case.
+ */
+export declare function tokenize(keys: string | string[]): string[];
+/**
+ * One token reduced to the name this file knows it by.
+ *
+ * It also folds a real `KeyboardEvent.key`, which is what lets the two sides of
+ * a comparison meet in the middle: a caller writes `Esc` and the browser
+ * reports `Escape`, and both arrive here as `escape`. The space bar is the one
+ * key whose `key` is punctuation, so it is named before the punctuation is
+ * stripped.
+ */
+export declare function canonicalKey(token: string): string;
+/**
+ * What the browser says it is running on.
+ *
+ * `userAgentData.platform` is the modern spelling and `navigator.platform` the
+ * deprecated one every browser still answers; the user agent string is the last
+ * resort, and *last resort* is the load-bearing word. The three are asked in
+ * order and the first that says anything at all is the answer — never all three
+ * matched at once, which is what this used to do.
+ *
+ * A union of the three can only ever be wrong in one direction: towards `mac`.
+ * A WebKit build on Linux or Windows reports its own platform and a *Safari on
+ * macOS* user agent string, so a haystack holding both reads as a Mac, and
+ * `Mod` then binds Command on a keyboard that has no Command key — with
+ * `Shortcut` drawing a ⌘ over it. That is this file's own opening paragraph
+ * happening again, one layer down.
+ *
+ * The rule is a pure function so it can be asserted on directly: the browser
+ * this suite runs in only ever reports one of these combinations, and the one
+ * that broke is not it.
+ */
+export declare function resolveOS(userAgentDataPlatform: string | undefined, platform: string | undefined, userAgent: string | undefined): ResolvedOS;
+export declare function readOS(): ResolvedOS;
+/**
+ * Enough of a keyboard event to decide a combination — so one function serves
+ * both a DOM `KeyboardEvent` and React's synthetic one.
+ */
+export interface KeyPress {
+    key: string;
+    code: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+    shiftKey: boolean;
+}
+/**
+ * Does this keystroke satisfy `Mod+Shift+P`?
+ *
+ * The modifiers are matched **exactly**, not as a subset: a shortcut names the
+ * modifiers it wants, so `Enter` does not fire when `Mod+Enter` was pressed.
+ * That is what makes a `shortcuts` map unambiguous — at most one entry can
+ * match a keystroke, unless a caller spelled the same combination twice.
+ */
+export declare function matchesShortcut(event: KeyPress, shortcut: string): boolean;
+/**
+ * The `shortcuts` map and the caller's own `onKeyDown`, as the one handler a
+ * control can carry.
+ *
+ * The map is checked first and every matching entry runs, so a caller who
+ * spelled one combination two ways gets both rather than an arbitrary one; then
+ * `onKeyDown` runs, and can read `event.defaultPrevented` to see what the map
+ * decided. `undefined` when there is nothing to bind, so a field with neither
+ * prop attaches no listener at all.
+ */
+export declare function keyHandler<E extends Element>(shortcuts: NebaShortcuts<E> | undefined, onKeyDown?: React.KeyboardEventHandler<E>): React.KeyboardEventHandler<E> | undefined;

package/dist/internal/keys.js

@@ -0,0 +1 @@
+const t={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock",spacebar:"space",up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright"};export function tokenize(t){return Array.isArray(t)?t.map(t=>t.trim()).filter(Boolean):t.split("+").map(t=>t.trim()).filter(Boolean)}export function canonicalKey(e){if(" "===e)return"space";const r=e.toLowerCase().replace(/[\s_-]/g,"");return t[r]??r}export function resolveOS(t,e,r){const n=t||e||r||"";return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}let e=null;export function readOS(){return e??=function(){if("undefined"==typeof navigator)return"windows";const t=navigator.userAgentData;return resolveOS(t?.platform,navigator.platform,navigator.userAgent)}(),e}export function matchesShortcut(t,e){const r=tokenize(e).map(canonicalKey);if(0===r.length)return!1;const n={ctrl:!1,meta:!1,alt:!1,shift:!1},o="mac"===readOS();for(const t of r.slice(0,-1))if("mod"===t)n[o?"meta":"ctrl"]=!0;else{if("meta"!==t&&"ctrl"!==t&&"alt"!==t&&"shift"!==t)return!1;n[t]=!0}return t.ctrlKey===n.ctrl&&t.metaKey===n.meta&&t.altKey===n.alt&&t.shiftKey===n.shift&&function(t,e){if(canonicalKey(t.key)===e)return!0;if(1===e.length){if(e>="a"&&e<="z")return t.code===`Key${e.toUpperCase()}`;if(e>="0"&&e<="9")return t.code===`Digit${e}`}return!1}(t,r[r.length-1])}export function keyHandler(t,e){return t?r=>{for(const[e,n]of Object.entries(t))matchesShortcut(r,e)&&n(r);e?.(r)}:e}

package/dist/internal/media.d.ts

@@ -1,9 +1,43 @@
+import type { NebaBreakpoint } from '../types.js';
 /** Subscribes to one query. A no-op where there is no window to ask. */
 export declare function subscribeToQuery(query: string, onChange: () => void): () => void;
 /** The current answer. Reads a live object rather than building one. */
 export declare function queryMatches(query: string): boolean;
 /** A server has no window, so nothing matches. */
 export declare function noMatchOnServer(): boolean;
+/**
+ * The five widths, written once and read in both directions.
+ *
+ * They are Tailwind's defaults, which is what makes a Neba layout and a `md:`
+ * utility change at the same moment — and they are here rather than in
+ * `page-layout.ts`, where they used to be, because a layout asks "is the window
+ * *narrower* than this" and a caller asks "is it *at least* this". Two
+ * questions, one table: a second copy would be a second chance for the two to
+ * disagree about what `md` is.
+ *
+ * This copy is the fallback rather than the source. `styles.css` publishes the
+ * same four widths as `--neba-breakpoint-*`, filled in from Tailwind's own
+ * theme at build time, and `readBreakpoints` below prefers those — so a
+ * consumer who moves `--breakpoint-md` moves the CSS and this together instead
+ * of leaving the two to disagree silently. What is written here is what a
+ * server, and a page whose stylesheet has not arrived, has to answer with.
+ */
+export declare const breakpointWidths: Record<NebaBreakpoint, string>;
+/** Narrower than this breakpoint. `xs` has nothing below it, so it is `null`. */
+export declare function widthBelow(breakpoint: NebaBreakpoint): string | null;
+/** At this breakpoint or wider — the direction a Tailwind `md:` variant means. */
+export declare function widthAtLeast(breakpoint: NebaBreakpoint): string;
+/**
+ * One media query, as a boolean React can re-render on.
+ *
+ * `useSyncExternalStore` rather than state plus an effect, for the reason the
+ * whole module exists: a media query *is* an external store with a server
+ * answer, and reading it in an effect renders every subscriber once with the
+ * wrong answer and then again with the right one. `null` is a query that is
+ * always false and subscribes to nothing, which is what a breakpoint with
+ * nothing below it needs.
+ */
+export declare function useMediaQuery(query: string | null): boolean;
 /** The query behind every "the reader asked for less motion" decision. */
 export declare const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
 /**

package/dist/internal/media.js

@@ -1 +1 @@
-"use client";import*as e from"react";const n=new Map;function r(e){if(n.has(e))return n.get(e)??null;const r="undefined"!=typeof window&&window.matchMedia?window.matchMedia(e):null;return n.set(e,r),r}export function subscribeToQuery(e,n){const t=r(e);return t?(t.addEventListener("change",n),()=>t.removeEventListener("change",n)):()=>{}}export function queryMatches(e){return r(e)?.matches??!1}export function noMatchOnServer(){return!1}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";const t=e=>subscribeToQuery(reducedMotionQuery,e),o=()=>queryMatches(reducedMotionQuery);export function usePrefersReducedMotion(){return e.useSyncExternalStore(t,o,noMatchOnServer)}
+"use client";import*as e from"react";const t=new Map;function n(e){if(t.has(e))return t.get(e)??null;const n="undefined"!=typeof window&&window.matchMedia?window.matchMedia(e):null;return t.set(e,n),n}export function subscribeToQuery(e,t){const r=n(e);return r?(r.addEventListener("change",t),()=>r.removeEventListener("change",t)):()=>{}}export function queryMatches(e){return n(e)?.matches??!1}export function noMatchOnServer(){return!1}export const breakpointWidths={xs:"0rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};let r=null;function o(){if(r)return r;if("undefined"==typeof window||!window.getComputedStyle)return breakpointWidths;const e=getComputedStyle(document.documentElement),t={...breakpointWidths};for(const n of["sm","md","lg","xl"]){const r=e.getPropertyValue(`--neba-breakpoint-${n}`).trim();r&&(t[n]=r)}return r=t,t}export function widthBelow(e){return"xs"===e?null:`(width < ${o()[e]})`}export function widthAtLeast(e){return`(width >= ${o()[e]})`}export function useMediaQuery(t){const n=e.useCallback(e=>t?subscribeToQuery(t,e):()=>{},[t]),r=e.useCallback(()=>!!t&&queryMatches(t),[t]);return e.useSyncExternalStore(n,r,noMatchOnServer)}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";const u=e=>subscribeToQuery(reducedMotionQuery,e),c=()=>queryMatches(reducedMotionQuery);export function usePrefersReducedMotion(){return e.useSyncExternalStore(u,c,noMatchOnServer)}

package/dist/internal/page-layout.d.ts

@@ -96,20 +96,29 @@ export declare const PageLayoutContext: React.Context<PageLayoutContextValue>;
  * "nobody said", which a standalone sidebar reads as `start`.
  */
 export declare const SidebarSideContext: React.Context<SidebarSide | null>;
+/**
+ * The media query each breakpoint's floor makes, written the way `styles.css`
+ * writes the grid's.
+ *
+ * `xs` has no query because its floor is zero: there is no width below it, so
+ * a sidebar that collapses there never collapses.
+ */
 /**
  * The same five widths as Tailwind variants, for the parts of this that are
  * decided in CSS rather than in JavaScript.
  *
- * Written out per breakpoint because Tailwind only ever sees class names that
- * appear literally in the source — the same reason every table in
- * `internal/styles.ts` is a `Record` of complete strings.
+ * The tables themselves are `internal/responsive.ts`', because `Show` asks the
+ * identical question and two spellings of "hidden below `md`" would be two
+ * chances to disagree. What is added here is only the sixth key: `none` is a
+ * layout that never collapses, which is not a breakpoint and has no place in a
+ * table the rest of the library reads.
  *
- * `belowClasses` hides something at and above the breakpoint, which is what a
- * sidebar's own trigger wants: the hamburger exists exactly while the sidebar
- * does not. `aboveClasses` hides it below, which is what the sidebar's column
- * wants for the one paint between the server's HTML arriving and JavaScript
- * finding out how wide the window is — without it a phone draws the sidebar
- * full width and then throws it away.
+ * `collapsedOnlyClasses` hides something at and above the breakpoint, which is
+ * what a sidebar's own trigger wants: the hamburger exists exactly while the
+ * sidebar does not. `expandedOnlyClasses` hides it below, which is what the
+ * sidebar's column wants for the one paint between the server's HTML arriving
+ * and JavaScript finding out how wide the window is — without it a phone draws
+ * the sidebar full width and then throws it away.
  */
 export declare const collapsedOnlyClasses: Record<PageLayoutCollapse, string>;
 export declare const expandedOnlyClasses: Record<PageLayoutCollapse, string>;

package/dist/internal/page-layout.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{noMatchOnServer as t,queryMatches as n,subscribeToQuery as d}from"./media.js";export const PageLayoutContext=/*@__PURE__*/e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const SidebarSideContext=/*@__PURE__*/e.createContext(null);const o={xs:null,sm:"(width < 40rem)",md:"(width < 48rem)",lg:"(width < 64rem)",xl:"(width < 80rem)"};export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(l){const s="none"===l?null:o[l],r=e.useCallback(e=>s?d(s,e):()=>{},[s]),i=e.useCallback(()=>!!s&&n(s),[s]);return e.useSyncExternalStore(r,i,t)}export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?t?"right":"left":t?"left":"right"}
+"use client";import*as e from"react";import{useMediaQuery as t,widthBelow as n}from"./media.js";import{hiddenBelowClasses as o,hiddenFromClasses as r}from"./responsive.js";export const PageLayoutContext=/*@__PURE__*/e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const SidebarSideContext=/*@__PURE__*/e.createContext(null);export const collapsedOnlyClasses={none:"hidden",...r};export const expandedOnlyClasses={none:"",...o};export function useCollapsed(e){return t("none"===e?null:n(e))}export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?t?"right":"left":t?"left":"right"}

package/dist/internal/picker.d.ts

@@ -82,6 +82,12 @@ interface InternalShellProps extends PickerShellProps {
     }>;
     /** How far off the trigger the popup sits. */
     sideOffset?: number;
+    /**
+     * A class name for the popup itself, which no `className` can reach: it is
+     * portalled to the end of `<body>`, outside the element the root class lands
+     * on. Only TreeSelect offers it to a caller so far.
+     */
+    popupClassName?: string;
     children: React.ReactNode;
     triggerRef?: React.Ref<HTMLButtonElement>;
 }
@@ -93,7 +99,7 @@ interface InternalShellProps extends PickerShellProps {
  * and the way `invalid` re-points the whole colour family at `danger` so the
  * edge, the ring and the message turn over together.
  */
-export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, sideOffset, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, sideOffset, popupClassName, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Field as i}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as l}from"./icons.js";import{WidthSizer as r}from"./sizer.js";import{chipRemoveClasses as o,controlHeightClasses as s,controlTextLeadingClasses as d,cx as c,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as b,iconClasses as h,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as y,surfaceClasses as N,surfaceSlots as w,transitionClasses as P}from"./styles.js";export function popupSlots(e,n){return{...w(e,n),"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`}}const j=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,"focus-within:[transition-duration:0ms]",f,h].join(" ");export const pickerPopupClasses=[N,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="outline",size:h="md",color:N="primary",density:P="default",elevation:k=0,label:C,description:$,error:O,invalid:z,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,style:E,display:L,samples:T,empty:V,clearable:W=!1,onClear:A,open:B,onOpenChange:G,labels:H,hiddenValues:J,sideOffset:K=6,children:M,triggerRef:Q,...U}){const X=a.useId(),Y=I??`${X}-trigger`,Z=`${X}-label`,ee=`${X}-description`,ne=`${X}-error`,ae=null!=O&&!1!==O&&""!==O,ie=z??ae,te=ie?"danger":N,le=S||q,re=c($?ee:null,ae?ne:null)||void 0;return n(i.Root,{disabled:S,invalid:ie,className:c("flex-col align-top",y[h],R?"flex w-full":"inline-flex",_),style:{...w(te,k),...E},...U,children:[C?e(i.Label,{id:Z,htmlFor:Y,className:c(x[h],"font-medium",S?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:C}):null,n(t.Root,{open:B,onOpenChange:e=>G(e),children:[n("span",{className:c(j,s[h],d[h],v[h],b[h],g[P][h],S?p[f]:q?u[f]:m[f]),children:[n(t.Trigger,{id:Y,ref:Q,disabled:S,"aria-labelledby":C?Z:void 0,"aria-describedby":re,"aria-required":D||void 0,"aria-invalid":ie||void 0,className:c("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",b[h],"[outline:none]",le?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:F}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:c("w-full truncate",V?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:L}),e(r,{samples:T??[]})]})]}),!W||V||le?null:e("button",{type:"button","aria-label":H.clear,className:c(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),A()},children:e(l,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:K,align:"start",children:e(t.Popup,{initialFocus:!1,className:c(pickerPopupClasses,v[h],popupPaddingClasses[h],d[h]),style:popupSlots(te,3),children:M})})})]}),$?e(i.Description,{id:ee,className:c(x[h],"text-(--neba-muted-fg)"),children:$}):null,ae?e(i.Error,{id:ne,match:!0,className:c(x[h],"text-(--n-accent)"),children:O}):null,J?.map((n,a)=>e("input",{type:"hidden",name:n.name,value:n.value},a))]})}export function PickerFooter({size:n,children:a}){return e("div",{className:c("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",b[n]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{Field as i}from"@base-ui/react/field";import{Popover as a}from"@base-ui/react/popover";import{CloseIcon as r}from"./icons.js";import{WidthSizer as t}from"./sizer.js";import{chipRemoveClasses as s,controlHeightClasses as o,controlTextLeadingClasses as d,cx as c,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as b,iconClasses as h,metaTextClasses as x,paddingXClasses as g,popupFadeClasses as v,radiusClasses as N,stackGapClasses as y,surfaceClasses as w,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,n){return{...P(e,n),"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`}}const C=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,"focus-within:[transition-duration:0ms]",f,h].join(" ");export const pickerPopupClasses=[w,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",v].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="outline",size:h="md",color:v="primary",density:w="default",elevation:j=0,label:k,description:$,error:O,invalid:z,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:E,style:L,display:T,samples:V,empty:W,clearable:A=!1,onClear:B,open:G,onOpenChange:H,labels:J,hiddenValues:K,sideOffset:M=6,popupClassName:Q,children:U,triggerRef:X,...Y}){const Z=l.useId(),_=I??`${Z}-trigger`,ee=`${Z}-label`,ne=`${Z}-description`,le=`${Z}-error`,ie=null!=O&&!1!==O&&""!==O,ae=z??ie,re=ae?"danger":v,te=S||q,se=c($?ne:null,ie?le:null)||void 0;return n(i.Root,{disabled:S,invalid:ae,className:c("flex-col align-top",y[h],R?"flex w-full":"inline-flex",E),style:{...P(re,j),...L},...Y,children:[k?e(i.Label,{id:ee,htmlFor:_,className:c(x[h],"font-medium",S?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:k}):null,n(a.Root,{open:G,onOpenChange:e=>H(e),children:[n("span",{className:c(C,o[h],d[h],N[h],b[h],g[w][h],S?p[f]:q?u[f]:m[f]),children:[n(a.Trigger,{id:_,ref:X,disabled:S,"aria-labelledby":k?ee:void 0,"aria-describedby":se,"aria-required":D||void 0,"aria-invalid":ae||void 0,className:c("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",b[h],"[outline:none]",te?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:F}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:c("w-full truncate",W?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:T}),e(t,{samples:V??[]})]})]}),!A||W||te?null:e("button",{type:"button","aria-label":J.clear,className:c(s,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),B()},children:e(r,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:M,align:"start",children:e(a.Popup,{initialFocus:!1,className:c(pickerPopupClasses,N[h],popupPaddingClasses[h],d[h],Q),style:popupSlots(re,3),children:U})})})]}),$?e(i.Description,{id:ne,className:c(x[h],"text-(--neba-muted-fg)"),children:$}):null,ie?e(i.Error,{id:le,match:!0,className:c(x[h],"text-(--n-accent)"),children:O}):null,K?.map((n,l)=>e("input",{type:"hidden",name:n.name,value:n.value},l))]})}export function PickerFooter({size:n,children:l}){return e("div",{className:c("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",b[n]),children:l})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}

package/dist/internal/responsive.d.ts

@@ -0,0 +1,97 @@
+/**
+ * A value that changes at a breakpoint, and the machinery every component that
+ * takes one shares.
+ *
+ * This was written inside `grid.ts`, for the grid, and it is here now for the
+ * reason `media.ts` exists one level down: it is not about grids at all. A
+ * span, a gutter, a content measure, a flex direction and whether an element is
+ * drawn are five different questions with one answer shape, and a second copy
+ * of `withBaseline` would be a second chance to disagree about what a partial
+ * map means.
+ *
+ * The split it makes is the load-bearing part. **What a responsive value cannot
+ * be is a class name.** Tailwind only ever sees class names written out
+ * literally, and a per-breakpoint class map would be five complete ladders in
+ * the bundle of every page that draws the component — so a prop is responsive
+ * exactly when its value fits in an inline `--n-*` slot, and props whose value
+ * *is* a class (`size`, `variant`, `color`, `elevation`) are deliberately not.
+ * That is the same line `styleSlots()` draws for colour, drawn again here.
+ *
+ * The CSS half lives in `styles.css`: one cascade per slot name, each
+ * breakpoint falling back through the ones below it. That is what lets a media
+ * query change a value without React hearing about it — the alternative is
+ * re-rendering the tree at every breakpoint to say the same thing — and it is
+ * also why the list of responsive axes is kept short. A cascade is four media
+ * blocks that cannot be generated, so each new one is a deliberate cost.
+ */
+import type * as React from 'react';
+import type { NebaBreakpoint, NebaResponsive } from '../types.js';
+/** Smallest first, which is also the order the media queries have to be in. */
+export declare const breakpoints: readonly NebaBreakpoint[];
+/** A bare value means "from `xs` up"; a map is already per-breakpoint. */
+export declare function breakpointMap<T>(value: NebaResponsive<T> | undefined): Partial<Record<NebaBreakpoint, T>>;
+/**
+ * Turns a responsive value into the `--n-{name}-{breakpoint}` slots the CSS
+ * reads, emitting only the breakpoints the caller actually named.
+ *
+ * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
+ * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
+ * That keeps the inline style on a grid item down to what was asked for.
+ */
+export declare function responsiveSlots<T>(name: string, value: NebaResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
+/**
+ * Fills in the `xs` entry of a partial map with the prop's own default.
+ *
+ * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
+ * below 48rem — the CSS fallback rather than the documented default of 2 — and
+ * a caller who narrowed one breakpoint would silently lose every other one. A
+ * map says "from here up, use this instead"; it does not say "and nothing
+ * below".
+ */
+export declare function withBaseline<T>(value: NebaResponsive<T> | undefined, baseline: T): NebaResponsive<T>;
+/**
+ * The value in force at one breakpoint: the nearest entry at or below it.
+ *
+ * The JavaScript half of what the CSS cascade does, and written to give the
+ * same answer — every entry is a floor, so `{ xs: 12, md: 6 }` is `6` at `lg`
+ * because `md` is the last thing said before it. `undefined` is a map that has
+ * said nothing yet at this width, which is a real answer rather than a
+ * failure: `{ lg: 4 }` at `xs` is the caller declining to have an opinion, and
+ * the CSS form falls through to its own default there for the same reason.
+ */
+export declare function valueAt<T>(value: NebaResponsive<T> | undefined, breakpoint: NebaBreakpoint): T | undefined;
+/**
+ * One responsive value laid over another, the way a more specific CSS
+ * declaration is laid over a general one.
+ *
+ * This is what a pair like `spacing` and `columnSpacing` needs, and doing it
+ * with `columnSpacing ?? spacing` is wrong in a way that only shows up once
+ * either of them is a map: `spacing={2} columnSpacing={{ md: 6 }}` took the
+ * override whole and left the row with no column gutter at all below 48rem,
+ * because the map says nothing there and the baseline it fell back to was the
+ * prop's own default rather than the `spacing` beside it.
+ *
+ * So the two are walked together. At each breakpoint the override wins if it
+ * has said anything at or below there — and keeps winning above, because it is
+ * the more specific of the two — and the base fills in until then. Only the
+ * steps where the answer actually changes are emitted, so the result is still
+ * one or two slots rather than five.
+ */
+export declare function overlayResponsive<T>(base: NebaResponsive<T>, override: NebaResponsive<T> | undefined): NebaResponsive<T>;
+/**
+ * A number is pixels; a string is already a CSS length.
+ *
+ * Every length a caller can hand this library goes through here — a Stack's
+ * overlap, a Container's measure — so that `640` and `'640px'` mean the same
+ * thing everywhere rather than in the components that happened to think of it.
+ */
+export declare function lengthOf(value: number | string): string;
+/** Hidden below this breakpoint: the element exists from here up. */
+export declare const hiddenBelowClasses: Record<NebaBreakpoint, string>;
+/**
+ * Hidden at this breakpoint and above: the element exists only under it.
+ *
+ * `xs` is `hidden` outright rather than empty — nothing is below a floor of
+ * zero, so "only under `xs`" is nowhere at all.
+ */
+export declare const hiddenFromClasses: Record<NebaBreakpoint, string>;

package/dist/internal/responsive.js

@@ -0,0 +1 @@
+export const breakpoints=["xs","sm","md","lg","xl"];export function breakpointMap(n){return null==n?{}:"object"==typeof n?n:{xs:n}}export function responsiveSlots(n,e,o){const t=breakpointMap(e),r={};for(const e of breakpoints){const i=t[e];void 0!==i&&(r[`--n-${n}-${e}`]=o(i))}return r}export function withBaseline(n,e){return null==n?e:"object"==typeof n?{xs:e,...n}:n}export function valueAt(n,e){if(null==n)return;if("object"!=typeof n)return n;const o=n;for(let n=breakpoints.indexOf(e);n>=0;n-=1){const e=o[breakpoints[n]];if(void 0!==e)return e}}export function overlayResponsive(n,e){if(null==e)return n;const o=breakpointMap(n),t=breakpointMap(e),r={};let i,s,d;for(const n of breakpoints){void 0!==o[n]&&(i=o[n]),void 0!==t[n]&&(s=t[n]);const e=void 0!==s?s:i;void 0!==e&&e!==d&&(r[n]=e,d=e)}return r}export function lengthOf(n){return"number"==typeof n?`${n}px`:n}export const hiddenBelowClasses={xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export const hiddenFromClasses={xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};

package/dist/internal/styles.d.ts

@@ -34,6 +34,41 @@ export declare const radiusClasses: Record<NebaSize, string>;
  * Density never touches these.
  */
 export declare const controlHeightClasses: Record<NebaSize, string>;
+/**
+ * The same ladder as raw lengths, for the arithmetic a class cannot do.
+ *
+ * `paddingXValues` is here for the same reason one level down: Tailwind only
+ * ever sees class names written out literally, so "three rows of tabs tall" is a
+ * number a component has to multiply. **Keep the two in step** — a height that
+ * disagrees with its class is a cap that lands half a row out.
+ */
+export declare const controlHeightValues: Record<NebaSize, string>;
+/**
+ * How wide content is allowed to get — a Container's `maxWidth`, and the same
+ * prop on a Header and a Footer whose bar spans the window while what is on it
+ * lines up with the page.
+ *
+ * Written here once because the three had a copy each, and in `rem` rather than
+ * in Tailwind's named `max-w-*` steps so that a Container's `lg` and a `lg:`
+ * variant are the same 64rem. Tailwind's own container scale is a different set
+ * of numbers, and two ladders called `lg` on one page is how a layout drifts by
+ * a few pixels for no reason anybody can find later.
+ *
+ * Four of the five are exactly the breakpoint floors. `xs` is the one that is
+ * not — a measure of zero is not a thing — and that is the whole of the
+ * difference between this ladder and `NebaBreakpoint`.
+ */
+export declare const measureWidths: Record<NebaSize, string>;
+/**
+ * One value of a `maxWidth`, as the length the `--n-max-w` slot takes.
+ *
+ * A step of the ladder resolves to its `rem`; anything else is a length the
+ * caller wrote and is passed through untouched, so `'48rem'`, `'60ch'`,
+ * `'min(90vw, 72rem)'` and `640` all reach `max-width` meaning what they say.
+ * `'none'` is not in the table and therefore falls through to the CSS keyword,
+ * which is what it already was.
+ */
+export declare function measureValue(value: NebaSize | 'none' | number | string): string;
 /** The same numbers as a width, for a control with nothing to pad against. */
 export declare const controlSquareClasses: Record<NebaSize, string>;
 /** A control's label. One line, so the leading comes from `leading-none`. */
@@ -47,6 +82,12 @@ export declare const controlTextClasses: Record<NebaSize, string>;
 export declare const controlTextLeadingClasses: Record<NebaSize, string>;
 /** Labels, descriptions and error messages: one step below the control's text. */
 export declare const metaTextClasses: Record<NebaSize, string>;
+/**
+ * `metaTextClasses` as raw lengths, for text whose size has to travel in the
+ * same inline style object as the rest of what positions it — an Image's
+ * watermark, which is placed, tinted and turned inline. Keep the two in step.
+ */
+export declare const metaTextValues: Record<NebaSize, string>;
 /**
  * Horizontal padding, and the only thing `density` is allowed to touch. The two
  * tracks are roughly 2:1 so the difference is legible at a glance rather than a
@@ -170,6 +211,33 @@ export declare const transitionClasses: string;
  * and then decays.
  */
 export declare const pressTransitionClasses = "active:[transition-duration:0ms]";
+/**
+ * The two ends of a popup's fade: not there yet, and not there any more.
+ *
+ * Split out from `popupFadeClasses` below for exactly one caller —
+ * NavigationMenu's popup also travels in width and height as the reader moves
+ * between two menus, so its `transition` shorthand has to name three properties
+ * and a second shorthand beside it would win or lose by stylesheet order rather
+ * than by intent. Everything else wants the whole thing.
+ */
+export declare const popupFadeStateClasses = "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+/**
+ * How every floating surface in the library arrives and leaves.
+ *
+ * Opacity, and nothing else. A popup that scales or slides has spent 160ms
+ * dragging its own text across the screen — and unlike a control, a popup is
+ * mostly text: a menu row the pointer was already reaching for, a dialog
+ * somebody has started reading, a calendar cell under a finger that is already
+ * moving. The house rule against transforming a control is the same rule, and
+ * this is where it lands for the things that float.
+ *
+ * It is written here rather than in each of them because there were fourteen
+ * copies of it and the fifteenth and sixteenth — Select's popup and Combobox's —
+ * were never written at all, which is the failure mode a shared table exists to
+ * prevent. Base UI supplies the `data-starting-style` / `data-ending-style` pair
+ * on every popup, backdrop and toast, so the same two lines fit all of them.
+ */
+export declare const popupFadeClasses: string;
 /**
  * The focus ring, written as the `outline` shorthand rather than Tailwind's
  * `outline-2` + colour pair: the utilities route the style through

package/dist/internal/styles.js

@@ -1 +1 @@
-export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-[0.3125rem]",sm:"size-1.5",md:"size-[0.4375rem]",lg:"size-2",xl:"size-[0.5625rem]"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const transitionClasses=["[transition-property:background-color,border-color,box-shadow,color]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ");export const pressTransitionClasses="active:[transition-duration:0ms]";export const focusRingClasses="focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2";export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,n){const r="solid"===n;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":r?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":r?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]","hover:bg-(--n-panel-press)","focus-within:bg-(--n-panel-press)"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)]"].join(" "),text:["text-(--neba-fg) bg-transparent","hover:bg-(--n-soft)","focus-within:bg-(--n-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]"].join(" "),text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const chipRemoveClasses=["relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70",hitAreaClasses,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed"].join(" ");export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const e=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function toPixels(n,r){const t=e.exec(n);if(!t)return;const a=Number(t[1]);if(!Number.isNaN(a))switch(t[2]){case"px":return a;case"%":return r.percentOf*a/100;case"em":return a*s(r.relativeTo);default:return a*s("undefined"==typeof document?null:document.documentElement)}}function s(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}
+export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-[0.3125rem]",sm:"size-1.5",md:"size-[0.4375rem]",lg:"size-2",xl:"size-[0.5625rem]"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const transitionClasses=["[transition-property:background-color,border-color,box-shadow,color]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ");export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]",popupFadeStateClasses].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2";export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,r){const n="solid"===r;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]","hover:bg-(--n-panel-press)","focus-within:bg-(--n-panel-press)"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)]"].join(" "),text:["text-(--neba-fg) bg-transparent","hover:bg-(--n-soft)","focus-within:bg-(--n-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]"].join(" "),text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const chipRemoveClasses=["relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70",hitAreaClasses,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed"].join(" ");export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const e=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function toPixels(r,n){const t=e.exec(r);if(!t)return;const a=Number(t[1]);if(!Number.isNaN(a))switch(t[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*s(n.relativeTo);default:return a*s("undefined"==typeof document?null:document.documentElement)}}function s(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}