`, `| `, ` | ` inside `` (`size="xs"` for a dense one); cell utilities (`text-end`, `whitespace-nowrap`) always win. Scrolling is yours: wrap it in ``. A row that opens something is `data-list-row` with one `data-list-open` control; a selected row is `aria-selected="true"`.
+
+` Size` sorts through the Livewire property `sortBy` (`['column' => …, 'direction' => 'asc'|'desc']`; `model` names another), with `aria-sort`.
+
+```blade
+
+
+ Name| Size |
+
+ @foreach ($shares as $share)
+
+ | {{ $share->name }} |
+ {{ $share->size }} |
+
+ @endforeach
+
+
+
+{{ $shares->links() }}
+```
+
+Pagination: `$paginator->links()` (Laravel and Livewire, full and simple/cursor) is drawn in M3 — current page in secondary-container, "Page 2 of 7" on a phone. Turn off with `config('livewire-material.pagination')` = `false`; published `vendor/pagination` or `vendor/livewire` views still win.
+
+## Testing the design
+
+```php
+use NoNameWeb\LivewireMaterial\Testing\DesignGuard;
+
+it('uses only what compiles', function () {
+ expect(DesignGuard::scan([resource_path('views'), resource_path('js'), app_path()])
+ ->forbidColours(['tertiary']) // roles this application's rules leave out
+ ->violations())->toBe([]);
+});
+```
+
+It fails on maryUI tags, daisyUI classes, colours the theme does not declare, unknown symbol names and Blade directives written inside a component tag (where they do not compile), with `path:line` for each.
+
+## Conventions
+
+- Components are anonymous Blade components: ` ` without a prefix, or `` when `config('livewire-material.prefix')` is set; `` always works.
+- Write class names out whole. Tailwind cannot compile `'text-'.$tone` or `type-{{ $size }}`, and the design guard cannot read them.
+- The showcase at `/material` (local only, `MATERIAL_SHOWCASE=true` to force it) renders every token and component.
+
+## Livewire traps
+
+- Blade directives do not compile inside a component tag's attributes: `` reaches the browser as literal text. On a component tag use `{{ }}` and `:prop` bindings, or put the Alpine on a plain element inside the slot.
+- Never pass `hidden`, a display utility or a position (`absolute`, `relative`) to a component: it is merged beside the component's own and whichever Tailwind emits last wins. Wrap the component in an element that carries it. A variant that only hides (`max-sm:hidden`) is safe.
+- `$attributes->wire('model')->value()` is `false`, not `null`, when there is no `wire:model`, and `filled(false)` is true. Normalise with `?: null`.
+- End every statement in a multi-line Alpine attribute with `;`: an inline `@if … @endif` inside it swallows the newline after it.
diff --git a/CLAUDE.md b/CLAUDE.md
index 5ebd461..8997516 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -187,4 +187,16 @@ When working on Octane-specific features (concurrency, shared tables, memory, dr
- Run `vendor/bin/pest` to call the test runner directly. It accepts the same file path and `--filter=testName` arguments.
- After the feature tests pass, ask the user to run the complete suite with `php artisan test --compact`.
+=== nonameweb/livewire-material/core rules ===
+
+## Livewire Material
+
+This application uses `nonameweb/livewire-material`: Material 3 Expressive components for Laravel and Livewire, built on Tailwind CSS. It replaces UI kits such as maryUI, daisyUI and Flux in this application.
+
+- Components are anonymous Blade components, unprefixed unless `config/livewire-material.php` sets a `prefix`. Before writing or changing a view that uses them, activate the `livewire-material-development` skill for the props, slots and traps of each component.
+- Never write maryUI tags (``) or daisyUI classes (`btn`, `card`, `badge`, `bg-base-200`, `text-base-content`…). They compile to nothing and fail silently.
+- Every layout includes `` in `` before `@vite`. The colour scheme is generated with `php artisan material:scheme` — never edit `resources/css/material-scheme.css` by hand.
+- While the application runs locally, every token and component renders in the application's own scheme at `/material` (the showcase).
+- HTTP error pages and the Markdown mail theme come from the package. Change error wording by publishing `--tag=livewire-material-errors`; select the mail theme with `MAIL_MARKDOWN_THEME=livewire-material::mail.theme`.
+
diff --git a/boost.json b/boost.json
index 0826751..1c80c3c 100644
--- a/boost.json
+++ b/boost.json
@@ -6,6 +6,9 @@
"guidelines": true,
"herd_mcp": false,
"mcp": true,
+ "packages": [
+ "nonameweb/livewire-material"
+ ],
"sail": false,
"skills": [
"infer-conventions",
@@ -14,6 +17,7 @@
"testing-best-practices",
"octane-development",
"livewire-development",
- "tailwindcss-development"
+ "tailwindcss-development",
+ "livewire-material-development"
]
}
|