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

package/src/Atom/List/_list.css

@@ -0,0 +1,123 @@
+/**
+ * List
+ */
+
+@layer design-system.atoms {
+  .mx-list {
+    list-style: none;
+    margin-block: 0;
+    padding-inline-start: 0;
+    display: grid;
+    gap: var(--spacing-xxxs);
+    counter-reset: fn;
+
+    & li {
+      counter-increment: fn;
+      max-inline-size: var(--prose-measure, 70ch);
+    }
+  }
+
+  .mx-list--notes li {
+    position: relative;
+    padding-inline-start: var(--gap-l);
+    font-size: var(--list-font-size, var(--font-size-s));
+
+    &::before {
+      content: counter(fn) ".";
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block-start: 2px;
+      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);
+      font-variant-numeric: tabular-nums lining-nums;
+    }
+  }
+
+  .mx-list--refs li {
+    padding-inline-start: var(--gap-l);
+    text-indent: calc(var(--gap-l) * -1);
+    font-size: var(--list-font-size, var(--font-size-s));
+  }
+
+  .mx-list--stats {
+    /* @public --stat-font-size --stat-font-weight --grid-repeat --grid-min --grid-gap --large-grid-gap */
+    --font-size: var(--stat-font-size, var(--font-size-xxl));
+
+    grid-template-columns: repeat(
+      var(--grid-repeat, auto-fit),
+      minmax(min(100%, var(--grid-min, 20ch)), 1fr)
+    );
+    grid-template-rows: 1fr;
+    gap: var(--grid-gap, var(--gap));
+    font-size: var(--list-font-size, var(--font-size-s));
+    text-wrap: balance;
+
+    @media (--large-up) {
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
+    }
+
+    & :is(b, strong) {
+      font-family: var(--font-family-display, var(--font-family));
+      font-size: var(--font-size);
+      font-weight: var(--stat-font-weight, var(--font-weight-bold));
+      font-variant-numeric: tabular-nums lining-nums;
+      line-height: 1;
+      display: block;
+
+      @supports (font-size: 1cqi) {
+        --font-min: calc(var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3));
+
+        font-size: clamp(
+          max(var(--font-size-xs), var(--font-min)),
+          var(--font-min) + 1cqi,
+          var(--font-size)
+        );
+      }
+    }
+  }
+
+  .mx-list--columns {
+    /* @public --grid-repeat --grid-min --grid-gap --large-grid-gap */
+    grid-template-columns: repeat(
+      var(--grid-repeat, auto-fit),
+      minmax(min(100%, var(--grid-min, 20ch)), 1fr)
+    );
+    gap: var(--grid-gap, var(--gap));
+
+    @media (--large-up) {
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
+    }
+  }
+
+  .mx-list--summary {
+    /* @public --grid-min */
+    grid-template-columns: min(100%, var(--grid-min, 20ch)) 1fr auto;
+
+    & > div {
+      grid-template-columns: subgrid;
+      grid-column: span 3;
+      padding-block: var(--spacing-xs);
+      border-block-end: 1px solid var(--colour-border);
+
+      &:first-child {
+        border-block-start: 2px solid var(--colour-foreground);
+      }
+
+      @container (max-width: 60ch) {
+        grid-template-columns: 1fr auto;
+        grid-column: 1 / -1;
+
+        & > dt {
+          grid-column: 1 / -1;
+        }
+      }
+    }
+
+    & .mx-list__action {
+      text-align: end;
+      font-weight: var(--font-weight-bold);
+    }
+  }
+}

package/src/Atom/List/list.twig

@@ -0,0 +1,5 @@
+{% set as = ordered ? 'ol' : 'ul' %}
+{% set attributes = (attributes ?? create_attribute()).addClass(['mx-list', modifier]) %}
+<{{ as }}{{ attributes }}>
+  {{ items }}
+</{{ as }}>

package/src/Atom/Media/Media.stories.ts

@@ -16,7 +16,7 @@ const meta: Meta<MediaType> = {
       src: "https://picsum.photos/id/56/558/418?grayscale",
       alt: "Some blurry bubble image",
     }),
-    caption: "A picsum image",
+    caption: "<b>Figure 1.</b> A picsum image",
     type: "image",
   },
   argTypes: {

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

@@ -7,7 +7,7 @@ exports[`Attribution 1`] = `
     <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Some blurry bubble image">
 </picture>
 
-    <figcaption>A picsum image
+    <figcaption><b>Figure 1.</b> A picsum image
      -     Jane Doe  </figcaption>
   </figure>"
 `;
@@ -19,7 +19,7 @@ exports[`Media 1`] = `
     <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Some blurry bubble image">
 </picture>
 
-    <figcaption>A picsum image  </figcaption>
+    <figcaption><b>Figure 1.</b> A picsum image  </figcaption>
   </figure>"
 `;
 

package/src/Atom/Spacing/_spacing.css

@@ -21,18 +21,18 @@
     padding-inline-end: 0 !important;
   }
 
-  @mixin spacing xxs;
-  @mixin spacing xs;
-  @mixin spacing s;
-  @mixin spacing m;
-  @mixin spacing l;
-  @mixin spacing xl;
-  @mixin spacing xxl;
-  @mixin spacing xxxl;
-  @mixin spacing xxxxl;
-  @mixin spacing ul;
-  @mixin spacing uul;
-  @mixin spacing uuul;
+  @add-mixin spacing xxs;
+  @add-mixin spacing xs;
+  @add-mixin spacing s;
+  @add-mixin spacing m;
+  @add-mixin spacing l;
+  @add-mixin spacing xl;
+  @add-mixin spacing xxl;
+  @add-mixin spacing xxxl;
+  @add-mixin spacing xxxxl;
+  @add-mixin spacing ul;
+  @add-mixin spacing uul;
+  @add-mixin spacing uuul;
 
   .mx-margin--reset {
     margin: 0 !important;
@@ -54,16 +54,16 @@
     margin-inline-end: 0 !important;
   }
 
-  @mixin margin xxs;
-  @mixin margin xs;
-  @mixin margin s;
-  @mixin margin m;
-  @mixin margin l;
-  @mixin margin xl;
-  @mixin margin xxl;
-  @mixin margin xxxl;
-  @mixin margin xxxxl;
-  @mixin margin ul;
-  @mixin margin uul;
-  @mixin margin uuul;
+  @add-mixin margin xxs;
+  @add-mixin margin xs;
+  @add-mixin margin s;
+  @add-mixin margin m;
+  @add-mixin margin l;
+  @add-mixin margin xl;
+  @add-mixin margin xxl;
+  @add-mixin margin xxxl;
+  @add-mixin margin xxxxl;
+  @add-mixin margin ul;
+  @add-mixin margin uul;
+  @add-mixin margin uuul;
 }

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

@@ -31,7 +31,12 @@ exports[`Bordered 1`] = `
       <td>~500px</td>
     </tr>
   </tbody>
-  <caption>Description of table</caption>
+  <tfoot>
+    <tr>
+      <td colspan="5">Footnote for table</td>
+    </tr>
+  </tfoot>
+  <caption>Table 1. Description of table</caption>
 </table>
 "
 `;
@@ -67,7 +72,12 @@ exports[`Striped 1`] = `
       <td>~500px</td>
     </tr>
   </tbody>
-  <caption>Description of table</caption>
+  <tfoot>
+    <tr>
+      <td colspan="5">Footnote for table</td>
+    </tr>
+  </tfoot>
+  <caption>Table 1. Description of table</caption>
 </table>
 "
 `;
@@ -103,7 +113,12 @@ exports[`Striped And Bordered 1`] = `
       <td>~500px</td>
     </tr>
   </tbody>
-  <caption>Description of table</caption>
+  <tfoot>
+    <tr>
+      <td colspan="5">Footnote for table</td>
+    </tr>
+  </tfoot>
+  <caption>Table 1. Description of table</caption>
 </table>
 "
 `;
@@ -139,7 +154,12 @@ exports[`Table 1`] = `
       <td>~500px</td>
     </tr>
   </tbody>
-  <caption>Description of table</caption>
+  <tfoot>
+    <tr>
+      <td colspan="5">Footnote for table</td>
+    </tr>
+  </tfoot>
+  <caption>Table 1. Description of table</caption>
 </table>
 "
 `;

package/src/Atom/Table/_table.css

@@ -1,7 +1,9 @@
 @layer design-system.defaults {
   table {
+    font-size: var(--font-size-s);
     inline-size: 100%;
     border-collapse: collapse;
+    font-variant-numeric: tabular-nums lining-nums;
     margin: 0;
 
     & th {
@@ -12,20 +14,30 @@
     & :is(td, th) {
       padding: var(--spacing-xxs);
       border-block-end: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
+      font-family: var(--font-family-ui, var(--font-family));
       vertical-align: top;
     }
 
     & thead :is(td, th) {
-      border-block-end-color: currentcolor;
+      border-block-end: var(--line-width, 1.5px) solid currentcolor;
     }
 
     & caption {
       padding: var(--spacing-xxs);
       text-align: start;
-      font-size: var(--caption-font-size, var(--font-size-xs));
-      line-height: var(--caption-line-height, var(--line-height-h));
+      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);
       caption-side: bottom;
     }
+
+    & tfoot :is(td, th) {
+      border-block-start: var(--line-width, 1.5px) solid currentcolor;
+      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));
+    }
   }
 
   .mx-table--flush {

package/src/Atom/Table/table.twig

@@ -34,5 +34,10 @@
       <td>~500px</td>
     </tr>
   </tbody>
-  <caption>Description of table</caption>
+  <tfoot>
+    <tr>
+      <td colspan="5">Footnote for table</td>
+    </tr>
+  </tfoot>
+  <caption>Table 1. Description of table</caption>
 </table>

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

@@ -10,6 +10,7 @@ exports[`Center 1`] = `
 exports[`Example 1`] = `
 "<div class="mx-rich-text mx-vertical-flow"><p class="mx-text--eyebrow mx-text--embellished">Embellished eyebrow</p>
 <p class="mx-text--eyebrow">Normal eyebrow</p>
+<p class="mx-text--meta">Meta text</p>
 
 <p class="mx-text--xxxl">Text xxxl: Headliner size</p>
 <p class="mx-text--xxl">Text xxl: Heading 1 size</p>
@@ -26,9 +27,9 @@ exports[`Example 1`] = `
 <p class="mx-text--m mx-background--alt"><span>Background colours can be added combined with the text classes (and a span) to have inline backgrounds on text. <br>The background should wrap with the text when it folds instead of creating a rectangle.</span></p>
 <p class="mx-text--accent mx-background--reverse"><span>Text accent: Some colours need different backgrounds to ensure sufficient contrast.</span></p>
 
-<blockquote class="mx-vertical-flow-flex">
+<blockquote>
   <q class="mx-text--xxl mx-background--alt"><span>Blockquotes can be styled however <u>you</u> like</span></q>
-  <cite class="mx-text--s">Source: Rikki's infinite wisdom</cite>
+  <cite>Source: Rikki's infinite wisdom</cite>
 </blockquote>
 </div>"
 `;

package/src/Atom/Text/_text-styles.css

@@ -4,6 +4,7 @@
     .mx-text--section-headline,
     .mx-text--embellished-headline,
     .mx-text--lede,
+    .mx-text--meta,
     .mx-text--xs,
     .mx-text--s,
     .mx-text--m,
@@ -21,6 +22,7 @@
       .mx-text--eyebrow,
       .mx-text--section-headline,
       .mx-text--embellished-headline,
+      .mx-text--meta,
       .mx-text--xs,
       .mx-text--s,
       .mx-text--lede,
@@ -47,7 +49,8 @@
 
     text-transform: var(--heading-transform, uppercase);
     font-weight: var(--heading-font-weight, var(--font-weight-bold));
-    font-family: var(--heading-font-family);
+    font-family: var(--font-family-ui, var(--font-family));
+    letter-spacing: var(--heading-letter-spacing, 0);
     line-height: var(--line-height-h);
     text-wrap: balance;
   }
@@ -130,6 +133,15 @@
     --font-size: var(--font-size-xs);
   }
 
+  .mx-text--meta {
+    --font-size: var(--font-size-xs);
+    --foreground: var(--foreground-alt, var(--colour-foreground-alt));
+
+    color: var(--foreground);
+    display: grid;
+    gap: 0.2rem;
+  }
+
   .mx-text--alt {
     --foreground: var(--foreground-alt, var(--colour-foreground-alt));
 
@@ -162,4 +174,12 @@
       color-scheme: var(--scheme, var(--colour-scheme));
     }
   }
+
+  .mx-rich-text {
+    font-family: var(--font-family-prose, var(--font-family));
+
+    & :is(p, li) {
+      max-inline-size: var(--prose-measure, var(--container-max-width));
+    }
+  }
 }

package/src/Atom/Text/twig/text-styles-example.twig

@@ -1,5 +1,6 @@
 <p class="mx-text--eyebrow mx-text--embellished">Embellished eyebrow</p>
 <p class="mx-text--eyebrow">Normal eyebrow</p>
+<p class="mx-text--meta">Meta text</p>
 
 <p class="mx-text--xxxl">Text xxxl: Headliner size</p>
 <p class="mx-text--xxl">Text xxl: Heading 1 size</p>
@@ -16,7 +17,7 @@
 <p class="mx-text--m mx-background--alt"><span>Background colours can be added combined with the text classes (and a span) to have inline backgrounds on text. <br />The background should wrap with the text when it folds instead of creating a rectangle.</span></p>
 <p class="mx-text--accent mx-background--reverse"><span>Text accent: Some colours need different backgrounds to ensure sufficient contrast.</span></p>
 
-<blockquote class="mx-vertical-flow-flex">
+<blockquote>
   <q class="mx-text--xxl mx-background--alt"><span>Blockquotes can be styled however <u>you</u> like</span></q>
-  <cite class="mx-text--s">Source: Rikki's infinite wisdom</cite>
+  <cite>Source: Rikki's infinite wisdom</cite>
 </blockquote>

package/src/Atom/_base.css

@@ -54,3 +54,9 @@
  */
 
 @import "./Table/_table.css";
+
+/**
+ * List
+ */
+
+@import "./List/_list.css";

package/src/Atom/_flow.css

@@ -1,4 +1,4 @@
-@layer design-system.utilities {
+@layer design-system.defaults {
   .mx-vertical-flow {
     /* Default vertical flow. */
 

package/src/Atom/_generic.css

@@ -82,9 +82,9 @@
 
   dl {
     display: grid;
-    grid-template-columns: min(100%, var(--grid-min, 20ch)) 1fr;
     grid-template-rows: 1fr;
     gap: var(--spacing-xs);
+    inline-size: 100%;
 
     &:has(> div) {
       container-type: inline-size;
@@ -92,21 +92,28 @@
 
     & div {
       display: grid;
-      grid-template-columns: subgrid;
-      grid-column: span 2;
-
-      @container (max-width: 60ch) {
-        gap: var(--spacing-xxxs);
-
-        & > :is(dt, dd) {
-          grid-column: span 2;
-        }
-      }
+      gap: var(--spacing-xxxs);
+      align-content: start;
     }
 
     & dt {
       font-weight: var(--font-weight-bold);
     }
+
+    &:where(:not(.mx-list--columns)) {
+      grid-template-columns: min(100%, var(--grid-min, 20ch)) 1fr;
+
+      & div {
+        grid-template-columns: subgrid;
+        grid-column: span 2;
+
+        @container (max-width: 60ch) {
+          & > :is(dt, dd) {
+            grid-column: span 2;
+          }
+        }
+      }
+    }
   }
 
   p {

package/src/Component/Accordion/accordion.css

@@ -93,6 +93,8 @@
       justify-content: space-between;
       align-items: center;
       gap: var(--spacing-xxs);
+      font-size: var(--font-size);
+      font-weight: var(--font-weight-normal);
 
       & .mx-icon {
         margin-inline-start: auto;

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

@@ -66,7 +66,7 @@ exports[`Collapse 1`] = `
 <article class="mx-card mx-card--collapse">
     <div class="mx-card__content mx-vertical-flow-flex">
     
-          <div class="mx-text--s">25 May 2025</div>
+          <div class="mx-text--meta">25 May 2025</div>
         
 <h3>Card title</h3>
 
@@ -97,7 +97,7 @@ exports[`Date 1`] = `
 <article class="mx-card">
     <div class="mx-card__content mx-vertical-flow-flex">
     
-          <div class="mx-text--s">25 May 2025</div>
+          <div class="mx-text--meta">25 May 2025</div>
         
 <h3>Card title</h3>
 

package/src/Component/Card/card.twig

@@ -30,7 +30,7 @@
   <div class="mx-card__content mx-vertical-flow-flex">
     {{ tags }}
     {% if date is not empty %}
-      <div class="mx-text--s">{{ date }}</div>
+      <div class="mx-text--meta">{{ date }}</div>
     {% endif %}
     {{ title }}
     {% if content is not empty %}

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

@@ -236,6 +236,7 @@ type Story = StoryObj<CarouselType>
 
 export const Carousel: Story = {
   play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
     const next = await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
     // The custom element's IntersectionObserver populates its internal item
@@ -259,18 +260,22 @@ export const Carousel: Story = {
         },
         { timeout: 2000 },
       )
-      await userEvent.click(next)
-      await waitFor(
-        () => {
-          expect(back).not.toHaveAttribute("disabled")
-          expect(next).toHaveAttribute("disabled")
-        },
-        { timeout: 2000 },
-      )
+      if (!isMobile) {
+        await userEvent.click(next)
+        await waitFor(
+          () => {
+            expect(back).not.toHaveAttribute("disabled")
+            expect(next).toHaveAttribute("disabled")
+          },
+          { timeout: 2000 },
+        )
+      }
     })
     await step("Navigates back", async () => {
       await userEvent.click(back)
-      await userEvent.click(back)
+      if (!isMobile) {
+        await userEvent.click(back)
+      }
       await waitFor(
         () => {
           expect(back).toHaveAttribute("disabled")
@@ -390,6 +395,7 @@ export const Loop: Story = {
     loop: true,
   },
   play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
     const next = await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
     // The custom element's IntersectionObserver populates its internal item
@@ -421,22 +427,39 @@ export const Loop: Story = {
         },
         { timeout: 2000 },
       )
-      // With `loop`, `next` is never `disabled` at the end - the custom
-      // element instead marks it `data-restart` once its debounced scroll
-      // handler has confirmed the end was reached. Wait for that marker
-      // before the "Loops back" step's click, or it can race the debounce
-      // and request an out-of-range page.
-      await waitFor(() => expect(next).toHaveAttribute("data-restart"), { timeout: 2000 })
+      if (!isMobile) {
+        // With `loop`, `next` is never `disabled` at the end - the custom
+        // element instead marks it `data-restart` once its debounced scroll
+        // handler has confirmed the end was reached. Wait for that marker
+        // before the "Loops back" step's click, or it can race the debounce
+        // and request an out-of-range page.
+        await waitFor(() => expect(next).toHaveAttribute("data-restart"), { timeout: 2000 })
+      }
     })
     await step("Loops back", async () => {
-      await userEvent.click(next)
-      await waitFor(
-        () => {
-          expect(back).toHaveAttribute("disabled")
-          expect(next).not.toHaveAttribute("disabled")
-        },
-        { timeout: 2000 },
-      )
+      if (!isMobile) {
+        await userEvent.click(next)
+        await waitFor(
+          () => {
+            expect(back).toHaveAttribute("disabled")
+            expect(next).not.toHaveAttribute("disabled")
+          },
+          { timeout: 2000 },
+        )
+      } else {
+        // On mobile there's too many pages to click through to so we just
+        // click back instead to restore the initial state. The desktop
+        // test covers the loop functionality and the behaviour is the same.
+        await userEvent.click(back)
+        await userEvent.click(back)
+        await waitFor(
+          () => {
+            expect(back).toHaveAttribute("disabled")
+            expect(next).not.toHaveAttribute("disabled")
+          },
+          { timeout: 2000 },
+        )
+      }
       // Remove focus
       await userEvent.click(canvasElement)
     })

package/src/Component/DropMenu/Elements/DropMenu.ts

@@ -52,9 +52,10 @@ export default class DropMenu extends Popover {
       "keydown",
       (event: KeyboardEvent): void => {
         const { target, key } = event
+        const items = [...this.items]
         if (
           (target as HTMLElement) !== this.container &&
-          ![...this.items].includes(target as HTMLButtonElement | HTMLAnchorElement)
+          !items.includes(target as HTMLButtonElement | HTMLAnchorElement)
         )
           return
 
@@ -73,6 +74,14 @@ export default class DropMenu extends Popover {
             event.preventDefault()
             this.moveFocus(target as HTMLButtonElement | HTMLAnchorElement, -1)
             break
+          case "Home":
+            event.preventDefault()
+            items[0].focus()
+            break
+          case "End":
+            event.preventDefault()
+            items.at(-1).focus()
+            break
           default:
             // Let every other key (Tab, Escape, Space, ...) through - this
             // used to preventDefault unconditionally, which suppressed Tab

package/src/Component/InPageAlert/in-page-alert.css

@@ -14,11 +14,12 @@
     gap: var(--gap-s);
     padding-block: var(--spacing-xxs);
     padding-inline: var(--spacing-s);
-    border: 1px solid;
+    border: var(--line-width, 1px) solid;
     background-color: var(--background, var(--colour-background-alt));
     color: var(--foreground, var(--colour-foreground));
     color-scheme: var(--alert-scheme, light);
     border-radius: var(--border-radius);
+    align-items: start;
 
     &:has(.mx-icon--close) {
       grid-template-columns: auto min-content;