@pnx-mixtape/mxds 0.0.2 → 0.0.3

package/src/Atom/Spacing/_spacing.css

@@ -1,6 +1,6 @@
 @import "../_mixins.css";
 
-@layer utlities {
+@layer design-system.utilities {
   .spacing--reset {
     padding: 0 !important;
   }

package/src/Atom/Table/_table.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   table {
     inline-size: 100%;
     border-collapse: collapse;

package/src/Atom/Text/_text-align.css

@@ -1,4 +1,4 @@
-@layer utlities {
+@layer design-system.utilities {
   .text--left {
     text-align: start;
   }

package/src/Atom/Text/_text-sizes.css

@@ -1,4 +1,4 @@
-@layer utlities {
+@layer design-system.atoms {
   :is(
       .text--section-headline,
       .text--embellished-headline,

package/src/Atom/Video/_video.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   .video {
     &,
     & :is(embed, object, iframe) {

package/src/Atom/Video/video.twig

@@ -1,5 +1,11 @@
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-<figure class="video">
-  <iframe title="Some video" width="560" height="315" src="https://www.youtube.com/embed/NpEaa2P7qZI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+{% set attributes = attributes|default(create_attribute()).addClass("video") %}
+<figure{{ attributes }}>
+  <iframe
+      src="{{ src }}"
+      {% if title %} title="{{ title }}"{% endif %}
+      {% if loading %} loading="{{ loading }}"{% endif %}
+      {% if height %} height="{{ height }}"{% endif %}
+      {% if width %} width="{{ width }}"{% endif %}
+      allowfullscreen
+  ></iframe>
 </figure>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

package/src/Atom/_animated.css

@@ -1,4 +1,4 @@
-@layer utilities {
+@layer design-system.utilities {
   .animated--fade-in {
     animation: fade-in 0.5s var(--ease);
   }

package/src/Atom/_flow-legacy.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   * + h1 {
     margin-block-start: var(--spacing-m);
   }

package/src/Atom/_flow.css

@@ -1,4 +1,4 @@
-@layer utilities {
+@layer design-system.utilities {
   .vertical-flow {
     /* Default vertical flow. */
 

package/src/Atom/_generic.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   *,
   *::before,
   *::after {

package/src/Atom/_hr.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   hr {
     display: block;
     block-size: 0;

package/src/Atom/base.css

@@ -1,5 +1,5 @@
-@layer popover-polyfill, defaults, layout, elements, components, utilities;
+@layer popover-polyfill, design-system.defaults, design-system.atoms, design-system.layouts, design-system.components, design-system.utilities;
 
-@import "Background/_background.css";
+@import "./Background/_background.css";
 @import "_animated.css";
 @import "_base.css";

package/src/Component/Accordion/README.md

@@ -4,13 +4,13 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/accordion.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Accordion/accordion.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/accordion/twig/accordion.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Accordion/accordion.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
@@ -18,7 +18,7 @@ Alternatively copy/paste the file for more control.
 
 JSX components are available for use with React.
 
-- JSX import: `import { Accordion } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Accordion } from '@pnx-mixtape/mxds/src/react';`
 
 **JS Custom Element**
 
@@ -27,19 +27,9 @@ These do not use the Shadow DOM and are not typical Web Components.
 External CSS applies.
 No Polyfills or frameworks are required.
 
-- AccordionBase import: `import '@pnx-mixtape/mxds/Components/Accordion/Elements/Accordion';` and be sure to include `<mx-accordion>` around the `<details />` tag.
-- AccordionMobile import: `import '@pnx-mixtape/mxds/Components/Accordion/Elements/AccordionMobile';` and be sure to include `<mx-accordionmobile>` around the `<details />` tag.
-- AccordionDiv import: `import '@nx-mixtape/Components/Accordion/Elements/AccordionDiv';` and be sure to include `<mx-accordiondiv class="accordion">` instead of the `<details />` tag.
-
-```html
-<mx-accordion>
-  <details class="accordion">
-    <summary class="accordion__toggle">Title</summary>
-    <div class="accordion__content">
-      <p>Body content</p>
-    </div>
-  </details>
-</mx-accordion>
-```
+- AccordionBase import: `import '@pnx-mixtape/mxds/src/Component/Accordion/Elements/Accordion';` and be sure to include `<mx-accordion>` around the `<details />` tag.
+- AccordionMobile import: `import '@pnx-mixtape/mxds/src/Component/Accordion/Elements/AccordionMobile';` and be sure to include `<mx-accordionmobile>` around the `<details />` tag.
+- AccordionDiv import: `import '@nx-mixtape/Component/Accordion/Elements/AccordionDiv';` and be sure to include `<mx-accordiondiv class="accordion">` instead of the `<details />` tag.
+- AccordionGroup import: `import '@pnx-mixtape/mxds/src/Component/Accordion/Elements/AccordionGroup';` and be sure to include `<mx-accordion-group>` around the `<details />` tags.
 
 See twig files for all HTML examples.

package/src/Component/Accordion/accordion.css

@@ -2,7 +2,7 @@
  * Accordion
  */
 
-@layer defaults {
+@layer design-system.defaults {
   details {
     & summary {
       list-style-type: none;
@@ -34,7 +34,7 @@
   }
 }
 
-@layer components {
+@layer design-system.components {
   .accordion__title {
     margin-block-end: var(--spacing-m);
     display: flex;

package/src/Component/Accordion/accordion.entry.js

@@ -0,0 +1,2 @@
+import "./Elements/Accordion"
+import "./Elements/AccordionGroup"

package/src/Component/Breadcrumb/breadcrumb.css

@@ -2,7 +2,7 @@
  * Breadcrumb Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav--breadcrumb {
     --nav-font-size: var(--font-size-s);
 

package/src/Component/Callout/callout.css

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

package/src/Component/Card/README.md

@@ -4,18 +4,12 @@
 
 **CSS**
 
-`@import @pnx-mixtape/mxds/card.css';`
+`@import @pnx-mixtape/mxds/src/Component/Card/card.css';`
 
-**HTML**
+**Twig**
 
-```html
-<div class="card">
-  <figure class="card__media">
-    <img src="https://via.placeholder.com/788x556" alt="Descriptive text" />
-  </figure>
-  <div class="card__content">
-    <h3>Title</h3>
-    <p>Body content</p>
-  </div>
-</div>
-```
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/Card/card.twig' %}`
+
+Alternatively copy/paste the file for more control.

package/src/Component/Card/card.css

@@ -2,7 +2,7 @@
  * Content Card
  */
 
-@layer components {
+@layer design-system.components {
   .card {
     display: grid;
     grid-template: "media" auto "content" 1fr / 1fr;
@@ -82,7 +82,7 @@
  * Content Card Grid
  */
 
-@layer components {
+@layer design-system.components {
   .grid:has(> *:nth-child(2):last-child) > :is(.card, .container:has(.card)) {
     inline-size: 100%;
     max-inline-size: var(--max-card-width, 37ch);
@@ -94,7 +94,7 @@
  * Content Card Linked
  */
 
-@layer components {
+@layer design-system.components {
   a[href].card {
     &:hover {
       color: inherit;

package/src/Component/ContentBlock/README.md

@@ -4,18 +4,12 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/content-block.css';`
+`@import '@pnx-mixtape/mxds/src/Component/ContentBlock/content-block.css';`
 
-**HTML**
+**Twig**
 
-```html
-<div class="content-block">
-  <h2>Title</h2>
-  <p>Body content</p>
-  <div class="content-block__actions">
-    <a href="#" class="button button--large button--primary"
-      >Let's get started</a
-    >
-  </div>
-</div>
-```
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/ContentBlock/content-block.twig' %}`
+
+Alternatively copy/paste the file for more control.

package/src/Component/ContentBlock/content-block.css

@@ -2,7 +2,7 @@
  * Content block
  */
 
-@layer components {
+@layer design-system.components {
   .content-block {
     inline-size: 100%;
     margin-inline: auto;
@@ -14,7 +14,7 @@
   }
 }
 
-@layer utilities {
+@layer design-system.utilities {
   .vertical-flow-flex.content-block {
     align-items: center;
   }

package/src/Component/Dialog/README.md

@@ -4,60 +4,26 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/dialog.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Dialog/dialog.css';`
 
-**Web Components**
+**Twig**
 
-Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.
+You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- DialogBase import: `import '@pnx-mixtape/mxds/dialog/DialogBase';` and be sure to include `<mx-dialog>` around the `<dialog />` tag.
+- Eg: `{% extends '@mixtape/Component/Dialog/dialog.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JS Custom Element**
+
+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.
+
+- Dialog import: `import '@pnx-mixtape/mxds/src/Component/Dialog/Elements/Dialog';` and be sure to include `<mx-dialog>` around the `<dialog />` tag.
 - The triggering element should either have `aria-controls="[id]"` or `href="#[id]"` where the ID matches the dialog (required).
 - Use the `[data-modal]` attribute to trigger `HTMLDialogElement.showModal()` on open. When omitted `HTMLDialogElement.show()` is used.
 - Add `[data-close]` to any button that should call `HTMLDialogElement.close()`
 
-```html
-<button aria-controls="example-dialog" class="button button--primary">
-  Dialog trigger
-</button>
-<mx-dialog id="example-dialog" data-modal>
-  <dialog class="dialog">
-    <button
-      autofocus
-      class="button button--icon-only icon icon--close"
-      data-close
-    >
-      Close dialog
-    </button>
-    <div class="dialog__content">
-      <h2>Title</h2>
-      <p>Body content.</p>
-    </div>
-  </dialog>
-</mx-dialog>
-```
-
 See twig files for all HTML examples.
-
-**Vanilla JS (to be deprecated)**
-
-- ES6 import: `import Dialog from '@pnx-mixtape/mxds/dialog';`
-- Script tag: `<script src="dist/dialog.js" type="text/javascript"></script>`
-
-**HTML**
-
-```html
-<button
-  data-dialog
-  aria-controls="example-dialog"
-  class="button button--primary"
->
-  Dialog trigger
-</button>
-
-<dialog class="dialog" id="example-dialog">
-  <div class="dialog__content">
-    <h2>Title</h2>
-    <p>Body content.</p>
-  </div>
-</dialog>
-```

package/src/Component/Dialog/dialog.css

@@ -2,13 +2,13 @@
  * Dialog
  */
 
-@layer defaults {
+@layer design-system.defaults {
   mx-dialog {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .dialog {
     max-inline-size: var(--container-max-width);
     max-block-size: 90vh;
@@ -54,7 +54,7 @@
  * Dialog fullscreen.
  */
 
-@layer components {
+@layer design-system.components {
   .dialog--fullscreen {
     box-shadow: none;
     border: 0;

package/src/Component/Dialog/dialog.entry.js

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

package/src/Component/DropMenu/README.md

@@ -1,11 +1,26 @@
 # Drop Menu
 
-Documentation and examples: [drop-menu](https://mixtape.pnx.io/drop-menu)
-
 ### How to use
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/drop-menu.css';`
+`@import '@pnx-mixtape/mxds/src/Component/DropMenu/drop-menu.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/DropMenu/drop-menu.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JS Custom Element**
+
+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.
+
+- Dialog import: `import '@pnx-mixtape/mxds/src/Component/DropMenu/Elements/DropMenu';` and be sure to include `<mx-dropmenu>` around the content.
 
-**@todo JS**
+See twig files for all HTML examples.

package/src/Component/DropMenu/drop-menu.css

@@ -6,7 +6,7 @@
  * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
  */
 
-@layer elements {
+@layer design-system.components {
   .drop-menu__trigger {
     anchor-name: --drop-menu;
 

package/src/Component/DropMenu/drop-menu.entry.js

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

package/src/Component/HeroBanner/hero-banner.css

@@ -2,7 +2,7 @@
  * Page Title
  */
 
-@layer components {
+@layer design-system.components {
   .hero-banner {
     position: relative;
     z-index: 1;

package/src/Component/HeroBanner/hero-banner.twig

@@ -26,6 +26,7 @@
       {% if subtitle %}
         <div class="text--lede">{{ subtitle }}</div>
       {% endif %}
+      {{ content }}
       {{ link }}
     </div>
     {% if linkList %}

package/src/Component/InPageAlert/README.md

@@ -4,13 +4,13 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/in-page-alert.css';`
+`@import '@pnx-mixtape/mxds/src/Component/InPageAlert/in-page-alert.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/InPageAlert/in-page-alert.twig' %}`
+- Eg: `{% extends '@mixtape/Component/InPageAlert/in-page-alert.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
@@ -18,10 +18,10 @@ Alternatively copy/paste the file for more control.
 
 JSX components are available for use with React.
 
-- JSX import: `import { InPageAlert } from 'pnx-mixtape/InPageAlert';`
+- JSX import: `import { InPageAlert } from '@pnx-mixtape/mxds/react';`
 
 **Custom Element**
 
 This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.
 
-- ES6 import: `import '@pnx-mixtape/mxds/InPageAlert/Elements/InPageAlert';`
+- ES6 import: `import '@pnx-mixtape/mxds/src/Component/InPageAlert/Elements/InPageAlert';`

package/src/Component/InPageAlert/in-page-alert.css

@@ -2,13 +2,13 @@
  * Messages
  */
 
-@layer defaults {
+@layer design-system.defaults {
   mx-closable-alert {
     display: block;
   }
 }
 
-@layer elements {
+@layer design-system.components {
   .message {
     display: grid;
     gap: var(--gap-s);

package/src/Component/InPageAlert/in-page-alert.entry.js

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

package/src/Component/InPageNavigation/README.md

@@ -4,27 +4,22 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/in-page-navigation.css';`
+`@import '@pnx-mixtape/mxds/src/Component/InPageNavigation/in-page-navigation.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/InPageNavigation/in-page-navigation.twig' %}`
+
+Alternatively copy/paste the file for more control.
 
 **Web Components**
 
 Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.
 
-- InPageNavigationBase import: `import '@pnx-mixtape/mxds/Components/InPageNavigation/Element';` and be sure to include `<mx-in-page-navigation>` around the `<nav />` tag.
+- InPageNavigationBase import: `import '@pnx-mixtape/mxds/src/Component/InPageNavigation/Element/InPageNavigation';` and be sure to include `<mx-in-page-navigation>` around the `<nav />` tag.
 - Use the `[data-content]` attribute to specify where to look for headings (required).
 - Use the `[data-headings]` attribute to customise the heading levels. Default is h2.
 
-```html
-<mx-in-page-navigation data-content=".page__sections" data-headings="h2, h3">
-  <nav class="in-page-navigation nav nav--jump">
-    <h4>Jump to Section</h4>
-    <ul></ul>
-  </nav>
-</mx-in-page-navigation>
-
-<div class="page__sections">
-  <h2 id="section">Section title</h2>
-</div>
-```
-
 See twig files for all HTML examples.

package/src/Component/InPageNavigation/in-page-navigation.css

@@ -2,13 +2,13 @@
  * InPageNavigation
  */
 
-@layer defaults {
+@layer design-system.defaults {
   mx-in-page-navigation {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .in-page-navigation {
     & .in-page-navigation__level--h3 {
       padding-inline-start: var(--spacing-s);

package/src/Component/InPageNavigation/in-page-navigation.entry.js

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

package/src/Component/LinkList/README.md

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

package/src/Component/LinkList/link-list.css

@@ -2,7 +2,7 @@
  * Link List
  */
 
-@layer elements {
+@layer design-system.components {
   .link-list {
     list-style-type: none;
     padding-inline-start: 0;

package/src/Component/Navigation/README.md

@@ -4,14 +4,23 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/navigation.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Navigation/navigation.css';`
 
-**@TODO Vanilla JS**
+**Twig**
 
-- ES6 import: `import { Navigation, NavigationFlyout } from '@pnx-mixtape/mxds/mavigation';`
-- ES6 submodule import: `import NavigationFlyout from '@pnx-mixtape/mxds/mavigation/navigation-flyout';`
-- Script tag: `<script src="dist/navigation.js" type="text/javascript"></script>`
+You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-**HTML**
+- Eg: `{% extends '@mixtape/Component/Navigation/navigation.twig' %}`
 
-See various twig files.
+Alternatively copy/paste the file for more control.
+
+**JS Custom Element**
+
+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/Navigation/Elements/Navigation';` and be sure to include `<mx-navigation>` around the menu.
+
+See twig files for all HTML examples.

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

@@ -2,7 +2,7 @@
  * Collapsible Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav--collapsible {
     & .nav__toggle {
       inset-inline: auto var(--spacing-xxs);

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

@@ -2,7 +2,7 @@
  * Dropdown Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav--dropdown {
     --nav-active-underline: none;