@pnx-mixtape/mxds 0.0.2 → 0.0.3

package/README.md

@@ -19,7 +19,7 @@ It's like our greatest hits.
 ## Installation
 
 ```
-npm install @pnx-mixtape/mxds/ --save
+npm install @pnx-mixtape/mxds --save
 ```
 
 ## Usage
@@ -35,10 +35,10 @@ Dependencies:
 Add the [tokens](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/tokens.js)
 and override the values or just copy/paste from Mixtape and update;
 
-_eg. project-tokens.js_
+_eg. project-tokens.mjs_
 
 ```js
-const tokens = require("@pnx-mixtape/mxds/c/src/tokens")
+import tokens from "@pnx-mixtape/mxds/tokens"
 
 // Override existing ones;
 tokens.colour.brand.primary = "rgb(0, 92, 250)"
@@ -46,7 +46,7 @@ tokens.colour.brand.primary = "rgb(0, 92, 250)"
 //Add new ones;
 tokens.newThing = "somethingNew"
 
-module.exports = tokens
+export default tokens
 ```
 
 The [custom properties](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/_constants.css)
@@ -57,7 +57,7 @@ This file should be included in the browser.
 _eg. project-constants.css_
 
 ```css
-@import "@pnx-mixtape/mxds/constants.css";
+@import "@pnx-mixtape/mxds/src/constants.css";
 
 :root {
   --my-colour-primary: rgb(0, 92, 250);
@@ -72,7 +72,7 @@ so there is no need to worry about duplication.
 _eg. project-breakpoints.css_
 
 ```css
-@import "@pnx-mixtape/mxds/_custom-media.css";
+@import "@pnx-mixtape/mxds/src/_custom-media.css";
 
 @custom-media --my-breakpoint (width >= "200px");
 ```
@@ -83,7 +83,7 @@ _eg. buttons.css_
 
 ```css
 @import "../project-breakpoints.css";
-@import "@pnx-mixtape/mxds/button.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/button.css";
 ```
 
 Or partially imported;
@@ -92,8 +92,8 @@ _eg. buttons.css_
 
 ```css
 @import "../project-breakpoints.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;
@@ -125,13 +125,13 @@ custom property before a mixtape fallback, you can set it in you project. eg.
 #### Cascade layers
 
 [@layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are used in Mixtape to ensure ease in overriding CSS on a project
-level. If you are importing `@pnx-mixtape/mxds/Atom/base` CSS then the layers are included.
+level. If you are importing `@pnx-mixtape/mxds/src/Atom/base.css` CSS then the layers are included.
 
 If you are only partially importing the base CSS files, then you'll need to manually
 include the layers at the start of your CSS;
 
 ```css
-@layer defaults, layout, elements, components, utilities;
+@layer design-system.defaults, design-system.atoms, design-system.layout, design-system.components, design-system.utilities;
 ```
 
 Any CSS not wrapped in a layer will have higher specificity to Mixtape's CSS.
@@ -149,13 +149,13 @@ setup to run through a bundler like Rollup).
 _eg. project-init.entry.js_
 
 ```js
-import "@pnx-mixtape/mxds/"
+import "@pnx-mixtape/mxds/src/Component/Accordion/Elements/Accordion"
 ```
 
 To customise this javascript we recommend importing and then extending the Class;
 
 ```js
-import Accordion from "@pnx-mixtape/mxds/"
+import Accordion from "@pnx-mixtape/mxds/src/Component/Accordion/Elements/Accordion"
 
 class FancyAccordion extends Accordion {
   constructor(element) {

package/dist/build/accordion.css

@@ -1,108 +1 @@
-/**
- * Accordion
- */
-
-@layer defaults {
-    details summary {
-      list-style-type: none;
-    }
-
-      details summary:is(::-webkit-details-marker, ::marker) {
-        display: none;
-        content: "";
-      }
-
-  :is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
-    display: block;
-  }
-    :where(:is(div.accordion, mx-accordiondiv)) .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.accordion, mx-accordiondiv)) .accordion__content[inert] {
-      display: none;
-    }
-}
-
-@layer components {
-  .accordion__title {
-    margin-block-end: var(--spacing-m);
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--spacing-s);
-    align-items: center;
-  }
-
-  .accordions__toggle-all {
-    margin-inline-start: auto;
-  }
-
-  .accordion {
-    contain: layout;
-  }
-
-    .accordion .accordion__toggle {
-      cursor: pointer;
-      inline-size: 100%;
-    }
-
-    .accordion:is(> h2, > h3, > h4, > h5, > h6) {
-      all: unset;
-    }
-
-  .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));
-  }
-
-    .accordion--divided .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;
-    }
-
-      .accordion--divided .accordion__toggle .button--icon-only {
-        flex-shrink: 0;
-        margin-inline-start: var(--spacing-xxs);
-      }
-        .accordion--divided:is([open], [data-open="true"]) .accordion__toggle .button--icon-only {
-          transform: rotate(180deg);
-        }
-
-      .accordion--divided:is([open], [data-open="true"]) .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);
-      }
-}
-
-/**
- * Print stylesheet
- */
-
-@media print {
-    .accordion .accordion__content {
-      display: block !important;
-    }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCOztJQUVBO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7O0VBRUE7SUFDRSxlQUFlO0VBVWpCOztJQVJFO01BQ0UsZUFBZTtNQUNmLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFVBQVU7SUFDWjs7RUFHRjtJQUNFOzhDQUMwQztJQUQxQzs4Q0FDMEM7RUE2QjVDOztJQTNCRTtNQUNFLDBEQUEwRDtNQUMxRCxpQkFBNEM7TUFBNUMsNENBQTRDO01BQzVDLGFBQWE7TUFDYiw4QkFBOEI7TUFDOUIsbUJBQW1CO0lBTXJCOztNQUpFO1FBQ0UsY0FBYztRQUNkLHVDQUF1QztNQUN6QztRQUtFO1VBQ0UseUJBQXlCO1FBQzNCOztNQUdGO1FBQ0U7a0RBQzBDO1FBRDFDO2tEQUMwQztRQUMxQywwREFBMEQ7UUFDMUQsaUJBQTRDO1FBQTVDLDRDQUE0QztNQUM5QztBQUdOOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJhY2NvcmRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBBY2NvcmRpb25cbiAqL1xuXG5AbGF5ZXIgZGVmYXVsdHMge1xuICBkZXRhaWxzIHtcbiAgICAmIHN1bW1hcnkge1xuICAgICAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xuXG4gICAgICAmOmlzKDo6LXdlYmtpdC1kZXRhaWxzLW1hcmtlciwgOjptYXJrZXIpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICA6aXMobXgtYWNjb3JkaW9uLCBteC1hY2NvcmRpb25kaXYsIG14LWFjY29yZGlvbm1vYmlsZSkge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgOndoZXJlKDppcyhkaXYuYWNjb3JkaW9uLCBteC1hY2NvcmRpb25kaXYpKSB7XG4gICAgJiAuYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuICAgICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgICAgYmFja2dyb3VuZDogaW5pdGlhbDtcbiAgICAgIGJvcmRlcjogaW5pdGlhbDtcbiAgICAgIHBhZGRpbmc6IGluaXRpYWw7XG4gICAgfVxuXG4gICAgJiAuYWNjb3JkaW9uX19jb250ZW50W2luZXJ0XSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxufVxuXG5AbGF5ZXIgY29tcG9uZW50cyB7XG4gIC5hY2NvcmRpb25fX3RpdGxlIHtcbiAgICBtYXJnaW4tYmxvY2stZW5kOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1mbG93OiByb3cgd3JhcDtcbiAgICBnYXA6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxuXG4gIC5hY2NvcmRpb25zX190b2dnbGUtYWxsIHtcbiAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuICB9XG5cbiAgLmFjY29yZGlvbiB7XG4gICAgY29udGFpbjogbGF5b3V0O1xuXG4gICAgJiAuYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuXG4gICAgJjppcyg+IGgyLCA+IGgzLCA+IGg0LCA+IGg1LCA+IGg2KSB7XG4gICAgICBhbGw6IHVuc2V0O1xuICAgIH1cbiAgfVxuXG4gIC5hY2NvcmRpb24tLWRpdmlkZWQge1xuICAgIGJvcmRlci1ibG9jay1lbmQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG5cbiAgICAmIC5hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS12ZXJ0aWNhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4cykpO1xuICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgJiAuYnV0dG9uLS1pY29uLW9ubHkge1xuICAgICAgICBmbGV4LXNocmluazogMDtcbiAgICAgICAgbWFyZ2luLWlubGluZS1zdGFydDogdmFyKC0tc3BhY2luZy14eHMpO1xuICAgICAgfVxuICAgIH1cblxuICAgICY6aXMoW29wZW5dLCBbZGF0YS1vcGVuPVwidHJ1ZVwiXSkge1xuICAgICAgJiAuYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgICAmIC5idXR0b24tLWljb24tb25seSB7XG4gICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5hY2NvcmRpb25fX2NvbnRlbnQge1xuICAgICAgICBib3JkZXItYmxvY2stc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS12ZXJ0aWNhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4cykpO1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCAwKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBQcmludCBzdHlsZXNoZWV0XG4gKi9cblxuQG1lZGlhIHByaW50IHtcbiAgLmFjY29yZGlvbiB7XG4gICAgJiAuYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG4iXX0= */
+@layer design-system.defaults{details summary{list-style-type:none}details summary:is(::-webkit-details-marker,::marker){display:none;content:""}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile){display:block}:where(:is(div.accordion,mx-accordiondiv)) .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.accordion,mx-accordiondiv)) .accordion__content[inert]{display:none}}@layer design-system.components{.accordion__title{margin-block-end:var(--spacing-m);display:flex;flex-flow:row wrap;gap:var(--spacing-s);align-items:center}.accordions__toggle-all{margin-inline-start:auto}.accordion{contain:layout}.accordion .accordion__toggle{cursor:pointer;inline-size:100%}.accordion:is(>h2,>h3,>h4,>h5,>h6){all:unset}.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))}.accordion--divided .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}.accordion--divided .accordion__toggle .button--icon-only{flex-shrink:0;margin-inline-start:var(--spacing-xxs)}.accordion--divided:is([open],[data-open=true]) .accordion__toggle .button--icon-only{transform:rotate(180deg)}.accordion--divided:is([open],[data-open=true]) .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{.accordion .accordion__content{display:block!important}}

package/dist/build/accordion.entry.js

@@ -0,0 +1 @@
+import{m as e}from"./chunks/utilities-Bzel_okZ.js";class t extends HTMLElement{constructor(){super(),this.handleOpen=()=>{this.details&&(this.details.open=!0)},this.handleClose=()=>{this.details&&(this.details.open=!1)},this.handleHash=()=>{const{hash:e}=window.location;e&&e===`#${this.details?.id}`&&this.handleOpen()},this.generatedId=()=>{const t=this.trigger?.textContent?.trim();return t?e(t):""},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.details||!this.trigger)return;const{signal:e}=this.controller;document.addEventListener("beforeprint",this.handleOpen,{signal:e}),document.addEventListener("afterprint",this.handleClose,{signal:e}),this.handleHash(),document.addEventListener("hashchange",this.handleHash,{signal:e})}disconnectedCallback(){this.controller.abort()}get details(){const e=this.querySelector("details");if(!e)throw new Error(`${this.localName} must contain a <details> element.`);return e.id=e.id||this.generatedId(),e}get trigger(){const e=this.querySelector("summary");if(!e)throw new Error(`${this.localName} must contain a <summary> element.`);return e}}customElements.define("mx-accordion",t);class s extends HTMLElement{constructor(){super(),this.handleClick=({target:e})=>{e===this.expandTrigger&&this.handleExpand(),e===this.collapseTrigger&&this.handleCollapse()},this.handleExpand=()=>{this.accordions.forEach((e=>e.open=!0)),this.expandTrigger.disabled=!0,this.collapseTrigger.disabled=!1},this.handleCollapse=()=>{this.accordions.forEach((e=>e.open=!1)),this.expandTrigger.disabled=!1,this.collapseTrigger.disabled=!0},this.handleToggle=()=>{this.expandTrigger.disabled=[...this.accordions].every((e=>!0===e.open)),this.collapseTrigger.disabled=[...this.accordions].every((e=>!0!==e.open))},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.accordions||!this.expandTrigger||!this.collapseTrigger)return;this.collapseTrigger.disabled=!0;const{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()}get accordions(){const e=this.querySelectorAll("details");if(!e.length)throw new Error(`${this.localName} must contain at least one <details> element.`);return e}get expandTrigger(){const e=this.querySelector(".accordions__toggle-all button[data-expand]");if(!e)throw new Error(`${this.localName} must contain a <button data-expand> element.`);return e}get collapseTrigger(){const e=this.querySelector(".accordions__toggle-all button[data-collapse]");if(!e)throw new Error(`${this.localName} must contain a <button data-collapse> element.`);return e}}customElements.define("mx-accordion-group",s);