@pnx-mixtape/mxds 0.0.2 → 0.0.3

package/dist/build/tabs.css

@@ -1,106 +1 @@
-/**
- * Tabs
- */
-
-@layer defaults {
-  :is(mx-tabs, mx-tabs mx-dropmenu) {
-    display: block;
-  }
-}
-
-@layer components {
-  .tabs {
-    position: relative;
-  }
-      @media (min-width: 720px) {
-
-    .tabs .tab__list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-xxs);
-    }
-      }
-
-      .tabs .tab__list .tab__item {
-        padding: 0;
-        margin: 0;
-      }
-
-      .tabs .tab__list .button {
-        display: block;
-        outline-offset: var(--outline-offset);
-        min-inline-size: 0;
-        min-inline-size: var(--tab-min-width, 0);
-        background-color: var(
-          --tab-background,
-          var(--background, var(--colour-background))
-        );
-        color: var(
-          --tab-foreground,
-          var(--foreground, var(--colour-foreground))
-        );
-      }
-
-        .tabs .tab__list .button[aria-selected="true"] {
-          background-color: var(
-            --tab-active-background,
-            var(--colour-background-alt)
-          );
-          color: var(--tab-active-foreground, var(--colour-foreground));
-        }
-
-    .tabs .tab__panel {
-      inline-size: 100%;
-    }
-
-      .tabs .tab__panel:is(:focus-visible, :focus) {
-        outline-offset: var(--outline-offset);
-      }
-
-      .tabs .tab__panel[inert] {
-        display: none;
-      }
-      @media (min-width: 720px) {
-        .tabs.tabs--lined .tab__list {
-          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));
-        }
-
-          .tabs.tabs--lined .tab__list .button {
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-            border: 1px solid
-              var(--line-colour, var(--colour-border));
-            border: var(--line-width, 1px) solid
-              var(--line-colour, var(--colour-border));
-            border-block-end: 0;
-          }
-      }
-      @media (min-width: 720px) {
-        .tabs.tabs--centered .tab__list {
-          align-content: center;
-          justify-content: center;
-          place-content: center;
-        }
-      }
-
-    .tabs.tabs--same-height {
-      display: grid;
-    }
-
-      .tabs.tabs--same-height .tab__panel {
-        grid-column-start: 1;
-        grid-row-start: 2;
-        z-index: 2;
-        transition: opacity 0.2s ease-in-out;
-      }
-
-        .tabs.tabs--same-height .tab__panel[hidden] {
-          display: block;
-          opacity: 0;
-          z-index: 1;
-        }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhYnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxjQUFjO0VBQ2hCO0FBQ0Y7O0FBRUE7RUFDRTtJQUNFLGtCQUFrQjtFQXlGcEI7TUF0Rkk7O0lBREY7UUFFSSxhQUFhO1FBQ2IsZUFBZTtRQUNmLHVCQUF1QjtJQTZCM0I7TUE1QkU7O01BRUE7UUFDRSxVQUFVO1FBQ1YsU0FBUztNQUNYOztNQUVBO1FBQ0UsY0FBYztRQUNkLHFDQUFxQztRQUNyQyxrQkFBd0M7UUFBeEMsd0NBQXdDO1FBQ3hDOzs7U0FHQztRQUNEOzs7U0FHQztNQVNIOztRQVBFO1VBQ0U7OztXQUdDO1VBQ0QsNkRBQTZEO1FBQy9EOztJQUlKO01BQ0UsaUJBQWlCO0lBU25COztNQVBFO1FBQ0UscUNBQXFDO01BQ3ZDOztNQUVBO1FBQ0UsYUFBYTtNQUNmO01BSUE7UUFDRTtVQUNFO29EQUMwQztVQUQxQztvREFDMEM7UUFRNUM7O1VBTkU7WUFDRSw0REFBNEQ7WUFDNUQ7c0RBQzBDO1lBRDFDO3NEQUMwQztZQUMxQyxtQkFBbUI7VUFDckI7TUFFSjtNQUlBO1FBQ0U7VUFDRSxxQkFBcUI7VUFBckIsdUJBQXFCO1VBQXJCLHFCQUFxQjtRQUN2QjtNQUNGOztJQUdGO01BQ0UsYUFBYTtJQWNmOztNQVpFO1FBQ0Usb0JBQW9CO1FBQ3BCLGlCQUFpQjtRQUNqQixVQUFVO1FBQ1Ysb0NBQW9DO01BT3RDOztRQUxFO1VBQ0UsY0FBYztVQUNkLFVBQVU7VUFDVixVQUFVO1FBQ1o7QUFJUiIsImZpbGUiOiJ0YWJzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVGFic1xuICovXG5cbkBsYXllciBkZWZhdWx0cyB7XG4gIDppcyhteC10YWJzLCBteC10YWJzIG14LWRyb3BtZW51KSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cblxuQGxheWVyIGNvbXBvbmVudHMge1xuICAudGFicyB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJiAudGFiX19saXN0IHtcbiAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZmxleC13cmFwOiB3cmFwO1xuICAgICAgICBnYXA6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICAgIH1cblxuICAgICAgJiAudGFiX19pdGVtIHtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgfVxuXG4gICAgICAmIC5idXR0b24ge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgb3V0bGluZS1vZmZzZXQ6IHZhcigtLW91dGxpbmUtb2Zmc2V0KTtcbiAgICAgICAgbWluLWlubGluZS1zaXplOiB2YXIoLS10YWItbWluLXdpZHRoLCAwKTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKFxuICAgICAgICAgIC0tdGFiLWJhY2tncm91bmQsXG4gICAgICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICAgICApO1xuICAgICAgICBjb2xvcjogdmFyKFxuICAgICAgICAgIC0tdGFiLWZvcmVncm91bmQsXG4gICAgICAgICAgdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKVxuICAgICAgICApO1xuXG4gICAgICAgICZbYXJpYS1zZWxlY3RlZD1cInRydWVcIl0ge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcihcbiAgICAgICAgICAgIC0tdGFiLWFjdGl2ZS1iYWNrZ3JvdW5kLFxuICAgICAgICAgICAgdmFyKC0tY29sb3VyLWJhY2tncm91bmQtYWx0KVxuICAgICAgICAgICk7XG4gICAgICAgICAgY29sb3I6IHZhcigtLXRhYi1hY3RpdmUtZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICYgLnRhYl9fcGFuZWwge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG5cbiAgICAgICY6aXMoOmZvY3VzLXZpc2libGUsIDpmb2N1cykge1xuICAgICAgICBvdXRsaW5lLW9mZnNldDogdmFyKC0tb3V0bGluZS1vZmZzZXQpO1xuICAgICAgfVxuXG4gICAgICAmW2luZXJ0XSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi50YWJzLS1saW5lZCB7XG4gICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgICYgLnRhYl9fbGlzdCB7XG4gICAgICAgICAgYm9yZGVyLWJsb2NrLWVuZDogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcblxuICAgICAgICAgICYgLmJ1dHRvbiB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKSB2YXIoLS1ib3JkZXItcmFkaXVzKSAwIDA7XG4gICAgICAgICAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgICAgICAgIGJvcmRlci1ibG9jay1lbmQ6IDA7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi50YWJzLS1jZW50ZXJlZCB7XG4gICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgICYgLnRhYl9fbGlzdCB7XG4gICAgICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi50YWJzLS1zYW1lLWhlaWdodCB7XG4gICAgICBkaXNwbGF5OiBncmlkO1xuXG4gICAgICAmIC50YWJfX3BhbmVsIHtcbiAgICAgICAgZ3JpZC1jb2x1bW4tc3RhcnQ6IDE7XG4gICAgICAgIGdyaWQtcm93LXN0YXJ0OiAyO1xuICAgICAgICB6LWluZGV4OiAyO1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuMnMgZWFzZS1pbi1vdXQ7XG5cbiAgICAgICAgJltoaWRkZW5dIHtcbiAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiJdfQ== */
+@layer design-system.defaults{:is(mx-tabs,mx-tabs mx-dropmenu){display:block}}@layer design-system.components{.tabs{position:relative}@media (min-width: 720px){.tabs .tab__list{display:flex;flex-wrap:wrap;gap:var(--spacing-xxs)}}.tabs .tab__list .tab__item{padding:0;margin:0}.tabs .tab__list .button{display:block;outline-offset:var(--outline-offset);min-inline-size:0;min-inline-size:var(--tab-min-width, 0);background-color:var( --tab-background, var(--background, var(--colour-background)) );color:var( --tab-foreground, var(--foreground, var(--colour-foreground)) )}.tabs .tab__list .button[aria-selected=true]{background-color:var( --tab-active-background, var(--colour-background-alt) );color:var(--tab-active-foreground, var(--colour-foreground))}.tabs .tab__panel{inline-size:100%}.tabs .tab__panel:is(:focus-visible,:focus){outline-offset:var(--outline-offset)}.tabs .tab__panel[inert]{display:none}@media (min-width: 720px){.tabs.tabs--lined .tab__list{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))}.tabs.tabs--lined .tab__list .button{border-radius:var(--border-radius) var(--border-radius) 0 0;border:1px solid var(--line-colour, var(--colour-border));border:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));border-block-end:0}}@media (min-width: 720px){.tabs.tabs--centered .tab__list{align-content:center;justify-content:center;place-content:center}}.tabs.tabs--same-height{display:grid}.tabs.tabs--same-height .tab__panel{grid-column-start:1;grid-row-start:2;z-index:2;transition:opacity .2s ease-in-out}.tabs.tabs--same-height .tab__panel[hidden]{display:block;opacity:0;z-index:1}}

package/dist/build/tabs.entry.js

@@ -0,0 +1 @@
+import"./drop-menu.entry.js";class t extends HTMLElement{constructor(){super(),this.tabFocus=0,this.handleKeydown=({key:t})=>{("ArrowRight"===t||"ArrowLeft"===t)&&(this.triggers[this.tabFocus].setAttribute("tabindex","-1"),"ArrowRight"===t?(this.tabFocus+=1,this.tabFocus>=this.triggers.length&&(this.tabFocus=0)):"ArrowLeft"===t&&(this.tabFocus-=1,this.tabFocus<0&&(this.tabFocus=this.triggers.length-1)),this.triggers[this.tabFocus].setAttribute("tabindex","0"),this.triggers[this.tabFocus].focus())},this.handleClick=t=>{const e=t.target;if(!(e instanceof HTMLButtonElement))return;t.preventDefault();const s=e.getAttribute("aria-controls");this.handleTabChange(s)},this.handleDropMenuSelect=t=>{const e=t.detail.target;if(!(e instanceof HTMLButtonElement))return;const s=e.getAttribute("aria-controls");this.handleTabChange(s)},this.handleTabChange=t=>{this.active=t,this.handleUrlParams(t);const{panel:e,tab:s,button:r}=this.tabs.get(t);e.focus({preventScroll:!0});const i=new CustomEvent("tab-toggle",{bubbles:!0,cancelable:!0,detail:{id:t,tab:s,button:r,panel:e}});this.dispatchEvent(i)},this.handleUrlParams=t=>{const e=new URLSearchParams(window.location.search);e.get("tab")!==t&&(e.set("tab",t),window.history.replaceState({},"",`${window.location.pathname}?${e.toString()}`))},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.triggers||!this.panels)return;this.locationHash=window.location.hash,this.tabs=new Map,this.triggers.forEach((t=>{const e=t.getAttribute("aria-controls"),s=this.querySelector(`#${e}`),r=this.dropMenu.querySelector(`[aria-controls=${e}]`);if(e&&s&&r){const i=`tab-label-${e}`;t.setAttribute("id",i),t.setAttribute("role","tab"),t.setAttribute("aria-selected","false"),t.setAttribute("tab-index","-1"),s.setAttribute("aria-labelledby",i),s.setAttribute("role","tabpanel"),s.setAttribute("tab-index","0"),this.tabs.set(e,{panel:s,tab:t,button:r})}}));const{signal:t}=this.controller;this.menu.addEventListener("click",this.handleClick,{signal:t}),this.menu.addEventListener("keydown",this.handleKeydown,{signal:t}),this.dropMenu.addEventListener("drop-menu-select",this.handleDropMenuSelect,{signal:t});const e=this.locationHash?this.querySelector(this.locationHash):null;e?this.active=e.id:this.active||(this.active=this.panels[0].id)}disconnectedCallback(){this.controller.abort()}get dropMenu(){const t=this.querySelector(".drop-menu");if(!t)throw new Error(`${this.localName} must contain a .drop-menu`);return t}get dropMenuTrigger(){const t=this.querySelector(".drop-menu__trigger");if(!t)throw new Error(`${this.localName} must contain a .drop-menu__trigger`);return t}get menu(){const t=this.querySelector(".tab__list");if(!t)throw new Error(`${this.localName} must contain a .tab__list`);return t.setAttribute("role","tablist"),t}get triggers(){const t=this.querySelectorAll(".tab__list button");if(!t.length)throw new Error(`${this.localName} must contain .tab__list buttons`);return t}get panels(){const t=this.querySelectorAll(".tab__panel");if(!t.length)throw new Error(`${this.localName} must contain .tab__panel's`);return t}get active(){return this.querySelector('[aria-selected="true"]')}set active(t){this.tabs.forEach((({tab:e,panel:s},r)=>{r===t?(e.setAttribute("aria-selected","true"),e.setAttribute("tab-index","0"),s.removeAttribute("inert"),this.dropMenuTrigger.textContent=e.textContent):(e.setAttribute("aria-selected","false"),e.setAttribute("tab-index","-1"),s.setAttribute("inert",""))}))}}customElements.define("mx-tabs",t);

package/dist/build/tag.css

@@ -1,67 +1 @@
-/**
- * Tag
- */
-
-@layer elements {
-  .tag {
-    display: inline-block;
-    inline-size: -moz-fit-content;
-    inline-size: fit-content;
-    padding-inline: var(--horizontal-padding, var(--spacing-xxxs));
-    background: var(
-      --tag-background,
-      var(--background, var(--colour-background))
-    );
-    color: var(--tag-foreground, var(--foreground, var(--colour-foreground)));
-    text-transform: uppercase;
-    font-weight: var(--font-weight, var(--font-weight-bold));
-    font-size: var(--tag-font-size, var(--font-size-xs));
-    line-height: 2;
-    line-height: var(--line-height, 2);
-    border-radius: var(--border-radius);
-    border: 1px solid currentcolor;
-    border: var(--line-width, 1px) solid var(--line-colour, currentcolor);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    overflow: hidden;
-  }
-
-    .tag:has(input:focus) {
-      --outline-size: max(0.125rem, 0.15em);
-
-      outline: max(0.125rem, 0.15em)
-        solid currentcolor;
-
-      outline: var(--outline-width, var(--outline-size))
-        var(--outline-style, solid) var(--outline-color, currentcolor);
-      outline-offset: max(0.125rem, 0.15em);
-      outline-offset: var(--outline-offset, var(--outline-size));
-    }
-
-    .tag input {
-      position: absolute;
-      inset-block-start: -100px;
-      inset-inline-start: -100px;
-    }
-
-    .tag label {
-      font-size: inherit;
-      color: inherit;
-      margin: 0;
-    }
-
-    .tag:is(a:hover, :has(input:checked)) {
-      --tag-foreground: var(--link-colour, var(--colour-primary));
-    }
-
-  .tags {
-    padding-inline: 0;
-    list-style: none;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    gap: var(--tags-gap, var(--spacing-s));
-  }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLDhEQUE4RDtJQUM5RDs7O0tBR0M7SUFDRCx5RUFBeUU7SUFDekUseUJBQXlCO0lBQ3pCLHdEQUF3RDtJQUN4RCxvREFBb0Q7SUFDcEQsY0FBa0M7SUFBbEMsa0NBQWtDO0lBQ2xDLG1DQUFtQztJQUNuQyw4QkFBcUU7SUFBckUscUVBQXFFO0lBQ3JFLDZCQUFxQjtJQUFyQixxQkFBcUI7SUFDckIsZ0JBQWdCO0VBeUJsQjs7SUF2QkU7TUFDRSxxQ0FBcUM7O01BRXJDOzBCQUNnRTs7TUFEaEU7c0VBQ2dFO01BQ2hFLHFDQUEwRDtNQUExRCwwREFBMEQ7SUFDNUQ7O0lBRUE7TUFDRSxrQkFBa0I7TUFDbEIseUJBQXlCO01BQ3pCLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLGtCQUFrQjtNQUNsQixjQUFjO01BQ2QsU0FBUztJQUNYOztJQUVBO01BQ0UsMkRBQTJEO0lBQzdEOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLG1CQUFtQjtJQUNuQixzQ0FBc0M7RUFDeEM7QUFDRiIsImZpbGUiOiJ0YWcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBUYWdcbiAqL1xuXG5AbGF5ZXIgZWxlbWVudHMge1xuICAudGFnIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgaW5saW5lLXNpemU6IGZpdC1jb250ZW50O1xuICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1ob3Jpem9udGFsLXBhZGRpbmcsIHZhcigtLXNwYWNpbmcteHh4cykpO1xuICAgIGJhY2tncm91bmQ6IHZhcihcbiAgICAgIC0tdGFnLWJhY2tncm91bmQsXG4gICAgICB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpXG4gICAgKTtcbiAgICBjb2xvcjogdmFyKC0tdGFnLWZvcmVncm91bmQsIHZhcigtLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSkpO1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LCB2YXIoLS1mb250LXdlaWdodC1ib2xkKSk7XG4gICAgZm9udC1zaXplOiB2YXIoLS10YWctZm9udC1zaXplLCB2YXIoLS1mb250LXNpemUteHMpKTtcbiAgICBsaW5lLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQsIDIpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgIGJvcmRlcjogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZCB2YXIoLS1saW5lLWNvbG91ciwgY3VycmVudGNvbG9yKTtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgICY6aGFzKGlucHV0OmZvY3VzKSB7XG4gICAgICAtLW91dGxpbmUtc2l6ZTogbWF4KDAuMTI1cmVtLCAwLjE1ZW0pO1xuXG4gICAgICBvdXRsaW5lOiB2YXIoLS1vdXRsaW5lLXdpZHRoLCB2YXIoLS1vdXRsaW5lLXNpemUpKVxuICAgICAgICB2YXIoLS1vdXRsaW5lLXN0eWxlLCBzb2xpZCkgdmFyKC0tb3V0bGluZS1jb2xvciwgY3VycmVudGNvbG9yKTtcbiAgICAgIG91dGxpbmUtb2Zmc2V0OiB2YXIoLS1vdXRsaW5lLW9mZnNldCwgdmFyKC0tb3V0bGluZS1zaXplKSk7XG4gICAgfVxuXG4gICAgJiBpbnB1dCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBpbnNldC1ibG9jay1zdGFydDogLTEwMHB4O1xuICAgICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAtMTAwcHg7XG4gICAgfVxuXG4gICAgJiBsYWJlbCB7XG4gICAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICB9XG5cbiAgICAmOmlzKGE6aG92ZXIsIDpoYXMoaW5wdXQ6Y2hlY2tlZCkpIHtcbiAgICAgIC0tdGFnLWZvcmVncm91bmQ6IHZhcigtLWxpbmstY29sb3VyLCB2YXIoLS1jb2xvdXItcHJpbWFyeSkpO1xuICAgIH1cbiAgfVxuXG4gIC50YWdzIHtcbiAgICBwYWRkaW5nLWlubGluZTogMDtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1mbG93OiByb3cgd3JhcDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogdmFyKC0tdGFncy1nYXAsIHZhcigtLXNwYWNpbmctcykpO1xuICB9XG59XG4iXX0= */
+@layer design-system.components{.tag{display:inline-block;inline-size:-moz-fit-content;inline-size:fit-content;padding-inline:var(--horizontal-padding, var(--spacing-xxxs));background:var( --tag-background, var(--background, var(--colour-background)) );color:var(--tag-foreground, var(--foreground, var(--colour-foreground)));text-transform:uppercase;font-weight:var(--font-weight, var(--font-weight-bold));font-size:var(--tag-font-size, var(--font-size-xs));line-height:2;line-height:var(--line-height, 2);border-radius:var(--border-radius);border:1px solid currentcolor;border:var(--line-width, 1px) solid var(--line-colour, currentcolor);-webkit-text-decoration:none;text-decoration:none;overflow:hidden}.tag:has(input:focus){--outline-size: max(.125rem, .15em);outline:max(.125rem,.15em) solid currentcolor;outline:var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentcolor);outline-offset:max(.125rem,.15em);outline-offset:var(--outline-offset, var(--outline-size))}.tag input{position:absolute;inset-block-start:-100px;inset-inline-start:-100px}.tag label{font-size:inherit;color:inherit;margin:0}.tag:is(a:hover,:has(input:checked)){--tag-foreground: var(--link-colour, var(--colour-primary))}.tags{padding-inline:0;list-style:none;display:flex;flex-flow:row wrap;align-items:center;gap:var(--tags-gap, var(--spacing-s))}}

package/dist/build/tiles.css

@@ -1,61 +1 @@
-/**
- * Tiles
- */
-@layer components {
-  .tile {
-    --outline-offset: -0.125rem;
-    --gap: var(--gap-s);
-
-    overflow: hidden;
-    position: relative;
-    border-radius: var(--border-radius);
-    background: var(--tile-background, var(--colour-background-alt));
-    color: var(--tile-foreground var(--colour-foreground));
-    min-block-size: 160px;
-    min-block-size: var(--height, 160px);
-    transition:
-      0.2s background-color,
-      0.2s background-image,
-      0.2s color,
-      0.2s border-color;
-  }
-
-    .tile:is(.tile--has-link, :has(> a[href])) {
-      cursor: pointer;
-    }
-
-    .tile > a[href] {
-      display: block;
-      text-indent: -10000%;
-      block-size: 100%;
-    }
-
-    .tile .tile__content {
-      padding: var(--spacing-m);
-      position: relative;
-    }
-
-  .tile--medium:root {
-    --height: 15rem;
-  }
-
-  .tile--large:root {
-    --height: 27.0625rem;
-  }
-}
-
-/**
- * Print stylesheet
- */
-
-@media print {
-  .tile {
-    display: block;
-    background-color: transparent;
-    background-image: none;
-    color: var(--colour-foreground);
-    min-block-size: 0;
-  }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTtBQUNGO0VBQ0U7SUFDRSwyQkFBc0I7SUFDdEIsbUJBQW1COztJQUVuQixnQkFBZ0I7SUFDaEIsa0JBQWtCO0lBQ2xCLG1DQUFtQztJQUNuQyxnRUFBZ0U7SUFDaEUsc0RBQXNEO0lBQ3RELHFCQUFvQztJQUFwQyxvQ0FBb0M7SUFDcEM7Ozs7dUJBSW1CO0VBZ0JyQjs7SUFkRTtNQUNFLGVBQWU7SUFDakI7O0lBRUE7TUFDRSxjQUFjO01BQ2Qsb0JBQW9CO01BQ3BCLGdCQUFnQjtJQUNsQjs7SUFFQTtNQUNFLHlCQUF5QjtNQUN6QixrQkFBa0I7SUFDcEI7O0VBR0Y7SUFDRSxlQUFlO0VBQ2pCOztFQUVBO0lBQ0Usb0JBQWU7RUFDakI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsY0FBYztJQUNkLDZCQUE2QjtJQUM3QixzQkFBc0I7SUFDdEIsK0JBQStCO0lBQy9CLGlCQUFpQjtFQUNuQjtBQUNGIiwiZmlsZSI6InRpbGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVGlsZXNcbiAqL1xuQGxheWVyIGNvbXBvbmVudHMge1xuICAudGlsZSB7XG4gICAgLS1vdXRsaW5lLW9mZnNldDogLTJweDtcbiAgICAtLWdhcDogdmFyKC0tZ2FwLXMpO1xuXG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cyk7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tdGlsZS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZC1hbHQpKTtcbiAgICBjb2xvcjogdmFyKC0tdGlsZS1mb3JlZ3JvdW5kIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSk7XG4gICAgbWluLWJsb2NrLXNpemU6IHZhcigtLWhlaWdodCwgMTYwcHgpO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIGJhY2tncm91bmQtY29sb3IsXG4gICAgICAwLjJzIGJhY2tncm91bmQtaW1hZ2UsXG4gICAgICAwLjJzIGNvbG9yLFxuICAgICAgMC4ycyBib3JkZXItY29sb3I7XG5cbiAgICAmOmlzKC50aWxlLS1oYXMtbGluaywgOmhhcyg+IGFbaHJlZl0pKSB7XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgfVxuXG4gICAgJiA+IGFbaHJlZl0ge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICB0ZXh0LWluZGVudDogLTEwMDAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgfVxuXG4gICAgJiAudGlsZV9fY29udGVudCB7XG4gICAgICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgfVxuXG4gICYudGlsZS0tbWVkaXVtIHtcbiAgICAtLWhlaWdodDogMjQwcHg7XG4gIH1cblxuICAmLnRpbGUtLWxhcmdlIHtcbiAgICAtLWhlaWdodDogNDMzcHg7XG4gIH1cbn1cblxuLyoqXG4gKiBQcmludCBzdHlsZXNoZWV0XG4gKi9cblxuQG1lZGlhIHByaW50IHtcbiAgLnRpbGUge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIGJhY2tncm91bmQtaW1hZ2U6IG5vbmU7XG4gICAgY29sb3I6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKTtcbiAgICBtaW4tYmxvY2stc2l6ZTogMDtcbiAgfVxufVxuIl19 */
+@layer design-system.components{.tile{--outline-offset: -.125rem;--gap: var(--gap-s);overflow:hidden;position:relative;border-radius:var(--border-radius);background:var(--tile-background, var(--colour-background-alt));color:var(--tile-foreground var(--colour-foreground));min-block-size:160px;min-block-size:var(--height, 160px);transition:.2s background-color,.2s background-image,.2s color,.2s border-color}.tile:is(.tile--has-link,:has(>a[href])){cursor:pointer}.tile>a[href]{display:block;text-indent:-10000%;block-size:100%}.tile .tile__content{padding:var(--spacing-m);position:relative}.tile--medium:root{--height: 15rem}.tile--large:root{--height: 27.0625rem}}@media print{.tile{display:block;background-color:transparent;background-image:none;color:var(--colour-foreground);min-block-size:0}}

package/dist/build/utilities.css

@@ -1,175 +1 @@
-@layer 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 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;
-  }
-}
-
-/**
- * Responsive utility class
- */
-
-@layer utilities {
-    @media (min-width: 946px) {
-  .mobile-only {
-      display: none;
-  }
-    }
-    @media (max-width: 945.98px) {
-
-  .desktop-only,
-  .global .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 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9sYXlvdXQtdXRpbHMuY3NzIiwidXRpbGl0aWVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQ0UsYUFBYTtJQUNiLDRCQUE0QjtFQUs5Qjs7SUFIRTtNQUNFLGdCQUFnQjtJQUNsQjs7RUFHRjtJQUNFLGFBQWE7RUFDZjs7RUFFQTtJQUNFLHFCQUFxQjtJQUFyQix1QkFBcUI7SUFBckIscUJBQXFCO0VBQ3ZCOztFQUVBO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0UsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UseUJBQXlCO0VBQzNCOztFQUVBO0lBQ0Usd0JBQXdCO0VBQzFCOztFQUVBO0lBQ0Usc0JBQXNCO0VBQ3hCOztFQUVBO0lBQ0UsU0FBUztFQUNYOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsaUJBQWlCO0VBQ25COztFQUVBO0lBQ0UsZUFBZTtFQUNqQjs7RUFFQTtJQUNFLGlCQUFpQjtFQUNuQjs7RUFFQTtJQUNFLGtCQUFrQjtFQUNwQjs7RUFFQTtJQUNFLHdDQUF3QztFQUMxQzs7RUFFQTtJQUNFLDBDQUEwQztFQUM1QztBQUNGOztBQzNFQTtFQUNFOzs7SUFHRSxzQ0FBc0M7SUFDdEMsc0JBQXNCO0lBQ3RCLDZCQUE2QjtJQUM3QixTQUFTO0lBQ1QsVUFBVTtFQUNaOztFQUVBOztJQUVFLGVBQWU7SUFDZiwyQkFBMkI7SUFDM0IsY0FBYztJQUNkLGVBQWU7RUFDakI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtJQUVJO0VBREY7TUFFSSxhQUFhO0VBRWpCO0lBREU7SUFLQTs7RUFGRjs7TUFHSSxhQUFhO0VBRWpCO0lBREU7O0VBR0Y7SUFDRSx3QkFBd0I7RUFLMUI7O0lBSEU7O0VBSEY7TUFJSSx5QkFBeUI7RUFFN0I7SUFERTtJQUlBOztFQURGO01BRUksd0JBQXdCO0VBRTVCO0lBREU7QUFFSjs7QUFFQTs7RUFFRTs7QUFDRjtFQUNFO0lBQ0Usa0NBQW1DO0lBQ25DLGtCQUFrQjtJQUNsQixvQkFBb0I7SUFDcEIsa0JBQWtCOztJQUVsQixxQ0FBOEM7O0lBQTlDLDhDQUE4QztFQUNoRDs7RUFFQTtJQUNFLG1DQUFtQztJQUNuQyxtQ0FBbUM7SUFDbkMsV0FBVztFQUNiO0FBQ0Y7O0FBRUE7RUFDRTtJQUNFLDJCQUEyQjtFQUM3Qjs7RUFFQTtJQUNFLDRCQUE0QjtFQUM5Qjs7RUFFQTtJQUNFLDJCQUEyQjtFQUM3QjtBQUNGIiwiZmlsZSI6InV0aWxpdGllcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAbGF5ZXIgdXRpbGl0aWVzIHtcbiAgLnN0YWNrIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwic3RhY2tcIjtcblxuICAgICYgPiAqIHtcbiAgICAgIGdyaWQtYXJlYTogc3RhY2s7XG4gICAgfVxuICB9XG5cbiAgLmZsZXgge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gIH1cblxuICAucGxhY2UtY2VudGVyIHtcbiAgICBwbGFjZS1jb250ZW50OiBjZW50ZXI7XG4gIH1cblxuICAuYWxpZ24tLWNlbnRlciB7XG4gICAgbWFyZ2luLWlubGluZTogYXV0bztcbiAgfVxuXG4gIC5hbGlnbi0tbGVmdCB7XG4gICAgbWFyZ2luLWlubGluZS1lbmQ6IGF1dG87XG4gIH1cblxuICAuYWxpZ24tLXJpZ2h0IHtcbiAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuICB9XG5cbiAgLmFsaWduLS1ib3R0b20ge1xuICAgIG1hcmdpbi1ibG9jay1zdGFydDogYXV0bztcbiAgfVxuXG4gIC5hbGlnbi0tdG9wIHtcbiAgICBtYXJnaW4tYmxvY2stZW5kOiBhdXRvO1xuICB9XG5cbiAgLm9yZGVyLS1zdGFydCB7XG4gICAgb3JkZXI6IC0xO1xuICB9XG5cbiAgLm9yZGVyLS0xIHtcbiAgICBvcmRlcjogMTtcbiAgfVxuXG4gIC5vcmRlci0tMiB7XG4gICAgb3JkZXI6IDI7XG4gIH1cblxuICAub3JkZXItLTMge1xuICAgIG9yZGVyOiAzO1xuICB9XG5cbiAgLmdhcC0tcyB7XG4gICAgZ2FwOiB2YXIoLS1nYXAtcyk7XG4gIH1cblxuICAuZ2FwLS1tIHtcbiAgICBnYXA6IHZhcigtLWdhcCk7XG4gIH1cblxuICAuZ2FwLS1sIHtcbiAgICBnYXA6IHZhcigtLWdhcC1sKTtcbiAgfVxuXG4gIC5nYXAtLXhsIHtcbiAgICBnYXA6IHZhcigtLWdhcC14bCk7XG4gIH1cblxuICAuZ2FwLS1zZWN0aW9uLWwge1xuICAgIGdhcDogdmFyKC0tc2VjdGlvbi1sLCB2YXIoLS1zcGFjaW5nLXhsKSk7XG4gIH1cblxuICAuZ2FwLS1zZWN0aW9uLXhsIHtcbiAgICBnYXA6IHZhcigtLXNlY3Rpb24teGwsIHZhcigtLXNwYWNpbmctdXVsKSk7XG4gIH1cbn1cbiIsIkBpbXBvcnQgXCJfbGF5b3V0LXV0aWxzLmNzc1wiO1xuXG5AbGF5ZXIgdXRpbGl0aWVzIHtcbiAgLmhpZGRlbixcbiAgLnZpc3VhbGx5LWhpZGRlbixcbiAgLnNyLW9ubHkge1xuICAgIGNsaXAtcGF0aDogcG9seWdvbigwIDAsIDAgMCwgMCAwLCAwIDApO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgcG9zaXRpb246IGFic29sdXRlICFpbXBvcnRhbnQ7XG4gICAgbWFyZ2luOiAwO1xuICAgIHBhZGRpbmc6IDA7XG4gIH1cblxuICAudmlzdWFsbHktaGlkZGVuLnZpc3VhbGx5LWhpZGRlbi0tZm9jdXNzYWJsZTpmb2N1cyxcbiAgLnNyLW9ubHkuc3Itb25seS0tZm9jdXNzYWJsZTpmb2N1cyB7XG4gICAgY2xpcC1wYXRoOiBub25lO1xuICAgIHBvc2l0aW9uOiByZXZlcnQgIWltcG9ydGFudDtcbiAgICBtYXJnaW46IHJldmVydDtcbiAgICBwYWRkaW5nOiByZXZlcnQ7XG4gIH1cbn1cblxuLyoqXG4gKiBSZXNwb25zaXZlIHV0aWxpdHkgY2xhc3NcbiAqL1xuXG5AbGF5ZXIgdXRpbGl0aWVzIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICBAbWVkaWEgKC0tbGFyZ2UtdXApIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgLmRlc2t0b3Atb25seSxcbiAgLmdsb2JhbCAuZGVza3RvcC1vbmx5IHtcbiAgICBAbWVkaWEgKC0tbGFyZ2UtZG93bikge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cblxuICAucHJpbnQtb25seSB7XG4gICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50O1xuXG4gICAgQG1lZGlhIHByaW50IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG5cbiAgLnNjcmVlbi1vbmx5IHtcbiAgICBAbWVkaWEgcHJpbnQge1xuICAgICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxufVxuXG4vKipcbiAqIFNrZWxldG9uIGFuZCBsb2FkaW5nIFVJLlxuICovXG5AbGF5ZXIgdXRpbGl0aWVzIHtcbiAgLnNrZWxldG9uIHtcbiAgICAtLWJhY2tncm91bmQ6IGhzbCgwZGVnIDAlIDAlIC8gMTAlKTtcbiAgICAtLW9wYWNpdHktbG93OiAwLjU7XG4gICAgLS1vcGFjaXR5LWhpZ2g6IDAuNzU7XG4gICAgLS1kdXJhdGlvbjogMTUwMG1zO1xuXG4gICAgYW5pbWF0aW9uOiBwdWxzZSB2YXIoLS1kdXJhdGlvbikgZWFzZSBpbmZpbml0ZTtcbiAgfVxuXG4gIC5za2VsZXRvbi0tYmcge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmQpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgIHotaW5kZXg6IC0xO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgcHVsc2Uge1xuICAwJSB7XG4gICAgb3BhY2l0eTogdmFyKC0tb3BhY2l0eS1sb3cpO1xuICB9XG5cbiAgNzUlIHtcbiAgICBvcGFjaXR5OiB2YXIoLS1vcGFjaXR5LWhpZ2gpO1xuICB9XG5cbiAgMTAwJSB7XG4gICAgb3BhY2l0eTogdmFyKC0tb3BhY2l0eS1sb3cpO1xuICB9XG59XG4iXX0= */
+@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}}@layer design-system.utilities{@media (min-width: 946px){.mobile-only{display:none}}@media (max-width: 945.98px){.desktop-only,.global .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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
     "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run dev-vite\" \"npm run dev-storybook\"",
     "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run build-vite\" \"npm run build-storybook\"",
@@ -125,7 +125,8 @@
   "exports": {
     ".": "./src/elements.ts",
     "./react": "./src/react.ts",
-    "./*.css": "./dist/*.css",
-    "./tokens": "./src/tokens.js"
+    "./tokens": "./src/tokens.js",
+    "./dist/*": "./dist/build/*",
+    "./src/*": "./src/*"
   }
 }

package/src/Atom/Background/_background.css

@@ -1,28 +1,7 @@
-/**
- * Colors
- *
- * Colors are defined in the constants package. View the [Constants package](https://github.com/previousnext/mixtape/tree/master/packages/constants) on github.
- *
- * Markup: colors.twig
- *
- * Style guide: base.colors
- */
-
 /**
  * Backgrounds
- *
- * Colors are defined in the constants package. View the [Constants package](https://github.com/previousnext/mixtape/tree/master/packages/constants) on github.
- *
- * .background--alt - Alternative
- * .background--reverse - Reverse
- *
- * Default: false
- *
- * Markup: backgrounds.twig
- *
- * Style guide: base.colors.backgrounds
  */
-@layer defaults {
+@layer design-system.atoms {
   :where([class*="background--"]) {
     background-color: var(--background, var(--colour-background));
     color: var(--foreground, var(--colour-foreground));

package/src/Atom/Blockquote/_blockquote.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   blockquote {
     padding-inline-start: var(--line-gap, var(--gap));
     border-inline-start: var(--line-width, 6px) solid

package/src/Atom/Button/README.md

@@ -6,13 +6,13 @@
 
 For everything;
 
-`@import '@pnx-mixtape/mxds/button.css';`
+`@import '@pnx-mixtape/mxds/src/Atom/Button/button.css';`
 
 For specifics;
 
 ```css
-@import "@pnx-mixtape/mxds/src/Atom/_buttons.css";
-@import "@pnx-mixtape/mxds/src/Atom/_buttons-styles.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/_buttons.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/_buttons-styles.css";
 
 .button--primary {
   --border-radius: 0;

package/src/Atom/Button/_buttons-styles.css

@@ -2,7 +2,7 @@
  * Buttons
  */
 
-@layer elements {
+@layer design-system.atoms {
   .button--dark {
     --button-line-colour: var(--colour-primary);
     --background: var(--colour-primary);

package/src/Atom/Button/_buttons.css

@@ -2,7 +2,7 @@
  * Buttons
  */
 
-@layer elements {
+@layer design-system.atoms {
   .button {
     --outline-offset: 1px;
     --outline-width: 4px;

package/src/Atom/Heading/_headings.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   :is(
       .headline,
       h1,

package/src/Atom/Icon/README.md

@@ -4,4 +4,4 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/icon.css';`
+`@import '@pnx-mixtape/mxds/src/Atom/icon/icon.css';`

package/src/Atom/Icon/_extended-set.css

@@ -3,7 +3,7 @@
 /**
  * Icon - Extended
  */
-@layer elements {
+@layer design-system.atoms {
   @mixin icon attachment;
   @mixin icon blockquote;
   @mixin icon building;

package/src/Atom/Icon/_icon.css

@@ -4,7 +4,7 @@
  * Icon
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon {
     display: inline-flex;
     align-items: center;
@@ -74,7 +74,7 @@
  * Icon - Colours
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon--color-info::before {
     color: var(--colour-info-foreground);
   }
@@ -104,7 +104,7 @@
  * Icon - alignment
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon.icon--end::before {
     order: 2;
   }
@@ -114,7 +114,7 @@
  * Icon - rotate
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon.icon--rotate-90::before {
     rotate: 90deg;
   }
@@ -132,7 +132,7 @@
  * Icon - size
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon.icon--size-sm::before {
     --icon-size: var(--spacing-s);
   }

package/src/Atom/Image/_image.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   figure {
     margin: 0;
     display: table;

package/src/Atom/Link/_links.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   a:where([href]):is(.link, .link--more, .link--external),
   .rich-text a:where([href]:not([class])) {
     color: var(--link-colour, var(--colour-primary));

package/src/Atom/Media/_media.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.atoms {
   :is(.media--left, .media--right, .media--center) {
     @media (--small-up) {
       display: table;

package/src/Atom/Media/media.twig

@@ -7,11 +7,7 @@
 {% set attributes = attributes|default(create_attribute()).addClass(classes) %}
 
 <figure{{ attributes }}>
-  {% if type == "video" %}
-    {% include '@mixtape/Atom/Video/video.twig' with ( item ) only %}
-  {% else %}
-    {% include '@mixtape/Atom/Image/image.twig' with ( item ) only %}
-  {% endif %}
+  {{ item }}
   {% if caption %}
   <figcaption>{{ caption }}</figcaption>
   {% endif %}

package/src/Atom/NavList/nav-list.css

@@ -2,7 +2,7 @@
  * List Navigation
  */
 
-@layer components {
+@layer design-system.atoms {
   .nav--list {
     margin-block-end: var(--spacing-m);
 

package/src/Atom/README.md

@@ -2,4 +2,4 @@
 
 ### How to use
 
-`@import '@pnx-mixtape/mxds/base.css';`
+`@import '@pnx-mixtape/mxds/src/Atom/base.css';`