Refresh UI components and showcase; release updated framework packages

packages/ui/components/LegendIndicator.wrn

@@ -13,16 +13,29 @@ component LegendIndicator {
     variant: string = "default"
     class: string = ""
   }
+  state hiddenItems = []
+  functions {
+    client function toggleItem(item, index, sourceEvent) {
+      hiddenItems = hiddenItems.includes(index) ? hiddenItems.filter(function (value) { return value !== index }) : hiddenItems.concat(index)
+      output.toggle({ item: item, index: index, hidden: hiddenItems.includes(index), sourceEvent: sourceEvent })
+      output.select({ value: item.value || item.label, sourceEvent: sourceEvent })
+    }
+  }
   view {
-    <section class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--legend-indicator wrn-next--variant-{variant} {class}">
+    <div class="wrn-legend {class}">
       {#if title}<strong>{title}</strong>{/if}
       {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wrn-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
-      <slot />
-    </section>
+      <div class="wrn-legend__items">{#each items as item, index}<button type="button" aria-pressed="{!hiddenItems.includes(index)}" @click="toggleItem(item, index, event)"><i style="background:{item.color || 'var(--wrn-color-primary)'}" aria-hidden="true"></i><span>{item.label}</span>{#if item.value}<small>{item.value}</small>{/if}</button>{/each}</div><slot />
+    </div>
   }
-
   style {
+    .wrn-legend { display:grid; gap:.65rem; }
+    .wrn-legend p { margin:0; color:var(--wrn-color-muted); }
+    .wrn-legend__items { display:flex; flex-wrap:wrap; gap:.75rem; }
+    .wrn-legend button { display:flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--wrn-color-text); font:inherit; font-size:.875rem; cursor:pointer; }
+    .wrn-legend i { width:.65rem; height:.65rem; border-radius:50%; }
+    .wrn-legend button[aria-pressed="false"] { opacity:.45; text-decoration:line-through; }
+
     .wrn-next--legend-indicator {
       display: grid;
       gap: 0.75rem;