Caption

import ui/theme.qwe use theme_cssuse ui/caption.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view CaptionDemo() =    <div.demo-stack>        <figure style="margin: 0; max-width: 360px">            <div style="height: 120px; border-radius: var(--ui-radius-sm); background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-accent))"></div>            <Caption id="caption-demo-figure" align="center">Figure 1. Sales by month, January to June. <a href="#caption">Source</a>.</Caption>        </figure>        <table id="caption-demo-table" style="border-collapse: collapse; font: 14px/1.4 var(--ui-font)">            <Caption tag="caption">Orders this week, by day.</Caption>            <thead><tr><th style="text-align: left; padding: 4px 12px 4px 0">Day</th><th style="text-align: right; padding: 4px 0">Orders</th></tr></thead>            <tbody>                <tr><td style="padding: 4px 12px 4px 0">Monday</td><td style="text-align: right">42</td></tr>                <tr><td style="padding: 4px 12px 4px 0">Tuesday</td><td style="text-align: right">38</td></tr>            </tbody>        </table>        <div.demo-narrow>            <label for="caption-demo-field" style="display: block; margin-bottom: 6px; font: 500 13px/1.4 var(--ui-font)">Display name</label>            <input id="caption-demo-field" name="caption-demo-field" type="text" aria-describedby="caption-demo-hint"                   style="width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font)"/>            <Caption tag="p" id="caption-demo-hint" size="xs">Shown on your public profile. Letters and spaces only.</Caption>        </div>    </div>

// Caption: small muted text under a figure, a table or a field: where a picture is// from, what a chart shows, a note under an input.////   <figure><img src="/chart.png" alt="Sales by month"/><Caption>Sales, January to June.</Caption></figure>//   <table><Caption tag="caption">Orders this week</Caption>...</table>//   <Caption tag="p" align="start">Shown to no one but you.</Caption>//// children: the text. tag: "figcaption" (default), "caption" (a table's, shown under// it), "p", "div" or "span". align: "start" (default), "center" or "end".// tone: "muted" (default) or "fg". size: "sm" (default, 13px) or "xs" (12px).// id: the element's id (an aria-describedby can point to it).import ui/theme.qwe use ui_clslet caption_css = css`.ui-caption { display: block; margin: 6px 0 0; font: 13px/1.5 var(--ui-font); color: var(--ui-muted); overflow-wrap: anywhere; }caption.ui-caption { display: table-caption; caption-side: bottom; padding: 6px 0 0; }span.ui-caption { display: inline; margin: 0; }.ui-caption-center { text-align: center; }.ui-caption-end { text-align: end; }.ui-caption-fg { color: var(--ui-fg); }.ui-caption-xs { font-size: 12px; }.ui-caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }`view Caption(tag: str = "figcaption", align: str = "start", tone: str = "muted", size: str = "sm", id: str? = null,             class: str? = null, children) {    style global caption_css    let cls = ui_cls(["ui-caption", align != "start" && `ui-caption-${align}`, tone != "muted" && `ui-caption-${tone}`,                      size != "sm" && `ui-caption-${size}`, class])    match tag {        "caption" => <caption class={cls} id={id}>{children}</caption>        "p" => <p class={cls} id={id}>{children}</p>        "div" => <div class={cls} id={id}>{children}</div>        "span" => <span class={cls} id={id}>{children}</span>        _ => <figcaption class={cls} id={id}>{children}</figcaption>    }}