@pnx-mixtape/mxds 0.0.21 → 0.0.23

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

@@ -1,10 +1,32 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/Steps Accent smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-steps mx-steps--supplementary mx-steps--counters">
+    <div class="mx-steps__panel mx-steps--fill">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        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 class="mx-steps__panel mx-steps--fill">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        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 class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        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 Counters smoke-test 1`] = `
 <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 rich-text">
+  <div class="mx-steps mx-steps--light mx-steps--counters">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         <h2>
           Funk
         </h2>
@@ -13,8 +35,8 @@ exports[`Component/Steps Counters smoke-test 1`] = `
         </p>
       </div>
     </div>
-    <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         <h3>
           Soul
         </h3>
@@ -23,8 +45,8 @@ exports[`Component/Steps Counters smoke-test 1`] = `
         </p>
       </div>
     </div>
-    <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         <h4>
           Motown
         </h4>
@@ -37,21 +59,80 @@ exports[`Component/Steps Counters smoke-test 1`] = `
 </div>
 `;
 
-exports[`Component/Steps Progress smoke-test 1`] = `
+exports[`Component/Steps Filled smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-steps mx-steps--supplementary ">
+  <div class="mx-steps mx-steps--light mx-steps--fill">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        <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 class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        <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 class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        <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 Highlighted smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-steps mx-steps--light">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        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 class="mx-steps__panel mx-steps--fill">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        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 class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+        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 Primary smoke-test 1`] = `
+<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 mx-rich-text">
         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 class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel mx-steps--fill">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         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 class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         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>
@@ -59,21 +140,21 @@ exports[`Component/Steps Progress smoke-test 1`] = `
 </div>
 `;
 
-exports[`Component/Steps ProgressCounters smoke-test 1`] = `
+exports[`Component/Steps Progress smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-steps mx-steps--dark mx-steps--counters ">
+  <div class="mx-steps mx-steps--light mx-steps--counters">
     <div class="mx-steps__panel mx-steps--fill">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         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 class="mx-steps__panel mx-steps--fill">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         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 class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         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>
@@ -83,9 +164,9 @@ exports[`Component/Steps ProgressCounters smoke-test 1`] = `
 
 exports[`Component/Steps Steps smoke-test 1`] = `
 <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 rich-text">
+  <div class="mx-steps mx-steps--light">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         <h2>
           Funk
         </h2>
@@ -94,8 +175,8 @@ exports[`Component/Steps Steps smoke-test 1`] = `
         </p>
       </div>
     </div>
-    <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         <h3>
           Soul
         </h3>
@@ -104,8 +185,8 @@ exports[`Component/Steps Steps smoke-test 1`] = `
         </p>
       </div>
     </div>
-    <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+    <div class="mx-steps__panel">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
         <h4>
           Motown
         </h4>

package/src/Component/Steps/step-item.twig

@@ -5,7 +5,7 @@
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <div{{ attributes }}>
-  <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
+  <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
   {{ content }}
   </div>
 </div>

package/src/Component/Steps/steps.css

@@ -12,8 +12,7 @@
 
     &::before {
       content: "";
-      border: var(--line-width, 2px) solid
-        var(--line-colour, var(--colour-border));
+      border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
       background-color: var(--background, var(--colour-background));
       border-radius: 100%;
       inline-size: var(--counter-size, 2rem);
@@ -33,12 +32,8 @@
       font-size: var(--font-size-s);
       font-weight: var(--font-weight-bold);
       line-height: var(--line-height-ui);
-      inline-size: calc(
-        var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
-      );
-      block-size: calc(
-        var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
-      );
+      inline-size: calc(var(--counter-size, 2rem) + (var(--line-width, 2px) * 2));
+      block-size: calc(var(--counter-size, 2rem) + (var(--line-width, 2px) * 2));
       justify-content: center;
       inset-block-start: var(--counter-top, 0);
       inset-inline-start: 0;
@@ -69,9 +64,7 @@
       content: "";
       inline-size: var(--line-width, 2px);
       background-color: var(--line-colour, var(--colour-border));
-      inset-inline-start: calc(
-        (var(--counter-size, 2rem) / 2) + (var(--line-width, 2px))
-      );
+      inset-inline-start: calc((var(--counter-size, 2rem) / 2) + (var(--line-width, 2px)));
       inset-block: 0;
       position: absolute;
     }

package/src/Component/Sticky/Elements/Sticky.ts

@@ -58,10 +58,7 @@ export default class Sticky extends HTMLElement {
     this.rO = new ResizeObserver(entries => {
       entries.forEach(({ borderBoxSize }) => {
         const [{ blockSize }] = borderBoxSize
-        document.body.style.setProperty(
-          this.offsetPropName,
-          `${blockSize.toFixed(1)}px`,
-        )
+        document.body.style.setProperty(this.offsetPropName, `${blockSize.toFixed(1)}px`)
       })
     })
     this.rO.observe(this)
@@ -75,16 +72,14 @@ export default class Sticky extends HTMLElement {
   get trigger(): HTMLDivElement {
     let trigger: HTMLDivElement | null = this.querySelector(".sticky__trigger")
     if (!trigger) {
-      trigger = createElement(
-        '<div class="sticky__trigger"></div>',
-      ) as HTMLDivElement
+      trigger = createElement('<div class="sticky__trigger"></div>') as HTMLDivElement
       this.insertAdjacentElement("beforebegin", trigger)
     }
     return trigger
   }
 }
 
-customElements.define("mx-sticky", Sticky)
+if (!customElements.get("mx-sticky")) customElements.define("mx-sticky", Sticky)
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3,17 +3,49 @@ import Component from "./sticky.twig"
 import "./sticky.css"
 import "./Elements/Sticky"
 
+/**
+ * Helper component for making elements sticky on scroll, this isn't used on its own.
+ * For an `is-stuck` state, or a sticky trigger include the `Sticky` element javascript.
+ */
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
   args: {
+    className: "mx-sticky",
+    offset: 0,
     content: "I am sticky.",
   },
+  argTypes: {
+    className: {
+      description: "Apply sticky-ness at a certain breakpoint",
+      options: ["mx-sticky", "mx-sticky--m", "mx-sticky--l"],
+      type: "string",
+      table: {
+        defaultValue: { summary: "mx-sticky" },
+      },
+    },
+    content: {
+      description: "Content that should be sticky on scroll.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+      },
+    },
+    offset: {
+      description: "Optional amount to offset by",
+      type: "number",
+      table: {
+        defaultValue: { summary: "0" },
+      },
+    },
+  },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Sticky: Story = {
-  args: {},
-}
+export const Sticky: Story = {}

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Sticky Sticky smoke-test 1`] = `
 <div class="mx-page default">

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Sticky Sticky smoke-test 1`] = `
 <div class="sticky"

package/src/Component/Sticky/sticky.twig

@@ -1,3 +1,3 @@
-<mx-sticky style="--sticky-offset: 0" offsetPropName="--sticky-offset" class="mx-sticky">
+<mx-sticky style="--sticky-offset: {{ offset|default(0) }}" offsetPropName="--sticky-offset" class="{{ className|default('mx-sticky') }}">
   {{ content }}
 </mx-sticky>

package/src/Component/Tabs/Components/Tab.tsx

@@ -13,16 +13,10 @@ const Tab = ({ id, className, children }: TabProps): JSX.Element => {
   const handleClick = () => {
     setActiveTab(id)
     if (typeof window === "undefined") return
-    const urlParams: URLSearchParams = new URLSearchParams(
-      window.location.search,
-    )
+    const urlParams: URLSearchParams = new URLSearchParams(window.location.search)
     if (urlParams.get("tab") === id) return
     urlParams.set("tab", id)
-    window.history.replaceState(
-      {},
-      "",
-      `${window.location.pathname}?${urlParams.toString()}`,
-    )
+    window.history.replaceState({}, "", `${window.location.pathname}?${urlParams.toString()}`)
   }
 
   return (

package/src/Component/Tabs/Components/TabPanel.tsx

@@ -7,11 +7,7 @@ type TabPanelProps = PropsWithChildren & {
   className?: string
 }
 
-const TabPanel = ({
-  children,
-  id,
-  className = "mx-section--l",
-}: TabPanelProps): JSX.Element => {
+const TabPanel = ({ children, id, className = "mx-section--l" }: TabPanelProps): JSX.Element => {
   const { activeTab } = useTabContext()
   const isActive: boolean = activeTab === id
   return (

package/src/Component/Tabs/Elements/Tabs.ts

@@ -4,6 +4,7 @@
 
 import DropMenu, { DropMenuEvent } from "../../DropMenu/Elements/DropMenu"
 import { createElement, makeAnchor } from "../../../Utility/utilities"
+import { PopoverPlacementModifier } from "@pnx-mixtape/ids-shape"
 
 type TabsType = {
   panel: HTMLElement
@@ -67,27 +68,18 @@ export default class Tabs extends HTMLElement {
     this.controller.abort()
   }
 
-  handleBreakpoint = ({
-    matches,
-  }: MediaQueryList | MediaQueryListEvent): void => {
+  handleBreakpoint = ({ matches }: MediaQueryList | MediaQueryListEvent): void => {
     const { signal }: AbortController = this.controller
     this.dropMenuTrigger.toggleAttribute("hidden", !matches)
     this.tabList.toggleAttribute("hidden", matches)
     if (matches) {
-      this.dropMenuMenu.addEventListener(
-        "drop-menu-select",
-        this.handleDropMenuSelect,
-        { signal },
-      )
+      this.dropMenuMenu.addEventListener("drop-menu-select", this.handleDropMenuSelect, { signal })
       this.tabList.removeEventListener("click", this.handleClick)
       this.tabList.removeEventListener("keydown", this.handleKeydown)
     } else {
       this.tabList.addEventListener("click", this.handleClick, { signal })
       this.tabList.addEventListener("keydown", this.handleKeydown, { signal })
-      this.dropMenuMenu.removeEventListener(
-        "drop-menu-select",
-        this.handleDropMenuSelect,
-      )
+      this.dropMenuMenu.removeEventListener("drop-menu-select", this.handleDropMenuSelect)
     }
   }
 
@@ -158,16 +150,18 @@ export default class Tabs extends HTMLElement {
     tabDropMenu.setAttribute("closeOnClick", "true")
     const trigger = createElement(`<button
                   id="${name}"
-                  class="mx-drop-menu__trigger ${this.dropTriggerClasses}"
+                  class="mx-popover__trigger ${this.dropTriggerClasses}"
                   popovertarget="${this.dropMenuId}"
+                  style="anchor-name: --${this.dropMenuId}"
                   hidden
               ></button>`)
     const menu = createElement(
       `<div
-                  class="mx-drop-menu"
+                  class="mx-popover mx-drop-menu"
                   id="${this.dropMenuId}"
-                  aria-labelledby="${name}"
-                  anchor="${name}"
+                  aria-describedby="${name}"
+                  style="position-anchor: --${this.dropMenuId}"
+                  data-placement="${PopoverPlacementModifier.BOTTOM_START}"
                   popover
                   role="tablist"
               ></div>`,
@@ -187,9 +181,7 @@ export default class Tabs extends HTMLElement {
 
   get tabList(): HTMLDivElement {
     this.tabListClasses = this.getAttribute("tabListClasses") || "mx-tabs__list"
-    const existingTabList: HTMLDivElement = this.querySelector(
-      '[role="tablist"]:not([popover])',
-    )
+    const existingTabList: HTMLDivElement = this.querySelector('[role="tablist"]:not([popover])')
     if (existingTabList) return existingTabList
     const tabList = createElement(
       `<div class="${this.tabListClasses}" role="tablist" hidden></div>`,
@@ -208,11 +200,15 @@ export default class Tabs extends HTMLElement {
   }
 
   get panels(): NodeListOf<HTMLElement> | null {
-    const panels: NodeListOf<HTMLElement> | null =
-      this.querySelectorAll('[role="tabpanel"]')
+    const panels: NodeListOf<HTMLElement> | null = this.querySelectorAll("[data-tab]")
     if (!panels.length) {
-      throw new Error(`${this.localName} must contain [role="tabpanel"]`)
+      throw new Error(`${this.localName} must contain [data-tab]`)
     }
+    panels.forEach(panel => {
+      panel.setAttribute("role", "tabpanel")
+      panel.setAttribute("tabindex", "0")
+      panel.setAttribute("aria-label", panel.getAttribute("data-tab"))
+    })
     return panels
   }
 
@@ -240,20 +236,14 @@ export default class Tabs extends HTMLElement {
   }
 
   handleUrlParams = (id: string): void => {
-    const urlParams: URLSearchParams = new URLSearchParams(
-      window.location.search,
-    )
+    const urlParams: URLSearchParams = new URLSearchParams(window.location.search)
     if (urlParams.get("tab") === id) return
     urlParams.set("tab", id)
-    window.history.replaceState(
-      {},
-      "",
-      `${window.location.pathname}?${urlParams.toString()}`,
-    )
+    window.history.replaceState({}, "", `${window.location.pathname}?${urlParams.toString()}`)
   }
 }
 
-customElements.define("mx-tabs", Tabs)
+if (!customElements.get("mx-tabs")) customElements.define("mx-tabs", Tabs)
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./tab-item.twig"
+import { TabItem as TabItemType } from "@pnx-mixtape/ids-shape"
+import "./tabs.css"
+
+/**
+ * Tab panel, design to be used in its parent's context (requires javascript).
+ */
+const meta: Meta<TabItemType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    id: "tab-1",
+    title: "Funk",
+    content:
+      "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.",
+  },
+  argTypes: {
+    id: {
+      description: "Unique id for the individual tab panel",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    title: {
+      description: "Label used for the tab button",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    content: {
+      description: "Tab panel content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<TabItemType>
+
+export const TabItem: Story = {}

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

@@ -1,15 +1,25 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./tabs.twig"
 import TabItem from "./tab-item.twig"
+import { HeadingTypes, Tabs as TabsType } from "@pnx-mixtape/ids-shape"
+
 import "./tabs.css"
-import "../DropMenu/drop-menu.css"
 import "./Elements/Tabs"
-import { HeadingTypes, Tabs as TabsType } from "@pnx-mixtape/ids-shape"
 
+// Deps.
+import "../Popover/popover.css"
+import "../DropMenu/drop-menu.css"
+import Heading from "../../Atom/Heading/heading.twig"
+
+/**
+ * A Tabs component built from a list of TabItems.
+ * Requires the `Tabs` element javascript to build the tab list (collapses into a [DropMenu](/?path=/docs/component-dropmenu--docs) on mobile).
+ */
 const meta: Meta<TabsType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
+    id: "tab-example",
     items: [
       TabItem({
         id: "tab-1",
@@ -43,17 +53,50 @@ const meta: Meta<TabsType> = {
         ],
       },
     },
-    deepControls: { enabled: true },
   },
   argTypes: {
-    id: { control: "text" },
-    // @ts-expect-error The controls follow the shape
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    id: {
+      description: "Unique id for the tab set",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    items: {
+      description: "A list of [TabItem](/?path=/docs/component-tabs-tabitem--docs) objects.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "TabItem[]" },
+      },
+    },
+    title: {
+      description: "Optional [Heading](/?path=/docs/atom-heading--docs) displayed above the tabs.",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+      },
+    },
   },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<TabsType>
 
 export const Tabs: Story = {}
+
+/**
+ * Can have a heading above the tabs for extra context.
+ */
+export const WithHeading: Story = {
+  args: {
+    title: Heading({
+      title: "Tabs heading",
+      as: HeadingTypes.TWO,
+    }),
+  },
+}