abaabil 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,185 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.4.0] - 2026-09-21
+
+### Added
+
+Five components, taking the library from eighteen to twenty-three. Two
+carry real accessibility work, one wraps a native element that is
+genuinely painful to do by hand, and two are the presentational pieces a
+design system is expected to have, each with a trap worth encoding.
+
+- **`abaabil/pagination`** - a `<nav>` around an ordered list of real
+  links, so a page is a URL you can open in a new tab and share; a
+  paginator built from buttons gives that up for nothing. Server
+  renderable at every tier. The gap is drawn in CSS so an ellipsis is
+  never read out between numbers, and it only appears when it stands in
+  for two or more pages. Every number is named "Page 7" rather than
+  announced as a bare "7", and all four labels are replaceable for
+  translation.
+- **`abaabil/file`** - a real `<input type="file">`, not a button with a
+  hidden input behind it. That pattern reimplements the label
+  association, the keyboard activation and the announcement of the
+  chosen file, and usually manages one of the three;
+  `::file-selector-button` means the real control can be styled
+  instead. Warns when `accept` is set with nothing explaining it in
+  words, because `accept` is never announced and does not apply to a
+  dropped file.
+- **`abaabil/toolbar`** - the APG toolbar pattern. The point is the tab
+  sequence: eight buttons are eight stops on the way past them, and as
+  a toolbar they are one. Takes arbitrary children rather than an items
+  array, since a toolbar's contents are heterogeneous by definition,
+  and manages `tabindex` on its focusable descendants directly because
+  cloning only reaches the top level. A control that needs the arrows
+  itself keeps them.
+- **`abaabil/avatar`** - an image, or initials when there is none. No
+  fallback-on-load-error: that needs state, and would make every tier a
+  client component for a case the server usually already knows about.
+  The a11y tier asks whether the avatar repeats something already on
+  screen, because the answer changes per use and the component cannot
+  guess. The initials are never the accessible name; "FA" read aloud is
+  not a person.
+- **`abaabil/badge`** - shorthand that only means something beside what
+  it is attached to. `context` supplies the rest of the sentence as
+  hidden text, so a badge draws "3" and announces "3 unread messages".
+  Hidden text rather than `aria-label`, because a `<span>` has no role
+  and discards it. That is not hypothetical: it is the bug found in
+  this library's own popover one release ago.
+
+Fifty-one of the sixty-nine entry points carry no client directive.
+Nine components are server-renderable at every tier, up from six.
+
+### Fixed
+
+- **Re-theming only went halfway.** `--color-primary-hover` and
+  `--color-focus-ring` were pinned to blue primitives rather than
+  derived from `--color-primary`, so setting the primary colour to red
+  gave a red button with a blue hover state and a blue focus ring on
+  every control in the library, with nothing saying so. Both now follow
+  `--color-primary`. The stock theme is unchanged for the focus ring,
+  which was already the same value, and the default hover moves from
+  `#3b82f6` to `#467aee`, which is the same blue to look at.
+  `--abaabil-blue-400` existed only to feed the old hover and is
+  removed: a primitive nothing reads is one someone overrides expecting
+  a result, and gets none.
+- `pageWindow` emitted a gap where it stood in for exactly one page, so
+  at page 4 of 12 an ellipsis replaced page 2: the same width as the
+  number it hid, carrying less. Caught by its own test rather than by
+  looking at it.
+
+## [1.3.0] - 2026-09-21
+
+### Added
+
+Five components, taking the library from thirteen to eighteen. Two of
+them are the things people ask for most and are hard; three are nearly
+free because the platform already does the work.
+
+- **`abaabil/menu`** - the W3C APG menu button pattern on top of the
+  native Popover API. The browser supplies the top layer, the
+  outside-click dismissal and Escape; this supplies `role="menu"`, a
+  roving tabindex, Up/Down with wrapping, Home/End, multi-character
+  typeahead, Tab to close, and focus moving into the menu on open and
+  back to the trigger on close. `aria-expanded` is driven by the panel's
+  own `toggle` event rather than a second copy of the open state, since
+  the browser can close the panel without telling the component. Its
+  docs say when a menu is the wrong widget: a button revealing
+  navigation links is a popover, not a menu.
+- **`abaabil/tooltip`** - shows on `:hover` and `:focus-within`, which
+  are selectors, so the `normal` and `styled` tiers need no JavaScript
+  at all. The `a11y` tier adds the two things CSS cannot: the
+  `aria-describedby` that makes a screen reader read it, and Escape to
+  dismiss, which WCAG 1.4.13 requires. The docs lead with when not to
+  use one.
+- **`abaabil/progress`** - native `<progress>`. `value` has no default,
+  so omitting it gives a genuinely indeterminate bar rather than one
+  claiming to be 0% done. `valueText` sets `aria-valuetext`, because a
+  bar whose number is not a percentage is otherwise announced as one.
+- **`abaabil/slider`** - native `<input type="range">`, so the keyboard
+  support and the min/max/step arithmetic are the platform's.
+  `formatValue` sets `aria-valuetext` and the optional visible
+  `<output>`, which is marked `aria-hidden` so the value is not
+  announced twice.
+- **`abaabil/breadcrumb`** - a `<nav>` around an ordered list, because
+  the order is the information. Server-renderable at every tier. The
+  separator is drawn in CSS so it is never read aloud, the `<nav>` is
+  named, and the last item renders as text with `aria-current="page"`.
+
+Thirty-six of the fifty-four entry points now carry no client directive.
+Six components are server-renderable at every tier including `a11y`, up
+from four.
+
+`role="tooltip"` is deliberately **not** in tooltip's `normal` tier,
+unlike `role="switch"` in switch's. The difference: a switch's role
+changes how a reachable interactive control is announced, so it does
+something on its own. A tooltip is only ever reached through the
+`aria-describedby` on its trigger, so the role without that association
+announces nothing, and it belongs with the wiring that gives it meaning.
+
+Three bugs were found by driving these in a real browser, after 511
+jsdom tests had passed. All three are the same shape: jsdom does not run
+the thing that was broken.
+
+- Menu focused its first item inside `requestAnimationFrame`, which does
+  not fire in a background tab, so focus silently never moved there. The
+  `toggle` event already fires with the panel in the top layer and
+  focusable, so the focus call is synchronous now.
+- Menu read the active index from state, so two keydowns arriving in the
+  same tick both moved one step from the same origin: holding ArrowDown
+  advanced one item and stopped. The index is a ref now. Covered by a
+  test that dispatches two raw events inside one `act`, which is the
+  only way to reproduce it, since `fireEvent` flushes between calls.
+- Tooltip put its fade on the shown state, so whenever the transition
+  did not advance the bubble stayed at opacity 0 while every selector
+  said it should be visible: a tooltip that silently never appears. The
+  fade is on the hidden state now and showing is instant, which is also
+  the better behaviour for a tooltip.
+
+Two more came out of a full accessibility audit of all eighteen
+components, run with axe against a real browser. Both were silent: the
+component looked right, the tests passed, and the thing it claimed to add
+was being discarded.
+
+- **`popover/a11y` was not naming its panel at all.** A bare
+  `<div popover>` has no role, and `aria-label` is prohibited on a
+  generic element, so the label was dropped: the panel computed to role
+  `null` with no accessible name, and axe flags it as
+  `aria-prohibited-attr`. The panel is `role="group"` now, overridable
+  with `role`. Naming the panel was this tier's entire contribution, so
+  until now it added 484 bytes and achieved nothing.
+- **`progress/a11y` was not naming its bar.** `<progress>` is a labelable
+  element, so `<label for>` is not wrong, but no accessible name is
+  computed from it: axe names an `<input>` from identical markup and
+  names neither `<progress>` nor `<meter>`. `aria-labelledby` now points
+  at the label, making the name explicit instead of leaving it to differ
+  between implementations.
+
+The audit itself had to be redone once. The first pass rendered the
+dialog open, and a modal dialog makes everything behind it inert, so the
+sweep that reported zero violations had not actually examined the other
+seventeen components.
+
+### Fixed
+
+- `dist/combobox/index.js` and `dist/combobox/styled.js` had no size
+  budget. Combobox was the first component built and only its `a11y`
+  tier was ever listed, so two entry points had been unwatched since
+  1.0.0. Found by the new registration check, not by noticing.
+
+### Added (tooling)
+
+- `llms.txt`, shipped inside the package. It is the short version of the
+  README written for coding agents: the rules that are easy to get wrong
+  (no root export, import `theme.css` once, prefer the `a11y` tier) and
+  the per-component traps (popover needs an explicit `id`, alert has to
+  exist before it has a message, combobox and tabs are uncontrolled). An
+  agent with `node_modules` can read it without the network. It reaches
+  npm with the next release.
+- `AGENTS.md` at the repository root, for agents changing the library
+  rather than using it: the enforced architecture rules, the conventions,
+  and the seven steps for adding a component.
+
 ## [1.2.0] - 2026-09-21
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 Minimal, themeable, accessible React components. Zero dependencies.
 
-Thirteen components: button, dialog, combobox, input, textarea, checkbox, radio, switch, select, accordion, tabs, popover, alert.
+Twenty-three components: button, dialog, popover, menu, tooltip, combobox, input, textarea, file, checkbox, radio, switch, select, slider, accordion, tabs, toolbar, breadcrumb, pagination, progress, alert, avatar, badge.
 
 ```js
 import Button from 'abaabil/button/a11y'
@@ -103,7 +103,7 @@ import Accordion from 'abaabil/accordion/a11y'
 
 ### Bundler required for `styled` and `a11y` tiers
 
-The `styled` and `a11y` entry points (all twenty-six across the thirteen components) import their
+The `styled` and `a11y` entry points (all forty-six across the twenty-three components) import their
 component's CSS as a JS side effect (`import 'abaabil/button/button.css'` style, resolved
 relative to the package). That works in any bundler that understands CSS imports, which
 covers Next.js, Vite, and webpack. It does **not** work if you run the built file directly in
@@ -160,6 +160,21 @@ abaabil ships design tokens in `abaabil/theme.css`. Override the CSS custom prop
 }
 ```
 
+Setting `--color-primary` is enough. The hover shade and the focus ring are **derived** from it, so a purple theme gets a purple hover and a purple focus ring without naming either:
+
+| Token | Default | Follows `--color-primary`? |
+|---|---|---|
+| `--color-primary` | `#2563eb` | is it |
+| `--color-primary-hover` | `color-mix(in srgb, var(--color-primary) 85%, white)` | yes |
+| `--color-focus-ring` | `var(--color-primary)` | yes |
+| `--color-primary-fg` | `#ffffff` | **no**, see below |
+
+Override any of them individually if the derived value is not what you want.
+
+`--color-primary-fg` is the text and iconography drawn *on* the primary colour, and it does not derive, because deriving it needs a contrast decision CSS cannot make yet. It is white. If you set `--color-primary` to something light, set `--color-primary-fg` to something dark alongside it, or the text on your buttons will fail contrast.
+
+`--color-danger`, `--color-success` and `--color-warning` are independent on purpose: an error is red whatever your brand colour is.
+
 abaabil's own component rules live inside `@layer abaabil.components`. CSS layers give unlayered rules the higher priority by default, so any selector you write in your normal (unlayered) application CSS beats the library's layered styles automatically, with no `!important` needed:
 
 ```css
@@ -214,15 +229,50 @@ Only the entry points that need interactivity are marked `"use client"`. The res
 | `abaabil/alert` | no |
 | `abaabil/alert/styled` | no |
 | `abaabil/alert/a11y` | no |
-
-Twenty-six of the thirty-nine entry points carry no client directive and render from a Server Component with zero client JS.
-
-Four components are server-renderable at **every** tier, `a11y` included, because they need no JavaScript at all:
+| `abaabil/progress` | no |
+| `abaabil/progress/styled` | no |
+| `abaabil/progress/a11y` | yes |
+| `abaabil/slider` | no |
+| `abaabil/slider/styled` | no |
+| `abaabil/slider/a11y` | yes |
+| `abaabil/breadcrumb` | no |
+| `abaabil/breadcrumb/styled` | no |
+| `abaabil/breadcrumb/a11y` | no |
+| `abaabil/tooltip` | no |
+| `abaabil/tooltip/styled` | no |
+| `abaabil/tooltip/a11y` | yes |
+| `abaabil/menu` | no |
+| `abaabil/menu/styled` | no |
+| `abaabil/menu/a11y` | yes |
+| `abaabil/pagination` | no |
+| `abaabil/pagination/styled` | no |
+| `abaabil/pagination/a11y` | no |
+| `abaabil/file` | no |
+| `abaabil/file/styled` | no |
+| `abaabil/file/a11y` | yes |
+| `abaabil/toolbar` | no |
+| `abaabil/toolbar/styled` | no |
+| `abaabil/toolbar/a11y` | yes |
+| `abaabil/avatar` | no |
+| `abaabil/avatar/styled` | no |
+| `abaabil/avatar/a11y` | no |
+| `abaabil/badge` | no |
+| `abaabil/badge/styled` | no |
+| `abaabil/badge/a11y` | no |
+
+Fifty-one of the sixty-nine entry points carry no client directive and render from a Server Component with zero client JS.
+
+Nine components are server-renderable at **every** tier, `a11y` included, because they need no JavaScript at all:
 
 - **button**, which attaches handlers only when you actually pass one (see the note at the end of this section).
 - **accordion**, where exclusive open/close comes from the native `name` attribute on `<details>`.
 - **popover**, where the trigger, the top layer, light-dismiss and Escape all come from the native Popover API.
 - **alert**, which is a live region and a border.
+- **breadcrumb** and **pagination**, which are a `<nav>` and an ordered list.
+- **avatar** and **badge**, which are markup and CSS.
+- **progress** and **slider** at `normal` and `styled`; their `a11y` tiers need `useId`.
+
+**tooltip** is the interesting case: it shows and hides on `:hover` and `:focus-within`, which are selectors, so its `normal` and `styled` tiers need no JavaScript to work at all. Only the tier that adds `aria-describedby` and Escape is a client component.
 
 Two components are client modules at every tier, because neither has a native element to build on and both need state to show one thing at a time: **combobox** and **tabs**.
 
@@ -525,6 +575,214 @@ Uncontrolled, like the combobox: observe the selection through `onChange`.
 
 **Read this before using it.** A live region is announced when its *contents change*, and assistive tech has to be watching the region before that happens. An alert that arrives in the DOM already carrying its message may not be announced at all, and behaviour differs between screen readers. If the message appears in response to something the user did, render the component with empty children from the start and fill it in, rather than mounting the whole alert at the moment you have something to say. Rendered empty it paints nothing.
 
+### Progress
+
+Native `<progress>`. Omit `value` for an indeterminate bar; it has no default, because defaulting it to 0 would turn every unknown-duration operation into one claiming to be 0% done.
+
+`normal` / `styled`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | - | Omit for indeterminate. |
+| `max` | `number` | `100` | |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` adds the label wiring and the one thing people get wrong about a progress bar, which is what it announces:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Rendered as a real `<label>`. |
+| `hideLabel` | `boolean` | `false` | Hide it visually; it stays in the accessibility tree. |
+| `description` | `string` | - | Help text, wired into `aria-describedby`. |
+| `valueText` | `string` | - | Announced instead of the percentage. A bare `<progress value="3" max="8">` says "38 percent"; pass `"3 of 8 files"` when the number means something else. |
+
+### Slider
+
+Native `<input type="range">`. The keyboard support, the min/max/step arithmetic and the announced role all come from the platform, which is why this is under 200 bytes at the lower tiers.
+
+`normal` / `styled`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `min` / `max` / `step` | `number` | `0` / `100` / `1` | |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Rendered as a real `<label>`. |
+| `hideLabel` | `boolean` | `false` | |
+| `description` | `string` | - | Wired into `aria-describedby`. |
+| `showValue` | `boolean` | `false` | Renders the value in an `<output>`, marked `aria-hidden` because the input already announces it. |
+| `formatValue` | `(value: number) => string` | - | Sets `aria-valuetext` and the visible output. A price slider announces "50" without it. |
+
+Uncontrolled by default; pass `defaultValue` and read `onChange`. An uncontrolled slider starts at the midpoint, matching the native thumb.
+
+### Breadcrumb
+
+A `<nav>` around an ordered list, because the order is the information. All three tiers are server-renderable.
+
+The separator is drawn in CSS, never rendered as text, so a screen reader is not reading punctuation between the steps.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `Array<{ key?, label, href? }>` | - | Root first. An item with no `href` renders as text. |
+| `className` | `string` | - | |
+
+`a11y` adds the two things a hand-rolled breadcrumb almost always misses:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | `'Breadcrumb'` | Names the `<nav>`. A page usually has several navigation landmarks, and unnamed ones are announced as "navigation, navigation, navigation". |
+| `linkCurrent` | `boolean` | `false` | By default the last item renders as text even if given an `href`, because a link to the page you are on is a link that does nothing. Either way it gets `aria-current="page"`. |
+
+### Tooltip
+
+**Read this before using one.** A tooltip is the control most often used for the wrong job.
+
+- **Never put essential information in one.** There is no hover on touch, so it is simply unreachable there.
+- **Never put interactive content in one.** Moving towards a link inside a tooltip dismisses the tooltip. If you need that, you want a popover.
+- **The trigger must be focusable.** A tooltip on a plain `<span>` does not exist for keyboard users. The `a11y` tier warns when its child cannot receive props.
+
+Showing and hiding is done in CSS, by `:hover` and `:focus-within`. Those are the two events that should reveal a tooltip and both are expressible as selectors, so the `normal` and `styled` tiers need no JavaScript.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `ReactNode` | - | The tooltip text. |
+| `placement` | `'top' \| 'bottom'` | `'top'` | |
+| `children` | `ReactElement` | - | The trigger. |
+
+`a11y` adds the two things CSS cannot: `aria-describedby` from the trigger to the bubble, which is what makes a screen reader read it at all, and Escape to dismiss, which WCAG 1.4.13 requires for content revealed on hover. It clones the child to attach them, so the trigger stays your element rather than a wrapper of ours.
+
+### Menu
+
+The W3C APG menu button pattern, on top of the native Popover API. The browser supplies the top layer, the outside-click dismissal and Escape; this component supplies the menu semantics and keyboard.
+
+Like popover, `id` is required rather than generated.
+
+**When not to use it.** `role="menu"` means a list of *actions*, in the application-menu sense. A button revealing a few navigation links is not a menu, and marking it up as one makes a screen reader announce a widget the user then cannot operate as one. Use `abaabil/popover` with links in it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` | `string` | - | Panel id; also wires the trigger. Required. |
+| `trigger` | `ReactNode` | - | Button content. |
+| `items` | `Array<{ key?, label, href?, onSelect?, disabled? }>` | - | An item with `href` renders an `<a>`, otherwise a `<button>`. |
+| `triggerProps` | `object` | - | Spread onto the trigger. |
+
+`a11y` adds:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Names the menu itself. Without it the menu is named by its trigger. |
+
+plus `aria-haspopup`, a live `aria-expanded` kept in step with the panel's own `toggle` event, `role="menu"`/`role="menuitem"`, a roving tabindex, Up/Down with wrapping, Home/End, multi-character typeahead, Tab to close, and focus moving to the first item on open and back to the trigger on close.
+
+### Pagination
+
+A `<nav>` around an ordered list of real links, so each page is a URL you can open in a new tab, bookmark and share. A paginator built from buttons takes all of that away for nothing. Server-renderable at every tier.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `page` | `number` | - | Current page, 1-based. |
+| `pageCount` | `number` | - | Total pages. |
+| `href` | `(page) => string` | - | Builds each page's URL. |
+| `siblings` | `number` | `1` | Pages shown either side of the current one before the list collapses. |
+| `className` | `string` | - | |
+
+The gap is drawn in CSS, never rendered as text, so an ellipsis is never read out between numbers. It also only ever appears when it stands in for **two or more** pages: a gap replacing a single number takes the same room and says less.
+
+`a11y` adds the four things a hand-rolled paginator usually misses:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | `'Pagination'` | Names the `<nav>`. |
+| `pageLabel` | `(n) => string` | `` `Page ${n}` `` | Names each number. A link whose whole content is "7" is announced as "7", which in a list of links means nothing. Replace to translate. |
+| `previousLabel` | `string` | `'Previous page'` | |
+| `nextLabel` | `string` | `'Next page'` | |
+
+plus `aria-current="page"` on the current page. At either end, Previous and Next are not links at all, so nothing dead stays in the tab order.
+
+### File
+
+A native `<input type="file">`, not a `<button>` with a hidden input behind it. That pattern has to reimplement the label association, the keyboard activation and the announcement of the chosen file, and usually manages one of the three. The real control does all three, and it is stylable: `::file-selector-button` is a real pseudo-element.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` adds the same label, description and error wiring as `input`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Rendered as a real `<label>`. |
+| `hideLabel` | `boolean` | `false` | |
+| `description` | `string` | - | Wired into `aria-describedby`. |
+| `error` | `string` | - | Sets `aria-invalid` and joins `aria-describedby`. |
+| `required` | `boolean` | `false` | |
+
+It also warns when you pass `accept` without a `description`. `accept` filters the file dialog silently: it is never announced, and it does not apply to a file dropped onto the control. Say what you take in words.
+
+### Toolbar
+
+The W3C APG toolbar pattern. The point of it is the tab sequence: a row of eight buttons is eight stops on the way to the rest of the page, and as a toolbar it is one, with the arrow keys moving between the controls inside. A toolbar that does not do that is a `<div>` with a role on it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Chooses the arrow pair. |
+| `className` | `string` | - | |
+
+`a11y` adds `role="toolbar"`, `aria-orientation`, a roving tabindex, arrow keys following the orientation, and Home/End:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Accessible name. An unnamed toolbar is announced as "toolbar" and nothing else. |
+| `labelledBy` | `string` | - | Id of an element naming it. |
+
+It takes arbitrary children rather than an `items` array, because a toolbar's contents are heterogeneous by definition, and manages `tabindex` on its focusable descendants directly: cloning would only reach the top level. A control that needs the arrows itself, such as a `<select>` or a text field, keeps them.
+
+### Avatar
+
+An image when there is one, initials when there is not. There is no fallback-on-load-error, which would need state and make every tier a client component for a case the server usually already knows about: pass no `src` and you get initials.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `src` | `string` | - | Omit for initials. |
+| `name` | `string` | - | Used for the initials. |
+| `alt` | `string` | `''` | Empty by default, which is right more often than not. |
+| `className` | `string` | - | |
+
+`a11y` asks the question the component cannot answer for you:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `decorative` | `boolean` | `true` | Whether the avatar repeats something already on screen. |
+
+Beside a visible name an avatar is **decorative**: it says nothing the text does not, and naming it means hearing the person twice. Alone, in a stack of collaborators or a comment with no byline, it is the only thing identifying someone and needs a name, so pass `decorative={false}`.
+
+The initials are never the accessible name. "FA" read aloud is not a person: when meaningful, the letters are hidden and the name is carried by a `role="img"` that can hold one.
+
+### Badge
+
+A small piece of status text. Server-renderable at every tier.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Applied as `data-variant`. |
+| `className` | `string` | - | |
+
+`a11y` adds the one thing that makes a badge worth a component:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `context` | `string` | - | The rest of the sentence, announced but not drawn. |
+
+A badge is shorthand that only means something beside what it is attached to. "3" next to an inbox icon, read out on its own in a list of everything on the page, is noise: the user hears "three" with no way to know three of what. `context` supplies the rest as visually hidden text, so the badge still draws "3" and announces "3 unread messages".
+
+It is hidden text rather than `aria-label`, deliberately. A badge is a `<span>`, a span has no role, and `aria-label` is prohibited on a generic element: set it there and it is discarded, leaving the badge as unlabelled as before while looking fixed. That exact mistake shipped in this library's own popover, and is why this component does it the other way.
+
+A badge is not a live region. A count that changes while the page is open does not announce itself, and this does not make it do so; wrap it in `abaabil/alert` if the change is worth interrupting for, which for an unread count it usually is not.
+
 ## Combobox: uncontrolled in 1.x
 
 The combobox is uncontrolled in this release: it does not accept a `value` prop. Observe the selected value through the `onChange` callback instead of driving it from external state.
@@ -554,6 +812,16 @@ Where the panel appears is a separate question from whether it works. Attaching
 - Tabs implement the [WAI-ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), including a roving tabindex so Tab steps past the tablist rather than through every tab in it.
 - Switch carries `role="switch"` from its `normal` tier, so it never looks like a switch while announcing itself as a checkbox.
 - Alert derives `role="status"` or `role="alert"` from its variant, so a confirmation does not interrupt and an error does. Read the note in its props section about when live regions actually announce.
+- Menu implements the [WAI-ARIA Authoring Practices Guide menu button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/), and its docs say when a menu is the wrong widget.
+- Tooltip shows on both hover and focus, dismisses on Escape as WCAG 1.4.13 requires, and its bubble is never a pointer target so it cannot be hovered instead of its trigger.
+- Progress accepts `valueText`, because a bar whose number is not a percentage is otherwise announced as one.
+- Slider is a native range input, so its keyboard support is the platform's rather than a reimplementation; `formatValue` sets `aria-valuetext` for values that are not self-explanatory.
+- Breadcrumb names its `<nav>` and marks the current page with `aria-current`, and draws its separators in CSS so they are never read aloud.
+- Toolbar implements the [WAI-ARIA Authoring Practices Guide toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), collapsing a row of controls to one tab stop with arrow-key movement inside.
+- Pagination names its `<nav>`, gives every number a real name rather than a bare digit, marks the current page with `aria-current`, and draws its gap in CSS so it is never read aloud.
+- File warns when `accept` is set with nothing explaining it in words, because `accept` is never announced and does not apply to a dropped file.
+- Avatar treats decorative and meaningful as different cases, and never uses the initials as the accessible name.
+- Badge carries its context as visually hidden text rather than `aria-label`, which a `<span>` discards.
 - `a11y` tiers are the recommended default for production use; `normal` and `styled` tiers exist for cases where you want to compose your own accessibility behavior.
 
 ## License

package/dist/avatar/a11y.js

@@ -0,0 +1 @@
+import{jsx as a}from"react/jsx-runtime";import"./avatar.css";import{initials as c}from"./index.js";function m({src:n,name:e,decorative:i=!0,className:s,children:t,...l}){const o=s?`abaabil-avatar ${s}`:"abaabil-avatar";typeof process<"u"&&process.env.NODE_ENV!=="production"&&!i&&!e&&console.warn("abaabil/avatar: decorative={false} means this avatar is the only thing identifying someone, so it needs a `name`. Without one it is announced as an unlabelled image.");const r=t??c(e);return a("span",{className:o,...l,children:n?a("img",{src:n,alt:i?"":e||"",className:"abaabil-avatar__image"}):i?a("span",{className:"abaabil-avatar__initials","aria-hidden":"true",children:r}):a("span",{className:"abaabil-avatar__initials",role:"img","aria-label":e,children:a("span",{"aria-hidden":"true",children:r})})})}export{m as default};

package/dist/avatar/avatar.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-avatar{--avatar-size:2.5rem;inline-size:var(--avatar-size);block-size:var(--avatar-size);background:var(--color-muted);color:var(--color-text);font-size:calc(var(--avatar-size) * .4);font-weight:var(--font-weight-semibold);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:clip}.abaabil-avatar__image{object-fit:cover;object-position:center 30%;block-size:100%;inline-size:100%}.abaabil-avatar__initials{letter-spacing:.02em;text-indent:.02em}}

package/dist/avatar/index.js

@@ -0,0 +1 @@
+import{jsx as l}from"react/jsx-runtime";function o({src:t,name:a,alt:n="",className:e,children:r,...i}){const c=e?`abaabil-avatar ${e}`:"abaabil-avatar";return l("span",{className:c,...i,children:t?l("img",{src:t,alt:n,className:"abaabil-avatar__image"}):l("span",{className:"abaabil-avatar__initials",children:r??s(a)})})}function s(t){if(!t)return"";const a=String(t).trim().split(/\s+/).filter(Boolean);if(!a.length)return"";const n=e=>{if(typeof Intl<"u"&&Intl.Segmenter){const[r]=new Intl.Segmenter().segment(e);return r?r.segment:e[0]}return[...e][0]};return a.length===1?n(a[0]).toUpperCase():(n(a[0])+n(a[a.length-1])).toUpperCase()}export{o as default,s as initials};

package/dist/avatar/styled.js

@@ -0,0 +1 @@
+import"./avatar.css";import{default as r,initials as a}from"./index.js";export{r as default,a as initials};

package/dist/badge/a11y.js

@@ -0,0 +1 @@
+import{jsxs as r}from"react/jsx-runtime";import"./badge.css";import s from"./index.js";function t({variant:e="neutral",context:a,className:l,children:n,...i}){return r(s,{variant:e,className:l,...i,children:[n,a?r("span",{className:"abaabil-visually-hidden",children:[" ",a]}):null]})}export{t as default};

package/dist/badge/badge.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-badge{--badge-accent:var(--color-text-muted);align-items:center;gap:var(--space-1);padding-block:.1em;padding-inline:var(--space-2);border:1px solid color-mix(in srgb, var(--badge-accent) 35%, var(--color-surface));background:color-mix(in srgb, var(--badge-accent) 12%, var(--color-surface));color:var(--color-text);font-size:max(.75rem,.8em);font-weight:var(--font-weight-semibold);white-space:nowrap;border-radius:999px;line-height:1.4;display:inline-flex}.abaabil-badge[data-variant=info]{--badge-accent:var(--color-primary)}.abaabil-badge[data-variant=success]{--badge-accent:var(--color-success)}.abaabil-badge[data-variant=warning]{--badge-accent:var(--color-warning)}.abaabil-badge[data-variant=danger]{--badge-accent:var(--color-danger)}}

package/dist/badge/index.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";function l({variant:e="neutral",className:a,children:n,...r}){const t=a?`abaabil-badge ${a}`:"abaabil-badge";return i("span",{className:t,"data-variant":e,...r,children:n})}export{l as default};

package/dist/badge/styled.js

@@ -0,0 +1 @@
+import"./badge.css";import{default as e}from"./index.js";export{e as default};

package/dist/breadcrumb/a11y.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"./breadcrumb.css";function u({items:l,label:c="Breadcrumb",linkCurrent:m=!1,className:b,...s}){const n=b?`abaabil-breadcrumb ${b}`:"abaabil-breadcrumb",t=l.length-1;return e("nav",{className:n,"aria-label":c,...s,children:e("ol",{className:"abaabil-breadcrumb__list",children:l.map((a,i)=>{const r=i===t,d=a.href&&(!r||m);return e("li",{className:"abaabil-breadcrumb__item",children:d?e("a",{href:a.href,className:"abaabil-breadcrumb__link","aria-current":r?"page":void 0,children:a.label}):e("span",{className:"abaabil-breadcrumb__current","aria-current":r?"page":void 0,children:a.label})},a.key??i)})})})}export{u as default};

package/dist/breadcrumb/breadcrumb.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-breadcrumb__list{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-breadcrumb__item{align-items:center;gap:var(--space-2);color:var(--color-text-muted);display:flex}.abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{content:"";opacity:.6;border-block-start:1.5px solid;border-inline-end:1.5px solid;flex:none;block-size:.35rem;inline-size:.35rem;rotate:45deg}.abaabil-breadcrumb__list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{rotate:-135deg}.abaabil-breadcrumb__link{color:var(--color-text-muted);text-underline-offset:.2em;border-radius:var(--radius-md);text-decoration:underline}.abaabil-breadcrumb__link:hover{color:var(--color-text)}.abaabil-breadcrumb__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-breadcrumb__current{color:var(--color-text);font-weight:var(--font-weight-semibold)}}

package/dist/breadcrumb/index.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";function s({items:b,className:r,...l}){const c=r?`abaabil-breadcrumb ${r}`:"abaabil-breadcrumb";return e("nav",{className:c,...l,children:e("ol",{className:"abaabil-breadcrumb__list",children:b.map((a,i)=>e("li",{className:"abaabil-breadcrumb__item",children:a.href?e("a",{href:a.href,className:"abaabil-breadcrumb__link",children:a.label}):e("span",{className:"abaabil-breadcrumb__current",children:a.label})},a.key??i))})})}export{s as default};

package/dist/breadcrumb/styled.js

@@ -0,0 +1 @@
+import"./breadcrumb.css";import{default as e}from"./index.js";export{e as default};

package/dist/file/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as m,jsx as i}from"react/jsx-runtime";import{useId as h}from"react";import"./file.css";import v from"./index.js";function y({label:r,hideLabel:t=!1,description:e,error:a,required:b=!1,id:c,"aria-describedby":p,...l}){const o=h(),s=c??`${o}-file`,n=`${o}-description`,d=`${o}-error`,f=!!(r||l["aria-label"]||l["aria-labelledby"]);typeof process<"u"&&process.env.NODE_ENV!=="production"&&!f&&console.warn("abaabil/file: no `label` given, so the file input has no accessible name. Pass `label`, `aria-label`, or `aria-labelledby`."),typeof process<"u"&&process.env.NODE_ENV!=="production"&&l.accept&&!e&&console.warn("abaabil/file: `accept` filters the file dialog but is never announced, and it does not apply to files dropped onto the control. Pass a `description` saying what is accepted.");const u=[p,e?n:null,a?d:null].filter(Boolean).join(" ")||void 0;return m("div",{className:"abaabil-file-group",children:[r?i("label",{htmlFor:s,className:t?"abaabil-file__label abaabil-visually-hidden":"abaabil-file__label",children:r}):null,i(v,{...l,id:s,required:b,"aria-invalid":a?!0:void 0,"aria-describedby":u}),e?i("div",{id:n,className:"abaabil-file__description",children:e}):null,a?i("div",{id:d,className:"abaabil-file__error",role:"alert",children:a}):null]})}export{y as default};

package/dist/file/file.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-file{--file-border:var(--color-border);inline-size:100%;padding:var(--space-2);border:1px solid var(--file-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;display:block}.abaabil-file::file-selector-button{padding-block:var(--space-1);padding-inline:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-muted);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--duration-fast) ease;margin-inline-end:var(--space-3)}.abaabil-file::file-selector-button:hover{background:var(--color-border)}.abaabil-file:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-file:disabled{opacity:.5;cursor:not-allowed}.abaabil-file:disabled::file-selector-button{opacity:.5;cursor:not-allowed}.abaabil-file[aria-invalid=true]{--file-border:var(--color-danger)}.abaabil-file-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-file__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-file__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-file__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-file::file-selector-button{transition:none}}}

package/dist/file/index.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";function l({className:a,...e}){const i=a?`abaabil-file ${a}`:"abaabil-file";return t("input",{type:"file",className:i,...e})}export{l as default};

package/dist/file/styled.js

@@ -0,0 +1 @@
+import"./file.css";import{default as e}from"./index.js";export{e as default};

package/dist/menu/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as P,Fragment as T,jsx as c}from"react/jsx-runtime";import{useRef as u,useState as D,useEffect as $}from"react";import"./menu.css";import{anchorNameFor as x}from"./index.js";function q({id:l,trigger:F,items:i,label:N,triggerProps:C,className:d,...E}){const f=u(null),h=u(null),m=u([]),[L,K]=D(!1),[S,_]=D(0),g=u(0),b=e=>{g.current=e,_(e)},v=u({buffer:"",at:0}),A=d?`abaabil-menu ${d}`:"abaabil-menu",t=i.map((e,r)=>e.disabled?null:r).filter(e=>e!==null);$(()=>{const e=f.current;if(!e)return;function r(a){const n=a.newState==="open";if(K(n),n){const s=t[0]??0;b(s),m.current[s]?.focus()}else v.current={buffer:"",at:0}}return e.addEventListener("toggle",r),()=>e.removeEventListener("toggle",r)},[]);function p({restoreFocus:e=!0}={}){f.current?.hidePopover(),e&&h.current?.focus()}function o(e){b(e),m.current[e]?.focus()}function y(e,r){if(!t.length)return e;const a=(t.indexOf(e)+r+t.length)%t.length;return t[a]}function O(e){const r=g.current;switch(e.key){case"ArrowDown":e.preventDefault(),o(y(r,1));return;case"ArrowUp":e.preventDefault(),o(y(r,-1));return;case"Home":e.preventDefault(),o(t[0]??0);return;case"End":e.preventDefault(),o(t[t.length-1]??0);return;case"Tab":p({restoreFocus:!1});return}if(e.key.length!==1||e.metaKey||e.ctrlKey||e.altKey)return;const a=Date.now(),n=v.current;n.buffer=a-n.at>500?e.key:n.buffer+e.key,n.at=a;const s=n.buffer.toLowerCase(),w=t.indexOf(r)+1,k=[...t.slice(w),...t.slice(0,w)].find(j=>String(i[j].label).toLowerCase().startsWith(s));k!==void 0&&(e.preventDefault(),o(k))}return P(T,{children:[c("button",{type:"button",ref:h,popoverTarget:l,"aria-haspopup":"menu","aria-expanded":L,className:"abaabil-menu__trigger",style:{anchorName:x(l)},...C,children:F}),c("div",{id:l,popover:"auto",ref:f,role:"menu","aria-label":N,className:A,style:{positionAnchor:x(l)},onKeyDown:O,...E,children:i.map((e,r)=>{const a={role:"menuitem",className:"abaabil-menu__item",tabIndex:r===S?0:-1,ref:n=>{m.current[r]=n},onFocus:()=>b(r)};return e.href?c("a",{href:e.href,...a,onClick:()=>p({restoreFocus:!1}),children:e.label},e.key??r):c("button",{type:"button",disabled:e.disabled,...a,onClick:()=>{e.onSelect?.(),p()},children:e.label},e.key??r)})})]})}export{q as default};

package/dist/menu/index.js

@@ -0,0 +1 @@
+import{jsxs as b,Fragment as d,jsx as n}from"react/jsx-runtime";function o(e){return`--abaabil-menu-${String(e).replace(/[^\w-]/g,"-")}`}function p({id:e,trigger:r,items:l,triggerProps:s,className:a,...t}){const i=a?`abaabil-menu ${a}`:"abaabil-menu";return b(d,{children:[n("button",{type:"button",popoverTarget:e,className:"abaabil-menu__trigger",style:{anchorName:o(e)},...s,children:r}),n("div",{id:e,popover:"auto",className:i,style:{positionAnchor:o(e)},...t,children:l.map((m,u)=>n(c,{...m},m.key??u))})]})}function c({label:e,href:r,onSelect:l,disabled:s,className:a,...t}){const i=a?`abaabil-menu__item ${a}`:"abaabil-menu__item";return r?n("a",{href:r,className:i,...t,children:e}):n("button",{type:"button",className:i,onClick:l,disabled:s,...t,children:e})}export{c as MenuItem,o as anchorNameFor,p as default};

package/dist/menu/menu.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-menu{inline-size:max-content;min-inline-size:10rem;max-inline-size:min(18rem,100vw - 2rem);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-menu::backdrop{background:0 0}.abaabil-menu__trigger{font:inherit;color:inherit}.abaabil-menu__item{appearance:none;inline-size:100%;padding-block:var(--space-2);padding-inline:var(--space-3);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);text-align:start;white-space:nowrap;cursor:pointer;background:0 0;border:0;text-decoration:none;display:block}.abaabil-menu__item:hover{background:var(--color-muted)}.abaabil-menu__item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px;background:var(--color-muted)}.abaabil-menu__item:disabled{opacity:.5;cursor:not-allowed}.abaabil-menu__item:disabled:hover{background:0 0}@supports (anchor-name:--x){.abaabil-menu{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-menu:popover-open{opacity:0}}.abaabil-menu:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-menu:popover-open{transition:none}@starting-style{.abaabil-menu:popover-open{opacity:1}}}}

package/dist/menu/styled.js

@@ -0,0 +1 @@
+import"./menu.css";import{MenuItem as m,anchorNameFor as t,default as a}from"./index.js";export{m as MenuItem,t as anchorNameFor,a as default};

package/dist/pagination/a11y.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as b}from"react/jsx-runtime";import"./pagination.css";import{pageWindow as u,GAP as v}from"./index.js";function x({page:i,pageCount:t,href:n,siblings:r=1,label:o="Pagination",pageLabel:l=s=>`Page ${s}`,previousLabel:_="Previous page",nextLabel:c="Next page",className:p,...g}){const s=p?`abaabil-pagination ${p}`:"abaabil-pagination",m=u(i,t,r),d=i>1,h=i<t;return a("nav",{className:s,"aria-label":o,...g,children:b("ol",{className:"abaabil-pagination__list",children:[a("li",{className:"abaabil-pagination__item",children:d?a("a",{href:n(i-1),className:"abaabil-pagination__step abaabil-pagination__step--prev","aria-label":`${_}, ${l(i-1)}`,children:"Previous"}):a("span",{className:"abaabil-pagination__step abaabil-pagination__step--prev abaabil-pagination__step--unavailable",children:"Previous"})}),m.map((e,N)=>e===v?a("li",{className:"abaabil-pagination__item",children:a("span",{className:"abaabil-pagination__gap"})},`gap-${N}`):a("li",{className:"abaabil-pagination__item",children:e===i?b("span",{className:"abaabil-pagination__current","aria-current":"page",children:[a("span",{"aria-hidden":"true",children:e}),a("span",{className:"abaabil-visually-hidden",children:l(e)})]}):a("a",{href:n(e),className:"abaabil-pagination__link","aria-label":l(e),children:e})},e)),a("li",{className:"abaabil-pagination__item",children:h?a("a",{href:n(i+1),className:"abaabil-pagination__step abaabil-pagination__step--next","aria-label":`${c}, ${l(i+1)}`,children:"Next"}):a("span",{className:"abaabil-pagination__step abaabil-pagination__step--next abaabil-pagination__step--unavailable",children:"Next"})})]})})}export{x as default};

package/dist/pagination/index.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as _}from"react/jsx-runtime";function m({page:a,pageCount:n,href:l,siblings:p=1,className:t,...i}){const s=t?`abaabil-pagination ${t}`:"abaabil-pagination",r=g(a,n,p);return e("nav",{className:s,...i,children:_("ol",{className:"abaabil-pagination__list",children:[e("li",{className:"abaabil-pagination__item",children:e(h,{to:a-1,page:a,pageCount:n,href:l,kind:"prev",children:"Previous"})}),r.map((o,b)=>o===c?e("li",{className:"abaabil-pagination__item",children:e("span",{className:"abaabil-pagination__gap"})},`gap-${b}`):e("li",{className:"abaabil-pagination__item",children:o===a?e("span",{className:"abaabil-pagination__current",children:o}):e("a",{href:l(o),className:"abaabil-pagination__link",children:o})},o)),e("li",{className:"abaabil-pagination__item",children:e(h,{to:a+1,page:a,pageCount:n,href:l,kind:"next",children:"Next"})})]})})}function h({to:a,page:n,pageCount:l,href:p,kind:t,children:i}){const s=a>=1&&a<=l,r=`abaabil-pagination__step abaabil-pagination__step--${t}`;return s?e("a",{href:p(a),className:r,children:i}):e("span",{className:`${r} abaabil-pagination__step--unavailable`,children:i})}const c="gap";function g(a,n,l=1){if(n<=l*2+5)return Array.from({length:n},(s,r)=>r+1);const p=Math.max(2,a-l),t=Math.min(n-1,a+l),i=[1];p>3?i.push(c):p===3&&i.push(2);for(let s=p;s<=t;s++)i.push(s);return t<n-2?i.push(c):t===n-2&&i.push(n-1),i.push(n),i}export{c as GAP,m as default,g as pageWindow};

package/dist/pagination/pagination.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-pagination__list{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-pagination__link,.abaabil-pagination__current,.abaabil-pagination__step{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);padding-inline:var(--space-2);border-radius:var(--radius-md);color:var(--color-text);font-variant-numeric:tabular-nums;border:1px solid #0000;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.abaabil-pagination__link:hover{background:var(--color-muted)}.abaabil-pagination__link:focus-visible,.abaabil-pagination__step:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-pagination__current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg);font-weight:var(--font-weight-semibold)}.abaabil-pagination__gap:before{content:"…"}.abaabil-pagination__gap{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.abaabil-pagination__step{border-color:var(--color-border)}.abaabil-pagination__step:hover{background:var(--color-muted)}.abaabil-pagination__step--unavailable{color:var(--color-text-muted);opacity:.6;border-color:#0000}}

package/dist/pagination/styled.js

@@ -0,0 +1 @@
+import"./pagination.css";import{GAP as r,default as t,pageWindow as a}from"./index.js";export{r as GAP,t as default,a as pageWindow};

package/dist/popover/a11y.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import"./popover.css";import{Popover as d}from"./index.js";import{PopoverPanel as v,PopoverTrigger as P}from"./index.js";function b({id:a,trigger:l,label:r,labelledBy:o,triggerProps:n,mode:i="auto",children:p,...e}){const s=!!(r||o||e["aria-label"]||e["aria-labelledby"]);return typeof process<"u"&&process.env.NODE_ENV!=="production"&&!s&&console.warn("abaabil/popover: no `label` or `labelledBy` given, so the panel has no accessible name and screen readers announce it as an unnamed group."),t(d,{id:a,trigger:l,triggerProps:n,mode:i,"aria-label":r,"aria-labelledby":o,...e,children:p})}export{v as PopoverPanel,P as PopoverTrigger,b as default};
+import{jsx as d}from"react/jsx-runtime";import"./popover.css";import{Popover as g}from"./index.js";import{PopoverPanel as P,PopoverTrigger as y}from"./index.js";function b({id:a,trigger:l,label:r,labelledBy:o,role:n="group",triggerProps:i,mode:p="auto",children:t,...e}){const s=!!(r||o||e["aria-label"]||e["aria-labelledby"]);return typeof process<"u"&&process.env.NODE_ENV!=="production"&&!s&&console.warn("abaabil/popover: no `label` or `labelledBy` given, so the panel has no accessible name and screen readers announce it as an unnamed group."),d(g,{id:a,trigger:l,triggerProps:i,mode:p,role:n,"aria-label":r,"aria-labelledby":o,...e,children:t})}export{P as PopoverPanel,y as PopoverTrigger,b as default};

package/dist/progress/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as g,jsx as i}from"react/jsx-runtime";import{useId as f}from"react";import"./progress.css";import h from"./index.js";function x({label:a,hideLabel:d=!1,description:l,valueText:n,value:t,max:c=100,id:p,"aria-describedby":u,...e}){const r=f(),s=p??`${r}-progress`,o=`${r}-description`,b=`${r}-label`,m=!!(a||e["aria-label"]||e["aria-labelledby"]);typeof process<"u"&&process.env.NODE_ENV!=="production"&&!m&&console.warn("abaabil/progress: no `label` given, so the progress bar has no accessible name. Pass `label`, `aria-label`, or `aria-labelledby`.");const v=[u,l?o:null].filter(Boolean).join(" ")||void 0;return g("div",{className:"abaabil-progress-group",children:[a?i("label",{id:b,htmlFor:s,className:d?"abaabil-progress__label abaabil-visually-hidden":"abaabil-progress__label",children:a}):null,i(h,{...e,id:s,value:t,max:c,"aria-valuetext":n,"aria-labelledby":a?b:void 0,"aria-describedby":v}),l?i("div",{id:o,className:"abaabil-progress__description",children:l}):null]})}export{x as default};

package/dist/progress/index.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";function m({value:s,max:e=100,className:a,...r}){const l=a?`abaabil-progress ${a}`:"abaabil-progress";return o("progress",{className:l,value:s,max:e,...r})}export{m as default};

package/dist/progress/progress.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-progress{appearance:none;background:var(--color-muted);block-size:.5rem;inline-size:100%;color:var(--color-primary);border:0;border-radius:999px;display:block;overflow:hidden}.abaabil-progress::-webkit-progress-bar{background:var(--color-muted);border-radius:999px}.abaabil-progress::-webkit-progress-value{background:var(--color-primary);transition:inline-size var(--duration-fast) ease;border-radius:999px}.abaabil-progress::-moz-progress-bar{background:var(--color-primary);border-radius:999px}.abaabil-progress:indeterminate{background:linear-gradient(90deg, var(--color-primary) 0 35%, transparent 35% 100%) 0 0 / 250% 100% no-repeat var(--color-muted);animation:1.4s linear infinite abaabil-progress-slide}.abaabil-progress:indeterminate::-webkit-progress-bar{background:0 0}.abaabil-progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes abaabil-progress-slide{0%{background-position:-60% 0}to{background-position:160% 0}}.abaabil-progress-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-progress__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-progress__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}@media (prefers-reduced-motion:reduce){.abaabil-progress::-webkit-progress-value{transition:none}.abaabil-progress:indeterminate{background-position:40% 0;animation:none}}}

package/dist/progress/styled.js

@@ -0,0 +1 @@
+import"./progress.css";import{default as e}from"./index.js";export{e as default};

package/dist/slider/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as N,jsx as e}from"react/jsx-runtime";import{useId as E,useState as F}from"react";import"./slider.css";import S from"./index.js";function B({label:l,hideLabel:v=!1,description:i,showValue:_=!1,formatValue:n,min:r=0,max:s=100,value:o,defaultValue:x,onChange:y,id:g,"aria-describedby":V,...d}){const u=E(),b=g??`${u}-slider`,m=`${u}-description`,t=o!==void 0,c=a=>Math.min(Math.max(Number(a),Number(r)),Number(s)),[h,M]=F(()=>c(x??Math.floor((Number(r)+Number(s))/2))),f=t?c(o):h,j=!!(l||d["aria-label"]||d["aria-labelledby"]);typeof process<"u"&&process.env.NODE_ENV!=="production"&&!j&&console.warn("abaabil/slider: no `label` given, so the slider has no accessible name. Pass `label`, `aria-label`, or `aria-labelledby`.");const w=[V,i?m:null].filter(Boolean).join(" ")||void 0,p=n?n(Number(f)):void 0;function C(a){t||M(a.target.value),y?.(a)}return N("div",{className:"abaabil-slider-group",children:[N("div",{className:"abaabil-slider__header",children:[l?e("label",{htmlFor:b,className:v?"abaabil-slider__label abaabil-visually-hidden":"abaabil-slider__label",children:l}):null,_?e("output",{htmlFor:b,className:"abaabil-slider__output","aria-hidden":"true",children:p??f}):null]}),e(S,{...d,id:b,min:r,max:s,...t?{value:o}:{defaultValue:h},onChange:C,"aria-valuetext":p,"aria-describedby":w}),i?e("div",{id:m,className:"abaabil-slider__description",children:i}):null]})}export{B as default};

package/dist/slider/index.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";function n({min:e=0,max:s=100,step:t=1,className:a,...i}){const r=a?`abaabil-slider ${a}`:"abaabil-slider";return m("input",{type:"range",className:r,min:e,max:s,step:t,...i})}export{n as default};

package/dist/slider/slider.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-slider{--slider-track:.3rem;--slider-thumb:1.1rem;appearance:none;inline-size:100%;block-size:var(--slider-thumb);cursor:pointer;background:0 0;margin:0}.abaabil-slider::-webkit-slider-runnable-track{block-size:var(--slider-track);background:var(--color-muted);border-radius:999px}.abaabil-slider::-moz-range-track{block-size:var(--slider-track);background:var(--color-muted);border-radius:999px}.abaabil-slider::-webkit-slider-thumb{appearance:none;inline-size:var(--slider-thumb);block-size:var(--slider-thumb);border:2px solid var(--color-surface);background:var(--color-primary);border-radius:50%;margin-block-start:calc((var(--slider-track) - var(--slider-thumb)) / 2)}.abaabil-slider::-moz-range-thumb{inline-size:var(--slider-thumb);block-size:var(--slider-thumb);border:2px solid var(--color-surface);background:var(--color-primary);border-radius:50%}.abaabil-slider::-moz-range-progress{block-size:var(--slider-track);background:var(--color-primary);border-radius:999px}.abaabil-slider:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:4px;border-radius:999px}.abaabil-slider:disabled{opacity:.5;cursor:not-allowed}.abaabil-slider-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-slider__header{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.abaabil-slider__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-slider__output{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text)}.abaabil-slider__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}}

package/dist/slider/styled.js

@@ -0,0 +1 @@
+import"./slider.css";import{default as e}from"./index.js";export{e as default};

package/dist/styles.css

@@ -1 +1 @@
-@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-blue-400:#3b82f6;--abaabil-gray-900:#111827;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--color-primary:var(--abaabil-blue-500);--color-primary-hover:var(--abaabil-blue-400);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--abaabil-blue-500);--color-overlay:#00000080;--color-text-muted:#6b7280;--color-placeholder:#9ca3af;--radius-md:.375rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--font-size-sm:.875rem;--font-size-lg:1.125rem;--font-weight-semibold:600;--control-height-md:2.5rem;--duration-fast:.15s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}:root[data-theme=dark]{--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}@layer abaabil.base{.abaabil-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer abaabil.components{.abaabil-accordion-group{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:clip}.abaabil-accordion-group .abaabil-accordion+.abaabil-accordion{border-top:1px solid var(--color-border)}.abaabil-accordion{color:var(--color-text)}.abaabil-accordion__summary{list-style:none}.abaabil-accordion__summary::-webkit-details-marker{display:none}.abaabil-accordion__summary{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--control-height-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.3;display:flex}.abaabil-accordion__summary:hover{background:var(--color-muted)}.abaabil-accordion__summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-accordion__summary:after{content:"";block-size:.5rem;inline-size:.5rem;transition:transform var(--duration-fast) ease;border-bottom:2px solid;border-right:2px solid;flex:none;transform:rotate(45deg)}.abaabil-accordion[open]>.abaabil-accordion__summary:after{transform:rotate(-135deg)}.abaabil-accordion__panel{padding:0 var(--space-4) var(--space-3)}@media (prefers-reduced-motion:reduce){.abaabil-accordion__summary:after{transition:none}}.abaabil-alert{--alert-accent:var(--color-primary);gap:var(--space-1);padding-block:var(--space-2);padding-inline:var(--space-3);border:1px solid color-mix(in srgb, var(--alert-accent) 35%, var(--color-surface));border-inline-start:3px solid var(--alert-accent);border-radius:var(--radius-md);background:color-mix(in srgb, var(--alert-accent) 8%, var(--color-surface));color:var(--color-text);font-size:var(--font-size-sm);flex-direction:column;line-height:1.5;display:flex}.abaabil-alert[data-variant=success]{--alert-accent:var(--color-success)}.abaabil-alert[data-variant=warning]{--alert-accent:var(--color-warning)}.abaabil-alert[data-variant=danger]{--alert-accent:var(--color-danger)}.abaabil-alert__title{font-weight:var(--font-weight-semibold);color:var(--color-text)}.abaabil-alert:empty{display:none}.abaabil-button{--btn-bg:var(--color-primary);--btn-fg:var(--color-primary-fg);--btn-border:var(--color-primary);--btn-height:var(--control-height-md);--btn-padding-x:max(.375rem, calc((var(--btn-height) - var(--font-size-sm)) / 2));--btn-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-2);height:var(--btn-height);padding-inline:var(--btn-padding-x);border:1px solid var(--btn-border);border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;line-height:1;text-decoration:none;display:inline-flex}.abaabil-button:hover{--btn-bg:var(--color-primary-hover);--btn-border:var(--color-primary-hover)}.abaabil-button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-button[data-variant=secondary]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:var(--color-border)}.abaabil-button[data-variant=ghost]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:transparent}.abaabil-button[data-size=sm]{--btn-height:2rem}.abaabil-button[data-size=lg]{--btn-height:3rem}.abaabil-button:disabled,.abaabil-button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.abaabil-button{transition:none}}.abaabil-checkbox{--checkbox-radius:min(var(--radius-md), .25rem);appearance:none;border:1px solid var(--color-border);border-radius:var(--checkbox-radius);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-checkbox:before{content:"";background:var(--color-primary-fg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:.65rem;height:.65rem;transition:transform var(--duration-fast) ease;transform:scale(0)}.abaabil-checkbox:checked,.abaabil-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-checkbox:checked:before,.abaabil-checkbox:indeterminate:before{transform:scale(1)}.abaabil-checkbox:indeterminate:before{clip-path:none;border-radius:1px;width:.65rem;height:.125rem}.abaabil-checkbox:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-checkbox:disabled{opacity:.5;cursor:not-allowed}.abaabil-checkbox__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-checkbox__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-checkbox__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-checkbox-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-checkbox-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-checkbox,.abaabil-checkbox:before{transition:none}}.abaabil-combobox{display:inline-block;position:relative}.abaabil-combobox__label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.abaabil-combobox__label--visible{margin-bottom:var(--space-1);font-size:var(--font-size-sm);color:var(--color-text);display:block}.abaabil-combobox__input{height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--control-height-md) - var(--font-size-sm)) / 2));padding-inline:var(--input-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);width:100%}.abaabil-combobox__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-combobox__list{z-index:10;width:100%;max-height:15rem;padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin:0;list-style:none;position:absolute;inset-block-start:calc(100% + var(--space-1));inset-inline-start:0;overflow-y:auto}.abaabil-combobox__option{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-combobox__option:hover,.abaabil-combobox__option[data-active=true]{background:var(--color-muted)}@supports (anchor-name:--x){.abaabil-combobox__input{anchor-name:--abaabil-combobox-input}.abaabil-combobox__list{position-anchor:--abaabil-combobox-input;position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end;width:anchor-size(width);position:fixed;inset:auto}}.abaabil-dialog{--dialog-width:32rem;--dialog-padding:var(--space-4);width:min(var(--dialog-width), calc(100vw - 2rem));padding:var(--dialog-padding);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-dialog::backdrop{background:var(--color-overlay)}.abaabil-dialog__title{margin:0 0 var(--space-3);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}@starting-style{.abaabil-dialog[open]{opacity:0;transform:translateY(.5rem)}}.abaabil-dialog[open]{opacity:1;transition:opacity var(--duration-fast) ease, transform var(--duration-fast) ease;transform:none}@media (prefers-reduced-motion:reduce){.abaabil-dialog[open]{transition:none}@starting-style{.abaabil-dialog[open]{opacity:1;transform:none}}}.abaabil-input{--input-height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--input-height) - var(--font-size-sm)) / 2));--input-border:var(--color-border);--input-placeholder-fg:var(--color-placeholder);width:100%;height:var(--input-height);padding-inline:var(--input-padding-x);border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);transition:border-color var(--duration-fast) ease;display:block}.abaabil-input::placeholder{color:var(--input-placeholder-fg)}.abaabil-input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-input:disabled{opacity:.5;cursor:not-allowed}.abaabil-input[aria-invalid=true]{--input-border:var(--color-danger)}.abaabil-input-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-input__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-input__description{--input-description-fg:var(--color-text-muted);font-size:var(--font-size-sm);color:var(--input-description-fg)}.abaabil-input__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-input{transition:none}}.abaabil-popover{inline-size:max-content;max-inline-size:min(22rem,100vw - 2rem);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm)}.abaabil-popover:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-popover::backdrop{background:0 0}.abaabil-popover__trigger{font:inherit;color:inherit}@supports (anchor-name:--x){.abaabil-popover{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-popover:popover-open{opacity:0}}.abaabil-popover:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-popover:popover-open{transition:none}@starting-style{.abaabil-popover:popover-open{opacity:1}}}.abaabil-radio{appearance:none;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:50%;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-radio:before{content:"";background:var(--color-primary-fg);width:.5rem;height:.5rem;transition:transform var(--duration-fast) ease;border-radius:50%;transform:scale(0)}.abaabil-radio:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-radio:checked:before{transform:scale(1)}.abaabil-radio:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-radio:disabled{opacity:.5;cursor:not-allowed}.abaabil-radio__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-radio__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-radio__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-radio-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-radio-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-radio,.abaabil-radio:before{transition:none}}.abaabil-select{--select-height:var(--control-height-md);--select-padding-x:max(.375rem, calc((var(--select-height) - var(--font-size-sm)) / 2));appearance:none;height:var(--select-height);padding-inline:var(--select-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--select-padding-x) center;color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;transition:border-color var(--duration-fast) ease;background-size:.75rem .75rem;padding-inline-end:calc(var(--select-padding-x) + 1.125rem);line-height:1}.abaabil-select:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){background-position:left var(--select-padding-x) center;padding-inline-start:calc(var(--select-padding-x) + 1.125rem);padding-inline-end:var(--select-padding-x)}.abaabil-select:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-select:disabled{opacity:.5;cursor:not-allowed}.abaabil-select-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-select__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-select__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;margin:0}.abaabil-select__error{font-size:var(--font-size-sm);color:var(--color-danger);margin:0}.abaabil-select[aria-invalid=true]{border-color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-select{transition:none}}.abaabil-switch{--switch-width:2.25rem;--switch-height:1.25rem;--switch-gap:2px;--switch-thumb:calc(var(--switch-height) - (var(--switch-gap) * 2));appearance:none;inline-size:var(--switch-width);block-size:var(--switch-height);border:1px solid var(--color-border);background:var(--color-muted);cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:999px;flex-shrink:0;margin:0;position:relative}.abaabil-switch:before{content:"";inline-size:var(--switch-thumb);block-size:var(--switch-thumb);background:var(--color-surface);transition:inset-inline-start var(--duration-fast) ease;border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:var(--switch-gap);translate:0 -50%}.abaabil-switch:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-switch:checked:before{inset-inline-start:calc(100% - var(--switch-thumb) - var(--switch-gap))}.abaabil-switch:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-switch:disabled{opacity:.5;cursor:not-allowed}.abaabil-switch__wrapper{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:inline-flex}.abaabil-switch__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-switch__description{font-size:var(--font-size-sm);color:var(--color-text-muted);flex-basis:100%;display:block}@media (prefers-reduced-motion:reduce){.abaabil-switch,.abaabil-switch:before{transition:none}}.abaabil-tabs{gap:var(--space-3);flex-direction:column;display:flex}.abaabil-tabs__list{gap:var(--space-1);border-block-end:1px solid var(--color-border);display:flex}.abaabil-tabs__tab{appearance:none;padding-block:var(--space-2);padding-inline:var(--space-3);border:0;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) ease, border-color var(--duration-fast) ease;background:0 0;border-block-end:2px solid #0000;margin-block-end:-1px;line-height:1.3}.abaabil-tabs__tab:hover{color:var(--color-text)}.abaabil-tabs__tab[data-selected=true]{color:var(--color-text);border-block-end-color:var(--color-primary)}.abaabil-tabs__tab:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.abaabil-tabs__list[data-orientation=vertical]{border-block-end:0;border-inline-end:1px solid var(--color-border);flex-direction:column}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab{text-align:start;border-block-end:0;border-inline-end:2px solid #0000;margin-block-end:0;margin-inline-end:-1px}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab[data-selected=true]{border-inline-end-color:var(--color-primary)}.abaabil-tabs__panel:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.abaabil-tabs__tab{transition:none}}.abaabil-textarea{--textarea-padding-block:var(--space-2);--textarea-padding-x:var(--space-3);--textarea-border:var(--color-border);--textarea-placeholder-fg:var(--color-placeholder);width:100%;padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-x);border:1px solid var(--textarea-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);resize:block;transition:border-color var(--duration-fast) ease;line-height:1.5;display:block}.abaabil-textarea::placeholder{color:var(--textarea-placeholder-fg)}.abaabil-textarea:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none}.abaabil-textarea[aria-invalid=true]{--textarea-border:var(--color-danger)}.abaabil-textarea-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-textarea__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-textarea__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-textarea__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-textarea{transition:none}}}
+@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-gray-900:#111827;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--color-primary:var(--abaabil-blue-500);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--color-primary);--color-overlay:#00000080;--color-text-muted:#6b7280;--color-placeholder:#9ca3af;--radius-md:.375rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--font-size-sm:.875rem;--font-size-lg:1.125rem;--font-weight-semibold:600;--control-height-md:2.5rem;--duration-fast:.15s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}:root[data-theme=dark]{--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}@layer abaabil.base{.abaabil-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer abaabil.components{.abaabil-accordion-group{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:clip}.abaabil-accordion-group .abaabil-accordion+.abaabil-accordion{border-top:1px solid var(--color-border)}.abaabil-accordion{color:var(--color-text)}.abaabil-accordion__summary{list-style:none}.abaabil-accordion__summary::-webkit-details-marker{display:none}.abaabil-accordion__summary{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--control-height-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.3;display:flex}.abaabil-accordion__summary:hover{background:var(--color-muted)}.abaabil-accordion__summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-accordion__summary:after{content:"";block-size:.5rem;inline-size:.5rem;transition:transform var(--duration-fast) ease;border-bottom:2px solid;border-right:2px solid;flex:none;transform:rotate(45deg)}.abaabil-accordion[open]>.abaabil-accordion__summary:after{transform:rotate(-135deg)}.abaabil-accordion__panel{padding:0 var(--space-4) var(--space-3)}@media (prefers-reduced-motion:reduce){.abaabil-accordion__summary:after{transition:none}}.abaabil-alert{--alert-accent:var(--color-primary);gap:var(--space-1);padding-block:var(--space-2);padding-inline:var(--space-3);border:1px solid color-mix(in srgb, var(--alert-accent) 35%, var(--color-surface));border-inline-start:3px solid var(--alert-accent);border-radius:var(--radius-md);background:color-mix(in srgb, var(--alert-accent) 8%, var(--color-surface));color:var(--color-text);font-size:var(--font-size-sm);flex-direction:column;line-height:1.5;display:flex}.abaabil-alert[data-variant=success]{--alert-accent:var(--color-success)}.abaabil-alert[data-variant=warning]{--alert-accent:var(--color-warning)}.abaabil-alert[data-variant=danger]{--alert-accent:var(--color-danger)}.abaabil-alert__title{font-weight:var(--font-weight-semibold);color:var(--color-text)}.abaabil-alert:empty{display:none}.abaabil-avatar{--avatar-size:2.5rem;inline-size:var(--avatar-size);block-size:var(--avatar-size);background:var(--color-muted);color:var(--color-text);font-size:calc(var(--avatar-size) * .4);font-weight:var(--font-weight-semibold);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:clip}.abaabil-avatar__image{object-fit:cover;object-position:center 30%;block-size:100%;inline-size:100%}.abaabil-avatar__initials{letter-spacing:.02em;text-indent:.02em}.abaabil-badge{--badge-accent:var(--color-text-muted);align-items:center;gap:var(--space-1);padding-block:.1em;padding-inline:var(--space-2);border:1px solid color-mix(in srgb, var(--badge-accent) 35%, var(--color-surface));background:color-mix(in srgb, var(--badge-accent) 12%, var(--color-surface));color:var(--color-text);font-size:max(.75rem,.8em);font-weight:var(--font-weight-semibold);white-space:nowrap;border-radius:999px;line-height:1.4;display:inline-flex}.abaabil-badge[data-variant=info]{--badge-accent:var(--color-primary)}.abaabil-badge[data-variant=success]{--badge-accent:var(--color-success)}.abaabil-badge[data-variant=warning]{--badge-accent:var(--color-warning)}.abaabil-badge[data-variant=danger]{--badge-accent:var(--color-danger)}.abaabil-breadcrumb__list{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-breadcrumb__item{align-items:center;gap:var(--space-2);color:var(--color-text-muted);display:flex}.abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{content:"";opacity:.6;border-block-start:1.5px solid;border-inline-end:1.5px solid;flex:none;block-size:.35rem;inline-size:.35rem;rotate:45deg}.abaabil-breadcrumb__list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{rotate:-135deg}.abaabil-breadcrumb__link{color:var(--color-text-muted);text-underline-offset:.2em;border-radius:var(--radius-md);text-decoration:underline}.abaabil-breadcrumb__link:hover{color:var(--color-text)}.abaabil-breadcrumb__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-breadcrumb__current{color:var(--color-text);font-weight:var(--font-weight-semibold)}.abaabil-button{--btn-bg:var(--color-primary);--btn-fg:var(--color-primary-fg);--btn-border:var(--color-primary);--btn-height:var(--control-height-md);--btn-padding-x:max(.375rem, calc((var(--btn-height) - var(--font-size-sm)) / 2));--btn-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-2);height:var(--btn-height);padding-inline:var(--btn-padding-x);border:1px solid var(--btn-border);border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;line-height:1;text-decoration:none;display:inline-flex}.abaabil-button:hover{--btn-bg:var(--color-primary-hover);--btn-border:var(--color-primary-hover)}.abaabil-button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-button[data-variant=secondary]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:var(--color-border)}.abaabil-button[data-variant=ghost]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:transparent}.abaabil-button[data-size=sm]{--btn-height:2rem}.abaabil-button[data-size=lg]{--btn-height:3rem}.abaabil-button:disabled,.abaabil-button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.abaabil-button{transition:none}}.abaabil-checkbox{--checkbox-radius:min(var(--radius-md), .25rem);appearance:none;border:1px solid var(--color-border);border-radius:var(--checkbox-radius);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-checkbox:before{content:"";background:var(--color-primary-fg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:.65rem;height:.65rem;transition:transform var(--duration-fast) ease;transform:scale(0)}.abaabil-checkbox:checked,.abaabil-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-checkbox:checked:before,.abaabil-checkbox:indeterminate:before{transform:scale(1)}.abaabil-checkbox:indeterminate:before{clip-path:none;border-radius:1px;width:.65rem;height:.125rem}.abaabil-checkbox:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-checkbox:disabled{opacity:.5;cursor:not-allowed}.abaabil-checkbox__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-checkbox__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-checkbox__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-checkbox-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-checkbox-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-checkbox,.abaabil-checkbox:before{transition:none}}.abaabil-combobox{display:inline-block;position:relative}.abaabil-combobox__label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.abaabil-combobox__label--visible{margin-bottom:var(--space-1);font-size:var(--font-size-sm);color:var(--color-text);display:block}.abaabil-combobox__input{height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--control-height-md) - var(--font-size-sm)) / 2));padding-inline:var(--input-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);width:100%}.abaabil-combobox__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-combobox__list{z-index:10;width:100%;max-height:15rem;padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin:0;list-style:none;position:absolute;inset-block-start:calc(100% + var(--space-1));inset-inline-start:0;overflow-y:auto}.abaabil-combobox__option{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-combobox__option:hover,.abaabil-combobox__option[data-active=true]{background:var(--color-muted)}@supports (anchor-name:--x){.abaabil-combobox__input{anchor-name:--abaabil-combobox-input}.abaabil-combobox__list{position-anchor:--abaabil-combobox-input;position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end;width:anchor-size(width);position:fixed;inset:auto}}.abaabil-dialog{--dialog-width:32rem;--dialog-padding:var(--space-4);width:min(var(--dialog-width), calc(100vw - 2rem));padding:var(--dialog-padding);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-dialog::backdrop{background:var(--color-overlay)}.abaabil-dialog__title{margin:0 0 var(--space-3);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}@starting-style{.abaabil-dialog[open]{opacity:0;transform:translateY(.5rem)}}.abaabil-dialog[open]{opacity:1;transition:opacity var(--duration-fast) ease, transform var(--duration-fast) ease;transform:none}@media (prefers-reduced-motion:reduce){.abaabil-dialog[open]{transition:none}@starting-style{.abaabil-dialog[open]{opacity:1;transform:none}}}.abaabil-file{--file-border:var(--color-border);inline-size:100%;padding:var(--space-2);border:1px solid var(--file-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;display:block}.abaabil-file::file-selector-button{padding-block:var(--space-1);padding-inline:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-muted);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--duration-fast) ease;margin-inline-end:var(--space-3)}.abaabil-file::file-selector-button:hover{background:var(--color-border)}.abaabil-file:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-file:disabled{opacity:.5;cursor:not-allowed}.abaabil-file:disabled::file-selector-button{opacity:.5;cursor:not-allowed}.abaabil-file[aria-invalid=true]{--file-border:var(--color-danger)}.abaabil-file-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-file__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-file__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-file__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-file::file-selector-button{transition:none}}.abaabil-input{--input-height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--input-height) - var(--font-size-sm)) / 2));--input-border:var(--color-border);--input-placeholder-fg:var(--color-placeholder);width:100%;height:var(--input-height);padding-inline:var(--input-padding-x);border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);transition:border-color var(--duration-fast) ease;display:block}.abaabil-input::placeholder{color:var(--input-placeholder-fg)}.abaabil-input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-input:disabled{opacity:.5;cursor:not-allowed}.abaabil-input[aria-invalid=true]{--input-border:var(--color-danger)}.abaabil-input-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-input__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-input__description{--input-description-fg:var(--color-text-muted);font-size:var(--font-size-sm);color:var(--input-description-fg)}.abaabil-input__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-input{transition:none}}.abaabil-menu{inline-size:max-content;min-inline-size:10rem;max-inline-size:min(18rem,100vw - 2rem);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-menu::backdrop{background:0 0}.abaabil-menu__trigger{font:inherit;color:inherit}.abaabil-menu__item{appearance:none;inline-size:100%;padding-block:var(--space-2);padding-inline:var(--space-3);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);text-align:start;white-space:nowrap;cursor:pointer;background:0 0;border:0;text-decoration:none;display:block}.abaabil-menu__item:hover{background:var(--color-muted)}.abaabil-menu__item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px;background:var(--color-muted)}.abaabil-menu__item:disabled{opacity:.5;cursor:not-allowed}.abaabil-menu__item:disabled:hover{background:0 0}@supports (anchor-name:--x){.abaabil-menu{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-menu:popover-open{opacity:0}}.abaabil-menu:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-menu:popover-open{transition:none}@starting-style{.abaabil-menu:popover-open{opacity:1}}}.abaabil-pagination__list{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-pagination__link,.abaabil-pagination__current,.abaabil-pagination__step{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);padding-inline:var(--space-2);border-radius:var(--radius-md);color:var(--color-text);font-variant-numeric:tabular-nums;border:1px solid #0000;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.abaabil-pagination__link:hover{background:var(--color-muted)}.abaabil-pagination__link:focus-visible,.abaabil-pagination__step:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-pagination__current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg);font-weight:var(--font-weight-semibold)}.abaabil-pagination__gap:before{content:"…"}.abaabil-pagination__gap{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.abaabil-pagination__step{border-color:var(--color-border)}.abaabil-pagination__step:hover{background:var(--color-muted)}.abaabil-pagination__step--unavailable{color:var(--color-text-muted);opacity:.6;border-color:#0000}.abaabil-popover{inline-size:max-content;max-inline-size:min(22rem,100vw - 2rem);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm)}.abaabil-popover:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-popover::backdrop{background:0 0}.abaabil-popover__trigger{font:inherit;color:inherit}@supports (anchor-name:--x){.abaabil-popover{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-popover:popover-open{opacity:0}}.abaabil-popover:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-popover:popover-open{transition:none}@starting-style{.abaabil-popover:popover-open{opacity:1}}}.abaabil-progress{appearance:none;background:var(--color-muted);block-size:.5rem;inline-size:100%;color:var(--color-primary);border:0;border-radius:999px;display:block;overflow:hidden}.abaabil-progress::-webkit-progress-bar{background:var(--color-muted);border-radius:999px}.abaabil-progress::-webkit-progress-value{background:var(--color-primary);transition:inline-size var(--duration-fast) ease;border-radius:999px}.abaabil-progress::-moz-progress-bar{background:var(--color-primary);border-radius:999px}.abaabil-progress:indeterminate{background:linear-gradient(90deg, var(--color-primary) 0 35%, transparent 35% 100%) 0 0 / 250% 100% no-repeat var(--color-muted);animation:1.4s linear infinite abaabil-progress-slide}.abaabil-progress:indeterminate::-webkit-progress-bar{background:0 0}.abaabil-progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes abaabil-progress-slide{0%{background-position:-60% 0}to{background-position:160% 0}}.abaabil-progress-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-progress__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-progress__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}@media (prefers-reduced-motion:reduce){.abaabil-progress::-webkit-progress-value{transition:none}.abaabil-progress:indeterminate{background-position:40% 0;animation:none}}.abaabil-radio{appearance:none;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:50%;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-radio:before{content:"";background:var(--color-primary-fg);width:.5rem;height:.5rem;transition:transform var(--duration-fast) ease;border-radius:50%;transform:scale(0)}.abaabil-radio:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-radio:checked:before{transform:scale(1)}.abaabil-radio:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-radio:disabled{opacity:.5;cursor:not-allowed}.abaabil-radio__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-radio__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-radio__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-radio-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-radio-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-radio,.abaabil-radio:before{transition:none}}.abaabil-select{--select-height:var(--control-height-md);--select-padding-x:max(.375rem, calc((var(--select-height) - var(--font-size-sm)) / 2));appearance:none;height:var(--select-height);padding-inline:var(--select-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--select-padding-x) center;color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;transition:border-color var(--duration-fast) ease;background-size:.75rem .75rem;padding-inline-end:calc(var(--select-padding-x) + 1.125rem);line-height:1}.abaabil-select:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){background-position:left var(--select-padding-x) center;padding-inline-start:calc(var(--select-padding-x) + 1.125rem);padding-inline-end:var(--select-padding-x)}.abaabil-select:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-select:disabled{opacity:.5;cursor:not-allowed}.abaabil-select-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-select__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-select__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;margin:0}.abaabil-select__error{font-size:var(--font-size-sm);color:var(--color-danger);margin:0}.abaabil-select[aria-invalid=true]{border-color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-select{transition:none}}.abaabil-slider{--slider-track:.3rem;--slider-thumb:1.1rem;appearance:none;inline-size:100%;block-size:var(--slider-thumb);cursor:pointer;background:0 0;margin:0}.abaabil-slider::-webkit-slider-runnable-track{block-size:var(--slider-track);background:var(--color-muted);border-radius:999px}.abaabil-slider::-moz-range-track{block-size:var(--slider-track);background:var(--color-muted);border-radius:999px}.abaabil-slider::-webkit-slider-thumb{appearance:none;inline-size:var(--slider-thumb);block-size:var(--slider-thumb);border:2px solid var(--color-surface);background:var(--color-primary);border-radius:50%;margin-block-start:calc((var(--slider-track) - var(--slider-thumb)) / 2)}.abaabil-slider::-moz-range-thumb{inline-size:var(--slider-thumb);block-size:var(--slider-thumb);border:2px solid var(--color-surface);background:var(--color-primary);border-radius:50%}.abaabil-slider::-moz-range-progress{block-size:var(--slider-track);background:var(--color-primary);border-radius:999px}.abaabil-slider:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:4px;border-radius:999px}.abaabil-slider:disabled{opacity:.5;cursor:not-allowed}.abaabil-slider-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-slider__header{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.abaabil-slider__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-slider__output{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text)}.abaabil-slider__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-switch{--switch-width:2.25rem;--switch-height:1.25rem;--switch-gap:2px;--switch-thumb:calc(var(--switch-height) - (var(--switch-gap) * 2));appearance:none;inline-size:var(--switch-width);block-size:var(--switch-height);border:1px solid var(--color-border);background:var(--color-muted);cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:999px;flex-shrink:0;margin:0;position:relative}.abaabil-switch:before{content:"";inline-size:var(--switch-thumb);block-size:var(--switch-thumb);background:var(--color-surface);transition:inset-inline-start var(--duration-fast) ease;border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:var(--switch-gap);translate:0 -50%}.abaabil-switch:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-switch:checked:before{inset-inline-start:calc(100% - var(--switch-thumb) - var(--switch-gap))}.abaabil-switch:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-switch:disabled{opacity:.5;cursor:not-allowed}.abaabil-switch__wrapper{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:inline-flex}.abaabil-switch__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-switch__description{font-size:var(--font-size-sm);color:var(--color-text-muted);flex-basis:100%;display:block}@media (prefers-reduced-motion:reduce){.abaabil-switch,.abaabil-switch:before{transition:none}}.abaabil-tabs{gap:var(--space-3);flex-direction:column;display:flex}.abaabil-tabs__list{gap:var(--space-1);border-block-end:1px solid var(--color-border);display:flex}.abaabil-tabs__tab{appearance:none;padding-block:var(--space-2);padding-inline:var(--space-3);border:0;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) ease, border-color var(--duration-fast) ease;background:0 0;border-block-end:2px solid #0000;margin-block-end:-1px;line-height:1.3}.abaabil-tabs__tab:hover{color:var(--color-text)}.abaabil-tabs__tab[data-selected=true]{color:var(--color-text);border-block-end-color:var(--color-primary)}.abaabil-tabs__tab:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.abaabil-tabs__list[data-orientation=vertical]{border-block-end:0;border-inline-end:1px solid var(--color-border);flex-direction:column}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab{text-align:start;border-block-end:0;border-inline-end:2px solid #0000;margin-block-end:0;margin-inline-end:-1px}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab[data-selected=true]{border-inline-end-color:var(--color-primary)}.abaabil-tabs__panel:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.abaabil-tabs__tab{transition:none}}.abaabil-textarea{--textarea-padding-block:var(--space-2);--textarea-padding-x:var(--space-3);--textarea-border:var(--color-border);--textarea-placeholder-fg:var(--color-placeholder);width:100%;padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-x);border:1px solid var(--textarea-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);resize:block;transition:border-color var(--duration-fast) ease;line-height:1.5;display:block}.abaabil-textarea::placeholder{color:var(--textarea-placeholder-fg)}.abaabil-textarea:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none}.abaabil-textarea[aria-invalid=true]{--textarea-border:var(--color-danger)}.abaabil-textarea-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-textarea__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-textarea__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-textarea__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-textarea{transition:none}}.abaabil-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex}.abaabil-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;inline-size:max-content}.abaabil-toolbar hr{block-size:auto;inline-size:1px;margin-block:var(--space-1);margin-inline:var(--space-1);background:var(--color-border);border:0;align-self:stretch}.abaabil-toolbar[data-orientation=vertical] hr{block-size:1px;inline-size:auto;margin-block:var(--space-1);margin-inline:var(--space-1)}.abaabil-tooltip{display:inline-flex;position:relative}.abaabil-tooltip__bubble{z-index:20;inline-size:max-content;max-inline-size:16rem;padding-block:var(--space-1);padding-inline:var(--space-2);border-radius:var(--radius-md);background:var(--color-text);color:var(--color-surface);font-size:var(--font-size-sm);text-align:start;opacity:0;visibility:hidden;transition:opacity var(--duration-fast) ease, visibility 0s linear var(--duration-fast);pointer-events:none;line-height:1.4;position:absolute;inset-inline-start:50%;translate:-50%}.abaabil-tooltip[data-placement=top] .abaabil-tooltip__bubble{inset-block-end:calc(100% + var(--space-1))}.abaabil-tooltip[data-placement=bottom] .abaabil-tooltip__bubble{inset-block-start:calc(100% + var(--space-1))}.abaabil-tooltip:hover .abaabil-tooltip__bubble,.abaabil-tooltip:focus-within .abaabil-tooltip__bubble{opacity:1;visibility:visible;transition:none}.abaabil-tooltip[data-dismissed=true] .abaabil-tooltip__bubble{opacity:0;visibility:hidden}@media (prefers-reduced-motion:reduce){.abaabil-tooltip__bubble{transition:none}}}

package/dist/theme.css

@@ -1 +1 @@
-@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-blue-400:#3b82f6;--abaabil-gray-900:#111827;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--color-primary:var(--abaabil-blue-500);--color-primary-hover:var(--abaabil-blue-400);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--abaabil-blue-500);--color-overlay:#00000080;--color-text-muted:#6b7280;--color-placeholder:#9ca3af;--radius-md:.375rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--font-size-sm:.875rem;--font-size-lg:1.125rem;--font-weight-semibold:600;--control-height-md:2.5rem;--duration-fast:.15s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}:root[data-theme=dark]{--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}@layer abaabil.base{.abaabil-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer abaabil.components;
+@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-gray-900:#111827;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--color-primary:var(--abaabil-blue-500);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--color-primary);--color-overlay:#00000080;--color-text-muted:#6b7280;--color-placeholder:#9ca3af;--radius-md:.375rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--font-size-sm:.875rem;--font-size-lg:1.125rem;--font-weight-semibold:600;--control-height-md:2.5rem;--duration-fast:.15s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}:root[data-theme=dark]{--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}@layer abaabil.base{.abaabil-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer abaabil.components;

package/dist/toolbar/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as g}from"react/jsx-runtime";import{useRef as w,useCallback as E,useEffect as k}from"react";import"./toolbar.css";const A=["button:not([disabled])","a[href]",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex^="-"])'].join(",");function v({label:b,labelledBy:d,orientation:r="horizontal",className:f,children:u,...i}){const s=w(null),h=f?`abaabil-toolbar ${f}`:"abaabil-toolbar";typeof process<"u"&&process.env.NODE_ENV!=="production"&&!(b||d||i["aria-label"]||i["aria-labelledby"])&&console.warn("abaabil/toolbar: no `label` or `labelledBy` given, so the toolbar has no accessible name and is announced as an unnamed toolbar.");const c=E(()=>s.current?[...s.current.querySelectorAll(A)]:[],[]);k(()=>{const e=c();if(!e.length)return;const t=e.find(n=>n.tabIndex===0)??e[0];for(const n of e)n.tabIndex=n===t?0:-1});function m(e){const t=c();if(!t.length)return;const n=Math.max(0,Math.min(e,t.length-1));for(const o of t)o.tabIndex=o===t[n]?0:-1;t[n].focus()}function y(e){const t=e.target,n=t.tagName;if(n==="SELECT"||n==="TEXTAREA"||n==="INPUT"&&!["button","checkbox","radio","submit","reset"].includes(t.type))return;const o=c(),a=o.indexOf(t);if(a===-1)return;const p=r==="vertical"?"ArrowDown":"ArrowRight",x=r==="vertical"?"ArrowUp":"ArrowLeft";let l=null;if(e.key===p)l=a===o.length-1?0:a+1;else if(e.key===x)l=a===0?o.length-1:a-1;else if(e.key==="Home")l=0;else if(e.key==="End")l=o.length-1;else return;e.preventDefault(),m(l)}return g("div",{ref:s,role:"toolbar","aria-label":b,"aria-labelledby":d,"aria-orientation":r,"data-orientation":r,className:h,onKeyDown:y,...i,children:u})}export{v as default};

package/dist/toolbar/index.js

@@ -0,0 +1 @@
+import{jsx as n}from"react/jsx-runtime";function l({orientation:o="horizontal",className:a,children:t,...i}){const r=a?`abaabil-toolbar ${a}`:"abaabil-toolbar";return n("div",{className:r,"data-orientation":o,...i,children:t})}export{l as default};

package/dist/toolbar/styled.js

@@ -0,0 +1 @@
+import"./toolbar.css";import{default as e}from"./index.js";export{e as default};

package/dist/toolbar/toolbar.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex}.abaabil-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;inline-size:max-content}.abaabil-toolbar hr{block-size:auto;inline-size:1px;margin-block:var(--space-1);margin-inline:var(--space-1);background:var(--color-border);border:0;align-self:stretch}.abaabil-toolbar[data-orientation=vertical] hr{block-size:1px;inline-size:auto;margin-block:var(--space-1);margin-inline:var(--space-1)}}

package/dist/tooltip/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as m,jsx as f}from"react/jsx-runtime";import{useId as y,useState as E,useRef as h,isValidElement as s,cloneElement as N}from"react";import"./tooltip.css";function g({content:i,placement:l="top",className:o,children:e,...r}){const n=y(),[t,a]=E(!1),c=h(null),p=o?`abaabil-tooltip ${o}`:"abaabil-tooltip";typeof process<"u"&&process.env.NODE_ENV!=="production"&&(s(e)||console.warn("abaabil/tooltip: children must be a single element that can receive props (a button, a link, an input). A string or fragment cannot be described, and a tooltip on a non-focusable element is invisible to keyboard users."));function b(u){u.key==="Escape"&&!t&&a(!0)}const d=s(e)?N(e,{"aria-describedby":[e.props["aria-describedby"],n].filter(Boolean).join(" ")}):e;return m("span",{ref:c,className:p,"data-placement":l,"data-dismissed":t?"true":void 0,onKeyDown:b,onPointerEnter:()=>a(!1),onFocus:()=>a(!1),...r,children:[d,f("span",{id:n,className:"abaabil-tooltip__bubble",role:"tooltip",children:i})]})}export{g as default};

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+import{jsxs as s,jsx as c}from"react/jsx-runtime";function i({content:t,placement:l="top",className:a,children:e,...n}){const o=a?`abaabil-tooltip ${a}`:"abaabil-tooltip";return s("span",{className:o,"data-placement":l,...n,children:[e,c("span",{className:"abaabil-tooltip__bubble",children:t})]})}export{i as default};

package/dist/tooltip/styled.js

@@ -0,0 +1 @@
+import"./tooltip.css";import{default as e}from"./index.js";export{e as default};

package/dist/tooltip/tooltip.css

@@ -0,0 +1 @@
+@layer abaabil.components{.abaabil-tooltip{display:inline-flex;position:relative}.abaabil-tooltip__bubble{z-index:20;inline-size:max-content;max-inline-size:16rem;padding-block:var(--space-1);padding-inline:var(--space-2);border-radius:var(--radius-md);background:var(--color-text);color:var(--color-surface);font-size:var(--font-size-sm);text-align:start;opacity:0;visibility:hidden;transition:opacity var(--duration-fast) ease, visibility 0s linear var(--duration-fast);pointer-events:none;line-height:1.4;position:absolute;inset-inline-start:50%;translate:-50%}.abaabil-tooltip[data-placement=top] .abaabil-tooltip__bubble{inset-block-end:calc(100% + var(--space-1))}.abaabil-tooltip[data-placement=bottom] .abaabil-tooltip__bubble{inset-block-start:calc(100% + var(--space-1))}.abaabil-tooltip:hover .abaabil-tooltip__bubble,.abaabil-tooltip:focus-within .abaabil-tooltip__bubble{opacity:1;visibility:visible;transition:none}.abaabil-tooltip[data-dismissed=true] .abaabil-tooltip__bubble{opacity:0;visibility:hidden}@media (prefers-reduced-motion:reduce){.abaabil-tooltip__bubble{transition:none}}}

package/llms.txt

@@ -0,0 +1,143 @@
+# abaabil
+
+> A small React component library: twenty-three components, three import tiers
+> each, plain CSS in cascade layers, zero runtime dependencies. React 19 is
+> the only peer dependency.
+
+This file is for language models and coding agents. It is the short version
+of README.md: the rules you need to write correct code with this library,
+and the mistakes that are easy to make. Full docs: https://www.abaabil.com
+and https://www.abaabil.com/llms-full.txt
+
+## The three rules that matter most
+
+1. **There is no root export.** `import { Button } from 'abaabil'` throws.
+   Import the entry point: `import Button from 'abaabil/button/a11y'`.
+2. **Import `abaabil/theme.css` once, at your app root.** Without it the
+   components render unthemed, because every stylesheet reads custom
+   properties that file defines.
+3. **Use the `a11y` tier** unless you have a specific reason not to. The
+   other two exist so you can opt out of CSS or ARIA deliberately, not
+   because they are lighter defaults.
+
+## Import shape
+
+Every component has exactly three entry points:
+
+    abaabil/<name>          structure only, no CSS, no ARIA
+    abaabil/<name>/styled   + the component's stylesheet
+    abaabil/<name>/a11y     + labels, ARIA wiring, keyboard behaviour
+
+Each tier default-exports its main component. Components with extra parts
+also export them by name: `CheckboxGroup`, `RadioGroup`, `Disclosure`,
+`Accordion`, `PopoverTrigger`, `PopoverPanel`.
+
+Names: button, dialog, popover, menu, tooltip, combobox, input, textarea,
+file, checkbox, radio, switch, select, slider, accordion, tabs, toolbar,
+breadcrumb, pagination, progress, alert, avatar, badge.
+
+Stylesheets are also importable on their own as `abaabil/<name>.css`, and
+`abaabil/styles.css` is every component's CSS in one file.
+
+## Per-component notes an agent will otherwise get wrong
+
+- **popover** requires an explicit `id` prop. It is not generated, because
+  generating it would need `useId` and that would make the component a
+  client component. `<Popover id="menu" trigger="Options" label="...">`.
+- **alert** is a live region. It is announced when its *contents change*,
+  so render it empty from the start and fill it in. Mounting the whole
+  component at the moment you have a message often announces nothing.
+  Its role follows `variant`: info/success are polite, warning/danger
+  interrupt.
+- **switch** carries `role="switch"` at every tier, including `normal`.
+  Use it for a setting that applies immediately; use `checkbox` for a
+  value the form submits later.
+- **combobox** and **tabs** are uncontrolled. There is no `value` or
+  `selectedIndex` prop; observe changes through `onChange`.
+- **accordion** exclusivity comes from the native `name` attribute on
+  `<details>`, which defaults to a shared value. Pass `name={undefined}`
+  to allow several panels open at once.
+- **checkbox** takes `indeterminate` as a prop because the DOM property
+  has no HTML attribute.
+- **dialog** is the native `<dialog>` with `showModal()`. Do not add a
+  focus trap; the browser already contains focus.
+- **menu** requires an explicit `id`, like popover. Use it only for a
+  list of *actions*. A button revealing navigation links is not a menu;
+  that is `popover` with links inside, and marking it `role="menu"`
+  announces a widget the user cannot operate as one.
+- **tooltip** takes a single focusable element as its child and clones
+  it. Never put essential information or anything interactive in one:
+  there is no hover on touch, and moving towards a link inside a tooltip
+  dismisses it. If you need either, use `popover`.
+- **progress** leaves `value` unset for an indeterminate bar. Pass
+  `valueText` whenever the number is not a percentage, or "3 of 8 files"
+  is announced as "38 percent".
+- **slider** is a native range input. Pass `formatValue` when the raw
+  number is not self-explanatory; it sets `aria-valuetext`.
+- **breadcrumb** renders the last item as text rather than a link, and
+  marks it `aria-current="page"`. Pass items root first.
+- **pagination** takes `page`, `pageCount` and `href`, and renders real
+  links. Override `pageLabel`, `previousLabel` and `nextLabel` to
+  translate; every number is named "Page 7", not "7".
+- **toolbar** takes arbitrary children, not an items array, and
+  collapses them to one tab stop with arrow keys inside. It needs a
+  `label`.
+- **file** is a real `<input type="file">`. Pass a `description` saying
+  what you accept: `accept` filters the dialog silently and does not
+  apply to a dropped file.
+- **avatar** is decorative by default, which is right beside a visible
+  name. Pass `decorative={false}` when the avatar is the only thing
+  identifying someone, and give it a `name`.
+- **badge** takes `context` for the rest of the sentence: `<Badge
+  context="unread messages">3</Badge>` draws "3" and announces "3 unread
+  messages". Do not reach for `aria-label`; a span discards it.
+- Components needing an accessible name (**input**, **textarea**,
+  **select**, **checkbox**, **radio**, **switch**, **combobox**,
+  **popover**, **tabs**, **progress**, **slider**, **file**,
+  **toolbar**) warn in development when given none. Pass
+  `label`, or `aria-label`/`aria-labelledby`.
+
+## Server Components
+
+Fifty-one of the sixty-nine entry points carry no `"use client"` and
+render inside a React Server Component tree.
+
+- Server-safe at **every** tier: button, accordion, popover, alert,
+  breadcrumb, pagination, avatar, badge. Tooltip too at `normal` and
+  `styled`, because it shows and hides in CSS rather than JavaScript.
+- Client at **every** tier: combobox, tabs. Neither has a native element
+  to build on, so both need state.
+- Everything else is server-safe at `normal` and `styled`, and a client
+  component at `a11y`, where `useId` mints the ids that tie labels to
+  controls.
+
+## Theming
+
+CSS custom properties only. No provider, no context, no JS theme object.
+Set `--color-primary`, `--radius-md`, `--control-height-md` and the rest on
+`:root` or on any scope element.
+
+Setting `--color-primary` is enough: `--color-primary-hover` and
+`--color-focus-ring` are derived from it. `--color-primary-fg` is not, and
+is white, so if you set a light primary set a dark `--color-primary-fg`
+too or text on buttons fails contrast. `--color-danger`, `--color-success`
+and `--color-warning` are deliberately independent of the brand colour. Dark mode is the same tokens redefined
+under `prefers-color-scheme` and `[data-theme="dark"]`, both of which the
+shipped theme already handles.
+
+Component CSS lives in the `abaabil.components` cascade layer, so ordinary
+unlayered CSS in your own app beats it without `!important`.
+
+## Browser floor
+
+Chrome 99, Firefox 98, Safari 15.4, set by `@layer` and `<dialog>`.
+`abaabil/popover` is the exception: the Popover API needs Chrome 114,
+Firefox 125, Safari 17. Below that the panel renders as an always-visible
+block instead of opening and closing.
+
+## What this library deliberately does not do
+
+No focus trap, no layout or spacing utilities, no theming runtime, no
+`headingLevel` on accordion, no controlled combobox or tabs, no date
+picker, no data table, no drag and drop. Each is a
+decision with a reason, documented at https://www.abaabil.com/why.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abaabil",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Minimal, themeable, accessible React components. Zero dependencies.",
   "license": "MIT",
   "repository": {
@@ -31,7 +31,8 @@
   ],
   "files": [
     "dist",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "llms.txt"
   ],
   "exports": {
     "./package.json": "./package.json",
@@ -74,6 +75,36 @@
     "./alert": "./dist/alert/index.js",
     "./alert/styled": "./dist/alert/styled.js",
     "./alert/a11y": "./dist/alert/a11y.js",
+    "./progress": "./dist/progress/index.js",
+    "./progress/styled": "./dist/progress/styled.js",
+    "./progress/a11y": "./dist/progress/a11y.js",
+    "./slider": "./dist/slider/index.js",
+    "./slider/styled": "./dist/slider/styled.js",
+    "./slider/a11y": "./dist/slider/a11y.js",
+    "./breadcrumb": "./dist/breadcrumb/index.js",
+    "./breadcrumb/styled": "./dist/breadcrumb/styled.js",
+    "./breadcrumb/a11y": "./dist/breadcrumb/a11y.js",
+    "./tooltip": "./dist/tooltip/index.js",
+    "./tooltip/styled": "./dist/tooltip/styled.js",
+    "./tooltip/a11y": "./dist/tooltip/a11y.js",
+    "./menu": "./dist/menu/index.js",
+    "./menu/styled": "./dist/menu/styled.js",
+    "./menu/a11y": "./dist/menu/a11y.js",
+    "./pagination": "./dist/pagination/index.js",
+    "./pagination/styled": "./dist/pagination/styled.js",
+    "./pagination/a11y": "./dist/pagination/a11y.js",
+    "./file": "./dist/file/index.js",
+    "./file/styled": "./dist/file/styled.js",
+    "./file/a11y": "./dist/file/a11y.js",
+    "./toolbar": "./dist/toolbar/index.js",
+    "./toolbar/styled": "./dist/toolbar/styled.js",
+    "./toolbar/a11y": "./dist/toolbar/a11y.js",
+    "./avatar": "./dist/avatar/index.js",
+    "./avatar/styled": "./dist/avatar/styled.js",
+    "./avatar/a11y": "./dist/avatar/a11y.js",
+    "./badge": "./dist/badge/index.js",
+    "./badge/styled": "./dist/badge/styled.js",
+    "./badge/a11y": "./dist/badge/a11y.js",
     "./theme.css": "./dist/theme.css",
     "./styles.css": "./dist/styles.css",
     "./button.css": "./dist/button/button.css",
@@ -88,10 +119,20 @@
     "./switch.css": "./dist/switch/switch.css",
     "./popover.css": "./dist/popover/popover.css",
     "./tabs.css": "./dist/tabs/tabs.css",
-    "./alert.css": "./dist/alert/alert.css"
+    "./alert.css": "./dist/alert/alert.css",
+    "./progress.css": "./dist/progress/progress.css",
+    "./slider.css": "./dist/slider/slider.css",
+    "./breadcrumb.css": "./dist/breadcrumb/breadcrumb.css",
+    "./tooltip.css": "./dist/tooltip/tooltip.css",
+    "./menu.css": "./dist/menu/menu.css",
+    "./pagination.css": "./dist/pagination/pagination.css",
+    "./file.css": "./dist/file/file.css",
+    "./toolbar.css": "./dist/toolbar/toolbar.css",
+    "./avatar.css": "./dist/avatar/avatar.css",
+    "./badge.css": "./dist/badge/badge.css"
   },
   "scripts": {
-    "build": "node scripts/build-css.js && rollup -c && node scripts/check-directives.js && node scripts/measure.js",
+    "build": "node scripts/build-css.js && rollup -c && node scripts/check-directives.js && node scripts/check-complete.js && node scripts/measure.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "prepublishOnly": "npm run build && node scripts/check-package.js"