@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.86

package/dist/collection/components/input-number/interfaces.js

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

package/dist/collection/components/input-number/resources.js

@@ -0,0 +1,27 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.86
+ */
+export const CSS = {
+  loader: "loader",
+  clearButton: "clear-button",
+  editingEnabled: "editing-enabled",
+  inlineChild: "inline-child",
+  inputIcon: "icon",
+  prefix: "prefix",
+  suffix: "suffix",
+  numberButtonWrapper: "number-button-wrapper",
+  buttonItemHorizontal: "number-button-item--horizontal",
+  wrapper: "element-wrapper",
+  inputWrapper: "wrapper",
+  actionWrapper: "action-wrapper",
+  resizeIconWrapper: "resize-icon-wrapper",
+  numberButtonItem: "number-button-item"
+};
+export const SLOTS = {
+  action: "action"
+};
+export const TEXT = {
+  clear: "Clear value"
+};

package/dist/collection/components/input-time-picker/input-time-picker.js

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -20,6 +20,12 @@ export class InputTimePicker {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
+    /**
+     * When true, still focusable but controls are gone and the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
+    this.readOnly = false;
     /**
      * BCP 47 language tag for desired language and country format
      *
@@ -60,8 +66,10 @@ export class InputTimePicker {
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInternalInputFocusHandler = (event) => {
-      this.active = true;
-      event.stopPropagation();
+      if (!this.readOnly) {
+        this.active = true;
+        event.stopPropagation();
+      }
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -140,13 +148,13 @@ export class InputTimePicker {
     };
   }
   activeHandler() {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       this.active = false;
       return;
     }
     this.reposition();
   }
-  handleDisabledChange(value) {
+  handleDisabledAndReadOnlyChange(value) {
     if (!value) {
       this.active = false;
     }
@@ -180,7 +188,9 @@ export class InputTimePicker {
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.active = true;
+    if (!this.readOnly) {
+      this.active = true;
+    }
     event.stopPropagation;
   }
   // --------------------------------------------------------------------------
@@ -190,7 +200,8 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.calciteInputEl.setFocus();
+    var _a;
+    (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /** Updates the position of the component. */
   async reposition() {
@@ -234,8 +245,8 @@ export class InputTimePicker {
     const popoverId = `${this.referenceElementId}-popover`;
     return (h(Host, { onKeyDown: this.keyDownHandler },
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
-        h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId },
+        h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
+      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
         h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -284,6 +295,27 @@ export class InputTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+          }],
+        "text": "When true, still focusable but controls are gone and the value cannot be modified."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "intlHour": {
       "type": "string",
       "mutable": false,
@@ -692,7 +724,10 @@ export class InputTimePicker {
       "methodName": "activeHandler"
     }, {
       "propName": "disabled",
-      "methodName": "handleDisabledChange"
+      "methodName": "handleDisabledAndReadOnlyChange"
+    }, {
+      "propName": "readOnly",
+      "methodName": "handleDisabledAndReadOnlyChange"
     }, {
       "propName": "locale",
       "methodName": "localeWatcher"

package/dist/collection/components/interfaces.js

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

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

@@ -78,6 +78,13 @@
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-label-margin-bottom: The bottom margin of `calcite-label`.
+*/
 :host {
   display: inline;
 }
@@ -95,23 +102,35 @@
 }
 
 :host([scale=s]) .container {
-  margin-bottom: 0.5rem;
+  gap: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
+:host(:not([disable-spacing])[scale=s]) .container {
+  margin-bottom: var(--calcite-label-margin-bottom, 0.5rem);
+}
+
 :host([scale=m]) .container {
-  margin-bottom: 0.75rem;
+  gap: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
+:host(:not([disable-spacing])[scale=m]) .container {
+  margin-bottom: var(--calcite-label-margin-bottom, 0.75rem);
+}
+
 :host([scale=l]) .container {
-  margin-bottom: 1rem;
+  gap: 0.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 
+:host(:not([disable-spacing])[scale=l]) .container {
+  margin-bottom: var(--calcite-label-margin-bottom, 1rem);
+}
+
 :host .container {
   margin-left: 0px;
   margin-right: 0px;
@@ -124,10 +143,10 @@
 :host([layout=default]) .container {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
 }
 
-:host([layout=inline]) .container, :host([layout=inline-space-between]) .container {
+:host([layout=inline]) .container, 
+:host([layout=inline-space-between]) .container {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -156,7 +175,8 @@
 :host([disabled]) ::slotted(*) {
   pointer-events: none;
 }
-:host([disabled]) ::slotted(*[disabled]), :host([disabled]) ::slotted(*[disabled] *) {
+:host([disabled]) ::slotted(*[disabled]), 
+:host([disabled]) ::slotted(*[disabled] *) {
   --tw-bg-opacity: 1;
 }
 :host([disabled]) ::slotted(calcite-input-message:not([active])) {

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

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -28,14 +28,18 @@ export class Label {
     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
      *
      * @deprecated use the `disabled` property on the interactive components instead
      */
     this.disabled = false;
+    /**
+     * eliminates any space around the label
+     *
+     * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
+     */
+    this.disableSpacing = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -179,7 +183,7 @@ export class Label {
       "reflect": true,
       "defaultValue": "\"default\""
     },
-    "disableSpacing": {
+    "disabled": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -190,14 +194,17 @@ export class Label {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "eliminates any space around the label"
+        "tags": [{
+            "name": "deprecated",
+            "text": "use the `disabled` property on the interactive components instead"
+          }],
+        "text": "is the label disabled"
       },
-      "attribute": "disable-spacing",
-      "reflect": false,
+      "attribute": "disabled",
+      "reflect": true,
       "defaultValue": "false"
     },
-    "disabled": {
+    "disableSpacing": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -210,12 +217,12 @@ export class Label {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use the `disabled` property on the interactive components instead"
+            "text": "set the --calcite-label-margin-bottom css variable to 0 instead"
           }],
-        "text": "is the label disabled"
+        "text": "eliminates any space around the label"
       },
-      "attribute": "disabled",
-      "reflect": true,
+      "attribute": "disable-spacing",
+      "reflect": false,
       "defaultValue": "false"
     }
   }; }

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

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.css

@@ -82,7 +82,8 @@
   display: inline;
 }
 
-:host a, :host span {
+:host a, 
+:host span {
   position: relative;
   display: flex;
   cursor: pointer;
@@ -102,10 +103,12 @@
   text-decoration: none;
 }
 
-:host a, :host span {
+:host a, 
+:host span {
   outline-color: transparent;
 }
-:host a:focus, :host span:focus {
+:host a:focus, 
+:host span:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -131,7 +134,8 @@ calcite-icon {
   margin-inline-start: 0.5rem;
 }
 
-:host span, :host a {
+:host span, 
+:host a {
   position: relative;
   display: inline;
   border-style: none;

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

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";

package/dist/collection/components/list/list.js

@@ -1,13 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
+ *
  * @slot - A slot for adding `calcite-list-item` elements.
  */
 export class List {
@@ -18,7 +19,7 @@ export class List {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, prevents user interaction.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
   }
@@ -71,7 +72,7 @@ export class List {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents user interaction."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -94,7 +95,7 @@ export class List {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for the list."
+        "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
       "reflect": false

package/dist/collection/components/list/resources.js

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/list-item/list-item.css

@@ -134,14 +134,16 @@
 .content-container--button:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
-.content-container--button:hover .label, .content-container--button:hover .description {
+.content-container--button:hover .label, 
+.content-container--button:hover .description {
   color: var(--calcite-ui-text-1);
 }
 .content-container--button:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-.content-container--button .content-start, .content-container--button .content-end {
+.content-container--button .content-start, 
+.content-container--button .content-end {
   pointer-events: none;
 }
 
@@ -158,14 +160,16 @@
   line-height: 1.375;
 }
 
-.label, .description {
+.label, 
+.description {
   font-family: var(--calcite-sans-family);
   font-size: var(--calcite-font-size--2);
   font-weight: var(--calcite-font-weight-normal);
   word-wrap: break-word;
   word-break: break-word;
 }
-.label:only-child, .description:only-child {
+.label:only-child, 
+.description:only-child {
   margin: 0px;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -188,26 +192,33 @@
   justify-content: flex-end;
 }
 
-.content-start, .content-end {
+.content-start, 
+.content-end {
   flex: 1 1 auto;
 }
 
-.has-center-content .content-start, .has-center-content .content-end {
+.has-center-content .content-start, 
+.has-center-content .content-end {
   flex: 0 1 auto;
 }
 
-.actions-start, .actions-end, .content-start, .content-end {
+.actions-start, 
+.actions-end, 
+.content-start, 
+.content-end {
   display: flex;
   align-items: center;
 }
 
-.content-start ::slotted(calcite-icon), .content-end ::slotted(calcite-icon) {
+.content-start ::slotted(calcite-icon), 
+.content-end ::slotted(calcite-icon) {
   align-self: center;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
-.actions-start ::slotted(calcite-action), .actions-end ::slotted(calcite-action) {
+.actions-start ::slotted(calcite-action), 
+.actions-end ::slotted(calcite-action) {
   align-self: stretch;
   color: inherit;
 }

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

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
@@ -10,10 +10,10 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } f
 import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @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 actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
+ * @slot content-start - A slot for adding non-actionable elements before the label and description of the component.
+ * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
  */
 export class ListItem {
   constructor() {
@@ -23,11 +23,11 @@ export class ListItem {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, prevents the content of the list item from user interaction.
+     * When true, prevents the content of the component from user interaction.
      */
     this.nonInteractive = false;
     /**
-     * When true, prevents user interaction.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
   }
@@ -131,7 +131,7 @@ export class ListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents the content of the list item from user interaction."
+        "text": "When true, prevents the content of the component from user interaction."
       },
       "attribute": "non-interactive",
       "reflect": true,
@@ -146,10 +146,10 @@ export class ListItem {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for the list item. Displays below the label text."
+        "text": "A description for the component. Displays below the label text."
       },
       "attribute": "description",
       "reflect": false
@@ -166,7 +166,7 @@ export class ListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents user interaction."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -184,7 +184,7 @@ export class ListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The label text of the list item. Displays above the description text."
+        "text": "The label text of the component. Displays above the description text."
       },
       "attribute": "label",
       "reflect": false

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

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container",

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

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";
@@ -48,7 +48,7 @@ export class ListItemGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The title for all nested `calcite-list-item` rows."
+        "text": "The header text for all nested `calcite-list-item` rows."
       },
       "attribute": "heading",
       "reflect": true
@@ -70,7 +70,7 @@ export class ListItemGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for the group."
+        "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
       "reflect": false

package/dist/collection/components/list-item-group/resources.js

@@ -1,7 +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.
- * v1.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/loader/loader.css

@@ -84,7 +84,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-loader-font-size: When type is determinate, the font-size of the loader percentage.
+* @prop --calcite-loader-font-size: When type is "determinate", the font size of the loading percentage.
 * @prop --calcite-loader-size: The width and height of a non-inline loader.
 * @prop --calcite-loader-size-inline: The width and height of an inline loader.
 */