release: WRNexusJS 0.5.0

.publish/ui/components/Collapse.wrn

@@ -1,15 +1,95 @@
 component Collapse {
   props {
+    @event toggle = function
+    @event open = function
+    @event close = function
     size = "default"
     color = "primary"
     items = []
     multiple = false
+    mode = "panel"
+    initialOpenIndexes = []
+    ariaLabel = "Collapsible content"
     class = ""
   }
+
+  state openIndexes = initialOpenIndexes
+
+  functions {
+    function isOpen(index) {
+      return openIndexes.includes(index)
+    }
+
+    function toggleItem(index, item, opening) {
+      if (item.disabled) {
+        return
+      }
+      opening = !isOpen(index)
+      if (opening) {
+        if (multiple) {
+          openIndexes = openIndexes.concat(index)
+        } else {
+          openIndexes = [index]
+        }
+        $emit("open", { index: index, item: item })
+      } else {
+        openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
+        $emit("close", { index: index, item: item })
+      }
+      $emit("toggle", {
+        index: index,
+        item: item,
+        open: opening,
+        openIndexes: openIndexes
+      })
+    }
+  }
+
   view {
-    <div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--collapse {class}">
-      {#each items as item}<details open="{item.open}"><summary>{item.label}</summary><div>{item.content}</div></details>{/each}
+    <section
+      {...attrs}
+      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--collapse {class}"
+      data-mode="{mode}"
+      aria-label="{ariaLabel}"
+    >
+      {#each items as item, index}
+        <article class="wire-next__collapse-item" data-open="{isOpen(index)}">
+          {#if mode === "inline" && item.preview}
+            <p class="wire-next__collapse-preview">{item.preview}</p>
+          {/if}
+
+          <button
+            class="wire-next__collapse-trigger"
+            type="button"
+            aria-expanded="{isOpen(index) ? 'true' : 'false'}"
+            aria-controls="{item.id || 'collapse-panel-' + index}"
+            disabled="{item.disabled}"
+            @click="toggleItem(index, item)"
+          >
+            <span>{isOpen(index) ? (item.closeLabel || "Read less") : item.label}</span>
+            <span class="icon-[lucide--chevron-down] wire-next__collapse-chevron" aria-hidden="true"></span>
+          </button>
+
+          <div
+            id="{item.id || 'collapse-panel-' + index}"
+            class="wire-next__collapse-panel"
+            data-open="{isOpen(index)}"
+            aria-hidden="{isOpen(index) ? 'false' : 'true'}"
+            inert="{!isOpen(index)}"
+          >
+            <div class="wire-next__collapse-content">
+              {#if item.title}<h4>{item.title}</h4>{/if}
+              {#if item.content}<p>{item.content}</p>{/if}
+              {#if item.links && item.links.length}
+                <nav aria-label="Related links">
+                  {#each item.links as link}<a href="{link.href || '#'}">{link.label}</a>{/each}
+                </nav>
+              {/if}
+            </div>
+          </div>
+        </article>
+      {/each}
       <slot />
-    </div>
+    </section>
   }
 }