abaabil 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -4,6 +4,71 @@ 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.2.0] - 2026-09-21
+
+### Added
+
+Five components, taking the library from eight to thirteen. Each ships the
+same three tiers.
+
+- **`abaabil/textarea`** - a native `<textarea>` with the same label,
+  description, error and `aria-describedby` wiring as `input`. The most
+  obvious gap in a library that already had five form controls.
+- **`abaabil/switch`** - a native checkbox carrying `role="switch"`. The
+  role sits in the `normal` tier, not the `a11y` tier: it is the
+  component's identity, the way `<dialog>` and `<details>` are for the
+  components built on them, and without it the styled tier would look like
+  a switch while announcing itself as a checkbox. No `aria-checked`; the
+  native `checked` property already exposes the state.
+- **`abaabil/popover`** - the native Popover API. The trigger, the top
+  layer, light-dismiss and Escape all come from the browser, so all three
+  tiers ship **zero JavaScript** and all three are server-renderable. It
+  needs an explicit `id` rather than generating one, because generating
+  one would mean `useId`, which would mean a client boundary, which would
+  cost the component the only property that makes it interesting. It is
+  the one component with a floor of its own: Chrome 114, Firefox 125,
+  Safari 17.
+- **`abaabil/tabs`** - the W3C APG tabs pattern, with roving tabindex,
+  arrow keys, Home/End, both orientations and both activation modes. The
+  only new component whose `a11y` tier does substantial work, because tabs
+  have no native element behind them. Client at every tier for the same
+  reason combobox is.
+- **`abaabil/alert`** - a live region. The role follows the variant, since
+  the right answer is the same every time and getting it wrong is the
+  common failure: `info` and `success` announce politely, `warning` and
+  `danger` interrupt. Read the caveat in the README about when a live
+  region actually announces; it decides whether this works at all.
+
+Also added: `--color-success` and `--color-warning` semantic tokens, which
+alert needs and nothing else previously did.
+
+Twenty-six of the thirty-nine entry points now carry no client directive.
+Four components are server-renderable at every tier including `a11y`
+(button, accordion, popover, alert), up from two.
+
+### Fixed
+
+Documentation errors from 1.1.0, all of the same kind: figures typed in by
+hand that had stopped being true.
+
+
+
+- Corrected the headline size comparison in `README.md`. It claimed
+  `dialog/a11y` at 674 B against `@radix-ui/react-dialog` at 3,422 B. The
+  Radix figure was measured by importing only `Dialog.Root`, which renders
+  nothing; a dialog you can actually open needs `Root`, `Trigger`, `Portal`,
+  `Overlay`, `Content`, `Title` and `Close`, and costs 13,493 B. Both sides
+  are now measured the same way, at 580 B against 13,493 B. The correction
+  is less favourable to Radix, not more.
+- Regenerated the delivered-size table in `README.md`. It was still printing
+  1.0.0's figures in the 1.1.0 release, several of them out by more than
+  10% (`checkbox/a11y` read 600 B against an actual 534 B, `radio/a11y`
+  542 B against 444 B). The table is now generated from the published
+  package rather than copied by hand.
+- Noted in `README.md` that a `styled` entry can measure a byte or two below
+  its `normal` entry. That is compression noise: `styled` is `normal` plus a
+  CSS side-effect import, so the JavaScript is identical.
+
 ## [1.1.0] - 2026-09-21
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 Minimal, themeable, accessible React components. Zero dependencies.
 
-Eight components: button, dialog, combobox, input, checkbox, radio, select, accordion.
+Thirteen components: button, dialog, combobox, input, textarea, checkbox, radio, switch, select, accordion, tabs, popover, alert.
 
 ```js
 import Button from 'abaabil/button/a11y'
@@ -15,7 +15,9 @@ function Example() {
 
 Each component ships three tiers, `normal`, `styled`, `a11y`, so you only pay for what you use. Two facts worth knowing up front:
 
-- A fully accessible `dialog/a11y` is **674 B gzipped**, against `@radix-ui/react-dialog` at **3,422 B**, both measured the same way: the component imported alone, bundled with esbuild, `react`/`react-dom` external, minified, then gzipped. Both numbers are JS only; Radix ships no stylesheet of its own, and it also bundles its own positioning and portal logic and predates a usable native `<dialog>`, so it isn't attempting exactly what abaabil does. The difference is mostly what the platform now gives you for free, not a claim of doing more with less.
+- A fully accessible `dialog/a11y` is **580 B gzipped**, against `@radix-ui/react-dialog` at **13,493 B**. Both are measured the same way: a dialog you can actually open, imported with every part it needs, bundled with esbuild, `react`/`react-dom` external, minified, then gzipped. Both numbers are JS only; Radix ships no stylesheet of its own, and it also bundles its own positioning and portal logic and predates a usable native `<dialog>`, so it isn't attempting exactly what abaabil does. The difference is mostly what the platform now gives you for free, not a claim of doing more with less.
+
+  Earlier releases of this README compared 674 B against Radix at 3,422 B. That Radix figure was wrong: it was what you get importing only `Dialog.Root`, which renders nothing. The corrected comparison is less favourable to Radix, not more, which is why it is stated here rather than quietly changed.
 - `accordion/a11y` needs **no JavaScript at all**. Every tier of accordion, including `a11y`, is server-renderable, because it's built on native `<details>`/`<summary>` rather than a scripted widget.
 
 ## Install
@@ -38,34 +40,53 @@ The gzipped cost of importing each entry point on its own, React treated as exte
 
 | Entry | JS | CSS |
 |---|---:|---:|
-| `abaabil/button` | 189 B | - |
-| `abaabil/button/styled` | 200 B | 555 B |
-| `abaabil/button/a11y` | 559 B | 555 B |
-| `abaabil/dialog` | 161 B | - |
-| `abaabil/dialog/styled` | 171 B | 373 B |
-| `abaabil/dialog/a11y` | 572 B | 373 B |
-| `abaabil/combobox` | 454 B | - |
-| `abaabil/combobox/styled` | 456 B | 626 B |
-| `abaabil/combobox/a11y` | 1090 B | 626 B |
-| `abaabil/input` | 160 B | - |
-| `abaabil/input/styled` | 171 B | 500 B |
-| `abaabil/input/a11y` | 485 B | 500 B |
-| `abaabil/checkbox` | 161 B | - |
-| `abaabil/checkbox/styled` | 171 B | 636 B |
-| `abaabil/checkbox/a11y` | 600 B | 636 B |
-| `abaabil/radio` | 157 B | - |
-| `abaabil/radio/styled` | 168 B | 545 B |
-| `abaabil/radio/a11y` | 542 B | 545 B |
-| `abaabil/select` | 202 B | - |
-| `abaabil/select/styled` | 212 B | 769 B |
-| `abaabil/select/a11y` | 488 B | 769 B |
-| `abaabil/accordion` | 323 B | - |
-| `abaabil/accordion/styled` | 334 B | 533 B |
-| `abaabil/accordion/a11y` | 383 B | 533 B |
-
-Each entry point is bundled on its own with its full module graph (so, for example, `button/styled`'s cost already includes the `button` markup it imports) using Rollup (the same plugins as the real build: `@rollup/plugin-node-resolve` and `esbuild` in minify mode), `react`/`react-dom`/`*.css` external, then gzipped. The `styled` and `a11y` tiers also pull in their component's stylesheet as a side-effect import; the CSS column is that stylesheet's own gzipped size, separate from the JS number. `normal` tier entries have no CSS column because they import none.
-
-This is different from the per-file numbers in `SIZES.md`, which are produced with `preserveModules` and so under-count any tier that imports another module, such as `styled.js`, which shows only the bytes of its own file, not the `index.js` it re-exports. Re-run this yourself with the same setup (each entry bundled alone, React external, gzip the output) to reproduce these numbers.
+| `abaabil/button` | 199 B | - |
+| `abaabil/button/styled` | 198 B | 551 B |
+| `abaabil/button/a11y` | 557 B | 551 B |
+| `abaabil/dialog` | 168 B | - |
+| `abaabil/dialog/styled` | 169 B | 371 B |
+| `abaabil/dialog/a11y` | 580 B | 371 B |
+| `abaabil/combobox` | 455 B | - |
+| `abaabil/combobox/styled` | 455 B | 615 B |
+| `abaabil/combobox/a11y` | 1,097 B | 615 B |
+| `abaabil/input` | 166 B | - |
+| `abaabil/input/styled` | 166 B | 497 B |
+| `abaabil/input/a11y` | 501 B | 497 B |
+| `abaabil/checkbox` | 168 B | - |
+| `abaabil/checkbox/styled` | 168 B | 651 B |
+| `abaabil/checkbox/a11y` | 534 B | 651 B |
+| `abaabil/radio` | 165 B | - |
+| `abaabil/radio/styled` | 166 B | 542 B |
+| `abaabil/radio/a11y` | 444 B | 542 B |
+| `abaabil/select` | 209 B | - |
+| `abaabil/select/styled` | 210 B | 771 B |
+| `abaabil/select/a11y` | 530 B | 771 B |
+| `abaabil/accordion` | 320 B | - |
+| `abaabil/accordion/styled` | 320 B | 528 B |
+| `abaabil/accordion/a11y` | 364 B | 528 B |
+| `abaabil/textarea` | 166 B | - |
+| `abaabil/textarea/styled` | 166 B | 476 B |
+| `abaabil/textarea/a11y` | 506 B | 476 B |
+| `abaabil/switch` | 177 B | - |
+| `abaabil/switch/styled` | 177 B | 585 B |
+| `abaabil/switch/a11y` | 423 B | 585 B |
+| `abaabil/popover` | 387 B | - |
+| `abaabil/popover/styled` | 388 B | 436 B |
+| `abaabil/popover/a11y` | 484 B | 436 B |
+| `abaabil/tabs` | 349 B | - |
+| `abaabil/tabs/styled` | 349 B | 529 B |
+| `abaabil/tabs/a11y` | 786 B | 529 B |
+| `abaabil/alert` | 190 B | - |
+| `abaabil/alert/styled` | 190 B | 345 B |
+| `abaabil/alert/a11y` | 341 B | 345 B |
+
+Measured against `abaabil@1.2.0`. Each entry point is bundled on its own with its full module graph (so `button/styled`'s cost already includes the `button` markup it imports) using esbuild, `react`/`react-dom` external, minified, then gzipped. The `styled` and `a11y` tiers also pull in their component's stylesheet as a side-effect import; the CSS column is that stylesheet's own gzipped size, separate from the JS number. `normal` tier entries have no CSS column because they import none.
+
+A `styled` entry sometimes measures a byte or two *below* its `normal` entry. That is compression noise, not a real difference: `styled` is `normal` plus a CSS side-effect import, so its JavaScript is the same code, and a byte of difference either way is gzip responding to a different module path. The CSS column is where the `styled` tier's actual cost is.
+
+This is different from the per-file numbers in `SIZES.md`, which are produced with `preserveModules` and so under-count any tier that imports another module: `styled.js` there shows only the bytes of its own file, not the `index.js` it re-exports.
+
+These figures are generated, not typed. The script lives in the docs site repo at `scripts/compare/delivered.mjs`, alongside the harness that measures abaabil against nine other libraries with one shared method. Earlier releases of this table were copied by hand and went stale: the 1.1.0 package shipped with 1.0.0's numbers still printed here, some of them out by more than 10%.
 
 Import the tier you need directly:
 
@@ -82,7 +103,7 @@ import Accordion from 'abaabil/accordion/a11y'
 
 ### Bundler required for `styled` and `a11y` tiers
 
-The `styled` and `a11y` entry points (all sixteen across the eight components) import their
+The `styled` and `a11y` entry points (all twenty-six across the thirteen 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
@@ -178,10 +199,36 @@ Only the entry points that need interactivity are marked `"use client"`. The res
 | `abaabil/accordion` | no |
 | `abaabil/accordion/styled` | no |
 | `abaabil/accordion/a11y` | no |
+| `abaabil/textarea` | no |
+| `abaabil/textarea/styled` | no |
+| `abaabil/textarea/a11y` | yes |
+| `abaabil/switch` | no |
+| `abaabil/switch/styled` | no |
+| `abaabil/switch/a11y` | yes |
+| `abaabil/popover` | no |
+| `abaabil/popover/styled` | no |
+| `abaabil/popover/a11y` | no |
+| `abaabil/tabs` | yes |
+| `abaabil/tabs/styled` | yes (see note) |
+| `abaabil/tabs/a11y` | yes |
+| `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:
+
+- **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.
+
+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**.
 
-Button (all tiers), accordion (all tiers), and every `normal`/`styled` tier of dialog, input, checkbox, radio and select carry no client directive and can be rendered from a Server Component with zero client JS. Accordion is the only component whose `a11y` tier is also server-renderable: it has no hooks and needs no JavaScript at all, so all three of its tiers stay server components. Dialog's `a11y` tier, every combobox tier, and the `a11y` tier of input, checkbox, radio and select are client components.
+The rest (dialog, input, textarea, checkbox, radio, switch, select) are server-renderable at `normal` and `styled`, and client at `a11y`, where `useId` mints the ids that wire labels and descriptions together.
 
-`abaabil/combobox/styled` has no literal `"use client"` directive of its own; it only re-exports `abaabil/combobox`, which does carry one, so the client boundary is already established there and the directive isn't duplicated. It still behaves as a client module once bundled, which is why it's marked "yes" above.
+`abaabil/combobox/styled` and `abaabil/tabs/styled` have no literal `"use client"` directive of their own; they only re-export their `normal` tier, which does carry one, so the client boundary is already established there and the directive isn't duplicated. They still behave as client modules once bundled, which is why they're marked "yes" above.
 
 This split is enforced at build time by `scripts/check-directives.js`, which runs as part of `npm run build` and fails the build in both directions: a required `"use client"` that got stripped, or an accidental one on a component that's supposed to stay server-only. That gate is checked against the built output, not just the source, so this table can't silently drift from what actually ships.
 
@@ -367,7 +414,118 @@ Accordion is the only component whose every tier, including `a11y`, is server-re
 
 **Deliberate limitation:** `Accordion_a11y` offers no `headingLevel` prop, and this is intentional, not an oversight. `<summary>` has an implicit ARIA role of `button` in some browsers, and a heading nested inside a button is not reliably exposed to assistive technology (VoiceOver, for one, does not expose a heading nested inside `<summary>` as a heading). The reverse, wrapping `<summary>` in a heading element, isn't an option either: `<summary>` must be the literal first child of `<details>` for the browser to recognize it as the disclosure trigger. Consumers who need reliable heading navigation across sections need the button-in-heading accordion pattern instead (an explicit heading wrapping a button, with `aria-expanded` and `aria-controls`), a different, ARIA-driven widget that this component does not attempt to be.
 
-## Combobox: uncontrolled in 1.0.0
+### Textarea
+
+`normal` / `styled` (`abaabil/textarea`, `abaabil/textarea/styled`):
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `rows` | `number` | `3` | Visible line count. The browser default of 2 is too short to read back what you typed. |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` (`abaabil/textarea/a11y`), the same wiring as Input on a `<textarea>`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Rendered as a real `<label>`, associated via `htmlFor`/`id`. |
+| `hideLabel` | `boolean` | `false` | Hide the label visually. It stays in the accessibility tree. |
+| `description` | `string` | - | Help text, wired into `aria-describedby`. |
+| `error` | `string` | - | Error message. Sets `aria-invalid` and joins `aria-describedby`. |
+| `required` | `boolean` | `false` | |
+| `id` | `string` | - | Overrides the generated id. |
+
+### Switch
+
+`normal` / `styled` (`abaabil/switch`, `abaabil/switch/styled`) render `<input type="checkbox" role="switch">`.
+
+The role is in the `normal` tier, not held back for `a11y`, because it is this component's identity rather than wiring, the same way `<dialog>` and `<details>` are for the components built on them. There is no native switch element, so the role is the only thing that makes a switch a switch; without it the component would be `abaabil/checkbox` with different CSS, and the styled tier would look like a switch while announcing itself as a checkbox.
+
+There is no `aria-checked`. The native `checked` property already exposes the state, and a second copy of a piece of state is a second copy that can disagree with the first.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` (`abaabil/switch/a11y`):
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Accessible name. The platform does not supply one. |
+| `description` | `string` | - | Rendered text, wired via `aria-describedby`. |
+| `id` | `string` | - | Overrides the generated id. |
+
+Deliberately not included: visible "On"/"Off" text beside the control. A switch already announces its state from `checked`, so rendering the same state as adjacent text means a screen reader says it twice. Render your own and mark it `aria-hidden` if you want it visible.
+
+### Popover
+
+Built on the native Popover API. The trigger, the top layer, light-dismiss and Escape all come from the browser, so **all three tiers ship zero JavaScript** and all three are server-renderable.
+
+`id` is required rather than generated. Generating one would mean `useId`, which would mean a client boundary, which would cost this component the only property that makes it interesting.
+
+`Popover` (all tiers), trigger and panel together, rendered as a fragment so nothing is added to your layout:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` | `string` | - | Panel id; also wires the trigger. Required. |
+| `trigger` | `ReactNode` | - | Button content. |
+| `triggerProps` | `object` | - | Spread onto the button. |
+| `mode` | `'auto' \| 'manual'` | `'auto'` | `auto` light-dismisses and closes on Escape; `manual` does neither. |
+
+`PopoverTrigger` and `PopoverPanel` are also exported from every tier, for placing the two apart.
+
+`a11y` (`abaabil/popover/a11y`) adds a name for the panel, which is the one thing the platform does not supply:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Accessible name for the panel, as `aria-label`. |
+| `labelledBy` | `string` | - | Id of an element naming the panel. Use instead of `label` when the panel renders a visible heading, so the name is not said twice. |
+
+Deliberately not included: `aria-expanded` on the trigger. With no JavaScript it could only ever be a static value, and a static `aria-expanded` is worse than none, because it states a fact that stops being true the moment the popover opens. Browsers expose the `popovertarget` relationship natively.
+
+### Tabs
+
+The W3C APG tabs pattern. Tabs have no native element behind them, so unlike most of this library every tier is a client module: showing one panel at a time needs state.
+
+`normal` / `styled` (`abaabil/tabs`, `abaabil/tabs/styled`) give you the structure and the selection, with no ARIA and no keyboard handling:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `Array<{ key?, label, children? }>` | - | One entry per tab. |
+| `defaultIndex` | `number` | `0` | Tab selected on first render. |
+| `onChange` | `(index: number) => void` | - | Called with the newly selected index. |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` (`abaabil/tabs/a11y`) adds the roles, the pairing, the roving tabindex and the arrow keys, plus:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | - | Accessible name for the tablist. |
+| `labelledBy` | `string` | - | Id of an element naming the tablist. |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Chooses the arrow pair and sets `aria-orientation`. |
+| `activation` | `'automatic' \| 'manual'` | `'automatic'` | `automatic` selects as focus moves, which is the APG's recommendation when rendering a panel is cheap. `manual` moves focus without selecting; Enter or Space commits. |
+
+Uncontrolled, like the combobox: observe the selection through `onChange`.
+
+### Alert
+
+`normal` / `styled` (`abaabil/alert`, `abaabil/alert/styled`):
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'info' \| 'success' \| 'warning' \| 'danger'` | `'info'` | Applied as `data-variant`. |
+| `className` | `string` | - | Merged with the base class. |
+
+`a11y` (`abaabil/alert/a11y`) adds the live-region semantics, which are the whole difference between a coloured box and a message anyone using a screen reader finds out about. The role follows the variant, because the right answer is the same every time and getting it wrong is the common failure: `info` and `success` get `role="status"` (polite), `warning` and `danger` get `role="alert"` (interrupting).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'info' \| 'success' \| 'warning' \| 'danger'` | `'info'` | Also selects the role. |
+| `live` | `'polite' \| 'assertive' \| 'off'` | from `variant` | Overrides the politeness the variant implies. `off` drops the role entirely. |
+| `title` | `string` | - | Rendered above the message as `<strong>`, not a heading: an alert is usually not a section of the document, and a stray heading damages the outline for anyone navigating by headings. |
+
+**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.
+
+## 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.
 
@@ -381,6 +539,10 @@ The floor is Chrome 99, Firefox 98, Safari 15.4, set by `@layer` (needed from Ch
 | `@starting-style` | Chrome 117, Firefox 129, Safari 17.5 | no entry animation |
 | CSS anchor positioning | Chrome 125, Firefox 147, Safari 26 | absolute positioning, behind `@supports` |
 
+`abaabil/popover` is the one component with a floor of its own: the Popover API needs **Chrome 114, Firefox 125, Safari 17**. That is below this library's build target, so it raises nothing in practice, but it is a hard requirement rather than an enhancement. Below it, an unknown `popover` attribute is inert and the panel renders as an ordinary always-visible block under its trigger. Content stays reachable, which is why it is left that way rather than hidden, but it will not open and close. Import it only if that floor is acceptable; the other twelve components are unaffected.
+
+Where the panel appears is a separate question from whether it works. Attaching it to its trigger needs CSS anchor positioning, which is not yet Baseline, so it is applied behind `@supports`. Without it the popover falls back to the UA default, centred in the viewport. Placing it next to the trigger any other way would mean measuring the DOM in JavaScript, which would cost this component the zero-JavaScript property that is the reason to use it.
+
 ## Accessibility
 
 - The combobox implements the [WAI-ARIA Authoring Practices Guide 1.2 combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
@@ -388,6 +550,10 @@ The floor is Chrome 99, Firefox 98, Safari 15.4, set by `@layer` (needed from Ch
 - Checkbox's `indeterminate` is mirrored to `aria-checked="mixed"`, because `indeterminate` itself is a DOM property with no attribute equivalent, so it's invisible to assistive tech unless something does this explicitly.
 - `RadioGroup` supplies the shared `name` every descendant `Radio` needs to behave as one native group; without it, arrow-key navigation and single-selection silently stop working.
 - Accordion's `a11y` tier needs no JavaScript at all: every tier, including `a11y`, is server-renderable, and exclusive open/close comes from the native `name` attribute on `<details>`.
+- Popover leans entirely on the native Popover API for the top layer, light-dismiss, Escape and the trigger-to-panel relationship. Its `a11y` tier adds only an accessible name for the panel, which is the one thing the platform does not supply.
+- 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.
 - `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/alert/a11y.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as s}from"react/jsx-runtime";import"./alert.css";import v from"./index.js";function d({variant:t="info",live:e,title:a,children:l,...n}){const i=t==="warning"||t==="danger",r=e??(i?"assertive":"polite");return o(v,{variant:t,role:r==="off"?void 0:i?"alert":"status","aria-live":r!==(i?"assertive":"polite")?r:void 0,...n,children:[a?s("strong",{className:"abaabil-alert__title",children:a}):null,l]})}export{d as default};

package/dist/alert/alert.css

@@ -0,0 +1 @@
+@layer abaabil.components{.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}}

package/dist/alert/index.js

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

package/dist/alert/styled.js

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

package/dist/popover/a11y.js

@@ -0,0 +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};

package/dist/popover/index.js

@@ -0,0 +1 @@
+import{jsx as n,jsxs as d,Fragment as u}from"react/jsx-runtime";function p(e){return`--abaabil-popover-${String(e).replace(/[^\w-]/g,"-")}`}function c({target:e,action:o="toggle",className:r,style:t,children:a,...i}){const l=r?`abaabil-popover__trigger ${r}`:"abaabil-popover__trigger";return n("button",{type:"button",popoverTarget:e,popoverTargetAction:o,className:l,style:{anchorName:p(e),...t},...i,children:a})}function s({id:e,mode:o="auto",className:r,style:t,children:a,...i}){const l=r?`abaabil-popover ${r}`:"abaabil-popover";return n("div",{id:e,popover:o,className:l,style:{positionAnchor:p(e),...t},...i,children:a})}function g({id:e,trigger:o,triggerProps:r,mode:t="auto",children:a,...i}){return d(u,{children:[n(c,{target:e,...r,children:o}),n(s,{id:e,mode:t,...i,children:a})]})}export{g as Popover,s as PopoverPanel,c as PopoverTrigger,g as default};

package/dist/popover/popover.css

@@ -0,0 +1 @@
+@layer abaabil.components{.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}}}}

package/dist/popover/styled.js

@@ -0,0 +1 @@
+import"./popover.css";import{Popover as p,PopoverPanel as P,PopoverTrigger as v,Popover as a}from"./index.js";export{p as Popover,P as PopoverPanel,v as PopoverTrigger,a 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;--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-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-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-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}}}
+@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}}}

package/dist/switch/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as b,jsx as l}from"react/jsx-runtime";import{useId as p}from"react";import"./switch.css";import h from"./index.js";function m({label:a,description:e,id:o,"aria-describedby":c,...i}){const s=p(),r=o??`${s}-switch`,n=`${s}-description`,t=!!(a||i["aria-label"]||i["aria-labelledby"]);typeof process<"u"&&process.env.NODE_ENV!=="production"&&!t&&console.warn("abaabil/switch: no `label` given, so the switch has no accessible name and screen readers announce it as unnamed.");const d=[c,e?n:null].filter(Boolean).join(" ")||void 0;return b("span",{className:"abaabil-switch__wrapper",children:[l(h,{...i,id:r,"aria-describedby":d}),a?l("label",{htmlFor:r,className:"abaabil-switch__label",children:a}):null,e?l("span",{id:n,className:"abaabil-switch__description",children:e}):null]})}export{m as default};

package/dist/switch/index.js

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

package/dist/switch/styled.js

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

package/dist/switch/switch.css

@@ -0,0 +1 @@
+@layer abaabil.components{.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}}}

package/dist/tabs/a11y.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as B,jsx as s}from"react/jsx-runtime";import{useState as w,useRef as R,useId as j}from"react";import"./tabs.css";function C({items:n,label:c,labelledBy:d,defaultIndex:u=0,onChange:N,orientation:i="horizontal",activation:f="automatic",className:m,...r}){const[o,_]=w(u),[x,p]=w(u),y=R([]),h=j(),D=m?`abaabil-tabs ${m}`:"abaabil-tabs",v=a=>`${h}-tab-${a}`,k=a=>`${h}-panel-${a}`,$=!!(c||d||r["aria-label"]||r["aria-labelledby"]);typeof process<"u"&&process.env.NODE_ENV!=="production"&&!$&&console.warn("abaabil/tabs: no `label` or `labelledBy` given, so the tablist has no accessible name. Pass `label`, `labelledBy`, `aria-label`, or `aria-labelledby`.");function b(a){_(a),N?.(a)}function A(a){p(a),y.current[a]?.focus(),f==="automatic"&&b(a)}const E=i==="vertical"?"ArrowDown":"ArrowRight",I=i==="vertical"?"ArrowUp":"ArrowLeft";function g(a,e){const l=n.length-1;let t=null;if(a.key===E)t=e===l?0:e+1;else if(a.key===I)t=e===0?l:e-1;else if(a.key==="Home")t=0;else if(a.key==="End")t=l;else if(f==="manual"&&(a.key==="Enter"||a.key===" ")){a.preventDefault(),b(e);return}else return;a.preventDefault(),A(t)}return B("div",{className:D,...r,children:[s("div",{role:"tablist","aria-label":c,"aria-labelledby":d,"aria-orientation":i,className:"abaabil-tabs__list","data-orientation":i,children:n.map((a,e)=>s("button",{type:"button",role:"tab",id:v(e),"aria-selected":e===o,"aria-controls":k(e),tabIndex:e===x?0:-1,ref:l=>{y.current[e]=l},className:"abaabil-tabs__tab","data-selected":e===o?"true":void 0,onClick:()=>{p(e),b(e)},onKeyDown:l=>g(l,e),children:a.label},a.key??e))}),n.map((a,e)=>e===o?s("div",{role:"tabpanel",id:k(e),"aria-labelledby":v(e),tabIndex:0,className:"abaabil-tabs__panel",children:a.children},a.key??e):null)]})}export{C as default};

package/dist/tabs/index.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsxs as m,jsx as s}from"react/jsx-runtime";import{useState as u}from"react";function p({items:l,defaultIndex:n=0,onChange:b,className:t,...c}){const[i,d]=u(n),o=t?`abaabil-tabs ${t}`:"abaabil-tabs";function r(a){d(a),b?.(a)}return m("div",{className:o,...c,children:[s("div",{className:"abaabil-tabs__list",children:l.map((a,e)=>s("button",{type:"button",className:"abaabil-tabs__tab","data-selected":e===i?"true":void 0,onClick:()=>r(e),children:a.label},a.key??e))}),l.map((a,e)=>e===i?s("div",{className:"abaabil-tabs__panel",children:a.children},a.key??e):null)]})}export{p as default};

package/dist/tabs/styled.js

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

package/dist/tabs/tabs.css

@@ -0,0 +1 @@
+@layer abaabil.components{.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}}}

package/dist/textarea/a11y.js

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

package/dist/textarea/index.js

@@ -0,0 +1 @@
+import{jsx as s}from"react/jsx-runtime";function o({rows:t=3,className:a,...e}){const r=a?`abaabil-textarea ${a}`:"abaabil-textarea";return s("textarea",{rows:t,className:r,...e})}export{o as default};

package/dist/textarea/styled.js

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

package/dist/textarea/textarea.css

@@ -0,0 +1 @@
+@layer abaabil.components{.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}}}

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;--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-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-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abaabil",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Minimal, themeable, accessible React components. Zero dependencies.",
   "license": "MIT",
   "repository": {
@@ -59,6 +59,21 @@
     "./accordion": "./dist/accordion/index.js",
     "./accordion/styled": "./dist/accordion/styled.js",
     "./accordion/a11y": "./dist/accordion/a11y.js",
+    "./textarea": "./dist/textarea/index.js",
+    "./textarea/styled": "./dist/textarea/styled.js",
+    "./textarea/a11y": "./dist/textarea/a11y.js",
+    "./switch": "./dist/switch/index.js",
+    "./switch/styled": "./dist/switch/styled.js",
+    "./switch/a11y": "./dist/switch/a11y.js",
+    "./popover": "./dist/popover/index.js",
+    "./popover/styled": "./dist/popover/styled.js",
+    "./popover/a11y": "./dist/popover/a11y.js",
+    "./tabs": "./dist/tabs/index.js",
+    "./tabs/styled": "./dist/tabs/styled.js",
+    "./tabs/a11y": "./dist/tabs/a11y.js",
+    "./alert": "./dist/alert/index.js",
+    "./alert/styled": "./dist/alert/styled.js",
+    "./alert/a11y": "./dist/alert/a11y.js",
     "./theme.css": "./dist/theme.css",
     "./styles.css": "./dist/styles.css",
     "./button.css": "./dist/button/button.css",
@@ -68,7 +83,12 @@
     "./checkbox.css": "./dist/checkbox/checkbox.css",
     "./radio.css": "./dist/radio/radio.css",
     "./select.css": "./dist/select/select.css",
-    "./accordion.css": "./dist/accordion/accordion.css"
+    "./accordion.css": "./dist/accordion/accordion.css",
+    "./textarea.css": "./dist/textarea/textarea.css",
+    "./switch.css": "./dist/switch/switch.css",
+    "./popover.css": "./dist/popover/popover.css",
+    "./tabs.css": "./dist/tabs/tabs.css",
+    "./alert.css": "./dist/alert/alert.css"
   },
   "scripts": {
     "build": "node scripts/build-css.js && rollup -c && node scripts/check-directives.js && node scripts/measure.js",