From 47ed4603d002eb5eca058fe6d7a5bec95f5b701d Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 06:03:02 +0200
Subject: [PATCH] Draw the small icons from the 20 optical cut
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CheckboxTokens' icon size is 18px, the same as the box it fills; the tick
and the dash were 16. Every icon these components draw at 20px or under —
the tick, the switch's check and cross, the chip's leading, trailing,
remove and filter-check icons, the date picker's menu arrows and the sort
arrow — now asks for the optical size 20 cut, which is drawn for that
size rather than scaled down from 24.

Plan step 20, finding IN-12 (and core C16's optical sizes).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/views/components/checkbox.blade.php    |  7 ++++---
 resources/views/components/chip.blade.php        | 12 ++++++------
 resources/views/components/datepicker.blade.php  |  6 +++---
 resources/views/components/sort-header.blade.php |  2 +-
 resources/views/components/toggle.blade.php      |  4 ++--
 tests/Feature/Components/SelectionTest.php       |  6 ++++++
 6 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
index 24a526de..150d0a28 100644
--- a/resources/views/components/checkbox.blade.php
+++ b/resources/views/components/checkbox.blade.php
@@ -1,4 +1,5 @@
-{{-- A checkbox, M3's: an 18px box that fills with primary when ticked, in a 40px state layer.
+{{-- A checkbox, M3's: an 18px box that fills with primary when ticked, in a 40px state layer. The
+     tick and the dash fill the box at CheckboxTokens' 18px icon size, drawn from the 20 optical cut.
 
      The label and its hint sit beside it and are its accessible name — the whole row is the
      `<label>`, so either can be pressed. `right` puts the box at the end of the row, for a setting
@@ -44,8 +45,8 @@
                 @if ($indeterminate) data-indeterminate @endif
                 @if ($messages !== []) aria-invalid="true" aria-describedby="{{ $id }}-support" @endif
             />
-            <x-livewire-material::icon name="check" class="size-4" data-check />
-            <x-livewire-material::icon name="remove" class="size-4" data-mixed />
+            <x-livewire-material::icon name="check" class="size-4.5" optical="20" data-check />
+            <x-livewire-material::icon name="remove" class="size-4.5" optical="20" data-mixed />
         </span>
 
         @if (filled($label) || filled($hint))
diff --git a/resources/views/components/chip.blade.php b/resources/views/components/chip.blade.php
index c22a7823..4a60efcd 100644
--- a/resources/views/components/chip.blade.php
+++ b/resources/views/components/chip.blade.php
@@ -230,7 +230,7 @@
                     <img src="{{ $avatar }}" alt="" @class(['me-2 size-6 shrink-0 rounded-corner-full object-cover', 'opacity-38' => $disabled]) />
                 @endif
             @elseif ($icon)
-                <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
+                <x-livewire-material::icon :name="$icon" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
             @endif
 
             <span data-chip-label class="truncate">{{ $label ?? $slot }}</span>
@@ -251,7 +251,7 @@
                     'cursor-not-allowed' => $disabled,
                 ])
             >
-                <x-livewire-material::icon name="close" class="size-4.5" />
+                <x-livewire-material::icon name="close" class="size-4.5" optical="20" />
             </button>
         @endif
 
@@ -277,18 +277,18 @@
                 'h-4.5 w-0 transition-[width] duration-(--md-sys-motion-effects-default-duration) ease-effects-default group-has-checked/chip:w-4.5 group-has-checked/chip:duration-(--md-sys-motion-spatial-fast-duration) group-has-checked/chip:ease-spatial-fast group-aria-pressed/chip:w-4.5 group-aria-pressed/chip:duration-(--md-sys-motion-spatial-fast-duration) group-aria-pressed/chip:ease-spatial-fast' => blank($icon),
             ])>
                 @if ($icon)
-                    <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['size-4.5 transition-opacity duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-has-checked/chip:opacity-0 group-aria-pressed/chip:opacity-0', $leadingInk])" />
+                    <x-livewire-material::icon :name="$icon" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['size-4.5 transition-opacity duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-has-checked/chip:opacity-0 group-aria-pressed/chip:opacity-0', $leadingInk])" />
                 @endif
-                <x-livewire-material::icon name="check" data-chip-check :class="$check" />
+                <x-livewire-material::icon name="check" data-chip-check optical="20" :class="$check" />
             </span>
         @elseif ($icon)
-            <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
+            <x-livewire-material::icon :name="$icon" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
         @endif
 
         <span class="truncate">{{ $label ?? $slot }}</span>
 
         @if ($iconRight)
-            <x-livewire-material::icon :name="$iconRight" :class="\Illuminate\Support\Arr::toCssClasses(['ms-2 size-4.5', $trailingInk])" />
+            <x-livewire-material::icon :name="$iconRight" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['ms-2 size-4.5', $trailingInk])" />
         @endif
 
         @if ($tooltip !== null)
diff --git a/resources/views/components/datepicker.blade.php b/resources/views/components/datepicker.blade.php
index 115dd65e..9d9bc1d9 100644
--- a/resources/views/components/datepicker.blade.php
+++ b/resources/views/components/datepicker.blade.php
@@ -292,7 +292,7 @@
                         x-bind:aria-label="monthYear + ', ' + @js(__('Switch to selecting a year'))"
                     >
                         <span x-text="monthYear"></span>
-                        <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" data-datepicker-menu-arrow />
+                        <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
                     </button>
 
                     <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
@@ -314,7 +314,7 @@
                             x-bind:aria-label="monthLabel + ', ' + @js(__('Switch to selecting a month'))"
                         >
                             <span x-text="monthLabel"></span>
-                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" data-datepicker-menu-arrow />
+                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
                         </button>
                         <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" />
@@ -333,7 +333,7 @@
                             x-bind:aria-label="yearLabel + ', ' + @js(__('Switch to selecting a year'))"
                         >
                             <span x-text="yearLabel"></span>
-                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" data-datepicker-menu-arrow />
+                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
                         </button>
                         <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_right" :tooltip="__('Next year')" x-on:click="step(12)" x-bind:disabled="view !== 'days' || ! canStep(12)" />
diff --git a/resources/views/components/sort-header.blade.php b/resources/views/components/sort-header.blade.php
index 436cbae2..5fc98da2 100644
--- a/resources/views/components/sort-header.blade.php
+++ b/resources/views/components/sort-header.blade.php
@@ -29,7 +29,7 @@
         ])
     >
         {{ $slot }}
-        <x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" :class="\Illuminate\Support\Arr::toCssClasses([
+        <x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" optical="20" :class="\Illuminate\Support\Arr::toCssClasses([
             'size-4 transition-opacity duration-(--md-sys-motion-effects-fast-duration)',
             'opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60' => ! $active,
         ])" />
diff --git a/resources/views/components/toggle.blade.php b/resources/views/components/toggle.blade.php
index f49e9953..ec21adf6 100644
--- a/resources/views/components/toggle.blade.php
+++ b/resources/views/components/toggle.blade.php
@@ -39,8 +39,8 @@
             />
             <span data-handle>
                 @if ($icons)
-                    <x-livewire-material::icon name="check" class="size-4" data-on />
-                    <x-livewire-material::icon name="close" class="size-4" data-off />
+                    <x-livewire-material::icon name="check" class="size-4" optical="20" data-on />
+                    <x-livewire-material::icon name="close" class="size-4" optical="20" data-off />
                 @endif
             </span>
         </span>
diff --git a/tests/Feature/Components/SelectionTest.php b/tests/Feature/Components/SelectionTest.php
index 4b0e1fbe..d25d5d85 100644
--- a/tests/Feature/Components/SelectionTest.php
+++ b/tests/Feature/Components/SelectionTest.php
@@ -16,6 +16,12 @@ it('draws a checkbox whose row is its label', function () {
         ->not->toContain('data-indeterminate');
 });
 
+it('fills the box with an 18px tick from the 20 optical cut', function () {
+    expect((string) $this->blade('<x-checkbox label="Notify me" />'))
+        ->toContain((string) $this->blade('<x-icon name="check" class="size-4.5" optical="20" data-check />'))
+        ->toContain((string) $this->blade('<x-icon name="remove" class="size-4.5" optical="20" data-mixed />'));
+});
+
 it('marks a checkbox that is partly ticked', function () {
     expect((string) $this->blade('<x-checkbox label="Select all" indeterminate />'))->toContain('data-indeterminate');
 });