@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.1

package/src/Component/Pagination/Pagination.tsx

@@ -1,6 +1,8 @@
-import { JSX, MouseEventHandler } from "react"
+/* eslint-disable jsx/a11y/no-noninteractive-element-interactions */
+import { JSX, KeyboardEventHandler, MouseEventHandler } from "react"
 import { usePagination } from "./Components/PaginationContext"
 import PaginationItem from "./Components/PaginationItem"
+import { validators } from "../../Utility/utilities"
 
 const Pagination = (): JSX.Element => {
   const {
@@ -17,8 +19,18 @@ const Pagination = (): JSX.Element => {
   const handleClick: MouseEventHandler = e => {
     const target = e.target as HTMLElement
     const page: string = target.closest("[data-page]")?.getAttribute("data-page")
-    if (!page) return
-    onClick(parseInt(page))
+    if (!page || !validators.integer(page, 1, lastPage)) return
+    onClick(parseInt(page, 10))
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleKeyDown: KeyboardEventHandler = e => {
+    if (e.key !== "Enter") return
+    const target = e.target as HTMLElement
+    const page: string = target.closest("[data-page]")?.getAttribute("data-page")
+    if (!page || !validators.integer(page, 1, lastPage)) return
+    onClick(parseInt(page, 10))
     e.preventDefault()
     e.stopPropagation()
   }
@@ -26,23 +38,30 @@ const Pagination = (): JSX.Element => {
   const handleMouseOver: MouseEventHandler = e => {
     const target = e.target as HTMLElement
     const page: string = target.closest("[data-page]")?.getAttribute("data-page")
-    if (page) onMouseOver(parseInt(page))
+    if (page && validators.integer(page, 1, lastPage)) {
+      onMouseOver(parseInt(page, 10))
+    }
   }
 
   return (
     <>
       {showPager && (
-        <nav className={"mx-pagination"} aria-label="Pagination">
-          <ul
-            className={"mx-pagination__items"}
-            onClick={handleClick}
-            onMouseEnter={handleMouseOver}
-          >
-            <PaginationItem
-              as="previous"
-              number={currentPage > 1 ? currentPage - 1 : null}
-              disabled={currentPage === 1}
-            />
+        <nav
+          className={"mx-pagination"}
+          aria-label="Pagination"
+          onClick={handleClick}
+          onMouseEnter={handleMouseOver}
+          onKeyDown={handleKeyDown}
+        >
+          <PaginationItem
+            as="previous"
+            number={currentPage > 1 ? currentPage - 1 : null}
+            disabled={currentPage === 1}
+          />
+          <div className={"mx-pagination__label"}>
+            Page {currentPage} of {lastPage}
+          </div>
+          <ul className={"mx-pagination__items"}>
             <PaginationItem as="item" number={1} active={currentPage === 1} />
             {showFirstEllipsis && <PaginationItem as="ellipsis" />}
             {visiblePages.map(page => (
@@ -55,12 +74,12 @@ const Pagination = (): JSX.Element => {
             ))}
             {showLastEllipsis && <PaginationItem as="ellipsis" />}
             <PaginationItem as="item" number={lastPage} active={currentPage === lastPage} />
-            <PaginationItem
-              as="next"
-              number={currentPage < lastPage ? currentPage + 1 : null}
-              disabled={currentPage === lastPage}
-            />
           </ul>
+          <PaginationItem
+            as="next"
+            number={currentPage < lastPage ? currentPage + 1 : null}
+            disabled={currentPage === lastPage}
+          />
         </nav>
       )}
     </>

package/src/Component/Pagination/README.md

@@ -1,19 +1,215 @@
 # Pagination
 
-### How to use
+Page navigation for paginated lists and search results. Renders a `<nav>` with previous/next controls, first/last page links, a sliding window of numbered pages around the current page, and ellipses where pages are skipped.
 
-**CSS**
+The component is a CSS container (`container-name: pagination`) and adapts to the width of its **container**, not the viewport:
 
-`@import '@pnx-mixtape/mxds/src/Component/Pagination/pagination.css';`
+| Container width | What shows                                                        |
+| --------------- | ----------------------------------------------------------------- |
+| below `25ch`    | Icon-only previous/next controls and the "Page X of Y" label      |
+| `25ch`–`40ch`   | Previous/next text labels appear alongside the icons              |
+| `40ch` and up   | The numbered page list appears; the "Page X of Y" label is hidden |
 
-**Twig**
+A quantity query (`:has(li:nth-child(8))`) extends the label tier to `54ch` when the pagination is long — the full sliding window with ellipses needs ~53ch, so short lists get numbers at `40ch` while long ones keep the compact label until they actually fit.
 
-You can setup a twig namespace in your project if you wish to use the twig files directly.
+## CSS Import
 
-- Eg: `{% extends '@mixtape/Component/Pagination/pagination.twig' %}`
+```css
+@import "@pnx-mixtape/mxds/src/Component/Pagination/pagination.css";
+```
 
-Alternatively copy/paste the file for more control.
+---
 
-**JSX Components**
+## Twig
 
-- JSX import: `import { PaginationContext, Pagination } from '@pnx-mixtape/mxds/src/react';`
+```twig
+{% include '@mixtape/Component/Pagination/pagination.twig' with {
+  previous: previous_link,
+  next: next_link,
+  label: 'Page 2 of 10',
+  pages: [
+    pagination_item_1,
+    pagination_item_2,
+    pagination_item_ellipsis,
+    pagination_item_last,
+  ]
+} %}
+```
+
+Each entry in `pages` is the rendered output of `pagination-item.twig`:
+
+```twig
+{% include '@mixtape/Component/Pagination/pagination-item.twig' with {
+  link: page_link,           {# omit and set ellipsis for an ellipsis slot #}
+} %}
+
+{% include '@mixtape/Component/Pagination/pagination-item.twig' with {
+  ellipsis: true,
+} %}
+```
+
+**pagination.twig props** (`Pagination` type from `@pnx-mixtape/ids-shape`):
+
+| Prop       | Type               | Description                                                                                                        |
+| ---------- | ------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| `previous` | `Link`             | Rendered Link component for the previous control — typically with an `arrow-left` icon. Omitted on the first page. |
+| `next`     | `Link`             | Rendered Link component for the next control — typically with an `arrow-right` icon. Omitted on the last page.     |
+| `label`    | `string`           | Page count label, e.g. `Page 2 of 10` — shown instead of the numbered list in containers narrower than `40ch`.     |
+| `pages`    | `PaginationItem[]` | List of rendered pagination-item strings — page links and ellipsis slots in order.                                 |
+
+**pagination-item.twig props** (`PaginationItem` type from `@pnx-mixtape/ids-shape`):
+
+| Prop       | Type      | Description                                                                                                   |
+| ---------- | --------- | ------------------------------------------------------------------------------------------------------------- |
+| `link`     | `Link`    | Rendered Link for the page. Set `current: true` on the Link for the active page (adds `aria-current="page"`). |
+| `ellipsis` | `boolean` | When `true` and `link` is empty, renders an ellipsis slot instead of a link.                                  |
+
+---
+
+## HTML
+
+Minimal working markup. Page numbers not in the visible window are replaced with `<li class="mx-pagination__ellipsis">`. The active page uses `aria-current="page"` on its link.
+
+The previous/next controls and the count label sit outside the page list. The `<nav>` is a `1fr auto 1fr` grid — previous and next get equal-width outer columns so the page list (or label) is always truly centred.
+
+```html
+<nav class="mx-pagination" aria-label="Pagination">
+  <div class="mx-pagination__previous">
+    <a href="?page=1">
+      <span class="mx-icon mx-icon--arrow-left"></span>
+      <span>Previous</span>
+    </a>
+  </div>
+  <div class="mx-pagination__label">Page 2 of 10</div>
+  <ul class="mx-pagination__items">
+    <li class="mx-pagination__item">
+      <a href="?page=1"><span>1</span></a>
+    </li>
+    <li class="mx-pagination__item">
+      <a href="?page=2" aria-current="page"><span>2</span></a>
+    </li>
+    <li class="mx-pagination__item">
+      <a href="?page=3"><span>3</span></a>
+    </li>
+    <li class="mx-pagination__ellipsis">&hellip;</li>
+    <li class="mx-pagination__item">
+      <a href="?page=10"><span>10</span></a>
+    </li>
+  </ul>
+  <div class="mx-pagination__next">
+    <a href="?page=3">
+      <span>Next</span>
+      <span class="mx-icon mx-icon--arrow-right"></span>
+    </a>
+  </div>
+</nav>
+```
+
+The React output uses `<button>` (with `data-page`) instead of `<a>` inside each item, and `aria-current="step"` on the active item. Both are supported by the CSS.
+
+---
+
+## React
+
+Uses a Context-based composition pattern. Wrap `<Pagination>` in a `<PaginationProvider>` that owns the page state. The provider computes which page numbers are visible, when to show ellipses, and syncs the current page with the URL `?page=` query string.
+
+```tsx
+import { PaginationProvider, Pagination } from "@pnx-mixtape/mxds/react"
+import { useRef, useState } from "react"
+
+const Results = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={scrollRef}>
+      {/* ... results list ... */}
+
+      <PaginationProvider
+        total={100}
+        resultsPerPage={10}
+        currentPage={currentPage}
+        onClick={setCurrentPage}
+        scrollRef={scrollRef}
+      >
+        <Pagination />
+      </PaginationProvider>
+    </div>
+  )
+}
+```
+
+Alternatively import both from the package entry:
+
+```tsx
+import { Pagination, PaginationProvider, usePagination } from "@pnx-mixtape/mxds/src/react"
+```
+
+**`PaginationProvider` props:**
+
+| Prop             | Type                     | Required | Description                                             |
+| ---------------- | ------------------------ | -------- | ------------------------------------------------------- |
+| `total`          | `number`                 | yes      | Total number of items across all pages                  |
+| `resultsPerPage` | `number`                 | yes      | Items shown per page — used to compute `lastPage`       |
+| `currentPage`    | `number`                 | yes      | The active page (1-indexed)                             |
+| `onClick`        | `(page: number) => void` | no       | Called when a page number, previous, or next is clicked |
+| `onMouseOver`    | `(page: number) => void` | no       | Called on hover over a page — useful for prefetching    |
+| `scrollRef`      | `RefObject<HTMLElement>` | no       | Element scrolled into view on page change               |
+| `children`       | `ReactNode`              | yes      | Typically `<Pagination />`                              |
+
+**`Pagination` props:** none — all state comes from the provider via `usePagination()`.
+
+**Provider behaviour:**
+
+- Hides itself entirely when `total <= resultsPerPage` (nothing to paginate).
+- `lastPage` is `Math.ceil(total / resultsPerPage)`.
+- `visiblePages` is a sliding window of up to five numbers: `currentPage - 2` to `currentPage + 2`, clamped between `2` and `lastPage - 1`. Page `1` and `lastPage` are always rendered as bookends.
+- A first ellipsis appears when the visible window starts above page `2`; a last ellipsis appears when it ends below `lastPage - 1`.
+- On mount, if `?page=` is in the URL and differs from `currentPage`, `onClick` is called with the URL page. An invalid `?page=` value warns in dev and falls back to page `1`.
+- On `currentPage` change, `scrollRef.current?.scrollIntoView()` is called and `history.pushState` updates the URL — `?page=` is set for pages > 1, and stripped on page `1`.
+
+**`PaginationItem`** — internal building block exported from `Pagination`. Props: `as?: "item" | "previous" | "next" | "ellipsis"`, `number?: number`, `active?: boolean`, `disabled?: boolean`. Use the `Pagination` component directly; reach for `PaginationItem` only if composing a custom layout.
+
+---
+
+## Modifier classes
+
+Pagination has no visual variants — only structural slot classes:
+
+| Class                     | React `as` value | Role                                                                                                                             |
+| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `mx-pagination__previous` | `"previous"`     | Previous-page control — a `<div>` in the first grid column. Hides its text label in containers below `25ch`.                     |
+| `mx-pagination__next`     | `"next"`         | Next-page control — a `<div>` in the last grid column. Hides its text label in containers below `25ch`.                          |
+| `mx-pagination__label`    | —                | The "Page X of Y" count label — a `<div>` sharing the centre grid column with the list. Shown only where the list is hidden.     |
+| `mx-pagination__item`     | `"item"`         | A numbered page link. The active one carries `aria-current="page"` (Twig) or `aria-current="step"` (React). Hidden below `40ch`. |
+| `mx-pagination__ellipsis` | `"ellipsis"`     | A non-interactive `…` placeholder for skipped pages. Hidden below `40ch`.                                                        |
+
+The active item is styled via `[aria-current="page"]`, `[aria-current="step"]`, or the `.is-active` class — all three produce the same bold + underlined appearance and have `pointer-events: none`.
+
+---
+
+## Accessibility
+
+- The outer element is `<nav aria-label="Pagination">` so assistive tech announces it as a landmark with a clear name.
+- The active page is marked with `aria-current="page"` (Twig output) or `aria-current="step"` (React output). Both are styled identically. Never rely on colour alone — the bold weight and underline signal the current page visually.
+- The React `PaginationItem` sets `aria-hidden="true"` on the disabled previous/next `<div>` so screen readers skip the inert control on the first and last pages. The button inside also receives the native `disabled` attribute.
+- The previous/next text labels ("Previous", "Next") are hidden visually in containers below `25ch` but remain in the DOM — the icon-only buttons still have an accessible name at narrow widths.
+- In containers below `40ch` the numbered page list is `display: none` (removed from the accessibility tree) and the "Page X of Y" label conveys the current position instead — no duplicate announcements at any width.
+- All interactive elements are native `<a>` or `<button>` — full keyboard focus, activation, and screen-reader semantics come for free. No custom `tabindex` or `role` is added.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-pagination {
+  --pagination-foreground: var(--foreground, var(--colour-foreground));
+  --active-underline: underline; /* set to 'none' to remove the underline on the active page */
+}
+```
+
+The component also consumes `--spacing-xxs`, `--spacing-xs`, `--spacing-l`, and `--font-weight-bold` from the design system tokens.
+
+---
+
+→ Used in context: `mockups/ArticleListingPage.stories.ts:12`

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

@@ -2,9 +2,8 @@
 
 exports[`Pagination 1`] = `
 "<nav class="mx-pagination" aria-label="Pagination">
-  <ul class="mx-pagination__items">
-          <li class="mx-pagination__previous">
-        
+      <div class="mx-pagination__previous">
+      
 <a href="#">
   
 <span class="mx-icon mx-icon--arrow-left"></span>
@@ -13,8 +12,10 @@ exports[`Pagination 1`] = `
     
 </a>
 
-      </li>
-              <li class="mx-pagination__item">
+    </div>
+        <div class="mx-pagination__label">Page 2 of 10</div>
+    <ul class="mx-pagination__items">
+    <li class="mx-pagination__item">
   
 <a href="#">
   
@@ -23,9 +24,8 @@ exports[`Pagination 1`] = `
 </a>
 
 </li>
-
-          <li class="mx-pagination__item">
-  
+<li class="mx-pagination__item">
+    
 <a href="#" aria-current="page">
   
   <span>2</span>
@@ -33,8 +33,7 @@ exports[`Pagination 1`] = `
 </a>
 
 </li>
-
-          <li class="mx-pagination__item">
+<li class="mx-pagination__item">
   
 <a href="#">
   
@@ -43,10 +42,8 @@ exports[`Pagination 1`] = `
 </a>
 
 </li>
-
-            <li class="mx-pagination__ellipsis">…</li>
-
-          <li class="mx-pagination__item">
+  <li class="mx-pagination__ellipsis">…</li>
+<li class="mx-pagination__item">
   
 <a href="#">
   
@@ -56,8 +53,9 @@ exports[`Pagination 1`] = `
 
 </li>
 
-              <li class="mx-pagination__next">
-        
+  </ul>
+      <div class="mx-pagination__next">
+      
 <a href="#">
   
   <span>Next</span>
@@ -66,8 +64,7 @@ exports[`Pagination 1`] = `
 
 </a>
 
-      </li>
-      </ul>
-</nav>
+    </div>
+  </nav>
 "
 `;

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><ul class="mx-pagination__items"><li class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></li><li class="mx-pagination__item" aria-current="step">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li><li class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></li></ul></nav>"`;
+exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;

package/src/Component/Pagination/pagination.css

@@ -2,10 +2,18 @@
  * Pagination
  */
 
+@import "../../Utility/_mixins.css";
+
 @layer design-system.components {
   .mx-pagination {
     margin-inline: 0;
     padding: 0;
+    container-type: inline-size;
+    container-name: pagination;
+    font-size: var(--pagination-font-size, var(--font-size-m));
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
 
     & button {
       padding: unset;
@@ -41,9 +49,15 @@
       pointer-events: none;
     }
 
+    & :is(.mx-pagination__label, .mx-pagination__items) {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
     & .mx-pagination__items {
       display: flex;
       place-content: center;
+      margin: 0;
       padding-inline-start: 0;
       list-style-type: none;
       text-align: center;
@@ -54,20 +68,55 @@
       padding-inline: var(--spacing-xs);
     }
 
+    & :is(.mx-pagination__item, .mx-pagination__ellipsis) {
+      display: none;
+
+      @container pagination (min-width: 40ch) {
+        display: block;
+      }
+    }
+
+    /* display on small container, hide on large container */
+    & .mx-pagination__label {
+      block-size: var(--spacing-l);
+      line-height: var(--spacing-l);
+
+      @container pagination (min-width: 40ch) {
+        display: none;
+      }
+    }
+
+    /* quantity query — the full page window needs ~54ch, so hold the label until then */
+    &:has(li:nth-child(8)) {
+      @container pagination (max-width: 54ch) {
+        & :is(.mx-pagination__item, .mx-pagination__ellipsis) {
+          display: none;
+        }
+
+        & .mx-pagination__label {
+          display: block;
+        }
+      }
+    }
+
     & :is(.mx-pagination__previous, .mx-pagination__next) {
       text-transform: capitalize;
 
       & span:where(:not(.mx-icon)) {
-        @media (--small-down) {
-          display: none;
+        @mixin sr-only;
+
+        @container pagination (min-width: 25ch) {
+          @mixin sr-undo;
         }
       }
     }
 
     & .mx-pagination__previous {
-      margin-inline-end: auto;
+      grid-column: 1;
+      grid-row: 1;
+      justify-self: end;
 
-      @media (--small-up) {
+      @container pagination (min-width: 25ch) {
         & :is(button, a) {
           padding-inline-start: 0;
         }
@@ -75,9 +124,11 @@
     }
 
     & .mx-pagination__next {
-      margin-inline-start: auto;
+      grid-column: 3;
+      grid-row: 1;
+      justify-self: start;
 
-      @media (--small-up) {
+      @container pagination (min-width: 25ch) {
         & :is(button, a) {
           padding-inline-end: 0;
 
@@ -89,13 +140,3 @@
     }
   }
 }
-
-/**
- * Print stylesheet
- */
-
-@media print {
-  .mx-pagination {
-    display: none;
-  }
-}

package/src/Component/Pagination/pagination.twig

@@ -1,19 +1,20 @@
 {% set classes = ['mx-pagination'] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <nav{{ attributes}} aria-label="Pagination">
+  {% if previous is not empty %}
+    <div class="mx-pagination__previous">
+      {{ previous }}
+    </div>
+  {% endif %}
+  {% if label is not empty %}
+    <div class="mx-pagination__label">{{ label }}</div>
+  {% endif %}
   <ul class="mx-pagination__items">
-    {% if previous is not empty %}
-      <li class="mx-pagination__previous">
-        {{ previous }}
-      </li>
-    {% endif %}
-    {% for page in pages %}
-      {{ page }}
-    {% endfor %}
-    {% if next is not empty %}
-      <li class="mx-pagination__next">
-        {{ next }}
-      </li>
-    {% endif %}
+    {{ pages }}
   </ul>
+  {% if next is not empty %}
+    <div class="mx-pagination__next">
+      {{ next }}
+    </div>
+  {% endif %}
 </nav>

package/src/Component/Popover/Components/PopoverTrigger.tsx

@@ -0,0 +1,58 @@
+import { cloneElement, CSSProperties, isValidElement, JSX, ReactElement } from "react"
+
+// anchorName is a CSS Anchor Positioning property not yet in TypeScript's CSSProperties.
+type AnchorCSSProperties = CSSProperties & {
+  anchorName?: string
+}
+
+type PopoverTriggerChildProps = {
+  id?: string
+  popoverTarget?: string
+  style?: CSSProperties
+  [key: string]: unknown
+}
+
+type PopoverTriggerProps = {
+  /** Must match the `id` prop on the paired `<Popover>`. */
+  popoverId: string
+  children: ReactElement<PopoverTriggerChildProps>
+}
+
+/**
+ * Wraps any element to make it a trigger for a paired `<Popover>`.
+ *
+ * Injects `id`, `popoverTarget`, and `style.anchorName` into the child element
+ * using the shared `popoverId` convention:
+ *   - trigger `id`    = `${popoverId}-trigger`
+ *   - `popoverTarget` = `${popoverId}`
+ *   - `anchor-name`   = `--${popoverId}`
+ *
+ * Place `<PopoverTrigger>` anywhere in the tree — it does not need to be
+ * co-located with `<Popover>`. CSS Anchor Positioning handles the spatial
+ * relationship between trigger and panel independently of DOM structure.
+ *
+ * @example
+ * <PopoverTrigger popoverId="help-popover">
+ *   <button type="button" className="mx-button">Help</button>
+ * </PopoverTrigger>
+ *
+ * <Popover id="help-popover" placement={PopoverPlacementModifier.BOTTOM}>
+ *   <p>Short supplementary content.</p>
+ * </Popover>
+ */
+const PopoverTrigger = ({ popoverId, children }: PopoverTriggerProps): JSX.Element => {
+  if (!isValidElement(children)) {
+    throw new Error("<PopoverTrigger> requires a single valid React element as its child.")
+  }
+
+  return cloneElement(children, {
+    id: `${popoverId}-trigger`,
+    popoverTarget: popoverId,
+    style: {
+      ...children.props.style,
+      anchorName: `--${popoverId}`,
+    } as AnchorCSSProperties,
+  })
+}
+
+export default PopoverTrigger

package/src/Component/Popover/Elements/Popover.ts

@@ -7,6 +7,7 @@
 
 export default class Popover extends HTMLElement {
   internals_: ElementInternals
+  polyfills?: any
 
   constructor() {
     super()
@@ -16,21 +17,21 @@ export default class Popover extends HTMLElement {
   async 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.container)
-    }
-    // Polyfill popover (FF only)
+    // Polyfill and popover if needed.
     if (
-      typeof HTMLElement !== "undefined" &&
-      typeof HTMLElement.prototype === "object" &&
-      "popover" in HTMLElement.prototype
+      !("anchorName" in document.documentElement.style) ||
+      !("popover" in HTMLElement.prototype)
     ) {
-      await import("@oddbird/popover-polyfill")
+      const { default: Polyfills } = await import("../polyfills.js")
+      this.polyfills = new Polyfills(this.container)
     }
   }
 
+  disconnectedCallback(): void {
+    // Clean up polyfills event listener
+    this.polyfills?.destroy()
+  }
+
   get container(): HTMLDivElement | null {
     const menu: HTMLDivElement = this.querySelector("[popover]")
     if (!menu) {