{{-- M3's feed canonical layout: cards or items to browse, in columns that multiply as the room
     grows — news, photos, posts.

         <x-feed min-item="280px">
             @foreach ($posts as $post)
                 <x-card wire:key="post-{{ $post->id }}" :title="$post->title">…</x-card>
             @endforeach
         </x-feed>

     M3's feed rules, row by row (docs/reference/m3/foundations-supplement.md § Canonical layouts →
     Feed): a compact window (below 600px) stacks one card per row at the full width of the pane;
     medium (600–839) splits into equal-width columns; expanded, large and extra-large have more
     columns than medium, each usually wider. So below 600px it is one column, and from 600px it
     fits as many equal columns of at least `min-item` as the feed has room for — more on a wider
     window, and wider until another fits. M3 publishes no minimum or count for the web, so
     `min-item` (`240px` by default; `280px`, `18rem`, `20ch` or a number of px) is yours to set
     by the content. It follows the feed's own width, so a feed inside a pane beside another
     stays sensible.

     The items keep their order, which M3 makes the reading order ("item order is determined by
     position"). The space between them is M3's spacer, 16px on a compact window and 24px from
     medium, unless `gap` names a spacing token (`space25` … `space900`; an unknown name is no
     gap). A card that should span two columns can say so in its own `style`.

     It takes `as` (`div` by default; `ul` for a list of items, with `li` children), `hide-below`
     and `hide-from` like every layout component, and the caller's `class` and `style` land on it
     untouched. Drawn by resources/css/layout/feed.css. --}}

@props([
    'as' => null,
    'minItem' => null,
    'gap' => null,
    'hideBelow' => null,
    'hideFrom' => null,
])

@php
    $layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
    $element = $layout::element($as);
    $minItem = $layout::length($minItem) ?? '240px';

    $attributes = $attributes->merge(array_filter([
        'data-md-feed' => true,
        'data-md-gap' => $layout::spacing($gap),
        'style' => "--md-min-item: {$minItem};",
    ] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
@endphp

<{{ $element }} {{ $attributes }}>{{ $slot }}</{{ $element }}>