@esri/calcite-components 1.0.0-next.598 → 1.0.0-next.599

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -1,408 +0,0 @@
-import { number, select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme1 from "./readme.md";
-import readme2 from "../dropdown-group/readme.md";
-import readme3 from "../dropdown-item/readme.md";
-import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Buttons/Dropdown",
-    parameters: {
-        notes: [readme1, readme2, readme3]
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-dropdown
-    open
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group
-      selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-      group-title="Sort by"
-    >
-      <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-      <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
-      <calcite-dropdown-item>Title</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const simpleAutoWidth = () => html `
-  <calcite-dropdown
-    open
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group
-      selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-      group-title="Sort by"
-    >
-      <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-      <calcite-dropdown-item selected>Date</calcite-dropdown-item>
-      <calcite-dropdown-item>Title</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const simpleFullWidth = () => html `
-  <div style="width: 500px;">
-    <calcite-dropdown
-      style="width:100%"
-      open
-      placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["s", "m", "l"], "m")}"
-      type="${select("type", ["click", "hover"], "click")}"
-      ${boolean("disable-close-on-select", false)}
-      ${boolean("disabled", false)}
-    >
-      <calcite-button width="full" slot="dropdown-trigger">Open Dropdown</calcite-button>
-      <calcite-dropdown-group
-        selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-        group-title="Sort by"
-      >
-        <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-        <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
-        <calcite-dropdown-item>Title</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>
-  </div>
-`;
-export const withIcons = () => html `
-  <calcite-dropdown
-    open
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group
-      selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-      group-title="Icon Start"
-    >
-      <calcite-dropdown-item icon-start="list">List</calcite-dropdown-item>
-      <calcite-dropdown-item icon-start="grid" selected>Grid</calcite-dropdown-item>
-      <calcite-dropdown-item icon-start="table">Table</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group
-      selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-      group-title="Icon End"
-    >
-      <calcite-dropdown-item icon-end="list">List</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="grid" selected>Grid</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="table">Table</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group
-      selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-      group-title="Icon Both"
-    >
-      <calcite-dropdown-item icon-start="list" icon-end="data-check">List</calcite-dropdown-item>
-      <calcite-dropdown-item icon-start="grid" icon-end="data-check" selected>Grid</calcite-dropdown-item>
-      <calcite-dropdown-item icon-start="table" icon-end="data-check">Table</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const groupsAndSelectionModes = () => html `
-  <calcite-dropdown
-    open
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group group-title="Select one">
-      <calcite-dropdown-item>Apple</calcite-dropdown-item>
-      <calcite-dropdown-item selected>Orange</calcite-dropdown-item>
-      <calcite-dropdown-item>Grape</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Select multi" selection-mode="multi">
-      <calcite-dropdown-item>Asparagus</calcite-dropdown-item>
-      <calcite-dropdown-item selected>Potato</calcite-dropdown-item>
-      <calcite-dropdown-item selected>Yam</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Select none (useful for actions)" selection-mode="none">
-      <calcite-dropdown-item>Plant beans</calcite-dropdown-item>
-      <calcite-dropdown-item>Add peas</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const itemsAsLinks = () => html `
-  <calcite-dropdown
-    open
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group selection-mode="none" group-title="Select one">
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
-        >Throw Apples</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
-        >Visit Oranges</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
-        >Eat Grapes</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title" icon-start="camera-flash-on"
-        >Plant beans</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title" icon-end="camera-flash-on"
-        >Add peas</calcite-dropdown-item
-      >
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-dropdown
-    dir="rtl"
-    open
-    class="calcite-theme-dark"
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group group-title="Select one">
-      <calcite-dropdown-item icon-end="list">List</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="grid" selected>Grid</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="table">Table</calcite-dropdown-item>
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title">A link</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Select multi" selection-mode="multi">
-      <calcite-dropdown-item icon-end="list">List</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="grid" selected>Grid</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="table">Table</calcite-dropdown-item>
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title">A link</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Select none (useful for actions)" selection-mode="none">
-      <calcite-dropdown-item icon-end="list">List</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="grid" selected>Grid</calcite-dropdown-item>
-      <calcite-dropdown-item icon-end="table">Table</calcite-dropdown-item>
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title">A link</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const itemsAsLinksDarkTheme = () => html `
-  <calcite-dropdown
-    open
-    class="calcite-theme-dark"
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group selection-mode="none" group-title="Select one">
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
-        >Throw Apples</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
-        >Visit Oranges</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
-        >Eat Grapes</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title" icon-start="camera-flash-on"
-        >Plant beans</calcite-dropdown-item
-      >
-      <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title" icon-end="camera-flash-on"
-        >Add peas</calcite-dropdown-item
-      >
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-itemsAsLinksDarkTheme.parameters = { themes: themesDarkDefault };
-export const scrollingAfterCertainItems_TestOnly = () => html `
-  <calcite-dropdown
-    open
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    max-items="${number("max-items", 7, { min: 0, max: 10, step: 1 })}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
-    type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
-    ${boolean("disabled", false)}
-  >
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group group-title="First group">
-      <calcite-dropdown-item>1</calcite-dropdown-item>
-      <calcite-dropdown-item>2</calcite-dropdown-item>
-      <calcite-dropdown-item>3</calcite-dropdown-item>
-      <calcite-dropdown-item>4</calcite-dropdown-item>
-      <calcite-dropdown-item>5</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Second group">
-      <calcite-dropdown-item>6</calcite-dropdown-item>
-      <calcite-dropdown-item>7</calcite-dropdown-item>
-      <calcite-dropdown-item>8</calcite-dropdown-item>
-      <calcite-dropdown-item>9</calcite-dropdown-item>
-      <calcite-dropdown-item>10</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const scrollingWithoutMaxItems_TestOnly = () => html `
-  <calcite-dropdown open>
-    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group
-      selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-      group-title="Sort by"
-    >
-      <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-      <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
-      <calcite-dropdown-item>Title</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="First group">
-      <calcite-dropdown-item>1</calcite-dropdown-item>
-      <calcite-dropdown-item>2</calcite-dropdown-item>
-      <calcite-dropdown-item>3</calcite-dropdown-item>
-      <calcite-dropdown-item>4</calcite-dropdown-item>
-      <calcite-dropdown-item>5</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Second group">
-      <calcite-dropdown-item>6</calcite-dropdown-item>
-      <calcite-dropdown-item>7</calcite-dropdown-item>
-      <calcite-dropdown-item>8</calcite-dropdown-item>
-      <calcite-dropdown-item>9</calcite-dropdown-item>
-      <calcite-dropdown-item>10</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-`;
-export const noScrollingWhenMaxItemsEqualsItems_TestOnly = () => html ` <calcite-dropdown max-items="3" open>
-  <calcite-button slot="dropdown-trigger">Activate Dropdown</calcite-button>
-  <calcite-dropdown-group selection-mode="single" group-title="Selection Mode: Single">
-    <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-    <calcite-dropdown-item active>Date modified</calcite-dropdown-item>
-    <calcite-dropdown-item>Title</calcite-dropdown-item>
-  </calcite-dropdown-group>
-</calcite-dropdown>`;
-export const disabled_TestOnly = () => html ` <calcite-dropdown disabled>
-  <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-  <calcite-dropdown-group group-title="First group">
-    <calcite-dropdown-item>1</calcite-dropdown-item>
-    <calcite-dropdown-item>2</calcite-dropdown-item>
-    <calcite-dropdown-item>3</calcite-dropdown-item>
-    <calcite-dropdown-item>4</calcite-dropdown-item>
-    <calcite-dropdown-item>5</calcite-dropdown-item>
-  </calcite-dropdown-group>
-  <calcite-dropdown-group group-title="Second group">
-    <calcite-dropdown-item>6</calcite-dropdown-item>
-    <calcite-dropdown-item>7</calcite-dropdown-item>
-    <calcite-dropdown-item>8</calcite-dropdown-item>
-    <calcite-dropdown-item>9</calcite-dropdown-item>
-    <calcite-dropdown-item>10</calcite-dropdown-item>
-  </calcite-dropdown-group>
-</calcite-dropdown>`;
-export const flipPositioning_TestOnly = () => html `
-  <div style="margin:10px;">
-    <calcite-dropdown width="m" placement="${select("placement", menuPlacements, "top")}" open>
-      <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-      <calcite-dropdown-group>
-        <calcite-dropdown-item>1</calcite-dropdown-item>
-        <calcite-dropdown-item>2</calcite-dropdown-item>
-        <calcite-dropdown-item>3</calcite-dropdown-item>
-        <calcite-dropdown-item>4</calcite-dropdown-item>
-        <calcite-dropdown-item>5</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>
-  </div>
-`;
-flipPositioning_TestOnly.parameters = {
-    layout: "fullscreen"
-};
-export const alignedCenter_TestOnly = () => html `
-  <div style="text-align:center">
-    <calcite-dropdown
-      open
-      placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["s", "m", "l"], "m")}"
-      type="${select("type", ["click", "hover"], "click")}"
-      ${boolean("disable-close-on-select", false)}
-      ${boolean("disabled", false)}
-    >
-      <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-      <calcite-dropdown-group
-        selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-        group-title="Sort by"
-      >
-        <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-        <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
-        <calcite-dropdown-item>Title</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>
-  </div>
-`;
-export const alignedCenterRTL_TestOnly = () => html `
-  <div dir="rtl" style="text-align:center">
-    <calcite-dropdown
-      open
-      placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["s", "m", "l"], "m")}"
-      type="${select("type", ["click", "hover"], "click")}"
-      ${boolean("disable-close-on-select", false)}
-      ${boolean("disabled", false)}
-    >
-      <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-      <calcite-dropdown-group
-        selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
-        group-title="Sort by"
-      >
-        <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-        <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
-        <calcite-dropdown-item>Title</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>
-  </div>
-`;
-export const flipPlacements_TestOnly = () => html `
-  <style>
-    .my-dropdown {
-      margin-top: 50px;
-    }
-  </style>
-  <div style="height: 100px; overflow:scroll;">
-    <calcite-dropdown class="my-dropdown" open>
-      <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
-      <calcite-dropdown-group group-title="Sort by">
-        <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-        <calcite-dropdown-item active>Date modified</calcite-dropdown-item>
-        <calcite-dropdown-item>Title</calcite-dropdown-item>
-      </calcite-dropdown-group>
-      <calcite-dropdown-group group-title="Sort by">
-        <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-        <calcite-dropdown-item active>Date modified</calcite-dropdown-item>
-        <calcite-dropdown-item>Title</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>
-  </div>
-  <script>
-    document.querySelector(".my-dropdown").flipPlacements = ["right"];
-  </script>
-`;

package/dist/collection/components/fab/fab.stories.js

@@ -1,96 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { createComponentHTML as create, filterComponentAttributes, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-import { ICONS } from "./resources";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-const { scale } = ATTRIBUTES;
-export default {
-    title: "Components/Buttons/FAB",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([
-        {
-            name: "appearance",
-            commit() {
-                this.value = select("appearance", ["solid", "outline"], "outline");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "icon",
-            commit() {
-                this.value = text("icon", ICONS.plus);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "label",
-            commit() {
-                this.value = text("label", "Label");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "text",
-            commit() {
-                this.value = text("text", "Text");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "text-enabled",
-            commit() {
-                this.value = boolean("text-enabled", true);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "scale",
-            commit() {
-                this.value = select("scale", scale.values, scale.defaultValue);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-export const simple = () => create("calcite-fab", createAttributes());
-export const disabled_TestOnly = () => html `<calcite-fab disabled icon="plus"></calcite-fab>`;
-export const darkThemeRTL_TestOnly = () => create("calcite-fab", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    {
-        name: "dir",
-        value: "rtl"
-    },
-    {
-        name: "class",
-        value: "calcite-theme-dark"
-    }
-]));
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/flow/flow.stories.js

@@ -1,151 +0,0 @@
-import { boolean, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import itemReadme from "../panel/readme.md";
-import { SLOTS, TEXT } from "../panel/resources";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Flow",
-    parameters: {
-        notes: {
-            flow: readme,
-            item: itemReadme
-        }
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([], exceptions);
-};
-const createFlowItemAttributes = (group) => {
-    return [
-        {
-            name: "disabled",
-            value: boolean("disabled", false, group)
-        },
-        {
-            name: "heading",
-            value: text("heading", "Heading", group)
-        },
-        {
-            name: "loading",
-            value: boolean("loading", false, group)
-        },
-        {
-            name: "menu-open",
-            value: boolean("menuOpen", false, group)
-        },
-        {
-            name: "description",
-            value: text("description", "Description", group)
-        },
-        {
-            name: "intl-back",
-            value: text("intlBack", TEXT.back, group)
-        },
-        {
-            name: "intl-open",
-            value: text("intlOpen", TEXT.open, group)
-        },
-        {
-            name: "intl-close",
-            value: text("intlClose", TEXT.close, group)
-        }
-    ];
-};
-const menuActionsHTML = html `
-  <calcite-action
-    slot="${SLOTS.headerMenuActions}"
-    text-enabled
-    text="Add"
-    label="Add Item"
-    icon="plus"
-  ></calcite-action>
-  <calcite-action
-    slot="${SLOTS.headerMenuActions}"
-    text-enabled
-    text="Save"
-    label="Save Item"
-    icon="save"
-  ></calcite-action>
-  <calcite-action
-    slot="${SLOTS.headerMenuActions}"
-    text-enabled
-    text="Layers"
-    label="View Layers"
-    icon="layers"
-  ></calcite-action>
-`;
-const footerActionsHTML = html `
-  <calcite-button slot="${SLOTS.footerActions}" width="half" appearance="clear">Cancel</calcite-button>
-  <calcite-button slot="${SLOTS.footerActions}" width="half">Save</button>
-`;
-function createItemHTML(content) {
-    return `${menuActionsHTML}${content}${footerActionsHTML}`;
-}
-const item1HTML = html `
-  <p>
-    Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
-    semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus
-    habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non.
-    Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti
-    consectetur. Non porttitor tempor orci dictumst magna porta vitae.
-  </p>
-  <p>
-    Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique
-    sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc
-    torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet
-    tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum
-    gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis
-    leo.
-  </p>
-  <p>
-    Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis
-    fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti.
-    Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur
-    gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum
-    diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
-  </p>
-  <p>
-    Magna ligula neque phasellus. Velit duis auctor etiam nullam sociis nam neque quis. Donec fusce bibendum quam
-    egestas sociosqu orci tempus vulputate egestas penatibus urna sociosqu. Nulla nam potenti diam egestas litora
-    lobortis tristique maecenas pulvinar maecenas vitae tortor. Lacus purus facilisi est accumsan varius gravida
-    facilisis rutrum tortor potenti rhoncus id. Ipsum praesent tristique blandit taciti morbi torquent pharetra
-    fermentum aenean!
-  </p>
-  <p>
-    Congue eu duis integer nisl molestie nostra dis auctor lobortis tellus parturient. Porttitor dis curae; maecenas
-    quis praesent ridiculus posuere mus. Dictumst, vivamus fames semper congue fusce! Nunc placerat enim fermentum
-    posuere magna justo habitasse. Tristique placerat mauris, per nulla gravida dui urna ut nec venenatis! Non lacus
-    iaculis quisque, neque erat integer. Duis tortor ad habitant turpis dis eu mollis at facilisis. Tellus nisl amet
-    morbi fringilla mus dui neque himenaeos maecenas platea venenatis. Tristique nisl quisque ad aliquam senectus
-    pulvinar litora.
-  </p>
-`;
-const item2HTML = html `
-  <ul>
-    <li>
-      Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed
-      arcu. Cras consequat.
-    </li>
-    <li>
-      Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam
-      erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
-    </li>
-    <li>
-      Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
-      Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
-    </li>
-    <li>
-      Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
-    </li>
-  </ul>
-`;
-export const simple = () => create("calcite-flow", createAttributes(), `${create("calcite-flow-item", createFlowItemAttributes("Flow Item 1"), createItemHTML(item1HTML))}
-    ${create("calcite-flow-item", createFlowItemAttributes("Flow Item 2"), createItemHTML(item2HTML))}`);
-export const darkThemeRTL_TestOnly = () => create("calcite-flow", createAttributes({ exceptions: ["dir"] }).concat({
-    name: "class",
-    value: "calcite-theme-dark"
-}, { name: "dir", value: "rtl" }), `${create("calcite-flow-item", createFlowItemAttributes("Flow Item 1"), createItemHTML(item1HTML))}
-    ${create("calcite-flow-item", createFlowItemAttributes("Flow Item 2"), createItemHTML(item2HTML))}`);