@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/collection/components/calcite-action-group/resources.js

@@ -1,3 +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.
+ */
 export const SLOTS = {
   menuActions: "menu-actions",
   menuTooltip: "menu-tooltip"

package/dist/collection/components/calcite-action-menu/calcite-action-menu.js

@@ -1,3 +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.
+ */
 import { Component, h, Element, Event, Listen, Prop, Watch, Method, State } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { focusElement, getSlotted } from "../../utils/dom";
@@ -213,11 +217,13 @@ export class CalciteActionMenu {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.mutationObserver.observe(this.el, { childList: true, subtree: true });
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.getActions();
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.disconnectMenuButtonEl();
   }
   expandedHandler() {
@@ -400,8 +406,8 @@ export class CalciteActionMenu {
       "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."
       },

package/dist/collection/components/calcite-action-menu/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   menu: "menu",
   defaultTrigger: "default-trigger"

package/dist/collection/components/calcite-action-pad/calcite-action-pad.js

@@ -1,3 +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.
+ */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { getElementDir, focusElement, getSlotted } from "../../utils/dom";

package/dist/collection/components/calcite-action-pad/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",
   container: "container"

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, setRequestedIcon } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
@@ -293,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"
       },
@@ -387,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"
       },
@@ -405,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-alert/interfaces.js

@@ -1,3 +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.
+ */
 export var StatusIcons;
 (function (StatusIcons) {
   StatusIcons["green"] = "checkCircle";

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

@@ -1,3 +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.
+ */
 export const TEXT = {
   intlClose: "Close"
 };

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

@@ -1,3 +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.
+ */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";

package/dist/collection/components/calcite-avatar/utils.js

@@ -1,3 +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.
+ */
 import { hexToRGB } from "../calcite-color-picker/utils";
 /**
  * Convert a string to a valid hex by hashing its contents

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;
 }
@@ -277,6 +277,24 @@ calcite-handle {
   color: var(--calcite-ui-danger);
 }
 
+.status-icon.loading {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .toggle-icon {
   margin-right: 1rem;
   align-self: center;

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

@@ -1,13 +1,17 @@
+/*!
+ * 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, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
+ * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
  * @slot control - A slot for adding a single HTML input element in a header.
  * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot - A slot for adding content to the block.
  */
 export class CalciteBlock {
   constructor() {
@@ -65,15 +69,16 @@ export class CalciteBlock {
     return [loading || disabled ? h("calcite-scrim", { loading: loading }) : null, defaultSlot];
   }
   renderIcon() {
-    var _a;
     const { el, status } = this;
-    const icon = (_a = ICONS[status]) !== null && _a !== void 0 ? _a : false;
-    const hasIcon = getSlotted(el, SLOTS.icon) || icon;
-    const iconEl = !icon ? (h("slot", { name: SLOTS.icon })) : (h("calcite-icon", { class: {
+    const showingLoadingStatus = this.loading && !this.open;
+    const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status];
+    const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
+    const iconEl = !statusIcon ? (h("slot", { name: SLOTS.icon })) : (h("calcite-icon", { class: {
         [CSS.statusIcon]: true,
         [CSS.valid]: status == "valid",
-        [CSS.invalid]: status == "invalid"
-      }, icon: icon, scale: "m" }));
+        [CSS.invalid]: status == "invalid",
+        [CSS.loading]: showingLoadingStatus
+      }, icon: statusIcon, scale: "m" }));
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
   render() {
@@ -253,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"
       },
@@ -274,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/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   article: "article",
   content: "content",
@@ -13,7 +17,8 @@ export const CSS = {
   summary: "summary",
   controlContainer: "control-container",
   valid: "valid",
-  invalid: "invalid"
+  invalid: "invalid",
+  loading: "loading"
 };
 export const TEXT = {
   collapse: "Collapse",
@@ -30,6 +35,7 @@ export const ICONS = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
-  invalid: "exclamation-mark-triangle"
+  invalid: "exclamation-mark-triangle",
+  refresh: "refresh"
 };
 export const HEADING_LEVEL = 4;

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-block-section/calcite-block-section.js

@@ -1,3 +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.
+ */
 import { Component, Element, Event, Prop, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -17,6 +21,18 @@ export class CalciteBlockSection {
      * If the value is "button", a clickable header is displayed.
      */
     this.toggleDisplay = "button";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleHeaderKeyDown = (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        this.toggleSection();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
     this.toggleSection = () => {
       this.open = !this.open;
       this.calciteBlockSectionToggle.emit();
@@ -24,18 +40,6 @@ export class CalciteBlockSection {
   }
   // --------------------------------------------------------------------------
   //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  handleHeaderLabelKeyDown(event) {
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.click();
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -59,17 +63,17 @@ export class CalciteBlockSection {
         ? ICONS.menuClosedLeft
         : ICONS.menuClosedRight;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-    const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
+    const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-label": toggleLabel, class: {
         [CSS.toggle]: true,
         [CSS.toggleSwitch]: true
-      }, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0, title: toggleLabel },
+      }, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel },
       h("div", { class: CSS.toggleSwitchContent },
         h("span", { class: CSS.toggleSwitchText }, text)),
-      h("calcite-switch", { onCalciteSwitchChange: this.toggleSection, scale: "s", switched: open, tabIndex: -1 }),
+      h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }),
       this.renderStatusIcon())) : (h("button", { "aria-label": toggleLabel, class: {
         [CSS.sectionHeader]: true,
         [CSS.toggle]: true
-      }, name: toggleLabel, onClick: this.toggleSection, onKeyDown: this.handleHeaderLabelKeyDown },
+      }, name: toggleLabel, onClick: this.toggleSection },
       h("calcite-icon", { icon: arrowIcon, scale: "s" }),
       h("span", { class: CSS.sectionHeaderText }, text),
       this.renderStatusIcon()));

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -1,3 +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.
+ */
 export const CSS = {
   content: "content",
   invalid: "invalid",

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

@@ -1,11 +1,17 @@
+/*!
+ * 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";
-/** @slot default text slot for button text */
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
+/** @slot - A slot for adding text. */
 export class CalciteButton {
   constructor() {
     //--------------------------------------------------------------------------
@@ -35,11 +41,6 @@ export class CalciteButton {
     this.splitChild = false;
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     /** watches for changing text content **/
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     /** the node type of the rendered child element */
@@ -48,42 +49,23 @@ export class CalciteButton {
     this.hasContent = false;
     /** determine if loader present for styling purposes */
     this.hasLoader = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     // 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;
@@ -103,10 +85,14 @@ export class CalciteButton {
     this.childElType = this.href ? "a" : "button";
     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) {
@@ -124,7 +110,7 @@ export class CalciteButton {
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const contentEl = (h("span", { class: CSS.content },
       h("slot", null)));
-    return (h(Tag, { "aria-label": this.label, class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
+    return (h(Tag, { "aria-label": getLabelText(this), class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
       loader,
       this.iconStart ? iconStartEl : null,
       this.hasContent ? contentEl : null,
@@ -151,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 {
@@ -349,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"
       },
@@ -421,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",
@@ -545,6 +543,7 @@ export class CalciteButton {
     }
   }; }
   static get states() { return {
+    "childElType": {},
     "hasContent": {},
     "hasLoader": {}
   }; }
@@ -568,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-button/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};