@pnx-mixtape/mxds 0.0.26 → 0.0.28

package/.storybook/main.ts

@@ -21,7 +21,10 @@ const config: StorybookConfig = {
     const { mergeConfig } = await import("vite")
     return mergeConfig(config, {
       // Add dependencies to pre-optimization
-      cacheDir: `${config.cacheDir}/html`,
+      cacheDir: "node_modules/.vite-storybook",
+      build: {
+        cssMinify: "esbuild",
+      },
     })
   },
 }

package/.storybook/vitest.setup.ts

@@ -12,6 +12,42 @@ beforeAll(annotations.beforeAll)
 
 afterEach(async () => {
   await new Promise(resolve => window.requestIdleCallback(resolve))
-  const element = page.getByTestId("page")?.element()?.innerHTML
+  const pageEl = page.getByTestId("page")?.element()
+  if (!pageEl) return
+
+  // Find all elements with aria attributes or react-aria names
+  const selector =
+    '[aria-controls],[aria-labelledby],[aria-owns],[aria-describedby],[name^="react-aria"]'
+  const els = Array.from(pageEl.querySelectorAll(selector))
+
+  const attributes = ["aria-controls", "aria-labelledby", "aria-describedby", "aria-owns", "name"]
+
+  // Collect the original IDs
+  const ids: string[] = []
+
+  // Replace attribute values with unique-${ix}
+  attributes.forEach(attr => {
+    els.forEach((el, ix) => {
+      if (!el.hasAttribute(attr)) return
+
+      const originalValue = el.getAttribute(attr)
+      if (originalValue && !ids.includes(originalValue)) {
+        ids.push(originalValue)
+      }
+      el.setAttribute(attr, `unique-${ix}`)
+    })
+  })
+
+  // Replace the actual id attributes that match collected IDs
+  if (ids.length) {
+    ids.forEach((id, ix) => {
+      const idElements = pageEl.querySelectorAll(`[id="${id}"]`)
+      idElements.forEach(el => {
+        el.setAttribute("id", `unique-${ix}`)
+      })
+    })
+  }
+
+  const element = pageEl.innerHTML
   expect(element).toMatchSnapshot()
 })

package/dist/build/accordion.css

@@ -1,103 +1 @@
-@layer design-system.defaults {
-  details summary {
-    list-style-type: none
-  }
-
-  :is(details summary):is(::-webkit-details-marker,::marker) {
-    display: none;
-    content: ""
-  }
-
-  :is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group) {
-    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
-  }
-
-  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
-  }
-
-  .mx-accordions__toggle-all {
-    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:is([open],[data-open=true]) > .mx-accordion__content {
-    opacity: 1;
-    display: block
-  }
-
-  @starting-style {
-    .mx-accordion:is([open],[data-open=true]) > .mx-accordion__content {
-      opacity: 0;
-      display: block
-    }
-  }.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--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)
-  }
-
-  .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)
-  }
-}
-
-@media print {
-  .mx-accordion .mx-accordion__content {
-    display: block !important
-  }
-}
+@layer design-system.defaults{details summary{list-style-type:none}:is(details summary):is(::-webkit-details-marker,::marker){display:none;content:""}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group){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}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}.mx-accordions__toggle-all{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:is([open],[data-open=true])>.mx-accordion__content{opacity:1;display:block}@starting-style{.mx-accordion:is([open],[data-open=true])>.mx-accordion__content{opacity:0;display:block}}.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--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)}.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)}}@media print{.mx-accordion .mx-accordion__content{display:block!important}}

package/dist/build/accordion.entry.js

@@ -1,5 +1,5 @@
 import "./chunks/utilities-DepaJdUg.js";
-import "./chunks/Accordion-Dwh42fp7.js";
+import "./chunks/Accordion-BzKLBuWL.js";
 var AccordionGroup = class extends HTMLElement {
 	internals_;
 	controller;

package/dist/build/chunks/{DropMenu-plGsgySm.js → DropMenu-LnJEp-sg.js}

@@ -1,4 +1,4 @@
-import { t as Popover } from "./Popover-Bws25suh.js";
+import { t as Popover } from "./Popover-C4gisyxr.js";
 var DropMenu = class extends Popover {
 	controller;
 	closeOnClick;

package/dist/build/constants.css

@@ -1,100 +1 @@
-@property --scheme {
-  syntax: "light | dark";
-  inherits: true;
-  initial-value: light;
-}
-
-@layer design-system.defaults {
-  :root {
-    --colour-primary: hsl(223, 100%, 50%);
-    --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: dark;
-    --colour-accent: hsl(60, 94%, 68%);
-    --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: light;
-    --colour-scheme: light;
-    color-scheme: var(--scheme);
-    --colour-background: light-dark(hsl(0, 0%, 100%), hsl(60, 30%, 6%));
-    --colour-background-alt: light-dark(hsl(60, 30%, 95%), hsl(0, 0%, 5%));
-    --colour-foreground: light-dark(hsl(60, 30%, 6%), hsl(0, 0%, 100%));
-    --colour-foreground-alt: light-dark(hsl(60, 30%, 20%), hsl(60, 5%, 60%));
-    --colour-border: light-dark(hsl(60, 5%, 85%), hsl(0, 0%, 20%));
-    --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
-    --colour-foreground-reverse: light-dark(hsl(0, 0%, 100%), hsl(60, 30%, 6%));
-    --colour-background-reverse: light-dark(hsl(60, 30%, 6%), hsl(0, 0%, 100%));
-    --colour-reverse-scheme: dark;
-    --colour-error: hsl(348, 100%, 33%);
-    --colour-success: hsl(120, 100%, 26%);
-    --colour-warning: hsl(35, 100%, 32%);
-    --colour-info: hsl(223, 100%, 50%);
-    --font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
-    --type-ratio: 1.25;
-    --type-ratio-small: 1.125;
-    --base-font-size: max(1rem, 16px);
-    --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: .3;
-    --line-height: 1.6;
-    --line-height-h: 1.2;
-    --line-height-ui: .9rem;
-    --font-weight-normal: 400;
-    --font-weight-bold: 700;
-    --spacing-xxxxs: .25em;
-    --spacing-xxxs: .5em;
-    --spacing-xxs: .75em;
-    --spacing-xs: .875em;
-    --spacing-s: 1em;
-    --spacing-m: 1.5em;
-    --spacing-l: 2em;
-    --spacing-xl: 2.5em;
-    --spacing-xxl: 3em;
-    --spacing-xxxl: 3.5em;
-    --spacing-xxxxl: 3.5em;
-    --spacing-ul: 4.5em;
-    --spacing-uul: 5em;
-    --spacing-uuul: 5.5em;
-    --outline-size: .125rem;
-    --outline-style: solid;
-    --_colour-outline: hsl(223, 100%, 50%);
-    --outline-color: light-dark(var(--_colour-outline), color-mix(in oklch, var(--_colour-outline), white 90%));
-    --container-max-width-narrow: 58ch;
-    --container-max-width: 76ch;
-    --gutter-min: 1em;
-    --gutter-max: 2em;
-    --gap-s: 1em;
-    --gap: 1.5em;
-    --gap-l: 2em;
-    --gap-xl: 2.5em;
-    --breakpoint-xs: 26.25rem;
-    --breakpoint-s: 33.75rem;
-    --breakpoint-m: 45rem;
-    --breakpoint-l: 59.125rem;
-    --breakpoint-xl: 68.75rem;
-    --shadow-color: hsla(0, 0%, 13%, .15);
-    --shadow-size: .875em;
-    --shadow-shape: 0 0 var(--shadow-size);
-    --box-shadow: var(--shadow-shape) var(--shadow-color);
-    --border-radius: .25rem;
-    --border-radius-l: 2em;
-    --border-radius-round: 50%;
-    --ratio: 16 / 9;
-    --ease: cubic-bezier(.25, 0, .3, 1)
-  }
-
-  @media (max-width: 719.98px) {
-    :root {
-      --section-xl: var(--spacing-xxl)
-    }
-  }
-}
+@property --scheme{syntax: "light | dark"; inherits: true; initial-value: light;}@layer design-system.defaults{:root{--colour-primary: hsl(223, 100%, 50%);--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: dark;--colour-accent: hsl(60, 94%, 68%);--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: light;--colour-scheme: light;color-scheme:var(--scheme);--colour-background: light-dark(hsl(0, 0%, 100%), hsl(60, 30%, 6%));--colour-background-alt: light-dark(hsl(60, 30%, 95%), hsl(0, 0%, 5%));--colour-foreground: light-dark(hsl(60, 30%, 6%), hsl(0, 0%, 100%));--colour-foreground-alt: light-dark(hsl(60, 30%, 20%), hsl(60, 5%, 60%));--colour-border: light-dark(hsl(60, 5%, 85%), hsl(0, 0%, 20%));--colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));--colour-foreground-reverse: light-dark(hsl(0, 0%, 100%), hsl(60, 30%, 6%));--colour-background-reverse: light-dark(hsl(60, 30%, 6%), hsl(0, 0%, 100%));--colour-reverse-scheme: dark;--colour-error: hsl(348, 100%, 33%);--colour-success: hsl(120, 100%, 26%);--colour-warning: hsl(35, 100%, 32%);--colour-info: hsl(223, 100%, 50%);--font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;--type-ratio: 1.25;--type-ratio-small: 1.125;--base-font-size: max(1rem, 16px);--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: .3;--line-height: 1.6;--line-height-h: 1.2;--line-height-ui: .9rem;--font-weight-normal: 400;--font-weight-bold: 700;--spacing-xxxxs: .25em;--spacing-xxxs: .5em;--spacing-xxs: .75em;--spacing-xs: .875em;--spacing-s: 1em;--spacing-m: 1.5em;--spacing-l: 2em;--spacing-xl: 2.5em;--spacing-xxl: 3em;--spacing-xxxl: 3.5em;--spacing-xxxxl: 3.5em;--spacing-ul: 4.5em;--spacing-uul: 5em;--spacing-uuul: 5.5em;--outline-size: .125rem;--outline-style: solid;--_colour-outline: hsl(223, 100%, 50%);--outline-color: light-dark( var(--_colour-outline), color-mix(in oklch, var(--_colour-outline), white 90%) );--container-max-width-narrow: 58ch;--container-max-width: 76ch;--gutter-min: 1em;--gutter-max: 2em;--gap-s: 1em;--gap: 1.5em;--gap-l: 2em;--gap-xl: 2.5em;--breakpoint-xs: 26.25rem;--breakpoint-s: 33.75rem;--breakpoint-m: 45rem;--breakpoint-l: 59.125rem;--breakpoint-xl: 68.75rem;--shadow-color: hsla(0, 0%, 13%, .15);--shadow-size: .875em;--shadow-shape: 0 0 var(--shadow-size);--box-shadow: var(--shadow-shape) var(--shadow-color);--border-radius: .25rem;--border-radius-l: 2em;--border-radius-round: 50%;--ratio: 16 / 9;--ease: cubic-bezier(.25, 0, .3, 1)}@media(max-width:719.98px){:root{--section-xl: var(--spacing-xxl)}}}

package/dist/build/drop-menu.entry.js

@@ -1,2 +1,2 @@
-import "./chunks/Popover-Bws25suh.js";
-import "./chunks/DropMenu-plGsgySm.js";
+import "./chunks/Popover-C4gisyxr.js";
+import "./chunks/DropMenu-LnJEp-sg.js";

package/dist/build/filters.entry.js

@@ -1,5 +1,5 @@
 import "./chunks/utilities-DepaJdUg.js";
-import { t as Accordion } from "./chunks/Accordion-Dwh42fp7.js";
+import { t as Accordion } from "./chunks/Accordion-BzKLBuWL.js";
 var AccordionMobile = class extends Accordion {
 	mq;
 	toggleAttribute;