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

package/src/Form/form.css

@@ -1,3 +1,5 @@
+@import "../Utility/_mixins.css";
+
 /**
  * Form
  */
@@ -7,7 +9,8 @@
     max-inline-size: var(--container-max-width);
 
     &:has([required]) :is(.mx-label, .mx-legend) {
-      &:is(::after, .mx-required) {
+      &::after,
+      & > .mx-required {
         color: var(--colour-error);
       }
     }
@@ -65,6 +68,15 @@
     &[disabled] {
       opacity: var(--disabled-opacity, 0.6);
       cursor: not-allowed;
+
+      @media (--forced-colors) {
+        /* opt out so GrayText survives */
+        forced-color-adjust: none;
+        opacity: 1;
+        color: GrayText;
+        border-color: GrayText;
+        background-color: Canvas;
+      }
     }
   }
 
@@ -160,6 +172,7 @@
       background-color: transparent;
       border: 0;
       flex-grow: 1;
+      inline-size: 100%;
 
       &:focus-visible {
         outline: none;
@@ -198,6 +211,7 @@
   .mx-checkbox [type="checkbox"] {
     box-shadow: none;
     appearance: none;
+    display: flex;
     inline-size: var(--control-size, var(--spacing-m));
     block-size: var(--control-size, var(--spacing-m));
     background-color: var(--background, var(--colour-background));
@@ -205,30 +219,48 @@
     border-radius: var(--border-radius);
     font-size: 1rem;
 
-    @media (pointer: coarse) {
+    @media (--touch) {
       --control-size: 2rem;
     }
 
-    &:checked {
-      background-image: url("./images/checkmark.svg");
-      background-size: 0.75rem;
-      background-position: center;
+    &:checked::after {
+      content: "";
+      display: block;
+      inline-size: 0.75rem;
+      block-size: 0.75rem;
+      margin: auto;
+      mask-image: url("./images/checkmark.svg");
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      background-color: var(--checkbox-colour, currentcolor);
+
+      @add-mixin forced-colors-paint;
     }
 
     &[disabled] {
-      &::after {
-        opacity: var(--disabled-opacity, 0.6);
-        cursor: not-allowed;
-        content: "";
-        display: block;
-        inline-size: 100%;
-        block-size: 100%;
-        border-radius: var(--border-radius);
-      }
+      cursor: not-allowed;
 
       & + label {
         opacity: var(--disabled-opacity, 0.6);
         cursor: not-allowed;
+
+        @media (--forced-colors) {
+          /* opt out or the UA forces this straight back to CanvasText */
+          forced-color-adjust: none;
+          opacity: 1;
+          color: GrayText;
+        }
+      }
+
+      @media (--forced-colors) {
+        /* opt out so GrayText survives */
+        --forced-colour: GrayText;
+
+        forced-color-adjust: none;
+        color: GrayText;
+        border-color: GrayText;
+        background-color: Canvas;
       }
     }
   }
@@ -254,36 +286,45 @@
     border-radius: 50%;
     font-size: 1rem;
 
-    @media (pointer: coarse) {
+    @media (--touch) {
       --control-size: 2rem;
     }
 
-    &:checked {
-      &::after {
-        content: "";
-        display: block;
-        inline-size: 0.5rem;
-        block-size: 0.5rem;
-        margin: auto;
-        border-radius: 50%;
-        background-color: var(--radio-colour, var(--colour-primary));
-      }
+    &:checked::after {
+      content: "";
+      display: block;
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      margin: auto;
+      border-radius: 50%;
+      background-color: var(--radio-colour, var(--colour-primary));
+
+      @add-mixin forced-colors-paint;
     }
 
     &[disabled] {
-      &::after {
-        opacity: var(--disabled-opacity, 0.6);
-        cursor: not-allowed;
-        content: "";
-        display: block;
-        inline-size: 100%;
-        block-size: 100%;
-        border-radius: 50%;
-      }
+      cursor: not-allowed;
 
       & + label {
         opacity: var(--disabled-opacity, 0.6);
         cursor: not-allowed;
+
+        @media (--forced-colors) {
+          /* opt out or the UA forces this straight back to CanvasText */
+          forced-color-adjust: none;
+          opacity: 1;
+          color: GrayText;
+        }
+      }
+
+      @media (--forced-colors) {
+        /* opt out so GrayText survives */
+        --forced-colour: GrayText;
+
+        forced-color-adjust: none;
+        color: GrayText;
+        border-color: GrayText;
+        background-color: Canvas;
       }
     }
   }
@@ -467,12 +508,25 @@
       }
     }
 
+    /* A <select> has no pseudo-element to mask, and the chevron asset is a
+       fixed black, so on the legacy path hand the arrow back to the UA under
+       forced colours. The base-select path masks ::picker-icon instead. */
+    @supports not (appearance: base-select) {
+      @media (--forced-colors) {
+        appearance: auto;
+        background-image: none;
+        padding-inline-end: revert;
+      }
+    }
+
     &::picker-icon {
       mask-image: url("./images/form-chevron-down.svg");
       mask-repeat: no-repeat;
       mask-position: center;
       background-color: currentcolor;
       aspect-ratio: 1 / 1;
+
+      @add-mixin forced-colors-paint;
     }
 
     &:open::picker-icon {
@@ -486,6 +540,8 @@
       display: block;
       mask-image: url("./images/checkmark.svg");
       background-color: currentcolor;
+
+      @add-mixin forced-colors-paint;
     }
 
     &[multiple] {
@@ -606,11 +662,15 @@
   .mx-error-message::before {
     mask-image: url("./images/form-error.svg");
     background-color: var(--error-foreground, var(--colour-error));
+
+    @add-mixin forced-colors-paint;
   }
 
   .mx-success-message::before {
     mask-image: url("./images/form-success.svg");
     background-color: var(--success-foreground, var(--colour-success));
+
+    @add-mixin forced-colors-paint;
   }
 }
 

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -78,28 +78,25 @@ exports[`Everything 1`] = `
   
   <nav class="mx-social-links" aria-label="Social media links">
   
-  
-<a href="#">
+        
+<a href="#" aria-label="Facebook">
   
 <span class="mx-icon mx-icon--facebook mx-icon--size-md"></span>
 
-  <span class="sr-only">Facebook</span>
     
 </a>
-
-<a href="#">
+      
+<a href="#" aria-label="Instagram">
   
 <span class="mx-icon mx-icon--instagram mx-icon--size-md"></span>
 
-  <span class="sr-only">Instagram</span>
     
 </a>
-
-<a href="#">
+      
+<a href="#" aria-label="LinkedIn">
   
 <span class="mx-icon mx-icon--linkedin mx-icon--size-md"></span>
 
-  <span class="sr-only">LinkedIn</span>
     
 </a>
 
@@ -112,14 +109,12 @@ exports[`Everything 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -169,14 +164,12 @@ exports[`Footer 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -226,14 +219,12 @@ exports[`Light 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -283,14 +274,12 @@ exports[`No Logo 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -313,14 +302,12 @@ exports[`No Menu 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -371,14 +358,12 @@ exports[`With Acknowledgment 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>

package/src/Layout/Grid/Grid.stories.ts

@@ -54,6 +54,7 @@ const meta: Meta<GridType> = {
     chromatic: {
       modes: {
         mobile: modes["xs"],
+        ipad: modes["md"],
         desktop: modes["xl"],
       },
     },

package/src/Layout/Grid/Grid.stories.tsx

@@ -102,6 +102,32 @@ export const Container: Story = {
     ],
   },
 }
+/**
+ * Uses the experimental CSS Grid Lanes `display: grid-lanes` to pack items
+ * into the shortest column (masonry/waterfall), instead of the default
+ * row-by-row grid. Falls back to the regular auto-fit grid in browsers
+ * without support.
+ * @see https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/
+ */
+export const Masonry: Story = {
+  args: {
+    className: "mx-grid--masonry",
+    children: [
+      { value: "Short item" },
+      {
+        value:
+          "A taller item with more content, showing how Grid Lanes packs items into the shortest column instead of a fixed row height.",
+      },
+      { value: "Medium length item with a little more text than the short one." },
+      { value: "Short" },
+      {
+        value: "Another tall item demonstrating the waterfall packing behaviour of CSS Grid Lanes.",
+      },
+      { value: "Tiny" },
+    ],
+  },
+}
+
 export const List: Story = {
   render: ({ children, ...args }) => (
     <Component wrapper as={SectionTypes.LIST} {...args}>

package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap

@@ -9,3 +9,5 @@ exports[`Dynamic 1`] = `"<div class="mx-grid"><div class="">1</div><div class=""
 exports[`Fixed 1`] = `"<div class="mx-grid mx-grid--cols-md-3"><div class="mx-grid-item__span-md-2">1</div><div class="">2</div></div>"`;
 
 exports[`List 1`] = `"<ul class="mx-grid mx-grid--cols-md-3"><li class="mx-grid-item__span-md-2">1</li><li class="">2</li></ul>"`;
+
+exports[`Masonry 1`] = `"<div class="mx-grid mx-grid--masonry"><div class="">Short item</div><div class="">A taller item with more content, showing how Grid Lanes packs items into the shortest column instead of a fixed row height.</div><div class="">Medium length item with a little more text than the short one.</div><div class="">Short</div><div class="">Another tall item demonstrating the waterfall packing behaviour of CSS Grid Lanes.</div><div class="">Tiny</div></div>"`;

package/src/Layout/Grid/grid.css

@@ -103,6 +103,18 @@
   .mx-grid--collapse-rows {
     row-gap: 0;
   }
+
+  /**
+   * Experimental: CSS Grid Lanes masonry (waterfall). Falls back to the
+   * standard auto-fit/auto-fill grid above until browser support lands.
+   * https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/
+   */
+  .mx-grid--masonry {
+    @supports (display: grid-lanes) {
+      display: grid-lanes;
+      grid-template-rows: none;
+    }
+  }
 }
 
 /**

package/src/Layout/Header/Header.stories.ts

@@ -18,6 +18,7 @@ import "../../Component/Navigation/Elements/Navigation"
 // css.
 import "../../Component/Navigation/navigation.css"
 import { modes } from "../../../.storybook/modes"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 type MxHeaderType = Omit<HeaderType, "controls"> & {
   stacked: boolean
@@ -117,6 +118,38 @@ export const Header: Story = {
   },
 }
 
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "banner",
+      "image, Mixtape",
+      "navigation, Primary navigation",
+      "list",
+      "listitem, level 1, position 1, set size 4",
+      "link, News",
+      "end of listitem, level 1, position 1, set size 4",
+      "listitem, level 1, position 2, set size 4",
+      "link, About us",
+      "end of listitem, level 1, position 2, set size 4",
+      "listitem, level 1, position 3, set size 4",
+      "link, Contact",
+      "end of listitem, level 1, position 3, set size 4",
+      "listitem, level 1, position 4, set size 4",
+      "link, Resources",
+      "end of listitem, level 1, position 4, set size 4",
+      "end of list",
+      "end of navigation, Primary navigation",
+      "end of banner",
+      "end of document",
+    ])
+  },
+}
+
 export const WithTitle: Story = {
   args: {
     title: "Design System",

package/src/Layout/Header/Header.stories.tsx

@@ -4,6 +4,7 @@ import Component from "./Header"
 import { mixtapeLogo, navigationItems } from "../../../mockups/constants"
 import "./header.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   decorators: [Page],
@@ -45,3 +46,33 @@ export const PrimaryHeader: StoryObj<typeof meta> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "banner",
+      "image, Mixtape",
+      "navigation, Primary Navigation",
+      "list",
+      "listitem, level 1, position 1, set size 3",
+      "link, Home",
+      "button, Sub-navigation, not expanded",
+      "end of listitem, level 1, position 1, set size 3",
+      "listitem, level 1, position 2, set size 3",
+      "link, About",
+      "end of listitem, level 1, position 2, set size 3",
+      "listitem, level 1, position 3, set size 3",
+      "link, Contact",
+      "end of listitem, level 1, position 3, set size 3",
+      "end of list",
+      "end of navigation, Primary Navigation",
+      "end of banner",
+      "end of document",
+    ])
+  },
+}

package/src/Layout/Header/__snapshots__/Header.stories.ts.snap

@@ -72,6 +72,56 @@ exports[`Header 1`] = `
               <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle">
             
 
+<mx-nav flyout="">
+    <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
+            News
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            About us
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Contact
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Resources
+          </a>
+                      </li>
+      </ul>
+
+  </nav>
+  </mx-nav>
+
+        </div>
+                          
+          </div>
+  </div>
+</header>
+"
+`;
+
+exports[`Screen Reader Announcements 1`] = `
+"<header class="mx-header mx-page mx-section--s">
+  <div class="mx-header__inner">
+          <div class="mx-header__brand">
+        <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
+
+              </div>
+            <div class="mx-header__toggles">
+                    <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
+          </div>
+        <div class="mx-header__main">
+              <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle">
+            
+
 <mx-nav flyout="">
     <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
         <ul class="mx-nav__level-1">

package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Primary Header 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_0_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_0_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_1_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_7_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_7_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_8_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;

package/src/Layout/Header/_header.css

@@ -5,15 +5,17 @@
 @layer design-system.layouts {
   .mx-header__inner {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: minmax(var(--brand-logo-width, 120px), 1fr) auto;
     align-items: center;
+    gap: var(--header-gap, var(--spacing-xxxs));
   }
 
   .mx-header__brand {
     display: flex;
-    gap: var(--brand-gap, var(--gap));
+    gap: var(--brand-gap, var(--spacing-xxxs) var(--gap));
     align-items: center;
     margin-inline-end: auto;
+    flex-wrap: wrap;
   }
 
   .mx-header__name {

package/src/Layout/Header/_toggles.css

@@ -1,6 +1,7 @@
 /**
  * Global Header
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.layouts {
   .mx-header__toggles {
@@ -9,6 +10,7 @@
     padding-inline-end: 2px;
     position: relative;
     z-index: var(--toggle-index, 3);
+    align-self: var(--toggle-align, start);
 
     @media (--global-nav-up) {
       display: none;
@@ -24,8 +26,9 @@
   }
 
   .mx-header__collapse-toggle {
+    @add-mixin transition;
+
     inline-size: 100%;
-    opacity: 1;
     display: grid;
     position: fixed;
     z-index: var(--collapse-index, 2);