feat(ui): component redesign pass and fixes, release ui 0.8.87
Redesign - Shared field foundation rules (duplicated across 15 form components and emitted globally) are now identical everywhere, so later copies no longer silently override earlier redesigns. - Drawn checkbox and radio controls, white switch thumbs (the thumb was the text colour, a black blob in light mode), recessed field wells, keycap actions in Modal, Drawer, Popover, Toaster, Pagination, Stepper, DataTable. - Menus (Dropdown, ContextMenu, Popover, Select dropdown, Navbar panels) share one flat raised panel with neutral hover rows and mono section labels. - Alerts with an accent rail and icon chip; card headers without the grey band; accordion, collapse, list, list group, timeline, stats, metrics, chat, skeleton, avatar group, clipboard, splitter, section, sidebar, navbar and upload progress restyled. - Chart rebuilt: nice y-axis ticks, gridlines, rounded bars, line and area modes, hover tooltips, hidden series leave the scale. Fixes - Checkbox and radio labels toggle their input again (empty for="" broke it). - TimePicker kept every clicked time pressed; only the chosen hour and minute are pressed now, and nothing is pressed before a value exists. - ColorPicker hex readout now follows the picked colour. - Disabled FileInput no longer shows the native file-input text. - Date and time panels float instead of pushing content. - ContextMenu opened at the pointer closes on scroll. - Drawer left/top/bottom placements slide from their own edge again. - Image-only Card no longer renders an empty body strip. - Timeline supports item.time, current/upcoming states, sizes and compact/alternate variants; showcase demos use distinct variants. - ChatBubble: delivery receipts (sending/sent/delivered/read/failed/error) and meta aligned to its bubble. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed
1 parent
5eae6f3b3c
commit
1bed8e4b74
93 files changed
+4439
-1915
No files matched your search
@@ -116,7 +116,7 @@ page BaseShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
<div class="catalog-card-stage"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
|
||||
|
||||
@@ -5,7 +5,7 @@ page ChatBubbleDetail {
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"status\":\"Delivered\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"}]")
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"receipt\":\"read\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"},{\"text\":\"Great. The release notes are attached too.\",\"direction\":\"outgoing\",\"timestamp\":\"10:27\",\"receipt\":\"delivered\"},{\"text\":\"One more screenshot coming up.\",\"direction\":\"outgoing\",\"timestamp\":\"10:28\",\"receipt\":\"sent\"},{\"text\":\"Uploading the final export now.\",\"direction\":\"outgoing\",\"timestamp\":\"10:29\",\"receipt\":\"sending\"},{\"text\":\"Here is the invoice PDF.\",\"direction\":\"outgoing\",\"timestamp\":\"10:30\",\"receipt\":\"failed\",\"status\":\"Not delivered\",\"actionLabel\":\"Retry\"}]")
|
||||
state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
|
||||
state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "false") === "true"
|
||||
state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
|
||||
@@ -48,12 +48,38 @@ page ChatBubbleDetail {
|
||||
"text": "Yes! I have shared the latest version with you.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:25",
|
||||
"status": "Delivered"
|
||||
"receipt": "read"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Thanks, I will take a look this afternoon.",
|
||||
"direction": "incoming",
|
||||
"timestamp": "10:26"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Great. The release notes are attached too.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:27",
|
||||
"receipt": "delivered"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "One more screenshot coming up.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:28",
|
||||
"receipt": "sent"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Uploading the final export now.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:29",
|
||||
"receipt": "sending"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Here is the invoice PDF.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:30",
|
||||
"receipt": "failed",
|
||||
"status": "Not delivered",
|
||||
"actionLabel": "Retry"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
@@ -79,12 +105,38 @@ page ChatBubbleDetail {
|
||||
"text": "Yes! I have shared the latest version with you.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:25",
|
||||
"status": "Delivered"
|
||||
"receipt": "read"
|
||||
},
|
||||
{
|
||||
"text": "Thanks, I will take a look this afternoon.",
|
||||
"direction": "incoming",
|
||||
"timestamp": "10:26"
|
||||
},
|
||||
{
|
||||
"text": "Great. The release notes are attached too.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:27",
|
||||
"receipt": "delivered"
|
||||
},
|
||||
{
|
||||
"text": "One more screenshot coming up.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:28",
|
||||
"receipt": "sent"
|
||||
},
|
||||
{
|
||||
"text": "Uploading the final export now.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:29",
|
||||
"receipt": "sending"
|
||||
},
|
||||
{
|
||||
"text": "Here is the invoice PDF.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:30",
|
||||
"receipt": "failed",
|
||||
"status": "Not delivered",
|
||||
"actionLabel": "Retry"
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
|
||||
</form>
|
||||
@@ -102,7 +154,7 @@ page ChatBubbleDetail {
|
||||
<div id="chat-bubble-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"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" 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>
|
||||
@@ -117,12 +169,38 @@ page ChatBubbleDetail {
|
||||
"text": "Yes! I have shared the latest version with you.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:25",
|
||||
"status": "Delivered"
|
||||
"receipt": "read"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Thanks, I will take a look this afternoon.",
|
||||
"direction": "incoming",
|
||||
"timestamp": "10:26"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Great. The release notes are attached too.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:27",
|
||||
"receipt": "delivered"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "One more screenshot coming up.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:28",
|
||||
"receipt": "sent"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Uploading the final export now.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:29",
|
||||
"receipt": "sending"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Here is the invoice PDF.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:30",
|
||||
"receipt": "failed",
|
||||
"status": "Not delivered",
|
||||
"actionLabel": "Retry"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
@@ -144,7 +222,7 @@ page ChatBubbleDetail {
|
||||
<div id="chat-bubble-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"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" 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>
|
||||
@@ -159,12 +237,38 @@ page ChatBubbleDetail {
|
||||
"text": "Yes! I have shared the latest version with you.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:25",
|
||||
"status": "Delivered"
|
||||
"receipt": "read"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Thanks, I will take a look this afternoon.",
|
||||
"direction": "incoming",
|
||||
"timestamp": "10:26"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Great. The release notes are attached too.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:27",
|
||||
"receipt": "delivered"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "One more screenshot coming up.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:28",
|
||||
"receipt": "sent"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Uploading the final export now.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:29",
|
||||
"receipt": "sending"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Here is the invoice PDF.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:30",
|
||||
"receipt": "failed",
|
||||
"status": "Not delivered",
|
||||
"actionLabel": "Retry"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
@@ -186,7 +290,7 @@ page ChatBubbleDetail {
|
||||
<div id="chat-bubble-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"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" 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>
|
||||
@@ -201,12 +305,38 @@ page ChatBubbleDetail {
|
||||
"text": "Yes! I have shared the latest version with you.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:25",
|
||||
"status": "Delivered"
|
||||
"receipt": "read"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Thanks, I will take a look this afternoon.",
|
||||
"direction": "incoming",
|
||||
"timestamp": "10:26"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Great. The release notes are attached too.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:27",
|
||||
"receipt": "delivered"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "One more screenshot coming up.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:28",
|
||||
"receipt": "sent"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Uploading the final export now.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:29",
|
||||
"receipt": "sending"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"text": "Here is the invoice PDF.",
|
||||
"direction": "outgoing",
|
||||
"timestamp": "10:30",
|
||||
"receipt": "failed",
|
||||
"status": "Not delivered",
|
||||
"actionLabel": "Retry"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
|
||||
@@ -179,6 +179,44 @@ page DrawerDetail {
|
||||
<div data-slot="footer">
|
||||
<div class="showcase-slot">footer slot</div>
|
||||
</div>
|
||||
</Drawer></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>Top notice drawer</h2><p>Slide a panel down from the top edge for announcements, search, or quick settings.</p></div>
|
||||
<span class="demo-case-number">04</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawer-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p>
|
||||
<div class="demo-render"><Drawer open="false" defaultOpen="false" placement="top" size="sm" variant="success" title="Scheduled maintenance" description="The workspace will be read-only on Sunday from 02:00 to 03:00 UTC." icon="icon-[lucide--trash-2]" label="Advanced example" closeLabel="Advanced example" showClose="true" closeOnBackdrop="true" closeOnEscape="true" duration="260" overlay="true" scrollable="true" triggerLabel="Open top drawer" triggerIcon="icon-[lucide--panel-top-open]" class="showcase-instance showcase-instance--4"><div class="showcase-overlay-content"><p>Save your work before the window starts.</p></div></Drawer></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Top notice drawer usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Drawer
|
||||
placement="top"
|
||||
size="sm"
|
||||
variant="success"
|
||||
title="Scheduled maintenance"
|
||||
description="The workspace will be read-only on Sunday from 02:00 to 03:00 UTC."
|
||||
icon="icon-[lucide--trash-2]"
|
||||
label="Advanced example"
|
||||
closeLabel="Advanced example"
|
||||
triggerLabel="Open top drawer"
|
||||
triggerIcon="icon-[lucide--panel-top-open]">
|
||||
<div data-slot="trigger">
|
||||
<div class="showcase-slot">trigger slot</div>
|
||||
</div>
|
||||
<div data-slot="header">
|
||||
<div class="showcase-slot">header slot</div>
|
||||
</div>
|
||||
<div class="showcase-overlay-content"><p>Save your work before the window starts.</p></div>
|
||||
<div data-slot="footer">
|
||||
<div class="showcase-slot">footer slot</div>
|
||||
</div>
|
||||
</Drawer></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -205,7 +243,7 @@ if (component) registerOutputHandler(component, "cancel", (payload) => <span>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close drawer"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>260</code></td><td>No</td></tr><tr><td><code>overlay</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</a><a href="#drawer-demo-4">Top notice drawer</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -45,7 +45,7 @@ page SectionDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>10 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-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-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-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-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-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="transparent">transparent</option></select></label><label class="playground-field" for="playground-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="none">none</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-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-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-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-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option><option value="panel">panel</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="none">none</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -61,12 +61,13 @@ page SectionDetail {
|
||||
<div id="section-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"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
<div class="demo-render"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content section usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Section
|
||||
id="standard-section">
|
||||
id="standard-section"
|
||||
variant="grid">
|
||||
<div class="showcase-content-block">Standard section content</div>
|
||||
</Section></code></pre>
|
||||
</section>
|
||||
@@ -105,14 +106,14 @@ page SectionDetail {
|
||||
<div id="section-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"><Section id="full-section" size="lg" variant="raised" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
|
||||
<div class="demo-render"><Section id="full-section" size="lg" variant="solid" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width surface section usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Section
|
||||
id="full-section"
|
||||
size="lg"
|
||||
variant="raised"
|
||||
variant="solid"
|
||||
maxWidth="full"
|
||||
fullWidth="true"
|
||||
borderTop="true"
|
||||
|
||||
@@ -264,7 +264,7 @@ page TimelineDetail {
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-timeline-numbered"><span><strong>numbered</strong><small>boolean</small></span><input id="playground-timeline-numbered" name="pg_numbered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option><option value="compact">compact</option><option value="alternate">alternate</option></select></label><label class="playground-toggle" for="playground-timeline-numbered"><span><strong>numbered</strong><small>boolean</small></span><input id="playground-timeline-numbered" name="pg_numbered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -324,7 +324,7 @@ page TimelineDetail {
|
||||
<div id="timeline-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"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="soft" numbered="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="compact" numbered="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact activity history usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -349,7 +349,7 @@ page TimelineDetail {
|
||||
title="Recent activity"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
variant="soft"
|
||||
variant="compact"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -365,7 +365,7 @@ page TimelineDetail {
|
||||
<div id="timeline-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"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="raised" numbered="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="alternate" numbered="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich milestone timeline usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -395,7 +395,7 @@ page TimelineDetail {
|
||||
title="Implementation milestones"
|
||||
description="Planned delivery sequence."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
variant="raised"
|
||||
variant="alternate"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
|
||||
@@ -17,11 +17,11 @@ page ComponentShowcase {
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>84 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/block-library">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||
<section class="showcase-stats">
|
||||
<div class="showcase-stat"><strong>84</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>345</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>346</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||
<div class="showcase-stat"><strong>11</strong><span>Focused categories</span></div>
|
||||
</section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>2 components · 4 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 32 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>7 components · 19 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>11 components · 31 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 20 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>2 components · 4 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 32 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>7 components · 19 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>11 components · 31 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 21 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -106,7 +106,7 @@ page LayoutShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
<div class="catalog-card-stage"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.</p></div>
|
||||
|
||||
@@ -10,7 +10,7 @@ page OverlaysShowcase {
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Overlays</h1>
|
||||
<p class="showcase-description">6 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>6 components</span><span>Multiple use cases</span><span>20 live configurations</span></div>
|
||||
<div class="category-meta"><span>6 components</span><span>Multiple use cases</span><span>21 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="true">
|
||||
|
||||
@@ -283,7 +283,7 @@ function defaultValue(prop) {
|
||||
function sampleValue(prop, component, variation) {
|
||||
const name = prop.name.toLowerCase();
|
||||
const curated = {
|
||||
ChatBubble: { title:"", description:"", showMetadata:true, showAvatars:false, items:[{text:"Hi Maya, is the new dashboard ready to review?",direction:"incoming",timestamp:"10:24"},{text:"Yes! I have shared the latest version with you.",direction:"outgoing",timestamp:"10:25",status:"Delivered"},{text:"Thanks, I will take a look this afternoon.",direction:"incoming",timestamp:"10:26"}] },
|
||||
ChatBubble: { title:"", description:"", showMetadata:true, showAvatars:false, items:[{text:"Hi Maya, is the new dashboard ready to review?",direction:"incoming",timestamp:"10:24"},{text:"Yes! I have shared the latest version with you.",direction:"outgoing",timestamp:"10:25",receipt:"read"},{text:"Thanks, I will take a look this afternoon.",direction:"incoming",timestamp:"10:26"},{text:"Great. The release notes are attached too.",direction:"outgoing",timestamp:"10:27",receipt:"delivered"},{text:"One more screenshot coming up.",direction:"outgoing",timestamp:"10:28",receipt:"sent"},{text:"Uploading the final export now.",direction:"outgoing",timestamp:"10:29",receipt:"sending"},{text:"Here is the invoice PDF.",direction:"outgoing",timestamp:"10:30",receipt:"failed",status:"Not delivered",actionLabel:"Retry"}] },
|
||||
FileUploadProgress: { label:"Upload progress",fileName:"brand-guidelines.pdf",fileSize:"4.8 MB",uploadedSize:variation === 0 ? "2.4 MB" : "",value:variation === 2 ? 100 : 50,status:["uploading","error","complete"][variation % 3] },
|
||||
ListGroup: {title:"Workspace",value:"inbox",items:[{value:"inbox",label:"Inbox",description:"Messages that need your attention",icon:"icon-[lucide--inbox]",badge:"8"},{value:"projects",label:"Projects",description:"Your team's active work",icon:"icon-[lucide--folder]"},{value:"archive",label:"Archive",description:"Completed conversations",icon:"icon-[lucide--archive]"}]},
|
||||
Rating: {title:"How was your experience?",value:variation === 1 ? 3 : 4,readonly:variation === 2},
|
||||
|
||||
@@ -1272,7 +1272,7 @@ export const componentProfiles = {
|
||||
standard(
|
||||
"Standard content section",
|
||||
"Create predictable vertical rhythm around a page section.",
|
||||
{ id: "standard-section", spacing: "lg", maxWidth: "xl" },
|
||||
{ id: "standard-section", spacing: "lg", maxWidth: "xl", variant: "grid" },
|
||||
{ default: '<div class="showcase-content-block">Standard section content</div>' },
|
||||
),
|
||||
compact(
|
||||
@@ -1290,7 +1290,7 @@ export const componentProfiles = {
|
||||
maxWidth: "full",
|
||||
borderTop: true,
|
||||
borderBottom: true,
|
||||
variant: "raised",
|
||||
variant: "solid",
|
||||
},
|
||||
{ default: '<div class="showcase-content-block">Full-width public page section</div>' },
|
||||
),
|
||||
@@ -1298,7 +1298,7 @@ export const componentProfiles = {
|
||||
options: {
|
||||
spacing: ["none", "sm", "md", "lg", "xl"],
|
||||
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
||||
variant: ["default", "soft", "raised", "transparent"],
|
||||
variant: ["default", "soft", "raised", "tinted", "solid", "panel", "grid"],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -2093,6 +2093,24 @@ export const componentProfiles = {
|
||||
'<div class="showcase-overlay-content showcase-overlay-content--tall"><p>Long scrollable content</p><p>Filters, navigation, details, and forms can be composed here.</p></div>',
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Top notice drawer",
|
||||
"Slide a panel down from the top edge for announcements, search, or quick settings.",
|
||||
{
|
||||
open: false,
|
||||
defaultOpen: false,
|
||||
triggerLabel: "Open top drawer",
|
||||
triggerIcon: "icon-[lucide--panel-top-open]",
|
||||
title: "Scheduled maintenance",
|
||||
description: "The workspace will be read-only on Sunday from 02:00 to 03:00 UTC.",
|
||||
placement: "top",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
default:
|
||||
'<div class="showcase-overlay-content"><p>Save your work before the window starts.</p></div>',
|
||||
},
|
||||
),
|
||||
],
|
||||
playground: {
|
||||
open: false,
|
||||
@@ -2822,7 +2840,7 @@ export const componentProfiles = {
|
||||
{ title: "Document uploaded", time: "3 days ago" },
|
||||
],
|
||||
size: "sm",
|
||||
variant: "soft",
|
||||
variant: "compact",
|
||||
},
|
||||
),
|
||||
advanced(
|
||||
@@ -2851,11 +2869,11 @@ export const componentProfiles = {
|
||||
},
|
||||
],
|
||||
size: "lg",
|
||||
variant: "raised",
|
||||
variant: "alternate",
|
||||
},
|
||||
),
|
||||
],
|
||||
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
|
||||
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline", "minimal", "compact", "alternate"] },
|
||||
},
|
||||
|
||||
Typography: {
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
],
|
||||
"componentCount": 84,
|
||||
"categoryCount": 11,
|
||||
"totalDemoCount": 345,
|
||||
"totalDemoCount": 346,
|
||||
"components": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
@@ -475,7 +475,7 @@
|
||||
"slug": "drawer",
|
||||
"category": "overlays",
|
||||
"purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
|
||||
"demoCount": 3,
|
||||
"demoCount": 4,
|
||||
"propCount": 20,
|
||||
"slots": ["trigger", "header", "default", "footer"],
|
||||
"events": ["open", "close", "cancel"],
|
||||
|
||||
Reference in new issue
Block a user