@pnx-mixtape/mxds 0.0.21 → 0.0.23

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":";;AAaA,MAAqB,aAAa,YAAY;AAAA,EAW5C,cAAc;AACZ,UAAA;AANF,SAAA,WAAoB;AAkDpB,SAAA,mBAAmB,CAAC;AAAA,MAClB;AAAA,IAAA,MACgD;AAChD,YAAM,EAAE,WAA4B,KAAK;AACzC,WAAK,gBAAgB,gBAAgB,UAAU,CAAC,OAAO;AACvD,WAAK,QAAQ,gBAAgB,UAAU,OAAO;AAC9C,UAAI,SAAS;AACX,aAAK,aAAa;AAAA,UAChB;AAAA,UACA,KAAK;AAAA,UACL,EAAE,OAAA;AAAA,QAAO;AAEX,aAAK,QAAQ,oBAAoB,SAAS,KAAK,WAAW;AAC1D,aAAK,QAAQ,oBAAoB,WAAW,KAAK,aAAa;AAAA,MAChE,OAAO;AACL,aAAK,QAAQ,iBAAiB,SAAS,KAAK,aAAa,EAAE,QAAQ;AACnE,aAAK,QAAQ,iBAAiB,WAAW,KAAK,eAAe,EAAE,QAAQ;AACvE,aAAK,aAAa;AAAA,UAChB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MAET;AAAA,IACF;AAEA,SAAA,gBAAgB,CAAC,EAAE,UAA+B;AAChD,UAAI,QAAQ,gBAAgB,QAAQ,aAAa;AAC/C,aAAK,SAAS,KAAK,QAAQ,EAAE,aAAa,YAAY,IAAI;AAC1D,YAAI,QAAQ,cAAc;AACxB,eAAK,YAAY;AAEjB,cAAI,KAAK,YAAY,KAAK,SAAS,QAAQ;AACzC,iBAAK,WAAW;AAAA,UAClB;AAAA,QAEF,WAAW,QAAQ,aAAa;AAC9B,eAAK,YAAY;AAEjB,cAAI,KAAK,WAAW,GAAG;AACrB,iBAAK,WAAW,KAAK,SAAS,SAAS;AAAA,UACzC;AAAA,QACF;AACA,aAAK,SAAS,KAAK,QAAQ,EAAE,aAAa,YAAY,GAAG;AACzD,aAAK,SAAS,KAAK,QAAQ,EAAE,MAAA;AAAA,MAC/B;AAAA,IACF;AAEA,SAAA,cAAc,CAAC,UAA4B;AACzC,YAAM,SAAS,MAAM;AACrB,UAAI,EAAE,kBAAkB,mBAAoB;AAC5C,YAAM,eAAA;AACN,YAAM,KAAa,OAAO,aAAa,eAAe;AACtD,WAAK,gBAAgB,EAAE;AAAA,IACzB;AAEA,SAAA,uBAAuB,CAAC,UAA+B;AACrD,YAAM,SAAS,MAAM,OAAO;AAC5B,UAAI,EAAE,kBAAkB,mBAAoB;AAC5C,YAAM,KAAK,OAAO,aAAa,eAAe;AAC9C,WAAK,gBAAgB,EAAE;AAAA,IACzB;AAEA,SAAA,kBAAkB,CAAC,OAAqB;AACtC,WAAK,SAAS;AACd,WAAK,gBAAgB,EAAE;AACvB,YAAM,EAAE,OAAO,KAAK,OAAA,IAAW,KAAK,KAAK,IAAI,EAAE;AAC/C,YAAM,MAAM,EAAE,eAAe,KAAA,CAAM;AACnC,YAAM,WAKD,IAAI,YAAY,cAAc;AAAA,QACjC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ,EAAE,IAAI,KAAK,QAAQ,MAAA;AAAA,MAAM,CAClC;AACD,WAAK,cAAc,QAAQ;AAAA,IAC7B;AA+FA,SAAA,kBAAkB,CAAC,OAAqB;AACtC,YAAM,YAA6B,IAAI;AAAA,QACrC,OAAO,SAAS;AAAA,MAAA;AAElB,UAAI,UAAU,IAAI,KAAK,MAAM,GAAI;AACjC,gBAAU,IAAI,OAAO,EAAE;AACvB,aAAO,QAAQ;AAAA,QACb,CAAA;AAAA,QACA;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,UAAU,UAAU;AAAA,MAAA;AAAA,IAEvD;AAlOE,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AACtB,SAAK,KAAK,KAAK,aAAa,IAAI,KAAK;AAAA,EACvC;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,OAAQ;AAClB,SAAK,eAAe,OAAO,SAAS;AAEpC,SAAK,2BAAW,IAAA;AAChB,SAAK,OAAO,QAAQ,CAAC,UAAgC;AACnD,YAAM,KAAa,MAAM;AACzB,YAAM,OAAe,MAAM,aAAa,YAAY;AACpD,YAAM,cAAc,mDAAmD,EAAE,2BAA2B,IAAI;AACxG,YAAM,MAAM,cAAc,WAAW;AACrC,WAAK,QAAQ,YAAY,GAAG;AAC5B,YAAM,SAAS,cAAc,WAAW;AACxC,WAAK,aAAa,YAAY,MAAM;AACpC,UAAI,MAAM,SAAS,QAAQ;AACzB,aAAK,KAAK,IAAI,IAAI,EAAE,OAAO,KAAK,QAAQ;AAAA,MAC1C;AAAA,IACF,CAAC;AAED,UAAM,EAAE,WAA4B,KAAK;AACzC,SAAK,iBAAiB,KAAK,UAAU;AACrC,SAAK,WAAW,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,MAChE;AAAA,IAAA,CACD;AAED,UAAM,SAA6B,KAAK,eACpC,KAAK,cAAc,KAAK,YAAY,IACpC;AACJ,QAAI,QAAQ;AACV,WAAK,SAAS,OAAO;AAAA,IACvB,WAAW,CAAC,KAAK,QAAQ;AACvB,WAAK,SAAS,KAAK,OAAO,CAAC,EAAE;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAiFA,IAAI,WAA4B;AAC9B,UAAM,eAAe,KAAK,cAAc,aAAa;AACrD,QAAI,aAAc,QAAO;AACzB,SAAK,qBACH,KAAK,aAAa,oBAAoB,KACtC;AACF,SAAK,aAAa,KAAK,MAAM,WAAW,eAAe;AACvD,UAAM,OAAO,GAAG,KAAK,UAAU;AAC/B,UAAM,cAAc,IAAI,SAAA;AACxB,gBAAY,aAAa,gBAAgB,MAAM;AAC/C,UAAM,UAAU,cAAc;AAAA,wBACV,IAAI;AAAA,iDACqB,KAAK,kBAAkB;AAAA,mCACrC,KAAK,UAAU;AAAA;AAAA,yBAEzB;AACrB,UAAM,OAAO;AAAA,MACX;AAAA;AAAA,wBAEkB,KAAK,UAAU;AAAA,qCACF,IAAI;AAAA,4BACb,IAAI;AAAA;AAAA;AAAA;AAAA,IAAA;AAK5B,gBAAY,OAAO,SAAS,IAAI;AAChC,SAAK,QAAQ,WAAW;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,eAA+B;AACjC,WAAO,KAAK,SAAS,cAAc,2BAA2B;AAAA,EAChE;AAAA,EAEA,IAAI,kBAA4C;AAC9C,WAAO,KAAK,SAAS,cAAc,iBAAiB;AAAA,EACtD;AAAA,EAEA,IAAI,UAA0B;AAC5B,SAAK,iBAAiB,KAAK,aAAa,gBAAgB,KAAK;AAC7D,UAAM,kBAAkC,KAAK;AAAA,MAC3C;AAAA,IAAA;AAEF,QAAI,gBAAiB,QAAO;AAC5B,UAAM,UAAU;AAAA,MACd,eAAe,KAAK,cAAc;AAAA,IAAA;AAEpC,SAAK,QAAQ,OAAO;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,WAAiD;AACnD,UAAM,WACJ,KAAK,QAAQ,iBAAiB,cAAc;AAC9C,QAAI,CAAC,SAAS,QAAQ;AACpB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,4BAA4B;AAAA,IAC/D;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,SAAyC;AAC3C,UAAM,SACJ,KAAK,iBAAiB,mBAAmB;AAC3C,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,iCAAiC;AAAA,IACpE;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,SAA4B;AAC9B,WAAO,KAAK,cAAc,wBAAwB;AAAA,EACpD;AAAA,EAEA,IAAI,aAA6B;AAC/B,WAAO,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC;AAAA,EAEA,IAAI,OAAO,IAAY;AACrB,SAAK,KAAK,QAAQ,CAAC,EAAE,KAAK,MAAA,GAAmB,QAAsB;AACjE,UAAI,QAAQ,IAAI;AACd,YAAI,aAAa,iBAAiB,MAAM;AACxC,YAAI,aAAa,aAAa,GAAG;AACjC,cAAM,gBAAgB,OAAO;AAC7B,aAAK,gBAAgB,cAAc,IAAI;AAAA,MACzC,OAAO;AACL,YAAI,aAAa,iBAAiB,OAAO;AACzC,YAAI,aAAa,aAAa,IAAI;AAClC,cAAM,aAAa,SAAS,EAAE;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH;AAcF;AAEA,eAAe,OAAO,WAAW,IAAI;"}
+{"version":3,"file":"tabs.entry.js","sources":["../../node_modules/.pnpm/@pnx-mixtape+ids-shape@0.0.22_patch_hash=69b59e7d81ff2626b88306794fb0023d59b96636c48efd2ea6e59d66859857fb/node_modules/@pnx-mixtape/ids-shape/enums.ts","../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["export enum AlignmentTypes {\n  START = \"start\",\n  END = \"end\",\n}\n\nexport enum FormStatusTypes {\n  DEFAULT = \"default\",\n  VALID = \"valid\",\n  INVALID = \"invalid\"\n}\n\nexport enum InputTypeTypes {\n  BUTTON = \"button\",\n  CHECKBOX = \"checkbox\",\n  COLOR = \"color\",\n  DATE = \"date\",\n  DATETIMELOCAL = \"datetime-local\",\n  EMAIL = \"email\",\n  FILE = \"file\",\n  HIDDEN = \"hidden\",\n  IMAGE = \"image\",\n  MONTH = \"month\",\n  NUMBER = \"number\",\n  PASSWORD = \"password\",\n  RADIO = \"radio\",\n  RANGE = \"range\",\n  RESET = \"reset\",\n  SEARCH = \"search\",\n  SUBMIT = \"submit\",\n  TEL = \"tel\",\n  TEXT = \"text\",\n  TIME = \"time\",\n  URL = \"url\",\n  WEEK = \"week\"\n}\n\nexport enum MediaAlignmentTypes {\n  LEFT = \"left\",\n  RIGHT = \"right\",\n  CENTER = \"center\"\n}\n\nexport enum IconColourModifier {\n  INFO = \"info\",\n  ERROR = \"error\",\n  WARNING = \"warning\",\n  SUCCESS = \"success\",\n  BRAND = \"brand\",\n  ACCENT = \"accent\"\n}\n\nexport enum IconRotateModifier {\n  NINETY = \"rotate-90\",\n  ONEEIGHTY = \"rotate-180\",\n  TWOSEVENTY = \"rotate-270\",\n}\n\nexport enum IconSizeModifier {\n  SMALL = \"sm\",\n  MEDIUM = \"md\",\n  LARGE = \"lg\",\n  XLARGE = \"xl\",\n}\n\nexport enum ButtonTypes {\n  INPUT = \"input\",\n  BUTTON = \"button\",\n  LINK = \"link\",\n  SUBMIT = \"submit\",\n  RESET = \"reset\",\n}\n\nexport enum ButtonModifiers {\n  DARK = \"dark\",\n  LIGHT = \"light\",\n  WHITE = \"white\",\n  DESTRUCTIVE = \"destructive\",\n  FULL_WIDTH = \"full-width\",\n  OUTLINE = \"outline\",\n}\n\nexport enum LoadingTypes {\n  LAZY = \"lazy\",\n  EAGER = \"eager\"\n}\n\nexport enum AsTypes {\n  DIV = \"div\",\n  LI = \"li\",\n  ARTICLE = \"article\",\n  ASIDE = \"aside\",\n  SECTION = \"section\",\n}\n\nexport enum SectionTypes {\n  DIV = \"div\",\n  SECTION = \"section\",\n  HEADER = \"header\",\n  FOOTER = \"footer\",\n  ASIDE = \"aside\",\n  LIST = \"ul\",\n}\n\nexport enum SectionModifiers {\n  S = \"s\",\n  M = \"m\",\n  L = \"l\",\n  XL = \"xl\",\n  TOP_S = \"top-s\",\n  TOP_M = \"top-m\",\n  TOP_L = \"top-l\",\n  TOP_XL = \"top-xl\",\n  BOTTOM_S = \"bottom-s\",\n  BOTTOM_M = \"bottom-m\",\n  BOTTOM_L = \"bottom-l\",\n  BOTTOM_XL = \"bottom-xl\",\n}\n\nexport enum HeadingTypes {\n  ONE = \"h1\",\n  TWO = \"h2\",\n  THREE = \"h3\",\n  FOUR = \"h4\",\n  FIVE = \"h5\",\n}\n\nexport enum TextModifiers {\n  INTRO = \"intro\",\n  SMALL = \"small\",\n  ONE = \"h1\",\n  TWO = \"h2\",\n  THREE = \"h3\",\n  FOUR = \"h4\",\n  FIVE = \"h5\",\n}\n\nexport enum GlobalAlertTypes {\n  LIGHT  = \"light\",\n  CRITICAL = \"critical\",\n}\n\nexport enum InPageAlertTypes {\n  INFO = \"info\",\n  ERROR = \"error\",\n  WARNING = \"warning\",\n  SUCCESS = \"success\",\n}\n\nexport enum TagTypes {\n  TEXT = \"text\",\n  LINK = \"link\",\n  CHECKBOX = \"checkbox\"\n}\n\nexport enum GridModifiers {\n  XS_2 = \"xs-2\",\n  SM_2 = \"sm-2\",\n  MD_2 = \"md-2\",\n  LG_2 = \"lg-2\",\n  XL_2 = \"xl-2\",\n  MD_3 = \"md-3\",\n  LG_3 = \"lg-3\",\n  XL_3 = \"xl-3\",\n  MD_4 = \"md-4\",\n  LG_4 = \"lg-4\",\n  XL_4 = \"xl-4\",\n}\n\nexport enum CardModifier {\n  DARK = \"dark\",\n  LIGHT = \"light\",\n  SUPPLEMENTARY = \"supplementary\"\n}\n\nexport enum HeroBannerModifier {\n  DARK = \"dark\",\n  LIGHT = \"light\",\n  WHITE = \"white\",\n  GREY = \"off-white\"\n}\n\nexport enum StepsModifier {\n  DARK = \"dark\",\n  LIGHT = \"light\",\n  SUPPLEMENTARY = \"supplementary\"\n}\n\nexport enum ListItemModifiers {\n  BLOCK = \"block\",\n  REVERSE = \"reversed\"\n}\n\nexport enum MastheadModifier {\n  DARK = \"dark\",\n  LIGHT = \"light\",\n}\n\nexport enum FooterModifier {\n  DARK = \"dark\",\n  LIGHT = \"light\",\n}\n\nexport enum PopoverPlacementModifier {\n  TOP = \"top\",\n  TOP_START = \"top-start\",\n  TOP_END = \"top-end\",\n  RIGHT = \"right\",\n  RIGHT_START = \"right-start\",\n  RIGHT_END = \"right-end\",\n  LEFT = \"left\",\n  LEFT_START = \"left-start\",\n  LEFT_END = \"left-end\",\n  BOTTOM = \"bottom\",\n  BOTTOM_START = \"bottom-start\",\n  BOTTOM_END = \"bottom-end\",\n  TOP_CENTER = \"top-center\",\n  LEFT_CENTER = \"left-center\",\n  RIGHT_CENTER = \"right-center\",\n  BOTTOM_CENTER = \"right-center\",\n}\n","/**\n * Tab toggle handler\n */\n\nimport DropMenu, { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\nimport { createElement, makeAnchor } from \"../../../Utility/utilities\"\nimport { PopoverPlacementModifier } from \"@pnx-mixtape/ids-shape\"\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 = ({ matches }: 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(\"drop-menu-select\", this.handleDropMenuSelect, { signal })\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(\"drop-menu-select\", this.handleDropMenuSelect)\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-popover__trigger ${this.dropTriggerClasses}\"\n                  popovertarget=\"${this.dropMenuId}\"\n                  style=\"anchor-name: --${this.dropMenuId}\"\n                  hidden\n              ></button>`)\n    const menu = createElement(\n      `<div\n                  class=\"mx-popover mx-drop-menu\"\n                  id=\"${this.dropMenuId}\"\n                  aria-describedby=\"${name}\"\n                  style=\"position-anchor: --${this.dropMenuId}\"\n                  data-placement=\"${PopoverPlacementModifier.BOTTOM_START}\"\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('[role=\"tablist\"]:not([popover])')\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 = this.querySelectorAll(\"[data-tab]\")\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain [data-tab]`)\n    }\n    panels.forEach(panel => {\n      panel.setAttribute(\"role\", \"tabpanel\")\n      panel.setAttribute(\"tabindex\", \"0\")\n      panel.setAttribute(\"aria-label\", panel.getAttribute(\"data-tab\"))\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(window.location.search)\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState({}, \"\", `${window.location.pathname}?${urlParams.toString()}`)\n  }\n}\n\nif (!customElements.get(\"mx-tabs\")) customElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":["PopoverPlacementModifier"],"mappings":";;AA0MO,IAAK,6CAAAA,8BAAL;AACLA,4BAAA,KAAA,IAAM;AACNA,4BAAA,WAAA,IAAY;AACZA,4BAAA,SAAA,IAAU;AACVA,4BAAA,OAAA,IAAQ;AACRA,4BAAA,aAAA,IAAc;AACdA,4BAAA,WAAA,IAAY;AACZA,4BAAA,MAAA,IAAO;AACPA,4BAAA,YAAA,IAAa;AACbA,4BAAA,UAAA,IAAW;AACXA,4BAAA,QAAA,IAAS;AACTA,4BAAA,cAAA,IAAe;AACfA,4BAAA,YAAA,IAAa;AACbA,4BAAA,YAAA,IAAa;AACbA,4BAAA,aAAA,IAAc;AACdA,4BAAA,cAAA,IAAe;AACfA,4BAAA,eAAA,IAAgB;AAhBN,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AC5LZ,MAAqB,aAAa,YAAY;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AACtB,SAAK,KAAK,KAAK,aAAa,IAAI,KAAK;AAAA,EACvC;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,OAAQ;AAClB,SAAK,eAAe,OAAO,SAAS;AAEpC,SAAK,2BAAW,IAAA;AAChB,SAAK,OAAO,QAAQ,CAAC,UAAgC;AACnD,YAAM,KAAa,MAAM;AACzB,YAAM,OAAe,MAAM,aAAa,YAAY;AACpD,YAAM,cAAc,mDAAmD,EAAE,2BAA2B,IAAI;AACxG,YAAM,MAAM,cAAc,WAAW;AACrC,WAAK,QAAQ,YAAY,GAAG;AAC5B,YAAM,SAAS,cAAc,WAAW;AACxC,WAAK,aAAa,YAAY,MAAM;AACpC,UAAI,MAAM,SAAS,QAAQ;AACzB,aAAK,KAAK,IAAI,IAAI,EAAE,OAAO,KAAK,QAAQ;AAAA,MAC1C;AAAA,IACF,CAAC;AAED,UAAM,EAAE,WAA4B,KAAK;AACzC,SAAK,iBAAiB,KAAK,UAAU;AACrC,SAAK,WAAW,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,MAChE;AAAA,IAAA,CACD;AAED,UAAM,SAA6B,KAAK,eACpC,KAAK,cAAc,KAAK,YAAY,IACpC;AACJ,QAAI,QAAQ;AACV,WAAK,SAAS,OAAO;AAAA,IACvB,WAAW,CAAC,KAAK,QAAQ;AACvB,WAAK,SAAS,KAAK,OAAO,CAAC,EAAE;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,mBAAmB,CAAC,EAAE,cAA0D;AAC9E,UAAM,EAAE,WAA4B,KAAK;AACzC,SAAK,gBAAgB,gBAAgB,UAAU,CAAC,OAAO;AACvD,SAAK,QAAQ,gBAAgB,UAAU,OAAO;AAC9C,QAAI,SAAS;AACX,WAAK,aAAa,iBAAiB,oBAAoB,KAAK,sBAAsB,EAAE,QAAQ;AAC5F,WAAK,QAAQ,oBAAoB,SAAS,KAAK,WAAW;AAC1D,WAAK,QAAQ,oBAAoB,WAAW,KAAK,aAAa;AAAA,IAChE,OAAO;AACL,WAAK,QAAQ,iBAAiB,SAAS,KAAK,aAAa,EAAE,QAAQ;AACnE,WAAK,QAAQ,iBAAiB,WAAW,KAAK,eAAe,EAAE,QAAQ;AACvE,WAAK,aAAa,oBAAoB,oBAAoB,KAAK,oBAAoB;AAAA,IACrF;AAAA,EACF;AAAA,EAEA,gBAAgB,CAAC,EAAE,UAA+B;AAChD,QAAI,QAAQ,gBAAgB,QAAQ,aAAa;AAC/C,WAAK,SAAS,KAAK,QAAQ,EAAE,aAAa,YAAY,IAAI;AAC1D,UAAI,QAAQ,cAAc;AACxB,aAAK,YAAY;AAEjB,YAAI,KAAK,YAAY,KAAK,SAAS,QAAQ;AACzC,eAAK,WAAW;AAAA,QAClB;AAAA,MAEF,WAAW,QAAQ,aAAa;AAC9B,aAAK,YAAY;AAEjB,YAAI,KAAK,WAAW,GAAG;AACrB,eAAK,WAAW,KAAK,SAAS,SAAS;AAAA,QACzC;AAAA,MACF;AACA,WAAK,SAAS,KAAK,QAAQ,EAAE,aAAa,YAAY,GAAG;AACzD,WAAK,SAAS,KAAK,QAAQ,EAAE,MAAA;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,cAAc,CAAC,UAA4B;AACzC,UAAM,SAAS,MAAM;AACrB,QAAI,EAAE,kBAAkB,mBAAoB;AAC5C,UAAM,eAAA;AACN,UAAM,KAAa,OAAO,aAAa,eAAe;AACtD,SAAK,gBAAgB,EAAE;AAAA,EACzB;AAAA,EAEA,uBAAuB,CAAC,UAA+B;AACrD,UAAM,SAAS,MAAM,OAAO;AAC5B,QAAI,EAAE,kBAAkB,mBAAoB;AAC5C,UAAM,KAAK,OAAO,aAAa,eAAe;AAC9C,SAAK,gBAAgB,EAAE;AAAA,EACzB;AAAA,EAEA,kBAAkB,CAAC,OAAqB;AACtC,SAAK,SAAS;AACd,SAAK,gBAAgB,EAAE;AACvB,UAAM,EAAE,OAAO,KAAK,OAAA,IAAW,KAAK,KAAK,IAAI,EAAE;AAC/C,UAAM,MAAM,EAAE,eAAe,KAAA,CAAM;AACnC,UAAM,WAKD,IAAI,YAAY,cAAc;AAAA,MACjC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,EAAE,IAAI,KAAK,QAAQ,MAAA;AAAA,IAAM,CAClC;AACD,SAAK,cAAc,QAAQ;AAAA,EAC7B;AAAA,EAEA,IAAI,WAA4B;AAC9B,UAAM,eAAe,KAAK,cAAc,aAAa;AACrD,QAAI,aAAc,QAAO;AACzB,SAAK,qBACH,KAAK,aAAa,oBAAoB,KACtC;AACF,SAAK,aAAa,KAAK,MAAM,WAAW,eAAe;AACvD,UAAM,OAAO,GAAG,KAAK,UAAU;AAC/B,UAAM,cAAc,IAAI,SAAA;AACxB,gBAAY,aAAa,gBAAgB,MAAM;AAC/C,UAAM,UAAU,cAAc;AAAA,wBACV,IAAI;AAAA,+CACmB,KAAK,kBAAkB;AAAA,mCACnC,KAAK,UAAU;AAAA,0CACR,KAAK,UAAU;AAAA;AAAA,yBAEhC;AACrB,UAAM,OAAO;AAAA,MACX;AAAA;AAAA,wBAEkB,KAAK,UAAU;AAAA,sCACD,IAAI;AAAA,8CACI,KAAK,UAAU;AAAA,oCACzB,yBAAyB,YAAY;AAAA;AAAA;AAAA;AAAA,IAAA;AAKrE,gBAAY,OAAO,SAAS,IAAI;AAChC,SAAK,QAAQ,WAAW;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,eAA+B;AACjC,WAAO,KAAK,SAAS,cAAc,2BAA2B;AAAA,EAChE;AAAA,EAEA,IAAI,kBAA4C;AAC9C,WAAO,KAAK,SAAS,cAAc,iBAAiB;AAAA,EACtD;AAAA,EAEA,IAAI,UAA0B;AAC5B,SAAK,iBAAiB,KAAK,aAAa,gBAAgB,KAAK;AAC7D,UAAM,kBAAkC,KAAK,cAAc,iCAAiC;AAC5F,QAAI,gBAAiB,QAAO;AAC5B,UAAM,UAAU;AAAA,MACd,eAAe,KAAK,cAAc;AAAA,IAAA;AAEpC,SAAK,QAAQ,OAAO;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,WAAiD;AACnD,UAAM,WACJ,KAAK,QAAQ,iBAAiB,cAAc;AAC9C,QAAI,CAAC,SAAS,QAAQ;AACpB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,4BAA4B;AAAA,IAC/D;AACA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,SAAyC;AAC3C,UAAM,SAAyC,KAAK,iBAAiB,YAAY;AACjF,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,0BAA0B;AAAA,IAC7D;AACA,WAAO,QAAQ,CAAA,UAAS;AACtB,YAAM,aAAa,QAAQ,UAAU;AACrC,YAAM,aAAa,YAAY,GAAG;AAClC,YAAM,aAAa,cAAc,MAAM,aAAa,UAAU,CAAC;AAAA,IACjE,CAAC;AACD,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,SAA4B;AAC9B,WAAO,KAAK,cAAc,wBAAwB;AAAA,EACpD;AAAA,EAEA,IAAI,aAA6B;AAC/B,WAAO,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC;AAAA,EAEA,IAAI,OAAO,IAAY;AACrB,SAAK,KAAK,QAAQ,CAAC,EAAE,KAAK,MAAA,GAAmB,QAAsB;AACjE,UAAI,QAAQ,IAAI;AACd,YAAI,aAAa,iBAAiB,MAAM;AACxC,YAAI,aAAa,aAAa,GAAG;AACjC,cAAM,gBAAgB,OAAO;AAC7B,aAAK,gBAAgB,cAAc,IAAI;AAAA,MACzC,OAAO;AACL,YAAI,aAAa,iBAAiB,OAAO;AACzC,YAAI,aAAa,aAAa,IAAI;AAClC,cAAM,aAAa,SAAS,EAAE;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,kBAAkB,CAAC,OAAqB;AACtC,UAAM,YAA6B,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC7E,QAAI,UAAU,IAAI,KAAK,MAAM,GAAI;AACjC,cAAU,IAAI,OAAO,EAAE;AACvB,WAAO,QAAQ,aAAa,CAAA,GAAI,IAAI,GAAG,OAAO,SAAS,QAAQ,IAAI,UAAU,SAAA,CAAU,EAAE;AAAA,EAC3F;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,SAAS,EAAG,gBAAe,OAAO,WAAW,IAAI;","x_google_ignoreList":[0]}

package/dist/build/utility-list.css

@@ -0,0 +1,43 @@
+/**
+ * Utility List
+ */
+
+@layer design-system.defaults {
+  mx-utility-list {
+    display: block;
+  }
+
+    mx-utility-list:not(:defined) button:not([popovertarget]) {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+}
+
+@layer design-system.components {
+    .mx-utility-list ul {
+      gap: var(--nav-gap, var(--spacing-xs));
+    }
+
+    .mx-utility-list:where(.mx-nav--inline) {
+      gap: 0;
+      gap: var(--inline-nav-gap, 0);
+    }
+
+  .mx-utility-list__share {
+    --utility-link-color: var(--colour-link);
+
+    min-inline-size: -moz-fit-content;
+
+    min-inline-size: fit-content;
+  }
+
+    .mx-utility-list__share a[href] {
+      --link-colour: var(--utility-link-color);
+    }
+
+    .mx-utility-list__share .mx-social-share {
+      justify-content: center;
+    }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInV0aWxpdHktbGlzdC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFNaEI7O0lBSkU7TUFDRSxvQkFBb0I7TUFDcEIsWUFBWTtJQUNkO0FBRUo7O0FBRUE7SUFFSTtNQUNFLHNDQUFzQztJQUN4Qzs7SUFFQTtNQUNFLE1BQTZCO01BQTdCLDZCQUE2QjtJQUMvQjs7RUFHRjtJQUNFLHdDQUF3Qzs7SUFFeEMsaUNBQTRCOztJQUE1Qiw0QkFBNEI7RUFTOUI7O0lBUEU7TUFDRSx3Q0FBd0M7SUFDMUM7O0lBRUE7TUFDRSx1QkFBdUI7SUFDekI7QUFFSiIsImZpbGUiOiJ1dGlsaXR5LWxpc3QuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVdGlsaXR5IExpc3RcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIG14LXV0aWxpdHktbGlzdCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG5cbiAgICAmOm5vdCg6ZGVmaW5lZCkgYnV0dG9uOm5vdChbcG9wb3ZlcnRhcmdldF0pIHtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgb3BhY2l0eTogMC43O1xuICAgIH1cbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXV0aWxpdHktbGlzdCB7XG4gICAgJiB1bCB7XG4gICAgICBnYXA6IHZhcigtLW5hdi1nYXAsIHZhcigtLXNwYWNpbmcteHMpKTtcbiAgICB9XG5cbiAgICAmOndoZXJlKC5teC1uYXYtLWlubGluZSkge1xuICAgICAgZ2FwOiB2YXIoLS1pbmxpbmUtbmF2LWdhcCwgMCk7XG4gICAgfVxuICB9XG5cbiAgLm14LXV0aWxpdHktbGlzdF9fc2hhcmUge1xuICAgIC0tdXRpbGl0eS1saW5rLWNvbG9yOiB2YXIoLS1jb2xvdXItbGluayk7XG5cbiAgICBtaW4taW5saW5lLXNpemU6IGZpdC1jb250ZW50O1xuXG4gICAgJiBhW2hyZWZdIHtcbiAgICAgIC0tbGluay1jb2xvdXI6IHZhcigtLXV0aWxpdHktbGluay1jb2xvcik7XG4gICAgfVxuXG4gICAgJiAubXgtc29jaWFsLXNoYXJlIHtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIH1cbiAgfVxufVxuIl19 */

package/dist/build/utility-list.entry.js

@@ -0,0 +1,80 @@
+class UtilityList extends HTMLElement {
+  internals_;
+  controller;
+  copyOriginalText;
+  copyOriginalIcon;
+  constructor() {
+    super();
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+    this.copyOriginalIcon = "mx-icon--link";
+  }
+  connectedCallback() {
+    const { signal } = this.controller;
+    this.copyBtn?.addEventListener(
+      "click",
+      () => {
+        void this.handleCopy();
+      },
+      { signal }
+    );
+    this.printBtn?.addEventListener(
+      "click",
+      () => {
+        this.handlePrint();
+      },
+      { signal }
+    );
+    this.pdfBtn?.addEventListener(
+      "click",
+      () => {
+        this.handlePDF();
+      },
+      { signal }
+    );
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  handleCopy = async () => {
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          ["text/plain"]: window.location.href
+        })
+      ]).then(() => {
+        this.copyLabel.textContent = "Copied!";
+        this.copyIcon.classList.replace(this.copyOriginalIcon, "mx-icon--tick");
+        setTimeout(() => {
+          this.copyLabel.textContent = this.copyOriginalText;
+          this.copyIcon.classList.replace("mx-icon--tick", this.copyOriginalIcon);
+        }, 3e3);
+      });
+    } catch {
+      console.error("Could not copy the url to clipboard");
+    }
+  };
+  handlePrint = () => window.print();
+  // Defaults to Print dialog, to allow Save to PDF.
+  // if this needs to be changed, please extend the class.
+  handlePDF = () => window.print();
+  get copyBtn() {
+    return this.querySelector("button[data-copy]");
+  }
+  get copyLabel() {
+    const el = this.copyBtn.querySelector("span[data-copy-label]");
+    this.copyOriginalText = el?.textContent ?? void 0;
+    return el;
+  }
+  get copyIcon() {
+    return this.copyBtn.querySelector(".mx-icon");
+  }
+  get printBtn() {
+    return this.querySelector("button[data-print]");
+  }
+  get pdfBtn() {
+    return this.querySelector("button[data-pdf]");
+  }
+}
+if (!customElements.get("mx-utility-list")) customElements.define("mx-utility-list", UtilityList);
+//# sourceMappingURL=utility-list.entry.js.map

package/dist/build/utility-list.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-list.entry.js","sources":["../../src/Component/UtilityList/Elements/UtilityList.ts"],"sourcesContent":["/**\n * UtilityList\n * @file Support copy and print functions.\n */\n\nexport default class UtilityList extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  copyOriginalText?: string\n  copyOriginalIcon?: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.copyOriginalIcon = \"mx-icon--link\"\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Handle copy.\n    this.copyBtn?.addEventListener(\n      \"click\",\n      (): void => {\n        void this.handleCopy()\n      },\n      { signal },\n    )\n\n    // Handle print.\n    this.printBtn?.addEventListener(\n      \"click\",\n      (): void => {\n        this.handlePrint()\n      },\n      { signal },\n    )\n\n    // Handle PDF.\n    this.pdfBtn?.addEventListener(\n      \"click\",\n      (): void => {\n        this.handlePDF()\n      },\n      { signal },\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleCopy = async (): Promise<void> => {\n    try {\n      await navigator.clipboard\n        .write([\n          new ClipboardItem({\n            [\"text/plain\"]: window.location.href,\n          }),\n        ])\n        .then(() => {\n          this.copyLabel.textContent = \"Copied!\"\n          this.copyIcon.classList.replace(this.copyOriginalIcon, \"mx-icon--tick\")\n          setTimeout(() => {\n            this.copyLabel.textContent = this.copyOriginalText\n            this.copyIcon.classList.replace(\"mx-icon--tick\", this.copyOriginalIcon)\n          }, 3000)\n        })\n    } catch {\n      console.error(\"Could not copy the url to clipboard\")\n    }\n  }\n\n  handlePrint = (): void => window.print()\n\n  // Defaults to Print dialog, to allow Save to PDF.\n  // if this needs to be changed, please extend the class.\n  handlePDF = (): void => window.print()\n\n  get copyBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-copy]\")\n  }\n\n  get copyLabel(): HTMLSpanElement | null {\n    const el: HTMLSpanElement = this.copyBtn.querySelector(\"span[data-copy-label]\")\n    this.copyOriginalText = el?.textContent ?? undefined\n    return el\n  }\n\n  get copyIcon(): HTMLSpanElement | null {\n    return this.copyBtn.querySelector(\".mx-icon\")\n  }\n\n  get printBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-print]\")\n  }\n\n  get pdfBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-pdf]\")\n  }\n}\n\nif (!customElements.get(\"mx-utility-list\")) customElements.define(\"mx-utility-list\", UtilityList)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-utility-list\": UtilityList\n  }\n}\n"],"names":[],"mappings":"AAKA,MAAqB,oBAAoB,YAAY;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AACtB,SAAK,mBAAmB;AAAA,EAC1B;AAAA,EAEA,oBAA0B;AACxB,UAAM,EAAE,WAA4B,KAAK;AAGzC,SAAK,SAAS;AAAA,MACZ;AAAA,MACA,MAAY;AACV,aAAK,KAAK,WAAA;AAAA,MACZ;AAAA,MACA,EAAE,OAAA;AAAA,IAAO;AAIX,SAAK,UAAU;AAAA,MACb;AAAA,MACA,MAAY;AACV,aAAK,YAAA;AAAA,MACP;AAAA,MACA,EAAE,OAAA;AAAA,IAAO;AAIX,SAAK,QAAQ;AAAA,MACX;AAAA,MACA,MAAY;AACV,aAAK,UAAA;AAAA,MACP;AAAA,MACA,EAAE,OAAA;AAAA,IAAO;AAAA,EAEb;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,aAAa,YAA2B;AACtC,QAAI;AACF,YAAM,UAAU,UACb,MAAM;AAAA,QACL,IAAI,cAAc;AAAA,UAChB,CAAC,YAAY,GAAG,OAAO,SAAS;AAAA,QAAA,CACjC;AAAA,MAAA,CACF,EACA,KAAK,MAAM;AACV,aAAK,UAAU,cAAc;AAC7B,aAAK,SAAS,UAAU,QAAQ,KAAK,kBAAkB,eAAe;AACtE,mBAAW,MAAM;AACf,eAAK,UAAU,cAAc,KAAK;AAClC,eAAK,SAAS,UAAU,QAAQ,iBAAiB,KAAK,gBAAgB;AAAA,QACxE,GAAG,GAAI;AAAA,MACT,CAAC;AAAA,IACL,QAAQ;AACN,cAAQ,MAAM,qCAAqC;AAAA,IACrD;AAAA,EACF;AAAA,EAEA,cAAc,MAAY,OAAO,MAAA;AAAA;AAAA;AAAA,EAIjC,YAAY,MAAY,OAAO,MAAA;AAAA,EAE/B,IAAI,UAAoC;AACtC,WAAO,KAAK,cAAc,mBAAmB;AAAA,EAC/C;AAAA,EAEA,IAAI,YAAoC;AACtC,UAAM,KAAsB,KAAK,QAAQ,cAAc,uBAAuB;AAC9E,SAAK,mBAAmB,IAAI,eAAe;AAC3C,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,WAAmC;AACrC,WAAO,KAAK,QAAQ,cAAc,UAAU;AAAA,EAC9C;AAAA,EAEA,IAAI,WAAqC;AACvC,WAAO,KAAK,cAAc,oBAAoB;AAAA,EAChD;AAAA,EAEA,IAAI,SAAmC;AACrC,WAAO,KAAK,cAAc,kBAAkB;AAAA,EAC9C;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,iBAAiB,EAAG,gBAAe,OAAO,mBAAmB,WAAW;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@oddbird/popover-polyfill": "^0.6.1",
@@ -20,14 +20,13 @@
     "@csstools/postcss-global-data": "^3.0.0",
     "@csstools/stylelint-formatter-github": "^1.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@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",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-links": "^10.0.7",
+    "@storybook/html-vite": "^10.0.7",
+    "@storybook/react": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
+    "@storybook/test-runner": "^0.24.1",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
@@ -55,7 +54,7 @@
     "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.6.2",
-    "storybook": "^9.1.7",
+    "storybook": "^10.0.7",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-use-logical-spec": "^5.0.1",

package/src/Atom/{Base.mdx → Atom.mdx}

@@ -1,6 +1,6 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks"
 
-<Meta title="Atom/Base" />
+<Meta title="Atom/Atom" />
 
 # Base
 

package/src/Atom/Background/Backgrounds.stories.ts

@@ -7,34 +7,51 @@ type BackgroundsType = {
   modifier?: BackgroundStyles
 }
 
+/**
+ * Background colours also set appropriate foreground colours to ensure contrast is met.
+ */
 const meta: Meta<BackgroundsType> = {
   title: "Atom/Backgrounds",
   tags: ["autodocs"],
   component: Component,
   argTypes: {
-    modifier: { options: Object.values(BackgroundStyles), control: "select" },
+    modifier: {
+      description: "Define the colour the use.",
+      options: Object.values(BackgroundStyles),
+      control: "select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<BackgroundsType>
 
-export const Backgrounds: Story = {
-  args: {},
-}
+export const Backgrounds: Story = {}
 
+/**
+ * Nested elements can have their background reset to the default using the `.mx-background--reset` class.
+ */
 export const Alt: Story = {
   args: {
     modifier: BackgroundStyles.ALT,
   },
 }
 
+/**
+ * Dark background set the colour scheme to `dark` to ensure foreground text meets contrast requirements.
+ */
 export const Reverse: Story = {
   args: {
     modifier: BackgroundStyles.REVERSE,
   },
 }
 
+/**
+ * Link and line colour can also be customised per background.
+ */
 export const Primary: Story = {
   args: {
     modifier: BackgroundStyles.PRIMARY,

package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Atom/Backgrounds Accent smoke-test 1`] = `
 <div class="mx-page default">

package/src/Atom/Background/_background.css

@@ -42,8 +42,7 @@
       position: absolute;
       inline-size: 100%;
       min-block-size: 100%;
-      filter: brightness(var(--bg-img-brightness, 1))
-        saturate(var(--bg-img-saturate, 1.25))
+      filter: brightness(var(--bg-img-brightness, 1)) saturate(var(--bg-img-saturate, 1.25))
         opacity(var(--bg-img-opacity, 0.5));
     }
   }

package/src/Atom/Blockquote/_blockquote.css

@@ -1,7 +1,6 @@
 @layer design-system.defaults {
   blockquote {
     padding-inline-start: var(--line-gap, var(--gap));
-    border-inline-start: var(--line-width, 6px) solid
-      var(--line-colour, var(--colour-border));
+    border-inline-start: var(--line-width, 6px) solid var(--line-colour, var(--colour-border));
   }
 }

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

@@ -2,13 +2,12 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./button.twig"
 import Icon from "../Icon/icon.twig"
 import "./button.css"
-import {
-  Button as ButtonType,
-  ButtonModifiers,
-  ButtonTypes,
-} from "@pnx-mixtape/ids-shape"
+import { Button as ButtonType, ButtonModifiers, ButtonTypes } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
+/**
+ * A button atom with optional icon.
+ */
 const meta: Meta<ButtonType> = {
   title: "Atom/Button",
   tags: ["autodocs", "ids-mvp"],
@@ -18,40 +17,124 @@ const meta: Meta<ButtonType> = {
     as: ButtonTypes.BUTTON,
   },
   argTypes: {
+    title: {
+      description: "The button label",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    as: {
+      description: "Choose the type of button, or use a link instead.",
+      options: Object.values(ButtonTypes),
+      control: "select",
+      table: {
+        defaultValue: { summary: ButtonTypes.BUTTON },
+        type: { summary: "enum" },
+      },
+    },
+    href: {
+      description: "When using a Link, set the `href` value.",
+      type: "string",
+      if: { arg: "as", eq: ButtonTypes.LINK },
+    },
     modifiers: {
+      description:
+        "Define the style of the button. **outline** and **full-width** can be used with the other colour options.",
       options: Object.values(ButtonModifiers),
       control: "multi-select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
+    disabled: {
+      description: "Add the `[disabled]` attribute to the button.",
+      type: "boolean",
+      table: { defaultValue: { summary: "false" } },
+      if: { arg: "as", neq: ButtonTypes.LINK },
+    },
+    iconStart: {
+      description:
+        "An [Icon](/?path=/docs/atom-icon--docs) object, to display **before** the title.",
+      table: {
+        subcategory: "Icon",
+      },
+    },
+    iconEnd: {
+      description:
+        "An [Icon](/?path=/docs/atom-icon--docs) object, to display **after** the title.",
+      table: {
+        subcategory: "Icon",
+      },
+    },
+    iconOnly: {
+      description:
+        "When an icon is added, visually hide the button text so that only the icon is displayed.",
+      control: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+        subcategory: "Icon",
+      },
     },
-    as: { options: Object.values(ButtonTypes), control: "select" },
-    title: { control: "text" },
-    href: { control: "text" },
-    disabled: { control: "boolean" },
-    // @ts-expect-error The controls follow the shape
-    "iconStart.icon": { options: Object.values(Icons), control: "select" },
-    "iconEnd.icon": { options: Object.values(Icons), control: "select" },
-    iconOnly: { control: "boolean" },
   },
 }
 
 export default meta
 type Story = StoryObj<ButtonType>
 
-export const Button: Story = {
-  args: {},
-}
+export const Button: Story = {}
 
-export const Primary: Story = {
+/**
+ * Primary style uses the **dark** modifier.
+ */
+export const Dark: Story = {
   args: {
     modifiers: [ButtonModifiers.DARK],
   },
 }
 
-export const Text: Story = {
+/**
+ * Outline can be combined with the **dark** or **destructive** modifier.
+ */
+export const Outline: Story = {
+  args: {
+    modifiers: [ButtonModifiers.DARK, ButtonModifiers.OUTLINE],
+  },
+}
+
+/**
+ * Buttons can look more like hyperlinks by using the **light** modifier.
+ */
+export const Light: Story = {
   args: {
     modifiers: [ButtonModifiers.LIGHT],
   },
 }
 
+/**
+ * Destructive style should be reserved for cancel or delete buttons.
+ */
+export const Destructive: Story = {
+  args: {
+    modifiers: [ButtonModifiers.DESTRUCTIVE],
+  },
+}
+
+/**
+ * White style is useful when on a dark background or overlaying an image.
+ */
+export const White: Story = {
+  args: {
+    modifiers: [ButtonModifiers.WHITE],
+  },
+  globals: {
+    background: "mx-background--alt",
+  },
+}
+
+/**
+ * Button's can be a hyperlink element, though this usage should be limited (or combined with the **light** modifier).
+ */
 export const Link: Story = {
   args: {
     as: ButtonTypes.LINK,
@@ -59,10 +142,36 @@ export const Link: Story = {
   },
 }
 
-export const IconButton: Story = {
+/**
+ * Icons can be added after the button text.
+ */
+export const IconEnd: Story = {
   args: {
     iconEnd: Icon({
       icon: Icons.ARROW_RIGHT,
     }),
   },
 }
+
+/**
+ * Icons can be added before the button text.
+ */
+export const IconStart: Story = {
+  args: {
+    iconStart: Icon({
+      icon: Icons.ARROW_LEFT,
+    }),
+  },
+}
+
+/**
+ * Or the icon can visually hide the button text.
+ */
+export const IconOnly: Story = {
+  args: {
+    iconStart: Icon({
+      icon: Icons.SEARCH,
+    }),
+    iconOnly: true,
+  },
+}

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

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Atom/Button Button smoke-test 1`] = `
 <div class="mx-page default">
-  <button class="mx-button "
+  <button class="mx-button"
           type="button"
   >
     <span>
@@ -12,15 +12,79 @@ exports[`Atom/Button Button smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Button IconButton smoke-test 1`] = `
+exports[`Atom/Button Dark smoke-test 1`] = `
 <div class="mx-page default">
-  <button class="mx-button "
+  <button class="mx-button mx-button--dark"
           type="button"
   >
     <span>
       Button
     </span>
-    <span class="mx-icon mx-icon--arrow-right ">
+  </button>
+</div>
+`;
+
+exports[`Atom/Button Destructive smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button mx-button--destructive"
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button IconEnd smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button"
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+    <span class="mx-icon mx-icon--arrow-right">
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button IconOnly smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button mx-button--icon-only"
+          type="button"
+  >
+    <span class="mx-icon mx-icon--search">
+    </span>
+    <span class="sr-only">
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button IconStart smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button"
+          type="button"
+  >
+    <span class="mx-icon mx-icon--arrow-left">
+    </span>
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button Light smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button mx-button--light"
+          type="button"
+  >
+    <span>
+      Button
     </span>
   </button>
 </div>
@@ -28,7 +92,7 @@ exports[`Atom/Button IconButton smoke-test 1`] = `
 
 exports[`Atom/Button Link smoke-test 1`] = `
 <div class="mx-page default">
-  <a class="mx-button "
+  <a class="mx-button"
      href="#"
   >
     <span>
@@ -38,9 +102,9 @@ exports[`Atom/Button Link smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Button Primary smoke-test 1`] = `
+exports[`Atom/Button Outline smoke-test 1`] = `
 <div class="mx-page default">
-  <button class="mx-button  mx-button--dark"
+  <button class="mx-button mx-button--dark mx-button--outline"
           type="button"
   >
     <span>
@@ -50,9 +114,9 @@ exports[`Atom/Button Primary smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Button Text smoke-test 1`] = `
-<div class="mx-page default">
-  <button class="mx-button  mx-button--light"
+exports[`Atom/Button White smoke-test 1`] = `
+<div class="mx-page mx-background--alt">
+  <button class="mx-button mx-button--white"
           type="button"
   >
     <span>