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

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

@@ -1,4 +1,5 @@
-import { r as registerInstance, h, H as Host, F as Fragment } from './index-56581b5c.js';
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-3df6db84.js';
+import './regular-86225e9d.js';
 
 const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {
   const hasRight = avatars || badges || subtext;
@@ -8,7 +9,7 @@ const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata,
       return h("li", null, d);
     }
     else {
-      return (h("li", null, h("xpl-icon", { icon: d.icon }), ' ', d.text));
+      return (h("li", null, h("span", { class: `far fa-${d.icon}` }), ' ', d.text));
     }
   }))))), hasRight && (h("div", { class: "xpl-list-right" }, subtext && (h("div", { class: "xpl-list-item-subtext" }, subtext)), avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map((a) => (h("img", { src: a, alt: "" }))))), badges &&
     badges.map((b) => {
@@ -24,6 +25,28 @@ const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata,
 const XplList = class {
   constructor(hostRef) {
     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() {
@@ -32,5 +55,3 @@ const XplList = class {
 };
 
 export { XplList as xpl_list };
-
-//# sourceMappingURL=xpl-list.entry.js.map

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

@@ -1,9 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-56581b5c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
 
 const XplMainNav = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.navWidth = createEvent(this, "navWidth", 7);
+    /**
+     * @property {string}  width  - The width of the Main Nav.
+     */
     this.width = 'default';
   }
   navWidthHandler() {
@@ -21,5 +24,3 @@ const XplMainNav = class {
 };
 
 export { XplMainNav as xpl_main_nav };
-
-//# sourceMappingURL=xpl-main-nav.entry.js.map

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

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-56581b5c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3df6db84.js';
 
 const XplPagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.page = 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
@@ -25,10 +26,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
@@ -73,5 +70,3 @@ const XplPagination = class {
 };
 
 export { XplPagination as xpl_pagination };
-
-//# sourceMappingURL=xpl-pagination.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-56581b5c.js';
+import { r as registerInstance, h, H as Host } from './index-3df6db84.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 : {};
@@ -452,58 +452,42 @@ function tagWidth(text) {
 const XplSelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.selectChange = 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();
     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;
   }
-  /**
-   *
-   * @param _choices
-   */
-  onChoicesChanged(_choices) {
-    this.update();
-  }
   componentWillLoad() {
     this.selected =
       this.choices && this.choices.length > 0
         ? this.choices.map(() => false)
         : [];
-    if (this.selectedValues) {
-      const isSingleMode = this.mode === 'single';
-      if (isSingleMode) {
-        const selectedValue = this.selectedValues;
-        const shouldBeSelected = this.choices.find((choice) => (choice.value !== undefined
-          ? choice.value
-          : choice.label) === selectedValue);
-        if (shouldBeSelected !== undefined)
-          shouldBeSelected.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');
@@ -566,9 +550,6 @@ const XplSelect = class {
         .join('|');
     }
   }
-  handleValueStateChange(newValue) {
-    this.selectChange.emit(newValue);
-  }
   render() {
     let visibleChoices = 0;
     return (h(Host, { class: {
@@ -599,9 +580,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 (h("xpl-tag", { onClose: () => {
               this.flattenChoices().forEach((v, j) => {
@@ -631,17 +611,11 @@ const XplSelect = class {
         const { dropdown } = this;
         if (!this.disabled)
           dropdown.isOpen = !dropdown.isOpen;
-      }, type: "button" })), !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
+      } })), !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
         this.update();
         this.maybeTruncateChoices();
-      } })), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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))), h("input", { type: "hidden", name: this.name, value: this.value })));
+      } })), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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))), h("input", { type: "hidden", value: this.value })));
   }
-  static get watchers() { return {
-    "choices": ["onChoicesChanged"],
-    "value": ["handleValueStateChange"]
-  }; }
 };
 
 export { XplSelect as xpl_select };
-
-//# sourceMappingURL=xpl-select.entry.js.map

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

@@ -1,15 +1,12 @@
-import { r as registerInstance, h, H as Host } from './index-56581b5c.js';
+import { r as registerInstance, h, H as Host } from './index-3df6db84.js';
 import { v as v4 } from './v4-929670b7.js';
 
 const XplToggle = class {
   constructor(hostRef) {
     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();
   }
@@ -31,5 +28,3 @@ const XplToggle = class {
 };
 
 export { XplToggle as xpl_toggle };
-
-//# sourceMappingURL=xpl-toggle.entry.js.map

package/dist/stories/application-shell.stories.js

@@ -23,17 +23,11 @@ export default {
         type: 'select',
       },
     },
-    isNavOpenAtStartup: {
-      options: [true, false],
-      control: {
-        type: 'boolean',
-      },
-    },
   },
 };
 const renderBlock = (showBlock, block) => showBlock ? block : '';
-const utilityBar = (isNavOpenAtStartup) => `
-    <xpl-utility-bar slot="utility" nav-control is-nav-open-at-startup=${isNavOpenAtStartup}>
+const utilityBar = `
+    <xpl-utility-bar slot="utility" nav-control>
         <xpl-breadcrumbs slot="aside">
             <xpl-breadcrumb-item>
                 <a href="javascript:;">Locations</a>
@@ -88,11 +82,10 @@ const secondaryNav = `
         </ul>
     </xpl-secondary-nav>
 `;
-export const ApplicationShell = ({ contentSize, isNavOpenAtStartup, navWidth, showSecondaryNav, showUtilityBar, }) => {
+export const ApplicationShell = ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }) => {
   return `
         <xpl-application-shell
             ${showSecondaryNav ? 'with-subnav' : ''}
-            is-nav-open-at-startup=${isNavOpenAtStartup}
         >
             <xpl-main-nav slot="nav" width="${navWidth}">
                 <svg
@@ -230,7 +223,7 @@ export const ApplicationShell = ({ contentSize, isNavOpenAtStartup, navWidth, sh
                     </xpl-nav-item>
                 </ul>
             </xpl-main-nav>
-            ${renderBlock(showUtilityBar, utilityBar(isNavOpenAtStartup))}
+            ${renderBlock(showUtilityBar, utilityBar)}
             ${renderBlock(showSecondaryNav, secondaryNav)}
             <xpl-content-area slot="content" size="${contentSize}">
             <div>
@@ -345,10 +338,10 @@ export const ApplicationShell = ({ contentSize, isNavOpenAtStartup, navWidth, sh
 ApplicationShell.parameters = {
   layout: 'fullscreen',
   'web-component': {
-    render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, isNavOpenAtStartup, }) => {
+    render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }) => {
       const renderBlock = (showBlock, block) => showBlock ? block : '';
       const utilityBar = `
-                <xpl-utility-bar slot="utility" nav-control is-nav-open-at-startup=${isNavOpenAtStartup}>
+                <xpl-utility-bar slot="utility" nav-control>
                     <xpl-breadcrumbs slot="aside">
                         <xpl-breadcrumb-item>
                             <a href="javascript:;">Locations</a>
@@ -405,7 +398,6 @@ ApplicationShell.parameters = {
       return `
             <xpl-application-shell
                 ${showSecondaryNav ? 'with-subnav' : ''}
-                is-nav-open-at-startup=${isNavOpenAtStartup}
             >
                 <xpl-main-nav slot="nav" width="${navWidth}">
                     <svg
@@ -768,10 +760,8 @@ ApplicationShell.parameters = {
   },
 };
 ApplicationShell.args = {
-  contentSize: 'wide',
-  isNavOpenAtStartup: true,
   navWidth: 'default',
-  showSecondaryNav: true,
   showUtilityBar: true,
+  showSecondaryNav: true,
+  contentSize: 'wide',
 };
-//# sourceMappingURL=application-shell.stories.js.map

package/dist/stories/avatar.stories.js

@@ -171,4 +171,3 @@ AvatarGroup.args = {
     reverse: false,
 };
 */
-//# sourceMappingURL=avatar.stories.js.map

package/dist/stories/backdrop.stories.js

@@ -16,4 +16,3 @@ Backdrop.parameters = {
     },
   },
 };
-//# sourceMappingURL=backdrop.stories.js.map

package/dist/stories/badge.stories.js

@@ -46,4 +46,3 @@ Badge.args = {
   dot: false,
   text: 'Badge',
 };
-//# sourceMappingURL=badge.stories.js.map

package/dist/stories/breadcrumbs.stories.js

@@ -115,4 +115,3 @@ Breadcrumbs.args = {
   third: '<a href="javascript:;">Class A</a>',
   items: 3,
 };
-//# sourceMappingURL=breadcrumbs.stories.js.map

package/dist/stories/button-row.stories.js

@@ -66,4 +66,3 @@ ButtonRow.args = {
   secondary: '',
   tertiary: '',
 };
-//# sourceMappingURL=button-row.stories.js.map

package/dist/stories/button.stories.js

@@ -27,11 +27,6 @@ export default {
         type: 'select',
       },
     },
-    fullWidth: {
-      control: {
-        type: 'boolean',
-      },
-    },
     icon: {
       options: ['none', 'leading', 'trailing'],
       control: {
@@ -45,7 +40,7 @@ export default {
     },
   },
 };
-export const Button = ({ variant, size, disabled, fullWidth, state, text, icon, link, }) => {
+export const Button = ({ variant, size, disabled, state, text, icon, link, }) => {
   let attrs = '';
   if (variant !== 'primary')
     attrs += ` variant="${variant}"`;
@@ -64,31 +59,25 @@ export const Button = ({ variant, size, disabled, fullWidth, state, text, icon,
             `;
     return link ? `<a href='javascript:;'>${textBlock}</a>` : textBlock;
   };
-  return `<div style="width: 50vw; text-align: center;"><xpl-button
-                id="123"
+  return `<xpl-button
                 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></div>`;
+            </xpl-button>`;
 };
-const HtmlButton = ({ variant, size, state, disabled, text, icon, link, fullWidth, }) => {
+const HtmlButton = ({ variant, size, state, disabled, text, icon, link }) => {
   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>`;
-  let className = `xpl-button
+  const 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 : ''}
@@ -118,6 +107,4 @@ Button.args = {
   state: 'neutral',
   text: 'Get Coffee',
   icon: 'leading',
-  fullWidth: true,
 };
-//# sourceMappingURL=button.stories.js.map

package/dist/stories/checkbox.stories.js

@@ -76,4 +76,3 @@ Checkbox.args = {
   indeterminate: false,
   styled: false,
 };
-//# sourceMappingURL=checkbox.stories.js.map

package/dist/stories/choicelist.stories.js

@@ -110,4 +110,3 @@ Choicelist.args = {
   multi: false,
   styled: false,
 };
-//# sourceMappingURL=choicelist.stories.js.map

package/dist/stories/content-area.stories.js

@@ -51,4 +51,3 @@ ContentArea.parameters = {
 ContentArea.args = {
   size: 'wide',
 };
-//# sourceMappingURL=content-area.stories.js.map

package/dist/stories/divider.stories.js

@@ -32,4 +32,3 @@ Divider.args = {
   tier: 3,
   text: 'Lorem Ipsum',
 };
-//# sourceMappingURL=divider.stories.js.map

package/dist/stories/dropdown.stories.js

@@ -1,54 +1,47 @@
 export default {
   title: 'Components/Dropdown',
 };
-const simpleOptions = [
-  {
-    label: 'Choice 1',
-    value: 'choice-1',
-  },
-  {
-    label: 'Choice 2',
-    value: 'choice-2',
-    isSelected: true,
-  },
-  {
-    label: 'Choice 3 (disabled example)',
-    value: 'choice-3',
-    isDisabled: true,
-  },
-  {
-    label: 'Choice 4',
-    value: 'choice-4',
-  },
-  {
-    label: 'Choice 5',
-    value: 'choice-5',
-  },
-  {
-    label: 'Choice 6',
-    value: 'choice-6',
-  },
-  {
-    label: 'Choice 7',
-    value: 'choice-7',
-  },
-];
-export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, options, }) => {
+export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
   const attributes = {
     'close-on-select': closeOnSelect,
     mode,
     open,
     'select-on-focus': selectOnFocus,
   };
+  const options = [
+    {
+      label: 'Choice 1',
+    },
+    {
+      label: 'Choice 2',
+      isSelected: true,
+    },
+    {
+      label: 'Choice 3 (disabled example)',
+      isDisabled: true,
+    },
+    {
+      label: 'Choice 4',
+    },
+    {
+      label: 'Choice 5',
+    },
+    {
+      label: 'Choice 6',
+    },
+    {
+      label: 'Choice 7',
+    },
+  ];
   return `
         <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-dropdown
-                    id="xpl-dropdown-simple"
-                    ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
-                >
-                </xpl-dropdown>
-            </div>
+        <div style="position: relative; min-width: 200px; width: 100%">
+            <xpl-dropdown
+                id="xpl-dropdown-simple"
+                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            >
+            </xpl-dropdown>
+        </div>
         </div>
         <script>
             element = document.querySelector("#xpl-dropdown-simple");
@@ -75,7 +68,6 @@ Simple.args = {
   isOpen: true,
   mode: 'single',
   selectOnFocus: false,
-  options: simpleOptions,
 };
 export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
   const attributes = {
@@ -86,39 +78,39 @@ export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOn
   };
   return `
         <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-dropdown
-                    id="xpl-dropdown-simple-w-children"
-                    ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+        <div style="position: relative; min-width: 200px; width: 100%">
+            <xpl-dropdown
+                id="xpl-dropdown-simple"
+                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            >
+                <xpl-dropdown-option
+                    selected
+                    slot="options"
                 >
-                    <xpl-dropdown-option
-                        selected
-                        slot="options"
-                    >
-                        <label slot="option">
-                            <input type="radio" name="animal" value="dog"/>
-                            dog
-                        </label>
-                    </xpl-dropdown-option>
-                    <xpl-dropdown-option
-                        disabled
-                        slot="options"
-                    >
-                        <label slot="option">
-                            <input disabled type="radio" name="animal" value="cat"/>
-                            cat (disabled)
-                        </label>
-                    </xpl-dropdown-option>
-                    <xpl-dropdown-option
-                        slot="options"
-                    >
-                        <label slot="option">
-                            <input type="radio" name="animal" value="fish"/>
-                            fish (selected)
-                        </label>
-                    </xpl-dropdown-option>
-                </xpl-dropdown>
-            </div>
+                    <label slot="option">
+                        <input type="radio" name="animal" value="dog"/>
+                        dog
+                    </label>
+                </xpl-dropdown-option>
+                <xpl-dropdown-option
+                    disabled
+                    slot="options"
+                >
+                    <label slot="option">
+                        <input disabled type="radio" name="animal" value="cat"/>
+                        cat (disabled)
+                    </label>
+                </xpl-dropdown-option>
+                <xpl-dropdown-option
+                    slot="options"
+                >
+                    <label slot="option">
+                        <input type="radio" name="animal" value="fish"/>
+                        fish (selected)
+                    </label>
+                </xpl-dropdown-option>
+            </xpl-dropdown>
+        </div>
         </div>
     `;
 };
@@ -383,4 +375,3 @@ GroupSubComponent.parameters = {
 GroupSubComponent.args = {
   groupName: 'Choice 1',
 };
-//# sourceMappingURL=dropdown.stories.js.map

package/dist/stories/grid.stories.js

@@ -98,4 +98,3 @@ Grid.args = {
   unit4Sm: 6,
   unit4Xs: 6,
 };
-//# sourceMappingURL=grid.stories.js.map

package/dist/stories/input.stories.js

@@ -266,4 +266,3 @@ Password.args = {
   error: false,
   errorMessage: '',
 };
-//# sourceMappingURL=input.stories.js.map

package/dist/stories/list.stories.js

@@ -62,7 +62,7 @@ const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext, }
     ? [
       'Metadata',
       {
-        icon: 'mail',
+        icon: 'envelope',
         text: 'Metadata w/ Icon',
       },
     ]
@@ -113,7 +113,7 @@ const item = {${avatar !== 'none'
     metadata: [
         "Metadata",
         {
-            icon: "mail",
+            icon: "envelope",
             text: "Metadata w/ Icon",
         },
     ],`
@@ -152,4 +152,3 @@ List.args = {
   title: 'List Item',
   subtext: '',
 };
-//# sourceMappingURL=list.stories.js.map

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

@@ -306,4 +306,3 @@ MainNav.parameters = {
 MainNav.args = {
   width: 'default',
 };
-//# sourceMappingURL=main-nav.stories.js.map

package/dist/stories/pagination.stories.js

@@ -82,4 +82,3 @@ export const NumberedPaging = ({ currentPage }) => {
     </div>`;
 };
 */
-//# sourceMappingURL=pagination.stories.js.map