@xplortech/apollo-core 0.1.0 → 0.1.2

package/dist/cjs/apollo-core.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["xpl-avatar_7.cjs",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist.cjs",[[1,"xpl-choicelist"]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
+  return index.bootstrapLazy([["xpl-avatar_13.cjs",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[0,"xpl-backdrop"],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-main-nav",{"width":[1]}],[4,"xpl-nav-item"],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist.cjs",[[1,"xpl-choicelist"]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["xpl-avatar_7.cjs",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist.cjs",[[1,"xpl-choicelist"]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
+  return index.bootstrapLazy([["xpl-avatar_13.cjs",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[0,"xpl-backdrop"],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-main-nav",{"width":[1]}],[4,"xpl-nav-item"],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist.cjs",[[1,"xpl-choicelist"]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
   });
 };
 

package/dist/cjs/{xpl-avatar_7.cjs.entry.js → xpl-avatar_13.cjs.entry.js}

@@ -20,6 +20,15 @@ const XplAvatar = class {
   }
 };
 
+const XplBackdrop = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: "xpl-backdrop", "aria-hidden": "true" }));
+  }
+};
+
 const XplBadge = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -34,6 +43,31 @@ const XplBadge = class {
   }
 };
 
+const XplBreadcrumbItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
+    this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+  }
+  render() {
+    return (index.h(index.Host, { class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { role: "none" }, index.h("slot", null)), index.h("span", { innerHTML: `${this.chevron}` })));
+  }
+  ;
+};
+
+const XplBreadcrumbs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { role: "list" }, index.h("slot", null)))));
+  }
+  ;
+};
+
 /*!
  * Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
@@ -16190,6 +16224,41 @@ const XplCheckbox = class {
   }
 };
 
+const XplContentArea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+      * @property {string}  size  - The content-area size.
+    */
+    this.size = "wide";
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { class: "xpl-content-area" }, index.h("slot", null)))));
+  }
+};
+
+const XplMainNav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @property {string}  width  - The width of the Main Nav.
+     */
+    this.width = "default";
+  }
+  render() {
+    return (index.h(index.Host, { class: `xpl-main-nav xpl-main-nav__${this.width}`, "aria-label": "Sidebar" }, index.h("nav", null, index.h("header", { "aria-label": "Sidebar Header" }, index.h("slot", { name: "logo" }), index.h("slot", { name: "brand-name" })), index.h("slot", { name: "navigation" })), index.h("footer", { class: "xpl-main-nav-footer", "aria-label": "Sidebar Footer" }, index.h("slot", { name: "footer" }))));
+  }
+};
+
+const XplNavItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: "xpl-nav-item", role: "listitem" }, index.h("slot", { name: "link" }, index.h("slot", { name: "icon" }), index.h("slot", null))));
+  }
+};
+
 const XplRadio = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -16292,9 +16361,15 @@ const XplUtilityBar = class {
 };
 
 exports.xpl_avatar = XplAvatar;
+exports.xpl_backdrop = XplBackdrop;
 exports.xpl_badge = XplBadge;
+exports.xpl_breadcrumb_item = XplBreadcrumbItem;
+exports.xpl_breadcrumbs = XplBreadcrumbs;
 exports.xpl_button = XplButton;
 exports.xpl_checkbox = XplCheckbox;
+exports.xpl_content_area = XplContentArea;
+exports.xpl_main_nav = XplMainNav;
+exports.xpl_nav_item = XplNavItem;
 exports.xpl_radio = XplRadio;
 exports.xpl_table = XplTable;
 exports.xpl_utility_bar = XplUtilityBar;

package/dist/collection/collection-manifest.json

@@ -1,10 +1,16 @@
 {
   "entries": [
     "./components/xpl-avatar/xpl-avatar.js",
+    "./components/xpl-backdrop/xpl-backdrop.js",
     "./components/xpl-badge/xpl-badge.js",
+    "./components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js",
+    "./components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js",
     "./components/xpl-button/xpl-button.js",
     "./components/xpl-checkbox/xpl-checkbox.js",
     "./components/xpl-choicelist/xpl-choicelist.js",
+    "./components/xpl-content-area/xpl-content-area.js",
+    "./components/xpl-main-nav/xpl-main-nav.js",
+    "./components/xpl-nav-item/xpl-nav-item.js",
     "./components/xpl-pagination/xpl-pagination.js",
     "./components/xpl-radio/xpl-radio.js",
     "./components/xpl-table/xpl-table.js",

package/dist/collection/components/xpl-backdrop/xpl-backdrop.js

@@ -0,0 +1,7 @@
+import { Component, Host, h } from '@stencil/core';
+export class XplBackdrop {
+  render() {
+    return (h(Host, { class: "xpl-backdrop", "aria-hidden": "true" }));
+  }
+  static get is() { return "xpl-backdrop"; }
+}

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js

@@ -0,0 +1,22 @@
+import { Component, Host, h } from '@stencil/core';
+/**
+ * @slot unnamed - content rendered inside <li>, should be link or button (styled as link)
+ */
+export class XplBreadcrumbItem {
+  constructor() {
+    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
+    this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+  }
+  render() {
+    return (h(Host, { class: "xpl-breadcrumb-item", role: "listitem" },
+      h("li", { role: "none" },
+        h("slot", null)),
+      h("span", { innerHTML: `${this.chevron}` })));
+  }
+  ;
+  static get is() { return "xpl-breadcrumb-item"; }
+}
+;

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js

@@ -0,0 +1,15 @@
+import { Component, Host, h } from '@stencil/core';
+/**
+ * @slot unnamed - content rendered <ol>, should be a group of <li> or <xpl-breadcrumb-item>
+ */
+export class XplBreadcrumbs {
+  render() {
+    return (h(Host, null,
+      h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" },
+        h("ol", { role: "list" },
+          h("slot", null)))));
+  }
+  ;
+  static get is() { return "xpl-breadcrumbs"; }
+}
+;

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -0,0 +1,39 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class XplContentArea {
+  constructor() {
+    /**
+      * @property {string}  size  - The content-area size.
+    */
+    this.size = "wide";
+  }
+  render() {
+    return (h(Host, null,
+      h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` },
+        h("div", { class: "xpl-content-area" },
+          h("slot", null)))));
+  }
+  static get is() { return "xpl-content-area"; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"wide\" | \"narrow\" | \"full\"",
+        "resolved": "\"full\" | \"narrow\" | \"wide\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{string}  size  - The content-area size.",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"wide\""
+    }
+  }; }
+}

package/dist/collection/components/xpl-main-nav/xpl-main-nav.js

@@ -0,0 +1,43 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class XplMainNav {
+  constructor() {
+    /**
+     * @property {string}  width  - The width of the Main Nav.
+     */
+    this.width = "default";
+  }
+  render() {
+    return (h(Host, { class: `xpl-main-nav xpl-main-nav__${this.width}`, "aria-label": "Sidebar" },
+      h("nav", null,
+        h("header", { "aria-label": "Sidebar Header" },
+          h("slot", { name: "logo" }),
+          h("slot", { name: "brand-name" })),
+        h("slot", { name: "navigation" })),
+      h("footer", { class: "xpl-main-nav-footer", "aria-label": "Sidebar Footer" },
+        h("slot", { name: "footer" }))));
+  }
+  static get is() { return "xpl-main-nav"; }
+  static get properties() { return {
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"default\" | \"md\" | \"sm\"",
+        "resolved": "\"default\" | \"md\" | \"sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{string}  width  - The width of the Main Nav.",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    }
+  }; }
+}

package/dist/collection/components/xpl-nav-item/xpl-nav-item.js

@@ -0,0 +1,10 @@
+import { Component, Host, h } from '@stencil/core';
+export class XplNavItem {
+  render() {
+    return (h(Host, { class: "xpl-nav-item", role: "listitem" },
+      h("slot", { name: "link" },
+        h("slot", { name: "icon" }),
+        h("slot", null))));
+  }
+  static get is() { return "xpl-nav-item"; }
+}

package/dist/custom-elements/index.d.ts

@@ -8,12 +8,30 @@ export const XplAvatar: {
   new (): XplAvatar;
 };
 
+interface XplBackdrop extends Components.XplBackdrop, HTMLElement {}
+export const XplBackdrop: {
+  prototype: XplBackdrop;
+  new (): XplBackdrop;
+};
+
 interface XplBadge extends Components.XplBadge, HTMLElement {}
 export const XplBadge: {
   prototype: XplBadge;
   new (): XplBadge;
 };
 
+interface XplBreadcrumbItem extends Components.XplBreadcrumbItem, HTMLElement {}
+export const XplBreadcrumbItem: {
+  prototype: XplBreadcrumbItem;
+  new (): XplBreadcrumbItem;
+};
+
+interface XplBreadcrumbs extends Components.XplBreadcrumbs, HTMLElement {}
+export const XplBreadcrumbs: {
+  prototype: XplBreadcrumbs;
+  new (): XplBreadcrumbs;
+};
+
 interface XplButton extends Components.XplButton, HTMLElement {}
 export const XplButton: {
   prototype: XplButton;
@@ -32,6 +50,24 @@ export const XplChoicelist: {
   new (): XplChoicelist;
 };
 
+interface XplContentArea extends Components.XplContentArea, HTMLElement {}
+export const XplContentArea: {
+  prototype: XplContentArea;
+  new (): XplContentArea;
+};
+
+interface XplMainNav extends Components.XplMainNav, HTMLElement {}
+export const XplMainNav: {
+  prototype: XplMainNav;
+  new (): XplMainNav;
+};
+
+interface XplNavItem extends Components.XplNavItem, HTMLElement {}
+export const XplNavItem: {
+  prototype: XplNavItem;
+  new (): XplNavItem;
+};
+
 interface XplPagination extends Components.XplPagination, HTMLElement {}
 export const XplPagination: {
   prototype: XplPagination;

package/dist/custom-elements/index.js

@@ -18,6 +18,16 @@ const XplAvatar$1 = class extends HTMLElement {
   }
 };
 
+const XplBackdrop$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: "xpl-backdrop", "aria-hidden": "true" }));
+  }
+};
+
 const XplBadge$1 = class extends HTMLElement {
   constructor() {
     super();
@@ -33,6 +43,33 @@ const XplBadge$1 = class extends HTMLElement {
   }
 };
 
+const XplBreadcrumbItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
+    this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+  }
+  render() {
+    return (h(Host, { class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { role: "none" }, h("slot", null)), h("span", { innerHTML: `${this.chevron}` })));
+  }
+  ;
+};
+
+const XplBreadcrumbs$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { role: "list" }, h("slot", null)))));
+  }
+  ;
+};
+
 /*!
  * Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
@@ -16202,6 +16239,44 @@ const XplChoicelist$1 = class extends HTMLElement {
   }
 };
 
+const XplContentArea$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+      * @property {string}  size  - The content-area size.
+    */
+    this.size = "wide";
+  }
+  render() {
+    return (h(Host, null, h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { class: "xpl-content-area" }, h("slot", null)))));
+  }
+};
+
+const XplMainNav$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * @property {string}  width  - The width of the Main Nav.
+     */
+    this.width = "default";
+  }
+  render() {
+    return (h(Host, { class: `xpl-main-nav xpl-main-nav__${this.width}`, "aria-label": "Sidebar" }, h("nav", null, h("header", { "aria-label": "Sidebar Header" }, h("slot", { name: "logo" }), h("slot", { name: "brand-name" })), h("slot", { name: "navigation" })), h("footer", { class: "xpl-main-nav-footer", "aria-label": "Sidebar Footer" }, h("slot", { name: "footer" }))));
+  }
+};
+
+const XplNavItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: "xpl-nav-item", role: "listitem" }, h("slot", { name: "link" }, h("slot", { name: "icon" }), h("slot", null))));
+  }
+};
+
 const XplPagination$1 = class extends HTMLElement {
   constructor() {
     super();
@@ -16377,10 +16452,16 @@ const XplUtilityBar$1 = class extends HTMLElement {
 };
 
 const XplAvatar = /*@__PURE__*/proxyCustomElement(XplAvatar$1, [4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}]);
+const XplBackdrop = /*@__PURE__*/proxyCustomElement(XplBackdrop$1, [0,"xpl-backdrop"]);
 const XplBadge = /*@__PURE__*/proxyCustomElement(XplBadge$1, [4,"xpl-badge",{"dot":[4],"variant":[1]}]);
+const XplBreadcrumbItem = /*@__PURE__*/proxyCustomElement(XplBreadcrumbItem$1, [4,"xpl-breadcrumb-item"]);
+const XplBreadcrumbs = /*@__PURE__*/proxyCustomElement(XplBreadcrumbs$1, [4,"xpl-breadcrumbs"]);
 const XplButton = /*@__PURE__*/proxyCustomElement(XplButton$1, [4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}]);
 const XplCheckbox = /*@__PURE__*/proxyCustomElement(XplCheckbox$1, [4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}]);
 const XplChoicelist = /*@__PURE__*/proxyCustomElement(XplChoicelist$1, [1,"xpl-choicelist"]);
+const XplContentArea = /*@__PURE__*/proxyCustomElement(XplContentArea$1, [4,"xpl-content-area",{"size":[1]}]);
+const XplMainNav = /*@__PURE__*/proxyCustomElement(XplMainNav$1, [4,"xpl-main-nav",{"width":[1]}]);
+const XplNavItem = /*@__PURE__*/proxyCustomElement(XplNavItem$1, [4,"xpl-nav-item"]);
 const XplPagination = /*@__PURE__*/proxyCustomElement(XplPagination$1, [0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32]}]);
 const XplRadio = /*@__PURE__*/proxyCustomElement(XplRadio$1, [4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}]);
 const XplTable = /*@__PURE__*/proxyCustomElement(XplTable$1, [0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}]);
@@ -16389,10 +16470,16 @@ const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
       XplAvatar,
+  XplBackdrop,
   XplBadge,
+  XplBreadcrumbItem,
+  XplBreadcrumbs,
   XplButton,
   XplCheckbox,
   XplChoicelist,
+  XplContentArea,
+  XplMainNav,
+  XplNavItem,
   XplPagination,
   XplRadio,
   XplTable,
@@ -16405,4 +16492,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { XplAvatar, XplBadge, XplButton, XplCheckbox, XplChoicelist, XplPagination, XplRadio, XplTable, XplUtilityBar, defineCustomElements };
+export { XplAvatar, XplBackdrop, XplBadge, XplBreadcrumbItem, XplBreadcrumbs, XplButton, XplCheckbox, XplChoicelist, XplContentArea, XplMainNav, XplNavItem, XplPagination, XplRadio, XplTable, XplUtilityBar, defineCustomElements };

package/dist/esm/apollo-core.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["xpl-avatar_7",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist",[[1,"xpl-choicelist"]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
+  return bootstrapLazy([["xpl-avatar_13",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[0,"xpl-backdrop"],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-main-nav",{"width":[1]}],[4,"xpl-nav-item"],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist",[[1,"xpl-choicelist"]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["xpl-avatar_7",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist",[[1,"xpl-choicelist"]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
+  return bootstrapLazy([["xpl-avatar_13",[[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[0,"xpl-backdrop"],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-main-nav",{"width":[1]}],[4,"xpl-nav-item"],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar"]]],["xpl-choicelist",[[1,"xpl-choicelist"]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]]], options);
   });
 };
 

package/dist/esm/{xpl-avatar_7.entry.js → xpl-avatar_13.entry.js}

@@ -16,6 +16,15 @@ const XplAvatar = class {
   }
 };
 
+const XplBackdrop = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "xpl-backdrop", "aria-hidden": "true" }));
+  }
+};
+
 const XplBadge = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -30,6 +39,31 @@ const XplBadge = class {
   }
 };
 
+const XplBreadcrumbItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
+    this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+  }
+  render() {
+    return (h(Host, { class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { role: "none" }, h("slot", null)), h("span", { innerHTML: `${this.chevron}` })));
+  }
+  ;
+};
+
+const XplBreadcrumbs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { role: "list" }, h("slot", null)))));
+  }
+  ;
+};
+
 /*!
  * Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
@@ -16186,6 +16220,41 @@ const XplCheckbox = class {
   }
 };
 
+const XplContentArea = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+      * @property {string}  size  - The content-area size.
+    */
+    this.size = "wide";
+  }
+  render() {
+    return (h(Host, null, h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { class: "xpl-content-area" }, h("slot", null)))));
+  }
+};
+
+const XplMainNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @property {string}  width  - The width of the Main Nav.
+     */
+    this.width = "default";
+  }
+  render() {
+    return (h(Host, { class: `xpl-main-nav xpl-main-nav__${this.width}`, "aria-label": "Sidebar" }, h("nav", null, h("header", { "aria-label": "Sidebar Header" }, h("slot", { name: "logo" }), h("slot", { name: "brand-name" })), h("slot", { name: "navigation" })), h("footer", { class: "xpl-main-nav-footer", "aria-label": "Sidebar Footer" }, h("slot", { name: "footer" }))));
+  }
+};
+
+const XplNavItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "xpl-nav-item", role: "listitem" }, h("slot", { name: "link" }, h("slot", { name: "icon" }), h("slot", null))));
+  }
+};
+
 const XplRadio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -16287,4 +16356,4 @@ const XplUtilityBar = class {
   }
 };
 
-export { XplAvatar as xpl_avatar, XplBadge as xpl_badge, XplButton as xpl_button, XplCheckbox as xpl_checkbox, XplRadio as xpl_radio, XplTable as xpl_table, XplUtilityBar as xpl_utility_bar };
+export { XplAvatar as xpl_avatar, XplBackdrop as xpl_backdrop, XplBadge as xpl_badge, XplBreadcrumbItem as xpl_breadcrumb_item, XplBreadcrumbs as xpl_breadcrumbs, XplButton as xpl_button, XplCheckbox as xpl_checkbox, XplContentArea as xpl_content_area, XplMainNav as xpl_main_nav, XplNavItem as xpl_nav_item, XplRadio as xpl_radio, XplTable as xpl_table, XplUtilityBar as xpl_utility_bar };

package/dist/stories/backdrop.stories.js

@@ -0,0 +1,18 @@
+export default {
+  title: "Components/Backdrop",
+};
+export const Backdrop = () => `
+    <img src="https://media.giphy.com/media/mi6DsSSNKDbUY/giphy-downsized-large.gif" />
+    <xpl-backdrop></xpl-backdrop>
+`;
+Backdrop.parameters = {
+  layout: "centered",
+  "web-component": {
+    render: Backdrop,
+  },
+  html: {
+    render() {
+      return `<div class="xpl-backdrop" aria-hidden="true"></div>`;
+    },
+  },
+};