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

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

@@ -177,12 +177,14 @@
   opacity: 1;
 }
 
-:host(:hover:not([disabled])) .day, :host([active]:not([range])) .day {
+:host(:hover:not([disabled])) .day, 
+:host([active]:not([range])) .day {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
 
-:host(:focus), :host([active]) {
+:host(:focus), 
+:host([active]) {
   outline: 2px solid transparent;
   outline-offset: 2px;
   z-index: 1;
@@ -312,7 +314,8 @@
 :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current));
 }
-:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -322,7 +325,8 @@
 :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
 }
-:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -332,7 +336,8 @@
 :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
 }
-:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -342,17 +347,20 @@
 :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
 }
-:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
-:host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper, :host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
+:host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper, 
+:host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
   background-image: none;
 }
 
-:host([start-of-range].hover--inside-range.focused--end) .day-wrapper, :host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
+:host([start-of-range].hover--inside-range.focused--end) .day-wrapper, 
+:host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
   background-color: var(--calcite-ui-foreground-2);
 }
 
@@ -411,7 +419,8 @@
 }
 
 @media (forced-colors: active) {
-  :host(:hover:not([disabled])) .day, :host([active]:not([range])) .day {
+  :host(:hover:not([disabled])) .day, 
+:host([active]:not([range])) .day {
     border-radius: 0px;
   }
 

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

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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";

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

@@ -145,7 +145,7 @@
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-.chevron:hover, .chevron:focus {
+.chevron:hover,  .chevron:focus {
   background-color: var(--calcite-ui-foreground-2);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
@@ -173,7 +173,9 @@
   flex-direction: row-reverse;
 }
 
-.month, .year, .suffix {
+.month, 
+.year, 
+.suffix {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   margin-top: auto;

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

@@ -1,11 +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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
 import { Heading } from "../functional/Heading";
+import { BUDDHIST_CALENDAR_YEAR_OFFSET } from "./resources";
 export class DatePickerMonthHeader {
   constructor() {
     //--------------------------------------------------------------------------
@@ -19,7 +20,7 @@ export class DatePickerMonthHeader {
      * @param e
      */
     this.onYearKey = (e) => {
-      const localizedYear = e.target.value;
+      const localizedYear = this.parseCalendarYear(e.target.value);
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
@@ -32,10 +33,15 @@ export class DatePickerMonthHeader {
       }
     };
     this.onYearChange = (event) => {
-      this.setYear({ localizedYear: event.target.value });
+      this.setYear({
+        localizedYear: this.parseCalendarYear(event.target.value)
+      });
     };
     this.onYearInput = (event) => {
-      this.setYear({ localizedYear: event.target.value, commit: false });
+      this.setYear({
+        localizedYear: this.parseCalendarYear(event.target.value),
+        commit: false
+      });
     };
     this.prevMonthClick = (e) => {
       this.handleArrowClick(e, this.prevMonthDate);
@@ -83,7 +89,7 @@ export class DatePickerMonthHeader {
     const activeMonth = this.activeDate.getMonth();
     const { months, unitOrder } = this.localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
-    const localizedYear = localizeNumber(this.activeDate.getFullYear(), this.localeData);
+    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear().toString());
     const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
@@ -111,6 +117,18 @@ export class DatePickerMonthHeader {
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
+  formatCalendarYear(year) {
+    const { localeData } = this;
+    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
+    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
+    return localizeNumber(parseNumber(year, localeData) + yearOffset, localeData);
+  }
+  parseCalendarYear(year) {
+    const { localeData } = this;
+    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
+    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
+    return localizeNumber(parseNumber(year, localeData) - yearOffset, localeData);
+  }
   getInRangeDate({ localizedYear, offset = 0 }) {
     const { min, max, activeDate, localeData } = this;
     const parsedYear = parseNumber(localizedYear, localeData);
@@ -134,14 +152,14 @@ export class DatePickerMonthHeader {
    * @param root0.offset
    */
   setYear({ localizedYear, commit = true, offset = 0 }) {
-    const { yearInput, activeDate, localeData } = this;
+    const { yearInput, activeDate } = this;
     const inRangeDate = this.getInRangeDate({ localizedYear, offset });
     // if you've supplied a year and it's in range, update active date
     if (inRangeDate) {
       this.calciteDatePickerSelect.emit(inRangeDate);
     }
     if (commit) {
-      yearInput.value = localizeNumber((inRangeDate || activeDate).getFullYear(), localeData);
+      yearInput.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear().toString());
     }
   }
   static get is() { return "calcite-date-picker-month-header"; }

package/dist/collection/components/date-picker-month-header/resources.js

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

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

@@ -140,7 +140,8 @@
   transform: translate(0);
 }
 
-:host([active]) .calcite-dropdown-wrapper {
+:host([active]) .calcite-dropdown-wrapper,
+:host([open]) .calcite-dropdown-wrapper {
   pointer-events: initial;
   visibility: visible;
 }
@@ -157,8 +158,16 @@
 .calcite-dropdown-trigger-container {
   position: relative;
   display: flex;
+  flex: 1 1 auto;
 }
 
+@media (forced-colors: active) {
+  /* use real border since box-shadow is removed in high contrast mode */
+  :host([active]) .calcite-dropdown-wrapper,
+:host([open]) .calcite-dropdown-wrapper {
+    border: 1px solid canvasText;
+  }
+}
 :host([width=s]) {
   --calcite-dropdown-width: 12rem;
 }

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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -20,8 +20,14 @@ export class Dropdown {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Opens or closes the dropdown */
+    /**
+     * Opens or closes the dropdown
+     *
+     * @deprecated use open instead.
+     */
     this.active = false;
+    /** When true, opens the dropdown */
+    this.open = false;
     /**
      allow the dropdown to remain open after a selection is made
      if the selection-mode of the selected item's containing group is "none", the dropdown will always close
@@ -108,8 +114,9 @@ export class Dropdown {
       scrollerEl.style.minWidth = `${referenceElWidth}px`;
     };
     this.setMaxScrollerHeight = () => {
-      const { active, scrollerEl } = this;
-      if (!scrollerEl || !active) {
+      const { active, scrollerEl, open } = this;
+      const isOpen = !(active || open);
+      if (!scrollerEl || isOpen) {
         return;
       }
       this.reposition();
@@ -120,10 +127,18 @@ export class Dropdown {
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
       this.scrollerEl = scrollerEl;
+      this.scrollerEl.addEventListener("transitionrun", this.transitionRunHandler);
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.calciteDropdownOpen.emit() : this.calciteDropdownClose.emit();
+        this.open || this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      }
+    };
+    this.transitionRunHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active || this.open
+          ? this.emitOpenCloseEvent("beforeOpen")
+          : this.emitOpenCloseEvent("beforeClose");
       }
     };
     this.setReferenceEl = (el) => {
@@ -139,7 +154,7 @@ export class Dropdown {
         return;
       }
       const key = e.key;
-      if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
+      if ((this.open || this.active) && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
       }
@@ -162,7 +177,8 @@ export class Dropdown {
     };
     this.openCalciteDropdown = () => {
       this.active = !this.active;
-      if (this.active) {
+      this.open = !this.open;
+      if (this.active || this.open) {
         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
       }
     };
@@ -173,10 +189,12 @@ export class Dropdown {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   handleDisabledChange(value) {
     if (!value) {
       this.active = false;
+      this.open = false;
     }
   }
   flipPlacementsHandler() {
@@ -210,19 +228,22 @@ export class Dropdown {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
+    if (this.scrollerEl) {
+      this.scrollerEl.removeEventListener("transitionrun", this.transitionRunHandler);
+    }
   }
   render() {
-    const { active } = this;
+    const { active, open } = this;
     return (h(Host, null,
       h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
-        h("slot", { "aria-expanded": toAriaBoolean(active), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
-      h("div", { "aria-hidden": toAriaBoolean(!active), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
+        h("slot", { "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
+      h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
-            [PopperCSS.animationActive]: active
+            [PopperCSS.animationActive]: active || open
           }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
-          h("div", { hidden: !this.active },
+          h("div", { hidden: !(open || active) },
             h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
@@ -244,7 +265,8 @@ export class Dropdown {
       : this.createPopper();
   }
   closeCalciteDropdownOnClick(e) {
-    if (!this.active || e.composedPath().includes(this.el)) {
+    const isOpen = !(this.open || this.active);
+    if (isOpen || e.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
@@ -258,6 +280,7 @@ export class Dropdown {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   mouseEnterHandler() {
     if (this.type === "hover") {
@@ -316,6 +339,19 @@ export class Dropdown {
     }
     event.stopPropagation();
   }
+  emitOpenCloseEvent(componentVisibilityState) {
+    const payload = {
+      el: this.el
+    };
+    const emitComponentState = {
+      beforeOpen: () => this.calciteDropdownBeforeOpen.emit(payload),
+      open: () => this.calciteDropdownOpen.emit(payload),
+      beforeClose: () => this.calciteDropdownBeforeClose.emit(payload),
+      close: () => this.calciteDropdownClose.emit(payload)
+    };
+    (emitComponentState[componentVisibilityState] ||
+      emitComponentState["The component state is unknown."])();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -326,7 +362,7 @@ export class Dropdown {
     };
     const eventListenerModifier = {
       name: "eventListeners",
-      enabled: this.active
+      enabled: this.open || this.active
     };
     return [flipModifier, eventListenerModifier];
   }
@@ -377,6 +413,7 @@ export class Dropdown {
   }
   closeCalciteDropdown(focusTrigger = true) {
     this.active = false;
+    this.open = false;
     if (focusTrigger) {
       focusElement(this.triggers[0]);
     }
@@ -431,13 +468,34 @@ export class Dropdown {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use open instead."
+          }],
         "text": "Opens or closes the dropdown"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, opens the dropdown"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disableCloseOnSelect": {
       "type": "boolean",
       "mutable": false,
@@ -663,6 +721,25 @@ export class Dropdown {
         "resolved": "void",
         "references": {}
       }
+    }, {
+      "method": "calciteDropdownBeforeOpen",
+      "name": "calciteDropdownBeforeOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
+      }
     }, {
       "method": "calciteDropdownOpen",
       "name": "calciteDropdownOpen",
@@ -671,12 +748,35 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown has been opened"
+        "text": ""
       },
       "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteDropdownBeforeClose",
+      "name": "calciteDropdownBeforeClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteDropdownClose",
@@ -686,12 +786,16 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown has been closed"
+        "text": ""
       },
       "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
       }
     }]; }
   static get methods() { return {
@@ -716,6 +820,9 @@ export class Dropdown {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "activeHandler"
     }, {
       "propName": "disabled",
       "methodName": "handleDisabledChange"

package/dist/collection/components/dropdown/interfaces.js

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

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

@@ -1,8 +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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };
+export const CSS = {
+  calciteDropdownContent: "calcite-dropdown-content"
+};

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

package/dist/collection/components/dropdown-group/interfaces.js

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

package/dist/collection/components/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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   containerSmall: "container--s",

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

@@ -142,8 +142,6 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   text-align: start;
@@ -155,11 +153,13 @@
   padding-inline-start: 0.25rem;
 }
 
-:host, .container--link a {
+:host, 
+.container--link a {
   outline-color: transparent;
 }
 
 :host(:focus) {
+  outline: 2px solid transparent;
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -176,8 +176,6 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -209,14 +207,16 @@
   padding-inline-start: 2.5rem;
 }
 
-:host(:hover) .container, :host(:active) .container {
+:host(:hover) .container, 
+:host(:active) .container {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
 
-:host(:hover) .container--link .dropdown-link, :host(:active) .container--link .dropdown-link {
+:host(:hover) .container--link .dropdown-link, 
+:host(:active) .container--link .dropdown-link {
   color: var(--calcite-ui-text-1);
 }
 
@@ -230,15 +230,19 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-:host(:hover) .container:before, :host(:active) .container:before, :host(:focus) .container:before {
+:host(:hover) .container:before, 
+:host(:active) .container:before, 
+:host(:focus) .container:before {
   opacity: 1;
 }
 
-:host([active]) .container:not(.container--none-selection), :host([active]) .container--link .dropdown-link {
+:host([active]) .container:not(.container--none-selection), 
+:host([active]) .container--link .dropdown-link {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .container:not(.container--none-selection):before, :host([active]) .container--link .dropdown-link:before {
+:host([active]) .container:not(.container--none-selection):before, 
+:host([active]) .container--link .dropdown-link:before {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
@@ -247,7 +251,8 @@
   color: var(--calcite-ui-brand);
 }
 
-.container--multi-selection:before, .container--none-selection:before {
+.container--multi-selection:before, 
+.container--none-selection:before {
   display: none;
 }