Refresh UI components and showcase; release updated framework packages

examples/component-showcase/app/pages/components/kbd.wrn

@@ -3,8 +3,8 @@ page KbdDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Kbd"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "⌘ K"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Kbd"
     description = "Theme-aware, responsive kbd component."
@@ -31,7 +31,7 @@ page KbdDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Kbd
-  label="Kbd"
+  label="⌘ K"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -39,7 +39,7 @@ page KbdDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="Kbd" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="⌘ K" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -55,12 +55,12 @@ page KbdDetail {
           <div id="kbd-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Kbd size="default" label="Kbd" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Kbd size="default" color="primary" label="⌘ K" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Kbd
-  label="Kbd"
+  label="⌘ K"
 /&gt;</code></pre>
           </section>
         </div>
@@ -74,13 +74,12 @@ page KbdDetail {
           <div id="kbd-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Kbd size="sm" label="Compact example" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Kbd size="default" color="primary" label="Esc" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Kbd
-  size="sm"
-  label="Compact example"
+  label="Esc"
 /&gt;</code></pre>
           </section>
         </div>
@@ -94,13 +93,12 @@ page KbdDetail {
           <div id="kbd-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Kbd size="lg" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Kbd size="default" color="primary" label="Ctrl + Enter" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Kbd
-  size="lg"
-  label="Advanced example"
+  label="Ctrl + Enter"
 /&gt;</code></pre>
           </section>
         </div>