Andreas Reinhold / reiniandClaude Opus 5
f2a3c4d056
Two gaps found rewriting the Boost skill for 2.0's plain CSS, each
closed the way M3 describes it.
`<x-loading size="96">`: M3 gives the loading indicator a responsive
size, 48dp by default and flexible from 24 to 240dp ("never exceed that
range"), with the container and the active shape in a fixed ratio. The
size had no prop, so an application wrote a width and height of its own;
`size` now takes a whole number of px in that range, written as
`--md-loading-size`, and the SVG keeps the 48:38 ratio as it scales. A
value outside the range is ignored, as `<x-icon>` and `<x-shape>` ignore
theirs, and an application's own width and height still win.
`--md-navigation-rail-value`: M3 Expressive's rail has two values,
collapsed and expanded (Compose's WideNavigationRailValue), and content
in a rail follows it. Without a hook an application copied the rail's
seven conditions — mode, `data-rail`, `data-rail-auto`, open, and the
window band — out of navigation-rail.css. The rail now publishes the
answer from the same branches that narrow it: `expanded` by default,
`collapsed` wherever it is drawn collapsed, so a style query in the
application's CSS switches at the first paint and at the same moment
as the rail's own items. A rail open over a scrim reads `expanded`, and
outside a rail the property is unset. A JS attribute would have missed
the first paint; a width container query would have lagged the collapse
animation.
Style queries on a custom property need Firefox 151, so the browser
floor moves from Firefox 147 to 151 (README, the CI note, UPGRADE's new
2.1.0 section); Chrome 125 and Safari 18.4 are unchanged.
Browser tests pin both in Chrome, Firefox and Safari: the indicator's
drawn box at 96 and 32px, and the rail's value — with a style query
acting on it — at the first paint for fixed modes, across the window
classes and the menu button for an adaptive rail, and open and closed
for a modal one. NavigationRailTest pins the value in each of the five
collapsed branches.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
186 lines
10 KiB
PHP
186 lines
10 KiB
PHP
@php
|
|
$examples = [
|
|
'Variants' => <<<'BLADE'
|
|
<x-button label="Filled" variant="filled" />
|
|
<x-button label="Tonal" variant="tonal" />
|
|
<x-button label="Outlined" variant="outlined" />
|
|
<x-button label="Elevated" variant="elevated" />
|
|
<x-button label="Text" />
|
|
BLADE,
|
|
'Sizes, with an icon' => <<<'BLADE'
|
|
<x-button label="Extra small" icon="upload" variant="filled" size="xs" />
|
|
<x-button label="Small" icon="upload" variant="filled" />
|
|
<x-button label="Medium" icon="upload" variant="filled" size="md" />
|
|
<x-button label="Large" icon="upload" variant="filled" size="lg" />
|
|
<x-button label="Extra large" icon="upload" variant="filled" size="xl" />
|
|
BLADE,
|
|
'Square, and pressed (hold the pointer down)' => <<<'BLADE'
|
|
<x-button label="Round" variant="tonal" size="md" />
|
|
<x-button label="Square" variant="tonal" size="md" shape="square" />
|
|
BLADE,
|
|
'Colours' => <<<'BLADE'
|
|
<x-button label="Primary" primary />
|
|
<x-button label="Secondary" variant="filled" color="secondary" />
|
|
<x-button label="Tertiary" variant="filled" color="tertiary" />
|
|
<x-button label="Delete" icon="delete" danger />
|
|
<x-button label="Take down" caution />
|
|
<x-button label="Success" variant="tonal" color="success" />
|
|
<x-button label="Info" variant="outlined" color="info" />
|
|
BLADE,
|
|
'Toggle buttons' => <<<'BLADE'
|
|
<x-button label="Filled" variant="filled" :selected="false" />
|
|
<x-button label="Selected" variant="filled" :selected="true" />
|
|
<x-button label="Tonal" variant="tonal" :selected="false" />
|
|
<x-button label="Selected" variant="tonal" :selected="true" />
|
|
<x-button label="Outlined" variant="outlined" :selected="false" />
|
|
<x-button label="Selected" variant="outlined" :selected="true" />
|
|
BLADE,
|
|
'Icon buttons, and their tooltips' => <<<'BLADE'
|
|
<x-button icon="favorite" tooltip="Standard" />
|
|
<x-button icon="favorite" tooltip="Filled" variant="filled" />
|
|
<x-button icon="favorite" tooltip="Tonal" variant="tonal" />
|
|
<x-button icon="favorite" tooltip="Outlined" variant="outlined" />
|
|
<x-button icon="favorite" tooltip="Selected" variant="filled" :selected="true" />
|
|
<x-button icon="favorite" tooltip="Selected, square" variant="tonal" shape="square" :selected="true" />
|
|
BLADE,
|
|
'Icon button sizes and widths' => <<<'BLADE'
|
|
<x-button icon="share" tooltip="XS narrow" variant="tonal" size="xs" width="narrow" />
|
|
<x-button icon="share" tooltip="S" variant="tonal" />
|
|
<x-button icon="share" tooltip="M wide" variant="tonal" size="md" width="wide" />
|
|
<x-button icon="share" tooltip="L" variant="tonal" size="lg" />
|
|
<x-button icon="share" tooltip="XL wide" variant="tonal" size="xl" width="wide" />
|
|
BLADE,
|
|
'Links and disabled' => <<<'BLADE'
|
|
<x-button label="Opens a page" link="#buttons" variant="outlined" />
|
|
<x-button label="Leaves the site" link="https://m3.material.io" external icon-right="open_in_new" />
|
|
<x-button label="Disabled" variant="filled" disabled />
|
|
<x-button label="Disabled link" link="#buttons" variant="tonal" disabled />
|
|
<x-button icon="delete" tooltip="Disabled" variant="outlined" disabled />
|
|
BLADE,
|
|
'Loading indicator' => <<<'BLADE'
|
|
<x-loading />
|
|
<x-loading contained />
|
|
<x-loading label="Uploading" size="96" style="color: var(--md-sys-color-tertiary);" />
|
|
<x-loading contained size="32" />
|
|
BLADE,
|
|
'Button groups: standard (press a button) and connected' => <<<'BLADE'
|
|
<x-button-group label="Standard" size="md">
|
|
<x-button label="Day" variant="tonal" size="md" />
|
|
<x-button label="Week" variant="tonal" size="md" />
|
|
<x-button label="Month" variant="tonal" size="md" />
|
|
</x-button-group>
|
|
|
|
<x-button-group label="Formatting" connected>
|
|
<x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="true" />
|
|
<x-button icon="format_italic" aria-label="Italic" variant="tonal" :selected="false" />
|
|
<x-button icon="format_underlined" aria-label="Underline" variant="tonal" :selected="false" />
|
|
</x-button-group>
|
|
BLADE,
|
|
'A connected group that owns its selection' => <<<'BLADE'
|
|
<x-stack gap="space300" x-data="{ view: 'week', marks: ['bold'] }">
|
|
<x-button-group connected selection="single" required label="View" x-model="view">
|
|
<x-button label="Day" value="day" variant="tonal" :selected="false" />
|
|
<x-button label="Week" value="week" variant="tonal" :selected="true" />
|
|
<x-button label="Month" value="month" variant="tonal" :selected="false" />
|
|
</x-button-group>
|
|
|
|
<x-button-group connected selection="multi" label="Formatting" x-model="marks">
|
|
<x-button icon="format_bold" aria-label="Bold" value="bold" variant="tonal" :selected="true" />
|
|
<x-button icon="format_italic" aria-label="Italic" value="italic" variant="tonal" :selected="false" />
|
|
<x-button icon="format_underlined" aria-label="Underline" value="underline" variant="tonal" :selected="false" />
|
|
</x-button-group>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
View: <code x-text="view"></code> · marks: <code x-text="marks.join(', ') || 'none'"></code>.
|
|
The shape follows at once; the colours come from each button's own <code>:selected</code>, which a Livewire render brings back.
|
|
</p>
|
|
</x-stack>
|
|
BLADE,
|
|
'Square groups (hold a button down)' => <<<'BLADE'
|
|
<x-button-group label="Square standard" size="md" shape="square">
|
|
<x-button label="Day" variant="tonal" size="md" />
|
|
<x-button label="Week" variant="tonal" size="md" />
|
|
<x-button label="Month" variant="tonal" size="md" />
|
|
</x-button-group>
|
|
|
|
<x-button-group label="Square formatting" connected shape="square">
|
|
<x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="true" />
|
|
<x-button icon="format_italic" aria-label="Italic" variant="tonal" :selected="false" />
|
|
<x-button icon="format_underlined" aria-label="Underline" variant="tonal" :selected="false" />
|
|
</x-button-group>
|
|
|
|
<x-stack x-data="{ density: 'cosy' }">
|
|
<x-group label="Density" name="showcase-density" shape="square" x-model="density" inline :options="[
|
|
['id' => 'compact', 'name' => 'Compact'],
|
|
['id' => 'cosy', 'name' => 'Cosy'],
|
|
['id' => 'roomy', 'name' => 'Roomy'],
|
|
]" />
|
|
</x-stack>
|
|
BLADE,
|
|
'A choice as a connected group' => <<<'BLADE'
|
|
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ theme: 'system', days: ['mon'] }">
|
|
<x-group label="Theme" name="showcase-theme" x-model="theme" :options="[
|
|
['id' => 'light', 'name' => 'Light', 'icon' => 'light_mode'],
|
|
['id' => 'dark', 'name' => 'Dark', 'icon' => 'dark_mode'],
|
|
['id' => 'system', 'name' => 'System', 'icon' => 'computer'],
|
|
]" />
|
|
|
|
<x-group label="Days" name="showcase-days" x-model="days" multiple variant="outlined" hint="Thursday is fully booked" hint-class="md-ink-warning" :options="[
|
|
['id' => 'mon', 'name' => 'Mon'],
|
|
['id' => 'tue', 'name' => 'Tue'],
|
|
['id' => 'wed', 'name' => 'Wed'],
|
|
['id' => 'thu', 'name' => 'Thu', 'disabled' => true],
|
|
]" />
|
|
</x-grid>
|
|
BLADE,
|
|
'Split buttons' => <<<'BLADE'
|
|
<x-split-button label="Download all" icon="download" menu-label="Download options">
|
|
<x-menu-item label="As a ZIP" icon="folder_zip" />
|
|
<x-menu-item label="One by one" icon="download" />
|
|
</x-split-button>
|
|
|
|
<x-split-button label="Share" variant="tonal" size="md" menu-label="Share options">
|
|
<x-menu-item label="Copy link" icon="content_copy" />
|
|
<x-menu-item label="Email" icon="mail" />
|
|
</x-split-button>
|
|
|
|
<x-split-button label="Save" variant="outlined" size="xs" menu-label="Save options">
|
|
<x-menu-item label="Save as draft" />
|
|
</x-split-button>
|
|
BLADE,
|
|
'FABs and extended FABs' => <<<'BLADE'
|
|
<x-fab icon="add" tooltip="New share" />
|
|
<x-fab icon="edit" size="md" color="secondary" tooltip="Edit" />
|
|
<x-fab icon="upload" size="lg" color="tertiary" tooltip="Upload" />
|
|
<x-fab icon="add" label="New share" />
|
|
<x-fab icon="upload" label="Upload" size="md" variant="filled" />
|
|
BLADE,
|
|
'An extended FAB that collapses on scroll (scroll the page)' => <<<'BLADE'
|
|
<x-fab icon="edit" label="Compose" collapse-on-scroll />
|
|
<x-fab icon="upload" label="Upload" size="md" color="secondary" collapse-on-scroll />
|
|
<x-fab icon="add" label="New share" size="lg" color="tertiary" collapse-on-scroll />
|
|
BLADE,
|
|
'FAB menu' => <<<'BLADE'
|
|
<x-row justify="end" align="end" style="width: 100%; height: 288px;">
|
|
<x-fab-menu label="New">
|
|
<x-fab-menu-item label="Upload files" icon="upload_file" />
|
|
<x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" />
|
|
<x-fab-menu-item label="Paste text" icon="content_paste" />
|
|
</x-fab-menu>
|
|
</x-row>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="buttons" gap="space300">
|
|
<h2 class="md-visually-hidden">Buttons</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-button></code>: label buttons, icon buttons and toggles in M3 Expressive's five sizes.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|