@pnx-mixtape/mxds 0.0.2 → 0.0.3

package/src/Component/Navigation/_navigation-mega.css

@@ -2,7 +2,7 @@
  * Dropdown Navigation - Mega Nav
  */
 
-@layer components {
+@layer design-system.components {
   .nav--mega-nav {
     @media (--global-nav-down) {
       max-block-size: 100%;

package/src/Component/Navigation/_navigation.css

@@ -2,7 +2,7 @@
  * Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav {
     & ul {
       display: flex;

package/src/Component/Navigation/navigation.entry.js

@@ -0,0 +1 @@
+import "./Elements/Navigation"

package/src/Component/Pagination/README.md

@@ -4,16 +4,16 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/pagination.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Pagination/pagination.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/Pagination/pagination.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Pagination/pagination.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { PaginationContext, Pagination } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { PaginationContext, Pagination } from '@pnx-mixtape/mxds/src/react';`

package/src/Component/Pagination/pagination.css

@@ -2,7 +2,7 @@
  * Pagination
  */
 
-@layer elements {
+@layer design-system.components {
   .pagination {
     margin-inline: 0;
     padding: 0;

package/src/Component/Sticky/README.md

@@ -4,20 +4,27 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/sticky.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Sticky/sticky.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/Sticky/twig/sticky.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Sticky/twig/sticky.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-`import { Sticky } from '@pnx-mixtape/mxds/react';`
+`import { Sticky } from '@pnx-mixtape/mxds/src/react';`
 
-**JS**
+**JS Custom Element**
 
-`import Sticky from '@pnx-mixtape/mxds';`
+Custom Elements are self defined, simply import the desired feature.
+These do not use the Shadow DOM and are not typical Web Components.
+External CSS applies.
+No Polyfills or frameworks are required.
+
+- Sticky import: `import '@pnx-mixtape/mxds/src/Component/Sticky/Elements/Sticky';` and be sure to include `<mx-sticky>` around the content.
+
+See twig files for all HTML examples.

package/src/Component/Sticky/sticky.css

@@ -8,13 +8,13 @@
   z-index: var(--z-index, 1);
 }
 
-@layer defaults {
+@layer design-system.defaults {
   mx-sticky {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .sticky {
     @mixin sticky;
   }

package/src/Component/Sticky/sticky.entry.js

@@ -0,0 +1 @@
+import "./Elements/Sticky"

package/src/Component/Tabs/README.md

@@ -4,20 +4,28 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/tabs.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Tabs/tabs.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/Tabs/tabs.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Tabs/tabs.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-`import { Tabs, TabList, Tab, TabPanel } from '@pnx-mixtape/mxds/react';`
+`import { Tabs, TabList, Tab, TabPanel } from '@pnx-mixtape/mxds/src/react';`
 
 **JS Custom Element**
 
-`import Tabs from '@pnx-mixtape/mxds';`
+Custom Elements are self defined, simply import the desired feature.
+These do not use the Shadow DOM and are not typical Web Components.
+External CSS applies.
+No Polyfills or frameworks are required.
+
+- Sticky import: `import '@pnx-mixtape/mxds/src/Component/Tabs/Elements/Tabs';` and be sure to include `<mx-tabs>` around the content.
+
+See twig files for all HTML examples.
+

package/src/Component/Tabs/tabs.css

@@ -2,13 +2,13 @@
  * Tabs
  */
 
-@layer defaults {
+@layer design-system.defaults {
   :is(mx-tabs, mx-tabs mx-dropmenu) {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .tabs {
     position: relative;
 

package/src/Component/Tabs/tabs.entry.js

@@ -0,0 +1 @@
+import "./Elements/Tabs"

package/src/Component/Tag/README.md

@@ -4,7 +4,7 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/ta.cssg';`
+`@import '@pnx-mixtape/mxds/src/Component/Tag/tag.css';`
 
 **Twig**
 
@@ -16,4 +16,4 @@ Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { Tag } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Tag } from '@pnx-mixtape/mxds/src/react';`

package/src/Component/Tag/tag.css

@@ -2,7 +2,7 @@
  * Tag
  */
 
-@layer elements {
+@layer design-system.components {
   .tag {
     display: inline-block;
     inline-size: fit-content;

package/src/Component/Tile/tiles.css

@@ -1,7 +1,7 @@
 /**
  * Tiles
  */
-@layer components {
+@layer design-system.components {
   .tile {
     --outline-offset: -2px;
     --gap: var(--gap-s);

package/src/Form/README.md

@@ -4,8 +4,8 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/form.cs';`
+`@import '@pnx-mixtape/mxds/src/Form/form.cs';`
 
 **JSX Components**
 
-- JSX import: `import { Form, FormItem, FormText, FormLabel } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Form, FormItem, FormText, FormLabel } from '@pnx-mixtape/mxds/src/react';`

package/src/Form/form.css

@@ -2,7 +2,7 @@
  * Form
  */
 
-@layer elements {
+@layer design-system.atoms {
   .form__item {
     max-inline-size: var(--container-max-width);
 
@@ -17,7 +17,7 @@
  * Text Input
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(
       .input__text,
       [type="text"],
@@ -86,7 +86,7 @@
  * Input Divider
  */
 
-@layer elements {
+@layer design-system.atoms {
   .input__divider {
     padding: var(--form-spacing, var(--spacing-s));
     line-height: var(--line-height-ui);
@@ -97,7 +97,7 @@
  * Text Input with Icon
  */
 
-@layer elements {
+@layer design-system.atoms {
   .input__text--icon {
     display: inline-block;
     max-inline-size: 100%;
@@ -136,7 +136,7 @@
  * Text Input with Inline Button
  */
 
-@layer elements {
+@layer design-system.atoms {
   .input__text--inline {
     position: relative;
     display: inline-block;
@@ -168,7 +168,7 @@
  * Label
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(label, legend) {
     display: block;
     margin-block-end: var(--spacing-xxxs);
@@ -242,7 +242,7 @@
  * Radios
  */
 
-@layer elements {
+@layer design-system.atoms {
   [type="radio"] {
     box-shadow: none;
     appearance: none;
@@ -331,7 +331,7 @@
  * Textarea
  */
 
-@layer elements {
+@layer design-system.atoms {
   textarea {
     block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
     inline-size: 100%;
@@ -342,7 +342,7 @@
  * Fieldset
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(.fieldset, fieldset) {
     border: var(--line-width, 2px) solid
       var(--line-colour, var(--colour-border));
@@ -380,7 +380,7 @@
  * Description
  */
 
-@layer elements {
+@layer design-system.atoms {
   .form__description {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
@@ -396,7 +396,7 @@
  * Error message
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(.form__success-message, .form__error-message) {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
@@ -438,7 +438,7 @@
  * Select
  */
 
-@layer elements {
+@layer design-system.atoms {
   select {
     appearance: none;
     cursor: pointer;

package/src/Layout/Footer/FooterMenu/footer-menu.css

@@ -1,7 +1,7 @@
 /**
  * Footer Navigation
  */
-@layer components {
+@layer design-system.components {
   .nav--footer {
     & ul {
       display: grid;

package/src/Layout/Footer/footer.css

@@ -2,7 +2,7 @@
  * Global Footer
  */
 
-@layer components {
+@layer design-system.layouts {
   .footer {
     position: sticky;
     inset-block-start: 100vh;

package/src/Layout/Grid/container-grid.css

@@ -1,7 +1,7 @@
 /**
  * Container Grid
  */
-@layer layout {
+@layer design-system.layouts {
   .grid.container {
     --container-name: grid-item;
 
@@ -119,7 +119,7 @@
  * Dynamic Container Grid
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid.container {
     &:is(.grid--dynamic) {
       /* This doesn't play nice in Safari and isn't required, so we unset the container. */

package/src/Layout/Grid/grid.css

@@ -2,7 +2,7 @@
  * Dynamic Grid
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid {
     --grid-repeat: auto-fit;
     --grid-min: 20ch;
@@ -111,7 +111,7 @@
 /**
  * Grid items.
  */
-@layer layout {
+@layer design-system.layouts {
   [class*="grid-item__span-"] {
     grid-column: auto / var(--grid-span, auto);
   }

package/src/Layout/Header/_header.css

@@ -2,7 +2,7 @@
  * Primary Header
  */
 
-@layer components {
+@layer design-system.layouts {
   .header {
     position: relative;
 

package/src/Layout/Header/_toggles.css

@@ -2,7 +2,7 @@
  * Global Header
  */
 
-@layer components {
+@layer design-system.layouts {
   .header__toggles {
     display: flex;
     gap: var(--toggle-gap, var(--spacing-xs));

package/src/Layout/Header/header.entry.js

@@ -0,0 +1 @@
+import "./Elements/GlobalToggle"

package/src/Layout/Masthead/masthead.css

@@ -1,9 +1,9 @@
 /**
- * Secondary Header
+ * Masthead
  */
 
-@layer components {
-  .global__secondary {
+@layer design-system.layouts {
+  .masthead {
     & .flex {
       justify-content: space-between;
       align-items: center;
@@ -16,7 +16,7 @@
     }
   }
 
-  .global__secondary__nav {
+  .masthead__nav {
     display: none;
 
     @media (--global-nav-up) {
@@ -30,7 +30,7 @@
 }
 
 @media print {
-  .global__secondary {
+  .masthead {
     display: none;
   }
 }

package/src/Layout/Masthead/masthead.twig

@@ -1,10 +1,10 @@
-<div class="global__secondary section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
+<div class="masthead section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
   <div class="flex">
     {% block left %}
       <span class="text--s">Global message</span>
     {% endblock %}
     {% block right %}
-      {% include "@mixtape/Component/Navigation/navigation.twig" with { 'modifier_class': 'global__secondary__nav nav--inline text--s' } %}
+      {% include "@mixtape/Component/Navigation/navigation.twig" with { 'modifier_class': 'masthead__nav nav--inline text--s' } %}
     {% endblock %}
   </div>
 </div>

package/src/Layout/Page/README.md

@@ -4,7 +4,7 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/page.css';`
+`@import '@pnx-mixtape/mxds/src/Layout/Page/page.css';`
 
 **Twig**
 
@@ -16,4 +16,4 @@ Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { Page, PageSidebar, HeroBanner } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Page, PageSidebar, HeroBanner } from '@pnx-mixtape/mxds/src/react';`

package/src/Layout/Page/page.css

@@ -2,7 +2,7 @@
  * Page
  */
 
-@layer layout {
+@layer design-system.layouts {
   :where(.page) {
     --plus: token("size.container.plus");
     --minus: token("size.container.minus");
@@ -83,7 +83,7 @@
  * Page with Sidebar
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid--sidebar {
     &:where(:not(:has(> aside))) {
       grid-column: narrow;

package/src/Layout/README.md

@@ -4,7 +4,8 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/grid.css';`
+`@import '@pnx-mixtape/mxds/src/Layout/Grid/grid.css';`
+`@import '@pnx-mixtape/mxds/src/Layout/Section/section.css';`
 
 **Twig**
 
@@ -16,4 +17,4 @@ Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { Section, Grid, SectionGrid } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Section, Grid, SectionGrid } from '@pnx-mixtape/mxds/src/react';`

package/src/Layout/Section/section.css

@@ -2,7 +2,7 @@
  * Section
  */
 
-@layer layout {
+@layer design-system.layouts {
   .container {
     --container-name: container;
 
@@ -76,7 +76,7 @@
  * see https://www.bram.us/2022/12/13/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has/
  */
 
-@layer layout {
+@layer design-system.layouts {
   .section--flow {
     --flow-spacing: var(--section-l, var(--spacing-xl));
 
@@ -126,7 +126,7 @@
  * Section header
  */
 
-@layer layout {
+@layer design-system.layouts {
   .section__header {
     margin-block-end: var(--spacing-m);
     display: flex;
@@ -144,7 +144,7 @@
  * Section Background image
  */
 
-@layer layout {
+@layer design-system.layouts {
   :is(.section--has-background, .section:has(.background--image)) {
     overflow: hidden;
     position: relative;

package/src/Layout/Sidebar/sidebar.css

@@ -2,7 +2,7 @@
  * Sidebar
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid--sidebar {
     &:where(:not(:has(> aside))) {
       grid-column: narrow;

package/src/Utility/Drupal/README.md

@@ -6,4 +6,4 @@ Helper components for Drupal specific elements.
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/drupal.css';`
+`@import '@pnx-mixtape/mxds/src/drupal.css';`

package/src/Utility/README.md

@@ -6,7 +6,7 @@ Common code, used by other components, and utility classes.
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/utilities.css';`
+`@import '@pnx-mixtape/mxds/src/Utility/utilities.css';`
 
 **JS**
 

package/src/Utility/_layout-utils.css

@@ -1,4 +1,4 @@
-@layer utilities {
+@layer design-system.utilities {
   .stack {
     display: grid;
     grid-template-areas: "stack";

package/src/Utility/utilities.css

@@ -1,6 +1,6 @@
 @import "_layout-utils.css";
 
-@layer utilities {
+@layer design-system.utilities {
   .hidden,
   .visually-hidden,
   .sr-only {
@@ -24,7 +24,7 @@
  * Responsive utility class
  */
 
-@layer utilities {
+@layer design-system.utilities {
   .mobile-only {
     @media (--large-up) {
       display: none;
@@ -56,7 +56,7 @@
 /**
  * Skeleton and loading UI.
  */
-@layer utilities {
+@layer design-system.utilities {
   .skeleton {
     --background: hsl(0deg 0% 0% / 10%);
     --opacity-low: 0.5;

package/dist/build/Accordion.js

@@ -1,61 +0,0 @@
-import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
-class Accordion extends HTMLElement {
-  constructor() {
-    super();
-    this.handleOpen = () => {
-      if (!this.details) return;
-      this.details.open = true;
-    };
-    this.handleClose = () => {
-      if (!this.details) return;
-      this.details.open = false;
-    };
-    this.handleHash = () => {
-      const { hash } = window.location;
-      if (hash && hash === `#${this.details?.id}`) {
-        this.handleOpen();
-      }
-    };
-    this.generatedId = () => {
-      const string = this.trigger?.textContent?.trim();
-      return !string ? "" : makeAnchor(string);
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.details || !this.trigger) return;
-    const { signal } = this.controller;
-    document.addEventListener("beforeprint", this.handleOpen, {
-      signal
-    });
-    document.addEventListener("afterprint", this.handleClose, {
-      signal
-    });
-    this.handleHash();
-    document.addEventListener("hashchange", this.handleHash, { signal });
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  get details() {
-    const details = this.querySelector("details");
-    if (!details) {
-      throw new Error(`${this.localName} must contain a <details> element.`);
-    }
-    details.id = details.id || this.generatedId();
-    return details;
-  }
-  get trigger() {
-    const trigger = this.querySelector("summary");
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a <summary> element.`);
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-accordion", Accordion);
-export {
-  Accordion as default
-};
-//# sourceMappingURL=Accordion.js.map

package/dist/build/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sources":["../../src/Component/Accordion/Elements/Accordion.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.details || !this.trigger) return\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\"beforeprint\", this.handleOpen, {\n      signal,\n    })\n    document.addEventListener(\"afterprint\", this.handleClose, {\n      signal,\n    })\n    this.handleHash()\n    document.addEventListener(\"hashchange\", this.handleHash, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleOpen = (): void => {\n    if (!this.details) return\n    this.details.open = true\n  }\n\n  handleClose = (): void => {\n    if (!this.details) return\n    this.details.open = false\n  }\n\n  handleHash = (): void => {\n    const { hash }: Location = window.location\n    if (hash && hash === `#${this.details?.id}`) {\n      this.handleOpen()\n    }\n  }\n\n  get details(): HTMLDetailsElement | null {\n    const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n    if (!details) {\n      throw new Error(`${this.localName} must contain a <details> element.`)\n    }\n    details.id = details.id || this.generatedId()\n    return details\n  }\n\n  get trigger(): HTMLElement | null {\n    const trigger: HTMLElement | null = this.querySelector(\"summary\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <summary> element.`)\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion\": Accordion\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;"}