explico 0.8.0 → 0.11.0

package/src/components/figure/Figure.astro

@@ -6,65 +6,53 @@
  * mirrors exactly (separate counter, same `[[fig-<id>]]` / cross-page
  * reference grammar, `number`/`anchorId` computed by `remark-notation.mjs`).
  *
+ * **One caption pair** (docs/plans/titles-and-containers.md Part 3): a figure
+ * is named by `caption`, the long caption shown below it with its number,
+ * and an optional `short` caption, the name the `[[fig-…]]` preview card
+ * heads with (and rule S1 measures). There is no title bar: a lab inside the
+ * figure carries no title or caption of its own either — the figure's
+ * caption names the whole.
+ *
  * `previewable` (default `true`) controls what the hover-preview card
  * (`FloatRefLayer.astro`) shows for a `[[fig-<id>]]` reference elsewhere in
- * the prose: `true` clones this figure's visual into the card alongside its
- * caption; `false` shows the caption and number only. Set it `false` for
- * interactive content — a hydrated `client:*` island cloned into a floating
- * card would be an inert, non-hydrated, id-colliding duplicate, not a
- * working preview.
- *
- * Collapsible + persistent (docs/plans/collapsible-disclosure.md Part 1): the
- * figure body sits in a native `<details>` whose `<summary>` is a persistent
- * title bar showing `title` (a short label, distinct from the longer
- * `caption`) — reading as an OS-window minimize/restore control while
- * staying entirely native `<details>` semantics (`aria-expanded`, keyboard
- * toggle, no bespoke ARIA needed). The rotating chevron itself isn't
- * authored here: `@astrojs/starlight`'s own `markdown.css` already gives
- * every `.sl-markdown-content summary` a disclosure-triangle `::before`
- * marker that rotates 90° on `[open]` — reproducing that ourselves would
- * just draw two.
+ * the prose: `true` clones the figure's picture — the default slot, never
+ * its tools — into the card, as a still copy; `false` shows the caption and
+ * number only.
  *
- * The caption + permalink number live in a `<figcaption>` *inside*
- * `<details>`, after `.keyed-figure__body` — the pre-collapsible reading
- * position (caption below the figure), but now part of the disclosure
- * content: a native closed `<details>` hides it along with the body, since
- * hovering the (collapsed) summary already surfaces the caption via the
- * hover-peek card — showing it twice would be redundant. `textContent`
- * reads on a `display: none` element still work, so `FloatRefLayer`'s
- * preview card (`captionFor` in `FloatRefLayer.astro`) can read it
- * regardless of the source figure's collapse state.
+ * **Laid out as LaTeX lays it out, in every state**
+ * (docs/plans/figures-and-short-captions.md, decision 1): the picture, then
+ * the caption line (`FloatCaption.astro`). A figure never hides or compacts
+ * by itself; to make one fully collapsible, wrap it in a `<Fold>` or put it
+ * in a `### … [collapsible]` / `[card]` section.
  *
- * The title-bar anchor link (`.keyed-figure__title-anchor`) sits next to the
- * title text but, like the permalink number, is a DOM sibling of `<summary>`
- * rather than a child of it — positioned onto the same line with CSS
- * (mirroring Starlight's own heading-wrapper anchor trick in
- * `anchor-links.css`, adapted since our "heading" is an interactive
- * `<summary>` rather than inert text). A focusable `<a>` nested *inside* a
- * `<summary>` trips axe's `nested-interactive` check (two independently
- * activatable controls, unclear which one wins on click/Enter) — the
- * `figures.spec.ts` axe test enforces this. Keeping it a sibling, wrapped
- * together in `.keyed-figure__titlebar` with `position: relative` +
- * `position: absolute`, avoids that while still reading as "next to the
- * title".
- *
- * `defaultOpen` sets the first-visit state; `rememberState` (default `true`)
- * persists the reader's later choice per-page via
- * `../disclosure/persisted-disclosure`.
+ * **A lab is picture → caption → tools** (decisions 3–6, 8). The default
+ * slot is the picture (a lab's plot); the named slot `tools` holds its
+ * controls — an instruction line, the sliders and fields, the live equation —
+ * and renders after the caption line, in a tray inside a `<details>`. Only
+ * the tools fold: the fold button ⌃ / ⌄ ends the caption line, and folded
+ * tools leave a "Hidden here: 2 sliders, 1 equation" line that unfolds them
+ * (`./figure-tools.ts`). Their first state is `defaultOpen`, else the
+ * course's `disclosure.figures`; `rememberState` (default `true`) keeps the
+ * reader's choice per page. The caption line has a live end the lab writes
+ * the case it shows into (`./figure-state.ts`). Print and export show the
+ * figure as LaTeX would — picture and caption, live clause included; the
+ * tools never print. A figure with no `tools` slot has no button and no tray.
  */
+import FloatCaption from './FloatCaption.astro';
+import { courseDisclosure } from '../disclosure/course-disclosure';
 
 export interface Props {
   /** Stable key, e.g. `id="projectile-trajectory"`. Omit for a positional-only figure. */
   id?: string;
-  /** Short label for the title bar / anchor. Falls back to `caption` when omitted. */
-  title?: string;
-  /** Full caption, shown below the figure (with its number) and in the hover-preview card. */
+  /** The long caption, shown below the figure with its number, and in the hover-preview card. */
   caption: string;
-  /** `false` for interactive content the hover-preview must not clone. */
+  /** Optional short caption: heads the `[[fig-…]]` preview card; rule S1 measures it. */
+  short?: string;
+  /** `false` to keep the hover-preview card to the caption and number. */
   previewable?: boolean;
-  /** Author-chosen state for a reader with nothing saved yet. Default: `true`. */
+  /** Whether the `tools` start open for a reader with nothing saved yet. Default: the course's `disclosure.figures`. */
   defaultOpen?: boolean;
-  /** Persist the reader's open/closed choice across visits, per page. Default: `true`. */
+  /** Persist the reader's open/folded choice for the `tools` across visits, per page. Default: `true`. */
   rememberState?: boolean;
   /** Computed by `remark-notation.mjs` — never author this directly. */
   number?: string;
@@ -74,25 +62,36 @@ export interface Props {
 
 const {
   id,
-  title,
   caption,
+  short,
   previewable = true,
-  defaultOpen = true,
+  defaultOpen,
   rememberState = true,
   number,
   anchorId,
 } = Astro.props;
 
+if ('title' in Astro.props) {
+  throw new Error(
+    `<Figure${id ? ` id="${id}"` : ''}> has no \`title\` prop: a figure is named by its \`caption\` (the long caption, shown below it with its number) and an optional \`short\` caption. Move a short title to \`short\`.`,
+  );
+}
 if (typeof caption !== 'string' || !caption.trim()) {
   throw new Error('Figure requires a non-empty `caption` prop.');
 }
+if (short !== undefined && (typeof short !== 'string' || !short.trim())) {
+  throw new Error('Figure `short` must be a non-empty string when given.');
+}
 if (!number || !anchorId) {
   throw new Error(
     'Figure is missing its computed `number`/`anchorId` — this page must run remark-notation with a `figures` cross-page table configured (see astro.config.mjs).',
   );
 }
 
-const titleText = typeof title === 'string' && title.trim() ? title : caption;
+const hasTools = Astro.slots.has('tools');
+const toolsId = `${anchorId}-tools`;
+const toolsOpen = hasTools && (defaultOpen ?? (await courseDisclosure()).figures.defaultOpen);
+const name = `Figure ${number}`;
 ---
 
 <figure
@@ -100,46 +99,70 @@ const titleText = typeof title === 'string' && title.trim() ? title : caption;
   id={anchorId}
   data-fig-number={number}
   data-fig-key={id}
+  data-fig-short={short}
   data-fig-previewable={String(previewable)}
+  data-fig-tools={hasTools ? '' : undefined}
 >
-  <div class="keyed-figure__titlebar">
-    <details
-      class="keyed-figure__details"
-      data-remember-state={String(rememberState)}
-      open={defaultOpen}
-    >
-      <summary class="keyed-figure__summary">
-        <span class="keyed-figure__title-text">{titleText}</span>
-      </summary>
-      <div class="keyed-figure__body">
-        <slot />
-      </div>
-      <figcaption class="keyed-figure__caption">
-        <a
-          class="keyed-figure__number"
-          href={`#${anchorId}`}
-          aria-label={`Figure ${number}`}>Figure {number}</a
+  <div class="keyed-figure__body">
+    <slot />
+  </div>
+  <FloatCaption
+    kind="Figure"
+    prefix="keyed-figure"
+    caption={caption}
+    short={short}
+    anchorId={anchorId}
+    number={number}
+    live
+  >
+    {
+      hasTools && (
+        <button
+          type="button"
+          class="float-tool keyed-figure__tools-toggle"
+          data-figure-tools-toggle
+          aria-controls={toolsId}
+          aria-expanded={String(toolsOpen)}
+          aria-label={`${toolsOpen ? 'Hide' : 'Show'} the controls of ${name}`}
+          title={toolsOpen ? 'Hide the controls' : 'Show the controls'}
         >
-        <span class="keyed-figure__caption-text">{caption}</span>
-      </figcaption>
-    </details>
-    <a
-      class="keyed-figure__title-anchor"
-      href={`#${anchorId}`}
-      aria-label={`Figure ${number} titled “${titleText}”`}
-    >
-      <svg
-        aria-hidden="true"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        ><path
-          d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"
-        ></path></svg
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path class="float-tool__fold" d="M6 15l6-6 6 6" />
+            <path class="float-tool__unfold" d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+      )
+    }
+  </FloatCaption>
+  {
+    hasTools && (
+      <button
+        type="button"
+        class="keyed-figure__tools-stub"
+        data-figure-tools-stub
+        aria-controls={toolsId}
+        hidden={toolsOpen}
       >
-    </a>
-  </div>
+        Hidden here: the controls
+      </button>
+    )
+  }
+  {
+    hasTools && (
+      <details
+        class="keyed-figure__tools-fold"
+        id={toolsId}
+        data-remember-state={String(rememberState)}
+        data-print-omit
+        open={toolsOpen}
+      >
+        <summary class="keyed-figure__tools-summary">Controls of {name}</summary>
+        <div class="keyed-figure__tools">
+          <slot name="tools" />
+        </div>
+      </details>
+    )
+  }
 </figure>
 
 <style>
@@ -148,226 +171,103 @@ const titleText = typeof title === 'string' && title.trim() ? title : caption;
     padding: 0;
   }
 
-  /* One card for the whole figure — title bar and body together — rather
-     than a separate title strip on top of a second bordered box (the
-     `.lab-shell` a wrapped lab already draws around itself): the title now
-     lives *inside* this card, so `.lab-shell` gets its own border/background
-     stripped back to plain spacing when nested here (see `global.css`,
-     `.keyed-figure__body .lab-shell`) to avoid drawing that second box.
-     Same treatment as `.lab-shell` itself, for one consistent "card"
-     language sitewide — overrides Starlight's own default `<details>`
-     accent rule (`markdown.css`, a rule down the left side) entirely. */
-  .keyed-figure__details {
-    border: 1px solid var(--sl-color-gray-5);
-    border-block-start: 4px solid var(--sl-color-accent);
-    border-radius: 0.2rem;
-    background: color-mix(in srgb, var(--sl-color-bg) 94%, var(--sl-color-accent) 6%);
-    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.13);
-    padding: clamp(1rem, 3vw, 1.5rem);
-  }
-
-  .keyed-figure__titlebar {
-    position: relative;
-    /* A custom property, not `font-size` itself: `font-size` is inherited
-       CSS, and `.keyed-figure__body` (the slotted figure content) is a
-       *descendant* of this wrapper too — setting `font-size` here directly
-       would inflate the figure's real content, not just the title. Read
-       this back explicitly on just the summary and the anchor icon below. */
-    --keyed-figure-title-size: var(--sl-text-h3);
-  }
-
-  .keyed-figure__summary {
-    /* This is a title, not a caption — size it like the headings labs
-       already use internally (e.g. LaunchAngleExplorer's own <h3>), not
-       like the muted `.keyed-figure__caption-text` below. */
-    font-size: var(--keyed-figure-title-size);
-    line-height: var(--sl-line-height-headings, 1.2);
-    /* Room for the absolutely-positioned anchor icon so title text never
-       runs under it. */
-    padding-inline-end: 1.5em;
-  }
-
-  .keyed-figure__title-text {
-    font-weight: 600;
-    color: var(--sl-color-white);
-  }
-
-  .keyed-figure__title-anchor {
-    position: absolute;
-    top: 0.15em;
-    inset-inline-end: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--keyed-figure-title-size);
-    width: 1em;
-    height: 1em;
-    color: var(--sl-color-gray-3);
-    text-decoration: none;
-    /* Prevent double/triple clicks from selecting the icon's a11y text. */
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  .keyed-figure__title-anchor svg {
-    width: 0.7em;
-    height: 0.7em;
+  /* A figure is book material: the plain tier (`surfaces.css`), no card —
+     no border, tint, shadow or top rule (docs/plans/titles-and-containers.md
+     Q8). A figure that should read as set apart goes in a `### … [card]`
+     section. The caption line is styled once for every float, in
+     `global.css` (`.float-caption`). */
+  .keyed-figure__body {
+    overflow-x: auto;
   }
 
-  .keyed-figure__title-anchor:hover,
-  .keyed-figure__title-anchor:focus-visible {
-    color: var(--sl-color-text-accent);
+  /* A lab's tools: a tray of their own after the caption line — a thin
+     border and the meta tier's radius, no tint, so it reads as controls
+     beside the figure rather than as part of the picture. */
+  .keyed-figure__tools-fold {
+    margin-block-start: 0.75rem;
+    padding: 0;
+    border: 0;
   }
 
-  .keyed-figure__title-anchor:focus-visible {
-    outline: 2px solid var(--sl-color-accent);
-    outline-offset: 0.15rem;
+  .keyed-figure__tools {
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: var(--ex-radius-meta, 0.5rem);
   }
 
-  /* Hidden at rest, revealed on hover/focus of the title bar — same
-     "hover/focus to reveal" treatment as Starlight's own heading anchors
-     (`anchor-links.css`). */
-  @media (hover: hover) {
-    .keyed-figure__title-anchor {
-      opacity: 0;
-    }
-
-    .keyed-figure__title-anchor:focus-visible,
-    .keyed-figure__titlebar:hover .keyed-figure__title-anchor {
-      opacity: 1;
-    }
+  .keyed-figure__tools > :global(:first-child) {
+    margin-block-start: 0;
   }
 
-  .keyed-figure__body {
-    overflow-x: auto;
+  /* The native summary is for a reader without scripting; with it, the fold
+     button at the end of the caption line and the "Hidden here" line do the
+     work. */
+  .keyed-figure__tools-summary {
+    display: none;
   }
 
-  .keyed-figure__caption {
-    margin-block-start: 0.5rem;
+  /* Folded tools leave a line in the section stub's look (`global.css`
+     `.sl-section-stub`), a button that unfolds them. */
+  .keyed-figure__tools-stub {
+    display: block;
+    width: 100%;
+    margin: 0.3rem 0 0;
+    padding: 0 0 0.45rem;
+    border: 0;
+    border-block-end: 1px dashed var(--sl-color-gray-5);
+    background: none;
+    font: inherit;
     font-size: var(--sl-text-sm);
+    line-height: 1.5;
     color: var(--sl-color-gray-3);
+    text-align: start;
+    cursor: pointer;
   }
 
-  .keyed-figure__number {
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    color: var(--sl-color-text-accent);
-    text-decoration: none;
+  .keyed-figure__tools-stub[hidden] {
+    display: none;
   }
 
-  .keyed-figure__number:hover,
-  .keyed-figure__number:focus-visible {
-    text-decoration: underline;
+  .keyed-figure__tools-stub:hover {
+    color: var(--sl-color-text-accent);
   }
 
-  .keyed-figure__number:focus-visible {
+  .keyed-figure__tools-stub:focus-visible {
     outline: 2px solid var(--sl-color-accent);
-    outline-offset: 0.15rem;
-  }
-
-  .keyed-figure__caption-text::before {
-    content: ' — ';
+    outline-offset: 2px;
   }
 
-  @media print {
-    .keyed-figure__number {
-      color: inherit;
-    }
-
-    .keyed-figure__title-anchor {
-      display: none;
+  @media (scripting: none) {
+    .keyed-figure__tools-summary {
+      display: list-item;
+      font-size: var(--sl-text-sm);
+      font-weight: 600;
     }
 
-    /* The disclosure triangle (Starlight's summary::before) is meaningless
-       once printed content is forced open below. */
-    .keyed-figure__summary::before {
+    .keyed-figure__tools-stub,
+    :global(.keyed-figure__tools-toggle) {
       display: none !important;
     }
+  }
 
-    /* A closed <details> hides its non-summary children via the UA
-       stylesheet; force the body and caption visible regardless of
-       on-screen state so a collapsed figure still prints its content. */
-    .keyed-figure__body,
-    .keyed-figure__caption {
-      display: block !important;
+  /* Print and export show a lab as its LaTeX figure: the picture and the
+     caption, live clause included. The tools never print
+     (`../disclosure/print-as-shown.ts` leaves their `<details>` alone). */
+  @media print {
+    .keyed-figure__tools-fold,
+    .keyed-figure__tools-stub {
+      display: none !important;
     }
   }
 </style>
 
 <script>
-  import { wirePersistedDetails } from '../disclosure/persisted-disclosure';
-  import { attachHoverPeek, closeHoverPeek } from '../disclosure/hover-preview';
+  import { wireFigureTools } from './figure-tools';
 
   document
-    .querySelectorAll<HTMLDetailsElement>(
-      '.keyed-figure__details:not([data-figure-wired])',
-    )
-    .forEach((details) => {
-      details.dataset.figureWired = 'true';
-      const figure = details.closest<HTMLElement>('.keyed-figure');
-      if (!figure || !figure.id) return;
-
-      // The SSR-rendered `open` attribute already carries the author's
-      // `defaultOpen` prop verbatim — read it before anything below mutates
-      // `.open`, rather than threading the prop value through a second data
-      // attribute.
-      const defaultOpen = details.open;
-      if (details.dataset.rememberState === 'true') {
-        wirePersistedDetails(details, `figure:${figure.id}`, defaultOpen);
-      }
-
-      const summary = details.querySelector<HTMLElement>(
-        ':scope > summary',
-      );
-
-      // Deep-linking to this figure (from a `[[fig-key]]` jump or a shared
-      // URL) must reveal it even if a reader had left it collapsed — the
-      // figure's id lives on the always-visible <figure>, not on the
-      // <details> itself, so the browser's native :target reveal doesn't
-      // apply here and this has to be done by hand.
-      const openIfTargeted = () => {
-        if (location.hash === `#${figure.id}`) details.open = true;
-      };
-      openIfTargeted();
-      window.addEventListener('hashchange', openIfTargeted);
-
-      if (!summary) return;
-
-      // The peek is only useful while collapsed — once expanded, the real
-      // content is already on screen right below the title bar, and duping
-      // it into a floating box would just be noise. `attachHoverPeek` itself
-      // doesn't know about "collapsed", so gate it here: a capture-order
-      // listener added *before* the wiring call runs first on the same
-      // element and can suppress the event before `attachHoverPeek`'s own
-      // handler sees it.
-      const suppressWhenOpen = (event: Event) => {
-        if (details.open) event.stopImmediatePropagation();
-      };
-      summary.addEventListener('pointerenter', suppressWhenOpen);
-      summary.addEventListener('focus', suppressWhenOpen);
-
-      // Expanding while the peek is still showing (hover, then click to
-      // open without the pointer ever leaving) would otherwise leave a now-
-      // redundant preview floating over the real content that just
-      // appeared underneath it.
-      details.addEventListener('toggle', () => {
-        if (details.open) closeHoverPeek(summary);
-      });
-
-      // The caption now lives in the <figcaption> after <details>, not
-      // inside the summary — query it from the figure, not the summary.
-      const captionText =
-        figure.querySelector('.keyed-figure__caption-text')?.textContent ??
-        '';
-      attachHoverPeek(summary, {
-        label: `Figure ${figure.dataset.figNumber ?? ''} preview`,
-        getContent: () => {
-          const wrap = document.createElement('div');
-          const strong = document.createElement('strong');
-          strong.textContent = `Figure ${figure.dataset.figNumber ?? ''}`;
-          wrap.append(strong, document.createTextNode(` — ${captionText}`));
-          return wrap;
-        },
-      });
+    .querySelectorAll<HTMLElement>('.keyed-figure[data-fig-tools]:not([data-fig-tools-wired])')
+    .forEach((figure) => {
+      figure.dataset.figToolsWired = 'true';
+      wireFigureTools(figure);
     });
 </script>

package/src/components/figure/FloatCaption.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * The caption line of a `<Figure>` or a `<Diagram>`
+ * (docs/plans/figures-and-short-captions.md, decisions 1 and 4). One
+ * anatomy, below the picture, the LaTeX figure convention:
+ *
+ *   Figure 2.2.1  [chain]  **‹short›.** ‹caption› ‹live end›   [buttons]
+ *
+ * The number links to the float, the chain icon copies that link
+ * (`HeadingAnchorEnhancer.astro` reads `data-copy-link`) and then navigates
+ * the same way, and the caption is the float's one long caption. A float
+ * with a short caption opens the caption with it as a bold title,
+ * `b.float-caption__title` (decision 9.1), outside `.float-caption__text`, so
+ * a reader of the long caption (a preview card, a fold's bar) still reads
+ * it alone. The line
+ * closes the figure and is never the thing that hides: a figure is always
+ * its picture and then this line. To fold a float away completely, wrap it
+ * in a `<Fold>` or put it in a collapsible section.
+ *
+ * A host's buttons (a diagram's widen ↔, the fold of a lab's tools) go in
+ * the default slot, rendered inside a `.float-tools` span at the end of the
+ * line — the boxed row a table's caption has (`global.css`). A float with no
+ * buttons has no row, even when the host passes an empty slot.
+ *
+ * `live` adds the line's live end: an empty
+ * `span.float-caption__state[data-figure-state]` after the caption, outside
+ * `.float-caption__text`, where a lab states the case its plot shows
+ * (`./figure-state.ts`).
+ */
+import { captionTitle } from '../float-name';
+
+export interface Props {
+  /** The reader-facing kind word: `Figure`, `Diagram`. */
+  kind: string;
+  /** Class prefix of the host component, e.g. `keyed-figure` → `keyed-figure__number`. */
+  prefix: string;
+  /** The float's long caption. */
+  caption: string;
+  /** Its short caption, shown as the line's bold title. */
+  short?: string;
+  /** Its anchor id (`fig-…`, `dia-…`). */
+  anchorId: string;
+  /** Its number; an unnumbered float shows none. */
+  number?: string;
+  /** An id for the caption text, for a control inside the body to be named by. */
+  textId?: string;
+  /** Give the line a live end a lab writes into (`./figure-state.ts`). */
+  live?: boolean;
+}
+
+const { kind, prefix, caption, short, anchorId, number, textId, live = false } = Astro.props;
+const name = number ? `${kind} ${number}` : kind.toLowerCase();
+const tools = Astro.slots.has('default') ? (await Astro.slots.render('default')).trim() : '';
+---
+
+<figcaption class:list={['float-caption', `${prefix}__caption`]} data-float-name={name}>
+  {
+    number && (
+      <a
+        class:list={['float-caption__number', `${prefix}__number`]}
+        href={`#${anchorId}`}
+        aria-label={name}
+      >
+        {name}
+      </a>
+    )
+  }
+  <a
+    class="float-caption__anchor"
+    href={`#${anchorId}`}
+    aria-label={`Copy the link to ${name}`}
+    title="Copy link"
+    data-copy-link={name}
+  >
+    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+      ><path
+        d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"
+      ></path></svg
+    >
+  </a>
+  {short && <b class="float-caption__title">{captionTitle(short)}</b>}{short && ' '}<span
+    class:list={['float-caption__text', `${prefix}__caption-text`]}
+    id={textId}
+    >{caption}</span
+  >{live && <span class="float-caption__state" data-figure-state />}
+  {tools && <span class="float-tools" set:html={tools} />}
+</figcaption>