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

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

@@ -0,0 +1,140 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Alert",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const titleMessageLink = () => html `
+<calcite-alert
+${boolean("icon", true)}
+${boolean("auto-dismiss", false)}
+auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
+placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
+${boolean("open", true)}
+scale="${select("scale", ["s", "m", "l"], "m")}"
+color="${select("color", ["green", "red", "yellow", "blue"], "blue")}">
+<div slot="title">Here's a general bit of information</div></div>
+<div slot="message">
+  Some kind of contextually relevant content
+</div>
+<calcite-link slot="link" title="my action">Take action</calcite-link>
+</calcite-alert>
+`;
+titleMessageLink.storyName = "Title, message, link";
+export const titleMessage = () => html `
+  <calcite-alert
+    ${boolean("icon", true)}
+    ${boolean("auto-dismiss", false)}
+    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
+    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
+    ${boolean("open", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+  >
+    <div slot="title">Something failed</div>
+    <div slot="message">That thing you wanted to do didn't work as expected</div>
+  </calcite-alert>
+`;
+titleMessage.storyName = "Title, message";
+export const messageLink = () => html `
+  <calcite-alert
+    ${boolean("icon", true)}
+    ${boolean("auto-dismiss", false)}
+    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
+    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
+    ${boolean("open", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+  >
+    <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
+    <calcite-link slot="link" title="my action">View layer</calcite-link>
+  </calcite-alert>
+`;
+messageLink.storyName = "Message, link";
+export const message = () => html `
+  <calcite-alert
+    ${boolean("icon", true)}
+    ${boolean("auto-dismiss", false)}
+    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
+    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
+    ${boolean("active", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    color="${select("color", ["green", "red", "yellow", "blue"], "yellow")}"
+  >
+    <div slot="message">Network connection interruption detected</div>
+  </calcite-alert>
+`;
+export const customIcon = () => html `
+  <calcite-alert
+    icon="${select("icon", iconNames, iconNames[0])}"
+    ${boolean("auto-dismiss", false)}
+    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
+    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
+    ${boolean("active", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+  >
+    <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
+    <calcite-link slot="link" title="my action">View layer</calcite-link>
+  </calcite-alert>
+`;
+export const queue_NoTest = () => html `
+  <div>
+    <h5>Open or add to queue</h5>
+    <calcite-button onclick='document.querySelector("#one").setAttribute("open", "")'>Open Alert 1</calcite-button>
+    <calcite-button onclick='document.querySelector("#two").setAttribute("open", "")'>Open Alert 2</calcite-button>
+    <calcite-button onclick='document.querySelector("[data-custom-id=my-id]").setAttribute("open", "")'
+      >Open Alert 3</calcite-button
+    >
+    <br />
+    <br />
+    <h5>Close or remove from queue</h5>
+    <calcite-button color="red" onclick='document.querySelector("#one").removeAttribute("open")'
+      >Close Alert 1</calcite-button
+    >
+    <calcite-button color="red" onclick='document.querySelector("#two").removeAttribute("open")'
+      >Close Alert 2</calcite-button
+    >
+    <calcite-button color="red" onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("open")'
+      >Close Alert 3</calcite-button
+    >
+    <calcite-alert id="one" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
+      <div slot="title">Your great thing happened</div>
+      <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
+      <calcite-link slot="link" title="my action">View layer</calcite-link>
+    </calcite-alert>
+    <calcite-alert id="two" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
+      <div slot="title">Your great thing happened</div>
+      <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
+      <calcite-link slot="link" title="my action">View layer</calcite-link>
+    </calcite-alert>
+    <calcite-alert data-custom-id="my-id" icon color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}">
+      <div slot="title">That didn't work out</div>
+      <div slot="message">That thing you wanted to do didn't work</div>
+      <calcite-link slot="link" title="my action">View layer</calcite-link>
+    </calcite-alert>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-alert
+    class="calcite-theme-dark"
+    ${boolean("icon", true)}
+    ${boolean("auto-dismiss", false)}
+    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
+    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
+    ${boolean("open", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+  >
+    <div slot="title">Something failed</div>
+    <div slot="message">That thing you wanted to do didn't work as expected</div>
+    <calcite-link slot="link" title="my action">My action</calcite-link>
+  </calcite-alert>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/alert/interfaces.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export var StatusIcons;
 (function (StatusIcons) {

package/dist/collection/components/alert/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const TEXT = {
   intlClose: "Close"

package/dist/collection/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";

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

@@ -0,0 +1,44 @@
+import { select, text } from "@storybook/addon-knobs";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { html } from "../../../support/formatting";
+import readme from "./readme.md";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Avatar",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-avatar
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    full-name="${text("full-name", "John Doe")}"
+    username="${text("username", "jdoe")}"
+    user-id="${text("user-id", "9a7c50e6b3ce4b859f7b31e302437164")}"
+    thumbnail="${text("thumbnail", placeholderImage({ width: 120, height: 120 }))}"
+  >
+  </calcite-avatar>
+`;
+export const missingThumbnail = () => html `
+  <calcite-avatar
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    full-name="${text("full-name", "John Doe")}"
+    username="${text("username", "jdoe")}"
+    user-id="${text("user-id", "9a7c50e6b3ce4b859f7b31e302437164")}"
+  >
+  </calcite-avatar>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-avatar
+    dir="rtl"
+    class="calcite-theme-dark"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    full-name="${text("full-name", "John Doe")}"
+    username="${text("username", "jdoe")}"
+    user-id="${text("user-id", "9a7c50e6b3ce4b859f7b31e302437164")}"
+  >
+  </calcite-avatar>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/avatar/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { hexToRGB } from "../color-picker/utils";
 /**

package/dist/collection/components/block/block.css

@@ -284,8 +284,15 @@ calcite-handle {
   color: var(--calcite-ui-text-1);
 }
 
+.container {
+  display: flex;
+  block-size: 100%;
+  flex-direction: column;
+}
+
 .content {
   position: relative;
+  flex: 1 1 0%;
 }
 
 @keyframes in {

package/dist/collection/components/block/block.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -142,10 +142,10 @@ export class Block {
     const buttonId = `${guid}-button`;
     const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? toAriaBoolean(open) : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), loading ? (h("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options }, h("slot", { name: SLOTS.headerMenuActions }))) : null));
     return (h(Host, null, h("article", { "aria-busy": toAriaBoolean(loading), class: {
-        [CSS.article]: true
+        [CSS.container]: true
       } }, headerNode, h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: {
-        content: true,
-        "content--spaced": !this.disablePadding
+        [CSS.content]: true,
+        [CSS.contentSpaced]: !this.disablePadding
       }, hidden: !open, id: regionId }, this.renderScrim()))));
   }
   static get is() { return "calcite-block"; }

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

@@ -0,0 +1,158 @@
+import { boolean, number, select, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create } from "../../../.storybook/utils";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import blockReadme from "./readme.md";
+import sectionReadme from "../block-section/readme.md";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Block",
+    parameters: {
+        notes: {
+            block: blockReadme,
+            section: sectionReadme
+        }
+    },
+    ...storyFilters()
+};
+const createBlockAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const group = "block";
+    return filterComponentAttributes([
+        {
+            name: "heading",
+            commit() {
+                this.value = text("heading", "Heading", group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "summary",
+            commit() {
+                this.value = text("summary", "summary", group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "open",
+            commit() {
+                this.value = boolean("open", true, group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "collapsible",
+            commit() {
+                this.value = boolean("collapsible", true, group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "loading",
+            commit() {
+                this.value = boolean("loading", false, group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "disabled",
+            commit() {
+                this.value = boolean("disabled", false, group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "heading-level",
+            commit() {
+                this.value = number("heading-level", 2, { min: 1, max: 6, step: 1 }, group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-collapse",
+            commit() {
+                this.value = text("intlCollapse", "Collapse", group);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-expand",
+            commit() {
+                this.value = text("intlExpand", "Expand", group);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+const createSectionAttributes = () => {
+    const group = "section (animals)";
+    const toggleDisplayOptions = ["button", "switch"];
+    return [
+        {
+            name: "text",
+            value: text("text", "Animals", group)
+        },
+        {
+            name: "open",
+            value: boolean("open", true, group)
+        },
+        {
+            name: "toggle-display",
+            value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group)
+        },
+        {
+            name: "intl-collapse",
+            value: text("intlCollapse", "Collapse", group)
+        },
+        {
+            name: "intl-expand",
+            value: text("intlExpand", "Expand", group)
+        }
+    ];
+};
+export const simple = () => create("calcite-block", createBlockAttributes(), html `
+      ${create("calcite-block-section", createSectionAttributes(), `<img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />`)}
+
+      <calcite-block-section text="Nature" open>
+        <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
+      </calcite-block-section>
+    `);
+export const withHeaderControl = () => create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `<label slot="control">test <input placeholder="I'm a header control"/></label>`);
+export const withIconAndHeader = () => create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `<div slot="icon">✅</div>`);
+export const disabled_TestOnly = () => html `<calcite-block
+  heading="heading"
+  summary="summary"
+  open
+  collapsible
+  disabled
+>
+  <calcite-block-section text="Nature" open>
+    <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
+  </calcite-block-section>
+</calcite-block>`;
+export const paddingDisabled_TestOnly = () => html ` <calcite-panel heading="Properties">
+  <calcite-block heading="Example block heading" summary="example summary heading" collapsible open disable-padding>
+    <div>calcite components ninja</div>
+  </calcite-block>
+</calcite-panel>`;
+export const darkThemeRTL_TestOnly = () => create("calcite-block", createBlockAttributes({ exceptions: ["dir"] }).concat({
+    name: "class",
+    value: "calcite-theme-dark"
+}, { name: "dir", value: "rtl" }), html `
+      ${create("calcite-block-section", createSectionAttributes(), `<img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />`)}
+
+      <calcite-block-section text="Nature" open>
+        <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
+      </calcite-block-section>
+    `);
+export const contentCanTakeFullHeight_TestOnly = () => html `<calcite-block open heading="Heading" summary="summary" style="height: 250px">
+    <div style="background: red; height: 100%;">should take full width of the content area</div>
+  </calcite-block>`;

package/dist/collection/components/block/resources.js

@@ -1,11 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
-  article: "article",
+  container: "container",
   content: "content",
+  contentSpaced: "content--spaced",
   headerContainer: "header-container",
   icon: "icon",
   statusIcon: "status-icon",

package/dist/collection/components/block-section/block-section.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/block-section/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   content: "content",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { h, Build } from "@stencil/core";

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

@@ -0,0 +1,129 @@
+import { text, select } from "@storybook/addon-knobs";
+import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import readme from "./readme.md";
+export default {
+    title: "Components/Buttons/Button",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-button
+    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("round", false)}
+    href="${text("href", "")}"
+    ${boolean("loading", false)}
+    ${boolean("disabled", false)}
+    width="${select("width", ["auto", "half", "full"], "auto")}"
+  >
+    ${text("text", "button text here")}
+  </calcite-button>
+`;
+export const withIconStart = () => html `
+  <calcite-button
+    alignment="${select("alignment", ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"], "center")}"
+    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("round", false)}
+    href="${text("href", "")}"
+    ${boolean("loading", false)}
+    ${boolean("disabled", false)}
+  >
+    ${text("text", "button text here")}
+  </calcite-button>
+`;
+withIconStart.storyName = "With icon-start";
+export const withIconEnd = () => html `
+  <calcite-button
+    alignment="${select("alignment", ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"], "center")}"
+    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    icon-end="${select("icon-end", iconNames, iconNames[0])}"
+    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("round", false)}
+    href="${text("href", "")}"
+    ${boolean("loading", false)}
+    ${boolean("disabled", false)}
+    width="${select("width", ["auto", "half", "full"], "auto")}"
+  >
+    ${text("text", "button text here")}
+  </calcite-button>
+`;
+withIconEnd.storyName = "With icon-end";
+export const withIconStartAndIconEnd = () => html `
+  <calcite-button
+    alignment="${select("alignment", ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"], "center")}"
+    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    icon-end="${select("icon-end", iconNames, iconNames[0])}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("round", false)}
+    href="${text("href", "")}"
+    ${boolean("loading", false)}
+    ${boolean("disabled", false)}
+    width="${select("width", ["auto", "half", "full"], "auto")}"
+  >
+    ${text("text", "button text here")}
+  </calcite-button>
+`;
+withIconStartAndIconEnd.storyName = "With icon-start and icon-end";
+export const setWidthContainer = () => html `
+  <div style="width: 480px; max-width: 100%; background-color: #fff">
+    <calcite-button
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    >
+      ${text("text", "button text here")}
+    </calcite-button>
+  </div>
+`;
+export const disabled_TestOnly = () => html `<calcite-button disabled>disabled</calcite-button>`;
+export const withIconStartEmpty_TestOnly = () => html ` <calcite-button icon-start> Button </calcite-button>`;
+withIconStartEmpty_TestOnly.storyName = "With icon-start set to empty";
+export const withIconEndEmpty_TestOnly = () => html ` <calcite-button icon-end> Button </calcite-button>`;
+withIconEndEmpty_TestOnly.storyName = "With icon-end set to empty";
+export const sideBySide_TestOnly = () => html `
+  <div style="width: 300px; max-width: 100%; display: flex; flex-direction: row; background-color: #fff">
+    <calcite-button
+      width="half"
+      appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "outline")}"
+      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    >
+      ${text("text", "Back")}
+    </calcite-button>
+    <calcite-button
+      width="half"
+      appearance="${select("appearance-2", ["solid", "clear", "outline", "transparent"], "solid")}"
+      color="${select("color-2", ["blue", "red", "neutral", "inverse"], "blue")}"
+      icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    >
+      ${text("text-2", "Some long string")}
+    </calcite-button>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-button
+    class="calcite-theme-dark"
+    dir="rtl"
+    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("round", false)}
+    href="${text("href", "")}"
+    ${boolean("loading", false)}
+    ${boolean("disabled", false)}
+    icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    icon-end="${select("icon-end", iconNames, iconNames[0])}"
+  >
+    ${text("text", "button text here")}
+  </calcite-button>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/button/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";