abaabil 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,73 @@ 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

package/README.md

@@ -2,7 +2,7 @@
 
 Minimal, themeable, accessible React components. Zero dependencies.
 
-Eighteen components: button, dialog, popover, menu, tooltip, combobox, input, textarea, checkbox, radio, switch, select, slider, accordion, tabs, breadcrumb, progress, 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 thirty-six across the eighteen 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
@@ -229,16 +244,32 @@ Only the entry points that need interactivity are marked `"use client"`. The res
 | `abaabil/menu` | no |
 | `abaabil/menu/styled` | no |
 | `abaabil/menu/a11y` | yes |
-
-Thirty-six of the fifty-four entry points carry no client directive and render from a Server Component with zero client JS.
-
-Six components are server-renderable at **every** tier, `a11y` included, because they need no JavaScript at all:
+| `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**, which is a `<nav>` and an ordered list.
+- **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.
@@ -647,6 +678,111 @@ Like popover, `id` is required rather than generated.
 
 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.
@@ -681,6 +817,11 @@ Where the panel appears is a separate question from whether it works. Attaching
 - 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/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/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/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-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-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-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);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: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-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}}}
+@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/llms.txt

@@ -1,6 +1,6 @@
 # abaabil
 
-> A small React component library: eighteen components, three import tiers
+> 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.
 
@@ -33,8 +33,8 @@ also export them by name: `CheckboxGroup`, `RadioGroup`, `Disclosure`,
 `Accordion`, `PopoverTrigger`, `PopoverPanel`.
 
 Names: button, dialog, popover, menu, tooltip, combobox, input, textarea,
-checkbox, radio, switch, select, slider, accordion, tabs, breadcrumb,
-progress, alert.
+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.
@@ -76,20 +76,35 @@ Stylesheets are also importable on their own as `abaabil/<name>.css`, and
   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**) warn in development
-  when given none. Pass
+  **popover**, **tabs**, **progress**, **slider**, **file**,
+  **toolbar**) warn in development when given none. Pass
   `label`, or `aria-label`/`aria-labelledby`.
 
 ## Server Components
 
-Thirty-six of the fifty-four entry points carry no `"use client"` and
+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. Tooltip too at `normal` and `styled`, because it shows and
-  hides in CSS rather than JavaScript.
+  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
@@ -100,7 +115,13 @@ render inside a React Server Component tree.
 
 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. Dark mode is the same tokens redefined
+`: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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abaabil",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Minimal, themeable, accessible React components. Zero dependencies.",
   "license": "MIT",
   "repository": {
@@ -90,6 +90,21 @@
     "./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",
@@ -109,7 +124,12 @@
     "./slider.css": "./dist/slider/slider.css",
     "./breadcrumb.css": "./dist/breadcrumb/breadcrumb.css",
     "./tooltip.css": "./dist/tooltip/tooltip.css",
-    "./menu.css": "./dist/menu/menu.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/check-complete.js && node scripts/measure.js",