{{-- Children in columns, inside a pane.

         <x-grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 3]" gap="space300">…</x-grid>
         <x-grid min-item="280px" gap="space200">…</x-grid>

     `columns` is the column count per breakpoint — `compact`, `medium` (600px), `expanded` (840),
     `large` (1200), `extra-large` (1600), M3's (docs/reference/m3/foundations.md § Layout →
     Breakpoints) — as a map, or one whole number for all of them. A breakpoint left out takes the
     nearest smaller one's count, and compact is 1 unless given. All five are written on the grid as
     `--md-columns-compact` … `--md-columns-extra-large`, so a grid nested in another never inherits
     its parent's.

     `min-item` (`280px`, `18rem`, `20ch`, or a number of px) fills each row with as many columns as
     fit at that width, which follows the room the grid has rather than the window — the right
     choice inside a pane whose width is not the window's. With `columns` as well, the counts become
     a ceiling. `gap` is a spacing token's name, `space25` … `space900`
     (docs/reference/m3/styles-supplement.md § Spacing), none when left out or unknown. Children
     keep their order, which is the reading order.

     It takes `as`, `hide-below` and `hide-from` like every layout component, and the caller's
     `class` and `style` land on it untouched (the caller's style after the column properties).
     Drawn by resources/css/layout/grid.css. --}}

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

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

    $style = $layout::columnStyle($layout::columns($columns)).($minItem !== null ? " --md-min-item: {$minItem};" : '');

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

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