@esri/calcite-components 1.0.0-next.700 → 1.0.0-next.702

package/dist/collection/components/popover/popover.js

@@ -1,14 +1,14 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { forceUpdate, Host, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, defaultPopoverPlacement } from "./resources";
 import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
-import { connectFocusTrap, activateFocusTrap, deactivateFocusTrap, focusFirstTabbable } from "../../utils/focusTrapComponent";
+import { connectFocusTrap, activateFocusTrap, deactivateFocusTrap, updateFocusTrapElements } from "../../utils/focusTrapComponent";
 import { guid } from "../../utils/guid";
-import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { focusFirstTabbable, queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { Heading } from "../functional/Heading";
 import PopoverManager from "./PopoverManager";
@@ -219,26 +219,17 @@ export class Popover {
   }
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  async setFocus(focusId) {
+  async setFocus() {
     await componentLoaded(this);
-    const { closeButtonEl } = this;
-    if (focusId === "close-button" && closeButtonEl) {
-      forceUpdate(closeButtonEl);
-      closeButtonEl.setFocus();
-      return;
-    }
-    focusFirstTabbable(this);
+    forceUpdate(this.el);
+    focusFirstTabbable(this.focusTrapEl);
   }
   /**
-   * Toggles the component's open property.
-   *
-   * @param value
+   * Updates the element(s) that are used within the focus-trap of the component.
    */
-  async toggle(value = !this.open) {
-    this.open = value;
+  async updateFocusTrapElements() {
+    updateFocusTrapElements(this);
   }
   getReferenceElement() {
     const { referenceElement, el } = this;
@@ -267,12 +258,12 @@ export class Popover {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { messages, closable } = this;
-    return closable ? (h("div", { class: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: this.scale, text: messages.close }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
+    return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: this.scale, text: messages.close }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
     const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel }, heading)) : null;
-    return headingNode ? (h("div", { class: CSS.header }, headingNode, this.renderCloseButton())) : null;
+    return headingNode ? (h("div", { class: CSS.header, key: CSS.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
     const { effectiveReferenceElement, heading, label, open, pointerDisabled } = this;
@@ -472,13 +463,13 @@ export class Popover {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<PopoverMessages>",
           "resolved": "{ close?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "PopoverMessages": {
               "location": "import",
               "path": "./assets/popover/t9n"
             }
@@ -495,10 +486,10 @@ export class Popover {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "PopoverMessages",
           "resolved": "{ close: string; }",
           "references": {
-            "Messages": {
+            "PopoverMessages": {
               "location": "import",
               "path": "./assets/popover/t9n"
             }
@@ -781,14 +772,8 @@ export class Popover {
       },
       "setFocus": {
         "complexType": {
-          "signature": "(focusId?: \"close-button\") => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "focusId"
-                }],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
@@ -798,22 +783,13 @@ export class Popover {
         },
         "docs": {
           "text": "Sets focus on the component.",
-          "tags": [{
-              "name": "param",
-              "text": "focusId"
-            }]
+          "tags": []
         }
       },
-      "toggle": {
+      "updateFocusTrapElements": {
         "complexType": {
-          "signature": "(value?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "value"
-                }],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
@@ -822,11 +798,8 @@ export class Popover {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Toggles the component's open property.",
-          "tags": [{
-              "name": "param",
-              "text": "value"
-            }]
+          "text": "Updates the element(s) that are used within the focus-trap of the component.",
+          "tags": []
         }
       }
     };

package/dist/collection/components/popover/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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/progress/progress.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 export class Progress {

package/dist/collection/components/radio-button/radio-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.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/radio-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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   container: "container"

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-next.700
+ * v1.0.0-next.702
  */
 import { Host, h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -23,6 +23,7 @@ export class RadioButtonGroup {
     //--------------------------------------------------------------------------
     this.passPropsToRadioButtons = () => {
       const radioButtons = this.el.querySelectorAll("calcite-radio-button");
+      this.selectedItem = Array.from(radioButtons).find((radioButton) => radioButton.checked) || null;
       if (radioButtons.length > 0) {
         radioButtons.forEach((radioButton) => {
           radioButton.disabled = this.disabled || radioButton.disabled;
@@ -38,6 +39,7 @@ export class RadioButtonGroup {
     this.layout = "horizontal";
     this.name = undefined;
     this.required = false;
+    this.selectedItem = null;
     this.scale = "m";
   }
   onDisabledChange() {
@@ -70,7 +72,8 @@ export class RadioButtonGroup {
   //
   //--------------------------------------------------------------------------
   radioButtonChangeHandler(event) {
-    this.calciteRadioButtonGroupChange.emit(event.target.value);
+    this.selectedItem = event.target;
+    this.calciteRadioButtonGroupChange.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -189,6 +192,29 @@ export class RadioButtonGroup {
         "reflect": true,
         "defaultValue": "false"
       },
+      "selectedItem": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteRadioButtonElement",
+          "resolved": "HTMLCalciteRadioButtonElement",
+          "references": {
+            "HTMLCalciteRadioButtonElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's selected item."
+        },
+        "defaultValue": "null"
+      },
       "scale": {
         "type": "string",
         "mutable": false,
@@ -226,8 +252,8 @@ export class RadioButtonGroup {
           "text": "Fires when the component has changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "void",
+          "resolved": "void",
           "references": {}
         }
       }];

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

@@ -101,6 +101,10 @@
   outline-offset: -1px;
 }
 
+:host([appearance=outline]) {
+  background-color: transparent;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.700
+ * v1.0.0-next.702
  */
 import { Build, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -202,8 +202,8 @@ export class RadioGroup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Extract<\"minimal\" | \"solid\", Appearance>",
-          "resolved": "\"minimal\" | \"solid\"",
+          "original": "Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>",
+          "resolved": "\"outline\" | \"outline-fill\" | \"solid\"",
           "references": {
             "Extract": {
               "location": "global"

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

@@ -153,13 +153,18 @@
   color: var(--calcite-ui-background);
 }
 
-:host([checked]) .label--outline {
+:host([checked]) .label--outline,
+:host([checked]) .label--outline-fill {
   border-color: var(--calcite-ui-brand);
   background-color: var(--calcite-ui-foreground-1);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
 
+:host([checked]) .label--outline {
+  background-color: transparent;
+}
+
 ::slotted(input) {
   display: none;
 }
@@ -169,7 +174,8 @@
     background-color: highlight;
   }
 
-  :host([checked]) .label--outline {
+  :host([checked]) .label--outline,
+:host([checked]) .label--outline-fill {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }

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-next.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -29,7 +29,8 @@ export class RadioGroupItem {
         "label--scale-m": scale === "m",
         "label--scale-l": scale === "l",
         "label--horizontal": layout === "horizontal",
-        "label--outline": appearance === "outline"
+        "label--outline": appearance === "outline",
+        "label--outline-fill": appearance === "outline-fill"
       } }, this.iconStart ? iconStartEl : null, h("slot", null, value), h("slot", { name: SLOTS.input }), this.iconEnd ? iconEndEl : null)));
   }
   static get is() { return "calcite-radio-group-item"; }

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-next.700
+ * v1.0.0-next.702
  */
 export const SLOTS = {
   input: "input"

package/dist/collection/components/rating/assets/rating/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type RatingMessages = {
   rating: string;
   stars: string;
 };

package/dist/collection/components/rating/function/star.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 export const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{

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-next.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -301,10 +301,10 @@ export class Rating {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "RatingMessages",
           "resolved": "{ rating: string; stars: string; }",
           "references": {
-            "Messages": {
+            "RatingMessages": {
               "location": "import",
               "path": "./assets/rating/t9n"
             }
@@ -324,13 +324,13 @@ export class Rating {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<RatingMessages>",
           "resolved": "{ rating?: string; stars?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "RatingMessages": {
               "location": "import",
               "path": "./assets/rating/t9n"
             }

package/dist/collection/components/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.700
+ * v1.0.0-next.702
  */
 export var KindIcons;
 (function (KindIcons) {

package/dist/collection/components/scrim/assets/scrim/t9n/index.d.ts

@@ -1,3 +1,3 @@
-export type Messages = {
+export type ScrimMessages = {
   loading: string;
 };

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-next.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   scrim: "scrim",

package/dist/collection/components/scrim/scrim.css

@@ -84,6 +84,13 @@
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-scrim-background: Specifies the background color of the scrim.
+*/
 :host {
   position: absolute;
   inset: 0px;
@@ -113,7 +120,7 @@
   justify-content: center;
   overflow: hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background);
+  background-color: var(--calcite-scrim-background, var(--calcite-scrim-background-internal));
 }
 
 .content {

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-next.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";
@@ -89,10 +89,10 @@ export class Scrim {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "ScrimMessages",
           "resolved": "{ loading: string; }",
           "references": {
-            "Messages": {
+            "ScrimMessages": {
               "location": "import",
               "path": "./assets/scrim/t9n"
             }
@@ -112,13 +112,13 @@ export class Scrim {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<ScrimMessages>",
           "resolved": "{ loading?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "ScrimMessages": {
               "location": "import",
               "path": "./assets/scrim/t9n"
             }

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-next.700
+ * v1.0.0-next.702
  */
 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-next.700
+ * v1.0.0-next.702
  */
 import { Fragment, h } 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-next.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   main: "main",

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-next.700
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
@@ -14,7 +14,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } f
  * @slot panel-start - A slot for adding the starting `calcite-shell-panel`.
  * @slot panel-end - A slot for adding the ending `calcite-shell-panel`.
  * @slot center-row - A slot for adding content to the center row.
- * @slot modal - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
+ * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
  * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
  */
 export class Shell {

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-next.700
+ * v1.0.0-next.702
  */
 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-next.700
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-panel/assets/shell-panel/t9n/index.d.ts

@@ -1,3 +1,3 @@
-export type Messages = {
+export type ShellPanelMessages = {
   resize: string;
 };

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-next.700
+ * v1.0.0-next.702
  */
 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-next.700
+ * v1.0.0-next.702
  */
 import { h, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
@@ -355,10 +355,10 @@ export class ShellPanel {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "ShellPanelMessages",
           "resolved": "{ resize: string; }",
           "references": {
-            "Messages": {
+            "ShellPanelMessages": {
               "location": "import",
               "path": "./assets/shell-panel/t9n"
             }
@@ -378,13 +378,13 @@ export class ShellPanel {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<ShellPanelMessages>",
           "resolved": "{ resize?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "ShellPanelMessages": {
               "location": "import",
               "path": "./assets/shell-panel/t9n"
             }

package/dist/collection/components/slider/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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   handleLabel: "handle__label",

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.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";