StockStatus

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

view StockStatusDemo() =    <div.demo-stack>        <div.demo-row style="gap: 24px">            <StockStatus count={24}/>            <StockStatus count={3}/>            <StockStatus count={0}/>            <StockStatus status="preorder" ships="2026-12-01"/>            <StockStatus status="backorder" ships="2026-11-15" locale="en-GB"/>        </div>        <div.demo-row style="gap: 24px">            <StockStatus count={120} show_count={true}/>            <StockStatus count={8} low_at={10} size="sm"/>            <StockStatus status="in" text="Ships today" size="sm"/>        </div>    </div>

// StockStatus: whether something can be bought now: in stock, only a few left,// out of stock, on pre-order or back-order, with a coloured dot and the count.////   <StockStatus count={24}/>                           In stock//   <StockStatus count={3}/>                            Only 3 left//   <StockStatus count={0}/>                            Out of stock//   <StockStatus status="preorder" ships="2026-12-01"/> Pre-order · ships 1 Dec 2026//// count: how many are left; 0 is out of stock, up to low_at (5) is low, more is// in stock. status: says it outright instead: "in", "low", "out", "preorder" or// "backorder". show_count: the number in the text ("12 in stock") when it is in// stock (false; a low count always shows). date: when a pre-order or back-order// ships (an ISO date, written for locale). text: your own words instead.// size: "sm" or "md" (default). It is a status region, so screen readers hear// it change.import ui/theme.qwe use ui_clslet stock_status_css = css`.ui-stock { display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.3 var(--ui-font); color: var(--ui-fg); --t: var(--ui-success); }.ui-stock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 20%, transparent); }.ui-stock-in { --t: var(--ui-success); }.ui-stock-low { --t: var(--ui-warning); }.ui-stock-out { --t: var(--ui-danger); }.ui-stock-preorder, .ui-stock-backorder { --t: var(--ui-info); }.ui-stock-low .ui-stock-text, .ui-stock-out .ui-stock-text { color: var(--t); }.ui-stock-hint { font-weight: 400; color: var(--ui-muted); }.ui-stock-sm { font-size: 13px; gap: 6px; }.ui-stock-sm .ui-stock-dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--t) 20%, transparent); }`view StockStatus(count: int? = null, status: str? = null, low_at: int = 5, show_count: bool = false,                 ships: str? = null, locale: str? = null, text: str? = null, size: str = "md", class: str? = null) {    style global stock_status_css    let kind = status ?? (count == null ? "in" : count <= 0 ? "out" : count <= low_at ? "low" : "in")    let words = text ?? match kind {        "out" => "Out of stock"        "low" => count != null ? `Only ${count} left` : "Low stock"        "preorder" => "Pre-order"        "backorder" => "Back-order"        _ => show_count && count != null ? `${count} in stock` : "In stock"    }    let when = ships != null ? date.format(ships, { locale: locale ?? "en-US", style: "medium" }) : null    <span class={ui_cls(["ui-stock", `ui-stock-${kind}`, size == "sm" && "ui-stock-sm", class])} role="status">        <span.ui-stock-dot aria-hidden="true"></span>        <span.ui-stock-text>{words}</span>        {when != null && <span.ui-stock-hint>· ships {when}</span>}    </span>}