Andreas Reinhold / reiniandClaude Opus 5
bdbb76a0bd
<x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20 cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape size> writes --md-shape-size. Both draw from plain-CSS stylesheets in material.components, gathered in components.css until all.css replaces it; a caller's size class still wins while the other components are rewritten. Plan steps 35 and 36, the prop every component rewrite depends on. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
23 lines
1.0 KiB
PHP
23 lines
1.0 KiB
PHP
{{-- One of M3 Expressive's shapes, filled in the colour of the text around it.
|
|
|
|
Decoration: a large tonal shape behind an illustration, a scalloped container behind an
|
|
icon. `name` is the shape's kebab-case name (`cookie-9`, `soft-burst`, `pill`). Every
|
|
shape fills a 100-unit box to within 2 units, so one sits behind another at the same size.
|
|
|
|
Hidden from assistive tech. `size` is its size in px (any whole number from 8 to 1024),
|
|
written as `--md-shape-size` and drawn by resources/css/components/shape.css; without it the
|
|
caller sizes the shape. --}}
|
|
|
|
@props(['name', 'size' => null])
|
|
|
|
@php
|
|
$size = filter_var($size, FILTER_VALIDATE_INT, ['options' => ['min_range' => 8, 'max_range' => 1024]]) ?: null;
|
|
@endphp
|
|
|
|
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::shape($name, $attributes->merge(array_filter([
|
|
'data-md-shape' => true,
|
|
'style' => $size !== null ? "--md-shape-size: {$size}px" : null,
|
|
'aria-hidden' => 'true',
|
|
'focusable' => 'false',
|
|
], fn ($value): bool => $value !== null))) }}
|