LWB-255 Adding specific attributes to the details component

resources/views/interactive/details.blade.php

@@ -1,3 +1,3 @@
-<details {!! $globalAttributes !!}>
+<details {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </details>

src/Components/Interactive/Details.php

@@ -8,6 +8,7 @@
 use Illuminate\Foundation\Application;
 use Illuminate\View\View;
 use Livewire\Component;
+use Livewire\Features\SupportAttributes\AttributeCollection;
 use T73biz\LwBits\Components\GlobalAttributesTrait;
 
 /**
@@ -17,12 +18,42 @@ class Details extends Component
 {
     use GlobalAttributesTrait;
 
+    /**
+     * This attribute enables multiple <details> elements to be connected, with only one open at a time. This allows
+     * developers to easily create UI features such as accordions without scripting.
+     *
+     * The name attribute specifies a group name — give multiple <details> elements the same name value to group them.
+     * Only one of the grouped <details> elements can be open at a time — opening one will cause another to close. If
+     * multiple grouped <details> elements are given the open attribute, only the first one in the source order will be
+     * rendered open.
+     */
+    public string $name = '';
+
+    /**
+     * This Boolean attribute indicates whether the details — that is, the contents of the <details> element — are
+     * currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent.
+     * By default this attribute is absent which means the details are not visible.
+     */
+    public bool $open = false;
+
+    /**
+     * The specific attributes for the details element.
+     */
+    private AttributeCollection $specificAttributes;
+
     /**
      * Standard mount function
      */
     public function mount(): void
     {
         $this->setGlobalAttributes();
+        $this->specificAttributes = new AttributeCollection();
+        if ($this->open) {
+            $this->specificAttributes->add(['open']);
+        }
+        if (! empty($this->name)) {
+            $this->specificAttributes->add(['name' => $this->name]);
+        }
     }
 
     /**
@@ -34,6 +65,7 @@ public function render(): Application|ContractedApplication|ContractedView|Facto
             'lw-bits::interactive.details',
             [
                 'globalAttributes' => $this->getGlobalAttributes(),
+                'specificAttributes' => $this->parseAttributes($this->specificAttributes),
                 'slot' => '',
             ]
         );

tests/Feature/Interactive/DetailsTest.php

@@ -117,3 +117,13 @@
     Livewire::test(MyDetails::class, ['translate' => true])
         ->assertSee('translate');
 });
+
+it('can render with open', function () {
+    Livewire::test(MyDetails::class, ['open' => true])
+        ->assertSee('open');
+});
+
+it('can render with name', function () {
+    Livewire::test(MyDetails::class, ['name' => 'main-details'])
+        ->assertSee('name="main-details"', false);
+});