@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/src/Component/Filters/filters.css

@@ -78,14 +78,23 @@
         position: fixed;
         z-index: 200;
         inset-block: 0;
-        inset-inline: 0 -100vw;
-        transition: 0.15s ease-in-out;
-        visibility: hidden;
+        inset-inline: 0;
+        inline-size: 100vw;
+        display: none;
+        opacity: 0;
+        transform: translateX(100%);
       }
 
       & [open] .mx-filters__form {
-        inset-inline-end: 0;
-        visibility: visible;
+        opacity: 1;
+        transform: translateX(0);
+        display: block;
+
+        @starting-style {
+          opacity: 0;
+          transform: translateX(100%);
+          display: block;
+        }
       }
     }
 

package/src/Component/GlobalAlert/GlobalAlert.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./global-alert.twig"
 import Heading from "../../Atom/Heading/heading.twig"
 import "./global-alert.css"

package/src/Component/GlobalAlert/GlobalAlert.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./GlobalAlert"
 import "./global-alert.css"
 import { GlobalAlertTypes } from "@pnx-mixtape/ids-shape"

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

@@ -1,41 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
-<div class="mx-global-alert mx-page mx-global-alert--critical">
-  <div class="mx-global-alert__inner">
-    <div class="mx-global-alert__content">
-      <h2 class=" mx-heading--m">
-        In page alert
-      </h2>
-      <p>
-        Something happened that requires your attention
-      </p>
+<div class="mx-page default">
+  <div class="mx-global-alert mx-page mx-global-alert--critical">
+    <div class="mx-global-alert__inner">
+      <div class="mx-global-alert__content">
+        <h2 class=" mx-heading--m">
+          In page alert
+        </h2>
+        <p>
+          Something happened that requires your attention
+        </p>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
-<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light"
-                   id="unique-0"
->
-  <div class="mx-global-alert__inner"
-       data-container
+<div class="mx-page default">
+  <mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light"
+                     id="unique-0"
   >
-    <div class="mx-global-alert__content">
-      <h2 class=" mx-heading--m">
-        In page alert
-      </h2>
-      <p>
-        Something happened that requires your attention
-      </p>
-    </div>
-    <button class="mx-icon mx-icon--close"
-            aria-controls="unique-0"
-            aria-label="Close GlobalAlert"
-            type="button"
+    <div class="mx-global-alert__inner"
+         data-container
     >
-    </button>
-  </div>
-</mx-closable-alert>
+      <div class="mx-global-alert__content">
+        <h2 class=" mx-heading--m">
+          In page alert
+        </h2>
+        <p>
+          Something happened that requires your attention
+        </p>
+      </div>
+      <button class="mx-icon mx-icon--close"
+              aria-controls="unique-0"
+              aria-label="Close GlobalAlert"
+              type="button"
+      >
+      </button>
+    </div>
+  </mx-closable-alert>
+</div>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
-<div id=":r1:"
+<div id="«r1»"
      class="mx-global-alert mx-global-alert--critical"
 >
   <div class="mx-global-alert__inner">
@@ -22,7 +22,7 @@ exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 `;
 
 exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
-<div id=":r0:"
+<div id="«r0»"
      class="mx-global-alert mx-global-alert--light"
 >
   <div class="mx-global-alert__inner">

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

@@ -34,8 +34,8 @@
     }
 
     &.mx-global-alert--critical {
-      --foreground: var(--colour-error-foreground);
-      --background: var(--colour-error-background);
+      --foreground: var(--colour-error);
+      --background: color-mix(in oklch, var(--colour-error), white 95%);
     }
 
     & .mx-icon--close {

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import { Page } from "../../../.storybook/decorators"
 import Component from "./hero-banner.twig"
 import "./hero-banner.css"
@@ -38,9 +38,6 @@ const meta: Meta<HeroBannerType> = {
       more: true,
     }),
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     modifiers: {
       options: Object.values(HeroBannerModifier),

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./HeroBanner"
 import Button from "../../Atom/Button/Button"
 import "./hero-banner.css"

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

@@ -1,30 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
-<div class="mx-page">
-  <div class="mx-hero-banner mx-page ">
-    <div class="mx-hero-banner__inner">
-      <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
-        <h1>
-          Hero banner title
-        </h1>
-        <p class="mx-text--lede">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner ">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <a class="mx-link--more"
+             href="#"
           >
-        </picture>
+            <span>
+              Find out more
+            </span>
+          </a>
+        </div>
+        <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+          <picture>
+            <img src="https://picsum.photos/id/56/558/418?grayscale"
+                 alt="Blurry bubbles"
+            >
+          </picture>
+        </div>
       </div>
     </div>
   </div>
@@ -32,47 +34,49 @@ exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
 `;
 
 exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
-<div class="mx-page">
-  <div class="mx-hero-banner mx-page ">
-    <div class="mx-hero-banner__inner">
-      <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
-        <h1>
-          Hero banner title
-        </h1>
-        <p class="mx-text--lede">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div class="mx-hero-banner__aside">
-        <ul class="mx-link-list">
-          <li>
-            <a href="#">
-              <span>
-                Link one
-              </span>
-              <span class="mx-icon mx-icon--chevron-right ">
-              </span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>
-                Link two
-              </span>
-              <span class="mx-icon mx-icon--chevron-right ">
-              </span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>
-                Link three
-              </span>
-              <span class="mx-icon mx-icon--chevron-right ">
-              </span>
-            </a>
-          </li>
-        </ul>
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner ">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <div class="mx-hero-banner__aside">
+          <ul class="mx-link-list">
+            <li>
+              <a href="#">
+                <span>
+                  Link one
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>
+                  Link two
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>
+                  Link three
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>

package/src/Component/HeroBanner/hero-banner.css

@@ -13,12 +13,17 @@
     }
 
     & :is(h1, h2, p) {
-      max-inline-size: var(--container-max-width-narrow);
+      inline-size: min(100%, var(--container-max-width-narrow));
       text-wrap: balance;
     }
+
+    & h1 {
+      overflow-wrap: anywhere;
+    }
   }
 
   .mx-hero-banner__inner {
+    grid-column: container;
     display: grid;
     grid-template-areas: "content" "aside";
 

package/src/Component/HeroBanner/hero-banner.twig

@@ -2,18 +2,17 @@
 {% set background = null %}
 {% for modifier in modifiers %}
   {% if modifier == "dark" %}
-    {% set background = 'background--reverse' %}
+    {% set background = 'mx-background--reverse' %}
   {% endif %}
   {% if modifier == "off-white" %}
-    {% set background = 'background--alt' %}
+    {% set background = 'mx-background--alt' %}
   {% endif %}
   {% if modifier == "light" %}
-    {% set background = 'background--primary' %}
+    {% set background = 'mx-background--primary' %}
   {% endif %}
 {% endfor %}
 {% set classes = [
   baseClass,
-  'mx-page',
   highlight ? baseClass~'--hero' : null,
   background ? background : null,
 ] %}

package/src/Component/InPageAlert/InPageAlert.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./in-page-alert.twig"
 import Link from "../../Atom/Link/link.twig"
 import "./in-page-alert.css"

package/src/Component/InPageAlert/InPageAlert.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./InPageAlert"
 import "./in-page-alert.css"
 import { InPageAlertTypes } from "@pnx-mixtape/ids-shape"

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

@@ -1,14 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
-<div class="message ">
-  <div class="message__content">
-    Something happened that requires your attention
-    <a href="#">
-      <span>
-        Click here
-      </span>
-    </a>
+<div class="mx-page default">
+  <div class="message ">
+    <div class="message__content">
+      Something happened that requires your attention
+      <a href="#">
+        <span>
+          Click here
+        </span>
+      </a>
+    </div>
   </div>
 </div>
 `;

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

@@ -53,23 +53,23 @@
 
     &.message--status,
     &.message--info {
-      --foreground: var(--colour-info-foreground);
-      --background: var(--colour-info-background);
+      --foreground: var(--colour-info);
+      --background: color-mix(in oklch, var(--colour-info), white 95%);
     }
 
     &.message--success {
-      --foreground: var(--colour-success-foreground);
-      --background: var(--colour-success-background);
+      --foreground: var(--colour-success);
+      --background: color-mix(in oklch, var(--colour-success), white 95%);
     }
 
     &.message--error {
-      --foreground: var(--colour-error-foreground);
-      --background: var(--colour-error-background);
+      --foreground: var(--colour-error);
+      --background: color-mix(in oklch, var(--colour-error), white 95%);
     }
 
     &.message--warning {
-      --foreground: var(--colour-warning-foreground);
-      --background: var(--colour-warning-background);
+      --foreground: var(--colour-warning);
+      --background: color-mix(in oklch, var(--colour-warning), white 95%);
     }
 
     & .mx-icon--close {

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

@@ -34,7 +34,7 @@ export default class InPageNavigation extends HTMLElement {
     } else {
       this.links.forEach((link: HTMLAnchorElement) => {
         const heading: HTMLHeadingElement = this.container.querySelector(
-          link.href,
+          link.hash,
         )
         if (!heading) return
         this.items.push({ link, heading })

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./twig/in-page-navigation-story.twig"
 import "./in-page-navigation.css"
 import "./Elements/InPageNavigation"
@@ -46,9 +46,6 @@ const meta: Meta<InPageNavigationType> = {
       }),
     ],
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     levels: { options: Object.values(HeadingTypes), control: "multi-select" },
     // @ts-expect-error The controls follow the shape

package/src/Component/InPageNavigation/InPageNavigation.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Heading from "../../Atom/Heading/Heading"
 import Text from "../../Atom/Text/Text"
 import Component from "./InPageNavigation"

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

@@ -1,68 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
-<mx-in-page-navigation data-content=".js-content"
-                       data-headings
->
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-    <h2 class=" mx-heading--m">
-      On this page
+<div class="mx-page default">
+  <mx-in-page-navigation data-content=".js-content"
+                         data-headings
+  >
+    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+      <h2 class=" 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">
+    <h2 id="section-1">
+      Section 1
     </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">
-  <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>
+    <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>
 </div>
 `;

package/src/Component/LinkList/LinkList.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./link-list.twig"
 import "./link-list.css"
 

package/src/Component/LinkList/LinkList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component, { LinkListItem } from "./LinkList"
 import "./link-list.css"