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

package/src/Component/Dialog/dialog.css

@@ -1,6 +1,7 @@
 /**
  * Dialog
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.defaults {
   mx-dialog {
@@ -10,6 +11,8 @@
 
 @layer design-system.components {
   .mx-dialog {
+    @add-mixin transition;
+
     inline-size: min(100%, var(--container-max-width));
     max-block-size: 90vh;
     overflow: auto hidden;
@@ -18,12 +21,12 @@
     border: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
     padding: 0;
     place-self: center;
-    opacity: 0;
     transform: translateY(100%);
 
     &::backdrop {
+      @add-mixin transition;
+
       background-color: hsl(0deg 0% 100% / 75%);
-      opacity: 0;
     }
 
     &[open] {

package/src/Component/DropMenu/DropMenu.stories.ts

@@ -21,6 +21,8 @@ type DropMenuType = {
   id?: string
   role?: "menu" | "tablist"
   placement?: PopoverPlacementModifier
+  description?: string
+  ariaLabel?: string
 }
 
 /**
@@ -38,6 +40,7 @@ const meta: Meta<DropMenuType> = {
       { label: "Stories", href: "#stories" },
     ],
     placement: PopoverPlacementModifier.BOTTOM_START,
+    description: "Results will update when you make a selection. Press escape to close.",
   },
   argTypes: {
     placement: {
@@ -75,6 +78,22 @@ const meta: Meta<DropMenuType> = {
       options: ["menu", "tablist"],
       type: "string",
     },
+    description: {
+      description:
+        "Screen-reader-only text describing the popover, announced via `aria-describedby` when it opens.",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    ariaLabel: {
+      description:
+        "Overrides the popover's accessible name. Defaults to the trigger button's `label` via `aria-labelledby`.",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
   },
 }
 
@@ -168,11 +187,11 @@ export const ScreenReaderAnnouncements: Story = {
     await expect(log).toEqual([
       "document",
       "button, Categories",
-      "menu, Categories, orientated vertically",
+      "menu, Categories, Results will update when you make a selection. Press escape to close., orientated vertically",
       "menuitemradio, News, not checked, position 1, set size 3",
       "menuitemradio, Events, not checked, position 2, set size 3",
       "menuitemradio, Stories, not checked, position 3, set size 3",
-      "end of menu, Categories, orientated vertically",
+      "end of menu, Categories, Results will update when you make a selection. Press escape to close., orientated vertically",
       "end of document",
     ])
 

package/src/Component/DropMenu/DropMenu.tsx

@@ -19,6 +19,7 @@ type DropMenuProps = PropsWithChildren & {
   popoverClassName?: string
   role?: "menu" | "tablist"
   ariaLabel?: string
+  triggerDescription?: string
   description?: string
 }
 
@@ -37,6 +38,7 @@ const DropMenu = ({
   popoverClassName,
   role = "menu",
   ariaLabel,
+  triggerDescription,
   description = "Results will update when you make a selection. Press escape to close.",
 }: DropMenuProps): JSX.Element => {
   const { dropMenuId, triggerId, descriptionId, popoverRef } = useDropMenuContext()
@@ -55,9 +57,20 @@ const DropMenu = ({
         className={classNames([...triggerClassNames, "mx-popover__trigger"])}
         popoverTarget={dropMenuId}
         style={triggerStyle}
+        aria-describedby={triggerDescription ? `${triggerId}-desc` : null}
       >
         {label}
       </button>
+      {triggerDescription && (
+        <span id={`${triggerId}-desc`} className="sr-only" aria-hidden="true">
+          {triggerDescription}
+        </span>
+      )}
+      {description && (
+        <span id={descriptionId} className="sr-only" aria-hidden="true">
+          {description}
+        </span>
+      )}
       <div
         id={dropMenuId}
         className={classNames("mx-popover mx-drop-menu", popoverClassName)}
@@ -66,12 +79,9 @@ const DropMenu = ({
         ref={popoverRef}
         aria-labelledby={ariaLabel ? null : triggerId}
         aria-label={ariaLabel}
-        aria-describedby={descriptionId}
+        aria-describedby={descriptionId ? descriptionId : null}
         role={role}
       >
-        <div id={descriptionId} className="sr-only" aria-hidden="true">
-          {description}
-        </div>
         <FocusScope>{children}</FocusScope>
       </div>
     </Container>

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

@@ -5,7 +5,7 @@ exports[`Buttons 1`] = `
 <button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
+<span id="unique-1" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-labelledby="unique-0" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
             <button type="button" data-id="news" role="menuitemradio" aria-checked="false">News</button>
                 <button type="button" data-id="events" role="menuitemradio" aria-checked="true">Events</button>
                 <button type="button" data-id="stories" role="menuitemradio" aria-checked="false">Stories</button>
@@ -19,7 +19,7 @@ exports[`Drop Menu 1`] = `
 <button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
+<span id="unique-1" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-labelledby="unique-0" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
             <a href="#news">News</a>
                 <a href="#events">Events</a>
                 <a href="#stories">Stories</a>
@@ -33,7 +33,7 @@ exports[`Screen Reader Announcements 1`] = `
 <button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
+<span id="unique-1" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-labelledby="unique-0" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
             <button type="button" data-id="news" role="menuitemradio" aria-checked="false">News</button>
                 <button type="button" data-id="events" role="menuitemradio" aria-checked="false">Events</button>
                 <button type="button" data-id="stories" role="menuitemradio" aria-checked="false">Stories</button>

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

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Drop Menu 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><div id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;
+exports[`Drop Menu 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><span id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><div id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;
+exports[`Screen Reader Announcements 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><span id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;

package/src/Component/DropMenu/drop-menu.twig

@@ -1,18 +1,24 @@
 <mx-dropmenu closeonclick>
 {% set id = id|default('dropdown-menu') %}
 {% set name = id ~ '-target' %}
+{% set triggerDescriptionId = name ~ '-descr' %}
+{% set descriptionId = name ~ '-description' %}
 <button
     id="{{ name }}"
     class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
     popovertarget="{{ id }}"
     style="anchor-name: --{{ id }}"
+    {% if triggerDescription %}aria-describedby="{{ triggerDescriptionId }}"{% endif %}
 >
   {{ label }}
 </button>
+{% if triggerDescription %}<span id="{{ triggerDescriptionId }}" class="sr-only" aria-hidden="true">{{ triggerDescription }}</span>{% endif %}
+{% if description %}<span id="{{ descriptionId }}" class="sr-only" aria-hidden="true">{{ description }}</span>{% endif %}
 <div
     class="mx-popover mx-drop-menu"
     id="{{ id }}"
-    aria-describedby="{{ name }}"
+    {% if ariaLabel %}aria-label="{{ ariaLabel }}"{% else %}aria-labelledby="{{ name }}"{% endif %}
+    {% if description %}aria-describedby="{{ descriptionId }}"{% endif %}
     style="position-anchor: --{{ id }}"
     data-placement="{{ placement|default('bottom-start') }}"
     popover

package/src/Component/GlobalAlert/global-alert.css

@@ -1,6 +1,7 @@
 /**
  * Messages
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.defaults {
   mx-closable-alert {
@@ -11,6 +12,8 @@
 @layer design-system.components {
   /* @public --alert-background --alert-foreground --alert-scheme */
   .mx-global-alert {
+    @add-mixin transition;
+
     background-color: var(--alert-background, var(--colour-primary-light));
     color: var(--alert-foreground, var(--colour-foreground));
     color-scheme: var(--alert-scheme, light);

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

@@ -2,6 +2,6 @@
 
 exports[`Hero Banner 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div></div>"`;
 
-exports[`Highlight 1`] = `"<div class="mx-page mx-hero-banner mx-background--primary mx-hero-banner--hero"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><button class="mx-button mx-button--dark" type="button">Button</button></div><div class="mx-hero-banner__aside mx-section--xl"><img alt="Blurry bubbles" src="https://picsum.photos/id/56/558/418?grayscale"></div></div></div>"`;
+exports[`Highlight 1`] = `"<div class="mx-page mx-hero-banner mx-background--primary mx-hero-banner--hero"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><button class="mx-button mx-button--dark" type="button"><span>Button</span></button></div><div class="mx-hero-banner__aside mx-section--xl"><img alt="Blurry bubbles" src="https://picsum.photos/id/56/558/418?grayscale"></div></div></div>"`;
 
 exports[`With Link List 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div><div class="mx-hero-banner__aside mx-section--xl"><h2 class="mx-heading--m" id="popular-links">Popular links</h2><ul class="mx-link-list"><li><a href="#1" class="mx-link">Page link #1<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#2" class="mx-link">Page link #2<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#3" class="mx-link">Page link #3<span class="mx-icon mx-icon--chevron-right"></span></a></li></ul></div></div></div>"`;

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

@@ -2,7 +2,8 @@
 
 exports[`Generated Items 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -18,7 +19,8 @@ exports[`Generated Items 1`] = `
 
 exports[`Identical Headings 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="h2,h3" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-heading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-heading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -44,16 +46,31 @@ exports[`Identical Headings 1`] = `
 
 exports[`In Page Navigation 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">                  
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+<ul>
+<li><a href="#section-1">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 1  
-</a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-2">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 2  
-</a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-3">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 3  
-</a></li></ul></nav></mx-in-page-navigation>
+</a>
+</li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -69,7 +86,8 @@ exports[`In Page Navigation 1`] = `
 
 exports[`Nested 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="h2,h3" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -85,7 +103,8 @@ exports[`Nested 1`] = `
 
 exports[`No Headings 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="h4" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -102,7 +121,8 @@ exports[`No Headings 1`] = `
 exports[`Other Container 1`] = `
 "<div class="mx-background--box mx-section--m mx-margin--bottom-m">
   <mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
 </div>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
@@ -119,16 +139,31 @@ exports[`Other Container 1`] = `
 
 exports[`Screen Reader Announcements 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">                  
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+<ul>
+<li><a href="#section-1">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 1  
-</a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-2">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 2  
-</a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-3">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 3  
-</a></li></ul></nav></mx-in-page-navigation>
+</a>
+</li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>

package/src/Component/InPageNavigation/in-page-navigation.twig

@@ -6,14 +6,12 @@
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <mx-in-page-navigation data-content="{{ contentSelector|default('.js-content') }}" data-levels="{{ levels|join(",") }}" data-title="{{ title|striptags|trim }}">
-  {% apply spaceless %}
   <nav{{ attributes }}>
-    {% if items %}
-      {{ title }}
+    {%- if items -%}
+      {{- title -}}
       <ul>
-        {{ items }}
+        {{- items -}}
       </ul>
-    {% endif %}
+    {%- endif -%}
   </nav>
-  {% endapply %}
 </mx-in-page-navigation>

package/src/Component/ListItem/Components/ListItemMedia.tsx

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

package/src/Component/Navigation/_navigation-collapsible.css

@@ -1,6 +1,7 @@
 /**
  * Collapsible Navigation
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.components {
   .mx-nav--collapsible {
@@ -55,7 +56,8 @@
     }
 
     & li > ul {
-      opacity: 1;
+      @add-mixin transition;
+
       display: grid;
 
       @starting-style {

package/src/Component/Navigation/_navigation-dropdown.css

@@ -1,6 +1,7 @@
 /**
  * Dropdown Navigation
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.components {
   .mx-nav--dropdown {
@@ -44,8 +45,9 @@
     }
 
     & li > ul {
+      @add-mixin transition;
+
       display: grid;
-      opacity: 1;
 
       @starting-style {
         opacity: 0;

package/src/Component/Pagination/Pagination.stories.ts

@@ -136,35 +136,65 @@ export const Pagination: Story = {
 
 /**
  * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * Pagination's narrow/wide layouts are driven by a CSS container query (not
+ * `matchMedia`) that swaps the numbered link list for a "Page X of Y" label -
+ * see `pagination.css`. Chromatic exercises both `chromatic.modes` (mobile and
+ * desktop), so this branches on the container's own rendered state (which of
+ * the two is actually visible) 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 () => {
+  play: async ({ canvasElement }) => {
+    const label = canvasElement.querySelector(".mx-pagination__label")
+    const isNarrow = label !== null && getComputedStyle(label).display !== "none"
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "navigation, Pagination",
-      "link, Previous",
-      "Previous",
-      "end of link, Previous",
-      "list",
-      "listitem, level 1, position 1, set size 4",
-      "link, 1",
-      "end of listitem, level 1, position 1, set size 4",
-      "listitem, level 1, position 2, set size 4",
-      "link, 2, current page",
-      "end of listitem, level 1, position 2, set size 4",
-      "listitem, level 1, position 3, set size 4",
-      "link, 3",
-      "end of listitem, level 1, position 3, set size 4",
-      "listitem, level 1, position 4, set size 4",
-      "link, 10",
-      "end of listitem, level 1, position 4, set size 4",
-      "end of list",
-      "link, Next",
-      "Next",
-      "end of link, Next",
-      "end of navigation, Pagination",
-      "end of document",
-    ])
+
+    if (isNarrow) {
+      await expect(log).toEqual([
+        "document",
+        "navigation, Pagination",
+        "link, Previous",
+        "Previous",
+        "end of link, Previous",
+        "Page 2 of 10",
+        "list",
+        "link, Next",
+        "Next",
+        "end of link, Next",
+        "end of navigation, Pagination",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "navigation, Pagination",
+        "link, Previous",
+        "Previous",
+        "end of link, Previous",
+        "list",
+        "listitem, level 1, position 1, set size 4",
+        "link, 1",
+        "end of listitem, level 1, position 1, set size 4",
+        "listitem, level 1, position 2, set size 4",
+        "link, 2, current page",
+        "end of listitem, level 1, position 2, set size 4",
+        "listitem, level 1, position 3, set size 4",
+        "link, 3",
+        "end of listitem, level 1, position 3, set size 4",
+        "listitem, level 1, position 4, set size 4",
+        "link, 10",
+        "end of listitem, level 1, position 4, set size 4",
+        "end of list",
+        "link, Next",
+        "Next",
+        "end of link, Next",
+        "end of navigation, Pagination",
+        "end of document",
+      ])
+    }
   },
 }

package/src/Component/Pagination/pagination.css

@@ -2,8 +2,6 @@
  * Pagination
  */
 
-@import "../../Utility/_mixins.css";
-
 @layer design-system.components {
   .mx-pagination {
     margin-inline: 0;
@@ -102,11 +100,22 @@
     & :is(.mx-pagination__previous, .mx-pagination__next) {
       text-transform: capitalize;
 
-      & span:where(:not(.mx-icon)) {
-        @add-mixin sr-only;
-
-        @container pagination (min-width: 25ch) {
-          @add-mixin sr-undo;
+      & :is(a, button) {
+        @container pagination (max-width: 32ch) {
+          inline-size: var(--button-min-height, var(--spacing-xl));
+          block-size: var(--button-min-height, var(--spacing-xl));
+          flex-wrap: wrap;
+          position: relative;
+          padding: 0;
+          overflow: hidden;
+
+          & .mx-icon {
+            inline-size: var(--button-min-height, var(--spacing-xl));
+            block-size: var(--button-min-height, var(--spacing-xl));
+            place-content: center;
+            display: flex;
+            order: -1;
+          }
         }
       }
     }

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Content Only 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-minimal-trigger" popovertarget="story-popover-minimal" style="anchor-name: --story-popover-minimal;">Popover trigger<span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-minimal" aria-describedby="story-popover-minimal-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover-minimal;"><div class="mx-rich-text mx-vertical-flow"><p>A simple hint with no heading or action link.</p></div></div>"`;
+exports[`Content Only 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-minimal-trigger" popovertarget="story-popover-minimal" style="anchor-name: --story-popover-minimal;"><span>Popover trigger</span><span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-minimal" aria-describedby="story-popover-minimal-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover-minimal;"><div class="mx-rich-text mx-vertical-flow"><p>A simple hint with no heading or action link.</p></div></div>"`;
 
-exports[`Default 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-trigger" popovertarget="story-popover" style="anchor-name: --story-popover;">Popover trigger<span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover" aria-describedby="story-popover-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;
+exports[`Default 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-trigger" popovertarget="story-popover" style="anchor-name: --story-popover;"><span>Popover trigger</span><span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover" aria-describedby="story-popover-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;
 
-exports[`Placement 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-placement-trigger" popovertarget="story-popover-placement" style="anchor-name: --story-popover-placement;">Popover trigger<span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-placement" aria-describedby="story-popover-placement-trigger" data-placement="top" popover="" style="position-anchor: --story-popover-placement;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;
+exports[`Placement 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-placement-trigger" popovertarget="story-popover-placement" style="anchor-name: --story-popover-placement;"><span>Popover trigger</span><span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-placement" aria-describedby="story-popover-placement-trigger" data-placement="top" popover="" style="position-anchor: --story-popover-placement;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;

package/src/Component/Popover/popover.css

@@ -3,6 +3,7 @@
  *
  * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.defaults {
   mx-popover {
@@ -20,8 +21,9 @@
 
   /* @public --popover-padding --popover-background --popover-foreground --popover-radius --popover-width */
   :where(.mx-popover) {
+    @add-mixin transition;
+
     display: none;
-    opacity: 0;
     position: absolute;
     padding: var(--popover-padding, var(--spacing-xs));
     background-color: var(--popover-background, var(--colour-background));