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

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

@@ -120,18 +120,16 @@
   line-height: 1;
   color: var(--calcite-ui-text-3);
   opacity: var(--calcite-ui-opacity-disabled);
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  outline-color: transparent;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   background: none;
-  box-shadow: 0 0 0 2px transparent, 0 0 0 0px transparent;
+  box-shadow: 0 0 0 2px transparent;
 }
 
 .text {
   margin-top: 1px;
-  margin-right: 0px;
   margin-bottom: 0px;
-  margin-left: 1px;
+  margin-inline-start: 0px;
 }
 
 :host([scale=s]) .day-v-wrapper {
@@ -191,7 +189,9 @@
 }
 
 :host(:focus:not([disabled])) .day {
-  box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
 :host([selected]) .day {
@@ -421,8 +421,6 @@
   }
   :host([selected]) .day {
     border-radius: 0px;
-  }
-  :host([selected]) .day {
     background-color: highlight;
   }
 

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

@@ -1,6 +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
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -42,7 +43,7 @@ export class DatePickerDay {
     };
   }
   mouseoverHandler() {
-    this.calciteDayHover.emit({
+    this.calciteInternalDayHover.emit({
       disabled: this.disabled
     });
   }
@@ -335,8 +336,8 @@ export class DatePickerDay {
         "references": {}
       }
     }, {
-      "method": "calciteDayHover",
-      "name": "calciteDayHover",
+      "method": "calciteInternalDayHover",
+      "name": "calciteInternalDayHover",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,6 +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
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
@@ -68,11 +69,12 @@ export class DatePickerMonth {
     this.dayHover = (e) => {
       const target = e.target;
       if (e.detail.disabled) {
-        this.calciteDatePickerMouseOut.emit();
+        this.calciteInternalDatePickerMouseOut.emit();
       }
       else {
-        this.calciteDatePickerHover.emit(target.value);
+        this.calciteInternalDatePickerHover.emit(target.value);
       }
+      e.stopPropagation();
     };
     this.daySelect = (e) => {
       const target = e.target;
@@ -80,7 +82,7 @@ export class DatePickerMonth {
     };
   }
   mouseoutHandler() {
-    this.calciteDatePickerMouseOut.emit();
+    this.calciteInternalDatePickerMouseOut.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -128,6 +130,8 @@ export class DatePickerMonth {
   //--------------------------------------------------------------------------
   /**
    * Add n months to the current month
+   *
+   * @param step
    */
   addMonths(step) {
     const nextDate = new Date(this.activeDate);
@@ -137,6 +141,8 @@ export class DatePickerMonth {
   }
   /**
    * Add n days to the current date
+   *
+   * @param step
    */
   addDays(step = 0) {
     const nextDate = new Date(this.activeDate);
@@ -146,6 +152,10 @@ export class DatePickerMonth {
   }
   /**
    * Get dates for last days of the previous month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getPrevMonthdays(month, year, startOfWeek) {
     const lastDate = new Date(year, month, 0);
@@ -155,13 +165,16 @@ export class DatePickerMonth {
     if (day - 6 === startOfWeek) {
       return days;
     }
-    for (let i = lastDate.getDay(); i >= startOfWeek; i--) {
+    for (let i = Math.abs(lastDate.getDay() - startOfWeek); i >= 0; i--) {
       days.push(date - i);
     }
     return days;
   }
   /**
    * Get dates for the current month
+   *
+   * @param month
+   * @param year
    */
   getCurrentMonthDays(month, year) {
     const num = new Date(year, month + 1, 0).getDate();
@@ -173,6 +186,10 @@ export class DatePickerMonth {
   }
   /**
    * Get dates for first days of the next month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getNextMonthDays(month, year, startOfWeek) {
     const endDay = new Date(year, month + 1, 0).getDay();
@@ -187,6 +204,8 @@ export class DatePickerMonth {
   }
   /**
    * Determine if the date is in between the start and end dates
+   *
+   * @param date
    */
   betweenSelectedRange(date) {
     return !!(this.startDate &&
@@ -197,6 +216,8 @@ export class DatePickerMonth {
   }
   /**
    * Determine if the date should be in selected state
+   *
+   * @param date
    */
   isSelected(date) {
     return !!(sameDate(date, this.selectedDate) ||
@@ -205,6 +226,8 @@ export class DatePickerMonth {
   }
   /**
    * Determine if the date is the start of the date range
+   *
+   * @param date
    */
   isStartOfRange(date) {
     return !!(this.startDate &&
@@ -221,6 +244,12 @@ export class DatePickerMonth {
   }
   /**
    * Render calcite-date-picker-day
+   *
+   * @param active
+   * @param day
+   * @param date
+   * @param currentMonth
+   * @param ref
    */
   renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
@@ -232,7 +261,7 @@ export class DatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();
@@ -474,8 +503,8 @@ export class DatePickerMonth {
         "references": {}
       }
     }, {
-      "method": "calciteDatePickerHover",
-      "name": "calciteDatePickerHover",
+      "method": "calciteInternalDatePickerHover",
+      "name": "calciteInternalDatePickerHover",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -507,8 +536,8 @@ export class DatePickerMonth {
         "references": {}
       }
     }, {
-      "method": "calciteDatePickerMouseOut",
-      "name": "calciteDatePickerMouseOut",
+      "method": "calciteInternalDatePickerMouseOut",
+      "name": "calciteInternalDatePickerMouseOut",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -137,12 +137,8 @@
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   width: 14.2857142857%;
 }
 .chevron:focus {
@@ -197,9 +193,7 @@
   background-color: transparent;
   text-align: center;
   font-family: inherit;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   z-index: 2;
 }
 .year:hover {

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

@@ -1,6 +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
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
@@ -14,22 +15,27 @@ export class DatePickerMonthHeader {
     //--------------------------------------------------------------------------
     /**
      * Increment year on UP/DOWN keys
+     *
+     * @param e
      */
     this.onYearKey = (e) => {
-      const year = e.target.value;
+      const localizedYear = e.target.value;
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          this.setYear(year, -1);
+          this.setYear({ localizedYear, offset: -1 });
           break;
         case "ArrowUp":
           e.preventDefault();
-          this.setYear(year, 1);
+          this.setYear({ localizedYear, offset: 1 });
           break;
       }
     };
-    this.yearChanged = (event) => {
-      this.setYear(event.target.value);
+    this.onYearChange = (event) => {
+      this.setYear({ localizedYear: event.target.value });
+    };
+    this.onYearInput = (event) => {
+      this.setYear({ localizedYear: event.target.value, commit: false });
     };
     this.prevMonthClick = (e) => {
       this.handleArrowClick(e, this.prevMonthDate);
@@ -91,7 +97,7 @@ export class DatePickerMonthHeader {
           h("input", { "aria-label": this.intlYear, class: {
               year: true,
               "year--suffix": !!suffix
-            }, inputmode: "numeric", maxlength: "4", minlength: "1", onInput: this.yearChanged, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }),
+            }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }),
           suffix && (h("span", { class: "suffix" },
             h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear),
             " " + suffix)))),
@@ -105,27 +111,37 @@ export class DatePickerMonthHeader {
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
-  /**
-   * Parse localized year string from input,
-   * set to active if in range
-   */
-  setYear(localizedYear, increment = 0) {
-    const { min, max, activeDate, localeData, yearInput } = this;
+  getInRangeDate({ localizedYear, offset = 0 }) {
+    const { min, max, activeDate, localeData } = this;
     const parsedYear = parseNumber(localizedYear, localeData);
     const length = parsedYear.toString().length;
-    const year = isNaN(parsedYear) ? false : parsedYear + increment;
+    const year = isNaN(parsedYear) ? false : parsedYear + offset;
     const inRange = year && (!min || min.getFullYear() <= year) && (!max || max.getFullYear() >= year);
-    // if you've supplied a year and it's in range, update active date
+    // if you've supplied a year and it's in range
     if (year && inRange && length === localizedYear.length) {
       const nextDate = new Date(activeDate);
       nextDate.setFullYear(year);
-      const inRangeDate = dateFromRange(nextDate, min, max);
+      return dateFromRange(nextDate, min, max);
+    }
+  }
+  /**
+   * Parse localized year string from input,
+   * set to active if in range
+   *
+   * @param root0
+   * @param root0.localizedYear
+   * @param root0.commit
+   * @param root0.offset
+   */
+  setYear({ localizedYear, commit = true, offset = 0 }) {
+    const { yearInput, activeDate, localeData } = 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);
-      yearInput.value = localizeNumber(inRangeDate.getFullYear(), localeData);
     }
-    else {
-      // leave the current active date and clean up garbage input
-      yearInput.value = localizeNumber(activeDate.getFullYear(), localeData);
+    if (commit) {
+      yearInput.value = localizeNumber((inRangeDate || activeDate).getFullYear(), localeData);
     }
   }
   static get is() { return "calcite-date-picker-month-header"; }

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

@@ -157,7 +157,6 @@
 .calcite-dropdown-trigger-container {
   position: relative;
   display: flex;
-  flex: 1 1 auto;
 }
 
 :host([width=s]) {

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

@@ -1,10 +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
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, getSlotted } from "../../utils/dom";
-import { createPopper, CSS as PopperCSS, updatePopper, popperMenuFlipPlacements, defaultMenuPlacement } from "../../utils/popper";
+import { focusElement, toAriaBoolean } from "../../utils/dom";
+import { createPopper, CSS as PopperCSS, updatePopper, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -31,12 +32,13 @@ export class Dropdown {
     /**
      specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
      this value does not include groupTitles passed to calcite-dropdown-group
-    */
+     */
     this.maxItems = 0;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the dropdown will be positioned relative to the button.
+     *
      * @default "bottom-leading"
      */
     this.placement = defaultMenuPlacement;
@@ -50,28 +52,61 @@ export class Dropdown {
     this.selectedItems = [];
     /** specify whether the dropdown is opened by hover or click of a trigger element */
     this.type = "click";
-    /** specify the width of dropdown, defaults to m */
-    this.width = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.items = [];
+    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
-    this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
+    this.updateTriggers = (event) => {
+      this.triggers = event.target.assignedElements({
+        flatten: true
+      });
+      this.reposition();
+    };
     this.updateItems = () => {
+      this.items = this.groups
+        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
-      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };
+    this.updateGroups = (event) => {
+      const groups = event.target
+        .assignedElements({ flatten: true })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+      this.groups = groups;
+      this.updateItems();
+    };
+    this.resizeObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        const { target } = entry;
+        if (target === this.referenceEl) {
+          this.setDropdownWidth();
+        }
+        else if (target === this.scrollerEl) {
+          this.setMaxScrollerHeight();
+        }
+      });
+    };
+    this.setDropdownWidth = () => {
+      const { referenceEl, scrollerEl } = this;
+      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
+      if (!referenceElWidth || !scrollerEl) {
+        return;
+      }
+      scrollerEl.style.minWidth = `${referenceElWidth}px`;
+    };
     this.setMaxScrollerHeight = () => {
       const { active, scrollerEl } = this;
       if (!scrollerEl || !active) {
@@ -93,6 +128,7 @@ export class Dropdown {
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
+      this.resizeObserver.observe(el);
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -143,6 +179,9 @@ export class Dropdown {
       this.active = false;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
@@ -158,7 +197,7 @@ export class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-    this.updateItems();
+    this.setFilteredPlacements();
   }
   componentDidLoad() {
     this.reposition();
@@ -176,15 +215,15 @@ export class Dropdown {
     const { active } = 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": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
-      h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
+        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("div", { class: {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
             [PopperCSS.animationActive]: active
           }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
           h("div", { hidden: !this.active },
-            h("slot", null))))));
+            h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -210,8 +249,9 @@ export class Dropdown {
     }
     this.closeCalciteDropdown(false);
   }
-  closeCalciteDropdownOnEvent() {
+  closeCalciteDropdownOnEvent(e) {
     this.closeCalciteDropdown();
+    e.stopPropagation();
   }
   closeCalciteDropdownOnOpenEvent(e) {
     if (e.composedPath().includes(this.el)) {
@@ -229,7 +269,7 @@ export class Dropdown {
       this.closeCalciteDropdown();
     }
   }
-  calciteDropdownItemKeyEvent(e) {
+  calciteInternalDropdownItemKeyEvent(e) {
     const { keyboardEvent } = e.detail;
     // handle edge
     const target = keyboardEvent.target;
@@ -274,6 +314,7 @@ export class Dropdown {
       event.detail.requestedDropdownGroup.selectionMode === "none") {
       this.closeCalciteDropdown();
     }
+    event.stopPropagation();
   }
   getModifiers() {
     const flipModifier = {
@@ -281,7 +322,7 @@ export class Dropdown {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -309,16 +350,14 @@ export class Dropdown {
     this.popper = null;
   }
   updateSelectedItems() {
-    const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
-    this.selectedItems = items.filter((item) => item.active);
+    this.selectedItems = this.items.filter((item) => item.active);
   }
   getMaxScrollerHeight() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    groups.forEach((group) => {
+    this.groups.forEach((group) => {
       if (maxItems > 0 && itemsToProcess < maxItems) {
         Array.from(group.children).forEach((item, index) => {
           if (index === 0) {
@@ -600,14 +639,13 @@ export class Dropdown {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "specify the width of dropdown, defaults to m"
+        "text": "specify the width of dropdown"
       },
       "attribute": "width",
-      "reflect": true,
-      "defaultValue": "\"m\""
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -618,7 +656,7 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown item has been selected or deselected *"
+        "text": "fires when a dropdown item has been selected or deselected"
       },
       "complexType": {
         "original": "void",
@@ -633,7 +671,7 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown has been opened *"
+        "text": "fires when a dropdown has been opened"
       },
       "complexType": {
         "original": "void",
@@ -648,7 +686,7 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown has been closed *"
+        "text": "fires when a dropdown has been closed"
       },
       "complexType": {
         "original": "void",
@@ -681,6 +719,9 @@ export class Dropdown {
     }, {
       "propName": "disabled",
       "methodName": "handleDisabledChange"
+    }, {
+      "propName": "flipPlacements",
+      "methodName": "flipPlacementsHandler"
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"
@@ -695,7 +736,7 @@ export class Dropdown {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteDropdownCloseRequest",
+      "name": "calciteInternalDropdownCloseRequest",
       "method": "closeCalciteDropdownOnEvent",
       "target": undefined,
       "capture": false,
@@ -719,13 +760,13 @@ export class Dropdown {
       "capture": false,
       "passive": true
     }, {
-      "name": "calciteDropdownItemKeyEvent",
-      "method": "calciteDropdownItemKeyEvent",
+      "name": "calciteInternalDropdownItemKeyEvent",
+      "method": "calciteInternalDropdownItemKeyEvent",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteDropdownItemSelect",
+      "name": "calciteInternalDropdownItemSelect",
       "method": "handleItemSelect",
       "target": undefined,
       "capture": false,

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

@@ -1,5 +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
  */
 export {};

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

@@ -1,6 +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
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

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

@@ -82,6 +82,10 @@
   display: block;
 }
 
+.container {
+  text-align: start;
+}
+
 .container--s {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;