wabi 0.24.0 → 0.25.0
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +79 -0
- data/README.md +6 -5
- data/lib/wabi/version.rb +1 -1
- data/templates/tokens.css +9 -2
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8a384f4302bd3a32241bef8c7a5a5629716bf49962db16c602fce4ce915c35e3
|
|
4
|
+
data.tar.gz: 6363df2bdf330cdbf8b181a45a42b4cd1ce41b08be7a59948c0b638a9c2abfe7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 84718c3185eb5d9ed47798abf8ba892c11f0062429f85491729a39c362c14f6b762b169e2451ae01e90a36f0c3a425765b8b0fd3224783c11e6fa89d90353e52
|
|
7
|
+
data.tar.gz: 98eb1aff33f581c80bca3ddef63773c023e03a63cd9c456c791e9089a5297ea8ca4047785ae6e7d16f08d087f8894f79e89e19b3fbb7c98d7d93dff4f6421005
|
data/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,85 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to Wabi land here. Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
4
4
|
|
|
5
|
+
## 0.25.0 - 2026-06-08
|
|
6
|
+
|
|
7
|
+
Component count 47 → **49**. Two new components, a project-wide WCAG-AA accessibility audit, and the first `CONTRIBUTING.md`.
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
- **Color Picker** (`color_picker`) — popover picker with a 2D saturation/value
|
|
11
|
+
area, hue + alpha channel sliders, a hex input, and preset swatches. Backed by
|
|
12
|
+
`@zag-js/color-picker`; portals to `<body>`; submit with `name:` for a hidden form field.
|
|
13
|
+
- **Tree View** (`tree_view`) — data-driven, accessible tree (pass a nested `items:`
|
|
14
|
+
array): expand/collapse, single/multiple selection, keyboard nav + typeahead,
|
|
15
|
+
optional per-node checkboxes, folder/file icons. Backed by `@zag-js/tree-view`.
|
|
16
|
+
- **`CONTRIBUTING.md`** — monorepo layout, per-component anatomy (Wabi::Base +
|
|
17
|
+
variants DSL + merge_class), the Zag.js wiring pattern, the docs↔registry
|
|
18
|
+
byte-identical rule, testing (RSpec + Vitest + headless-Chrome), and how to add a
|
|
19
|
+
component end to end.
|
|
20
|
+
|
|
21
|
+
### Accessibility (WCAG-AA audit)
|
|
22
|
+
A full audit of all 49 components fixed 100+ findings across roles/semantics,
|
|
23
|
+
keyboard, focus, accessible names, states, live regions, motion, and contrast:
|
|
24
|
+
- **Motion:** `motion-reduce:` guards on every transition/animation (and
|
|
25
|
+
`prefers-reduced-motion` guards in the toast/date-picker controllers).
|
|
26
|
+
- **Decorative icons:** `aria-hidden` on decorative SVGs/indicators.
|
|
27
|
+
- **Names:** accessible names for icon-only triggers and form controls (optional
|
|
28
|
+
`aria_label:`/`label:` params — no breaking changes); `aria-label` passthrough.
|
|
29
|
+
- **Roles/states:** `alert_dialog` now `role="alertdialog"`; `aria-expanded`/
|
|
30
|
+
`aria-selected`/`aria-sort`/`aria-disabled`/`aria-invalid` wired where missing;
|
|
31
|
+
breadcrumb current-page and hover-card trigger semantics corrected; separator
|
|
32
|
+
emits a native `<hr>` when non-decorative.
|
|
33
|
+
- **Focus:** visible `focus-visible` rings on previously-unindicated controls;
|
|
34
|
+
`switch`/`checkbox` rings moved to the element that actually receives focus.
|
|
35
|
+
- **Live regions:** carousel slide announcer, toaster `<ol>` live region, form/
|
|
36
|
+
command/file-upload/tags-input status & error regions.
|
|
37
|
+
- **Contrast:** `muted-foreground`, `destructive`, and weak focus rings darkened to
|
|
38
|
+
meet AA across all 8 themes (light + dark); subtle borders documented as
|
|
39
|
+
decorative-exempt (WCAG 1.4.11).
|
|
40
|
+
|
|
41
|
+
### Fixed
|
|
42
|
+
- **Color Picker:** the saturation/value spectrum now renders (the area background
|
|
43
|
+
no longer collapses to height 0 under Zag's inline `position`); the value text
|
|
44
|
+
shows the current color.
|
|
45
|
+
- **Tree View:** leaf rows now indent by depth (indentation moved off the
|
|
46
|
+
Zag-managed row, whose `style` Zag overwrites, onto an inner wrapper).
|
|
47
|
+
|
|
48
|
+
## 0.24.3 - 2026-06-07
|
|
49
|
+
|
|
50
|
+
### Fixed
|
|
51
|
+
- **Splitter:** dragging the gutter now resizes the panels. Zag initializes panel
|
|
52
|
+
sizes (`syncSize`) at start, but bails when the root has no layout yet — inside an
|
|
53
|
+
inactive tab panel, below the fold, or a closed overlay — leaving the sizes empty
|
|
54
|
+
so a drag had no base to resize from (the gutter showed a resize cursor but
|
|
55
|
+
nothing moved). The controller now re-syncs sizes via `IntersectionObserver` once
|
|
56
|
+
the splitter is visible. Same class of fix as Carousel in 0.24.2.
|
|
57
|
+
|
|
58
|
+
Component count unchanged (47).
|
|
59
|
+
|
|
60
|
+
## 0.24.2 - 2026-06-07
|
|
61
|
+
|
|
62
|
+
### Fixed
|
|
63
|
+
- **Collapsible:** the content now actually expands/collapses. Zag nulls the
|
|
64
|
+
content's `data-state` once open + settled (its canonical animation keys off a
|
|
65
|
+
`--height` variable), which left our `grid-rows` height transition stuck closed;
|
|
66
|
+
the controller now re-asserts `data-state` from the open state so the animation
|
|
67
|
+
runs.
|
|
68
|
+
- **Carousel:** prev/next now scroll the slides. Zag computes scroll-snap points
|
|
69
|
+
right after start, but when the carousel isn't laid out yet (inside an inactive
|
|
70
|
+
tab panel, below the fold, or a closed overlay) the points collapsed to ~0 and
|
|
71
|
+
navigation moved only the indicators. The controller now refreshes the snap
|
|
72
|
+
points via `IntersectionObserver` once the carousel becomes visible.
|
|
73
|
+
|
|
74
|
+
Component count unchanged (47).
|
|
75
|
+
|
|
76
|
+
## 0.24.1 - 2026-06-07
|
|
77
|
+
|
|
78
|
+
### Fixed
|
|
79
|
+
- **Navigation Menu:** dropdown panels now portal to `<body>` and are positioned
|
|
80
|
+
`fixed` under their trigger, so they are no longer clipped by `overflow-hidden`
|
|
81
|
+
or stacking-context ancestors (e.g. inside cards/previews). Hover-to-panel and
|
|
82
|
+
click-outside dismiss are unchanged. Component count unchanged (47).
|
|
83
|
+
|
|
5
84
|
## 0.24.0 - 2026-06-06
|
|
6
85
|
|
|
7
86
|
Four new components (43 → 47), all backed by Zag.js 1.41 via `@zag-js/vanilla`.
|
data/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
Wabi is an open-source UI component library for **Ruby on Rails 8**, built on **Phlex + Tailwind 4 + Stimulus + Hotwire**. Inspired by shadcn/ui, components are *copied* into your app — you own the code, customize freely, no upstream API to drift away from.
|
|
6
6
|
|
|
7
|
-
🎉 **Status:** v0.
|
|
7
|
+
🎉 **Status:** v0.25.0 alpha — [available on RubyGems](https://rubygems.org/gems/wabi). 49 components, 8 theme palettes, WCAG-AA audited, live docs + registry at [wabi-docs.onrender.com](https://wabi-docs.onrender.com).
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -31,15 +31,15 @@ Then add `@import "./wabi/tokens.css";` AFTER `@import "tailwindcss";` in your `
|
|
|
31
31
|
|
|
32
32
|
## What's in the box
|
|
33
33
|
|
|
34
|
-
###
|
|
34
|
+
### 49 components
|
|
35
35
|
|
|
36
36
|
| Group | Components |
|
|
37
37
|
|---|---|
|
|
38
|
-
| **Forms** (
|
|
38
|
+
| **Forms** (20) | Button, Input, NumberInput, Textarea, Label, Checkbox, Switch, Select, RadioGroup, Slider, Toggle, ToggleGroup, Combobox, Form, DatePicker, InputOTP, FileUpload, RatingGroup, TagsInput, ColorPicker |
|
|
39
39
|
| **Layout & Display** (11) | Card, Badge, Separator, Alert, Avatar, Table, DataTable, Skeleton, Sidebar, Carousel, Splitter |
|
|
40
40
|
| **Overlays** (7) | Dialog, AlertDialog, Drawer (4 sides), Tooltip, Popover, Command, HoverCard |
|
|
41
41
|
| **Menus** (2) | DropdownMenu (nested submenus, checkbox + radio items), ContextMenu |
|
|
42
|
-
| **Navigation** (
|
|
42
|
+
| **Navigation** (7) | Accordion, Tabs, Breadcrumb, Pagination, Collapsible, NavigationMenu, TreeView |
|
|
43
43
|
| **Feedback** (2) | Toast + Toaster, Progress |
|
|
44
44
|
|
|
45
45
|
Compound components (Card, Alert, Avatar, Dialog, Drawer, Table, Form, Combobox, …) ship as composable sub-component sets. All interactive components wire through **Zag.js 1.x** state machines for WAI-ARIA roles, keyboard semantics, and focus management. Toast is the one exception: it uses a custom Stimulus coordinator for Sonner-style stacking, group pause-on-hover, and swipe-to-dismiss — `@zag-js/toast`'s imperative DOM-creation model conflicts with Wabi's SSR + Turbo Stream append.
|
|
@@ -183,6 +183,7 @@ Requires Node 20+ in PATH (Pagefind is fetched via `npx` on demand).
|
|
|
183
183
|
| v0.11 | Table component (shadcn parity); ClassMerge text-align fix | ✅ shipped 2026-06-01 |
|
|
184
184
|
| v0.12 | Skeleton, Breadcrumb, Pagination, Progress, AlertDialog | ✅ shipped 2026-06-01 |
|
|
185
185
|
| v0.13 | DataTable (server-driven: sortable headers + row selection) | ✅ shipped 2026-06-01 |
|
|
186
|
+
| v0.14–0.25 | JS test suite + coverage floors; +29 components (Sidebar, Carousel, Splitter, NavigationMenu, RatingGroup, HoverCard, TagsInput, Collapsible, ColorPicker, TreeView, …); full WCAG-AA audit | ✅ shipped 2026-06-08 |
|
|
186
187
|
| v1.0 | API stability; external a11y audit | 2027-04 target |
|
|
187
188
|
|
|
188
189
|
See [ROADMAP.md](./ROADMAP.md) for the long-term view and [CHANGELOG.md](./CHANGELOG.md) for the per-release detail.
|
|
@@ -191,7 +192,7 @@ See [ROADMAP.md](./ROADMAP.md) for the long-term view and [CHANGELOG.md](./CHANG
|
|
|
191
192
|
|
|
192
193
|
## Contributing
|
|
193
194
|
|
|
194
|
-
Wabi is in alpha and the API is still moving. Filing issues with concrete repros, suggestions for components, or theme palette ideas is the most useful kind of contribution right now.
|
|
195
|
+
Wabi is in alpha and the API is still moving. Filing issues with concrete repros, suggestions for components, or theme palette ideas is the most useful kind of contribution right now. See **[CONTRIBUTING.md](https://github.com/wabikit/wabi/blob/main/CONTRIBUTING.md)** for the monorepo layout, the per-component anatomy, the Zag.js wiring conventions, and how to add a component end to end.
|
|
195
196
|
|
|
196
197
|
---
|
|
197
198
|
|
data/lib/wabi/version.rb
CHANGED
data/templates/tokens.css
CHANGED
|
@@ -83,6 +83,13 @@
|
|
|
83
83
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
84
84
|
--color-destructive: hsl(var(--destructive));
|
|
85
85
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
86
|
+
/* --border / --input render intentionally subtle (~1.2–1.4:1 vs background).
|
|
87
|
+
* Per WCAG 1.4.11, decorative borders that are not the SOLE means of
|
|
88
|
+
* identifying a component or its state are exempt from the 3:1 UI-contrast
|
|
89
|
+
* requirement — Wabi components convey structure/state via fill, text, and
|
|
90
|
+
* focus rings, not the border alone. --ring (the focus indicator) IS held to
|
|
91
|
+
* >=3:1 against background in every theme; --muted-foreground and
|
|
92
|
+
* --destructive meet AA 4.5:1 for text. See the a11y audit notes. */
|
|
86
93
|
--color-border: hsl(var(--border));
|
|
87
94
|
--color-input: hsl(var(--input));
|
|
88
95
|
--color-ring: hsl(var(--ring));
|
|
@@ -114,10 +121,10 @@
|
|
|
114
121
|
--secondary: 240 4.8% 95.9%;
|
|
115
122
|
--secondary-foreground: 240 5.9% 10%;
|
|
116
123
|
--muted: 240 4.8% 95.9%;
|
|
117
|
-
--muted-foreground: 240 3.8%
|
|
124
|
+
--muted-foreground: 240 3.8% 45.1%;
|
|
118
125
|
--accent: 240 4.8% 95.9%;
|
|
119
126
|
--accent-foreground: 240 5.9% 10%;
|
|
120
|
-
--destructive: 0 84.2%
|
|
127
|
+
--destructive: 0 84.2% 48.6%;
|
|
121
128
|
--destructive-foreground: 0 0% 98%;
|
|
122
129
|
--border: 240 5.9% 90%;
|
|
123
130
|
--input: 240 5.9% 90%;
|