@pnx-mixtape/mxds 0.1.0-rc.1 → 0.1.0-rc.2

package/src/Atom/DefinitionList/definition-list.twig

@@ -1,4 +1,9 @@
+{% if columns %}
+  {% set class = "mx-list--columns" %}
+{% elseif summary %}
+  {% set class = "mx-list--summary" %}
+{% endif %}
 {% set attributes = attributes ?? create_attribute() %}
-<dl{{ attributes }}>
+<dl{{ attributes.addClass(class) }}>
   {{ items }}
 </dl>

package/src/Atom/Heading/Heading.tsx

@@ -42,6 +42,12 @@ const Heading = ({
 
   useEffect(() => {
     if (anchor || !ref.current) return
+    if (ref.current.id) {
+      // Adopt an id already set externally (e.g. by InPageNavigation's dedup logic)
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+      setAnchor(ref.current.id)
+      return
+    }
     // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setAnchor(makeAnchor(ref.current?.textContent))
   }, [anchor, ref])

package/src/Atom/Heading/_headings.css

@@ -14,10 +14,11 @@
     h6,
     .mx-heading--xs
   ) {
-    font-family: var(--heading-font-family, var(--font-family));
+    font-family: var(--heading-font-family, var(--font-family-display, var(--font-family)));
     line-height: var(--line-height-h);
     font-size: var(--heading-font-size, var(--font-size));
     font-weight: var(--heading-font-weight, var(--font-weight-bold));
+    letter-spacing: var(--heading-letter-spacing, 0);
     text-wrap: balance;
 
     &[class*="mx-background--"] {

package/src/Atom/Icon/_extended-set.css

@@ -4,34 +4,34 @@
  * Icon - Extended
  */
 @layer design-system.atoms {
-  @mixin icon attachment;
-  @mixin icon blockquote;
-  @mixin icon building;
-  @mixin icon calendar;
-  @mixin icon clock;
-  @mixin icon globe;
-  @mixin icon heart-selected;
-  @mixin icon heart-unselected;
-  @mixin icon image;
-  @mixin icon home;
-  @mixin icon lock;
-  @mixin icon login;
-  @mixin icon media-play;
-  @mixin icon media-pause;
-  @mixin icon media-stop;
-  @mixin icon media-next;
-  @mixin icon media-previous;
-  @mixin icon media-rewind;
-  @mixin icon media-skip;
-  @mixin icon more;
-  @mixin icon notification;
-  @mixin icon pencil;
-  @mixin icon restart;
-  @mixin icon settings;
-  @mixin icon star-selected;
-  @mixin icon star-unselected;
-  @mixin icon tick;
-  @mixin icon trash;
-  @mixin icon user;
-  @mixin icon video;
+  @add-mixin icon attachment;
+  @add-mixin icon blockquote;
+  @add-mixin icon building;
+  @add-mixin icon calendar;
+  @add-mixin icon clock;
+  @add-mixin icon globe;
+  @add-mixin icon heart-selected;
+  @add-mixin icon heart-unselected;
+  @add-mixin icon image;
+  @add-mixin icon home;
+  @add-mixin icon lock;
+  @add-mixin icon login;
+  @add-mixin icon media-play;
+  @add-mixin icon media-pause;
+  @add-mixin icon media-stop;
+  @add-mixin icon media-next;
+  @add-mixin icon media-previous;
+  @add-mixin icon media-rewind;
+  @add-mixin icon media-skip;
+  @add-mixin icon more;
+  @add-mixin icon notification;
+  @add-mixin icon pencil;
+  @add-mixin icon restart;
+  @add-mixin icon settings;
+  @add-mixin icon star-selected;
+  @add-mixin icon star-unselected;
+  @add-mixin icon tick;
+  @add-mixin icon trash;
+  @add-mixin icon user;
+  @add-mixin icon video;
 }

package/src/Atom/Icon/_icon.css

@@ -38,42 +38,42 @@
     }
   }
 
-  @mixin icon arrow-down;
-  @mixin icon arrow-left;
-  @mixin icon arrow-up;
-  @mixin icon arrow-right;
-  @mixin icon chevron-down;
-  @mixin icon chevron-left;
-  @mixin icon chevron-right;
-  @mixin icon chevron-up;
-  @mixin icon close;
-  @mixin icon collapse;
-  @mixin icon download;
-  @mixin icon drupal;
-  @mixin icon error;
-  @mixin icon expand;
-  @mixin icon external-link;
-  @mixin icon facebook;
-  @mixin icon google;
-  @mixin icon info;
-  @mixin icon instagram;
-  @mixin icon linkedin;
-  @mixin icon mastodon;
-  @mixin icon bluesky;
-  @mixin icon menu;
-  @mixin icon search;
-  @mixin icon success;
-  @mixin icon twitter;
-  @mixin icon warning;
-  @mixin icon youtube;
-  @mixin icon email;
-  @mixin icon file;
-  @mixin icon link;
-  @mixin icon phone;
-  @mixin icon pin;
-  @mixin icon print;
-  @mixin icon question;
-  @mixin icon share;
+  @add-mixin icon arrow-down;
+  @add-mixin icon arrow-left;
+  @add-mixin icon arrow-up;
+  @add-mixin icon arrow-right;
+  @add-mixin icon chevron-down;
+  @add-mixin icon chevron-left;
+  @add-mixin icon chevron-right;
+  @add-mixin icon chevron-up;
+  @add-mixin icon close;
+  @add-mixin icon collapse;
+  @add-mixin icon download;
+  @add-mixin icon drupal;
+  @add-mixin icon error;
+  @add-mixin icon expand;
+  @add-mixin icon external-link;
+  @add-mixin icon facebook;
+  @add-mixin icon google;
+  @add-mixin icon info;
+  @add-mixin icon instagram;
+  @add-mixin icon linkedin;
+  @add-mixin icon mastodon;
+  @add-mixin icon bluesky;
+  @add-mixin icon menu;
+  @add-mixin icon search;
+  @add-mixin icon success;
+  @add-mixin icon twitter;
+  @add-mixin icon warning;
+  @add-mixin icon youtube;
+  @add-mixin icon email;
+  @add-mixin icon file;
+  @add-mixin icon link;
+  @add-mixin icon phone;
+  @add-mixin icon pin;
+  @add-mixin icon print;
+  @add-mixin icon question;
+  @add-mixin icon share;
 
   .mx-icon--status::before {
     mask-image: url("./images/info.svg");

package/src/Atom/Image/README.md

@@ -76,8 +76,8 @@ The template always wraps the image in a `<picture>` element so multiple `source
 
 ```css
 figcaption {
-  --caption-font-size: var(--font-size-s);
-  --caption-line-height: var(--line-height);
+  --font-size-ui: var(--font-size-s);
+  --line-height-ui: var(--line-height);
 }
 ```
 

package/src/Atom/Image/_image.css

@@ -1,16 +1,22 @@
 @layer design-system.defaults {
   figure {
     margin: 0;
-    display: table;
-    inline-size: fit-content;
+    display: block;
+    inline-size: var(--width, 100%);
+
+    & :is(picture, img, iframe, video) {
+      inline-size: 100%;
+    }
   }
 
   figcaption {
+    margin-block-start: var(--spacing-xs);
     padding: var(--spacing-xxs);
-    font-size: var(--caption-font-size, var(--font-size-xs));
-    line-height: var(--caption-line-height, var(--line-height-h));
-    caption-side: bottom;
-    display: table-caption;
+    font-family: var(--font-family-ui, var(--font-family));
+    font-size: var(--font-size-ui, var(--font-size-xs));
+    line-height: var(--line-height-ui, var(--line-height-h));
+    color: var(--colour-foreground-alt);
+    display: block;
   }
 
   img {

package/src/Atom/List/List.stories.ts

@@ -0,0 +1,102 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./list.twig"
+import "./_list.css"
+import { ListStyles } from "../../enums"
+
+type ListProps = {
+  ordered?: boolean
+  modifier?: ListStyles
+  items: string
+}
+
+const meta: Meta<ListProps> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    items: [
+      "<li>Content can be grouped into lists, but they don't need to look like lists.</li>",
+      "<li>Items can be <i>ordered</i> or <i>unordered</i>.</li>",
+    ].join(""),
+  },
+  argTypes: {
+    items: {
+      description:
+        "A concatenated string of pre-rendered `<li>` markup — built at the call site, no `for` loop.",
+      type: {
+        name: "other",
+        required: true,
+        value: "string",
+      },
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    ordered: {
+      description: "Renders `<ol>` instead of `<ul>`.",
+      control: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    modifier: {
+      description: "One of `mx-list--notes`, `mx-list--refs`, `mx-list--stats`.",
+      control: "select",
+      options: Object.values(ListStyles),
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<ListProps>
+
+export const List: Story = {}
+
+export const Ordered: Story = {
+  args: {
+    ordered: true,
+  },
+}
+
+export const Columns: Story = {
+  args: {
+    modifier: ListStyles.COLUMNS,
+    items: [
+      "<li>Content can be grouped into lists, but they don't need to look like lists.</li>",
+      "<li>Items can be <i>ordered</i> or <i>unordered</i>. They can even be arranged in columns.</li>",
+      "<li>Columns will fit what they can in the space available, without squishing the content.</li>",
+    ].join(""),
+  },
+}
+
+export const Notes: Story = {
+  args: {
+    ordered: true,
+    modifier: ListStyles.NOTES,
+    items: [
+      "<li>The 1974 plates were flown for cadastral purposes and the coastal strip sits at the edge of the block; horizontal control there is weaker than the epoch RMSE in Table 1 implies. <a href=#fnref1>↩</a></li>",
+      "<li>A partial budget was attempted in the 1996 council survey but excluded fluvial supply entirely, treating the embayment as closed. <a href=#fnref2>↩</a></li>",
+    ].join(""),
+  },
+}
+
+export const Refs: Story = {
+  args: {
+    ordered: true,
+    modifier: ListStyles.REFS,
+    items: [
+      "<li>Ashworth, P. and Delacroix, M. (2021) ‘Photogrammetric shoreline reconstruction from legacy cadastral plates’, <i>Journal of Coastal Survey</i>, 44(2), pp. 118–139.</li>",
+      "<li>Bruun, P. (1962) ‘Sea-level rise as a cause of shore erosion’, <i>Journal of the Waterways and Harbors Division</i>, 88(1), pp. 117–130.</li>",
+    ].join(""),
+  },
+}
+
+export const Stats: Story = {
+  args: {
+    modifier: ListStyles.STATS,
+    items: [
+      "<li><strong>1,024</strong> downloads</li>",
+      "<li><strong>98%</strong> uptime</li>",
+      "<li><strong>4.9</strong> average rating</li>",
+    ].join(""),
+  },
+}

package/src/Atom/List/List.stories.tsx

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./List"
+import "./_list.css"
+import { Page } from "../../../.storybook-react/decorators"
+import { ListStyles } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  decorators: [Page],
+  args: {
+    children: (
+      <>
+        <li>Content can be grouped into lists, but they don't need to look like lists.</li>
+        <li>
+          Items can be <i>ordered</i> or <i>unordered</i>.
+        </li>
+      </>
+    ),
+  },
+}
+
+export default meta
+export const List: StoryObj<typeof meta> = {}
+
+export const Ordered: StoryObj<typeof meta> = {
+  args: {
+    ordered: true,
+  },
+}
+
+export const Columns: StoryObj<typeof meta> = {
+  args: {
+    modifier: ListStyles.COLUMNS,
+    children: (
+      <>
+        <li>Content can be grouped into lists, but they don't need to look like lists.</li>
+        <li>
+          Items can be <i>ordered</i> or <i>unordered</i>. They can event be arranged in columns.
+        </li>
+        <li>
+          Columns will fit what they can in the space available, without squishing the content.
+        </li>
+      </>
+    ),
+  },
+}
+
+export const Notes: StoryObj<typeof meta> = {
+  args: {
+    ordered: true,
+    modifier: ListStyles.NOTES,
+    children: (
+      <>
+        <li>
+          The 1974 plates were flown for cadastral purposes and the coastal strip sits at the edge
+          of the block; horizontal control there is weaker than the epoch RMSE in Table 1 implies.
+        </li>
+        <li>
+          A partial budget was attempted in the 1996 council survey but excluded fluvial supply
+          entirely, treating the embayment as closed.
+        </li>
+      </>
+    ),
+  },
+}
+
+export const Refs: StoryObj<typeof meta> = {
+  args: {
+    ordered: true,
+    modifier: ListStyles.REFS,
+    children: (
+      <>
+        <li>
+          Ashworth, P. and Delacroix, M. (2021) ‘Photogrammetric shoreline reconstruction from
+          legacy cadastral plates’, <i>Journal of Coastal Survey</i>, 44(2), pp. 118–139.
+        </li>
+        <li>
+          Bruun, P. (1962) ‘Sea-level rise as a cause of shore erosion’,{" "}
+          <i>Journal of the Waterways and Harbors Division</i>, 88(1), pp. 117–130.
+        </li>
+      </>
+    ),
+  },
+}
+
+export const Stats: StoryObj<typeof meta> = {
+  args: {
+    modifier: ListStyles.STATS,
+    children: (
+      <>
+        <li>
+          <strong>1,024</strong> downloads
+        </li>
+        <li>
+          <strong>98%</strong> uptime
+        </li>
+        <li>
+          <strong>4.9</strong> average rating
+        </li>
+      </>
+    ),
+  },
+}

package/src/Atom/List/List.tsx

@@ -0,0 +1,22 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { ListStyles } from "../../enums"
+
+type ListProps = PropsWithChildren & {
+  ordered?: boolean
+  modifier?: ListStyles
+  className?: string
+}
+
+const List = ({
+  children,
+  ordered = false,
+  modifier = null,
+  className = null,
+}: ListProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${ordered ? "ol" : "ul"}` as unknown as JSX.ElementType
+
+  return <Tag className={classNames("mx-list", modifier, className)}>{children}</Tag>
+}
+
+export default List

package/src/Atom/List/README.md

@@ -0,0 +1,150 @@
+# List
+
+A styled `<ul>`/`<ol>` for basic content lists. Renders as a marker-free, gapped grid by default, with footnote, reference, stat-grid, and column-grid variants.
+
+---
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/List/_list.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Atom/List/list.twig' with {
+  items: ['<li>First item</li>', '<li>Second item</li>'].join(''),
+} %}
+
+{% include '@mixtape/Atom/List/list.twig' with {
+  ordered: true,
+  modifier: 'mx-list--notes',
+  items: ['<li>First footnote</li>', '<li>Second footnote</li>'].join(''),
+} %}
+```
+
+**list.twig props:**
+
+| Prop         | Type         | Required | Description                                                                                                                                                                                                                                            |
+| ------------ | ------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `items`      | `string`     | Yes      | Pre-joined `<li>` markup — build each `<li>` at the call site and join, no `for` loop                                                                                                                                                                  |
+| `ordered`    | `boolean`    | No       | Renders `<ol>` instead of `<ul>` (default `false`)                                                                                                                                                                                                     |
+| `modifier`   | `ListStyles` | No       | One of `mx-list--notes`, `mx-list--refs`, `mx-list--stats`, `mx-list--columns` — see [Modifiers](#modifiers). `ListStyles.SUMMARY` also lives in this enum but only applies to `DefinitionList`'s `<dl>`, not this component — see that atom's README. |
+| `attributes` | `Attribute`  | No       | Optional Drupal-style attributes object applied to the root `<ul>`/`<ol>`                                                                                                                                                                              |
+
+---
+
+## HTML
+
+```html
+<ul class="mx-list">
+  <li>First item</li>
+  <li>Second item</li>
+</ul>
+
+<ol class="mx-list mx-list--notes">
+  <li>First footnote</li>
+  <li>Second footnote</li>
+</ol>
+```
+
+The base `mx-list` class always renders without visual markers — items lay out as a gapped grid rather than a classic bulleted/numbered block list. Use `ordered: true` when the sequence itself is meaningful, since that's preserved via native list semantics even though no marker is drawn.
+
+---
+
+## React
+
+```tsx
+import { List } from "@pnx-mixtape/mxds/react"
+import { ListStyles } from "../../enums"
+
+<List>
+  <li>First item</li>
+  <li>Second item</li>
+</List>
+
+<List ordered modifier={ListStyles.NOTES}>
+  <li>First footnote</li>
+  <li>Second footnote</li>
+</List>
+```
+
+**`List` props:**
+
+| Prop        | Type         | Default | Description                                                                                                                        |
+| ----------- | ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `ordered`   | `boolean`    | `false` | Renders `<ol>` instead of `<ul>`                                                                                                   |
+| `modifier`  | `ListStyles` | —       | One of `ListStyles.NOTES`, `.REFS`, `.STATS`, `.COLUMNS` (`.SUMMARY` is also in this enum but is for `DefinitionList`, not `List`) |
+| `className` | `string`     | —       | Extra class on the root                                                                                                            |
+| `children`  | `ReactNode`  | —       | `<li>` elements — pass native `<li>` tags directly                                                                                 |
+
+### React ⇄ Twig parity
+
+- List items are plain `<li>` with no component-specific classes or attributes, so there is no `ListItem` sub-component in either stack. Twig takes a pre-joined string of already-rendered `<li>...</li>` markup (built at the call site); React takes native `<li>` children directly.
+
+---
+
+## Modifiers
+
+`ListStyles` enum values, applied alongside the base `mx-list` class:
+
+| Class              | `ListStyles` value | Effect                                                                                                                                                                                                                                                                                                    |
+| ------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mx-list--notes`   | `NOTES`            | Adds a numbered footnote-style counter before each `<li>` (`1.`, `2.`, …)                                                                                                                                                                                                                                 |
+| `mx-list--refs`    | `REFS`             | Hanging-indents wrapped lines so reference text aligns                                                                                                                                                                                                                                                    |
+| `mx-list--stats`   | `STATS`            | Lays items out as a responsive grid — wrap the number in `<strong>` or `<b>`                                                                                                                                                                                                                              |
+| `mx-list--columns` | `COLUMNS`          | Lays items out as a responsive multi-column grid, without the stat number styling                                                                                                                                                                                                                         |
+| `mx-list--summary` | `SUMMARY`          | **`DefinitionList` only** — a 2/3-column term/value/action row layout with dividers, for a "review your answers" pattern. Does nothing on `List`'s `<ul>`/`<ol>` since it targets `<dl><div><dt>/<dd></div></dl>` markup — see [`DefinitionList`'s README](../DefinitionList/README.md#summary-modifier). |
+
+```html
+<ul class="mx-list mx-list--stats">
+  <li><strong>1,024</strong> downloads</li>
+  <li><strong>98%</strong> uptime</li>
+</ul>
+
+<ul class="mx-list mx-list--columns">
+  <li>Content can be grouped into lists, but they don't need to look like lists.</li>
+  <li>Items can be ordered or unordered. They can even be arranged in columns.</li>
+</ul>
+```
+
+`mx-list--stats` and `mx-list--columns` share the same responsive grid tokens:
+
+```css
+.mx-list--stats,
+.mx-list--columns {
+  --grid-repeat: auto-fit; /* grid-template-columns repeat count */
+  --grid-min: 20ch; /* minimum column width before wrapping */
+  --grid-gap: var(--gap); /* gap between items, wider on large viewports via --large-grid-gap */
+}
+```
+
+---
+
+## Accessibility
+
+- The root renders as a real `<ul>`/`<ol>`, so assistive tech announces item count and (for `<ol>`) position — use `ordered: true` when the sequence itself is meaningful (e.g. ranked or step-like content).
+- `mx-list--notes`'s numbered counter is generated by a CSS `::before` pseudo-element and is decorative only, not exposed to assistive tech. It is safe to pair with `<ol>` (`ordered: true`) so the numbering is also available to screen readers via native list semantics.
+- The base `mx-list` class removes the visual marker (`list-style: none`) on every variant — the semantic list role is preserved regardless, since removing markers via CSS does not affect the accessibility tree.
+
+---
+
+## Customisation
+
+```css
+.mx-list--stats {
+  --stat-font-size: var(--font-size-xxl); /* size of the <strong>/<b> number in each item */
+  --stat-font-weight: var(--font-weight-bold); /* weight of the <strong>/<b> number */
+}
+
+.mx-list--stats,
+.mx-list--columns {
+  --grid-repeat: auto-fit; /* grid-template-columns repeat count */
+  --grid-min: 20ch; /* minimum column width before wrapping */
+  --grid-gap: var(--gap); /* gap between items */
+  --large-grid-gap: var(--gap-l); /* gap between items at the --large-up breakpoint */
+}
+```

package/src/Atom/List/__snapshots__/List.stories.ts.snap

@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Columns 1`] = `
+"<ul class="mx-list mx-list--columns">
+  <li>Content can be grouped into lists, but they don't need to look like lists.</li><li>Items can be <i>ordered</i> or <i>unordered</i>. They can even be arranged in columns.</li><li>Columns will fit what they can in the space available, without squishing the content.</li>
+</ul>
+"
+`;
+
+exports[`List 1`] = `
+"<ul class="mx-list">
+  <li>Content can be grouped into lists, but they don't need to look like lists.</li><li>Items can be <i>ordered</i> or <i>unordered</i>.</li>
+</ul>
+"
+`;
+
+exports[`Notes 1`] = `
+"<ol class="mx-list mx-list--notes">
+  <li>The 1974 plates were flown for cadastral purposes and the coastal strip sits at the edge of the block; horizontal control there is weaker than the epoch RMSE in Table 1 implies. <a href="#fnref1">↩</a></li><li>A partial budget was attempted in the 1996 council survey but excluded fluvial supply entirely, treating the embayment as closed. <a href="#fnref2">↩</a></li>
+</ol>
+"
+`;
+
+exports[`Ordered 1`] = `
+"<ol class="mx-list">
+  <li>Content can be grouped into lists, but they don't need to look like lists.</li><li>Items can be <i>ordered</i> or <i>unordered</i>.</li>
+</ol>
+"
+`;
+
+exports[`Refs 1`] = `
+"<ol class="mx-list mx-list--refs">
+  <li>Ashworth, P. and Delacroix, M. (2021) ‘Photogrammetric shoreline reconstruction from legacy cadastral plates’, <i>Journal of Coastal Survey</i>, 44(2), pp. 118–139.</li><li>Bruun, P. (1962) ‘Sea-level rise as a cause of shore erosion’, <i>Journal of the Waterways and Harbors Division</i>, 88(1), pp. 117–130.</li>
+</ol>
+"
+`;
+
+exports[`Stats 1`] = `
+"<ul class="mx-list mx-list--stats">
+  <li><strong>1,024</strong> downloads</li><li><strong>98%</strong> uptime</li><li><strong>4.9</strong> average rating</li>
+</ul>
+"
+`;

package/src/Atom/List/__snapshots__/List.stories.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Columns 1`] = `"<ul class="mx-list mx-list--columns"><li>Content can be grouped into lists, but they don't need to look like lists.</li><li>Items can be <i>ordered</i> or <i>unordered</i>. They can event be arranged in columns.</li><li>Columns will fit what they can in the space available, without squishing the content.</li></ul>"`;
+
+exports[`List 1`] = `"<ul class="mx-list"><li>Content can be grouped into lists, but they don't need to look like lists.</li><li>Items can be <i>ordered</i> or <i>unordered</i>.</li></ul>"`;
+
+exports[`Notes 1`] = `"<ol class="mx-list mx-list--notes"><li>The 1974 plates were flown for cadastral purposes and the coastal strip sits at the edge of the block; horizontal control there is weaker than the epoch RMSE in Table 1 implies.</li><li>A partial budget was attempted in the 1996 council survey but excluded fluvial supply entirely, treating the embayment as closed.</li></ol>"`;
+
+exports[`Ordered 1`] = `"<ol class="mx-list"><li>Content can be grouped into lists, but they don't need to look like lists.</li><li>Items can be <i>ordered</i> or <i>unordered</i>.</li></ol>"`;
+
+exports[`Refs 1`] = `"<ol class="mx-list mx-list--refs"><li>Ashworth, P. and Delacroix, M. (2021) ‘Photogrammetric shoreline reconstruction from legacy cadastral plates’, <i>Journal of Coastal Survey</i>, 44(2), pp. 118–139.</li><li>Bruun, P. (1962) ‘Sea-level rise as a cause of shore erosion’, <i>Journal of the Waterways and Harbors Division</i>, 88(1), pp. 117–130.</li></ol>"`;
+
+exports[`Stats 1`] = `"<ul class="mx-list mx-list--stats"><li><strong>1,024</strong> downloads</li><li><strong>98%</strong> uptime</li><li><strong>4.9</strong> average rating</li></ul>"`;