@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.83

package/dist/collection/components/slider/slider.css

@@ -200,9 +200,7 @@
   box-sizing: border-box;
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   height: var(--calcite-slider-handle-size);
   width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;

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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -100,6 +100,7 @@ export class Slider {
     };
     /**
      * Set the reference of the track Element
+     *
      * @internal
      * @param node
      */
@@ -549,6 +550,7 @@ export class Slider {
   }
   /**
    * Set the prop value if changed at the component level
+   *
    * @param valueProp
    * @param value
    */
@@ -567,6 +569,9 @@ export class Slider {
   }
   /**
    * If number is outside range, constrain to min or max
+   *
+   * @param value
+   * @param prop
    * @internal
    */
   clamp(value, prop) {
@@ -582,6 +587,8 @@ export class Slider {
   }
   /**
    * Translate a pixel position to value along the range
+   *
+   * @param x
    * @internal
    */
   translate(x) {
@@ -598,6 +605,8 @@ export class Slider {
   }
   /**
    * Get closest allowed value along stepped values
+   *
+   * @param num
    * @internal
    */
   getClosestStep(num) {
@@ -621,6 +630,8 @@ export class Slider {
   }
   /**
    * Get position of value along range as fractional value
+   *
+   * @param num
    * @return {number} number in the unit interval [0,1]
    * @internal
    */
@@ -755,6 +766,9 @@ export class Slider {
   }
   /**
    * Returns an integer representing the number of pixels to offset on the left or right side based on desired position behavior.
+   *
+   * @param leftBounds
+   * @param rightBounds
    * @internal
    */
   getHostOffset(leftBounds, rightBounds) {
@@ -771,6 +785,7 @@ export class Slider {
   /**
    * Returns an integer representing the number of pixels that the two given span elements are overlapping, taking into account
    * a space in between the two spans equal to the font-size set on them to account for the space needed to render a hyphen.
+   *
    * @param leftLabel
    * @param rightLabel
    */
@@ -783,6 +798,7 @@ export class Slider {
   }
   /**
    * Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
+   *
    * @param minLabel
    * @param handle
    */
@@ -793,6 +809,7 @@ export class Slider {
   }
   /**
    * Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
+   *
    * @param maxLabel
    * @param handle
    */

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.82
+ * v1.0.0-beta.83
  */
 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.82
+ * v1.0.0-beta.83
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, 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-beta.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   container: "split-button__container",

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

@@ -163,10 +163,7 @@
   display: flex;
   width: 1px;
   align-items: stretch;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   background-color: var(--calcite-split-button-background);
 }
 

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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";
@@ -19,13 +19,16 @@ export class SplitButton {
     this.disabled = false;
     /**
      * Is the dropdown currently active or not
+     *
      * @internal
      */
     this.active = false;
     /** specify the icon used for the dropdown menu, defaults to chevron */
     this.dropdownIconType = "chevron";
-    /** optionally add a calcite-loader component to the control,
-     disabling interaction. with the primary button */
+    /**
+      optionally add a calcite-loader component to the control,
+     disabling interaction. with the primary button
+     */
     this.loading = false;
     /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";

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.82
+ * v1.0.0-beta.83
  */
 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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 /**
@@ -50,7 +50,7 @@ export class Stepper {
   componentDidLoad() {
     // if no stepper items are set as active, default to the first one
     if (!this.currentPosition) {
-      this.calciteStepperItemChange.emit({
+      this.calciteInternalStepperItemChange.emit({
         position: 0
       });
     }
@@ -68,7 +68,7 @@ export class Stepper {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteStepperItemKeyEvent(e) {
+  calciteInternalStepperItemKeyEvent(e) {
     const item = e.detail.item;
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
@@ -99,6 +99,7 @@ export class Stepper {
         this.focusLastItem();
         break;
     }
+    e.stopPropagation();
   }
   registerItem(event) {
     const item = event.target;
@@ -106,18 +107,20 @@ export class Stepper {
     if (content && item.active) {
       this.requestedContent = content;
     }
-    this.itemMap.set(item, position);
+    this.itemMap.set(item, { position, content });
     this.items = this.sortItems();
     this.enabledItems = this.filterItems();
+    event.stopPropagation();
   }
   updateItem(event) {
     if (event.detail.content) {
       this.requestedContent = event.detail.content;
     }
     this.currentPosition = event.detail.position;
-    this.calciteStepperItemChange.emit({
+    this.calciteInternalStepperItemChange.emit({
       position: this.currentPosition
     });
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -130,7 +133,7 @@ export class Stepper {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   /** set the previous step as active */
   async prevStep() {
@@ -138,13 +141,17 @@ export class Stepper {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
-  /** set the requested step as active */
+  /**
+   * set the requested step as active
+   *
+   * @param step
+   */
   async goToStep(step) {
     const position = step - 1;
     if (this.currentPosition !== position) {
-      this.emitChangedItem(position);
+      this.updateStep(position);
     }
   }
   /** set the first step as active */
@@ -153,7 +160,7 @@ export class Stepper {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   /** set the last step as active */
   async endStep() {
@@ -161,7 +168,7 @@ export class Stepper {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   //--------------------------------------------------------------------------
   //
@@ -184,9 +191,15 @@ export class Stepper {
     this.stepperContentContainer.classList.add("calcite-stepper-content");
     this.el.insertAdjacentElement("beforeend", this.stepperContentContainer);
   }
-  emitChangedItem(position) {
+  updateStep(position) {
+    var _a;
+    const { itemMap, items } = this;
     this.currentPosition = position;
-    this.calciteStepperItemChange.emit({
+    const content = (_a = itemMap.get(items[position])) === null || _a === void 0 ? void 0 : _a.content;
+    if (content) {
+      this.requestedContent = content;
+    }
+    this.calciteInternalStepperItemChange.emit({
       position
     });
   }
@@ -216,7 +229,7 @@ export class Stepper {
   }
   sortItems() {
     const { itemMap } = this;
-    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a) - itemMap.get(b));
+    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
   }
   filterItems() {
     return this.items.filter((item) => !item.disabled);
@@ -340,8 +353,8 @@ export class Stepper {
     }
   }; }
   static get events() { return [{
-      "method": "calciteStepperItemChange",
-      "name": "calciteStepperItemChange",
+      "method": "calciteInternalStepperItemChange",
+      "name": "calciteInternalStepperItemChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -400,7 +413,10 @@ export class Stepper {
       "complexType": {
         "signature": "(step: number) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "step"
+              }],
             "text": ""
           }],
         "references": {
@@ -412,7 +428,10 @@ export class Stepper {
       },
       "docs": {
         "text": "set the requested step as active",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "step"
+          }]
       }
     },
     "startStep": {
@@ -454,19 +473,19 @@ export class Stepper {
       "methodName": "contentWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteStepperItemKeyEvent",
-      "method": "calciteStepperItemKeyEvent",
+      "name": "calciteInternalStepperItemKeyEvent",
+      "method": "calciteInternalStepperItemKeyEvent",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteStepperItemRegister",
+      "name": "calciteInternalStepperItemRegister",
       "method": "registerItem",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteStepperItemSelect",
+      "name": "calciteInternalStepperItemSelect",
       "method": "updateItem",
       "target": undefined,
       "capture": false,

package/dist/collection/components/stepper-item/stepper-item.css

@@ -122,6 +122,7 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+  align-self: flex-start;
   margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
 }
 
@@ -145,9 +146,7 @@
 }
 
 :host {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) {
@@ -345,4 +344,30 @@
 
 :host([layout=vertical][error]:hover:not([disabled]):not([active])) .container, :host([layout=vertical][error]:focus:not([disabled]):not([active])) .container {
   border-color: var(--calcite-ui-danger-hover);
+}
+
+@media (forced-colors: active) {
+  :host .container {
+    outline-width: 0;
+    outline-offset: 0;
+  }
+
+  :host(:focus),
+:host(:focus-visible) {
+    outline-color: canvasText;
+  }
+
+  :host([active]) .container {
+    border-top-color: highlight;
+  }
+  :host([active]) .container .stepper-item-number {
+    color: highlight;
+  }
+  :host([active]) .container .stepper-item-icon {
+    color: highlight;
+  }
+
+  :host([layout=vertical][active]) .container {
+    border-color: highlight;
+  }
 }

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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -52,7 +52,7 @@ export class StepperItem {
           case "ArrowRight":
           case "Home":
           case "End":
-            this.calciteStepperItemKeyEvent.emit({ item: e });
+            this.calciteInternalStepperItemKeyEvent.emit({ item: e });
             e.preventDefault();
             break;
         }
@@ -60,7 +60,7 @@ export class StepperItem {
     };
     this.emitRequestedItem = () => {
       if (!this.disabled) {
-        this.calciteStepperItemSelect.emit({
+        this.calciteInternalStepperItemSelect.emit({
           position: this.itemPosition,
           content: this.itemContent
         });
@@ -122,6 +122,7 @@ export class StepperItem {
       this.activePosition = event.detail.position;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
   renderIcon() {
     const path = this.active
@@ -137,7 +138,7 @@ export class StepperItem {
     this.active = !this.disabled && this.itemPosition === this.activePosition;
   }
   registerStepperItem() {
-    this.calciteStepperItemRegister.emit({
+    this.calciteInternalStepperItemRegister.emit({
       position: this.itemPosition,
       content: this.itemContent
     });
@@ -350,8 +351,8 @@ export class StepperItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteStepperItemKeyEvent",
-      "name": "calciteStepperItemKeyEvent",
+      "method": "calciteInternalStepperItemKeyEvent",
+      "name": "calciteInternalStepperItemKeyEvent",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -373,8 +374,8 @@ export class StepperItem {
         }
       }
     }, {
-      "method": "calciteStepperItemSelect",
-      "name": "calciteStepperItemSelect",
+      "method": "calciteInternalStepperItemSelect",
+      "name": "calciteInternalStepperItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -396,8 +397,8 @@ export class StepperItem {
         }
       }
     }, {
-      "method": "calciteStepperItemRegister",
-      "name": "calciteStepperItemRegister",
+      "method": "calciteInternalStepperItemRegister",
+      "name": "calciteInternalStepperItemRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -425,7 +426,7 @@ export class StepperItem {
       "methodName": "disabledWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteStepperItemChange",
+      "name": "calciteInternalStepperItemChange",
       "method": "updateActiveItemOnChange",
       "target": "body",
       "capture": false,

package/dist/collection/components/switch/switch.css

@@ -140,9 +140,7 @@
 
 :host {
   width: auto;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 .track {

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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -19,7 +19,9 @@ export class Switch {
     this.disabled = false;
     /** The scale of the switch */
     this.scale = "m";
-    /** True if the switch is initially on
+    /**
+     * True if the switch is initially on
+     *
      * @deprecated use 'checked' instead.
      */
     this.switched = false;

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.82
+ * v1.0.0-beta.83
  */
 export {};

package/dist/collection/components/tab/tab.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -15,7 +15,9 @@ export class Tab {
      * Show this tab
      */
     this.active = false;
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
@@ -34,7 +36,7 @@ export class Tab {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   componentDidLoad() {
-    this.calciteTabRegister.emit();
+    this.calciteInternalTabRegister.emit();
   }
   componentWillRender() {
     var _a;
@@ -70,6 +72,7 @@ export class Tab {
         this.active = index === event.detail.tab;
       });
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -88,6 +91,8 @@ export class Tab {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -155,7 +160,7 @@ export class Tab {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component scale value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -168,8 +173,8 @@ export class Tab {
     "labeledBy": {}
   }; }
   static get events() { return [{
-      "method": "calciteTabRegister",
-      "name": "calciteTabRegister",
+      "method": "calciteInternalTabRegister",
+      "name": "calciteInternalTabRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -207,10 +212,16 @@ export class Tab {
       "complexType": {
         "signature": "(tabIds?: string[], titleIds?: string[]) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "tabIds"
+              }],
             "text": ""
           }, {
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "titleIds"
+              }],
             "text": ""
           }],
         "references": {
@@ -223,6 +234,12 @@ export class Tab {
       "docs": {
         "text": "",
         "tags": [{
+            "name": "param",
+            "text": "tabIds"
+          }, {
+            "name": "param",
+            "text": "titleIds"
+          }, {
             "name": "internal",
             "text": undefined
           }]

package/dist/collection/components/tab-nav/tab-nav.css

@@ -145,4 +145,10 @@
 :host([bordered][position=below]) .tab-nav-active-indicator-container {
   bottom: 0;
   top: unset;
+}
+
+@media (forced-colors: active) {
+  .tab-nav-active-indicator {
+    background-color: highlight;
+  }
 }