@pnx-mixtape/mxds 0.0.17 → 0.0.19

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    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.hash,\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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"}
+{"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.hash,\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/navigation.entry.js

@@ -1,6 +1,6 @@
-import { m as makeAnchor } from "./chunks/utilities-DXELy_An.js";
-import { K as Keyboard } from "./chunks/keyboard-C73DHu0c.js";
-import { D as DisclosureWidget } from "./chunks/disclosure-widget-CtNx0f8p.js";
+import { m as makeAnchor } from "./chunks/utilities-BeWkujCZ.js";
+import { K as Keyboard } from "./chunks/keyboard-rvZ4dfGF.js";
+import { D as DisclosureWidget } from "./chunks/disclosure-widget-WwE5XplD.js";
 class Navigation extends HTMLElement {
   constructor() {
     super();

package/dist/build/navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.entry.js","sources":["../../src/Component/Navigation/Elements/Navigation.ts"],"sourcesContent":["/**\n * Main Navigation\n * @file Drop down navigation handler.\n */\n\nimport {\n  Keyboard,\n  makeAnchor,\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\ntype SubNavType = {\n  list: HTMLElement\n  trigger: HTMLButtonElement\n  link: HTMLAnchorElement\n  item?: HTMLLIElement\n  widget?: DisclosureWidget\n  linkWidget?: DisclosureWidget\n}\n\nexport default class Navigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard\n  subNavs?: Map<string, SubNavType>\n  flyout?: boolean\n  edgeCheck!: boolean\n  mq!: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.flyout = this.hasAttribute(\"flyout\")\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Add keyboard navigation events.\n    this.keyboard = new Keyboard()\n    this.keyboard.attachEventListeners(signal)\n\n    // Add keyboard focus handler for menu links.\n    this.addEventListener(\"focusin\", () => {\n      this.keyboard.attachMenu(this, this.links)\n    })\n    this.addEventListener(\"focusout\", () => {\n      this.keyboard.detachMenu()\n    })\n\n    if (!this.lists.length) return\n    this.subNavs = new Map()\n    this.lists.forEach((list: HTMLUListElement, index: number): void => {\n      const item: HTMLLIElement = list.closest(\"li\")\n      const link: HTMLAnchorElement = item.querySelector(\":scope > a\")\n      const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)\n      const trigger: HTMLButtonElement = item.querySelector(\n        \":scope > button.mx-nav__toggle\",\n      )\n      if (item && link && trigger) {\n        const labelId = `list-label-${id}`\n        link.setAttribute(\"id\", labelId)\n        list.setAttribute(\"id\", id)\n        list.setAttribute(\"aria-labelledby\", labelId)\n        const widget = new DisclosureWidget(trigger, list)\n        widget.init()\n        this.subNavs.set(id, { item, trigger, list, link, widget })\n      }\n    })\n\n    this.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n\n    if (!this.flyout) return\n    this.edgeCheck = this.hasAttribute(\"edgeCheck\")\n    this.mq = this.getAttribute(\"mq\") || \"(min-width: 720px)\"\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen, id } = detail\n    const { item } = this.subNavs.get(id)\n    item.classList.toggle(\"mx-nav--open\")\n    if (isOpen) {\n      this.keyboard.attachPopup(id, this.handleCloseAny)\n    } else {\n      this.keyboard.detachPopup(id)\n    }\n  }\n\n  handleCloseAny = (): void => {\n    this.subNavs.forEach(({ widget }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n    })\n  }\n\n  handleFlyout = (event: MouseEvent): void => {\n    const target = event.target as HTMLElement\n    const parent: HTMLLIElement = target.closest(\"li\")\n    if (!parent) return\n    const subnav: HTMLUListElement = parent.querySelector(\":scope > ul\")\n    if (!subnav) return\n    this.subNavs.forEach(({ widget, list }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n      if (list.id === subnav.id) widget.handleToggle()\n    })\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    if (matches) {\n      this.addEventListener(\"mouseover\", this.handleFlyout, { signal })\n      this.addEventListener(\"mouseleave\", this.handleCloseAny, { signal })\n      if (this.edgeCheck) this.handleEdgeCheck()\n    } else {\n      this.removeEventListener(\"mouseover\", this.handleFlyout)\n      this.removeEventListener(\"mouseleave\", this.handleCloseAny)\n    }\n  }\n\n  handleEdgeCheck() {\n    const windowInnerWidth: number = window.innerWidth\n    const edgeCheck: IntersectionObserver = new IntersectionObserver(\n      ([{ boundingClientRect, target }], obs) => {\n        if (windowInnerWidth < boundingClientRect.right)\n          target.classList.add(\"mx-nav--reverse\")\n        obs.disconnect()\n      },\n    )\n    this.subNavs.forEach(({ list }: SubNavType): void => {\n      edgeCheck.observe(list)\n      const nestedLists: NodeListOf<HTMLUListElement> =\n        list.querySelectorAll(\"ul\")\n      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))\n    })\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | null {\n    const links: NodeListOf<HTMLAnchorElement> | null =\n      this.querySelectorAll(\"a\")\n    if (!links.length) {\n      throw new Error(`${this.localName} must links`)\n    }\n    return links\n  }\n\n  get lists(): NodeListOf<HTMLUListElement> | null {\n    return this.querySelectorAll(\"li > ul\")\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-nav\", Navigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-nav\": Navigation\n  }\n}\n"],"names":[],"mappings":";;;AAqBA,MAAqB,mBAAmB,YAAY;AAAA,EASlD,cAAc;AACN;AAyDW,SAAA,mBAAA,CAAC,EAAE,aAAuD;AACrE,YAAA,EAAE,QAAQ,GAAO,IAAA;AACvB,YAAM,EAAE,KAAK,IAAI,KAAK,QAAQ,IAAI,EAAE;AAC/B,WAAA,UAAU,OAAO,cAAc;AACpC,UAAI,QAAQ;AACV,aAAK,SAAS,YAAY,IAAI,KAAK,cAAc;AAAA,MAAA,OAC5C;AACA,aAAA,SAAS,YAAY,EAAE;AAAA,MAC9B;AAAA,IAAA;AAGF,SAAA,iBAAiB,MAAY;AAC3B,WAAK,QAAQ,QAAQ,CAAC,EAAE,aAA+B;AACrD,YAAI,CAAC,OAAQ;AACT,YAAA,OAAO,OAAQ,QAAO,aAAa;AAAA,MAAA,CACxC;AAAA,IAAA;AAGH,SAAA,eAAe,CAAC,UAA4B;AAC1C,YAAM,SAAS,MAAM;AACf,YAAA,SAAwB,OAAO,QAAQ,IAAI;AACjD,UAAI,CAAC,OAAQ;AACP,YAAA,SAA2B,OAAO,cAAc,aAAa;AACnE,UAAI,CAAC,OAAQ;AACb,WAAK,QAAQ,QAAQ,CAAC,EAAE,QAAQ,WAA6B;AAC3D,YAAI,CAAC,OAAQ;AACT,YAAA,OAAO,OAAQ,QAAO,aAAa;AACvC,YAAI,KAAK,OAAO,OAAO,WAAW;MAAa,CAChD;AAAA,IAAA;AAGH,SAAA,mBAAmB,CAAC;AAAA,MAClB;AAAA,IAAA,MACgD;AAC1C,YAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,UAAI,SAAS;AACX,aAAK,iBAAiB,aAAa,KAAK,cAAc,EAAE,QAAQ;AAChE,aAAK,iBAAiB,cAAc,KAAK,gBAAgB,EAAE,QAAQ;AAC/D,YAAA,KAAK,UAAW,MAAK,gBAAgB;AAAA,MAAA,OACpC;AACA,aAAA,oBAAoB,aAAa,KAAK,YAAY;AAClD,aAAA,oBAAoB,cAAc,KAAK,cAAc;AAAA,MAC5D;AAAA,IAAA;AAlGK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACjB,SAAA,SAAS,KAAK,aAAa,QAAQ;AAAA,EAC1C;AAAA,EAEA,oBAA0B;AAClB,UAAA,EAAE,OAAO,IAAqB,KAAK;AAGpC,SAAA,WAAW,IAAI;AACf,SAAA,SAAS,qBAAqB,MAAM;AAGpC,SAAA,iBAAiB,WAAW,MAAM;AACrC,WAAK,SAAS,WAAW,MAAM,KAAK,KAAK;AAAA,IAAA,CAC1C;AACI,SAAA,iBAAiB,YAAY,MAAM;AACtC,WAAK,SAAS;IAAW,CAC1B;AAEG,QAAA,CAAC,KAAK,MAAM,OAAQ;AACnB,SAAA,8BAAc;AACnB,SAAK,MAAM,QAAQ,CAAC,MAAwB,UAAwB;AAC5D,YAAA,OAAsB,KAAK,QAAQ,IAAI;AACvC,YAAA,OAA0B,KAAK,cAAc,YAAY;AACzD,YAAA,KAAa,WAAW,UAAU,KAAK,IAAI,KAAK,WAAW,IAAI,EAAE;AACvE,YAAM,UAA6B,KAAK;AAAA,QACtC;AAAA,MAAA;AAEE,UAAA,QAAQ,QAAQ,SAAS;AACrB,cAAA,UAAU,cAAc,EAAE;AAC3B,aAAA,aAAa,MAAM,OAAO;AAC1B,aAAA,aAAa,MAAM,EAAE;AACrB,aAAA,aAAa,mBAAmB,OAAO;AAC5C,cAAM,SAAS,IAAI,iBAAiB,SAAS,IAAI;AACjD,eAAO,KAAK;AACP,aAAA,QAAQ,IAAI,IAAI,EAAE,MAAM,SAAS,MAAM,MAAM,OAAA,CAAQ;AAAA,MAC5D;AAAA,IAAA,CACD;AAEI,SAAA,iBAAiB,qBAAqB,KAAK,gBAAgB;AAE5D,QAAA,CAAC,KAAK,OAAQ;AACb,SAAA,YAAY,KAAK,aAAa,WAAW;AAC9C,SAAK,KAAK,KAAK,aAAa,IAAI,KAAK;AAChC,SAAA,iBAAiB,KAAK,UAAU;AACrC,SAAK,WAAW,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,MAChE;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;AAChB,SAAK,QAAQ,QAAQ,CAAC,WAA6B,OAAO,OAAO,QAAQ;AAAA,EAC3E;AAAA,EA+CA,kBAAkB;AAChB,UAAM,mBAA2B,OAAO;AACxC,UAAM,YAAkC,IAAI;AAAA,MAC1C,CAAC,CAAC,EAAE,oBAAoB,OAAQ,CAAA,GAAG,QAAQ;AACzC,YAAI,mBAAmB,mBAAmB;AACjC,iBAAA,UAAU,IAAI,iBAAiB;AACxC,YAAI,WAAW;AAAA,MACjB;AAAA,IAAA;AAEF,SAAK,QAAQ,QAAQ,CAAC,EAAE,WAA6B;AACnD,gBAAU,QAAQ,IAAI;AAChB,YAAA,cACJ,KAAK,iBAAiB,IAAI;AAC5B,kBAAY,QAAQ,CAAA,eAAc,UAAU,QAAQ,UAAU,CAAC;AAAA,IAAA,CAChE;AAAA,EACH;AAAA,EAEA,IAAI,QAA8C;AAC1C,UAAA,QACJ,KAAK,iBAAiB,GAAG;AACvB,QAAA,CAAC,MAAM,QAAQ;AACjB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,aAAa;AAAA,IAChD;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,QAA6C;AACxC,WAAA,KAAK,iBAAiB,SAAS;AAAA,EACxC;AAAA,EAEA,IAAI,aAA6B;AACxB,WAAA,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC;AACF;AAEA,eAAe,OAAO,UAAU,UAAU;"}
+{"version":3,"file":"navigation.entry.js","sources":["../../src/Component/Navigation/Elements/Navigation.ts"],"sourcesContent":["/**\n * Main Navigation\n * @file Drop down navigation handler.\n */\n\nimport {\n  Keyboard,\n  makeAnchor,\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\ntype SubNavType = {\n  list: HTMLElement\n  trigger: HTMLButtonElement\n  link: HTMLAnchorElement\n  item?: HTMLLIElement\n  widget?: DisclosureWidget\n  linkWidget?: DisclosureWidget\n}\n\nexport default class Navigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard\n  subNavs?: Map<string, SubNavType>\n  flyout?: boolean\n  edgeCheck!: boolean\n  mq!: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.flyout = this.hasAttribute(\"flyout\")\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Add keyboard navigation events.\n    this.keyboard = new Keyboard()\n    this.keyboard.attachEventListeners(signal)\n\n    // Add keyboard focus handler for menu links.\n    this.addEventListener(\"focusin\", () => {\n      this.keyboard.attachMenu(this, this.links)\n    })\n    this.addEventListener(\"focusout\", () => {\n      this.keyboard.detachMenu()\n    })\n\n    if (!this.lists.length) return\n    this.subNavs = new Map()\n    this.lists.forEach((list: HTMLUListElement, index: number): void => {\n      const item: HTMLLIElement = list.closest(\"li\")\n      const link: HTMLAnchorElement = item.querySelector(\":scope > a\")\n      const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)\n      const trigger: HTMLButtonElement = item.querySelector(\n        \":scope > button.mx-nav__toggle\",\n      )\n      if (item && link && trigger) {\n        const labelId = `list-label-${id}`\n        link.setAttribute(\"id\", labelId)\n        list.setAttribute(\"id\", id)\n        list.setAttribute(\"aria-labelledby\", labelId)\n        const widget = new DisclosureWidget(trigger, list)\n        widget.init()\n        this.subNavs.set(id, { item, trigger, list, link, widget })\n      }\n    })\n\n    this.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n\n    if (!this.flyout) return\n    this.edgeCheck = this.hasAttribute(\"edgeCheck\")\n    this.mq = this.getAttribute(\"mq\") || \"(min-width: 720px)\"\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen, id } = detail\n    const { item } = this.subNavs.get(id)\n    item.classList.toggle(\"mx-nav--open\")\n    if (isOpen) {\n      this.keyboard.attachPopup(id, this.handleCloseAny)\n    } else {\n      this.keyboard.detachPopup(id)\n    }\n  }\n\n  handleCloseAny = (): void => {\n    this.subNavs.forEach(({ widget }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n    })\n  }\n\n  handleFlyout = (event: MouseEvent): void => {\n    const target = event.target as HTMLElement\n    const parent: HTMLLIElement = target.closest(\"li\")\n    if (!parent) return\n    const subnav: HTMLUListElement = parent.querySelector(\":scope > ul\")\n    if (!subnav) return\n    this.subNavs.forEach(({ widget, list }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n      if (list.id === subnav.id) widget.handleToggle()\n    })\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    if (matches) {\n      this.addEventListener(\"mouseover\", this.handleFlyout, { signal })\n      this.addEventListener(\"mouseleave\", this.handleCloseAny, { signal })\n      if (this.edgeCheck) this.handleEdgeCheck()\n    } else {\n      this.removeEventListener(\"mouseover\", this.handleFlyout)\n      this.removeEventListener(\"mouseleave\", this.handleCloseAny)\n    }\n  }\n\n  handleEdgeCheck() {\n    const windowInnerWidth: number = window.innerWidth\n    const edgeCheck: IntersectionObserver = new IntersectionObserver(\n      ([{ boundingClientRect, target }], obs) => {\n        if (windowInnerWidth < boundingClientRect.right)\n          target.classList.add(\"mx-nav--reverse\")\n        obs.disconnect()\n      },\n    )\n    this.subNavs.forEach(({ list }: SubNavType): void => {\n      edgeCheck.observe(list)\n      const nestedLists: NodeListOf<HTMLUListElement> =\n        list.querySelectorAll(\"ul\")\n      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))\n    })\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | null {\n    const links: NodeListOf<HTMLAnchorElement> | null =\n      this.querySelectorAll(\"a\")\n    if (!links.length) {\n      throw new Error(`${this.localName} must links`)\n    }\n    return links\n  }\n\n  get lists(): NodeListOf<HTMLUListElement> | null {\n    return this.querySelectorAll(\"li > ul\")\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-nav\", Navigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-nav\": Navigation\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/sticky.entry.js

@@ -1,4 +1,4 @@
-import { c as createElement } from "./chunks/utilities-DXELy_An.js";
+import { c as createElement } from "./chunks/utilities-BeWkujCZ.js";
 class Sticky extends HTMLElement {
   constructor() {
     super();

package/dist/build/sticky.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.entry.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n  root: IntersectionObserver[\"root\"]\n  rootMargin: IntersectionObserver[\"rootMargin\"]\n  thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n  internals_: ElementInternals\n  iO: IntersectionObserver\n  rO?: ResizeObserver\n  offsetPropName?: string\n  root?: IOOptions[\"root\"] = null\n  rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n  thresholds?: IOOptions[\"thresholds\"] = [0]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n  }\n\n  connectedCallback(): void {\n    this.offsetPropName = this.getAttribute(\"offsetpropname\")\n    const options: IOOptions = {\n      root: this.root,\n      rootMargin: this.rootMargin,\n      thresholds: this.thresholds,\n    }\n\n    // Toggle \"is-stuck\" and emit event.\n    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n      const isSticky: boolean = boundingClientRect.y < 0\n      this.classList.toggle(\"is-stuck\", isSticky)\n      const newEvent: CustomEvent<{\n        isSticky: boolean\n        options: IOOptions\n        target: Sticky\n      }> = new CustomEvent(\"sticky-toggle\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isSticky,\n          options,\n          target: this,\n        },\n      })\n      this.dispatchEvent(newEvent)\n    }, options)\n    this.iO.observe(this.trigger)\n\n    // If offsetPropName, record its height.\n    if (!this.offsetPropName) return\n    this.rO = new ResizeObserver(entries => {\n      entries.forEach(({ borderBoxSize }) => {\n        const [{ blockSize }] = borderBoxSize\n        document.body.style.setProperty(\n          this.offsetPropName,\n          `${blockSize.toFixed(1)}px`,\n        )\n      })\n    })\n    this.rO.observe(this)\n  }\n\n  disconnectedCallback(): void {\n    this.iO.unobserve(this.trigger)\n    this.rO.disconnect()\n  }\n\n  get trigger(): HTMLDivElement {\n    let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n    if (!trigger) {\n      trigger = createElement(\n        '<div class=\"sticky__trigger\"></div>',\n      ) as HTMLDivElement\n      this.insertAdjacentElement(\"beforebegin\", trigger)\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-sticky\": Sticky\n  }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACN;AALmB,SAAA,OAAA;AACY,SAAA,aAAA;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIlC,SAAA,aAAa,KAAK;EACzB;AAAA,EAEA,oBAA0B;AACnB,SAAA,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAId,SAAA,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AACzD,YAAA,WAAoB,mBAAmB,IAAI;AAC5C,WAAA,UAAU,OAAO,YAAY,QAAQ;AACpC,YAAA,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,OAC1B,OAAO;AACL,SAAA,GAAG,QAAQ,KAAK,OAAO;AAGxB,QAAA,CAAC,KAAK,eAAgB;AACrB,SAAA,KAAK,IAAI,eAAe,CAAW,YAAA;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,WAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MACzB,CACD;AAAA,IAAA,CACF;AACI,SAAA,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AACtB,SAAA,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG;EACV;AAAA,EAEA,IAAI,UAA0B;AACxB,QAAA,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACF,gBAAA;AAAA,QACR;AAAA,MAAA;AAEG,WAAA,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}
+{"version":3,"file":"sticky.entry.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n  root: IntersectionObserver[\"root\"]\n  rootMargin: IntersectionObserver[\"rootMargin\"]\n  thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n  internals_: ElementInternals\n  iO: IntersectionObserver\n  rO?: ResizeObserver\n  offsetPropName?: string\n  root?: IOOptions[\"root\"] = null\n  rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n  thresholds?: IOOptions[\"thresholds\"] = [0]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n  }\n\n  connectedCallback(): void {\n    this.offsetPropName = this.getAttribute(\"offsetpropname\")\n    const options: IOOptions = {\n      root: this.root,\n      rootMargin: this.rootMargin,\n      thresholds: this.thresholds,\n    }\n\n    // Toggle \"is-stuck\" and emit event.\n    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n      const isSticky: boolean = boundingClientRect.y < 0\n      this.classList.toggle(\"is-stuck\", isSticky)\n      const newEvent: CustomEvent<{\n        isSticky: boolean\n        options: IOOptions\n        target: Sticky\n      }> = new CustomEvent(\"sticky-toggle\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isSticky,\n          options,\n          target: this,\n        },\n      })\n      this.dispatchEvent(newEvent)\n    }, options)\n    this.iO.observe(this.trigger)\n\n    // If offsetPropName, record its height.\n    if (!this.offsetPropName) return\n    this.rO = new ResizeObserver(entries => {\n      entries.forEach(({ borderBoxSize }) => {\n        const [{ blockSize }] = borderBoxSize\n        document.body.style.setProperty(\n          this.offsetPropName,\n          `${blockSize.toFixed(1)}px`,\n        )\n      })\n    })\n    this.rO.observe(this)\n  }\n\n  disconnectedCallback(): void {\n    this.iO.unobserve(this.trigger)\n    this.rO.disconnect()\n  }\n\n  get trigger(): HTMLDivElement {\n    let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n    if (!trigger) {\n      trigger = createElement(\n        '<div class=\"sticky__trigger\"></div>',\n      ) as HTMLDivElement\n      this.insertAdjacentElement(\"beforebegin\", trigger)\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-sticky\": Sticky\n  }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACZ,UAAA;AALF,SAAA,OAA2B;AAC3B,SAAA,aAAuC;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIvC,SAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,SAAK,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAInB,SAAK,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AAC/D,YAAM,WAAoB,mBAAmB,IAAI;AACjD,WAAK,UAAU,OAAO,YAAY,QAAQ;AAC1C,YAAM,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QAAA;AAAA,MACV,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,IAC7B,GAAG,OAAO;AACV,SAAK,GAAG,QAAQ,KAAK,OAAO;AAG5B,QAAI,CAAC,KAAK,eAAgB;AAC1B,SAAK,KAAK,IAAI,eAAe,CAAA,YAAW;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,UAAA,CAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MAE3B,CAAC;AAAA,IACH,CAAC;AACD,SAAK,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AAC3B,SAAK,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG,WAAA;AAAA,EACV;AAAA,EAEA,IAAI,UAA0B;AAC5B,QAAI,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACZ,gBAAU;AAAA,QACR;AAAA,MAAA;AAEF,WAAK,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACA,WAAO;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}

package/dist/build/tabs.entry.js

@@ -1,5 +1,5 @@
-import { D as DropMenu } from "./chunks/drop-menu.entry-BEhZ_Je3.js";
-import { c as createElement, m as makeAnchor } from "./chunks/utilities-DXELy_An.js";
+import { D as DropMenu } from "./chunks/drop-menu.entry-e1iZ4ERw.js";
+import { c as createElement, m as makeAnchor } from "./chunks/utilities-BeWkujCZ.js";
 class Tabs extends HTMLElement {
   constructor() {
     super();

package/dist/build/tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.entry.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\n\nimport DropMenu, { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\nimport { createElement, makeAnchor } from \"../../../Utility/utilities\"\n\ntype TabsType = {\n  panel: HTMLElement\n  tab: HTMLButtonElement\n  button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  tabs?: Map<string, TabsType>\n  mq: string\n  locationHash?: string\n  tabFocus?: number = 0\n  tabListClasses?: string\n  dropTriggerClasses?: string\n  dropMenuId?: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    if (!this.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.panels.forEach((panel: HTMLDivElement): void => {\n      const id: string = panel.id\n      const name: string = panel.getAttribute(\"aria-label\")\n      const tabTemplate = `<button type=\"button\" role=\"tab\" aria-controls=\"${id}\" aria-selected=\"false\">${name}</button>`\n      const tab = createElement(tabTemplate) as HTMLButtonElement\n      this.tabList.appendChild(tab)\n      const button = createElement(tabTemplate) as HTMLButtonElement\n      this.dropMenuMenu.appendChild(button)\n      if (id && panel && button) {\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n\n    const hashEl: HTMLElement | null = this.locationHash\n      ? this.querySelector(this.locationHash)\n      : null\n    if (hashEl) {\n      this.active = hashEl.id\n    } else if (!this.active) {\n      this.active = this.panels[0].id\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    this.dropMenuTrigger.toggleAttribute(\"hidden\", !matches)\n    this.tabList.toggleAttribute(\"hidden\", matches)\n    if (matches) {\n      this.dropMenuMenu.addEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n        { signal },\n      )\n      this.tabList.removeEventListener(\"click\", this.handleClick)\n      this.tabList.removeEventListener(\"keydown\", this.handleKeydown)\n    } else {\n      this.tabList.addEventListener(\"click\", this.handleClick, { signal })\n      this.tabList.addEventListener(\"keydown\", this.handleKeydown, { signal })\n      this.dropMenuMenu.removeEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n      )\n    }\n  }\n\n  handleKeydown = ({ key }: KeyboardEvent): void => {\n    if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n      if (key === \"ArrowRight\") {\n        this.tabFocus += 1\n        // If we're at the end, go to the start\n        if (this.tabFocus >= this.triggers.length) {\n          this.tabFocus = 0\n        }\n        // Move left\n      } else if (key === \"ArrowLeft\") {\n        this.tabFocus -= 1\n        // If we're at the start, move to the end\n        if (this.tabFocus < 0) {\n          this.tabFocus = this.triggers.length - 1\n        }\n      }\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n      this.triggers[this.tabFocus].focus()\n    }\n  }\n\n  handleClick = (event: MouseEvent): void => {\n    const target = event.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    event.preventDefault()\n    const id: string = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleDropMenuSelect = (event: DropMenuEvent): void => {\n    const target = event.detail.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    const id = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleTabChange = (id: string): void => {\n    this.active = id\n    this.handleUrlParams(id)\n    const { panel, tab, button } = this.tabs.get(id)\n    panel.focus({ preventScroll: true })\n    const newEvent: CustomEvent<{\n      id: string\n      tab: HTMLButtonElement\n      button: HTMLButtonElement\n      panel: HTMLElement\n    }> = new CustomEvent(\"tab-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: { id, tab, button, panel },\n    })\n    this.dispatchEvent(newEvent)\n  }\n\n  get dropMenu(): DropMenu | null {\n    const existingMenu = this.querySelector(\"mx-dropmenu\")\n    if (existingMenu) return existingMenu\n    this.dropTriggerClasses =\n      this.getAttribute(\"dropTriggerClasses\") ||\n      \"mx-button mx-icon mx-icon--chevron-down mx-icon--end\"\n    this.dropMenuId = this.id || makeAnchor(\"tab-drop-menu\")\n    const name = `${this.dropMenuId}-target`\n    const tabDropMenu = new DropMenu()\n    tabDropMenu.setAttribute(\"closeOnClick\", \"true\")\n    const trigger = createElement(`<button\n                  id=\"${name}\"\n                  class=\"mx-drop-menu__trigger ${this.dropTriggerClasses}\"\n                  popovertarget=\"${this.dropMenuId}\"\n                  hidden\n              ></button>`)\n    const menu = createElement(\n      `<div\n                  class=\"mx-drop-menu\"\n                  id=\"${this.dropMenuId}\"\n                  aria-labelledby=\"${name}\"\n                  anchor=\"${name}\"\n                  popover\n                  role=\"tablist\"\n              ></div>`,\n    )\n    tabDropMenu.append(trigger, menu)\n    this.prepend(tabDropMenu)\n    return tabDropMenu\n  }\n\n  get dropMenuMenu(): HTMLDivElement {\n    return this.dropMenu.querySelector('[popover][role=\"tablist\"]')\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    return this.dropMenu.querySelector(\"[popovertarget]\")\n  }\n\n  get tabList(): HTMLDivElement {\n    this.tabListClasses = this.getAttribute(\"tabListClasses\") || \"mx-tabs__list\"\n    const existingTabList: HTMLDivElement = this.querySelector(\n      '[role=\"tablist\"]:not([popover])',\n    )\n    if (existingTabList) return existingTabList\n    const tabList = createElement(\n      `<div class=\"${this.tabListClasses}\" role=\"tablist\" hidden></div>`,\n    ) as HTMLDivElement\n    this.prepend(tabList)\n    return tabList\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.tabList.querySelectorAll('[role=\"tab\"]')\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain [role=\"tab\"]`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll('[role=\"tabpanel\"]')\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain [role=\"tabpanel\"]`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n\n  set active(id: string) {\n    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n      if (key === id) {\n        tab.setAttribute(\"aria-selected\", \"true\")\n        tab.setAttribute(\"tab-index\", \"0\")\n        panel.removeAttribute(\"inert\")\n        this.dropMenuTrigger.textContent = tab.textContent\n      } else {\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"inert\", \"\")\n      }\n    })\n  }\n\n  handleUrlParams = (id: string): void => {\n    const urlParams: URLSearchParams = new URLSearchParams(\n      window.location.search,\n    )\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState(\n      {},\n      \"\",\n      `${window.location.pathname}?${urlParams.toString()}`,\n    )\n  }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tabs.entry.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\n\nimport DropMenu, { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\nimport { createElement, makeAnchor } from \"../../../Utility/utilities\"\n\ntype TabsType = {\n  panel: HTMLElement\n  tab: HTMLButtonElement\n  button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  tabs?: Map<string, TabsType>\n  mq: string\n  locationHash?: string\n  tabFocus?: number = 0\n  tabListClasses?: string\n  dropTriggerClasses?: string\n  dropMenuId?: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    if (!this.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.panels.forEach((panel: HTMLDivElement): void => {\n      const id: string = panel.id\n      const name: string = panel.getAttribute(\"aria-label\")\n      const tabTemplate = `<button type=\"button\" role=\"tab\" aria-controls=\"${id}\" aria-selected=\"false\">${name}</button>`\n      const tab = createElement(tabTemplate) as HTMLButtonElement\n      this.tabList.appendChild(tab)\n      const button = createElement(tabTemplate) as HTMLButtonElement\n      this.dropMenuMenu.appendChild(button)\n      if (id && panel && button) {\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n\n    const hashEl: HTMLElement | null = this.locationHash\n      ? this.querySelector(this.locationHash)\n      : null\n    if (hashEl) {\n      this.active = hashEl.id\n    } else if (!this.active) {\n      this.active = this.panels[0].id\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    this.dropMenuTrigger.toggleAttribute(\"hidden\", !matches)\n    this.tabList.toggleAttribute(\"hidden\", matches)\n    if (matches) {\n      this.dropMenuMenu.addEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n        { signal },\n      )\n      this.tabList.removeEventListener(\"click\", this.handleClick)\n      this.tabList.removeEventListener(\"keydown\", this.handleKeydown)\n    } else {\n      this.tabList.addEventListener(\"click\", this.handleClick, { signal })\n      this.tabList.addEventListener(\"keydown\", this.handleKeydown, { signal })\n      this.dropMenuMenu.removeEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n      )\n    }\n  }\n\n  handleKeydown = ({ key }: KeyboardEvent): void => {\n    if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n      if (key === \"ArrowRight\") {\n        this.tabFocus += 1\n        // If we're at the end, go to the start\n        if (this.tabFocus >= this.triggers.length) {\n          this.tabFocus = 0\n        }\n        // Move left\n      } else if (key === \"ArrowLeft\") {\n        this.tabFocus -= 1\n        // If we're at the start, move to the end\n        if (this.tabFocus < 0) {\n          this.tabFocus = this.triggers.length - 1\n        }\n      }\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n      this.triggers[this.tabFocus].focus()\n    }\n  }\n\n  handleClick = (event: MouseEvent): void => {\n    const target = event.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    event.preventDefault()\n    const id: string = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleDropMenuSelect = (event: DropMenuEvent): void => {\n    const target = event.detail.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    const id = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleTabChange = (id: string): void => {\n    this.active = id\n    this.handleUrlParams(id)\n    const { panel, tab, button } = this.tabs.get(id)\n    panel.focus({ preventScroll: true })\n    const newEvent: CustomEvent<{\n      id: string\n      tab: HTMLButtonElement\n      button: HTMLButtonElement\n      panel: HTMLElement\n    }> = new CustomEvent(\"tab-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: { id, tab, button, panel },\n    })\n    this.dispatchEvent(newEvent)\n  }\n\n  get dropMenu(): DropMenu | null {\n    const existingMenu = this.querySelector(\"mx-dropmenu\")\n    if (existingMenu) return existingMenu\n    this.dropTriggerClasses =\n      this.getAttribute(\"dropTriggerClasses\") ||\n      \"mx-button mx-icon mx-icon--chevron-down mx-icon--end\"\n    this.dropMenuId = this.id || makeAnchor(\"tab-drop-menu\")\n    const name = `${this.dropMenuId}-target`\n    const tabDropMenu = new DropMenu()\n    tabDropMenu.setAttribute(\"closeOnClick\", \"true\")\n    const trigger = createElement(`<button\n                  id=\"${name}\"\n                  class=\"mx-drop-menu__trigger ${this.dropTriggerClasses}\"\n                  popovertarget=\"${this.dropMenuId}\"\n                  hidden\n              ></button>`)\n    const menu = createElement(\n      `<div\n                  class=\"mx-drop-menu\"\n                  id=\"${this.dropMenuId}\"\n                  aria-labelledby=\"${name}\"\n                  anchor=\"${name}\"\n                  popover\n                  role=\"tablist\"\n              ></div>`,\n    )\n    tabDropMenu.append(trigger, menu)\n    this.prepend(tabDropMenu)\n    return tabDropMenu\n  }\n\n  get dropMenuMenu(): HTMLDivElement {\n    return this.dropMenu.querySelector('[popover][role=\"tablist\"]')\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    return this.dropMenu.querySelector(\"[popovertarget]\")\n  }\n\n  get tabList(): HTMLDivElement {\n    this.tabListClasses = this.getAttribute(\"tabListClasses\") || \"mx-tabs__list\"\n    const existingTabList: HTMLDivElement = this.querySelector(\n      '[role=\"tablist\"]:not([popover])',\n    )\n    if (existingTabList) return existingTabList\n    const tabList = createElement(\n      `<div class=\"${this.tabListClasses}\" role=\"tablist\" hidden></div>`,\n    ) as HTMLDivElement\n    this.prepend(tabList)\n    return tabList\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.tabList.querySelectorAll('[role=\"tab\"]')\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain [role=\"tab\"]`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll('[role=\"tabpanel\"]')\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain [role=\"tabpanel\"]`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n\n  set active(id: string) {\n    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n      if (key === id) {\n        tab.setAttribute(\"aria-selected\", \"true\")\n        tab.setAttribute(\"tab-index\", \"0\")\n        panel.removeAttribute(\"inert\")\n        this.dropMenuTrigger.textContent = tab.textContent\n      } else {\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"inert\", \"\")\n      }\n    })\n  }\n\n  handleUrlParams = (id: string): void => {\n    const urlParams: URLSearchParams = new URLSearchParams(\n      window.location.search,\n    )\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState(\n      {},\n      \"\",\n      `${window.location.pathname}?${urlParams.toString()}`,\n    )\n  }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,43 +1,11 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.17",
-  "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\"",
-    "dev-storybook-html": "storybook dev -p 6006",
-    "dev-storybook-react": "storybook dev -p 6008 -c .storybook-react",
-    "dev-storybook": "concurrently \"npm:dev-storybook-*\"",
-    "build-storybook": "npm run build-storybook-html && npm run build-storybook-react",
-    "build-storybook-html": "storybook build -o dist/storybook",
-    "build-storybook-react": "storybook build -o dist/storybook/react -c .storybook-react",
-    "dev-vite": "vite build -w -m development",
-    "build-vite": "vite build",
-    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && npm run fix-css && npm run fix-js",
-    "lint": "npm run lint-prettier && npm run lint-css && npm run lint-ts && npm run lint-js",
-    "lint-prettier": "prettier --check \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\"",
-    "lint-css": "stylelint \"./**/*.css\"",
-    "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
-    "fix-css": "npm run lint-css -- --fix",
-    "lint-js": "eslint \"./**/*.{ts,tsx}\"",
-    "lint-js-ci": "eslint \"./**/*.{ts,tsx}\" --format gha",
-    "fix-js": "npm run lint-js -- --fix",
-    "lint-ts": "tsc",
-    "test": "npm run test-storybook",
-    "test-vitest": "vitest --run",
-    "test-storybook": "concurrently \"npm:test-storybook-*\"",
-    "test-storybook-html": "test-storybook --maxWorkers=2",
-    "test-storybook-react": "test-storybook --maxWorkers=2 --url http://127.0.0.1:6008 -c .storybook-react",
-    "clean": "rm -rf ./dist",
-    "commit": "git-cz",
-    "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
-    "build-ci": "npm run build",
-    "lint-ci": "npm run lint-prettier && npm run lint-css-ci && npm run lint-ts && npm run lint-js-ci"
-  },
+  "version": "0.0.19",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@oddbird/popover-polyfill": "^0.6.1",
-    "@pnx-mixtape/ids-shape": "^0.0.20",
+    "@pnx-mixtape/ids-shape": "^0.0.21",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "classnames": "^2.5.1",
@@ -58,7 +26,9 @@
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-docs": "^9.1.2",
     "@storybook/addon-links": "^9.1.2",
+    "@storybook/html": "^9.1.7",
     "@storybook/html-vite": "^9.1.2",
+    "@storybook/react": "^9.1.7",
     "@storybook/react-vite": "^9.1.2",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
@@ -66,6 +36,7 @@
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.5.2",
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/ui": "^3.2.4",
@@ -76,6 +47,7 @@
     "concurrently": "^9.2.0",
     "cz-conventional-changelog": "^3.3.0",
     "drupal-attribute": "^1.1.0",
+    "drupal-twig-extensions": "1.0.0-beta.5",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-gha": "^1.6.0",
@@ -86,6 +58,7 @@
     "globals": "^16.3.0",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",
+    "playwright": "^1.55.0",
     "postcss": "^8.5.6",
     "postcss-design-tokens": "^1.3.0",
     "postcss-inline-svg": "^6.0.0",
@@ -93,14 +66,17 @@
     "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.6.2",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.7",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-use-logical-spec": "^5.0.1",
     "tinyglobby": "^0.2.14",
+    "twig": "^1.17.1",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.1",
-    "vite-plugin-twig-drupal": "^1.6.2"
+    "vite": "^7.1.6",
+    "vite-plugin-twig-drupal": "^1.6.2",
+    "wait-on": "^9.0.0"
   },
   "optionalDependencies": {
     "@esbuild/linux-arm64": "^0.25.9",
@@ -127,5 +103,37 @@
     "./tokens": "./src/tokens.js",
     "./dist/*": "./dist/build/*",
     "./src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm run dev-vite\" \"pnpm run dev-storybook\"",
+    "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm run build-vite\" \"pnpm run build-storybook\"",
+    "dev-storybook-html": "storybook dev -p 6006",
+    "dev-storybook-react": "storybook dev -p 6008 -c .storybook-react",
+    "dev-storybook": "concurrently \"npm:dev-storybook-*\"",
+    "build-storybook": "pnpm run build-storybook-html && pnpm run build-storybook-react",
+    "build-storybook-html": "storybook build -o dist/storybook",
+    "build-storybook-react": "storybook build -o dist/storybook/react -c .storybook-react",
+    "dev-vite": "vite build -w -m development",
+    "build-vite": "vite build",
+    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && pnpm run fix-css && pnpm run fix-js",
+    "lint": "pnpm run lint-prettier && pnpm run lint-css && pnpm run lint-ts && pnpm run lint-js",
+    "lint-prettier": "prettier --check \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\"",
+    "lint-css": "stylelint \"./**/*.css\"",
+    "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
+    "fix-css": "pnpm run lint-css --fix",
+    "lint-js": "eslint \"./**/*.{ts,tsx}\"",
+    "lint-js-ci": "eslint \"./**/*.{ts,tsx}\" --format gha",
+    "fix-js": "pnpm run lint-js --fix",
+    "lint-ts": "tsc",
+    "test": "pnpm run test-storybook",
+    "test-vitest": "vitest --run",
+    "test-storybook": "concurrently \"npm:test-storybook-*\"",
+    "test-storybook-html": "test-storybook --maxWorkers=2",
+    "test-storybook-react": "test-storybook --maxWorkers=2 --url http://127.0.0.1:6008 -c .storybook-react",
+    "clean": "rm -rf ./dist",
+    "commit": "git-cz",
+    "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
+    "build-ci": "pnpm run build",
+    "lint-ci": "pnpm run lint-prettier && pnpm run lint-css-ci && pnpm run lint-ts && pnpm run lint-js-ci"
   }
-}
+}

package/src/Atom/Button/Button.stories.ts

@@ -54,6 +54,7 @@ export const Text: Story = {
 
 export const Link: Story = {
   args: {
+    as: ButtonTypes.LINK,
     href: "#",
   },
 }

package/src/Atom/Button/button.twig

@@ -8,7 +8,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-{% if href is not empty %}
+{% if as == "link" %}
   <a{{ attributes}} href="{{ href }}">
     {{ iconStart }}
     <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>

package/src/Component/Accordion/Accordion.stories.ts

@@ -43,6 +43,25 @@ type Story = StoryObj<AccordionType>
 
 export const Accordion: Story = {}
 
+export const DefaultOpen: Story = {
+  args: {
+    ...meta.args,
+    items: [
+      AccordionItem({
+        title: "Music",
+        content:
+          "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      }),
+      AccordionItem({
+        title: "Performances (default open)",
+        open: true,
+        content:
+          "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      }),
+    ],
+  },
+}
+
 export const ToggleAll: Story = {
   args: {
     toggleAll: true,

package/src/Component/Accordion/Elements/AccordionGroup.ts

@@ -15,7 +15,7 @@ export default class AccordionGroup extends HTMLElement {
 
   connectedCallback(): void {
     if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return
-    this.collapseTrigger.disabled = true
+    this.handleToggle()
     const { signal }: AbortController = this.controller
     this.addEventListener("click", this.handleClick, {
       signal,

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

@@ -40,6 +40,48 @@ exports[`Component/Accordion Accordion smoke-test 1`] = `
 </div>
 `;
 
+exports[`Component/Accordion DefaultOpen smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-accordions">
+    <div class="mx-accordion__title">
+      <h2>
+        Accordion group
+      </h2>
+    </div>
+    <mx-accordion>
+      <details class="mx-accordion mx-accordion--divided">
+        <summary class="mx-accordion__toggle">
+          Music
+          <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+                aria-hidden="true"
+          >
+          </span>
+        </summary>
+        <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </div>
+      </details>
+    </mx-accordion>
+    <mx-accordion>
+      <details class="mx-accordion mx-accordion--divided"
+               open
+      >
+        <summary class="mx-accordion__toggle">
+          Performances (default open)
+          <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+                aria-hidden="true"
+          >
+          </span>
+        </summary>
+        <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </div>
+      </details>
+    </mx-accordion>
+  </div>
+</div>
+`;
+
 exports[`Component/Accordion ToggleAll smoke-test 1`] = `
 <div class="mx-page default">
   <div class="mx-accordions">

package/src/Component/Accordion/accordion-item.twig

@@ -6,7 +6,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <mx-accordion>
-  <details{{ attributes }}{% if id is not empty %} id="{{ id }}"{% endif %}>
+  <details{{ attributes }}{% if id is not empty %} id="{{ id }}"{% endif %}{% if open %} open{% endif %}>
     <summary class="mx-accordion__toggle">
       {{ title }}
       <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>

package/src/Component/Card/Card.stories.ts

@@ -86,7 +86,7 @@ export const WithTags: Story = {
   args: {
     tags: Tags({
       items: ["Music", "News"],
-      tagType: TagTypes.TEXT,
+      type: TagTypes.TEXT,
     }),
   },
 }

package/src/Component/ListItem/ListItem.stories.ts

@@ -72,7 +72,7 @@ export const WithTags: Story = {
     label: "Resource",
     tags: Tags({
       items: ["Music", "News"],
-      tagType: TagTypes.TEXT,
+      type: TagTypes.TEXT,
     }),
   },
 }

package/src/Component/Steps/steps.css

@@ -16,8 +16,8 @@
         var(--line-colour, var(--colour-border));
       background-color: var(--background, var(--colour-background));
       border-radius: 100%;
-      inline-size: var(--counter-size, var(--spacing-l));
-      block-size: var(--counter-size, var(--spacing-l));
+      inline-size: var(--counter-size, 2rem);
+      block-size: var(--counter-size, 2rem);
       inset-block-start: var(--counter-top, 0);
       inset-inline-start: 0;
       position: absolute;
@@ -34,10 +34,10 @@
       font-weight: var(--font-weight-bold);
       line-height: var(--line-height-ui);
       inline-size: calc(
-        var(--counter-size, var(--spacing-l)) + (var(--line-width, 2px) * 2)
+        var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
       );
       block-size: calc(
-        var(--counter-size, var(--spacing-l)) + (var(--line-width, 2px) * 2)
+        var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
       );
       justify-content: center;
       inset-block-start: var(--counter-top, 0);

package/src/Component/Tag/Tag.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<TagType> = {
   component: Component,
   args: {
     items: ["Music", "News"],
-    tagType: TagTypes.TEXT,
+    type: TagTypes.TEXT,
   },
 }
 
@@ -19,7 +19,7 @@ export const Tag: Story = {}
 
 export const Link: Story = {
   args: {
-    tagType: TagTypes.LINK,
+    type: TagTypes.LINK,
     items: [
       {
         title: "Music",
@@ -35,7 +35,7 @@ export const Link: Story = {
 
 export const Checkbox: Story = {
   args: {
-    tagType: TagTypes.CHECKBOX,
+    type: TagTypes.CHECKBOX,
     items: [
       {
         label: "Music",

package/src/Component/Tag/tags.twig

@@ -4,9 +4,9 @@
 <ul class="mx-tags">
   {% for item in items %}
     <li>
-        {% if tagType == "link" %}
+        {% if type == "link" %}
             <a{{ attributes}} href="{{ item.href }}">{{ item.title }}</a>
-        {% elseif tagType == "checkbox" %}
+        {% elseif type == "checkbox" %}
           <div {{ attributes }}>
             <input type="checkbox"
                    id="{{ item.id }}"

package/src/Layout/Grid/Grid.stories.ts

@@ -14,12 +14,12 @@ const meta: Meta<GridType> = {
   component: Component,
   args: {
     items: [
-      GridItem({ item: "<span>item 1</span>" }),
-      GridItem({ item: "<span>item 2</span>" }),
-      GridItem({ item: "<span>item 3</span>" }),
-      GridItem({ item: "<span>item 4</span>" }),
-      GridItem({ item: "<span>item 5</span>" }),
-      GridItem({ item: "<span>item 6</span>" }),
+      GridItem({ item: ["<span>item 1</span>"] }),
+      GridItem({ item: ["<span>item 2</span>"] }),
+      GridItem({ item: ["<span>item 3</span>"] }),
+      GridItem({ item: ["<span>item 4</span>"] }),
+      GridItem({ item: ["<span>item 5</span>"] }),
+      GridItem({ item: ["<span>item 6</span>"] }),
     ],
     as: SectionTypes.DIV,
     modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
@@ -44,11 +44,11 @@ export const List: Story = {
     modifiers: [GridModifiers.SM_2],
     items: [
       GridItem({
-        item: "list item 1",
+        item: ["list item 1"],
         as: AsTypes.LI,
       }),
       GridItem({
-        item: "list item 2",
+        item: ["list item 2"],
         as: AsTypes.LI,
       }),
     ],
@@ -59,9 +59,9 @@ export const Span: Story = {
   args: {
     modifiers: [GridModifiers.SM_2, GridModifiers.MD_3],
     items: [
-      GridItem({ item: "<span>item 1</span>" }),
+      GridItem({ item: ["<span>item 1</span>"] }),
       GridItem({
-        item: "item 2, span 2",
+        item: ["item 2, span 2"],
         modifiers: [GridModifiers.MD_2],
       }),
     ],

package/src/Layout/Grid/grid-item.twig

@@ -7,12 +7,18 @@
 
 {% if container %}
   <{{ as }}{{ attributes.addClass("mx-container") }}>
-  {{ item }}
+    {% for i in item %}
+      {{ i }}
+    {% endfor %}
   </{{ as }}>
 {% elseif classes is not empty or as != "div" %}
   <{{ as }}{{ attributes }}>
-  {{ item }}
+    {% for i in item %}
+      {{ i }}
+    {% endfor %}
   </{{ as }}>
 {% else %}
-  {{ item }}
+  {% for i in item %}
+    {{ i }}
+  {% endfor %}
 {% endif %}

package/src/constants.css

@@ -4,9 +4,9 @@
  * Variables
  */
 
-@property --schemed {
+@property --scheme {
   syntax: "light | dark";
-  inherits: false;
+  inherits: true;
   initial-value: token("colour.scheme");
 }