@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

package/dist/collection/components/select/select.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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -268,7 +268,7 @@ export class Select {
         "text": "Specifies the name of the component on form submission."
       },
       "attribute": "name",
-      "reflect": false
+      "reflect": true
     },
     "required": {
       "type": "boolean",

package/dist/collection/components/shell/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-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.css

@@ -142,8 +142,8 @@
 .content--behind {
   position: absolute;
   inset: 0px;
-  z-index: 1;
   border-width: 0px;
+  z-index: calc(1 - 1);
   display: initial;
 }
 

package/dist/collection/components/shell/shell.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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-center-row/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-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-panel/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-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

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

@@ -0,0 +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-beta.94
+ */
+export const CSS = {
+  handleLabel: "handle__label",
+  handleLabelMinValue: "handle__label--minValue",
+  handleLabelValue: "handle__label--value",
+  tickMin: "tick__label--min",
+  tickMax: "tick__label--max"
+};

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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -11,6 +11,9 @@ import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
+import { localizeNumberString } from "../../utils/locale";
+import { watchGlobalAttributes, unwatchGlobalAttributes } from "../../utils/globalAttributes";
+import { CSS } from "./resources";
 function isRange(value) {
   return Array.isArray(value);
 }
@@ -23,6 +26,10 @@ export class Slider {
     //--------------------------------------------------------------------------
     /** 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.
+     */
+    this.groupSeparator = false;
     /** When true, indicates a histogram is present. */
     this.hasHistogram = false;
     /** When true, displays label handles with their numeric value. */
@@ -61,6 +68,7 @@ export class Slider {
     this.minValueDragRange = null;
     this.maxValueDragRange = null;
     this.tickValues = [];
+    this.globalAttributes = {};
     this.dragUpdate = (event) => {
       event.preventDefault();
       if (this.dragProp) {
@@ -108,6 +116,19 @@ export class Slider {
     this.storeTrackRef = (node) => {
       this.trackEl = node;
     };
+    /**
+     * Returns a string representing the localized label value based on groupSeparator prop being on or off.
+     *
+     * @param value
+     */
+    this.determineGroupSeparator = (value) => {
+      const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
+      if (value) {
+        return this.groupSeparator
+          ? localizeNumberString(value.toString(), lang, this.groupSeparator, this.numberingSystem)
+          : value;
+      }
+    };
   }
   histogramWatcher(newHistogram) {
     this.hasHistogram = !!newHistogram;
@@ -128,11 +149,13 @@ export class Slider {
     this.setValueFromMinMax();
     connectLabel(this);
     connectForm(this);
+    watchGlobalAttributes(this, ["lang"]);
   }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
     this.removeDragListeners();
+    unwatchGlobalAttributes(this);
   }
   componentWillLoad() {
     this.tickValues = this.generateTickValues();
@@ -164,6 +187,8 @@ export class Slider {
     const id = this.el.id || this.guid;
     const maxProp = isRange(this.value) ? "maxValue" : "value";
     const value = isRange(this.value) ? this.maxValue : this.value;
+    const displayedValue = this.determineGroupSeparator(value);
+    const displayedMinValue = this.determineGroupSeparator(this.minValue);
     const min = this.minValue || this.min;
     const useMinValue = this.shouldUseMinValue();
     const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
@@ -172,6 +197,8 @@ export class Slider {
     const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
     const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
     const valueIsRange = isRange(this.value);
+    const handleLabelMinValueClasses = `${CSS.handleLabel} ${CSS.handleLabelMinValue}`;
+    const handleLabelValueClasses = `${CSS.handleLabel} ${CSS.handleLabelValue}`;
     const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
@@ -183,9 +210,9 @@ export class Slider {
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value),
+      h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue),
       h("div", { class: "handle" })));
     const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -193,9 +220,9 @@ export class Slider {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
       h("div", { class: "handle" }),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
+      h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
     const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
@@ -218,9 +245,9 @@ export class Slider {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value),
+      h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue),
       h("div", { class: "handle" }),
       h("div", { class: "handle-extension" })));
     const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
@@ -231,9 +258,9 @@ export class Slider {
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
       h("div", { class: "handle-extension" }),
       h("div", { class: "handle" }),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
+      h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
     const minHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
@@ -245,9 +272,9 @@ export class Slider {
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue"
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString()),
+      h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue),
       h("div", { class: "handle" })));
     const minHistogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
@@ -255,9 +282,9 @@ export class Slider {
         "thumb--active": this.dragProp === "minValue"
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
       h("div", { class: "handle" }),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
+      h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
     const minPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
@@ -274,9 +301,9 @@ export class Slider {
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
       h("div", { class: "handle-extension" }),
       h("div", { class: "handle" }),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
-      h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
+      h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue),
+      h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
       h("div", { class: {
           ["container"]: true,
@@ -336,11 +363,12 @@ export class Slider {
     const valueIsRange = isRange(this.value);
     const isMinTickLabel = tick === this.min;
     const isMaxTickLabel = tick === this.max;
+    const displayedTickValue = this.determineGroupSeparator(tick);
     const tickLabel = (h("span", { class: {
         tick__label: true,
-        "tick__label--min": isMinTickLabel,
-        "tick__label--max": isMaxTickLabel
-      } }, tick.toLocaleString()));
+        [CSS.tickMin]: isMinTickLabel,
+        [CSS.tickMax]: isMaxTickLabel
+      } }, displayedTickValue));
     if (this.labelTicks && !this.hasHistogram && !valueIsRange) {
       return tickLabel;
     }
@@ -844,6 +872,24 @@ export class Slider {
       "reflect": true,
       "defaultValue": "false"
     },
+    "groupSeparator": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
+      },
+      "attribute": "group-separator",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "hasHistogram": {
       "type": "boolean",
       "mutable": true,
@@ -1080,6 +1126,26 @@ export class Slider {
       "attribute": "name",
       "reflect": true
     },
+    "numberingSystem": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)"
+          }],
+        "text": "Specifies the Unicode numeral system used by the component for localization."
+      },
+      "attribute": "numbering-system",
+      "reflect": false
+    },
     "pageStep": {
       "type": "number",
       "mutable": false,
@@ -1095,7 +1161,7 @@ export class Slider {
         "text": "Specifies the interval to move with the page up, or page down keys."
       },
       "attribute": "page-step",
-      "reflect": false
+      "reflect": true
     },
     "precise": {
       "type": "boolean",
@@ -1112,7 +1178,7 @@ export class Slider {
         "text": "When true, sets a finer point for handles."
       },
       "attribute": "precise",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "required": {
@@ -1148,7 +1214,7 @@ export class Slider {
         "text": "When true, enables snap selection in coordination with \"step\" via a mouse."
       },
       "attribute": "snap",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "step": {
@@ -1166,7 +1232,7 @@ export class Slider {
         "text": "Specifies the interval to move with the up, or down keys."
       },
       "attribute": "step",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "1"
     },
     "ticks": {
@@ -1184,7 +1250,7 @@ export class Slider {
         "text": "Displays tick marks on the number line at a specified interval."
       },
       "attribute": "ticks",
-      "reflect": false
+      "reflect": true
     },
     "value": {
       "type": "number",
@@ -1224,7 +1290,7 @@ export class Slider {
         "text": "Specifies the size of the component."
       },
       "attribute": "scale",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"m\""
     }
   }; }
@@ -1233,7 +1299,8 @@ export class Slider {
     "minMaxValueRange": {},
     "minValueDragRange": {},
     "maxValueDragRange": {},
-    "tickValues": {}
+    "tickValues": {},
+    "globalAttributes": {}
   }; }
   static get events() { return [{
       "method": "calciteSliderInput",

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-beta.92
+ * v1.0.0-beta.94
  */
 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-beta.92
+ * v1.0.0-beta.94
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";
@@ -180,7 +180,7 @@ export class SortableList {
         "text": "Specifies which items inside the element should be draggable."
       },
       "attribute": "drag-selector",
-      "reflect": false
+      "reflect": true
     },
     "group": {
       "type": "string",
@@ -197,7 +197,7 @@ export class SortableList {
         "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
       },
       "attribute": "group",
-      "reflect": false
+      "reflect": true
     },
     "handleSelector": {
       "type": "string",
@@ -214,7 +214,7 @@ export class SortableList {
         "text": "The selector for the handle elements."
       },
       "attribute": "handle-selector",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"calcite-handle\""
     },
     "layout": {
@@ -237,7 +237,7 @@ export class SortableList {
         "text": "Indicates the horizontal or vertical orientation of the component."
       },
       "attribute": "layout",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"vertical\""
     },
     "disabled": {

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-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.css

@@ -99,19 +99,19 @@
   vertical-align: top;
 }
 
-:host([appearance=solid]):host([color=blue]) {
+:host:host([color=blue]) {
   --calcite-split-button-background: var(--calcite-ui-brand);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
-:host([appearance=solid]):host([color=red]) {
+:host:host([color=red]) {
   --calcite-split-button-background: var(--calcite-ui-danger);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
-:host([appearance=solid]):host([color=neutral]) {
+:host:host([color=neutral]) {
   --calcite-split-button-background: var(--calcite-ui-foreground-3);
   --calcite-split-button-divider: var(--calcite-ui-text-1);
 }
-:host([appearance=solid]):host([color=inverse]) {
+:host:host([color=inverse]) {
   --calcite-split-button-background: var(--calcite-ui-inverse);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
@@ -183,29 +183,35 @@
 }
 
 :host([appearance=outline]) .split-button__divider-container,
-:host([appearance=clear]) .split-button__divider-container {
+:host([appearance=clear]) .split-button__divider-container,
+:host([appearance=minimal]) .split-button__divider-container {
   border-block: 1px solid var(--calcite-split-button-divider);
 }
 :host([appearance=outline]):hover .split-button__divider-container,
-:host([appearance=clear]):hover .split-button__divider-container {
+:host([appearance=clear]):hover .split-button__divider-container,
+:host([appearance=minimal]):hover .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
 }
 
 :host([appearance=outline]:hover) .split-button__divider-container,
-:host([appearance=clear]:hover) .split-button__divider-container {
+:host([appearance=clear]:hover) .split-button__divider-container,
+:host([appearance=minimal]):hover .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
 }
 
 :host([appearance=outline]:focus-within):host([color=blue]),
-:host([appearance=clear]:focus-within):host([color=blue]) {
+:host([appearance=clear]:focus-within):host([color=blue]),
+:host([appearance=minimal]:focus-within):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand-press);
 }
 :host([appearance=outline]:focus-within):host([color=red]),
-:host([appearance=clear]:focus-within):host([color=red]) {
+:host([appearance=clear]:focus-within):host([color=red]),
+:host([appearance=minimal]:focus-within):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger-press);
 }
 :host([appearance=outline]:focus-within) .split-button__divider-container,
-:host([appearance=clear]:focus-within) .split-button__divider-container {
+:host([appearance=clear]:focus-within) .split-button__divider-container,
+:host([appearance=minimal]:focus-within) .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
 }
 

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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";
@@ -100,7 +100,7 @@ export class SplitButton {
       "mutable": false,
       "complexType": {
         "original": "ButtonAppearance",
-        "resolved": "\"clear\" | \"outline\" | \"solid\" | \"transparent\"",
+        "resolved": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
         "references": {
           "ButtonAppearance": {
             "location": "import",
@@ -258,7 +258,7 @@ export class SplitButton {
         "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"absolute\""
     },
     "primaryIconEnd": {

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

@@ -1,6 +1,6 @@
 /*!
  * 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-beta.92
+ * v1.0.0-beta.94
  */
 export {};

package/dist/collection/components/stepper/stepper.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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Listen, Method, Prop } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/stepper-item/stepper-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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -279,7 +279,7 @@ export class StepperItem {
         "text": "When true, the component contains an error that requires resolution from the user."
       },
       "attribute": "error",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "disabled": {

package/dist/collection/components/switch/switch.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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -205,7 +205,7 @@ export class Switch {
         "text": "When true, the component is checked."
       },
       "attribute": "switched",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "checked": {

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

@@ -1,6 +1,6 @@
 /*!
  * 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-beta.92
+ * v1.0.0-beta.94
  */
 export {};