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

view HeadingDemo() =    <div.demo-stack>        <Heading level={1} id="heading-demo-h1">Settings</Heading>        <Heading level={2} id="heading-demo-billing" anchor={true} subtitle="Cards, invoices and the plan you are on.">Billing</Heading>        <Heading level={3}>Payment methods</Heading>        <Heading level={4}>Cards on file</Heading>        <Heading level={5}>Expiring soon</Heading>        <Heading level={6}>Archived</Heading>        <Heading level={3} size={5} id="heading-demo-small">A level-3 heading that looks like a level 5</Heading>        <Heading level={2} align="center" tone="muted" id="heading-demo-center">Centred and muted</Heading>    </div>

// Heading: a page or section title, <h1> to <h6>, in the kit's sizes, with an// optional subtitle under it and a link to itself that shows when it is hovered.////   <Heading level={1}>Settings</Heading>//   <Heading level={2} id="billing" anchor={true} subtitle="Cards, invoices and the plan.">Billing</Heading>//   <Heading level={3} size={5}>A level-3 heading that looks like a level 5</Heading>//// level: 1 to 6, the element written (<h2> by default). size: 1 to 6, the look of// another level, when the outline and the size should differ; the level's own by// default. subtitle: a muted line under the heading; the two go in an <hgroup>.// id: the heading's id, for links to it (a TableOfContents, the anchor).// anchor: a "#" link to the id, shown while the heading is hovered or the link is// focused (it needs id). align: "start" (default), "center" or "end".// tone: "default" or "muted". class: added to the heading (to the hgroup with a subtitle).import ui/theme.qwe use ui_clslet heading_css = css`.ui-heading { margin: 0; font-family: var(--ui-font); font-weight: 650; line-height: 1.2; letter-spacing: -.015em;  color: var(--ui-fg); overflow-wrap: anywhere; }.ui-heading.ui-heading-1 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }.ui-heading.ui-heading-2 { font-size: 26px; }.ui-heading.ui-heading-3 { font-size: 21px; }.ui-heading.ui-heading-4 { font-size: 17px; }.ui-heading.ui-heading-5 { font-size: 15px; }.ui-heading.ui-heading-6 { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }.ui-heading-muted { color: var(--ui-muted); }.ui-heading-center { text-align: center; }.ui-heading-end { text-align: end; }.ui-heading-group { margin: 0; }.ui-heading-sub { margin: 4px 0 0; font: 15px/1.5 var(--ui-font); color: var(--ui-muted); overflow-wrap: anywhere; }.ui-heading.ui-heading-1 + .ui-heading-sub { font-size: 17px; }.ui-heading-anchor { margin-left: .4em; border-radius: 4px; color: var(--ui-muted); font-weight: 400; text-decoration: none;  opacity: 0; transition: opacity .15s, color .15s; }.ui-heading:hover .ui-heading-anchor, .ui-heading-anchor:focus { opacity: 1; }.ui-heading-anchor:hover { color: var(--ui-accent); }.ui-heading-anchor:focus-visible { outline: none; box-shadow: var(--ui-focus); }@media (prefers-reduced-motion: reduce) { .ui-heading-anchor { transition: none; } }`view Heading(level: int = 2, size: int? = null, subtitle: str? = null, id: str? = null, anchor: bool = false,             align: str = "start", tone: str = "default", class: str? = null, children) {    style global heading_css    let look = size ?? level    let cls = ui_cls(["ui-heading", `ui-heading-${look}`, tone == "muted" && "ui-heading-muted",                      align != "start" && `ui-heading-${align}`, subtitle == null && class])    let body = [children, anchor && id != null && <a.ui-heading-anchor href={`#${id}`} aria-label="Link to this section">#</a>]    let h = match level {        1 => <h1 class={cls} id={id}>{body}</h1>        3 => <h3 class={cls} id={id}>{body}</h3>        4 => <h4 class={cls} id={id}>{body}</h4>        5 => <h5 class={cls} id={id}>{body}</h5>        6 => <h6 class={cls} id={id}>{body}</h6>        _ => <h2 class={cls} id={id}>{body}</h2>    }    subtitle != null        ? <hgroup class={ui_cls(["ui-heading-group", class])}>{h}<p.ui-heading-sub>{subtitle}</p></hgroup>        : h}