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

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

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-000e170c.js');
+const index = require('./index-54ba5804.js');
+require('./regular-872f5226.js');
 const v4 = require('./v4-14140ff3.js');
 
 const HOOKS = [
@@ -2450,27 +2451,23 @@ const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8
 const XplInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this._id = undefined;
-    this.autocomplete = undefined;
+    /**
+     * See https://flatpickr.js.org/formatting/
+     */
     this.dateFormat = 'Y-m-d';
-    this.description = undefined;
-    this.disabled = undefined;
-    this.error = undefined;
-    this.label = undefined;
-    this.max = undefined;
-    this.maxCharacterCount = undefined;
-    this.min = undefined;
+    /**
+     * For datepicker inputs, whether to allow only a single
+     * date or a range of dates. (Multiple non-consecutive
+     * dates planned to be supported in the future.)
+     */
     this.mode = 'single';
+    /**
+     * Whether to render as a singleline text input or
+     * as a multiline textarea. (If `true`, `pre` and `post`
+     * values will be ignored, if present.)
+     */
     this.multiline = false;
-    this.name = undefined;
-    this.placeholder = undefined;
-    this.post = undefined;
-    this.pre = undefined;
-    this.readonly = undefined;
-    this.required = undefined;
-    this.step = undefined;
     this.type = 'text';
-    this.value = undefined;
     this.characterCount = 0;
     this.passwordVisible = false;
   }
@@ -2520,12 +2517,18 @@ const XplInput = class {
         this.input = el;
       }, required: this.required, step: this.step, type: type, value: this.value })) : (index.h("textarea", { disabled: this.disabled, id: this._id, name: this.name, onInput: () => this.updateCharacterCount(), placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
         this.input = el;
-      }, required: this.required }, this.value)), this.type === 'date' && (index.h("xpl-icon", { class: "xpl-input-calendar", icon: "calendar-month", size: 24 })), this.type === 'password' && (index.h("button", { "aria-label": "Toggle password visibility", class: "xpl-input-password", onClick: () => {
+      }, required: this.required }, this.value)), this.type === 'date' && (index.h("span", { class: "xpl-input-calendar" }, index.h("i", { class: "far fa-calendar-alt" }))), this.type === 'password' && (index.h("button", { class: "xpl-input-password", onClick: () => {
         this.passwordVisible = !this.passwordVisible;
-      }, role: "presentation" }, index.h("xpl-icon", { icon: this.passwordVisible ? 'eye-closed' : 'eye', size: 24 }))), this.post && !this.multiline && (index.h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)), this.multiline && this.maxCharacterCount !== undefined && (index.h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount))), this.error !== undefined && this.error.length > 0 && (index.h("label", { class: "xpl-input-error", htmlFor: this._id }, index.h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))));
+      }, role: "presentation" }, index.h("span", { class: "sr-only" }, "Toggle password visibility"), index.h("i", { class: "far fa-eye", style: {
+        display: this.passwordVisible
+          ? 'none'
+          : 'block',
+      } }), index.h("i", { class: "far fa-eye-slash", style: {
+        display: this.passwordVisible
+          ? 'block'
+          : 'none',
+      } }))), this.post && !this.multiline && (index.h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)), this.multiline && this.maxCharacterCount !== undefined && (index.h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount))), this.error !== undefined && this.error.length > 0 && (index.h("label", { class: "xpl-input-error", htmlFor: this._id }, index.h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))));
   }
 };
 
 exports.xpl_input = XplInput;
-
-//# sourceMappingURL=xpl-input.cjs.entry.js.map

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

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-000e170c.js');
+const index = require('./index-54ba5804.js');
+require('./regular-872f5226.js');
 
 const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {
   const hasRight = avatars || badges || subtext;
@@ -12,7 +13,7 @@ const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata,
       return index.h("li", null, d);
     }
     else {
-      return (index.h("li", null, index.h("xpl-icon", { icon: d.icon }), ' ', d.text));
+      return (index.h("li", null, index.h("span", { class: `far fa-${d.icon}` }), ' ', d.text));
     }
   }))))), hasRight && (index.h("div", { class: "xpl-list-right" }, subtext && (index.h("div", { class: "xpl-list-item-subtext" }, subtext)), avatars && (index.h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map((a) => (index.h("img", { src: a, alt: "" }))))), badges &&
     badges.map((b) => {
@@ -28,6 +29,28 @@ const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata,
 const XplList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * `items` should be an array of objects with the following signature:
+     * {
+     *   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").
+     *   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.
+     *   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges
+     *     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.
+     *     text: string;
+     *     variant?: string;
+     *   }[];
+     *   href?: string;          // A URL, if this list item is meant to link somewhere.
+     *   title: string;          // The text to be displayed for the list item.
+     *   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed
+     *     icon: string;         // Font Awesome icons) to be displayed as metadata below the title.
+     *     text: string;
+     *   }[];
+     *   subtext?: string;       // Subtext to be displayed on the right.
+     * }
+     *
+     * - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering
+     *   the right-hand side of the list item.
+     */
     this.items = [];
   }
   render() {
@@ -36,5 +59,3 @@ const XplList = class {
 };
 
 exports.xpl_list = XplList;
-
-//# sourceMappingURL=xpl-list.cjs.entry.js.map

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

@@ -2,12 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-000e170c.js');
+const index = require('./index-54ba5804.js');
 
 const XplMainNav = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.navWidth = index.createEvent(this, "navWidth", 7);
+    /**
+     * @property {string}  width  - The width of the Main Nav.
+     */
     this.width = 'default';
   }
   navWidthHandler() {
@@ -25,5 +28,3 @@ const XplMainNav = class {
 };
 
 exports.xpl_main_nav = XplMainNav;
-
-//# sourceMappingURL=xpl-main-nav.cjs.entry.js.map

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-000e170c.js');
+const index = require('./index-54ba5804.js');
 
 const XplPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.page = index.createEvent(this, "page", 7);
+    this.current = 1;
     /**
      * Private `_goto` method respects the `waitForCallback` prop --
      * it will always emit the `page` event, but won't actually update
@@ -29,10 +30,6 @@ const XplPagination = class {
       if (this.current < numPages)
         this._goto(this.current + 1);
     };
-    this.total = undefined;
-    this.perPage = undefined;
-    this.waitForCallback = undefined;
-    this.current = 1;
   }
   /**
    * Calling `goto` with a page number (which should probably be
@@ -77,5 +74,3 @@ const XplPagination = class {
 };
 
 exports.xpl_pagination = XplPagination;
-
-//# sourceMappingURL=xpl-pagination.cjs.entry.js.map

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-000e170c.js');
+const index = require('./index-54ba5804.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 : {};
@@ -456,23 +456,35 @@ function tagWidth(text) {
 const XplSelect = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.selectChange = index.createEvent(this, "selectChange", 7);
+    /**
+     * An array of choices for the user to choose from.
+     * Each choice should be of the form:
+     * {
+     *   label: string;
+     *   href?: string;
+     *   value?: string;
+     *   isGroupHeading?: boolean;
+     * }
+     */
     this.choices = [];
-    this.description = undefined;
-    this.disabled = undefined;
-    this.error = undefined;
-    this.label = undefined;
+    /**
+     * Whether to allow a single choice or multiple choices.
+     */
     this.mode = 'single';
-    this.name = undefined;
-    this.placeholder = undefined;
+    /**
+     * Only used in multi-choice selects. If `true`,
+     * badges representing selections that would overflow the
+     * container are replaced with "+x more" (where x is the
+     * number not shown). If `false`, the container's height will
+     * adjust to show all badges representing selections.
+     */
     this.truncate = true;
-    this.selectedValues = undefined;
     this.active = false;
     this.id = v4.v4();
     this.keepFocus = false;
-    this.selected = undefined;
     this.value = '';
     this.displayValue = '';
+    // infinity isn't real, it's just a mathematical construct, it can't hurt you
     this.visibleChoices = Infinity;
   }
   componentWillLoad() {
@@ -480,27 +492,6 @@ const XplSelect = class {
       this.choices && this.choices.length > 0
         ? this.choices.map(() => false)
         : [];
-    if (this.selectedValues) {
-      const isSingleMode = this.mode === 'single';
-      if (isSingleMode) {
-        this.choices.forEach((choice) => {
-          const shouldBeSelected = choice.value.includes(this.selectedValues) ||
-            choice.label.includes(this.selectedValues);
-          if (shouldBeSelected)
-            choice.isSelected = true;
-        });
-      }
-      else {
-        this.choices.forEach(({ options }) => {
-          options.forEach((option) => {
-            const shouldBeSelected = this.selectedValues.includes(option.value || option.label);
-            if (shouldBeSelected)
-              option.isSelected = true;
-          });
-        });
-      }
-      this.update();
-    }
     window.addEventListener('click', (e) => {
       const el = e.target;
       const select = el.closest('.xpl-select');
@@ -563,9 +554,6 @@ const XplSelect = class {
         .join('|');
     }
   }
-  handleValueStateChange(newValue) {
-    this.selectChange.emit(newValue);
-  }
   render() {
     let visibleChoices = 0;
     return (index.h(index.Host, { class: {
@@ -596,9 +584,8 @@ const XplSelect = class {
         ? this.selected.map((v, i) => {
           if (!v)
             return null;
-          if (visibleChoices >= this.visibleChoices) {
+          if (visibleChoices >= this.visibleChoices)
             return null;
-          }
           visibleChoices++;
           return (index.h("xpl-tag", { onClose: () => {
               this.flattenChoices().forEach((v, j) => {
@@ -628,16 +615,11 @@ const XplSelect = class {
         const { dropdown } = this;
         if (!this.disabled)
           dropdown.isOpen = !dropdown.isOpen;
-      }, type: "button" })), !this.disabled && (index.h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
+      } })), !this.disabled && (index.h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
         this.update();
         this.maybeTruncateChoices();
-      } })), this.error !== undefined && this.error.length > 0 && (index.h("label", { class: "xpl-input-error", htmlFor: this.id }, index.h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))), index.h("input", { type: "hidden", name: this.name, value: this.value })));
+      } })), this.error !== undefined && this.error.length > 0 && (index.h("label", { class: "xpl-input-error", htmlFor: this.id }, index.h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))), index.h("input", { type: "hidden", value: this.value })));
   }
-  static get watchers() { return {
-    "value": ["handleValueStateChange"]
-  }; }
 };
 
 exports.xpl_select = XplSelect;
-
-//# sourceMappingURL=xpl-select.cjs.entry.js.map

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

@@ -2,18 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-000e170c.js');
+const index = require('./index-54ba5804.js');
 const v4 = require('./v4-14140ff3.js');
 
 const XplToggle = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.checked = undefined;
-    this.description = undefined;
-    this.disabled = undefined;
-    this.heading = undefined;
-    this.label = undefined;
-    this.name = undefined;
+    /**
+     * The size of the toggle -- `default` or `small`
+     */
     this.variant = 'default';
     this.id = v4.v4();
   }
@@ -35,5 +32,3 @@ const XplToggle = class {
 };
 
 exports.xpl_toggle = XplToggle;
-
-//# sourceMappingURL=xpl-toggle.cjs.entry.js.map

package/dist/collection/collection-manifest.json

@@ -1,7 +1,5 @@
 {
   "entries": [
-    "./components/xpl-icon/xpl-icon.js",
-    "./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
     "./components/xpl-application-shell/xpl-application-shell.js",
     "./components/xpl-avatar/xpl-avatar.js",
     "./components/xpl-backdrop/xpl-backdrop.js",
@@ -13,12 +11,11 @@
     "./components/xpl-checkbox/xpl-checkbox.js",
     "./components/xpl-choicelist/xpl-choicelist.js",
     "./components/xpl-content-area/xpl-content-area.js",
-    "./components/xpl-dashboard/xpl-dashboard.js",
-    "./components/xpl-data-card/xpl-data-card.js",
     "./components/xpl-divider/xpl-divider.js",
     "./components/xpl-dropdown/xpl-dropdown.js",
     "./components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js",
     "./components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js",
+    "./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
     "./components/xpl-grid/xpl-grid.js",
     "./components/xpl-grid-item/xpl-grid-item.js",
     "./components/xpl-input/xpl-input.js",
@@ -36,8 +33,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.1.0",
-    "typescriptVersion": "4.9.5"
+    "version": "2.8.0",
+    "typescriptVersion": "4.2.3"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/xpl-application-shell/xpl-application-shell.js

@@ -1,10 +1,21 @@
-import { h, Host } from '@stencil/core';
+import { Component, Host, h, Listen, State, Prop } from '@stencil/core';
 export class XplApplicationShell {
   constructor() {
+    /**
+     * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+     */
     this.withSubnav = false;
+    /**
+     * @property {boolean} - Whether or not the Grid should have space for a utility bar
+     */
     this.withUtility = true;
+    /**
+     * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+     */
     this.navWidth = 'default';
-    this.isNavOpenAtStartup = undefined;
+    /**
+     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
+     */
     this.navOpen = true;
   }
   closeNavOnMobile() {
@@ -24,12 +35,6 @@ export class XplApplicationShell {
   connectedCallback() {
     this.closeNavOnMobile();
   }
-  componentWillLoad() {
-    this.navOpen =
-      this.isNavOpenAtStartup !== undefined
-        ? this.isNavOpenAtStartup
-        : this.navOpen;
-  }
   render() {
     let applicationShellClasses = 'xpl-application-shell';
     if (this.withUtility)
@@ -38,126 +43,105 @@ export class XplApplicationShell {
     navClasses += this.navOpen
       ? ` xpl-application-shell__nav--${this.navWidth}--open`
       : ` xpl-application-shell__nav--${this.navWidth}`;
-    return (h(Host, { class: applicationShellClasses }, h("div", { class: navClasses }, h("slot", { name: "nav" })), h("div", { class: "xpl-application-shell__subnav" }, h("slot", { name: "subnav" })), h("div", { class: "xpl-application-shell__utility" }, h("slot", { name: "utility" })), h("div", { class: "xpl-application-shell__content" }, h("slot", { name: "content" })), h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: {
-        'xpl-application-shell__backdrop--open': this.navOpen,
-      }, relative: true })));
+    return (h(Host, { class: applicationShellClasses },
+      h("div", { class: navClasses },
+        h("slot", { name: "nav" })),
+      h("div", { class: "xpl-application-shell__subnav" },
+        h("slot", { name: "subnav" })),
+      h("div", { class: "xpl-application-shell__utility" },
+        h("slot", { name: "utility" })),
+      h("div", { class: "xpl-application-shell__content" },
+        h("slot", { name: "content" })),
+      h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: {
+          'xpl-application-shell__backdrop--open': this.navOpen,
+        }, relative: true })));
   }
   static get is() { return "xpl-application-shell"; }
-  static get properties() {
-    return {
-      "withSubnav": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar"
-            }],
-          "text": ""
-        },
-        "attribute": "with-subnav",
-        "reflect": false,
-        "defaultValue": "false"
+  static get properties() { return {
+    "withSubnav": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "withUtility": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{boolean} - Whether or not the Grid should have space for a utility bar"
-            }],
-          "text": ""
-        },
-        "attribute": "with-utility",
-        "reflect": false,
-        "defaultValue": "true"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar",
+            "name": "property"
+          }],
+        "text": ""
       },
-      "navWidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted."
-            }],
-          "text": ""
-        },
-        "attribute": "nav-width",
-        "reflect": false,
-        "defaultValue": "'default'"
+      "attribute": "with-subnav",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "withUtility": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "isNavOpenAtStartup": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{boolean} - *"
-            }, {
-              "name": "property",
-              "text": "{boolean} - Optional property that defines whether or not the main nav is open at startup."
-            }],
-          "text": ""
-        },
-        "attribute": "is-nav-open-at-startup",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "navOpen": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "navOpen",
-        "method": "navToggleHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "navWidth",
-        "method": "navWithHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "onWindowResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{boolean} - Whether or not the Grid should have space for a utility bar",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "with-utility",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "navWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "nav-width",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+  static get states() { return {
+    "navOpen": {}
+  }; }
+  static get listeners() { return [{
+      "name": "navOpen",
+      "method": "navToggleHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "navWidth",
+      "method": "navWithHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
 }
-//# sourceMappingURL=xpl-application-shell.js.map