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

package/dist/collection/components/slider/slider.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";
@@ -23,35 +23,35 @@ export class Slider {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** 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;
     /**
-     * When true, number values are displayed with a group separator corresponding to the language and country format.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
-    /** When true, indicates a histogram is present. */
+    /** When `true`, indicates a histogram is present. */
     this.hasHistogram = false;
-    /** When true, displays label handles with their numeric value. */
+    /** When `true`, displays label handles with their numeric value. */
     this.labelHandles = false;
-    /** When true and "ticks" is specified, displays label tick marks with their numeric value. */
+    /** When `true` and `ticks` is specified, displays label tick marks with their numeric value. */
     this.labelTicks = false;
     /** The component's maximum selectable value. */
     this.max = 100;
     /** The component's minimum selectable value. */
     this.min = 0;
     /**
-     * When true, the slider will display values from high to low.
+     * When `true`, the slider will display values from high to low.
      *
      * Note that this value will be ignored if the slider has an associated histogram.
      */
     this.mirrored = false;
-    /** When true, sets a finer point for handles. */
+    /** When `true`, sets a finer point for handles. */
     this.precise = false;
     /**
-     * When true, the component must have a value in order for the form to submit.
+     * When `true`, the component must have a value in order for the form to submit.
      */
     this.required = false;
-    /** When true, enables snap selection in coordination with "step" via a mouse. */
+    /** When `true`, enables snap selection in coordination with `step` via a mouse. */
     this.snap = false;
     /** Specifies the interval to move with the up, or down keys. */
     this.step = 1;
@@ -122,11 +122,11 @@ export class Slider {
      */
     this.determineGroupSeparator = (value) => {
       if (typeof value === "number") {
-        numberStringFormatter.setOptions({
+        numberStringFormatter.numberFormatOptions = {
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
           useGrouping: this.groupSeparator
-        });
+        };
         return numberStringFormatter.localize(value.toString());
       }
     };
@@ -814,7 +814,7 @@ export class Slider {
         "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,
@@ -832,7 +832,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
         },
         "attribute": "group-separator",
         "reflect": true,
@@ -850,7 +850,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, indicates a histogram is present."
+          "text": "When `true`, indicates a histogram is present."
         },
         "attribute": "has-histogram",
         "reflect": true,
@@ -876,7 +876,7 @@ export class Slider {
               "name": "see",
               "text": "[DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)"
             }],
-          "text": "A list of the histogram's x,y coordinates within the component's \"min\" and \"max\". Displays above the component's track."
+          "text": "A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track."
         }
       },
       "histogramStops": {
@@ -911,7 +911,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays label handles with their numeric value."
+          "text": "When `true`, displays label handles with their numeric value."
         },
         "attribute": "label-handles",
         "reflect": true,
@@ -929,7 +929,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true and \"ticks\" is specified, displays label tick marks with their numeric value."
+          "text": "When `true` and `ticks` is specified, displays label tick marks with their numeric value."
         },
         "attribute": "label-ticks",
         "reflect": true,
@@ -965,7 +965,7 @@ export class Slider {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "For multiple selections, the accessible name for the second handle, such as \"Temperature, upper bound\"."
+          "text": "For multiple selections, the accessible name for the second handle, such as `\"Temperature, upper bound\"`."
         },
         "attribute": "max-label",
         "reflect": false
@@ -1017,7 +1017,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Accessible name for first (or only) handle, such as \"Temperature, lower bound\"."
+          "text": "Accessible name for first (or only) handle, such as `\"Temperature, lower bound\"`."
         },
         "attribute": "min-label",
         "reflect": false
@@ -1051,7 +1051,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the slider will display values from high to low.\n\nNote that this value will be ignored if the slider has an associated histogram."
+          "text": "When `true`, the slider will display values from high to low.\n\nNote that this value will be ignored if the slider has an associated histogram."
         },
         "attribute": "mirrored",
         "reflect": true,
@@ -1125,7 +1125,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, sets a finer point for handles."
+          "text": "When `true`, sets a finer point for handles."
         },
         "attribute": "precise",
         "reflect": true,
@@ -1143,7 +1143,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,
@@ -1161,7 +1161,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, enables snap selection in coordination with \"step\" via a mouse."
+          "text": "When `true`, enables snap selection in coordination with `step` via a mouse."
         },
         "attribute": "snap",
         "reflect": true,

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

@@ -0,0 +1,227 @@
+import { text, number, array, boolean as booleanFn, select } 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/Controls/Slider",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-slider
+    min="${number("min", 0)}"
+    max="${number("max", 100)}"
+    value="${number("value", 50)}"
+    step="${number("step", 1)}"
+    min-label="${text("min-label", "Temperature")}"
+    ${boolean("disabled", false)}
+    ${boolean("label-handles", false)}
+    ${boolean("label-ticks", false)}
+    ticks="${number("ticks", 0)}"
+    page-step="${number("page-step", 5)}"
+    ${boolean("precise", false)}
+    ${boolean("mirrored", false)}
+    ${boolean("snap", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-slider>
+`;
+export const range = () => html `
+  <calcite-slider
+    min="${number("min", 0)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 25)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 75)}"
+    step="${number("step", 1)}"
+    ${boolean("label-handles", false)}
+    ${boolean("label-ticks", false)}
+    ticks="${number("ticks", 20)}"
+    ${boolean("precise", false)}
+    ${boolean("snap", true)}
+    ${boolean("mirrored", false)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-slider>
+`;
+export const darkThemeMirroredRange_TestOnly = () => html `
+  <calcite-slider
+    class="calcite-theme-dark"
+    mirrored
+    min="${number("min", 0)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 25)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 75)}"
+    step="${number("step", 1)}"
+    ${boolean("label-handles", true)}
+    ${boolean("label-ticks", true)}
+    ticks="${number("ticks", 20)}"
+    ${boolean("precise", true)}
+    ${boolean("snap", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-slider>
+`;
+darkThemeMirroredRange_TestOnly.story = {
+    parameters: { themes: themesDarkDefault }
+};
+export const rangeLabeledTicks_TestOnly = () => html `
+  <calcite-slider
+    min="${number("min", 5)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 95)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 100)}"
+    step="${number("step", 10)}"
+    ${boolean("label-handles", true)}
+    ${boolean("label-ticks", true)}
+    ${boolean("precise", false)}
+    ${boolean("snap", true)}
+  ></calcite-slider>
+`;
+export const rangeLabeledTicksOverlappingAtMax_TestOnly = () => html `
+  <calcite-slider
+    min="${number("min", 5)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 100)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 100)}"
+    step="${number("step", 10)}"
+    ${boolean("label-handles", true)}
+    ${boolean("label-ticks", true)}
+    ${boolean("precise", false)}
+    ${boolean("snap", true)}
+  ></calcite-slider>
+`;
+export const rangeLabeledTicksOverlappingAtMin_TestOnly = () => html `
+  <calcite-slider
+    min="${number("min", 5)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 5)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 5)}"
+    step="${number("step", 10)}"
+    ${boolean("label-handles", true)}
+    ${boolean("label-ticks", true)}
+    ${boolean("precise", false)}
+    ${boolean("snap", true)}
+  ></calcite-slider>
+`;
+export const rangeLabeledTicksEdgePositioningAtMax_TestOnly = () => html `
+  <calcite-slider
+    min="${number("min", 5)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 99.5)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 100)}"
+    step="${number("step", 10)}"
+    ${boolean("label-handles", true)}
+    ${boolean("label-ticks", true)}
+    ${boolean("precise", false)}
+    ${boolean("snap", true)}
+  ></calcite-slider>
+`;
+export const rangeLabeledTicksEdgePositioningAtMin_TestOnly = () => html `
+  <calcite-slider
+    min="${number("min", 5)}"
+    min-label="${text("min-label", "Temperature, lower bound")}"
+    min-value="${number("min-value", 5)}"
+    max="${number("max", 100)}"
+    max-label="${text("max-label", "Temperature, upper bound")}"
+    max-value="${number("max-value", 5.5)}"
+    step="${number("step", 10)}"
+    ${boolean("label-handles", true)}
+    ${boolean("label-ticks", true)}
+    ${boolean("precise", false)}
+    ${boolean("snap", true)}
+  ></calcite-slider>
+`;
+export const Histogram = () => {
+    const slider = document.createElement("calcite-slider");
+    slider.min = number("min", -100);
+    slider.minValue = number("min-value", -33.32);
+    slider.max = number("max", 100);
+    slider.maxValue = number("max-value", 30.87);
+    slider.histogram = array("histogram", [
+        [-90, 0],
+        [-60, 12],
+        [-20, 25],
+        [20, 55],
+        [60, 10],
+        [90, 0]
+    ], "  ");
+    slider.labelHandles = booleanFn("label-handles", false);
+    slider.labelTicks = booleanFn("label-ticks", false);
+    slider.ticks = number("ticks", 10);
+    slider.precise = booleanFn("precise", false);
+    slider.snap = booleanFn("snap", false);
+    slider.scale = select("scale", ["s", "m", "l"], "m");
+    slider.style.minWidth = "60vw";
+    return slider;
+};
+export const HistogramWithColors = () => {
+    const slider = document.createElement("calcite-slider");
+    slider.min = number("min", 0);
+    slider.minValue = number("min-value", 35);
+    slider.max = number("max", 100);
+    slider.maxValue = number("max-value", 55);
+    slider.histogram = array("histogram", [
+        [0, 0],
+        [20, 12],
+        [40, 25],
+        [60, 55],
+        [80, 10],
+        [100, 0]
+    ], "  ");
+    slider.style.minWidth = "60vw";
+    const colors = array("histogram colors", ["red", "green", "blue"]);
+    const offsets = array("histogram color offsets", colors.map((_, i) => `${(1 / (colors.length - 1)) * i}`));
+    slider.histogramStops = colors.map((color, i) => ({ offset: parseFloat(offsets[i]), color }));
+    slider.scale = select("scale", ["s", "m", "l"], "m");
+    return slider;
+};
+export const darkThemeHistogramRTL_TestOnly = () => {
+    const slider = document.createElement("calcite-slider");
+    slider.min = number("min", 0);
+    slider.minValue = number("min-value", 25);
+    slider.max = number("max", 100);
+    slider.maxValue = number("max-value", 75);
+    slider.histogram = array("histogram", [
+        [0, 0],
+        [20, 12],
+        [40, 25],
+        [60, 55],
+        [80, 10],
+        [100, 0]
+    ], "  ");
+    slider.labelHandles = booleanFn("label-handles", false);
+    slider.labelTicks = booleanFn("label-ticks", false);
+    slider.ticks = number("ticks", 10);
+    slider.precise = booleanFn("precise", false);
+    slider.snap = booleanFn("snap", false);
+    slider.scale = select("scale", ["s", "m", "l"], "m");
+    slider.style.minWidth = "60vw";
+    slider.className = "calcite-theme-dark";
+    return slider;
+};
+darkThemeHistogramRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-slider disabled value="5"></calcite-slider>`;
+export const wordBreakDoesNotAffectLabels_TestOnly = () => html `<calcite-slider
+    min="-100"
+    max="100"
+    min-value="-100"
+    max-value="100"
+    step="10"
+    ticks="10"
+    label-handles
+    label-ticks
+    style="word-break: break-all"
+  ></calcite-slider>`;
+export const WithLabelHandlesAndNoValue_TestOnly = () => html ` <calcite-slider max="750"></calcite-slider> `;

package/dist/collection/components/sortable-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 = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.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 Sortable from "sortablejs";
 import { h } from "@stencil/core";

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

package/dist/collection/components/split-button/split-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 { h } from "@stencil/core";
 import { CSS } from "./resources";
@@ -15,10 +15,10 @@ export class SplitButton {
     this.appearance = "solid";
     /** Specifies the color of the component. */
     this.color = "blue";
-    /** 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;
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      *
      * @internal
      */
@@ -26,7 +26,7 @@ export class SplitButton {
     /** Specifies the icon used for the dropdown menu. */
     this.dropdownIconType = "chevron";
     /**
-      When true, a busy indicator is displayed on the primary button.
+      When `true`, a busy indicator is displayed on the primary button.
      */
     this.loading = false;
     /**
@@ -154,7 +154,7 @@ export class SplitButton {
         "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,
@@ -175,7 +175,7 @@ export class SplitButton {
               "name": "internal",
               "text": undefined
             }],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -233,7 +233,7 @@ export class SplitButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed on the primary button."
+          "text": "When `true`, a busy indicator is displayed on the primary button."
         },
         "attribute": "loading",
         "reflect": true,
@@ -296,7 +296,7 @@ export class SplitButton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When true, the primary button icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+          "text": "When `true`, the primary button icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "primary-icon-flip-rtl",
         "reflect": true

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

@@ -0,0 +1,112 @@
+import { text, select } from "@storybook/addon-knobs";
+import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Buttons/Split Button",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:70vw;">
+    <calcite-split-button
+      active
+      appearance="${select("appearance", ["solid", "outline", "clear", "transparent"], "solid")}"
+      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      scale="${select("size", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      ${boolean("loading", false)}
+      ${boolean("disabled", false)}
+      primary-icon-start="${select("primary-icon-start", iconNames, iconNames[0])}"
+      primary-text="${text("primary-text", "Primary Option")}"
+      primary-label="${text("primary-label", "Primary Option")}"
+      dropdown-label="${text("dropdown-label", "Additional Options")}"
+      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
+    >
+      <calcite-dropdown-group selection-mode="none">
+        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+  </div>
+`;
+export const iconEnd_TestOnly = () => html `
+  <div style="width:70vw;">
+    <calcite-split-button
+      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      scale="${select("size", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      ${boolean("loading", false)}
+      ${boolean("disabled", false)}
+      primary-icon-end="${select("primary-icon-end", iconNames, iconNames[0])}"
+      primary-text="${text("primary-text", "Primary Option")}"
+      primary-label="${text("primary-label", "Primary Option")}"
+      dropdown-label="${text("dropdown-label", "Additional Options")}"
+      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
+    >
+      <calcite-dropdown-group selection-mode="none">
+        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+  </div>
+`;
+export const iconStartAndIconEnd = () => html `
+  <div style="width:70vw;">
+    <calcite-split-button
+      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      scale="${select("size", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      ${boolean("loading", false)}
+      ${boolean("disabled", false)}
+      primary-icon-start="${select("primary-icon-end", iconNames, iconNames[0])}"
+      primary-icon-end="${select("primary-icon-end", iconNames, iconNames[0])}"
+      primary-text="${text("primary-text", "Primary Option")}"
+      primary-label="${text("primary-label", "Primary Option")}"
+      dropdown-label="${text("dropdown-label", "Additional Options")}"
+      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
+    >
+      <calcite-dropdown-group selection-mode="none">
+        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="width:70vw;">
+    <calcite-split-button
+      appearance="${select("appearance", ["solid", "outline", "clear", "transparent"], "solid")}"
+      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      scale="${select("size", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      ${boolean("loading", false)}
+      ${boolean("disabled", false)}
+      primary-icon-start="${select("primary-icon-start", iconNames, iconNames[0])}"
+      primary-text="${text("primary-text", "Primary Option")}"
+      dropdown-label="${text("dropdown-label", "Additional Options")}"
+      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
+      class="calcite-theme-dark"
+    >
+      <calcite-dropdown-group selection-mode="none">
+        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-split-button disabled>
+  <calcite-dropdown-group selection-mode="none">
+    <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+    <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+    <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+  </calcite-dropdown-group>
+</calcite-split-button>`;