@esri/calcite-components 1.0.0-beta.63 → 1.0.0-beta.67

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

@@ -98,25 +98,25 @@
   text-align: center;
 }
 
-:host([scale=s]) label {
+:host([scale=s]) .container {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   margin-bottom: 0.5rem;
 }
 
-:host([scale=m]) label {
+:host([scale=m]) .container {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   margin-bottom: 0.75rem;
 }
 
-:host([scale=l]) label {
+:host([scale=l]) .container {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   margin-bottom: 1rem;
 }
 
-:host label {
+:host .container {
   color: var(--calcite-ui-text-1);
   cursor: pointer;
   width: 100%;
@@ -126,15 +126,15 @@
   line-height: 1.375;
 }
 
-:host([layout=default]) label {
+:host([layout=default]) .container {
   display: flex;
   flex-direction: column;
   grid-gap: 0.25rem;
   gap: 0.25rem;
 }
 
-:host([layout=inline]) label,
-:host([layout=inline-space-between]) label {
+:host([layout=inline]) .container,
+:host([layout=inline-space-between]) .container {
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -142,16 +142,16 @@
   gap: 0.5rem;
 }
 
-:host([layout=inline][scale=l]) label {
+:host([layout=inline][scale=l]) .container {
   grid-gap: 0.75rem;
   gap: 0.75rem;
 }
 
-:host([layout=inline-space-between]) label {
+:host([layout=inline-space-between]) .container {
   justify-content: space-between;
 }
 
-:host([disabled]) > label {
+:host([disabled]) > .container {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -169,7 +169,7 @@
   --bg-opacity: 0;
 }
 
-:host([disable-spacing]) label {
+:host([disable-spacing]) .container {
   grid-gap: 0;
   gap: 0;
   margin: 0;

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

@@ -1,6 +1,10 @@
-import { Component, Element, Event, Listen, h, Prop } from "@stencil/core";
-import { getElementDir, queryElementRoots } from "../../utils/dom";
+import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
+import { getElementDir } from "../../utils/dom";
+import { CSS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding text and a component that can be labeled.
+ */
 export class CalciteLabel {
   constructor() {
     //--------------------------------------------------------------------------
@@ -12,99 +16,38 @@ export class CalciteLabel {
     this.alignment = "start";
     /** specify the status of the label and any child input / input messages */
     this.status = "idle";
-    /** specify the scale of the input, defaults to m */
+    /** specify the scale of the label, defaults to m */
     this.scale = "m";
     /** is the wrapped element positioned inline with the label slotted text */
     this.layout = "default";
+    /** eliminates any space around the label */
+    this.disableSpacing = false;
+    /** is the label disabled  */
+    this.disabled = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.handleCalciteHtmlForClicks = (target) => {
-      // 1. has htmlFor
-      if (!this.for) {
-        return;
-      }
-      // 2. htmlFor matches a calcite component
-      const inputForThisLabel = queryElementRoots(this.el, `#${this.for}`);
-      if (!inputForThisLabel) {
-        return;
-      }
-      if (!inputForThisLabel.localName.startsWith("calcite")) {
-        return;
-      }
-      // 5. target is NOT the calcite component that this label matches
-      if (target === inputForThisLabel) {
-        return;
-      }
-      // 3. target is not a labelable native form element
-      const labelableNativeElements = [
-        "button",
-        "input",
-        "meter",
-        "output",
-        "progress",
-        "select",
-        "textarea"
-      ];
-      if (labelableNativeElements.includes(target.localName)) {
-        return;
-      }
-      // 4. target is not a labelable calcite form element
-      const labelableCalciteElements = [
-        "calcite-button",
-        "calcite-checkbox",
-        "calcite-date",
-        "calcite-inline-editable",
-        "calcite-input",
-        "calcite-radio",
-        "calcite-radio-button",
-        "calcite-radio-button-group",
-        "calcite-radio-group",
-        "calcite-rating",
-        "calcite-select",
-        "calcite-slider",
-        "calcite-switch"
-      ];
-      if (labelableCalciteElements.includes(target.localName)) {
-        return;
-      }
-      // 5. target is not a child of a labelable calcite form element
-      for (let i = 0; i < labelableCalciteElements.length; i++) {
-        if (target.closest(labelableCalciteElements[i])) {
-          return;
-        }
-      }
-      inputForThisLabel.click();
+    this.labelClickHandler = (event) => {
+      this.calciteInternalLabelClick.emit({
+        sourceEvent: event
+      });
     };
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  onClick(event) {
-    const target = event.target;
-    this.calciteLabelFocus.emit({
-      labelEl: this.el,
-      interactedEl: target,
-      requestedInput: this.for
-    });
-    this.handleCalciteHtmlForClicks(target);
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h("label", { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, htmlFor: this.for },
-      h("slot", null)));
+    return (h(Host, { onClick: this.labelClickHandler },
+      h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+        h("slot", null))));
   }
   static get is() { return "calcite-label"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["calcite-label.scss"]
   }; }
@@ -192,7 +135,7 @@ export class CalciteLabel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the input, defaults to m"
+        "text": "specify the scale of the label, defaults to m"
       },
       "attribute": "scale",
       "reflect": true,
@@ -225,13 +168,14 @@ export class CalciteLabel {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "eliminates any space around the label"
       },
       "attribute": "disable-spacing",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "disabled": {
       "type": "boolean",
@@ -242,19 +186,20 @@ export class CalciteLabel {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "is the label disabled"
       },
       "attribute": "disabled",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
-      "method": "calciteLabelFocus",
-      "name": "calciteLabelFocus",
-      "bubbles": true,
+      "method": "calciteInternalLabelClick",
+      "name": "calciteInternalLabelClick",
+      "bubbles": false,
       "cancelable": true,
       "composed": true,
       "docs": {
@@ -265,22 +210,14 @@ export class CalciteLabel {
         "text": ""
       },
       "complexType": {
-        "original": "FocusRequest",
-        "resolved": "FocusRequest",
+        "original": "{\n    sourceEvent: MouseEvent;\n  }",
+        "resolved": "{ sourceEvent: MouseEvent; }",
         "references": {
-          "FocusRequest": {
-            "location": "import",
-            "path": "./interfaces"
+          "MouseEvent": {
+            "location": "global"
           }
         }
       }
     }]; }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }

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

@@ -0,0 +1,3 @@
+export const CSS = {
+  container: "container"
+};

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

@@ -4,9 +4,16 @@ import { CSS_UTILITY } from "../../utils/resources";
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
 /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */
-/** @slot - default text slot for link text */
+/** @slot - A slot for adding text. */
 export class CalciteLink {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** is the link disabled  */
+    this.disabled = false;
     /** the node type of the rendered child element */
     this.childElType = "span";
     //--------------------------------------------------------------------------
@@ -44,6 +51,7 @@ export class CalciteLink {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.childEl);
   }
@@ -65,13 +73,14 @@ export class CalciteLink {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "is the link disabled"
       },
       "attribute": "disabled",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "href": {
       "type": "string",
@@ -194,7 +203,7 @@ export class CalciteLink {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -2,11 +2,11 @@ import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
+ * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.
  * @slot content-start - A slot for adding non-actionable elements before the label and description of the list item.
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the list item.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the list item.
- * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  */
 export class CalciteListItem {
   constructor() {
@@ -142,11 +142,8 @@ export class CalciteListItem {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "text": "The label of the list item.",
-            "name": "todo"
-          }],
-        "text": ""
+        "tags": [],
+        "text": "The label text of the list item. This will appear above the description text."
       },
       "attribute": "label",
       "reflect": false

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

@@ -17,6 +17,8 @@ export class CalciteLoader {
     this.value = 0;
     /** Text which should appear under the loading indicator (optional) */
     this.text = "";
+    /** Turn off spacing around the loader */
+    this.noPadding = false;
   }
   //--------------------------------------------------------------------------
   //
@@ -223,13 +225,14 @@ export class CalciteLoader {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Turn off spacing around the loader"
       },
       "attribute": "no-padding",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "el"; }

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

@@ -1,10 +1,11 @@
-import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getElementDir, getSlotted, isCalciteFocusable } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
 import { CSS_UTILITY } from "../../utils/resources";
 import { TEXT, SLOTS, CSS, ICONS } from "./resources";
+import { createObserver } from "../../utils/observers";
 const isFocusableExtended = (el) => {
   return isCalciteFocusable(el) || isFocusable(el);
 };
@@ -20,23 +21,38 @@ const getFocusableElements = (el) => {
  */
 export class CalciteModal {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Add the active attribute to open the modal */
+    this.active = false;
     /** Optionally pass a function to run before close */
     this.beforeClose = () => Promise.resolve();
+    /** Disables the display a close button within the Modal */
+    this.disableCloseButton = false;
+    /** Disables the closing of the Modal when clicked outside. */
+    this.disableOutsideClose = false;
     /** Aria label for the close button */
     this.intlClose = TEXT.close;
+    /** Flag to disable the default close on escape behavior */
+    this.disableEscape = false;
     /** specify the scale of modal, defaults to m */
     this.scale = "m";
     /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */
     this.width = "m";
     /** Background color of modal content */
     this.backgroundColor = "white";
+    /** Turn off spacing around the content area slot */
+    this.noPadding = false;
     //--------------------------------------------------------------------------
     //
     //  Variables
     //
     //--------------------------------------------------------------------------
     this.hasFooter = true;
-    this.mutationObserver = null;
+    this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
     this.activeTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
@@ -95,13 +111,8 @@ export class CalciteModal {
   }
   connectedCallback() {
     var _a;
-    if (Build.isBrowser) {
-      if (!this.mutationObserver) {
-        this.mutationObserver = new MutationObserver(this.updateFooterVisibility);
-      }
-      (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-      this.updateFooterVisibility();
-    }
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.updateFooterVisibility();
   }
   disconnectedCallback() {
     var _a;
@@ -252,13 +263,14 @@ export class CalciteModal {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Add the active attribute to open the modal"
       },
       "attribute": "active",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "beforeClose": {
       "type": "unknown",
@@ -292,13 +304,14 @@ export class CalciteModal {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Disables the display a close button within the Modal"
       },
       "attribute": "disable-close-button",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "disableOutsideClose": {
       "type": "boolean",
@@ -309,13 +322,14 @@ export class CalciteModal {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Disables the closing of the Modal when clicked outside."
       },
       "attribute": "disable-outside-close",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "intlClose": {
       "type": "string",
@@ -380,13 +394,14 @@ export class CalciteModal {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Flag to disable the default close on escape behavior"
       },
       "attribute": "disable-escape",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "scale": {
       "type": "string",
@@ -500,13 +515,14 @@ export class CalciteModal {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Turn off spacing around the content area slot"
       },
       "attribute": "no-padding",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -81,7 +81,7 @@ export class CalciteNotice {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** focus the close button, if present and requested */
+  /** Sets focus on the component. */
   async setFocus() {
     if (!this.closeButton && !this.noticeLinkEl) {
       return;
@@ -152,7 +152,7 @@ export class CalciteNotice {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Optionally show a button the user can click to dismiss the notice"
@@ -290,7 +290,7 @@ export class CalciteNotice {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "focus the close button, if present and requested",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -1,4 +1,5 @@
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
+import { createObserver } from "../../utils/observers";
 export class CalciteOption {
   constructor() {
     //--------------------------------------------------------------------------
@@ -10,7 +11,7 @@ export class CalciteOption {
      * When true, it prevents the option from being selected.
      */
     this.disabled = false;
-    this.mutationObserver = new MutationObserver(() => {
+    this.mutationObserver = createObserver("mutation", () => {
       this.ensureTextContentDependentProps();
       this.calciteOptionChange.emit();
     });
@@ -43,14 +44,16 @@ export class CalciteOption {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.ensureTextContentDependentProps();
-    this.mutationObserver.observe(this.el, {
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
       childList: true,
       attributeFilter: ["label", "value"]
     });
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/calcite-option-group/calcite-option-group.js

@@ -1,4 +1,7 @@
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-option`s.
+ */
 export class CalciteOptionGroup {
   constructor() {
     //--------------------------------------------------------------------------

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

@@ -15,11 +15,11 @@ export class CalcitePagination {
     this.start = 1;
     /** total number of items */
     this.total = 0;
-    /** title of the next button
+    /** Used as an accessible label (aria-label) for the next button
      * @default "Next"
      */
     this.textLabelNext = TEXT.nextLabel;
-    /** title of the previous button
+    /** Used as an accessible label (aria-label) of the previous button
      * @default "Previous"
      */
     this.textLabelPrevious = TEXT.previousLabel;
@@ -231,7 +231,7 @@ export class CalcitePagination {
             "text": "\"Next\"",
             "name": "default"
           }],
-        "text": "title of the next button"
+        "text": "Used as an accessible label (aria-label) for the next button"
       },
       "attribute": "text-label-next",
       "reflect": false,
@@ -252,7 +252,7 @@ export class CalcitePagination {
             "text": "\"Previous\"",
             "name": "default"
           }],
-        "text": "title of the previous button"
+        "text": "Used as an accessible label (aria-label) of the previous button"
       },
       "attribute": "text-label-previous",
       "reflect": false,