@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/collection/components/input/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.81
+ * v1.0.0-beta.84
  */
 export {};

package/dist/collection/components/input/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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   loader: "loader",
@@ -30,3 +30,6 @@ export const INPUT_TYPE_ICONS = {
 export const SLOTS = {
   action: "action"
 };
+export const TEXT = {
+  clear: "Clear value"
+};

package/dist/collection/components/input-date-picker/input-date-picker.css

@@ -262,7 +262,7 @@
 
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container {
   top: 1.5rem;
-  padding-left: 0.75rem;
+  padding-inline-start: 0.75rem;
 }
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon {
   height: 0.75rem;

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

@@ -1,16 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../date-picker/utils";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
 import { TEXT } from "../date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { createPopper, updatePopper, CSS as PopperCSS, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
 import { updateHostInteraction } from "../../utils/interactive";
+import { toAriaBoolean } from "../../utils/dom";
 export class InputDatePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -24,15 +25,21 @@ export class InputDatePicker {
     this.disabled = false;
     /** Expand or collapse when calendar does not have input */
     this.active = false;
-    /** Localized string for "previous month" (used for aria label)
+    /**
+     * Localized string for "previous month" (used for aria label)
+     *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT.prevMonth;
-    /** Localized string for "next month" (used for aria label)
+    /**
+     * Localized string for "next month" (used for aria label)
+     *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
-    /** Localized string for "year" (used for aria label)
+    /**
+     * Localized string for "year" (used for aria label)
+     *
      * @default "Year"
      */
     this.intlYear = TEXT.year;
@@ -42,6 +49,7 @@ export class InputDatePicker {
     this.scale = "m";
     /**
      * Determines where the date-picker component will be positioned relative to the input.
+     *
      * @default "bottom-leading"
      */
     this.placement = defaultMenuPlacement;
@@ -75,8 +83,8 @@ export class InputDatePicker {
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active
-          ? this.calciteInputDatePickerOpen.emit()
-          : this.calciteInputDatePickerClose.emit();
+          ? this.calciteInternalInputDatePickerOpen.emit()
+          : this.calciteInternalInputDatePickerClose.emit();
       }
     };
     this.setStartInput = (el) => {
@@ -88,6 +96,11 @@ export class InputDatePicker {
     this.deactivate = () => {
       this.active = false;
     };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        submitForm(this);
+      }
+    };
     this.keyUpHandler = (e) => {
       if (e.key === "Escape") {
         this.active = false;
@@ -123,6 +136,8 @@ export class InputDatePicker {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param event
      */
     this.handleDateChange = (event) => {
       if (this.range) {
@@ -173,10 +188,14 @@ export class InputDatePicker {
     this.setFilteredPlacements();
   }
   onMinChanged(min) {
-    this.minAsDate = dateFromISO(min);
+    if (min) {
+      this.minAsDate = dateFromISO(min);
+    }
   }
   onMaxChanged(max) {
-    this.maxAsDate = dateFromISO(max);
+    if (max) {
+      this.maxAsDate = dateFromISO(max);
+    }
   }
   activeHandler() {
     if (!this.disabled) {
@@ -277,11 +296,11 @@ export class InputDatePicker {
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" },
-      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", role: "application" },
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, onKeyUp: this.keyUpHandler, role: "application" },
+      this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.active), class: "input-container", role: "application" },
         h("div", { class: "input-wrapper", ref: this.setStartWrapper },
-          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
-        h("div", { "aria-hidden": (!this.active).toString(), class: {
+          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
+        h("div", { "aria-hidden": toAriaBoolean(!this.active), class: {
             "menu-container": true,
             "menu-container--active": this.active
           }, ref: this.setMenuEl },
@@ -300,7 +319,7 @@ export class InputDatePicker {
           h("calcite-input", { class: {
               input: true,
               "border-top-color-one": this.layout === "vertical" && this.range
-            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
+            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
       h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
@@ -365,21 +384,32 @@ export class InputDatePicker {
   }
   clearCurrentValue() {
     if (!this.range) {
+      if (typeof this.value === "string" && this.value) {
+        this.calciteDatePickerChange.emit();
+      }
       this.value = "";
       return;
     }
     const { focusedInput } = this;
     if (focusedInput === "start") {
+      if (this.start) {
+        this.calciteDatePickerRangeChange.emit();
+      }
       this.value = Array.isArray(this.value) ? ["", this.value[1] || ""] : [""];
       this.start = undefined;
     }
     else if (focusedInput === "end") {
+      if (this.end) {
+        this.calciteDatePickerRangeChange.emit();
+      }
       this.value = Array.isArray(this.value) ? [this.value[0] || "", ""] : ["", ""];
       this.end = undefined;
     }
   }
   /**
    * If inputted string is a valid date, update value/active
+   *
+   * @param value
    */
   input(value) {
     const date = this.getDateFromInput(value);
@@ -422,6 +452,8 @@ export class InputDatePicker {
   }
   /**
    * Clean up invalid date from input on blur
+   *
+   * @param target
    */
   blur(target) {
     const { locale, focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
@@ -455,6 +487,8 @@ export class InputDatePicker {
   /**
    * Find a date from input string
    * return false if date is invalid, or out of range
+   *
+   * @param value
    */
   getDateFromInput(value) {
     if (!this.localeData) {
@@ -1067,8 +1101,8 @@ export class InputDatePicker {
         "references": {}
       }
     }, {
-      "method": "calciteInputDatePickerOpen",
-      "name": "calciteInputDatePickerOpen",
+      "method": "calciteInternalInputDatePickerOpen",
+      "name": "calciteInternalInputDatePickerOpen",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -1085,8 +1119,8 @@ export class InputDatePicker {
         "references": {}
       }
     }, {
-      "method": "calciteInputDatePickerClose",
-      "name": "calciteInputDatePickerClose",
+      "method": "calciteInternalInputDatePickerClose",
+      "name": "calciteInternalInputDatePickerClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/input-message/input-message.css

@@ -100,20 +100,14 @@
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
   opacity: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([active]) {
   visibility: visible;
   height: auto;
   opacity: 1;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([active][scale=m]),
@@ -121,14 +115,16 @@
   margin-top: var(--calcite-input-message-spacing-value);
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .calcite-input-message-icon {
   pointer-events: none;
   display: inline-flex;
   flex-shrink: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   margin-inline-end: 0.5rem;
 }
 
@@ -149,22 +145,21 @@
 }
 
 :host([status][active]) {
-  font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-:host([status][active][scale=s]) {
+:host([status][scale=s]) {
   font-size: var(--calcite-font-size--3);
   line-height: 0.75rem;
 }
 
-:host([status][active][scale=m]) {
+:host([status][scale=m]) {
   margin-top: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
-:host([status][active][scale=l]) {
+:host([status][scale=l]) {
   margin-top: 0.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;

package/dist/collection/components/input-message/input-message.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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Host, h, Prop, Watch } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.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.81
+ * v1.0.0-beta.84
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,13 +1,13 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 export class InputTimePicker {
   constructor() {
@@ -22,6 +22,7 @@ export class InputTimePicker {
     this.disabled = false;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -35,6 +36,7 @@ export class InputTimePicker {
     this.scale = "m";
     /**
      * Determines where the popover will be positioned relative to the input.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -51,14 +53,15 @@ export class InputTimePicker {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.calciteInputBlurHandler = () => {
+    this.calciteInternalInputBlurHandler = () => {
       this.active = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
-    this.calciteInputFocusHandler = () => {
+    this.calciteInternalInputFocusHandler = (event) => {
       this.active = true;
+      event.stopPropagation();
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -69,6 +72,20 @@ export class InputTimePicker {
       const target = event.target;
       const value = target.value;
       this.setValue({ value, origin: "time-picker" });
+      event.stopPropagation();
+    };
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        submitForm(this);
+      }
+    };
+    this.setCalcitePopoverEl = (el) => {
+      this.popoverEl = el;
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
@@ -125,7 +142,9 @@ export class InputTimePicker {
   activeHandler() {
     if (this.disabled) {
       this.active = false;
+      return;
     }
+    this.reposition();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -156,11 +175,13 @@ export class InputTimePicker {
     event.preventDefault();
     event.stopPropagation();
     this.active = false;
+    event.stopPropagation;
   }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
     this.active = true;
+    event.stopPropagation;
   }
   // --------------------------------------------------------------------------
   //
@@ -169,13 +190,14 @@ 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() {
+    var _a;
+    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition();
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
@@ -211,11 +233,11 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, null,
+    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), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, referenceElement: this.referenceElementId },
-        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, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
+        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-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 })));
   }
   static get is() { return "calcite-input-time-picker"; }
@@ -647,6 +669,22 @@ export class InputTimePicker {
         "text": "Sets focus on the component.",
         "tags": []
       }
+    },
+    "reposition": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Updates the position of the component.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }
@@ -676,13 +714,13 @@ export class InputTimePicker {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerBlur",
+      "name": "calciteInternalTimePickerBlur",
       "method": "timePickerBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerFocus",
+      "name": "calciteInternalTimePickerFocus",
       "method": "timePickerFocusHandler",
       "target": undefined,
       "capture": false,

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.81
+ * v1.0.0-beta.84
  */
 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,27 +102,39 @@
 }
 
 :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-top: 0px;
-  margin-right: 0px;
   margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
   width: 100%;
   line-height: 1.375;
   color: var(--calcite-ui-text-1);
@@ -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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -20,6 +20,7 @@ export class Label {
     this.alignment = "start";
     /**
      * specify the status of the label and any child input / input messages
+     *
      * @deprecated set directly on child element instead
      */
     this.status = "idle";
@@ -27,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
@@ -178,7 +183,7 @@ export class Label {
       "reflect": true,
       "defaultValue": "\"default\""
     },
-    "disableSpacing": {
+    "disabled": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -189,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": {
@@ -209,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"
     }
   }; }