From c8c2d2e13e55f40b752ae40292881d6c08ce3e55 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:21:22 +0200
Subject: [PATCH 1/7] Count a text field's characters against its maximum
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 lists "supporting text + character counter" as a configuration of both
text-field variants; nothing in the package drew one (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). `counter` on `<x-input>` and
`<x-textarea>` now puts `n/max` at the end of the supporting-text row, counted
from the control on every input, in the error colour past the maximum, and said
as M3's own "Character count, 5/20" from a polite region once typing settles.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../livewire-material-development/SKILL.md    |  5 +-
 resources/css/components/field.css            | 29 +++++++++-
 resources/views/components/field.blade.php    | 58 ++++++++++++++++---
 resources/views/components/input.blade.php    |  8 ++-
 resources/views/components/textarea.blade.php |  8 ++-
 .../views/showcase/sections/fields.blade.php  | 10 ++++
 tests/Feature/Components/FieldTest.php        | 23 ++++++++
 7 files changed, 127 insertions(+), 14 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index 30784477..c9c00ee7 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -552,9 +552,10 @@ A one-column grid of fields with an `actions` slot at the foot (the slot takes i
 
 M3 text fields. `variant`: `outlined` or `filled`; without it, `config('livewire-material.fields.variant')` (`outlined`). All take `label`, `hint`, `variant` (and all but `<x-file>` a `hint-class`, classes added to the hint: `hint-class="text-warning"`), and read their errors from the bag under the `wire:model` name, or the `name` in a plain form (`photos[]` → `photos`, `address[city]` → `address.city`); the error replaces the hint, sets `aria-invalid`, and puts an `error` icon at the end of the row as M3's second indicator (not on `size="xs"`, and not when the field already trails something — `icon-right`, `clearable`, `copyable`). `class` lands on the field's outer element (margins, widths); every other attribute (`wire:model`, `type`, `required`, `readonly`, `autocomplete`) reaches the control. Never pass `placeholder` expecting it to show while a label rests in the field: it shows once the field has focus.
 
-- `<x-input>`: `icon`, `icon-right`, `prefix`, `suffix`, `clearable`, `copyable` (copies the value, confirms with a snackbar), `size` (`sm` 40px, `xs` 32px — for unlabelled toolbar controls; give them `aria-label`), `mono`.
+- `<x-input>`: `icon`, `icon-right`, `prefix`, `suffix`, `clearable`, `copyable` (copies the value, confirms with a snackbar), `counter`, `size` (`sm` 40px, `xs` 32px — for unlabelled toolbar controls; give them `aria-label`), `mono`.
 - `<x-password>`: a reveal button; `icon`, `size`.
-- `<x-textarea>`: grows from `rows` (3) to `max-rows`, then scrolls; `:autogrow="false"` for a fixed, hand-resizable one.
+- `<x-textarea>`: grows from `rows` (3) to `max-rows`, then scrolls; `:autogrow="false"` for a fixed, hand-resizable one; `counter`.
+- `counter` (on `<x-input>` and `<x-textarea>`) puts M3's character counter at the end of the supporting-text row, beside the hint or the error: `n/max`, counted on every keystroke against the field's own `maxlength`, and in the error colour once the value is past it. It needs `maxlength` — without one there is nothing to count against and nothing is drawn. It is said as "Character count, 5/20" from a polite region a second after typing stops.
 - `<x-select>`: native `<select>` (M3 menu where the browser supports customizable selects). `options` as `['id' => …, 'name' => …, 'disabled' => bool]`, `option-value`, `option-label`, `placeholder` + `placeholder-value`, or `<option>`s in the slot; `icon`, `size`.
 - `<x-file>`: native file input; errors from `photos` and `photos.*`. Show previews of what was chosen yourself.
 - `<x-field id="…" label="…" :messages="$messages">` wraps a custom control given `class="field-control"`; only for controls the package does not have.
diff --git a/resources/css/components/field.css b/resources/css/components/field.css
index ba761590..eec86b91 100644
--- a/resources/css/components/field.css
+++ b/resources/css/components/field.css
@@ -20,7 +20,9 @@
  *                        error state's second indicator
  *       .field-outline   the fieldset and its legend (the filled field's indicator line)
  *       .field-label     the visible label
- *     .field-support     the hint, or the error in its place
+ *     .field-support-row the row under the field
+ *       .field-support   the hint, or the error in its place
+ *       .field-counter   M3's character counter, `n/max`, at the end of that row
  *
  * A select's open list is not part of the field: it is the dropdown menu in components/menu.css.
  */
@@ -450,7 +452,16 @@
         }
     }
 
+    /* The hint or the error, and — when the field has a maximum — M3's character counter at the far
+       end of the same row (specs: "Padding between supporting text and counter | 16dp", which the
+       two paddings between them already make). */
+    .field-support-row {
+        display: flex;
+        align-items: baseline;
+    }
+
     .field-support {
+        min-width: 0;
         padding: 0.25rem var(--field-pad) 0;
         color: var(--md-sys-color-on-surface-variant);
         font: var(--md-sys-typescale-body-sm);
@@ -461,6 +472,22 @@
         color: var(--md-sys-color-error);
     }
 
+    .field-counter {
+        flex: none;
+        margin-inline-start: auto;
+        padding-block-start: 0.25rem;
+        padding-inline-end: var(--field-pad);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* Past the maximum the count is an error, and says so in the error colour. */
+    .field-counter[data-over] {
+        color: var(--md-sys-color-error);
+    }
+
     /* ---- The filled text field ---------------------------------------------------------------- */
 
     .field[data-variant="filled"] .field-box {
diff --git a/resources/views/components/field.blade.php b/resources/views/components/field.blade.php
index bbe60a34..5d4a2401 100644
--- a/resources/views/components/field.blade.php
+++ b/resources/views/components/field.blade.php
@@ -14,6 +14,13 @@
      at the end of the row so the state has two indicators and not only a colour — unless the caller
      trails the field with something of its own, or the field is `xs` and has no room.
 
+     `counter` is the maximum number of characters, and puts M3's character counter at the end of the
+     supporting-text row: `n/max`, counted from the control on every `input`, in the error colour once
+     the value is past the maximum
+     (docs/reference/m3/components-navigation-selection-inputs.md § Text Fields). It is said as
+     "Character count, 5/20", M3's own label, from a polite region a second after typing stops rather
+     than on every keystroke, which would talk over the typing.
+
      `class` from the call site lands on the outermost element, never the control, so a margin or
      a width is safe here. --}}
 
@@ -30,6 +37,7 @@
     'variant' => null,
     'floated' => false,
     'mono' => false,
+    'counter' => null,
 ])
 
 @php
@@ -40,6 +48,7 @@
     // M3 pairs the error colours with a trailing error icon so the state has two indicators. It
     // gives way to whatever the caller trails the field with, and to `xs`, which has no room.
     $errorIcon = $messages !== [] && ! isset($trailing) && $density !== 'xs';
+    $counter = filled($counter) && (int) $counter > 0 ? (int) $counter : null;
 @endphp
 
 <div
@@ -80,13 +89,48 @@
         @endif
     </div>
 
-    @if ($messages !== [])
-        <div id="{{ $id }}-support" class="field-support" role="alert">
-            @foreach ($messages as $message)
-                <p>{{ $message }}</p>
-            @endforeach
+    @if ($messages !== [] || filled($hint) || $counter !== null)
+        <div class="field-support-row">
+            @if ($messages !== [])
+                <div id="{{ $id }}-support" class="field-support" role="alert">
+                    @foreach ($messages as $message)
+                        <p>{{ $message }}</p>
+                    @endforeach
+                </div>
+            @elseif (filled($hint))
+                <p id="{{ $id }}-support" @class(array_filter(['field-support', $hintClass]))>{{ $hint }}</p>
+            @endif
+
+            @if ($counter !== null)
+                <span
+                    class="field-counter"
+                    data-field-counter
+                    x-data="{
+                        used: 0,
+                        max: {{ $counter }},
+                        spoken: '',
+                        settle: null,
+                        init() {
+                            const control = this.$el.closest('.field').querySelector('.field-control');
+
+                            this.used = control.value.length;
+                            control.addEventListener('input', () => (this.used = control.value.length));
+
+                            this.$watch('used', () => {
+                                clearTimeout(this.settle);
+                                this.settle = setTimeout(() => (this.spoken = @js(__('Character count, :used/:max')).replace(':used', this.used).replace(':max', this.max)), 1000);
+                            });
+                        },
+                        destroy() {
+                            clearTimeout(this.settle);
+                        },
+                    }"
+                    x-bind:data-over="used > max"
+                >
+                    <span aria-hidden="true" x-text="`${used}/${max}`">0/{{ $counter }}</span>
+                    <span class="sr-only" aria-live="polite" aria-atomic="true" x-text="spoken"></span>
+                </span>
+            @endif
         </div>
-    @elseif (filled($hint))
-        <p id="{{ $id }}-support" @class(array_filter(['field-support', $hintClass]))>{{ $hint }}</p>
     @endif
 </div>
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index 9cf9ed51..c82698c2 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -4,7 +4,8 @@
      value, such as a currency or a unit), `variant`, `size` for unlabelled controls in toolbars,
      and `mono` for a field that holds code. `clearable` adds a trailing button that empties the
      field once it holds something; `copyable` one that copies its value and says so in a snackbar
-     (a share link, a token). Every other attribute reaches the `<input>`: `type`, `min`, `step`,
+     (a share link, a token). `counter` counts the characters used against `maxlength`, at the end of
+     the supporting-text row. Every other attribute reaches the `<input>`: `type`, `min`, `step`,
      `readonly`, `wire:model` and the rest. Errors are read from the bag under the `wire:model` name.
 
      The placeholder is a single space when none is given, because the label can only tell an
@@ -21,6 +22,7 @@
     'suffix' => null,
     'clearable' => false,
     'copyable' => false,
+    'counter' => false,
     'size' => 'md',
     'variant' => null,
     'mono' => false,
@@ -33,9 +35,11 @@
     // A plain form's field is named, not bound: its errors are under its name (`files[]` → `files`, `a[b]` → `a.b`).
     $errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
     $messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
+    // M3's counter needs a maximum to count against: without `maxlength` there is nothing to show.
+    $max = $counter ? $attributes->get('maxlength') : null;
 @endphp
 
-<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
+<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
     <input
         {{ $attributes->except(['class', 'id', 'placeholder'])->merge(['type' => 'text']) }}
         id="{{ $id }}"
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
index 2789afcc..84f5e5a9 100644
--- a/resources/views/components/textarea.blade.php
+++ b/resources/views/components/textarea.blade.php
@@ -3,7 +3,8 @@
      It starts at `rows` lines (3) and grows with what is typed up to `max-rows`, then scrolls;
      `:autogrow="false"` keeps it at `rows` and lets it be resized by hand, vertically only, so a
      form's column never moves. The label rests on the first line rather than in the middle of the
-     box. `label`, `hint`, `variant`; every other attribute reaches the `<textarea>`. --}}
+     box. `label`, `hint`, `variant`, and `counter` for M3's character counter against `maxlength`;
+     every other attribute reaches the `<textarea>`. --}}
 
 @props([
     'label' => null,
@@ -13,6 +14,7 @@
     'rows' => 3,
     'maxRows' => null,
     'autogrow' => true,
+    'counter' => false,
 ])
 
 @php
@@ -22,9 +24,11 @@
     // A plain form's field is named, not bound: its errors are under its name (`files[]` → `files`, `a[b]` → `a.b`).
     $errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
     $messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
+    // M3's counter needs a maximum to count against: without `maxlength` there is nothing to show.
+    $max = $counter ? $attributes->get('maxlength') : null;
 @endphp
 
-<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
+<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
     <textarea
         {{ $attributes->except(['class', 'id', 'placeholder']) }}
         id="{{ $id }}"
diff --git a/resources/views/showcase/sections/fields.blade.php b/resources/views/showcase/sections/fields.blade.php
index ae1517c0..644b84c4 100644
--- a/resources/views/showcase/sections/fields.blade.php
+++ b/resources/views/showcase/sections/fields.blade.php
@@ -41,6 +41,16 @@
                 </div>
             </div>
             BLADE,
+        'Character counter' => <<<'BLADE'
+            <div class="grid w-full gap-6 medium:grid-cols-2">
+                <div class="grid content-start gap-4">
+                    <x-input label="Share name" maxlength="40" counter hint="Recipients see this name" />
+                    <x-input variant="filled" label="Subject" maxlength="60" counter />
+                </div>
+
+                <x-textarea label="Message for recipients" maxlength="180" counter rows="3" hint="Sent with the link" />
+            </div>
+            BLADE,
         'Textarea and select' => <<<'BLADE'
             <div class="grid w-full gap-6 medium:grid-cols-2">
                 <div class="grid content-start gap-4">
diff --git a/tests/Feature/Components/FieldTest.php b/tests/Feature/Components/FieldTest.php
index f9cd3883..a25a781a 100644
--- a/tests/Feature/Components/FieldTest.php
+++ b/tests/Feature/Components/FieldTest.php
@@ -147,6 +147,29 @@ it('collects a file field\'s own errors and each file\'s', function () {
         ->toContain('photo.jpg is larger than 2 GB.');
 });
 
+it('counts the characters of a field that has a maximum', function () {
+    $html = (string) $this->blade('<x-input id="bio" label="Bio" hint="Shown on your profile" maxlength="60" counter />');
+
+    expect($html)
+        ->toContain('class="field-support-row"')
+        ->toContain('class="field-counter"')
+        ->toContain('maxlength="60"')
+        ->toContain('max: 60,')
+        ->toContain('>0/60</span>')
+        ->toContain('aria-live="polite"')
+        ->toContain('Shown on your profile');
+
+    expect((string) $this->blade('<x-textarea id="note" label="Note" maxlength="140" counter />'))
+        ->toContain('class="field-counter"')
+        ->toContain('>0/140</span>');
+});
+
+it('shows no counter without `counter` or without a maximum to count against', function () {
+    expect((string) $this->blade('<x-input label="Bio" maxlength="60" />'))->not->toContain('field-counter')
+        ->and((string) $this->blade('<x-input label="Bio" counter />'))->not->toContain('field-counter')
+        ->and((string) $this->blade('<x-textarea label="Note" counter />'))->not->toContain('field-counter');
+});
+
 it('lays out a form with its actions under an optional divider', function () {
     $html = (string) $this->blade(<<<'BLADE'
         <x-form wire:submit="save" separator>

From 72a3e22fbc8e81e6c29c81ac8184d3a0ed3abee4 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:23:08 +0200
Subject: [PATCH 2/7] Bound a text field's width from medium
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 § Text Fields, Behaviour: compact may let a field span full width, but
medium and expanded must bound it — "never let it span the full width of a
large screen". Nothing in the package capped a field (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). From `medium` a field now stops
at 40rem — the site names no number, so the header says where this one comes
from — which a `max-w-*` class beats and `full` takes off. The search bar
already carries M3's own 720px.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../skills/livewire-material-development/SKILL.md  |  1 +
 resources/css/components/field.css                 | 14 ++++++++++++++
 resources/views/components/field.blade.php         |  6 ++++++
 resources/views/components/input.blade.php         |  6 ++++--
 resources/views/components/textarea.blade.php      |  8 +++++---
 resources/views/showcase/sections/fields.blade.php |  8 ++++++++
 tests/Feature/Components/FieldTest.php             | 10 ++++++++++
 7 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index c9c00ee7..74511648 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -555,6 +555,7 @@ M3 text fields. `variant`: `outlined` or `filled`; without it, `config('livewire
 - `<x-input>`: `icon`, `icon-right`, `prefix`, `suffix`, `clearable`, `copyable` (copies the value, confirms with a snackbar), `counter`, `size` (`sm` 40px, `xs` 32px — for unlabelled toolbar controls; give them `aria-label`), `mono`.
 - `<x-password>`: a reveal button; `icon`, `size`.
 - `<x-textarea>`: grows from `rows` (3) to `max-rows`, then scrolls; `:autogrow="false"` for a fixed, hand-resizable one; `counter`.
+- Width: M3 asks that a text field never span the full width of a large screen, so from `medium` (600px) every field stops at **40rem**; below that it fills its pane. A `max-w-*` class on the component narrows or widens it, and `full` (on `<x-field>`, `<x-input>`, `<x-textarea>`) takes the bound off for a field that really is the width of its pane — a search row, an editor. `<x-search>`'s bar carries M3's own bound, 720px.
 - `counter` (on `<x-input>` and `<x-textarea>`) puts M3's character counter at the end of the supporting-text row, beside the hint or the error: `n/max`, counted on every keystroke against the field's own `maxlength`, and in the error colour once the value is past it. It needs `maxlength` — without one there is nothing to count against and nothing is drawn. It is said as "Character count, 5/20" from a polite region a second after typing stops.
 - `<x-select>`: native `<select>` (M3 menu where the browser supports customizable selects). `options` as `['id' => …, 'name' => …, 'disabled' => bool]`, `option-value`, `option-label`, `placeholder` + `placeholder-value`, or `<option>`s in the slot; `icon`, `size`.
 - `<x-file>`: native file input; errors from `photos` and `photos.*`. Show previews of what was chosen yourself.
diff --git a/resources/css/components/field.css b/resources/css/components/field.css
index eec86b91..bb0e5123 100644
--- a/resources/css/components/field.css
+++ b/resources/css/components/field.css
@@ -42,6 +42,20 @@
         min-width: 0;
     }
 
+    /* M3 § Text Fields, Behaviour: "compact breakpoints can let a text field span full width;
+     * medium/expanded should bound it with flexible margins/other containers — never let it span the
+     * full width of a large screen." The site names no number, so 40rem is this package's: it is
+     * under half the `large` class's 1200px, a little over the `expanded` class's half, and holds
+     * about the 70 characters body-large reads best at. It is a ceiling, not a width — a narrower
+     * pane still gets a narrower field. A `max-w-*` class from the call site beats it, because
+     * utilities come after this layer, and `full` takes it off for a field that really is the width
+     * of its pane (a search-and-filter row, an editor). Below `medium` nothing is bounded. */
+    @media (width >= 37.5rem) {
+        .field:not([data-full]) {
+            max-width: 40rem;
+        }
+    }
+
     /* A filled field's resting indicator line is on-surface-variant, where an outline is outline. */
     .field[data-variant="filled"] {
         --field-edge: var(--md-sys-color-on-surface-variant);
diff --git a/resources/views/components/field.blade.php b/resources/views/components/field.blade.php
index 5d4a2401..2a965b45 100644
--- a/resources/views/components/field.blade.php
+++ b/resources/views/components/field.blade.php
@@ -21,6 +21,10 @@
      "Character count, 5/20", M3's own label, from a polite region a second after typing stops rather
      than on every keystroke, which would talk over the typing.
 
+     From `medium` the field is no wider than 40rem, because M3 asks that a text field never span
+     the full width of a large screen (§ Text Fields, Behaviour); a `max-w-*` class from the call
+     site beats that, and `full` takes it off altogether.
+
      `class` from the call site lands on the outermost element, never the control, so a margin or
      a width is safe here. --}}
 
@@ -38,6 +42,7 @@
     'floated' => false,
     'mono' => false,
     'counter' => null,
+    'full' => false,
 ])
 
 @php
@@ -58,6 +63,7 @@
     @if ($messages !== []) data-invalid @endif
     @if ($floated) data-floated @endif
     @if ($mono) data-mono @endif
+    @if ($full) data-full @endif
 >
     <div class="field-box">
         @if ($icon)
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index c82698c2..8c87cb35 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -5,7 +5,8 @@
      and `mono` for a field that holds code. `clearable` adds a trailing button that empties the
      field once it holds something; `copyable` one that copies its value and says so in a snackbar
      (a share link, a token). `counter` counts the characters used against `maxlength`, at the end of
-     the supporting-text row. Every other attribute reaches the `<input>`: `type`, `min`, `step`,
+     the supporting-text row; `full` lets the field span its pane past the 40rem M3 bounds it to
+     from `medium`. Every other attribute reaches the `<input>`: `type`, `min`, `step`,
      `readonly`, `wire:model` and the rest. Errors are read from the bag under the `wire:model` name.
 
      The placeholder is a single space when none is given, because the label can only tell an
@@ -23,6 +24,7 @@
     'clearable' => false,
     'copyable' => false,
     'counter' => false,
+    'full' => false,
     'size' => 'md',
     'variant' => null,
     'mono' => false,
@@ -39,7 +41,7 @@
     $max = $counter ? $attributes->get('maxlength') : null;
 @endphp
 
-<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
+<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :counter="$max" :$full :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
     <input
         {{ $attributes->except(['class', 'id', 'placeholder'])->merge(['type' => 'text']) }}
         id="{{ $id }}"
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
index 84f5e5a9..29e3c4d1 100644
--- a/resources/views/components/textarea.blade.php
+++ b/resources/views/components/textarea.blade.php
@@ -3,8 +3,9 @@
      It starts at `rows` lines (3) and grows with what is typed up to `max-rows`, then scrolls;
      `:autogrow="false"` keeps it at `rows` and lets it be resized by hand, vertically only, so a
      form's column never moves. The label rests on the first line rather than in the middle of the
-     box. `label`, `hint`, `variant`, and `counter` for M3's character counter against `maxlength`;
-     every other attribute reaches the `<textarea>`. --}}
+     box. `label`, `hint`, `variant`, `counter` for M3's character counter against `maxlength`, and
+     `full` to span the pane past the 40rem M3 bounds a field to from `medium`; every other
+     attribute reaches the `<textarea>`. --}}
 
 @props([
     'label' => null,
@@ -15,6 +16,7 @@
     'maxRows' => null,
     'autogrow' => true,
     'counter' => false,
+    'full' => false,
 ])
 
 @php
@@ -28,7 +30,7 @@
     $max = $counter ? $attributes->get('maxlength') : null;
 @endphp
 
-<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
+<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :counter="$max" :$full :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
     <textarea
         {{ $attributes->except(['class', 'id', 'placeholder']) }}
         id="{{ $id }}"
diff --git a/resources/views/showcase/sections/fields.blade.php b/resources/views/showcase/sections/fields.blade.php
index 644b84c4..8dba5072 100644
--- a/resources/views/showcase/sections/fields.blade.php
+++ b/resources/views/showcase/sections/fields.blade.php
@@ -41,6 +41,14 @@
                 </div>
             </div>
             BLADE,
+        'Width at medium and above' => <<<'BLADE'
+            <div class="w-full space-y-4">
+                {{-- M3: never let a text field span the full width of a large screen. From medium it stops at 40rem. --}}
+                <x-input label="Bounded, the default" hint="No wider than 40rem from medium, however wide the pane is" />
+                <x-input label="Narrower" class="max-w-xs" hint="A max-w-* class from the call site wins" />
+                <x-input label="The width of the pane" full icon="search" hint="`full` takes the bound off — for a search row or an editor" />
+            </div>
+            BLADE,
         'Character counter' => <<<'BLADE'
             <div class="grid w-full gap-6 medium:grid-cols-2">
                 <div class="grid content-start gap-4">
diff --git a/tests/Feature/Components/FieldTest.php b/tests/Feature/Components/FieldTest.php
index a25a781a..10291775 100644
--- a/tests/Feature/Components/FieldTest.php
+++ b/tests/Feature/Components/FieldTest.php
@@ -170,6 +170,16 @@ it('shows no counter without `counter` or without a maximum to count against', f
         ->and((string) $this->blade('<x-textarea label="Note" counter />'))->not->toContain('field-counter');
 });
 
+it('bounds a field\'s width from medium unless it is told to fill its pane', function () {
+    expect(file_get_contents(__DIR__.'/../../../resources/css/components/field.css'))
+        ->toContain('@media (width >= 37.5rem)')
+        ->toMatch('/\.field:not\(\[data-full\]\)\s*\{\s*max-width: 40rem;/');
+
+    expect((string) $this->blade('<x-input label="Share name" full />'))->toContain('data-full')
+        ->and((string) $this->blade('<x-textarea label="Message" full />'))->toContain('data-full')
+        ->and((string) $this->blade('<x-input label="Share name" />'))->not->toContain('data-full');
+});
+
 it('lays out a form with its actions under an optional divider', function () {
     $html = (string) $this->blade(<<<'BLADE'
         <x-form wire:submit="save" separator>

From cc91e99a5d196b6c10cef5b14c868caae1e76af8 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:24:02 +0200
Subject: [PATCH 3/7] Say how M3 wants a checkbox group laid out at expanded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 § Checkbox, Behaviour asks that from expanded (840px) related checkboxes be
gathered into a contained region rather than left as one long column. That is a
rule about the page around the control, not about the control, so it is written
down rather than built: the component's header and its SKILL.md entry now say
it, and the showcase lays a group out in an `expanded:grid-cols-2` card (plan
step 24, audit docs/audits/m3-alignment/inputs.md § Missing).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../livewire-material-development/SKILL.md    |  2 +-
 resources/views/components/checkbox.blade.php |  8 ++++++-
 .../views/showcase/sections/fields.blade.php  | 17 ++++++++++++++
 tests/Feature/Components/SelectionTest.php    | 23 +++++++++++++++++++
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index 74511648..56e114af 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -565,7 +565,7 @@ M3 text fields. `variant`: `outlined` or `filled`; without it, `config('livewire
 
 M3 selection controls on native inputs; the whole row is the label.
 
-- `<x-checkbox label hint right indeterminate />` — `indeterminate` for a "select all" whose items are partly ticked (bind it to a server expression; it follows every render).
+- `<x-checkbox label hint right indeterminate />` — `indeterminate` for a "select all" whose items are partly ticked (bind it to a server expression; it follows every render). Grouping is yours: from `expanded` (840px) M3 wants a set of related checkboxes gathered into a contained region rather than one long column, so wrap the set in `<div class="grid gap-4 expanded:grid-cols-2">` (or a card or side sheet) under a heading that names what the group asks.
 - `<x-radio label wire:model :options inline />` — options `['id', 'name', 'hint', 'disabled']` (`option-value`, `option-label`, `option-hint`); `value` checks an option without `wire:model`; `name` names an unbound group. M3 stacks radios and cautions against a row at any width, so reach for `inline` only for two or three short labels; it also wants five options or fewer and one of them chosen when the page loads.
 - `<x-toggle label hint right icons />` — M3 switch (`role="switch"`); `icons` puts a check and a cross on the handle, `icons="selected"` only the check. Without `label`, pass `aria-label`.
 
diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
index 150d0a28..9aaea1f8 100644
--- a/resources/views/components/checkbox.blade.php
+++ b/resources/views/components/checkbox.blade.php
@@ -10,7 +10,13 @@
      (resources/css/components/selection.css).
 
      Without a label — a "select all" in a table header, a row's tick — the row is only the 18px box,
-     so the box carries `touch-target` and catches presses over M3's 48px minimum. --}}
+     so the box carries `touch-target` and catches presses over M3's 48px minimum.
+
+     Grouping is the caller's, not this component's: M3 asks that from `expanded` (840px) a set of
+     related checkboxes be gathered into a contained region rather than left as one long column
+     (docs/reference/m3/components-navigation-selection-inputs.md § Checkbox, Behaviour). Lay the
+     group out yourself — `<div class="grid gap-4 expanded:grid-cols-2">` around the checkboxes, or a
+     `<x-card>` or side sheet holding them — and give the group a heading that names what it asks. --}}
 
 @props([
     'label' => null,
diff --git a/resources/views/showcase/sections/fields.blade.php b/resources/views/showcase/sections/fields.blade.php
index 8dba5072..0ae1bbed 100644
--- a/resources/views/showcase/sections/fields.blade.php
+++ b/resources/views/showcase/sections/fields.blade.php
@@ -92,6 +92,23 @@
                 </div>
             </div>
             BLADE,
+        'A checkbox group at expanded' => <<<'BLADE'
+            {{-- M3: from expanded (840px), gather related checkboxes into a contained region instead of one long column. --}}
+            <x-card variant="outlined" class="w-full max-w-2xl">
+                <fieldset>
+                    <legend class="mb-4 type-title-sm text-on-surface">Tell me about</legend>
+
+                    <div class="grid gap-4 expanded:grid-cols-2">
+                        <x-checkbox label="Downloads" name="notify[]" value="downloads" checked />
+                        <x-checkbox label="Comments" name="notify[]" value="comments" />
+                        <x-checkbox label="Expiring shares" name="notify[]" value="expiring" checked />
+                        <x-checkbox label="Failed uploads" name="notify[]" value="failed" />
+                        <x-checkbox label="New team members" name="notify[]" value="members" />
+                        <x-checkbox label="Weekly summary" name="notify[]" value="summary" />
+                    </div>
+                </fieldset>
+            </x-card>
+            BLADE,
         'Radio buttons' => <<<'BLADE'
             <div class="grid w-full gap-6 medium:grid-cols-2">
                 <x-radio label="Who can open the link" name="showcase-audience" value="password" :options="[['id' => 'anyone', 'name' => 'Anyone with the link'], ['id' => 'password', 'name' => 'Anyone with the password', 'hint' => 'Share the password separately'], ['id' => 'team', 'name' => 'My team only', 'disabled' => true]]" />
diff --git a/tests/Feature/Components/SelectionTest.php b/tests/Feature/Components/SelectionTest.php
index d25d5d85..b7e083e7 100644
--- a/tests/Feature/Components/SelectionTest.php
+++ b/tests/Feature/Components/SelectionTest.php
@@ -37,6 +37,29 @@ it('gives a selection control without a label a 48px target', function () {
         ->and((string) $this->blade('<x-radio :options="[[\'id\' => \'a\', \'name\' => \'A\']]" />'))->not->toContain('touch-target');
 });
 
+it('leaves a checkbox group to the caller and says how M3 wants it laid out', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <fieldset>
+            <legend>Tell me about</legend>
+            <div class="grid gap-4 expanded:grid-cols-2">
+                <x-checkbox label="Downloads" name="notify[]" value="downloads" />
+                <x-checkbox label="Comments" name="notify[]" value="comments" />
+            </div>
+        </fieldset>
+        BLADE);
+
+    expect($html)
+        ->toContain('class="grid gap-4 expanded:grid-cols-2"')
+        ->toContain('Downloads')
+        ->toContain('Comments')
+        ->and(substr_count($html, 'data-checkbox'))->toBe(2);
+
+    // The rule is guidance, not markup, so the component's header has to carry it.
+    expect(file_get_contents(__DIR__.'/../../../resources/views/components/checkbox.blade.php'))
+        ->toContain('expanded')
+        ->toContain('contained region');
+});
+
 it('puts a checkbox at the end of its row on request', function () {
     expect((string) $this->blade('<x-checkbox label="Show" right />'))->toContain('flex-row-reverse justify-between');
 });

From 790ef93c6a8b1c2e6fc4c5e116e073d16c05399f Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:31:07 +0200
Subject: [PATCH 4/7] Stand a slider up with orientation="vertical"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 Expressive's configuration table lists a vertical orientation the library
had no prop for (plan step 24, audit docs/audits/m3-alignment/inputs.md
§ Missing). The drawing is the horizontal one, laid out as long as the slider
is tall inside a size container and turned a quarter anticlockwise, so the
geometry, the sizes and the tokens are untouched; the value label and the inset
icon are turned back so they read across. The keyboard stays the native range's
— Up and Right raise, Down and Left lower — and the inputs say
aria-orientation. A vertical slider takes its length from its wrapper, so the
header, the SKILL.md entry and the showcase all say to give it a height. M3
keeps range sliders horizontal, so `range` wins over `orientation`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../livewire-material-development/SKILL.md    |  7 ++
 resources/js/slider.js                        | 60 ++++++++++------
 resources/views/components/slider.blade.php   | 68 +++++++++++++++----
 .../views/showcase/sections/sliders.blade.php | 12 +++-
 tests/Feature/Components/SliderTest.php       | 30 +++++++-
 5 files changed, 144 insertions(+), 33 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index 56e114af..71e2bd06 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -597,10 +597,17 @@ M3 Expressive's slider on native `<input type="range">`s (one per handle), so th
 | `ticks` | `false` | a mark per step (up to 200, hidden while closer than 8px); the handle sits on the marks |
 | `value-label` | `drag` | `drag` (while pressed, dragged or keyboard-focused), `always`, `never` |
 | `color` | `primary` | `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info` |
+| `orientation` | `horizontal` | `vertical` stands it up: the value grows upwards, the value label sits beside the handle, Up and Down move it. Ignored with `range` — M3 keeps range sliders horizontal |
 | `disabled` | `false` | |
 
 Other attributes go to the input(s). A `wire:model.live` slider sends while it is dragged, and a server render never moves a handle under the pointer (the drawing is `wire:ignore`); a value the server sets moves the handle after the morph. The binding gets `.number`, so values arrive as numbers. Its width is the container's unless a `w-*` class is passed.
 
+A vertical slider is as wide as a horizontal one is tall and as long as the wrapper it is in, so **give it a height** — `class="h-64"`, which the label and hint share. Without one it is 192px long.
+
+```blade
+<x-slider label="Volume" orientation="vertical" wire:model.live="volume" class="h-64" />
+```
+
 ### `<x-datepicker>`
 
 M3 date pickers on a text field. `wire:model` stores `Y-m-d` strings (`x-model` without Livewire).
diff --git a/resources/js/slider.js b/resources/js/slider.js
index 8f8a47aa..f8945571 100644
--- a/resources/js/slider.js
+++ b/resources/js/slider.js
@@ -15,6 +15,9 @@
  * Alpine writes into an input (`input.value = …`, which fires no event) is caught on the input's
  * own `value` setter, and attribute changes by a MutationObserver.
  *
+ * - Orientation: the geometry below is always the horizontal one. A vertical slider is that same
+ *   drawing turned a quarter by CSS, so only two things change here — the track's length is the
+ *   slider's height rather than its width, and a pointer is read along Y from the bottom edge up.
  * - Range: the handles never cross; an input that would pass the other is held at its value
  *   before any listener (x-model, wire:model) reads it.
  * - PageUp and PageDown move by Compose's page: a tenth of the steps, at least one and at most
@@ -224,6 +227,12 @@ function slider(root) {
         return { min, max: max > min ? max : min + 100, step: input.step === 'any' ? null : step > 0 ? step : 1 }
     }
 
+    /** M3 Expressive's second orientation: the drawing is turned a quarter, the geometry is not. */
+    const vertical = () => root.dataset.orientation === 'vertical'
+
+    /** The track's length: the slider's height while it stands up, its width while it lies down. */
+    const trackLength = () => Math.max((vertical() ? root.clientHeight : root.clientWidth) - HANDLE_WIDTH, 0)
+
     const values = () => inputs.map((input) => Number.parseFloat(input.value))
     const thumbOf = (input) => drawing?.querySelector(`[data-handle="${inputs.indexOf(input) === 1 ? 'end' : 'start'}"]`)
 
@@ -247,7 +256,7 @@ function slider(root) {
             return
         }
 
-        const width = Math.max(root.clientWidth - HANDLE_WIDTH, 0)
+        const width = trackLength()
         const size = SIZES[root.dataset.size] ?? SIZES.xs
         const { segments, stops, ticks, handles, activeTrack, endTrackStart } = geometry(width)
         const part = (selector) => drawing.querySelector(selector)
@@ -484,7 +493,7 @@ function slider(root) {
 
     const mutations = new MutationObserver(schedule)
     inputs.forEach((input) => mutations.observe(input, { attributes: true, attributeFilter: ['min', 'max', 'step', 'value', 'disabled'] }))
-    mutations.observe(root, { attributes: true, attributeFilter: ['data-size', 'data-centered', 'dir'] })
+    mutations.observe(root, { attributes: true, attributeFilter: ['data-size', 'data-centered', 'data-orientation', 'dir'] })
 
     const resizes = new ResizeObserver(schedule)
     resizes.observe(root)
@@ -511,39 +520,52 @@ function slider(root) {
             event.preventDefault()
 
             const box = root.getBoundingClientRect()
-            const width = Math.max(box.width - HANDLE_WIDTH, 0)
+            const upright = vertical()
+            const width = Math.max((upright ? box.height : box.width) - HANDLE_WIDTH, 0)
             const rtl = getComputedStyle(root).direction === 'rtl'
             const { min, max } = bounds()
             const handles = geometry(width).handles
 
-            const offset = (clientX) => clamp(rtl ? box.right - HANDLE_WIDTH / 2 - clientX : clientX - box.left - HANDLE_WIDTH / 2, 0, width)
-            const valueAt = (clientX) => min + (width > 0 ? offset(clientX) / width : 0) * (max - min)
+            // Where a pointer is along the track, and how far into it that is from the low end —
+            // the left edge lying down (the right one in a right-to-left page), the bottom standing up.
+            const along = (pointer) => (upright ? pointer.clientY : pointer.clientX)
+            const offset = (coordinate) =>
+                clamp(
+                    upright
+                        ? box.bottom - HANDLE_WIDTH / 2 - coordinate
+                        : rtl
+                          ? box.right - HANDLE_WIDTH / 2 - coordinate
+                          : coordinate - box.left - HANDLE_WIDTH / 2,
+                    0,
+                    width,
+                )
+            const valueAt = (coordinate) => min + (width > 0 ? offset(coordinate) / width : 0) * (max - min)
 
-            const startX = event.clientX
+            const start = along(event)
             const before = values()
             let dragging = event.pointerType !== 'touch'
             let index = null
 
             // The nearest handle; handles on top of each other wait for the first move's direction.
-            const choose = (clientX) => {
+            const choose = (coordinate) => {
                 if (!range) {
                     return 0
                 }
 
-                const x = offset(clientX)
-                const [start, end] = handles.map((handle) => Math.abs(handle - x))
+                const x = offset(coordinate)
+                const [toStart, toEnd] = handles.map((handle) => Math.abs(handle - x))
 
-                if (start !== end) {
-                    return start < end ? 0 : 1
+                if (toStart !== toEnd) {
+                    return toStart < toEnd ? 0 : 1
                 }
 
-                const moved = rtl ? startX - clientX : clientX - startX
+                const moved = upright || rtl ? start - coordinate : coordinate - start
 
                 return moved === 0 ? null : moved < 0 ? 0 : 1
             }
 
-            const follow = (clientX) => {
-                index ??= choose(clientX)
+            const follow = (coordinate) => {
+                index ??= choose(coordinate)
 
                 if (index === null) {
                     return
@@ -555,7 +577,7 @@ function slider(root) {
                 }
 
                 pressed(index)
-                commit(index, valueAt(clientX))
+                commit(index, valueAt(coordinate))
             }
 
             const move = (moveEvent) => {
@@ -563,12 +585,12 @@ function slider(root) {
                     return
                 }
 
-                if (!dragging && Math.abs(moveEvent.clientX - startX) < TOUCH_SLOP) {
+                if (!dragging && Math.abs(along(moveEvent) - start) < TOUCH_SLOP) {
                     return
                 }
 
                 dragging = true
-                follow(moveEvent.clientX)
+                follow(along(moveEvent))
             }
 
             const end = (endEvent) => {
@@ -577,7 +599,7 @@ function slider(root) {
                 }
 
                 if (endEvent.type === 'pointerup' && !dragging) {
-                    follow(endEvent.clientX)
+                    follow(along(endEvent))
                 }
 
                 release()
@@ -602,7 +624,7 @@ function slider(root) {
             window.addEventListener('pointercancel', end)
 
             if (dragging) {
-                follow(event.clientX)
+                follow(start)
             }
         },
     }
diff --git a/resources/views/components/slider.blade.php b/resources/views/components/slider.blade.php
index 6fda8939..6853a75a 100644
--- a/resources/views/components/slider.blade.php
+++ b/resources/views/components/slider.blade.php
@@ -26,6 +26,15 @@
      `secondary`, `tertiary`, `error`, `success`, `warning`, `info` — the active track and the
      handle; the inactive track is its container (secondary-container for primary).
 
+     `orientation="vertical"` stands the slider up, M3 Expressive's second orientation: the same
+     drawing, turned a quarter so the value grows upwards, with the value label beside the handle
+     instead of above it and every size unchanged. The keyboard is the native range's, so Up and
+     Right raise the value and Down and Left lower it. A vertical slider is as wide as a horizontal
+     one is tall and takes its length from the wrapper, so give it an explicit height —
+     `class="h-64"`, which the label and the hint share; without one it is 192px. M3 keeps range
+     sliders horizontal ("never use range sliders vertically — too much cognitive load"), so
+     `range` wins over `orientation`.
+
      `label` is shown above and names the input (with `range`, the group; its handles are "Range
      start" and "Range end"); `hint` goes below, and a validation message for the bound property
      (or `name`) replaces it. Other attributes go to the input(s).
@@ -71,6 +80,7 @@
     'valueLabel' => 'drag',
     'icon' => null,
     'color' => 'primary',
+    'orientation' => 'horizontal',
     'disabled' => false,
 ])
 
@@ -81,6 +91,8 @@
     $color = in_array($color, ['primary', 'secondary', 'tertiary', 'error', 'success', 'warning', 'info'], true) ? $color : 'primary';
     $valueLabel = in_array($valueLabel, ['always', 'drag', 'never'], true) ? $valueLabel : 'drag';
     $centered = $centered && ! $range;
+    // M3 § Sliders, Behaviour: "range sliders should stay horizontal only".
+    $vertical = $orientation === 'vertical' && ! $range;
 
     $minimum = is_numeric($min) ? (float) $min : 0.0;
     $maximum = is_numeric($max) && (float) $max > $minimum ? (float) $max : $minimum + 100;
@@ -267,10 +279,19 @@
     ][$size];
     // The label's bottom sits 4px above the handle: half of 44, 44, 52, 68 and 108px, plus 4.
     $labelBottom = ['xs' => 'bottom-[calc(50%+1.625rem)]', 'sm' => 'bottom-[calc(50%+1.625rem)]', 'md' => 'bottom-[calc(50%+1.875rem)]', 'lg' => 'bottom-[calc(50%+2.375rem)]', 'xl' => 'bottom-[calc(50%+3.625rem)]'][$size];
+    // The measure across the slider — the handle's height, and so the slider's own. Standing up it
+    // is the width instead, and the length comes from the wrapper the caller sized.
+    $across = [
+        'xs' => $vertical ? 'w-12' : 'h-12',
+        'sm' => $vertical ? 'w-12' : 'h-12',
+        'md' => $vertical ? 'w-13' : 'h-13',
+        'lg' => $vertical ? 'w-17' : 'h-17',
+        'xl' => $vertical ? 'w-27' : 'h-27',
+    ][$size];
     $thumbs = $range ? ['start', 'end'] : ['start'];
 @endphp
 
-<div {{ $attributes->only(['class', 'style', 'wire:key'])->class(['min-w-0', 'w-full' => ! $sized]) }}>
+<div {{ $attributes->only(['class', 'style', 'wire:key'])->class(['min-w-0', 'w-full' => ! $sized && ! $vertical, 'flex w-fit flex-col' => $vertical]) }}>
     @if (filled($label))
         @if ($range)
             <span id="{{ $id }}-label" class="mb-2 block type-label-lg text-on-surface-variant">{{ $label }}</span>
@@ -284,20 +305,31 @@
         x-on:pointerdown="press($event)"
         data-slider
         data-size="{{ $size }}"
+        @if ($vertical) data-orientation="vertical" @endif
         @if ($centered) data-centered @endif
         @if ($range) role="group" @if (filled($label)) aria-labelledby="{{ $id }}-label" @endif @endif
         @class([
-            'group/slider relative cursor-pointer touch-pan-y select-none has-disabled:cursor-not-allowed',
-            'h-12' => in_array($size, ['xs', 'sm'], true),
-            'h-13' => $size === 'md',
-            'h-17' => $size === 'lg',
-            'h-27' => $size === 'xl',
-            // Room above for a label that never hides: half the handle, 4px, and the 44px pill.
-            'mt-12' => $valueLabel === 'always',
+            'group/slider relative cursor-pointer select-none has-disabled:cursor-not-allowed',
+            $across,
+            'touch-pan-y' => ! $vertical,
+            // Standing up: 192px long unless the wrapper says otherwise, and a size container,
+            // which is what lets the drawing below be as long as this is tall.
+            'touch-pan-x h-48 min-h-0 flex-auto [container-type:size]' => $vertical,
+            // Room for a label that never hides: half the handle, 4px and the 44px pill — above the
+            // track when the slider lies down, beside it when it stands up.
+            'mt-12' => $valueLabel === 'always' && ! $vertical,
+            'ms-12' => $valueLabel === 'always' && $vertical,
             'noscript:h-auto noscript:cursor-auto noscript:space-y-2',
         ])
     >
-        <div data-slider-drawing wire:ignore aria-hidden="true" class="pointer-events-none absolute inset-y-0 inset-x-0.5 rtl:-scale-x-100 noscript:hidden">
+        <div data-slider-drawing wire:ignore aria-hidden="true" @class([
+            'pointer-events-none absolute noscript:hidden',
+            'inset-y-0 inset-x-0.5 rtl:-scale-x-100' => ! $vertical,
+            // The same drawing, laid out as long as the slider is tall and then turned a quarter
+            // anticlockwise so the value grows upwards. Everything inside it — the segments, the
+            // ticks, the handle and its label — is placed as if the slider were lying down.
+            'top-1/2 left-1/2 h-[100cqw] w-[calc(100cqh-0.25rem)] -translate-1/2 -rotate-90' => $vertical,
+        ])>
             <div @class(['absolute inset-x-0 top-1/2 -translate-y-1/2', $trackHeight])>
                 @foreach (['start' => $inactiveInk[$color], 'active' => $activeInk[$color], 'end' => $inactiveInk[$color]] as $part => $ink)
                     <span
@@ -337,7 +369,14 @@
                         data-track-icon
                         @if (! $iconInActive && ! $iconInInactive) hidden @endif
                         @if ($iconInActive) data-active @endif
-                        @class(['absolute top-1/2 flex -translate-y-1/2 rtl:-scale-x-100', $iconInk[$color], 'group-has-disabled/slider:text-on-surface/38'])
+                        @class([
+                            'absolute top-1/2 flex -translate-y-1/2',
+                            'rtl:-scale-x-100' => ! $vertical,
+                            // Turned back the quarter the drawing turns, so the glyph stands up.
+                            'rotate-90' => $vertical,
+                            $iconInk[$color],
+                            'group-has-disabled/slider:text-on-surface/38',
+                        ])
                         style="left: {{ $calc($iconAt) }}"
                     >
                         <x-livewire-material::icon :name="$icon" :class="$iconSize === 32 ? 'size-8' : 'size-6'" />
@@ -358,11 +397,15 @@
                     ])></span>
 
                     @if ($valueLabel !== 'never')
-                        <span @class(['absolute left-0 z-10 flex -translate-x-1/2 justify-center rtl:-scale-x-100', $labelBottom])>
+                        <span @class(['absolute left-0 z-10 flex -translate-x-1/2 justify-center', 'rtl:-scale-x-100' => ! $vertical, $labelBottom])>
                             <span
                                 data-value-label
                                 @class([
-                                    'flex h-11 min-w-12 origin-bottom items-center justify-center whitespace-nowrap rounded-corner-full bg-inverse-surface px-2.5 text-inverse-on-surface type-label-lg',
+                                    'flex h-11 min-w-12 items-center justify-center whitespace-nowrap rounded-corner-full bg-inverse-surface px-2.5 text-inverse-on-surface type-label-lg',
+                                    'origin-bottom' => ! $vertical,
+                                    // Turned back the quarter the drawing turns: the pill lands
+                                    // beside the handle rather than above it, and reads across.
+                                    'rotate-90' => $vertical,
                                     'transition-[opacity,scale] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast',
                                     'opacity-0 scale-75 group-data-pressed/thumb:opacity-100 group-data-pressed/thumb:scale-100 group-data-focused/thumb:opacity-100 group-data-focused/thumb:scale-100' => $valueLabel === 'drag',
                                 ])
@@ -383,6 +426,7 @@
                 step="{{ $continuous ? 'any' : $format($interval) }}"
                 value="{{ $format($values[$index]) }}"
                 data-thumb="{{ $thumb }}"
+                @if ($vertical) aria-orientation="vertical" @endif
                 @if ($range) aria-label="{{ $thumb === 'start' ? __('Range start') : __('Range end') }}" @endif
                 @if ($described) aria-describedby="{{ $described }}" @endif
                 @if ($messages !== []) aria-invalid="true" @endif
diff --git a/resources/views/showcase/sections/sliders.blade.php b/resources/views/showcase/sections/sliders.blade.php
index fee5b5c6..03f1c2dc 100644
--- a/resources/views/showcase/sections/sliders.blade.php
+++ b/resources/views/showcase/sections/sliders.blade.php
@@ -22,6 +22,16 @@
                 <x-slider label="Balance" value="15" :min="-50" :max="50" centered />
             </div>
             BLADE,
+        'Vertical' => <<<'BLADE'
+            {{-- M3 Expressive's second orientation. A vertical slider needs a height: it is on the wrapper, which the label and hint share. --}}
+            <div class="flex flex-wrap items-end gap-10">
+                <x-slider label="Volume" orientation="vertical" value="40" class="h-64" hint="Up and Down" />
+                <x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks class="h-64" />
+                <x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" class="h-64" />
+                <x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" class="h-64" />
+                <x-slider label="Locked" orientation="vertical" value="25" disabled class="h-64" />
+            </div>
+            BLADE,
         'Colours and value labels' => <<<'BLADE'
             <div class="grid w-full gap-8 expanded:grid-cols-3">
                 <x-slider label="Always labelled" value="55" color="secondary" value-label="always" size="sm" />
@@ -48,7 +58,7 @@
     <h2 class="type-headline-md">Sliders</h2>
 
     <p class="max-w-3xl type-body-md text-on-surface-variant">
-        <code>&lt;x-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, five sizes, ticks, value labels and an inset icon.
+        <code>&lt;x-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, horizontal or vertical, five sizes, ticks, value labels and an inset icon.
     </p>
 
     @foreach ($examples as $title => $code)
diff --git a/tests/Feature/Components/SliderTest.php b/tests/Feature/Components/SliderTest.php
index ff6a6743..9b8bd132 100644
--- a/tests/Feature/Components/SliderTest.php
+++ b/tests/Feature/Components/SliderTest.php
@@ -38,7 +38,8 @@ it('draws the first frame on the server: the track split around the handle, and
 
 it('draws M3\'s 44x48 value indicator and puts the stop on the inactive track', function () {
     expect((string) $this->blade('<x-slider value="40" />'))
-        ->toContain('flex h-11 min-w-12 origin-bottom')
+        ->toContain('flex h-11 min-w-12 items-center')
+        ->toMatch('/data-value-label[^>]*class="[^"]*origin-bottom/')
         ->toMatch('/data-stop="end"[^>]*class="[^"]*bg-on-secondary-container/');
 });
 
@@ -196,6 +197,33 @@ it('shows the value label on drag, always, or never', function () {
     expect((string) $this->blade('<x-slider value-label="never" />'))->not->toContain('data-value-label');
 });
 
+it('stands a slider up on request, turning the drawing a quarter', function () {
+    $html = (string) $this->blade('<x-slider label="Volume" orientation="vertical" value="40" class="h-64" />');
+
+    expect($html)
+        ->toContain('data-orientation="vertical"')
+        ->toContain('aria-orientation="vertical"')
+        // The slider is as wide as a horizontal one is tall, and as long as its wrapper.
+        ->toContain('w-12')
+        ->toContain('touch-pan-x h-48 min-h-0 flex-auto [container-type:size]')
+        ->toContain('h-[100cqw] w-[calc(100cqh-0.25rem)] -translate-1/2 -rotate-90')
+        // The value label is turned back, so it lands beside the handle and reads across.
+        ->toMatch('/data-value-label[^>]*class="[^"]*rotate-90/')
+        ->not->toContain('origin-bottom')
+        ->not->toContain('rtl:-scale-x-100');
+
+    // The sizes are the horizontal ones, across instead of along.
+    expect((string) $this->blade('<x-slider orientation="vertical" size="xl" />'))->toContain('w-27')
+        ->and((string) $this->blade('<x-slider orientation="vertical" value-label="always" />'))->toContain('ms-12');
+});
+
+it('keeps a range slider horizontal, as M3 asks', function () {
+    expect((string) $this->blade('<x-slider label="Price" range orientation="vertical" />'))
+        ->not->toContain('data-orientation')
+        ->not->toContain('aria-orientation')
+        ->toContain('h-12');
+});
+
 it('draws in the colour and its container, and greys out when disabled', function (string $color, string $active, string $inactive) {
     expect((string) $this->blade('<x-slider :color="$color" value="50" disabled />', ['color' => $color]))
         ->toContain("absolute inset-y-0 {$active} group-has-disabled/slider:bg-on-surface/38")

From 2662040c246a3405b0a5b0c9ff0f5b96fc3f5fee Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:36:49 +0200
Subject: [PATCH 5/7] Open a range picker full screen on a compact window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 § Date Pickers, Anatomy describes a 14-element full-screen range picker for
compact breakpoints; `<x-datepicker range>` always used the 360px modal dialog,
which on a phone is cramped for a two-month scroll (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). A third presentation, "full",
joins docked and modal: the same dialog grown to the screen, an app bar with a
close button and Save, the supporting text and the range as the headline over a
divider, the weekday labels held at the top, and the months in one vertically
scrolling list, each under its own label. The grid now draws from one `rows`
getter, which is this month's weeks everywhere else, so the docked and
single-date pickers render exactly as before. The list is a window of months
grown by the scroll and by the keyboard, since nothing here is lazy.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../livewire-material-development/SKILL.md    |   2 +-
 resources/css/components/datepicker.css       | 101 ++++++++++++++--
 resources/js/datepicker.js                    | 113 ++++++++++++++++--
 .../views/components/datepicker.blade.php     |  43 ++++++-
 .../views/showcase/sections/pickers.blade.php |   3 +-
 tests/Feature/Components/DatepickerTest.php   |  35 ++++++
 6 files changed, 277 insertions(+), 20 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index 71e2bd06..8b9d8099 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -622,7 +622,7 @@ M3 date pickers on a text field. `wire:model` stores `Y-m-d` strings (`x-model`
 | Prop | Default | |
 |---|---|---|
 | `mode` | `docked` | `docked`: type a date (in the locale's numeric format) or pick one from a calendar under the field, which opens as a dialog on a compact window (below `medium`), as M3 asks; `modal`: the field opens a calendar dialog; `input`: the dialog opens on a text field. Both dialogs switch between calendar and typing |
-| `range` | `false` | binds one array property, `['start' => 'Y-m-d', 'end' => 'Y-m-d']` (either may be null); errors for `trip`, `trip.start` and `trip.end` show on the field |
+| `range` | `false` | binds one array property, `['start' => 'Y-m-d', 'end' => 'Y-m-d']` (either may be null); errors for `trip`, `trip.start` and `trip.end` show on the field. On a compact window (below `medium`) it opens as M3's full-screen range picker: an app bar with a close button and **Save**, the range as the headline, and the months in one scrolling list instead of stepped one at a time |
 | `min`, `max` | `null` | `Y-m-d` or a date; days outside are disabled and the keyboard stays inside |
 | `label`, `hint`, `icon`, `variant`, `size` | | the field's |
 | `value` | `null` | the initial value without `wire:model` |
diff --git a/resources/css/components/datepicker.css b/resources/css/components/datepicker.css
index f55d5c8d..1d10d92e 100644
--- a/resources/css/components/datepicker.css
+++ b/resources/css/components/datepicker.css
@@ -1,10 +1,12 @@
 /*
  * M3's date pickers — docked, modal and modal input (resources/views/components/datepicker.blade.php).
  *
- * One `<dialog>` wears both: docked it is a popover hung under the field by CSS anchor positioning
- * (large corner), modal it is opened with `showModal()` over a scrim (extra-large corner, with M3's
- * header: a title, the chosen date as the headline, and the switch between calendar and typing).
- * Both are 360px of surface-container-high at elevation 3.
+ * One `<dialog>` wears all three: docked it is a popover hung under the field by CSS anchor
+ * positioning (large corner), modal it is opened with `showModal()` over a scrim (extra-large
+ * corner, with M3's header: a title, the chosen date as the headline, and the switch between
+ * calendar and typing), and full — a `range` picker on a compact window — is that modal dialog
+ * grown to the whole screen, M3's full-screen range picker. The first two are 360px of
+ * surface-container-high at elevation 3; the third keeps the colour and drops the corner.
  *
  * Values from DatePickerModalTokens and DateInputModalTokens (androidx Compose Material 3, commit
  * 27cf9a7d5788aa0f5f2d8b6699ce279560daf326) and the layout of DatePicker.kt, DateRangePicker.kt and
@@ -13,15 +15,19 @@
  *
  *   [data-datepicker]                   the root: the field, its support line, the dialog
  *     [data-datepicker-support]         the hint, a server error, or what is wrong with the typed date
- *     [data-datepicker-picker]          the <dialog>; data-presentation="docked" | "modal"
+ *     [data-datepicker-picker]          the <dialog>; data-presentation="docked" | "modal" | "full"
  *       [data-datepicker-surface]
  *         [data-datepicker-header]      modal only: title, headline, switch
- *         [data-datepicker-calendar]
+ *         [data-datepicker-full]        full only: [data-datepicker-app-bar] (close, switch, Save)
+ *                                       and [data-datepicker-full-headline] (title, headline)
+ *         [data-datepicker-calendar]    the scroller, full screen
  *           [data-datepicker-nav]       month and year: one menu button and arrows (modal),
  *                                       or a month and a year stepper (docked, data-docked)
  *           [data-datepicker-grid]      the weekdays and six weeks of [data-datepicker-day] cells:
  *                                       data-today, data-selected, data-start, data-end,
- *                                       data-between, data-outside, data-blank, aria-disabled
+ *                                       data-between, data-outside, data-blank, aria-disabled —
+ *                                       full screen, every month of the window under a
+ *                                       [data-datepicker-month-label] row
  *           [data-datepicker-years]     the modal year grid
  *           [data-datepicker-menu]      a docked month or year list of [data-datepicker-option]s
  *         [data-datepicker-entry]       the text field(s) of the modal input
@@ -128,6 +134,87 @@
         border-radius: var(--md-sys-shape-corner-xl);
     }
 
+    /* ---- The full-screen range picker (compact) ------------------------------------------------- */
+
+    /* M3 § Date Pickers: a range picker at a compact breakpoint is a full-screen dialog, "covering
+     * the whole screen for readability and touch-target size", with a close (×) icon button and a
+     * Save confirmation instead of Cancel and OK. Its anatomy is the modal picker's parts in a
+     * different order: an app bar, the supporting text and the range as the headline, a divider, the
+     * day-of-week labels, and a vertically scrolling list of months under them, each with its label.
+     * Only the months scroll; everything above them stays where it is. */
+    [data-datepicker-picker][data-presentation="full"] {
+        inset: 0;
+        width: 100vw;
+        max-width: none;
+        height: 100dvh;
+        max-height: none;
+        margin: 0;
+    }
+
+    [data-datepicker-picker][data-presentation="full"] [data-datepicker-surface] {
+        height: 100%;
+        max-height: none;
+        padding-block: var(--material-safe-top, env(safe-area-inset-top)) var(--material-safe-bottom, env(safe-area-inset-bottom));
+        overflow: hidden;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    [data-datepicker-full] {
+        flex: none;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface-variant);
+    }
+
+    [data-datepicker-app-bar] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        height: 4rem;
+        padding-inline: 0.25rem 0.75rem;
+    }
+
+    [data-datepicker-app-bar-actions] {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    [data-datepicker-full-headline] {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        padding: 0 1.5rem 1rem;
+    }
+
+    /* The calendar is the only part that scrolls, with the weekday header held at its top. */
+    [data-datepicker-picker][data-presentation="full"] [data-datepicker-calendar] {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    [data-datepicker-picker][data-presentation="full"] [data-datepicker-grid] thead th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: var(--md-sys-color-surface-container-high);
+    }
+
+    [data-datepicker-picker][data-presentation="full"] [data-datepicker-day] {
+        scroll-margin-block: 3rem;
+    }
+
+    [data-datepicker-month-label] {
+        padding: 1.25rem 0 0.5rem;
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-title-sm);
+        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
+        text-align: start;
+    }
+
     /* ---- The modal header ---------------------------------------------------------------------- */
 
     [data-datepicker-header] {
diff --git a/resources/js/datepicker.js b/resources/js/datepicker.js
index cc439c99..1ed26d78 100644
--- a/resources/js/datepicker.js
+++ b/resources/js/datepicker.js
@@ -2,12 +2,15 @@
  * `materialDatepicker`: the behaviour of `<x-datepicker>` — M3's docked, modal and modal-input
  * date pickers on one `<dialog>`.
  *
- * The dialog is shown two ways. Docked, it is a `popover="manual"` placed under the field by CSS
+ * The dialog is shown three ways. Docked, it is a `popover="manual"` placed under the field by CSS
  * anchor positioning; modal (the `modal` and `input` modes, and a docked picker on a compact
  * window — below `medium`, 600px, where M3 puts the picker in a dialog rather than under the
- * field) it is opened with `showModal()`. Everything a person sees in it is drawn by Alpine from
- * the state below, and the dialog is `wire:ignore`, so a Livewire render never touches it while
- * it is open.
+ * field) it is opened with `showModal()`; full, a `range` picker on a compact window, is that same
+ * modal dialog grown to the whole screen — M3's full-screen range picker, with an app bar carrying
+ * a close button and **Save**, the range as the headline, and a list of months scrolled through
+ * rather than stepped (§ Date Pickers, Anatomy). Everything a person sees in it is drawn by Alpine
+ * from the state below, and the dialog is `wire:ignore`, so a Livewire render never touches it
+ * while it is open.
  *
  * Dates are ISO strings (`2026-09-13`) throughout, computed in UTC so no time zone or daylight
  * saving change can move a day; only "today" is read in the browser's own zone. Month and weekday
@@ -33,6 +36,17 @@ const WEEK_STARTS_SATURDAY = 'AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY'.spli
 const YEARS_FROM = 1900
 const YEARS_TO = 2100
 
+/**
+ * The full-screen range picker scrolls through months rather than stepping between them, so it
+ * draws a window of them: this many either side of the month it opens on, grown by the same number
+ * whenever the scroll or the keyboard reaches an end. Compose's own list is lazy; this one is not,
+ * so the window stays small enough for the DOM it costs.
+ */
+const MONTH_WINDOW = 6
+
+/** How near an end of the month list a scroll has to come before the window grows. */
+const MONTH_EDGE = 400
+
 function pad(number, length = 2) {
     return String(number).padStart(length, '0')
 }
@@ -181,6 +195,9 @@ document.addEventListener('alpine:init', () => {
         entryError: '',
         today: localToday(),
         compact: false,
+        // The first and last month the full-screen range picker draws, as `yyyy-MM-01`.
+        monthsFrom: null,
+        monthsTo: null,
         refocus: true,
         // Set in init() from the config. Declared here, or Alpine writes them to the outermost
         // x-data scope, where every picker inside the same page scope would share the last one's.
@@ -436,11 +453,21 @@ document.addEventListener('alpine:init', () => {
             const value = this.current()
 
             this.today = localToday()
-            this.presentation = config.mode === 'docked' && !this.compact ? 'docked' : 'modal'
+            // M3 gives a range picker its own full-screen dialog at compact; everything else is the
+            // docked popover at medium and up, and the modal dialog otherwise.
+            this.presentation = config.range && this.compact ? 'full' : config.mode === 'docked' && !this.compact ? 'docked' : 'modal'
             this.typing = config.mode === 'input'
             this.view = 'days'
             this.draft = value
+            this.monthsFrom = null
+            this.monthsTo = null
             this.moveTo(this.start() ?? this.today, false)
+
+            if (this.presentation === 'full') {
+                this.monthsFrom = this.clampMonth(addMonths(this.shown, -MONTH_WINDOW))
+                this.monthsTo = this.clampMonth(addMonths(this.shown, MONTH_WINDOW))
+            }
+
             this.entryError = ''
             this.fillEntry()
             this.refocus = true
@@ -566,12 +593,61 @@ document.addEventListener('alpine:init', () => {
         moveTo(value, focus = true) {
             this.focused = this.clamp(value)
             this.shown = this.focused.slice(0, 8) + '01'
+            this.coverMonth(this.shown)
 
             if (focus) {
                 this.focusDay()
             }
         },
 
+        // ---- The full-screen range picker's list of months --------------------------------------
+
+        /** A month inside the years the picker allows, and inside `min` and `max`. */
+        clampMonth(month) {
+            const floor = this.min ? this.min.slice(0, 8) + '01' : `${pad(this.yearsFrom, 4)}-01-01`
+            const ceiling = this.max ? this.max.slice(0, 8) + '01' : `${pad(this.yearsTo, 4)}-12-01`
+
+            return month < floor ? floor : month > ceiling ? ceiling : month
+        },
+
+        /** Keeps a month the keyboard walked to inside the window the list draws. */
+        coverMonth(month) {
+            if (this.monthsFrom === null) {
+                return
+            }
+
+            if (month < this.monthsFrom) {
+                this.monthsFrom = this.clampMonth(month)
+            } else if (month > this.monthsTo) {
+                this.monthsTo = this.clampMonth(month)
+            }
+        },
+
+        /**
+         * Grows the window when the scroll comes near either end. Adding months above moves
+         * everything down, so the scroll is put back by however much the list grew.
+         */
+        extendMonths(event) {
+            if (this.presentation !== 'full' || this.monthsFrom === null) {
+                return
+            }
+
+            const list = event.currentTarget
+
+            if (list.scrollTop < MONTH_EDGE) {
+                const from = this.clampMonth(addMonths(this.monthsFrom, -MONTH_WINDOW))
+
+                if (from !== this.monthsFrom) {
+                    const before = list.scrollHeight
+
+                    this.monthsFrom = from
+                    this.$nextTick(() => (list.scrollTop += list.scrollHeight - before))
+                }
+            } else if (list.scrollHeight - list.scrollTop - list.clientHeight < MONTH_EDGE) {
+                this.monthsTo = this.clampMonth(addMonths(this.monthsTo, MONTH_WINDOW))
+            }
+        },
+
         /** The single date, or a range's start. */
         start() {
             const value = this.current()
@@ -805,8 +881,9 @@ document.addEventListener('alpine:init', () => {
             })
         },
 
-        get weeks() {
-            const [year, month] = parts(this.shown)
+        /** Six weeks of cells for one month, `yyyy-MM-01`. */
+        weeksOf(shownMonth) {
+            const [year, month] = parts(shownMonth)
             const first = utc(year, month, 1)
             const offset = (first.getUTCDay() - this.firstDay + 7) % 7
             const range = config.range ? (this.draft ?? { start: null, end: null }) : null
@@ -836,6 +913,28 @@ document.addEventListener('alpine:init', () => {
             }))
         },
 
+        /**
+         * The rows the grid draws: this month's six weeks, or — full screen — every month of the
+         * window, each headed by its name, which is M3's vertically scrolling range picker. A
+         * month's empty trailing weeks are dropped there, so one month follows the next.
+         */
+        get rows() {
+            const weeks = (month) => this.weeksOf(month).map((cells, row) => ({ key: `${month}-${row}`, cells }))
+
+            if (this.presentation !== 'full' || this.monthsFrom === null) {
+                return weeks(this.shown)
+            }
+
+            const rows = []
+
+            for (let month = this.monthsFrom; month <= this.monthsTo; month = addMonths(month, 1)) {
+                rows.push({ key: `label-${month}`, label: this.formats.monthYear.format(utc(...parts(month))) })
+                rows.push(...weeks(month).filter((row) => row.cells.some((cell) => !cell.blank)))
+            }
+
+            return rows
+        },
+
         get years() {
             const shown = parts(this.shown)[0]
             const current = parts(this.today)[0]
diff --git a/resources/views/components/datepicker.blade.php b/resources/views/components/datepicker.blade.php
index 033fec61..b869641d 100644
--- a/resources/views/components/datepicker.blade.php
+++ b/resources/views/components/datepicker.blade.php
@@ -10,6 +10,11 @@
        calendar in a dialog, with a pencil to switch to typing.
      - `input`: the same dialog, opened on its text field, with a calendar icon to switch back.
 
+     A `range` picker on a compact window (below `medium`) is M3's full-screen range picker instead
+     of the 360px dialog: an app bar with a close button and **Save**, the range as the headline
+     under the supporting text, and the months in one vertically scrolling list rather than stepped
+     one at a time. Nothing changes for a single date, or for a docked picker at `medium` and up.
+
      The calendar and the dialog's text field pick a draft; OK (or Enter on a day) makes it the
      value, Cancel or Escape leaves the value alone and returns focus to the field. What is typed
      into the docked field is the value as soon as it is a whole, allowed date.
@@ -265,6 +270,30 @@
         data-datepicker-picker
     >
         <div tabindex="-1" data-datepicker-surface>
+            {{-- M3's full-screen range picker (compact): an app bar with a close button and Save,
+                 then the supporting text and the range as the headline, over a divider. --}}
+            <div data-datepicker-full x-cloak x-show="presentation === 'full'">
+                <div data-datepicker-app-bar>
+                    <x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-datepicker-close />
+
+                    <span data-datepicker-app-bar-actions>
+                        <span x-show="! typing">
+                            <x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
+                        </span>
+                        <span x-show="typing">
+                            <x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
+                        </span>
+
+                        <x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-datepicker-save />
+                    </span>
+                </div>
+
+                <div data-datepicker-full-headline>
+                    <p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
+                    <p data-datepicker-headline aria-live="polite" x-text="headline"></p>
+                </div>
+            </div>
+
             <div data-datepicker-header x-show="presentation === 'modal'" @if ($range) data-range @endif>
                 <p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
 
@@ -280,7 +309,7 @@
                 </div>
             </div>
 
-            <div x-show="! typing" data-datepicker-calendar>
+            <div x-show="! typing" x-on:scroll="extendMonths($event)" data-datepicker-calendar>
                 <span id="{{ $id }}-month" class="sr-only" aria-live="polite" x-text="monthYear"></span>
 
                 <div data-datepicker-nav x-show="presentation === 'modal'">
@@ -350,9 +379,14 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <template x-for="(week, row) in weeks" :key="row">
+                        <template x-for="row in rows" :key="row.key">
                             <tr>
-                                <template x-for="(cell, column) in week" :key="column">
+                                {{-- Full screen: a month's name heads its weeks, M3's month label. --}}
+                                <template x-if="row.label">
+                                    <th colspan="7" scope="colgroup" x-text="row.label" data-datepicker-month-label></th>
+                                </template>
+
+                                <template x-for="(cell, column) in (row.cells ?? [])" :key="column">
                                     <td
                                         role="gridcell"
                                         x-bind:tabindex="cell.blank ? null : (cell.focused ? 0 : -1)"
@@ -469,7 +503,8 @@
                 </div>
             </div>
 
-            <div x-show="view === 'days' || typing || presentation === 'modal'" data-datepicker-actions>
+            {{-- The full-screen picker confirms from its app bar, so it draws no action row. --}}
+            <div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-datepicker-actions>
                 <x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-datepicker-cancel />
                 <x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-datepicker-confirm />
             </div>
diff --git a/resources/views/showcase/sections/pickers.blade.php b/resources/views/showcase/sections/pickers.blade.php
index aae3e23b..241068e4 100644
--- a/resources/views/showcase/sections/pickers.blade.php
+++ b/resources/views/showcase/sections/pickers.blade.php
@@ -27,6 +27,7 @@
             </div>
             BLADE,
         'Range' => <<<'BLADE'
+            {{-- Narrow the window below 600px: a range picker becomes M3's full-screen one, with a close button, Save, and the months scrolled through. --}}
             <div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
                 <div class="grid content-start gap-4">
                     <x-datepicker label="Trip" range x-model="trip" />
@@ -34,7 +35,7 @@
                 </div>
 
                 <div class="grid content-start gap-4">
-                    <x-datepicker label="Leave" range mode="modal" x-model="leave" />
+                    <x-datepicker label="Leave" range mode="modal" x-model="leave" hint="Full screen on a compact window" />
                     <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
                 </div>
             </div>
diff --git a/tests/Feature/Components/DatepickerTest.php b/tests/Feature/Components/DatepickerTest.php
index a484f60c..70dbec43 100644
--- a/tests/Feature/Components/DatepickerTest.php
+++ b/tests/Feature/Components/DatepickerTest.php
@@ -54,6 +54,41 @@ it('makes the field a read-only trigger for the modal and modal input pickers',
         ->and(datepickerConfig($html)['mode'])->toBe($mode);
 })->with(['modal', 'input']);
 
+it('gives a range picker M3\'s full-screen presentation, with an app bar and Save', function () {
+    $html = (string) $this->blade('<x-datepicker id="trip" label="Trip" range mode="modal" />');
+
+    expect($html)
+        ->toContain('data-datepicker-full')
+        ->toContain('x-show="presentation === \'full\'"')
+        ->toContain('data-datepicker-app-bar')
+        ->toContain('data-datepicker-close')
+        ->toContain('data-datepicker-save')
+        ->toContain('Save')
+        ->toContain('aria-label="Select dates"')
+        // The months come from one list of rows, each headed by its label.
+        ->toContain('x-for="row in rows"')
+        ->toContain('data-datepicker-month-label')
+        // The action row is the modal's; the full-screen picker confirms from its app bar.
+        ->toContain('x-show="presentation !== \'full\' && (view === \'days\' || typing || presentation === \'modal\')"')
+        ->toContain('x-on:scroll="extendMonths($event)"');
+
+    expect(datepickerConfig($html))->toMatchArray(['range' => true, 'mode' => 'modal']);
+});
+
+it('leaves the docked and single-date pickers as they were', function () {
+    // Only the presentation is new: a single date never reaches it, whatever the window.
+    expect(file_get_contents(__DIR__.'/../../../resources/js/datepicker.js'))
+        ->toContain("this.presentation = config.range && this.compact ? 'full' : config.mode === 'docked' && !this.compact ? 'docked' : 'modal'");
+
+    $html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" />');
+
+    expect($html)
+        ->toContain('data-datepicker-nav data-docked')
+        ->toContain('x-show="presentation === \'docked\'"')
+        ->toContain('data-datepicker-menu-button="months"')
+        ->toContain('x-show="presentation === \'modal\'"');
+});
+
 it('names each dropdown so Shift+M and Shift+Y can reach it', function () {
     $html = (string) $this->blade('<x-datepicker label="Birthday" />');
 

From 549d96b0dcc5f063a8387aac73ade4d6ba0b7bfb Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:40:48 +0200
Subject: [PATCH 6/7] Give search M3's icon entry point and its suggestions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 § Search names three entry points and only the bar existed; suggestions
before the first keystroke were missing too (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). `trigger="icon"` is the search
icon button — search as a secondary action, one 48px button that expands into
the full-screen view at any width, since an icon button has nothing to dock
under, and takes its focus back on close. The `suggestions` slot stands where
the results do until something is typed; the live region counts whichever of
the two is on screen and names suggestions as suggestions.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../livewire-material-development/SKILL.md    | 18 +++++-
 resources/css/components/search.css           | 63 ++++++++++++++++---
 resources/js/search.js                        | 53 ++++++++++++----
 resources/views/components/search.blade.php   | 45 +++++++++++--
 .../views/showcase/sections/fields.blade.php  | 34 ++++++++++
 tests/Feature/Components/SearchTest.php       | 44 +++++++++++++
 6 files changed, 230 insertions(+), 27 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index 8b9d8099..11745975 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -671,7 +671,7 @@ Bind with `wire:model` (entangled) or, without Livewire, `x-model`. The options
 
 ### `<x-search>`
 
-M3 search bar that opens into a search view: docked under the bar from `medium` (600px) over a scrim, full screen with a back arrow on a compact window (`docked` keeps it docked). Bind the input like any other and render the results in the slot; `empty` is shown when the slot renders nothing. The results are a list and a live region says how many there are. Choosing a result (a link or button) closes the view; ArrowDown walks the results, Escape closes. Props: `placeholder` ("Search"), `label`, `icon`; `trailing` slot (avatar, icon buttons).
+M3 search bar that opens into a search view: docked under the bar from `medium` (600px) over a scrim, full screen with a back arrow on a compact window (`docked` keeps it docked). Bind the input like any other and render the results in the slot; `empty` is shown when the slot renders nothing. The results are a list and a live region says how many there are. Choosing a result (a link or button) closes the view; ArrowDown walks the results, Escape closes. Props: `placeholder` ("Search"), `label`, `icon`, `trigger`; `trailing` slot (avatar, icon buttons) and `suggestions` slot.
 
 ```blade
 <x-search wire:model.live.debounce.300ms="query" placeholder="Search shares">
@@ -684,6 +684,22 @@ M3 search bar that opens into a search view: docked under the bar from `medium`
 
 The docked view overlaps what is under it; never place a search inside an element with `overflow-hidden` (a card), which clips it. The bar is never wider than M3's 720px and grows to that width while it is focused; for M3's 360px resting bar, wrap it in an element carrying `style="--search-width: 22.5rem"`.
 
+- `trigger="icon"` is M3's other entry point — search as a secondary action: one 48px search icon button that expands into the full-screen view at any width (so `docked` does not apply) and gives the button its focus back on close. Put it in a toolbar or an app bar row where a bar would not fit.
+- The `suggestions` slot is shown in the view until the first keystroke — recent or popular searches — and the results slot takes over once something is typed. The live region counts whichever list is on screen and names suggestions as such.
+
+```blade
+<x-search trigger="icon" label="Search shares" wire:model.live.debounce.300ms="query">
+    <x-slot:suggestions>
+        @foreach ($this->recent as $term)
+            <x-list-item :title="$term" icon="history" wire:click="$set('query', '{{ $term }}')" wire:key="recent-{{ $term }}" />
+        @endforeach
+    </x-slot:suggestions>
+    @foreach ($this->results as $share)
+        <x-list-item :title="$share->name" :link="route('shares.show', $share)" wire:key="result-{{ $share->id }}" />
+    @endforeach
+</x-search>
+```
+
 ### `<x-app-shell>`
 
 The adaptive app shell, a whole layout's body: one navigation per M3 window size class, the page as `<main id="content" wire:transition.navigate>` behind a skip link, and the snackbar host (do not add another `<x-toast />`). It needs `<x-theme-script />` in `<head>`.
diff --git a/resources/css/components/search.css b/resources/css/components/search.css
index 4c81443a..97eb04d5 100644
--- a/resources/css/components/search.css
+++ b/resources/css/components/search.css
@@ -15,14 +15,16 @@
  * `--search-width: 22.5rem` on a wrapper. The leading and trailing padding is 24px unfocused and
  * 16px focused, as the search specs table gives it.
  *
- *   [data-search]            the root; data-open, data-full-screen
- *     [data-search-scrim]    over the page while the view is docked
- *     [data-search-bar]      the pill, above the view
+ *   [data-search]              the root; data-open, data-full-screen, data-trigger
+ *     [data-search-scrim]      over the page while the view is docked
+ *     [data-search-trigger]    data-trigger="icon" only: the icon button that expands the view
+ *     [data-search-bar]        the pill, above the view
  *       [data-search-leading], [data-search-field] (the combobox around [data-search-input]),
  *       [data-search-clear], [data-search-trailing]
- *     [data-search-view]     the container behind the bar
- *       [data-search-results]
- *     [data-search-status]   the polite live region that counts the results
+ *     [data-search-view]       the container behind the bar
+ *       [data-search-suggestions]  before the first keystroke
+ *       [data-search-results]      once something is typed
+ *     [data-search-status]     the polite live region that counts whichever list is on screen
  */
 
 @layer components {
@@ -204,19 +206,62 @@
 
     /* M3: the docked container is at least 240px tall — once there is something in it to be tall
        about; a search with nothing to show stays the height of its bar. */
-    [data-search-view]:has([data-search-results]) {
+    [data-search-view]:has([data-search-results], [data-search-suggestions]) {
         min-height: 15rem;
     }
 
     /* No divider: that belongs to the divided style, which Expressive deprecates in favour of the
-       contained one this file draws. */
-    [data-search-results] {
+       contained one this file draws. The suggestions stand in the same place, before the first
+       keystroke; only one of the two is ever on screen. */
+    [data-search-results],
+    [data-search-suggestions] {
         min-height: 0;
         overflow-y: auto;
         overscroll-behavior: contain;
         padding-block: 0.5rem;
     }
 
+    /* M3's second entry point: search as a secondary action, one icon button that expands into the
+       full-screen view. The root keeps the button's 48px whether the view is open or not, so a
+       toolbar does not shift under it, and the bar is the view's header rather than a resting bar. */
+    [data-search][data-trigger="icon"] {
+        flex: none;
+        width: 3rem;
+        height: 3rem;
+    }
+
+    [data-search-trigger] {
+        display: grid;
+        place-items: center;
+        width: 3rem;
+        height: 3rem;
+        border-radius: var(--md-sys-shape-corner-full);
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+        outline: none;
+        transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
+    }
+
+    @media (hover: hover) {
+        [data-search-trigger]:hover {
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
+        }
+    }
+
+    [data-search-trigger]:focus-visible {
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 10%, transparent);
+        outline: 3px solid var(--md-sys-color-secondary);
+        outline-offset: -3px;
+    }
+
+    [data-search-trigger]:active {
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 10%, transparent);
+    }
+
+    [data-search][data-trigger="icon"]:not([data-open]) [data-search-bar] {
+        display: none;
+    }
+
     /* Full screen, on a compact window. */
     [data-search][data-full-screen] [data-search-bar] {
         position: fixed;
diff --git a/resources/js/search.js b/resources/js/search.js
index 7342cb5a..fb59822e 100644
--- a/resources/js/search.js
+++ b/resources/js/search.js
@@ -11,7 +11,12 @@
  * Because the results arrive from the server, nothing in the page tells a screen reader they are
  * there; M3 asks that it be told. A MutationObserver counts the list items whenever the view's DOM
  * settles and writes "N results" into the polite live region the view renders, which is the one
- * announcement M3's search accessibility page names.
+ * announcement M3's search accessibility page names. With a `suggestions` slot, whichever of the
+ * two lists is on screen is the one counted, and the suggestions are named as such.
+ *
+ * `trigger` is M3's entry point: the bar itself, or `icon` — a single search icon button that
+ * expands into the full-screen view wherever the window is wide enough to dock, because an icon
+ * button has nowhere to dock under.
  */
 import { upTo } from './breakpoints.js'
 
@@ -29,22 +34,25 @@ const RETURN_GUARD_MS = 250
 const SETTLE_MS = 120
 
 document.addEventListener('alpine:init', () => {
-    window.Alpine.data('materialSearch', (docked = false, announce = {}) => ({
+    window.Alpine.data('materialSearch', (docked = false, announce = {}, trigger = 'bar') => ({
         open: false,
         compact: false,
         closedAt: -Infinity,
         announcement: '',
+        // What is in the field, which is what tells suggestions from results.
+        query: '',
         observer: null,
         settle: null,
 
         init() {
-            const query = upTo('medium')
+            const media = upTo('medium')
 
-            this.compact = query.matches
-            query.addEventListener('change', (event) => (this.compact = event.matches))
+            this.compact = media.matches
+            media.addEventListener('change', (event) => (this.compact = event.matches))
 
             // Alpine registers x-ref as it walks the children, which is after this runs.
             this.$nextTick(() => {
+                this.query = this.$refs.input?.value ?? ''
                 this.observer = new MutationObserver(() => this.countLater())
                 this.observer.observe(this.$refs.view, { childList: true, subtree: true, characterData: true })
             })
@@ -69,25 +77,41 @@ document.addEventListener('alpine:init', () => {
                 return
             }
 
-            const results = this.$refs.view.querySelector('[data-search-results]')
-            const items = results ? results.querySelectorAll('[role="listitem"], li') : []
-            const total = items.length || (results ? this.results().length : 0)
+            // Suggestions and results never show together; count whichever one is on screen.
+            const list = [...this.$refs.view.querySelectorAll('[data-search-results], [data-search-suggestions]')]
+                .find((element) => element.getClientRects().length > 0)
+            const items = list ? list.querySelectorAll('[role="listitem"], li') : []
+            const total = items.length || (list ? this.results().length : 0)
+            const suggesting = Boolean(list?.hasAttribute('data-search-suggestions'))
 
             this.announcement = total === 0
                 ? (announce.none ?? '')
                 : total === 1
-                    ? (announce.one ?? '')
-                    : (announce.many ?? '').replace(':count', total)
+                    ? ((suggesting ? announce.suggestionOne : announce.one) ?? '')
+                    : ((suggesting ? announce.suggestionMany : announce.many) ?? '').replace(':count', total)
         },
 
         get fullScreen() {
-            return this.open && this.compact && !docked
+            // An icon button has nothing to dock under, so M3's icon entry point always expands.
+            return this.open && (trigger === 'icon' || (this.compact && !docked))
         },
 
         show() {
             this.open = true
         },
 
+        /** M3's search-icon entry point: the button opens the view and hands over focus. */
+        expand() {
+            this.show()
+            this.$nextTick(() => requestAnimationFrame(() => this.$refs.input?.focus()))
+        },
+
+        /** Every keystroke: the view opens, and the query decides suggestions or results. */
+        typed(event) {
+            this.query = event.target.value
+            this.show()
+        },
+
         focused() {
             if (performance.now() - this.closedAt > RETURN_GUARD_MS) {
                 this.show()
@@ -99,7 +123,11 @@ document.addEventListener('alpine:init', () => {
             this.closedAt = performance.now()
 
             if (refocus) {
-                this.$refs.input.focus()
+                // Back to whatever opened the view: the icon button, or the field itself. A tick
+                // later, because the icon button is only on screen again once the view has closed.
+                const back = this.$refs.trigger ?? this.$refs.input
+
+                this.$nextTick(() => back.focus())
             }
         },
 
@@ -107,6 +135,7 @@ document.addEventListener('alpine:init', () => {
             const input = this.$refs.input
 
             input.value = ''
+            this.query = ''
             input.dispatchEvent(new Event('input', { bubbles: true }))
             input.focus()
         },
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index 10605dc1..152fab5f 100644
--- a/resources/views/components/search.blade.php
+++ b/resources/views/components/search.blade.php
@@ -13,6 +13,15 @@
      a `trailing` slot for an avatar or icon buttons in the bar. Every other attribute reaches the
      `<input type="search">`.
 
+     `trigger="icon"` is M3's second entry point, the search icon button: search as a secondary
+     action in a toolbar or an app bar, a single 48px button that expands into the full-screen view
+     and hands focus to the field (so `docked` has nothing to say about it). The bar itself is the
+     view's header there, and closing gives the button its focus back.
+
+     `suggestions` is a slot shown in the view until the first keystroke — M3's suggestions
+     behaviour: recent searches, popular queries. The results slot takes over once something is
+     typed, and whichever of the two is on screen is what the live region counts.
+
      The bar is a combobox: the wrapper around the input carries `role="combobox"` with
      `aria-expanded` and `aria-controls`, because ARIA gives a bare textbox neither. The results are
      a list, and a polite live region says how many of them there are whenever they change — M3 asks
@@ -23,22 +32,26 @@
     'label' => null,
     'icon' => 'search',
     'docked' => false,
+    'trigger' => 'bar',
 ])
 
 @php
     $model = $attributes->wire('model')->value() ?: null;
     $placeholder ??= __('Search');
     $id = $attributes->get('id') ?? 'material-search-'.substr(md5($model.'|'.$placeholder), 0, 10);
+    $trigger = $trigger === 'icon' ? 'icon' : 'bar';
 
     $announce = [
         'none' => __('No results'),
         'one' => __('1 result'),
         'many' => __(':count results'),
+        'suggestionOne' => __('1 suggestion'),
+        'suggestionMany' => __(':count suggestions'),
     ];
 @endphp
 
 <div
-    x-data="materialSearch({{ $docked ? 'true' : 'false' }}, @js($announce))"
+    x-data="materialSearch({{ $docked ? 'true' : 'false' }}, @js($announce), @js($trigger))"
     x-on:keydown.escape="if (open) { $event.stopPropagation(); close(true); }"
     x-on:focusout="leave($event)"
     x-on:pointerdown.outside="close()"
@@ -46,16 +59,34 @@
     x-bind:data-open="open ? '' : null"
     x-bind:data-full-screen="fullScreen ? '' : null"
     data-search
+    data-trigger="{{ $trigger }}"
     {{ $attributes->only(['class', 'wire:key'])->class(['relative']) }}
 >
     <div data-search-scrim x-cloak x-show="open && ! fullScreen" x-on:pointerdown="close()" aria-hidden="true"></div>
 
+    @if ($trigger === 'icon')
+        <button
+            type="button"
+            x-ref="trigger"
+            x-show="! open"
+            x-on:click="expand()"
+            aria-label="{{ $label ?? $placeholder }}"
+            aria-haspopup="dialog"
+            aria-controls="{{ $id }}-view"
+            aria-expanded="false"
+            x-bind:aria-expanded="open.toString()"
+            data-search-trigger
+        >
+            <x-livewire-material::icon :name="$icon" />
+        </button>
+    @endif
+
     <div data-search-bar role="search" x-on:click="if ($event.target === $el) $refs.input.focus()">
         <span data-search-leading x-show="! fullScreen">
             <x-livewire-material::icon :name="$icon" />
         </span>
 
-        <button type="button" data-search-leading data-search-back x-show="fullScreen" x-cloak x-on:click="close()" aria-label="{{ __('Back') }}">
+        <button type="button" data-search-leading data-search-back x-show="fullScreen" x-cloak x-on:click="close(true)" aria-label="{{ __('Back') }}">
             <x-livewire-material::icon name="arrow_back" />
         </button>
 
@@ -78,7 +109,7 @@
                 aria-label="{{ $label ?? $placeholder }}"
                 x-on:focus="focused()"
                 x-on:click="show()"
-                x-on:input="show()"
+                x-on:input="typed($event)"
                 x-on:keydown.arrow-down.prevent="show(); $nextTick(() => step(1))"
                 data-search-input
             />
@@ -103,10 +134,14 @@
         x-on:keydown.arrow-up.prevent="step(-1)"
         x-on:click="choose($event)"
     >
+        @isset($suggestions)
+            <div data-search-suggestions role="list" x-show="query === ''">{{ $suggestions }}</div>
+        @endisset
+
         @if ($slot->hasActualContent())
-            <div data-search-results role="list">{{ $slot }}</div>
+            <div data-search-results role="list" @isset($suggestions) x-cloak x-show="query !== ''" @endisset>{{ $slot }}</div>
         @elseif (isset($empty))
-            <div data-search-results><p class="px-4 py-3 type-body-md text-on-surface-variant">{{ $empty }}</p></div>
+            <div data-search-results @isset($suggestions) x-cloak x-show="query !== ''" @endisset><p class="px-4 py-3 type-body-md text-on-surface-variant">{{ $empty }}</p></div>
         @endif
     </div>
 
diff --git a/resources/views/showcase/sections/fields.blade.php b/resources/views/showcase/sections/fields.blade.php
index 0ae1bbed..717cb59e 100644
--- a/resources/views/showcase/sections/fields.blade.php
+++ b/resources/views/showcase/sections/fields.blade.php
@@ -169,6 +169,40 @@
                 </div>
             </div>
             BLADE,
+        'Search entry points and suggestions' => <<<'BLADE'
+            <div class="grid w-full gap-6 medium:grid-cols-2">
+                <div x-data="{ query: '' }">
+                    <x-search x-model="query" placeholder="Search shares">
+                        <x-slot:suggestions>
+                            <x-list>
+                                <x-list-item title="Recent: holiday photos" icon="history" link="#fields" />
+                                <x-list-item title="Recent: contract" icon="history" link="#fields" />
+                                <x-list-item title="Shares expiring this week" icon="trending_up" link="#fields" />
+                            </x-list>
+                        </x-slot:suggestions>
+
+                        <x-list>
+                            <x-list-item title="holiday-photos.zip" description="248 MB" icon="folder_zip" link="#fields" x-show="'holiday-photos.zip'.includes(query.toLowerCase())" />
+                            <x-list-item title="contract.pdf" description="1.2 MB" icon="picture_as_pdf" link="#fields" x-show="'contract.pdf'.includes(query.toLowerCase())" />
+                        </x-list>
+                    </x-search>
+                </div>
+
+                {{-- M3's search icon button: search as a secondary action, expanding into the full-screen view. --}}
+                <div class="flex items-center gap-2 rounded-corner-full bg-surface-container-high px-2 py-1">
+                    <x-button icon="menu" aria-label="Open the menu" />
+                    <span class="grow type-title-md text-on-surface">Shares</span>
+                    <x-search trigger="icon" label="Search shares">
+                        <x-slot:suggestions>
+                            <x-list>
+                                <x-list-item title="Recent: design review" icon="history" link="#fields" />
+                            </x-list>
+                        </x-slot:suggestions>
+                        <x-slot:empty>No shares match.</x-slot:empty>
+                    </x-search>
+                </div>
+            </div>
+            BLADE,
         'A form' => <<<'BLADE'
             <x-card variant="outlined" class="w-full max-w-xl">
                 <x-form x-on:submit.prevent="materialToast('Share created', { type: 'success' })" separator>
diff --git a/tests/Feature/Components/SearchTest.php b/tests/Feature/Components/SearchTest.php
index 79a642a5..b7b76409 100644
--- a/tests/Feature/Components/SearchTest.php
+++ b/tests/Feature/Components/SearchTest.php
@@ -47,6 +47,50 @@ it('shows the results as a list, or what to say when there are none', function (
         ->not->toContain('data-search-results role="list"');
 });
 
+it('offers M3\'s search-icon entry point', function () {
+    $html = (string) $this->blade('<x-search id="find" trigger="icon" label="Search shares" />');
+
+    expect($html)
+        ->toContain('data-trigger="icon"')
+        ->toContain('data-search-trigger')
+        ->toContain('x-ref="trigger"')
+        ->toContain('x-on:click="expand()"')
+        ->toContain('aria-label="Search shares"')
+        ->toContain('aria-haspopup="dialog"')
+        ->toContain('aria-controls="find-view"')
+        ->toContain('materialSearch(false,')
+        ->toContain("'icon'")
+        // The bar is still there: it becomes the expanded view's header.
+        ->toContain('data-search-bar');
+
+    expect((string) $this->blade('<x-search />'))
+        ->toContain('data-trigger="bar"')
+        ->not->toContain('data-search-trigger');
+});
+
+it('shows suggestions until the first keystroke, then the results', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-search>
+            <a href="/shares/1">holiday.zip</a>
+            <x-slot:suggestions><a href="/recent">Recent shares</a></x-slot:suggestions>
+        </x-search>
+        BLADE);
+
+    expect($html)
+        ->toContain('data-search-suggestions role="list"')
+        ->toContain('x-show="query === \'\'"')
+        ->toContain('Recent shares')
+        ->toContain('x-show="query !== \'\'"')
+        ->toContain('holiday.zip')
+        ->toContain('1 suggestion')
+        ->toContain(':count suggestions');
+
+    // Without the slot the results stand alone and are never hidden.
+    expect((string) $this->blade('<x-search><a href="/shares/1">holiday.zip</a></x-search>'))
+        ->not->toContain('data-search-suggestions')
+        ->not->toContain('x-show="query !== \'\'"');
+});
+
 it('names the input, trails the bar, and stays docked on request', function () {
     $html = (string) $this->blade('<x-search label="Search your shares" icon="travel_explore" docked><x-slot:trailing><button>AR</button></x-slot:trailing></x-search>');
 

From c8357cfd4dfbd372c6610b1df3fe5324a96493df Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:43:38 +0200
Subject: [PATCH 7/7] Give a scrolling chip set a scroll button at each edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

M3 § Chips, Accessibility asks that a row which overflows horizontally carry a
visible affordance; `<x-chip-set scroll>` faded its edges and left it there
(plan step 24, audit docs/audits/m3-alignment/inputs.md § Missing). Where the
pointer is fine, and so there is no swipe to reach for, a button now sits over
each fading edge and scrolls the row by most of its width. They are pointer
affordances only — no tab stops, since the arrow keys already walk every chip —
and the row's scroll padding grows on a fine pointer so a chip the keyboard
reaches clears the buttons as well as the fade. The scroller became a ref,
because the buttons stand outside it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../livewire-material-development/SKILL.md    |  4 +-
 resources/js/chips.js                         | 23 ++++++++--
 resources/views/components/chip-set.blade.php | 46 ++++++++++++++-----
 .../views/showcase/sections/chips.blade.php   |  3 +-
 tests/Feature/Components/ChipTest.php         | 23 ++++++++++
 5 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md
index 11745975..13c21a42 100644
--- a/resources/boost/skills/livewire-material-development/SKILL.md
+++ b/resources/boost/skills/livewire-material-development/SKILL.md
@@ -531,7 +531,9 @@ Props: `label` / slot, `icon`, `icon-right`, `elevated` (not on input chips), `d
 
 ### `<x-chip-set>`
 
-A row of chips 8px apart that wraps, as `role="group"`: `label` (shown, and names the group; otherwise pass `aria-label`), `hint`, `error-field` (a validation message for that property or its items replaces the hint), `scroll` (one line that scrolls sideways, fading the edge it can still scroll towards). The set is one tab stop: the arrow keys move between the chips, Home and End go to the ends.
+A row of chips 8px apart that wraps, as `role="group"`: `label` (shown, and names the group; otherwise pass `aria-label`), `hint`, `error-field` (a validation message for that property or its items replaces the hint), `scroll` (one line that scrolls sideways). The set is one tab stop: the arrow keys move between the chips, Home and End go to the ends.
+
+With `scroll`, M3's overflow affordance is drawn for you: the edge the row can still scroll towards fades, and where the pointer is fine (a mouse, no swipe to reach for) a small button sits over each fading edge and scrolls the row by most of its width. The buttons are pointer-only — not tab stops — because the arrow keys already walk every chip and scroll each one clear of both the fade and the buttons.
 
 ### `<x-form>`
 
diff --git a/resources/js/chips.js b/resources/js/chips.js
index 8c4c7011..2b1e86c5 100644
--- a/resources/js/chips.js
+++ b/resources/js/chips.js
@@ -7,8 +7,11 @@
  * after it (Delete), because a focused element that disappears leaves focus on the body.
  *
  * A scrolling set marks the edges it can still scroll towards (`data-scroll-start`,
- * `data-scroll-end`), and the set fades those edges. Its row carries `wire:ignore.self`, so a
- * Livewire morph keeps the marks.
+ * `data-scroll-end`), and the set fades those edges and — where the pointer is fine, so there is no
+ * swipe — puts a button over each of them, which is the visible affordance M3's chips accessibility
+ * page asks a scrolling row for. Its row carries `wire:ignore.self`, so a Livewire morph keeps the
+ * marks. Wrapping, the row is the element with `x-data`; scrolling, it is that element's `row` ref,
+ * because the buttons stand outside the scroller.
  *
  * A set is also one tab stop with a roving tabindex, and the arrow keys walk its controls, which is
  * M3's chip keyboard table ("Arrows: moves focus between chips"; "only one chip can be in focus
@@ -126,9 +129,11 @@ document.addEventListener('alpine:init', () => {
 
     window.Alpine.data('materialChipSet', () => ({
         observers: [],
+        row: null,
 
         init() {
-            const row = this.$el
+            // A scrolling set hangs its buttons outside the scroller, so the row is a ref there.
+            const row = (this.row = this.$refs.row ?? this.$el)
 
             const mark = () => {
                 // scrollLeft runs negative towards the end in a right-to-left row.
@@ -167,7 +172,15 @@ document.addEventListener('alpine:init', () => {
 
         /** Everything in the set the keyboard can reach, in the order it is written. */
         controls() {
-            return [...this.$el.querySelectorAll(CONTROLS)]
+            return [...this.row.querySelectorAll(CONTROLS)]
+        },
+
+        /** A scroll button: most of a row's width towards one of its ends. */
+        nudge(towards) {
+            const rtl = getComputedStyle(this.row).direction === 'rtl'
+            const step = Math.max(this.row.clientWidth * 0.8, 120)
+
+            this.row.scrollBy({ left: (towards === 'start' ? -1 : 1) * (rtl ? -1 : 1) * step, behavior: 'smooth' })
         },
 
         /** One tab stop: the control focus is on, or the first one, is the only one Tab reaches. */
@@ -203,7 +216,7 @@ document.addEventListener('alpine:init', () => {
                 return
             }
 
-            const forwards = getComputedStyle(this.$el).direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
+            const forwards = getComputedStyle(this.row).direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
             const backwards = forwards === 'ArrowRight' ? 'ArrowLeft' : 'ArrowRight'
 
             let next = null
diff --git a/resources/views/components/chip-set.blade.php b/resources/views/components/chip-set.blade.php
index df0b765d..9857bf7f 100644
--- a/resources/views/components/chip-set.blade.php
+++ b/resources/views/components/chip-set.blade.php
@@ -10,8 +10,12 @@
      its items: `kinds` and `kinds.*`) replaces the hint.
 
      `scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a narrow
-     screen: the edge it can still scroll towards fades (resources/js/chips.js), and a chip reached
-     with Tab scrolls clear of the fade. Removing a focused input chip moves focus within the set.
+     screen. M3's chips accessibility page asks that a row which overflows say so, so the edge it
+     can still scroll towards fades (resources/js/chips.js) and, where the pointer is fine and
+     there is no swipe to reach for, a button sits over each fading edge and scrolls the row by
+     most of its width. The buttons are pointer affordances only — `tabindex="-1"` and
+     `aria-hidden`, because the arrow keys already walk every chip and scroll each one clear of
+     the fade. Removing a focused input chip moves focus within the set.
 
      The set is one tab stop and the arrow keys move between the chips inside it, with Home and End
      at the ends — M3's chip keyboard table. Backspace and Delete still remove a focused input
@@ -43,15 +47,35 @@
     @endif
 
     @if ($scroll)
-        <div
-            data-chip-set
-            x-data="materialChipSet"
-            x-on:keydown="key($event)"
-            x-on:focusin="rove($event.target)"
-            wire:ignore.self
-            class="-mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
-        >
-            {{ $slot }}
+        <div x-data="materialChipSet" class="relative">
+            <div
+                data-chip-set
+                x-ref="row"
+                x-on:keydown="key($event)"
+                x-on:focusin="rove($event.target)"
+                wire:ignore.self
+                class="peer -mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 pointer-fine:scroll-px-10 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
+            >
+                {{ $slot }}
+            </div>
+
+            {{-- After the row, so each button can ask whether the row can still scroll its way. --}}
+            @foreach (['start' => 'chevron_left', 'end' => 'chevron_right'] as $edge => $glyph)
+                <button
+                    type="button"
+                    tabindex="-1"
+                    aria-hidden="true"
+                    data-chip-scroll="{{ $edge }}"
+                    x-on:click="nudge('{{ $edge }}')"
+                    @class([
+                        'absolute inset-y-0 my-auto hidden size-8 place-items-center rounded-corner-full bg-surface-container-high text-on-surface-variant shadow-elevation-1',
+                        'start-0 peer-data-scroll-start:pointer-fine:grid' => $edge === 'start',
+                        'end-0 peer-data-scroll-end:pointer-fine:grid' => $edge === 'end',
+                    ])
+                >
+                    <x-livewire-material::icon :name="$glyph" class="size-4.5 rtl:-scale-x-100" optical="20" />
+                </button>
+            @endforeach
         </div>
     @else
         <div data-chip-set x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)" class="flex flex-wrap gap-2">
diff --git a/resources/views/showcase/sections/chips.blade.php b/resources/views/showcase/sections/chips.blade.php
index 42de4e12..8e6da8da 100644
--- a/resources/views/showcase/sections/chips.blade.php
+++ b/resources/views/showcase/sections/chips.blade.php
@@ -52,8 +52,9 @@
             </x-chip-set>
             BLADE,
         'A set that scrolls' => <<<'BLADE'
+            {{-- M3 asks an overflowing chip row for a visible affordance: the edge it can still scroll towards fades, and on a mouse a button sits over it. --}}
             <div class="w-full max-w-sm">
-                <x-chip-set label="Sort and filter" scroll>
+                <x-chip-set label="Sort and filter" hint="Drag, or use the arrow keys" scroll>
                     <x-chip type="filter" label="Newest" name="sort[]" value="newest" :selected="true" />
                     <x-chip type="filter" label="Largest" name="sort[]" value="largest" />
                     <x-chip type="filter" label="Expiring soon" name="sort[]" value="expiring" />
diff --git a/tests/Feature/Components/ChipTest.php b/tests/Feature/Components/ChipTest.php
index d984e6ff..8f8d57e7 100644
--- a/tests/Feature/Components/ChipTest.php
+++ b/tests/Feature/Components/ChipTest.php
@@ -234,12 +234,35 @@ it('scrolls a chip set on one line with fading edges', function () {
     expect((string) $this->blade('<x-chip-set aria-label="Sort" scroll><x-chip label="A" /></x-chip-set>'))
         ->toContain('aria-label="Sort"')
         ->toContain('x-data="materialChipSet"')
+        ->toContain('x-ref="row"')
         ->toContain('wire:ignore.self')
         ->toContain('overflow-x-auto')
         ->toContain('data-scroll-start:[--chip-fade-start:1.5rem]')
         ->not->toContain('flex-wrap');
 });
 
+it('puts a scroll button over each fading edge, for a pointer that cannot swipe', function () {
+    $html = (string) $this->blade('<x-chip-set aria-label="Sort" scroll><x-chip label="A" /></x-chip-set>');
+
+    expect($html)
+        ->toContain('data-chip-scroll="start"')
+        ->toContain('data-chip-scroll="end"')
+        ->toContain('x-on:click="nudge(\'start\')"')
+        ->toContain('x-on:click="nudge(\'end\')"')
+        // Only while the row can still scroll that way, and only where the pointer is fine.
+        ->toContain('peer-data-scroll-start:pointer-fine:grid')
+        ->toContain('peer-data-scroll-end:pointer-fine:grid')
+        // A pointer affordance, not a tab stop: the arrows already walk every chip.
+        ->toContain('tabindex="-1"')
+        ->toContain('aria-hidden="true"')
+        // A chip the keyboard reaches clears the buttons as well as the fade.
+        ->toContain('pointer-fine:scroll-px-10');
+
+    // A wrapping set has no edge to scroll towards.
+    expect((string) $this->blade('<x-chip-set aria-label="Sort"><x-chip label="A" /></x-chip-set>'))
+        ->not->toContain('data-chip-scroll');
+});
+
 it('binds filter chips to a Livewire array and shows the set\'s validation message in place of its hint', function () {
     $component = new class extends Component
     {