Casadesign - DRAFT DO NOT MERGE

CLAUDE.md

@@ -73,6 +73,10 @@ Hotwire-first: Turbo for navigation/forms, Stimulus controllers in `app/javascri
 ## Style
 This project uses **Standard.rb** (not vanilla RuboCop). Don't fight it on spacing/quotes/trailing commas. There is also a `.standard_todo.yml` of grandfathered violations — leave older files alone unless touching them substantively. Older migration files (2020–2024) are intentionally excluded from linting.
 
+## Design system (casadesign branch)
+
+This branch introduces a Tailwind CSS v4 design system, documented in **`design.md`** (repo root) — the source of truth for the new aesthetic. Read it before UI work and keep it updated. New pages use Tailwind-only layouts and coexist with the legacy Bootstrap UI (migrate page-by-page). **On every page, show user names without honorific prefixes (first + last only) — `display_person` for new UI, `formatted_name` at existing `.display_name` sites — never mutate the stored `display_name`.** **Workflow: on `casadesign`, commit and push to the `casadesign` branch at every checkpoint (do not wait for approval).** **Buttons come from the `button_classes(:primary|:secondary|:danger|:danger_outline|:success)` helper (one shared 40px height token, never hand-written class strings; before finishing UI work, grep the touched views for clickable elements with a hand-rolled button shape (`inline-flex` + `rounded-lg` + `px-`/`py-` + `bg-`/`border-`) and convert them to `button_classes` (the tertiary ghost is the only documented exception): this drift, a bespoke string at a different height next to the 40px token, is a recurring bug). Section headings and subtitles are sentence case with **no trailing colon** (colons only on inline key:value fact labels; audit `grep '<h[123][^>]*>[^<]*:</h'`); sentence case also covers app-shipped content (seed defaults and constants like `ContactTypeGroup::DEFAULT_CONTACT_TYPE_GROUPS`, shown as the multiselect chips), not just view copy, so before finishing scan the touched views AND app-shipped names/defaults for Title Case or ALL-CAPS and fix them (proper nouns/acronyms CASA, IEP excepted; never force-case free-form org data); person names are dark identifying text (`font-medium text-slate-800`), not brand nav links, and avoid sending the user out of the current flow via a name without a clear path back. Multiselects (TomSelect) load blank with a placeholder, never pre-selected with every option (the dropdown's Select/Unselect all covers that), and their chevron is a `.ts-wrapper::after` base64-SVG caret with **`z-index: 2`** (TomSelect's opaque `.ts-control` paints over a plain `::after`, so without the z-index the caret is hidden behind it; a `content` glyph escape and a raw data URI both broke in the build). Verify chevrons at the pixel level (screenshot + darkest-pixel), not by computed style. Native-dialog modals use the `Dialog::` ViewComponent suite (`Dialog::GroupComponent` + `Dialog::HeaderComponent`/`BodyComponent`/`FooterComponent`), not the legacy Bootstrap `Modal::*`. Page headers use one primary CTA plus a `More` overflow menu (native `<details>` + the `dropdown` controller): keep core actions visible and overflow only occasional ones, never bury a core action (also breaks non-JS specs, which can't open `<details>`). On mobile, collapse the remaining visible secondaries into `More` too (render twice with `hidden sm:contents` / `sm:hidden`) so only the primary CTA and `More` share the top line. Leading icons on menu/list items top-align to the first line (`items-start`), never centered against wrapped text. When you build and verify a component or pattern, document it in `design.md` immediately (do not wait for approval) and reuse it from there: `design.md` is the source of truth, so match it and never re-derive or let it drift. Before finishing a new or changed component, **check it against `design.md` and its sibling components and pixel-verify the match** (e.g. the multiselect chevron must match the single-select chevron, measured via screenshot + darkest-pixel, never eyeballed or trusted from computed style): rendering is not the same as matching. When a partial is still rendered by legacy Bootstrap pages (e.g. `shared/_manage_volunteers`, `shared/_court_order_list`), never restyle it in place: add a casa_app-specific Tailwind twin (`casa_cases/_volunteer_assignment`, `casa_cases/_court_orders`) that preserves every JS hook (ids, classes, data-actions, field names, DOM adjacencies) and leave the shared partial for the Bootstrap pages.**
+
 ## Where to look for more
 - `.github/instructions/ruby.instructions.md` and `.github/instructions/copilot-review.instructions.md` — the project's own review checklist; the source of truth for "what is a bug-shaped change here."
 - `doc/architecture-decisions/` — ADRs (especially 0002 no-UI-signup, 0003 two-user-tables, 0006 few-controller-tests, 0007 inline-email-CSS).

Gemfile

@@ -97,6 +97,7 @@ group :development do
 end
 
 group :test do
+  gem "axe-core-rspec" # Accessibility (axe-core) assertions for system specs
   gem "capybara" # Integration testing framework
   gem "capybara-screenshot" # Automatic screenshot on test failure
   gem "database_cleaner-active_record" # Database cleaning strategies for tests

Gemfile.lock

@@ -88,6 +88,10 @@ GEM
       railties (>= 7.2)
       warden
     awesome_print (1.9.2)
+    axe-core-api (4.12.0)
+      dumb_delegator
+    axe-core-rspec (4.12.0)
+      axe-core-api (= 4.12.0)
     azure-storage-blob (2.0.3)
       azure-storage-common (~> 2.0)
       nokogiri (~> 1, >= 1.10.8)
@@ -188,6 +192,7 @@ GEM
       request_store (>= 1.0)
       ruby2_keywords
     drb (2.2.3)
+    dumb_delegator (1.1.0)
     email_spec (2.3.1)
       htmlentities (~> 4.3)
       launchy (>= 2.1, < 4.0)
@@ -705,6 +710,7 @@ DEPENDENCIES
   amazing_print
   annotaterb
   authtrail
+  axe-core-rspec
   azure-storage-blob
   blueprinter
   brakeman

Procfile.dev

@@ -1,3 +1,3 @@
 web: bin/rails server -p 3000 -b 0.0.0.0
 js: npm run build:dev --watch
-css: npm run build:css:dev --watch
+tw: npm run build:tailwind:dev