@pnx-mixtape/mxds 0.1.0-rc.4 → 0.1.0-rc.6

package/src/Component/SideNavigation/SideNavigation.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
+import { expect } from "storybook/test"
 import Component from "./SideNavigation"
 import SideNavigationTree from "./Components/SideNavigationTree"
 import "../Navigation/navigation.css"
@@ -66,3 +67,33 @@ const meta: Meta<typeof Component> = {
 export default meta
 
 export const SideNavigation: StoryObj<typeof meta> = {}
+
+export const Collapsible: StoryObj<typeof meta> = {
+  args: {
+    collapsible: true,
+  },
+  play: async ({ canvas, userEvent, step }) => {
+    const item = canvas.getByRole("link", { name: "What we do" }).closest("li")
+    const trigger = item.querySelector(":scope > .mx-nav__toggle")
+    const list = item.querySelector(":scope > ul")
+
+    await step("Opens the active trail", async () => {
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(trigger).toHaveAttribute("aria-controls", list.id)
+      await expect(list).not.toHaveAttribute("inert")
+    })
+
+    await step("Closes on click", async () => {
+      await userEvent.click(trigger)
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(list).toHaveAttribute("inert")
+    })
+
+    await step("Reopens on click", async () => {
+      await userEvent.click(trigger)
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(list).not.toHaveAttribute("inert")
+      ;(trigger as HTMLElement).blur()
+    })
+  },
+}

package/src/Component/SideNavigation/SideNavigation.tsx

@@ -1,18 +1,23 @@
-import { JSX, ReactNode, PropsWithChildren, useId } from "react"
+import { JSX, ReactNode, PropsWithChildren, createContext, useId } from "react"
 import classNames from "classnames"
 
 type SideNavigationProps = PropsWithChildren & {
   parent?: ReactNode
   title?: string
   id?: string
+  collapsible?: boolean
   className?: string
 }
 
+// Whether sub-lists in a nested SideNavigationTree can be collapsed.
+export const SideNavigationContext = createContext<boolean>(false)
+
 const SideNavigation = ({
   children,
   parent,
   title,
   id,
+  collapsible = false,
   className,
 }: SideNavigationProps): JSX.Element => {
   const autoId = useId()
@@ -20,13 +25,18 @@ const SideNavigation = ({
 
   return (
     <nav
-      className={classNames("mx-nav", "mx-side-nav", className)}
+      className={classNames(
+        "mx-nav",
+        "mx-side-nav",
+        { "mx-nav--collapsible": collapsible },
+        className,
+      )}
       {...(title ? { "aria-label": title } : { "aria-labelledby": navId })}
     >
       <div className="mx-side-nav__parent" id={navId}>
         {parent}
       </div>
-      {children}
+      <SideNavigationContext value={collapsible}>{children}</SideNavigationContext>
     </nav>
   )
 }

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

@@ -1,9 +1,93 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Collapsible 1`] = `
+"
+
+<mx-nav openactive="">
+<nav class="mx-nav mx-side-nav mx-nav--collapsible" aria-label="Sidebar nav">
+  <div class="mx-side-nav__parent" id="sidenav-story">
+    
+<a href="#">
+  
+  About  
+</a>
+
+  </div>
+      <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
+            News
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="unique-2">
+            What we do
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="unique-0">Sub-navigation</button>
+              <ul class="mx-nav__level-2" id="unique-0" aria-labelledby="unique-1">
+          <li>
+                  <a href="#">
+            Events
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="unique-3">
+            Who we are
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="unique-2">Sub-navigation</button>
+              <ul class="mx-nav__level-3" id="unique-1" aria-labelledby="unique-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>
+</mx-nav>
+"
+`;
+
 exports[`Side Navigation 1`] = `
 "
 
-<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav" "="">
+<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav">
   <div class="mx-side-nav__parent" id="sidenav-story">
     
 <a href="#">
@@ -22,7 +106,7 @@ exports[`Side Navigation 1`] = `
                   <a href="#">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">
@@ -33,7 +117,7 @@ exports[`Side Navigation 1`] = `
                   <a href="#">
             Who we are
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-3">
           <li>
                   <a href="#">

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Collapsible 1`] = `"<nav class="mx-nav mx-side-nav mx-nav--collapsible" aria-label="Sidebar nav"><div class="mx-side-nav__parent" id="sidenav-story"><a class="mx-link" href="#">About</a></div><ul class="mx-nav__level-1"><li><a href="#" class="mx-link">News</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link" id="_r_17_">What we do</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="_r_16_">Sub-navigation</button><ul class="mx-nav__level-2" id="_r_16_" aria-labelledby="_r_17_"><li><a href="#" class="mx-link">Events</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link" id="_r_1d_">Who we are</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="_r_1c_">Sub-navigation</button><ul class="mx-nav__level-3" id="_r_1c_" aria-labelledby="_r_1d_"><li><a href="#" class="mx-link">Our team</a></li><li><a href="#" class="mx-link" aria-current="page">Our philosophy</a></li><li><a href="#" class="mx-link">Why music?</a></li></ul></li><li><a href="#" class="mx-link">Join us</a></li><li><a href="#" class="mx-link">Careers</a></li></ul></li><li><a href="#" class="mx-link">Contact</a></li><li><a href="#" class="mx-link">Resources</a></li></ul></nav>"`;
+
 exports[`Side Navigation 1`] = `"<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav"><div class="mx-side-nav__parent" id="sidenav-story"><a class="mx-link" href="#">About</a></div><ul class="mx-nav__level-1"><li><a href="#" class="mx-link">News</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link">What we do</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button><ul class="mx-nav__level-2"><li><a href="#" class="mx-link">Events</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link">Who we are</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button><ul class="mx-nav__level-3"><li><a href="#" class="mx-link">Our team</a></li><li><a href="#" class="mx-link" aria-current="page">Our philosophy</a></li><li><a href="#" class="mx-link">Why music?</a></li></ul></li><li><a href="#" class="mx-link">Join us</a></li><li><a href="#" class="mx-link">Careers</a></li></ul></li><li><a href="#" class="mx-link">Contact</a></li><li><a href="#" class="mx-link">Resources</a></li></ul></nav>"`;

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

@@ -41,7 +41,7 @@
     & .mx-nav__level-2 > li > a {
       --indent: var(--spacing-s);
 
-      @media (--global-nav-up) {
+      @media (--sidebar-up) {
         --indent: var(--spacing-m);
       }
     }
@@ -49,7 +49,7 @@
     & .mx-nav__level-3 > li > a {
       --indent: var(--spacing-m);
 
-      @media (--global-nav-up) {
+      @media (--sidebar-up) {
         --indent: var(--spacing-l);
       }
     }
@@ -62,7 +62,7 @@
       color: var(--nav-active-foreground, inherit);
     }
 
-    & .mx-nav__toggle {
+    &:not(.mx-nav--collapsible) .mx-nav__toggle {
       display: none;
     }
   }

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

@@ -2,7 +2,8 @@
 {% set baseClass = 'mx-nav' %}
 {% set classes = [
   baseClass,
-  'mx-side-nav'
+  'mx-side-nav',
+  collapsible ? 'mx-nav--collapsible' : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
@@ -19,7 +20,7 @@
           {{ item.link.title }}
         {% endif %}
         {% if item.items is not empty %}
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
           {{ nav.menutree(item.items, level + 1, setInert, baseClass) }}
         {% endif %}
       </li>
@@ -27,9 +28,15 @@
   </ul>
 {% endmacro %}
 
-<nav{{ attributes }}{% if title is not empty %} aria-label="{{ title }}"{% else %} aria-labelledby="{{ id }}{% endif %}">
+{% if collapsible %}
+<mx-nav openActive>
+{% endif %}
+<nav{{ attributes }}{% if title is not empty %} aria-label="{{ title }}"{% else %} aria-labelledby="{{ id }}"{% endif %}>
   <div class="mx-side-nav__parent" id="{{ id }}">
     {{ parent }}
   </div>
   {{ nav.menutree(items, 0, false, baseClass) }}
 </nav>
+{% if collapsible %}
+</mx-nav>
+{% endif %}

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

@@ -5,7 +5,13 @@ import { useTabContext } from "../Tabs"
 const TabDropMenu = ({ children }: PropsWithChildren): JSX.Element => {
   const { activeTabLabel } = useTabContext()
   return (
-    <DropMenu label={activeTabLabel} className="mobile-only" role="tablist">
+    <DropMenu
+      label={activeTabLabel}
+      className="mobile-only"
+      role="tablist"
+      description="Selecting a tab updates the content below. Press escape to close."
+      triggerDescription="Select a tab"
+    >
       {children}
     </DropMenu>
   )

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

@@ -150,8 +150,10 @@ export default class Tabs extends HTMLElement {
     this.dropTriggerClasses =
       this.getAttribute("dropTriggerClasses") ||
       "mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-    this.dropMenuId = this.id || makeAnchor("tab-drop-menu")
+    this.dropMenuId = this.id ? `${this.id}-drop-menu` : makeAnchor("tab-drop-menu")
     const name = `${this.dropMenuId}-target`
+    const triggerDescriptionId = `${name}-description`
+    const menuDescriptionId = `${this.dropMenuId}-description`
     const tabDropMenu = new DropMenu()
     tabDropMenu.setAttribute("closeOnClick", "true")
     const trigger = createElement(`<button
@@ -159,20 +161,28 @@ export default class Tabs extends HTMLElement {
                   class="mx-popover__trigger ${this.dropTriggerClasses}"
                   popovertarget="${this.dropMenuId}"
                   style="anchor-name: --${this.dropMenuId}"
+                  aria-describedby="${triggerDescriptionId}"
                   hidden
               ></button>`)
+    const triggerDescription = createElement(
+      `<span id="${triggerDescriptionId}" class="sr-only" aria-hidden="true">Select a tab</span>`,
+    )
+    const menuDescription = createElement(
+      `<span id="${menuDescriptionId}" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span>`,
+    )
     const menu = createElement(
       `<div
                   class="mx-popover mx-drop-menu"
                   id="${this.dropMenuId}"
-                  aria-describedby="${name}"
+                  aria-labelledby="${name}"
+                  aria-describedby="${menuDescriptionId}"
                   style="position-anchor: --${this.dropMenuId}"
                   data-placement="${PopoverPlacementModifier.BOTTOM_START}"
                   popover
                   role="tablist"
               ></div>`,
     )
-    tabDropMenu.append(trigger, menu)
+    tabDropMenu.append(trigger, triggerDescription, menuDescription, menu)
     this.prepend(tabDropMenu)
     return tabDropMenu
   }

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

@@ -180,22 +180,43 @@ export const Tabs: Story = {
 
 /**
  * Steps a virtual screen reader through the tab list and asserts on what it announces.
+ *
+ * Below `Elements/Tabs.ts`'s breakpoint (`mq`, default `(max-width: 720px)`)
+ * the tab list collapses into a `DropMenu` popover trigger - see the component
+ * doc comment above. This branches on the real `matchMedia(...).matches`,
+ * same as the `Tabs` interaction story above, and is paired with
+ * `chromatic.modes` on `meta` so both shapes get exercised in CI. See
+ * "Testing Mobile / matchMedia-Driven Behavior in Play Functions" in
+ * docs/Testing.md.
  */
 export const ScreenReaderAnnouncements: Story = {
   play: async () => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "tablist, orientated horizontally",
-      "tab, Funk, selected, 1 control, position 1, set size 3",
-      "tab, Soul, not selected, 1 control, position 2, set size 3",
-      "tab, Motown, not selected, 1 control, position 3, set size 3",
-      "end of tablist, orientated horizontally",
-      "tabpanel, Funk",
-      "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.",
-      "end of tabpanel, Funk",
-      "end of document",
-    ])
+
+    if (isMobile) {
+      await expect(log).toEqual([
+        "document",
+        "button, Funk, Select a tab",
+        "tabpanel, Funk",
+        "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.",
+        "end of tabpanel, Funk",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "tablist, orientated horizontally",
+        "tab, Funk, selected, 1 control, position 1, set size 3",
+        "tab, Soul, not selected, 1 control, position 2, set size 3",
+        "tab, Motown, not selected, 1 control, position 3, set size 3",
+        "end of tablist, orientated horizontally",
+        "tabpanel, Funk",
+        "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.",
+        "end of tabpanel, Funk",
+        "end of document",
+      ])
+    }
   },
 }
 

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

@@ -121,20 +121,34 @@ export const Default: StoryObj<typeof meta> = {
  */
 export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
   play: async () => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "tablist, orientated horizontally",
-      "tab, Tab 1, selected, 1 control, position 1, set size 3",
-      "tab, Tab 2, not selected, 1 control, position 2, set size 3",
-      "tab, Tab 3, not selected, 1 control, position 3, set size 3",
-      "end of tablist, orientated horizontally",
-      "tabpanel, Tab 1",
-      "paragraph",
-      "This is tab 1",
-      "end of paragraph",
-      "end of tabpanel, Tab 1",
-      "end of document",
-    ])
+    if (isMobile) {
+      await expect(log).toEqual([
+        "document",
+        "button, Tab 1, Select a tab",
+        "tabpanel, Tab 1",
+        "paragraph",
+        "This is tab 1",
+        "end of paragraph",
+        "end of tabpanel, Tab 1",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "tablist, orientated horizontally",
+        "tab, Tab 1, selected, 1 control, position 1, set size 3",
+        "tab, Tab 2, not selected, 1 control, position 2, set size 3",
+        "tab, Tab 3, not selected, 1 control, position 3, set size 3",
+        "end of tablist, orientated horizontally",
+        "tabpanel, Tab 1",
+        "paragraph",
+        "This is tab 1",
+        "end of paragraph",
+        "end of tabpanel, Tab 1",
+        "end of document",
+      ])
+    }
   },
 }

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

@@ -3,7 +3,7 @@
 exports[`Screen Reader Announcements 1`] = `
 "
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example-drop-menu" style="anchor-name: --tab-example-drop-menu" aria-describedby="unique-0" hidden="">Funk</button><span id="unique-4" class="sr-only" aria-hidden="true">Select a tab</span><span id="unique-5" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="tab-example-drop-menu" aria-labelledby="unique-1" aria-describedby="unique-1" style="position-anchor: --tab-example-drop-menu" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-2" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-4" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-5" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-7" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   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>
@@ -21,7 +21,7 @@ exports[`Screen Reader Announcements 1`] = `
 exports[`Tabs 1`] = `
 "
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example-drop-menu" style="anchor-name: --tab-example-drop-menu" aria-describedby="unique-0" hidden="">Funk</button><span id="unique-4" class="sr-only" aria-hidden="true">Select a tab</span><span id="unique-5" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="tab-example-drop-menu" aria-labelledby="unique-1" aria-describedby="unique-1" style="position-anchor: --tab-example-drop-menu" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-2" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-4" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-5" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-7" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   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>
@@ -41,7 +41,7 @@ exports[`With Heading 1`] = `
 
 <h2>Tabs heading</h2>
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example-drop-menu" style="anchor-name: --tab-example-drop-menu" aria-describedby="unique-0" hidden="">Funk</button><span id="unique-4" class="sr-only" aria-hidden="true">Select a tab</span><span id="unique-5" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="tab-example-drop-menu" aria-labelledby="unique-1" aria-describedby="unique-1" style="position-anchor: --tab-example-drop-menu" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-2" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-4" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-5" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-7" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   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>

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

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0" inert=""><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
+exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" aria-describedby="tabs-storybook-target-desc" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><span id="tabs-storybook-target-desc" class="sr-only" aria-hidden="true">Select a tab</span><span id="tabs-storybook-description" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0" inert=""><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0"><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
+exports[`Screen Reader Announcements 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" aria-describedby="tabs-storybook-target-desc" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><span id="tabs-storybook-target-desc" class="sr-only" aria-hidden="true">Select a tab</span><span id="tabs-storybook-description" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0"><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;

package/src/Component/Translate/Elements/Translate.ts

@@ -0,0 +1,76 @@
+/**
+ * Translate
+ * @file A language switcher built on `DropMenu` (roving-focus keyboard nav,
+ * click-to-select, and the `drop-menu-select` event all come from there for
+ * free — see DropMenu's own docs). This layer drives Google's Website
+ * Translator widget in response to that selection via the shared
+ * `GoogleTranslateWidget` class.
+ */
+
+import DropMenu, { DropMenuEvent } from "../../DropMenu/Elements/DropMenu"
+import GoogleTranslateWidget from "../../../Utility/Elements/google-translate-widget"
+
+export default class Translate extends DropMenu {
+  widget?: GoogleTranslateWidget
+
+  async connectedCallback(): Promise<void> {
+    await super.connectedCallback()
+    if (!this.container) return
+
+    this.widget = new GoogleTranslateWidget(this, {
+      defaultLanguage: this.dataset.defaultLanguage || "en",
+      blockedPaths: (this.dataset.blockedPaths || "")
+        .split(",")
+        .map(path => path.trim())
+        .filter(Boolean),
+      scriptUrl: this.dataset.scriptUrl,
+      storageKey: this.dataset.storageKey,
+      updateTriggerLabel: this.dataset.updateTriggerLabel !== "false",
+      notice: this.dataset.noticeContent
+        ? {
+            content: this.dataset.noticeContent,
+            blockedContent: this.dataset.noticeBlockedContent,
+            anchorSelector: this.dataset.noticeAnchor,
+            position: this.dataset.noticePosition as InsertPosition | undefined,
+          }
+        : undefined,
+      onLanguageChange: code => this.dispatchLifecycleEvent("translate-language-change", code),
+    })
+    this.widget.init()
+
+    const { signal } = this.controller
+    this.container.addEventListener("drop-menu-select", this.handleLanguageSelect, { signal })
+    this.container.addEventListener(
+      "toggle",
+      (event: Event) => {
+        const { newState } = event as ToggleEvent
+        this.dispatchLifecycleEvent(newState === "open" ? "translate-open" : "translate-close")
+      },
+      { signal },
+    )
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.widget?.destroy()
+  }
+
+  handleLanguageSelect = (event: Event): void => {
+    const { target } = (event as DropMenuEvent).detail
+    if (!(target instanceof HTMLAnchorElement)) return
+    const code = target.dataset.language
+    if (code) this.widget?.setLanguage(code)
+  }
+
+  dispatchLifecycleEvent(name: string, code?: string): void {
+    this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: code ? { code } : {} }))
+  }
+}
+
+if (!customElements.get("mx-translate")) customElements.define("mx-translate", Translate)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-translate": Translate
+  }
+}