@pnx-mixtape/mxds 0.0.22 → 0.0.23

package/src/Component/Dialog/Dialog.stories.ts

@@ -1,23 +1,28 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import DrupalAttribute from "drupal-attribute"
 import Component from "./dialog.twig"
 import "./dialog.css"
 import "./Elements/Dialog"
-import {
-  ButtonModifiers,
-  Dialog as DialogType,
-  HeadingTypes,
-} from "@pnx-mixtape/ids-shape"
+import { ButtonModifiers, Dialog as DialogType, HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 // Deps.
 import Heading from "../../Atom/Heading/heading.twig"
 import Button from "../../Atom/Button/button.twig"
 import Link from "../../Atom/Link/link.twig"
-import DrupalAttribute from "drupal-attribute"
 
 type MxDialogType = DialogType & {
   fullscreen?: boolean
 }
 
+/**
+ * The Dialog component creates a native HTML dialog.
+ * It requires the `Dialog` custom element javascript.
+ *
+ * There should be an associated trigger [Button](/?path=/docs/atom-button--docs) or [Link](/?path=/docs/atom-link--docs)
+ * with a valid reference to the dialogs ID: `href="#example-dialog"` or `aria-controls="example-dialog"`.
+ *
+ * Adding the `[data-close]` attribute to a button inside the dialog will also close the dialog when clicked.
+ */
 const meta: Meta<MxDialogType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -32,14 +37,66 @@ const meta: Meta<MxDialogType> = {
     link: Button({
       title: "Let's go",
       modifiers: [ButtonModifiers.DARK],
-
       attributes: new DrupalAttribute()?.setAttribute("data-close", ""),
     }),
   },
   argTypes: {
-    open: { control: "boolean" },
-    modal: { control: "boolean" },
-    fullscreen: { control: "boolean" },
+    id: {
+      description: "The dialog id, used to connect the dialog to the relevant trigger.",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    open: {
+      description: "Option to set the dialog as open by default.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    modal: {
+      description: "Option to create a Modal dialog.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    fullscreen: {
+      description: "Option to make the dialog display full screen.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    title: {
+      description: "A [Heading](/?path=/docs/atom-heading--docs) component.",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+        subcategory: "Dialog content",
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Dialog content",
+      },
+    },
+    link: {
+      description: "Optional content [Link](/?path=/docs/atom-link--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Link" },
+        subcategory: "Dialog content",
+      },
+    },
   },
   render: args => `
     ${Link({
@@ -54,8 +111,14 @@ const meta: Meta<MxDialogType> = {
 export default meta
 type Story = StoryObj<MxDialogType>
 
+/**
+ * Non-modal dialog, that allows interaction outside of it. See [show()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show)
+ */
 export const Dialog: Story = {}
 
+/**
+ * Modals display in the top layer and cover all other content (with backdrop). See [showModal()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
+ */
 export const Modal: Story = {
   args: {
     id: "example-modal",
@@ -65,31 +128,25 @@ export const Modal: Story = {
     ${Button({
       title: "Open modal",
       modifiers: [ButtonModifiers.DARK],
-
-      attributes: new DrupalAttribute()?.setAttribute(
-        "aria-controls",
-        "example-modal",
-      ),
+      attributes: new DrupalAttribute()?.setAttribute("aria-controls", "example-modal"),
     })}
     ${Component(args)}
   `,
 }
 
+/**
+ * Full screen dialogs always trigger the Modal behaviour.
+ */
 export const Fullscreen: Story = {
   args: {
     id: "example-fullscreen",
     fullscreen: true,
-    modal: true,
   },
   render: args => `
     ${Button({
       title: "Open fullscreen modal",
       modifiers: [ButtonModifiers.DARK],
-
-      attributes: new DrupalAttribute()?.setAttribute(
-        "aria-controls",
-        "example-fullscreen",
-      ),
+      attributes: new DrupalAttribute()?.setAttribute("aria-controls", "example-fullscreen"),
     })}
     ${Component(args)}
   `,

package/src/Component/Dialog/Dialog.stories.tsx

@@ -17,9 +17,8 @@ const meta: Meta<typeof Component> = {
         <DialogContent>
           <Heading as={HeadingTypes.THREE}>Thanks, you're almost done!</Heading>
           <Text>
-            To finish the process, you will need to upload a few more documents.
-            Please have your confirmation email ready before starting. Are you
-            ready?
+            To finish the process, you will need to upload a few more documents. Please have your
+            confirmation email ready before starting. Are you ready?
           </Text>
           <form method="dialog">
             <div className="mx-form-actions">

package/src/Component/Dialog/Elements/Dialog.ts

@@ -3,6 +3,7 @@
  * @file Support opening/closing, and adding a scroll lock to the body.
  */
 
+// Needed until Safari supports https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
 import { handleOutsideClick, handleEscape } from "../../../Utility/utilities"
 
 export default class Dialog extends HTMLElement {
@@ -22,14 +23,10 @@ export default class Dialog extends HTMLElement {
     const { signal }: AbortController = this.controller
 
     // Open on toggle click.
-    this.openBtns?.forEach(btn =>
-      btn.addEventListener("click", this.handleOpen, { signal }),
-    )
+    this.openBtns?.forEach(btn => btn.addEventListener("click", this.handleOpen, { signal }))
 
     // Close on close button click.
-    this.closeBtns?.forEach(btn =>
-      btn.addEventListener("click", this.handleClose, { signal }),
-    )
+    this.closeBtns?.forEach(btn => btn.addEventListener("click", this.handleClose, { signal }))
 
     // Close on outside click.
     document.addEventListener(
@@ -61,9 +58,7 @@ export default class Dialog extends HTMLElement {
   disconnectedCallback(): void {
     if (!this.dialog) return
     if (typeof this.dialog.close === "function") this.dialog.close()
-    this.openBtns?.forEach((btn: Element) =>
-      btn.setAttribute("aria-expanded", "false"),
-    )
+    this.openBtns?.forEach((btn: Element) => btn.setAttribute("aria-expanded", "false"))
     if (this.isModal) document.body.classList.remove(this.scrollLockClass)
     this.controller.abort()
   }
@@ -74,18 +69,14 @@ export default class Dialog extends HTMLElement {
     if (typeof this.dialog.show === "function") {
       this.isModal ? this.dialog.showModal() : this.dialog.show()
     }
-    this.openBtns?.forEach((btn: Element) =>
-      btn.setAttribute("aria-expanded", "true"),
-    )
+    this.openBtns?.forEach((btn: Element) => btn.setAttribute("aria-expanded", "true"))
     if (this.isModal) document.body.classList.add(this.scrollLockClass)
   }
 
   handleClose = (): void => {
     if (!this.dialog) return
     if (typeof this.dialog.close === "function") this.dialog.close()
-    this.openBtns?.forEach((btn: Element) =>
-      btn.setAttribute("aria-expanded", "false"),
-    )
+    this.openBtns?.forEach((btn: Element) => btn.setAttribute("aria-expanded", "false"))
     if (this.isModal) document.body.classList.remove(this.scrollLockClass)
   }
 
@@ -116,7 +107,7 @@ export default class Dialog extends HTMLElement {
   }
 }
 
-customElements.define("mx-dialog", Dialog)
+if (!customElements.get("mx-dialog")) customElements.define("mx-dialog", Dialog)
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/Component/Dialog/__snapshots__/Dialog.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/Dialog Dialog smoke-test 1`] = `
 <div class="mx-page default">
@@ -10,7 +10,7 @@ exports[`Component/Dialog Dialog smoke-test 1`] = `
     </span>
   </a>
   <mx-dialog id="unique-0">
-    <dialog class="mx-dialog ">
+    <dialog class="mx-dialog">
       <button autofocus
               class="mx-button mx-button--icon-only mx-icon mx-icon--close"
               data-close
@@ -24,8 +24,7 @@ exports[`Component/Dialog Dialog smoke-test 1`] = `
         <p>
           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.
         </p>
-        <button data-close
-                class="mx-button  mx-button--dark"
+        <button class="mx-button mx-button--dark"
                 type="button"
         >
           <span>
@@ -41,7 +40,7 @@ exports[`Component/Dialog Dialog smoke-test 1`] = `
 exports[`Component/Dialog Fullscreen smoke-test 1`] = `
 <div class="mx-page default">
   <button aria-controls="unique-0"
-          class="mx-button  mx-button--dark"
+          class="mx-button mx-button--dark"
           type="button"
   >
     <span>
@@ -65,8 +64,7 @@ exports[`Component/Dialog Fullscreen smoke-test 1`] = `
         <p>
           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.
         </p>
-        <button data-close
-                class="mx-button  mx-button--dark"
+        <button class="mx-button mx-button--dark"
                 type="button"
         >
           <span>
@@ -82,7 +80,7 @@ exports[`Component/Dialog Fullscreen smoke-test 1`] = `
 exports[`Component/Dialog Modal smoke-test 1`] = `
 <div class="mx-page default">
   <button aria-controls="unique-0"
-          class="mx-button  mx-button--dark"
+          class="mx-button mx-button--dark"
           type="button"
   >
     <span>
@@ -92,7 +90,7 @@ exports[`Component/Dialog Modal smoke-test 1`] = `
   <mx-dialog id="unique-0"
              data-modal
   >
-    <dialog class="mx-dialog ">
+    <dialog class="mx-dialog">
       <button autofocus
               class="mx-button mx-button--icon-only mx-icon mx-icon--close"
               data-close
@@ -106,8 +104,7 @@ exports[`Component/Dialog Modal smoke-test 1`] = `
         <p>
           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.
         </p>
-        <button data-close
-                class="mx-button  mx-button--dark"
+        <button class="mx-button mx-button--dark"
                 type="button"
         >
           <span>

package/src/Component/Dialog/__snapshots__/Dialog.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/Dialog Dialog smoke-test 1`] = `
 <dialog class="mx-dialog"

package/src/Component/Dialog/dialog.css

@@ -15,8 +15,7 @@
     overflow: auto hidden;
     overscroll-behavior: contain;
     background-color: var(--dialog-background, var(--colour-background));
-    border: var(--line-width, 1px) solid
-      var(--line-colour, var(--colour-border));
+    border: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
     padding: 0;
     place-self: center;
     opacity: 0;

package/src/Component/Dialog/dialog.twig

@@ -5,7 +5,7 @@
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-<mx-dialog id="{{ id }}"{% if modal %} data-modal{% endif %}>
+<mx-dialog id="{{ id }}"{% if modal or fullscreen %} data-modal{% endif %}>
   <dialog{{ attributes }}{% if open %} open{% endif %}>
     <button autofocus class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close>Close dialog</button>
     <div class="mx-dialog__content mx-vertical-flow">

package/src/Component/DropMenu/Components/DropMenuContext.tsx

@@ -36,11 +36,7 @@ type DropMenuContextValues = {
 type DropMenuProviderProps = PropsWithChildren & {
   id: string
   multiple?: boolean
-  onClick?: (
-    event: MouseEvent | KeyboardEvent,
-    key: string,
-    updated?: string[],
-  ) => void
+  onClick?: (event: MouseEvent | KeyboardEvent, key: string, updated?: string[]) => void
   closeOnClick?: boolean
   selectedItem?: string[]
   focusRef?: RefObject<HTMLElement>
@@ -77,7 +73,7 @@ const DropMenuProvider = ({
     if (!popoverRef.current || polyfilled.current) return
     const polyfill = async () => {
       if (!("anchorName" in document.documentElement.style)) {
-        const { default: Polyfills } = await import("../polyfills")
+        const { default: Polyfills } = await import("../../Popover/polyfills")
         new Polyfills(popoverRef.current)
         polyfilled.current = true
       }
@@ -119,8 +115,7 @@ const DropMenuProvider = ({
       popoverRef.current.querySelectorAll(":scope > button")
     if (!items) return
 
-    const attachKeyboardMenu = () =>
-      keyboard.attachMenu(popoverRef.current, items)
+    const attachKeyboardMenu = () => keyboard.attachMenu(popoverRef.current, items)
     popoverRef.current.addEventListener("focusin", attachKeyboardMenu, {
       signal,
     })
@@ -137,10 +132,7 @@ const DropMenuProvider = ({
   }, [on, popoverRef])
 
   // Handle item click events.
-  const handleClick = (
-    event: MouseEvent | KeyboardEvent,
-    key: string,
-  ): void => {
+  const handleClick = (event: MouseEvent | KeyboardEvent, key: string): void => {
     event.preventDefault()
     let updated: string[] = []
     if (selected.includes(key)) {

package/src/Component/DropMenu/DropMenu.stories.ts

@@ -3,6 +3,10 @@ import Component from "./drop-menu.twig"
 import "./drop-menu.css"
 import "./Elements/DropMenu"
 
+// Deps.
+import "../Popover/popover.css"
+import { PopoverPlacementModifier } from "@pnx-mixtape/ids-shape"
+
 type DropMenuItemType = {
   label: string
   href?: string
@@ -13,8 +17,14 @@ type DropMenuType = {
   items: DropMenuItemType[]
   label: string
   id?: string
+  role?: "menu" | "tablist"
+  placement?: PopoverPlacementModifier
 }
 
+/**
+ * The DropMenu extends [Popoover](/?path=/docs/component-popover--docs) to support a menu selection.
+ * It requires the `DropMenu` custom element javascript.
+ */
 const meta: Meta<DropMenuType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -23,8 +33,46 @@ const meta: Meta<DropMenuType> = {
     items: [
       { label: "News", href: "#news" },
       { label: "Events", href: "#events" },
-      { label: "Stories", id: "stories" },
+      { label: "Stories", href: "#stories" },
     ],
+    placement: PopoverPlacementModifier.BOTTOM_START,
+  },
+  argTypes: {
+    placement: {
+      description: "Places the DropMenu relative to the trigger element.",
+      control: "select",
+      options: Object.values(PopoverPlacementModifier),
+      table: {
+        defaultValue: { summary: `${PopoverPlacementModifier.BOTTOM_START}` },
+        type: { summary: "enum" },
+      },
+    },
+    label: {
+      description: "The text to display inside the trigger button",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    items: {
+      description:
+        "A list of `DropMenuItem<{ label: string, href?: string }>` objects for links or `DropMenuItem<{ label: string, id?: string }>` for buttons.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "DropMenuItem[]" },
+      },
+    },
+    role: {
+      description:
+        "An optional ARIA role attribute for the popover, for use when DropMenuItem is a list of buttons.",
+      control: "select",
+      options: ["menu", "tablist"],
+      type: "string",
+    },
   },
 }
 
@@ -34,3 +82,14 @@ type Story = StoryObj<DropMenuType>
 export const DropMenu: Story = {
   args: {},
 }
+
+export const Buttons: Story = {
+  args: {
+    role: "menu",
+    items: [
+      { label: "News", id: "news" },
+      { label: "Events", id: "events" },
+      { label: "Stories", id: "stories" },
+    ],
+  },
+}

package/src/Component/DropMenu/DropMenu.tsx

@@ -7,11 +7,7 @@ type ContainerProps = ComponentPropsWithoutRef<"div"> &
     condition: boolean
   }
 
-const Container = ({
-  condition,
-  children,
-  ...props
-}: ContainerProps): JSX.Element =>
+const Container = ({ condition, children, ...props }: ContainerProps): JSX.Element =>
   condition ? <div {...props}>{children}</div> : <>{children}</>
 
 type DropMenuProps = PropsWithChildren & {
@@ -42,8 +38,7 @@ const DropMenu = ({
   ariaLabel,
   description = "Results will update when you make a selection. Press escape to close.",
 }: DropMenuProps): JSX.Element => {
-  const { dropMenuId, triggerId, descriptionId, popoverRef } =
-    useDropMenuContext()
+  const { dropMenuId, triggerId, descriptionId, popoverRef } = useDropMenuContext()
 
   return (
     <Container className={classNames(className)} condition={!!className}>

package/src/Component/DropMenu/Elements/DropMenu.ts

@@ -1,51 +1,43 @@
 /**
  * DropMenu
- * @file Create a DropMenu using the Popover and Anchor APIs
+ * @file Create a DropMenu using the Popover and Anchor APIs.
+ * Handle's menu item select.
+ *
+ * Once polyfills are no longer needed, this can just extent HTMLElement
+ * instead of Popover.
  */
 
-import { Keyboard, makeAnchor } from "../../../Utility/utilities"
+import Popover from "../../Popover/Elements/Popover"
 
 export type DropMenuEvent = CustomEvent<{
   event: MouseEvent | KeyboardEvent
   target: HTMLButtonElement | HTMLAnchorElement
 }>
 
-export default class DropMenu extends HTMLElement {
-  internals_: ElementInternals
+export default class DropMenu extends Popover {
   controller: AbortController
-  keyboard: Keyboard = new Keyboard()
   closeOnClick: boolean
 
   constructor() {
     super()
-    this.internals_ = this.attachInternals()
     this.controller = new AbortController()
   }
 
   async connectedCallback() {
-    if (!this.menu || !this.trigger) return
+    await super.connectedCallback()
+    if (!this.container || !this.trigger) return
 
-    // Polyfill anchor (everywhere so far).
-    if (!("anchorName" in document.documentElement.style)) {
-      const { default: Polyfills } = await import("../polyfills.js")
-      new Polyfills(this.menu)
-    }
-    // Polyfill popover (FF only)
-    if (!Object.hasOwn(HTMLElement, "popover")) {
-      await import("@oddbird/popover-polyfill")
-    }
     this.closeOnClick = this.hasAttribute("closeonclick")
 
     const { signal }: AbortController = this.controller
     document.addEventListener(
       "click",
       (event: MouseEvent): void => {
-        const { target } = event
+        const targetElement = event.target as HTMLElement
+        const selectable = targetElement.closest("a, button")
         if (
-          (target as HTMLElement) !== this.menu &&
-          ![...this.items].includes(
-            target as HTMLButtonElement | HTMLAnchorElement,
-          )
+          (targetElement as HTMLElement) !== this.container &&
+          ![...this.items].includes(selectable as HTMLButtonElement | HTMLAnchorElement)
         )
           return
         this.handleSelect(event)
@@ -61,10 +53,8 @@ export default class DropMenu extends HTMLElement {
       (event: KeyboardEvent): void => {
         const { target, key } = event
         if (
-          (target as HTMLElement) !== this.menu &&
-          ![...this.items].includes(
-            target as HTMLButtonElement | HTMLAnchorElement,
-          )
+          (target as HTMLElement) !== this.container &&
+          ![...this.items].includes(target as HTMLButtonElement | HTMLAnchorElement)
         )
           return
         if (key === "Enter") this.handleSelect(event)
@@ -74,27 +64,15 @@ export default class DropMenu extends HTMLElement {
         signal,
       },
     )
-
-    this.keyboard.attachEventListeners(signal)
-    this.menu.addEventListener("focusin", this.attachKeyboardMenu, {
-      signal,
-    })
-    this.menu.addEventListener("focusout", this.detachKeyboardMenu, {
-      signal,
-    })
-    this.menu.addEventListener("toggle", this.handleToggle, {
-      signal,
-    })
   }
 
   disconnectedCallback(): void {
     this.controller.abort()
-    this.keyboard.detachMenu()
   }
 
   handleSelect = (event: MouseEvent | KeyboardEvent): void => {
     const target = event.target as HTMLButtonElement | HTMLAnchorElement
-    this.items.forEach(item => {
+    this.items?.forEach(item => {
       if (!(item instanceof HTMLButtonElement)) return
       item.setAttribute("aria-checked", String(item === target))
     })
@@ -106,64 +84,16 @@ export default class DropMenu extends HTMLElement {
         target,
       },
     })
-    this.menu.dispatchEvent(newEvent)
-    if (this.closeOnClick) this.menu.togglePopover()
-  }
-
-  handleToggle = ({ newState }: ToggleEvent): void => {
-    const handleClose = () => this.menu.togglePopover()
-    if (newState === "open") {
-      this.keyboard.attachPopup(this.menu.id, handleClose)
-    } else {
-      this.keyboard.detachPopup(this.menu.id)
-    }
-  }
-
-  attachKeyboardMenu = (): void => {
-    this.keyboard.attachMenu(this.menu, this.items)
-  }
-
-  detachKeyboardMenu = (): void => {
-    this.keyboard.detachMenu()
-  }
-
-  get menu(): HTMLDivElement | null {
-    const menu: HTMLDivElement | null = this.querySelector("[popover]")
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a <div popover> element.`)
-    }
-    menu.id = menu.id || this.generatedId()
-    return menu
-  }
-
-  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {
-    const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =
-      this.menu.querySelectorAll(":scope > *")
-    if (!items) {
-      throw new Error(`${this.localName} must contain some menu items.`)
-    }
-    return items
-  }
-
-  get trigger(): HTMLButtonElement | null {
-    const trigger: HTMLButtonElement | null = this.querySelector(
-      `[popovertarget=${this.menu?.id}]`,
-    )
-    if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button popovertarget="${this.menu.id}">`,
-      )
-    }
-    return trigger
+    this.container.dispatchEvent(newEvent)
+    if (this.closeOnClick) this.container.togglePopover()
   }
 
-  generatedId = (): string => {
-    const string: string | undefined = this.trigger?.textContent?.trim()
-    return !string ? "" : makeAnchor(string)
+  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> | null {
+    return this.container.querySelectorAll("a, button")
   }
 }
 
-customElements.define("mx-dropmenu", DropMenu)
+if (!customElements.get("mx-dropmenu")) customElements.define("mx-dropmenu", DropMenu)
 
 declare global {
   interface HTMLElementTagNameMap {