Callout

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

view CalloutDemo() =    <div.demo-stack>        <Callout id="callout-demo-note">Views are plain functions: they add nothing to the browser bundle unless a component uses them.</Callout>        <Callout kind="tip" id="callout-demo-tip">Press <Kbd keys="Cmd+K"/> to open the command palette from anywhere.</Callout>        <Callout kind="warning" title="Breaking change in 0.9" id="callout-demo-warning">            <p>The old <code>on_select</code> callback is gone; use <code>on_change</code>, which is given the value.</p>            <p>Programs that used it fail to load, naming the line.</p>        </Callout>        <Callout kind="important">A component placed straight in a page gets its props from the server, as data: no functions.</Callout>        <Callout kind="caution" icon={false} id="callout-demo-noicon">Dropping a table cannot be undone, in a migration or anywhere else.</Callout>    </div>

// Callout: an aside that stands out from the text around it, with an icon and a// title for its kind: a note, a tip, a warning, something important, a caution.// The docs kind of box (for a message about an action, use Alert).////   <Callout kind="tip">Press <Kbd keys="Cmd+K"/> to jump anywhere.</Callout>//   <Callout kind="warning" title="Breaking change in 0.9">The old `on_select` is gone.</Callout>//// kind: "note" (default), "tip", "warning", "important" or "caution".// title: the first line, in bold; the kind's name when not given ("Note").// icon: false leaves the icon out. id: the element's id. It is an <aside role="note">.import ui/theme.qwe use ui_clslet callout_css = css`.ui-callout { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px 12px 12px;  border: 1px solid color-mix(in srgb, var(--c) 25%, var(--ui-border)); border-left: 4px solid var(--c);  border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--c) 6%, var(--ui-surface));  font: 14px/1.55 var(--ui-font); color: var(--ui-fg); --c: var(--ui-info); }.ui-callout-tip { --c: var(--ui-success); }.ui-callout-warning { --c: var(--ui-warning); }.ui-callout-important { --c: var(--ui-accent); }.ui-callout-caution { --c: var(--ui-danger); }.ui-callout-icon { grid-column: 1; width: 18px; height: 18px; margin-top: 1px; color: var(--c); }.ui-callout-title { grid-column: 2; margin: 0; font-weight: 600; color: var(--c); }.ui-callout-body { grid-column: 2; min-width: 0; }.ui-callout-noicon .ui-callout-title, .ui-callout-noicon .ui-callout-body { grid-column: 1 / -1; }.ui-callout-body > :first-child { margin-top: 0; }.ui-callout-body > :last-child { margin-bottom: 0; }.ui-callout-body a { color: var(--ui-accent); }.ui-callout-body code { padding: .1em .35em; border-radius: 4px; background: color-mix(in srgb, var(--c) 12%, var(--ui-subtle)); font: .9em var(--ui-mono); }`// The icon of each kind, drawn in currentColor.fn callout_icon(kind: str) {    let inner = match kind {        "tip" => <path d="M10 2.5a5 5 0 0 1 3 9c-.6.5-1 1.2-1 2v.5H8V13.5c0-.8-.4-1.5-1-2a5 5 0 0 1 3-9zM8 17h4"/>        "warning" => [<path d="M8.6 3.2 2.3 14.5a1.6 1.6 0 0 0 1.4 2.4h12.6a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0z"/>, <path d="M10 7.5v4M10 14.2h.01"/>]        "important" => [<circle cx="10" cy="10" r="7.5"/>, <path d="M10 6v5M10 14h.01"/>]        "caution" => [<path d="M7.2 2.5h5.6l4.7 4.7v5.6l-4.7 4.7H7.2l-4.7-4.7V7.2z"/>, <path d="M10 6.5v4M10 13.7h.01"/>]        _ => [<circle cx="10" cy="10" r="7.5"/>, <path d="M10 9v5M10 6.2h.01"/>]    }    <svg class="ui-callout-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"         stroke-linejoin="round" aria-hidden="true">{inner}</svg>}view Callout(kind: str = "note", title: str? = null, icon: bool = true, id: str? = null, class: str? = null, children) {    style global callout_css    let heading = title ?? (upper(slice(kind, 0, 1)) + slice(kind, 1, len(kind)))    <aside class={ui_cls(["ui-callout", kind != "note" && `ui-callout-${kind}`, !icon && "ui-callout-noicon", class])} id={id}           role="note" aria-label={heading}>        {icon && callout_icon(kind)}        <p.ui-callout-title>{heading}</p>        <div.ui-callout-body>{children}</div>    </aside>}