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

package/src/Component/Popover/Popover.figma.ts

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=7-5
+// source=src/Component/Popover/Popover.tsx
+// component=Popover
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const showTitle = instance.getBoolean("Show Title")
+const title = instance.getString("Title")
+const body = instance.getString("Body")
+const showLink = instance.getBoolean("Show Link")
+const link = instance.getString("Link")
+
+// `id` is required in code (pairs the panel with its <PopoverTrigger popoverId={id}>)
+// but has no Figma property equivalent — it's a wiring concern, not a visual one.
+const titleProp = showTitle ? ` title="${title}"` : ""
+const linkProp = showLink ? ` link={<a href="#">${link}</a>}` : ""
+
+export default {
+  example: figma.code`<Popover id="example-popover"${titleProp}${linkProp}>${body}</Popover>`,
+  imports: ['import { Popover } from "@pnx-mixtape/mxds/react"'],
+  id: "popover",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Popover/Popover.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
-import DrupalAttribute from "drupal-attribute"
+import { DrupalAttribute } from "drupal-attribute"
 import Component from "./popover.twig"
 import {
   ButtonTypes,
@@ -57,6 +57,7 @@ const meta: Meta<PopoverType> = {
     link: Link({
       title: "Learn more",
       href: "#",
+      more: true,
     }),
   },
   argTypes: {

package/src/Component/Popover/Popover.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./Popover"
+import PopoverTrigger from "./Components/PopoverTrigger"
+import { PopoverPlacementModifier } from "@pnx-mixtape/ids-shape"
+import "./popover.css"
+import { Page } from "../../../.storybook-react/decorators"
+import Link from "../../Atom/Link/Link"
+import Button from "../../Atom/Button/Button"
+import { Icons } from "../../enums"
+
+/**
+ * A floating panel anchored to a trigger using the native Popover API and CSS Anchor
+ * Positioning. Pair `<Popover id="…">` with `<PopoverTrigger popoverId="…">` — the
+ * two can be placed anywhere in the DOM.
+ *
+ * Open/close, light-dismiss, and Escape-to-close are handled by the browser.
+ *
+ * For polyfill support in older browsers, import the Web Component once at app entry:
+ * `import "@pnx-mixtape/mxds/src/Component/Popover/Elements/Popover"`
+ */
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  decorators: [Page],
+  component: Component,
+  args: {
+    id: "story-popover",
+    placement: PopoverPlacementModifier.BOTTOM,
+    title: <h2>Popover heading</h2>,
+    children: (
+      <p>
+        Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu,
+        for modal content use Dialog.
+      </p>
+    ),
+    link: (
+      <Link to="#" more>
+        Learn more
+      </Link>
+    ),
+  },
+  argTypes: {
+    placement: {
+      description: "Position of the panel relative to the trigger.",
+      control: "select",
+      options: Object.values(PopoverPlacementModifier),
+      table: {
+        defaultValue: { summary: PopoverPlacementModifier.BOTTOM },
+        type: { summary: "PopoverPlacementModifier" },
+      },
+    },
+  },
+  render: args => (
+    <>
+      <PopoverTrigger popoverId={args.id}>
+        <Button iconEnd={Icons.QUESTION} className="mx-icon--end">
+          Popover trigger
+        </Button>
+      </PopoverTrigger>
+      <Component {...args} />
+    </>
+  ),
+}
+
+export default meta
+
+export const Default: StoryObj<typeof meta> = {}
+
+/** All 12 placement values are supported — use the control to preview each one. */
+export const Placement: StoryObj<typeof meta> = {
+  args: {
+    id: "story-popover-placement",
+    placement: PopoverPlacementModifier.TOP,
+  },
+}
+
+/** Popover without an optional title or link — minimal content variant. */
+export const ContentOnly: StoryObj<typeof meta> = {
+  args: {
+    id: "story-popover-minimal",
+    title: undefined,
+    link: undefined,
+    children: <p>A simple hint with no heading or action link.</p>,
+  },
+}

package/src/Component/Popover/Popover.tsx

@@ -0,0 +1,84 @@
+import { CSSProperties, JSX, PropsWithChildren, ReactNode, useMemo, useRef, useEffect } from "react"
+import { PopoverPlacementModifier } from "@pnx-mixtape/ids-shape"
+
+// positionAnchor is a CSS Anchor Positioning property not yet in TypeScript's CSSProperties.
+type AnchorCSSProperties = CSSProperties & {
+  positionAnchor?: string
+}
+
+type PopoverProps = PropsWithChildren & {
+  /**
+   * Required. Must match the `popoverId` prop on the paired `<PopoverTrigger>`.
+   * Used to derive:
+   *   - the panel `id`          = `${id}`
+   *   - `aria-describedby`      = `${id}-trigger`
+   *   - `position-anchor` style = `--${id}`
+   */
+  id: string
+  placement?: PopoverPlacementModifier
+  title?: ReactNode
+  link?: ReactNode
+}
+
+/**
+ * Renders the floating popover panel. Pair with `<PopoverTrigger popoverId={id}>` —
+ * the two components can be placed anywhere in the DOM; CSS Anchor Positioning
+ * handles the spatial relationship.
+ *
+ * Open/close, light-dismiss, and Escape-to-close are provided by the native
+ * Popover API — no React state wiring required.
+ */
+const Popover = ({
+  id,
+  children,
+  placement = PopoverPlacementModifier.BOTTOM,
+  title,
+  link,
+}: PopoverProps): JSX.Element => {
+  const polyfillsInstance = useRef<any>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const style = useMemo<AnchorCSSProperties>(() => ({ positionAnchor: `--${id}` }), [id])
+
+  // Polyfill anchor and popover APIs
+  useEffect(() => {
+    if (!popoverRef.current || polyfillsInstance.current) return
+    const polyfill = async () => {
+      if (
+        !("anchorName" in document.documentElement.style) ||
+        !("popover" in HTMLElement.prototype)
+      ) {
+        const { default: Polyfills } = await import("./polyfills")
+        polyfillsInstance.current = new Polyfills(popoverRef.current)
+      }
+    }
+    polyfill().catch(error => {
+      /* eslint-disable-next-line no-console */
+      if (process.env.NODE_ENV !== "production") console.warn(error)
+    })
+
+    return () => {
+      // Clean up polyfills event listener
+      polyfillsInstance.current?.destroy()
+    }
+  }, [popoverRef])
+
+  return (
+    <div
+      ref={popoverRef}
+      className="mx-popover"
+      id={id}
+      aria-describedby={`${id}-trigger`}
+      style={style}
+      data-placement={placement}
+      popover=""
+    >
+      <div className="mx-rich-text mx-vertical-flow">
+        {title}
+        {children}
+        {link}
+      </div>
+    </div>
+  )
+}
+
+export default Popover

package/src/Component/Popover/README.md

@@ -0,0 +1,224 @@
+# Popover
+
+A small floating panel anchored to a trigger button — used for tooltips, hints, or short contextual content. Built on the native **Popover API** (`popover` attribute) and **CSS Anchor Positioning**, with polyfills for browsers that lack support.
+
+Use Popover for short, non-interactive supplementary content attached to a trigger (e.g. a help tooltip). For modal content that interrupts the page, use **Dialog**. For a list of menu actions, use **DropMenu**.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Component/Popover/popover.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Component/Popover/popover.twig' with {
+  id: 'help-popover',
+  placement: 'bottom',
+  trigger: button_component,
+  title: heading_component,
+  content: '<p>Short explanation.</p>',
+  link: link_component,
+} %}
+```
+
+The trigger button passed in **must** already have the required `id`, `popovertarget`, and `style="anchor-name: --{id}"` attributes set (e.g. via a `DrupalAttribute` helper):
+
+```ts
+attr.setAttribute("id", `${id}-target`)
+attr.setAttribute("popovertarget", id)
+attr.setAttribute("style", `anchor-name: --${id}`)
+```
+
+**popover.twig props** (`Popover` type from `ids-shape`, extends `WayfindingBlock`):
+
+| Prop        | Type                       | Required | Description                                                                                      |
+| ----------- | -------------------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| `id`        | `string`                   | No       | Unique id for the popover panel. Must match the trigger's `popovertarget`. Defaults to `popover` |
+| `name`      | `string`                   | No       | Trigger element id. Defaults to `{id}-target`. Used as the `aria-describedby` target             |
+| `trigger`   | `Button`                   | Yes      | Rendered Button atom with the required trigger attributes applied                                |
+| `title`     | `Heading`                  | No       | Optional heading inside the panel                                                                |
+| `content`   | `WysiwygText`              | No       | Panel body content (HTML)                                                                        |
+| `link`      | `Link`                     | No       | Optional link inside the panel                                                                   |
+| `placement` | `PopoverPlacementModifier` | No       | Placement relative to the trigger — written verbatim to `data-placement`                         |
+
+The `id` and `name` props use Twig `default()` filters, so omitting them yields `popover` and `popover-target` respectively — but you should always pass an explicit `id` per popover instance to avoid clashes when multiple popovers exist on the same page.
+
+---
+
+## HTML + Web Component
+
+The `<mx-popover>` custom element wraps a trigger button and a `[popover]` panel. It loads polyfills for CSS anchor positioning (all browsers currently) and the Popover API (Firefox) on demand.
+
+**Key requirements:**
+
+- The trigger `<button>` must have `popovertarget="{id}"` matching the panel's `id`, plus `style="anchor-name: --{id}"`.
+- The panel is a `<div popover>` with a matching `id`, `position-anchor: --{id}`, and `data-placement="{placement}"`.
+- The panel is referenced by `aria-describedby` on the trigger.
+- **Choose the panel's role based on its content** — see [Accessibility](#accessibility) below.
+
+```html
+<mx-popover>
+  <button
+    type="button"
+    class="mx-button"
+    id="popover-target"
+    popovertarget="popover"
+    style="anchor-name: --popover"
+    aria-describedby="popover"
+  >
+    Popover trigger
+    <span class="mx-icon mx-icon--question" aria-hidden="true"></span>
+  </button>
+
+  <div
+    class="mx-popover"
+    id="popover"
+    style="position-anchor: --popover"
+    data-placement="bottom"
+    popover
+  >
+    <div class="mx-rich-text mx-vertical-flow">
+      <h2>Popover heading</h2>
+      <p>Short supplementary content.</p>
+      <a href="#">Learn more</a>
+    </div>
+  </div>
+</mx-popover>
+```
+
+**Import the JS:**
+
+```js
+import "@pnx-mixtape/mxds/src/Component/Popover/Elements/Popover"
+```
+
+The custom element throws if it does not find a `[popover]` panel and a matching `[popovertarget]` trigger inside itself.
+
+---
+
+## React
+
+```tsx
+import { Popover, PopoverTrigger, Button, Link } from "@pnx-mixtape/mxds/react"
+import { PopoverPlacementModifier } from "@pnx-mixtape/ids-shape"
+
+{
+  /* Trigger — can live anywhere in the DOM */
+}
+;<PopoverTrigger popoverId="help-popover">
+  <Button>Need help?</Button>
+</PopoverTrigger>
+
+{
+  /* Panel — can live anywhere in the DOM */
+}
+;<Popover
+  id="help-popover"
+  placement={PopoverPlacementModifier.BOTTOM}
+  title={<h2>Help</h2>}
+  link={
+    <Link more to="#">
+      Learn more
+    </Link>
+  }
+>
+  <p>Short supplementary content.</p>
+</Popover>
+```
+
+`<PopoverTrigger>` and `<Popover>` are linked by a shared `id`/`popoverId` string — they do not need to be co-located in the DOM. CSS Anchor Positioning handles the spatial relationship independently of DOM structure, so you can place the trigger in a table cell and the panel at the root of the app if needed.
+
+Open/close, light-dismiss, and Escape-to-close are provided by the native Popover API — no React state wiring required.
+
+**`<Popover>` props:**
+
+| Prop        | Type                       | Default                           | Description                                                            |
+| ----------- | -------------------------- | --------------------------------- | ---------------------------------------------------------------------- |
+| `id`        | `string`                   | —                                 | **Required.** Must match `popoverId` on the paired `<PopoverTrigger>`  |
+| `children`  | `ReactNode`                | —                                 | Body content inside the panel                                          |
+| `placement` | `PopoverPlacementModifier` | `PopoverPlacementModifier.BOTTOM` | Position of the panel relative to the trigger. All 12 values supported |
+| `title`     | `ReactNode`                | —                                 | Optional heading inside the panel                                      |
+| `link`      | `ReactNode`                | —                                 | Optional action link inside the panel                                  |
+
+**`<PopoverTrigger>` props:**
+
+| Prop        | Type           | Description                                                                                                        |
+| ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `popoverId` | `string`       | **Required.** Must match `id` on the paired `<Popover>`                                                            |
+| `children`  | `ReactElement` | Any single focusable element (button, link, etc.). Receives `id`, `popovertarget`, and `anchor-name` automatically |
+
+The naming convention used internally:
+
+- Trigger `id` = `${popoverId}-trigger`
+- `popovertarget` = `${popoverId}`
+- `anchor-name` CSS property = `--${popoverId}`
+- `position-anchor` CSS property = `--${popoverId}`
+
+---
+
+## Placement modifiers (`PopoverPlacementModifier` enum from `ids-shape`)
+
+Set via the `data-placement` attribute on the panel, or the `placement` prop in Twig. All 12 values are supported and map directly to CSS `position-area` declarations on `.mx-popover`.
+
+| `data-placement` value | `PopoverPlacementModifier` | Visual intent                                     |
+| ---------------------- | -------------------------- | ------------------------------------------------- |
+| `top`                  | `TOP`                      | Above trigger, centred horizontally               |
+| `top-start`            | `TOP_START`                | Above trigger, aligned to its start (left in LTR) |
+| `top-end`              | `TOP_END`                  | Above trigger, aligned to its end (right in LTR)  |
+| `right`                | `RIGHT`                    | To the right of trigger, centred vertically       |
+| `right-start`          | `RIGHT_START`              | To the right, aligned to trigger's top            |
+| `right-end`            | `RIGHT_END`                | To the right, aligned to trigger's bottom         |
+| `bottom`               | `BOTTOM`                   | Below trigger, centred horizontally (default)     |
+| `bottom-start`         | `BOTTOM_START`             | Below trigger, aligned to its start               |
+| `bottom-end`           | `BOTTOM_END`               | Below trigger, aligned to its end                 |
+| `left`                 | `LEFT`                     | To the left of trigger, centred vertically        |
+| `left-start`           | `LEFT_START`               | To the left, aligned to trigger's top             |
+| `left-end`             | `LEFT_END`                 | To the left, aligned to trigger's bottom          |
+
+The panel sets `position-try-fallbacks: flip-block flip-inline`, so it automatically flips to the opposite side if it would overflow the viewport.
+
+---
+
+## Accessibility
+
+- Uses the **native Popover API** (`popover` attribute) — open/close state, light-dismiss (click outside), and `Escape` to close are provided by the browser with no custom JS required.
+- The trigger's `popovertarget` attribute is the native equivalent of `aria-controls` — browsers expose the open/close state to assistive tech automatically.
+  The panel is announced via `aria-describedby` on the trigger.
+- The trigger should include a consistent visual indicator (e.g. a question icon) so users can identify elements that have a popover.
+- Min inline size matches the trigger's width (`min-inline-size: anchor-size(width)`) so the panel never appears narrower than its anchor.
+
+### Choosing a role for the panel
+
+The template ships with **no `role`** on the panel. Pick the one that matches your content:
+
+| Use case                                            | Suggested role                                   | Notes                                                                    |
+| --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
+| Short, non-interactive description / hint           | `role="tooltip"`                                 | Keep `aria-describedby` on the trigger. Don't include focusable content. |
+| Interactive content (buttons, links, form controls) | `role="dialog"` and an explicit close affordance | Combine with `aria-labelledby` pointing to a heading inside the panel.   |
+| Plain supplementary block                           | omit role                                        | Treat as ordinary content; the popover behaviour still applies.          |
+
+Anything with focusable children should not use `role="tooltip"` — tooltip implies non-interactive supplementary description.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-popover {
+  --popover-padding: var(--spacing-xs);
+  --popover-background: var(--colour-background);
+  --popover-foreground: var(--colour-foreground);
+  --popover-line-width: 0;
+  --popover-line-colour: var(--colour-border);
+  --popover-radius: var(--border-radius);
+  --popover-shadow: var(--box-shadow);
+  --popover-width: 30ch; /* max-inline-size */
+  --popover-top: var(--spacing-xxxs); /* gap between trigger and panel */
+}
+```
+
+Headings inside a popover are re-sized to `--font-size-m` regardless of their semantic level.

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

@@ -12,14 +12,14 @@ exports[`Bottom 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-bottom" aria-describedby="unique-0" style="position-anchor: --popover-bottom" data-placement="bottom" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-bottom" aria-describedby="unique-0" style="position-anchor: --popover-bottom" data-placement="bottom" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -43,14 +43,14 @@ exports[`Bottom End 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-bottom-end" aria-describedby="unique-0" style="position-anchor: --popover-bottom-end" data-placement="bottom-end" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-bottom-end" aria-describedby="unique-0" style="position-anchor: --popover-bottom-end" data-placement="bottom-end" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -74,14 +74,14 @@ exports[`Bottom Start 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-bottom-start" aria-describedby="unique-0" style="position-anchor: --popover-bottom-start" data-placement="bottom-start" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-bottom-start" aria-describedby="unique-0" style="position-anchor: --popover-bottom-start" data-placement="bottom-start" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -105,14 +105,14 @@ exports[`Left 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-left" aria-describedby="unique-0" style="position-anchor: --popover-left" data-placement="left" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-left" aria-describedby="unique-0" style="position-anchor: --popover-left" data-placement="left" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -136,14 +136,14 @@ exports[`Left End 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-left-end" aria-describedby="unique-0" style="position-anchor: --popover-left-end" data-placement="left-end" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-left-end" aria-describedby="unique-0" style="position-anchor: --popover-left-end" data-placement="left-end" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -167,14 +167,14 @@ exports[`Left Start 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-left-start" aria-describedby="unique-0" style="position-anchor: --popover-left-start" data-placement="left-start" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-left-start" aria-describedby="unique-0" style="position-anchor: --popover-left-start" data-placement="left-start" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -198,14 +198,14 @@ exports[`Popover 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover" aria-describedby="unique-0" style="position-anchor: --popover" data-placement="bottom" role="tooltip" popover="">
+  <div class="mx-popover" id="popover" aria-describedby="unique-0" style="position-anchor: --popover" data-placement="bottom" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -229,14 +229,14 @@ exports[`Right 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-right" aria-describedby="unique-0" style="position-anchor: --popover-right" data-placement="right" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-right" aria-describedby="unique-0" style="position-anchor: --popover-right" data-placement="right" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -260,14 +260,14 @@ exports[`Right End 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-right-end" aria-describedby="unique-0" style="position-anchor: --popover-right-end" data-placement="right-end" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-right-end" aria-describedby="unique-0" style="position-anchor: --popover-right-end" data-placement="right-end" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -291,14 +291,14 @@ exports[`Right Start 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-right-start" aria-describedby="unique-0" style="position-anchor: --popover-right-start" data-placement="right-start" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-right-start" aria-describedby="unique-0" style="position-anchor: --popover-right-start" data-placement="right-start" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -322,14 +322,14 @@ exports[`Top 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-top" aria-describedby="unique-0" style="position-anchor: --popover-top" data-placement="top" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-top" aria-describedby="unique-0" style="position-anchor: --popover-top" data-placement="top" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -353,14 +353,14 @@ exports[`Top End 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-top-end" aria-describedby="unique-0" style="position-anchor: --popover-top-end" data-placement="top-end" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-top-end" aria-describedby="unique-0" style="position-anchor: --popover-top-end" data-placement="top-end" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>
     
@@ -384,14 +384,14 @@ exports[`Top Start 1`] = `
 
   </button>
 
-  <div class="mx-popover" id="popover-top-start" aria-describedby="unique-0" style="position-anchor: --popover-top-start" data-placement="top-start" role="tooltip" popover="">
+  <div class="mx-popover" id="popover-top-start" aria-describedby="unique-0" style="position-anchor: --popover-top-start" data-placement="top-start" popover="">
     <div class="mx-rich-text mx-vertical-flow">
       
 <h2>Popover heading</h2>
 
       <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.</p>
-      
-<a href="#">
+        
+<a href="#" class="mx-link--more">
   
   <span>Learn more</span>