noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add M3 Expressive progress indicators
tests / browser (chrome, chromium) (push) Successful in 2m8s
Details
tests / browser (firefox, firefox) (push) Failing after 1m56s
Details
tests / lint (push) Successful in 57s
Details
tests / feature (8.4) (push) Successful in 1m5s
Details
tests / feature (8.5) (push) Successful in 1m1s
Details
tests / browser (safari, webkit) (push) Successful in 2m52s
Details

Browse Source 
<x-progress>: linear or circular, flat or wavy, determinate or
indeterminate, 4px or thick, in any colour role, following a server value
through Livewire morphs or an Alpine expression in the browser. The first
frame is server-rendered SVG; Compose Material 3's drawing and keyframes
are ported to an Alpine component that animates only while something
moves and the indicator is on screen.

The previous commit already imported progress.js and included its
showcase section without the files; this adds them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 07:05:52 +02:00
co-authored by Claude Opus 5
parent 648ad8efaf
commit e57063b0f4
7 changed files with 2087 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/boost/skills/livewire-material-development/SKILL.md
+27
View File
@@ -223,6 +223,33 @@ materialToast('Share deleted', { type: 'success', description: null, timeout: 40
`type` (`success`, `error`, `warning`, `info`) adds the state icon; `timeout: 0` keeps it until dismissed; a toast with an action or no timeout gets a close button. Hover or focus pauses the timer.
### `<x-progress>`
M3 Expressive's progress indicator: linear (as wide as its container) or `circular` (40px, 48px wavy, unless a `size-*` class is passed), flat or `wavy`, determinate with a `value` or indeterminate without one.
| Prop | Default | |
|---|---|---|
| `value` | `null` | 0 to `max`, clamped; `null` is indeterminate |
| `max` | `100` | |
| `bind` | `null` | an Alpine expression it follows in the browser; `null`/`undefined` is indeterminate |
| `circular` | `false` | circular instead of linear |
| `wavy` | `false` | Expressive's wave (flat below 10% and from 95%) |
| `thick` | `false` | 8px track and indicator instead of 4px |
| `color` | `primary` | `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`; the track is the colour's container (secondary-container for primary) |
| `label` | `"Progress"` | names the `progressbar`; `:label="false"` makes it decorative |
```blade
<x-progress :value="$share->uploaded" :max="$share->size" label="Uploading" />
<x-progress circular wavy label="Preparing the download" />
<div x-data="{ progress: null }" x-on:livewire-upload-progress="progress = $event.detail.progress" x-on:livewire-upload-finish="progress = null">
<input type="file" wire:model="file">
<div x-show="progress !== null"><x-progress bind="progress" wavy label="Uploading" /></div>
</div>
```
A value the server changes animates after a morph (the SVG is `wire:ignore`; only the root's attributes change). Under reduced motion values jump, the wave stands still and an indeterminate indicator holds one frame. A `w-*` class narrows a linear one; never pass a display or position class.
### `<x-badge>`
- `<x-badge />` — M3's small badge, a dot. `<x-badge value="4" max="99" />` — M3's large badge, a count. Both `error` by default. `floating` pins it to the top-end corner of a `relative` parent: `<span class="relative inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>`. A dot or count is `aria-hidden` unless it has a `label`; name the control instead ("Messages, 4 unread").