@esri/calcite-components 1.0.0-next.293 → 1.0.0-next.297

package/dist/collection/components/calcite-pagination/calcite-pagination.js

@@ -232,8 +232,8 @@ export class CalcitePagination {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Next\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next\""
           }],
         "text": "Used as an accessible label (aria-label) for the next button"
       },
@@ -253,8 +253,8 @@ export class CalcitePagination {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Previous\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous\""
           }],
         "text": "Used as an accessible label (aria-label) of the previous button"
       },
@@ -294,8 +294,8 @@ export class CalcitePagination {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calcitePaginationChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calcitePaginationChange instead"
           }],
         "text": "Emitted whenever the selected page changes."
       },
@@ -316,8 +316,8 @@ export class CalcitePagination {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [CalcitePaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pagination/calcite-pagination.tsx#L18)",
-            "name": "see"
+            "name": "see",
+            "text": " [CalcitePaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pagination/calcite-pagination.tsx#L18)"
           }],
         "text": "Emitted whenever the selected page changes."
       },

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

@@ -225,7 +225,7 @@ h5.heading {
   justify-content: flex-start;
   position: sticky;
   top: 0;
-  border-bottom-color: var(--calcite-ui-border-2);
+  border-bottom-color: var(--calcite-ui-border-3);
   width: 100%;
   flex: 0 0 auto;
   min-height: 3rem;
@@ -233,10 +233,14 @@ h5.heading {
 }
 
 .header-content {
-  display: block;
   overflow: hidden;
   margin-right: auto;
-  padding: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .header-content .heading,
@@ -270,7 +274,7 @@ h5.heading {
 }
 
 .back-button {
-  border-color: var(--calcite-ui-border-2);
+  border-color: var(--calcite-ui-border-3);
   border-style: solid;
   border-width: 0;
   border-right-width: 1px;
@@ -308,12 +312,16 @@ h5.heading {
   flex-flow: column nowrap;
 }
 
+.content-wrapper {
+  height: 100%;
+  overflow: auto;
+}
+
 .content-container {
   align-items: stretch;
   background-color: var(--calcite-ui-background);
   display: flex;
   flex: 1 1 auto;
-  overflow: auto;
   flex-wrap: nowrap;
   flex-direction: column;
 }
@@ -348,7 +356,7 @@ h5.heading {
 }
 
 .fab-container {
-  display: inline-block;
+  display: block;
   position: sticky;
   margin-top: 0;
   margin-bottom: 0;
@@ -358,5 +366,7 @@ h5.heading {
   bottom: 0;
   left: 0;
   right: 0;
+  width: -moz-fit-content;
+  width: fit-content;
   z-index: 1;
 }

package/dist/collection/components/calcite-panel/calcite-panel.js

@@ -187,8 +187,9 @@ export class CalcitePanel {
       h("slot", { name: SLOTS.footerActions }))) : null;
   }
   renderContent() {
-    return (h("section", { class: CSS.contentContainer, onScroll: this.panelScrollHandler, tabIndex: 0 },
-      h("slot", null),
+    return (h("div", { class: CSS.contentWrapper, onScroll: this.panelScrollHandler, tabIndex: 0 },
+      h("section", { class: CSS.contentContainer },
+        h("slot", null)),
       this.renderFab()));
   }
   renderFab() {

package/dist/collection/components/calcite-panel/resources.js

@@ -12,6 +12,7 @@ export const CSS = {
   headerActions: "header-actions",
   headerActionsEnd: "header-actions--end",
   headerActionsStart: "header-actions--start",
+  contentWrapper: "content-wrapper",
   contentContainer: "content-container",
   fabContainer: "fab-container",
   footer: "footer",

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.js

@@ -224,8 +224,8 @@ export class CalcitePickListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When true, the item cannot be selected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When true, the item cannot be selected by user interaction."
           }],
         "text": ""
       },
@@ -250,8 +250,8 @@ export class CalcitePickListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },
@@ -343,8 +343,8 @@ export class CalcitePickListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Remove\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Remove\""
           }],
         "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
       },
@@ -412,8 +412,8 @@ export class CalcitePickListItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted whenever the the item's label, description, value or metadata properties are modified."
       },
@@ -430,8 +430,8 @@ export class CalcitePickListItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted whenever the the item's value property is modified."
       },

package/dist/collection/components/calcite-popover/calcite-popover.css

@@ -227,6 +227,7 @@
   flex-wrap: nowrap;
   align-self: center;
   height: 100%;
+  width: 100%;
 }
 
 .calcite--rtl .close-button {

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

@@ -158,7 +158,7 @@ export class CalcitePopover {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -295,8 +295,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "use dismissible instead.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use dismissible instead."
           }],
         "text": "Display a close button within the Popover."
       },
@@ -446,8 +446,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "6",
-            "name": "default"
+            "name": "default",
+            "text": "6"
           }],
         "text": "Offset the position of the popover away from the reference element."
       },
@@ -531,8 +531,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)",
-            "name": "see"
+            "name": "see",
+            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },
@@ -573,8 +573,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "Text for close button."
       },

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.js

@@ -86,8 +86,8 @@ export class CalcitePopoverManager {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "`[data-calcite-popover-reference]`",
-            "name": "default"
+            "name": "default",
+            "text": "`[data-calcite-popover-reference]`"
           }],
         "text": "CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover."
       },

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

@@ -94,8 +94,8 @@ export class CalciteRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio."
       },
@@ -133,8 +133,8 @@ export class CalciteRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio."
       },

package/dist/collection/components/calcite-radio-button/calcite-radio-button.css

@@ -89,10 +89,27 @@
   display: block;
 }
 
-:host .calcite-radio-button__container {
+:host .container {
   position: relative;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 :host([disabled]) {
   cursor: pointer;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -4,10 +4,13 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { closestElementCrossShadowBoundary, focusElement } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { hiddenInputStyle } from "../../utils/form";
+import { HiddenFormInputSlot, connectForm, disconnectForm } from "../../utils/form";
 import { CSS } from "./resources";
+import { getKey } from "../../utils/key";
+import { getElementDir } from "../../utils/dom";
+import { getRoundRobinIndex } from "../../utils/array";
 export class CalciteRadioButton {
   constructor() {
     //--------------------------------------------------------------------------
@@ -47,31 +50,77 @@ export class CalciteRadioButton {
         item.focused = selected;
       });
     };
-    this.toggle = () => {
+    this.queryButtons = () => {
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+    };
+    this.isDefaultSelectable = () => {
+      const radioButtons = this.queryButtons();
+      return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+    };
+    this.check = () => {
+      if (this.disabled) {
+        return;
+      }
       this.uncheckAllRadioButtonsInGroup();
       this.checked = true;
       this.focused = true;
       this.calciteRadioButtonChange.emit();
     };
     this.clickHandler = () => {
-      this.toggle();
+      this.check();
     };
-    this.setInputEl = (el) => {
-      this.inputEl = el;
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
     };
-    this.formResetHandler = () => {
-      var _a;
-      this.checked = this.initialChecked;
-      this.initialChecked && ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("checked", ""));
-    };
-    this.hideInputEl = () => {
-      this.inputEl.style.cssText = hiddenInputStyle;
+    this.handleKeyDown = (event) => {
+      const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+      const key = getKey(event.key);
+      const { el } = this;
+      if (keys.indexOf(key) === -1) {
+        return;
+      }
+      if (key === " ") {
+        this.check();
+        return;
+      }
+      let adjustedKey = key;
+      if (getElementDir(el) === "rtl") {
+        if (key === "ArrowRight") {
+          adjustedKey = "ArrowLeft";
+        }
+        if (key === "ArrowLeft") {
+          adjustedKey = "ArrowRight";
+        }
+      }
+      const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+      let currentIndex = 0;
+      const radioButtonsLength = radioButtons.length;
+      radioButtons.some((item, index) => {
+        if (item.checked) {
+          currentIndex = index;
+          return true;
+        }
+      });
+      switch (adjustedKey) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
+          return;
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
+          return;
+        default:
+          return;
+      }
     };
-    this.onInputBlur = () => {
+    this.onContainerBlur = () => {
       this.focused = false;
       this.calciteInternalRadioButtonBlur.emit();
     };
-    this.onInputFocus = () => {
+    this.onContainerFocus = () => {
       this.focused = true;
       this.calciteInternalRadioButtonFocus.emit();
     };
@@ -80,44 +129,15 @@ export class CalciteRadioButton {
     if (newChecked) {
       this.uncheckOtherRadioButtonsInGroup();
     }
-    if (this.inputEl) {
-      this.inputEl.checked = newChecked;
-    }
     this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
   }
-  disabledChanged(disabled) {
-    this.inputEl.disabled = disabled;
-  }
-  focusedChanged(focused) {
-    if (!this.inputEl) {
-      return;
-    }
-    if (focused && !this.el.hasAttribute("hidden")) {
-      this.inputEl.focus();
-    }
-    else {
-      this.inputEl.blur();
-    }
-  }
-  hiddenChanged(newHidden) {
-    this.inputEl.hidden = newHidden;
-  }
-  nameChanged(newName) {
-    if (this.name === newName) {
-      return;
-    }
-    if (this.inputEl) {
-      this.inputEl.name = newName;
-    }
+  nameChanged() {
     this.checkLastRadioButton();
     const currentValue = this.rootNode.querySelector(`input[name="${this.name}"]:checked`);
     if (!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.value)) {
       this.uncheckAllRadioButtonsInGroup();
     }
   }
-  requiredChanged(required) {
-    this.inputEl.required = required;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -125,7 +145,7 @@ export class CalciteRadioButton {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.inputEl);
+    focusElement(this.containerEl);
   }
   onLabelClick(event) {
     if (!this.disabled && !this.hidden) {
@@ -143,7 +163,7 @@ export class CalciteRadioButton {
     }
   }
   checkLastRadioButton() {
-    const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
+    const radioButtons = this.queryButtons();
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
     if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
       const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
@@ -160,16 +180,17 @@ export class CalciteRadioButton {
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
   uncheckAllRadioButtonsInGroup() {
-    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
-    otherRadioButtons.forEach((otherRadioButton) => {
-      if (otherRadioButton.checked) {
-        otherRadioButton.checked = false;
-        otherRadioButton.focused = false;
+    const radioButtons = this.queryButtons();
+    radioButtons.forEach((radioButton) => {
+      if (radioButton.checked) {
+        radioButton.checked = false;
+        radioButton.focused = false;
       }
     });
   }
   uncheckOtherRadioButtonsInGroup() {
-    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name && radioButton.guid !== this.guid);
+    const radioButtons = this.queryButtons();
+    const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);
     otherRadioButtons.forEach((otherRadioButton) => {
       if (otherRadioButton.checked) {
         otherRadioButton.checked = false;
@@ -196,28 +217,20 @@ export class CalciteRadioButton {
   connectedCallback() {
     this.rootNode = this.el.getRootNode();
     this.guid = this.el.id || `calcite-radio-button-${guid()}`;
-    this.initialChecked = this.checked;
     if (this.name) {
       this.checkLastRadioButton();
     }
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.addEventListener("reset", this.formResetHandler);
-    }
     connectLabel(this);
+    connectForm(this);
   }
   componentDidLoad() {
-    this.hideInputEl();
     if (this.focused) {
-      this.inputEl.focus();
+      this.containerEl.focus();
     }
   }
   disconnectedCallback() {
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -225,15 +238,13 @@ export class CalciteRadioButton {
   //
   // --------------------------------------------------------------------------
   render() {
-    var _a;
-    const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h(Host, { onClick: this.clickHandler },
-      h("div", { class: CSS.container },
-        h("input", { "aria-label": getLabelText(this), checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }),
-        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale }))));
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 },
+        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-radio-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["calcite-radio-button.scss"]
   }; }
@@ -289,8 +300,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio button."
       },
@@ -345,8 +356,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio button."
       },
@@ -366,8 +377,8 @@ export class CalciteRadioButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the radio input"
       },
@@ -434,7 +445,7 @@ export class CalciteRadioButton {
     },
     "value": {
       "type": "any",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "any",
         "resolved": "any",
@@ -458,8 +469,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is blurred."
       },
@@ -491,8 +502,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the checked property changes.  This is an internal event used for styling purposes only.\nUse calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms."
       },
@@ -509,8 +520,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is focused."
       },
@@ -561,21 +572,9 @@ export class CalciteRadioButton {
   static get watchers() { return [{
       "propName": "checked",
       "methodName": "checkedChanged"
-    }, {
-      "propName": "disabled",
-      "methodName": "disabledChanged"
-    }, {
-      "propName": "focused",
-      "methodName": "focusedChanged"
-    }, {
-      "propName": "hidden",
-      "methodName": "hiddenChanged"
     }, {
       "propName": "name",
       "methodName": "nameChanged"
-    }, {
-      "propName": "required",
-      "methodName": "requiredChanged"
     }]; }
   static get listeners() { return [{
       "name": "mouseenter",

package/dist/collection/components/calcite-radio-button/resources.js

@@ -3,5 +3,5 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
-  container: "calcite-radio-button__container"
+  container: "container"
 };