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

Pare down the showcase's unlayered sizing classes

Browse Source 
Plan step 38 (last batch): only two of the previous batch's three
call sites actually need a plain unlayered class for their demo width
— <x-input> forwards `style` to the raw <input>, not the field wrapper
that is sized, and <x-datepicker> forwards neither, only `class`,
`wire:key` and `x-model` — so .showcase-w-sm and .showcase-w-xs stay.
<x-slider> does forward `style` to its root, so its vertical demo's
shared height is one now instead of the .showcase-slider-vertical
class. .showcase-w-narrow stays a class on purpose rather than an
inline style: fields.blade.php's "Narrower" input demonstrates an
application's own unlayered rule beating the package's layered
default, and an inline style would win regardless of layers, proving
nothing. The header explains all three.

StylesheetsTest gains showcase.css's own shape check — the same rule
every package stylesheet passes (header, layer statement, plain
imports, no Tailwind directive, breakpoints only at M3's four) — with
its three documented unlayered exceptions as the one allowed gap.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 05:34:06 +02:00
co-authored by Claude Sonnet 5
parent 42009f3b0c
commit 067626c52e
3 changed files with 79 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/sliders.blade.php
+5 -5
View File
@@ -25,11 +25,11 @@
'Vertical' => <<<'BLADE'
{{-- M3 Expressive's second orientation. A vertical slider needs a height: it is on the wrapper, which the label and hint share. --}}
<x-livewire-material::row gap="space500" wrap align="end">
<x-slider label="Volume" orientation="vertical" value="40" class="showcase-slider-vertical" hint="Up and Down" />
<x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks class="showcase-slider-vertical" />
<x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" class="showcase-slider-vertical" />
<x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" class="showcase-slider-vertical" />
<x-slider label="Locked" orientation="vertical" value="25" disabled class="showcase-slider-vertical" />
<x-slider label="Volume" orientation="vertical" value="40" style="height: 256px;" hint="Up and Down" />
<x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks style="height: 256px;" />
<x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" style="height: 256px;" />
<x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" style="height: 256px;" />
<x-slider label="Locked" orientation="vertical" value="25" disabled style="height: 256px;" />
</x-livewire-material::row>
BLADE,
'Colours and value labels' => <<<'BLADE'