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

package/dist/collection/components/radio-button-group/radio-button-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-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/radio-group/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.83
+ * v1.0.0-beta.86
  */
 export {};

package/dist/collection/components/radio-group/radio-group.css

@@ -119,7 +119,8 @@
   justify-content: flex-start;
 }
 
-::slotted(calcite-radio-group-item[checked]), ::slotted(calcite-radio-group-item:focus) {
+::slotted(calcite-radio-group-item[checked]), 
+::slotted(calcite-radio-group-item:focus) {
   z-index: 0;
 }
 

package/dist/collection/components/radio-group/radio-group.js

@@ -1,12 +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.83
+ * v1.0.0-beta.86
  */
-import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
+import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
-import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
@@ -84,6 +84,9 @@ export class RadioGroup {
       items[0].tabIndex = 0;
     }
   }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.value);
+  }
   connectedCallback() {
     connectLabel(this);
     connectForm(this);
@@ -361,7 +364,10 @@ export class RadioGroup {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "readonly",
+            "text": undefined
+          }],
         "text": "The group's selected item."
       }
     },

package/dist/collection/components/radio-group-item/radio-group-item.css

@@ -164,6 +164,20 @@
   display: none;
 }
 
+@media (forced-colors: active) {
+  :host([checked]) label {
+    background-color: highlight;
+  }
+
+  :host([checked]) .label--outline {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  :host([checked]) label:not([class~=label--outline]) .radio-group-item-icon {
+    color: highlightText;
+  }
+}
 .radio-group-item-icon {
   position: relative;
   margin: 0px;

package/dist/collection/components/radio-group-item/radio-group-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.83
+ * v1.0.0-beta.86
  */
 import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -29,7 +29,7 @@ export class RadioGroupItem {
     const appearance = getElementProp(this.el, "appearance", "solid");
     const layout = getElementProp(this.el, "layout", "horizontal");
     const iconEl = (h("calcite-icon", { class: CSS.radioGroupItemIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
-    return (h(Host, { "aria-checked": toAriaBoolean(checked), role: "radio" },
+    return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" },
       h("label", { class: {
           "label--scale-s": scale === "s",
           "label--scale-m": scale === "m",

package/dist/collection/components/radio-group-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-beta.83
+ * v1.0.0-beta.86
  */
 export const SLOTS = {
   input: "input"

package/dist/collection/components/rating/rating.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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -9,6 +9,7 @@ import { connectLabel, disconnectLabel } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { TEXT } from "./resources";
 import { updateHostInteraction } from "../../utils/interactive";
+import { isActivationKey } from "../../utils/key";
 export class Rating {
   constructor() {
     // --------------------------------------------------------------------------
@@ -44,6 +45,21 @@ export class Rating {
      * @internal
      */
     this.required = false;
+    this.onKeyboardPressed = (event) => {
+      if (!this.required && isActivationKey(event.key)) {
+        event.preventDefault();
+        this.updateValue(0);
+      }
+    };
+    this.onFocusChange = (selectedRatingValue) => {
+      this.hasFocus = true;
+      if (!this.required && this.focusValue === selectedRatingValue) {
+        this.updateValue(0);
+      }
+      else {
+        this.focusValue = selectedRatingValue;
+      }
+    };
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -93,10 +109,7 @@ export class Rating {
           h("span", { class: "visually-hidden" }, this.intlStars.replace("${num}", `${i}`))),
         h("input", { checked: i === this.value, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: `${this.guid}-${i}`, name: this.guid, onChange: () => this.updateValue(i), onClick: (event) => 
           // click is fired from the the component's label, so we treat this as an internal event
-          event.stopPropagation(), onFocus: () => {
-            this.hasFocus = true;
-            this.focusValue = i;
-          }, ref: (el) => (i === 1 || i === this.value) && (this.inputFocusRef = el), type: "radio", value: i })));
+          event.stopPropagation(), onFocus: () => this.onFocusChange(i), onKeyDown: this.onKeyboardPressed, ref: (el) => (i === 1 || i === this.value) && (this.inputFocusRef = el), type: "radio", value: i })));
     });
   }
   render() {
@@ -132,7 +145,8 @@ export class Rating {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.inputFocusRef.focus();
+    var _a;
+    (_a = this.inputFocusRef) === null || _a === void 0 ? void 0 : _a.focus();
   }
   static get is() { return "calcite-rating"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/rating/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.83
+ * v1.0.0-beta.86
  */
 export const TEXT = {
   rating: "Rating",

package/dist/collection/components/scrim/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.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   scrim: "scrim",

package/dist/collection/components/scrim/scrim.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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Prop, h } from "@stencil/core";
 import { CSS, TEXT } from "./resources";

package/dist/collection/components/select/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.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   icon: "icon",

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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

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.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   main: "main",

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

@@ -134,7 +134,9 @@
   overflow: auto;
 }
 
-.content ::slotted(calcite-shell-center-row), .content ::slotted(calcite-panel), .content ::slotted(calcite-flow) {
+.content ::slotted(calcite-shell-center-row), 
+.content ::slotted(calcite-panel), 
+.content ::slotted(calcite-flow) {
   flex: 1 1 auto;
   align-self: stretch;
   max-height: unset;
@@ -161,12 +163,14 @@
   font-weight: var(--calcite-font-weight-normal);
 }
 
-::slotted(calcite-shell-panel), ::slotted(calcite-shell-center-row) {
+::slotted(calcite-shell-panel), 
+::slotted(calcite-shell-center-row) {
   position: relative;
   z-index: 1;
 }
 
-::slotted(calcite-panel), ::slotted(calcite-flow) {
+::slotted(calcite-panel), 
+::slotted(calcite-flow) {
   border-width: 1px;
   border-left-width: 0px;
   border-right-width: 0px;

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

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

@@ -100,7 +100,8 @@
   box-sizing: border-box;
 }
 
-:host(:hover) .separator:not(:hover):not(:focus), :host(:focus-within) .separator:not(:hover):not(:focus) {
+:host(:hover) .separator:not(:hover):not(:focus), 
+:host(:focus-within) .separator:not(:hover):not(:focus) {
   opacity: 1;
   background-color: var(--calcite-ui-border-3);
 }
@@ -137,7 +138,8 @@
   inset-inline-start: -2px;
 }
 
-::slotted(calcite-panel), ::slotted(calcite-flow) {
+::slotted(calcite-panel), 
+::slotted(calcite-flow) {
   height: 100%;
   width: 100%;
   flex: 1 1 auto;
@@ -229,7 +231,10 @@
   max-height: unset;
 }
 
-:host([position=start]) .content--detached ::slotted(calcite-panel), :host([position=start]) .content--detached ::slotted(calcite-flow), :host([position=end]) .content--detached ::slotted(calcite-panel), :host([position=end]) .content--detached ::slotted(calcite-flow) {
+:host([position=start]) .content--detached ::slotted(calcite-panel), 
+:host([position=start]) .content--detached ::slotted(calcite-flow), 
+:host([position=end]) .content--detached ::slotted(calcite-panel), 
+:host([position=end]) .content--detached ::slotted(calcite-flow) {
   border-style: none;
 }
 
@@ -237,7 +242,9 @@
   display: none;
 }
 
-slot[name=action-bar]::slotted(calcite-action-bar), .content ::slotted(calcite-flow), .content ::slotted(calcite-panel:not([dismissed])) {
+slot[name=action-bar]::slotted(calcite-action-bar), 
+.content ::slotted(calcite-flow), 
+.content ::slotted(calcite-panel:not([dismissed])) {
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);

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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

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

@@ -84,7 +84,8 @@
   --calcite-slider-handle-extension-height: 6.5px;
   --calcite-slider-container-font-size: var(--calcite-font-size--3);
 }
-.scale--s .handle__label, .scale--s .tick__label{
+.scale--s .handle__label, 
+.scale--s .tick__label{
   line-height: .75rem;
 }
 
@@ -93,7 +94,8 @@
   --calcite-slider-handle-extension-height: 8px;
   --calcite-slider-container-font-size: var(--calcite-font-size--2);
 }
-.scale--m .handle__label, .scale--m .tick__label{
+.scale--m .handle__label, 
+.scale--m .tick__label{
   line-height: 1rem;
 }
 
@@ -102,11 +104,13 @@
   --calcite-slider-handle-extension-height: 10.5px;
   --calcite-slider-container-font-size: var(--calcite-font-size--1);
 }
-.scale--l .handle__label, .scale--l .tick__label{
+.scale--l .handle__label, 
+.scale--l .tick__label{
   line-height: 1rem;
 }
 
-.handle__label, .tick__label{
+.handle__label, 
+.tick__label{
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-slider-container-font-size);
@@ -182,7 +186,7 @@
   outline-offset: 2px;
   transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
-.thumb .handle__label.static, .thumb .handle__label.transformed{
+.thumb .handle__label.static,  .thumb .handle__label.transformed{
   position: absolute;
   top: 0px;
   bottom: 0px;
@@ -264,12 +268,15 @@
   --calcite-slider-thumb-y-offset: -49px;
 }
 
-.thumb:focus .handle, .thumb--active .handle{
+.thumb:focus .handle, 
+.thumb--active .handle{
   background-color: var(--calcite-ui-brand);
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
 }
 
-.thumb:hover.thumb--precise:after, .thumb:focus.thumb--precise:after, .thumb--active.thumb--precise:after{
+.thumb:hover.thumb--precise:after, 
+.thumb:focus.thumb--precise:after, 
+.thumb--active.thumb--precise:after{
   background-color: var(--calcite-ui-brand);
 }
 
@@ -358,7 +365,10 @@
   transition: opacity var(--calcite-internal-animation-timing-fast);
 }
 
-:host([has-histogram][label-handles]) .tick__label--min, :host([has-histogram][label-handles]) .tick__label--max, :host([has-histogram][precise]) .tick__label--min, :host([has-histogram][precise]) .tick__label--max{
+:host([has-histogram][label-handles]) .tick__label--min, 
+:host([has-histogram][label-handles]) .tick__label--max, 
+:host([has-histogram][precise]) .tick__label--min, 
+:host([has-histogram][precise]) .tick__label--max{
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }

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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -472,7 +472,7 @@ export class Slider {
   /** Sets focus on the component. */
   async setFocus() {
     const handle = this.minHandle ? this.minHandle : this.maxHandle;
-    handle.focus();
+    handle === null || handle === void 0 ? void 0 : handle.focus();
   }
   //--------------------------------------------------------------------------
   //

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.83
+ * v1.0.0-beta.86
  */
 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.83
+ * v1.0.0-beta.86
  */
 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.83
+ * v1.0.0-beta.86
  */
 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-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";

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.83
+ * v1.0.0-beta.86
  */
 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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 /**
@@ -49,7 +49,7 @@ export class Stepper {
   //--------------------------------------------------------------------------
   componentDidLoad() {
     // if no stepper items are set as active, default to the first one
-    if (!this.currentPosition) {
+    if (typeof this.currentPosition !== "number") {
       this.calciteInternalStepperItemChange.emit({
         position: 0
       });
@@ -113,12 +113,22 @@ export class Stepper {
     event.stopPropagation();
   }
   updateItem(event) {
-    if (event.detail.content) {
-      this.requestedContent = event.detail.content;
+    const { content, position } = event.detail;
+    if (content) {
+      this.requestedContent = content;
+    }
+    if (typeof position === "number") {
+      this.currentPosition = position;
     }
-    this.currentPosition = event.detail.position;
     this.calciteInternalStepperItemChange.emit({
-      position: this.currentPosition
+      position
+    });
+    event.stopPropagation();
+  }
+  handleUserRequestedStepperItemSelect(event) {
+    const { position } = event.detail;
+    this.calciteStepperItemChange.emit({
+      position
     });
     event.stopPropagation();
   }
@@ -225,7 +235,7 @@ export class Stepper {
     return this.enabledItems.indexOf(e);
   }
   focusElement(item) {
-    item.focus();
+    item === null || item === void 0 ? void 0 : item.focus();
   }
   sortItems() {
     const { itemMap } = this;
@@ -269,9 +279,12 @@ export class Stepper {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Layout",
-        "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+        "original": "Extract<\"horizontal\" | \"vertical\", Layout>",
+        "resolved": "\"horizontal\" | \"vertical\"",
         "references": {
+          "Extract": {
+            "location": "global"
+          },
           "Layout": {
             "location": "import",
             "path": "../interfaces"
@@ -353,6 +366,26 @@ export class Stepper {
     }
   }; }
   static get events() { return [{
+      "method": "calciteStepperItemChange",
+      "name": "calciteStepperItemChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "This event fires when the active stepper item has changed."
+      },
+      "complexType": {
+        "original": "StepperItemChangeEventDetail",
+        "resolved": "StepperItemChangeEventDetail",
+        "references": {
+          "StepperItemChangeEventDetail": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      }
+    }, {
       "method": "calciteInternalStepperItemChange",
       "name": "calciteInternalStepperItemChange",
       "bubbles": true,
@@ -490,5 +523,11 @@ export class Stepper {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "calciteInternalUserRequestedStepperItemSelect",
+      "method": "handleUserRequestedStepperItemSelect",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }