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

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

@@ -0,0 +1,187 @@
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import readme from "./readme.md";
+import itemReadme from "../list-item/readme.md";
+import groupReadme from "../list-item-group/readme.md";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/List",
+    parameters: {
+        notes: [readme, itemReadme, groupReadme]
+    },
+    ...storyFilters()
+};
+const thumbnailImage = placeholderImage({ width: 44, height: 44 });
+export const simple = () => html `
+  <calcite-list>
+    <calcite-list-item
+      label="Cras iaculis ultricies nulla."
+      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+    ></calcite-list-item>
+    <calcite-list-item
+      label="Ut aliquam sollicitudin leo."
+      description="Aliquam tincidunt mauris eu risus."
+    ></calcite-list-item>
+    <calcite-list-item
+      label="Vestibulum commodo felis quis tortor.
+    "
+      description="Vestibulum auctor dapibus neque.
+    "
+    ></calcite-list-item>
+  </calcite-list>
+`;
+export const onlyLabelVersusOnlyDescription_TestOnly = () => html `
+  <calcite-list>
+    <calcite-list-item label="This has no description."> </calcite-list-item>
+  </calcite-list>
+  <calcite-list>
+    <calcite-list-item description="This has no label."> </calcite-list-item>
+  </calcite-list>
+`;
+export const nestedListItemsAndGroupItems = () => html `
+  <calcite-list>
+    <calcite-list-item
+      label="Cras iaculis ultricies nulla."
+      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+    >
+      <calcite-list-item label="Ut aliquam sollicitudin leo." description="Aliquam tincidunt mauris eu risus.">
+        <calcite-list-item
+          label="Vestibulum commodo felis quis tortor."
+          description="Vestibulum auctor dapibus neque."
+        ></calcite-list-item></calcite-list-item
+    ></calcite-list-item>
+  </calcite-list>
+  <calcite-list>
+    <calcite-list-item-group heading="Digits">
+      <calcite-list-item
+        label="One"
+        description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+      ></calcite-list-item>
+      <calcite-list-item label="Two" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
+      <calcite-list-item label="Three" description="Vestibulum auctor dapibus neque."></calcite-list-item>
+    </calcite-list-item-group>
+    <calcite-list-item-group heading="Letters">
+      <calcite-list-item
+        label="A"
+        description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+      ></calcite-list-item>
+      <calcite-list-item label="B" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
+      <calcite-list-item
+        label="C"
+        description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+      ></calcite-list-item>
+    </calcite-list-item-group>
+  </calcite-list>
+`;
+export const startAndEndContentSlots = () => html `<calcite-list>
+  <calcite-list-item>
+    <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
+    <calcite-icon icon="layers" scale="m" slot="content-start"></calcite-icon>
+    <span slot="content-start">Some value or something and a <b>thing</b>.</span>
+    <div slot="content-end" style="display: flex; justify-content: flex-end">
+      <calcite-chip class="list-chip" icon="ribbon-rosette" scale="s">Review</calcite-chip>
+      <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
+    </div>
+  </calcite-list-item>
+  <calcite-list-item>
+    <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
+    <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
+    <span slot="content-start">Some value or something and a <b>thing</b>.</span>
+    <div slot="content-end" style="display: flex; justify-content: flex-end">
+      <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
+    </div>
+  </calcite-list-item>
+  <calcite-list-item>
+    <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
+    <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
+    <span slot="content-start">Some value or something and a <b>thing</b>.</span>
+    <div slot="content-end" style="display: flex; justify-content: flex-end">
+      <calcite-chip class="list-chip" icon="bell" color="red" scale="s">Halp!</calcite-chip>
+    </div>
+  </calcite-list-item>
+</calcite-list> `;
+export const richContent = () => html `
+  <calcite-list>
+    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
+      <calcite-icon scale="l" icon="effects" slot="content-start"></calcite-icon>
+      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
+      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
+      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
+      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
+    </calcite-list-item>
+    <calcite-list-item label="Finn Mertens" description="Part owner of the Tree House">
+      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
+      <calcite-icon scale="l" icon="running" slot="content-start"></calcite-icon>
+      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
+      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
+      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
+      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
+    </calcite-list-item>
+    <calcite-list-item label="Jake T. Dog" description="Part owner of the Tree House">
+      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
+      <calcite-icon scale="l" icon="walking" slot="content-start"></calcite-icon>
+      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
+      <calcite-icon
+        scale="s"
+        icon="exclamation-mark-triangle"
+        slot="content-end"
+        style="color: var(--calcite-ui-danger)"
+      ></calcite-icon>
+      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
+      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
+    </calcite-list-item>
+  </calcite-list>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-list class="calcite-theme-dark" dir="rtl">
+    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
+      <calcite-icon scale="l" icon="effects" slot="content-start"></calcite-icon>
+      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
+      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
+      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
+      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
+    </calcite-list-item>
+    <calcite-list-item label="Finn Mertens" description="Part owner of the Tree House">
+      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
+      <calcite-icon scale="l" icon="running" slot="content-start"></calcite-icon>
+      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
+      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
+      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
+      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
+    </calcite-list-item>
+    <calcite-list-item label="Jake T. Dog" description="Part owner of the Tree House">
+      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
+      <calcite-icon scale="l" icon="walking" slot="content-start"></calcite-icon>
+      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
+      <calcite-icon
+        scale="s"
+        icon="exclamation-mark-triangle"
+        slot="content-end"
+        style="color: var(--calcite-ui-danger)"
+      ></calcite-icon>
+      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
+      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
+    </calcite-list-item>
+  </calcite-list>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-list disabled>
+  <calcite-list-item
+    label="Cras iaculis ultricies nulla."
+    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+  ></calcite-list-item>
+  <calcite-list-item
+    disabled
+    label="Ut aliquam sollicitudin leo."
+    description="Aliquam tincidunt mauris eu risus."
+  ></calcite-list-item>
+  <calcite-list-item
+    label="Vestibulum commodo felis quis tortor.
+    "
+    description="Vestibulum auctor dapibus neque.
+    "
+  ></calcite-list-item>
+</calcite-list>`;

package/dist/collection/components/list/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 = {
   container: "container"

package/dist/collection/components/list-item/list-item.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 { SLOTS, CSS } from "./resources";
@@ -23,11 +23,11 @@ export class ListItem {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, prevents the content of the component from user interaction.
+     * When `true`, prevents the content of the component from user interaction.
      */
     this.nonInteractive = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
   }
@@ -124,7 +124,7 @@ export class ListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, prevents the content of the component from user interaction."
+          "text": "When `true`, prevents the content of the component from user interaction."
         },
         "attribute": "non-interactive",
         "reflect": true,
@@ -159,7 +159,7 @@ export class ListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,

package/dist/collection/components/list-item/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 = {
   container: "container",

package/dist/collection/components/list-item-group/list-item-group.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 } from "./resources";

package/dist/collection/components/list-item-group/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 = {
   heading: "heading",

package/dist/collection/components/loader/loader.css

@@ -89,7 +89,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-loader-font-size: When type is "determinate", the font size of the loading percentage.
+* @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `"determinate"`.
 * @prop --calcite-loader-size: The width and height of a non-inline loader.
 * @prop --calcite-loader-size-inline: The width and height of an inline loader.
 */

package/dist/collection/components/loader/loader.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 { guid } from "../../utils/guid";
@@ -12,13 +12,13 @@ export class Loader {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /** When `true`, the component is active. */
     this.active = false;
-    /** When true, displays smaller and appears to the left of the text. */
+    /** When `true`, displays smaller and appears to the left of the text. */
     this.inline = false;
     /** Specifies the size of the component. */
     this.scale = "m";
-    /** The component's value. Valid only for determinate indicators. Percent complete of 100. */
+    /** The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. */
     this.value = 0;
     /** Text that displays under the component's indicator. */
     this.text = "";
@@ -106,7 +106,7 @@ export class Loader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -124,7 +124,7 @@ export class Loader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays smaller and appears to the left of the text."
+          "text": "When `true`, displays smaller and appears to the left of the text."
         },
         "attribute": "inline",
         "reflect": true,
@@ -182,7 +182,7 @@ export class Loader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Use indeterminate if finding actual progress value is impossible."
+          "text": "Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible."
         },
         "attribute": "type",
         "reflect": true
@@ -199,7 +199,7 @@ export class Loader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component's value. Valid only for determinate indicators. Percent complete of 100."
+          "text": "The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100."
         },
         "attribute": "value",
         "reflect": false,

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

@@ -0,0 +1,42 @@
+import { number, color, select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Loader",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple_NoTest = () => html `
+  <calcite-loader
+    active
+    type="${select("type", ["determinate", "indeterminate"], "indeterminate")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("no-padding", false)}
+    value="${number("value", 0, { range: true, min: 0, max: 100, step: 1 })}"
+  />
+`;
+export const inline_NoTest = () => html `
+<div style="display: inline-flex;align-items: center;justify-content: center;width: 100%;">
+<calcite-loader
+  scale="${select("scale", ["s", "m", "l"], "m")}"
+  inline
+  active
+/></calcite-loader><span style="margin:0 10px">Next to some text</span>
+</div>
+`;
+export const customTheme_NoTest = () => html `
+  <calcite-loader
+    type="${select("type", ["determinate", "indeterminate"], "indeterminate")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("no-padding", false)}
+    value="${number("value", 0, { range: true, min: 0, max: 100, step: 1 })}"
+    style="
+    --calcite-ui-brand: ${color("calcite-ui-blue-1", "#50ba5f")};
+    --calcite-ui-brand-hover: ${color("calcite-ui-blue-2", "#1a6324")};
+    --calcite-ui-brand-press: ${color("calcite-ui-blue-3", "#338033")};"
+    active
+  />
+`;

package/dist/collection/components/modal/modal.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 { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -32,22 +32,22 @@ export class Modal {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the `calcite-modal` is active.
+     * When `true`, the component is active.
      *
-     * @deprecated use open instead
+     * @deprecated use `open` instead.
      */
     this.active = false;
-    /** When true,`calcite-modal`  opens  */
+    /** When `true`, displays and positions the component.  */
     this.open = false;
-    /** Passes a function to run before the `calcite-modal` closes. */
+    /** Passes a function to run before the component closes. */
     this.beforeClose = () => Promise.resolve();
-    /** When true, disables the component's close button. */
+    /** When `true`, disables the component's close button. */
     this.disableCloseButton = false;
-    /** When true, disables the closing of the component when clicked outside. */
+    /** When `true`, disables the closing of the component when clicked outside. */
     this.disableOutsideClose = false;
     /** Accessible name for the component's close button. */
     this.intlClose = TEXT.close;
-    /** When true, disables the default close on escape behavior. */
+    /** When `true`, disables the default close on escape behavior. */
     this.disableEscape = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -56,7 +56,7 @@ export class Modal {
     /** Sets the background color of the component's content. */
     this.backgroundColor = "white";
     /**
-     * When true, disables spacing to the content area slot.
+     * When `true`, disables spacing to the content area slot.
      *
      * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
      */
@@ -318,9 +318,9 @@ export class Modal {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use open instead"
+              "text": "use `open` instead."
             }],
-          "text": "When true, the `calcite-modal` is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -338,7 +338,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true,`calcite-modal`  opens"
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "open",
         "reflect": true,
@@ -363,7 +363,7 @@ export class Modal {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Passes a function to run before the `calcite-modal` closes."
+          "text": "Passes a function to run before the component closes."
         },
         "defaultValue": "() => Promise.resolve()"
       },
@@ -379,7 +379,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, disables the component's close button."
+          "text": "When `true`, disables the component's close button."
         },
         "attribute": "disable-close-button",
         "reflect": true,
@@ -397,7 +397,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, disables the closing of the component when clicked outside."
+          "text": "When `true`, disables the closing of the component when clicked outside."
         },
         "attribute": "disable-outside-close",
         "reflect": true,
@@ -433,7 +433,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, prevents the component from expanding to the entire screen on mobile devices."
+          "text": "When `true`, prevents the component from expanding to the entire screen on mobile devices."
         },
         "attribute": "docked",
         "reflect": true
@@ -450,7 +450,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, disables the default close on escape behavior."
+          "text": "When `true`, disables the default close on escape behavior."
         },
         "attribute": "disable-escape",
         "reflect": true,
@@ -514,7 +514,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the component to always be fullscreen (overrides width)."
+          "text": "Sets the component to always be fullscreen (overrides `width`)."
         },
         "attribute": "fullscreen",
         "reflect": true
@@ -574,7 +574,7 @@ export class Modal {
               "name": "deprecated",
               "text": "Use `--calcite-modal-padding` CSS variable instead."
             }],
-          "text": "When true, disables spacing to the content area slot."
+          "text": "When `true`, disables spacing to the content area slot."
         },
         "attribute": "no-padding",
         "reflect": true,

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

@@ -0,0 +1,66 @@
+import { select, text, number } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Modal",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-modal
+    ${boolean("open", true)}
+    color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
+    background-color="${select("background-color", ["white", "grey"], "white")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    width="${select("width", ["s", "m", "l"], "s")}"
+    ${boolean("fullscreen", false)}
+    ${boolean("docked", false)}
+    ${boolean("disable-escape", false)}
+    ${boolean("no-padding", false)}
+    intl-close="${text("intl-close", "Close")}"
+  >
+    <h3 slot="header">Small Modal</h3>
+    <div slot="content">
+      <p>The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.</p>
+    </div>
+    <calcite-button slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full"
+      >Back</calcite-button
+    >
+    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
+    <calcite-button slot="primary" width="full">Save</calcite-button>
+  </calcite-modal>
+`;
+export const darkThemeRTLCustomSize_NoTest = () => html `
+  <calcite-modal
+    class="calcite-theme-dark"
+    dir="rtl"
+    ${boolean("open", true)}
+    color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
+    background-color="${select("background-color", ["white", "grey"], "white")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    width="${number("width", 300)}"
+    ${boolean("fullscreen", false)}
+    ${boolean("docked", false)}
+    ${boolean("disable-escape", false)}
+    ${boolean("no-padding", false)}
+    intl-close="${text("intl-close", "Close")}"
+  >
+    <h3 slot="header">Small Modal</h3>
+    <div slot="content">
+      <p>
+        The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements. You can
+        customize the size using the width attribute.
+      </p>
+    </div>
+    <calcite-button slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full"
+      >Back</calcite-button
+    >
+    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
+    <calcite-button slot="primary" width="full">Save</calcite-button>
+  </calcite-modal>
+`;
+darkThemeRTLCustomSize_NoTest.parameters = { themes: themesDarkDefault };

package/dist/collection/components/modal/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 = {
   modal: "modal",