@xplortech/apollo-core 0.4.1 → 0.5.1

package/dist/stories/main-nav.stories.js

@@ -148,7 +148,7 @@ export const MainNav = ({ width }) => `
 </xpl-main-nav>
 `;
 const HtmlMainNav = ({ width }) => `
-<div class="xpl-main-nav xpl-main-nav__${width}">
+<div class="xpl-main-nav xpl-main-nav--${width}">
     <nav aria-label="Sidebar">
         <header aria-label="Sidebar Header">
             <svg

package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/application-shell.stories.d.ts

@@ -0,0 +1,62 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    navWidth: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    showSecondaryNav: {
+      control: {
+        type: string;
+      };
+    };
+    showUtilityBar: {
+      control: {
+        type: string;
+      };
+    };
+    contentSize: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+interface ApplicationShellProps {
+  navWidth: string;
+  showSecondaryNav: boolean;
+  showUtilityBar: boolean;
+  contentSize: string;
+}
+export declare const ApplicationShell: {
+  ({ navWidth, showSecondaryNav, showUtilityBar, contentSize }: ApplicationShellProps): string;
+  parameters: {
+    layout: string;
+    "web-component": {
+      render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize }: {
+        navWidth: any;
+        showSecondaryNav: any;
+        showUtilityBar: any;
+        contentSize: any;
+      }) => string;
+    };
+    html: {
+      render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize }: {
+        navWidth: any;
+        showSecondaryNav: any;
+        showUtilityBar: any;
+        contentSize: any;
+      }) => string;
+    };
+  };
+  args: {
+    navWidth: string;
+    showUtilityBar: boolean;
+    showSecondaryNav: boolean;
+    contentSize: string;
+  };
+};

package/dist/types/components/xpl-application-shell/xpl-application-shell.d.ts

@@ -0,0 +1,24 @@
+export declare class XplApplicationShell {
+  private closeNavOnMobile;
+  /**
+   * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+   */
+  withSubnav: boolean;
+  /**
+ * @property {boolean} - Whether or not the Grid should have space for a utility bar
+ */
+  withUtility: boolean;
+  /**
+   * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+   */
+  navWidth: string;
+  /**
+   * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
+   */
+  navOpen: boolean;
+  navToggleHandler(): void;
+  navWithHandler(event: any): void;
+  onWindowResize(): void;
+  connectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/xpl-backdrop/xpl-backdrop.d.ts

@@ -1,3 +1,8 @@
 export declare class XplBackdrop {
+  /**
+   * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area.
+   * If false, the position will be fixed and cover the whole view area.
+   */
+  relative: boolean;
   render(): any;
 }

package/dist/types/components/xpl-main-nav/xpl-main-nav.d.ts

@@ -1,7 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplMainNav {
   /**
    * @property {string}  width  - The width of the Main Nav.
    */
   width: "default" | "md" | "sm";
+  /**
+   * @event {string} navWidth - Emits the `nav-width` prop set by the user
+   * when the component is attached to the DOM and when the component is updated.
+   */
+  navWidth: EventEmitter<string>;
+  private navWidthHandler;
+  connectedCallback(): void;
+  componentDidUpdate(): void;
   render(): any;
 }

package/dist/types/components/xpl-utility-bar/xpl-utility-bar.d.ts

@@ -1,3 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplUtilityBar {
+  /**
+   * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
+   */
+  navOpen: EventEmitter<boolean>;
+  /**
+   * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+   */
+  navControl?: boolean;
+  open: boolean;
+  private onNavToggle;
+  private bars;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -6,6 +6,20 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface XplApplicationShell {
+        /**
+          * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+         */
+        "navWidth": string;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+         */
+        "withSubnav": boolean;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a utility bar
+         */
+        "withUtility": boolean;
+    }
     interface XplAvatar {
         "color"?: "green" | "yellow" | "pink" | "primary" | "secondary";
         "disabled"?: boolean;
@@ -17,6 +31,10 @@ export namespace Components {
         "target"?: string;
     }
     interface XplBackdrop {
+        /**
+          * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area. If false, the position will be fixed and cover the whole view area.
+         */
+        "relative": boolean;
     }
     interface XplBadge {
         "dot"?: boolean;
@@ -261,9 +279,19 @@ export namespace Components {
         "variant"?: "default" | "small";
     }
     interface XplUtilityBar {
+        /**
+          * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+         */
+        "navControl"?: boolean;
     }
 }
 declare global {
+    interface HTMLXplApplicationShellElement extends Components.XplApplicationShell, HTMLStencilElement {
+    }
+    var HTMLXplApplicationShellElement: {
+        prototype: HTMLXplApplicationShellElement;
+        new (): HTMLXplApplicationShellElement;
+    };
     interface HTMLXplAvatarElement extends Components.XplAvatar, HTMLStencilElement {
     }
     var HTMLXplAvatarElement: {
@@ -415,6 +443,7 @@ declare global {
         new (): HTMLXplUtilityBarElement;
     };
     interface HTMLElementTagNameMap {
+        "xpl-application-shell": HTMLXplApplicationShellElement;
         "xpl-avatar": HTMLXplAvatarElement;
         "xpl-backdrop": HTMLXplBackdropElement;
         "xpl-badge": HTMLXplBadgeElement;
@@ -443,6 +472,20 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface XplApplicationShell {
+        /**
+          * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+         */
+        "navWidth"?: string;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+         */
+        "withSubnav"?: boolean;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a utility bar
+         */
+        "withUtility"?: boolean;
+    }
     interface XplAvatar {
         "color"?: "green" | "yellow" | "pink" | "primary" | "secondary";
         "disabled"?: boolean;
@@ -454,6 +497,10 @@ declare namespace LocalJSX {
         "target"?: string;
     }
     interface XplBackdrop {
+        /**
+          * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area. If false, the position will be fixed and cover the whole view area.
+         */
+        "relative"?: boolean;
     }
     interface XplBadge {
         "dot"?: boolean;
@@ -630,6 +677,10 @@ declare namespace LocalJSX {
         "items"?: ListItem[];
     }
     interface XplMainNav {
+        /**
+          * @event {string} navWidth - Emits the `nav-width` prop set by the user when the component is attached to the DOM and when the component is updated.
+         */
+        "onNavWidth"?: (event: CustomEvent<string>) => void;
         /**
           * @property {string}  width  - The width of the Main Nav.
          */
@@ -716,8 +767,17 @@ declare namespace LocalJSX {
         "variant"?: "default" | "small";
     }
     interface XplUtilityBar {
+        /**
+          * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+         */
+        "navControl"?: boolean;
+        /**
+          * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
+         */
+        "onNavOpen"?: (event: CustomEvent<boolean>) => void;
     }
     interface IntrinsicElements {
+        "xpl-application-shell": XplApplicationShell;
         "xpl-avatar": XplAvatar;
         "xpl-backdrop": XplBackdrop;
         "xpl-badge": XplBadge;
@@ -749,6 +809,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "xpl-application-shell": LocalJSX.XplApplicationShell & JSXBase.HTMLAttributes<HTMLXplApplicationShellElement>;
             "xpl-avatar": LocalJSX.XplAvatar & JSXBase.HTMLAttributes<HTMLXplAvatarElement>;
             "xpl-backdrop": LocalJSX.XplBackdrop & JSXBase.HTMLAttributes<HTMLXplBackdropElement>;
             "xpl-badge": LocalJSX.XplBadge & JSXBase.HTMLAttributes<HTMLXplBadgeElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-core",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",
   "types": "dist/custom-elements/index.d.ts",

package/dist/apollo-core/p-0027c582.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,H as l,c as i}from"./p-ea8e0991.js";import"./p-2f90296c.js";import{v as a}from"./p-ad90fe4d.js";const e=class{constructor(s){t(this,s),this.disabled=!1}render(){let t="xpl-avatar";this.size&&(t+=` xpl-avatar--${this.size}`),this.color&&(t+=` xpl-avatar--${this.color}`);const i=s("div",null,this.src?s("img",{alt:this.name,src:this.src}):s("div",{class:"xpl-avatar__placeholder"},s("slot",null)),this.status&&s("div",{class:`xpl-avatar__dot--${this.status}`}));return s(l,null,this.href&&!this.disabled?s("a",{href:this.href,class:t,target:this.target},i):s("div",this.href&&this.disabled?{class:t+" xpl-avatar--disabled"}:{class:t},i))}},r=class{constructor(s){t(this,s)}render(){return s(l,{class:"xpl-backdrop","aria-hidden":"true"})}},n=class{constructor(s){t(this,s)}render(){let t="xpl-badge";return this.dot&&(t+=" xpl-badge--dot"),this.variant&&(t+=" xpl-badge--"+this.variant),s(l,null,s("div",{class:t},s("slot",null)))}},h=class{constructor(s){t(this,s),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">\n        <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>\n    </svg>\n    '}render(){return s(l,{class:"xpl-breadcrumb-item",role:"listitem"},s("li",{role:"none"},s("slot",null)),s("span",{innerHTML:`${this.chevron}`}))}},o=class{constructor(s){t(this,s)}render(){return s(l,null,s("nav",{class:"xpl-breadcrumbs","aria-label":"Breadcrumb"},s("ol",{role:"list"},s("slot",null))))}},c=class{constructor(s){t(this,s),this.size="default",this.variant="primary"}render(){let t="xpl-button";"secondary"===this.variant&&(t+=" xpl-button--secondary"),"subtle"===this.variant&&(t+=" xpl-button--subtle"),"warning"===this.variant&&(t+=" xpl-button--warning"),"sm"===this.size&&(t+=" xpl-button--sm"),"xs"===this.size&&(t+=" xpl-button--xs"),this.iconOnly&&(t+=" xpl-button--icon-only");const i=this.icon?s("i",{class:`far fa-${this.icon} ${this.iconTrailing?"trailing":this.iconOnly?"":"leading"}`}):null;return s(l,null,this.href?s("a",{class:t,href:this.href,role:"button"},!this.iconTrailing&&i,this.iconOnly?s("span",{class:"sr-only"},s("slot",null)):s("slot",null),this.iconTrailing&&i):s("button",{class:t,disabled:this.disabled,name:this.name,type:this.type,value:this.value},!this.iconTrailing&&i,this.iconOnly?s("span",{class:"sr-only"},s("slot",null)):s("slot",null),this.iconTrailing&&i))}},d=class{constructor(s){t(this,s),this.checkboxChange=i(this,"checkboxChange",7),this.id=a()}render(){return s(l,{class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},s("input",{class:"xpl-checkbox",type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,indeterminate:this.indeterminate,onChange:()=>this.checkboxChange.emit(this.input.checked),name:this.name,ref:t=>this.input=t,required:this.required,value:this.value}),s("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},s("slot",null),this.description&&s("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},p=class{constructor(s){t(this,s),this.size="wide"}render(){return s(l,null,s("main",{class:`xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}`},s("div",{class:"xpl-content-area"},s("slot",null))))}},u=class{constructor(s){t(this,s),this.width="default"}render(){return s(l,{class:`xpl-main-nav xpl-main-nav__${this.width}`,"aria-label":"Sidebar"},s("nav",null,s("header",{"aria-label":"Sidebar Header"},s("slot",{name:"logo"}),s("slot",{name:"brand-name"})),s("slot",{name:"navigation"})),s("footer",{class:"xpl-main-nav-footer","aria-label":"Sidebar Footer"},s("slot",{name:"footer"})))}},b=class{constructor(s){t(this,s)}render(){return s(l,{class:"xpl-nav-item",role:"listitem"},s("slot",{name:"link"},s("slot",{name:"icon"}),s("slot",null)))}},x=class{constructor(s){t(this,s),this.radioChange=i(this,"radioChange",7),this.id=a()}render(){return s(l,{class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},s("input",{class:"xpl-radio",type:"radio",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name,required:this.required,value:this.value,onChange:()=>this.radioChange.emit(!0)}),s("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},s("slot",null),this.description&&s("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},m=class{constructor(s){t(this,s)}render(){return s(l,{class:"xpl-secondary-nav"},s("nav",{"aria-label":"Secondary Nav"},s("slot",null)))}},v=class{constructor(s){t(this,s),this.tableSelect=i(this,"tableSelect",7),this.areAllSelected=!1,this.hasScrolled=!1,this.selectAll=t=>{const{target:s}=t;if(!(s instanceof HTMLInputElement))return;const{checked:l}=s;this.areAllSelected=l,this.selected=this.selected.map((()=>l)),this.onChange()},this.selectOne=(t,s)=>{const{target:l}=t;if(!(l instanceof HTMLInputElement))return;const{checked:i}=l;this.areAllSelected=!1,this.selected=this.selected.map(((t,l)=>l===s?i:t)),this.onChange()},this.onChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onScroll=()=>{this.hasScrolled=this.container.scrollLeft>0},this.sortBy=(t,s=!0)=>{this.rowData.sort(((l,i)=>{const a=l[t],e=i[t];if("number"==typeof a&&"number"==typeof e){const t=s?1:-1;return a>e?t:-t}return-1})),this.rowData=Array.from(this.rowData),this.render()}}componentWillLoad(){this.areAllSelected=!1,this.rowData=void 0!==this.data?Array.from(this.data):[],this.selected=new Array(this.rowData.length).fill(!1)}render(){let t="xpl-table";return this.striped&&(t+=" xpl-table--striped"),this.freeze&&(t+=" xpl-table--freeze"),this.hasScrolled&&(t+=" xpl-table--has-scrolled"),s(l,null,s("div",{class:"xpl-table-container",onScroll:this.onScroll,ref:t=>this.container=t},s("table",{class:t},this.columns&&s("thead",null,this.columns.map(((t,l)=>s("th",null,this.multiselect&&0===l?s("label",{htmlFor:"__xpl-table-th"},s("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onChange:t=>{this.selectAll(t)},type:"checkbox"}),t):t)))),s("tbody",null,this.rowData.map(((t,l)=>s("tr",{class:this.selected&&this.selected[l]?"xpl-table-row-selected":""},t.map(((t,i)=>s("td",null,this.multiselect&&0===i?s("label",{htmlFor:"__xpl-table-row-"+l},s("input",{id:"__xpl-table-row-"+l,checked:this.selected[l],type:"checkbox",onChange:t=>this.selectOne(t,l)}),s("div",{innerHTML:t})):s("div",{innerHTML:t})))))))))))}},_=class{constructor(s){t(this,s)}render(){return s(l,null,s("nav",{"aria-label":"utility navigation bar",class:"xpl-utility-bar"},s("slot",{name:"main"}),s("slot",{name:"aside"})))}};export{e as xpl_avatar,r as xpl_backdrop,n as xpl_badge,h as xpl_breadcrumb_item,o as xpl_breadcrumbs,c as xpl_button,d as xpl_checkbox,p as xpl_content_area,u as xpl_main_nav,b as xpl_nav_item,x as xpl_radio,m as xpl_secondary_nav,v as xpl_table,_ as xpl_utility_bar}

package/dist/apollo-core/p-ea8e0991.js

@@ -1 +0,0 @@
-let e,t,l=!1,n=!1,o=!1,s=!1,i=!1;const r="undefined"!=typeof window?window:{},c=r.document||{head:{}},f={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,l,n)=>e.addEventListener(t,l,n),rel:(e,t,l,n)=>e.removeEventListener(t,l,n),ce:(e,t)=>new CustomEvent(e,t)},a=e=>Promise.resolve(e),u="http://www.w3.org/1999/xlink",$={},d=e=>"object"==(e=typeof e)||"function"===e,b=(e,t,...l)=>{let n=null,o=null,s=null,i=!1,r=!1,c=[];const f=t=>{for(let l=0;l<t.length;l++)n=t[l],Array.isArray(n)?f(n):null!=n&&"boolean"!=typeof n&&((i="function"!=typeof e&&!d(n))&&(n+=""),i&&r?c[c.length-1].o+=n:c.push(i?m(null,n):n),r=i)};if(f(l),t){t.key&&(o=t.key),t.name&&(s=t.name);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}if("function"==typeof e)return e(null===t?{}:t,c,h);const a=m(e,null);return a.i=t,c.length>0&&(a.u=c),a.$=o,a.m=s,a},m=(e,t)=>({t:0,p:e,o:t,h:null,u:null,i:null,$:null,m:null}),p={},h={forEach:(e,t)=>e.map(y).forEach(t),map:(e,t)=>e.map(y).map(t).map(w)},y=e=>({vattrs:e.i,vchildren:e.u,vkey:e.$,vname:e.m,vtag:e.p,vtext:e.o}),w=e=>{if("function"==typeof e.vtag){const t=Object.assign({},e.vattrs);return e.vkey&&(t.key=e.vkey),e.vname&&(t.name=e.vname),b(e.vtag,t,...e.vchildren||[])}const t=m(e.vtag,e.vtext);return t.i=e.vattrs,t.u=e.vchildren,t.$=e.vkey,t.m=e.vname,t},g=(e,t,l,n,o,s)=>{if(l!==n){let i=oe(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=j(l),s=j(n);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in l)n&&null!=n[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in n)l&&n[t]===l[t]||(t.includes("-")?e.style.setProperty(t,n[t]):e.style[t]=n[t])}else if("key"===t);else if("ref"===t)n&&n(e);else if(i||"o"!==t[0]||"n"!==t[1]){const r=d(n);if((i||r&&null!==n)&&!o)try{if(e.tagName.includes("-"))e[t]=n;else{let o=null==n?"":n;"list"===t?i=!1:null!=l&&e[t]==o||(e[t]=o)}}catch(e){}let f=!1;c!==(c=c.replace(/^xlink\:?/,""))&&(t=c,f=!0),null==n||!1===n?!1===n&&""!==e.getAttribute(t)||(f?e.removeAttributeNS(u,t):e.removeAttribute(t)):(!i||4&s||o)&&!r&&(n=!0===n?"":n,f?e.setAttributeNS(u,t,n):e.setAttribute(t,n))}else t="-"===t[2]?t.slice(3):oe(r,c)?c.slice(2):c[2]+t.slice(3),l&&f.rel(e,t,l,!1),n&&f.ael(e,t,n,!1)}},v=/\s/,j=e=>e?e.split(v):[],k=(e,t,l,n)=>{const o=11===t.h.nodeType&&t.h.host?t.h.host:t.h,s=e&&e.i||$,i=t.i||$;for(n in s)n in i||g(o,n,s[n],void 0,l,t.t);for(n in i)g(o,n,s[n],i[n],l,t.t)},O=(n,i,r)=>{let f,a,u,$=i.u[r],d=0;if(l||(o=!0,"slot"===$.p&&($.t|=$.u?2:1)),null!==$.o)f=$.h=c.createTextNode($.o);else if(1&$.t)f=$.h=c.createTextNode("");else{if(s||(s="svg"===$.p),f=$.h=c.createElementNS(s?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",2&$.t?"slot-fb":$.p),s&&"foreignObject"===$.p&&(s=!1),k(null,$,s),$.u)for(d=0;d<$.u.length;++d)a=O(n,$,d),a&&f.appendChild(a);"svg"===$.p?s=!1:"foreignObject"===f.tagName&&(s=!0)}return f["s-hn"]=t,3&$.t&&(f["s-sr"]=!0,f["s-cr"]=e,f["s-sn"]=$.m||"",u=n&&n.u&&n.u[r],u&&u.p===$.p&&n.h&&x(n.h,!1)),f},x=(e,l)=>{f.t|=1;const n=e.childNodes;for(let e=n.length-1;e>=0;e--){const s=n[e];s["s-hn"]!==t&&s["s-ol"]&&(E(s).insertBefore(s,T(s)),s["s-ol"].remove(),s["s-ol"]=void 0,o=!0),l&&x(s,l)}f.t&=-2},M=(e,t,l,n,o,s)=>{let i,r=e["s-cr"]&&e["s-cr"].parentNode||e;for(;o<=s;++o)n[o]&&(i=O(null,l,o),i&&(n[o].h=i,r.insertBefore(i,T(t))))},P=(e,t,l,o,s)=>{for(;t<=l;++t)(o=e[t])&&(s=o.h,N(o),n=!0,s["s-ol"]?s["s-ol"].remove():x(s,!0),s.remove())},R=(e,t)=>e.p===t.p&&("slot"===e.p?e.m===t.m:e.$===t.$),T=e=>e&&e["s-ol"]||e,E=e=>(e["s-ol"]?e["s-ol"]:e).parentNode,L=(e,t)=>{const l=t.h=e.h,n=e.u,o=t.u,i=t.p,r=t.o;let c;null===r?(s="svg"===i||"foreignObject"!==i&&s,"slot"===i||k(e,t,s),null!==n&&null!==o?((e,t,l,n)=>{let o,s,i=0,r=0,c=0,f=0,a=t.length-1,u=t[0],$=t[a],d=n.length-1,b=n[0],m=n[d];for(;i<=a&&r<=d;)if(null==u)u=t[++i];else if(null==$)$=t[--a];else if(null==b)b=n[++r];else if(null==m)m=n[--d];else if(R(u,b))L(u,b),u=t[++i],b=n[++r];else if(R($,m))L($,m),$=t[--a],m=n[--d];else if(R(u,m))"slot"!==u.p&&"slot"!==m.p||x(u.h.parentNode,!1),L(u,m),e.insertBefore(u.h,$.h.nextSibling),u=t[++i],m=n[--d];else if(R($,b))"slot"!==u.p&&"slot"!==m.p||x($.h.parentNode,!1),L($,b),e.insertBefore($.h,u.h),$=t[--a],b=n[++r];else{for(c=-1,f=i;f<=a;++f)if(t[f]&&null!==t[f].$&&t[f].$===b.$){c=f;break}c>=0?(s=t[c],s.p!==b.p?o=O(t&&t[r],l,c):(L(s,b),t[c]=void 0,o=s.h),b=n[++r]):(o=O(t&&t[r],l,r),b=n[++r]),o&&E(u.h).insertBefore(o,T(u.h))}i>a?M(e,null==n[d+1]?null:n[d+1].h,l,n,r,d):r>d&&P(t,i,a)})(l,n,t,o):null!==o?(null!==e.o&&(l.textContent=""),M(l,null,t,o,0,o.length-1)):null!==n&&P(n,0,n.length-1),s&&"svg"===i&&(s=!1)):(c=l["s-cr"])?c.parentNode.textContent=r:e.o!==r&&(l.data=r)},C=e=>{let t,l,n,o,s,i,r=e.childNodes;for(l=0,n=r.length;l<n;l++)if(t=r[l],1===t.nodeType){if(t["s-sr"])for(s=t["s-sn"],t.hidden=!1,o=0;o<n;o++)if(i=r[o].nodeType,r[o]["s-hn"]!==t["s-hn"]||""!==s){if(1===i&&s===r[o].getAttribute("slot")){t.hidden=!0;break}}else if(1===i||3===i&&""!==r[o].textContent.trim()){t.hidden=!0;break}C(t)}},F=[],A=e=>{let t,l,o,s,i,r,c=0,f=e.childNodes,a=f.length;for(;c<a;c++){if(t=f[c],t["s-sr"]&&(l=t["s-cr"])&&l.parentNode)for(o=l.parentNode.childNodes,s=t["s-sn"],r=o.length-1;r>=0;r--)l=o[r],l["s-cn"]||l["s-nr"]||l["s-hn"]===t["s-hn"]||(H(l,s)?(i=F.find((e=>e.g===l)),n=!0,l["s-sn"]=l["s-sn"]||s,i?i.v=t:F.push({v:t,g:l}),l["s-sr"]&&F.map((e=>{H(e.g,l["s-sn"])&&(i=F.find((e=>e.g===l)),i&&!e.v&&(e.v=i.v))}))):F.some((e=>e.g===l))||F.push({g:l}));1===t.nodeType&&A(t)}},H=(e,t)=>1===e.nodeType?null===e.getAttribute("slot")&&""===t||e.getAttribute("slot")===t:e["s-sn"]===t||""===t,N=e=>{e.i&&e.i.ref&&e.i.ref(null),e.u&&e.u.map(N)},U=e=>te(e).j,W=(e,t,l)=>{const n=U(e);return{emit:e=>q(n,t,{bubbles:!!(4&l),composed:!!(2&l),cancelable:!!(1&l),detail:e})}},q=(e,t,l)=>{const n=f.ce(t,l);return e.dispatchEvent(n),n},D=(e,t)=>{t&&!e.k&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.k=t)))},V=(e,t)=>{if(e.t|=16,!(4&e.t))return D(e,e.O),be((()=>_(e,t)));e.t|=512},_=(e,t)=>{const l=e.M;let n;return t&&(n=J(l,"componentWillLoad")),K(n,(()=>z(e,l)))},z=async(e,t)=>{const l=e.j,n=l["s-rc"];B(e,t),n&&(n.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>G(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},B=(s,i)=>{try{i=i.render(),s.t&=-17,s.t|=2,((s,i)=>{const r=s.j,a=s.P,u=s.R||m(null,null),$=(e=>e&&e.p===p)(i)?i:b(null,null,i);if(t=r.tagName,$.p=null,$.t|=4,s.R=$,$.h=u.h=r,e=r["s-cr"],l=0!=(1&a.t),n=!1,L(u,$),f.t|=1,o){let e,t,l,n,o,s;A($.h);let i=0;for(;i<F.length;i++)e=F[i],t=e.g,t["s-ol"]||(l=c.createTextNode(""),l["s-nr"]=t,t.parentNode.insertBefore(t["s-ol"]=l,t));for(i=0;i<F.length;i++)if(e=F[i],t=e.g,e.v){for(n=e.v.parentNode,o=e.v.nextSibling,l=t["s-ol"];l=l.previousSibling;)if(s=l["s-nr"],s&&s["s-sn"]===t["s-sn"]&&n===s.parentNode&&(s=s.nextSibling,!s||!s["s-nr"])){o=s;break}(!o&&n!==t.parentNode||t.nextSibling!==o)&&t!==o&&(!t["s-hn"]&&t["s-ol"]&&(t["s-hn"]=t["s-ol"].parentNode.nodeName),n.insertBefore(t,o))}else 1===t.nodeType&&(t.hidden=!0)}n&&C($.h),f.t&=-2,F.length=0})(s,i)}catch(e){se(e,s.j)}return null},G=e=>{const t=e.j,l=e.M,n=e.O;64&e.t||(e.t|=64,Q(t),J(l,"componentDidLoad"),e.T(t),n||I()),e.L(t),e.k&&(e.k(),e.k=void 0),512&e.t&&de((()=>V(e,!1))),e.t&=-517},I=()=>{Q(c.documentElement),de((()=>q(r,"appload",{detail:{namespace:"apollo-core"}})))},J=(e,t,l)=>{if(e&&e[t])try{return e[t](l)}catch(e){se(e)}},K=(e,t)=>e&&e.then?e.then(t):t(),Q=e=>e.classList.add("hydrated"),S=(e,t,l)=>{if(t.C){const n=Object.entries(t.C),o=e.prototype;if(n.map((([e,[n]])=>{31&n||2&l&&32&n?Object.defineProperty(o,e,{get(){return((e,t)=>te(this).F.get(t))(0,e)},set(l){((e,t,l,n)=>{const o=te(e),s=o.F.get(t),i=o.t,r=o.M;l=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,n.C[t][0]),8&i&&void 0!==s||l===s||(o.F.set(t,l),r&&2==(18&i)&&V(o,!1))})(this,e,l,t)},configurable:!0,enumerable:!0}):1&l&&64&n&&Object.defineProperty(o,e,{value(...t){const l=te(this);return l.A.then((()=>l.M[e](...t)))}})})),1&l){const t=new Map;o.attributeChangedCallback=function(e,l,n){f.jmp((()=>{const l=t.get(e);this.hasOwnProperty(l)&&(n=this[l],delete this[l]),this[l]=(null!==n||"boolean"!=typeof this[l])&&n}))},e.observedAttributes=n.filter((([e,t])=>15&t[0])).map((([e,l])=>{const n=l[1]||e;return t.set(n,e),n}))}}return e},X=e=>{const t=e["s-cr"]=c.createComment("");t["s-cn"]=!0,e.insertBefore(t,e.firstChild)},Y=(e,t={})=>{const l=[],n=t.exclude||[],o=r.customElements,s=c.head,i=s.querySelector("meta[charset]"),a=c.createElement("style"),u=[];let $,d=!0;Object.assign(f,t),f.l=new URL(t.resourcesUrl||"./",c.baseURI).href,e.map((e=>e[1].map((t=>{const s={t:t[0],H:t[1],C:t[2],N:t[3]};s.C=t[2];const i=s.H,r=class extends HTMLElement{constructor(e){super(e),ne(e=this,s)}connectedCallback(){$&&(clearTimeout($),$=null),d?u.push(this):f.jmp((()=>(e=>{if(0==(1&f.t)){const t=te(e),l=t.P,n=()=>{};if(!(1&t.t)){t.t|=1,12&l.t&&X(e);{let l=e;for(;l=l.parentNode||l.host;)if(l["s-p"]){D(t,t.O=l);break}}l.C&&Object.entries(l.C).map((([t,[l]])=>{if(31&l&&e.hasOwnProperty(t)){const l=e[t];delete e[t],e[t]=l}})),(async(e,t,l,n,o)=>{if(0==(32&t.t)){if(t.t|=32,(o=re(l)).then){const e=()=>{};o=await o,e()}o.isProxied||(S(o,l,2),o.isProxied=!0);const e=()=>{};t.t|=8;try{new o(t)}catch(e){se(e)}t.t&=-9,e()}const s=t.O,i=()=>V(t,!0);s&&s["s-rc"]?s["s-rc"].push(i):i()})(0,t,l)}n()}})(this)))}disconnectedCallback(){f.jmp((()=>{}))}componentOnReady(){return te(this).U}};s.W=e[0],n.includes(i)||o.get(i)||(l.push(i),o.define(i,S(r,s,1)))})))),a.innerHTML=l+"{visibility:hidden}.hydrated{visibility:inherit}",a.setAttribute("data-styles",""),s.insertBefore(a,i?i.nextSibling:s.firstChild),d=!1,u.length?u.map((e=>e.connectedCallback())):f.jmp((()=>$=setTimeout(I,30)))},Z=(e,t)=>t,ee=new WeakMap,te=e=>ee.get(e),le=(e,t)=>ee.set(t.M=e,t),ne=(e,t)=>{const l={t:0,j:e,P:t,F:new Map};return l.A=new Promise((e=>l.L=e)),l.U=new Promise((e=>l.T=e)),e["s-p"]=[],e["s-rc"]=[],ee.set(e,l)},oe=(e,t)=>t in e,se=(e,t)=>(0,console.error)(e,t),ie=new Map,re=e=>{const t=e.H.replace(/-/g,"_"),l=e.W,n=ie.get(l);return n?n[t]:import(`./${l}.entry.js`).then((e=>(ie.set(l,e),e[t])),se)},ce=[],fe=[],ae=(e,t)=>l=>{e.push(l),i||(i=!0,t&&4&f.t?de($e):f.raf($e))},ue=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){se(e)}e.length=0},$e=()=>{ue(ce),ue(fe),(i=ce.length>0)&&f.raf($e)},de=e=>a().then(e),be=ae(fe,!0);export{Z as F,p as H,Y as b,W as c,U as g,b as h,a as p,le as r}

package/dist/cjs/xpl-avatar_14.cjs.entry.js

@@ -1,293 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9662f096.js');
-require('./regular-872f5226.js');
-const v4 = require('./v4-14140ff3.js');
-
-const XplAvatar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.disabled = false;
-  }
-  render() {
-    let className = "xpl-avatar";
-    if (this.size)
-      className += ` xpl-avatar--${this.size}`;
-    if (this.color)
-      className += ` xpl-avatar--${this.color}`;
-    const inner = (index.h("div", null, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { class: `xpl-avatar__dot--${this.status}` })));
-    return (index.h(index.Host, null, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (index.h("div", { class: className }, inner))));
-  }
-};
-
-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);
-  }
-  render() {
-    let className = "xpl-badge";
-    if (this.dot)
-      className += " xpl-badge--dot";
-    if (this.variant)
-      className += " xpl-badge--" + this.variant;
-    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("slot", null))));
-  }
-};
-
-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)))));
-  }
-  ;
-};
-
-const XplButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = "default";
-    this.variant = "primary";
-  }
-  render() {
-    let className = "xpl-button";
-    if (this.variant === "secondary")
-      className += " xpl-button--secondary";
-    if (this.variant === "subtle")
-      className += " xpl-button--subtle";
-    if (this.variant === "warning")
-      className += " xpl-button--warning";
-    if (this.size === "sm")
-      className += " xpl-button--sm";
-    if (this.size === "xs")
-      className += " xpl-button--xs";
-    if (this.iconOnly)
-      className += " xpl-button--icon-only";
-    const icon = this.icon ? (index.h("i", { class: `far fa-${this.icon} ${this.iconTrailing ? "trailing" : this.iconOnly ? "" : "leading"}` })) : null;
-    return (index.h(index.Host, null, 
-    /**
-     * Conditionally render either an <a> or <button> element
-     * depending on if there's an `href` or not
-     */
-    this.href ? (index.h("a", { class: className, href: this.href, role: "button" }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon)) : (index.h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon))));
-  }
-};
-
-const XplCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
-    this.id = v4.v4();
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        "xpl-checkbox-radio-container": true,
-        "styled": this.styled,
-        "disabled": this.disabled,
-      } }, index.h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: () => this.checkboxChange.emit(this.input.checked), name: this.name, ref: (el) => (this.input = el), required: this.required, value: this.value }), index.h("label", { class: {
-        "xpl-label": true,
-        "xpl-label--disabled": this.disabled
-      }, htmlFor: this.id }, index.h("slot", null), this.description && index.h("small", { class: {
-        "xpl-description": true,
-        "xpl-description--disabled": this.disabled
-      } }, this.description))));
-  }
-};
-
-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);
-    this.radioChange = index.createEvent(this, "radioChange", 7);
-    this.id = v4.v4();
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        "xpl-checkbox-radio-container": true,
-        "styled": this.styled,
-        "disabled": this.disabled,
-      } }, index.h("input", { class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, value: this.value, onChange: () => this.radioChange.emit(true) }), index.h("label", { class: {
-        "xpl-label": true,
-        "xpl-label--disabled": this.disabled
-      }, htmlFor: this.id }, index.h("slot", null), this.description && index.h("small", { class: {
-        "xpl-description": true,
-        "xpl-description--disabled": this.disabled
-      } }, this.description))));
-  }
-};
-
-const XplSecondaryNav = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, { class: "xpl-secondary-nav" }, index.h("nav", { "aria-label": "Secondary Nav" }, index.h("slot", null))));
-  }
-};
-
-const XplTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tableSelect = index.createEvent(this, "tableSelect", 7);
-    this.areAllSelected = false;
-    this.hasScrolled = false;
-    this.selectAll = (e) => {
-      const { target } = e;
-      if (!(target instanceof HTMLInputElement))
-        return;
-      const { checked } = target;
-      this.areAllSelected = checked;
-      this.selected = this.selected.map(() => checked);
-      this.onChange();
-    };
-    this.selectOne = (e, i) => {
-      const { target } = e;
-      if (!(target instanceof HTMLInputElement))
-        return;
-      const { checked } = target;
-      this.areAllSelected = false;
-      this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));
-      this.onChange();
-    };
-    this.onChange = () => {
-      this.tableSelect.emit({
-        selected: this.selected,
-        areAllSelected: this.areAllSelected,
-      });
-    };
-    this.onScroll = () => {
-      this.hasScrolled = this.container.scrollLeft > 0;
-    };
-    /**
-     * TODO: Need to figure out how this interplays with data
-     * received from an API/server
-     */
-    this.sortBy = (col, ascending = true) => {
-      this.rowData.sort((a, b) => {
-        const A = a[col];
-        const B = b[col];
-        if (typeof A === "number" && typeof B === "number") {
-          const f = ascending ? 1 : -1;
-          return A > B ? f : -f;
-        }
-        return -1;
-      });
-      this.rowData = Array.from(this.rowData);
-      this.render();
-    };
-  }
-  componentWillLoad() {
-    this.areAllSelected = false;
-    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-    this.selected = new Array(this.rowData.length).fill(false);
-  }
-  render() {
-    let className = "xpl-table";
-    if (this.striped)
-      className += " xpl-table--striped";
-    if (this.freeze)
-      className += " xpl-table--freeze";
-    if (this.hasScrolled)
-      className += " xpl-table--has-scrolled";
-    return (index.h(index.Host, null, index.h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("table", { class: className }, this.columns && (index.h("thead", null, this.columns.map((column, i) => {
-      return (index.h("th", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-th" }, index.h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
-        // appear indeterminate when at least one but not all
-        // are selected
-        indeterminate: !this.areAllSelected &&
-          this.selected.some((a) => a), onChange: (e) => {
-          this.selectAll(e);
-        }, type: "checkbox" }), column)) : (column)));
-    }))), index.h("tbody", null, this.rowData.map((row, rowNum) => {
-      return (index.h("tr", { class: this.selected && this.selected[rowNum]
-          ? "xpl-table-row-selected"
-          : "" }, row.map((cell, i) => {
-        return (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-row-" + rowNum }, index.h("input", { id: "__xpl-table-row-" + rowNum, checked: this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))));
-      })));
-    }))))));
-  }
-};
-
-const XplUtilityBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, index.h("slot", { name: "main" }), index.h("slot", { name: "aside" }))));
-  }
-};
-
-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_secondary_nav = XplSecondaryNav;
-exports.xpl_table = XplTable;
-exports.xpl_utility_bar = XplUtilityBar;