@cloudgrid-io/ui 0.33.0 → 0.34.0

package/dist/claim-banner/css.js

@@ -0,0 +1,87 @@
+/**
+ * The guest claim banner's stylesheet (ui issue 342), for a `<style>` beside it.
+ *
+ * Every rule reads a token by name. The banner sits in a page the library does
+ * not style (the inspiration-server's wrapper, or a dropped site's own HTML on
+ * the legacy inline path), so the root declares the values of the tokens it
+ * reads, taken from the badge's generated palette, which `build-badge.mjs`
+ * resolves from tokens.css. Nothing here is a literal colour.
+ *
+ * The look is the founder's mock (cloudgrid issue 4872), spread out on his
+ * review of the gallery (2026-10-19): the grid purple bar and white text in
+ * three parts, the white wordmark at the left edge, the sentence centred on the
+ * bar, and the lime pill with ink text at the right just before the close x.
+ * The sides are equal columns, so the sentence sits on the bar's centre whatever
+ * the wordmark and the pill measure; the padding is the same on both sides and
+ * the pill keeps clear of the x with its own margin. No sign tile. The sentence is regular with
+ * its first half bold, the library's 400 and 600: the mock draws 500 and 700,
+ * the library has no 700, and 500 against 600 does not read as bold.
+ *
+ * At 640px and under: the wordmark hides, the type steps down to the 13px
+ * caption, the sentence takes the first line and the button wraps under it.
+ *
+ * The root is `order:-1` and does not shrink, so in a flex-column body (the
+ * wrapper's, after cloudgrid issue 4872) it leads the page even when it is appended
+ * after the iframe, and pushes the site down instead of covering it.
+ *
+ * `data-placement="fixed"` (the legacy inline path) fixes it to the top of the
+ * viewport instead; the inline script pads the body by its height.
+ *
+ * It loads no font. The family is the library's UI stack (Manrope, then the
+ * system faces); the badge registers Manrope on the wrapper's document, and
+ * `CLAIM_BANNER_FONT_FACES` names the file for a page without the badge.
+ */
+import { BADGE_TOKENS } from "../badge/palette.js";
+/** Every token the stylesheet reads. Tests hold the stylesheet to this list. */
+export const CLAIM_BANNER_TOKEN_NAMES = [
+    "--cg-primary",
+    "--cg-text-on-primary",
+    "--cg-secondary",
+    "--cg-secondary-press",
+    "--cg-text-on-accent",
+    "--cg-font-ui",
+    "--cg-weight-regular",
+    "--cg-weight-bold",
+    "--cg-body-14",
+    "--cg-caption",
+    "--cg-radius-pill",
+    "--cg-duration",
+    "--cg-ease-out",
+];
+/** The token values as one declaration list, for the banner root. */
+const DECLARATIONS = CLAIM_BANNER_TOKEN_NAMES.map((name) => `${name}:${BADGE_TOKENS[name]};`).join("");
+/** The banner's width breakpoint: at and under it, the phone layout. */
+export const CLAIM_BANNER_PHONE_MAX = 640;
+export const CLAIM_BANNER_CSS = /* @__PURE__ */ (() => `.cgcb{all:initial;${DECLARATIONS}box-sizing:border-box;position:relative;order:-1;flex:none;display:grid;` +
+    `grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr);align-items:center;column-gap:32px;` +
+    `width:100%;margin:0;padding:10px 24px;background:var(--cg-primary);color:var(--cg-text-on-primary);` +
+    `font-family:var(--cg-font-ui);font-size:var(--cg-body-14);font-weight:var(--cg-weight-regular);line-height:1.4;text-align:center;` +
+    `-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
+.cgcb[hidden]{display:none!important}
+.cgcb[data-placement=fixed]{position:fixed;top:0;left:0;right:0;z-index:2147483646}
+.cgcb *,.cgcb *::before,.cgcb *::after{box-sizing:border-box}
+.cgcb svg{display:block;flex:none}
+.cgcb svg path{fill:currentColor}
+.cgcb-mark{display:flex;align-items:center;justify-self:start}
+.cgcb-wordmark{width:auto;height:16px;color:var(--cg-text-on-primary)}
+.cgcb-msg{min-width:0}
+.cgcb-msg b{font-weight:var(--cg-weight-bold)}
+.cgcb-btn{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 14px;border-radius:var(--cg-radius-pill);` +
+    `background:var(--cg-secondary);color:var(--cg-text-on-accent);font-family:var(--cg-font-ui);font-size:var(--cg-caption);font-weight:var(--cg-weight-bold);` +
+    `justify-self:end;margin-right:28px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgcb-btn:hover{background:var(--cg-secondary-press)}
+.cgcb-x{position:absolute;top:50%;right:12px;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;` +
+    `border-radius:var(--cg-radius-pill);background:transparent;color:color-mix(in srgb,var(--cg-text-on-primary) 80%,transparent);cursor:pointer;` +
+    `transform:translateY(-50%);transition:background-color var(--cg-duration) var(--cg-ease-out),color var(--cg-duration) var(--cg-ease-out)}
+.cgcb-x svg{width:16px;height:16px}
+.cgcb-x:hover{color:var(--cg-text-on-primary);background:color-mix(in srgb,var(--cg-text-on-primary) 14%,transparent)}
+.cgcb-btn:focus-visible,.cgcb-x:focus-visible{outline:2px solid var(--cg-text-on-primary);outline-offset:2px}
+.cgcb :focus:not(:focus-visible){outline:none}
+@media (max-width:${CLAIM_BANNER_PHONE_MAX}px){` +
+    `.cgcb{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 44px 10px 14px;font-size:var(--cg-caption)}` +
+    `.cgcb .cgcb-mark{display:none}` +
+    `.cgcb-msg{flex:1 1 100%}` +
+    `.cgcb-btn{margin-right:0}.cgcb-x{right:8px}}
+@media (prefers-reduced-motion:reduce){.cgcb *{transition:none!important}}
+`)();
+//# sourceMappingURL=css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/claim-banner/css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,wBAAwB,GAAsB;IACzD,cAAc;IACd,sBAAsB;IACtB,gBAAgB;IAChB,sBAAsB;IACtB,qBAAqB;IACrB,cAAc;IACd,qBAAqB;IACrB,kBAAkB;IAClB,cAAc;IACd,cAAc;IACd,kBAAkB;IAClB,eAAe;IACf,eAAe;CAChB,CAAA;AAED,qEAAqE;AACrE,MAAM,YAAY,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtG,wEAAwE;AACxE,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC5D,qBAAqB,YAAY,0EAA0E;IAC3G,0HAA0H;IAC1H,qGAAqG;IACrG,mIAAmI;IACnI;;;;;;;;;;yHAUuH;IACvH,4JAA4J;IAC5J;;iIAE+H;IAC/H,+IAA+I;IAC/I;;;;;oBAKkB,sBAAsB,MAAM;IAC9C,4HAA4H;IAC5H,gCAAgC;IAChC,0BAA0B;IAC1B;;CAED,CAAC,EAAE,CAAA"}

package/dist/claim-banner/index.d.ts

@@ -0,0 +1,122 @@
+/**
+ * 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`
+ */
+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 declare 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 declare 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 declare const CLAIM_BANNER_FALLBACK_DAYS = 7;
+/** The button's label. The arrow after it is decorative. */
+export declare const CLAIM_BANNER_LABEL = "Claim it";
+/** The close x's accessible name. */
+export declare 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 declare const CLAIM_BANNER_FONT_FACES: {
+    family: string;
+    weight: string;
+    style: string;
+    file: string;
+    unicodeRange: string;
+}[];
+/**
+ * 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 declare const CLAIM_BANNER_SCRIPT: string;
+export interface ClaimBannerOptions {
+    /**
+     * Where "Claim it" goes, in the same tab. The caller builds it with its
+     * query (`door`, `drop`, `entity`, `utm_source`); it is attribute-escaped here,
+     * and anything but http(s) becomes `#`.
+     */
+    claimUrl: string;
+    /**
+     * The drop's expiry, as the entity carries it (ISO 8601). Emitted as
+     * `data-expires-at`, escaped, and read by the inline script. Missing, empty or
+     * unreadable reads "in 7 days".
+     */
+    expiresAt?: string | Date | null;
+    /**
+     * The page's CSP nonce, for the wrapper page. Placed on the `<style>` and the
+     * `<script>`. Omit it on a page without a nonce-based CSP.
+     */
+    nonce?: string | null;
+    /**
+     * `flow` (the default): a block in the page's flow, for the wrapper page,
+     * which emits it before the iframe in a flex-column body; it pushes the site
+     * down. `fixed`: a bar fixed to the top of the viewport, for a page the caller
+     * cannot reorder (the legacy inline path appends it at the end of the
+     * dropper's own HTML); the script pads the body by its height, so it still
+     * pushes the content down instead of covering it.
+     */
+    placement?: ClaimBannerPlacement;
+}
+export type ClaimBannerPlacement = "flow" | "fixed";
+/**
+ * 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 declare function claimBannerMarkup({ claimUrl, expiresAt, placement }: Omit<ClaimBannerOptions, "nonce">): string;
+/**
+ * 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 declare function claimBanner({ claimUrl, expiresAt, nonce, placement }: ClaimBannerOptions): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/claim-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/claim-banner/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAE7F,kEAAkE;AAClE,eAAO,MAAM,eAAe,oBAAoB,CAAA;AAEhD;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,0BAA0B,CAAA;AAE/D,sFAAsF;AACtF,eAAO,MAAM,0BAA0B,IAAI,CAAA;AAE3C,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB,aAAa,CAAA;AAE5C,qCAAqC;AACrC,eAAO,MAAM,wBAAwB,wBAAwB,CAAA;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB;;;;;;GAAkE,CAAA;AAEtG;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAiBzB,CAAA;AAET,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAA;CACjC;AAED,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAA;AAoBnD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAkB,EAAE,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC,GAAG,MAAM,CAUxH;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,kBAAkB,GAAG,MAAM,CAGjG"}

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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"}