@esri/calcite-components 1.0.0-next.700 → 1.0.0-next.702

package/dist/cjs/calcite-checkbox.cjs.entry.js

@@ -1,21 +1,21 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const guid = require('./guid-1ebd6c55.js');
-const form = require('./form-1a47a4d6.js');
-const label = require('./label-b8d819fa.js');
-const interactive = require('./interactive-65f0e091.js');
-const dom = require('./dom-5d015a9c.js');
-const key = require('./key-a780a4ee.js');
-const loadable = require('./loadable-c899cd0d.js');
-require('./resources-a83f1536.js');
+const index = require('./index-ab60fe30.js');
+const guid = require('./guid-be2b55bb.js');
+const form = require('./form-1ad5b459.js');
+const label = require('./label-e0337647.js');
+const interactive = require('./interactive-0bf45603.js');
+const dom = require('./dom-c171a774.js');
+const key = require('./key-d4b16f6e.js');
+const loadable = require('./loadable-d0eb534b.js');
+require('./resources-53358703.js');
 
 const checkboxCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.toggle{outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const guid = require('./guid-1ebd6c55.js');
-const conditionalSlot = require('./conditionalSlot-e44a757c.js');
-const t9n = require('./t9n-553429a7.js');
-const locale = require('./locale-d6e5fc6f.js');
-const loadable = require('./loadable-c899cd0d.js');
-const observers = require('./observers-3102a548.js');
-const dom = require('./dom-5d015a9c.js');
-require('./key-a780a4ee.js');
-require('./resources-a83f1536.js');
+const index = require('./index-ab60fe30.js');
+const guid = require('./guid-be2b55bb.js');
+const conditionalSlot = require('./conditionalSlot-f6070588.js');
+const t9n = require('./t9n-ded232d9.js');
+const locale = require('./locale-d6be4a64.js');
+const loadable = require('./loadable-d0eb534b.js');
+const observers = require('./observers-95f29589.js');
+const dom = require('./dom-c171a774.js');
+require('./key-d4b16f6e.js');
+require('./resources-53358703.js');
 
 const CSS = {
   title: "title",

package/dist/cjs/calcite-color-picker_3.cjs.entry.js

@@ -1,25 +1,25 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const dom = require('./dom-5d015a9c.js');
-const utils = require('./utils-268460b9.js');
-const math = require('./math-9d5cd884.js');
-const interactive = require('./interactive-65f0e091.js');
-const key = require('./key-a780a4ee.js');
-const t9n = require('./t9n-553429a7.js');
-const locale = require('./locale-d6e5fc6f.js');
-const loadable = require('./loadable-c899cd0d.js');
-const debounce = require('./debounce-2b39062b.js');
-require('./resources-a83f1536.js');
-require('./guid-1ebd6c55.js');
-require('./observers-3102a548.js');
+const index = require('./index-ab60fe30.js');
+const dom = require('./dom-c171a774.js');
+const utils = require('./utils-93d6e6ae.js');
+const math = require('./math-867d8959.js');
+const interactive = require('./interactive-0bf45603.js');
+const key = require('./key-d4b16f6e.js');
+const t9n = require('./t9n-ded232d9.js');
+const locale = require('./locale-d6be4a64.js');
+const loadable = require('./loadable-d0eb534b.js');
+const debounce = require('./debounce-1dfbaddc.js');
+require('./resources-53358703.js');
+require('./guid-be2b55bb.js');
+require('./observers-95f29589.js');
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -2347,7 +2347,6 @@ const ColorPicker = class {
     };
     this.handleChannelInput = (event) => {
       const input = event.currentTarget;
-      const internalInput = event.detail.nativeEvent.target;
       const channelIndex = Number(input.getAttribute("data-channel-index"));
       const limit = this.channelMode === "rgb"
         ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
@@ -2362,7 +2361,9 @@ const ColorPicker = class {
         inputValue = clamped.toString();
       }
       input.value = inputValue;
-      internalInput.value = inputValue;
+      // TODO: refactor calcite-input so we don't need to sync the internals
+      // https://github.com/Esri/calcite-components/issues/6100
+      input.internalSyncChildElValue();
     };
     this.handleChannelChange = (event) => {
       const input = event.currentTarget;

package/dist/cjs/calcite-combobox_3.cjs.entry.js

@@ -1,29 +1,29 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const filter = require('./filter-3c59b195.js');
-const floatingUi = require('./floating-ui-595d654e.js');
-const guid = require('./guid-1ebd6c55.js');
-const dom = require('./dom-5d015a9c.js');
-const label = require('./label-b8d819fa.js');
-const form = require('./form-1a47a4d6.js');
-const observers = require('./observers-3102a548.js');
-const interactive = require('./interactive-65f0e091.js');
-const openCloseComponent = require('./openCloseComponent-bc0d4ee3.js');
-const t9n = require('./t9n-553429a7.js');
-const locale = require('./locale-d6e5fc6f.js');
-const loadable = require('./loadable-c899cd0d.js');
-const debounce = require('./debounce-2b39062b.js');
-const conditionalSlot = require('./conditionalSlot-e44a757c.js');
-require('./resources-a83f1536.js');
-require('./key-a780a4ee.js');
+const index = require('./index-ab60fe30.js');
+const filter = require('./filter-ae18b0fc.js');
+const floatingUi = require('./floating-ui-6c4af6f9.js');
+const guid = require('./guid-be2b55bb.js');
+const dom = require('./dom-c171a774.js');
+const label = require('./label-e0337647.js');
+const form = require('./form-1ad5b459.js');
+const observers = require('./observers-95f29589.js');
+const interactive = require('./interactive-0bf45603.js');
+const openCloseComponent = require('./openCloseComponent-bdc5bbe7.js');
+const t9n = require('./t9n-ded232d9.js');
+const locale = require('./locale-d6be4a64.js');
+const loadable = require('./loadable-d0eb534b.js');
+const debounce = require('./debounce-1dfbaddc.js');
+const conditionalSlot = require('./conditionalSlot-f6070588.js');
+require('./resources-53358703.js');
+require('./key-d4b16f6e.js');
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -869,11 +869,6 @@ const ComboboxItem = class {
     index.registerInstance(this, hostRef);
     this.calciteComboboxItemChange = index.createEvent(this, "calciteComboboxItemChange", 6);
     this.scale = "m";
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.itemClickHandler = (event) => {
       event.preventDefault();
       this.toggleSelected();
@@ -910,16 +905,10 @@ const ComboboxItem = class {
   }
   // --------------------------------------------------------------------------
   //
-  //  Public Methods
+  //  Private Methods
   //
   // --------------------------------------------------------------------------
-  /**
-   * Used to toggle the selection state. By default this won't trigger an event.
-   * The first argument allows the value to be coerced, rather than swapping values.
-   *
-   * @param coerce
-   */
-  async toggleSelected(coerce) {
+  toggleSelected(coerce) {
     if (this.disabled) {
       return;
     }

package/dist/cjs/calcite-date-picker_4.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const utils = require('./utils-116283e5.js');
-const t9n = require('./t9n-553429a7.js');
-const locale = require('./locale-d6e5fc6f.js');
-const dom = require('./dom-5d015a9c.js');
-const resources = require('./resources-a83f1536.js');
-const interactive = require('./interactive-65f0e091.js');
-const key = require('./key-a780a4ee.js');
-const Heading = require('./Heading-15eba34c.js');
-require('./observers-3102a548.js');
-require('./guid-1ebd6c55.js');
+const index = require('./index-ab60fe30.js');
+const utils = require('./utils-bf8ba896.js');
+const t9n = require('./t9n-ded232d9.js');
+const locale = require('./locale-d6be4a64.js');
+const dom = require('./dom-c171a774.js');
+const resources = require('./resources-53358703.js');
+const interactive = require('./interactive-0bf45603.js');
+const key = require('./key-d4b16f6e.js');
+const Heading = require('./Heading-6395d8b1.js');
+require('./observers-95f29589.js');
+require('./guid-be2b55bb.js');
 
 const HEADING_LEVEL = 2;
 
@@ -69,20 +69,23 @@ const DatePicker = class {
       }
     };
     this.monthHoverChange = (event) => {
-      if (!this.startAsDate) {
+      if (!this.range) {
         this.hoverRange = undefined;
         return;
       }
+      const { valueAsDate } = this;
+      const start = Array.isArray(valueAsDate) && valueAsDate[0];
+      const end = Array.isArray(valueAsDate) && valueAsDate[1];
       const date = new Date(event.detail);
       this.hoverRange = {
         focused: this.activeRange || "start",
-        start: this.startAsDate,
-        end: this.endAsDate
+        start,
+        end
       };
       if (!this.proximitySelectionDisabled) {
-        if (this.endAsDate) {
-          const startDiff = utils.getDaysDiff(date, this.startAsDate);
-          const endDiff = utils.getDaysDiff(date, this.endAsDate);
+        if (end) {
+          const startDiff = utils.getDaysDiff(date, start);
+          const endDiff = utils.getDaysDiff(date, end);
           if (endDiff > 0) {
             this.hoverRange.end = date;
             this.hoverRange.focused = "end";
@@ -101,11 +104,11 @@ const DatePicker = class {
           }
         }
         else {
-          if (date < this.startAsDate) {
+          if (date < start) {
             this.hoverRange = {
               focused: "start",
               start: date,
-              end: this.startAsDate
+              end: start
             };
           }
           else {
@@ -115,12 +118,12 @@ const DatePicker = class {
         }
       }
       else {
-        if (!this.endAsDate) {
-          if (date < this.startAsDate) {
+        if (!end) {
+          if (date < start) {
             this.hoverRange = {
               focused: "start",
               start: date,
-              end: this.startAsDate
+              end: start
             };
           }
           else {
@@ -143,16 +146,23 @@ const DatePicker = class {
      * Reset active date and close
      */
     this.reset = () => {
-      if (!Array.isArray(this.valueAsDate) &&
-        this.valueAsDate &&
-        this.valueAsDate?.getTime() !== this.activeDate?.getTime()) {
-        this.activeDate = new Date(this.valueAsDate);
-      }
-      if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
-        this.activeStartDate = new Date(this.startAsDate);
+      const { valueAsDate } = this;
+      if (!Array.isArray(valueAsDate) &&
+        valueAsDate &&
+        valueAsDate?.getTime() !== this.activeDate?.getTime()) {
+        this.activeDate = new Date(valueAsDate);
       }
-      if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
-        this.activeEndDate = new Date(this.endAsDate);
+      if (Array.isArray(valueAsDate)) {
+        if (valueAsDate[0] &&
+          valueAsDate[0]?.getTime() !==
+            (this.activeStartDate instanceof Date && this.activeStartDate?.getTime())) {
+          this.activeStartDate = new Date(valueAsDate[0]);
+        }
+        if (valueAsDate[1] &&
+          valueAsDate[1]?.getTime() !==
+            (this.activeStartDate instanceof Date && this.activeEndDate?.getTime())) {
+          this.activeEndDate = new Date(valueAsDate[1]);
+        }
       }
     };
     /**
@@ -173,9 +183,11 @@ const DatePicker = class {
         this.calciteDatePickerChange.emit();
         return;
       }
-      if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
-        if (this.startAsDate) {
-          this.setEndDate(new Date(this.startAsDate));
+      const start = this.getStartDate();
+      const end = this.getEndDate();
+      if (!start || (!end && date < start)) {
+        if (start) {
+          this.setEndDate(new Date(start));
         }
         if (this.activeRange == "end") {
           this.setEndDate(date);
@@ -184,7 +196,7 @@ const DatePicker = class {
           this.setStartDate(date);
         }
       }
-      else if (!this.endAsDate) {
+      else if (!end) {
         this.setEndDate(date);
       }
       else {
@@ -198,8 +210,8 @@ const DatePicker = class {
             }
           }
           else {
-            const startDiff = utils.getDaysDiff(date, this.startAsDate);
-            const endDiff = utils.getDaysDiff(date, this.endAsDate);
+            const startDiff = utils.getDaysDiff(date, start);
+            const endDiff = utils.getDaysDiff(date, end);
             if (endDiff === 0 || startDiff < 0) {
               this.setStartDate(date);
             }
@@ -216,7 +228,6 @@ const DatePicker = class {
         }
         else {
           this.setStartDate(date);
-          this.endAsDate = this.activeEndDate = undefined;
         }
       }
       this.calciteDatePickerChange.emit();
@@ -226,8 +237,6 @@ const DatePicker = class {
     this.value = undefined;
     this.headingLevel = undefined;
     this.valueAsDate = undefined;
-    this.startAsDate = undefined;
-    this.endAsDate = undefined;
     this.minAsDate = undefined;
     this.maxAsDate = undefined;
     this.min = undefined;
@@ -240,6 +249,8 @@ const DatePicker = class {
     this.messages = undefined;
     this.activeStartDate = undefined;
     this.activeEndDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.localeData = undefined;
@@ -250,15 +261,17 @@ const DatePicker = class {
       this.activeEndDate = newActiveDate;
     }
   }
-  handleValueAsDate(date) {
-    if (!Array.isArray(date) && date && date !== this.activeDate) {
-      this.activeDate = date;
+  valueAsDateWatcher(newValueAsDate) {
+    if (this.range && Array.isArray(newValueAsDate)) {
+      const { activeStartDate, activeEndDate } = this;
+      const newActiveStartDate = newValueAsDate[0];
+      const newActiveEndDate = newValueAsDate[1];
+      this.activeStartDate = activeStartDate !== newActiveStartDate && newActiveStartDate;
+      this.activeEndDate = activeEndDate !== newActiveEndDate && newActiveEndDate;
+    }
+    else if (newValueAsDate && newValueAsDate !== this.activeDate) {
+      this.activeDate = newValueAsDate;
     }
-  }
-  handleRangeChange() {
-    const { startAsDate: startDate, endAsDate: endDate } = this;
-    this.activeEndDate = endDate;
-    this.activeStartDate = startDate;
   }
   onMinChanged(min) {
     if (min) {
@@ -365,38 +378,23 @@ const DatePicker = class {
       index.h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteInternalDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, onCalciteInternalDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
-  /**
-   * Update date instance of start if valid
-   *
-   * @param startDate
-   * @param emit
-   */
-  setStartAsDate(startDate, emit) {
-    this.startAsDate = startDate;
-    this.mostRecentRangeValue = this.startAsDate;
-    if (emit) {
-      this.calciteDatePickerRangeChange.emit();
-    }
-  }
-  /**
-   * Update date instance of end if valid
-   *
-   * @param endDate
-   * @param emit
-   */
-  setEndAsDate(endDate, emit) {
-    this.endAsDate = endDate ? utils.setEndOfDay(endDate) : endDate;
-    this.mostRecentRangeValue = this.endAsDate;
-    if (emit) {
-      this.calciteDatePickerRangeChange.emit();
-    }
+  getEndDate() {
+    return (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined;
   }
   setEndDate(date) {
-    this.setEndAsDate(date, true);
+    const newEndDate = date ? utils.setEndOfDay(date) : date;
+    this.valueAsDate = [this.getStartDate(), date];
+    this.mostRecentRangeValue = newEndDate;
+    this.calciteDatePickerRangeChange.emit();
     this.activeEndDate = date || null;
   }
+  getStartDate() {
+    return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+  }
   setStartDate(date) {
-    this.setStartAsDate(date, true);
+    this.valueAsDate = [date, this.getEndDate()];
+    this.mostRecentRangeValue = date;
+    this.calciteDatePickerRangeChange.emit();
     this.activeStartDate = date || null;
   }
   /**
@@ -417,9 +415,7 @@ const DatePicker = class {
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "activeDate": ["activeDateWatcher"],
-    "valueAsDate": ["handleValueAsDate"],
-    "startAsDate": ["handleRangeChange"],
-    "endAsDate": ["handleRangeChange"],
+    "valueAsDate": ["valueAsDateWatcher"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
     "messageOverrides": ["onMessagesChange"],

package/dist/cjs/calcite-dropdown_3.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const dom = require('./dom-5d015a9c.js');
-const floatingUi = require('./floating-ui-595d654e.js');
-const observers = require('./observers-3102a548.js');
-const interactive = require('./interactive-65f0e091.js');
-const openCloseComponent = require('./openCloseComponent-bc0d4ee3.js');
-const guid = require('./guid-1ebd6c55.js');
-const key = require('./key-a780a4ee.js');
-const loadable = require('./loadable-c899cd0d.js');
-require('./resources-a83f1536.js');
-require('./debounce-2b39062b.js');
+const index = require('./index-ab60fe30.js');
+const dom = require('./dom-c171a774.js');
+const floatingUi = require('./floating-ui-6c4af6f9.js');
+const observers = require('./observers-95f29589.js');
+const interactive = require('./interactive-0bf45603.js');
+const openCloseComponent = require('./openCloseComponent-bdc5bbe7.js');
+const guid = require('./guid-be2b55bb.js');
+const key = require('./key-d4b16f6e.js');
+const loadable = require('./loadable-d0eb534b.js');
+require('./resources-53358703.js');
+require('./debounce-1dfbaddc.js');
 
 const SLOTS = {
   dropdownTrigger: "trigger"
@@ -292,37 +292,27 @@ const Dropdown = class {
   }
   calciteInternalDropdownItemKeyEvent(event) {
     const { keyboardEvent } = event.detail;
-    // handle edge
     const target = keyboardEvent.target;
-    const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
-    const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
     switch (keyboardEvent.key) {
       case "Tab":
-        if (isLastItem && !keyboardEvent.shiftKey) {
+        if (this.items.indexOf(target) === this.items.length - 1 && !keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
         }
-        else if (isFirstItem && keyboardEvent.shiftKey) {
+        else if (this.items.indexOf(target) === 0 && keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
         }
-        else if (keyboardEvent.shiftKey) {
-          this.focusPrevItem(itemToFocus);
-        }
-        else {
-          this.focusNextItem(itemToFocus);
-        }
         break;
       case "ArrowDown":
-        this.focusNextItem(itemToFocus);
+        dom.focusElementInGroup(this.items, target, "next");
         break;
       case "ArrowUp":
-        this.focusPrevItem(itemToFocus);
+        dom.focusElementInGroup(this.items, target, "previous");
         break;
       case "Home":
-        this.focusFirstItem();
+        dom.focusElementInGroup(this.items, target, "first");
         break;
       case "End":
-        this.focusLastItem();
+        dom.focusElementInGroup(this.items, target, "last");
         break;
     }
     event.stopPropagation();
@@ -381,27 +371,6 @@ const Dropdown = class {
       dom.focusElement(this.triggers[0]);
     }
   }
-  focusFirstItem() {
-    const firstItem = this.items[0];
-    this.getFocusableElement(firstItem);
-  }
-  focusLastItem() {
-    const lastItem = this.items[this.items.length - 1];
-    this.getFocusableElement(lastItem);
-  }
-  focusNextItem(el) {
-    const index = this.itemIndex(el);
-    const nextItem = this.items[index + 1] || this.items[0];
-    this.getFocusableElement(nextItem);
-  }
-  focusPrevItem(el) {
-    const index = this.itemIndex(el);
-    const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
-    this.getFocusableElement(prevItem);
-  }
-  itemIndex(el) {
-    return this.items.indexOf(el);
-  }
   getFocusableElement(item) {
     if (!item) {
       return;
@@ -550,7 +519,7 @@ const DropdownItem = class {
         : this.iconEnd
           ? [contentNode, iconEndEl]
           : contentNode;
-    const contentEl = !this.href ? (slottedContent) : (index.h("a", { "aria-label": this.label, class: "dropdown-link", href: this.href, ref: (el) => (this.childLink = el), rel: this.rel, target: this.target }, slottedContent));
+    const contentEl = !this.href ? (slottedContent) : (index.h("a", { "aria-label": this.label, class: "dropdown-link", href: this.href, ref: (el) => (this.childLink = el), rel: this.rel, tabIndex: -1, target: this.target }, slottedContent));
     const itemRole = this.href
       ? null
       : this.selectionMode === "single"

package/dist/cjs/calcite-fab.cjs.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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-next.700
+ * v1.0.0-next.702
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-718cae43.js');
-const dom = require('./dom-5d015a9c.js');
-const interactive = require('./interactive-65f0e091.js');
-const loadable = require('./loadable-c899cd0d.js');
-require('./resources-a83f1536.js');
-require('./guid-1ebd6c55.js');
+const index = require('./index-ab60fe30.js');
+const dom = require('./dom-c171a774.js');
+const interactive = require('./interactive-0bf45603.js');
+const loadable = require('./loadable-d0eb534b.js');
+require('./resources-53358703.js');
+require('./guid-be2b55bb.js');
 
 const CSS = {
   button: "button"