@pnx-mixtape/mxds 0.0.12 → 0.0.13

package/dist/build/in-page-navigation.entry.js

@@ -15,13 +15,23 @@ class InPageNavigation extends HTMLElement {
   }
   connectedCallback() {
     if (!this.menu || !this.headings) return;
-    this.headings.forEach((heading) => {
-      const listItem = this.generateListItem(heading);
-      const link = this.generateAnchor(heading);
-      this.items.push({ link, heading });
-      listItem.appendChild(link);
-      this.menu?.appendChild(listItem);
-    });
+    if (!this.links.length) {
+      this.headings.forEach((heading) => {
+        const listItem = this.generateListItem(heading);
+        const link = this.generateAnchor(heading);
+        this.items.push({ link, heading });
+        listItem.appendChild(link);
+        this.menu?.appendChild(listItem);
+      });
+    } else {
+      this.links.forEach((link) => {
+        const heading = this.container.querySelector(
+          link.href
+        );
+        if (!heading) return;
+        this.items.push({ link, heading });
+      });
+    }
     const { signal } = this.controller;
     this.menu.addEventListener(
       "click",
@@ -73,7 +83,7 @@ class InPageNavigation extends HTMLElement {
     const targetID = id || this.generatedId(heading);
     if (!id) heading.id = targetID;
     const item = createElement(
-      `<a href="#${targetID}" class="mx-icon mx-icon--chevron-right">${linkText}</a>`
+      `<a href="#${targetID}"><span class="mx-icon mx-icon--chevron-right"></span><span>${linkText}</span></a>`
     );
     return item;
   }

package/dist/build/in-page-navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"in-page-navigation.entry.js","sources":["../../src/Component/InPageNavigation/Elements/InPageNavigation.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageNavigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  headingLevels: string\n  items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]\n  active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.headingLevels = this.dataset?.headings || \"h2\"\n    this.items = []\n  }\n\n  connectedCallback(): void {\n    if (!this.menu || !this.headings) return\n\n    this.headings.forEach((heading: HTMLHeadingElement) => {\n      const listItem: HTMLLIElement = this.generateListItem(heading)\n      const link: HTMLAnchorElement = this.generateAnchor(heading)\n      this.items.push({ link, heading })\n      listItem.appendChild(link)\n      this.menu?.appendChild(listItem)\n    })\n\n    const { signal }: AbortController = this.controller\n\n    // Open on toggle click.\n    this.menu.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        const { target } = e\n        if (!(target instanceof HTMLAnchorElement)) return\n        this.handleClick(target)\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    if (!this.menu || !this.headings) return\n    this.menu.textContent = \"\"\n    this.items = []\n    this.controller.abort()\n  }\n\n  handleClick = (target: EventTarget | null): void => {\n    this.active = this.items.find(item => item.link === target)\n    if (!this.links || !this.active) return\n    this.links.forEach(link => link.classList.remove(\"is-active\"))\n    this.active.link.classList.add(\"is-active\")\n  }\n\n  get menu(): HTMLUListElement | HTMLOListElement | null {\n    const menu: HTMLUListElement | HTMLOListElement | null =\n      this.querySelector(\"ul, ol\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)\n    }\n    return menu\n  }\n\n  get container(): HTMLElement | null {\n    const selector: string | null = this.getAttribute(\"data-content\")\n    if (!selector) {\n      throw new Error(\n        `${this.localName} must have a [data-content] attribute that contains the content selector.`,\n      )\n    }\n    return this.closest(selector) || this.parentElement.querySelector(selector)\n  }\n\n  get headings(): NodeListOf<HTMLHeadingElement> | undefined {\n    return this.container?.querySelectorAll(this.headingLevels)\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | undefined {\n    return this.menu?.querySelectorAll(\"a\")\n  }\n\n  generatedId(heading: HTMLHeadingElement): string {\n    const string: string | undefined = heading?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n\n  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {\n    const { textContent, id } = heading\n    const linkText: string | null =\n      heading.getAttribute(\"data-in-page-navigation-title\") || textContent\n    const targetID: string = id || this.generatedId(heading)\n    if (!id) heading.id = targetID\n    const item: Element = createElement(\n      `<a href=\"#${targetID}\" class=\"mx-icon mx-icon--chevron-right\">${linkText}</a>`,\n    )\n\n    return item as HTMLAnchorElement\n  }\n\n  generateListItem(heading: HTMLHeadingElement): HTMLLIElement {\n    const { tagName } = heading\n    const item: Element = createElement(\n      `<li class=\"mx-in-page-navigation__level--${tagName.toLowerCase()}\"></li>`,\n    )\n\n    return item as HTMLLIElement\n  }\n}\n\ncustomElements.define(\"mx-in-page-navigation\", InPageNavigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-in-page-navigation\": InPageNavigation\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,yBAAyB,YAAY;AAAA,EAOxD,cAAc;AACN;AAyCR,SAAA,cAAc,CAAC,WAAqC;AAClD,WAAK,SAAS,KAAK,MAAM,KAAK,CAAQ,SAAA,KAAK,SAAS,MAAM;AAC1D,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AACjC,WAAK,MAAM,QAAQ,CAAA,SAAQ,KAAK,UAAU,OAAO,WAAW,CAAC;AAC7D,WAAK,OAAO,KAAK,UAAU,IAAI,WAAW;AAAA,IAAA;AA5CrC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACjB,SAAA,gBAAgB,KAAK,SAAS,YAAY;AAC/C,SAAK,QAAQ;EACf;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAE7B,SAAA,SAAS,QAAQ,CAAC,YAAgC;AAC/C,YAAA,WAA0B,KAAK,iBAAiB,OAAO;AACvD,YAAA,OAA0B,KAAK,eAAe,OAAO;AAC3D,WAAK,MAAM,KAAK,EAAE,MAAM,QAAS,CAAA;AACjC,eAAS,YAAY,IAAI;AACpB,WAAA,MAAM,YAAY,QAAQ;AAAA,IAAA,CAChC;AAEK,UAAA,EAAE,OAAO,IAAqB,KAAK;AAGzC,SAAK,KAAK;AAAA,MACR;AAAA,MACA,CAAC,MAAwB;AACjB,cAAA,EAAE,OAAW,IAAA;AACf,YAAA,EAAE,kBAAkB,mBAAoB;AAC5C,aAAK,YAAY,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAClC,SAAK,KAAK,cAAc;AACxB,SAAK,QAAQ;AACb,SAAK,WAAW;EAClB;AAAA,EASA,IAAI,OAAmD;AAC/C,UAAA,OACJ,KAAK,cAAc,QAAQ;AAC7B,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,uCAAuC;AAAA,IAC1E;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,YAAgC;AAC5B,UAAA,WAA0B,KAAK,aAAa,cAAc;AAChE,QAAI,CAAC,UAAU;AACb,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO,KAAK,QAAQ,QAAQ,KAAK,KAAK,cAAc,cAAc,QAAQ;AAAA,EAC5E;AAAA,EAEA,IAAI,WAAuD;AACzD,WAAO,KAAK,WAAW,iBAAiB,KAAK,aAAa;AAAA,EAC5D;AAAA,EAEA,IAAI,QAAmD;AAC9C,WAAA,KAAK,MAAM,iBAAiB,GAAG;AAAA,EACxC;AAAA,EAEA,YAAY,SAAqC;AACzC,UAAA,SAA6B,SAAS,aAAa,KAAK;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AAAA,EAEA,eAAe,SAAgD;AACvD,UAAA,EAAE,aAAa,GAAO,IAAA;AAC5B,UAAM,WACJ,QAAQ,aAAa,+BAA+B,KAAK;AAC3D,UAAM,WAAmB,MAAM,KAAK,YAAY,OAAO;AACnD,QAAA,CAAC,GAAI,SAAQ,KAAK;AACtB,UAAM,OAAgB;AAAA,MACpB,aAAa,QAAQ,4CAA4C,QAAQ;AAAA,IAAA;AAGpE,WAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,SAA4C;AACrD,UAAA,EAAE,QAAY,IAAA;AACpB,UAAM,OAAgB;AAAA,MACpB,4CAA4C,QAAQ,YAAA,CAAa;AAAA,IAAA;AAG5D,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,yBAAyB,gBAAgB;"}
+{"version":3,"file":"in-page-navigation.entry.js","sources":["../../src/Component/InPageNavigation/Elements/InPageNavigation.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageNavigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  headingLevels: string\n  items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]\n  active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.headingLevels = this.dataset?.headings || \"h2\"\n    this.items = []\n  }\n\n  connectedCallback(): void {\n    if (!this.menu || !this.headings) return\n    if (!this.links.length) {\n      // Build links if not provided.\n      this.headings.forEach((heading: HTMLHeadingElement) => {\n        const listItem: HTMLLIElement = this.generateListItem(heading)\n        const link: HTMLAnchorElement = this.generateAnchor(heading)\n        this.items.push({ link, heading })\n        listItem.appendChild(link)\n        this.menu?.appendChild(listItem)\n      })\n    } else {\n      this.links.forEach((link: HTMLAnchorElement) => {\n        const heading: HTMLHeadingElement = this.container.querySelector(\n          link.href,\n        )\n        if (!heading) return\n        this.items.push({ link, heading })\n      })\n    }\n\n    const { signal }: AbortController = this.controller\n\n    // Open on toggle click.\n    this.menu.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        const { target } = e\n        if (!(target instanceof HTMLAnchorElement)) return\n        this.handleClick(target)\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    if (!this.menu || !this.headings) return\n    this.menu.textContent = \"\"\n    this.items = []\n    this.controller.abort()\n  }\n\n  handleClick = (target: EventTarget | null): void => {\n    this.active = this.items.find(item => item.link === target)\n    if (!this.links || !this.active) return\n    this.links.forEach(link => link.classList.remove(\"is-active\"))\n    this.active.link.classList.add(\"is-active\")\n  }\n\n  get menu(): HTMLUListElement | HTMLOListElement | null {\n    const menu: HTMLUListElement | HTMLOListElement | null =\n      this.querySelector(\"ul, ol\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)\n    }\n    return menu\n  }\n\n  get container(): HTMLElement | null {\n    const selector: string | null = this.getAttribute(\"data-content\")\n    if (!selector) {\n      throw new Error(\n        `${this.localName} must have a [data-content] attribute that contains the content selector.`,\n      )\n    }\n    return this.closest(selector) || this.parentElement.querySelector(selector)\n  }\n\n  get headings(): NodeListOf<HTMLHeadingElement> | undefined {\n    return this.container?.querySelectorAll(this.headingLevels)\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | undefined {\n    return this.menu?.querySelectorAll(\"a\")\n  }\n\n  generatedId(heading: HTMLHeadingElement): string {\n    const string: string | undefined = heading?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n\n  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {\n    const { textContent, id } = heading\n    const linkText: string | null =\n      heading.getAttribute(\"data-in-page-navigation-title\") || textContent\n    const targetID: string = id || this.generatedId(heading)\n    if (!id) heading.id = targetID\n    const item: Element = createElement(\n      `<a href=\"#${targetID}\"><span class=\"mx-icon mx-icon--chevron-right\"></span><span>${linkText}</span></a>`,\n    )\n\n    return item as HTMLAnchorElement\n  }\n\n  generateListItem(heading: HTMLHeadingElement): HTMLLIElement {\n    const { tagName } = heading\n    const item: Element = createElement(\n      `<li class=\"mx-in-page-navigation__level--${tagName.toLowerCase()}\"></li>`,\n    )\n\n    return item as HTMLLIElement\n  }\n}\n\ncustomElements.define(\"mx-in-page-navigation\", InPageNavigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-in-page-navigation\": InPageNavigation\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/sidebar.css

@@ -6,62 +6,28 @@
     .mx-grid--sidebar:where(:not(:has(> aside))) {
       grid-column: narrow;
     }
-      @media (min-width: 720px) {
 
     .mx-grid--sidebar:where(:has(> aside)) {
-        display: grid;
-        grid-template-columns: 76ch auto;
-        grid-template-columns: var(--container-max-width, 76ch) auto;
-        grid-gap: var(--sidebar-gap, var(--gap));
-        gap: var(--sidebar-gap, var(--gap));
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sidebar-gap, var(--gap));
+      justify-content: space-between;
     }
-      }
-
-        @media (min-width: 720px) {
-
-        @media (min-width: 946px) {
-
-        @media (max-color:2147477350) and (max-color:2147477350) {
-
-    .mx-grid--sidebar:where(:has(> aside)) {
-          --sidebar-gap: 18ch;
-    }
-        }
-        }
-
-        @media not all and (min-width: 946px) {
-
-        @media (max-color:2147477350) and (color:2147477350) {
-
-    .mx-grid--sidebar:where(:has(> aside)) {
-          --sidebar-gap: 18ch;
-    }
-        }
-        }
-        }
-
-        @media not all and (min-width: 720px) {
-
-        @media (min-width: 946px) {
 
-        @media (color:2147477350) and (max-color:2147477350) {
-
-    .mx-grid--sidebar:where(:has(> aside)) {
-          --sidebar-gap: 18ch;
-    }
-        }
-        }
-
-        @media not all and (min-width: 946px) {
-
-        @media (color:2147477350) and (color:2147477350) {
+      .mx-grid--sidebar:where(:has(> aside)) > aside {
+        flex-grow: 1;
+        max-inline-size: 24ch;
+        max-inline-size: var(--sidebar-width, 24ch);
+      }
 
-    .mx-grid--sidebar:where(:has(> aside)) {
-          --sidebar-gap: 18ch;
-    }
-        }
-        }
-        }
+      .mx-grid--sidebar:where(:has(> aside)) > section {
+        flex-basis: 0;
+        flex-grow: 999;
+        min-inline-size: 50%;
+        min-inline-size: var(--content-min, 50%);
+        max-inline-size: 76ch;
+        max-inline-size: var(--container-max-width, 76ch);
+      }
           .mx-grid--sidebar.mx-grid--sidebar-rev:where(:has(> aside)) > :is(section, aside):first-child {
             order: 2;
           }
@@ -78,18 +44,6 @@
               order: 1;
             }
         }
-        @media (min-width: 946px) {
-
-      .mx-grid--sidebar:where(:has(> aside)):is(.mx-grid--sidebar-rev, .mx-grid--sidebar-rev-lg) {
-          grid-template-columns: auto 76ch;
-          grid-template-columns: auto var(--container-max-width, 76ch);
-      }
-        }
-
-    .mx-grid--sidebar:where(:has(> aside:first-child)) {
-      grid-template-columns: auto 76ch;
-      grid-template-columns: auto var(--container-max-width, 76ch);
-    }
 }
 
 /**
@@ -102,4 +56,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpZGViYXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxtQkFBbUI7SUFDckI7TUFHRTs7SUFERjtRQUVJLGFBQWE7UUFDYixnQ0FBNEQ7UUFBNUQsNERBQTREO1FBQzVELHdDQUFtQztRQUFuQyxtQ0FBbUM7SUFzQ3ZDO01BakNFOztRQUhFOztRQUFBOztRQUFBOztJQU5KO1VBT00sbUJBQW1CO0lBbUN6QjtRQWxDSTtRQUFBOztRQUZBOztRQUFBOztJQU5KO1VBT00sbUJBQW1CO0lBbUN6QjtRQWxDSTtRQUFBO1FBQUE7O1FBRkE7O1FBQUE7O1FBQUE7O0lBTko7VUFPTSxtQkFBbUI7SUFtQ3pCO1FBbENJO1FBQUE7O1FBRkE7O1FBQUE7O0lBTko7VUFPTSxtQkFBbUI7SUFtQ3pCO1FBbENJO1FBQUE7UUFBQTtVQUtFO1lBQ0UsUUFBUTtVQUNWOztVQUVBO1lBQ0UsUUFBUTtVQUNWO1FBS0Y7WUFFSTtjQUNFLFFBQVE7WUFDVjs7WUFFQTtjQUNFLFFBQVE7WUFDVjtRQUVKO1FBSUE7O01BREY7VUFFSSxnQ0FBNEQ7VUFBNUQsNERBQTREO01BRWhFO1FBREU7O0lBSUo7TUFDRSxnQ0FBNEQ7TUFBNUQsNERBQTREO0lBQzlEO0FBRUo7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6InNpZGViYXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBQYWdlIHdpdGggU2lkZWJhclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtZ3JpZC0tc2lkZWJhciB7XG4gICAgJjp3aGVyZSg6bm90KDpoYXMoPiBhc2lkZSkpKSB7XG4gICAgICBncmlkLWNvbHVtbjogbmFycm93O1xuICAgIH1cblxuICAgICY6d2hlcmUoOmhhcyg+IGFzaWRlKSkge1xuICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgsIDc2Y2gpIGF1dG87XG4gICAgICAgIGdhcDogdmFyKC0tc2lkZWJhci1nYXAsIHZhcigtLWdhcCkpO1xuXG4gICAgICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgICAgIC0tc2lkZWJhci1nYXA6IDE4Y2g7XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJi5teC1ncmlkLS1zaWRlYmFyLXJldiB7XG4gICAgICAgICYgPiA6aXMoc2VjdGlvbiwgYXNpZGUpIHtcbiAgICAgICAgICAmOmZpcnN0LWNoaWxkIHtcbiAgICAgICAgICAgIG9yZGVyOiAyO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6bGFzdC1jaGlsZCB7XG4gICAgICAgICAgICBvcmRlcjogMTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJi5teC1ncmlkLS1zaWRlYmFyLXJldi1sZyB7XG4gICAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgICAmID4gOmlzKHNlY3Rpb24sIGFzaWRlKSB7XG4gICAgICAgICAgICAmOmZpcnN0LWNoaWxkIHtcbiAgICAgICAgICAgICAgb3JkZXI6IDI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6bGFzdC1jaGlsZCB7XG4gICAgICAgICAgICAgIG9yZGVyOiAxO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmOmlzKC5teC1ncmlkLS1zaWRlYmFyLXJldiwgLm14LWdyaWQtLXNpZGViYXItcmV2LWxnKSB7XG4gICAgICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoLCA3NmNoKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICY6d2hlcmUoOmhhcyg+IGFzaWRlOmZpcnN0LWNoaWxkKSkge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvIHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgsIDc2Y2gpO1xuICAgIH1cbiAgfVxufVxuXG4vKipcbiAqIFByaW50IHN0eWxlc2hlZXRcbiAqL1xuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtcGFnZV9fc2lkZWJhciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpZGViYXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxtQkFBbUI7SUFDckI7O0lBRUE7TUFDRSxhQUFhO01BQ2IsZUFBZTtNQUNmLG1DQUFtQztNQUNuQyw4QkFBOEI7SUF1Q2hDOztNQXJDRTtRQUNFLFlBQVk7UUFDWixxQkFBMkM7UUFBM0MsMkNBQTJDO01BQzdDOztNQUVBO1FBQ0UsYUFBYTtRQUNiLGNBQWM7UUFDZCxvQkFBd0M7UUFBeEMsd0NBQXdDO1FBQ3hDLHFCQUFpRDtRQUFqRCxpREFBaUQ7TUFDbkQ7VUFJSTtZQUNFLFFBQVE7VUFDVjs7VUFFQTtZQUNFLFFBQVE7VUFDVjtRQUtGO1lBRUk7Y0FDRSxRQUFRO1lBQ1Y7O1lBRUE7Y0FDRSxRQUFRO1lBQ1Y7UUFFSjtBQUlSOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0VBQ2Y7QUFDRiIsImZpbGUiOiJzaWRlYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogUGFnZSB3aXRoIFNpZGViYXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWdyaWQtLXNpZGViYXIge1xuICAgICY6d2hlcmUoOm5vdCg6aGFzKD4gYXNpZGUpKSkge1xuICAgICAgZ3JpZC1jb2x1bW46IG5hcnJvdztcbiAgICB9XG5cbiAgICAmOndoZXJlKDpoYXMoPiBhc2lkZSkpIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LXdyYXA6IHdyYXA7XG4gICAgICBnYXA6IHZhcigtLXNpZGViYXItZ2FwLCB2YXIoLS1nYXApKTtcbiAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcblxuICAgICAgJiA+IGFzaWRlIHtcbiAgICAgICAgZmxleC1ncm93OiAxO1xuICAgICAgICBtYXgtaW5saW5lLXNpemU6IHZhcigtLXNpZGViYXItd2lkdGgsIDI0Y2gpO1xuICAgICAgfVxuXG4gICAgICAmID4gc2VjdGlvbiB7XG4gICAgICAgIGZsZXgtYmFzaXM6IDA7XG4gICAgICAgIGZsZXgtZ3JvdzogOTk5O1xuICAgICAgICBtaW4taW5saW5lLXNpemU6IHZhcigtLWNvbnRlbnQtbWluLCA1MCUpO1xuICAgICAgICBtYXgtaW5saW5lLXNpemU6IHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgsIDc2Y2gpO1xuICAgICAgfVxuXG4gICAgICAmLm14LWdyaWQtLXNpZGViYXItcmV2IHtcbiAgICAgICAgJiA+IDppcyhzZWN0aW9uLCBhc2lkZSkge1xuICAgICAgICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICAgICAgb3JkZXI6IDI7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJjpsYXN0LWNoaWxkIHtcbiAgICAgICAgICAgIG9yZGVyOiAxO1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmLm14LWdyaWQtLXNpZGViYXItcmV2LWxnIHtcbiAgICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICAgICYgPiA6aXMoc2VjdGlvbiwgYXNpZGUpIHtcbiAgICAgICAgICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICAgICAgICBvcmRlcjogMjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjpsYXN0LWNoaWxkIHtcbiAgICAgICAgICAgICAgb3JkZXI6IDE7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1wYWdlX19zaWRlYmFyIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "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\"",

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -22,14 +22,24 @@ export default class InPageNavigation extends HTMLElement {
 
   connectedCallback(): void {
     if (!this.menu || !this.headings) return
-
-    this.headings.forEach((heading: HTMLHeadingElement) => {
-      const listItem: HTMLLIElement = this.generateListItem(heading)
-      const link: HTMLAnchorElement = this.generateAnchor(heading)
-      this.items.push({ link, heading })
-      listItem.appendChild(link)
-      this.menu?.appendChild(listItem)
-    })
+    if (!this.links.length) {
+      // Build links if not provided.
+      this.headings.forEach((heading: HTMLHeadingElement) => {
+        const listItem: HTMLLIElement = this.generateListItem(heading)
+        const link: HTMLAnchorElement = this.generateAnchor(heading)
+        this.items.push({ link, heading })
+        listItem.appendChild(link)
+        this.menu?.appendChild(listItem)
+      })
+    } else {
+      this.links.forEach((link: HTMLAnchorElement) => {
+        const heading: HTMLHeadingElement = this.container.querySelector(
+          link.href,
+        )
+        if (!heading) return
+        this.items.push({ link, heading })
+      })
+    }
 
     const { signal }: AbortController = this.controller
 
@@ -100,7 +110,7 @@ export default class InPageNavigation extends HTMLElement {
     const targetID: string = id || this.generatedId(heading)
     if (!id) heading.id = targetID
     const item: Element = createElement(
-      `<a href="#${targetID}" class="mx-icon mx-icon--chevron-right">${linkText}</a>`,
+      `<a href="#${targetID}"><span class="mx-icon mx-icon--chevron-right"></span><span>${linkText}</span></a>`,
     )
 
     return item as HTMLAnchorElement

package/src/Component/InPageNavigation/InPageNavigation.stories.ts

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./twig/in-page-navigation-story.twig"
-import Heading from "../../Atom/Heading/heading.twig"
 import "./in-page-navigation.css"
 import "./Elements/InPageNavigation"
 import {
@@ -8,6 +7,12 @@ import {
   InPageNavigation as InPageNavigationType,
 } from "@pnx-mixtape/ids-shape"
 
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import { Icons } from "../../enums"
+
 const meta: Meta<InPageNavigationType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -17,6 +22,29 @@ const meta: Meta<InPageNavigationType> = {
       as: HeadingTypes.TWO,
       modifiers: [HeadingTypes.FOUR],
     }),
+    items: [
+      Link({
+        href: "#section-1",
+        title: "Section 1",
+        iconStart: Icon({
+          icon: Icons.CHEVRON_RIGHT,
+        }),
+      }),
+      Link({
+        href: "#section-2",
+        title: "Section 2",
+        iconStart: Icon({
+          icon: Icons.CHEVRON_RIGHT,
+        }),
+      }),
+      Link({
+        href: "#section-3",
+        title: "Section 3",
+        iconStart: Icon({
+          icon: Icons.CHEVRON_RIGHT,
+        }),
+      }),
+    ],
   },
   parameters: {
     deepControls: { enabled: true },

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap

@@ -9,46 +9,31 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
       On this page
     </h2>
     <ul>
-      <li class="mx-in-page-navigation__level--h2">
-        <a href="#section-1"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Section 1
+      <li>
+        <a href="#section-1">
+          <span class="mx-icon mx-icon--chevron-right ">
+          </span>
+          <span>
+            Section 1
+          </span>
         </a>
       </li>
-      <li class="mx-in-page-navigation__level--h2">
-        <a href="#anchor-test"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Section 2
+      <li>
+        <a href="#section-2">
+          <span class="mx-icon mx-icon--chevron-right ">
+          </span>
+          <span>
+            Section 2
+          </span>
         </a>
       </li>
-      <li class="mx-in-page-navigation__level--h2">
-        <a href="#section-3"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Section 3
-        </a>
-      </li>
-      <li class="mx-in-page-navigation__level--h2">
-        <a href="#section-4"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Section 4
-        </a>
-      </li>
-      <li class="mx-in-page-navigation__level--h2">
-        <a href="#section-5"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Section 5
-        </a>
-      </li>
-      <li class="mx-in-page-navigation__level--h2">
-        <a href="#section-7"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Section 7
+      <li>
+        <a href="#section-3">
+          <span class="mx-icon mx-icon--chevron-right ">
+          </span>
+          <span>
+            Section 3
+          </span>
         </a>
       </li>
     </ul>
@@ -61,13 +46,13 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
   <p>
     In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
   </p>
-  <h2 id="anchor-test">
+  <h2 id="section-2">
     Section 2
   </h2>
   <p>
     In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
   </p>
-  <h3>
+  <h3 id="test-level-3">
     Test level 3
   </h3>
   <p>
@@ -79,29 +64,5 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
   <p>
     In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
   </p>
-  <h2 id="section-4">
-    Section 4
-  </h2>
-  <p>
-    In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-  </p>
-  <h2 id="section-5">
-    Section 5
-  </h2>
-  <p>
-    In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-  </p>
-  <h3>
-    Test level 6
-  </h3>
-  <p>
-    In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-  </p>
-  <h2 id="section-7">
-    Section 7
-  </h2>
-  <p>
-    In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-  </p>
 </div>
 `;

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

@@ -8,6 +8,10 @@
 <mx-in-page-navigation data-content=".js-content" data-headings="{{ levels|join(",") }}">
   <nav{{ attributes }}>
     {{ title }}
-    <ul></ul>
+    <ul>
+      {% for item in items %}
+        <li>{{ item }}</li>
+      {% endfor %}
+    </ul>
   </nav>
 </mx-in-page-navigation>

package/src/Component/InPageNavigation/twig/content-example.twig

@@ -1,18 +1,10 @@
 <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-<h2>Section 1</h2>
+<h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h2 id="anchor-test">Section 2</h2>
+<h2 id="section-2">Section 2</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h3>Test level 3</h3>
+<h3 id="test-level-3">Test level 3</h3>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h2>Section 3</h2>
-<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h2>Section 4</h2>
-<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h2>Section 5</h2>
-<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h3>Test level 6</h3>
-<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-<h2>Section 7</h2>
+<h2 id="section-3">Section 3</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>

package/src/Component/SideNavigation/SideNavigation.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<NavigationType> = {
   component: Component,
   args: {
     id: "sidenav-story",
-    title: "Primary mega nav",
+    title: "Sidebar nav",
     parent: Link({
       title: "About",
       href: "#",

package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap

@@ -2,10 +2,11 @@
 
 exports[`Component/SideNavigation SideNavigation smoke-test 1`] = `
 <nav class="mx-nav mx-side-nav"
-     aria-labelledby="unique-0"
+     aria-label="Sidebar nav"
+     "
 >
   <div class="mx-side-nav__parent"
-       id="unique-0"
+       id="sidenav-story"
   >
     <a href="#">
       <span>

package/src/Component/SideNavigation/side-navigation.twig

@@ -27,7 +27,7 @@
   </ul>
 {% endmacro %}
 
-<nav{{ attributes }} aria-labelledby="{{ id }}">
+<nav{{ attributes }}{% if title is not empty %} aria-label="{{ title }}"{% else %} aria-labelledby="{{ id }}{% endif %}">
   <div class="mx-side-nav__parent" id="{{ id }}">
     {{ parent }}
   </div>

package/src/Form/Search/Search.stories.ts

@@ -1,21 +1,10 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./search-form.twig"
-import InputText from "../TextInput/input-text.twig"
-import Button from "../../Atom/Button/button.twig"
-import Icon from "../../Atom/Icon/icon.twig"
 import "../form.css"
-import {
-  Button as ButtonType,
-  ButtonTypes,
-  FormInput as FormInputType,
-  InputTypeTypes,
-} from "@pnx-mixtape/ids-shape"
-import { Icons } from "../../enums"
 
 export type SearchFormType = {
   action: string
-  input: FormInputType
-  button: ButtonType
+  id: string
 }
 
 const meta: Meta<SearchFormType> = {
@@ -23,21 +12,7 @@ const meta: Meta<SearchFormType> = {
   component: Component,
   args: {
     action: "#search",
-    input: InputText({
-      id: "search-keyword",
-      type: InputTypeTypes.SEARCH,
-      name: "search-form",
-      placeholder: "Keywords...",
-      label: "Search by keywords",
-    }),
-    button: Button({
-      title: "Search",
-      iconOnly: true,
-      iconStart: Icon({
-        icon: Icons.SEARCH,
-      }),
-      as: ButtonTypes.SUBMIT,
-    }),
+    id: "search-keyword",
   },
   parameters: {
     deepControls: { enabled: true },

package/src/Form/Search/__snapshots__/Search.stories.ts.snap

@@ -16,7 +16,7 @@ exports[`Form/Search Search smoke-test 1`] = `
   <button class="mx-button mx-button--icon-only"
           type="submit"
   >
-    <span class="mx-icon mx-icon--search ">
+    <span class="mx-icon mx-icon--search">
     </span>
     <span class="sr-only">
       Search

package/src/Form/Search/search-form.twig

@@ -6,6 +6,9 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <form{{ attributes }} role="search" action="{{ action }}">
-  {{ input }}
-  {{ button }}
+  <input class="mx-input__text " id="{{ id }}" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords..." />
+  <button class="mx-button mx-button--icon-only" type="submit">
+    <span class="mx-icon mx-icon--search"></span>
+    <span class="sr-only">Search</span>
+  </button>
 </form>

package/src/Layout/Header/Header.stories.ts

@@ -12,6 +12,7 @@ import Icon from "../../Atom/Icon/icon.twig"
 import Logo from "../Header/twig/logo.twig"
 import Button from "../../Atom/Button/button.twig"
 import Navigation from "../../Component/Navigation/navigation.twig"
+import SearchForm from "../../Form/Search/search-form.twig"
 // js.
 import "../../Component/Navigation/Elements/Navigation"
 // css.
@@ -91,7 +92,10 @@ export const WithTitle: Story = {
 
 export const Search: Story = {
   args: {
-    search: "#search",
+    search: SearchForm({
+      action: "#search",
+      id: "search-keyword",
+    }),
   },
 }
 
@@ -112,7 +116,10 @@ export const Controls: Story = {
 export const Stacked: Story = {
   args: {
     stacked: true,
-    search: "#search",
+    search: SearchForm({
+      action: "#search",
+      id: "search-keyword",
+    }),
     controls: [
       Button({
         as: ButtonTypes.BUTTON,

package/src/Layout/Header/header.twig

@@ -37,13 +37,7 @@
       {% endif %}
       {% if search is not empty %}
         <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
-          <form class="mx-form mx-form--inline-button" role="search" action="{{ search }}">
-            <input class="mx-input__text " id="search-keyword" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords..." />
-            <button class="mx-button mx-button--icon-only" type="submit">
-              <span class="mx-icon mx-icon--search"></span>
-              <span class="sr-only">Search</span>
-            </button>
-          </form>
+          {{ search }}
         </div>
       {% endif %}
       {% if not stacked %}

package/src/Layout/Sidebar/Sidebar.stories.ts

@@ -6,11 +6,9 @@ import { Page } from "../../../.storybook/decorators"
 
 type SidebarArgs = {
   content?: string | HTMLElement
-  contentClass?: string
   order?: SidebarOrder
   before?: boolean
   sidebarContent?: string | HTMLElement
-  sidebarClass?: string
 }
 
 const meta: Meta<SidebarArgs> = {

package/src/Layout/Sidebar/sidebar.css

@@ -9,14 +9,21 @@
     }
 
     &:where(:has(> aside)) {
-      @media (--medium-up) {
-        display: grid;
-        grid-template-columns: var(--container-max-width, 76ch) auto;
-        gap: var(--sidebar-gap, var(--gap));
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sidebar-gap, var(--gap));
+      justify-content: space-between;
 
-        @media (--large-up) {
-          --sidebar-gap: 18ch;
-        }
+      & > aside {
+        flex-grow: 1;
+        max-inline-size: var(--sidebar-width, 24ch);
+      }
+
+      & > section {
+        flex-basis: 0;
+        flex-grow: 999;
+        min-inline-size: var(--content-min, 50%);
+        max-inline-size: var(--container-max-width, 76ch);
       }
 
       &.mx-grid--sidebar-rev {
@@ -44,16 +51,6 @@
           }
         }
       }
-
-      &:is(.mx-grid--sidebar-rev, .mx-grid--sidebar-rev-lg) {
-        @media (--large-up) {
-          grid-template-columns: auto var(--container-max-width, 76ch);
-        }
-      }
-    }
-
-    &:where(:has(> aside:first-child)) {
-      grid-template-columns: auto var(--container-max-width, 76ch);
     }
   }
 }

package/src/Layout/Sidebar/sidebar.twig

@@ -4,10 +4,12 @@
   order ? "mx-grid--"~order : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set sidebarAttributes = (sidebarAttributes ?? create_attribute()) %}
+{% set contentAttributes = (contentAttributes ?? create_attribute()) %}
 
 {% if sidebarContent is not empty %}
   {% set sidebar %}
-    <aside{% if sidebarClass is not empty %} class="{{ sidebarClass }}"{% endif %}>
+    <aside{{ sidebarAttributes }}>
       {{ sidebarContent }}
     </aside>
   {% endset %}
@@ -17,7 +19,7 @@
   {% if sidebar is not empty and before %}
     {{ sidebar }}
   {% endif %}
-  <section{% if contentClass is not empty %} class="{{ contentClass }}"{% endif %}>
+  <section{{ contentAttributes }}>
     {{ content }}
   </section>
   {% if sidebar is not empty and not before %}