neba 1.11.0 → 1.13.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 CDGet <jooy2.contact@gmail.com> (https://cdget.com).
+Copyright (c) 2025 CDGet (https://cdget.com).
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -12,27 +12,27 @@ Live previews and full props for every component. This README is just the quick
 
 ---
 
-**Neba UI is a React component library for building application interfaces.** It gives you the pieces a real product needs — buttons and form fields, menus and dialogs, tables and tabs, progress and notifications — already styled, already accessible, and already agreeing with each other.
+**Neba UI is a React component library for building application interfaces.** About 130 components, from buttons and form fields through menus, dialogs, tables and charts. They are styled and accessible out of the box, and they agree with each other because they draw from one set of props.
 
 You install one package, add one line to your CSS, and import components. There is nothing to configure, no theme object to assemble, and no per-component styling decisions to make before you can ship a screen.
 
-- **A broad component set, still growing** — enough to build a whole screen without reaching elsewhere.
-- **One shared vocabulary** — `size`, `color`, `variant`, `density`, `elevation`. An `md` is the same height on every control; `primary` is the same colour everywhere.
-- **Accessible by construction** — real roles, labels, focus management and keyboard support, not `div`s with click handlers.
-- **Dark mode with no work** — follows the system, and can be forced either way per subtree.
-- **A design language, not a theme file** — a translucent acrylic surface with a hairline edge, one deliberate motion signature, and shadows that are opt-in.
-- **ESM only**, TypeScript declarations included, and genuinely tree-shakeable — every component compiles to its own module, and importing one costs about what one costs. A `Button` is ~5 kB gzipped including its Base UI parts, a `Chip` is ~3 kB, and a twelve-component app is ~67 kB; the whole library, all one hundred and twenty-six exports at once, is ~215 kB.
-- **Two runtime dependencies** — Base UI, and `highlight.js`, which only [CodeBlock](https://neba.cdget.com/components/display/code-block) reaches and only through a dynamic import, so it never lands in a bundle that did not ask for it. React 18 or 19, Node.js 18 or later.
+- **A broad component set, still growing**: enough to build a whole screen without reaching elsewhere.
+- **One shared vocabulary**: `size`, `color`, `variant`, `density`, `elevation`. An `md` is the same height on every control; `primary` is the same colour everywhere.
+- **Accessible by construction**: real roles, labels, focus management and keyboard support, not `div`s with click handlers.
+- **Dark mode with no work**: follows the system, and can be forced either way per subtree.
+- **A design language, not a theme file**: a translucent acrylic surface with a hairline edge, one deliberate motion signature, and shadows that are opt-in.
+- **ESM only**, TypeScript declarations included, and genuinely tree-shakeable: every component compiles to its own module, and importing one costs about what one costs. A `Button` is ~5 kB gzipped including its Base UI parts, a `Chip` is ~3 kB, and a twelve-component app is ~70 kB; the whole library, all one hundred and seventy-five exports at once, is ~265 kB.
+- **Two runtime dependencies**: Base UI, and `highlight.js`, which only [CodeBlock](https://neba.cdget.com/components/display/code-block) reaches and only through a dynamic import, so it never lands in a bundle that did not ask for it. React 18 or 19, Node.js 18 or later.
 
 ## Documentation
 
-Everything is documented at **[neba.cdget.com](https://neba.cdget.com)**, where the previews are not screenshots — they are the components, running in the page.
+Everything is documented at **[neba.cdget.com](https://neba.cdget.com)**, where the previews are not screenshots. They are the components, running in the page.
 
 | Page | What you will find |
 | --- | --- |
 | [**Getting started**](https://neba.cdget.com/guide/getting-started) | Install and setup, end to end. |
 | [**All components**](https://neba.cdget.com/components/) | Every component, one page each: live previews and the full props table. |
-| [**Examples**](https://neba.cdget.com/examples/overview) | A whole sample screen explained block by block, plus three concept screens — a landing page, an admin dashboard and a sign-up flow. |
+| [**Examples**](https://neba.cdget.com/examples/overview) | A whole sample screen explained block by block, plus three concept screens: a landing page, an admin dashboard and a sign-up flow. |
 | [**Design language**](https://neba.cdget.com/design/design-language) | Why a Neba surface looks and behaves the way it does. |
 | [**Prop conventions**](https://neba.cdget.com/design/prop-conventions) | The shared vocabulary every component draws from. |
 | [**Color**](https://neba.cdget.com/design/color) | The token families, and how to theme them. |
@@ -48,7 +48,7 @@ npm install neba
 pnpm add neba
 ```
 
-`react` and `react-dom` are peer dependencies — React 18 or 19. Neba uses the copy your project already has, and npm 7 and later will install them alongside it if it has none.
+`react` and `react-dom` are peer dependencies: React 18 or 19. Neba uses the copy your project already has, and npm 7 and later will install them alongside it if it has none.
 
 ### Setup
 
@@ -58,11 +58,11 @@ Add one line to your app's CSS entry point:
 @import 'neba/styles.css';
 ```
 
-`neba/styles.css` is finished CSS — the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
+`neba/styles.css` is finished CSS: the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
 
 That is the whole setup. No provider is required at the root, no theme object, no config file.
 
-If your project already runs Tailwind v4, import `neba/tailwind.css` instead — the token sheet, which registers the package as a style source so your own build generates the utilities in the same pass as your app's:
+If your project already runs Tailwind v4, import `neba/tailwind.css` instead: the token sheet, which registers the package as a style source so your own build generates the utilities in the same pass as your app's:
 
 ```css
 @import 'tailwindcss';
@@ -88,11 +88,11 @@ export default function SignIn() {
 
 ### Next.js and React Server Components
 
-Every component carries `'use client'`, so it can be imported straight into a Server Component — no wrapper, no `transpilePackages` entry. The directive marks a boundary, not a page: the page stays a Server Component and only the components it renders reach the browser. The ordinary rule about that boundary still applies — an event handler defined in a Server Component cannot be passed across it.
+Every component carries `'use client'`, so it can be imported straight into a Server Component: no wrapper, no `transpilePackages` entry. The directive marks a boundary, not a page: the page stays a Server Component and only the components it renders reach the browser. The ordinary rule about that boundary still applies: an event handler defined in a Server Component cannot be passed across it.
 
 The `neba` barrel and `neba/locales` are deliberately left unmarked, so a Server Component importing the barrel reaches the components behind it rather than a boundary of its own, and `registerMessages` stays a plain function. Bundlers that do not implement Server Components ignore the directive entirely.
 
-A few components provide context and are mounted once, near the root, only if you use them — `ToastProvider` (paired with the `useToast()` hook) and `TooltipProvider`.
+A few components provide context and are mounted once, near the root, only if you use them: `ToastProvider` (paired with the `useToast()` hook) and `TooltipProvider`.
 
 Every component is also its own entry point, named after its folder:
 
@@ -101,11 +101,11 @@ import { Button } from 'neba/button';
 import { TextField } from 'neba/text-field';
 ```
 
-Both forms produce the same bundle. The root barrel is the one to reach for; the subpath is there for a build that would rather not parse a hundred and ninety-eight modules to keep five, and as an escape hatch for a bundler that does not honour `sideEffects`.
+Both forms produce the same bundle. The root barrel is the one to reach for; the subpath is there for a build that would rather not parse three hundred modules to keep five, and as an escape hatch for a bundler that does not honour `sideEffects`.
 
 ### Languages
 
-Neba writes very little text of its own — a Button says what you hand it — but a few components have to invent a string: the label on a Dialog's close button, the word under a chat message that says it was read, the sentence a screen reader hears after a link that opens a new tab.
+Neba writes very little text of its own (a Button says what you hand it) but a few components have to invent a string: the label on a Dialog's close button, the word under a chat message that says it was read, the sentence a screen reader hears after a link that opens a new tab.
 
 Those ship in English. Eighteen other languages are included in the package and none of them is in your bundle until you say so:
 
@@ -121,9 +121,9 @@ Call it once, at module scope, before your first render. Then a `locale` prop tr
 <Dialog locale="ko" title="설정" showClose />
 ```
 
-A registered language costs about 1.9 kB gzipped and you pay only for the ones you name. Tags are matched by script, then by region, then by language — registering `ko` answers `ko-KR`, and `zhHans` registered as `zh-hans` answers `zh-CN` and a bare `zh`. Available: `ko`, `ja`, `zhHans`, `zhHant`, `es`, `pt`, `fr`, `de`, `it`, `nl`, `pl`, `ru`, `tr`, `ar`, `hi`, `id`, `vi`, `th`, each also its own entry point (`neba/locales/ko`).
+A registered language costs about 2.8 kB gzipped and you pay only for the ones you name. Tags are matched by script, then by region, then by language: registering `ko` answers `ko-KR`, and `zhHans` registered as `zh-hans` answers `zh-CN` and a bare `zh`. Available: `ko`, `ja`, `zhHans`, `zhHant`, `es`, `pt`, `fr`, `de`, `it`, `nl`, `pl`, `ru`, `tr`, `ar`, `hi`, `id`, `vi`, `th`, each also its own entry point (`neba/locales/ko`).
 
-Anything the platform already knows — month names, weekday names, AM/PM, number and date formats — comes from `Intl` and needs no registration. And every string a component invents also has a prop that overrides it, so a language Neba does not carry is never a dead end.
+Anything the platform already knows (month names, weekday names, AM/PM, number and date formats) comes from `Intl` and needs no registration. And every string a component invents also has a prop that overrides it, so a language Neba does not carry is never a dead end.
 
 ### One place for your defaults
 
@@ -138,7 +138,7 @@ import { NebaProvider } from 'neba';
 </NebaProvider>;
 ```
 
-Optional, and every component works without it. It fills in `size`, `density`, `variant` and `locale` where a call site left them out — the call site always wins — owns the colour scheme (`useColorScheme()`, plus a `colorSchemeScript()` for the first-paint flash), and sets the writing direction. `color` and `elevation` are deliberately not defaultable; [the guide](https://neba.cdget.com/guide/provider) says why.
+Optional, and every component works without it. It fills in `size`, `density`, `variant` and `locale` where a call site left them out (the call site always wins) owns the colour scheme (`useColorScheme()`, plus a `colorSchemeScript()` for the first-paint flash), and sets the writing direction. `color` and `elevation` are deliberately not defaultable; [the guide](https://neba.cdget.com/guide/provider) says why.
 
 ### Hooks
 
@@ -153,7 +153,7 @@ const desktop = useBreakpoint('lg');
 useShortcut('Mod+K', onOpen);
 ```
 
-`useDisclosure`, `useMediaQuery`, `useBreakpoint`, `usePrefersReducedMotion`, `useElementSize`, `useOnScreen`, `useShortcut`. Everything here is machinery the library needed for itself — there is no general-purpose hook collection, and there is not going to be one. Full notes in [the hooks guide](https://neba.cdget.com/guide/hooks).
+`useDisclosure`, `useMediaQuery`, `useBreakpoint`, `useCurrentBreakpoint`, `useBreakpointValue`, `usePrefersReducedMotion`, `useElementSize`, `useOnScreen`, `useShortcut`. Everything here is machinery the library needed for itself: there is no general-purpose hook collection, and there is not going to be one. Full notes in [the hooks guide](https://neba.cdget.com/guide/hooks).
 
 ### The shared prop vocabulary
 
@@ -164,10 +164,10 @@ The reason a Neba screen looks composed rather than assembled is that the props
 | `size` | `xs` `sm` `md` `lg` `xl` | The control's scale. `md` is the desktop default. |
 | `color` | `primary` `secondary` `success` `warning` `danger` `info` | The semantic colour family. |
 | `variant` | `solid` `outline` `text` | How much visual weight the surface carries. |
-| `density` | `default` `compact` | Padding only — never the height, never the type scale, so a compact control still lines up with a default one. |
+| `density` | `default` `compact` | Padding only: never the height, never the type scale, so a compact control still lines up with a default one. |
 | `elevation` | `0` `1` `2` `3` | How far a surface floats off the page. `0` is the default and means no shadow at all. |
 
-Placement props are logical, not physical — `start`/`end` rather than `left`/`right` — so layouts flip correctly under RTL. The full rules are in [**Prop conventions**](https://neba.cdget.com/design/prop-conventions).
+Placement props are logical, not physical (`start`/`end` rather than `left`/`right`) so layouts flip correctly under RTL. The full rules are in [**Prop conventions**](https://neba.cdget.com/design/prop-conventions).
 
 ```tsx
 <Button size="sm" color="danger" variant="outline">Delete</Button>
@@ -176,23 +176,23 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 ### Components
 
-**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, Toggle, ToggleGroup, Form, Fieldset, FloatingActionButton (with FloatingAction), TextField, NumberField, OtpField, Select, Combobox, TreeSelect, Checkbox, RadioGroup, Switch, Slider, Rating, Menu (with submenus, checkbox and radio items), ContextMenu, Menubar, NavigationMenu, CommandPalette, FilePicker, Transfer, Pagination, BottomNavigation, FloatingBottomNavigation, ColorPicker, Calendar, DatePicker, TimePicker, DateTimePicker, DateRangePicker
+**Inputs**: Button, IconButton, ButtonGroup, SegmentedButton, Toggle, ToggleGroup, Form, Fieldset, FloatingActionButton (with FloatingAction), TextField, NumberField, OtpField, Select, Combobox, TreeSelect, Checkbox, RadioGroup, Switch, Slider, Rating, Menu (with submenus, checkbox and radio items), ContextMenu, Menubar, NavigationMenu, CommandPalette, FilePicker, Transfer, Pagination, BottomNavigation, FloatingBottomNavigation, ColorPicker, Calendar, DatePicker, TimePicker, DateTimePicker, DateRangePicker
 
-**Surfaces** — Box, Card, Accordion, Collapsible, Tabs, Carousel, Toolbar, Pill, Spoiler, HowToSteps, ChatBubble, Drawer, Popover, Mockup, WindowPane, HoverCard
+**Surfaces**: Box, Card, Accordion, Collapsible, Tabs, Carousel, Toolbar, Pill, Spoiler, HowToSteps, ChatBubble, Drawer, Popover, Mockup, WindowPane, HoverCard
 
-**Display** — Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, AvatarGroup, AppLogo, Icon, Image, Shortcut, List, DataList, Table, DataTable, CodeBlock, Timeline, Breadcrumb, Anchor, TreeView, VisuallyHidden
+**Display**: Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, AppLogo, Icon, Image, Gallery, Shortcut, List, DataList, Table, DataTable, CodeBlock, Timeline, Breadcrumb, Anchor, TreeView, VisuallyHidden
 
-**Charts** — Statistic, Sparkline, LineChart, AreaChart, BarChart, PieChart, ScatterChart, TimelineChart, HeatmapChart, GaugeChart
+**Charts**: Statistic, Sparkline, LineChart, AreaChart, BarChart, PieChart, ScatterChart, TimelineChart, HeatmapChart, GaugeChart
 
-**Feedback** — Alert, Dialog, Confirm, Popconfirm, Toast, Tooltip, Overlay, Skeleton, Empty, ProgressLinear, ProgressCircular, ProgressBox, Meter, Tour
+**Feedback**: Alert, Dialog, Confirm, Popconfirm, Toast, Tooltip, Overlay, Skeleton, Empty, ProgressLinear, ProgressCircular, ProgressBox, Meter, Tour
 
-**Layout** — PageLayout (with Header, Footer and Sidebar), Container, Grid (with GridContainer), Panes, AspectRatio, Portal, ScrollZone, ScrollArea
+**Layout**: PageLayout (with Header, Footer and Sidebar), Container, Grid (with GridContainer), Flex, Panes, Stack, Show, AspectRatio, Portal, ScrollZone, ScrollArea
 
-**Transitions** — AnimateFade, AnimateGrow, AnimateZoom, AnimateSlide, AnimateRotate, AnimateBlink, AnimateAppear, AnimateTyping, AnimateLighting, AnimateMarquee, AnimateHeadline
+**Transitions**: AnimateFade, AnimateGrow, AnimateZoom, AnimateSlide, AnimateRotate, AnimateBlink, AnimateReveal, AnimateFloat, AnimateShake, AnimateAppear, AnimateSplit, AnimateTyping, AnimateScramble, AnimateCounter, AnimateLighting, AnimateMarquee, AnimateHeadline
 
-**Recently added** — TreeSelect, Calendar, Image, Confirm, Popconfirm, VisuallyHidden, Portal, GaugeChart, CommandPalette, Tour, Transfer, Anchor, DataList, AvatarGroup, NavigationMenu, Menubar, Form (with Fieldset), ScrollArea, HoverCard, Meter, Toggle (with ToggleGroup), CodeBlock, HowToSteps, ScrollZone, FloatingBottomNavigation, WindowPane, Collapsible, Rating, BottomNavigation, FloatingActionButton, the charts (Sparkline, LineChart, AreaChart, BarChart, PieChart, ScatterChart, TimelineChart, HeatmapChart), DataTable, Empty, Mockup, the eleven `Animate*` wrappers, ColorPicker, Drawer, Popover, Skeleton, AspectRatio
+**Added in the last two releases**: Gallery, Flex, Show, Stack and the six new `Animate*` (Reveal, Float, Shake, Split, Counter, Scramble) in 1.12.0; Calendar, TreeSelect, Image, Confirm, Popconfirm and VisuallyHidden in 1.11.0. The [changelog](https://neba.cdget.com/changelog) has the rest.
 
-Each one has its own page — live previews, every prop, and the variations worth seeing — under [**All components**](https://neba.cdget.com/components/).
+Each one has its own page (live previews, every prop, and the variations worth seeing) under [**All components**](https://neba.cdget.com/components/).
 
 ### Theming and dark mode
 
@@ -204,7 +204,7 @@ Colours, radii, and surface strengths are CSS custom properties declared in the
 }
 ```
 
-Dark mode responds to `prefers-color-scheme` on its own. To force it, put `.dark` or `[data-theme='dark']` (or `'light'`) on any ancestor — it applies to that subtree, so a dark panel on a light page is one attribute.
+Dark mode responds to `prefers-color-scheme` on its own. To force it, put `.dark` or `[data-theme='dark']` (or `'light'`) on any ancestor: it applies to that subtree, so a dark panel on a light page is one attribute.
 
 Adding a whole new colour family is two edits: an entry in `NebaColor` and five tokens; everything else derives from them.
 
@@ -214,7 +214,7 @@ Clone the repository and install dependencies, then:
 
 | Command | What it does |
 | --- | --- |
-| `npm run docs:dev` | Starts the documentation site (`docs/`) locally — every component, rendered live, with HMR. |
+| `npm run docs:dev` | Starts the documentation site (`docs/`) locally: every component, rendered live, with HMR. |
 | `npm test` | Runs the test suite once. |
 | `npm run test:watch` | Runs the test suite in watch mode. |
 | `npm run typecheck` | Type-checks the library, the tests, and the docs. |
@@ -226,16 +226,16 @@ All commands are run from the repository root.
 
 ### Project structure
 
-- `src/` — the library source. Each component lives in `src/components/{name}/` and is re-exported from `src/index.ts`.
-- `src/internal/` — what the library shares with itself: the size and spacing tables, the surface and focus-ring generators, the icons more than one component draws. Shipped, but not part of the public API.
-- `test/` — the test suite, mirroring the `src/` tree.
-- `docs/` — the VitePress documentation site, in English and Korean. It renders the real components from `src/`, so it is also where components are developed and eyeballed.
+- `src/`: the library source. Each component lives in `src/components/{name}/` and is re-exported from `src/index.ts`.
+- `src/internal/`: what the library shares with itself: the size and spacing tables, the surface and focus-ring generators, the icons more than one component draws. Shipped, but not part of the public API.
+- `test/`: the test suite, mirroring the `src/` tree.
+- `docs/`: the VitePress documentation site, in English and Korean. It renders the real components from `src/`, so it is also where components are developed and eyeballed.
 
 There is no separate demo app: `npm run docs:dev` is the develop-and-eyeball loop.
 
 ### Tests
 
-Tests run with [Vitest](https://vitest.dev) in browser mode, against a real headless browser driven by Playwright — the components depend on browser APIs (`ResizeObserver`, the popover API, `dialog.showModal()`) that jsdom does not implement. Install the browser once before your first run:
+Tests run with [Vitest](https://vitest.dev) in browser mode, against a real headless browser driven by Playwright. The components depend on browser APIs (`ResizeObserver`, the popover API, `dialog.showModal()`) that jsdom does not implement. Install the browser once before your first run:
 
 ```bash
 npx playwright install chromium
@@ -249,11 +249,13 @@ VITEST_BROWSER=firefox npm test
 
 CI runs the suite across Linux, Windows, and macOS in all three browser engines.
 
-Tests ship with the component they cover, in the same commit. Add a test at the path mirroring its source — `src/components/button/Button.tsx` is covered by `test/components/button/Button.test.tsx`.
+Tests ship with the component they cover, in the same commit. Add a test at the path mirroring its source: `src/components/button/Button.tsx` is covered by `test/components/button/Button.test.tsx`.
 
 ## Contributing
 
-Anyone can contribute to the project by reporting new issues or submitting a pull request. For more information, please see [CONTRIBUTING.md](CONTRIBUTING.md).
+Anyone can contribute to the project by reporting new issues or submitting a pull request. For more information, please see [CONTRIBUTING.md](CONTRIBUTING.md). Participation is subject to the [Code of Conduct](CODE_OF_CONDUCT.md).
+
+To report a security issue, please follow the process described in [SECURITY.md](SECURITY.md).
 
 ## License
 

package/dist/components/accordion/Accordion.d.ts

@@ -31,6 +31,18 @@ export interface AccordionProps extends NebaStyleProps, Omit<React.ComponentProp
     dividers?: boolean;
     /** Unavailable. Every section stops answering. */
     disabled?: boolean;
+    /**
+     * Which heading every section's header is, in the page's own outline. An
+     * accordion under an `<h2>` wants `3`; one under an `<h3>` wants `4`.
+     *
+     * It belongs to the stack rather than to a fold in it — the sections are
+     * siblings, and a run of headings at different levels is an outline that
+     * lies. A `title` that is itself a styled heading nests one heading inside
+     * another, which this prop is the way out of: set the level here and pass
+     * plain text.
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * Keeps closed panels in the DOM so the browser's own page search can find and
      * open them. Overrides `keepMounted`.
@@ -65,6 +77,12 @@ export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<
      * other. The same shape ListItem uses.
      */
     action?: React.ReactNode;
+    /**
+     * Cuts the title and the subtitle off after this many lines, with an
+     * ellipsis. Unset, both wrap — an FAQ's title is a sentence rather than a
+     * label, and ending it in an ellipsis loses the question.
+     */
+    lines?: number;
     /** Unavailable. This section stops folding; the rest keep working. */
     disabled?: boolean;
     /** The body. */

package/dist/components/accordion/Accordion.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as r}from"../box/Box.js";import{ChevronIcon as i}from"../../internal/icons.js";import{cx as s,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as u,sheetBodyClasses as h,sheetHeaderGapClasses as b,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as N}from"../../internal/defaults.js";const j=/*@__PURE__*/a.createContext({size:"md",density:"default",dividers:!0}),y={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},w={xs:u.xs,sm:u.xs,md:u.sm,lg:u.sm,xl:u.md};export const Accordion=/*@__PURE__*/a.forwardRef(function(n,l){const{variant:r="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,multiple:m=!1,value:f,defaultValue:h,onValueChange:b,dividers:x=!0,disabled:p=!1,hiddenUntilFound:w=!1,keepMounted:k=!1,className:z,style:C,children:V,...$}=N(n,["size","density","variant"]),_=a.useMemo(()=>({size:i,density:d,dividers:x}),[i,d,x]),A=s("flex flex-col",u[i],y[r],g,x?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--n-line)]":"p-1",z??"");return e(j.Provider,{value:_,children:e(t.Root,{ref:l,multiple:m,value:f,defaultValue:h,onValueChange:e=>b?.(e),disabled:p,hiddenUntilFound:w,keepMounted:k,className:A,style:{...v(o,c),...C},...$,children:V})})});export const AccordionItem=/*@__PURE__*/a.forwardRef(function({value:u,title:p,subtitle:v,startIcon:N,action:y,disabled:k=!1,className:z,children:C,...V},$){const{size:_,density:A,dividers:I}=a.useContext(j),M=l[A][_],R=r[A][_];return n(t.Item,{ref:$,value:u,disabled:k,className:s("flex flex-col",z??""),...V,children:[n(t.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[n(t.Trigger,{className:s("flex min-w-0 flex-1 cursor-pointer items-center text-start",M,R,d[_],g,m,o,I?"":w[_],"hover:bg-(--n-soft)","data-[panel-open]:text-(--n-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"),children:[c(N)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:N}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${b[_]}`,children:[c(p)?e("span",{className:`truncate font-semibold ${x[_]}`,children:p}):null,c(v)?e("span",{className:`truncate text-(--neba-muted-fg) ${f[_]}`,children:v}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(i,{})})]}),c(y)?e("span",{className:`flex shrink-0 items-center ${M}`,children:y}):null]}),e(t.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--neba-muted-fg)",h[_],M,"compact"===A?"pb-2":"pb-4"].join(" "),children:C})})]})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{ChevronIcon as r}from"../../internal/icons.js";import{clampClasses as s,cx as d,focusRingClasses as o,gapClasses as c,hasContent as m,iconClasses as f,metaTextClasses as h,radiusClasses as u,sheetBodyClasses as b,sheetHeaderGapClasses as x,sheetTitleClasses as v,surfaceClasses as p,surfaceSlots as g,transitionClasses as N}from"../../internal/styles.js";import{useStyleDefaults as j}from"../../internal/defaults.js";const y=/*@__PURE__*/a.createContext({size:"md",density:"default",dividers:!0,headingLevel:3}),w={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},k={xs:u.xs,sm:u.xs,md:u.sm,lg:u.sm,xl:u.md};export const Accordion=/*@__PURE__*/a.forwardRef(function(n,l){const{variant:i="outline",size:r="md",color:s="primary",density:o="default",elevation:c=0,multiple:m=!1,value:f,defaultValue:h,onValueChange:b,dividers:x=!0,headingLevel:v=3,disabled:p=!1,hiddenUntilFound:k=!1,keepMounted:z=!1,className:C,style:L,children:V,..._}=j(n,["size","density","variant"]),A=a.useMemo(()=>({size:r,density:o,dividers:x,headingLevel:v}),[r,o,x,v]),I=d("flex flex-col",u[r],w[i],N,x?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--n-line)]":"p-1",C??"");return e(y.Provider,{value:A,children:e(t.Root,{ref:l,multiple:m,value:f,defaultValue:h,onValueChange:e=>b?.(e),disabled:p,hiddenUntilFound:k,keepMounted:z,className:I,style:{...g(s,c),...L},..._,children:V})})});export const AccordionItem=/*@__PURE__*/a.forwardRef(function({value:u,title:p,subtitle:g,startIcon:j,action:w,lines:z,disabled:C=!1,className:L,children:V,..._},A){const{size:I,density:M,dividers:R,headingLevel:$}=a.useContext(y),F=z?s(z):"",P=l[M][I],U=i[M][I];return n(t.Item,{ref:A,value:u,disabled:C,className:d("flex flex-col",L??""),..._,children:[n(t.Header,{className:"m-0 flex w-full items-center [font:inherit]",render:a.createElement(`h${$}`),children:[n(t.Trigger,{className:d("flex min-w-0 flex-1 cursor-pointer items-center text-start",P,U,c[I],N,f,o,R?"":k[I],"hover:bg-(--n-soft)","data-[panel-open]:text-(--n-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"),children:[m(j)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:j}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${x[I]}`,children:[m(p)?e("span",{className:d("font-semibold",v[I],F),children:p}):null,m(g)?e("span",{className:d("text-(--neba-muted-fg)",h[I],F),children:g}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(r,{})})]}),m(w)?e("span",{className:`flex shrink-0 items-center ${P}`,children:w}):null]}),e(t.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--neba-muted-fg)",b[I],P,"compact"===M?"pb-2":"pb-4"].join(" "),children:V})})]})});

package/dist/components/anchor/Anchor.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{anchorMessages as r,useMessages as t}from"../../internal/i18n.js";import{controlTextLeadingClasses as o,cx as a,focusRingClasses as l,transitionClasses as i}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";const s={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-1.5",xl:"py-2"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1"}},m={xs:8,sm:10,md:12,lg:14,xl:16},d=["block min-w-0 truncate no-underline","text-(--neba-muted-fg)",i,l,"hover:text-(--neba-fg)","aria-[current=location]:font-medium aria-[current=location]:text-(--n-accent)"].join(" "),u=["border-s [border-color:transparent]","[transition:border-color_var(--neba-duration)_var(--neba-ease)]","aria-[current=location]:[border-color:var(--n-accent)]"].join(" ");export const Anchor=/*@__PURE__*/n.forwardRef(function(l,i){const{items:f,activeHref:p,onActiveChange:h,offset:g=0,container:v,rail:b=!0,size:y="md",color:x="primary",density:w="default",locale:j,label:E,className:H,style:N,...R}=c(l,["size","density","locale"]),z=t(r,j),[A,L]=n.useState(null),B=void 0!==p,C=B?p:A,$=n.useRef(h);$.current=h;const F=n.useRef(f);F.current=f;const I=f.map(e=>e.href).join("\0");return n.useEffect(()=>{if(B)return;const e=v?.current??window;let n=0,r=null;const t=()=>{n=0;const e=function(e,n,r){const t=(r?r.getBoundingClientRect().top:0)+n+1;let o=null;for(const n of e){const e=document.getElementById(n.href.replace(/^#/,""));e&&e.getBoundingClientRect().top<=t&&(o=n.href)}return(r?r.scrollTop+r.clientHeight>=r.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:o}(F.current,g,v?.current??null);e!==r&&(r=e,L(e),$.current?.(e))},o=()=>{0===n&&(n=requestAnimationFrame(t))};return t(),e.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),()=>{0!==n&&cancelAnimationFrame(n),e.removeEventListener("scroll",o),window.removeEventListener("resize",o)}},[I,g,v,B]),e("nav",{ref:i,"aria-label":E??z.label,className:a("min-w-0",H??""),style:{"--n-accent":`var(--neba-${x}-accent)`,"--n-ring":`var(--neba-${x}-ring)`,...N},...R,children:e("ul",{className:a("m-0 flex list-none flex-col p-0",b?"border-s [border-color:var(--neba-border)]":""),children:f.map(n=>e("li",{className:b?"[margin-inline-start:-1px]":"",children:e("a",{href:n.href,"aria-current":C===n.href?"location":void 0,className:a(d,o[y],s[w][y],b?`${u} ps-3`:""),style:{marginInlineStart:n.depth?n.depth*m[y]:void 0},children:n.label})},n.href))})})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{anchorMessages as r,useMessages as t}from"../../internal/i18n.js";import{controlTextLeadingClasses as o,cx as a,focusRingClasses as l,transitionClasses as i}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";const s={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-1.5",xl:"py-2"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1"}},d={xs:8,sm:10,md:12,lg:14,xl:16},m=["block min-w-0 truncate no-underline","text-(--neba-muted-fg)",i,l,"hover:text-(--neba-fg)","aria-[current=location]:font-medium aria-[current=location]:text-(--n-accent)"].join(" "),u=["border-s [border-color:transparent]","[transition:border-color_var(--neba-duration)_var(--neba-ease)]","aria-[current=location]:[border-color:var(--n-accent)]"].join(" ");function f(e,n){const r=n.get(e);if(r?.isConnected)return r;const t=document.getElementById(e.replace(/^#/,""));return t?n.set(e,t):n.delete(e),t}export const Anchor=/*@__PURE__*/n.forwardRef(function(l,i){const{items:p,activeHref:h,onActiveChange:g,offset:v=0,container:b,rail:y=!0,size:x="md",color:w="primary",density:j="default",locale:E,label:H,className:N,style:R,...z}=c(l,["size","density","locale"]),A=t(r,E),[C,L]=n.useState(null),B=void 0!==h,$=B?h:C,F=n.useRef(g),I=n.useRef(p);n.useEffect(()=>{F.current=g,I.current=p});const S=p.map(e=>e.href).join("\0");return n.useEffect(()=>{if(B)return;const e=b?.current??window,n=new Map;let r=0,t=null;const o=()=>{r=0;const e=function(e,n,r,t){const o=(r?r.getBoundingClientRect().top:0)+n+1;let a=null;for(const n of e){const e=f(n.href,t);e&&e.getBoundingClientRect().top<=o&&(a=n.href)}return(r?r.scrollTop+r.clientHeight>=r.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:a}(I.current,v,b?.current??null,n);e!==t&&(t=e,L(e),F.current?.(e))},a=()=>{0===r&&(r=requestAnimationFrame(o))};return o(),e.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0}),()=>{0!==r&&cancelAnimationFrame(r),e.removeEventListener("scroll",a),window.removeEventListener("resize",a)}},[S,v,b,B]),e("nav",{ref:i,"aria-label":H??A.label,className:a("min-w-0",N??""),style:{"--n-accent":`var(--neba-${w}-accent)`,"--n-ring":`var(--neba-${w}-ring)`,...R},...z,children:e("ul",{className:a("m-0 flex list-none flex-col p-0",y?"border-s [border-color:var(--neba-border)]":""),children:p.map(n=>e("li",{className:y?"[margin-inline-start:-1px]":"",children:e("a",{href:n.href,"aria-current":$===n.href?"location":void 0,className:a(m,o[x],s[j][x],y?`${u} ps-3`:""),style:{marginInlineStart:n.depth?n.depth*d[x]:void 0},children:n.label})},n.href))})})});

package/dist/components/animate-appear/AnimateAppear.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps, NebaSide } from '../../types.js';
-export interface AnimateAppearProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
-    /**
-     * How long after one child the next one starts, in milliseconds. This is the
-     * whole effect — everything else is what a single child does.
-     * @default 80
-     */
-    stagger?: number;
+import type { NebaAnimateProps, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateAppearProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Which edge each child drifts in from.
      * @default 'bottom'
@@ -25,11 +19,6 @@ export interface AnimateAppearProps extends NebaAnimateProps, React.ComponentPro
      * @default true
      */
     fade?: boolean;
-    /**
-     * Runs the list from the last child to the first.
-     * @default false
-     */
-    reverse?: boolean;
     /** Renders something other than a `<div>`. Base UI's own escape hatch. */
     render?: useRender.RenderProp;
     /** The things that appear, one after another. */

package/dist/components/animate-appear/AnimateAppear.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as s,animationSlots as n,isInfinite as i,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";export const AnimateAppear=/*@__PURE__*/t.forwardRef(function({duration:d=420,delay:p=0,easing:c,repeat:f=1,alternate:y,paused:u,trigger:h="mount",play:g,once:x=!0,threshold:N=.2,stagger:j=80,from:b="bottom",distance:A="0.75rem",fade:E=!0,reverse:$=!1,render:v,className:w,style:C,children:R,...V},k){const q=o({trigger:h,play:g,once:x,threshold:N,paused:u,infinite:i(f)}),{x:z,y:B}=l(b,A),D=t.Children.toArray(R),F=`${r} ${s.slide}`,G=D.map((a,r)=>{const s=$?D.length-1-r:r,i=n({duration:d,delay:p+s*j,easing:c,repeat:f,alternate:y,x:z,y:B,opacity:E?0:1});if(!t.isValidElement(a))return e("span",{className:F,style:i,children:a},r);const l=a.props;return t.cloneElement(a,{className:m(F,l.className),style:{...i,...l.style}})});return a({render:v,ref:[k,q.ref],props:{...V,className:w,style:{"--n-anim-state":q.state,...C},...q.handlers,"data-neba-animation":"appear","data-state":q.state,children:G}})});
+"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as t,animationClasses as r,isInfinite as n,slideOffsets as i,staggerChildren as s,useAnimationRun as o}from"../../internal/animate.js";export const AnimateAppear=/*@__PURE__*/e.forwardRef(function({duration:e=420,delay:d=0,easing:l,repeat:p=1,alternate:m,paused:c,trigger:g="mount",play:u,once:f=!0,threshold:y=.2,stagger:h=80,durationStep:b=0,reverse:x=!1,timeline:v,range:A,from:N="bottom",distance:S="0.75rem",fade:$=!0,render:j,className:w,style:R,children:k,...q},z){const B=o({trigger:g,play:u,once:f,threshold:y,paused:c,infinite:n(p)}),{x:C,y:D}=i(N,S),E=s(k,`${t} ${r.slide}`,{duration:e,delay:d,easing:l,repeat:p,alternate:m,x:C,y:D,opacity:$?0:1,timeline:v,range:A},{stagger:h,durationStep:b,reverse:x});return a({render:j,ref:[z,B.ref],props:{...q,className:w,style:{"--n-anim-state":B.state,...R},...B.handlers,"data-neba-animation":"appear","data-state":B.state,children:E}})});

package/dist/components/animate-blink/AnimateBlink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps } from '../../types.js';
-export interface AnimateBlinkProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateBlinkProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How faint it gets at the bottom of the cycle, between `0` and `1`. Raise it
      * for something that has to stay readable while it pulses.

package/dist/components/animate-blink/AnimateBlink.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e=900,delay:i=0,easing:s,repeat:o="infinite",alternate:l,paused:p,trigger:c="mount",play:m,once:d=!0,threshold:f=.2,min:u=0,render:y,className:g,style:h,children:N,...b},j){const k=a({effect:"blink",duration:e,delay:i,easing:s,repeat:o,alternate:l,opacity:u,trigger:c,play:m,once:d,threshold:f,paused:p,infinite:t(o)});return r({render:y,ref:[j,k.ref],props:{...b,className:n(k.className,g),style:{...k.style,...h},...k.props,children:N}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as a}from"../../internal/styles.js";export const AnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e=900,delay:i=0,easing:s,repeat:l="infinite",alternate:o,paused:d,trigger:p="mount",play:c,once:m=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,min:b=0,render:j,className:k,style:v,children:S,...w},x){const A=n({effect:"blink",duration:e,delay:i,easing:s,repeat:l,alternate:o,opacity:b,trigger:p,play:c,once:m,threshold:f,paused:d,infinite:t(l),timeline:h,range:N,children:S,stagger:g,durationStep:u,reverse:y});return r({render:j,ref:[x,A.ref],props:{...w,className:a(A.className,k),style:{...A.style,...v},...A.props,children:A.children}})});

package/dist/components/animate-counter/AnimateCounter.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps } from '../../types.js';
+export interface AnimateCounterProps extends Omit<NebaAnimateProps, 'easing' | 'repeat' | 'alternate'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Where it lands. */
+    value: number;
+    /**
+     * Where it starts.
+     * @default 0
+     */
+    from?: number;
+    /**
+     * How long the count takes, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /**
+     * How the number is written — `Intl.NumberFormat` options, so a currency, a
+     * percentage or a compact `1.2M` is a prop rather than a `format` callback.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which language it is written in. Defaults to the reader's own. */
+    locale?: string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A number counted up to its value.
+ *
+ * The one animation in the library whose subject is the content rather than the
+ * box around it, and the reason it is a component: a count is a value being
+ * interpolated and formatted on every frame, which is not something a
+ * `@keyframes` can do.
+ *
+ * It pairs with [Statistic](../charts/statistic) — a dashboard that draws its
+ * numbers instantly and animates everything around them has the emphasis
+ * exactly backwards.
+ *
+ * The finished number is in the document from the first frame, in a clipped box
+ * for a screen reader; what counts is a visible copy that is `aria-hidden`.
+ * A reader who cannot see the count is told the answer rather than a hundred
+ * intermediate ones, and a reader who has asked for less motion is shown the
+ * answer too.
+ */
+export declare const AnimateCounter: React.ForwardRefExoticComponent<AnimateCounterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-counter/AnimateCounter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useRender as a}from"@base-ui/react/use-render";import{useAnimationRun as s,usePrefersReducedMotion as i}from"../../internal/animate.js";import{srOnlyClasses as o}from"../../internal/styles.js";export const AnimateCounter=/*@__PURE__*/n.forwardRef(function({value:m,from:l=0,duration:u=1200,delay:c=0,paused:d,trigger:f="mount",play:p,once:h=!0,threshold:y=.2,format:g,locale:F,render:j,className:v,style:A,...N},x){const b=s({trigger:f,play:p,once:h,threshold:y,paused:d,infinite:!1}),q=i(),[w,M]=n.useState(l),S=void 0===g?"":JSON.stringify(g),C=n.useMemo(()=>new Intl.NumberFormat(F,g),[F,S]);return n.useEffect(()=>{if(!b.started)return void M(l);if(q||u<=0)return void M(m);let e=0,r=null;const t=n=>{null===r&&(r=n);const a=n-r-c;if(a<0)return void(e=requestAnimationFrame(t));const s=Math.min(1,a/u);M(l+(m-l)*function(e){return 1-(1-e)**3}(s)),s<1&&(e=requestAnimationFrame(t))};return M(l),e=requestAnimationFrame(t),()=>cancelAnimationFrame(e)},[b.started,q,m,l,u,c]),a({render:j,ref:[x,b.ref],props:{...N,className:v,style:A,"data-neba-animation":"counter","data-state":b.state,...b.handlers,children:t(r,{children:[e("span",{className:o,children:C.format(m)}),e("span",{"aria-hidden":"true",children:C.format(w)})]})}})});

package/dist/components/animate-counter/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateCounter.js';

package/dist/components/animate-counter/index.js

@@ -0,0 +1 @@
+export*from"./AnimateCounter.js";

package/dist/components/animate-fade/AnimateFade.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
-export interface AnimateFadeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateFadeProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content arrives or leaves.
      * @default 'in'

package/dist/components/animate-fade/AnimateFade.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e=320,delay:s=0,easing:o,repeat:i=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,mode:u="in",from:y=0,render:g,className:h,style:N,children:j,...b},w){const x=a({effect:"fade",duration:e,delay:s,easing:o,repeat:i,alternate:l,mode:u,opacity:y,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:t(i)});return r({render:g,ref:[w,x.ref],props:{...b,className:n(x.className,h),style:{...x.style,...N},...x.props,children:j}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e=320,delay:i=0,easing:s,repeat:o=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=0,render:S,className:b,style:w,children:x,...A},F){const R=a({effect:"fade",duration:e,delay:i,easing:s,repeat:o,alternate:l,mode:j,opacity:v,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:t(o),timeline:h,range:N,children:x,stagger:g,durationStep:u,reverse:y});return r({render:S,ref:[F,R.ref],props:{...A,className:n(R.className,b),style:{...R.style,...w},...R.props,children:R.children}})});

package/dist/components/animate-float/AnimateFloat.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateFloatProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way it drifts.
+     * @default 'top'
+     */
+    from?: NebaSide;
+    /**
+     * How far, at the top of the drift — a CSS length, or a number in pixels.
+     * Small on purpose: this is something resting rather than something moving,
+     * and past about a centimetre it stops reading as either.
+     * @default '0.5rem'
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A slow drift with nowhere to get to.
+ *
+ * The only effect in the set that is neither an arrival nor a state: it says
+ * *this is not fixed to the page*, which is what an illustration, a floating
+ * card or a mark above a hero wants and what nothing else in the library says.
+ * It runs for as long as the page is open and turns round at both ends, so
+ * there is never a frame where it jumps back.
+ *
+ * It is `translate` rather than a `transform`, so it composes with anything the
+ * element is already scaled or rotated by — and it is deliberately not offered
+ * on a control: a button that is never quite where it was is a button that is
+ * harder to press.
+ */
+export declare const AnimateFloat: React.ForwardRefExoticComponent<AnimateFloatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-float/AnimateFloat.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateFloat=/*@__PURE__*/e.forwardRef(function({duration:e=3200,delay:s=0,easing:l="ease-in-out",repeat:o="infinite",alternate:m=!0,paused:d,trigger:c="mount",play:f,once:p=!0,threshold:u=.2,stagger:g=0,durationStep:y=0,reverse:h=!1,timeline:x,range:N,from:b="top",distance:j="0.5rem",render:v,className:S,style:w,children:A,...C},F){const{x:R,y:k}=a(b,j),q=n({effect:null,effectClass:"neba-anim-float",name:"float",duration:e,delay:s,easing:l,repeat:o,alternate:m,x:R,y:k,trigger:c,play:f,once:p,threshold:u,paused:d,infinite:t(o),timeline:x,range:N,children:A,stagger:g,durationStep:y,reverse:h});return r({render:v,ref:[F,q.ref],props:{...C,className:i(q.className,S),style:{...q.style,...w},...q.props,children:q.children}})});

package/dist/components/animate-float/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateFloat.js';

package/dist/components/animate-float/index.js

@@ -0,0 +1 @@
+export*from"./AnimateFloat.js";

package/dist/components/animate-grow/AnimateGrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
-export interface AnimateGrowProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateGrowProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content unfolds or folds away.
      * @default 'in'

package/dist/components/animate-grow/AnimateGrow.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:g=.8,origin:y="center",fade:h=!0,render:w,className:N,style:j,children:b,...x},A){const G=a({effect:"grow",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:g,opacity:h?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:w,ref:[A,G.ref],props:{...x,className:n(G.className,N),style:{transformOrigin:y,...G.style,...j},...G.props,children:b}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:i=0,easing:s,repeat:o=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:w,mode:N="in",from:j=.8,origin:v="center",fade:S=!0,render:b,className:x,style:A,children:G,...O},R){const k=a({effect:"grow",duration:e,delay:i,easing:s,repeat:o,alternate:l,mode:N,scale:j,opacity:S?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(o),timeline:h,range:w,children:G,stagger:g,durationStep:u,reverse:y});return r({render:b,ref:[R,k.ref],props:{...O,className:n(k.className,x),style:{transformOrigin:v,...k.style,...A},...k.props,children:k.children}})});

package/dist/components/animate-marquee/AnimateMarquee.d.ts

@@ -32,8 +32,8 @@ export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPr
      */
     copies?: number;
     /**
-     * Stops while the pointer is on it, so something scrolling past can actually
-     * be read or clicked.
+     * Stops while the pointer is on it, or while the focus is inside it, so
+     * something scrolling past can actually be read, clicked or tabbed to.
      * @default true
      */
     pauseOnHover?: boolean;
@@ -56,7 +56,9 @@ export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPr
  *
  * `pauseOnHover` is on by default and is not decoration: content moving past a
  * pointer cannot be clicked reliably, and a link inside a marquee that never
- * stops is a link nobody can follow.
+ * stops is a link nobody can follow. It answers the focus as well as the
+ * pointer, or the same link would be unreachable to whoever tabs to it — the
+ * strip would be carrying it off the screen while it was being read.
  *
  * Only the first copy is read out. The rest carry `aria-hidden`, or a screen
  * reader would announce everything on the strip as many times as it was laid

package/dist/components/animate-marquee/AnimateMarquee.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as a,lengthValue as r,useAnimationRun as n}from"../../internal/animate.js";import{observeResize as i}from"../../internal/observe.js";import{cx as s}from"../../internal/styles.js";export const AnimateMarquee=/*@__PURE__*/t.forwardRef(function({duration:o,delay:m=0,repeat:l="infinite",alternate:u,paused:c,trigger:d="mount",play:f,once:p=!0,threshold:h=.2,easing:v,orientation:g="horizontal",reverse:y=!1,speed:b=60,gap:j="2rem",copies:q=2,pauseOnHover:x=!0,className:M,style:N,children:R,...S},w){const A=n({trigger:d,play:f,once:p,threshold:h,paused:c,infinite:a(l)}),G=t.useRef(null),H=t.useRef(null),[$,k]=t.useState(0),z="vertical"===g;t.useEffect(()=>{const e=G.current,t=H.current;if(!e||!t)return;const a=()=>{const a=getComputedStyle(e),r=parseFloat(z?a.rowGap:a.columnGap)||0,n=z?t.offsetHeight:t.offsetWidth;k(n+r)};a();const r=i(t,a),n=i(e,a);return()=>{r(),n()}},[z,R]);const C=o??($>0?$/b*1e3:12e3);return e("div",{ref:e=>{G.current=e,A.ref(e),"function"==typeof w?w(e):w&&(w.current=e)},className:s("neba-marquee",z&&"neba-marquee-vertical",M),style:{"--n-anim-gap":r(j),...v?{"--n-anim-ease":v}:{},"--n-anim-duration":`${Math.round(C)}ms`,"--n-anim-delay":`${m}ms`,"--n-anim-repeat":"infinite"===l?"infinite":String(l),"--n-anim-direction":y?u?"alternate-reverse":"reverse":u?"alternate":"normal","--n-anim-state":A.state,...N},"data-neba-animation":"marquee","data-state":A.state,"data-pause-on-hover":x?"":void 0,...A.handlers,...S,children:Array.from({length:Math.max(1,q)},(t,a)=>(t=>e("div",{ref:0===t?H:void 0,className:"neba-marquee-track","aria-hidden":0===t?void 0:"true",children:R},t))(a))})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as a,lengthValue as r,useAnimationRun as n}from"../../internal/animate.js";import{observeResize as i}from"../../internal/observe.js";import{cx as s}from"../../internal/styles.js";export const AnimateMarquee=/*@__PURE__*/t.forwardRef(function({duration:o,delay:l=0,repeat:m="infinite",alternate:u,paused:c,trigger:d="mount",play:f,once:p=!0,threshold:h=.2,easing:v,orientation:g="horizontal",reverse:y=!1,speed:b=60,gap:j="2rem",copies:q=2,pauseOnHover:x=!0,className:M,style:N,children:R,...S},k){const w=n({trigger:d,play:f,once:p,threshold:h,paused:c,infinite:a(m)}),A=t.useRef(null),C=t.useRef(null),[G,H]=t.useState(0),$="vertical"===g;t.useEffect(()=>{const e=A.current,t=C.current;if(!e||!t)return;const a=()=>{const a=getComputedStyle(e),r=parseFloat($?a.rowGap:a.columnGap)||0,n=$?t.offsetHeight:t.offsetWidth;H(n+r)};a();const r=i(t,a),n=i(e,a);return()=>{r(),n()}},[$,j]);const z=o??(G>0?G/b*1e3:12e3),E=w.ref,F=t.useCallback(e=>{A.current=e,E(e),"function"==typeof k?k(e):k&&(k.current=e)},[k,E]);return e("div",{ref:F,className:s("neba-marquee",$&&"neba-marquee-vertical",M),style:{"--n-anim-gap":r(j),...v?{"--n-anim-ease":v}:{},"--n-anim-duration":`${Math.round(z)}ms`,"--n-anim-delay":`${l}ms`,"--n-anim-repeat":"infinite"===m?"infinite":String(m),"--n-anim-direction":y?u?"alternate-reverse":"reverse":u?"alternate":"normal","--n-anim-state":w.state,...N},"data-neba-animation":"marquee","data-state":w.state,"data-pause-on-hover":x?"":void 0,...w.handlers,...S,children:Array.from({length:Math.max(1,q)},(t,a)=>(t=>e("div",{ref:0===t?C:void 0,className:"neba-marquee-track","aria-hidden":0===t?void 0:"true",children:R},t))(a))})});