Refresh UI components and showcase; release updated framework packages

examples/component-showcase/app/pages/preview/custom-modal.wrn

@@ -0,0 +1,7 @@
+page CustomModalExample {
+ state dialogOpen: boolean = false
+ view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Your own modal controls</h1><Button label="Invite a teammate" @click="dialogOpen = true" /><Modal open="{dialogOpen}" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""><div data-slot="header"><h2>Invite a teammate</h2></div><Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Cancel" variant="secondary" @click="dialogOpen = false" /><Button label="Done" @click="dialogOpen = false" /></div></Modal></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page CustomModalExample <span>&#123;</span>
+ state dialogOpen: boolean = false
+ view <span>&#123;</span> &lt;main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"&gt;&lt;h1&gt;Your own modal controls&lt;/h1&gt;&lt;Button label="Invite a teammate" @click="dialogOpen = true" /&gt;&lt;Modal open="<span>&#123;</span>dialogOpen<span>&#125;</span>" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""&gt;&lt;div data-slot="header"&gt;&lt;h2&gt;Invite a teammate&lt;/h2&gt;&lt;/div&gt;&lt;Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /&gt;&lt;div data-slot="footer"&gt;&lt;Button label="Cancel" variant="secondary" @click="dialogOpen = false" /&gt;&lt;Button label="Done" @click="dialogOpen = false" /&gt;&lt;/div&gt;&lt;/Modal&gt;&lt;/main&gt; <span>&#125;</span>
+<span>&#125;</span></code></pre></section> } }