{{-- 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))) }}