@esri/calcite-components 1.3.0-next.8 → 1.3.0

package/dist/collection/components/date-picker/utils.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.3.0-next.8
+ * v1.3.0
  */
 import { getAssetPath } from "@stencil/core";
 import { dateFromISO } from "../../utils/date";

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

@@ -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: flex;
   cursor: pointer;
@@ -189,8 +193,18 @@
 }
 
 :host(:focus:not([disabled])) .day {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
@@ -379,57 +393,57 @@
   background-color: var(--calcite-ui-foreground-2);
 }
 
-:host([highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
-:host([range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
-:host([highlighted]:first-child) .calcite--rtl .day-wrapper,
-:host([range-hover]:first-child) .calcite--rtl .day-wrapper {
+:host([highlighted][range-edge=end]) :not(.calcite--rtl) .day-wrapper,
+:host([range-hover][range-edge=end]) :not(.calcite--rtl) .day-wrapper,
+:host([highlighted][range-edge=start]) .calcite--rtl .day-wrapper,
+:host([range-hover][range-edge=start]) .calcite--rtl .day-wrapper {
   box-shadow: inset -4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
-:host([highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,
-:host([range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
-:host([highlighted]:last-child) .calcite--rtl .day-wrapper,
-:host([range-hover]:last-child) .calcite--rtl .day-wrapper {
+:host([highlighted][range-edge=start]) :not(.calcite--rtl) .day-wrapper,
+:host([range-hover][range-edge=start]) :not(.calcite--rtl) .day-wrapper,
+:host([highlighted][range-edge=end]) .calcite--rtl .day-wrapper,
+:host([range-hover][range-edge=end]) .calcite--rtl .day-wrapper {
   box-shadow: inset 4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
-:host([scale=s][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=s][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=s][highlighted]:first-child) .calcite--rtl .day-wrapper,
-:host([scale=s][range-hover]:first-child) .calcite--rtl .day-wrapper {
+:host([scale=s][highlighted][range-edge=end]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=s][range-hover][range-edge=end]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=s][highlighted][range-edge=start]) .calcite--rtl .day-wrapper,
+:host([scale=s][range-hover][range-edge=start]) .calcite--rtl .day-wrapper {
   box-shadow: inset -1px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
-:host([scale=s][highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=s][range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=s][highlighted]:last-child) .calcite--rtl .day-wrapper,
-:host([scale=s][range-hover]:last-child) .calcite--rtl .day-wrapper {
+:host([scale=s][highlighted][range-edge=start]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=s][range-hover][range-edge=start]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=s][highlighted][range-edge=end]) .calcite--rtl .day-wrapper,
+:host([scale=s][range-hover][range-edge=end]) .calcite--rtl .day-wrapper {
   box-shadow: inset 1px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
-:host([scale=l][highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=l][range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=l][highlighted]:last-child) .calcite--rtl .day-wrapper,
-:host([scale=l][range-hover]:last-child) .calcite--rtl .day-wrapper {
+:host([scale=l][highlighted][range-edge=start]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=l][range-hover][range-edge=start]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=l][highlighted][range-edge=end]) .calcite--rtl .day-wrapper,
+:host([scale=l][range-hover][range-edge=end]) .calcite--rtl .day-wrapper {
   box-shadow: inset 6px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
-:host([highlighted]:first-child) .day-wrapper,
-:host([range-hover]:first-child) .day-wrapper {
+:host([highlighted][range-edge=start]) .day-wrapper,
+:host([range-hover][range-edge=start]) .day-wrapper {
   border-start-start-radius: 45%;
   border-end-start-radius: 45%;
 }
 
-:host([highlighted]:last-child) .day-wrapper,
-:host([range-hover]:last-child) .day-wrapper {
+:host([highlighted][range-edge=end]) .day-wrapper,
+:host([range-hover][range-edge=end]) .day-wrapper {
   border-start-end-radius: 45%;
   border-end-end-radius: 45%;
 }
 
-:host([scale=l][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=l][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
-:host([scale=l][highlighted]:first-child) .calcite--rtl .day-wrapper,
-:host([scale=l][range-hover]:first-child) .calcite--rtl .day-wrapper {
+:host([scale=l][highlighted][range-edge=end]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=l][range-hover][range-edge=end]) :not(.calcite--rtl) .day-wrapper,
+:host([scale=l][highlighted][range-edge=start]) .calcite--rtl .day-wrapper,
+:host([scale=l][range-hover][range-edge=start]) .calcite--rtl .day-wrapper {
   box-shadow: inset -6px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 

package/dist/collection/components/date-picker-day/date-picker-day.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.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { dateToISO } from "../../utils/date";
@@ -18,7 +18,10 @@ export class DatePickerDay {
     //
     //--------------------------------------------------------------------------
     this.onClick = () => {
-      !this.disabled && this.calciteDaySelect.emit();
+      if (this.disabled) {
+        return;
+      }
+      this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (event) => {
       if (isActivationKey(event.key)) {
@@ -33,6 +36,7 @@ export class DatePickerDay {
     this.selected = false;
     this.highlighted = false;
     this.range = false;
+    this.rangeEdge = undefined;
     this.startOfRange = false;
     this.endOfRange = false;
     this.rangeHover = false;
@@ -40,7 +44,10 @@ export class DatePickerDay {
     this.scale = undefined;
     this.value = undefined;
   }
-  mouseoverHandler() {
+  pointerOverHandler() {
+    if (this.disabled) {
+      return;
+    }
     this.calciteInternalDayHover.emit();
   }
   //--------------------------------------------------------------------------
@@ -64,7 +71,7 @@ export class DatePickerDay {
     const formattedDay = numberStringFormatter.localize(String(this.day));
     const dir = getElementDir(this.el);
     const dayLabel = this.dateTimeFormat.format(this.value);
-    return (h(Host, { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button" }, h("div", { class: { "day-v-wrapper": true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("div", { class: "day-wrapper" }, h("span", { class: "day" }, h("span", { class: "text" }, formattedDay))))));
+    return (h(Host, { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button" }, h("div", { "aria-hidden": "true", class: { "day-v-wrapper": true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("div", { class: "day-wrapper" }, h("span", { class: "day" }, h("span", { class: "text" }, formattedDay))))));
   }
   componentDidRender() {
     updateHostInteraction(this, this.isTabbable);
@@ -215,6 +222,26 @@ export class DatePickerDay {
         "reflect": true,
         "defaultValue": "false"
       },
+      "rangeEdge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"start\" | \"end\" | undefined",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When `true`, highlight styling for edge dates is applied."
+        },
+        "attribute": "range-edge",
+        "reflect": true
+      },
       "startOfRange": {
         "type": "boolean",
         "mutable": false,
@@ -370,7 +397,7 @@ export class DatePickerDay {
   static get listeners() {
     return [{
         "name": "pointerover",
-        "method": "mouseoverHandler",
+        "method": "pointerOverHandler",
         "target": undefined,
         "capture": false,
         "passive": true

package/dist/collection/components/date-picker-month/date-picker-month.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.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { dateFromRange, inRange, sameDate } from "../../utils/date";
@@ -94,7 +94,7 @@ export class DatePickerMonth {
     this.localeData = undefined;
     this.hoverRange = undefined;
   }
-  mouseoutHandler() {
+  pointerOutHandler() {
     this.calciteInternalDatePickerMouseOut.emit();
   }
   //--------------------------------------------------------------------------
@@ -112,26 +112,43 @@ export class DatePickerMonth {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPreviousMonthDays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
+    let dayInWeek = 0;
+    const getDayInWeek = () => dayInWeek++ % 7;
     const days = [
       ...prevMonDays.map((day) => {
-        const date = new Date(year, month - 1, day);
-        return this.renderDateDay(false, day, date);
+        return {
+          active: false,
+          day,
+          dayInWeek: getDayInWeek(),
+          date: new Date(year, month - 1, day)
+        };
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
         const active = sameDate(date, this.activeDate);
-        return this.renderDateDay(active, day, date, true, true);
+        return {
+          active,
+          currentMonth: true,
+          day,
+          dayInWeek: getDayInWeek(),
+          date,
+          ref: true
+        };
       }),
       ...nextMonDays.map((day) => {
-        const date = new Date(year, month + 1, day);
-        return this.renderDateDay(false, day, date);
+        return {
+          active: false,
+          day,
+          dayInWeek: getDayInWeek(),
+          date: new Date(year, month + 1, day)
+        };
       })
     ];
     const weeks = [];
     for (let i = 0; i < days.length; i += 7) {
       weeks.push(days.slice(i, i + 7));
     }
-    return (h(Host, { onFocusOut: this.disableActiveFocus, onKeyDown: this.keyDownHandler }, h("div", { class: "calendar", role: "grid" }, h("div", { class: "week-headers", role: "row" }, adjustedWeekDays.map((weekday) => (h("span", { class: "week-header", role: "columnheader" }, weekday)))), weeks.map((days) => (h("div", { class: "week-days", role: "row" }, days))))));
+    return (h(Host, { onFocusOut: this.disableActiveFocus, onKeyDown: this.keyDownHandler }, h("div", { class: "calendar", role: "grid" }, h("div", { class: "week-headers", role: "row" }, adjustedWeekDays.map((weekday) => (h("span", { class: "week-header", role: "columnheader" }, weekday)))), weeks.map((days) => (h("div", { class: "week-days", role: "row" }, days.map((day) => this.renderDateDay(day))))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -258,22 +275,29 @@ export class DatePickerMonth {
   /**
    * Render calcite-date-picker-day
    *
+   * @param active.active
    * @param active
    * @param day
+   * @param dayInWeek
    * @param date
    * @param currentMonth
    * @param ref
+   * @param active.currentMonth
+   * @param active.date
+   * @param active.day
+   * @param active.dayInWeek
+   * @param active.ref
    */
-  renderDateDay(active, day, date, currentMonth, ref) {
+  renderDateDay({ active, currentMonth, date, day, dayInWeek, ref }) {
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
       (!this.endDate && this.hoverRange && sameDate(this.hoverRange?.end, this.startDate));
-    return (h("div", { class: "day", role: "gridcell" }, h("calcite-date-picker-day", { active: active, class: {
+    return (h("div", { class: "day", key: date.toDateString(), role: "gridcell" }, h("calcite-date-picker-day", { active: active, class: {
         "hover--inside-range": this.startDate && isHoverInRange,
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date,
+      }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeEdge: dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : undefined, rangeHover: this.isRangeHover(date), scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
@@ -620,7 +644,7 @@ export class DatePickerMonth {
   static get listeners() {
     return [{
         "name": "pointerout",
-        "method": "mouseoutHandler",
+        "method": "pointerOutHandler",
         "target": undefined,
         "capture": false,
         "passive": true

package/dist/collection/components/date-picker-month-header/date-picker-month-header.css

@@ -142,8 +142,18 @@
   inline-size: 14.2857142857%;
 }
 .chevron:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 .chevron:hover, .chevron:focus {
   background-color: var(--calcite-ui-foreground-2);
@@ -203,8 +213,18 @@
   outline-offset: 2px;
 }
 .year:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 .year--suffix {

package/dist/collection/components/date-picker-month-header/date-picker-month-header.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.3.0-next.8
+ * v1.3.0
  */
 import { Fragment, h } from "@stencil/core";
 import { dateFromRange, getOrder, nextMonth, prevMonth } from "../../utils/date";
@@ -77,7 +77,6 @@ export class DatePickerMonthHeader {
     this.scale = undefined;
     this.localeData = undefined;
     this.messages = undefined;
-    this.globalAttributes = {};
     this.nextMonthDate = undefined;
     this.prevMonthDate = undefined;
   }
@@ -360,7 +359,6 @@ export class DatePickerMonthHeader {
   }
   static get states() {
     return {
-      "globalAttributes": {},
       "nextMonthDate": {},
       "prevMonthDate": {}
     };

package/dist/collection/components/date-picker-month-header/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.3.0-next.8
+ * v1.3.0
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
 export const CSS = {

package/dist/collection/components/dropdown/dropdown.css

@@ -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
 *

package/dist/collection/components/dropdown/dropdown.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.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, focusElementInGroup, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
@@ -265,7 +265,10 @@ export class Dropdown {
     }, delayed);
   }
   closeCalciteDropdownOnClick(event) {
-    if (!isPrimaryPointerButton(event) || !this.open || event.composedPath().includes(this.el)) {
+    if (this.disabled ||
+      !isPrimaryPointerButton(event) ||
+      !this.open ||
+      event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
@@ -280,15 +283,17 @@ export class Dropdown {
     }
     this.open = false;
   }
-  mouseEnterHandler() {
-    if (this.type === "hover") {
-      this.openCalciteDropdown();
+  pointerEnterHandler() {
+    if (this.disabled || this.type !== "hover") {
+      return;
     }
+    this.openCalciteDropdown();
   }
-  mouseLeaveHandler() {
-    if (this.type === "hover") {
-      this.closeCalciteDropdown();
+  pointerLeaveHandler() {
+    if (this.disabled || this.type !== "hover") {
+      return;
     }
+    this.closeCalciteDropdown();
   }
   calciteInternalDropdownItemKeyEvent(event) {
     const { keyboardEvent } = event.detail;
@@ -790,13 +795,13 @@ export class Dropdown {
         "passive": false
       }, {
         "name": "pointerenter",
-        "method": "mouseEnterHandler",
+        "method": "pointerEnterHandler",
         "target": undefined,
         "capture": false,
         "passive": true
       }, {
         "name": "pointerleave",
-        "method": "mouseLeaveHandler",
+        "method": "pointerLeaveHandler",
         "target": undefined,
         "capture": false,
         "passive": true

package/dist/collection/components/dropdown/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.3.0-next.8
+ * v1.3.0
  */
 export const SLOTS = {
   dropdownTrigger: "trigger"

package/dist/collection/components/dropdown-group/dropdown-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.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

package/dist/collection/components/dropdown-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.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   containerSmall: "container--s",

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

@@ -164,8 +164,19 @@
 
 :host(:focus) {
   outline: 2px solid transparent;
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 .container--link {

package/dist/collection/components/dropdown-item/dropdown-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.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/dropdown-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.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   containerLink: "container--link",

package/dist/collection/components/fab/fab.css

@@ -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: flex;
   background-color: transparent;

package/dist/collection/components/fab/fab.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.3.0-next.8
+ * v1.3.0
  */
 import { h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/fab/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.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   button: "button"

package/dist/collection/components/filter/filter.css

@@ -97,13 +97,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: flex;
   inline-size: 100%;

package/dist/collection/components/filter/filter.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.3.0-next.8
+ * v1.3.0
  */
 import { Fragment, h } from "@stencil/core";
 import { debounce } from "lodash-es";

package/dist/collection/components/filter/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.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/flow/flow.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.3.0-next.8
+ * v1.3.0
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/flow/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.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   frame: "frame",