Showcase / host composition

Code block.

file chrome, language label, Copy, and escaped pre/code. First-class code-block component. Highlighting deferred.

host chromehost-chromecompose

streaming shellcopy

schedule.ts TypeScript

export function buildSchedule(skus: string[]) {
  return skus.map((sku, index) => ({
    sku,
    day: index % 7,
    priority: sku.includes("priority") ? "high" : "normal",
  }));
}

Escape model output. Shiki/highlighting stays a host adapter.

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-extracts.css">