@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

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

@@ -230,14 +230,6 @@
   transition: 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
 }
 
-@media only screen and (max-width: 860px) {
-  :host .container {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 0;
-  }
-}
-
 .container {
   display: flex;
   width: 100%;
@@ -264,12 +256,6 @@
   pointer-events: initial;
 }
 
-@media only screen and (max-width: 860px) {
-  :host([active]) .container:not(.queued) {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
 slot[name=title]::slotted(*),
 *::slotted([slot=title]) {
   font-weight: var(--calcite-font-weight-medium);
@@ -315,12 +301,6 @@ slot[name=link]::slotted(*),
   border-bottom-right-radius: var(--calcite-border-radius);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-content {
-    padding: 1rem;
-  }
-}
-
 .alert-content:first-of-type:not(:only-child) {
   padding-left: var(--calcite-alert-spacing-token-large);
 }
@@ -329,12 +309,6 @@ slot[name=link]::slotted(*),
   padding: var(--calcite-alert-spacing-token-small);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-content {
-    padding: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large) 0;
-  }
-}
-
 .calcite--rtl .alert-content {
   padding: var(--calcite-alert-spacing-token-small) 0 var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small);
 }
@@ -343,12 +317,6 @@ slot[name=link]::slotted(*),
   padding-right: var(--calcite-alert-spacing-token-large);
 }
 
-@media only screen and (max-width: 860px) {
-  .calcite--rtl .alert-content {
-    padding: var(--calcite-alert-spacing-token-large) 0 var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
-  }
-}
-
 .alert-icon {
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
@@ -361,18 +329,6 @@ slot[name=link]::slotted(*),
   background-color: var(--calcite-ui-foreground-1);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-icon {
-    padding: 1rem;
-  }
-}
-
-@media only screen and (min-width: 860px) {
-  .alert-icon {
-    border-bottom-left-radius: var(--calcite-border-radius);
-  }
-}
-
 .alert-close {
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
@@ -390,12 +346,6 @@ slot[name=link]::slotted(*),
   border-bottom-right-radius: var(--calcite-border-radius);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-close {
-    padding: 1rem;
-  }
-}
-
 .alert-close:hover, .alert-close:focus {
   color: var(--calcite-ui-text-1);
   background-color: var(--calcite-ui-foreground-2);
@@ -405,12 +355,6 @@ slot[name=link]::slotted(*),
   background-color: var(--calcite-ui-foreground-3);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-close {
-    border-radius: 0;
-  }
-}
-
 .calcite--rtl .alert-close {
   border-bottom-left-radius: var(--calcite-border-radius);
   border-bottom-right-radius: unset;
@@ -440,12 +384,6 @@ slot[name=link]::slotted(*),
   opacity: 1;
 }
 
-@media only screen and (min-width: 860px) {
-  .alert-queue-count.active {
-    border-bottom-right-radius: var(--calcite-border-radius);
-  }
-}
-
 :host([auto-dismiss]) > .alert-queue-count {
   border-right: 0px solid transparent;
 }

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

@@ -297,8 +297,8 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "string to override English close text"
       },
@@ -391,8 +391,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired to sync queue when opened or closed"
       },
@@ -409,8 +409,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when an alert is added to dom - used to receive initial queue"
       },

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

@@ -237,8 +237,8 @@ calcite-handle {
 
 .title {
   margin: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0;
   padding-bottom: 0;
 }

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

@@ -258,8 +258,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -279,8 +279,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Options\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Options\""
           }],
         "text": "Text string used for the actions menu"
       },

package/dist/collection/components/calcite-block-section/calcite-block-section.css

@@ -155,6 +155,7 @@
   margin-top: 0;
   margin-bottom: 0;
   text-align: initial;
+  word-wrap: anywhere;
 }
 
 .toggle--switch calcite-switch {

package/dist/collection/components/calcite-button/calcite-button.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 "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
-import { getElementDir, queryElementRoots, closestElementCrossShadowBoundary } from "../../utils/dom";
+import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
@@ -48,46 +49,23 @@ export class CalciteButton {
     this.hasContent = false;
     /** determine if loader present for styling purposes */
     this.hasLoader = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = (event) => {
-      this.handleClick(event);
-      this.setFocus();
-    };
     // act on a requested or nearby form based on type
-    this.handleClick = (e) => {
-      const { childElType, form, el, type } = this;
+    this.handleClick = () => {
+      const { childElType, formEl, type } = this;
       // this.type refers to type attribute, not child element type
       if (childElType === "button" && type !== "button") {
-        const targetForm = form
-          ? queryElementRoots(el, `#${form}`)
-          : closestElementCrossShadowBoundary(el, "form");
-        if (targetForm) {
-          const targetFormSubmitFunction = targetForm.onsubmit;
-          switch (type) {
-            case "submit":
-              if (targetFormSubmitFunction) {
-                targetFormSubmitFunction();
-              }
-              else if (targetForm.checkValidity()) {
-                targetForm.submit();
-              }
-              else {
-                targetForm.reportValidity();
-              }
-              break;
-            case "reset":
-              targetForm.reset();
-              break;
-          }
+        if (type === "submit") {
+          formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
+        }
+        else if (type === "reset") {
+          formEl === null || formEl === void 0 ? void 0 : formEl.reset();
         }
-        e.preventDefault();
       }
     };
   }
+  hrefHandler(href) {
+    this.childElType = href ? "a" : "button";
+  }
   loadingChanged(newValue, oldValue) {
     if (!!newValue && !oldValue) {
       this.hasLoader = true;
@@ -108,11 +86,13 @@ export class CalciteButton {
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
+    this.formEl = closestElementCrossShadowBoundary(this.el, this.form ? `#${this.form}` : "form");
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectLabel(this);
+    this.formEl = null;
   }
   componentWillLoad() {
     if (Build.isBrowser) {
@@ -157,6 +137,15 @@ export class CalciteButton {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.handleClick();
+    this.setFocus();
+  }
   static get is() { return "calcite-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -355,8 +344,8 @@ export class CalciteButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -427,7 +416,10 @@ export class CalciteButton {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "\u2013 this property is no longer needed if placed inside a form."
+          }],
         "text": "The form ID to associate with the component"
       },
       "attribute": "form",
@@ -551,6 +543,7 @@ export class CalciteButton {
     }
   }; }
   static get states() { return {
+    "childElType": {},
     "hasContent": {},
     "hasLoader": {}
   }; }
@@ -574,6 +567,9 @@ export class CalciteButton {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "href",
+      "methodName": "hrefHandler"
+    }, {
       "propName": "loading",
       "methodName": "loadingChanged"
     }]; }

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

@@ -95,8 +95,8 @@ export class CalciteCard {
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
-    return (h("label", { "aria-label": checkboxLabel, class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown, title: checkboxLabel },
-      h("calcite-checkbox", { checked: this.selected })));
+    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown },
+      h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
     const title = this.el.querySelector(`[slot=${SLOTS.title}]`);
@@ -189,8 +189,8 @@ export class CalciteCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -210,8 +210,8 @@ export class CalciteCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Select\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Select\""
           }],
         "text": "string to override English select text for checkbox when selectable is true"
       },
@@ -231,8 +231,8 @@ export class CalciteCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Deselect\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Deselect\""
           }],
         "text": "string to override English deselect text for checkbox when selectable is true"
       },

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

@@ -122,10 +122,13 @@
   transition-property: all;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  stroke: currentColor;
+  stroke-width: 1;
+  fill: currentColor;
   width: var(--calcite-checkbox-size);
   height: var(--calcite-checkbox-size);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
-  fill: var(--calcite-ui-background);
+  color: var(--calcite-ui-background);
 }
 
 :host ::slotted(input) {

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

@@ -67,9 +67,6 @@ export class CalciteCheckbox {
     this.formResetHandler = () => {
       this.checked = this.initialChecked;
     };
-    this.onLabelClick = () => {
-      this.toggle();
-    };
   }
   checkedWatcher(newChecked) {
     this.input.checked = newChecked;
@@ -108,6 +105,9 @@ export class CalciteCheckbox {
     this.focused = true;
     this.calciteInternalCheckboxFocus.emit(true);
   }
+  onLabelClick() {
+    this.toggle();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -157,7 +157,7 @@ export class CalciteCheckbox {
   }
   render() {
     return (h(Host, { onClick: this.clickHandler },
-      h("div", { class: { focused: this.focused, test: true } },
+      h("div", { class: { focused: this.focused } },
         h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
           h("path", { d: this.getPath() })),
         h("slot", null))));
@@ -236,8 +236,8 @@ export class CalciteCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the checkbox."
       },
@@ -275,8 +275,8 @@ export class CalciteCheckbox {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the checkbox input"
       },
@@ -353,8 +353,8 @@ export class CalciteCheckbox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the checkbox is blurred"
       },
@@ -386,8 +386,8 @@ export class CalciteCheckbox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the checkbox is focused"
       },

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

@@ -164,8 +164,8 @@ export class CalciteChip {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "Aria label for the \"x\" button"
       },