@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -1,87 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/SideNavigation SideNavigation smoke-test 1`] = `
-<nav class="mx-nav mx-side-nav"
-     aria-label="Sidebar nav"
-     "
->
-  <div class="mx-side-nav__parent"
-       id="sidenav-story"
+<div class="mx-page default">
+  <nav class="mx-nav mx-side-nav"
+       aria-label="Sidebar nav"
+       "
   >
-    <a href="#">
-      <span>
-        About
-      </span>
-    </a>
-  </div>
-  <ul class="mx-nav__level-1">
-    <li>
+    <div class="mx-side-nav__parent"
+         id="sidenav-story"
+    >
       <a href="#">
-        News
+        <span>
+          About
+        </span>
       </a>
-    </li>
-    <li class="mx-nav__has-subnav">
-      <a href="#">
-        What we do
-      </a>
-      <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
-        Sub-navigation
-      </button>
-      <ul class="mx-nav__level-2">
-        <li>
-          <a href="#">
-            Events
-          </a>
-        </li>
-        <li class="mx-nav__has-subnav">
-          <a href="#">
-            Who we are
-          </a>
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
-            Sub-navigation
-          </button>
-          <ul class="mx-nav__level-3">
-            <li>
-              <a href="#">
-                Our team
-              </a>
-            </li>
-            <li>
-              <a href="#"
-                 aria-current="page"
-              >
-                Our philosophy
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Why music?
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a href="#">
-            Join us
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            Careers
-          </a>
-        </li>
-      </ul>
-    </li>
-    <li>
-      <a href="#">
-        Contact
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        Resources
-      </a>
-    </li>
-  </ul>
-</nav>
+    </div>
+    <ul class="mx-nav__level-1">
+      <li>
+        <a href="#">
+          News
+        </a>
+      </li>
+      <li class="mx-nav__has-subnav">
+        <a href="#">
+          What we do
+        </a>
+        <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
+          Sub-navigation
+        </button>
+        <ul class="mx-nav__level-2">
+          <li>
+            <a href="#">
+              Events
+            </a>
+          </li>
+          <li class="mx-nav__has-subnav">
+            <a href="#">
+              Who we are
+            </a>
+            <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
+              Sub-navigation
+            </button>
+            <ul class="mx-nav__level-3">
+              <li>
+                <a href="#">
+                  Our team
+                </a>
+              </li>
+              <li>
+                <a href="#"
+                   aria-current="page"
+                >
+                  Our philosophy
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  Why music?
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <a href="#">
+              Join us
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Careers
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#">
+          Contact
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          Resources
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
 `;

package/src/Component/SideNavigation/side-navigation.css

@@ -14,10 +14,6 @@
       font-weight: var(--font-weight-bold);
       text-decoration-line: none;
 
-      &:is(:focus, :focus-visible) {
-        outline-offset: -1px;
-      }
-
       &:hover {
         text-decoration-line: underline;
       }
@@ -25,6 +21,8 @@
   }
 
   .mx-side-nav {
+    --outline-offset: -1px;
+
     & ul li {
       position: relative;
 
@@ -40,10 +38,6 @@
         padding-block: var(--item-spacing, var(--spacing-xxs));
         padding-inline: var(--indent, var(--spacing-xxs))
           var(--item-spacing, var(--spacing-xxs));
-
-        &:is(:focus, :focus-visible) {
-          outline-offset: -1px;
-        }
       }
     }
 

package/src/Component/SocialLinks/SocialLinks.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./social-links.twig"
 import Heading from "../../Atom/Heading/heading.twig"
 import Link from "../../Atom/Link/link.twig"

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

@@ -1,32 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/SocialLinks SocialLinks smoke-test 1`] = `
-<nav class="mx-social-links"
-     aria-label="Social media links"
->
-  <h2 class=" mx-heading--m">
-    Follow us
-  </h2>
-  <a href="#">
-    <span class="mx-icon mx-icon--facebook  mx-icon--size-md">
-    </span>
-    <span class="sr-only">
-      Facebook
-    </span>
-  </a>
-  <a href="#">
-    <span class="mx-icon mx-icon--instagram  mx-icon--size-md">
-    </span>
-    <span class="sr-only">
-      Instagram
-    </span>
-  </a>
-  <a href="#">
-    <span class="mx-icon mx-icon--linkedin  mx-icon--size-md">
-    </span>
-    <span class="sr-only">
-      LinkedIn
-    </span>
-  </a>
-</nav>
+<div class="mx-page default">
+  <nav class="mx-social-links"
+       aria-label="Social media links"
+  >
+    <h2 class=" mx-heading--m">
+      Follow us
+    </h2>
+    <a href="#">
+      <span class="mx-icon mx-icon--facebook  mx-icon--size-md">
+      </span>
+      <span class="sr-only">
+        Facebook
+      </span>
+    </a>
+    <a href="#">
+      <span class="mx-icon mx-icon--instagram  mx-icon--size-md">
+      </span>
+      <span class="sr-only">
+        Instagram
+      </span>
+    </a>
+    <a href="#">
+      <span class="mx-icon mx-icon--linkedin  mx-icon--size-md">
+      </span>
+      <span class="sr-only">
+        LinkedIn
+      </span>
+    </a>
+  </nav>
+</div>
 `;

package/src/Component/Steps/Steps.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./steps.twig"
 import StepItem from "./step-item.twig"
 import "./steps.css"

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

@@ -1,110 +1,118 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Steps Counters smoke-test 1`] = `
-<div class="mx-steps  mx-steps--counters">
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      <h2>
-        Funk
-      </h2>
-      <p>
-        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-      </p>
+<div class="mx-page default">
+  <div class="mx-steps  mx-steps--counters">
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        <h2>
+          Funk
+        </h2>
+        <p>
+          Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+        </p>
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      <h3>
-        Soul
-      </h3>
-      <p>
-        Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
-      </p>
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        <h3>
+          Soul
+        </h3>
+        <p>
+          Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+        </p>
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      <h4>
-        Motown
-      </h4>
-      <p>
-        Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-      </p>
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        <h4>
+          Motown
+        </h4>
+        <p>
+          Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+        </p>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`Component/Steps Progress smoke-test 1`] = `
-<div class="mx-steps mx-steps--supplementary ">
-  <div class="mx-steps__panel mx-steps--fill">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+<div class="mx-page default">
+  <div class="mx-steps mx-steps--supplementary ">
+    <div class="mx-steps__panel mx-steps--fill">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`Component/Steps ProgressCounters smoke-test 1`] = `
-<div class="mx-steps mx-steps--dark mx-steps--counters ">
-  <div class="mx-steps__panel mx-steps--fill">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+<div class="mx-page default">
+  <div class="mx-steps mx-steps--dark mx-steps--counters ">
+    <div class="mx-steps__panel mx-steps--fill">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel mx-steps--fill">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+    <div class="mx-steps__panel mx-steps--fill">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`Component/Steps Steps smoke-test 1`] = `
-<div class="mx-steps ">
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      <h2>
-        Funk
-      </h2>
-      <p>
-        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-      </p>
+<div class="mx-page default">
+  <div class="mx-steps ">
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        <h2>
+          Funk
+        </h2>
+        <p>
+          Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+        </p>
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      <h3>
-        Soul
-      </h3>
-      <p>
-        Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
-      </p>
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        <h3>
+          Soul
+        </h3>
+        <p>
+          Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+        </p>
+      </div>
     </div>
-  </div>
-  <div class="mx-steps__panel ">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
-      <h4>
-        Motown
-      </h4>
-      <p>
-        Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-      </p>
+    <div class="mx-steps__panel ">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+        <h4>
+          Motown
+        </h4>
+        <p>
+          Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+        </p>
+      </div>
     </div>
   </div>
 </div>

package/src/Component/Steps/steps.css

@@ -63,7 +63,7 @@
   .mx-steps__panel-content {
     padding-block: 0 var(--spacing, var(--spacing-l));
     padding-inline-start: var(--indent, var(--spacing-xxl));
-    max-inline-size: var(--container-max-width);
+    inline-size: min(100%, var(--container-max-width));
 
     &::before {
       content: "";

package/src/Component/Sticky/Sticky.stories.ts

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

package/src/Component/Sticky/Sticky.stories.tsx

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

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

@@ -1,12 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Sticky Sticky smoke-test 1`] = `
-<div class="sticky__trigger">
+<div class="mx-page default">
+  <div class="sticky__trigger">
+  </div>
+  <mx-sticky style="--sticky-offset: 0"
+             offsetpropname="--sticky-offset"
+             class="mx-sticky"
+  >
+    I am sticky.
+  </mx-sticky>
 </div>
-<mx-sticky style="--sticky-offset: 0"
-           offsetpropname="--sticky-offset"
-           class="mx-sticky"
->
-  I am sticky.
-</mx-sticky>
 `;

package/src/Component/Tabs/Tabs.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./tabs.twig"
 import TabItem from "./tab-item.twig"
 import "./tabs.css"

package/src/Component/Tabs/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import { Fragment } from "react"
 import Component from "./Tabs"
 import TabDropMenu from "./Components/TabDropMenu"

package/src/Component/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import React, {
   Dispatch,
   SetStateAction,
   createContext,
-  useContext,
+  use,
   useState,
   useEffect,
   useMemo,
@@ -26,7 +26,7 @@ type TabContextValues = {
 
 const TabContext: Context<TabContextValues> =
   createContext<TabContextValues>(null)
-export const useTabContext = () => useContext(TabContext)
+export const useTabContext = () => use(TabContext)
 
 type TabsProps = PropsWithChildren & {
   id: string
@@ -79,7 +79,7 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
   )
 
   return (
-    <TabContext.Provider value={values}>
+    <TabContext value={values}>
       <DropMenuProvider
         id={tabsId}
         onClick={handleClick}
@@ -93,7 +93,7 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
           {children}
         </div>
       </DropMenuProvider>
-    </TabContext.Provider>
+    </TabContext>
   )
 }