From 9aa02df69f30e0cb25fadd69eef580765e684ccc Mon Sep 17 00:00:00 2001 From: Andreas Reinhold Date: Mon, 14 Sep 2026 06:16:22 +0200 Subject: [PATCH] Cut the badge's example glyph at 20 too A 12px icon beside a status label came from the 24px cut in every place the library shows one off. Plan step 18, the optical-size pass behind actions.md. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/boost/skills/livewire-material-development/SKILL.md | 2 +- resources/views/components/badge.blade.php | 2 +- resources/views/showcase/sections/communication.blade.php | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index c18a3970..1c933006 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -374,7 +374,7 @@ A value the server changes animates after a morph (the SVG is `wire:ignore`; onl - ``, ``, ``, `` — a status label (not an M3 badge) in the colour's container, in the colour itself (`solid`, for a label that has to stand out), or a neutral `outline` edge (the role that has to be seen, not the decorative `outline-variant` dividers use). `color` (alias `tone`): `error` default, `primary`, `secondary`, `tertiary`, `success`, `warning`, `info`, `neutral`, `plain`; an unknown colour is `error`. - `color="neutral"` — neutral ink on every variant: a dot or count in on-surface-variant with surface text, `tonal` in surface-container-high with on-surface-variant text, `outline` in the outline edge with on-surface-variant text. - `color="plain"` — no background, text or border colour in any variant (shape, size and type stay), so the classes you pass paint it: ``. Pass both a background and a text class; an `outline` badge's edge takes the text colour unless you pass a `border-*` colour. -- The value is `value` or the slot; the slot renders as HTML: ` Pro`. `value` is escaped. A slot that holds only whitespace or comments is still a dot. +- The value is `value` or the slot; the slot renders as HTML: ` Pro`. `value` is escaped. A slot that holds only whitespace or comments is still a dot. ### `` diff --git a/resources/views/components/badge.blade.php b/resources/views/components/badge.blade.php index 36afc916..2f1a04ef 100644 --- a/resources/views/components/badge.blade.php +++ b/resources/views/components/badge.blade.php @@ -24,7 +24,7 @@ caller's classes paint it: ``. The value is `value`, or the slot, which renders as HTML — an icon beside the word: - ` Pro`. With neither it is a dot. + ` Pro`. With neither it is a dot. A count or dot says nothing to a screen reader on its own: give the icon's control a label that includes it ("Notifications, 4 new"), or pass `label` here. --}} diff --git a/resources/views/showcase/sections/communication.blade.php b/resources/views/showcase/sections/communication.blade.php index e0edd919..41eb678a 100644 --- a/resources/views/showcase/sections/communication.blade.php +++ b/resources/views/showcase/sections/communication.blade.php @@ -12,7 +12,7 @@ - Pro + Pro BLADE, 'Snackbars' => <<<'BLADE'