@pnx-mixtape/mxds 0.0.1

package/README.md

@@ -0,0 +1,274 @@
+# Mixtape
+
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+### The PreviousNext Design System: [mixtape.pnx.io](https://mixtape.pnx.io/)
+
+A design system helps align teams around how products are designed and built.
+
+It improves team efficiency and reduces design debt by becoming a bridge which helps
+designers and developers communicate.
+
+Our design system has been created to help us establish what our collective best practices
+are and how they apply to a suite of our most common UI elements.
+
+It's like our greatest hits.
+
+# Using Mixtape
+
+## Installation
+
+```
+npm install @pnx-mixtape/mxds/ --save
+```
+
+## Usage
+
+Once installed, you can `import` the css and javascript into your project's codebase.
+
+### Importing and overriding styles
+
+Dependencies:
+
+- [postcss-design-tokens](https://www.npmjs.com/package/postcss-design-tokens)
+
+Add the [tokens](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/tokens.js)
+and override the values or just copy/paste from Mixtape and update;
+
+_eg. project-tokens.js_
+
+```js
+const tokens = require("@pnx-mixtape/mxds/c/src/tokens")
+
+// Override existing ones;
+tokens.colour.brand.primary = "rgb(0, 92, 250)"
+
+//Add new ones;
+tokens.newThing = "somethingNew"
+
+module.exports = tokens
+```
+
+The [custom properties](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/_constants.css)
+can also be included via @import or just copy/paste if you only need a limited set.
+
+This file should be included in the browser.
+
+_eg. project-constants.css_
+
+```css
+@import "@pnx-mixtape/mxds/constants.css";
+
+:root {
+  --my-colour-primary: rgb(0, 92, 250);
+  --my-colour-secondary: rgb(247, 143, 29);
+}
+```
+
+The [custom media](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/_custom-media.css)
+should also be included, and is required in EVERY css file that uses them. PostCSS replaces this,
+so there is no need to worry about duplication.
+
+_eg. project-breakpoints.css_
+
+```css
+@import "@pnx-mixtape/mxds/_custom-media.css";
+
+@custom-media --my-breakpoint (width >= "200px");
+```
+
+Once these 3 files are setup, you can proceed with adding the components.
+
+_eg. buttons.css_
+
+```css
+@import "../project-breakpoints.css";
+@import "@pnx-mixtape/mxds/button.css";
+```
+
+Or partially imported;
+
+_eg. buttons.css_
+
+```css
+@import "../project-breakpoints.css";
+@import "@pnx-mixtape/mxds/src/Atom/_buttons.css";
+@import "@pnx-mixtape/mxds/src/Atom/_buttons-styles.css";
+
+.button--primary {
+  --border-radius: 0;
+
+  @media (--medium-up) {
+    border-width: 6px;
+  }
+}
+```
+
+The packages are as modular as practical, so you can be specific about what to include
+based on your projects requirements.
+
+There are many custom properties that are available to override the default values. Any place you see an undefined
+custom property before a mixtape fallback, you can set it in you project. eg.
+
+```css
+.line {
+  border-color: var(--line-colour, var(--colour-border));
+}
+```
+
+```css
+.line--red {
+  --line-colour: red;
+}
+```
+
+#### Cascade layers
+
+[@layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are used in Mixtape to ensure ease in overriding CSS on a project
+level. If you are importing `@pnx-mixtape/mxds/Atom/base` CSS then the layers are included.
+
+If you are only partially importing the base CSS files, then you'll need to manually
+include the layers at the start of your CSS;
+
+```css
+@layer defaults, layout, elements, components, utilities;
+```
+
+Any CSS not wrapped in a layer will have higher specificity to Mixtape's CSS.
+Alternatively you can append your own layers to the end of these, to achieve a
+similar result.
+
+### Importing React components
+
+### Importing and extending javascript Elements
+
+Some packages also provide vanilla javascript to manage simple user interactions. You can include
+and initialise these by importing them into your projects `.entry.js` files (or whatever is
+setup to run through a bundler like Rollup).
+
+_eg. project-init.entry.js_
+
+```js
+import "@pnx-mixtape/mxds/"
+```
+
+To customise this javascript we recommend importing and then extending the Class;
+
+```js
+import Accordion from "@pnx-mixtape/mxds/"
+
+class FancyAccordion extends Accordion {
+  constructor(element) {
+    super(element)
+    this.isFancy = true
+  }
+
+  handleOpen() {
+    super.handleOpen()
+    this.isFancyAndOpen = true
+  }
+}
+
+customElements.define("mx-fancy-accordion", FancyAccordion)
+```
+
+## Examples
+
+**[pnx-project](https://github.com/previousnext/pnx-project/)** has Mixtape included in the
+theme by default. Please refer to it (or use it directly) when setting up a Mixtape project.
+
+**[mixtape.pnx.io](https://mixtape.pnx.io/)** is Mixtapes storybook.
+
+## Updating a Mixtape based project
+
+Mixtape goes through rapid development at times and Breaking Changes can be common. New packages
+may not be compatible with old ones. Particularly due to;
+
+- Introduction of design tokens
+- Refactoring of several custom properties
+- Introduction of CSS @layers
+- Introduction of Container Queries
+- Utility javascript being moved from base to its own package `../../utilities/utilities`
+- Use of `inert` in place of `hidden`
+- Various performance improvements
+- Removal of the Lerna monorepo tools
+
+If updating an entire project isn't feasible, and you get stuck, then please Log an issue.
+We can look into back porting the required bug fix or feature, or help with a work-around.
+
+# Contributing to Mixtape
+
+## Finding and Logging issues
+
+Please log bugs to [Jira](https://previousnext.atlassian.net/secure/RapidBoard.jspa?rapidView=5)
+or join the #mixtape channel in the PNX Slack to ask questions.
+
+Adding [patch-package](https://www.npmjs.com/package/patch-package) to your project will allow
+you to create project specific patches for Mixtape, so you're not hampered by waiting for a bug
+fix to released in Mixtape. Please upload any patches made to the relevant bug report in Jira.
+
+## Build tools
+
+This project uses Docker to manage node versions and build tasks.
+
+### Dependencies and building
+
+First clone this repository;
+
+```
+git clone git@github.com:previousnext/mixtape.git
+cd mixtape
+```
+
+Install project dependcencies:
+
+```
+make install
+```
+
+Then you can up the Docker container and start watching for changes with;
+
+```
+make up
+```
+
+From here you can access the Storybook instance and get started.
+
+### Publishing changes
+
+When you are ready to publish your change, commit your work and
+follow the prompts using:
+
+```
+npm run commit
+```
+
+This uses [Commitizen](https://www.npmjs.com/package/commitizen) to manage
+commit messages and versioning. You will be walked through an interactive
+questionnaire.
+
+Select the type of change from Feat (Feature), Fix, Docs, Style, Refactor,
+Perf, Test, and Chore. This will be used in the commitizen changelog and helps
+to determine the version when publishing to npm.
+
+Then create a pull request, wait for builds to pass, and get the code reviewed.
+
+Once approved, merge the PR.
+
+CircleCI will go through and bump the version number to a "prerelease" version.
+It will change the version number in package.json, commit the change to git and publish to NPM.
+
+When you are ready for a full release, merge the `master` branch into `releases`.
+This will trigger a deploy in CircleCI to update [mixtape.pnx.io](https://mixtape.pnx.io/).
+Approval is then required to publish to the [NPM registry](https://www.npmjs.com/org/pnx-mixtape).
+
+### Test coverage
+
+Jest tests cover basic functionality and accessibility. They are run on
+all Pull Requests and Master/Releases merges. You can run locally with;
+
+```
+make test
+```
+
+Any package that adds javascript requires test coverage.

package/dist/build/Accordion.js

@@ -0,0 +1,61 @@
+import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
+class Accordion extends HTMLElement {
+  constructor() {
+    super();
+    this.handleOpen = () => {
+      if (!this.details) return;
+      this.details.open = true;
+    };
+    this.handleClose = () => {
+      if (!this.details) return;
+      this.details.open = false;
+    };
+    this.handleHash = () => {
+      const { hash } = window.location;
+      if (hash && hash === `#${this.details?.id}`) {
+        this.handleOpen();
+      }
+    };
+    this.generatedId = () => {
+      const string = this.trigger?.textContent?.trim();
+      return !string ? "" : makeAnchor(string);
+    };
+    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();
+  }
+  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;
+  }
+}
+customElements.define("mx-accordion", Accordion);
+export {
+  Accordion as default
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/build/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.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\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion\": Accordion\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;"}

package/dist/build/AccordionDiv.js

@@ -0,0 +1,62 @@
+import DisclosureWidget from "./disclosure-widget.js";
+import "./chunks/js.cookie-CiMiGxWx.js";
+import "./io-loader.js";
+import "./breakpoint-loader.js";
+const _AccordionDiv = class _AccordionDiv extends HTMLElement {
+  constructor() {
+    super();
+    this.handleHash = () => {
+      const { hash } = window.location;
+      if (hash && hash === `#${this.id}` && !this.hasAttribute("open")) {
+        this.widget.handleToggle();
+      }
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    if (!this.trigger || !this.content) return;
+    this.content?.setAttribute("inert", "");
+    this.content?.setAttribute("role", "region");
+    this.widget = new DisclosureWidget(this.trigger, this, {
+      attribute: "open",
+      setInitialAttribute: false
+    });
+    this.widget.init();
+    const { signal } = this.controller;
+    this.handleHash();
+    document.addEventListener("hashchange", this.handleHash, { signal });
+  }
+  disconnectedCallback() {
+    this.content?.removeAttribute("inert");
+    this.widget.detach();
+    this.controller.abort();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    const isClosed = newValue === null;
+    this.content?.toggleAttribute("inert", isClosed);
+  }
+  get trigger() {
+    const trigger = this.querySelector(":scope > button");
+    if (!trigger) {
+      throw new Error(`${this.localName} must contain a <button> element.`);
+    }
+    return trigger;
+  }
+  get content() {
+    const content = this.trigger?.nextElementSibling;
+    if (!content) {
+      throw new Error(
+        `${this.localName} must contain a <div> element after the <button>.`
+      );
+    }
+    return content;
+  }
+};
+_AccordionDiv.observedAttributes = ["open"];
+let AccordionDiv = _AccordionDiv;
+customElements.define("mx-accordiondiv", AccordionDiv);
+export {
+  AccordionDiv as default
+};
+//# sourceMappingURL=AccordionDiv.js.map

package/dist/build/AccordionDiv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionDiv.js","sources":["../../src/Component/Accordion/Elements/AccordionDiv.ts"],"sourcesContent":["/**\n * AccordionDiv\n * @file Support for adding <details> type behavior to divs.\n */\n\nimport { DisclosureWidget } from \"../../../Utility/utilities\"\n\nexport default class AccordionDiv extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  widget!: DisclosureWidget\n  static observedAttributes: string[] = [\"open\"]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.trigger || !this.content) return\n    this.content?.setAttribute(\"inert\", \"\")\n    this.content?.setAttribute(\"role\", \"region\")\n    this.widget = new DisclosureWidget(this.trigger, this, {\n      attribute: \"open\",\n      setInitialAttribute: false,\n    })\n    this.widget.init()\n    const { signal }: AbortController = this.controller\n    this.handleHash()\n    document.addEventListener(\"hashchange\", this.handleHash, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.content?.removeAttribute(\"inert\")\n    this.widget.detach()\n    this.controller.abort()\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string,\n    newValue: string,\n  ): void {\n    const isClosed = newValue === null\n    this.content?.toggleAttribute(\"inert\", isClosed)\n  }\n\n  handleHash = (): void => {\n    const { hash } = window.location\n    if (hash && hash === `#${this.id}` && !this.hasAttribute(\"open\")) {\n      this.widget.handleToggle()\n    }\n  }\n\n  get trigger(): HTMLButtonElement {\n    const trigger: HTMLButtonElement | null =\n      this.querySelector(\":scope > button\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <button> element.`)\n    }\n    return trigger\n  }\n\n  get content(): HTMLDivElement {\n    const content: HTMLDivElement | null | undefined = this.trigger\n      ?.nextElementSibling as HTMLDivElement\n    if (!content) {\n      throw new Error(\n        `${this.localName} must contain a <div> element after the <button>.`,\n      )\n    }\n    return content\n  }\n}\n\ncustomElements.define(\"mx-accordiondiv\", AccordionDiv)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordiondiv\": AccordionDiv\n  }\n}\n"],"names":[],"mappings":";;;;AAOA,MAAqB,gBAArB,MAAqB,sBAAqB,YAAY;AAAA,EAMpD,cAAc;AACN;AAkCR,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAI,OAAO;AACpB,UAAA,QAAQ,SAAS,IAAI,KAAK,EAAE,MAAM,CAAC,KAAK,aAAa,MAAM,GAAG;AAChE,aAAK,OAAO;MACd;AAAA,IAAA;AArCK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAC/B,SAAA,SAAS,aAAa,SAAS,EAAE;AACjC,SAAA,SAAS,aAAa,QAAQ,QAAQ;AAC3C,SAAK,SAAS,IAAI,iBAAiB,KAAK,SAAS,MAAM;AAAA,MACrD,WAAW;AAAA,MACX,qBAAqB;AAAA,IAAA,CACtB;AACD,SAAK,OAAO;AACN,UAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AACtB,SAAA,SAAS,gBAAgB,OAAO;AACrC,SAAK,OAAO;AACZ,SAAK,WAAW;EAClB;AAAA,EAEA,yBACE,MACA,UACA,UACM;AACN,UAAM,WAAW,aAAa;AACzB,SAAA,SAAS,gBAAgB,SAAS,QAAQ;AAAA,EACjD;AAAA,EASA,IAAI,UAA6B;AACzB,UAAA,UACJ,KAAK,cAAc,iBAAiB;AACtC,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,mCAAmC;AAAA,IACtE;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA0B;AACtB,UAAA,UAA6C,KAAK,SACpD;AACJ,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AACF;AA/DS,cAAA,qBAA+B,CAAC,MAAM;AAJ/C,IAAqB,eAArB;AAqEA,eAAe,OAAO,mBAAmB,YAAY;"}

package/dist/build/AccordionGroup.js

@@ -0,0 +1,85 @@
+class AccordionGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.handleClick = ({ target }) => {
+      if (target === this.expandTrigger) {
+        this.handleExpand();
+      }
+      if (target === this.collapseTrigger) {
+        this.handleCollapse();
+      }
+    };
+    this.handleExpand = () => {
+      this.accordions.forEach((detail) => detail.open = true);
+      this.expandTrigger.disabled = true;
+      this.collapseTrigger.disabled = false;
+    };
+    this.handleCollapse = () => {
+      this.accordions.forEach((detail) => detail.open = false);
+      this.expandTrigger.disabled = false;
+      this.collapseTrigger.disabled = true;
+    };
+    this.handleToggle = () => {
+      this.expandTrigger.disabled = [...this.accordions].every(
+        (details) => details.open === true
+      );
+      this.collapseTrigger.disabled = [...this.accordions].every(
+        (details) => details.open !== true
+      );
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return;
+    this.collapseTrigger.disabled = true;
+    const { signal } = this.controller;
+    this.addEventListener("click", this.handleClick, {
+      signal
+    });
+    this.accordions.forEach(
+      (details) => details.addEventListener("toggle", this.handleToggle, {
+        signal
+      })
+    );
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  get accordions() {
+    const accordions = this.querySelectorAll("details");
+    if (!accordions.length) {
+      throw new Error(
+        `${this.localName} must contain at least one <details> element.`
+      );
+    }
+    return accordions;
+  }
+  get expandTrigger() {
+    const trigger = this.querySelector(
+      ".accordions__toggle-all button[data-expand]"
+    );
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button data-expand> element.`
+      );
+    }
+    return trigger;
+  }
+  get collapseTrigger() {
+    const trigger = this.querySelector(
+      ".accordions__toggle-all button[data-collapse]"
+    );
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button data-collapse> element.`
+      );
+    }
+    return trigger;
+  }
+}
+customElements.define("mx-accordion-group", AccordionGroup);
+export {
+  AccordionGroup as default
+};
+//# sourceMappingURL=AccordionGroup.js.map

package/dist/build/AccordionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.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.collapseTrigger.disabled = true\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(\n      details => details.open === true,\n    )\n    this.collapseTrigger.disabled = [...this.accordions].every(\n      details => details.open !== true,\n    )\n  }\n\n  get accordions(): NodeListOf<HTMLDetailsElement> | null {\n    const accordions: NodeListOf<HTMLDetailsElement> | null =\n      this.querySelectorAll(\"details\")\n    if (!accordions.length) {\n      throw new Error(\n        `${this.localName} must contain at least one <details> element.`,\n      )\n    }\n    return accordions\n  }\n\n  get expandTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \".accordions__toggle-all button[data-expand]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-expand> element.`,\n      )\n    }\n    return trigger\n  }\n\n  get collapseTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \".accordions__toggle-all button[data-collapse]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-collapse> element.`,\n      )\n    }\n    return trigger\n  }\n}\n\ncustomElements.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,EAItD,cAAc;AACN;AAuBM,SAAA,cAAA,CAAC,EAAE,aAAa;AACxB,UAAA,WAAW,KAAK,eAAe;AACjC,aAAK,aAAa;AAAA,MACpB;AACI,UAAA,WAAW,KAAK,iBAAiB;AACnC,aAAK,eAAe;AAAA,MACtB;AAAA,IAAA;AAGF,SAAA,eAAe,MAAM;AACnB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,IAAK;AACtD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,iBAAiB,MAAM;AACrB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,KAAM;AACvD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,eAAe,MAAM;AACnB,WAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACjD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAE9B,WAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACnD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAAA,IAC9B;AAjDK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACpB,QAAA,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,gBAAgB,WAAW;AAC1B,UAAA,EAAE,OAAO,IAAqB,KAAK;AACpC,SAAA,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CACtB,YAAA,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAgCA,IAAI,aAAoD;AAChD,UAAA,aACJ,KAAK,iBAAiB,SAAS;AAC7B,QAAA,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,sBAAsB,cAAc;"}

package/dist/build/AccordionMobile.js

@@ -0,0 +1,31 @@
+import Accordion from "./Accordion.js";
+class AccordionMobile extends Accordion {
+  constructor() {
+    super();
+    this.handleBreakpoint = ({
+      matches
+    }) => {
+      if (!this.details) return;
+      this.details.toggleAttribute("open", !matches);
+    };
+    this.mq = this.getAttribute("mq") || "(max-width: 720px)";
+  }
+  connectedCallback() {
+    this.handleBreakpoint(this.breakpoint);
+    const { signal } = this.controller;
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  get breakpoint() {
+    return window.matchMedia(this.mq);
+  }
+}
+customElements.define("mx-accordionmobile", AccordionMobile);
+export {
+  AccordionMobile as default
+};
+//# sourceMappingURL=AccordionMobile.js.map

package/dist/build/AccordionMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionMobile.js","sources":["../../src/Component/Accordion/Elements/AccordionMobile.ts"],"sourcesContent":["/**\n * AccordionMobile\n * @file Support a mobile only <details> element, that opens at a breakpoint.\n */\n\nimport Accordion from \"./Accordion\"\n\nexport default class AccordionMobile extends Accordion {\n  mq: string\n  toggleAttribute!: Element[\"toggleAttribute\"]\n\n  constructor() {\n    super()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    this.handleBreakpoint(this.breakpoint)\n    const { signal }: AbortController = this.controller\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (!this.details) return\n    this.details.toggleAttribute(\"open\", !matches)\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-accordionmobile\", AccordionMobile)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordionmobile\": AccordionMobile\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,wBAAwB,UAAU;AAAA,EAIrD,cAAc;AACN;AAgBR,SAAA,mBAAmB,CAAC;AAAA,MAClB;AAAA,IAAA,MACgD;AAC5C,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,gBAAgB,QAAQ,CAAC,OAAO;AAAA,IAAA;AAnB7C,SAAK,KAAK,KAAK,aAAa,IAAI,KAAK;AAAA,EACvC;AAAA,EAEA,oBAA0B;AACnB,SAAA,iBAAiB,KAAK,UAAU;AAC/B,UAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,SAAK,WAAW,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,MAChE;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EASA,IAAI,aAA6B;AACxB,WAAA,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC;AACF;AAEA,eAAe,OAAO,sBAAsB,eAAe;"}

package/dist/build/Dialog.js

@@ -0,0 +1,116 @@
+import { h as handleOutsideClick, a as handleEscape } from "./chunks/utilities-BIk0P2KX.js";
+class Dialog extends HTMLElement {
+  constructor() {
+    super();
+    this.scrollLockClass = "body--scroll-lock";
+    this.handleOpen = () => {
+      if (!this.dialog) return;
+      if (typeof this.dialog.show === "function") {
+        this.isModal ? this.dialog.showModal() : this.dialog.show();
+      }
+      this.openBtns.forEach(
+        (btn) => btn.setAttribute("aria-expanded", "true")
+      );
+      document.body.classList.add(this.scrollLockClass);
+    };
+    this.handleClose = () => {
+      if (!this.dialog) return;
+      if (typeof this.dialog.close === "function") this.dialog.close();
+      this.openBtns.forEach(
+        (btn) => btn.setAttribute("aria-expanded", "false")
+      );
+      document.body.classList.remove(this.scrollLockClass);
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    if (!this.openBtns || !this.dialog) return;
+    const { signal } = this.controller;
+    document.addEventListener(
+      "click",
+      (e) => {
+        if (![...this.openBtns].includes(e.target)) return;
+        this.handleOpen();
+        e.preventDefault();
+      },
+      {
+        signal
+      }
+    );
+    this.dialog.addEventListener(
+      "click",
+      (e) => {
+        if (![...this.closeBtns].includes(e.target)) return;
+        this.handleClose();
+        e.preventDefault();
+      },
+      {
+        signal
+      }
+    );
+    document.addEventListener(
+      "click",
+      (e) => {
+        if (!this.dialog?.open) return;
+        handleOutsideClick(e, this.dialog, this.handleClose, [
+          ...this.openBtns,
+          ...this.closeBtns
+        ]);
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!this.dialog?.open) return;
+        handleEscape(e, this.handleClose);
+      },
+      { signal }
+    );
+  }
+  /**
+   * Disconnected.
+   */
+  disconnectedCallback() {
+    if (!this.dialog) return;
+    if (typeof this.dialog.close === "function") this.dialog.close();
+    this.openBtns.forEach(
+      (btn) => btn.setAttribute("aria-expanded", "false")
+    );
+    document.body.classList.remove(this.scrollLockClass);
+    this.controller.abort();
+  }
+  get dialog() {
+    const dialog = this.querySelector("dialog");
+    if (!dialog) {
+      throw new Error(`${this.localName} must contain a <dialog> element.`);
+    }
+    return dialog;
+  }
+  get openBtns() {
+    const btns = document.querySelectorAll(
+      `[href="#${this.id}"], [aria-controls="${this.id}"]`
+    );
+    if (!btns) {
+      throw new Error(
+        `${this.localName} must have an associated opening element.`
+      );
+    }
+    btns.forEach((btn) => {
+      btn.setAttribute("aria-controls", this.id);
+    });
+    return btns;
+  }
+  get closeBtns() {
+    return this.querySelectorAll("button[data-close]");
+  }
+  get isModal() {
+    return this.hasAttribute("data-modal");
+  }
+}
+customElements.define("mx-dialog", Dialog);
+export {
+  Dialog as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/build/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../src/Component/Dialog/Elements/Dialog.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { handleOutsideClick, handleEscape } from \"../../../Utility/utilities\"\n\nexport default class Dialog extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  scrollLockClass: string = \"body--scroll-lock\"\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.openBtns || !this.dialog) return\n\n    const { signal }: AbortController = this.controller\n\n    // Open on toggle click.\n    document.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        if (![...this.openBtns].includes(e.target as HTMLButtonElement)) return\n        this.handleOpen()\n        e.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    // Close on close button click.\n    this.dialog.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        if (![...this.closeBtns].includes(e.target as HTMLButtonElement)) return\n        this.handleClose()\n        e.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    // Close on outside click.\n    document.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        if (!this.dialog?.open) return\n        handleOutsideClick(e, this.dialog as HTMLElement, this.handleClose, [\n          ...this.openBtns,\n          ...this.closeBtns,\n        ])\n      },\n      { signal },\n    )\n\n    // Close on escape keydown.\n    document.addEventListener(\n      \"keydown\",\n      (e: KeyboardEvent): void => {\n        if (!this.dialog?.open) return\n        handleEscape(e, this.handleClose)\n      },\n      { signal },\n    )\n  }\n\n  /**\n   * Disconnected.\n   */\n  disconnectedCallback(): void {\n    if (!this.dialog) return\n    if (typeof this.dialog.close === \"function\") this.dialog.close()\n    this.openBtns.forEach((btn: Element) =>\n      btn.setAttribute(\"aria-expanded\", \"false\"),\n    )\n    document.body.classList.remove(this.scrollLockClass)\n    this.controller.abort()\n  }\n\n  handleOpen = (): void => {\n    if (!this.dialog) return\n    if (typeof this.dialog.show === \"function\") {\n      this.isModal ? this.dialog.showModal() : this.dialog.show()\n    }\n    this.openBtns.forEach((btn: Element) =>\n      btn.setAttribute(\"aria-expanded\", \"true\"),\n    )\n    document.body.classList.add(this.scrollLockClass)\n  }\n\n  handleClose = (): void => {\n    if (!this.dialog) return\n    if (typeof this.dialog.close === \"function\") this.dialog.close()\n    this.openBtns.forEach((btn: Element) =>\n      btn.setAttribute(\"aria-expanded\", \"false\"),\n    )\n    document.body.classList.remove(this.scrollLockClass)\n  }\n\n  get dialog(): HTMLDialogElement | null {\n    const dialog: HTMLDialogElement | null = this.querySelector(\"dialog\")\n    if (!dialog) {\n      throw new Error(`${this.localName} must contain a <dialog> element.`)\n    }\n    return dialog\n  }\n\n  get openBtns(): NodeListOf<HTMLButtonElement> {\n    const btns: NodeListOf<HTMLButtonElement> = document.querySelectorAll(\n      `[href=\"#${this.id}\"], [aria-controls=\"${this.id}\"]`,\n    )\n    if (!btns) {\n      throw new Error(\n        `${this.localName} must have an associated opening element.`,\n      )\n    }\n    btns.forEach((btn: HTMLButtonElement): void => {\n      btn.setAttribute(\"aria-controls\", this.id)\n    })\n    return btns\n  }\n\n  get closeBtns(): NodeListOf<HTMLButtonElement> {\n    return this.querySelectorAll(\"button[data-close]\")\n  }\n\n  get isModal(): boolean {\n    return this.hasAttribute(\"data-modal\")\n  }\n}\n\ncustomElements.define(\"mx-dialog\", Dialog)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-dialog\": Dialog\n  }\n}\n"],"names":[],"mappings":"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"}