abaabil 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +75 -0
- package/README.md +36 -1
- package/dist/accordion/accordion.css +1 -1
- package/dist/combobox/combobox.css +1 -1
- package/dist/menu/menu.css +1 -1
- package/dist/pagination/pagination.css +1 -1
- package/dist/popover/popover.css +1 -1
- package/dist/progress/progress.css +1 -1
- package/dist/slider/slider.css +1 -1
- package/dist/styles.css +1 -1
- package/dist/switch/switch.css +1 -1
- package/dist/theme.css +1 -1
- package/dist/toolbar/toolbar.css +1 -1
- package/llms.txt +10 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,81 @@ All notable changes to this project are documented in this file.
|
|
|
4
4
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|
6
6
|
|
|
7
|
+
## [1.4.1] - 2026-09-21
|
|
8
|
+
|
|
9
|
+
A colour audit of all twenty-three components, in both themes, against
|
|
10
|
+
WCAG 1.4.3 (text, 4.5:1) and 1.4.11 (controls and their states, 3:1).
|
|
11
|
+
Nothing about the API changed; several things that were invisible now are
|
|
12
|
+
not. If you have overridden any of these tokens, re-read the neutrals
|
|
13
|
+
table in the README, because two of them have swapped jobs.
|
|
14
|
+
|
|
15
|
+
### Fixed
|
|
16
|
+
|
|
17
|
+
Text and control colours that did not meet their contrast floor:
|
|
18
|
+
|
|
19
|
+
- `--color-border` was `#d1d5db`, **1.47:1** on the surface. It is the
|
|
20
|
+
only thing marking where an input is, since an input's background is
|
|
21
|
+
the same colour as the page, so at that ratio the field boundary was
|
|
22
|
+
not there for anyone who needed it. Now `#8b929e` (3.13:1) in light
|
|
23
|
+
and `#5b6675` (3.28:1) in dark.
|
|
24
|
+
- `--color-placeholder` was **2.54:1**. Placeholder text is text.
|
|
25
|
+
- `--color-success` was **3.30:1** as text in light mode;
|
|
26
|
+
`--color-danger` was **3.97:1** in dark, and `--color-warning`
|
|
27
|
+
likewise. Each is now at or above 4.5:1 in both themes.
|
|
28
|
+
- The popover and menu triggers set `color: inherit` over the browser's
|
|
29
|
+
own button face and nothing else, which in dark mode was **1.08:1**:
|
|
30
|
+
dark grey text on a light grey UA button. Both now bring their own
|
|
31
|
+
surface, border, text colour and focus ring.
|
|
32
|
+
- The unavailable step in a paginator was drawn at `opacity: 0.6`,
|
|
33
|
+
**2.32:1**. It is plain text, not a disabled control, so the 1.4.3
|
|
34
|
+
exemption does not cover it. Now 4.83:1.
|
|
35
|
+
- A progress bar's track and a slider's groove had no boundary, so at
|
|
36
|
+
**1.07:1** against the page a bar at 0% was nothing at all and a bar
|
|
37
|
+
at 40% was a blue stripe with no indication of what it was 40% of.
|
|
38
|
+
Both now have a `--color-border` edge.
|
|
39
|
+
- A switch's thumb is `--color-surface`, and its off state was
|
|
40
|
+
`--color-muted`: **1.08:1** in light, 1.31:1 in dark. The thumb's
|
|
41
|
+
position is the entire non-colour cue for on versus off, so the state
|
|
42
|
+
rested on hue alone. The off state is now `--color-border`.
|
|
43
|
+
- The combobox's active option, where `aria-activedescendant` points and
|
|
44
|
+
the only thing telling a sighted keyboard user what Enter will choose,
|
|
45
|
+
shared the `:hover` rule and so was marked by a **1.07:1** wash. It is
|
|
46
|
+
now the primary fill with `--color-primary-fg` text, and it wins over
|
|
47
|
+
`:hover` so the pointer cannot override the keyboard position.
|
|
48
|
+
|
|
49
|
+
### Added
|
|
50
|
+
|
|
51
|
+
- **`--color-track`**, the empty part of a progress bar or slider
|
|
52
|
+
groove. It was `--color-muted`, which also serves as the hover wash,
|
|
53
|
+
and the two want opposite things: a wash sits a hair off the surface,
|
|
54
|
+
a track stays clear of the fill drawn over it. In dark mode that
|
|
55
|
+
conflict put a blue fill on a grey track at 2.84:1. The tokens share a
|
|
56
|
+
value in light mode and diverge in dark.
|
|
57
|
+
- **`--color-border-subtle`**, for rules that carry no information:
|
|
58
|
+
accordion dividers, a toolbar separator. These kept the old quiet
|
|
59
|
+
`#d1d5db` so that raising `--color-border` to a visible weight did not
|
|
60
|
+
drag every decorative hairline up with it.
|
|
61
|
+
- `test/contrast.test.js` - sixteen pairings per theme, each one that
|
|
62
|
+
actually occurs in a component, computed from the token sources and
|
|
63
|
+
asserted against the floor WCAG sets for it. The audit that found all
|
|
64
|
+
of the above was a browser sweep, which the suite cannot run; this
|
|
65
|
+
holds the fixed points it landed on, so a token edit that drops one
|
|
66
|
+
back under the line fails in milliseconds rather than surviving until
|
|
67
|
+
someone next thinks to open a browser. It also checks that the two
|
|
68
|
+
dark-mode blocks, which CSS forces to be written twice, still agree.
|
|
69
|
+
|
|
70
|
+
### Changed
|
|
71
|
+
|
|
72
|
+
- The dark palette is defined once as `--abaabil-dark-*` primitives and
|
|
73
|
+
assigned by both the `prefers-color-scheme` block and the
|
|
74
|
+
`[data-theme="dark"]` block, rather than written out twice. The values
|
|
75
|
+
had no way to stay in step before; now they cannot drift.
|
|
76
|
+
- `Pagination`'s `label` prop is documented for the case a page has two
|
|
77
|
+
paginators, above and below a list. Both default to "Pagination", and
|
|
78
|
+
two navigation landmarks with one name is a real finding. Only the
|
|
79
|
+
page knows the second paginator is the same list again, so this is
|
|
80
|
+
guidance, not a fix the component can make.
|
|
81
|
+
|
|
7
82
|
## [1.4.0] - 2026-09-21
|
|
8
83
|
|
|
9
84
|
### Added
|
package/README.md
CHANGED
|
@@ -175,6 +175,30 @@ Override any of them individually if the derived value is not what you want.
|
|
|
175
175
|
|
|
176
176
|
`--color-danger`, `--color-success` and `--color-warning` are independent on purpose: an error is red whatever your brand colour is.
|
|
177
177
|
|
|
178
|
+
### The neutrals, and which ones have to stay visible
|
|
179
|
+
|
|
180
|
+
Four tokens look interchangeable and are not. Each has a contrast floor it
|
|
181
|
+
is chosen to clear, and swapping one for another is how a control quietly
|
|
182
|
+
stops being visible to the people who need it most.
|
|
183
|
+
|
|
184
|
+
| Token | Default | Its job | Floor |
|
|
185
|
+
|---|---|---|---|
|
|
186
|
+
| `--color-border` | `#8b929e` | the edge of a control: an input, a select, a track, the off state of a switch | 3:1 on the surface |
|
|
187
|
+
| `--color-border-subtle` | `#d1d5db` | decorative rules: accordion dividers, a toolbar separator | none, it carries nothing |
|
|
188
|
+
| `--color-muted` | `#f3f4f6` | a hover wash, an avatar ground | none, hover is a pointer affordance |
|
|
189
|
+
| `--color-track` | `#f3f4f6` | the empty part of a progress bar or slider groove | 3:1 against `--color-primary` |
|
|
190
|
+
|
|
191
|
+
`--color-muted` and `--color-track` share a value in the light theme and
|
|
192
|
+
part company in the dark one, which is the reason they are two tokens. A
|
|
193
|
+
hover wash wants to sit a hair off the surface; a track has to stay clear
|
|
194
|
+
of the fill drawn over it. Held together, the dark theme put a blue fill
|
|
195
|
+
on a grey track at 2.84:1.
|
|
196
|
+
|
|
197
|
+
If you re-theme, the pairs worth re-checking are `--color-border` against
|
|
198
|
+
`--color-surface`, and `--color-primary` against both `--color-surface`
|
|
199
|
+
and `--color-track`. The library's own test suite asserts these; yours
|
|
200
|
+
should too if you change them.
|
|
201
|
+
|
|
178
202
|
abaabil's own component rules live inside `@layer abaabil.components`. CSS layers give unlayered rules the higher priority by default, so any selector you write in your normal (unlayered) application CSS beats the library's layered styles automatically, with no `!important` needed:
|
|
179
203
|
|
|
180
204
|
```css
|
|
@@ -696,13 +720,24 @@ The gap is drawn in CSS, never rendered as text, so an ellipsis is never read ou
|
|
|
696
720
|
|
|
697
721
|
| Prop | Type | Default | Description |
|
|
698
722
|
|---|---|---|---|
|
|
699
|
-
| `label` | `string` | `'Pagination'` | Names the `<nav>`. |
|
|
723
|
+
| `label` | `string` | `'Pagination'` | Names the `<nav>`. See the note below if a page has two paginators. |
|
|
700
724
|
| `pageLabel` | `(n) => string` | `` `Page ${n}` `` | Names each number. A link whose whole content is "7" is announced as "7", which in a list of links means nothing. Replace to translate. |
|
|
701
725
|
| `previousLabel` | `string` | `'Previous page'` | |
|
|
702
726
|
| `nextLabel` | `string` | `'Next page'` | |
|
|
703
727
|
|
|
704
728
|
plus `aria-current="page"` on the current page. At either end, Previous and Next are not links at all, so nothing dead stays in the tab order.
|
|
705
729
|
|
|
730
|
+
A page with a paginator above the list and another below it has two
|
|
731
|
+
navigation landmarks with the same name, which screen reader users hear
|
|
732
|
+
as "navigation, navigation" with nothing to tell them apart. Give the
|
|
733
|
+
second one its own `label`. The component cannot do this for you: from
|
|
734
|
+
inside a single paginator there is no way to know another exists.
|
|
735
|
+
|
|
736
|
+
```jsx
|
|
737
|
+
<Pagination label="Results, top" page={p} pageCount={n} href={href} />
|
|
738
|
+
<Pagination label="Results, bottom" page={p} pageCount={n} href={href} />
|
|
739
|
+
```
|
|
740
|
+
|
|
706
741
|
### File
|
|
707
742
|
|
|
708
743
|
A native `<input type="file">`, not a `<button>` with a hidden input behind it. That pattern has to reimplement the label association, the keyboard activation and the announcement of the chosen file, and usually manages one of the three. The real control does all three, and it is stylable: `::file-selector-button` is a real pseudo-element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@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}}}
|
|
1
|
+
@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-subtle)}.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}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer abaabil.components{.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
|
|
1
|
+
@layer abaabil.components{.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{background:var(--color-muted)}.abaabil-combobox__option[data-active=true]{background:var(--color-primary);color:var(--color-primary-fg)}@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}}}
|
package/dist/menu/menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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:
|
|
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-abaabil-menu__trigger{appearance:none;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;background:0 0}.abaabil-abaabil-menu__trigger:hover{background:var(--color-muted)}.abaabil-abaabil-menu__trigger:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.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}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer abaabil.components{.abaabil-pagination__list{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-pagination__link,.abaabil-pagination__current,.abaabil-pagination__step{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);padding-inline:var(--space-2);border-radius:var(--radius-md);color:var(--color-text);font-variant-numeric:tabular-nums;border:1px solid #0000;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.abaabil-pagination__link:hover{background:var(--color-muted)}.abaabil-pagination__link:focus-visible,.abaabil-pagination__step:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-pagination__current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg);font-weight:var(--font-weight-semibold)}.abaabil-pagination__gap:before{content:"…"}.abaabil-pagination__gap{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.abaabil-pagination__step{border-color:var(--color-border)}.abaabil-pagination__step:hover{background:var(--color-muted)}.abaabil-pagination__step--unavailable{color:var(--color-text-muted);
|
|
1
|
+
@layer abaabil.components{.abaabil-pagination__list{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-pagination__link,.abaabil-pagination__current,.abaabil-pagination__step{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);padding-inline:var(--space-2);border-radius:var(--radius-md);color:var(--color-text);font-variant-numeric:tabular-nums;border:1px solid #0000;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.abaabil-pagination__link:hover{background:var(--color-muted)}.abaabil-pagination__link:focus-visible,.abaabil-pagination__step:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-pagination__current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg);font-weight:var(--font-weight-semibold)}.abaabil-pagination__gap:before{content:"…"}.abaabil-pagination__gap{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.abaabil-pagination__step{border-color:var(--color-border)}.abaabil-pagination__step:hover{background:var(--color-muted)}.abaabil-pagination__step--unavailable{color:var(--color-text-muted);border-color:#0000}}
|
package/dist/popover/popover.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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:
|
|
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-abaabil-popover__trigger{appearance:none;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;background:0 0}.abaabil-abaabil-popover__trigger:hover{background:var(--color-muted)}.abaabil-abaabil-popover__trigger:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@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}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer abaabil.components{.abaabil-progress{appearance:none;background:var(--color-
|
|
1
|
+
@layer abaabil.components{.abaabil-progress{appearance:none;box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-track);block-size:.5rem;inline-size:100%;color:var(--color-primary);border-radius:999px;display:block;overflow:hidden}.abaabil-progress::-webkit-progress-bar{background:var(--color-track);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-track);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/slider/slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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{box-sizing:border-box;block-size:var(--slider-track);border:1px solid var(--color-border);background:var(--color-track);border-radius:999px}.abaabil-slider::-moz-range-track{box-sizing:border-box;block-size:var(--slider-track);border:1px solid var(--color-border);background:var(--color-track);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/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-gray-900:#111827;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--color-primary:var(--abaabil-blue-500);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--color-primary);--color-overlay:#00000080;--color-text-muted:#6b7280;--color-placeholder:#9ca3af;--radius-md:.375rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--font-size-sm:.875rem;--font-size-lg:1.125rem;--font-weight-semibold:600;--control-height-md:2.5rem;--duration-fast:.15s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}:root[data-theme=dark]{--color-surface:#0b0f19;--color-text:#e5e7eb;--color-border:#374151;--color-muted:#1f2937;--color-text-muted:#9ca3af;--color-placeholder:#6b7280}}@layer abaabil.base{.abaabil-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer abaabil.components{.abaabil-accordion-group{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:clip}.abaabil-accordion-group .abaabil-accordion+.abaabil-accordion{border-top:1px solid var(--color-border)}.abaabil-accordion{color:var(--color-text)}.abaabil-accordion__summary{list-style:none}.abaabil-accordion__summary::-webkit-details-marker{display:none}.abaabil-accordion__summary{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--control-height-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.3;display:flex}.abaabil-accordion__summary:hover{background:var(--color-muted)}.abaabil-accordion__summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-accordion__summary:after{content:"";block-size:.5rem;inline-size:.5rem;transition:transform var(--duration-fast) ease;border-bottom:2px solid;border-right:2px solid;flex:none;transform:rotate(45deg)}.abaabil-accordion[open]>.abaabil-accordion__summary:after{transform:rotate(-135deg)}.abaabil-accordion__panel{padding:0 var(--space-4) var(--space-3)}@media (prefers-reduced-motion:reduce){.abaabil-accordion__summary:after{transition:none}}.abaabil-alert{--alert-accent:var(--color-primary);gap:var(--space-1);padding-block:var(--space-2);padding-inline:var(--space-3);border:1px solid color-mix(in srgb, var(--alert-accent) 35%, var(--color-surface));border-inline-start:3px solid var(--alert-accent);border-radius:var(--radius-md);background:color-mix(in srgb, var(--alert-accent) 8%, var(--color-surface));color:var(--color-text);font-size:var(--font-size-sm);flex-direction:column;line-height:1.5;display:flex}.abaabil-alert[data-variant=success]{--alert-accent:var(--color-success)}.abaabil-alert[data-variant=warning]{--alert-accent:var(--color-warning)}.abaabil-alert[data-variant=danger]{--alert-accent:var(--color-danger)}.abaabil-alert__title{font-weight:var(--font-weight-semibold);color:var(--color-text)}.abaabil-alert:empty{display:none}.abaabil-avatar{--avatar-size:2.5rem;inline-size:var(--avatar-size);block-size:var(--avatar-size);background:var(--color-muted);color:var(--color-text);font-size:calc(var(--avatar-size) * .4);font-weight:var(--font-weight-semibold);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:clip}.abaabil-avatar__image{object-fit:cover;object-position:center 30%;block-size:100%;inline-size:100%}.abaabil-avatar__initials{letter-spacing:.02em;text-indent:.02em}.abaabil-badge{--badge-accent:var(--color-text-muted);align-items:center;gap:var(--space-1);padding-block:.1em;padding-inline:var(--space-2);border:1px solid color-mix(in srgb, var(--badge-accent) 35%, var(--color-surface));background:color-mix(in srgb, var(--badge-accent) 12%, var(--color-surface));color:var(--color-text);font-size:max(.75rem,.8em);font-weight:var(--font-weight-semibold);white-space:nowrap;border-radius:999px;line-height:1.4;display:inline-flex}.abaabil-badge[data-variant=info]{--badge-accent:var(--color-primary)}.abaabil-badge[data-variant=success]{--badge-accent:var(--color-success)}.abaabil-badge[data-variant=warning]{--badge-accent:var(--color-warning)}.abaabil-badge[data-variant=danger]{--badge-accent:var(--color-danger)}.abaabil-breadcrumb__list{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-breadcrumb__item{align-items:center;gap:var(--space-2);color:var(--color-text-muted);display:flex}.abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{content:"";opacity:.6;border-block-start:1.5px solid;border-inline-end:1.5px solid;flex:none;block-size:.35rem;inline-size:.35rem;rotate:45deg}.abaabil-breadcrumb__list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{rotate:-135deg}.abaabil-breadcrumb__link{color:var(--color-text-muted);text-underline-offset:.2em;border-radius:var(--radius-md);text-decoration:underline}.abaabil-breadcrumb__link:hover{color:var(--color-text)}.abaabil-breadcrumb__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-breadcrumb__current{color:var(--color-text);font-weight:var(--font-weight-semibold)}.abaabil-button{--btn-bg:var(--color-primary);--btn-fg:var(--color-primary-fg);--btn-border:var(--color-primary);--btn-height:var(--control-height-md);--btn-padding-x:max(.375rem, calc((var(--btn-height) - var(--font-size-sm)) / 2));--btn-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-2);height:var(--btn-height);padding-inline:var(--btn-padding-x);border:1px solid var(--btn-border);border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;line-height:1;text-decoration:none;display:inline-flex}.abaabil-button:hover{--btn-bg:var(--color-primary-hover);--btn-border:var(--color-primary-hover)}.abaabil-button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-button[data-variant=secondary]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:var(--color-border)}.abaabil-button[data-variant=ghost]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:transparent}.abaabil-button[data-size=sm]{--btn-height:2rem}.abaabil-button[data-size=lg]{--btn-height:3rem}.abaabil-button:disabled,.abaabil-button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.abaabil-button{transition:none}}.abaabil-checkbox{--checkbox-radius:min(var(--radius-md), .25rem);appearance:none;border:1px solid var(--color-border);border-radius:var(--checkbox-radius);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-checkbox:before{content:"";background:var(--color-primary-fg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:.65rem;height:.65rem;transition:transform var(--duration-fast) ease;transform:scale(0)}.abaabil-checkbox:checked,.abaabil-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-checkbox:checked:before,.abaabil-checkbox:indeterminate:before{transform:scale(1)}.abaabil-checkbox:indeterminate:before{clip-path:none;border-radius:1px;width:.65rem;height:.125rem}.abaabil-checkbox:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-checkbox:disabled{opacity:.5;cursor:not-allowed}.abaabil-checkbox__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-checkbox__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-checkbox__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-checkbox-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-checkbox-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-checkbox,.abaabil-checkbox:before{transition:none}}.abaabil-combobox{display:inline-block;position:relative}.abaabil-combobox__label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.abaabil-combobox__label--visible{margin-bottom:var(--space-1);font-size:var(--font-size-sm);color:var(--color-text);display:block}.abaabil-combobox__input{height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--control-height-md) - var(--font-size-sm)) / 2));padding-inline:var(--input-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);width:100%}.abaabil-combobox__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-combobox__list{z-index:10;width:100%;max-height:15rem;padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin:0;list-style:none;position:absolute;inset-block-start:calc(100% + var(--space-1));inset-inline-start:0;overflow-y:auto}.abaabil-combobox__option{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-combobox__option:hover,.abaabil-combobox__option[data-active=true]{background:var(--color-muted)}@supports (anchor-name:--x){.abaabil-combobox__input{anchor-name:--abaabil-combobox-input}.abaabil-combobox__list{position-anchor:--abaabil-combobox-input;position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end;width:anchor-size(width);position:fixed;inset:auto}}.abaabil-dialog{--dialog-width:32rem;--dialog-padding:var(--space-4);width:min(var(--dialog-width), calc(100vw - 2rem));padding:var(--dialog-padding);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-dialog::backdrop{background:var(--color-overlay)}.abaabil-dialog__title{margin:0 0 var(--space-3);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}@starting-style{.abaabil-dialog[open]{opacity:0;transform:translateY(.5rem)}}.abaabil-dialog[open]{opacity:1;transition:opacity var(--duration-fast) ease, transform var(--duration-fast) ease;transform:none}@media (prefers-reduced-motion:reduce){.abaabil-dialog[open]{transition:none}@starting-style{.abaabil-dialog[open]{opacity:1;transform:none}}}.abaabil-file{--file-border:var(--color-border);inline-size:100%;padding:var(--space-2);border:1px solid var(--file-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;display:block}.abaabil-file::file-selector-button{padding-block:var(--space-1);padding-inline:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-muted);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--duration-fast) ease;margin-inline-end:var(--space-3)}.abaabil-file::file-selector-button:hover{background:var(--color-border)}.abaabil-file:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-file:disabled{opacity:.5;cursor:not-allowed}.abaabil-file:disabled::file-selector-button{opacity:.5;cursor:not-allowed}.abaabil-file[aria-invalid=true]{--file-border:var(--color-danger)}.abaabil-file-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-file__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-file__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-file__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-file::file-selector-button{transition:none}}.abaabil-input{--input-height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--input-height) - var(--font-size-sm)) / 2));--input-border:var(--color-border);--input-placeholder-fg:var(--color-placeholder);width:100%;height:var(--input-height);padding-inline:var(--input-padding-x);border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);transition:border-color var(--duration-fast) ease;display:block}.abaabil-input::placeholder{color:var(--input-placeholder-fg)}.abaabil-input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-input:disabled{opacity:.5;cursor:not-allowed}.abaabil-input[aria-invalid=true]{--input-border:var(--color-danger)}.abaabil-input-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-input__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-input__description{--input-description-fg:var(--color-text-muted);font-size:var(--font-size-sm);color:var(--input-description-fg)}.abaabil-input__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-input{transition:none}}.abaabil-menu{inline-size:max-content;min-inline-size:10rem;max-inline-size:min(18rem,100vw - 2rem);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-menu::backdrop{background:0 0}.abaabil-menu__trigger{font:inherit;color:inherit}.abaabil-menu__item{appearance:none;inline-size:100%;padding-block:var(--space-2);padding-inline:var(--space-3);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);text-align:start;white-space:nowrap;cursor:pointer;background:0 0;border:0;text-decoration:none;display:block}.abaabil-menu__item:hover{background:var(--color-muted)}.abaabil-menu__item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px;background:var(--color-muted)}.abaabil-menu__item:disabled{opacity:.5;cursor:not-allowed}.abaabil-menu__item:disabled:hover{background:0 0}@supports (anchor-name:--x){.abaabil-menu{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-menu:popover-open{opacity:0}}.abaabil-menu:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-menu:popover-open{transition:none}@starting-style{.abaabil-menu:popover-open{opacity:1}}}.abaabil-pagination__list{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-pagination__link,.abaabil-pagination__current,.abaabil-pagination__step{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);padding-inline:var(--space-2);border-radius:var(--radius-md);color:var(--color-text);font-variant-numeric:tabular-nums;border:1px solid #0000;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.abaabil-pagination__link:hover{background:var(--color-muted)}.abaabil-pagination__link:focus-visible,.abaabil-pagination__step:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-pagination__current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg);font-weight:var(--font-weight-semibold)}.abaabil-pagination__gap:before{content:"…"}.abaabil-pagination__gap{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.abaabil-pagination__step{border-color:var(--color-border)}.abaabil-pagination__step:hover{background:var(--color-muted)}.abaabil-pagination__step--unavailable{color:var(--color-text-muted);opacity:.6;border-color:#0000}.abaabil-popover{inline-size:max-content;max-inline-size:min(22rem,100vw - 2rem);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm)}.abaabil-popover:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-popover::backdrop{background:0 0}.abaabil-popover__trigger{font:inherit;color:inherit}@supports (anchor-name:--x){.abaabil-popover{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-popover:popover-open{opacity:0}}.abaabil-popover:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-popover:popover-open{transition:none}@starting-style{.abaabil-popover:popover-open{opacity:1}}}.abaabil-progress{appearance:none;background:var(--color-muted);block-size:.5rem;inline-size:100%;color:var(--color-primary);border:0;border-radius:999px;display:block;overflow:hidden}.abaabil-progress::-webkit-progress-bar{background:var(--color-muted);border-radius:999px}.abaabil-progress::-webkit-progress-value{background:var(--color-primary);transition:inline-size var(--duration-fast) ease;border-radius:999px}.abaabil-progress::-moz-progress-bar{background:var(--color-primary);border-radius:999px}.abaabil-progress:indeterminate{background:linear-gradient(90deg, var(--color-primary) 0 35%, transparent 35% 100%) 0 0 / 250% 100% no-repeat var(--color-muted);animation:1.4s linear infinite abaabil-progress-slide}.abaabil-progress:indeterminate::-webkit-progress-bar{background:0 0}.abaabil-progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes abaabil-progress-slide{0%{background-position:-60% 0}to{background-position:160% 0}}.abaabil-progress-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-progress__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-progress__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}@media (prefers-reduced-motion:reduce){.abaabil-progress::-webkit-progress-value{transition:none}.abaabil-progress:indeterminate{background-position:40% 0;animation:none}}.abaabil-radio{appearance:none;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:50%;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-radio:before{content:"";background:var(--color-primary-fg);width:.5rem;height:.5rem;transition:transform var(--duration-fast) ease;border-radius:50%;transform:scale(0)}.abaabil-radio:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-radio:checked:before{transform:scale(1)}.abaabil-radio:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-radio:disabled{opacity:.5;cursor:not-allowed}.abaabil-radio__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-radio__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-radio__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-radio-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-radio-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-radio,.abaabil-radio:before{transition:none}}.abaabil-select{--select-height:var(--control-height-md);--select-padding-x:max(.375rem, calc((var(--select-height) - var(--font-size-sm)) / 2));appearance:none;height:var(--select-height);padding-inline:var(--select-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--select-padding-x) center;color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;transition:border-color var(--duration-fast) ease;background-size:.75rem .75rem;padding-inline-end:calc(var(--select-padding-x) + 1.125rem);line-height:1}.abaabil-select:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){background-position:left var(--select-padding-x) center;padding-inline-start:calc(var(--select-padding-x) + 1.125rem);padding-inline-end:var(--select-padding-x)}.abaabil-select:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-select:disabled{opacity:.5;cursor:not-allowed}.abaabil-select-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-select__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-select__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;margin:0}.abaabil-select__error{font-size:var(--font-size-sm);color:var(--color-danger);margin:0}.abaabil-select[aria-invalid=true]{border-color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-select{transition:none}}.abaabil-slider{--slider-track:.3rem;--slider-thumb:1.1rem;appearance:none;inline-size:100%;block-size:var(--slider-thumb);cursor:pointer;background:0 0;margin:0}.abaabil-slider::-webkit-slider-runnable-track{block-size:var(--slider-track);background:var(--color-muted);border-radius:999px}.abaabil-slider::-moz-range-track{block-size:var(--slider-track);background:var(--color-muted);border-radius:999px}.abaabil-slider::-webkit-slider-thumb{appearance:none;inline-size:var(--slider-thumb);block-size:var(--slider-thumb);border:2px solid var(--color-surface);background:var(--color-primary);border-radius:50%;margin-block-start:calc((var(--slider-track) - var(--slider-thumb)) / 2)}.abaabil-slider::-moz-range-thumb{inline-size:var(--slider-thumb);block-size:var(--slider-thumb);border:2px solid var(--color-surface);background:var(--color-primary);border-radius:50%}.abaabil-slider::-moz-range-progress{block-size:var(--slider-track);background:var(--color-primary);border-radius:999px}.abaabil-slider:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:4px;border-radius:999px}.abaabil-slider:disabled{opacity:.5;cursor:not-allowed}.abaabil-slider-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-slider__header{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.abaabil-slider__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-slider__output{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text)}.abaabil-slider__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-switch{--switch-width:2.25rem;--switch-height:1.25rem;--switch-gap:2px;--switch-thumb:calc(var(--switch-height) - (var(--switch-gap) * 2));appearance:none;inline-size:var(--switch-width);block-size:var(--switch-height);border:1px solid var(--color-border);background:var(--color-muted);cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:999px;flex-shrink:0;margin:0;position:relative}.abaabil-switch:before{content:"";inline-size:var(--switch-thumb);block-size:var(--switch-thumb);background:var(--color-surface);transition:inset-inline-start var(--duration-fast) ease;border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:var(--switch-gap);translate:0 -50%}.abaabil-switch:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-switch:checked:before{inset-inline-start:calc(100% - var(--switch-thumb) - var(--switch-gap))}.abaabil-switch:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-switch:disabled{opacity:.5;cursor:not-allowed}.abaabil-switch__wrapper{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:inline-flex}.abaabil-switch__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-switch__description{font-size:var(--font-size-sm);color:var(--color-text-muted);flex-basis:100%;display:block}@media (prefers-reduced-motion:reduce){.abaabil-switch,.abaabil-switch:before{transition:none}}.abaabil-tabs{gap:var(--space-3);flex-direction:column;display:flex}.abaabil-tabs__list{gap:var(--space-1);border-block-end:1px solid var(--color-border);display:flex}.abaabil-tabs__tab{appearance:none;padding-block:var(--space-2);padding-inline:var(--space-3);border:0;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) ease, border-color var(--duration-fast) ease;background:0 0;border-block-end:2px solid #0000;margin-block-end:-1px;line-height:1.3}.abaabil-tabs__tab:hover{color:var(--color-text)}.abaabil-tabs__tab[data-selected=true]{color:var(--color-text);border-block-end-color:var(--color-primary)}.abaabil-tabs__tab:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.abaabil-tabs__list[data-orientation=vertical]{border-block-end:0;border-inline-end:1px solid var(--color-border);flex-direction:column}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab{text-align:start;border-block-end:0;border-inline-end:2px solid #0000;margin-block-end:0;margin-inline-end:-1px}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab[data-selected=true]{border-inline-end-color:var(--color-primary)}.abaabil-tabs__panel:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.abaabil-tabs__tab{transition:none}}.abaabil-textarea{--textarea-padding-block:var(--space-2);--textarea-padding-x:var(--space-3);--textarea-border:var(--color-border);--textarea-placeholder-fg:var(--color-placeholder);width:100%;padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-x);border:1px solid var(--textarea-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);resize:block;transition:border-color var(--duration-fast) ease;line-height:1.5;display:block}.abaabil-textarea::placeholder{color:var(--textarea-placeholder-fg)}.abaabil-textarea:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none}.abaabil-textarea[aria-invalid=true]{--textarea-border:var(--color-danger)}.abaabil-textarea-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-textarea__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-textarea__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-textarea__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-textarea{transition:none}}.abaabil-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex}.abaabil-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;inline-size:max-content}.abaabil-toolbar hr{block-size:auto;inline-size:1px;margin-block:var(--space-1);margin-inline:var(--space-1);background:var(--color-border);border:0;align-self:stretch}.abaabil-toolbar[data-orientation=vertical] hr{block-size:1px;inline-size:auto;margin-block:var(--space-1);margin-inline:var(--space-1)}.abaabil-tooltip{display:inline-flex;position:relative}.abaabil-tooltip__bubble{z-index:20;inline-size:max-content;max-inline-size:16rem;padding-block:var(--space-1);padding-inline:var(--space-2);border-radius:var(--radius-md);background:var(--color-text);color:var(--color-surface);font-size:var(--font-size-sm);text-align:start;opacity:0;visibility:hidden;transition:opacity var(--duration-fast) ease, visibility 0s linear var(--duration-fast);pointer-events:none;line-height:1.4;position:absolute;inset-inline-start:50%;translate:-50%}.abaabil-tooltip[data-placement=top] .abaabil-tooltip__bubble{inset-block-end:calc(100% + var(--space-1))}.abaabil-tooltip[data-placement=bottom] .abaabil-tooltip__bubble{inset-block-start:calc(100% + var(--space-1))}.abaabil-tooltip:hover .abaabil-tooltip__bubble,.abaabil-tooltip:focus-within .abaabil-tooltip__bubble{opacity:1;visibility:visible;transition:none}.abaabil-tooltip[data-dismissed=true] .abaabil-tooltip__bubble{opacity:0;visibility:hidden}@media (prefers-reduced-motion:reduce){.abaabil-tooltip__bubble{transition:none}}}
|
|
1
|
+
@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-gray-900:#111827;--abaabil-gray-500:#6b7280;--abaabil-gray-400:#8b929e;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-red-400:#ef4444;--abaabil-green-700:#15803d;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--abaabil-amber-500:#d97706;--color-primary:var(--abaabil-blue-500);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-400);--color-border-subtle:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-track:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-700);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--color-primary);--color-overlay:#00000080;--color-text-muted:var(--abaabil-gray-500);--color-placeholder:var(--abaabil-gray-500);--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;--abaabil-dark-surface:#0b0f19;--abaabil-dark-text:#e5e7eb;--abaabil-dark-border:#5b6675;--abaabil-dark-border-subtle:#374151;--abaabil-dark-muted:#1f2937;--abaabil-dark-track:#111827;--abaabil-dark-text-muted:#9ca3af;--abaabil-dark-placeholder:#9ca3af}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:var(--abaabil-dark-surface);--color-text:var(--abaabil-dark-text);--color-border:var(--abaabil-dark-border);--color-border-subtle:var(--abaabil-dark-border-subtle);--color-muted:var(--abaabil-dark-muted);--color-track:var(--abaabil-dark-track);--color-text-muted:var(--abaabil-dark-text-muted);--color-placeholder:var(--abaabil-dark-placeholder);--color-danger:var(--abaabil-red-400);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-500)}}:root[data-theme=dark]{--color-surface:var(--abaabil-dark-surface);--color-text:var(--abaabil-dark-text);--color-border:var(--abaabil-dark-border);--color-border-subtle:var(--abaabil-dark-border-subtle);--color-muted:var(--abaabil-dark-muted);--color-track:var(--abaabil-dark-track);--color-text-muted:var(--abaabil-dark-text-muted);--color-placeholder:var(--abaabil-dark-placeholder);--color-danger:var(--abaabil-red-400);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-500)}}@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-subtle)}.abaabil-accordion{color:var(--color-text)}.abaabil-accordion__summary{list-style:none}.abaabil-accordion__summary::-webkit-details-marker{display:none}.abaabil-accordion__summary{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--control-height-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.3;display:flex}.abaabil-accordion__summary:hover{background:var(--color-muted)}.abaabil-accordion__summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-accordion__summary:after{content:"";block-size:.5rem;inline-size:.5rem;transition:transform var(--duration-fast) ease;border-bottom:2px solid;border-right:2px solid;flex:none;transform:rotate(45deg)}.abaabil-accordion[open]>.abaabil-accordion__summary:after{transform:rotate(-135deg)}.abaabil-accordion__panel{padding:0 var(--space-4) var(--space-3)}@media (prefers-reduced-motion:reduce){.abaabil-accordion__summary:after{transition:none}}.abaabil-alert{--alert-accent:var(--color-primary);gap:var(--space-1);padding-block:var(--space-2);padding-inline:var(--space-3);border:1px solid color-mix(in srgb, var(--alert-accent) 35%, var(--color-surface));border-inline-start:3px solid var(--alert-accent);border-radius:var(--radius-md);background:color-mix(in srgb, var(--alert-accent) 8%, var(--color-surface));color:var(--color-text);font-size:var(--font-size-sm);flex-direction:column;line-height:1.5;display:flex}.abaabil-alert[data-variant=success]{--alert-accent:var(--color-success)}.abaabil-alert[data-variant=warning]{--alert-accent:var(--color-warning)}.abaabil-alert[data-variant=danger]{--alert-accent:var(--color-danger)}.abaabil-alert__title{font-weight:var(--font-weight-semibold);color:var(--color-text)}.abaabil-alert:empty{display:none}.abaabil-avatar{--avatar-size:2.5rem;inline-size:var(--avatar-size);block-size:var(--avatar-size);background:var(--color-muted);color:var(--color-text);font-size:calc(var(--avatar-size) * .4);font-weight:var(--font-weight-semibold);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:clip}.abaabil-avatar__image{object-fit:cover;object-position:center 30%;block-size:100%;inline-size:100%}.abaabil-avatar__initials{letter-spacing:.02em;text-indent:.02em}.abaabil-badge{--badge-accent:var(--color-text-muted);align-items:center;gap:var(--space-1);padding-block:.1em;padding-inline:var(--space-2);border:1px solid color-mix(in srgb, var(--badge-accent) 35%, var(--color-surface));background:color-mix(in srgb, var(--badge-accent) 12%, var(--color-surface));color:var(--color-text);font-size:max(.75rem,.8em);font-weight:var(--font-weight-semibold);white-space:nowrap;border-radius:999px;line-height:1.4;display:inline-flex}.abaabil-badge[data-variant=info]{--badge-accent:var(--color-primary)}.abaabil-badge[data-variant=success]{--badge-accent:var(--color-success)}.abaabil-badge[data-variant=warning]{--badge-accent:var(--color-warning)}.abaabil-badge[data-variant=danger]{--badge-accent:var(--color-danger)}.abaabil-breadcrumb__list{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-breadcrumb__item{align-items:center;gap:var(--space-2);color:var(--color-text-muted);display:flex}.abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{content:"";opacity:.6;border-block-start:1.5px solid;border-inline-end:1.5px solid;flex:none;block-size:.35rem;inline-size:.35rem;rotate:45deg}.abaabil-breadcrumb__list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .abaabil-breadcrumb__item+.abaabil-breadcrumb__item:before{rotate:-135deg}.abaabil-breadcrumb__link{color:var(--color-text-muted);text-underline-offset:.2em;border-radius:var(--radius-md);text-decoration:underline}.abaabil-breadcrumb__link:hover{color:var(--color-text)}.abaabil-breadcrumb__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-breadcrumb__current{color:var(--color-text);font-weight:var(--font-weight-semibold)}.abaabil-button{--btn-bg:var(--color-primary);--btn-fg:var(--color-primary-fg);--btn-border:var(--color-primary);--btn-height:var(--control-height-md);--btn-padding-x:max(.375rem, calc((var(--btn-height) - var(--font-size-sm)) / 2));--btn-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-2);height:var(--btn-height);padding-inline:var(--btn-padding-x);border:1px solid var(--btn-border);border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;line-height:1;text-decoration:none;display:inline-flex}.abaabil-button:hover{--btn-bg:var(--color-primary-hover);--btn-border:var(--color-primary-hover)}.abaabil-button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-button[data-variant=secondary]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:var(--color-border)}.abaabil-button[data-variant=ghost]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-border:transparent}.abaabil-button[data-size=sm]{--btn-height:2rem}.abaabil-button[data-size=lg]{--btn-height:3rem}.abaabil-button:disabled,.abaabil-button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.abaabil-button{transition:none}}.abaabil-checkbox{--checkbox-radius:min(var(--radius-md), .25rem);appearance:none;border:1px solid var(--color-border);border-radius:var(--checkbox-radius);background:var(--color-surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;flex-shrink:0;place-content:center;margin:0;display:inline-grid}.abaabil-checkbox:before{content:"";background:var(--color-primary-fg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:.65rem;height:.65rem;transition:transform var(--duration-fast) ease;transform:scale(0)}.abaabil-checkbox:checked,.abaabil-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-checkbox:checked:before,.abaabil-checkbox:indeterminate:before{transform:scale(1)}.abaabil-checkbox:indeterminate:before{clip-path:none;border-radius:1px;width:.65rem;height:.125rem}.abaabil-checkbox:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-checkbox:disabled{opacity:.5;cursor:not-allowed}.abaabil-checkbox__wrapper{align-items:flex-start;gap:var(--space-2);display:inline-flex}.abaabil-checkbox__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-checkbox__description{font-size:var(--font-size-sm);color:var(--color-text);opacity:.75;display:block}.abaabil-checkbox-group{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.abaabil-checkbox-group__legend{padding-inline:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}@media (prefers-reduced-motion:reduce){.abaabil-checkbox,.abaabil-checkbox:before{transition:none}}.abaabil-combobox{display:inline-block;position:relative}.abaabil-combobox__label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.abaabil-combobox__label--visible{margin-bottom:var(--space-1);font-size:var(--font-size-sm);color:var(--color-text);display:block}.abaabil-combobox__input{height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--control-height-md) - var(--font-size-sm)) / 2));padding-inline:var(--input-padding-x);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);width:100%}.abaabil-combobox__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-combobox__list{z-index:10;width:100%;max-height:15rem;padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin:0;list-style:none;position:absolute;inset-block-start:calc(100% + var(--space-1));inset-inline-start:0;overflow-y:auto}.abaabil-combobox__option{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-combobox__option:hover{background:var(--color-muted)}.abaabil-combobox__option[data-active=true]{background:var(--color-primary);color:var(--color-primary-fg)}@supports (anchor-name:--x){.abaabil-combobox__input{anchor-name:--abaabil-combobox-input}.abaabil-combobox__list{position-anchor:--abaabil-combobox-input;position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end;width:anchor-size(width);position:fixed;inset:auto}}.abaabil-dialog{--dialog-width:32rem;--dialog-padding:var(--space-4);width:min(var(--dialog-width), calc(100vw - 2rem));padding:var(--dialog-padding);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-dialog::backdrop{background:var(--color-overlay)}.abaabil-dialog__title{margin:0 0 var(--space-3);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}@starting-style{.abaabil-dialog[open]{opacity:0;transform:translateY(.5rem)}}.abaabil-dialog[open]{opacity:1;transition:opacity var(--duration-fast) ease, transform var(--duration-fast) ease;transform:none}@media (prefers-reduced-motion:reduce){.abaabil-dialog[open]{transition:none}@starting-style{.abaabil-dialog[open]{opacity:1;transform:none}}}.abaabil-file{--file-border:var(--color-border);inline-size:100%;padding:var(--space-2);border:1px solid var(--file-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;display:block}.abaabil-file::file-selector-button{padding-block:var(--space-1);padding-inline:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-muted);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--duration-fast) ease;margin-inline-end:var(--space-3)}.abaabil-file::file-selector-button:hover{background:var(--color-border)}.abaabil-file:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-file:disabled{opacity:.5;cursor:not-allowed}.abaabil-file:disabled::file-selector-button{opacity:.5;cursor:not-allowed}.abaabil-file[aria-invalid=true]{--file-border:var(--color-danger)}.abaabil-file-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-file__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-file__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-file__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-file::file-selector-button{transition:none}}.abaabil-input{--input-height:var(--control-height-md);--input-padding-x:max(.375rem, calc((var(--input-height) - var(--font-size-sm)) / 2));--input-border:var(--color-border);--input-placeholder-fg:var(--color-placeholder);width:100%;height:var(--input-height);padding-inline:var(--input-padding-x);border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);transition:border-color var(--duration-fast) ease;display:block}.abaabil-input::placeholder{color:var(--input-placeholder-fg)}.abaabil-input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-input:disabled{opacity:.5;cursor:not-allowed}.abaabil-input[aria-invalid=true]{--input-border:var(--color-danger)}.abaabil-input-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-input__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-input__description{--input-description-fg:var(--color-text-muted);font-size:var(--font-size-sm);color:var(--input-description-fg)}.abaabil-input__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-input{transition:none}}.abaabil-menu{inline-size:max-content;min-inline-size:10rem;max-inline-size:min(18rem,100vw - 2rem);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.abaabil-menu::backdrop{background:0 0}.abaabil-abaabil-menu__trigger{appearance:none;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;background:0 0}.abaabil-abaabil-menu__trigger:hover{background:var(--color-muted)}.abaabil-abaabil-menu__trigger:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-menu__item{appearance:none;inline-size:100%;padding-block:var(--space-2);padding-inline:var(--space-3);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);text-align:start;white-space:nowrap;cursor:pointer;background:0 0;border:0;text-decoration:none;display:block}.abaabil-menu__item:hover{background:var(--color-muted)}.abaabil-menu__item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px;background:var(--color-muted)}.abaabil-menu__item:disabled{opacity:.5;cursor:not-allowed}.abaabil-menu__item:disabled:hover{background:0 0}@supports (anchor-name:--x){.abaabil-menu{position-area:block-end span-inline-end;position-try-fallbacks:block-start span-inline-end, block-end span-inline-start;margin:0;margin-block-start:var(--space-1);position:fixed;inset:auto}}@starting-style{.abaabil-menu:popover-open{opacity:0}}.abaabil-menu:popover-open{opacity:1;transition:opacity var(--duration-fast) ease}@media (prefers-reduced-motion:reduce){.abaabil-menu:popover-open{transition:none}@starting-style{.abaabil-menu:popover-open{opacity:1}}}.abaabil-pagination__list{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.abaabil-pagination__link,.abaabil-pagination__current,.abaabil-pagination__step{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);padding-inline:var(--space-2);border-radius:var(--radius-md);color:var(--color-text);font-variant-numeric:tabular-nums;border:1px solid #0000;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.abaabil-pagination__link:hover{background:var(--color-muted)}.abaabil-pagination__link:focus-visible,.abaabil-pagination__step:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-pagination__current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg);font-weight:var(--font-weight-semibold)}.abaabil-pagination__gap:before{content:"…"}.abaabil-pagination__gap{min-inline-size:var(--control-height-md);block-size:var(--control-height-md);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.abaabil-pagination__step{border-color:var(--color-border)}.abaabil-pagination__step:hover{background:var(--color-muted)}.abaabil-pagination__step--unavailable{color:var(--color-text-muted);border-color:#0000}.abaabil-popover{inline-size:max-content;max-inline-size:min(22rem,100vw - 2rem);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm)}.abaabil-popover:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-popover::backdrop{background:0 0}.abaabil-abaabil-popover__trigger{appearance:none;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);cursor:pointer;background:0 0}.abaabil-abaabil-popover__trigger:hover{background:var(--color-muted)}.abaabil-abaabil-popover__trigger:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@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;box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-track);block-size:.5rem;inline-size:100%;color:var(--color-primary);border-radius:999px;display:block;overflow:hidden}.abaabil-progress::-webkit-progress-bar{background:var(--color-track);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-track);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{box-sizing:border-box;block-size:var(--slider-track);border:1px solid var(--color-border);background:var(--color-track);border-radius:999px}.abaabil-slider::-moz-range-track{box-sizing:border-box;block-size:var(--slider-track);border:1px solid var(--color-border);background:var(--color-track);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-border);cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border-radius:999px;flex-shrink:0;margin:0;position:relative}.abaabil-switch:before{content:"";inline-size:var(--switch-thumb);block-size:var(--switch-thumb);background:var(--color-surface);transition:inset-inline-start var(--duration-fast) ease;border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:var(--switch-gap);translate:0 -50%}.abaabil-switch:checked{background:var(--color-primary);border-color:var(--color-primary)}.abaabil-switch:checked:before{inset-inline-start:calc(100% - var(--switch-thumb) - var(--switch-gap))}.abaabil-switch:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-switch:disabled{opacity:.5;cursor:not-allowed}.abaabil-switch__wrapper{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:inline-flex}.abaabil-switch__label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.abaabil-switch__description{font-size:var(--font-size-sm);color:var(--color-text-muted);flex-basis:100%;display:block}@media (prefers-reduced-motion:reduce){.abaabil-switch,.abaabil-switch:before{transition:none}}.abaabil-tabs{gap:var(--space-3);flex-direction:column;display:flex}.abaabil-tabs__list{gap:var(--space-1);border-block-end:1px solid var(--color-border);display:flex}.abaabil-tabs__tab{appearance:none;padding-block:var(--space-2);padding-inline:var(--space-3);border:0;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) ease, border-color var(--duration-fast) ease;background:0 0;border-block-end:2px solid #0000;margin-block-end:-1px;line-height:1.3}.abaabil-tabs__tab:hover{color:var(--color-text)}.abaabil-tabs__tab[data-selected=true]{color:var(--color-text);border-block-end-color:var(--color-primary)}.abaabil-tabs__tab:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.abaabil-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.abaabil-tabs__list[data-orientation=vertical]{border-block-end:0;border-inline-end:1px solid var(--color-border);flex-direction:column}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab{text-align:start;border-block-end:0;border-inline-end:2px solid #0000;margin-block-end:0;margin-inline-end:-1px}.abaabil-tabs__list[data-orientation=vertical] .abaabil-tabs__tab[data-selected=true]{border-inline-end-color:var(--color-primary)}.abaabil-tabs__panel:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.abaabil-tabs__tab{transition:none}}.abaabil-textarea{--textarea-padding-block:var(--space-2);--textarea-padding-x:var(--space-3);--textarea-border:var(--color-border);--textarea-placeholder-fg:var(--color-placeholder);width:100%;padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-x);border:1px solid var(--textarea-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);resize:block;transition:border-color var(--duration-fast) ease;line-height:1.5;display:block}.abaabil-textarea::placeholder{color:var(--textarea-placeholder-fg)}.abaabil-textarea:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.abaabil-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none}.abaabil-textarea[aria-invalid=true]{--textarea-border:var(--color-danger)}.abaabil-textarea-group{gap:var(--space-1);flex-direction:column;display:flex}.abaabil-textarea__label{font-size:var(--font-size-sm);color:var(--color-text)}.abaabil-textarea__description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.abaabil-textarea__error{font-size:var(--font-size-sm);color:var(--color-danger)}@media (prefers-reduced-motion:reduce){.abaabil-textarea{transition:none}}.abaabil-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex}.abaabil-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;inline-size:max-content}.abaabil-toolbar hr{block-size:auto;inline-size:1px;margin-block:var(--space-1);margin-inline:var(--space-1);background:var(--color-border-subtle);border:0;align-self:stretch}.abaabil-toolbar[data-orientation=vertical] hr{block-size:1px;inline-size:auto;margin-block:var(--space-1);margin-inline:var(--space-1)}.abaabil-tooltip{display:inline-flex;position:relative}.abaabil-tooltip__bubble{z-index:20;inline-size:max-content;max-inline-size:16rem;padding-block:var(--space-1);padding-inline:var(--space-2);border-radius:var(--radius-md);background:var(--color-text);color:var(--color-surface);font-size:var(--font-size-sm);text-align:start;opacity:0;visibility:hidden;transition:opacity var(--duration-fast) ease, visibility 0s linear var(--duration-fast);pointer-events:none;line-height:1.4;position:absolute;inset-inline-start:50%;translate:-50%}.abaabil-tooltip[data-placement=top] .abaabil-tooltip__bubble{inset-block-end:calc(100% + var(--space-1))}.abaabil-tooltip[data-placement=bottom] .abaabil-tooltip__bubble{inset-block-start:calc(100% + var(--space-1))}.abaabil-tooltip:hover .abaabil-tooltip__bubble,.abaabil-tooltip:focus-within .abaabil-tooltip__bubble{opacity:1;visibility:visible;transition:none}.abaabil-tooltip[data-dismissed=true] .abaabil-tooltip__bubble{opacity:0;visibility:hidden}@media (prefers-reduced-motion:reduce){.abaabil-tooltip__bubble{transition:none}}}
|
package/dist/switch/switch.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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-border);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/theme.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-gray-900:#111827;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--color-primary:var(--abaabil-blue-500);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-
|
|
1
|
+
@layer abaabil.reset;@layer abaabil.tokens{:root{--abaabil-blue-500:#2563eb;--abaabil-gray-900:#111827;--abaabil-gray-500:#6b7280;--abaabil-gray-400:#8b929e;--abaabil-gray-300:#d1d5db;--abaabil-gray-100:#f3f4f6;--abaabil-white:#fff;--abaabil-red-600:#dc2626;--abaabil-red-400:#ef4444;--abaabil-green-700:#15803d;--abaabil-green-600:#16a34a;--abaabil-amber-600:#b45309;--abaabil-amber-500:#d97706;--color-primary:var(--abaabil-blue-500);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-fg:var(--abaabil-white);--color-surface:var(--abaabil-white);--color-text:var(--abaabil-gray-900);--color-border:var(--abaabil-gray-400);--color-border-subtle:var(--abaabil-gray-300);--color-muted:var(--abaabil-gray-100);--color-track:var(--abaabil-gray-100);--color-danger:var(--abaabil-red-600);--color-success:var(--abaabil-green-700);--color-warning:var(--abaabil-amber-600);--color-focus-ring:var(--color-primary);--color-overlay:#00000080;--color-text-muted:var(--abaabil-gray-500);--color-placeholder:var(--abaabil-gray-500);--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;--abaabil-dark-surface:#0b0f19;--abaabil-dark-text:#e5e7eb;--abaabil-dark-border:#5b6675;--abaabil-dark-border-subtle:#374151;--abaabil-dark-muted:#1f2937;--abaabil-dark-track:#111827;--abaabil-dark-text-muted:#9ca3af;--abaabil-dark-placeholder:#9ca3af}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-surface:var(--abaabil-dark-surface);--color-text:var(--abaabil-dark-text);--color-border:var(--abaabil-dark-border);--color-border-subtle:var(--abaabil-dark-border-subtle);--color-muted:var(--abaabil-dark-muted);--color-track:var(--abaabil-dark-track);--color-text-muted:var(--abaabil-dark-text-muted);--color-placeholder:var(--abaabil-dark-placeholder);--color-danger:var(--abaabil-red-400);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-500)}}:root[data-theme=dark]{--color-surface:var(--abaabil-dark-surface);--color-text:var(--abaabil-dark-text);--color-border:var(--abaabil-dark-border);--color-border-subtle:var(--abaabil-dark-border-subtle);--color-muted:var(--abaabil-dark-muted);--color-track:var(--abaabil-dark-track);--color-text-muted:var(--abaabil-dark-text-muted);--color-placeholder:var(--abaabil-dark-placeholder);--color-danger:var(--abaabil-red-400);--color-success:var(--abaabil-green-600);--color-warning:var(--abaabil-amber-500)}}@layer abaabil.base{.abaabil-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer abaabil.components;
|
package/dist/toolbar/toolbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer abaabil.components{.abaabil-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex}.abaabil-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;inline-size:max-content}.abaabil-toolbar hr{block-size:auto;inline-size:1px;margin-block:var(--space-1);margin-inline:var(--space-1);background:var(--color-border);border:0;align-self:stretch}.abaabil-toolbar[data-orientation=vertical] hr{block-size:1px;inline-size:auto;margin-block:var(--space-1);margin-inline:var(--space-1)}}
|
|
1
|
+
@layer abaabil.components{.abaabil-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex}.abaabil-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;inline-size:max-content}.abaabil-toolbar hr{block-size:auto;inline-size:1px;margin-block:var(--space-1);margin-inline:var(--space-1);background:var(--color-border-subtle);border:0;align-self:stretch}.abaabil-toolbar[data-orientation=vertical] hr{block-size:1px;inline-size:auto;margin-block:var(--space-1);margin-inline:var(--space-1)}}
|
package/llms.txt
CHANGED
|
@@ -125,6 +125,16 @@ and `--color-warning` are deliberately independent of the brand colour. Dark mod
|
|
|
125
125
|
under `prefers-color-scheme` and `[data-theme="dark"]`, both of which the
|
|
126
126
|
shipped theme already handles.
|
|
127
127
|
|
|
128
|
+
Four neutral tokens look interchangeable and are not. `--color-border` is
|
|
129
|
+
the edge of a control (input, select, track, a switch's off state) and
|
|
130
|
+
holds 3:1 against the surface. `--color-border-subtle` is for decorative
|
|
131
|
+
rules only and carries no floor. `--color-muted` is a hover wash.
|
|
132
|
+
`--color-track` is the empty part of a progress bar or slider groove and
|
|
133
|
+
holds 3:1 against `--color-primary`. The last two share a value in light
|
|
134
|
+
mode and diverge in dark, which is why they are separate tokens. If you
|
|
135
|
+
re-theme, re-check `--color-border` on `--color-surface`, and
|
|
136
|
+
`--color-primary` on both `--color-surface` and `--color-track`.
|
|
137
|
+
|
|
128
138
|
Component CSS lives in the `abaabil.components` cascade layer, so ordinary
|
|
129
139
|
unlayered CSS in your own app beats it without `!important`.
|
|
130
140
|
|