BulletList

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

view BulletListDemo() =    <div.demo-stack>        <div.demo-row style="align-items: flex-start; gap: 40px">            <BulletList id="bullet-list-demo-dots" items={["Free returns within 30 days", "Two-year warranty", "Ships in one day"]}/>            <BulletList id="bullet-list-demo-checks" icon="check" tone="success" items={["Unlimited projects", "Priority support", "Single sign-on"]}/>            <BulletList id="bullet-list-demo-arrows" icon="arrow" tone="accent" spacing="tight" items={["Install", "Run", "Deploy"]}/>        </div>        <div.demo-row style="align-items: flex-start; gap: 40px">            <BulletList icon="star" tone="warning" size="sm" items={["Starred", "Also starred"]}/>            <BulletList icon="dash" items={["A dash", "Another"]}/>            <BulletList id="bullet-list-demo-glyph" glyph="🚀" spacing="loose" items={["Fast to start", "Faster to ship"]}/>            <BulletList id="bullet-list-demo-kids" icon="none">                <li>Written <b>by hand</b>, with no bullet</li>                <li>Nested:                    <BulletList items={["one", "two"]}/>                </li>            </BulletList>        </div>    </div>

// BulletList: an unordered list with a bullet of your choosing (a dot, a tick, an// arrow, a star, a dash, any glyph) in a tone, and tighter or looser spacing.////   <BulletList items={["Free returns", "Two-year warranty"]} icon="check" tone="success"/>//   <BulletList icon="arrow" spacing="loose"><li>Any <b>HTML</b> in a list item</li><li>Another</li></BulletList>//   <BulletList glyph="🚀" items={features}/>//// items: strings (or HTML) for the items; children: <li>s written by hand (both// may be given; items come first). icon: "dot" (default), "check", "arrow", "star",// "dash" or "none"; glyph: any character to use instead. tone: "muted" (default),// "accent", "success", "warning", "danger" or "fg" for the bullet's colour.// spacing: "tight", "normal" (default) or "loose". size: "sm", "md" (default) or "lg".// id: the list's id.import ui/theme.qwe use ui_clslet bullet_list_css = css`.ui-bullets { margin: 0; padding: 0; list-style: none; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); --ui-bullet: "•"; --ui-bullet-color: var(--ui-muted); }.ui-bullets li { position: relative; padding-left: 1.5em; margin: .35em 0; overflow-wrap: anywhere; }.ui-bullets li::before { content: var(--ui-bullet); position: absolute; left: .1em; top: 0; width: 1em; text-align: center;  color: var(--ui-bullet-color); font-weight: 600; }.ui-bullets-check { --ui-bullet: "✓"; }.ui-bullets-arrow { --ui-bullet: "→"; }.ui-bullets-star { --ui-bullet: "★"; }.ui-bullets-dash { --ui-bullet: "–"; }.ui-bullets-none { --ui-bullet: ""; }.ui-bullets-none li { padding-left: 0; }.ui-bullets-accent { --ui-bullet-color: var(--ui-accent); }.ui-bullets-success { --ui-bullet-color: var(--ui-success); }.ui-bullets-warning { --ui-bullet-color: var(--ui-warning); }.ui-bullets-danger { --ui-bullet-color: var(--ui-danger); }.ui-bullets-fg { --ui-bullet-color: var(--ui-fg); }.ui-bullets-tight li { margin: .1em 0; }.ui-bullets-loose li { margin: .75em 0; }.ui-bullets-sm { font-size: 13px; }.ui-bullets-lg { font-size: 17px; }.ui-bullets li > .ui-bullets { margin-top: .35em; }`view BulletList(items: list = [], icon: str = "dot", glyph: str? = null, tone: str = "muted", spacing: str = "normal",                size: str = "md", id: str? = null, class: str? = null, children) {    style global bullet_list_css    let safe = glyph != null ? replace(replace(glyph, "\\", ""), "\"", "") : null    <ul class={ui_cls(["ui-bullets", icon != "dot" && `ui-bullets-${icon}`, tone != "muted" && `ui-bullets-${tone}`,                       spacing != "normal" && `ui-bullets-${spacing}`, size != "md" && `ui-bullets-${size}`, class])}        id={id} style={safe != null ? `--ui-bullet: "${safe}"` : null}>        {for it in items => <li>{it}</li>}        {children}    </ul>}