Score us

Identity

Use when

• The proof section (strip) and its demo page (full). Why: Showing our own low scores is the most credible proof that the audit is honest.

Do not use when

• For a private system's per-area detail. Why: Private systems appear only as aggregate scores.

Anatomy

Made of: showcase-frame, band-word, stat, table, code-block, control, caption.

Used in: pages directly.

Variants

States

Tokens

Layout

Spacing and rhythm

Motion

Runtime and reuse

1. stylesheet: /css/site.css. Built Site tokens, core and registered element CSS; preserve modes, focus and responsive rules.

2. stylesheet: /css/demos.css. Existing legacy demo styles where the rendered specimen uses them.

3. font: /fonts/. Self-hosted files referenced by Site @font-face, with licences; Japanese locale overrides remain applicable.

4. data: /i18n/ja.json. Required for a Japanese root; English interface fallbacks are authored in source. Root language changes require disposal and fresh preparation.

5. data: /data/audit-areas-takenote.json. Required first-party native source data; fetch aborts with the mount and invalid consumed fields reject before DOM initialization.

6. data: /data/audit-areas-loom-base.json. Required first-party native source data; fetch aborts with the mount and invalid consumed fields reject before DOM initialization.

7. data: /data/audit-areas-control-area.json. Required first-party native source data; fetch aborts with the mount and invalid consumed fields reject before DOM initialization.

8. data: /data/rubric.json. Required first-party native source data; fetch aborts with the mount and invalid consumed fields reject before DOM initialization.

9. Static fallback: Original build-time specimen remains readable before loading and after chunk/initialization failure; enhancement controls retain authored hidden state.

10. Before DOM initialization the configured host awaits apps/showcase/site/demos/explorer.ts#prepare for this root with a mount-owned AbortSignal. Preparation must throw on missing/invalid data; disposal/replacement aborts pending work, and a stale result cannot initialize or claim ready.

11. Configured initializer: apps/showcase/site/demos/explorer.ts#init. The host owns transactional static-markup restoration and runtime state.

12. Consumer module (imports relative to the configured source root):
    import { createRuntimeHost } from "./src/workflows/runtime-host";
    import { SITE_RUNTIMES } from "./apps/showcase/site/runtime-registry";
    const definition = SITE_RUNTIMES.find(entry => entry.binding.id === "explorer");
    if (!definition || definition.binding.lifecycle.kind !== "managed") throw new Error("Managed runtime binding unavailable");
    const host = createRuntimeHost([definition]);
    export function mountRuntime(container: ParentNode) { return host.mountAll(container); }

13. After inserting the rendered markup, call mountRuntime(container) for the container holding [data-demo="explorer"]. Retain the returned disposal function and call it before removing, replacing or remounting, including every Storybook args render. The configured host restores captured static markup/attributes on disposal or caught load/initialization failure; retry starts a fresh managed remount.

Accessibility passport

Content

Good: “Real audit output, scored with Loom's own open rubric, low scores included.”

Bad: “Industry-leading scores”

Japanese: i18n.ts ix.score.*.

Icons and illustrations

None: this element uses no icon or illustration of its own.

Decisions and exceptions

• D-SITE-008: One ShowcaseFrame for every self-playing element

Usage

117 uses across the built pages (measured by npm run site:system).

Tests

Figma

not-yet: The Loom Site Figma library is the last stage of the plan; this element is not mapped yet.

Open in Storybook