Andreas Reinhold / reiniandClaude Opus 5
79ca9a28b4
Plan step 38 review: the frame's structural rule that kept a section's own <h2> for screen readers (Tailwind's [&>section>h2]:sr-only before, a showcase.css rule during the rewrite) was removed as dead weight once every section had a real heading, so each page drew its title twice, the <h1> and an identical headline under it. The <h2>s are md-visually-hidden again, the frame's comment says why, and the section page test asserts it. The Layout section's description said "window size classes"; M3's term is breakpoints. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
40 lines
2.6 KiB
PHP
40 lines
2.6 KiB
PHP
<x-livewire-material::stack as="section" id="motion" gap="space300" x-data="{ moved: false, figure: 1204 }">
|
|
<h2 class="md-visually-hidden">Motion</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
M3 Expressive's springs as <code>--md-sys-motion-spatial-*</code> and <code>--md-sys-motion-effects-*</code>, each with its
|
|
own duration. Reduced motion makes all of them instant.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
|
Position, size and shape move on the spatial springs, which overshoot — <code>fast</code> for small elements, <code>slow</code> for large ones. Colour and opacity move on the effects springs, which never overshoot. Always pair an easing with its duration; everything that moves goes through these tokens, so reduced motion makes it instant. The Standard scheme (<code>motion.scheme</code>) swaps the spatial springs for a restrained set.
|
|
</p>
|
|
|
|
<x-livewire-material::button variant="filled" label="Move" x-on:click="moved = ! moved" />
|
|
|
|
<x-livewire-material::surface level="surface-container" padding="space200" corner="lg">
|
|
<x-livewire-material::stack gap="space100">
|
|
@foreach (['spatial-fast', 'spatial-default', 'spatial-slow', 'effects-fast', 'effects-default', 'effects-slow'] as $spring)
|
|
<div data-md-showcase-motion-row>
|
|
<code class="md-type-label-md md-ink-variant">--md-sys-motion-{{ $spring }}</code>
|
|
<div data-md-showcase-motion-track>
|
|
<div
|
|
data-md-showcase-motion-dot
|
|
style="transition: translate var(--md-sys-motion-{{ $spring }}-duration) var(--md-sys-motion-{{ $spring }})"
|
|
x-bind:style="moved && { translate: '16rem' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::surface>
|
|
|
|
<x-livewire-material::surface level="surface-container" padding="space200" corner="lg">
|
|
<x-livewire-material::row gap="space200" wrap align="center">
|
|
<p class="md-type-emphasized-display-sm md-tabular" x-figure x-text="figure.toLocaleString('en') + ' files'">1,204 files</p>
|
|
<x-livewire-material::button variant="text" label="Change the figure" x-on:click="figure = Math.round(Math.random() * 5000)" />
|
|
<code class="md-type-label-md md-ink-variant">x-figure</code>
|
|
</x-livewire-material::row>
|
|
</x-livewire-material::surface>
|
|
</x-livewire-material::stack>
|