@pnx-mixtape/mxds 0.1.0-rc.4 → 0.1.0-rc.6

package/src/Component/BackToTop/README.md

@@ -0,0 +1,164 @@
+# BackToTop
+
+A trigger that appears once the reader has scrolled past a threshold and jumps back to a target
+element on the page. Shows/hides itself via `IntersectionObserver`, and manages focus and
+reduced-motion-aware smooth scrolling when activated.
+
+---
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Component/BackToTop/back-to-top.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Component/BackToTop/back-to-top.twig' with {
+  href: '#main',
+  title: 'Back to top',
+} %}
+
+{# Watch a specific element (e.g. the page's <h1>) instead of a scroll distance #}
+{% include '@mixtape/Component/BackToTop/back-to-top.twig' with {
+  target: '#page-title',
+  href: '#main',
+} %}
+```
+
+**back-to-top.twig props:**
+
+| Prop           | Type        | Default       | Description                                                                                                  |
+| -------------- | ----------- | ------------- | ------------------------------------------------------------------------------------------------------------ |
+| `href`         | `string`    | `#main`       | Scroll destination — a same-page hash                                                                        |
+| `title`        | `string`    | `Back to top` | Trigger label                                                                                                |
+| `target`       | `string`    | —             | CSS selector of an element to observe — visible once it scrolls above the viewport top                       |
+| `visibleAfter` | `string`    | `100vh`       | Distance down the page before the trigger appears. Only used when `target` is unset                          |
+| `offset`       | `number`    | —             | Pixel offset to avoid overlapping another fixed element (e.g. a sticky CTA bar). Sets `--back-to-top-offset` |
+| `breakpoint`   | `string`    | —             | `l` restricts display to the large breakpoint and up. Omit to show at all viewport sizes                     |
+| `attributes`   | `Attribute` | —             | Optional Drupal-style attributes object — modifier classes are merged on top                                 |
+
+---
+
+## HTML + Web Component
+
+```html
+<mx-back-to-top class="mx-back-to-top" target="#page-title">
+  <a class="mx-button mx-button--light mx-button--small mx-back-to-top__trigger" href="#main">
+    <span class="mx-icon mx-icon--arrow-up"></span>
+    <span>Back to top</span>
+  </a>
+</mx-back-to-top>
+```
+
+Registers as `<mx-back-to-top>`. Import the element to activate its behaviour:
+
+```js
+import "@pnx-mixtape/mxds/src/Component/BackToTop/Elements/BackToTop"
+```
+
+**`<mx-back-to-top>` attributes:**
+
+| Attribute      | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------------------- |
+| `target`       | CSS selector of an element to observe — visible once it scrolls above the viewport top                |
+| `visibleafter` | Distance down the page before the trigger appears (default `100vh`). Used only when `target` is unset |
+
+If no `target` is set, visibility is driven by a plain scroll-position check instead (`window.scrollY` compared against `visibleafter`, resolved from a `px` or `vh` value) rather than an `IntersectionObserver` — this avoids depending on the host page's containing-block/positioning context, which a synthetic absolutely-positioned sentinel would be sensitive to.
+
+**Behaviour on click:** the Web Component intercepts the click, scrolls the destination into view
+(`behavior: smooth`, or `auto` when `prefers-reduced-motion: reduce`), temporarily makes the
+destination focusable if it isn't already (`tabindex="-1"`, removed again on blur), moves focus
+to it, and updates the URL hash via `history.pushState` — all without a full native anchor jump,
+so the smooth scroll and reduced-motion behaviour are never a race against the browser's own
+default jump.
+
+**Event:**
+
+```js
+document.querySelector("mx-back-to-top").addEventListener("back-to-top-toggle", e => {
+  console.log(e.detail.isVisible) // true when the trigger becomes visible, false when it hides
+})
+```
+
+---
+
+## React
+
+```tsx
+import { BackToTop } from "@pnx-mixtape/mxds/react"
+
+<BackToTop />
+
+// Watch a specific element instead of a scroll distance
+<BackToTop target="#page-title" href="#main" />
+
+// Desktop-only, offset to avoid overlapping a sticky CTA bar
+<BackToTop breakpoint="l" offset={56} />
+```
+
+**`BackToTop` props:**
+
+| Prop              | Type                           | Default       | Description                                                                            |
+| ----------------- | ------------------------------ | ------------- | -------------------------------------------------------------------------------------- |
+| `to`              | `string`                       | `#main`       | Scroll destination — a same-page hash                                                  |
+| `title`           | `string`                       | `Back to top` | Trigger label                                                                          |
+| `target`          | `string`                       | —             | CSS selector of an element to observe — visible once it scrolls above the viewport top |
+| `visibleAfter`    | `string`                       | `100vh`       | Distance down the page before the trigger appears. Only used when `target` is unset    |
+| `offset`          | `number`                       | —             | Pixel offset to avoid overlapping another fixed element. Sets `--back-to-top-offset`   |
+| `breakpoint`      | `"l"`                          | —             | Restrict display to the large breakpoint and up. Omit to show at all viewport sizes    |
+| `className`       | `string`                       | —             | Extra class on the root                                                                |
+| `onVisibleChange` | `(isVisible: boolean) => void` | —             | Called whenever the visible state changes. React analogue of `back-to-top-toggle`      |
+
+---
+
+## Modifiers
+
+| CSS class           | React `breakpoint` | Behaviour                                                   |
+| ------------------- | ------------------ | ----------------------------------------------------------- |
+| `mx-back-to-top`    | `undefined`        | Visible (once scrolled) at all viewport sizes               |
+| `mx-back-to-top--l` | `"l"`              | Visible (once scrolled) only at the large breakpoint and up |
+
+---
+
+### React ⇄ Twig parity
+
+`onVisibleChange` has no Twig equivalent — Twig/HTML has no concept of a function prop. The
+`<mx-back-to-top>` Web Component dispatches a `back-to-top-toggle` `CustomEvent` instead; listen
+for it if you need the same notification outside React.
+
+---
+
+## Accessibility
+
+- The trigger is a real `<a href>` (via the `Button` atom, `as: 'link'`) and is always visible,
+  in the tab order, and keyboard-activatable **without JavaScript**. The scroll-gated show/hide
+  behaviour is only switched on once JS has confirmed it can drive it — the Web Component adds
+  an `is-enhanced` class in `connectedCallback`, and React (which always has JS) adds it
+  unconditionally — so a blocked or failed script load can never leave the trigger permanently
+  hidden or unreachable.
+- On activation, focus is moved to the scroll destination. If the destination isn't natively
+  focusable, a temporary `tabindex="-1"` is added and removed again once it loses focus — this
+  fixes a common gap where a plain anchor jump scrolls the page but leaves screen reader focus
+  behind.
+- Smooth scrolling respects `prefers-reduced-motion: reduce` (falls back to an instant jump).
+- Hidden from print via `@media print`.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-back-to-top {
+  --back-to-top-gap: 64px; /* distance from the bottom of the viewport */
+  --back-to-top-offset: 0; /* additional offset, e.g. to clear a sticky CTA bar */
+  --back-to-top-inline-end: var(--spacing-m); /* distance from the side of the viewport */
+  --back-to-top-z-index: 10;
+}
+```
+
+The React component writes `--back-to-top-offset` as an inline style from the `offset` prop. In
+HTML/Twig, pass `offset` (which sets it inline) or override any of these in your own CSS.

package/src/Component/BackToTop/__snapshots__/BackToTop.stories.ts.snap

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Back To Top 1`] = `
+"
+    <div style="block-size: 100px; padding-block-start: 2rem;">
+      <p>Scroll down to reveal the "Back to top" trigger.</p>
+    </div>
+    <div id="main" tabindex="-1">
+      <h2>Main content</h2>
+      <p>This is the scroll destination.</p>
+    </div>
+    
+<mx-back-to-top class="mx-back-to-top is-enhanced" visibleafter="1vh">
+    
+    <a class="mx-back-to-top__trigger mx-button--small mx-button mx-button--light" href="#main">
+      
+<span class="mx-icon mx-icon--arrow-up"></span>
+
+    Back to top    
+  </a>
+</mx-back-to-top>
+
+  "
+`;

package/src/Component/BackToTop/__snapshots__/BackToTop.stories.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Back To Top 1`] = `"<div style="block-size: 50vh; padding-block-start: 2rem;"><p>Scroll down to reveal the "Back to top" trigger.</p></div><div id="main" tabindex="-1"><h2>Main content</h2><p>This is the scroll destination.</p></div><div class="mx-back-to-top is-enhanced"><a href="#main" class="mx-button mx-back-to-top__trigger mx-button--small mx-button--light"><span class="mx-icon mx-icon--arrow-up"></span>Back to top</a></div>"`;

package/src/Component/BackToTop/back-to-top.css

@@ -0,0 +1,70 @@
+/**
+ * BackToTop
+ */
+
+@define-mixin back-to-top {
+  display: var(--back-to-top-display, none);
+  position: fixed;
+  inset-inline-end: var(--back-to-top-inline-end, var(--spacing-m));
+  inset-block-end: calc(
+    var(--back-to-top-gap, 64px) + var(--back-to-top-offset, var(--sticky-offset, 0px))
+  );
+  z-index: var(--back-to-top-z-index, 10);
+}
+
+@layer design-system.defaults {
+  mx-back-to-top {
+    display: block;
+  }
+}
+
+@layer design-system.components {
+  /* @public --back-to-top-gap --back-to-top-offset --back-to-top-inline-end --back-to-top-z-index */
+  .mx-back-to-top {
+    --back-to-top-display: block;
+
+    @add-mixin back-to-top;
+
+    @media print {
+      --back-to-top-display: none;
+    }
+  }
+
+  .mx-back-to-top--l {
+    @add-mixin back-to-top;
+
+    @media (--large-up) {
+      --back-to-top-display: block;
+    }
+
+    @media print {
+      --back-to-top-display: none;
+    }
+  }
+
+  /*
+   * Visibility is only gated behind scroll position once JS has confirmed it can drive it
+   * (`is-enhanced`, added by the Web Component/React on mount) — without JS the trigger stays
+   * visible and reachable at all times, rather than being permanently hidden by a script that
+   * failed to load.
+   */
+  :is(.mx-back-to-top, .mx-back-to-top--l).is-enhanced {
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      visibility 0s linear 300ms,
+      opacity 300ms;
+
+    @media (--reduce-motion) {
+      transition: none;
+    }
+
+    &.is-visible {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        visibility 0s linear 0s,
+        opacity 300ms;
+    }
+  }
+}

package/src/Component/BackToTop/back-to-top.entry.js

@@ -0,0 +1 @@
+import "./Elements/BackToTop"

package/src/Component/BackToTop/back-to-top.twig

@@ -0,0 +1,26 @@
+{% set baseClass = 'mx-back-to-top' %}
+{% set classes = [
+  baseClass,
+  breakpoint ? baseClass~"--"~breakpoint : null,
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set resolvedHref = href|default('#main') %}
+{% set resolvedTitle = title|default('Back to top') %}
+{% set arrowIcon %}
+  {% include '@mixtape/Atom/Icon/icon.twig' with { icon: 'arrow-up' } only %}
+{% endset %}
+
+<mx-back-to-top{{ attributes }}
+  {%- if target %} target="{{ target }}"{% endif -%}
+  {%- if visibleAfter %} visibleafter="{{ visibleAfter }}"{% endif -%}
+  {%- if offset %} style="--back-to-top-offset: {{ offset }}px"{% endif -%}
+>
+  {% include '@mixtape/Atom/Button/button.twig' with {
+    as: 'link',
+    href: resolvedHref,
+    title: resolvedTitle,
+    modifiers: ['light'],
+    iconStart: arrowIcon,
+    attributes: create_attribute().addClass(['mx-back-to-top__trigger', 'mx-button--small']),
+  } %}
+</mx-back-to-top>

package/src/Component/Card/Components/CardContent.tsx

@@ -2,7 +2,7 @@ import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 
 const CardContent = ({ children }: PropsWithChildren): JSX.Element => {
-  return <div className={classNames("mx-card__content", "mx-vertical-flow-flex")}>{children}</div>
+  return <div className={classNames("mx-card__content", "mx-vertical-flow")}>{children}</div>
 }
 
 export default CardContent

package/src/Component/Card/Components/CardMedia.tsx

@@ -8,7 +8,7 @@ type CardProps = PropsWithChildren & {
 const CardMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
   return (
     <figure className={classNames("mx-card__media", "stack")}>
-      {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}
+      {skeleton && <div className="skeleton skeleton--bg"></div>}
       {children}
     </figure>
   )

package/src/Component/Card/__snapshots__/Card.stories.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="skeleton skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="skeleton skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="skeleton skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;

package/src/Component/Card/card.css

@@ -88,7 +88,7 @@
         }
       }
 
-      & .mx-skeleton--bg {
+      & .skeleton--bg {
         grid-area: media;
       }
 

package/src/Component/Carousel/Carousel.stories.ts

@@ -292,6 +292,15 @@ export const Carousel: Story = {
 
 /**
  * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * How many tiles the IntersectionObserver marks visible (vs. `aria-hidden`)
+ * depends on the carousel's rendered width, which Chromatic varies via
+ * `chromatic.modes` (mobile and desktop). This branches on the real,
+ * observed visibility of the second tile rather than hardcoding one shape.
+ * Whichever mode a local run happens to render at, only one branch runs
+ * meaningfully for that run - the other is exercised by Chromatic's other
+ * mode in CI. See "Testing Mobile / matchMedia-Driven Behavior in Play
+ * Functions" in docs/Testing.md.
  */
 export const ScreenReaderAnnouncements: Story = {
   play: async ({ canvasElement }) => {
@@ -304,43 +313,64 @@ export const ScreenReaderAnnouncements: Story = {
       { timeout: 2000 },
     )
 
+    const onlyFirstTileVisible =
+      canvasElement.querySelector('[data-index="1"]')?.getAttribute("aria-hidden") === "true"
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "group, Quick page controls",
-      "button, previous page, disabled",
-      "button, next page",
-      "end of group, Quick page controls",
-      "article",
-      "heading, Tile 1, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "article",
-      "heading, Tile 2, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "article",
-      "heading, Tile 3, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "article",
-      "heading, Tile 4, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "end of document",
-    ])
+
+    if (onlyFirstTileVisible) {
+      await expect(log).toEqual([
+        "document",
+        "group, Quick page controls",
+        "button, previous page, disabled",
+        "button, next page",
+        "end of group, Quick page controls",
+        "article",
+        "heading, Tile 1, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "group, Quick page controls",
+        "button, previous page, disabled",
+        "button, next page",
+        "end of group, Quick page controls",
+        "article",
+        "heading, Tile 1, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "article",
+        "heading, Tile 2, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "article",
+        "heading, Tile 3, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "article",
+        "heading, Tile 4, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "end of document",
+      ])
+    }
   },
 }
 

package/src/Component/Carousel/__snapshots__/Carousel.stories.tsx.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Default 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_0_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
+exports[`Default 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_0_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_s_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
+exports[`Screen Reader Announcements 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_s_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
 
-exports[`With Counter 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_e_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="counter" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;
+exports[`With Counter 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_e_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="counter" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;
 
-exports[`With Loop 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_l_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
+exports[`With Loop 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_l_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
 
-exports[`With Pagination 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_7_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="pagination" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;
+exports[`With Pagination 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_7_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="pagination" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;

package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx

@@ -8,7 +8,7 @@ type CardProps = PropsWithChildren & {
 const ContentBlockMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
   return (
     <figure className={classNames("mx-content-block__media", "stack")}>
-      {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}
+      {skeleton && <div className="skeleton skeleton--bg"></div>}
       {children}
     </figure>
   )

package/src/Component/ContentBlock/content-block.css

@@ -25,7 +25,7 @@
       display: block;
     }
 
-    & .mx-skeleton--bg {
+    & .skeleton--bg {
       aspect-ratio: var(--ratio);
     }
   }