Andreas Reinhold / reiniandClaude Opus 5
cd64f4f371
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / browser (safari, webkit) (push) Successful in 2m17s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m7s
tests / feature (8.5) (push) Successful in 1m0s
tests / browser (chrome, chromium) (push) Successful in 1m49s
<x-button> (label buttons, icon buttons and toggles in five sizes, with filled, tonal, outlined, elevated and text variants in any colour role), <x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>, <x-group> as a connected button group, <x-split-button>, <x-fab>, <x-fab-menu> and <x-loading>. Sizes, colours and shapes come from androidx Compose Material 3's tokens; the loading indicator ports its Morph into SVG + SMIL. Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS anchor positioning. Browser tests run in Chromium, Firefox and WebKit. The showcase fetches the icon names on demand: inlined, they tripped Pest's test server into HTTP 431s under Firefox. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
44 lines
2.3 KiB
PHP
44 lines
2.3 KiB
PHP
{{-- M3 Expressive's loading indicator: a shape that morphs through seven Expressive shapes while
|
|
it turns, for a wait that has no known length.
|
|
|
|
In the text colour — primary unless the caller colours it — and 48px unless sized. `contained`
|
|
puts it on a primary-container circle, for a spinner over content. It is a `progressbar`
|
|
named `label` ("Loading" by default); pass `:label="false"` where something else already
|
|
says what is happening, as a button's own spinner does.
|
|
|
|
Pure SVG with SMIL, so it animates in every engine without script. Under
|
|
`prefers-reduced-motion` the shape rests. The geometry is androidx Compose Material 3's
|
|
LoadingIndicator and Morph, ported in bin/loading-indicator.mjs (Apache-2.0):
|
|
LoadingIndicatorTokens' 38px indicator in a 48px container, a morph every 650ms on a spring,
|
|
a quarter turn per morph and a full turn every 4666ms. --}}
|
|
|
|
@props([
|
|
'contained' => false,
|
|
'label' => null,
|
|
])
|
|
|
|
@php
|
|
$sized = preg_match('/(^|\s)(size|w|h)-/', (string) $attributes->get('class')) === 1;
|
|
$coloured = preg_match('/(^|\s)text-(?!(xs|sm|base|lg|xl|[2-9]xl|left|center|right|start|end)(\s|$))/', (string) $attributes->get('class')) === 1;
|
|
$decorative = $label === false;
|
|
$label = $decorative ? null : ($label ?? __('Loading'));
|
|
|
|
$attributes = $attributes
|
|
->class([
|
|
'inline-flex shrink-0 items-center justify-center',
|
|
'size-12' => ! $sized,
|
|
'rounded-corner-full bg-primary-container text-on-primary-container' => $contained,
|
|
'text-primary' => ! $contained && ! $coloured,
|
|
])
|
|
->merge(array_filter([
|
|
'role' => $decorative ? null : 'progressbar',
|
|
'aria-label' => $label,
|
|
'aria-hidden' => $decorative ? 'true' : null,
|
|
]));
|
|
@endphp
|
|
|
|
<span {{ $attributes }}>
|
|
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(true, new \Illuminate\View\ComponentAttributeBag(['class' => 'size-full motion-reduce:hidden', 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
|
|
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(false, new \Illuminate\View\ComponentAttributeBag(['class' => 'hidden size-full motion-reduce:block', 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
|
|
</span>
|