release: WRNexusJS 0.3.5

.publish/ui/components/badge.wrn

@@ -1,27 +1,19 @@
 component Badge {
   props {
+    size = "default"
+    color = "primary"
+    title = "Badge"
+    description = ""
+    items = []
+    variant = "default"
     class = ""
-    label = ""
-    variant = "neutral"
-    size = "md"
   }
-
   view {
-    <span class="wire-badge wire-badge--{variant} wire-badge--{size} {class}">
-      {#if variant === "success"}
-        <span class="size-1.5 rounded-full bg-[var(--wire-color-success)]" aria-hidden="true"></span>
-      {/if}
-      {#if variant === "warning"}
-        <span class="size-1.5 rounded-full bg-[var(--wire-color-warning)]" aria-hidden="true"></span>
-      {/if}
-      {#if variant === "danger"}
-        <span class="size-1.5 rounded-full bg-[var(--wire-color-danger)]" aria-hidden="true"></span>
-      {/if}
-      {#if variant === "brand"}
-        <span class="size-1.5 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
-      {/if}
-      <span>{label}</span>
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--badge wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
-    </span>
+    </section>
   }
 }