@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/[sandbox]/examples/link.ts

@@ -1,51 +0,0 @@
-import "@/components/link/Link";
-import { html } from "lit-element";
-
-export const linkTemplate = html`
-  <div class="row">
-    <md-link href="#">
-      Default Link
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link disabled>
-      Disabled Link
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link tag="div">
-      Link Tag DIV
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link tag="span">
-      Link Tag Span
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link inline>
-      Link inline
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link inline disabled>
-      Link inline disabled
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link inline href="http://test.com" target="_blank">
-      Link Opened in new window
-    </md-link>
-  </div>
-
-  <div class="row">
-    <md-link tag="div" tab-index="1">
-      tab index 1
-    </md-link>
-  </div>
-  <div class="row">
-    <md-link tag="div" tab-index="-1">
-      tab-index -1
-    </md-link>
-  </div>
-`;

package/src/[sandbox]/examples/list.ts

@@ -1,45 +0,0 @@
-import "@/components/list/List";
-import "@/components/list/ListItem";
-import { html } from "lit-element";
-
-export const listTemplate = html`
-  <h3>Default</h3>
-  <md-list label="Transuranium elements">
-    <md-list-item aria-label="Neptunium" slot="list-item">Neptunium</md-list-item>
-    <md-list-item aria-label="Plutonium" slot="list-item">Plutonium</md-list-item>
-    <md-list-item aria-label="Americium" slot="list-item">Americium</md-list-item>
-    <md-list-item aria-label="Curium" slot="list-item">Curium</md-list-item>
-    <md-list-item aria-label="Berkelium" slot="list-item">Berkelium</md-list-item>
-    <md-list-item aria-label="Californium" slot="list-item">Californium</md-list-item>
-  </md-list>
-
-  <h3>Disabled</h3>
-  <md-list label="Transuranium elements">
-    <md-list-item slot="list-item">Neptunium</md-list-item>
-    <md-list-item slot="list-item" disabled>Plutonium</md-list-item>
-    <md-list-item slot="list-item">Americium</md-list-item>
-    <md-list-item slot="list-item" disabled>Curium</md-list-item>
-    <md-list-item slot="list-item">Berkelium</md-list-item>
-    <md-list-item slot="list-item">Californium</md-list-item>
-  </md-list>
-
-  <h3>PreSelected</h3>
-  <md-list label="Transuranium elements" activated="3">
-    <md-list-item slot="list-item">Neptunium</md-list-item>
-    <md-list-item slot="list-item">Plutonium</md-list-item>
-    <md-list-item slot="list-item">Americium</md-list-item>
-    <md-list-item slot="list-item">Curium</md-list-item>
-    <md-list-item slot="list-item">Berkelium</md-list-item>
-    <md-list-item slot="list-item">Californium</md-list-item>
-  </md-list>
-
-  <h3>Orientation</h3>
-  <md-list label="Transuranium elements" alignment="horizontal">
-    <md-list-item slot="list-item">Neptunium</md-list-item>
-    <md-list-item slot="list-item">Plutonium</md-list-item>
-    <md-list-item slot="list-item">Americium</md-list-item>
-    <md-list-item slot="list-item">Curium</md-list-item>
-    <md-list-item slot="list-item">Berkelium</md-list-item>
-    <md-list-item slot="list-item">Californium</md-list-item>
-  </md-list>
-`;

package/src/[sandbox]/examples/loading.ts

@@ -1,8 +0,0 @@
-import "@/components/loading/Loading";
-import { html } from "lit-element";
-
-export const loadingTemplate = html`
-  <md-loading></md-loading>
-  <md-loading size="middle"></md-loading>
-  <md-loading size="large"></md-loading>
-`;

package/src/[sandbox]/examples/meeting-alert.ts

@@ -1,108 +0,0 @@
-import "@/components//meeting-alert/MeetingAlert";
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import svgWhatsapp from "@img/whatsapp.svg";
-import { html } from "lit-element";
-import { querySelectorDeep } from "query-selector-shadow-dom";
-
-let isMeetingAlertOpenAttr = false;
-let isMeetingAlertOpenProp = false;
-
-function toggleMeetingAlertAttr() {
-  const meetingAlert = querySelectorDeep("#triggered-meeting-alert");
-  isMeetingAlertOpenAttr = !isMeetingAlertOpenAttr;
-  isMeetingAlertOpenAttr && meetingAlert?.setAttribute("show", "");
-  !isMeetingAlertOpenAttr && meetingAlert?.removeAttribute("show");
-}
-
-function toggleMeetingAlertProp() {
-  const meetingAlertProp = querySelectorDeep("#triggered-meeting-alert-prop");
-  isMeetingAlertOpenProp = !isMeetingAlertOpenProp;
-  meetingAlertProp.show = isMeetingAlertOpenProp;
-}
-
-export const meetingAlertTemplate = html`
-  <h3>md-meeting-alert no image</h3>
-  <div class="row">
-    <md-button value="value" @click=${toggleMeetingAlertAttr}>toggle meeting alert using attribute</md-button>
-    <md-meeting-alert
-      id="triggered-meeting-alert"
-      status="Queue_Demo7"
-      title="Attribute Trigger"
-      .onKeyDown=${() => console.log("passed onKeyDown Func")}
-    >
-    </md-meeting-alert>
-  </div>
-  <br />
-  <div class="row">
-    <md-button @click=${toggleMeetingAlertProp}>toggle meeting alert using property</md-button>
-    <md-meeting-alert
-      id="triggered-meeting-alert-prop"
-      .show=${isMeetingAlertOpenProp}
-      status="Queue_Demo7"
-      title="Property Trigger"
-      .onSnooze=${() => console.log("passed onSnooze Func")}
-      .onKeyDown=${() => console.log("passed onKeyDown Func")}
-    >
-    </md-meeting-alert>
-  </div>
-  <h3>md-meeting-alert image through src</h3>
-  <md-meeting-alert
-    show
-    status="Queue_Demo7"
-    title="John Doe"
-    .onKeyDown=${() => console.log("passed onKeyDown Func")}
-    src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
-  >
-  </md-meeting-alert>
-  <h3>md-meeting-alert image through slot</h3>
-  <md-meeting-alert
-    show
-    status="Queue_Demo7"
-    title="Jane Doe"
-    userStyles=":host .md-alert { background: red; color: white }"
-  >
-    <span slot="custom-avatar">
-      <img
-        width="40"
-        src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
-      />
-    </span>
-  </md-meeting-alert>
-  <h3>md-meeting-alert svg through slot</h3>
-  <md-meeting-alert show status="Queue_Demo7" title="Jane Doe">
-    <span slot="custom-avatar">
-      <img width="40'" height="40'" src="${svgWhatsapp}" />
-    </span>
-  </md-meeting-alert>
-  <h3>md-meeting-alert action through slot</h3>
-  <md-meeting-alert show status="Queue_Demo7" title="Jane Doe">
-    <md-button
-      slot="custom-action"
-      ariaLabel="Action"
-      circle
-      @click=${(e: Event) => {
-        console.log("Custom action passed via slot");
-        e.stopPropagation();
-      }}
-      size=${44}
-      role="button"
-    >
-      <md-icon name="icon-alarm_16"></md-icon>
-    </md-button>
-  </md-meeting-alert>
-  <h3>md-meeting-alert with attendees</h3>
-  <md-meeting-alert
-    .attendees=${[
-      { title: "J $", src: null, alt: "J $" },
-      { title: "Jefe Guadelupe", src: null, alt: "Jefe Guadelupe" }
-    ]}
-    show
-    status="Queue_Demo7"
-    title="Jane Doe"
-  >
-    <md-button ariaLabel="Action" circle size=${44} role="button">
-      <md-icon name="icon-alarm_16"></md-icon>
-    </md-button>
-  </md-meeting-alert>
-`;

package/src/[sandbox]/examples/menu-item.ts

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import "@/components/menu/Menu";
-import "@/components/menu/MenuItem";
-import "@/components/icon/Icon";
-import { html } from "lit-element";
-
-export const menuItemTemplate = html`
-  <md-menu>
-    <md-menu-item>
-      <md-icon name="recents_16"></md-icon>
-      <span>Contact History</span>
-    </md-menu-item>
-    <md-menu-item disabled>
-      <md-icon name="apps_16"></md-icon>
-      <span>Cisco WxM</span>
-    </md-menu-item>
-    <md-menu-item>
-      <md-icon name="cancel_16"></md-icon>
-      <span>Cisco Test</span>
-    </md-menu-item>
-    <md-menu-item>
-      <md-icon name="alarm_16"></md-icon>
-      <span>Cisco Answer</span>
-    </md-menu-item>
-  </md-menu>
-`;

package/src/[sandbox]/examples/menu-overlay.ts

@@ -1,415 +0,0 @@
-import "@/components/button/Button";
-import "@/components/checkbox/Checkbox";
-import "@/components/checkbox/CheckboxGroup";
-import "@/components/input/Input";
-import "@/components/list/List";
-import "@/components/list/ListItem";
-import "@/components/menu-overlay/MenuOverlay";
-import "@/components/radio/Radio";
-import "@/components/radio/RadioGroup";
-import "@/components/tabs/TabPanel";
-import "@/components/tabs/Tabs";
-import "@/components/tooltip/Tooltip";
-import { html } from "lit-element";
-
-const longMenuOverlayContent = () => {
-  return html`
-    <div style="padding:1.25rem; width: 100%">
-      <md-checkbox>Default Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-      <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-    </div>
-  `;
-};
-
-export const menuOverlayTemplate = html`
-  <md-menu-overlay style="display: flex; justify-content: center;">
-    <md-button slot="menu-trigger" style="margin-left: 2rem;" variant="primary">Open Menu Overlay</md-button>
-    ${longMenuOverlayContent()}
-  </md-menu-overlay>
-
-  <h2>md-menu-overlay</h2>
-
-  <h3 class="sandbox-header">optional maxHeight Prop</h3>
-  <md-menu-overlay max-height="calc(100vh - 266.5px)">
-    <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-    ${longMenuOverlayContent()}
-  </md-menu-overlay>
-
-  <h3 class="sandbox-header">test overlay positioning</h3>
-  <div style="display: flex; margin: .5rem 0; padding: 0; justify-content: space-between">
-    <div>
-      <md-menu-overlay>
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem; width: 100%;">
-          <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-          </md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </div>
-
-    <div>
-      <md-menu-overlay>
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem ; width: 100%;">
-          <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-          </md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </div>
-
-    <div>
-      <md-menu-overlay>
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem; width: 100%;">
-          <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-          </md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </div>
-  </div>
-
-  <h3 class="sandbox-header">test overlay positioning</h3>
-  <div style="display: flex; margin: 1rem 1rem; padding: 0; justify-content: space-between">
-    <div>
-      <md-menu-overlay>
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem; width: 100%;">
-          <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-          </md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </div>
-
-    <div>
-      <md-menu-overlay>
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem; width: 100%;">
-          <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-          </md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </div>
-
-    <div>
-      <md-menu-overlay>
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem; width: 100%;">
-          <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-          </md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </div>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">sizes</h3>
-    <md-menu-overlay size="small">
-      <md-button slot="menu-trigger" variant="primary">Small Overlay</md-button>
-      <div style="padding:1.25rem; width: 100%;">
-        <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-        </md-input>
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-        <div style="text-align: center">
-          <p style="margin-bottom: .5rem">Please complete the entire form</p>
-          <md-button variant="primary">Submit</md-button>
-        </div>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay size="large">
-      <md-button slot="menu-trigger" variant="primary">Large Overlay</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-        </md-input>
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-        <div style="text-align: center">
-          <p style="margin-bottom: .5rem">Please complete the entire form</p>
-          <md-button variant="primary">Submit</md-button>
-        </div>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay custom-width="800px">
-      <md-button slot="menu-trigger" variant="primary">Custom Width</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-input htmlId="inputSearchClearPill" containerSize="small-12" placeholder="Enter Text" shape="pill" clear>
-        </md-input>
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-        <div style="text-align: center">
-          <p style="margin-bottom: .5rem">Please complete the entire form</p>
-          <md-button variant="primary">Submit</md-button>
-        </div>
-      </div>
-    </md-menu-overlay>
-  </div>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">Overlay placements with arrows</h3>
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <md-menu-overlay placement="bottom-start" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">bottom-start</md-button>
-      <div style="padding:1.25rem; width: 100%;">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay size="large" placement="bottom" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">bottom default</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="bottom-end" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">bottom-end</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="left-start" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">left-start</md-button>
-      <div style="padding:1.25rem; width: 100%;">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay size="large" placement="left" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">left</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="left-end" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">left-end</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-  </div>
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <md-menu-overlay placement="top-start" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">top-start</md-button>
-      <div style="padding:1.25rem; width: 100%;">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay size="large" placement="top" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">top</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="top-end" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">top-end</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="right-start" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">right-start</md-button>
-      <div style="padding:1.25rem; width: 100%;">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="right" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">right</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-checkbox checked>Option two</md-checkbox>
-      </div>
-    </md-menu-overlay>
-
-    <md-menu-overlay placement="right-end" show-arrow>
-      <md-button slot="menu-trigger" variant="primary">right-end</md-button>
-      <div style="margin:1.25rem; width: 100%">
-        <md-checkbox>Option one"</md-checkbox>
-        <md-tooltip message="tooltip within checkbox" placement="bottom">
-          <md-checkbox checked>Option two</md-checkbox>
-        </md-tooltip>
-      </div>
-    </md-menu-overlay>
-  </div>
-  </div>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">with list (focus)</h3>
-  <md-menu-overlay show-arrow>
-    <md-button slot="menu-trigger" slot="menu-trigger" variant="primary">Open List</md-button>
-    <md-list label="Transuranium elements" activated="3">
-      <md-list-item slot="list-item">Neptunium</md-list-item>
-      <md-list-item slot="list-item">Plutonium</md-list-item>
-      <md-list-item slot="list-item">Americium</md-list-item>
-      <md-list-item slot="list-item">Curium</md-list-item>
-      <md-list-item slot="list-item">Berkelium</md-list-item>
-      <md-list-item slot="list-item">Californium</md-list-item>
-    </md-list>
-  </md-menu-overlay>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">Without focusable content</h3>
-  <md-menu-overlay show-arrow>
-    <md-button slot="menu-trigger" slot="menu-trigger" variant="red">Click</md-button>
-    <div style="margin:1.25rem; width: 100%">
-      <span>Text</span>
-    </div>
-  </md-menu-overlay>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">Open focusable content</h3>
-  <md-menu-overlay is-open show-arrow>
-    <md-button slot="menu-trigger" slot="menu-trigger" variant="primary">Click</md-button>
-    <div style="margin:1.25rem; width: 100%">
-      <md-tabs>
-        <md-tab slot="tab">
-          <span>Contact History</span>
-          <md-icon name="recents_16"></md-icon>
-        </md-tab>
-        <md-tab-panel slot="panel">
-          <span>Content for "Contact History"</span>
-          <button type="button">Contact History</button>
-          <div style="margin-top:10px">
-            <md-radiogroup checked="0">
-              <md-radio slot="radio" value="Option 1">Option 1</md-radio>
-              <md-radio slot="radio" value="Option 2">Option 2</md-radio>
-              <md-radio slot="radio" value="Option 3">Option 3</md-radio>
-              <md-radio slot="radio" value="Option 4">Option 4</md-radio>
-            </md-radiogroup>
-            <md-input autofocus></md-input>
-          </div>
-        </md-tab-panel>
-        <md-tab slot="tab">
-          <span>Cisco WxM</span>
-          <md-icon name="apps_16"></md-icon>
-        </md-tab>
-        <md-tab-panel slot="panel">
-          <span>Content for "WxM"</span>
-          <button type="button">Cisco WxM</button>
-        </md-tab-panel>
-      </md-tabs>
-    </div>
-  </md-menu-overlay>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">Empty</h3>
-  <md-menu-overlay show-arrow>
-    <md-button slot="menu-trigger" slot="menu-trigger" variant="primary">Click</md-button>
-      <div style="margin:1.25rem; width: 100%">
-      </div>
-  </md-menu-overlay>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">With Tooltip Inside</h3>
-  <md-menu-overlay show-arrow>
-    <md-button slot="menu-trigger" slot="menu-trigger" variant="primary">Click</md-button>
-      <div style="margin:1.25rem; width: 100%">
-      <md-tooltip message="tooltip within overlay" placement="top">
-        <span>Tooltip Trigger Text</span>
-        </md-tooltip>
-      </div>
-  </md-menu-overlay>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">With Autofocused Content Inside</h3>
-  <md-menu-overlay show-arrow>
-    <md-button slot="menu-trigger" slot="menu-trigger" variant="primary">Click</md-button>
-      <div style="margin:1.25rem; width: 100%">
-          <md-checkboxgroup group-label="group_process" alignment="horizontal">
-            <md-checkbox slot="checkbox">Option one"</md-checkbox>
-            <md-checkbox slot="checkbox" checked>Option two</md-checkbox>
-          </md-checkboxgroup>
-          <md-input autofocus placeholder="Enter Text" shape="pill" clear></md-input>
-      </div>
-  </md-menu-overlay>
-  </div>
-`;