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

Let a button group own its selection

Browse Source 
Plan step 22, actions.md § Missing (Selection-required / multi-select
semantics): M3 lists single-select, multi-select and selection-required as
button-group configurations, and `<x-button-group connected>` left
selection entirely to the caller's own `aria-pressed`.

`selection="single|multi"`, with `required`, takes `aria-pressed` over:
pressing a button writes its `value` to `wire:model` or `x-model`,
deselects the others in `single`, and refuses the press that would leave
nothing selected. With no model it reads the buttons' own `aria-pressed`
once and goes on from there.

`<x-group>` and this do not absorb one another, and the header and
SKILL.md say why: `<x-group>` is for a choice whose options are data — it
renders real inputs, posts in a plain form and paints its own segments —
and stays the first thing to reach for; a selection group governs buttons
the caller writes, manages state and shape, and leaves each button to draw
its own colours from its own `:selected`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:43:34 +02:00
co-authored by Claude Opus 5
parent 5d0e9bc12f
commit 6af501c966
4 changed files with 166 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/buttons.blade.php
+20
View File
@@ -76,6 +76,26 @@
<x-button icon="format_underlined" aria-label="Underline" variant="tonal" :selected="false" />
</x-button-group>
BLADE,
'A connected group that owns its selection' => <<<'BLADE'
<div x-data="{ view: 'week', marks: ['bold'] }" class="w-full space-y-6">
<x-button-group connected selection="single" required label="View" x-model="view">
<x-button label="Day" value="day" variant="tonal" :selected="false" />
<x-button label="Week" value="week" variant="tonal" :selected="true" />
<x-button label="Month" value="month" variant="tonal" :selected="false" />
</x-button-group>
<x-button-group connected selection="multi" label="Formatting" x-model="marks">
<x-button icon="format_bold" aria-label="Bold" value="bold" variant="tonal" :selected="true" />
<x-button icon="format_italic" aria-label="Italic" value="italic" variant="tonal" :selected="false" />
<x-button icon="format_underlined" aria-label="Underline" value="underline" variant="tonal" :selected="false" />
</x-button-group>
<p class="type-body-md text-on-surface-variant">
View: <code x-text="view"></code> · marks: <code x-text="marks.join(', ') || 'none'"></code>.
The shape follows at once; the colours come from each button's own <code>:selected</code>, which a Livewire render brings back.
</p>
</div>
BLADE,
'Square groups (hold a button down)' => <<<'BLADE'
<x-button-group label="Square standard" size="md" shape="square">
<x-button label="Day" variant="tonal" size="md" />