@esri/calcite-components 1.3.0-next.2 → 1.3.0-next.20

package/dist/collection/components/combobox-item-group/combobox-item-group.css

@@ -90,8 +90,7 @@
   line-height: 1rem;
   --calcite-combobox-item-spacing-unit-l: 0.5rem;
   --calcite-combobox-item-spacing-unit-s: 0.25rem;
-  --calcite-combobox-item-spacing-indent-1: 0.5rem;
-  --calcite-combobox-item-spacing-indent-2: 1rem;
+  --calcite-combobox-item-spacing-indent: 0.5rem;
 }
 
 .scale--m {
@@ -99,8 +98,7 @@
   line-height: 1rem;
   --calcite-combobox-item-spacing-unit-l: 0.75rem;
   --calcite-combobox-item-spacing-unit-s: 0.5rem;
-  --calcite-combobox-item-spacing-indent-1: 0.75rem;
-  --calcite-combobox-item-spacing-indent-2: 1.5rem;
+  --calcite-combobox-item-spacing-indent: 0.75rem;
 }
 
 .scale--l {
@@ -108,8 +106,7 @@
   line-height: 1.25rem;
   --calcite-combobox-item-spacing-unit-l: 1rem;
   --calcite-combobox-item-spacing-unit-s: 0.75rem;
-  --calcite-combobox-item-spacing-indent-1: 1rem;
-  --calcite-combobox-item-spacing-indent-2: 2rem;
+  --calcite-combobox-item-spacing-indent: 1rem;
 }
 
 :host,
@@ -135,15 +132,10 @@
   color: var(--calcite-ui-text-3);
 }
 
-.label--indent-1 {
-  padding-inline-start: var(--calcite-combobox-item-spacing-indent-1);
-}
-
-.label--indent-2 {
-  padding-inline-start: var(--calcite-combobox-item-spacing-indent-2);
-}
-
 .title {
+  --calcite-combobox-item-indent-value: calc(
+    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
+  );
   border: 0 solid;
   display: block;
   flex: 1 1 0%;
@@ -155,4 +147,5 @@
   border-block-end-color: var(--calcite-ui-border-3);
   padding-block: var(--calcite-combobox-item-spacing-unit-l);
   padding-inline: var(--calcite-combobox-item-spacing-unit-s);
+  margin-inline-start: var(--calcite-combobox-item-indent-value);
 }

package/dist/collection/components/combobox-item-group/combobox-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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
@@ -34,8 +34,8 @@ export class ComboboxItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { el, scale } = this;
-    const indent = `${CSS.label}--indent-${getDepth(el)}`;
-    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
+    const depth = getDepth(el);
+    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
   }
   static get is() { return "calcite-combobox-item-group"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/assets/date-picker/nls/de-AT.json

@@ -0,0 +1,32 @@
+{
+  "default-calendar": "gregorian",
+  "separator": ".",
+  "unitOrder": "DD.MM.YYYY",
+  "weekStart": 1,
+  "placeholder": "DD.MM.YYYY",
+  "days": {
+    "abbreviated": ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."],
+    "narrow": ["S", "M", "D", "M", "D", "F", "S"],
+    "short": ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."],
+    "wide": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]
+  },
+  "numerals": "0123456789",
+  "months": {
+    "abbreviated": ["Jän", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
+    "narrow": ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+    "wide": [
+      "Jänner",
+      "Februar",
+      "März",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "Dezember"
+    ]
+  }
+}

package/dist/collection/components/date-picker/date-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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { Build, h, Host } from "@stencil/core";
 import { dateFromISO, dateFromRange, dateToISO, getDaysDiff, setEndOfDay } from "../../utils/date";
@@ -343,7 +343,7 @@ export class DatePicker {
         ? endDate || this.maxAsDate
         : this.maxAsDate
       : this.maxAsDate;
-    return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
+    return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);

package/dist/collection/components/date-picker/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.2
+ * v1.3.0-next.20
  */
 export const HEADING_LEVEL = 2;
 export const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };

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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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,11 +1,11 @@
 /*!
  * 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.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, focusElementInGroup, isPrimaryPointerButton, 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 { guid } from "../../utils/guid";
 import { updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -167,14 +167,8 @@ export class Dropdown {
       if (value) {
         this.reposition(true);
       }
-      else {
-        updateAfterClose(this.floatingEl);
-      }
       return;
     }
-    if (!value) {
-      updateAfterClose(this.floatingEl);
-    }
     this.open = false;
   }
   handleDisabledChange(value) {
@@ -271,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);
@@ -286,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;
@@ -796,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