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
51 lines
2.3 KiB
PHP
51 lines
2.3 KiB
PHP
<section
|
|
id="icons"
|
|
class="scroll-mt-24 space-y-6"
|
|
x-data="{
|
|
names: [],
|
|
query: '',
|
|
filled: false,
|
|
async load() {
|
|
this.names = await (await fetch('{{ route('livewire-material.symbols', [], false) }}')).json();
|
|
},
|
|
get matches() {
|
|
const query = this.query.trim().toLowerCase().replaceAll(' ', '_');
|
|
|
|
return (query === '' ? this.names : this.names.filter((name) => name.includes(query))).slice(0, 120);
|
|
},
|
|
}"
|
|
x-intersect.once="load()"
|
|
>
|
|
<h2 class="type-headline-md">Icons</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
Every Material Symbol (Rounded, 400, grade 0, 24px) as <code><x-icon name="…" /></code>, outlined or <code>filled</code>.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<label class="flex min-w-72 flex-1 items-center gap-2 rounded-corner-xs border border-outline px-3 py-2 focus-within:outline-3 focus-within:outline-secondary">
|
|
<x-icon name="search" class="size-5 text-on-surface-variant" />
|
|
<input type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" class="w-full bg-transparent type-body-lg outline-none" />
|
|
</label>
|
|
|
|
<label class="flex items-center gap-2 type-label-lg">
|
|
<input type="checkbox" x-model="filled" class="size-4 accent-primary" />
|
|
Filled
|
|
</label>
|
|
</div>
|
|
|
|
<ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
|
|
<template x-for="name in matches" x-bind:key="name">
|
|
<li class="flex flex-col items-center gap-2 rounded-corner-md bg-surface-container p-3 text-center">
|
|
<span
|
|
class="size-6 bg-current"
|
|
x-bind:style="{
|
|
mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg') center / contain no-repeat`,
|
|
}"
|
|
></span>
|
|
<code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</section>
|