Merge branch 'worktree-agent-ac2cdea6121b46ea6'

resources/views/components/icon.blade.php

@@ -1,9 +1,17 @@
-{{-- A Material Symbol (Rounded, weight 400, grade 0, optical size 24), inline.
+{{-- A Material Symbol (Rounded, weight 400, grade 0), inline.
 
      `name` is Google's name for it, underscores and all (`arrow_back`), as listed on
      fonts.google.com/icons; every symbol Google publishes is available, and an unknown name
      throws. `filled` draws the filled state, which in M3 means active or selected.
 
+     `optical` is the cut the glyph is drawn from, `24` (the default) or `20`; anything else
+     falls back to 24, and `filled` combines with either. M3's optical size axis redraws a
+     symbol so its strokes look equally heavy at every size, which means an icon drawn at
+     20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its
+     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the
+     size are separate decisions, so a caller that draws `size-5` passes `optical="20"`
+     with it; the components that size their own icons do that for you.
+
      Decorative by default and hidden from screen readers, because nearly every icon sits
      beside words that already say what it means. Pass `label` when the icon alone carries
      the meaning.
@@ -16,6 +24,7 @@
     'name',
     'filled' => false,
     'label' => null,
+    'optical' => 24,
 ])
 
 @php
@@ -31,4 +40,4 @@
         ]));
 @endphp
 
-{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes) }}
+{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, (int) $optical) }}

resources/views/showcase/sections/icons.blade.php

@@ -5,6 +5,7 @@
         names: [],
         query: '',
         filled: false,
+        optical20: false,
         async load() {
             this.names = await (await fetch('{{ route('livewire-material.symbols', [], false) }}')).json();
         },
@@ -19,7 +20,9 @@
     <h2 class="type-headline-md">Icons</h2>
 
     <p class="max-w-3xl type-body-md text-on-surface-variant">
-        Every Material Symbol (Rounded, 400, grade 0, 24px) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>.
+        Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,
+        drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
+        the 20 cut: <code>&lt;x-icon name="…" optical="20" class="size-5" /&gt;</code>.
     </p>
 
     <div class="flex flex-wrap items-center gap-4">
@@ -32,15 +35,21 @@
             <input type="checkbox" x-model="filled" class="size-4 accent-primary" />
             Filled
         </label>
+
+        <label class="flex items-center gap-2 type-label-lg">
+            <input type="checkbox" x-model="optical20" class="size-4 accent-primary" />
+            Optical size 20
+        </label>
     </div>
 
     <ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
         <template x-for="name in matches" x-bind:key="name">
             <li class="flex flex-col items-center gap-2 rounded-corner-md bg-surface-container p-3 text-center">
                 <span
-                    class="size-6 bg-current"
+                    class="bg-current"
+                    x-bind:class="optical20 ? 'size-5' : 'size-6'"
                     x-bind:style="{
-                        mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg') center / contain no-repeat`,
+                        mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`,
                     }"
                 ></span>
                 <code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code>