@pnx-mixtape/mxds 0.0.23 → 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

@@ -7,122 +7,123 @@
 @property --scheme {
   syntax: "light | dark";
   inherits: true;
-  initial-value: token("colour.scheme");
+  initial-value: token("colour.main.scheme");
 }
 
-:root {
-  --_hue-primary: token("colour.primary");
-  --_hue-accent: token("colour.accent");
-  --_hue-info: token("colour.info");
-  --_hue-error: token("colour.error");
-  --_hue-warning: token("colour.warning");
-  --_hue-success: token("colour.success");
-  --_hue-outline: token("utility.outline.hue");
-
-  /* Brand colors */
-  --colour-primary: oklch(50% 0.3 var(--_hue-primary));
-  --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
-  --colour-accent: oklch(50% 0.3 var(--_hue-accent));
-  --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
-
-  /* System colours */
-  --color-scheme: token("colour.scheme");
-
-  color-scheme: var(--color-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"));
-  --colour-foreground: light-dark(token("colour.main.fg"), token("colour.reverse.fg"));
-  --colour-foreground-alt: light-dark(token("colour.main.fgAlt"), token("colour.reverse.fgAlt"));
-  --colour-border: light-dark(token("colour.main.border"), token("colour.reverse.border"));
-  --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
-
-  /* Reverse colors */
-  --colour-foreground-reverse: light-dark(token("colour.reverse.fg"), token("colour.main.fg"));
-  --colour-background-reverse: light-dark(token("colour.reverse.bg"), token("colour.main.bg"));
-
-  /* State colours */
-  --colour-error: oklch(45% 0.3 var(--_hue-error));
-  --colour-success: oklch(50% 0.3 var(--_hue-success));
-  --colour-warning: oklch(55% 0.3 var(--_hue-warning));
-  --colour-info: oklch(50% 0.3 var(--_hue-info));
-
-  /* Typography */
-  --font-family: token("font.family");
-  --type-ratio: token("font.size.ratio");
-  --type-ratio-small: token("font.size.ratioSmall");
-  --base-font-size: max(1rem, token("font.size.basePx"));
-  --font-size: var(--base-font-size);
-  --font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));
-  --font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));
-  --font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));
-  --font-size-m: calc(var(--base-font-size) * var(--type-ratio));
-  --font-size-l: calc(var(--font-size-m) * var(--type-ratio));
-  --font-size-xl: calc(var(--font-size-l) * var(--type-ratio));
-  --font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));
-  --font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));
-  --font-size-diff: token("font.size.diff");
-
-  --line-height: token("font.lineHeight.main");
-  --line-height-h: token("font.lineHeight.heading");
-  --line-height-ui: token("font.lineHeight.ui");
-
-  --font-weight-normal: token("font.weight.main");
-  --font-weight-bold: token("font.weight.bold");
-
-  /* Spacing */
-  --spacing-xxxxs: token("size.spacing.xxxxs");
-  --spacing-xxxs: token("size.spacing.xxxs");
-  --spacing-xxs: token("size.spacing.xxs");
-  --spacing-xs: token("size.spacing.xs");
-  --spacing-s: token("size.spacing.s");
-  --spacing-m: token("size.spacing.m");
-  --spacing-l: token("size.spacing.l");
-  --spacing-xl: token("size.spacing.xl");
-  --spacing-xxl: token("size.spacing.xxl");
-  --spacing-xxxl: token("size.spacing.xxxl");
-  --spacing-xxxxl: token("size.spacing.xxxl");
-  --spacing-ul: token("size.spacing.ul");
-  --spacing-uul: token("size.spacing.uul");
-  --spacing-uuul: token("size.spacing.uuul");
-
-  --outline-width: token("utility.outline.width");
-  --outline-style: token("utility.outline.style");
-  --_colour-outline: oklch(50% 0.3 var(--_hue-outline));
-  --outline-color: light-dark(
-    var(--_colour-outline),
-    color-mix(in oklch, var(--_colour-outline), white 90%)
-  );
-
-  /* Layout */
-  --container-max-width-narrow: token("size.container.narrow");
-  --container-max-width: token("size.container.aligned");
-  --gutter-min: token("size.container.gutterMin");
-  --gutter-max: token("size.container.gutterMax");
-  --gap-s: token("size.gap.s");
-  --gap: token("size.gap.m");
-  --gap-l: token("size.gap.l");
-  --gap-xl: token("size.gap.xl");
-  --breakpoint-xs: token("breakpoint.xs");
-  --breakpoint-s: token("breakpoint.s");
-  --breakpoint-m: token("breakpoint.m");
-  --breakpoint-l: token("breakpoint.l");
-  --breakpoint-xl: token("breakpoint.xl");
-
-  /* Utility */
-  --shadow-color: token("utility.shadow.colour");
-  --shadow-size: token("utility.shadow.size");
-  --shadow-shape: 0 0 var(--shadow-size);
-  --box-shadow: var(--shadow-shape) var(--shadow-color);
-  --border-radius: token("utility.radius.m");
-  --border-radius-l: token("utility.radius.l");
-  --border-radius-round: token("utility.radius.round");
-  --ratio: token("utility.ratio");
-  --ease: cubic-bezier(0.25, 0, 0.3, 1);
-}
-
-@media (--medium-down) {
+@layer design-system.defaults {
   :root {
-    --section-xl: var(--spacing-xxl);
+    /* Brand colors */
+    --colour-primary: token("colour.primary.colour");
+    --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
+    --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
+    --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 10%);
+    --colour-primary-scheme: token("colour.primary.scheme");
+    --colour-accent: token("colour.accent.colour");
+    --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
+    --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
+    --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
+    --colour-accent-scheme: token("colour.accent.scheme");
+
+    /* System colours */
+    --colour-scheme: token("colour.main.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"));
+    --colour-foreground: light-dark(token("colour.main.fg"), token("colour.reverse.fg"));
+    --colour-foreground-alt: light-dark(token("colour.main.fgAlt"), token("colour.reverse.fgAlt"));
+    --colour-border: light-dark(token("colour.main.border"), token("colour.reverse.border"));
+    --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
+
+    /* Reverse colors */
+    --colour-foreground-reverse: light-dark(token("colour.reverse.fg"), token("colour.main.fg"));
+    --colour-background-reverse: light-dark(token("colour.reverse.bg"), token("colour.main.bg"));
+    --colour-reverse-scheme: token("colour.reverse.scheme");
+
+    /* State colours */
+    --colour-error: token("colour.error");
+    --colour-success: token("colour.success");
+    --colour-warning: token("colour.warning");
+    --colour-info: token("colour.info");
+
+    /* Typography */
+    --font-family: token("font.family");
+    --type-ratio: token("font.size.ratio");
+    --type-ratio-small: token("font.size.ratioSmall");
+    --base-font-size: max(1rem, token("font.size.basePx"));
+    --font-size: var(--base-font-size);
+    --font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));
+    --font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));
+    --font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));
+    --font-size-m: calc(var(--base-font-size) * var(--type-ratio));
+    --font-size-l: calc(var(--font-size-m) * var(--type-ratio));
+    --font-size-xl: calc(var(--font-size-l) * var(--type-ratio));
+    --font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));
+    --font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));
+    --font-size-diff: token("font.size.diff");
+
+    --line-height: token("font.lineHeight.main");
+    --line-height-h: token("font.lineHeight.heading");
+    --line-height-ui: token("font.lineHeight.ui");
+
+    --font-weight-normal: token("font.weight.main");
+    --font-weight-bold: token("font.weight.bold");
+
+    /* Spacing */
+    --spacing-xxxxs: token("size.spacing.xxxxs");
+    --spacing-xxxs: token("size.spacing.xxxs");
+    --spacing-xxs: token("size.spacing.xxs");
+    --spacing-xs: token("size.spacing.xs");
+    --spacing-s: token("size.spacing.s");
+    --spacing-m: token("size.spacing.m");
+    --spacing-l: token("size.spacing.l");
+    --spacing-xl: token("size.spacing.xl");
+    --spacing-xxl: token("size.spacing.xxl");
+    --spacing-xxxl: token("size.spacing.xxxl");
+    --spacing-xxxxl: token("size.spacing.xxxl");
+    --spacing-ul: token("size.spacing.ul");
+    --spacing-uul: token("size.spacing.uul");
+    --spacing-uuul: token("size.spacing.uuul");
+
+    --outline-size: token("utility.outline.width");
+    --outline-style: token("utility.outline.style");
+    --_colour-outline: token("utility.outline.colour");
+    --outline-color: light-dark(
+      var(--_colour-outline),
+      color-mix(in oklch, var(--_colour-outline), white 90%)
+    );
+
+    /* Layout */
+    --container-max-width-narrow: token("size.container.narrow");
+    --container-max-width: token("size.container.aligned");
+    --gutter-min: token("size.container.gutterMin");
+    --gutter-max: token("size.container.gutterMax");
+    --gap-s: token("size.gap.s");
+    --gap: token("size.gap.m");
+    --gap-l: token("size.gap.l");
+    --gap-xl: token("size.gap.xl");
+    --breakpoint-xs: token("breakpoint.xs");
+    --breakpoint-s: token("breakpoint.s");
+    --breakpoint-m: token("breakpoint.m");
+    --breakpoint-l: token("breakpoint.l");
+    --breakpoint-xl: token("breakpoint.xl");
+
+    /* Utility */
+    --shadow-color: token("utility.shadow.colour");
+    --shadow-size: token("utility.shadow.size");
+    --shadow-shape: 0 0 var(--shadow-size);
+    --box-shadow: var(--shadow-shape) var(--shadow-color);
+    --border-radius: token("utility.radius.m");
+    --border-radius-l: token("utility.radius.l");
+    --border-radius-round: token("utility.radius.round");
+    --ratio: token("utility.ratio");
+    --ease: cubic-bezier(0.25, 0, 0.3, 1);
+  }
+
+  @media (--medium-down) {
+    :root {
+      --section-xl: var(--spacing-xxl);
+    }
   }
 }

package/src/enums.ts

@@ -146,6 +146,7 @@ export enum Icons {
   TRASH = "trash",
   USER = "user",
   SHARE = "share",
+  QUESTION = "question",
 }
 
 export enum GridColumns {

package/src/tokens.js

@@ -29,27 +29,34 @@ export default {
     dropMenu: "420px",
   },
   colour: {
-    scheme: "light",
-    primary: "260",
-    accent: "320",
+    primary: {
+      colour: "hsl(223 100% 50%)",
+      scheme: "dark",
+    },
+    accent: {
+      colour: "hsl(60, 94%, 68%)",
+      scheme: "light",
+    },
     main: {
-      fg: "oklch(0 0 100)",
-      bg: "oklch(1 0 100)",
-      fgAlt: "oklch(0.25 0 100)",
-      bgAlt: "oklch(0.95 0 100)",
-      border: "oklch(.9 0 100)",
+      fg: "hsl(60 30% 6%)",
+      bg: "hsl(60 0% 100%)",
+      fgAlt: "hsl(60 30% 20%)",
+      bgAlt: "hsl(60 30% 95%)",
+      border: "hsl(60 5% 85%)",
+      scheme: "light",
     },
     reverse: {
-      fg: "oklch(1 0 100)",
-      bg: "oklch(0 0 100)",
-      fgAlt: "oklch(0.95 0 100)",
-      bgAlt: "oklch(0.25 0 100)",
-      border: "oklch(0.25 0 100)",
+      fg: "hsl(60 0% 100%)",
+      bg: "hsl(60 30% 6%)",
+      fgAlt: "hsl(60 5% 60%)",
+      bgAlt: "hsl(60 0% 5%)",
+      border: "hsl(60 0% 20%)",
+      scheme: "dark",
     },
-    info: "260",
-    warning: "90",
-    success: "140",
-    error: "20",
+    info: "hsl(223 100% 50%)",
+    warning: "hsl(35 100% 32%)",
+    success: "hsl(120 100% 26%)",
+    error: "hsl(348 100% 33%)",
   },
   font: {
     family: "system-ui, sans-serif",
@@ -105,7 +112,7 @@ export default {
     outline: {
       width: "2px",
       style: "solid",
-      hue: "260",
+      colour: "hsl(223 100% 50%)",
     },
     radius: {
       m: "4px",
@@ -113,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/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