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

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.stories.ts

@@ -8,6 +8,7 @@ import "./Elements/AccordionGroup"
 import "./Elements/AccordionMobile"
 import "./accordion.css"
 import { Accordion as AccordionType, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<AccordionType> = {
   tags: ["autodocs", "ids-mvp"],
@@ -87,6 +88,36 @@ export const ToggleAll: Story = {
   },
 }
 
+/**
+ * Steps a virtual screen reader through the page with one item open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const summary = canvas.getByText("Music")
+    const [accordion] = canvas.getAllByRole("group")
+
+    await userEvent.click(summary)
+    await expect(accordion).toHaveAttribute("open")
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "heading, Accordion group, level 2",
+      "group",
+      "Music",
+      "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      "end of group",
+      "group",
+      "Performances",
+      "end of group",
+      "end of document",
+    ])
+
+    await userEvent.click(summary)
+    await expect(accordion).not.toHaveAttribute("open")
+  },
+}
+
 export const Test: Story = {
   parameters: {
     docs: {

package/src/Component/Accordion/Accordion.tsx

@@ -1,6 +1,7 @@
-import { JSX, PropsWithChildren, useEffect, useId, createContext, use, useMemo } from "react"
+import { JSX, PropsWithChildren, useId, createContext, use, useMemo } from "react"
 import classNames from "classnames"
 import { useDisclosureState } from "react-stately"
+import useIsomorphicLayoutEffect from "../../Utility/Hooks/useIsomorphicLayoutEffect"
 
 type AccordionContextValues = {
   toggle: (value?: boolean) => void
@@ -28,7 +29,7 @@ const Accordion = ({
   const rId = useId()
   const accordionId: string = id || rId
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (typeof window === "undefined") return
     if (window.location.hash && window.location.hash === `#${accordionId}`) {
       expand()

package/src/Component/Accordion/AccordionItem.stories.ts

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import { expect } from "storybook/test"
 import { modes } from "../../../.storybook/modes"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 import Component from "./accordion-item.twig"
 import AccordionMobile from "./twig/accordion-mobile.twig"
 import AccordionDiv from "./twig/accordion-div.twig"
@@ -72,6 +73,32 @@ type Story = StoryObj<AccordionItemType>
 
 export const AccordionItem: Story = {}
 
+/**
+ * Steps a virtual screen reader through the page with the item open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const summary = canvas.getByText("Music")
+    const accordion = canvas.getByRole("group")
+
+    await userEvent.click(summary)
+    await expect(accordion).toHaveAttribute("open")
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "group",
+      "Music",
+      "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      "end of group",
+      "end of document",
+    ])
+
+    await userEvent.click(summary)
+    await expect(accordion).not.toHaveAttribute("open")
+  },
+}
+
 /**
  * Open by default accordion.
  */

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

@@ -72,6 +72,42 @@ exports[`Default Open 1`] = `
 "
 `;
 
+exports[`Screen Reader Announcements 1`] = `
+"<div class="mx-accordions">
+            <div class="mx-accordion__title">
+        
+<h2>Accordion group</h2>
+
+              </div>
+    
+<mx-accordion>
+  <details class="mx-accordion mx-accordion--divided" id="music">
+    <summary class="mx-accordion__toggle">
+      Music
+      <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+    <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+      I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+    </div>
+  </details>
+</mx-accordion>
+
+<mx-accordion>
+  <details class="mx-accordion mx-accordion--divided" id="performances">
+    <summary class="mx-accordion__toggle">
+      Performances
+      <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+    <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+      I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+    </div>
+  </details>
+</mx-accordion>
+
+  </div>
+"
+`;
+
 exports[`Test 1`] = `
 "<div class="mx-accordions">
     <mx-accordion-group>

package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap

@@ -59,3 +59,19 @@ exports[`Open 1`] = `
 </mx-accordion>
 "
 `;
+
+exports[`Screen Reader Announcements 1`] = `
+"
+<mx-accordion>
+  <details class="mx-accordion mx-accordion--divided" id="music-accordion">
+    <summary class="mx-accordion__toggle">
+      Music
+      <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+    <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+      I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+    </div>
+  </details>
+</mx-accordion>
+"
+`;

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/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap

@@ -7,22 +7,19 @@ exports[`Breadcrumb 1`] = `
           <li>
 <a href="#">
   
-  <span>Home</span>
-    
+  Home  
 </a>
 </li>
           <li>
 <a href="#">
   
-  <span>About</span>
-    
+  About  
 </a>
 </li>
           <li>  
 <a href="#" aria-current="page">
   
-  <span>Join the team</span>
-    
+  Join the team  
 </a>
 </li>
       </ul>

package/src/Component/Breadcrumb/breadcrumb.css

@@ -1,3 +1,5 @@
+@import "../../Utility/_mixins.css";
+
 /**
  * Breadcrumb Navigation
  */
@@ -35,6 +37,8 @@
         block-size: var(--spacing-m);
         inline-size: var(--spacing-m);
         background-color: currentcolor;
+
+        @add-mixin forced-colors-paint;
       }
     }
 

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

@@ -14,8 +14,7 @@ exports[`Block Link 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -44,8 +43,7 @@ exports[`Card 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -66,7 +64,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>
 
@@ -75,8 +73,7 @@ exports[`Collapse 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -97,7 +94,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>
 
@@ -106,8 +103,7 @@ exports[`Date 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -141,8 +137,7 @@ exports[`Icon Tile 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -165,8 +160,7 @@ exports[`Reverse 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -195,8 +189,7 @@ exports[`Tile 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -221,24 +214,21 @@ exports[`With Link List 1`] = `
   
 <li><a href="#">
   
-  <span>Link one</span>
-    
+  Link one  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link two</span>
-    
+  Link two  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link three</span>
-    
+  Link three  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
@@ -286,8 +276,7 @@ exports[`With Tags 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>

package/src/Component/Card/card.css

@@ -145,8 +145,8 @@
       }
     }
 
-    &:has(a .sr-only:only-child) {
-      & a {
+    &:has(a[aria-label]) {
+      & a:not(:has(.mx-icon)) {
         margin-block-start: calc(var(--flow-gap, var(--gap)) * -1);
       }
 

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 %}