CorrectionNotice

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

view CorrectionNoticeDemo() =    <div.demo-stack style="gap: 18px">        <CorrectionNotice id="correction-notice-demo-fix" date="2026-10-29" href="#corrections">            An earlier version of this article misstated the year the Tagus bridge opened. It was 1966, not 1962.        </CorrectionNotice>        <CorrectionNotice id="correction-notice-demo-note" kind="editors_note" date="2026-10-30T09:15:00Z">            This article has been updated to include a response from the Ministry of Health, received after publication.        </CorrectionNotice>        <CorrectionNotice id="correction-notice-demo-retract" kind="retraction" date_text="Oct. 28">            The Ledger has retracted this article. Its central claim, that the contract was awarded without a tender, was not true.        </CorrectionNotice>        <CorrectionNotice id="correction-notice-demo-end" kind="clarification" placement="end" date="2026-10-27" href="#standards" link="How we correct our journalism">            This article has been amended to make clear that the figures are the council's estimates, not its final accounts.        </CorrectionNotice>    </div>

// CorrectionNotice: the note a newsroom adds to a story when it fixes it: a// correction, a clarification, an update, an editor's note or a retraction, with// the date it was added and a link to the corrections policy. Its kind sets its// title, mark and colour, and screen readers hear it as a note with that name.////   <CorrectionNotice date="2026-10-29">An earlier version of this article misstated the//       year the bridge opened. It was 1966, not 1962.</CorrectionNotice>//   <CorrectionNotice kind="editors_note" date="2026-10-30" href="/standards">This article//       has been updated to include a response from the ministry.</CorrectionNotice>//// The note is its children. kind: "correction" (default), "clarification", "update",// "editors_note" or "retraction". title: what it is called, instead of the kind's// own ("Correction", "Clarification", "Update", "Editor's note", "Retraction").// date: an ISO date (or date-time), shown as "Oct 29, 2026" in a <time>; date_text// says it another way ("Oct. 29"). href: the policy's page, a link after the note;// link: its text ("Read our corrections policy"). placement: "top" (default, a// boxed note above the story) or "end" (a quieter line under it, as most papers run// corrections). locale: the month names' language. id: the note's id.import ui/theme.qwe use ui_clslet correction_notice_css = css`.ui-corr { --t: var(--ui-warning); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; max-width: 720px; margin: 0; padding: 14px 16px;  border: 1px solid color-mix(in srgb, var(--t) 40%, var(--ui-border)); border-left: 4px solid var(--t); border-radius: var(--ui-radius-sm);  background: color-mix(in srgb, var(--t) 7%, var(--ui-surface)); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }.ui-corr-clarification, .ui-corr-update { --t: var(--ui-info); }.ui-corr-editors_note { --t: var(--ui-accent); }.ui-corr-retraction { --t: var(--ui-danger); }.ui-corr-icon { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;  background: var(--t); color: var(--ui-bg); }.ui-corr-icon svg { width: 14px; height: 14px; }.ui-corr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }.ui-corr-title { color: var(--t); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.ui-corr-head time { color: var(--ui-muted); font-size: 13px; }.ui-corr-body { margin: 0; }.ui-corr-retraction .ui-corr-body { font-weight: 550; }.ui-corr-link { grid-column: 2; justify-self: start; color: var(--ui-accent); font-size: 13px; font-weight: 600; text-decoration: none; }.ui-corr-link:hover { text-decoration: underline; }.ui-corr-link:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }.ui-corr-end { padding: 12px 0 0; border: 0; border-top: 1px solid var(--ui-border); border-radius: 0; background: none; font-size: 14px; font-style: italic; }.ui-corr-end .ui-corr-icon { display: none; }.ui-corr-end .ui-corr-link { grid-column: 1 / -1; font-style: normal; }.ui-corr-end .ui-corr-head, .ui-corr-end .ui-corr-body { grid-column: 1 / -1; }.ui-corr-end .ui-corr-title { font-style: normal; }`// The kind's own name.fn correction_notice_title(kind: str) -> str = match kind {    "clarification" => "Clarification"    "update" => "Update"    "editors_note" => "Editor's note"    "retraction" => "Retraction"    _ => "Correction"}// The kind's mark, in a 16 by 16 box.fn correction_notice_path(kind: str) -> str = match kind {    "clarification" => "M8 7v5M8 4.5v.1"    "update" => "M3 8a5 5 0 0 1 8.5-3.5L13 6M13 3v3h-3M13 8a5 5 0 0 1-8.5 3.5L3 10M3 13v-3h3"    "editors_note" => "M3 13l.7-3L10.5 3.2l2.3 2.3L6 12.3zM9 4.7l2.3 2.3"    "retraction" => "M4.5 4.5l7 7M11.5 4.5l-7 7"    _ => "M3.5 8.5l3 3 6-7"}// An ISO date (or date-time) as "Oct 29, 2026". (Outside the view, whose `date` prop hides the module.)fn correction_notice_when(d: str, locale: str) -> str = date.format(slice(d, 0, 10), { locale, pattern: "MMM D, YYYY" })view CorrectionNotice(kind: str = "correction", title: str? = null, date: str? = null, date_text: str? = null, href: str? = null,                      link: str = "Read our corrections policy", placement: str = "top", locale: str = "en-US",                      id: str? = null, class: str? = null, children) {    style global correction_notice_css    let name = title ?? correction_notice_title(kind)    let when = date_text ?? (date != null ? correction_notice_when(date, locale) : null)    <aside class={ui_cls(["ui-corr", `ui-corr-${kind}`, placement == "end" && "ui-corr-end", class])} id={id} role="note" aria-label={name}>        <span.ui-corr-icon aria-hidden="true">            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">                <path d={correction_notice_path(kind)}/>            </svg>        </span>        <p.ui-corr-head>            <span.ui-corr-title>{name}</span>            {when != null && <time datetime={date}>{when}</time>}        </p>        <p.ui-corr-body>{children}</p>        {href != null && <a.ui-corr-link href={href}>{link} →</a>}    </aside>}