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

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

@@ -121,4 +121,19 @@
 :host([disabled]) {
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;
+}
+
+::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-group/calcite-radio-group.js

@@ -6,6 +6,7 @@ import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method
 import { getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
  */
@@ -20,10 +21,18 @@ export class CalciteRadioGroup {
     this.appearance = "solid";
     /** is the radio group disabled  */
     this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the layout of the radio group, defaults to horizontal */
     this.layout = "horizontal";
     /** The scale of the radio group */
     this.scale = "m";
+    /** The value of the selectedItem */
+    this.value = null;
     /** specify the width of the group, defaults to auto */
     this.width = "auto";
     //--------------------------------------------------------------------------
@@ -36,17 +45,13 @@ export class CalciteRadioGroup {
         this.selectItem(event.target);
       }
     };
-    this.hiddenInput = (() => {
-      const input = document.createElement("input");
-      input.type = "hidden";
-      this.el.appendChild(input);
-      return input;
-    })();
   }
-  handleNameChange(value) {
-    this.hiddenInput.name = value;
+  valueHandler(value) {
+    const items = this.getItems();
+    items.forEach((item) => (item.checked = item.value === value));
   }
   handleSelectedItemChange(newItem, oldItem) {
+    this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value;
     if (newItem === oldItem) {
       return;
     }
@@ -78,24 +83,20 @@ export class CalciteRadioGroup {
     else if (items[0]) {
       items[0].tabIndex = 0;
     }
-    const { hiddenInput, name } = this;
-    if (name) {
-      hiddenInput.name = name;
-    }
-    if (lastChecked) {
-      hiddenInput.value = lastChecked.value;
-    }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
     return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null },
-      h("slot", null)));
+      h("slot", null),
+      h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
@@ -187,14 +188,10 @@ export class CalciteRadioGroup {
       }
     });
     this.selectedItem = match;
-    this.syncWithInputProxy(match);
     if (Build.isBrowser && match) {
       match.focus();
     }
   }
-  syncWithInputProxy(item) {
-    this.hiddenInput.value = item ? item.value : "";
-  }
   static get is() { return "calcite-radio-group"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -245,6 +242,27 @@ export class CalciteRadioGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "layout": {
       "type": "string",
       "mutable": false,
@@ -308,6 +326,24 @@ export class CalciteRadioGroup {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the selectedItem"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "selectedItem": {
       "type": "unknown",
       "mutable": true,
@@ -390,8 +426,8 @@ export class CalciteRadioGroup {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "name",
-      "methodName": "handleNameChange"
+      "propName": "value",
+      "methodName": "valueHandler"
     }, {
       "propName": "selectedItem",
       "methodName": "handleSelectedItemChange"

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

@@ -207,8 +207,8 @@ export class CalciteRadioGroupItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the item has been selected."
       },

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

@@ -225,4 +225,19 @@ calcite-chip {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
+}
+
+::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-rating/calcite-rating.js

@@ -6,6 +6,7 @@ import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } f
 import { getElementDir } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteRating {
@@ -33,6 +34,12 @@ export class CalciteRating {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -42,9 +49,11 @@ export class CalciteRating {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -93,7 +102,8 @@ export class CalciteRating {
         !!count && h("span", { class: "number--count" },
           "(", count === null || count === void 0 ? void 0 :
           count.toString(),
-          ")"))) : null));
+          ")"))) : null,
+      h(HiddenFormInputSlot, { component: this })));
   }
   //--------------------------------------------------------------------------
   //
@@ -254,6 +264,23 @@ export class CalciteRating {
       "attribute": "average",
       "reflect": true
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the rating"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "intlRating": {
       "type": "string",
       "mutable": false,
@@ -266,8 +293,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Rating\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Rating\""
           }],
         "text": "Localized string for \"Rating\" (used for aria label)"
       },
@@ -287,14 +314,35 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Stars: ${num}\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Stars: ${num}\""
           }],
         "text": "Localized string for labelling each star, `${num}` in the string will be replaced by the number"
       },
       "attribute": "intl-stars",
       "reflect": false,
       "defaultValue": "TEXT.stars"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -60,8 +60,8 @@ export class CalciteScrim {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },

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

@@ -242,4 +242,19 @@ select:disabled {
 
 .select:focus ~ .icon-container {
   border-color: transparent;
+}
+
+::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-select/calcite-select.js

@@ -2,9 +2,10 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Event, Fragment, h, Listen, Method, Prop } from "@stencil/core";
+import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { CSS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
@@ -28,10 +29,18 @@ export class CalciteSelect {
      * When true, it prevents the option from being selected.
      */
     this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /**
      * The component scale.
      */
     this.scale = "m";
+    /** The value of the selectedOption */
+    this.value = null;
     /**
      * The component width.
      */
@@ -44,7 +53,7 @@ export class CalciteSelect {
       requestAnimationFrame(() => this.emitChangeEvent());
     };
     this.populateInternalSelect = () => {
-      const optionsAndGroups = Array.from(this.el.children);
+      const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
       this.clearInternalSelect();
       optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
     };
@@ -58,6 +67,13 @@ export class CalciteSelect {
       this.calciteSelectChange.emit();
     };
   }
+  valueHandler(value) {
+    const items = this.el.querySelectorAll("calcite-option");
+    items.forEach((item) => (item.selected = item.value === value));
+  }
+  selectedOptionHandler(selectedOption) {
+    this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -71,11 +87,17 @@ export class CalciteSelect {
       childList: true
     });
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
   }
   //--------------------------------------------------------------------------
   //
@@ -180,7 +202,8 @@ export class CalciteSelect {
     return (h(Fragment, null,
       h("select", { "aria-label": this.label, class: { [CSS.select]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
         h("slot", null)),
-      this.renderChevron(dir)));
+      this.renderChevron(dir),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-select"; }
   static get encapsulation() { return "shadow"; }
@@ -226,6 +249,44 @@ export class CalciteSelect {
       "attribute": "label",
       "reflect": false
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's name. Gets submitted with the form."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "scale": {
       "type": "string",
       "mutable": false,
@@ -249,6 +310,24 @@ export class CalciteSelect {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the selectedOption"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "selectedOption": {
       "type": "unknown",
       "mutable": true,
@@ -265,8 +344,8 @@ export class CalciteSelect {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "The currently selected option."
       }
@@ -330,6 +409,13 @@ export class CalciteSelect {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueHandler"
+    }, {
+      "propName": "selectedOption",
+      "methodName": "selectedOptionHandler"
+    }]; }
   static get listeners() { return [{
       "name": "calciteOptionChange",
       "method": "handleOptionOrGroupChange",

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

@@ -125,11 +125,6 @@
   display: flex;
   flex-direction: row;
   position: relative;
-  border-width: 0;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
   justify-content: space-between;
   overflow: hidden;
 }
@@ -140,15 +135,11 @@
 
 .content {
   display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
   height: 100%;
   overflow: auto;
   width: 100%;
-  border-width: 0;
-  border-left-width: 1px;
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-  flex-flow: column nowrap;
 }
 
 .content ::slotted(calcite-shell-center-row),
@@ -186,6 +177,15 @@
   z-index: 1;
 }
 
+::slotted(calcite-panel),
+::slotted(calcite-flow) {
+  border-width: 1px;
+  border-color: var(--calcite-ui-border-3);
+  border-style: solid;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+
 slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])) {
   border-left-width: 1px;
   border-right-width: 1px;

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

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -97,11 +85,25 @@
 }
 
 :host {
+  display: flex;
+  align-items: stretch;
+  flex: 0 1 auto;
+  --calcite-shell-panel-detached-max-height: unset;
+}
+
+.container {
+  box-sizing: border-box;
   display: flex;
   align-items: stretch;
   background-color: transparent;
+  flex: 1 1 auto;
   pointer-events: none;
-  --calcite-shell-panel-detached-max-height: unset;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+}
+
+.container * {
+  box-sizing: border-box;
 }
 
 ::slotted(calcite-panel),
@@ -196,18 +198,33 @@
   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) {
+  border-style: none;
+}
+
 .content[hidden] {
   display: none;
 }
 
-:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar) {
-  border-right-width: 1px;
-  border-right-color: var(--calcite-ui-border-3);
-  border-right-style: solid;
+slot[name=action-bar]::slotted(calcite-action-bar),
+.content ::slotted(calcite-flow),
+.content ::slotted(calcite-panel) {
+  border-width: 1px;
+  border-color: var(--calcite-ui-border-3);
+  border-style: solid;
+}
+
+:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),
+:host([position=start]) .content ::slotted(calcite-flow),
+:host([position=start]) .content ::slotted(calcite-panel) {
+  border-inline-start: none;
 }
 
-:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar) {
-  border-left-width: 1px;
-  border-left-color: var(--calcite-ui-border-3);
-  border-left-style: solid;
+:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),
+:host([position=end]) .content ::slotted(calcite-flow),
+:host([position=end]) .content ::slotted(calcite-panel) {
+  border-inline-end: none;
 }

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

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Event, Prop, Watch, h, Fragment } from "@stencil/core";
+import { Component, Element, Event, Prop, Watch, h } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
@@ -58,7 +58,7 @@ export class CalciteShellPanel {
     if (position === "end") {
       mainNodes.reverse();
     }
-    return h(Fragment, null, mainNodes);
+    return h("div", { class: { [CSS.container]: true } }, mainNodes);
   }
   static get is() { return "calcite-shell-panel"; }
   static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
+  container: "container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",