abaabil 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -4,6 +4,118 @@ 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.3.0] - 2026-09-21
+
+### Added
+
+Five components, taking the library from thirteen to eighteen. Two of
+them are the things people ask for most and are hard; three are nearly
+free because the platform already does the work.
+
+- **`abaabil/menu`** - the W3C APG menu button pattern on top of the
+  native Popover API. The browser supplies the top layer, the
+  outside-click dismissal and Escape; this supplies `role="menu"`, a
+  roving tabindex, Up/Down with wrapping, Home/End, multi-character
+  typeahead, Tab to close, and focus moving into the menu on open and
+  back to the trigger on close. `aria-expanded` is driven by the panel's
+  own `toggle` event rather than a second copy of the open state, since
+  the browser can close the panel without telling the component. Its
+  docs say when a menu is the wrong widget: a button revealing
+  navigation links is a popover, not a menu.
+- **`abaabil/tooltip`** - shows on `:hover` and `:focus-within`, which
+  are selectors, so the `normal` and `styled` tiers need no JavaScript
+  at all. The `a11y` tier adds the two things CSS cannot: the
+  `aria-describedby` that makes a screen reader read it, and Escape to
+  dismiss, which WCAG 1.4.13 requires. The docs lead with when not to
+  use one.
+- **`abaabil/progress`** - native `<progress>`. `value` has no default,
+  so omitting it gives a genuinely indeterminate bar rather than one
+  claiming to be 0% done. `valueText` sets `aria-valuetext`, because a
+  bar whose number is not a percentage is otherwise announced as one.
+- **`abaabil/slider`** - native `<input type="range">`, so the keyboard
+  support and the min/max/step arithmetic are the platform's.
+  `formatValue` sets `aria-valuetext` and the optional visible
+  `<output>`, which is marked `aria-hidden` so the value is not
+  announced twice.
+- **`abaabil/breadcrumb`** - a `<nav>` around an ordered list, because
+  the order is the information. Server-renderable at every tier. The
+  separator is drawn in CSS so it is never read aloud, the `<nav>` is
+  named, and the last item renders as text with `aria-current="page"`.
+
+Thirty-six of the fifty-four entry points now carry no client directive.
+Six components are server-renderable at every tier including `a11y`, up
+from four.
+
+`role="tooltip"` is deliberately **not** in tooltip's `normal` tier,
+unlike `role="switch"` in switch's. The difference: a switch's role
+changes how a reachable interactive control is announced, so it does
+something on its own. A tooltip is only ever reached through the
+`aria-describedby` on its trigger, so the role without that association
+announces nothing, and it belongs with the wiring that gives it meaning.
+
+Three bugs were found by driving these in a real browser, after 511
+jsdom tests had passed. All three are the same shape: jsdom does not run
+the thing that was broken.
+
+- Menu focused its first item inside `requestAnimationFrame`, which does
+  not fire in a background tab, so focus silently never moved there. The
+  `toggle` event already fires with the panel in the top layer and
+  focusable, so the focus call is synchronous now.
+- Menu read the active index from state, so two keydowns arriving in the
+  same tick both moved one step from the same origin: holding ArrowDown
+  advanced one item and stopped. The index is a ref now. Covered by a
+  test that dispatches two raw events inside one `act`, which is the
+  only way to reproduce it, since `fireEvent` flushes between calls.
+- Tooltip put its fade on the shown state, so whenever the transition
+  did not advance the bubble stayed at opacity 0 while every selector
+  said it should be visible: a tooltip that silently never appears. The
+  fade is on the hidden state now and showing is instant, which is also
+  the better behaviour for a tooltip.
+
+Two more came out of a full accessibility audit of all eighteen
+components, run with axe against a real browser. Both were silent: the
+component looked right, the tests passed, and the thing it claimed to add
+was being discarded.
+
+- **`popover/a11y` was not naming its panel at all.** A bare
+  `<div popover>` has no role, and `aria-label` is prohibited on a
+  generic element, so the label was dropped: the panel computed to role
+  `null` with no accessible name, and axe flags it as
+  `aria-prohibited-attr`. The panel is `role="group"` now, overridable
+  with `role`. Naming the panel was this tier's entire contribution, so
+  until now it added 484 bytes and achieved nothing.
+- **`progress/a11y` was not naming its bar.** `<progress>` is a labelable
+  element, so `<label for>` is not wrong, but no accessible name is
+  computed from it: axe names an `<input>` from identical markup and
+  names neither `<progress>` nor `<meter>`. `aria-labelledby` now points
+  at the label, making the name explicit instead of leaving it to differ
+  between implementations.
+
+The audit itself had to be redone once. The first pass rendered the
+dialog open, and a modal dialog makes everything behind it inert, so the
+sweep that reported zero violations had not actually examined the other
+seventeen components.
+
+### Fixed
+
+- `dist/combobox/index.js` and `dist/combobox/styled.js` had no size
+  budget. Combobox was the first component built and only its `a11y`
+  tier was ever listed, so two entry points had been unwatched since
+  1.0.0. Found by the new registration check, not by noticing.
+
+### Added (tooling)
+
+- `llms.txt`, shipped inside the package. It is the short version of the
+  README written for coding agents: the rules that are easy to get wrong
+  (no root export, import `theme.css` once, prefer the `a11y` tier) and
+  the per-component traps (popover needs an explicit `id`, alert has to
+  exist before it has a message, combobox and tabs are uncontrolled). An
+  agent with `node_modules` can read it without the network. It reaches
+  npm with the next release.
+- `AGENTS.md` at the repository root, for agents changing the library
+  rather than using it: the enforced architecture rules, the conventions,
+  and the seven steps for adding a component.
+
 ## [1.2.0] - 2026-09-21
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 Minimal, themeable, accessible React components. Zero dependencies.
 
-Thirteen components: button, dialog, combobox, input, textarea, checkbox, radio, switch, select, accordion, tabs, popover, alert.
+Eighteen components: button, dialog, popover, menu, tooltip, combobox, input, textarea, checkbox, radio, switch, select, slider, accordion, tabs, breadcrumb, progress, alert.
 
 ```js
 import Button from 'abaabil/button/a11y'
@@ -103,7 +103,7 @@ import Accordion from 'abaabil/accordion/a11y'
 
 ### Bundler required for `styled` and `a11y` tiers
 
-The `styled` and `a11y` entry points (all twenty-six across the thirteen components) import their
+The `styled` and `a11y` entry points (all thirty-six across the eighteen 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
@@ -214,15 +214,34 @@ Only the entry points that need interactivity are marked `"use client"`. The res
 | `abaabil/alert` | no |
 | `abaabil/alert/styled` | no |
 | `abaabil/alert/a11y` | no |
-
-Twenty-six of the thirty-nine entry points carry no client directive and render from a Server Component with zero client JS.
-
-Four components are server-renderable at **every** tier, `a11y` included, because they need no JavaScript at all:
+| `abaabil/progress` | no |
+| `abaabil/progress/styled` | no |
+| `abaabil/progress/a11y` | yes |
+| `abaabil/slider` | no |
+| `abaabil/slider/styled` | no |
+| `abaabil/slider/a11y` | yes |
+| `abaabil/breadcrumb` | no |
+| `abaabil/breadcrumb/styled` | no |
+| `abaabil/breadcrumb/a11y` | no |
+| `abaabil/tooltip` | no |
+| `abaabil/tooltip/styled` | no |
+| `abaabil/tooltip/a11y` | yes |
+| `abaabil/menu` | no |
+| `abaabil/menu/styled` | no |
+| `abaabil/menu/a11y` | yes |
+
+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:
 
 - **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.
+- **progress** and **slider** at `normal` and `styled`; their `a11y` tiers need `useId`.
+
+**tooltip** is the interesting case: it shows and hides on `:hover` and `:focus-within`, which are selectors, so its `normal` and `styled` tiers need no JavaScript to work at all. Only the tier that adds `aria-describedby` and Escape is a client component.
 
 Two components are client modules at every tier, because neither has a native element to build on and both need state to show one thing at a time: **combobox** and **tabs**.
 
@@ -525,6 +544,109 @@ Uncontrolled, like the combobox: observe the selection through `onChange`.
 
 **Read this before using it.** A live region is announced when its *contents change*, and assistive tech has to be watching the region before that happens. An alert that arrives in the DOM already carrying its message may not be announced at all, and behaviour differs between screen readers. If the message appears in response to something the user did, render the component with empty children from the start and fill it in, rather than mounting the whole alert at the moment you have something to say. Rendered empty it paints nothing.
 
+### Progress
+
+Native `<progress>`. Omit `value` for an indeterminate bar; it has no default, because defaulting it to 0 would turn every unknown-duration operation into one claiming to be 0% done.
+
+`normal` / `styled`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | - | Omit for indeterminate. |
+| `max` | `number` | `100` | |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` adds the label wiring and the one thing people get wrong about a progress bar, which is what it announces:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Rendered as a real `<label>`. |
+| `hideLabel` | `boolean` | `false` | Hide it visually; it stays in the accessibility tree. |
+| `description` | `string` | - | Help text, wired into `aria-describedby`. |
+| `valueText` | `string` | - | Announced instead of the percentage. A bare `<progress value="3" max="8">` says "38 percent"; pass `"3 of 8 files"` when the number means something else. |
+
+### Slider
+
+Native `<input type="range">`. The keyboard support, the min/max/step arithmetic and the announced role all come from the platform, which is why this is under 200 bytes at the lower tiers.
+
+`normal` / `styled`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `min` / `max` / `step` | `number` | `0` / `100` / `1` | |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Rendered as a real `<label>`. |
+| `hideLabel` | `boolean` | `false` | |
+| `description` | `string` | - | Wired into `aria-describedby`. |
+| `showValue` | `boolean` | `false` | Renders the value in an `<output>`, marked `aria-hidden` because the input already announces it. |
+| `formatValue` | `(value: number) => string` | - | Sets `aria-valuetext` and the visible output. A price slider announces "50" without it. |
+
+Uncontrolled by default; pass `defaultValue` and read `onChange`. An uncontrolled slider starts at the midpoint, matching the native thumb.
+
+### Breadcrumb
+
+A `<nav>` around an ordered list, because the order is the information. All three tiers are server-renderable.
+
+The separator is drawn in CSS, never rendered as text, so a screen reader is not reading punctuation between the steps.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `Array<{ key?, label, href? }>` | - | Root first. An item with no `href` renders as text. |
+| `className` | `string` | - | |
+
+`a11y` adds the two things a hand-rolled breadcrumb almost always misses:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | `'Breadcrumb'` | Names the `<nav>`. A page usually has several navigation landmarks, and unnamed ones are announced as "navigation, navigation, navigation". |
+| `linkCurrent` | `boolean` | `false` | By default the last item renders as text even if given an `href`, because a link to the page you are on is a link that does nothing. Either way it gets `aria-current="page"`. |
+
+### Tooltip
+
+**Read this before using one.** A tooltip is the control most often used for the wrong job.
+
+- **Never put essential information in one.** There is no hover on touch, so it is simply unreachable there.
+- **Never put interactive content in one.** Moving towards a link inside a tooltip dismisses the tooltip. If you need that, you want a popover.
+- **The trigger must be focusable.** A tooltip on a plain `<span>` does not exist for keyboard users. The `a11y` tier warns when its child cannot receive props.
+
+Showing and hiding is done in CSS, by `:hover` and `:focus-within`. Those are the two events that should reveal a tooltip and both are expressible as selectors, so the `normal` and `styled` tiers need no JavaScript.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `ReactNode` | - | The tooltip text. |
+| `placement` | `'top' \| 'bottom'` | `'top'` | |
+| `children` | `ReactElement` | - | The trigger. |
+
+`a11y` adds the two things CSS cannot: `aria-describedby` from the trigger to the bubble, which is what makes a screen reader read it at all, and Escape to dismiss, which WCAG 1.4.13 requires for content revealed on hover. It clones the child to attach them, so the trigger stays your element rather than a wrapper of ours.
+
+### Menu
+
+The W3C APG menu button pattern, on top of the native Popover API. The browser supplies the top layer, the outside-click dismissal and Escape; this component supplies the menu semantics and keyboard.
+
+Like popover, `id` is required rather than generated.
+
+**When not to use it.** `role="menu"` means a list of *actions*, in the application-menu sense. A button revealing a few navigation links is not a menu, and marking it up as one makes a screen reader announce a widget the user then cannot operate as one. Use `abaabil/popover` with links in it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` | `string` | - | Panel id; also wires the trigger. Required. |
+| `trigger` | `ReactNode` | - | Button content. |
+| `items` | `Array<{ key?, label, href?, onSelect?, disabled? }>` | - | An item with `href` renders an `<a>`, otherwise a `<button>`. |
+| `triggerProps` | `object` | - | Spread onto the trigger. |
+
+`a11y` adds:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Names the menu itself. Without it the menu is named by its trigger. |
+
+plus `aria-haspopup`, a live `aria-expanded` kept in step with the panel's own `toggle` event, `role="menu"`/`role="menuitem"`, a roving tabindex, Up/Down with wrapping, Home/End, multi-character typeahead, Tab to close, and focus moving to the first item on open and back to the trigger on close.
+
 ## Combobox: uncontrolled in 1.x
 
 The combobox is uncontrolled in this release: it does not accept a `value` prop. Observe the selected value through the `onChange` callback instead of driving it from external state.
@@ -554,6 +676,11 @@ Where the panel appears is a separate question from whether it works. Attaching
 - Tabs implement the [WAI-ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), including a roving tabindex so Tab steps past the tablist rather than through every tab in it.
 - Switch carries `role="switch"` from its `normal` tier, so it never looks like a switch while announcing itself as a checkbox.
 - Alert derives `role="status"` or `role="alert"` from its variant, so a confirmation does not interrupt and an error does. Read the note in its props section about when live regions actually announce.
+- Menu implements the [WAI-ARIA Authoring Practices Guide menu button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/), and its docs say when a menu is the wrong widget.
+- Tooltip shows on both hover and focus, dismisses on Escape as WCAG 1.4.13 requires, and its bubble is never a pointer target so it cannot be hovered instead of its trigger.
+- Progress accepts `valueText`, because a bar whose number is not a percentage is otherwise announced as one.
+- Slider is a native range input, so its keyboard support is the platform's rather than a reimplementation; `formatValue` sets `aria-valuetext` for values that are not self-explanatory.
+- Breadcrumb names its `<nav>` and marks the current page with `aria-current`, and draws its separators in CSS so they are never read aloud.
 - `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/breadcrumb/a11y.js

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

package/dist/breadcrumb/breadcrumb.css

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

package/dist/breadcrumb/index.js

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

package/dist/breadcrumb/styled.js

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

package/dist/menu/a11y.js

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

package/dist/menu/index.js

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

package/dist/menu/menu.css

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

package/dist/menu/styled.js

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

package/dist/popover/a11y.js

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

package/dist/progress/a11y.js

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

package/dist/progress/index.js

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

package/dist/progress/progress.css

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

package/dist/progress/styled.js

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

package/dist/slider/a11y.js

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

package/dist/slider/index.js

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

package/dist/slider/slider.css

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

package/dist/slider/styled.js

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

package/dist/styles.css

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

package/dist/tooltip/a11y.js

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

package/dist/tooltip/index.js

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

package/dist/tooltip/styled.js

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

package/dist/tooltip/tooltip.css

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

package/llms.txt

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

package/package.json

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