@pnx-mixtape/mxds 0.0.24 → 0.0.26

package/src/Layout/Sidebar/sidebar.twig

@@ -3,23 +3,26 @@
   baseClass,
   order ? "mx-grid--"~order : null,
 ] %}
+{% for modifier in modifiers %}
+  {% set classes = classes|merge(["mx-section--"~modifier]) %}
+{% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
-{% set sidebarAttributes = (sidebarAttributes ?? create_attribute()) %}
-{% set contentAttributes = (contentAttributes ?? create_attribute()) %}
+{% set sidebarAttributes = (sidebarAttributes ?? create_attribute()).addClass('mx-vertical-flow-grid') %}
+{% set contentAttributes = (contentAttributes ?? create_attribute()).addClass('js-content', 'mx-vertical-flow-grid') %}
 
 {% if sidebarContent is not empty %}
   {% set sidebar %}
-    <aside{{ sidebarAttributes }}>
+    <aside {{ sidebarAttributes }}>
       {{ sidebarContent }}
     </aside>
   {% endset %}
 {% endif %}
 
-<div{{ attributes }}>
+<div {{ attributes }}>
   {% if sidebar is not empty and before %}
     {{ sidebar }}
   {% endif %}
-  <section{{ contentAttributes }}>
+  <section {{ contentAttributes }}>
     {{ content }}
   </section>
   {% if sidebar is not empty and not before %}

package/src/Utility/_layout-utils.css

@@ -12,10 +12,18 @@
     display: flex;
   }
 
-  .place-center {
+  .place--center {
     place-content: center;
   }
 
+  .place--end {
+    place-content: end;
+  }
+
+  .place--start {
+    place-content: start;
+  }
+
   .align--center {
     margin-inline: auto;
   }

package/src/constants.css

@@ -27,7 +27,7 @@
     /* System colours */
     --colour-scheme: token("colour.main.scheme");
 
-    color-scheme: var(--colour-scheme);
+    color-scheme: var(--scheme);
 
     --colour-background: light-dark(token("colour.main.bg"), token("colour.reverse.bg"));
     --colour-background-alt: light-dark(token("colour.main.bgAlt"), token("colour.reverse.bgAlt"));
@@ -86,7 +86,7 @@
     --spacing-uul: token("size.spacing.uul");
     --spacing-uuul: token("size.spacing.uuul");
 
-    --outline-width: token("utility.outline.width");
+    --outline-size: token("utility.outline.width");
     --outline-style: token("utility.outline.style");
     --_colour-outline: token("utility.outline.colour");
     --outline-color: light-dark(

package/src/tokens.js

@@ -112,7 +112,7 @@ export default {
     outline: {
       width: "2px",
       style: "solid",
-      colour: "oklch(50% 0.3 260)",
+      colour: "hsl(223 100% 50%)",
     },
     radius: {
       m: "4px",
@@ -120,7 +120,7 @@ export default {
       round: "50%",
     },
     shadow: {
-      colour: "oklch(0.25 0 100 / 0.15)",
+      colour: "hsl(0 0% 13% / 15%)",
       size: global.size.xs,
     },
     ratio: "16 / 9",

package/.storybook/test-runner.ts

@@ -1,77 +0,0 @@
-import { getStoryContext, TestRunnerConfig, waitForPageReady } from "@storybook/test-runner"
-import { injectAxe, checkA11y, configureAxe } from "axe-playwright"
-
-/*
- * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
- * to learn more about the test-runner Hooks API.
- */
-const config: TestRunnerConfig = {
-  tags: {
-    exclude: ["no-snapshot"],
-  },
-  async preVisit(page) {
-    await injectAxe(page)
-  },
-  async postVisit(page, context) {
-    await waitForPageReady(page)
-    await page.emulateMedia({ reducedMotion: "reduce" })
-    await page.evaluate(() => new Promise(resolve => window.requestIdleCallback(resolve)))
-    await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 500)))
-
-    // Unique IDs
-    const ids = await page.$$eval(
-      "[aria-controls],[aria-labelledby],[aria-owns],[aria-describedby]",
-      (els: Array<HTMLElement>) => {
-        const attributes = ["aria-controls", "aria-labelledby", "aria-owns", "aria-describedby"]
-        const before = els.map(
-          el =>
-            el.getAttribute("aria-controls") ||
-            el.getAttribute("aria-labelledby") ||
-            el.getAttribute("aria-describedby") ||
-            el.getAttribute("aria-owns"),
-        )
-        attributes.forEach(attr => {
-          els.forEach((el, ix) => {
-            if (!el.hasAttribute(attr)) {
-              return
-            }
-            el.setAttribute(attr, `unique-${ix}`)
-          })
-        })
-        return before
-      },
-    )
-    if (ids.length) {
-      await page.$$eval(ids.map(id => `[id="${id}"]`).join(","), (els: Array<HTMLElement>) =>
-        els.forEach((el, ix) => el.setAttribute("id", `unique-${ix}`)),
-      )
-    }
-
-    // Automated snapshot testing for each story.
-    const elementHandler = await page.$("#storybook-root")
-    const innerHTML = await elementHandler.innerHTML()
-    // @ts-expect-error expect is available.
-    expect(innerHTML).toMatchSnapshot()
-
-    const storyContext = await getStoryContext(page, context)
-    // Do not run a11y tests on disabled stories.
-    if (storyContext.parameters?.a11y?.disable) {
-      return
-    }
-    // Apply story-level a11y rules
-    await configureAxe(page, {
-      rules: storyContext.parameters?.a11y?.config?.rules,
-    })
-    const element = storyContext.parameters?.a11y?.element ?? "#storybook-root"
-    // Automated accessibility testing for each story.
-    await checkA11y(page, element, {
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
-      },
-    })
-    await elementHandler.dispose()
-  },
-}
-
-export default config

package/dist/build/accordion.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.entry.js","sources":["../../src/Component/Accordion/Elements/AccordionGroup.ts"],"sourcesContent":["/**\n * Accordion Group\n * @file Support opening and closing all.\n */\n\nexport default class AccordionGroup extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return\n    this.handleToggle()\n    const { signal }: AbortController = this.controller\n    this.addEventListener(\"click\", this.handleClick, {\n      signal,\n    })\n    this.accordions.forEach(details =>\n      details.addEventListener(\"toggle\", this.handleToggle, {\n        signal,\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleClick = ({ target }) => {\n    if (target === this.expandTrigger) {\n      this.handleExpand()\n    }\n    if (target === this.collapseTrigger) {\n      this.handleCollapse()\n    }\n  }\n\n  handleExpand = () => {\n    this.accordions.forEach(detail => (detail.open = true))\n    this.expandTrigger.disabled = true\n    this.collapseTrigger.disabled = false\n  }\n\n  handleCollapse = () => {\n    this.accordions.forEach(detail => (detail.open = false))\n    this.expandTrigger.disabled = false\n    this.collapseTrigger.disabled = true\n  }\n\n  handleToggle = () => {\n    this.expandTrigger.disabled = [...this.accordions].every(details => details.open === true)\n    this.collapseTrigger.disabled = [...this.accordions].every(details => details.open !== true)\n  }\n\n  get accordions(): NodeListOf<HTMLDetailsElement> | null {\n    const accordions: NodeListOf<HTMLDetailsElement> | null = this.querySelectorAll(\"details\")\n    if (!accordions.length) {\n      throw new Error(`${this.localName} must contain at least one <details> element.`)\n    }\n    return accordions\n  }\n\n  get expandTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\"button[data-expand]\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <button data-expand> element.`)\n    }\n    return trigger\n  }\n\n  get collapseTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\"button[data-collapse]\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <button data-collapse> element.`)\n    }\n    return trigger\n  }\n}\n\nif (!customElements.get(\"mx-accordion-group\"))\n  customElements.define(\"mx-accordion-group\", AccordionGroup)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion-group\": AccordionGroup\n  }\n}\n"],"names":[],"mappings":";AAKA,MAAqB,uBAAuB,YAAY;AAAA,EACtD;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AAAA,EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,aAAA;AACL,UAAM,EAAE,WAA4B,KAAK;AACzC,SAAK,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CAAA,YACtB,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,cAAc,CAAC,EAAE,aAAa;AAC5B,QAAI,WAAW,KAAK,eAAe;AACjC,WAAK,aAAA;AAAA,IACP;AACA,QAAI,WAAW,KAAK,iBAAiB;AACnC,WAAK,eAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEA,eAAe,MAAM;AACnB,SAAK,WAAW,QAAQ,CAAA,WAAW,OAAO,OAAO,IAAK;AACtD,SAAK,cAAc,WAAW;AAC9B,SAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAEA,iBAAiB,MAAM;AACrB,SAAK,WAAW,QAAQ,CAAA,WAAW,OAAO,OAAO,KAAM;AACvD,SAAK,cAAc,WAAW;AAC9B,SAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAEA,eAAe,MAAM;AACnB,SAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE,MAAM,CAAA,YAAW,QAAQ,SAAS,IAAI;AACzF,SAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE,MAAM,CAAA,YAAW,QAAQ,SAAS,IAAI;AAAA,EAC7F;AAAA,EAEA,IAAI,aAAoD;AACtD,UAAM,aAAoD,KAAK,iBAAiB,SAAS;AACzF,QAAI,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,+CAA+C;AAAA,IAClF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK,cAAc,qBAAqB;AAClF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,+CAA+C;AAAA,IAClF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK,cAAc,uBAAuB;AACpF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,iDAAiD;AAAA,IACpF;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,oBAAoB;AAC1C,iBAAe,OAAO,sBAAsB,cAAc;"}

package/dist/build/chunks/Accordion-D1HQ0FDq.js

@@ -1,63 +0,0 @@
-import { m as makeAnchor } from "./utilities-Ci7wwNeg.js";
-class Accordion extends HTMLElement {
-  internals_;
-  controller;
-  constructor() {
-    super();
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.details || !this.trigger) return;
-    const { signal } = this.controller;
-    document.addEventListener("beforeprint", this.handleOpen, {
-      signal
-    });
-    document.addEventListener("afterprint", this.handleClose, {
-      signal
-    });
-    this.handleHash();
-    document.addEventListener("hashchange", this.handleHash, { signal });
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  handleOpen = () => {
-    if (!this.details) return;
-    this.details.open = true;
-  };
-  handleClose = () => {
-    if (!this.details) return;
-    this.details.open = false;
-  };
-  handleHash = () => {
-    const { hash } = window.location;
-    if (hash && hash === `#${this.details?.id}`) {
-      this.handleOpen();
-    }
-  };
-  get details() {
-    const details = this.querySelector("details");
-    if (!details) {
-      throw new Error(`${this.localName} must contain a <details> element.`);
-    }
-    details.id = details.id || this.generatedId();
-    return details;
-  }
-  get trigger() {
-    const trigger = this.querySelector("summary");
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a <summary> element.`);
-    }
-    return trigger;
-  }
-  generatedId = () => {
-    const string = this.trigger?.textContent?.trim();
-    return !string ? "" : makeAnchor(string);
-  };
-}
-if (!customElements.get("mx-accordion")) customElements.define("mx-accordion", Accordion);
-export {
-  Accordion as A
-};
-//# sourceMappingURL=Accordion-D1HQ0FDq.js.map

package/dist/build/chunks/Accordion-D1HQ0FDq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion-D1HQ0FDq.js","sources":["../../../src/Component/Accordion/Elements/Accordion.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.details || !this.trigger) return\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\"beforeprint\", this.handleOpen, {\n      signal,\n    })\n    document.addEventListener(\"afterprint\", this.handleClose, {\n      signal,\n    })\n    this.handleHash()\n    document.addEventListener(\"hashchange\", this.handleHash, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleOpen = (): void => {\n    if (!this.details) return\n    this.details.open = true\n  }\n\n  handleClose = (): void => {\n    if (!this.details) return\n    this.details.open = false\n  }\n\n  handleHash = (): void => {\n    const { hash }: Location = window.location\n    if (hash && hash === `#${this.details?.id}`) {\n      this.handleOpen()\n    }\n  }\n\n  get details(): HTMLDetailsElement | null {\n    const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n    if (!details) {\n      throw new Error(`${this.localName} must contain a <details> element.`)\n    }\n    details.id = details.id || this.generatedId()\n    return details\n  }\n\n  get trigger(): HTMLElement | null {\n    const trigger: HTMLElement | null = this.querySelector(\"summary\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <summary> element.`)\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\nif (!customElements.get(\"mx-accordion\")) customElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion\": Accordion\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EACjD;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AAAA,EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAEpC,UAAM,EAAE,WAA4B,KAAK;AACzC,aAAS,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACD,aAAS,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAA;AACL,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,aAAa,MAAY;AACvB,QAAI,CAAC,KAAK,QAAS;AACnB,SAAK,QAAQ,OAAO;AAAA,EACtB;AAAA,EAEA,cAAc,MAAY;AACxB,QAAI,CAAC,KAAK,QAAS;AACnB,SAAK,QAAQ,OAAO;AAAA,EACtB;AAAA,EAEA,aAAa,MAAY;AACvB,UAAM,EAAE,SAAmB,OAAO;AAClC,QAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,WAAK,WAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEA,IAAI,UAAqC;AACvC,UAAM,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAA;AAChC,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAChC,UAAM,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,WAAO;AAAA,EACT;AAAA,EAEA,cAAc,MAAc;AAC1B,UAAM,SAA6B,KAAK,SAAS,aAAa,KAAA;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,cAAc,EAAG,gBAAe,OAAO,gBAAgB,SAAS;"}

package/dist/build/chunks/disclosure-widget-CdjCdx7t.js

@@ -1,129 +0,0 @@
-import { m as makeAnchor } from "./utilities-Ci7wwNeg.js";
-class DisclosureWidget {
-  options;
-  context;
-  trigger;
-  element;
-  id;
-  isOpen;
-  attached;
-  constructor(trigger, element, overrides, context = document) {
-    if (!trigger) {
-      throw new Error("toggle is required.");
-    }
-    if (!element) {
-      throw new Error("element is required.");
-    }
-    const options = {
-      attribute: "inert",
-      shouldPreventDefault: true,
-      setInitialAttribute: true,
-      clickEvent: "click"
-    };
-    this.options = { ...options, ...overrides };
-    this.context = context || document;
-    this.trigger = trigger;
-    this.element = element;
-    this.id = this.element.id || this.generatedId();
-  }
-  init = () => {
-    if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget")) return;
-    const { attribute, setInitialAttribute } = this.options;
-    this.trigger.disclosureWidget = this;
-    if (setInitialAttribute) this.element.setAttribute(attribute, "");
-    this.attach();
-  };
-  handleToggle = () => {
-    const { attribute, setInitialAttribute } = this.options;
-    this.element.toggleAttribute(attribute);
-    const hasAttribute = this.element.hasAttribute(attribute);
-    this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute;
-    this.trigger.setAttribute("aria-expanded", String(this.isOpen));
-    const newEvent = new CustomEvent("disclosure-toggle", {
-      bubbles: true,
-      cancelable: true,
-      detail: {
-        isOpen: this.isOpen,
-        id: this.id,
-        options: this.options,
-        target: this.element
-      }
-    });
-    this.trigger.dispatchEvent(newEvent);
-  };
-  handleMouse = (event) => {
-    const { currentTarget, type, relatedTarget } = event;
-    if (type === "mouseover" || type === "mouseout") {
-      const triggerParent = this.trigger.parentNode;
-      if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget))
-        return;
-    } else if (this.trigger !== currentTarget) return;
-    const { shouldPreventDefault } = this.options;
-    this.handleToggle();
-    if (shouldPreventDefault) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  };
-  handleKeyboard = (event) => {
-    const { key, target } = event;
-    if (this.trigger !== target) return;
-    const { isOpen } = this;
-    const { shouldPreventDefault } = this.options;
-    switch (key) {
-      // Down/Enter should open it.
-      case "ArrowDown":
-      case "Enter":
-        if (!isOpen) this.handleToggle();
-        if (shouldPreventDefault) event.preventDefault();
-        break;
-      // Up/Esc should close it.
-      case "ArrowUp":
-      case "Escape":
-        if (isOpen) this.handleToggle();
-        if (shouldPreventDefault) event.preventDefault();
-        break;
-    }
-  };
-  attach = () => {
-    if (this.attached) return;
-    const { clickEvent } = this.options;
-    if (clickEvent === "mouseover") {
-      const parent = this.trigger.parentNode;
-      parent.addEventListener("mouseover", this.handleMouse);
-      parent.addEventListener("mouseout", this.handleMouse);
-    } else {
-      this.trigger.addEventListener("click", this.handleMouse);
-    }
-    this.trigger.addEventListener("keydown", this.handleKeyboard);
-    this.trigger.setAttribute("aria-expanded", "false");
-    if (!this.trigger.hasAttribute("aria-controls"))
-      this.trigger.setAttribute("aria-controls", this.id);
-    this.attached = true;
-  };
-  detach = () => {
-    if (!this.attached) return;
-    if (this.isOpen) {
-      this.handleToggle();
-    }
-    const { clickEvent } = this.options;
-    if (clickEvent === "mouseover") {
-      const parent = this.trigger.parentNode;
-      parent.removeEventListener("mouseover", this.handleMouse);
-      parent.removeEventListener("mouseout", this.handleMouse);
-    } else {
-      this.trigger.removeEventListener("click", this.handleMouse);
-    }
-    this.trigger.removeEventListener("keydown", this.handleKeyboard);
-    this.trigger.removeAttribute("aria-expanded");
-    this.attached = false;
-  };
-  generatedId = () => {
-    const string = this.trigger?.textContent?.trim();
-    return !string ? "" : makeAnchor(string);
-  };
-}
-export {
-  DisclosureWidget as D
-};
-//# sourceMappingURL=disclosure-widget-CdjCdx7t.js.map

package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"disclosure-widget-CdjCdx7t.js","sources":["../../../src/Utility/Elements/disclosure-widget.ts"],"sourcesContent":["/**\n * Class for a generic Disclosure Widget.\n */\nimport { makeAnchor } from \"../utilities\"\n\ntype DisclosureWidgetOptions = {\n  attribute?: string\n  shouldPreventDefault?: boolean\n  setInitialAttribute?: boolean\n  clickEvent?: \"click\" | \"mouseover\"\n}\n\nexport type DisclosureWidgetEvent = {\n  isOpen: boolean\n  id: string\n  options: DisclosureWidgetOptions\n  target: Element\n}\n\nexport default class DisclosureWidget {\n  options: DisclosureWidgetOptions\n  context: Document | Element\n  trigger: Element & { disclosureWidget?: DisclosureWidget }\n  element: Element\n  id: string\n  isOpen?: boolean\n  attached?: boolean\n\n  constructor(\n    trigger: Element,\n    element: Element,\n    overrides?: DisclosureWidgetOptions,\n    context: Element | Document = document,\n  ) {\n    if (!trigger) {\n      throw new Error(\"toggle is required.\")\n    }\n    if (!element) {\n      throw new Error(\"element is required.\")\n    }\n    const options: DisclosureWidgetOptions = {\n      attribute: \"inert\",\n      shouldPreventDefault: true,\n      setInitialAttribute: true,\n      clickEvent: \"click\",\n    }\n\n    this.options = { ...options, ...overrides }\n    this.context = context || document\n    this.trigger = trigger\n    this.element = element\n    this.id = this.element.id || this.generatedId()\n  }\n\n  init = (): void => {\n    if (Object.prototype.hasOwnProperty.call(this.trigger, \"disclosureWidget\")) return\n    const { attribute, setInitialAttribute } = this.options\n    this.trigger.disclosureWidget = this\n    if (setInitialAttribute) this.element.setAttribute(attribute, \"\")\n    this.attach()\n  }\n\n  handleToggle = (): void => {\n    const { attribute, setInitialAttribute } = this.options\n    this.element.toggleAttribute(attribute)\n    const hasAttribute: boolean = this.element.hasAttribute(attribute)\n    this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute\n    this.trigger.setAttribute(\"aria-expanded\", String(this.isOpen))\n    const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(\"disclosure-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        isOpen: this.isOpen,\n        id: this.id,\n        options: this.options,\n        target: this.element,\n      },\n    })\n    this.trigger.dispatchEvent(newEvent)\n  }\n\n  handleMouse = (event: MouseEvent): void => {\n    const { currentTarget, type, relatedTarget } = event\n\n    if (type === \"mouseover\" || type === \"mouseout\") {\n      const triggerParent = this.trigger.parentNode\n      if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget as HTMLElement))\n        return\n    } else if (this.trigger !== currentTarget) return\n\n    const { shouldPreventDefault } = this.options\n    this.handleToggle()\n    if (shouldPreventDefault) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  handleKeyboard = (event: KeyboardEvent): void => {\n    const { key, target } = event\n    if (this.trigger !== target) return\n    const { isOpen } = this\n    const { shouldPreventDefault } = this.options\n\n    switch (key) {\n      // Down/Enter should open it.\n      case \"ArrowDown\":\n      case \"Enter\":\n        if (!isOpen) this.handleToggle()\n        if (shouldPreventDefault) event.preventDefault()\n        break\n\n      // Up/Esc should close it.\n      case \"ArrowUp\":\n      case \"Escape\":\n        if (isOpen) this.handleToggle()\n        if (shouldPreventDefault) event.preventDefault()\n        break\n\n      default:\n        break\n    }\n  }\n\n  attach = (): void => {\n    if (this.attached) return\n    const { clickEvent } = this.options\n    if (clickEvent === \"mouseover\") {\n      const parent = this.trigger.parentNode\n      parent.addEventListener(\"mouseover\", this.handleMouse)\n      parent.addEventListener(\"mouseout\", this.handleMouse)\n    } else {\n      this.trigger.addEventListener(\"click\", this.handleMouse)\n    }\n    this.trigger.addEventListener(\"keydown\", this.handleKeyboard)\n\n    this.trigger.setAttribute(\"aria-expanded\", \"false\")\n    if (!this.trigger.hasAttribute(\"aria-controls\"))\n      this.trigger.setAttribute(\"aria-controls\", this.id)\n    this.attached = true\n  }\n\n  detach = (): void => {\n    if (!this.attached) return\n    if (this.isOpen) {\n      this.handleToggle()\n    }\n    const { clickEvent } = this.options\n    if (clickEvent === \"mouseover\") {\n      const parent = this.trigger.parentNode\n      parent.removeEventListener(\"mouseover\", this.handleMouse)\n      parent.removeEventListener(\"mouseout\", this.handleMouse)\n    } else {\n      this.trigger.removeEventListener(\"click\", this.handleMouse)\n    }\n    this.trigger.removeEventListener(\"keydown\", this.handleKeyboard)\n\n    this.trigger.removeAttribute(\"aria-expanded\")\n    this.attached = false\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js

@@ -1,70 +0,0 @@
-import { P as Popover } from "./popover.entry-BQvyR0d5.js";
-class DropMenu extends Popover {
-  controller;
-  closeOnClick;
-  constructor() {
-    super();
-    this.controller = new AbortController();
-  }
-  async connectedCallback() {
-    await super.connectedCallback();
-    if (!this.container || !this.trigger) return;
-    this.closeOnClick = this.hasAttribute("closeonclick");
-    const { signal } = this.controller;
-    document.addEventListener(
-      "click",
-      (event) => {
-        const targetElement = event.target;
-        const selectable = targetElement.closest("a, button");
-        if (targetElement !== this.container && ![...this.items].includes(selectable))
-          return;
-        this.handleSelect(event);
-        event.preventDefault();
-      },
-      {
-        signal
-      }
-    );
-    document.addEventListener(
-      "keydown",
-      (event) => {
-        const { target, key } = event;
-        if (target !== this.container && ![...this.items].includes(target))
-          return;
-        if (key === "Enter") this.handleSelect(event);
-        event.preventDefault();
-      },
-      {
-        signal
-      }
-    );
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  handleSelect = (event) => {
-    const target = event.target;
-    this.items?.forEach((item) => {
-      if (!(item instanceof HTMLButtonElement)) return;
-      item.setAttribute("aria-checked", String(item === target));
-    });
-    const newEvent = new CustomEvent("drop-menu-select", {
-      bubbles: true,
-      cancelable: true,
-      detail: {
-        event,
-        target
-      }
-    });
-    this.container.dispatchEvent(newEvent);
-    if (this.closeOnClick) this.container.togglePopover();
-  };
-  get items() {
-    return this.container.querySelectorAll("a, button");
-  }
-}
-if (!customElements.get("mx-dropmenu")) customElements.define("mx-dropmenu", DropMenu);
-export {
-  DropMenu as D
-};
-//# sourceMappingURL=drop-menu.entry-fzV-_VFl.js.map

package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drop-menu.entry-fzV-_VFl.js","sources":["../../../src/Component/DropMenu/Elements/DropMenu.ts"],"sourcesContent":["/**\n * DropMenu\n * @file Create a DropMenu using the Popover and Anchor APIs.\n * Handle's menu item select.\n *\n * Once polyfills are no longer needed, this can just extent HTMLElement\n * instead of Popover.\n */\n\nimport Popover from \"../../Popover/Elements/Popover\"\n\nexport type DropMenuEvent = CustomEvent<{\n  event: MouseEvent | KeyboardEvent\n  target: HTMLButtonElement | HTMLAnchorElement\n}>\n\nexport default class DropMenu extends Popover {\n  controller: AbortController\n  closeOnClick: boolean\n\n  constructor() {\n    super()\n    this.controller = new AbortController()\n  }\n\n  async connectedCallback() {\n    await super.connectedCallback()\n    if (!this.container || !this.trigger) return\n\n    this.closeOnClick = this.hasAttribute(\"closeonclick\")\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\n      \"click\",\n      (event: MouseEvent): void => {\n        const targetElement = event.target as HTMLElement\n        const selectable = targetElement.closest(\"a, button\")\n        if (\n          (targetElement as HTMLElement) !== this.container &&\n          ![...this.items].includes(selectable as HTMLButtonElement | HTMLAnchorElement)\n        )\n          return\n        this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    document.addEventListener(\n      \"keydown\",\n      (event: KeyboardEvent): void => {\n        const { target, key } = event\n        if (\n          (target as HTMLElement) !== this.container &&\n          ![...this.items].includes(target as HTMLButtonElement | HTMLAnchorElement)\n        )\n          return\n        if (key === \"Enter\") this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleSelect = (event: MouseEvent | KeyboardEvent): void => {\n    const target = event.target as HTMLButtonElement | HTMLAnchorElement\n    this.items?.forEach(item => {\n      if (!(item instanceof HTMLButtonElement)) return\n      item.setAttribute(\"aria-checked\", String(item === target))\n    })\n    const newEvent: DropMenuEvent = new CustomEvent(\"drop-menu-select\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        event,\n        target,\n      },\n    })\n    this.container.dispatchEvent(newEvent)\n    if (this.closeOnClick) this.container.togglePopover()\n  }\n\n  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> | null {\n    return this.container.querySelectorAll(\"a, button\")\n  }\n}\n\nif (!customElements.get(\"mx-dropmenu\")) customElements.define(\"mx-dropmenu\", DropMenu)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-dropmenu\": DropMenu\n  }\n}\n"],"names":[],"mappings":";AAgBA,MAAqB,iBAAiB,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,IAAI,gBAAA;AAAA,EACxB;AAAA,EAEA,MAAM,oBAAoB;AACxB,UAAM,MAAM,kBAAA;AACZ,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,QAAS;AAEtC,SAAK,eAAe,KAAK,aAAa,cAAc;AAEpD,UAAM,EAAE,WAA4B,KAAK;AACzC,aAAS;AAAA,MACP;AAAA,MACA,CAAC,UAA4B;AAC3B,cAAM,gBAAgB,MAAM;AAC5B,cAAM,aAAa,cAAc,QAAQ,WAAW;AACpD,YACG,kBAAkC,KAAK,aACxC,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,SAAS,UAAmD;AAE7E;AACF,aAAK,aAAa,KAAK;AACvB,cAAM,eAAA;AAAA,MACR;AAAA,MACA;AAAA,QACE;AAAA,MAAA;AAAA,IACF;AAGF,aAAS;AAAA,MACP;AAAA,MACA,CAAC,UAA+B;AAC9B,cAAM,EAAE,QAAQ,IAAA,IAAQ;AACxB,YACG,WAA2B,KAAK,aACjC,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,SAAS,MAA+C;AAEzE;AACF,YAAI,QAAQ,QAAS,MAAK,aAAa,KAAK;AAC5C,cAAM,eAAA;AAAA,MACR;AAAA,MACA;AAAA,QACE;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,eAAe,CAAC,UAA4C;AAC1D,UAAM,SAAS,MAAM;AACrB,SAAK,OAAO,QAAQ,CAAA,SAAQ;AAC1B,UAAI,EAAE,gBAAgB,mBAAoB;AAC1C,WAAK,aAAa,gBAAgB,OAAO,SAAS,MAAM,CAAC;AAAA,IAC3D,CAAC;AACD,UAAM,WAA0B,IAAI,YAAY,oBAAoB;AAAA,MAClE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,SAAK,UAAU,cAAc,QAAQ;AACrC,QAAI,KAAK,aAAc,MAAK,UAAU,cAAA;AAAA,EACxC;AAAA,EAEA,IAAI,QAAkE;AACpE,WAAO,KAAK,UAAU,iBAAiB,WAAW;AAAA,EACpD;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAG,gBAAe,OAAO,eAAe,QAAQ;"}