@cloudgrid-io/ui 0.33.0 → 0.35.0

package/dist/claim-banner/index.js

@@ -0,0 +1,135 @@
+/**
+ * THE GUEST CLAIM BANNER, FRAMEWORK-FREE (ui#342, for cloudgrid#4872).
+ *
+ * The top bar on every unclaimed guest drop: "This site disappears in N days
+ * unless it's claimed." and a lime "Claim it" pill, with a close x that hides
+ * it for the visit. The platform's inspiration-server builds HTML strings, so
+ * this is the badge's shape: a builder that returns a string, and the
+ * stylesheet and the inline script as strings beside it. No React, no DOM.
+ *
+ * ```ts
+ * import { claimBanner } from "@cloudgrid-io/ui/claim-banner"
+ * const ctaMarkup = claimBanner({ claimUrl, expiresAt: entity.inspiration_block?.expires_at, nonce })
+ * ```
+ *
+ * What the consumer's constraints settle (cloudgrid#4872):
+ *
+ *   byte-identical  nothing here depends on the viewer or the clock. The day
+ *                   count is computed by the inline script, in the browser,
+ *                   from `data-expires-at`, so a cached render is right for
+ *                   every viewer on every day
+ *   no flash        the banner is `hidden` in the bytes; the script reveals it
+ *                   unless this visit dismissed it (`sessionStorage`)
+ *   nonce           with `nonce`, the `<style>` and `<script>` carry it, for
+ *                   the wrapper's `script-src 'nonce-...'`; without it they
+ *                   carry nothing, for the legacy inline path
+ *   escaping        every caller value is text; the URL is attribute-escaped
+ *                   and refused (`#`) unless it is http(s)
+ *   sentinel        nothing here says `data-cloudgrid-badge`, so the badge
+ *                   injector's idempotency check never trips on it
+ *   fonts           no `@font-face` and no `@import`; the UI stack falls back
+ *                   to the system faces under `font-src 'self' api.cloudgrid.io`
+ */
+import { esc, glyph, href, wordmark } from "../badge/html.js";
+import { X } from "../badge/marks.js";
+import { BADGE_FONT_FACES } from "../badge/palette.js";
+import { CLAIM_BANNER_CSS } from "./css.js";
+export { CLAIM_BANNER_CSS, CLAIM_BANNER_PHONE_MAX, CLAIM_BANNER_TOKEN_NAMES } from "./css.js";
+/** The banner element's id. The script finds the banner by it. */
+export const CLAIM_BANNER_ID = "cg-claim-banner";
+/**
+ * The `sessionStorage` key the close x sets to "1": hidden for this visit, back
+ * in a new tab. The platform's own banner's key (cloudgrid#4978), so a viewer
+ * who dismissed that one is not shown this one again in the same visit.
+ */
+export const CLAIM_BANNER_DISMISS_KEY = "cg_anon_cta_dismissed";
+/** The days shown when the drop carries no expiry, or one the browser cannot read. */
+export const CLAIM_BANNER_FALLBACK_DAYS = 7;
+/** The button's label. The arrow after it is decorative. */
+export const CLAIM_BANNER_LABEL = "Claim it";
+/** The close x's accessible name. */
+export const CLAIM_BANNER_CLOSE_LABEL = "Hide for this visit";
+/**
+ * The one face the banner sets type in: Manrope, the badge's file. The banner
+ * loads nothing itself. On the wrapper the badge already registers it; a page
+ * without the badge hosts this file (the package carries it at
+ * `@cloudgrid-io/ui/brand/badge/<file>`) and declares it. Without it the system
+ * stack renders.
+ */
+export const CLAIM_BANNER_FONT_FACES = BADGE_FONT_FACES.filter((f) => f.family === "Manrope Variable");
+/**
+ * The inline script. ES5, no globals left behind. It finds the banner, leaves
+ * it hidden if this visit dismissed it, writes the day count, reveals it, and
+ * wires the close x. Storage that throws (a sandbox, a privacy mode) counts as
+ * "not dismissed", and the x still hides the banner for the page.
+ *
+ * The count is in whole calendar days in the viewer's time zone, from today to
+ * the expiry's date: "in N days", "in 1 day", "today" on the last day. A past
+ * expiry reads "today", never a negative number (the platform's expired page
+ * normally answers first). No expiry, or one that does not parse, reads
+ * "in 7 days".
+ *
+ * With `placement: "fixed"` (`data-placement="fixed"` on the banner) the bar is
+ * fixed to the top of the viewport, and the script pads the body by the bar's
+ * height (rounded up, so a fractional bar never overlaps), on top of the body's
+ * own top padding, so it covers nothing. It keeps
+ * the padding in step on resize (the bar wraps on a narrow screen) and puts the
+ * body's own padding back on the x.
+ */
+export const CLAIM_BANNER_SCRIPT = "(function(){" +
+    `var b=document.getElementById(${JSON.stringify(CLAIM_BANNER_ID)});if(!b)return;` +
+    `var k=${JSON.stringify(CLAIM_BANNER_DISMISS_KEY)};` +
+    'try{if(window.sessionStorage.getItem(k)==="1")return}catch(e){}' +
+    `var d=${CLAIM_BANNER_FALLBACK_DAYS},a=b.getAttribute("data-expires-at");` +
+    "if(a){var t=new Date(a);if(!isNaN(t.getTime())){var n=new Date();" +
+    "d=Math.round((new Date(t.getFullYear(),t.getMonth(),t.getDate())-new Date(n.getFullYear(),n.getMonth(),n.getDate()))/864e5);" +
+    "if(!(d>0))d=0}}" +
+    'var w=b.querySelector("[data-claim-when]");' +
+    'if(w)w.textContent=d===0?"today":"in "+d+(d===1?" day":" days");' +
+    "b.hidden=false;" +
+    'var f=b.getAttribute("data-placement")==="fixed",y=document.body,s0="",p0=0;' +
+    'function pad(){if(!b.hidden)y.style.paddingTop=(p0+Math.ceil(b.getBoundingClientRect().height))+"px"}' +
+    'if(f&&y){s0=y.style.paddingTop;p0=parseFloat(window.getComputedStyle(y).paddingTop)||0;pad();window.addEventListener("resize",pad)}' +
+    'var x=b.querySelector("[data-claim-dismiss]");' +
+    'if(x)x.addEventListener("click",function(){b.hidden=true;if(f&&y)y.style.paddingTop=s0;try{window.sessionStorage.setItem(k,"1")}catch(e){}})' +
+    "})();";
+/**
+ * A caller value for an attribute: escaped, and the badge injector's sentinel
+ * broken with a character reference, so even a slug that spells it out cannot
+ * put `data-cloudgrid-badge` in the bytes. The browser reads the value unchanged.
+ */
+function safe(value) {
+    return value.replace(/data-cloudgrid-badge/gi, (m) => m.replace("-", "&#45;"));
+}
+function expiryAttr(expiresAt) {
+    if (expiresAt == null)
+        return "";
+    if (expiresAt instanceof Date) {
+        return Number.isNaN(expiresAt.getTime()) ? "" : ` data-expires-at="${safe(esc(expiresAt.toISOString()))}"`;
+    }
+    const value = String(expiresAt).trim();
+    return value ? ` data-expires-at="${safe(esc(value))}"` : "";
+}
+/**
+ * The banner's markup alone: the bar, hidden, with the fallback count in its
+ * bytes. Needs `CLAIM_BANNER_CSS` on the page and `CLAIM_BANNER_SCRIPT` after it.
+ */
+export function claimBannerMarkup({ claimUrl, expiresAt, placement = "flow" }) {
+    const fixed = placement === "fixed" ? ' data-placement="fixed"' : "";
+    return (`<div id="${CLAIM_BANNER_ID}" class="cgcb" role="note"${fixed}${expiryAttr(expiresAt)} hidden>` +
+        `<span class="cgcb-mark">${wordmark("cgcb-wordmark")}</span>` +
+        `<span class="cgcb-msg"><b>This site disappears <span data-claim-when>in ${CLAIM_BANNER_FALLBACK_DAYS} days</span></b> unless it&#39;s claimed.</span>` +
+        `<a class="cgcb-btn" href="${safe(href(claimUrl))}">${CLAIM_BANNER_LABEL} <span aria-hidden="true">&rarr;</span></a>` +
+        `<button class="cgcb-x" type="button" data-claim-dismiss aria-label="${CLAIM_BANNER_CLOSE_LABEL}">${glyph(X)}</button>` +
+        `</div>`);
+}
+/**
+ * The whole drop-in: the stylesheet, the banner, and the script that reveals
+ * it, in that order. One string, the same for every viewer of a drop; with a
+ * `nonce`, the same for every viewer of one response.
+ */
+export function claimBanner({ claimUrl, expiresAt, nonce, placement }) {
+    const n = nonce ? ` nonce="${safe(esc(nonce))}"` : "";
+    return `<style${n}>${CLAIM_BANNER_CSS}</style>` + claimBannerMarkup({ claimUrl, expiresAt, placement }) + `<script${n}>${CLAIM_BANNER_SCRIPT}</script>`;
+}
+//# sourceMappingURL=index.js.map

package/dist/claim-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/claim-banner/index.ts"],"names":[],"mappings":"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"}

package/dist/docs.css

@@ -0,0 +1,466 @@
+/*
+  A PRODUCT PRESET for the docs site (docs.cloudgrid.io, Astro Starlight). ui#341.
+
+  It styles Starlight entirely from this package's tokens, so the docs repo
+  keeps an import and its config and nothing else: no hex, no font stack, no
+  second copy of the brand.
+
+  HOW. Starlight paints almost everything from about sixty `--sl-*` custom
+  properties. Part one of this file maps them onto `--cg-*` tokens. Part two is
+  a short list of targeted rules, only where Starlight hard-wires a pairing the
+  brand does not want or has no variable at all. Every value is a token; a test
+  (test/docs-preset.test.mjs) holds the file to that.
+
+  LIGHT ONLY (founder, 2026-10-19). This package has no dark mode: dark is a
+  container concern (`data-cg-surface='ink'`), never a page mode. So the dark
+  scope is not styled here at all. The consumer forces `data-theme='light'` and
+  removes the theme picker; without that, a dark-OS reader would get this
+  palette's light values under Starlight's own dark logo and code theme.
+
+  IMPORT ORDER. After tokens.css, which is what every var() below reads:
+
+      customCss: [
+        '@cloudgrid-io/ui/fonts.css',
+        '@cloudgrid-io/ui/tokens.css',
+        '@cloudgrid-io/ui/docs.css',
+      ]
+
+  UNLAYERED ON PURPOSE. Starlight puts its own rules in `@layer starlight.*`,
+  and an unlayered rule beats any layered one whatever the specificity or the
+  order. That is why the targeted rules below can be plain class selectors.
+
+  SAME ELEMENT, SAME RESOLUTION. Rule 2 of this library: a custom property that
+  references another resolves where it is declared. Starlight declares its
+  derived variables (`--sl-color-text: var(--sl-color-gray-2)`) on :root, and
+  this file remaps the ramp on :root too, so both resolve on the same element.
+  Do not flip tokens per container inside the docs; it would not follow.
+
+  PROSE PARITY. prose.css cannot be applied to Starlight's markup (it is scoped
+  to `.prose`, and adding that class means overriding MarkdownContent and then
+  fighting `.prose pre` on Expressive Code). The few element rules are mirrored
+  here against `.sl-markdown-content`, with the same tokens, and
+  test/docs-preset.test.mjs fails if the two drift.
+
+  STARLIGHT COUPLING. Measured against @astrojs/starlight 0.42.6. Part one uses
+  the documented `--sl-*` contract. Part two depends on a handful of internal
+  selectors (`#_top`, `.sidebar-content`, `.sl-link-button`, `.card`,
+  `.sl-link-card`, `.pagination-links`, `button[data-open-modal] > kbd`,
+  `#starlight__search`). A Starlight upgrade can rename one silently; take
+  upgrades with a screenshot check.
+
+  NOT IN THIS FILE. Icons stay Starlight's own until the Phosphor follow-up.
+  Code blocks are styled by the Expressive Code export,
+  `@cloudgrid-io/ui/expressive-code`, plus the one rule below that Expressive
+  Code has no setting for.
+*/
+
+/* ---- part one: Starlight's variables, onto the tokens ---------------------- */
+
+/* `::backdrop` because Starlight declares its colours there too: the search
+   dialog's backdrop reads --sl-color-backdrop-overlay from it. */
+:root,
+::backdrop {
+  /* The neutral ramp. Starlight's `white` is its highest-contrast ink and its
+     `black` is the page, so the ramp runs from text-primary to the ground. */
+  --sl-color-white: var(--cg-text-primary);
+  --sl-color-gray-1: var(--cg-text-primary);
+  /* Body text. prose.css sets `p, li` in text-secondary and `strong` in
+     text-primary, and so does this. */
+  --sl-color-gray-2: var(--cg-text-secondary);
+  --sl-color-gray-3: var(--cg-text-muted-strong);
+  --sl-color-gray-4: var(--cg-text-muted);
+  /* Structural borders: the search control, table rules, cards. */
+  --sl-color-gray-5: var(--cg-border-control);
+  --sl-color-gray-6: var(--cg-border-hairline);
+  --sl-color-gray-7: var(--cg-surface-subtle);
+  /* The library's page ground, with white cards on it (founder, 2026-10-19). */
+  --sl-color-black: var(--cg-surface-page);
+
+  /* The accent triplet: selection tint, focus and active marks. */
+  --sl-color-accent-low: var(--cg-primary-tint);
+  --sl-color-accent: var(--cg-primary);
+  --sl-color-accent-high: var(--cg-primary-press);
+
+  /* The hue triplets, `-low` fill, base, `-high` text. Each is a library tone.
+     Caution borrows the expired state's amber: an editorial role on a state
+     tone, stated here rather than minted as a new token. The note (blue) has no
+     tinted rung in the library, so its fill is the neutral raised surface. */
+  --sl-color-purple-low: var(--cg-primary-tint);
+  --sl-color-purple: var(--cg-primary);
+  --sl-color-purple-high: var(--cg-primary-press);
+  --sl-color-orange-low: var(--cg-expired-fill);
+  --sl-color-orange: var(--cg-expired);
+  --sl-color-orange-high: var(--cg-expired-strong);
+  --sl-color-red-low: var(--cg-danger-fill);
+  --sl-color-red: var(--cg-danger);
+  --sl-color-red-high: var(--cg-danger-strong);
+  --sl-color-green-low: var(--cg-online-fill);
+  --sl-color-green: var(--cg-online);
+  --sl-color-green-high: var(--cg-online-strong);
+  --sl-color-blue-low: var(--cg-surface-raised);
+  --sl-color-blue: var(--cg-accent);
+  --sl-color-blue-high: var(--cg-accent-press);
+
+  /* The semantic slots Starlight derives, set explicitly so none of them
+     falls back to Starlight's own light values. */
+  --sl-color-text: var(--cg-text-secondary);
+  --sl-color-text-accent: var(--cg-primary);
+  --sl-color-text-invert: var(--cg-text-on-primary);
+  --sl-color-bg: var(--cg-surface-page);
+  --sl-color-bg-nav: var(--cg-surface-card);
+  --sl-color-bg-sidebar: var(--cg-surface-page);
+  --sl-color-bg-inline-code: var(--cg-surface-page-alt);
+  --sl-color-bg-accent: var(--cg-primary);
+  --sl-color-hairline-light: var(--cg-border-hairline);
+  --sl-color-hairline: var(--cg-border-hairline);
+  --sl-color-hairline-shade: var(--cg-border-hairline);
+  --sl-color-backdrop-overlay: var(--cg-scrim);
+
+  /* The brand is flat and contains by hairlines; the card shadow is the one it
+     uses under a white card on the ground. */
+  --sl-shadow-sm: var(--cg-shadow-card);
+  --sl-shadow-md: var(--cg-shadow-card);
+  --sl-shadow-lg: var(--cg-shadow-raised);
+
+  /* Type. Space Grotesk for everything a reader reads, headings included, and
+     no Tanker anywhere (founder, 2026-10-19). */
+  --sl-font: var(--cg-font-body);
+  --sl-font-mono: var(--cg-font-mono);
+
+  /* The size scale. Nothing under 13px: Starlight's 12px rung (the search
+     shortcut) lands on the caption, the brand's floor. */
+  --sl-text-2xs: var(--cg-caption);
+  --sl-text-xs: var(--cg-caption);
+  --sl-text-sm: var(--cg-body-14);
+  --sl-text-base: var(--cg-body-md);
+  --sl-text-lg: var(--cg-body-18);
+  --sl-text-xl: var(--cg-body-xl);
+  --sl-text-2xl: var(--cg-title-24);
+  --sl-text-3xl: var(--cg-display-sm);
+  --sl-text-4xl: var(--cg-title-36);
+  --sl-text-5xl: var(--cg-display-lg);
+  --sl-text-6xl: var(--cg-display-64);
+  --sl-text-body: var(--cg-body-md);
+  --sl-text-body-sm: var(--cg-caption);
+  --sl-text-code: var(--cg-mono-size);
+  --sl-text-code-sm: var(--cg-caption);
+
+  /* Headings follow prose.css: h1 is its clamp, h2 and h3 its two rungs, and
+     h4 and h5 continue down the heading ramp. Starlight re-declares h1 to h4
+     above 50em inside its layer; this unlayered block wins at every width. */
+  --sl-text-h1: clamp(var(--cg-display-sm), 5vw, var(--cg-display-lg));
+  --sl-text-h2: var(--cg-heading-lg);
+  --sl-text-h3: var(--cg-heading-md);
+  --sl-text-h4: var(--cg-heading-sm);
+  --sl-text-h5: var(--cg-body-md);
+
+  --sl-line-height: var(--cg-body-line);
+  --sl-line-height-headings: var(--cg-heading-line);
+}
+
+/* Starlight's reset sets `color-scheme: dark` under a dark theme. Light only,
+   so scrollbars and form controls stay light whatever the OS says. */
+:root {
+  color-scheme: light;
+}
+
+/* ---- part two: targeted rules -------------------------------------------- */
+
+/* Headings: the body face at medium, as the library sets a heading. `#_top` is
+   Starlight's page title (PAGE_TITLE_ID); it defaults to 600. */
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)),
+#_top,
+.hero h1 {
+  font-weight: var(--cg-weight-medium);
+}
+
+/* The heading anchor glyph, quiet until hovered. */
+.sl-markdown-content .sl-anchor-link {
+  color: var(--cg-text-muted);
+}
+
+/* prose.css: strong is the ink. */
+.sl-markdown-content strong:not(:where(.not-content *)) {
+  color: var(--cg-text-primary);
+  font-weight: var(--cg-weight-bold);
+}
+
+/* prose.css links: --cg-link, the accent blue since #197, one link colour
+   across the brand (founder, 2026-10-19). Inside an aside too: no per-callout
+   link colour. */
+.sl-markdown-content a:not(:where(.not-content *)) {
+  color: var(--cg-link);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.sl-markdown-content a:hover:not(:where(.not-content *)) {
+  color: var(--cg-link-hover);
+}
+
+/* prose.css inline code. `:not(pre) >` keeps it off code inside a block. */
+.sl-markdown-content :not(pre) > code:not(:where(.not-content *)) {
+  background: var(--cg-surface-page-alt);
+  border: var(--cg-border-width) solid var(--cg-border-hairline);
+  border-radius: var(--cg-radius-xs);
+  padding: 0.1em 0.35em;
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+}
+
+/* No chip inside a heading: the mono face only (founder, 2026-10-19). Every CLI
+   h2 is a command, and a chip at heading size reads as a button. */
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code:not(:where(.not-content *)) {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+/* Inside a tinted callout the chip is the white card, so it reads as a chip
+   on every tone instead of a mix of the tone. */
+.sl-markdown-content .starlight-aside :not(pre) > code:not(:where(.not-content *)) {
+  background: var(--cg-surface-card);
+}
+
+/* prose.css blockquote. Unused in the content today, kept so a first one does
+   not arrive in Starlight's grey. */
+.sl-markdown-content blockquote:not(:where(.not-content *)) {
+  border-inline-start: var(--cg-border-width-strong) solid var(--cg-border-accent);
+  color: var(--cg-text-primary);
+}
+
+/* prose.css tables: hairline cells, a tinted header row. The cells are white
+   so a table reads as a card on the ground.
+
+   THE TABLE IS ITS OWN SCROLL CONTAINER. Starlight renders a bare <table> with
+   no wrapper, so the scroll goes on the table itself: `display: block` with
+   `overflow-x: auto`, exactly prose.css's recipe. A table wider than the column
+   scrolls inside itself and the page never scrolls sideways. */
+.sl-markdown-content table:not(:where(.not-content *)) {
+  border-collapse: collapse;
+  font-size: var(--cg-body-sm);
+  display: block;
+  width: 100%;
+  max-width: max-content;
+  overflow-x: auto;
+}
+
+/* Code in a cell never breaks inside a word. prose.css's `overflow-wrap:
+   anywhere` on inline code also lowers a cell's minimum width, so on a phone
+   the table squeezed `inside` into `insid` / `e` rather than scrolling
+   (founder, 2026-10-19). `nowrap` keeps a flag such as `--require-signin` whole
+   too, which `overflow-wrap: normal` alone would still break after a hyphen;
+   the table scrolls instead. */
+.sl-markdown-content :is(th, td) code:not(:where(.not-content *)) {
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+  border: var(--cg-border-width) solid var(--cg-border-hairline);
+  padding: var(--cg-space-2) var(--cg-space-3);
+  background: var(--cg-surface-card);
+}
+
+.sl-markdown-content th:not(:where(.not-content *)) {
+  background: var(--cg-surface-page-alt);
+  font-weight: var(--cg-weight-bold);
+}
+
+/* Asides: a hairline box with the library's corner, in place of Starlight's
+   4px bar. Each type takes its tone's own border rung. */
+.starlight-aside {
+  border: var(--cg-border-width) solid var(--sl-color-asides-border);
+  border-radius: var(--cg-radius-md);
+}
+
+.starlight-aside--note {
+  --sl-color-asides-border: var(--cg-border-control);
+  --sl-color-asides-text-accent: var(--cg-text-primary);
+}
+
+.starlight-aside--tip {
+  --sl-color-asides-border: var(--cg-primary-tint);
+}
+
+.starlight-aside--caution {
+  --sl-color-asides-border: var(--cg-expired-border);
+}
+
+.starlight-aside--danger {
+  --sl-color-asides-border: var(--cg-danger-border);
+}
+
+/* Sidebar, as the library SideNav draws it: a group header and its rows in
+   the body size, rounded rows, the hover wash, and the current page as the
+   brand-tint chip rather than Starlight's solid purple bar. */
+.sidebar-content .large {
+  font-size: var(--cg-body-sm);
+  font-weight: var(--cg-weight-medium);
+  color: var(--cg-text-primary);
+}
+
+.sidebar-content summary {
+  border-radius: var(--cg-radius-lg);
+}
+
+.sidebar-content summary:hover {
+  background: var(--cg-hover);
+}
+
+.sidebar-content a {
+  font-size: var(--cg-body-sm);
+  color: var(--cg-text-secondary);
+  border-radius: var(--cg-radius-lg);
+}
+
+.sidebar-content a:hover,
+.sidebar-content a:focus {
+  background: var(--cg-hover);
+  color: var(--cg-text-primary);
+}
+
+.sidebar-content a[aria-current='page'],
+.sidebar-content a[aria-current='page']:hover,
+.sidebar-content a[aria-current='page']:focus {
+  background: var(--cg-primary-tint);
+  color: var(--cg-primary);
+  font-weight: var(--cg-weight-medium);
+}
+
+/* The header's social link, quiet ink rather than the accent. */
+.social-icons a {
+  color: var(--cg-text-secondary);
+}
+
+.social-icons a:hover {
+  color: var(--cg-text-primary);
+}
+
+/* The search control: a white control with the library's control corner. */
+@media (min-width: 50rem) {
+  button[data-open-modal] {
+    background-color: var(--cg-surface-card);
+    border-radius: var(--cg-radius-sm);
+  }
+}
+
+/* The search shortcut, a key cap at the caption size, the brand's floor. */
+button[data-open-modal] > kbd {
+  font-size: var(--cg-caption);
+  background-color: var(--cg-surface-control);
+  border-radius: var(--cg-radius-2xs);
+}
+
+/* Pagefind sets its own scale to 0.8, which puts result text at 11 to 13px.
+   At 1 it is 14, 16 and 21px. */
+#starlight__search {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-font: var(--cg-font-body);
+  --pagefind-ui-border-radius: var(--cg-radius-sm);
+}
+
+/* Hero buttons as the library's primary Button: the brand fill with its own
+   on-primary text. Starlight paints that text in --sl-color-black, which is
+   now the page ground, not white. */
+.sl-link-button {
+  font-family: var(--cg-font-ui);
+  font-weight: var(--cg-label-weight);
+}
+
+.sl-link-button.primary,
+.sl-link-button.primary:hover {
+  background: var(--cg-primary);
+  border-color: var(--cg-primary);
+  color: var(--cg-text-on-primary);
+}
+
+.sl-link-button.primary:hover {
+  background: var(--cg-primary-press);
+  border-color: var(--cg-primary-press);
+}
+
+/* Cards on the ground, as the library Card: white, a hairline ring, the card
+   corner. One brand tone for every icon tile instead of Starlight's rotation
+   through five hues; unlayered, this beats its :nth-child rules outright. */
+.card,
+.sl-link-card,
+.pagination-links a {
+  background-color: var(--cg-surface-card);
+  border-color: var(--cg-border-hairline);
+  border-radius: var(--cg-radius-xl);
+}
+
+.card {
+  --sl-card-border: var(--cg-primary-tint);
+  --sl-card-bg: var(--cg-primary-tint);
+}
+
+.card .icon {
+  color: var(--cg-primary);
+  border-radius: var(--cg-radius-2xs);
+}
+
+.card .title {
+  font-weight: var(--cg-weight-medium);
+}
+
+/* The Card body at the library Card's size. Starlight's clamp bottoms out at
+   14px on a phone, where inline code at prose's 0.9em measured 12.6px. */
+.card .body {
+  font-size: var(--cg-body-sm);
+}
+
+.sl-link-card:hover,
+.pagination-links a:hover {
+  background-color: var(--cg-surface-card);
+  border-color: var(--cg-border-control);
+}
+
+/* Expressive Code draws its copy button at a fixed 0.2rem corner and has no
+   setting for it. The library's copy control is a pill. */
+.expressive-code .copy button,
+.expressive-code .copy button div {
+  border-radius: var(--cg-radius-pill);
+}
+
+/* NO WINDOW DOTS (founder, 2026-10-19: "the icons are not relevant").
+   Expressive Code draws a terminal frame for every sh/bash block: a title bar
+   with three window dots and nothing else in it. The dots go, and so does the
+   empty bar they sat in, so a terminal block is the same ink box as every other
+   block, the way CodeBlock draws one.
+
+   The bar is collapsed, never `display: none`. It holds the screen-reader label
+   "Terminal window", and hiding the bar would remove that text from the page.
+   A titled terminal frame keeps its bar for the title, without the dots. */
+.expressive-code .frame.is-terminal .header::before {
+  content: none;
+}
+
+.expressive-code .frame.is-terminal:not(.has-title) {
+  /* The copy button's offset from the top: the bar is gone, so it sits where
+     an untitled code frame's does. */
+  --button-spacing: var(--cg-space-2);
+}
+
+.expressive-code .frame.is-terminal:not(.has-title) .header {
+  padding: 0;
+  border: 0;
+}
+
+.expressive-code .frame.is-terminal:not(.has-title) .header .title,
+.expressive-code .frame.is-terminal:not(.has-title) .header::after {
+  display: none;
+}
+
+/* With the bar gone the code box carries the top edge and corners again,
+   which Expressive Code removes from any terminal frame. */
+.expressive-code .frame.is-terminal:not(.has-title) pre {
+  border-top: var(--cg-border-width) solid var(--cg-surface-code);
+  border-top-left-radius: var(--header-border-radius);
+  border-top-right-radius: var(--header-border-radius);
+}
+
+.expressive-code .frame:not(.has-title):not(.is-terminal) {
+  --button-spacing: var(--cg-space-2);
+}

package/dist/expressive-code-palette.d.ts

@@ -0,0 +1,5 @@
+export declare const CODE_PALETTE: {
+    readonly background: "#222222";
+    readonly foreground: "#e7e7e7";
+};
+//# sourceMappingURL=expressive-code-palette.d.ts.map

package/dist/expressive-code-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code-palette.d.ts","sourceRoot":"","sources":["../src/expressive-code-palette.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;CAGf,CAAA"}

package/dist/expressive-code-palette.js

@@ -0,0 +1,10 @@
+// GENERATED by scripts/build-expressive-code.mjs from src/tokens.css. Do not edit.
+//
+// Expressive Code does colour arithmetic on its theme at build time and cannot
+// read a CSS custom property there, so these two are the resolved values of the
+// tokens named beside them, at :root. Retune the token and rebuild.
+export const CODE_PALETTE = {
+    background: "#222222", // --cg-surface-code
+    foreground: "#e7e7e7", // --cg-text-on-code
+};
+//# sourceMappingURL=expressive-code-palette.js.map

package/dist/expressive-code-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code-palette.js","sourceRoot":"","sources":["../src/expressive-code-palette.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,EAAE;AACF,+EAA+E;AAC/E,gFAAgF;AAChF,oEAAoE;AAEpE,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,SAAS,EAAE,oBAAoB;IAC3C,UAAU,EAAE,SAAS,EAAE,oBAAoB;CACnC,CAAA"}