@pnx-mixtape/mxds 0.0.24 → 0.0.26

package/.storybook/decorators.ts

@@ -3,5 +3,5 @@ import { Decorator } from "@storybook/html-vite"
 
 export const Page: Decorator = (story, { globals }) => {
   const { background } = globals
-  return `<div class="mx-page ${background}">${story()}</div>`
+  return `<div class="mx-page ${background}" data-testid="page">${story()}</div>`
 }

package/.storybook/main.ts

@@ -3,7 +3,7 @@ import { StorybookConfig } from "@storybook/html-vite"
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.ts", "../mockups/*.stories.ts"],
   staticDirs: ["./public"],
-  addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+  addons: ["@storybook/addon-a11y", "@storybook/addon-docs", "@storybook/addon-vitest"],
   framework: "@storybook/html-vite",
   refs: (config, { configType }) => {
     if (configType === "DEVELOPMENT") {
@@ -16,6 +16,14 @@ const config: StorybookConfig = {
       },
     }
   },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import("vite")
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      cacheDir: `${config.cacheDir}/html`,
+    })
+  },
 }
 
 export default config

package/.storybook/preview.ts

@@ -25,6 +25,7 @@ const preview: Preview = {
         },
         resultTypes: ["violations"],
       },
+      test: "error",
     },
     options: {
       storySort: {

package/.storybook/theme-demo.css

@@ -22,11 +22,17 @@
   }
 
   & .mx-rich-text p {
-    max-inline-size: var(--container-max-width);
+    max-inline-size: 76ch;
+
+    &.mx-text--lede {
+      --font-size: var(--font-size-l);
+
+      max-inline-size: 50ch;
+    }
   }
 
   & .mx-background--box {
-    border-width: 2px;
+    --line-width: 2px;
   }
 
   &
@@ -68,22 +74,20 @@
       --font-size: var(--font-size-xl);
       --container-max-width-narrow: 40ch;
     }
+
+    &[class*="mx-background--"] .mx-hero-banner__aside-image {
+      margin-bottom: -2rem;
+    }
   }
 
   & .mx-footer__inner {
     & .mx-footer__aoc {
-      margin-inline: auto;
-      max-inline-size: 101ch;
-    }
-
-    & .mx-social-links {
-      grid-area: links;
-      justify-content: end;
-    }
+      border-block-start: 2px solid currentcolor;
 
-    & .mx-footer__copyright:not(:first-child) {
-      padding-block-start: 0;
-      margin-block-start: 0;
+      & p {
+        max-inline-size: 96ch;
+        text-wrap: balance;
+      }
     }
   }
 }

package/.storybook/vitest.setup.ts

@@ -0,0 +1,17 @@
+import { beforeAll, afterEach, expect } from "vitest"
+import { page } from "vitest/browser"
+import { setProjectAnnotations } from "@storybook/html-vite"
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview"
+import * as previewAnnotations from "./preview"
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const annotations = setProjectAnnotations([previewAnnotations, a11yAddonAnnotations])
+
+beforeAll(annotations.beforeAll)
+
+afterEach(async () => {
+  await new Promise(resolve => window.requestIdleCallback(resolve))
+  const element = page.getByTestId("page")?.element()?.innerHTML
+  expect(element).toMatchSnapshot()
+})

package/dist/build/accordion.css

@@ -1,113 +1,103 @@
-/**
- * Accordion
- */
-
 @layer design-system.defaults {
-    details summary {
-      list-style-type: none;
-    }
+  details summary {
+    list-style-type: none
+  }
+
+  :is(details summary):is(::-webkit-details-marker,::marker) {
+    display: none;
+    content: ""
+  }
 
-      :is(details summary):is(::-webkit-details-marker,::marker) {
-        display: none;
-        content: "";
-      }
+  :is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group) {
+    display: block
+  }
 
-  :is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
-    display: block;
+  :where(:is(div.mx-accordion,mx-accordiondiv)) .mx-accordion__toggle {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    color: inherit;
+    font-size: inherit;
+    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+    background: initial;
+    border: medium none currentcolor;
+    border: initial;
+    padding: 0;
+    padding: initial
   }
-    :where(:is(div.mx-accordion,mx-accordiondiv)) .mx-accordion__toggle {
-      -webkit-appearance: none;
-         -moz-appearance: none;
-              appearance: none;
-      color: inherit;
-      font-size: inherit;
-      background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-      background: initial;
-      border: medium none currentcolor;
-      border: initial;
-      padding: 0;
-      padding: initial;
-    }
-}
 
+  mx-accordion-group:not(:defined) .mx-accordions__toggle-all {
+    display: none
+  }
+}
 @layer design-system.components {
   .mx-accordion__title {
     margin-block-end: var(--spacing-m);
     display: flex;
     flex-flow: row wrap;
     gap: var(--spacing-s);
-    align-items: center;
+    align-items: center
   }
 
   .mx-accordions__toggle-all {
-    margin-inline-start: auto;
+    margin-inline-start: auto
   }
-    .mx-accordion .mx-accordion__toggle {
-      cursor: pointer;
-      inline-size: 100%;
-    }
 
-    .mx-accordion:is( > h2, > h3, > h4, > h5, > h6) {
-      all: unset;
-    }
-
-    .mx-accordion > .mx-accordion__content {
-      display: none;
-      opacity: 0;
-      overflow: hidden;
-    }
-        :is(.mx-accordion:is([open],[data-open="true"]) > .mx-accordion__toggle) .mx-icon--chevron-down {
-          transform: rotate(180deg);
-        }
+  .mx-accordion .mx-accordion__toggle {
+    cursor: pointer;
+    inline-size: 100%
+  }
 
-      .mx-accordion:is([open],[data-open="true"]) > .mx-accordion__content {
-        opacity: 1;
-        display: block;
-      }
+  .mx-accordion:is(>h2,>h3,>h4,>h5,>h6) {
+    all: unset
+  }
 
-        @starting-style {
+  .mx-accordion > .mx-accordion__content {
+    display: none;
+    opacity: 0;
+    overflow: hidden
+  }
 
-      .mx-accordion:is([open],[data-open="true"]) > .mx-accordion__content {
-          opacity: 0;
-          display: block;
-      }
-        }
+  :is(.mx-accordion:is([open],[data-open=true])>.mx-accordion__toggle) .mx-icon--chevron-down {
+    transform: rotate(180deg)
+  }
 
-  .mx-accordion--divided {
-    border-block-end: 1px solid
-      var(--line-colour, var(--colour-border));
-    border-block-end: var(--line-width, 1px) solid
-      var(--line-colour, var(--colour-border));
+  .mx-accordion:is([open],[data-open=true]) > .mx-accordion__content {
+    opacity: 1;
+    display: block
   }
 
-    .mx-accordion--divided .mx-accordion__toggle {
-      padding-block: var(--vertical-padding, var(--spacing-xxs));
-      padding-inline: 0;
-      padding-inline: var(--horizontal-padding, 0);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: var(--spacing-xxs);
+  @starting-style {
+    .mx-accordion:is([open],[data-open=true]) > .mx-accordion__content {
+      opacity: 0;
+      display: block
     }
-      .mx-accordion--divided:is([open],[data-open="true"]) > .mx-accordion__content {
-        border-block-start: 1px solid
-          var(--line-colour, var(--colour-border));
-        border-block-start: var(--line-width, 1px) solid
-          var(--line-colour, var(--colour-border));
-        padding-block: var(--vertical-padding, var(--spacing-xxs));
-        padding-inline: 0;
-        padding-inline: var(--horizontal-padding, 0);
-      }
-}
+  }.mx-accordion--divided {
+     border-block-end: 1px solid var(--line-colour, var(--colour-border));
+     border-block-end: var(--line-width, 1px) solid var(--line-colour, var(--colour-border))
+   }
 
-/**
- * Print stylesheet
- */
+  .mx-accordion--divided .mx-accordion__toggle {
+    padding-block: var(--vertical-padding, var(--spacing-xxs));
+    padding-inline: 0;
+    padding-inline: var(--horizontal-padding, 0);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-xxs)
+  }
 
-@media print {
-    .mx-accordion .mx-accordion__content {
-      display: block !important;
-    }
+  .mx-accordion--divided:is([open],[data-open=true]) > .mx-accordion__content {
+    border-block-start: 1px solid var(--line-colour, var(--colour-border));
+    border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
+    padding-block: var(--vertical-padding, var(--spacing-xxs));
+    padding-inline: 0;
+    padding-inline: var(--horizontal-padding, 0)
+  }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7SUFHRTtNQUNFLGVBQWU7TUFDZixpQkFBaUI7SUFDbkI7O0lBRUE7TUFDRSxVQUFVO0lBQ1o7O0lBRUE7TUFDRSxhQUFhO01BQ2IsVUFBVTtNQUNWLGdCQUFnQjtJQUNsQjtRQUlJO1VBQ0UseUJBQXlCO1FBQzNCOztNQUdGO1FBQ0UsVUFBVTtRQUNWLGNBQWM7TUFNaEI7O1FBSkU7O01BSkY7VUFLSSxVQUFVO1VBQ1YsY0FBYztNQUVsQjtRQURFOztFQUtOO0lBQ0U7OENBQzBDO0lBRDFDOzhDQUMwQztFQW1CNUM7O0lBakJFO01BQ0UsMERBQTBEO01BQzFELGlCQUE0QztNQUE1Qyw0Q0FBNEM7TUFDNUMsYUFBYTtNQUNiLDhCQUE4QjtNQUM5QixtQkFBbUI7TUFDbkIsdUJBQXVCO0lBQ3pCO01BR0U7UUFDRTtrREFDMEM7UUFEMUM7a0RBQzBDO1FBQzFDLDBEQUEwRDtRQUMxRCxpQkFBNEM7UUFBNUMsNENBQTRDO01BQzlDO0FBR047O0FBRUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHlCQUF5QjtJQUMzQjtBQUVKIiwiZmlsZSI6ImFjY29yZGlvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEFjY29yZGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgZGV0YWlscyB7XG4gICAgJiBzdW1tYXJ5IHtcbiAgICAgIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTtcblxuICAgICAgJjppcyg6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXIsIDo6bWFya2VyKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgOmlzKG14LWFjY29yZGlvbiwgbXgtYWNjb3JkaW9uZGl2LCBteC1hY2NvcmRpb25tb2JpbGUpIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuXG4gIDp3aGVyZSg6aXMoZGl2Lm14LWFjY29yZGlvbiwgbXgtYWNjb3JkaW9uZGl2KSkge1xuICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgIGZvbnQtc2l6ZTogaW5oZXJpdDtcbiAgICAgIGJhY2tncm91bmQ6IGluaXRpYWw7XG4gICAgICBib3JkZXI6IGluaXRpYWw7XG4gICAgICBwYWRkaW5nOiBpbml0aWFsO1xuICAgIH1cbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWFjY29yZGlvbl9fdGl0bGUge1xuICAgIG1hcmdpbi1ibG9jay1lbmQ6IHZhcigtLXNwYWNpbmctbSk7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWZsb3c6IHJvdyB3cmFwO1xuICAgIGdhcDogdmFyKC0tc3BhY2luZy1zKTtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB9XG5cbiAgLm14LWFjY29yZGlvbnNfX3RvZ2dsZS1hbGwge1xuICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IGF1dG87XG4gIH1cblxuICAubXgtYWNjb3JkaW9uIHtcbiAgICAmIC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICB9XG5cbiAgICAmOmlzKD4gaDIsID4gaDMsID4gaDQsID4gaDUsID4gaDYpIHtcbiAgICAgIGFsbDogdW5zZXQ7XG4gICAgfVxuXG4gICAgJiA+IC5teC1hY2NvcmRpb25fX2NvbnRlbnQge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIH1cblxuICAgICY6aXMoW29wZW5dLCBbZGF0YS1vcGVuPVwidHJ1ZVwiXSkge1xuICAgICAgJiA+IC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICAgICYgLm14LWljb24tLWNoZXZyb24tZG93biB7XG4gICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmID4gLm14LWFjY29yZGlvbl9fY29udGVudCB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuXG4gICAgICAgIEBzdGFydGluZy1zdHlsZSB7XG4gICAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5teC1hY2NvcmRpb24tLWRpdmlkZWQge1xuICAgIGJvcmRlci1ibG9jay1lbmQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG5cbiAgICAmIC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS12ZXJ0aWNhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4cykpO1xuICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGdhcDogdmFyKC0tc3BhY2luZy14eHMpO1xuICAgIH1cblxuICAgICY6aXMoW29wZW5dLCBbZGF0YS1vcGVuPVwidHJ1ZVwiXSkge1xuICAgICAgJiA+IC5teC1hY2NvcmRpb25fX2NvbnRlbnQge1xuICAgICAgICBib3JkZXItYmxvY2stc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS12ZXJ0aWNhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4cykpO1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCAwKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBQcmludCBzdHlsZXNoZWV0XG4gKi9cblxuQG1lZGlhIHByaW50IHtcbiAgLm14LWFjY29yZGlvbiB7XG4gICAgJiAubXgtYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG4iXX0= */
+@media print {
+  .mx-accordion .mx-accordion__content {
+    display: block !important
+  }
+}

package/dist/build/accordion.entry.js

@@ -1,72 +1,46 @@
-import "./chunks/Accordion-D1HQ0FDq.js";
-class AccordionGroup extends HTMLElement {
-  internals_;
-  controller;
-  constructor() {
-    super();
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return;
-    this.handleToggle();
-    const { signal } = this.controller;
-    this.addEventListener("click", this.handleClick, {
-      signal
-    });
-    this.accordions.forEach(
-      (details) => details.addEventListener("toggle", this.handleToggle, {
-        signal
-      })
-    );
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  handleClick = ({ target }) => {
-    if (target === this.expandTrigger) {
-      this.handleExpand();
-    }
-    if (target === this.collapseTrigger) {
-      this.handleCollapse();
-    }
-  };
-  handleExpand = () => {
-    this.accordions.forEach((detail) => detail.open = true);
-    this.expandTrigger.disabled = true;
-    this.collapseTrigger.disabled = false;
-  };
-  handleCollapse = () => {
-    this.accordions.forEach((detail) => detail.open = false);
-    this.expandTrigger.disabled = false;
-    this.collapseTrigger.disabled = true;
-  };
-  handleToggle = () => {
-    this.expandTrigger.disabled = [...this.accordions].every((details) => details.open === true);
-    this.collapseTrigger.disabled = [...this.accordions].every((details) => details.open !== true);
-  };
-  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("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("button[data-collapse]");
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a <button data-collapse> element.`);
-    }
-    return trigger;
-  }
-}
-if (!customElements.get("mx-accordion-group"))
-  customElements.define("mx-accordion-group", AccordionGroup);
-//# sourceMappingURL=accordion.entry.js.map
+import "./chunks/utilities-DepaJdUg.js";
+import "./chunks/Accordion-Dwh42fp7.js";
+var AccordionGroup = class extends HTMLElement {
+	internals_;
+	controller;
+	constructor() {
+		super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
+	}
+	connectedCallback() {
+		if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return;
+		this.handleToggle();
+		let { signal: e } = this.controller;
+		this.addEventListener("click", this.handleClick, { signal: e }), this.accordions.forEach((t) => t.addEventListener("toggle", this.handleToggle, { signal: e }));
+	}
+	disconnectedCallback() {
+		this.controller.abort();
+	}
+	handleClick = ({ target: e }) => {
+		e === this.expandTrigger && this.handleExpand(), e === this.collapseTrigger && this.handleCollapse();
+	};
+	handleExpand = () => {
+		this.accordions.forEach((e) => e.open = !0), this.expandTrigger.disabled = !0, this.collapseTrigger.disabled = !1;
+	};
+	handleCollapse = () => {
+		this.accordions.forEach((e) => e.open = !1), this.expandTrigger.disabled = !1, this.collapseTrigger.disabled = !0;
+	};
+	handleToggle = () => {
+		this.expandTrigger.disabled = [...this.accordions].every((e) => e.open === !0), this.collapseTrigger.disabled = [...this.accordions].every((e) => e.open !== !0);
+	};
+	get accordions() {
+		let e = this.querySelectorAll("details");
+		if (!e.length) throw Error(`${this.localName} must contain at least one <details> element.`);
+		return e;
+	}
+	get expandTrigger() {
+		let e = this.querySelector("button[data-expand]");
+		if (!e) throw Error(`${this.localName} must contain a <button data-expand> element.`);
+		return e;
+	}
+	get collapseTrigger() {
+		let e = this.querySelector("button[data-collapse]");
+		if (!e) throw Error(`${this.localName} must contain a <button data-collapse> element.`);
+		return e;
+	}
+};
+customElements.get("mx-accordion-group") || customElements.define("mx-accordion-group", AccordionGroup);