@xplortech/apollo-core 1.0.0-beta.2 → 1.0.0-beta.3

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 const v4 = require('./v4-14140ff3.js');
 
 const XplAvatar = class {
@@ -74,6 +74,26 @@ const XplButton = class {
      */
     this.state = 'neutral';
   }
+  componentDidRender() {
+    const attrs = this.el.attributes;
+    const dataAttrs = Object.keys(attrs)
+      .filter((k) => {
+      const propertyName = attrs[k].name;
+      if (propertyName) {
+        return (propertyName.includes('data-test') ||
+          propertyName.includes('aria-'));
+      }
+      return false;
+    })
+      .reduce((acc, k) => {
+      return Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value });
+    }, {});
+    const child = this.el.querySelector('button');
+    Object.keys(dataAttrs).forEach((k) => {
+      child.setAttribute(k, dataAttrs[k]);
+      this.el.removeAttribute(k);
+    });
+  }
   render() {
     let className = `xpl-button
                     xpl-button--${this.size}
@@ -81,6 +101,8 @@ const XplButton = class {
                     xpl-button--${this.variant}`;
     if (this.iconOnly)
       className += ' xpl-button--icon-only';
+    if (this.fullWidth)
+      className += ' xpl-button--full-width';
     if (this.link && this.disabled)
       className += ' xpl-button--link-disabled';
     return (index.h(index.Host, { class: className }, 
@@ -90,6 +112,7 @@ const XplButton = class {
      */
     this.link ? (index.h("slot", null)) : (index.h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value }, index.h("slot", null)))));
   }
+  get el() { return index.getElement(this); }
 };
 
 const XplCheckbox = class {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplBackdrop = class {
   constructor(hostRef) {

package/dist/cjs/xpl-button-row.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplButtonRow = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplChoicelist = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplDivider = class {
   constructor(hostRef) {

package/dist/cjs/xpl-dropdown-group_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};

package/dist/cjs/xpl-grid-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplGridItem = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplGrid = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 require('./regular-872f5226.js');
 const v4 = require('./v4-14140ff3.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 require('./regular-872f5226.js');
 
 const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {

package/dist/cjs/xpl-main-nav.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplMainNav = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 
 const XplPagination = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 const v4 = require('./v4-14140ff3.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54ba5804.js');
+const index = require('./index-acf3dd7a.js');
 const v4 = require('./v4-14140ff3.js');
 
 const XplToggle = class {

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Element, Host, h, Prop } from '@stencil/core';
 export class XplButton {
   constructor() {
     /**
@@ -14,6 +14,26 @@ export class XplButton {
      */
     this.state = 'neutral';
   }
+  componentDidRender() {
+    const attrs = this.el.attributes;
+    const dataAttrs = Object.keys(attrs)
+      .filter((k) => {
+      const propertyName = attrs[k].name;
+      if (propertyName) {
+        return (propertyName.includes('data-test') ||
+          propertyName.includes('aria-'));
+      }
+      return false;
+    })
+      .reduce((acc, k) => {
+      return Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value });
+    }, {});
+    const child = this.el.querySelector('button');
+    Object.keys(dataAttrs).forEach((k) => {
+      child.setAttribute(k, dataAttrs[k]);
+      this.el.removeAttribute(k);
+    });
+  }
   render() {
     let className = `xpl-button
                     xpl-button--${this.size}
@@ -21,6 +41,8 @@ export class XplButton {
                     xpl-button--${this.variant}`;
     if (this.iconOnly)
       className += ' xpl-button--icon-only';
+    if (this.fullWidth)
+      className += ' xpl-button--full-width';
     if (this.link && this.disabled)
       className += ' xpl-button--link-disabled';
     return (h(Host, { class: className }, 
@@ -84,6 +106,23 @@ export class XplButton {
       "attribute": "icon-only",
       "reflect": false
     },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "whether button should render with full width"
+      },
+      "attribute": "full-width",
+      "reflect": false
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -208,4 +247,5 @@ export class XplButton {
       "defaultValue": "'neutral'"
     }
   }; }
+  static get elementRef() { return "el"; }
 }

package/dist/custom-elements/index.js

@@ -146,6 +146,26 @@ const XplButton$1 = class extends HTMLElement {
      */
     this.state = 'neutral';
   }
+  componentDidRender() {
+    const attrs = this.el.attributes;
+    const dataAttrs = Object.keys(attrs)
+      .filter((k) => {
+      const propertyName = attrs[k].name;
+      if (propertyName) {
+        return (propertyName.includes('data-test') ||
+          propertyName.includes('aria-'));
+      }
+      return false;
+    })
+      .reduce((acc, k) => {
+      return Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value });
+    }, {});
+    const child = this.el.querySelector('button');
+    Object.keys(dataAttrs).forEach((k) => {
+      child.setAttribute(k, dataAttrs[k]);
+      this.el.removeAttribute(k);
+    });
+  }
   render() {
     let className = `xpl-button
                     xpl-button--${this.size}
@@ -153,6 +173,8 @@ const XplButton$1 = class extends HTMLElement {
                     xpl-button--${this.variant}`;
     if (this.iconOnly)
       className += ' xpl-button--icon-only';
+    if (this.fullWidth)
+      className += ' xpl-button--full-width';
     if (this.link && this.disabled)
       className += ' xpl-button--link-disabled';
     return (h(Host, { class: className }, 
@@ -162,6 +184,7 @@ const XplButton$1 = class extends HTMLElement {
      */
     this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value }, h("slot", null)))));
   }
+  get el() { return this; }
 };
 
 const XplButtonRow$1 = class extends HTMLElement {
@@ -20133,7 +20156,7 @@ const XplBackdrop = /*@__PURE__*/proxyCustomElement(XplBackdrop$1, [0,"xpl-backd
 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],"link":[4],"iconOnly":[4,"icon-only"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}]);
+const XplButton = /*@__PURE__*/proxyCustomElement(XplButton$1, [4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}]);
 const XplButtonRow = /*@__PURE__*/proxyCustomElement(XplButtonRow$1, [0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]);
 const XplCheckbox = /*@__PURE__*/proxyCustomElement(XplCheckbox$1, [4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]);
 const XplChoicelist = /*@__PURE__*/proxyCustomElement(XplChoicelist$1, [0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]);

package/dist/esm/apollo-core.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3df6db84.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-e3c4bb97.js';
 
 /*
  Stencil Client Patch Browser v2.8.0 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[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",{"navControl":[4,"nav-control"],"open":[32]}],[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],"link":[4],"iconOnly":[4,"icon-only"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
+  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[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",{"navControl":[4,"nav-control"],"open":[32]}],[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],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
 });

package/dist/esm/{index-3df6db84.js → index-e3c4bb97.js}

@@ -1066,6 +1066,9 @@ const postUpdateComponent = (hostRef) => {
     const endPostUpdate = createTime('postUpdate', tagName);
     const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3df6db84.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-e3c4bb97.js';
 
 /*
  Stencil Client Patch Esm v2.8.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[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",{"navControl":[4,"nav-control"],"open":[32]}],[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],"link":[4],"iconOnly":[4,"icon-only"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
+  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[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",{"navControl":[4,"nav-control"],"open":[32]}],[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],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
   });
 };
 

package/dist/esm/xpl-application-shell.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 
 const XplApplicationShell = class {
   constructor(hostRef) {

package/dist/esm/xpl-avatar_12.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-e3c4bb97.js';
 import { v as v4 } from './v4-929670b7.js';
 
 const XplAvatar = class {
@@ -70,6 +70,26 @@ const XplButton = class {
      */
     this.state = 'neutral';
   }
+  componentDidRender() {
+    const attrs = this.el.attributes;
+    const dataAttrs = Object.keys(attrs)
+      .filter((k) => {
+      const propertyName = attrs[k].name;
+      if (propertyName) {
+        return (propertyName.includes('data-test') ||
+          propertyName.includes('aria-'));
+      }
+      return false;
+    })
+      .reduce((acc, k) => {
+      return Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value });
+    }, {});
+    const child = this.el.querySelector('button');
+    Object.keys(dataAttrs).forEach((k) => {
+      child.setAttribute(k, dataAttrs[k]);
+      this.el.removeAttribute(k);
+    });
+  }
   render() {
     let className = `xpl-button
                     xpl-button--${this.size}
@@ -77,6 +97,8 @@ const XplButton = class {
                     xpl-button--${this.variant}`;
     if (this.iconOnly)
       className += ' xpl-button--icon-only';
+    if (this.fullWidth)
+      className += ' xpl-button--full-width';
     if (this.link && this.disabled)
       className += ' xpl-button--link-disabled';
     return (h(Host, { class: className }, 
@@ -86,6 +108,7 @@ const XplButton = class {
      */
     this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value }, h("slot", null)))));
   }
+  get el() { return getElement(this); }
 };
 
 const XplCheckbox = class {

package/dist/esm/xpl-backdrop.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 
 const XplBackdrop = class {
   constructor(hostRef) {

package/dist/esm/xpl-button-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e3c4bb97.js';
 
 const XplButtonRow = class {
   constructor(hostRef) {

package/dist/esm/xpl-choicelist.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 
 const XplChoicelist = class {
   constructor(hostRef) {

package/dist/esm/xpl-divider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 
 const XplDivider = class {
   constructor(hostRef) {

package/dist/esm/xpl-dropdown-group_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-e3c4bb97.js';
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};

package/dist/esm/xpl-dropdown_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-e3c4bb97.js';
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};

package/dist/esm/xpl-grid-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 
 const XplGridItem = class {
   constructor(hostRef) {

package/dist/esm/xpl-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-e3c4bb97.js';
 
 const XplGrid = class {
   constructor(hostRef) {

package/dist/esm/xpl-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 import './regular-86225e9d.js';
 import { v as v4 } from './v4-929670b7.js';
 

package/dist/esm/xpl-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, F as Fragment } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-e3c4bb97.js';
 import './regular-86225e9d.js';
 
 const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {

package/dist/esm/xpl-main-nav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e3c4bb97.js';
 
 const XplMainNav = class {
   constructor(hostRef) {

package/dist/esm/xpl-pagination.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e3c4bb97.js';
 
 const XplPagination = class {
   constructor(hostRef) {

package/dist/esm/xpl-select.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 import { v as v4 } from './v4-929670b7.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

package/dist/esm/xpl-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
+import { r as registerInstance, h, H as Host } from './index-e3c4bb97.js';
 import { v as v4 } from './v4-929670b7.js';
 
 const XplToggle = class {

package/dist/stories/button.stories.js

@@ -27,6 +27,11 @@ export default {
         type: 'select',
       },
     },
+    fullWidth: {
+      control: {
+        type: 'boolean',
+      },
+    },
     icon: {
       options: ['none', 'leading', 'trailing'],
       control: {
@@ -40,7 +45,7 @@ export default {
     },
   },
 };
-export const Button = ({ variant, size, disabled, state, text, icon, link, }) => {
+export const Button = ({ variant, size, disabled, fullWidth, state, text, icon, link, }) => {
   let attrs = '';
   if (variant !== 'primary')
     attrs += ` variant="${variant}"`;
@@ -59,25 +64,31 @@ export const Button = ({ variant, size, disabled, state, text, icon, link, }) =>
             `;
     return link ? `<a href='javascript:;'>${textBlock}</a>` : textBlock;
   };
-  return `<xpl-button
+  return `<div style="width: 50vw; text-align: center;"><xpl-button
+                id="123"
                 variant='${variant}'
                 size='${size}'
                 state='${state}'
+                data-test-attribute
+                data-test-attribute-with-value="1"
                 ${attrs}
                 ${link ? 'link' : ''}
+                ${fullWidth ? 'full-width' : ''}
                 >
                 ${innerHtml(link)}
-            </xpl-button>`;
+            </xpl-button></div>`;
 };
-const HtmlButton = ({ variant, size, state, disabled, text, icon, link }) => {
+const HtmlButton = ({ variant, size, state, disabled, text, icon, link, fullWidth, }) => {
   const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>`;
-  const className = `xpl-button
+  let className = `xpl-button
         xpl-button--${size}
         xpl-button--${state}
         xpl-button--${variant} `;
   let attrs = '';
   if (disabled)
     attrs += ' disabled';
+  if (fullWidth)
+    className += ' xpl-button--full-width';
   const innerHtml = (link) => {
     const textBlock = `
                 ${icon == 'leading' ? iconSvg : ''}
@@ -107,4 +118,5 @@ Button.args = {
   state: 'neutral',
   text: 'Get Coffee',
   icon: 'leading',
+  fullWidth: true,
 };