wabi 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: abcbfe9f2785a854e687d5f992d6ceb32c4e4fb67ba0d081416ff4bd9b383988
-  data.tar.gz: 6706563e1af726d59eafc0dbee7020a1fe565ed51cde9846020dcd74239b97e3
+  metadata.gz: 5c5512565440dd12e42434dceb8522dbd9b0757e41b63981617e8a645f69bb37
+  data.tar.gz: 2f0c77f0a635bcd6bb2673fb403db9d9247bc916a4adf77ef9398a6816e3fbff
 SHA512:
-  metadata.gz: a367a2820c7e1276ce580cae7f577fca70d0f2f2c2f211a222f97dffc8920b1d4bbdfd3745c3ac76a921e654b74cf958b465d7fcd3501bbedfbe8aa474b8a387
-  data.tar.gz: c1de47b6186629b44e908fb3a364a564605a5b34c3551307057909fec013ae4e71b2c0a12f42e69d714f88a94a1f1ef38be755e4c1206a577edf668e469317e4
+  metadata.gz: 2a4eaf8d667a84e467238e9ba0b4f9cd14d9a5b685698ea82ed3c7ed443bac56b5ddc3c35bf68299947ec38ba7ed49b7d2a6fc0799a5311fc98e3aa9a443b5fe
+  data.tar.gz: 1f03f62dbcf1907505f19dd570d2ca7e06b15cbb9ad3cacb579885deba29b947057da789296981cf6ccafbca2c502989d400bb8e2011e84e0550d20dd49b3419

data/CHANGELOG.md

@@ -2,6 +2,69 @@
 
 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).
 
+## [0.4.0] — 2026-05-27
+
+Sprint 8 — docs completeness + theme polish. The docs site gains the
+three-column shell (grouped sidebar, content, right-side TOC) on every
+`/docs/*` route, a Pagefind-powered search, and detail pages for the
+remaining 16 components — every component in the registry now has its
+own page. Theming gains a tinted secondary/accent per color palette,
+a quick sun/moon mode toggle in the header, and a swap of `slate` +
+`zinc` for `yellow` + `orange`.
+
+### Added
+
+- **`Components::Site::Sidebar` + `Sidebar::Group` + `Sidebar::Link`** — Grouped left navigation for `/docs/*`. 7 groups (Getting Started / Forms / Layout & Display / Overlays / Menus / Navigation / Feedback) listing all 20 components + the prose pages. Active link highlighted via `current_path:` kwarg.
+- **`Components::Site::TableOfContents` + `site--toc` Stimulus controller** — Right-side TOC on `chrome: :full` pages. Empty `<aside>` filled client-side by scanning `main h2[id], main h3[id]`. Tracks the active section via `IntersectionObserver`.
+- **`Components::Site::SidebarToggle` + `site--sidebar` controller** — Hamburger button visible below `lg` breakpoint; opens the sidebar as a fixed overlay with scroll lock + Escape-to-close.
+- **`Components::Site::SearchBox` + `site--search` controller** — Header search input that lazy-loads PagefindUI as a classic script, mounts it on the input, and renders results as an absolute-positioned dropdown styled with Wabi popover tokens.
+- **`Components::Site::ModeToggle`** — Sun/moon icon button next to the ThemePicker. One-click dark/light flip via the existing `wabi--theme#toggleMode` action.
+- **`Wabi::Docs::Indexer` + `wabi:docs:index` rake task** — Crawls 26 docs routes via `Rack::Test` (with `HTTP_HOST=localhost` + Chrome UA to satisfy `ActionDispatch::HostAuthorization` and `allow_browser :modern`), writes the response HTML to files mirroring the URL structure, then shells out to `npx pagefind` to build the static index. Index lives at `docs/public/pagefind/` and ships in the repo — deploys stay Node-free.
+- **`docs/spec/requests/docs_smoke_spec.rb`** — Request specs covering every documented route (3 chrome modes: bare / sidebar_only / full) and the SearchBox markup on non-bare routes.
+- **16 new detail pages** under `/docs/components/`: checkbox, input, label, select, switch, textarea, alert, avatar, badge, card, separator, drawer, popover, tooltip, accordion, toast. Each follows a single canonical anatomy: Installation / Example (ComponentPreview) / Source / Accessibility.
+- **Two new theme palettes**: `yellow` (vibrant amber primary) and `orange`. Both follow the standard light + dark structure.
+- **`Site::Layout(chrome:)` kwarg** — `:bare` (default, no sidebar/TOC), `:sidebar_only`, `:full`. Drives where the sidebar, TOC, and SearchBox render. 11 views updated to pass the appropriate value.
+- **`ROADMAP` updates** + **README "Working on docs" section** documenting the Pagefind workflow.
+
+### Changed
+
+- **Theme palettes**: `slate` and `zinc` replaced with `yellow` and `orange`. Neutral baselines stay covered by `default` and `stone`.
+- **Theme tinting**: the 6 color palettes (rose, blue, green, violet, yellow, orange) now redefine `--secondary` and `--accent` as pale tints of their primary hue (lightness ~92-96% light / ~18% dark) with foreground colors at the same hue darkened/lightened for AA contrast. Default and Stone stay neutral on purpose. `--muted` stays neutral across all themes.
+- **Theme dark-mode propagation**: each theme's dark block now also matches `[data-mode="dark"] [data-theme="X"]:not([data-mode="light"])`, so dark mode cascades into nested `data-theme` cards (e.g. the `/docs/themes` palette grid).
+- **Button `:outline` appearance**: `border-input` (neutral) replaced with `border-primary` + `text-primary`. Outline buttons now adopt the active theme color on their stroke and label.
+- **`Site::ComponentPreview`**: replaced the ad-hoc `site--preview-tabs` Stimulus controller with the real `Wabi::UI::Tabs` (dogfooding). Switcher uses an underline pattern — active trigger gets a 3px primary-colored bottom border + bold primary-color text.
+- **`Site::CodeBlock` copy button**: word "Copy" replaced with a 14px clipboard SVG inside a 28×28 button. On copy: swap to checkmark SVG for 1.2s. `pre` reserves the button's column with `pr-12` so long code lines never tuck under the button while scrolling.
+- **Components index**: every component links to its detail page. The `DETAILED` constant gate was dropped from `ComponentsController#show`; the only guard is membership in `ALL`.
+- **Site::Layout header**: sticky with `z-30`, gains the SearchBox + ModeToggle on `chrome != :bare` routes.
+
+### Fixed
+
+- **Tailwind 4 migration — explicit `border` width on every `border-input` element.** TW3 implicitly set `border-width: 1px` on any element with a `border-{color}` class; TW4 removed that default. Components that only declared `border-input` rendered with width 0 — no visible outline. Affected: `select_trigger`, `select_content`, `dropdown_menu_content`, `dropdown_menu_sub_content`, `drawer_content` (4 side variants), `dialog_content`, `popover_content`, `toast`.
+- **Tailwind 4 migration — cursor: pointer on interactive elements.** TW4 Preflight removed the legacy default on `<button>`. Added a CSS rule under `_shared.css` (`@layer base`) restoring `cursor: pointer` for `button`, `[role="button"/"switch"/"checkbox"/"tab"/"option"/"menuitem"/"menuitemradio"/"menuitemcheckbox"]`, plus `cursor: not-allowed` for `[disabled]` and `[aria-disabled="true"]`.
+- **`Wabi::UI::TabsTrigger` active state**: switched all `data-[state=active]:*` variants to `aria-selected:*`. Zag.js's tabs API emits `aria-selected="true"` + `data-selected=""`, NOT `data-state="active"` — so the active styling never fired. Affected `TabsTrigger` base tokens (both light and dark mode active styles).
+- **`Avatar` image/fallback overlap**: `AvatarImage` is now `absolute inset-0 object-cover` so it stacks over `AvatarFallback`. Previously both rendered as flow-positioned siblings inside the flex Avatar container.
+- **`Toast` sticky mode**: `wabi--toast` controller treats `durationMsValue <= 0` as "no timer" — toasts render persistently until manually dismissed. The Toast detail-page preview now uses this so the 3 appearances stay visible.
+- **`SidebarToggle` Stimulus wiring**: button declared `data-action` but no element declared `data-controller="site--sidebar"`, so the controller never instantiated and the hamburger didn't open the sidebar. Added `data-controller` to the button itself.
+- **TOC anchor jumps**: sticky 56px header was tapping over scrolled-to headings. Added `scroll-margin-top: 5rem` to `main :is(h1, h2, h3, h4, h5, h6)[id]`.
+- **SearchBox PagefindUI loader**: PagefindUI ships as classic IIFE scripts (sets `window.PagefindUI`), not ES modules. The original `await import("/pagefind/pagefind-ui.js")` returned an empty module. Rewrote the loader to inject a `<script>` tag and await its `load` event.
+- **Search result URLs**: Indexer wrote `docs_components_button.html` (flattened with `_`), and Pagefind built result URLs from those filenames. Now writes files mirroring the URL structure (`docs/components/button.html` with `mkdir_p`) and PagefindUI's `processResult` callback strips `.html` from the displayed URL — clicks navigate to `/docs/components/button` directly.
+- **Select example wiring**: `items:` array was missing on the `/docs/components/select` example, so Zag's collection was empty and clicks on SelectItem elements were no-ops. Added a `FRUITS` array passed via `items:` and iterated for the SelectItem children.
+
+### Spec totals
+
+- Registry: **125/125**.
+- Gem: **66/66**.
+- Docs (request + component specs): **40/40** — every smoke route (`:bare` / `:sidebar_only` / `:full`) returns 200 with the expected sidebar/TOC/search markup; Indexer crawl writes one file per route, mirroring URL structure with `index.html` at root.
+
+### Known v0.4 deferrals → v0.5
+
+- `@zag-js/toast` group machine — Wabi v0.4 Toast still uses a vanilla setTimeout-based controller. v0.5 will adopt the real Zag toast group machine for cross-toast coordination (max visible, stacking, etc.).
+- `wabi:update` generator — Pulling registry updates back into a host app is still manual (re-run `wabi:add <name>`). v0.5 will add a generator that diffs registry vs. host and applies changes.
+- Real portal pattern — Overlay components (Dialog, Drawer, Popover, Tooltip) currently render in-tree. A `<dialog>`-element-based or `Components::UI::Portal`-based pattern is queued for v0.5.
+- Backfill `bin/importmap pin` footnote on the 5 pre-existing Zag pages (checkbox, select, switch, dialog, tabs). v0.4 added the warning to the new overlay/accordion pages; sweep across all pages happens in v0.5 docs polish.
+
+---
+
 ## [0.3.0] — 2026-05-26
 
 Sprint 7 (docs site polish). The docs site stops being a one-page kitchen

data/README.md

@@ -4,15 +4,15 @@
 
 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.
 
-🎉 **Status:** v0.3.0 alpha. 20 components, 8 theme palettes, WCAG-AA targeted. Not yet on RubyGems.
+🎉 **Status:** v0.4.0 alpha — [available on RubyGems](https://rubygems.org/gems/wabi). 20 components, 8 theme palettes, WCAG-AA targeted, full docs site at the GitHub repo's `docs/` Rails app.
 
 ---
 
 ## Quick start
 
 ```bash
-# 1. Add the gem (path-based for now; RubyGems push pending)
-bundle add wabi --git https://github.com/wabikit/wabi --glob 'gem/*'
+# 1. Add the gem
+bundle add wabi
 
 # 2. Run the installer (copies tokens.css + theme controller + lockfile)
 bin/rails g wabi:install
@@ -153,15 +153,35 @@ Then visit:
 
 ---
 
+## Working on docs
+
+The docs site is a Rails app under `docs/`. Local dev: `bin/dev` from
+repo root. The static search index lives at `docs/public/pagefind/`
+and is regenerated by a Rake task that crawls every docs route via
+`Rack::Test`, dumps HTML to disk, then runs `npx pagefind` on it.
+
+```bash
+cd docs && bin/rails wabi:docs:index
+```
+
+Run this after touching any content under `docs/app/views/pages/` or
+adding new component detail pages, then commit `docs/public/pagefind/`.
+Requires Node 20+ in PATH (Pagefind is fetched via `npx` on demand).
+
+---
+
 ## Roadmap
 
 | Version | Target | Status |
 |---|---|---|
 | v0.1 | 20 components | ✅ shipped 2026-05-26 |
 | v0.2 | 8 themes + theme picker | ✅ shipped 2026-05-26 |
-| v0.3 | Real docs site (marketing + components index + 4 detailed pages + prose) | ✅ shipped 2026-05-26 |
-| v0.4 | Detailed pages for remaining 16 components; Pagefind search; sidebar nav | planned |
+| v0.3 | Real docs site + RubyGems publish | ✅ shipped 2026-05-26 |
+| v0.4 | Detailed pages for all 20 components; Pagefind search; sidebar nav; theme polish | ✅ shipped 2026-05-27 |
 | v0.5 | `@zag-js/toast` group machine; real portal pattern; `wabi:update` generator | planned |
+| v0.6 | Forms expansion: RadioGroup, Toggle, ToggleGroup, Slider, Combobox, Command, Form | planned |
+| v0.7 | Navigation & layout: Sheet, ContextMenu, Pagination, NavigationMenu | planned |
+| v0.8 | Data + dates + ecosystem: Calendar, DatePicker, DataTable, Blocks, community registry | planned |
 | v1.0 | API stability; external a11y audit | 2027-04 target |
 
 See [ROADMAP.md](./ROADMAP.md) for the long-term view and [CHANGELOG.md](./CHANGELOG.md) for the per-release detail.

data/lib/wabi/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Wabi
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

data/templates/tokens.css

@@ -9,6 +9,30 @@
 
 @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
 
+/* Tailwind 4 Preflight removed the legacy `cursor: pointer` on <button>.
+ * Wabi's stance: any element that's interactive (button, role=button,
+ * Zag-machine triggers like role=switch / role=tab / role=option /
+ * role=menuitem*) should signal that on hover. Disabled / aria-disabled
+ * elements opt out — their pointer-events are suppressed elsewhere but
+ * we also want the cursor to reflect "not clickable" for clarity. */
+@layer base {
+  button:not(:disabled):not([aria-disabled="true"]),
+  [role="button"]:not([aria-disabled="true"]),
+  [role="switch"]:not([aria-disabled="true"]),
+  [role="checkbox"]:not([aria-disabled="true"]),
+  [role="tab"]:not([aria-disabled="true"]),
+  [role="option"]:not([aria-disabled="true"]),
+  [role="menuitem"]:not([aria-disabled="true"]),
+  [role="menuitemradio"]:not([aria-disabled="true"]),
+  [role="menuitemcheckbox"]:not([aria-disabled="true"]) {
+    cursor: pointer;
+  }
+  button[disabled],
+  [aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+}
+
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
@@ -64,7 +88,8 @@
   --popover-foreground: 240 10% 3.9%;
 }
 
-[data-theme="default"][data-mode="dark"] {
+[data-theme="default"][data-mode="dark"],
+[data-mode="dark"] [data-theme="default"]:not([data-mode="light"]) {
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;
   --primary: 0 0% 98%;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: wabi
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Oscar Ortega