npm - @esri/calcite-components - Versions diffs - 1.3.0-next.1 → 1.3.0-next.11 - Mend

@esri/calcite-components 1.3.0-next.1 → 1.3.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1006) hide show

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

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { Build, h, Host } from "@stencil/core";
 import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange } from "../../utils/date";
 import { toAriaBoolean } from "../../utils/dom";
-import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition, updateAfterClose } from "../../utils/floating-ui";
+import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition } from "../../utils/floating-ui";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
@@ -16,6 +16,8 @@ import { connectLocalized, disconnectLocalized, numberStringFormatter } from "..
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
 import { CSS } from "./resources";
+import { connectMessages, disconnectMessages, setUpMessages } from "../../utils/t9n";
+import { guid } from "../../utils/guid";
 export class InputDatePicker {
   constructor() {
     this.calciteInternalInputInputHandler = (event) => {
@@ -36,6 +38,13 @@ export class InputDatePicker {
     this.calciteInternalInputBlurHandler = () => {
       this.commitValue();
     };
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.dialogId = `date-picker-dialog--${guid()}`;
+    this.lastBlurredInput = "none";
     this.userChangedValue = false;
     this.openTransitionProp = "opacity";
     this.valueAsDateChangedExternally = false;
@@ -44,6 +53,15 @@ export class InputDatePicker {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.onInputWrapperClick = () => {
+      if (this.range && this.lastBlurredInput !== "none" && this.open) {
+        // we keep the date-picker open when moving between inputs
+      }
+      else {
+        this.open = !this.open;
+      }
+      this.lastBlurredInput = "none";
+    };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -62,10 +80,14 @@ export class InputDatePicker {
     };
     this.deactivate = () => {
       this.open = false;
+      this.lastBlurredInput = "none";
     };
     this.keyDownHandler = (event) => {
       const { defaultPrevented, key } = event;
-      if (key === "Enter" && !defaultPrevented) {
+      if (defaultPrevented) {
+        return;
+      }
+      if (key === "Enter") {
         this.commitValue();
         if (this.shouldFocusRangeEnd()) {
           this.endInput?.setFocus();
@@ -77,21 +99,24 @@ export class InputDatePicker {
           event.preventDefault();
         }
       }
-      else if (key === "Escape" && !defaultPrevented) {
+      else if (key === "ArrowDown") {
+        this.open = true;
+        event.preventDefault();
+      }
+      else if (key === "Escape") {
         this.open = false;
         event.preventDefault();
       }
     };
     this.startInputFocus = () => {
-      if (!this.readOnly) {
-        this.open = true;
-      }
       this.focusedInput = "start";
     };
+    this.startEndInputFocus = (event) => {
+      const blurredEl = event.relatedTarget;
+      this.lastBlurredInput =
+        blurredEl === this.startInput ? "start" : blurredEl === this.endInput ? "end" : "none";
+    };
     this.endInputFocus = () => {
-      if (!this.readOnly) {
-        this.open = true;
-      }
       this.focusedInput = "end";
     };
     this.setFloatingEl = (el) => {
@@ -216,6 +241,8 @@ export class InputDatePicker {
     this.flipPlacements = undefined;
     this.headingLevel = undefined;
     this.valueAsDate = undefined;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
     this.minAsDate = undefined;
     this.maxAsDate = undefined;
     this.min = undefined;
@@ -230,11 +257,10 @@ export class InputDatePicker {
     this.overlayPositioning = "absolute";
     this.proximitySelectionDisabled = false;
     this.layout = "horizontal";
-    this.messageOverrides = undefined;
     this.datePickerActiveDate = undefined;
+    this.defaultMessages = undefined;
     this.effectiveLocale = "";
     this.focusedInput = "start";
-    this.globalAttributes = {};
     this.localeData = undefined;
   }
   handleDisabledAndReadOnlyChange(value) {
@@ -276,6 +302,9 @@ export class InputDatePicker {
     this.setFilteredPlacements();
     this.reposition(true);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   onMinChanged(min) {
     if (min) {
       this.minAsDate = dateFromISO(min);
@@ -288,18 +317,12 @@ export class InputDatePicker {
   }
   openHandler(value) {
     if (this.disabled || this.readOnly) {
-      if (!value) {
-        updateAfterClose(this.floatingEl);
-      }
       this.open = false;
       return;
     }
     if (value) {
       this.reposition(true);
     }
-    else {
-      updateAfterClose(this.floatingEl);
-    }
   }
   overlayPositioningHandler() {
     this.reposition(true);
@@ -374,6 +397,7 @@ export class InputDatePicker {
     connectLabel(this);
     connectForm(this);
     connectOpenCloseComponent(this);
+    connectMessages(this);
     this.setFilteredPlacements();
     this.reposition(true);
     numberStringFormatter.numberFormatOptions = {
@@ -384,7 +408,7 @@ export class InputDatePicker {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    await this.loadLocaleData();
+    await Promise.all([this.loadLocaleData(), setUpMessages(this)]);
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
   }
@@ -399,25 +423,26 @@ export class InputDatePicker {
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
   render() {
-    const { disabled, effectiveLocale, numberingSystem, readOnly } = this;
+    const { disabled, effectiveLocale, messages, numberingSystem, readOnly } = this;
     numberStringFormatter.numberFormatOptions = {
       numberingSystem,
       locale: effectiveLocale,
       useGrouping: false
     };
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper",
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (h("div", { class: "input-container" }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props
-      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", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, scale: this.scale, type: "text",
+      ref: this.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartInput })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+      ref: this.setStartInput }), this.renderToggleIcon(this.open && this.focusedInput === "start")), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
         [CSS.menuActive]: this.open
-      },
+      }, id: this.dialogId, role: "dialog",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFloatingEl }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
@@ -426,14 +451,17 @@ export class InputDatePicker {
         [FloatingCSS.animationActive]: this.open
       },
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper",
+      ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setEndWrapper }, h("calcite-input", { class: {
+      ref: this.setEndWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, scale: this.scale, type: "text",
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setEndInput }))))), h(HiddenFormInputSlot, { component: this })));
+      ref: this.setEndInput }), this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this })));
+  }
+  renderToggleIcon(open) {
+    return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -553,6 +581,7 @@ export class InputDatePicker {
       "$": ["input-date-picker.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "disabled": {
@@ -690,6 +719,56 @@ export class InputDatePicker {
           "text": "The component's value as a full date object."
         }
       },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<InputDatePickerMessages & DatePickerMessages>",
+          "resolved": "{ chooseDate?: string; nextMonth?: string; prevMonth?: string; year?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "InputDatePickerMessages": {
+              "location": "import",
+              "path": "./assets/input-date-picker/t9n"
+            },
+            "DatePickerMessages": {
+              "location": "import",
+              "path": "../date-picker/assets/date-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "InputDatePickerMessages",
+          "resolved": "{ chooseDate: string; }",
+          "references": {
+            "InputDatePickerMessages": {
+              "location": "import",
+              "path": "./assets/input-date-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
       "minAsDate": {
         "type": "unknown",
         "mutable": true,
@@ -960,38 +1039,15 @@ export class InputDatePicker {
         "attribute": "layout",
         "reflect": true,
         "defaultValue": "\"horizontal\""
-      },
-      "messageOverrides": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Partial<DatePickerMessages>",
-          "resolved": "{ nextMonth?: string; prevMonth?: string; year?: string; }",
-          "references": {
-            "Partial": {
-              "location": "global"
-            },
-            "DatePickerMessages": {
-              "location": "import",
-              "path": "../date-picker/assets/date-picker/t9n"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this property to override individual strings used by the component."
-        }
       }
     };
   }
   static get states() {
     return {
       "datePickerActiveDate": {},
+      "defaultMessages": {},
       "effectiveLocale": {},
       "focusedInput": {},
-      "globalAttributes": {},
       "localeData": {}
     };
   }
@@ -1135,6 +1191,9 @@ export class InputDatePicker {
       }, {
         "propName": "flipPlacements",
         "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "min",
         "methodName": "onMinChanged"

package/dist/collection/components/input-date-picker/resources.js CHANGED Viewed

@@ -1,9 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   menu: "menu-container",
-  menuActive: "menu-container--active"
+  menuActive: "menu-container--active",
+  toggleIcon: "toggle-icon"
 };

package/dist/collection/components/input-message/input-message.js CHANGED Viewed

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { setRequestedIcon } from "../../utils/dom";
@@ -92,7 +92,7 @@ export class InputMessage {
       },
       "scale": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "Scale",
           "resolved": "\"l\" | \"m\" | \"s\"",

package/dist/collection/components/input-message/interfaces.js CHANGED Viewed

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-number/input-number.css CHANGED Viewed

@@ -86,13 +86,17 @@
 }
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
 :host {
   display: block;
 }

package/dist/collection/components/input-number/input-number.js CHANGED Viewed

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -62,6 +62,9 @@ export class InputNumber {
       this.emitChangeIfUserModified();
     };
     this.clickHandler = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const slottedActionEl = getSlotted(this.el, "action");
       if (event.target !== slottedActionEl) {
         this.setFocus();
@@ -983,7 +986,7 @@ export class InputNumber {
       },
       "scale": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "Scale",
           "resolved": "\"l\" | \"m\" | \"s\"",

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

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.css CHANGED Viewed

@@ -86,13 +86,17 @@
 }
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
 :host {
   display: block;
 }

package/dist/collection/components/input-text/input-text.js CHANGED Viewed

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -63,6 +63,9 @@ export class InputText {
       this.emitChangeIfUserModified();
     };
     this.clickHandler = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const slottedActionEl = getSlotted(this.el, "action");
       if (event.target !== slottedActionEl) {
         this.setFocus();
@@ -645,7 +648,7 @@ export class InputText {
       },
       "scale": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "Scale",
           "resolved": "\"l\" | \"m\" | \"s\"",

package/dist/collection/components/input-text/resources.js CHANGED Viewed

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-time-picker/input-time-picker.css CHANGED Viewed

@@ -86,13 +86,17 @@
 }
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
 :host {
   display: inline-block;
   -webkit-user-select: none;

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

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
@@ -196,7 +196,7 @@ export class InputTimePicker {
     }));
   }
   clickHandler(event) {
-    if (event.composedPath().includes(this.calciteTimePickerEl)) {
+    if (this.disabled || event.composedPath().includes(this.calciteTimePickerEl)) {
       return;
     }
     this.setFocus();

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

@@ -86,13 +86,17 @@
 }
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
 /**
 * CSS Custom Properties
 *
@@ -167,12 +171,8 @@
 }
 :host([disabled]) > .container {
-  pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
-:host([disabled]) ::slotted(*) {
-  pointer-events: none;
-}
 :host([disabled]) ::slotted(*[disabled]),
 :host([disabled]) ::slotted(*[disabled] *) {
   --tw-bg-opacity: 1;

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

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

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

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   container: "container"

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

@@ -86,13 +86,17 @@
 }
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
 :host {
   display: inline;
 }

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

@@ -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.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
@@ -75,6 +75,9 @@ export class Link {
   //
   //--------------------------------------------------------------------------
   clickHandler(event) {
+    if (this.disabled) {
+      return;
+    }
     // forwards the click() to the internal link for non user-initiated events
     if (!event.isTrusted) {
       this.childEl.click();

package/dist/collection/components/list/list.css CHANGED Viewed

@@ -86,13 +86,17 @@
 }
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
 :host {
   display: block;
 }