wabi 0.17.0 → 0.19.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 +55 -7
- data/README.md +4 -4
- data/lib/wabi/version.rb +1 -1
- data/templates/tokens.css +26 -0
- 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: 671da1d85c9efb693bc652c3bff9acc885389113e843ce260cede410c5895167
|
|
4
|
+
data.tar.gz: 314453f9109a42053393780a79c4878f3cdd0c8f2a3a0a6935724f9d7b492d02
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4ef59549aa56fc4aa2ba29231722de58b2d6ef1876eafcbcc23f9fda9eadb982b8ee48dfde6750bbf761e81627f08a59216bdc682c32b8557cb683cc0a5db844
|
|
7
|
+
data.tar.gz: 74a5b5c2039703bcd61bd13dbac360688b9013932bba19ecf96b51627316eb6b863541c95e537d128c8e82dacd01e7a19e352521dc0c1ba27fab158fc53f2922
|
data/CHANGELOG.md
CHANGED
|
@@ -2,10 +2,59 @@
|
|
|
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.19.0 - 2026-06-03
|
|
6
|
+
|
|
7
|
+
Sidebar v2 — a richer, themeable Sidebar. No breaking changes (existing v1
|
|
8
|
+
sidebars keep working and pick up the new surface tokens).
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **Dedicated `--sidebar*` color tokens** (full shadcn-style palette: `--sidebar`,
|
|
13
|
+
`--sidebar-foreground`, `--sidebar-primary(-foreground)`, `--sidebar-accent(-foreground)`,
|
|
14
|
+
`--sidebar-border`, `--sidebar-ring`) across all 8 themes (light + dark). The
|
|
15
|
+
sidebar now reads as its own surface; the tokens are exposed as `bg-sidebar`,
|
|
16
|
+
`text-sidebar-foreground`, `bg-sidebar-accent`, `border-sidebar-border`,
|
|
17
|
+
`ring-sidebar-ring`, etc., and are independently re-themeable.
|
|
18
|
+
- **⌘/Ctrl+B** toggles the sidebar (collapse on desktop, open/close on mobile).
|
|
19
|
+
- **Nested submenus** — `SidebarMenuCollapsible` (native `<details>`, no JS) with
|
|
20
|
+
`SidebarMenuSub`/`SidebarMenuSubItem`/`SidebarMenuSubButton`. Expand inline when
|
|
21
|
+
the rail is expanded; hidden in collapsed (icon) mode. The chevron rotates on open.
|
|
22
|
+
- **`SidebarMenuBadge`** — a trailing count badge (hidden in icon mode).
|
|
23
|
+
- **`SidebarMenuAction`** — a secondary per-item button revealed on hover/focus
|
|
24
|
+
(hidden in icon mode).
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- `Sidebar`, `SidebarMenuButton`, and `SidebarTrigger` recolored to the new
|
|
29
|
+
`--sidebar*` surface tokens (active/hover use `--sidebar-accent`); `SidebarMenuItem`
|
|
30
|
+
is now a `group/menu-item` hover context for badges/actions.
|
|
31
|
+
|
|
32
|
+
## 0.18.0 - 2026-06-03
|
|
33
|
+
|
|
34
|
+
Adds the **Sidebar** component (#36).
|
|
35
|
+
|
|
36
|
+
### Added
|
|
37
|
+
|
|
38
|
+
- **Sidebar.** A composable, collapsible application sidebar: collapses to an
|
|
39
|
+
icon rail on desktop (toggle persisted in `localStorage`) and becomes an
|
|
40
|
+
off-canvas panel on mobile (focus moves into it, the rest of the page goes
|
|
41
|
+
`inert`, Escape / backdrop click closes). Anatomy: `SidebarProvider`, `Sidebar`
|
|
42
|
+
(`side: :left | :right`), `SidebarTrigger`, `SidebarHeader`/`SidebarContent`/
|
|
43
|
+
`SidebarFooter`, `SidebarGroup`/`SidebarGroupLabel`, `SidebarMenu`/
|
|
44
|
+
`SidebarMenuItem`/`SidebarMenuButton`. Menu buttons render as real `<a>`/`<button>`
|
|
45
|
+
(active item gets `aria-current="page"`) and show a tooltip with their label when
|
|
46
|
+
the rail is collapsed (reuses the Tooltip component). State is set once on the
|
|
47
|
+
provider and propagated via a `group/sidebar` data-attribute marker; the
|
|
48
|
+
`wabi--sidebar` Stimulus controller is custom (no Zag). Install with
|
|
49
|
+
`bin/rails g wabi:add sidebar` (pulls `tooltip`).
|
|
50
|
+
|
|
51
|
+
Caveat: variant/state is propagated through a Tailwind named group
|
|
52
|
+
(`group/sidebar`), which matches any ancestor of that name — avoid nesting a
|
|
53
|
+
`Sidebar` inside another `Sidebar`.
|
|
54
|
+
|
|
5
55
|
## 0.17.0 - 2026-06-03
|
|
6
56
|
|
|
7
|
-
A minimalist `:underline` style variant for Tabs
|
|
8
|
-
now dogfoods it.
|
|
57
|
+
A minimalist `:underline` style variant for Tabs.
|
|
9
58
|
|
|
10
59
|
### Added
|
|
11
60
|
|
|
@@ -17,11 +66,10 @@ now dogfoods it.
|
|
|
17
66
|
propagated to `TabsList`/`TabsTrigger` via the `group-data-[variant=underline]`
|
|
18
67
|
marker.
|
|
19
68
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
of
|
|
24
|
-
removing the duplicated styling. No visual change.
|
|
69
|
+
Note: the variant is set on the `Tabs` root and applied to its pieces via a
|
|
70
|
+
Tailwind named group (`group/tabs`), which matches any ancestor of that name —
|
|
71
|
+
so a `Tabs` nested inside another `Tabs` inherits the outer variant. Avoid
|
|
72
|
+
nesting tabs of different variants (or give the inner one its own wrapper).
|
|
25
73
|
|
|
26
74
|
## 0.16.0 - 2026-06-03
|
|
27
75
|
|
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.19.0 alpha — [available on RubyGems](https://rubygems.org/gems/wabi). 36 components, 8 theme palettes, WCAG-AA targeted, live docs + registry at [wabi-docs.onrender.com](https://wabi-docs.onrender.com).
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -31,12 +31,12 @@ Then add `@import "./wabi/tokens.css";` AFTER `@import "tailwindcss";` in your `
|
|
|
31
31
|
|
|
32
32
|
## What's in the box
|
|
33
33
|
|
|
34
|
-
###
|
|
34
|
+
### 36 components
|
|
35
35
|
|
|
36
36
|
| Group | Components |
|
|
37
37
|
|---|---|
|
|
38
38
|
| **Forms** (14) | Button, Input, NumberInput, Textarea, Label, Checkbox, Switch, Select, RadioGroup, Slider, Toggle, ToggleGroup, Combobox, Form |
|
|
39
|
-
| **Layout & Display** (
|
|
39
|
+
| **Layout & Display** (9) | Card, Badge, Separator, Alert, Avatar, Table, DataTable, Skeleton, Sidebar |
|
|
40
40
|
| **Overlays** (6) | Dialog, AlertDialog, Drawer (4 sides), Tooltip, Popover, Command |
|
|
41
41
|
| **Menus** (1) | DropdownMenu (nested submenus, checkbox + radio items) |
|
|
42
42
|
| **Navigation** (4) | Accordion, Tabs, Breadcrumb, Pagination |
|
|
@@ -135,7 +135,7 @@ bin/dev # starts registry watcher + tailwind watcher + docs server on :3000
|
|
|
135
135
|
|
|
136
136
|
Then visit:
|
|
137
137
|
- `/` — marketing landing
|
|
138
|
-
- `/docs/components` — index of all
|
|
138
|
+
- `/docs/components` — index of all 36 components
|
|
139
139
|
- `/docs/components/{button,dropdown_menu,dialog,tabs}` — detailed pages with live preview + source
|
|
140
140
|
- `/docs/themes` — all 8 palettes side-by-side
|
|
141
141
|
- `/docs/getting-started`, `/docs/theming`, `/docs/philosophy` — prose docs
|
data/lib/wabi/version.rb
CHANGED
data/templates/tokens.css
CHANGED
|
@@ -33,6 +33,24 @@
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
/* Sidebar surface tokens (full shadcn-style palette). Seven mirror the active
|
|
37
|
+
* theme's base tokens via var() so they stay correct per-theme and per-mode;
|
|
38
|
+
* --sidebar is a tuned neutral chrome surface, distinct from both the page
|
|
39
|
+
* background and the accent (so the active/hover --sidebar-accent stays visible). */
|
|
40
|
+
:root, [data-theme] {
|
|
41
|
+
--sidebar: 0 0% 98%;
|
|
42
|
+
--sidebar-foreground: var(--foreground);
|
|
43
|
+
--sidebar-primary: var(--primary);
|
|
44
|
+
--sidebar-primary-foreground: var(--primary-foreground);
|
|
45
|
+
--sidebar-accent: var(--accent);
|
|
46
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
47
|
+
--sidebar-border: var(--border);
|
|
48
|
+
--sidebar-ring: var(--ring);
|
|
49
|
+
}
|
|
50
|
+
[data-mode="dark"] {
|
|
51
|
+
--sidebar: 240 5.9% 10%;
|
|
52
|
+
}
|
|
53
|
+
|
|
36
54
|
@theme inline {
|
|
37
55
|
--color-background: hsl(var(--background));
|
|
38
56
|
--color-foreground: hsl(var(--foreground));
|
|
@@ -53,6 +71,14 @@
|
|
|
53
71
|
--color-border: hsl(var(--border));
|
|
54
72
|
--color-input: hsl(var(--input));
|
|
55
73
|
--color-ring: hsl(var(--ring));
|
|
74
|
+
--color-sidebar: hsl(var(--sidebar));
|
|
75
|
+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
|
76
|
+
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
|
77
|
+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
|
78
|
+
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
|
79
|
+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
|
80
|
+
--color-sidebar-border: hsl(var(--sidebar-border));
|
|
81
|
+
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
|
56
82
|
--radius-lg: var(--radius);
|
|
57
83
|
--radius-md: calc(var(--radius) - 2px);
|
|
58
84
|
--radius-sm: calc(var(--radius) - 4px);
|