@pnx-mixtape/mxds 0.0.28 → 0.0.30

package/src/Component/Carousel/carousel.css

@@ -4,63 +4,42 @@
 
 @layer design-system.components.carousel {
   .mx-carousel {
-    display: block;
+    display: grid;
+    gap: var(--vertical-gap, var(--gap));
   }
 
   .mx-carousel__scrollable {
     list-style: none;
-    display: flex;
-    block-size: var(--block-size, auto);
+    padding-inline: 0;
+    scroll-padding-inline: var(--outline-size, 2px);
+    display: grid;
+    gap: var(--horizontal-gap, var(--gap));
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(var(--inline-size, 25ch), 1fr);
     overflow: auto hidden;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
-    scrollbar-color: var(--colour-foreground) var(--colour-background);
-
-    &::-webkit-scrollbar {
-      block-size: 1rem;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: var(--colour-background);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--colour-foreground);
-      background-image: linear-gradient(
-        var(--colour-background) 0,
-        var(--colour-background) 0.25rem,
-        var(--colour-foreground) 0.25rem,
-        var(--colour-foreground) 0.75rem,
-        var(--colour-background) 0.75rem
-      );
-    }
+    scrollbar-color: var(--scrollbar-color, var(--line-colour, var(--colour-border)) transparent);
+    scrollbar-width: thin;
 
     & > li {
-      flex: 0 0 var(--inline-size, 25ch);
-      display: flex;
+      display: grid;
       scroll-snap-align: start;
+      scroll-snap-stop: always;
 
       &[inert] {
         opacity: 0.3;
       }
 
-      & + li {
-        margin-inline-start: var(--gap);
-      }
-
       & .mx-container {
         inline-size: 100%;
-        display: flex;
+        display: grid;
       }
     }
 
-    &:not(:first-child) {
-      padding-block-start: var(--gap);
-    }
-
     &.overflowing:not(.no-bar) {
-      padding-block-end: var(--gap);
+      padding-block-end: var(--scrollbar-gap, var(--gap));
     }
 
     &.no-bar {

package/src/Component/Carousel/carousel.twig

@@ -1,6 +1,5 @@
 {% set classes = [
   'mx-carousel',
-  'mx-vertical-flow'
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 

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

@@ -10,8 +10,9 @@
 
 @layer design-system.components {
   .mx-global-alert {
-    background-color: var(--background, var(--colour-primary-light));
-    color: var(--foreground, var(--colour-foreground));
+    background-color: var(--alert-background, var(--colour-primary-light));
+    color: var(--alert-foreground, var(--colour-foreground));
+    color-scheme: var(--alert-scheme, light);
 
     & .mx-global-alert__inner {
       display: grid;
@@ -34,8 +35,11 @@
     }
 
     &.mx-global-alert--critical {
-      --foreground: var(--colour-error);
-      --background: color-mix(in oklch, var(--colour-error), white 95%);
+      --alert-foreground: var(--critical-alert-foreground, var(--colour-error));
+      --alert-background: var(
+        --critical-alert-background,
+        color-mix(in oklch, var(--colour-error), white 95%)
+      );
     }
 
     & .mx-icon--close {

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

@@ -17,6 +17,7 @@
     border: 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);
 
     &:has(.mx-icon--close) {

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -18,18 +18,19 @@ export default class InPageNavigation extends HTMLElement {
     super()
     this.internals_ = this.attachInternals()
     this.controller = new AbortController()
-    this.headingLevels = this.dataset?.headings || "h2"
+    this.headingLevels = this.dataset?.levels || "h2"
     this.title = this.dataset?.title || "On this page"
     this.items = []
   }
 
   connectedCallback(): void {
     if (!this.menu || !this.headings) return
-    const headingElement: HTMLHeadingElement = createElement(
-      `<h2 class="${this.titleClass}">${this.title}</h2>`,
-    ) as HTMLHeadingElement
-    this.nav.insertBefore(headingElement, this.menu)
     if (!this.links.length) {
+      // Build heading.
+      const headingElement: HTMLHeadingElement = createElement(
+        `<h2 class="${this.titleClass}">${this.title}</h2>`,
+      ) as HTMLHeadingElement
+      this.nav.insertBefore(headingElement, this.menu)
       // Build links if not provided.
       this.headings.forEach((heading: HTMLHeadingElement) => {
         const listItem: HTMLLIElement = this.generateListItem(heading)
@@ -84,7 +85,7 @@ export default class InPageNavigation extends HTMLElement {
     if (!this.nav) {
       throw new Error(`${this.localName} must contain a <nav> element.`)
     }
-    if (this.items.length === 0 && this.headings.length === 0) {
+    if (this.items?.length === 0 && this.headings?.length === 0) {
       return null
     }
     const list = document.createElement("ul")
@@ -103,7 +104,11 @@ export default class InPageNavigation extends HTMLElement {
         `${this.localName} must have a [data-content] attribute that contains the content selector.`,
       )
     }
-    return this.closest(selector) || this.parentElement.querySelector(selector)
+    return (
+      this.closest(selector) ||
+      this.parentElement.querySelector(selector) ||
+      document.querySelector(selector)
+    )
   }
 
   get headings(): NodeListOf<HTMLHeadingElement> | undefined {

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./twig/in-page-navigation-story.twig"
+import Other from "./twig/in-page-navigation-selector.twig"
 import "./in-page-navigation.css"
 import "./Elements/InPageNavigation"
 import { HeadingTypes, InPageNavigation as InPageNavigationType } from "@pnx-mixtape/ids-shape"
@@ -49,27 +50,32 @@ const meta: Meta<InPageNavigationType> = {
     ],
   },
   argTypes: {
-    levels: {
-      description:
-        "If no `items` are provided, the javascript can build the items from the headings. This chooses the headings to include. eg; `h2,h3`",
-      options: Object.values(HeadingTypes),
-      control: "multi-select",
-      table: {
-        type: { summary: "enum" },
-        defaultValue: { summary: HeadingTypes.TWO },
-      },
-    },
     title: {
-      description: "Optional [Heading](/?path=/docs/atom-heading--docs) component.",
+      description:
+        "[Heading](/?path=/docs/atom-heading--docs) component. If not provided, the javascript will generate one with the default content.",
       control: "text",
       table: {
         type: { summary: "Heading" },
+        defaultValue: { summary: "On this page" },
+        subcategory: "Provided content",
       },
     },
     items: {
       description: "A list of [Link](/?path=/docs/atom-link--docs) objects to use for the menu.",
       table: {
         type: { summary: "Link[]" },
+        subcategory: "Provided content",
+      },
+    },
+    levels: {
+      description:
+        "If no `items` are provided, the javascript can build the items from the headings. This chooses the headings to include. eg; `h2,h3`",
+      options: Object.values(HeadingTypes),
+      control: "multi-select",
+      table: {
+        type: { summary: "enum" },
+        defaultValue: { summary: HeadingTypes.TWO },
+        subcategory: "Javascript options",
       },
     },
   },
@@ -81,7 +87,7 @@ type Story = StoryObj<InPageNavigationType>
 export const InPageNavigation: Story = {}
 
 /**
- * When the `items` are empty, the Javascript builds them.
+ * When the `items` are empty, the Javascript builds the list and heading.
  */
 export const GeneratedItems: Story = {
   args: {
@@ -108,3 +114,13 @@ export const NoHeadings: Story = {
     levels: [HeadingTypes.FOUR],
   },
 }
+
+/**
+ * Generated items from anywhere in the page: page content contains headings, but not within the container element.
+ */
+export const OtherContainer: Story = {
+  args: {
+    items: [],
+  },
+  render: args => Other(args),
+}

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

@@ -1,11 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Generated Items 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="" 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>
-<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+"<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>
+<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>
 <h2 id="section-2">Section 2</h2>
@@ -19,40 +17,9 @@ exports[`Generated Items 1`] = `
 `;
 
 exports[`In Page Navigation 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="" 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>
-
-  <span>Section 1</span>
-    
-</a>
-</li>
-              <li>
-<a href="#section-2">
-  
-<span class="mx-icon mx-icon--chevron-right"></span>
-
-  <span>Section 2</span>
-    
-</a>
-</li>
-              <li>
-<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 mx-section--l">
+"<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><span>Section 1</span></a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li><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>
 <h2 id="section-2">Section 2</h2>
@@ -66,11 +33,9 @@ exports[`In Page Navigation 1`] = `
 `;
 
 exports[`Nested 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="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>
-<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+"<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>
+<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>
 <h2 id="section-2">Section 2</h2>
@@ -84,11 +49,27 @@ exports[`Nested 1`] = `
 `;
 
 exports[`No Headings 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="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>
-<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+"<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>
+<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>
+<h2 id="section-2">Section 2</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>
+<h3 id="test-level-3">Test level 3</h3>
+<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>
+<h2 id="section-3">Section 3</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>
+</div>
+"
+`;
+
+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>
+</div>
+<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>
 <h2 id="section-2">Section 2</h2>

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

@@ -5,6 +5,14 @@
 @layer design-system.defaults {
   mx-in-page-navigation {
     display: block;
+
+    &:where(:has(ul, ol):not(:only-child)) {
+      margin-block-end: var(--flow-gap, var(--gap));
+    }
+
+    &:has(.mx-nav:empty) {
+      display: none;
+    }
   }
 }
 
@@ -13,10 +21,6 @@
     --link-colour: var(--colour-link);
     --nav-underline: underline;
 
-    &:has(ul, ol) {
-      margin-block-end: var(--flow-gap, var(--gap));
-    }
-
     & .mx-in-page-navigation__level--h3 {
       padding-inline-start: var(--indent, var(--spacing-s));
     }

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

@@ -5,14 +5,17 @@
   'mx-vertical-flow'
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
-<mx-in-page-navigation data-content=".js-content" data-headings="{{ levels|join(",") }}" data-title="{{ title|striptags|trim }}">
+<mx-in-page-navigation data-content=".js-content" data-levels="{{ levels|join(",") }}" data-title="{{ title|striptags|trim }}">
+  {% apply spaceless %}
   <nav{{ attributes }}>
     {% if items %}
-    <ul>
-      {% for item in items %}
-        <li>{{ item }}</li>
-      {% endfor %}
-    </ul>
+      {{ title }}
+      <ul>
+        {% for item in items %}
+          <li>{{ item }}</li>
+        {% endfor %}
+      </ul>
     {% endif %}
   </nav>
+  {% endapply %}
 </mx-in-page-navigation>

package/src/Component/InPageNavigation/twig/content-example.twig

@@ -1,4 +1,4 @@
-<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<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>
 <h2 id="section-2">Section 2</h2>

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

@@ -0,0 +1,4 @@
+<div class="mx-background--box mx-section--m mx-margin--bottom-m">
+  {% include "../in-page-navigation.twig" with { title: title, levels: levels } %}
+</div>
+{% include "./content-example.twig" %}

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

@@ -5,7 +5,7 @@ exports[`Block Link 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-list-item mx-card--block">
   <div class="mx-card__content mx-vertical-flow">
-            <div class="mx-heading--m">
+            <div class="mx-heading--l">
       
 <a href="#">
   
@@ -25,11 +25,11 @@ exports[`Block Link 1`] = `
 exports[`Image Reverse 1`] = `
 "  
 <div class="mx-container">
-<article class="mx-card mx-list-item mx-card--reversed">
+<article class="mx-card mx-list-item mx-card--collapse mx-card--reversed">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
               <div class="mx-text--s">25 May 2025</div>
-        <div class="mx-heading--m">
+        <div class="mx-heading--l">
       
 <a href="#">
   
@@ -57,7 +57,7 @@ exports[`List Item 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
-            <div class="mx-heading--m">
+            <div class="mx-heading--l">
       
 <a href="#">
   
@@ -77,11 +77,11 @@ exports[`List Item 1`] = `
 exports[`With Image 1`] = `
 "
 <div class="mx-container">
-<article class="mx-card mx-list-item">
+<article class="mx-card mx-list-item mx-card--collapse">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
               <div class="mx-text--s">25 May 2025</div>
-        <div class="mx-heading--m">
+        <div class="mx-heading--l">
       
 <a href="#">
   
@@ -111,7 +111,7 @@ exports[`With Info 1`] = `
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
               <div class="mx-text--s">25 May 2025</div>
-        <div class="mx-heading--m">
+        <div class="mx-heading--l">
       
 <a href="#">
   
@@ -134,7 +134,7 @@ exports[`With Tags 1`] = `
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Resource</strong>
-            <div class="mx-heading--m">
+            <div class="mx-heading--l">
       
 <a href="#">
   
@@ -165,7 +165,7 @@ exports[`With Url 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
-            <div class="mx-heading--m">
+            <div class="mx-heading--l">
       
 <a href="#">
   

package/src/Component/ListItem/list-item.css

@@ -15,9 +15,22 @@
         --flow-gap: 0;
       }
     }
+
+    &.mx-card--block {
+      & .mx-heading--l a {
+        color: inherit;
+        text-decoration-line: none;
+      }
+
+      &:hover .mx-heading--l a {
+        color: var(--link-colour, var(--colour-link));
+      }
+    }
   }
+}
 
-  :is(.mx-list-item, .mx-container:has(> .mx-list-item)) {
+:is(.mx-list-item, .mx-container:has(> .mx-list-item)) {
+  @media (--collapse-card-up) {
     &:where(:not(:first-child)) {
       border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
       padding-block-start: var(--gap);

package/src/Component/ListItem/list-item.twig

@@ -1,5 +1,9 @@
 {% set baseClass = 'mx-card' %}
-{% set classes = [baseClass, 'mx-list-item'] %}
+{% set classes = [
+  baseClass,
+  'mx-list-item',
+  image is not empty ? baseClass~"--collapse" : null,
+] %}
 {% for modifier in modifiers %}
   {% set classes = classes|merge([baseClass~"--"~modifier]) %}
 {% endfor %}
@@ -14,7 +18,7 @@
     {% if info is not empty and infoBefore %}
       <div class="mx-text--s">{{ info }}</div>
     {% endif %}
-    <div class="mx-heading--m">
+    <div class="mx-heading--l">
       {{ link }}
     </div>
     {% if info is not empty and not infoBefore %}

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

@@ -30,13 +30,13 @@ const meta: Meta<PaginationType> = {
         link: Link({
           href: "#",
           title: "1",
-          current: true,
         }),
       }),
       PaginationItem({
         link: Link({
           href: "#",
           title: "2",
+          current: true,
         }),
       }),
       PaginationItem({

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

@@ -16,7 +16,7 @@ exports[`Pagination 1`] = `
       </li>
               <li class="mx-pagination__item">
   
-<a href="#" aria-current="page">
+<a href="#">
   
   <span>1</span>
     
@@ -26,7 +26,7 @@ exports[`Pagination 1`] = `
 
           <li class="mx-pagination__item">
   
-<a href="#">
+<a href="#" aria-current="page">
   
   <span>2</span>
     

package/src/Component/ResultsBar/results-bar.css

@@ -5,6 +5,10 @@
     gap: var(--spacing-s);
     justify-content: space-between;
     align-items: center;
+
+    &:not(:last-child) {
+      margin-block-end: var(--spacing-m);
+    }
   }
 
   .mx-results-bar__sort {

package/src/Form/FormItem/FormItem.stories.ts

@@ -81,6 +81,20 @@ export const Error: Story = {
   },
 }
 
+export const Required: Story = {
+  args: {
+    fields: TextInput({
+      id: "form-item",
+      type: InputTypeTypes.TEXT,
+      name: "example-form-item",
+      placeholder: "eg. Funk, Soul, Blues..",
+      hasDescription: true,
+      value: "Musicals",
+      required: true,
+    }),
+  },
+}
+
 export const Fieldset: Story = {
   args: {
     as: "fieldset",

package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap

@@ -75,6 +75,25 @@ exports[`Form Item 1`] = `
 </div>
 
   
+</div>
+"
+`;
+
+exports[`Required 1`] = `
+"
+<div class="mx-form-item">
+    
+<label class="mx-label" for="form-item">What's your favourite music?</label>
+
+  
+        
+<input class="mx-input__text" id="form-item" name="unique-0" type="text" value="Musicals" placeholder="eg. Funk, Soul, Blues.." aria-describedby="unique-0" required="">
+
+    <div class="mx-description" id="unique-0" role="tooltip">
+  Help text that provides additional information about the field.
+</div>
+
+  
 </div>
 "
 `;