@pnx-mixtape/mxds 0.0.23 → 0.0.26

package/dist/build/utilities.css

@@ -1,186 +1 @@
-@layer design-system.utilities {
-  .stack {
-    display: grid;
-    grid-template-areas: "stack";
-  }
-
-    .stack > * {
-      grid-area: stack;
-    }
-
-  .flex {
-    display: flex;
-  }
-
-  .place-center {
-    align-content: center;
-    justify-content: center;
-    place-content: center;
-  }
-
-  .align--center {
-    margin-inline: auto;
-  }
-
-  .align--left {
-    margin-inline-end: auto;
-  }
-
-  .align--right {
-    margin-inline-start: auto;
-  }
-
-  .align--bottom {
-    margin-block-start: auto;
-  }
-
-  .align--top {
-    margin-block-end: auto;
-  }
-
-  .order--start {
-    order: -1;
-  }
-
-  .order--1 {
-    order: 1;
-  }
-
-  .order--2 {
-    order: 2;
-  }
-
-  .order--3 {
-    order: 3;
-  }
-
-  .gap--s {
-    gap: var(--gap-s);
-  }
-
-  .gap--m {
-    gap: var(--gap);
-  }
-
-  .gap--l {
-    gap: var(--gap-l);
-  }
-
-  .gap--xl {
-    gap: var(--gap-xl);
-  }
-
-  .gap--section-l {
-    gap: var(--section-l, var(--spacing-xl));
-  }
-
-  .gap--section-xl {
-    gap: var(--section-xl, var(--spacing-uul));
-  }
-}
-
-@layer design-system.utilities {
-  .hidden,
-  .visually-hidden,
-  .sr-only {
-    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-    box-sizing: border-box;
-    position: absolute !important;
-    margin: 0;
-    padding: 0;
-  }
-
-  .visually-hidden.visually-hidden--focussable:focus,
-  .sr-only.sr-only--focussable:focus {
-    clip-path: none;
-    position: revert !important;
-    margin: revert;
-    padding: revert;
-  }
-
-  [hidden] {
-    display: none;
-  }
-
-  /* Prevent scrolling on the body. */
-  .body--scroll-lock,
-  .body-dialog--open {
-    overflow: hidden;
-    position: fixed;
-    inline-size: 100vw;
-  }
-}
-
-/**
- * Responsive utility class
- */
-
-@layer design-system.utilities {
-    @media (min-width: 946px) {
-  .mobile-only {
-      display: none;
-  }
-    }
-    @media (max-width: 945.98px) {
-
-  .desktop-only {
-      display: none;
-  }
-    }
-
-  .print-only {
-    display: none !important;
-  }
-
-    @media print {
-
-  .print-only {
-      display: block !important;
-  }
-    }
-    @media print {
-
-  .screen-only {
-      display: none !important;
-  }
-    }
-}
-
-/**
- * Skeleton and loading UI.
- */
-
-@layer design-system.utilities {
-  .skeleton {
-    --background: hsla(0, 0%, 0%, 0.1);
-    --opacity-low: 0.5;
-    --opacity-high: 0.75;
-    --duration: 1500ms;
-
-    animation: pulse 1500ms ease infinite;
-
-    animation: pulse var(--duration) ease infinite;
-  }
-
-  .skeleton--bg {
-    background-color: var(--background);
-    border-radius: var(--border-radius);
-    z-index: -1;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: var(--opacity-low);
-  }
-
-  75% {
-    opacity: var(--opacity-high);
-  }
-
-  100% {
-    opacity: var(--opacity-low);
-  }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9sYXlvdXQtdXRpbHMuY3NzIiwidXRpbGl0aWVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQ0UsYUFBYTtJQUNiLDRCQUE0QjtFQUs5Qjs7SUFIRTtNQUNFLGdCQUFnQjtJQUNsQjs7RUFHRjtJQUNFLGFBQWE7RUFDZjs7RUFFQTtJQUNFLHFCQUFxQjtJQUFyQix1QkFBcUI7SUFBckIscUJBQXFCO0VBQ3ZCOztFQUVBO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0UsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UseUJBQXlCO0VBQzNCOztFQUVBO0lBQ0Usd0JBQXdCO0VBQzFCOztFQUVBO0lBQ0Usc0JBQXNCO0VBQ3hCOztFQUVBO0lBQ0UsU0FBUztFQUNYOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsaUJBQWlCO0VBQ25COztFQUVBO0lBQ0UsZUFBZTtFQUNqQjs7RUFFQTtJQUNFLGlCQUFpQjtFQUNuQjs7RUFFQTtJQUNFLGtCQUFrQjtFQUNwQjs7RUFFQTtJQUNFLHdDQUF3QztFQUMxQzs7RUFFQTtJQUNFLDBDQUEwQztFQUM1QztBQUNGOztBQzNFQTtFQUNFOzs7SUFHRSxzQ0FBc0M7SUFDdEMsc0JBQXNCO0lBQ3RCLDZCQUE2QjtJQUM3QixTQUFTO0lBQ1QsVUFBVTtFQUNaOztFQUVBOztJQUVFLGVBQWU7SUFDZiwyQkFBMkI7SUFDM0IsY0FBYztJQUNkLGVBQWU7RUFDakI7O0VBRUE7SUFDRSxhQUFhO0VBQ2Y7O0VBRUEsbUNBQW1DO0VBQ25DOztJQUVFLGdCQUFnQjtJQUNoQixlQUFlO0lBQ2Ysa0JBQWtCO0VBQ3BCO0FBQ0Y7O0FBRUE7O0VBRUU7O0FBRUY7SUFFSTtFQURGO01BRUksYUFBYTtFQUVqQjtJQURFO0lBSUE7O0VBREY7TUFFSSxhQUFhO0VBRWpCO0lBREU7O0VBR0Y7SUFDRSx3QkFBd0I7RUFLMUI7O0lBSEU7O0VBSEY7TUFJSSx5QkFBeUI7RUFFN0I7SUFERTtJQUlBOztFQURGO01BRUksd0JBQXdCO0VBRTVCO0lBREU7QUFFSjs7QUFFQTs7RUFFRTs7QUFDRjtFQUNFO0lBQ0Usa0NBQW1DO0lBQ25DLGtCQUFrQjtJQUNsQixvQkFBb0I7SUFDcEIsa0JBQWtCOztJQUVsQixxQ0FBOEM7O0lBQTlDLDhDQUE4QztFQUNoRDs7RUFFQTtJQUNFLG1DQUFtQztJQUNuQyxtQ0FBbUM7SUFDbkMsV0FBVztFQUNiO0FBQ0Y7O0FBRUE7RUFDRTtJQUNFLDJCQUEyQjtFQUM3Qjs7RUFFQTtJQUNFLDRCQUE0QjtFQUM5Qjs7RUFFQTtJQUNFLDJCQUEyQjtFQUM3QjtBQUNGIiwiZmlsZSI6InV0aWxpdGllcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAbGF5ZXIgZGVzaWduLXN5c3RlbS51dGlsaXRpZXMge1xuICAuc3RhY2sge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJzdGFja1wiO1xuXG4gICAgJiA+ICoge1xuICAgICAgZ3JpZC1hcmVhOiBzdGFjaztcbiAgICB9XG4gIH1cblxuICAuZmxleCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuXG4gIC5wbGFjZS1jZW50ZXIge1xuICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuXG4gIC5hbGlnbi0tY2VudGVyIHtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG5cbiAgLmFsaWduLS1sZWZ0IHtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5hbGlnbi0tcmlnaHQge1xuICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IGF1dG87XG4gIH1cblxuICAuYWxpZ24tLWJvdHRvbSB7XG4gICAgbWFyZ2luLWJsb2NrLXN0YXJ0OiBhdXRvO1xuICB9XG5cbiAgLmFsaWduLS10b3Age1xuICAgIG1hcmdpbi1ibG9jay1lbmQ6IGF1dG87XG4gIH1cblxuICAub3JkZXItLXN0YXJ0IHtcbiAgICBvcmRlcjogLTE7XG4gIH1cblxuICAub3JkZXItLTEge1xuICAgIG9yZGVyOiAxO1xuICB9XG5cbiAgLm9yZGVyLS0yIHtcbiAgICBvcmRlcjogMjtcbiAgfVxuXG4gIC5vcmRlci0tMyB7XG4gICAgb3JkZXI6IDM7XG4gIH1cblxuICAuZ2FwLS1zIHtcbiAgICBnYXA6IHZhcigtLWdhcC1zKTtcbiAgfVxuXG4gIC5nYXAtLW0ge1xuICAgIGdhcDogdmFyKC0tZ2FwKTtcbiAgfVxuXG4gIC5nYXAtLWwge1xuICAgIGdhcDogdmFyKC0tZ2FwLWwpO1xuICB9XG5cbiAgLmdhcC0teGwge1xuICAgIGdhcDogdmFyKC0tZ2FwLXhsKTtcbiAgfVxuXG4gIC5nYXAtLXNlY3Rpb24tbCB7XG4gICAgZ2FwOiB2YXIoLS1zZWN0aW9uLWwsIHZhcigtLXNwYWNpbmcteGwpKTtcbiAgfVxuXG4gIC5nYXAtLXNlY3Rpb24teGwge1xuICAgIGdhcDogdmFyKC0tc2VjdGlvbi14bCwgdmFyKC0tc3BhY2luZy11dWwpKTtcbiAgfVxufVxuIiwiQGltcG9ydCBcIl9sYXlvdXQtdXRpbHMuY3NzXCI7XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5oaWRkZW4sXG4gIC52aXN1YWxseS1oaWRkZW4sXG4gIC5zci1vbmx5IHtcbiAgICBjbGlwLXBhdGg6IHBvbHlnb24oMCAwLCAwIDAsIDAgMCwgMCAwKTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5cbiAgLnZpc3VhbGx5LWhpZGRlbi52aXN1YWxseS1oaWRkZW4tLWZvY3Vzc2FibGU6Zm9jdXMsXG4gIC5zci1vbmx5LnNyLW9ubHktLWZvY3Vzc2FibGU6Zm9jdXMge1xuICAgIGNsaXAtcGF0aDogbm9uZTtcbiAgICBwb3NpdGlvbjogcmV2ZXJ0ICFpbXBvcnRhbnQ7XG4gICAgbWFyZ2luOiByZXZlcnQ7XG4gICAgcGFkZGluZzogcmV2ZXJ0O1xuICB9XG5cbiAgW2hpZGRlbl0ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cblxuICAvKiBQcmV2ZW50IHNjcm9sbGluZyBvbiB0aGUgYm9keS4gKi9cbiAgLmJvZHktLXNjcm9sbC1sb2NrLFxuICAuYm9keS1kaWFsb2ctLW9wZW4ge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIGlubGluZS1zaXplOiAxMDB2dztcbiAgfVxufVxuXG4vKipcbiAqIFJlc3BvbnNpdmUgdXRpbGl0eSBjbGFzc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5tb2JpbGUtb25seSB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5kZXNrdG9wLW9ubHkge1xuICAgIEBtZWRpYSAoLS1sYXJnZS1kb3duKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5wcmludC1vbmx5IHtcbiAgICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cbiAgICBAbWVkaWEgcHJpbnQge1xuICAgICAgZGlzcGxheTogYmxvY2sgIWltcG9ydGFudDtcbiAgICB9XG4gIH1cblxuICAuc2NyZWVuLW9ubHkge1xuICAgIEBtZWRpYSBwcmludCB7XG4gICAgICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogU2tlbGV0b24gYW5kIGxvYWRpbmcgVUkuXG4gKi9cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5za2VsZXRvbiB7XG4gICAgLS1iYWNrZ3JvdW5kOiBoc2woMGRlZyAwJSAwJSAvIDEwJSk7XG4gICAgLS1vcGFjaXR5LWxvdzogMC41O1xuICAgIC0tb3BhY2l0eS1oaWdoOiAwLjc1O1xuICAgIC0tZHVyYXRpb246IDE1MDBtcztcblxuICAgIGFuaW1hdGlvbjogcHVsc2UgdmFyKC0tZHVyYXRpb24pIGVhc2UgaW5maW5pdGU7XG4gIH1cblxuICAuc2tlbGV0b24tLWJnIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICB6LWluZGV4OiAtMTtcbiAgfVxufVxuXG5Aa2V5ZnJhbWVzIHB1bHNlIHtcbiAgMCUge1xuICAgIG9wYWNpdHk6IHZhcigtLW9wYWNpdHktbG93KTtcbiAgfVxuXG4gIDc1JSB7XG4gICAgb3BhY2l0eTogdmFyKC0tb3BhY2l0eS1oaWdoKTtcbiAgfVxuXG4gIDEwMCUge1xuICAgIG9wYWNpdHk6IHZhcigtLW9wYWNpdHktbG93KTtcbiAgfVxufVxuIl19 */
+@layer design-system.utilities{.stack{display:grid;grid-template-areas:"stack"}.stack>*{grid-area:stack}.flex{display:flex}.place--center{align-content:center;justify-content:center;place-content:center}.place--end{align-content:end;justify-content:end;place-content:end}.place--start{align-content:start;justify-content:start;place-content:start}.align--center{margin-inline:auto}.align--left{margin-inline-end:auto}.align--right{margin-inline-start:auto}.align--bottom{margin-block-start:auto}.align--top{margin-block-end:auto}.order--start{order:-1}.order--1{order:1}.order--2{order:2}.order--3{order:3}.gap--s{gap:var(--gap-s)}.gap--m{gap:var(--gap)}.gap--l{gap:var(--gap-l)}.gap--xl{gap:var(--gap-xl)}.gap--section-l{gap:var(--section-l, var(--spacing-xl))}.gap--section-xl{gap:var(--section-xl, var(--spacing-uul))}}@layer design-system.utilities{.hidden,.visually-hidden,.sr-only{clip-path:polygon(0 0,0 0,0 0,0 0);box-sizing:border-box;position:absolute!important;margin:0;padding:0}.visually-hidden.visually-hidden--focussable:focus,.sr-only.sr-only--focussable:focus{clip-path:none;position:revert!important;margin:revert;padding:revert}[hidden]{display:none}.body--scroll-lock,.body-dialog--open{overflow:hidden;position:fixed;inline-size:100vw}}@layer design-system.utilities{@media(min-width:946px){.mobile-only{display:none}}@media(max-width:945.98px){.desktop-only{display:none}}.print-only{display:none!important}@media print{.print-only{display:block!important}}@media print{.screen-only{display:none!important}}}@layer design-system.utilities{.skeleton{--background: hsla(0, 0%, 0%, .1);--opacity-low: .5;--opacity-high: .75;--duration: 1.5s;animation:pulse 1.5s ease infinite;animation:pulse var(--duration) ease infinite}.skeleton--bg{background-color:var(--background);border-radius:var(--border-radius);z-index:-1}}@keyframes pulse{0%{opacity:var(--opacity-low)}75%{opacity:var(--opacity-high)}to{opacity:var(--opacity-low)}}

package/dist/build/utility-list.css

@@ -1,43 +1 @@
-/**
- * Utility List
- */
-
-@layer design-system.defaults {
-  mx-utility-list {
-    display: block;
-  }
-
-    mx-utility-list:not(:defined) button:not([popovertarget]) {
-      pointer-events: none;
-      opacity: 0.7;
-    }
-}
-
-@layer design-system.components {
-    .mx-utility-list ul {
-      gap: var(--nav-gap, var(--spacing-xs));
-    }
-
-    .mx-utility-list:where(.mx-nav--inline) {
-      gap: 0;
-      gap: var(--inline-nav-gap, 0);
-    }
-
-  .mx-utility-list__share {
-    --utility-link-color: var(--colour-link);
-
-    min-inline-size: -moz-fit-content;
-
-    min-inline-size: fit-content;
-  }
-
-    .mx-utility-list__share a[href] {
-      --link-colour: var(--utility-link-color);
-    }
-
-    .mx-utility-list__share .mx-social-share {
-      justify-content: center;
-    }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInV0aWxpdHktbGlzdC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFNaEI7O0lBSkU7TUFDRSxvQkFBb0I7TUFDcEIsWUFBWTtJQUNkO0FBRUo7O0FBRUE7SUFFSTtNQUNFLHNDQUFzQztJQUN4Qzs7SUFFQTtNQUNFLE1BQTZCO01BQTdCLDZCQUE2QjtJQUMvQjs7RUFHRjtJQUNFLHdDQUF3Qzs7SUFFeEMsaUNBQTRCOztJQUE1Qiw0QkFBNEI7RUFTOUI7O0lBUEU7TUFDRSx3Q0FBd0M7SUFDMUM7O0lBRUE7TUFDRSx1QkFBdUI7SUFDekI7QUFFSiIsImZpbGUiOiJ1dGlsaXR5LWxpc3QuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVdGlsaXR5IExpc3RcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIG14LXV0aWxpdHktbGlzdCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG5cbiAgICAmOm5vdCg6ZGVmaW5lZCkgYnV0dG9uOm5vdChbcG9wb3ZlcnRhcmdldF0pIHtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgb3BhY2l0eTogMC43O1xuICAgIH1cbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXV0aWxpdHktbGlzdCB7XG4gICAgJiB1bCB7XG4gICAgICBnYXA6IHZhcigtLW5hdi1nYXAsIHZhcigtLXNwYWNpbmcteHMpKTtcbiAgICB9XG5cbiAgICAmOndoZXJlKC5teC1uYXYtLWlubGluZSkge1xuICAgICAgZ2FwOiB2YXIoLS1pbmxpbmUtbmF2LWdhcCwgMCk7XG4gICAgfVxuICB9XG5cbiAgLm14LXV0aWxpdHktbGlzdF9fc2hhcmUge1xuICAgIC0tdXRpbGl0eS1saW5rLWNvbG9yOiB2YXIoLS1jb2xvdXItbGluayk7XG5cbiAgICBtaW4taW5saW5lLXNpemU6IGZpdC1jb250ZW50O1xuXG4gICAgJiBhW2hyZWZdIHtcbiAgICAgIC0tbGluay1jb2xvdXI6IHZhcigtLXV0aWxpdHktbGluay1jb2xvcik7XG4gICAgfVxuXG4gICAgJiAubXgtc29jaWFsLXNoYXJlIHtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIH1cbiAgfVxufVxuIl19 */
+@layer design-system.defaults{mx-utility-list{display:block}mx-utility-list:not(:defined) button:not([popovertarget]){pointer-events:none;opacity:.7}}@layer design-system.components{.mx-utility-list ul{gap:var(--nav-gap, var(--spacing-xs))}.mx-utility-list:where(.mx-nav--inline){gap:0;gap:var(--inline-nav-gap, 0)}.mx-utility-list[class*=mx-background--]{padding-block:var(--spacing-xs)}.mx-utility-list__share{--utility-link-color: var(--colour-link);min-inline-size:-moz-fit-content;min-inline-size:fit-content}.mx-utility-list__share a[href]{--link-colour: var(--utility-link-color)}.mx-utility-list__share .mx-social-share{justify-content:center}}

package/dist/build/utility-list.entry.js

@@ -1,80 +1,52 @@
-class UtilityList extends HTMLElement {
-  internals_;
-  controller;
-  copyOriginalText;
-  copyOriginalIcon;
-  constructor() {
-    super();
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-    this.copyOriginalIcon = "mx-icon--link";
-  }
-  connectedCallback() {
-    const { signal } = this.controller;
-    this.copyBtn?.addEventListener(
-      "click",
-      () => {
-        void this.handleCopy();
-      },
-      { signal }
-    );
-    this.printBtn?.addEventListener(
-      "click",
-      () => {
-        this.handlePrint();
-      },
-      { signal }
-    );
-    this.pdfBtn?.addEventListener(
-      "click",
-      () => {
-        this.handlePDF();
-      },
-      { signal }
-    );
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  handleCopy = async () => {
-    try {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          ["text/plain"]: window.location.href
-        })
-      ]).then(() => {
-        this.copyLabel.textContent = "Copied!";
-        this.copyIcon.classList.replace(this.copyOriginalIcon, "mx-icon--tick");
-        setTimeout(() => {
-          this.copyLabel.textContent = this.copyOriginalText;
-          this.copyIcon.classList.replace("mx-icon--tick", this.copyOriginalIcon);
-        }, 3e3);
-      });
-    } catch {
-      console.error("Could not copy the url to clipboard");
-    }
-  };
-  handlePrint = () => window.print();
-  // Defaults to Print dialog, to allow Save to PDF.
-  // if this needs to be changed, please extend the class.
-  handlePDF = () => window.print();
-  get copyBtn() {
-    return this.querySelector("button[data-copy]");
-  }
-  get copyLabel() {
-    const el = this.copyBtn.querySelector("span[data-copy-label]");
-    this.copyOriginalText = el?.textContent ?? void 0;
-    return el;
-  }
-  get copyIcon() {
-    return this.copyBtn.querySelector(".mx-icon");
-  }
-  get printBtn() {
-    return this.querySelector("button[data-print]");
-  }
-  get pdfBtn() {
-    return this.querySelector("button[data-pdf]");
-  }
-}
-if (!customElements.get("mx-utility-list")) customElements.define("mx-utility-list", UtilityList);
-//# sourceMappingURL=utility-list.entry.js.map
+var UtilityList = class extends HTMLElement {
+	internals_;
+	controller;
+	copyOriginalText;
+	copyOriginalIcon;
+	constructor() {
+		super(), this.internals_ = this.attachInternals(), this.controller = new AbortController(), this.copyOriginalIcon = "mx-icon--link";
+	}
+	connectedCallback() {
+		let { signal: e } = this.controller;
+		this.copyBtn?.addEventListener("click", () => {
+			this.handleCopy();
+		}, { signal: e }), this.printBtn?.addEventListener("click", () => {
+			this.handlePrint();
+		}, { signal: e }), this.pdfBtn?.addEventListener("click", () => {
+			this.handlePDF();
+		}, { signal: e });
+	}
+	disconnectedCallback() {
+		this.controller.abort();
+	}
+	handleCopy = async () => {
+		try {
+			await navigator.clipboard.write([new ClipboardItem({ "text/plain": window.location.href })]).then(() => {
+				this.copyLabel.textContent = "Copied!", this.copyIcon.classList.replace(this.copyOriginalIcon, "mx-icon--tick"), setTimeout(() => {
+					this.copyLabel.textContent = this.copyOriginalText, this.copyIcon.classList.replace("mx-icon--tick", this.copyOriginalIcon);
+				}, 3e3);
+			});
+		} catch {
+			console.error("Could not copy the url to clipboard");
+		}
+	};
+	handlePrint = () => window.print();
+	handlePDF = () => window.print();
+	get copyBtn() {
+		return this.querySelector("button[data-copy]");
+	}
+	get copyLabel() {
+		let e = this.copyBtn.querySelector("span[data-copy-label]");
+		return this.copyOriginalText = e?.textContent ?? void 0, e;
+	}
+	get copyIcon() {
+		return this.copyBtn.querySelector(".mx-icon");
+	}
+	get printBtn() {
+		return this.querySelector("button[data-print]");
+	}
+	get pdfBtn() {
+		return this.querySelector("button[data-pdf]");
+	}
+};
+customElements.get("mx-utility-list") || customElements.define("mx-utility-list", UtilityList);

package/package.json

@@ -1,75 +1,66 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.23",
+  "version": "0.0.26",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.3",
+    "@floating-ui/dom": "^1.7.4",
     "@oddbird/popover-polyfill": "^0.6.1",
-    "@pnx-mixtape/ids-shape": "^0.0.22",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@pnx-mixtape/ids-shape": "^0.0.23",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "classnames": "^2.5.1",
-    "focus-trap": "^7.6.5",
+    "focus-trap": "^7.6.6",
     "js-cookie": "^3.0.5",
-    "react": "^19.1.1",
-    "react-aria": "^3.42.0",
-    "react-dom": "^19.1.1",
-    "react-stately": "^3.40.0"
+    "react": "^19.2.1",
+    "react-aria": "^3.44.0",
+    "react-dom": "^19.2.1",
+    "react-stately": "^3.42.0"
   },
   "devDependencies": {
-    "@csstools/postcss-global-data": "^3.0.0",
+    "@csstools/postcss-global-data": "^3.1.0",
     "@csstools/stylelint-formatter-github": "^1.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-a11y": "^10.0.7",
-    "@storybook/addon-docs": "^10.0.7",
-    "@storybook/addon-links": "^10.0.7",
-    "@storybook/html-vite": "^10.0.7",
-    "@storybook/react": "^10.0.7",
-    "@storybook/react-vite": "^10.0.7",
-    "@storybook/test-runner": "^0.24.1",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-links": "^10.1.4",
+    "@storybook/addon-vitest": "^10.1.4",
+    "@storybook/html-vite": "^10.1.4",
+    "@storybook/react": "^10.1.4",
+    "@storybook/react-vite": "^10.1.4",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.7.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.5.2",
-    "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/ui": "^3.2.4",
-    "axe-playwright": "^2.1.0",
-    "browserslist-to-esbuild": "^2.1.1",
-    "clean-css": "^5.3.3",
-    "cli-progress": "^3.12.0",
-    "concurrently": "^9.2.0",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
+    "axe-playwright": "^2.2.2",
+    "concurrently": "^9.2.1",
     "cz-conventional-changelog": "^3.3.0",
-    "drupal-attribute": "^1.1.0",
+    "drupal-attribute": "^1.2.1",
     "drupal-twig-extensions": "1.0.0-beta.5",
-    "http-server": "^14.1.1",
-    "jsdom": "^26.1.0",
-    "oxlint": "^1.23.0",
-    "playwright": "^1.55.0",
+    "jsdom": "^27.2.0",
+    "oxlint": "^1.31.0",
+    "playwright": "^1.57.0",
     "postcss": "^8.5.6",
     "postcss-design-tokens": "^1.3.0",
     "postcss-inline-svg": "^6.0.0",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^10.2.4",
+    "postcss-preset-env": "^10.5.0",
     "postcss-pxtorem": "^6.1.0",
-    "prettier": "^3.6.2",
-    "storybook": "^10.0.7",
-    "stylelint": "^16.23.1",
-    "stylelint-config-standard": "^39.0.0",
+    "prettier": "^3.7.4",
+    "storybook": "^10.1.4",
+    "stylelint": "^16.26.1",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-use-logical-spec": "^5.0.1",
-    "tinyglobby": "^0.2.14",
+    "tinyglobby": "^0.2.15",
     "twig": "^1.17.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.6",
+    "typescript": "^5.9.3",
+    "vite": "8.0.0-beta.0",
     "vite-plugin-twig-drupal": "^1.6.2",
-    "wait-on": "^9.0.0"
-  },
-  "optionalDependencies": {
-    "@esbuild/linux-arm64": "^0.25.9",
-    "@rollup/rollup-linux-x64-gnu": "^4.46.2",
-    "@rollup/rollup-linux-x64-musl": "^4.46.2",
-    "@swc/core-linux-arm64-gnu": "^1.13.3"
+    "vitest": "^4.0.15"
   },
   "config": {
     "commitizen": {
@@ -82,13 +73,15 @@
   "type": "module",
   "files": [
     "dist/build/*",
-    "src"
+    "src",
+    ".storybook"
   ],
   "exports": {
     ".": "./src/elements.ts",
     "./react": "./src/react.ts",
     "./tokens": "./src/tokens.js",
     "./dist/*": "./dist/build/*",
+    "./storybook/*": "./.storybook/*",
     "./src/*": "./src/*"
   },
   "scripts": {
@@ -112,15 +105,12 @@
     "lint-js-ci": "oxlint \"./**/*.{ts,tsx}\" --format github",
     "fix-js": "pnpm lint-js --fix",
     "lint-ts": "tsc",
-    "test": "pnpm test-storybook",
-    "test-vitest": "vitest --run",
-    "test-storybook": "concurrently \"npm:test-storybook-*\"",
-    "test-storybook-html": "test-storybook --maxWorkers=2",
-    "test-storybook-react": "test-storybook --maxWorkers=2 --url http://127.0.0.1:6008 -c .storybook-react",
+    "test": "pnpm test-storybook-html && pnpm test-storybook-react",
+    "test-storybook-html": "vitest --project=storybook --run",
+    "test-storybook-react": "vitest --project=storybook-react --run",
     "clean": "rm -rf ./dist",
     "commit": "git-cz",
     "bump-version": "pnpm version patch -m \"chore: tag %s\"",
-    "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
     "build-ci": "pnpm build",
     "lint-ci": "pnpm lint-prettier && pnpm lint-css-ci && pnpm lint-ts && pnpm lint-js-ci"
   }

package/src/Atom/Atom.mdx

@@ -13,34 +13,34 @@ Base styles and HTML elements, used by all Elements and Components.
     title="Light"
     subtitle="Neutral colours"
     colors={{
-      white: "oklch(1 0 100)",
-      light: "oklch(0.95 0 100)",
-      mid: "oklch(0.9 0 100)",
+      white: "hsl(60 0% 100%)",
+      light: "hsl(60 4% 95%)",
+      mid: "hsl(60 0% 90%)",
     }}
   />
   <ColorItem
     title="Dark"
     subtitle="Neutral colours"
     colors={{
-      black: "oklch(0 0 100)",
-      dark: "oklch(0.1 0 100)",
-      mid: "oklch(0.25 0 100)",
+      black: "hsl(60 0% 0%)",
+      dark: "hsl(60 0% 5%)",
+      mid: "hsl(60 0% 10%)",
     }}
   />
   <ColorItem
     title="Primary"
     subtitle="Primary colour"
     colors={{
-      full: "oklch(0.5 0.3 260)",
-      light: "color-mix(in oklch, oklch(0.5 0.3 260), white 95%)",
+      full: "hsl(223 100% 50%)",
+      light: "color-mix(in oklch, hsl(223 100% 50%), white 95%)",
     }}
   />
   <ColorItem
     title="Accent"
     subtitle="Accent colour"
     colors={{
-      full: "oklch(0.5 0.3 320)",
-      light: "color-mix(in oklch, oklch(0.5 0.3 320), white 95%)",
+      full: "hsl(60, 94%, 68%)",
+      light: "color-mix(in oklch, hsl(60, 94%, 68%), white 95%)",
     }}
   />
 </ColorPalette>
@@ -53,32 +53,32 @@ Base styles and HTML elements, used by all Elements and Components.
     title="Success"
     subtitle="Success colour"
     colors={{
-      full: "oklch(0.5 0.3 140)",
-      light: "color-mix(in oklch, oklch(0.5 0.3 140), white 95%)",
+      full: "hsl(120 100% 26%)",
+      light: "color-mix(in oklch, hsl(120 100% 21%), white 95%)",
     }}
   />
   <ColorItem
     title="Warning"
     subtitle="Warning colour"
     colors={{
-      full: "oklch(0.55 0.3 90)",
-      light: "color-mix(in oklch, oklch(0.55 0.3 90), white 95%)",
+      full: "hsl(35 100% 32%)",
+      light: "color-mix(in oklch, hsl(35 100% 32%), white 95%)",
     }}
   />
   <ColorItem
     title="Error"
     subtitle="Error colour"
     colors={{
-      full: "oklch(0.5 0.3 20)",
-      light: "color-mix(in oklch, oklch(0.5 0.3 20), white 95%)",
+      full: "hsl(348 100% 33%)",
+      light: "color-mix(in oklch, hsl(348 100% 33%), white 95%)",
     }}
   />
   <ColorItem
     title="Info"
     subtitle="Info colour"
     colors={{
-      full: "oklch(0.5 0.3 260)",
-      light: "color-mix(in oklch, oklch(0.5 0.3 260), white 95%)",
+      full: "hsl(223 100% 50%)",
+      light: "color-mix(in oklch, hsl(223 100% 50%), white 95%)",
     }}
   />
 </ColorPalette>

package/src/Atom/Background/{Backgrounds.stories.ts → Background.stories.ts}

@@ -11,7 +11,6 @@ type BackgroundsType = {
  * Background colours also set appropriate foreground colours to ensure contrast is met.
  */
 const meta: Meta<BackgroundsType> = {
-  title: "Atom/Backgrounds",
   tags: ["autodocs"],
   component: Component,
   argTypes: {
@@ -24,6 +23,7 @@ const meta: Meta<BackgroundsType> = {
       },
     },
   },
+  decorators: [],
 }
 
 export default meta
@@ -62,4 +62,5 @@ export const Accent: Story = {
   args: {
     modifier: BackgroundStyles.ACCENT,
   },
+  decorators: [],
 }