@pnx-mixtape/mxds 0.0.13 → 0.0.14

package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap

@@ -1,63 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Typography/Text Sizes Example smoke-test 1`] = `
-<div class="vertical-flow">
-  <p class="mx-text--embellished-headline">
-    Embelished headline: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--section-headline">
-    Section headline: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <h2 class="mx-headline">
-    Headline: Lorem ipsum dolor sit amet consectetur
-  </h2>
-  <p class="mx-heading--xxl">
-    Heading xxl: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-heading--xl">
-    Heading xl: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-heading--l">
-    Heading l: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-heading--m">
-    Heading m: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-heading--s">
-    Heading s: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-heading--xs">
-    Heading xs: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--xxxl">
-    Text xxxl: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--xxl">
-    Text xxl: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--xl">
-    Text xl: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--l">
-    Text l: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--m">
-    Text m: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p>
-    Text: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--s">
-    Text s: Lorem ipsum dolor sit amet consectetur
-  </p>
-  <p class="mx-text--xs">
-    Text xs: Lorem ipsum dolor sit amet consectetur
-  </p>
+<div class="mx-page default">
+  <div class="vertical-flow">
+    <p class="mx-text--embellished-headline">
+      Embelished headline: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--section-headline">
+      Section headline: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <h2 class="mx-headline">
+      Headline: Lorem ipsum dolor sit amet consectetur
+    </h2>
+    <p class="mx-heading--xxl">
+      Heading xxl: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-heading--xl">
+      Heading xl: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-heading--l">
+      Heading l: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-heading--m">
+      Heading m: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-heading--s">
+      Heading s: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-heading--xs">
+      Heading xs: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--xxxl">
+      Text xxxl: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--xxl">
+      Text xxl: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--xl">
+      Text xl: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--l">
+      Text l: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--m">
+      Text m: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p>
+      Text: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--s">
+      Text s: Lorem ipsum dolor sit amet consectetur
+    </p>
+    <p class="mx-text--xs">
+      Text xs: Lorem ipsum dolor sit amet consectetur
+    </p>
+  </div>
 </div>
 `;
 
 exports[`Atom/Typography/Text Sizes TextSizes smoke-test 1`] = `
-<p class>
-  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 (also called greeking). 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 class="mx-page default">
+  <p class>
+    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 (also called greeking). 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>
 `;

package/src/Atom/Text/rich-text.twig

@@ -0,0 +1,9 @@
+{% set classes = [
+  "mx-rich-text",
+  "mx-vertical-flow",
+  "mx-section--narrow"
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<div{{ attributes }}>
+  {{ content }}
+</div>

package/src/Atom/Video/Video.stories.ts

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

package/src/Atom/Video/__snapshots__/Video.stories.ts.snap

@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Video Video smoke-test 1`] = `
-<figure class="mx-video">
-  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"
-          title="Something from youtube"
-          allowfullscreen
-  >
-  </iframe>
-</figure>
+<div class="mx-page default">
+  <figure class="mx-video">
+    <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"
+            title="Something from youtube"
+            allowfullscreen
+    >
+    </iframe>
+  </figure>
+</div>
 `;

package/src/Atom/_animated.css

@@ -49,17 +49,3 @@
     transform: scale(0.75);
   }
 }
-
-@media (--reduce-motion) {
-  *,
-  ::before,
-  ::after {
-    animation-delay: -1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    background-attachment: initial !important;
-    scroll-behavior: auto !important;
-    transition-delay: 0s !important;
-    transition-duration: 0s !important;
-  }
-}

package/src/Atom/_generic.css

@@ -1,13 +1,24 @@
 @layer design-system.defaults {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    background-repeat: no-repeat;
+  @media (--use-motion) {
+    @view-transition {
+      navigation: auto;
+    }
   }
 
-  * {
+  :is(*, ::before, ::after) {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
     margin: 0;
+    opacity: 1;
+    transition-property: opacity, color, background-color, border-color,
+      transform, rotate, display, overlay;
+    transition-duration: 0.5s;
+    transition-timing-function: var(--ease);
+    transition-behavior: allow-discrete;
+
+    @starting-style {
+      opacity: 0;
+    }
   }
 
   :focus {
@@ -15,11 +26,9 @@
   }
 
   :focus-visible {
-    --outline-size: max(2px, 0.15em);
-
-    outline: var(--outline-width, var(--outline-size))
-      var(--outline-style, solid) var(--outline-color, currentcolor);
-    outline-offset: var(--outline-offset, var(--outline-size));
+    outline: var(--outline-size, 2px) var(--outline-style, solid)
+      var(--outline-color, currentcolor);
+    outline-offset: var(--outline-offset, var(--outline-size, 2px));
   }
 
   html {
@@ -64,13 +73,31 @@
   }
 
   dl {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: min(100%, var(--grid-min, 20ch)) 1fr;
+    grid-template-rows: 1fr;
     gap: var(--spacing-xs);
 
+    &:has(> div) {
+      container-type: inline-size;
+    }
+
     & div {
-      display: flex;
-      gap: var(--spacing-s);
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: span 2;
+
+      @container (max-width: 60ch) {
+        gap: var(--spacing-xxxs);
+
+        & > :is(dt, dd) {
+          grid-column: span 2;
+        }
+      }
+    }
+
+    & dt {
+      font-weight: var(--font-weight-bold);
     }
   }
 
@@ -78,3 +105,17 @@
     text-wrap: pretty;
   }
 }
+
+@media (--reduce-motion) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
+}

package/src/Atom/base.css

@@ -1,4 +1,4 @@
-@layer popover-polyfill, design-system.defaults, design-system.atoms, design-system.layouts, design-system.components, design-system.utilities;
+@layer popover-polyfill, design-system.defaults, design-system.atoms, design-system.layouts, design-system.utilities, design-system.components;
 
 @import "./Background/_background.css";
 @import "_animated.css";

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./accordion.twig"
 import AccordionItem from "./accordion-item.twig"
 import Heading from "../../Atom/Heading/heading.twig"
@@ -30,9 +30,6 @@ const meta: Meta<AccordionType> = {
       }),
     ],
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     toggleAll: { control: "boolean" },
     // @ts-expect-error The controls follow the shape

package/src/Component/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import { AccordionStyles, HeadingLevels } from "../../enums"
 import Component from "./Accordion"
 import "./accordion.css"

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

@@ -1,65 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Accordion Accordion smoke-test 1`] = `
-<div class="mx-accordions">
-  <div class="mx-accordion__title">
-    <h2>
-      Accordion group
-    </h2>
-  </div>
-  <mx-accordion>
-    <details class="mx-accordion mx-accordion--divided">
-      <summary class="mx-accordion__toggle">
-        Music
-        <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
-              aria-hidden="true"
-        >
-        </span>
-      </summary>
-      <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
-        I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
-      </div>
-    </details>
-  </mx-accordion>
-  <mx-accordion>
-    <details class="mx-accordion mx-accordion--divided">
-      <summary class="mx-accordion__toggle">
-        Performances
-        <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
-              aria-hidden="true"
-        >
-        </span>
-      </summary>
-      <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
-        I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
-      </div>
-    </details>
-  </mx-accordion>
-</div>
-`;
-
-exports[`Component/Accordion ToggleAll smoke-test 1`] = `
-<div class="mx-accordions">
-  <mx-accordion-group>
+<div class="mx-page default">
+  <div class="mx-accordions">
     <div class="mx-accordion__title">
       <h2>
         Accordion group
       </h2>
-      <div class="mx-accordions__toggle-all">
-        <button data-expand
-                class="mx-button mx-button--light mx-button--small"
-                type="button"
-        >
-          Expand all
-        </button>
-        <button data-collapse
-                class="mx-button mx-button--light mx-button--small"
-                type="button"
-                disabled
-        >
-          Collapse all
-        </button>
-      </div>
     </div>
     <mx-accordion>
       <details class="mx-accordion mx-accordion--divided">
@@ -89,6 +36,63 @@ exports[`Component/Accordion ToggleAll smoke-test 1`] = `
         </div>
       </details>
     </mx-accordion>
-  </mx-accordion-group>
+  </div>
+</div>
+`;
+
+exports[`Component/Accordion ToggleAll smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-accordions">
+    <mx-accordion-group>
+      <div class="mx-accordion__title">
+        <h2>
+          Accordion group
+        </h2>
+        <div class="mx-accordions__toggle-all">
+          <button data-expand
+                  class="mx-button mx-button--light mx-button--small"
+                  type="button"
+          >
+            Expand all
+          </button>
+          <button data-collapse
+                  class="mx-button mx-button--light mx-button--small"
+                  type="button"
+                  disabled
+          >
+            Collapse all
+          </button>
+        </div>
+      </div>
+      <mx-accordion>
+        <details class="mx-accordion mx-accordion--divided">
+          <summary class="mx-accordion__toggle">
+            Music
+            <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+                  aria-hidden="true"
+            >
+            </span>
+          </summary>
+          <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+            I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+          </div>
+        </details>
+      </mx-accordion>
+      <mx-accordion>
+        <details class="mx-accordion mx-accordion--divided">
+          <summary class="mx-accordion__toggle">
+            Performances
+            <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+                  aria-hidden="true"
+            >
+            </span>
+          </summary>
+          <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+            I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+          </div>
+        </details>
+      </mx-accordion>
+    </mx-accordion-group>
+  </div>
 </div>
 `;

package/src/Component/Accordion/accordion.css

@@ -27,10 +27,6 @@
       border: initial;
       padding: initial;
     }
-
-    & .mx-accordion__content[inert] {
-      display: none;
-    }
   }
 }
 
@@ -57,12 +53,28 @@
       all: unset;
     }
 
+    & > .mx-accordion__content {
+      display: none;
+      opacity: 0;
+      overflow: hidden;
+    }
+
     &:is([open], [data-open="true"]) {
       & > .mx-accordion__toggle {
         & .mx-icon--chevron-down {
           transform: rotate(180deg);
         }
       }
+
+      & > .mx-accordion__content {
+        opacity: 1;
+        display: block;
+
+        @starting-style {
+          opacity: 0;
+          display: block;
+        }
+      }
     }
   }
 

package/src/Component/Breadcrumb/Breadcrumb.stories.ts

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

package/src/Component/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Breadcrumb"
 import "./breadcrumb.css"
 

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

@@ -1,33 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
-<nav class="mx-nav mx-nav--inline mx-nav--breadcrumbs"
-     aria-label="You are here"
->
-  <ul>
-    <li>
-      <a href="#">
-        <span>
-          Home
-        </span>
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        <span>
-          About
-        </span>
-      </a>
-    </li>
-    <li>
-      <a href="#"
-         aria-current="page"
-      >
-        <span>
-          Join the team
-        </span>
-      </a>
-    </li>
-  </ul>
-</nav>
+<div class="mx-page default">
+  <nav class="mx-nav mx-nav--inline mx-nav--breadcrumbs"
+       aria-label="You are here"
+  >
+    <ul>
+      <li>
+        <a href="#">
+          <span>
+            Home
+          </span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <span>
+            About
+          </span>
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           aria-current="page"
+        >
+          <span>
+            Join the team
+          </span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
 `;

package/src/Component/Breadcrumb/breadcrumb.css

@@ -10,6 +10,10 @@
     z-index: 1;
     overflow: auto;
     white-space: nowrap;
+    padding-inline: var(--outline-size);
+    padding-block: var(--outline-size);
+    margin-inline: calc(var(--outline-size) * -1);
+    margin-block: calc(var(--outline-size) * -1);
 
     & > ul {
       gap: var(--breadcrumb-gap, var(--spacing-xxxxs));

package/src/Component/Callout/Callout.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./callout.twig"
 import Heading from "../../Atom/Heading/heading.twig"
 import "./callout.css"
@@ -14,14 +14,6 @@ const meta: Meta<CalloutType> = {
     }),
     content: "<p>Some callout content.</p>",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
-  argTypes: {
-    // @ts-expect-error The controls follow the shape
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
-  },
 }
 
 export default meta

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

@@ -1,12 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Callout Callout smoke-test 1`] = `
-<div class="mx-callout mx-vertical-flow">
-  <h2>
-    Callout heading
-  </h2>
-  <p>
-    Some callout content.
-  </p>
+<div class="mx-page default">
+  <div class="mx-callout mx-vertical-flow">
+    <h2>
+      Callout heading
+    </h2>
+    <p>
+      Some callout content.
+    </p>
+  </div>
 </div>
 `;