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

package/dist/collection/components/button/button.css

@@ -117,11 +117,11 @@
 
 :host button,
 :host a {
-  --calcite-button-content-margin: 0.5rem;
-  --calcite-button-padding-x: 7px;
-  --calcite-button-padding-y: 3px;
-  padding-block: var(--calcite-button-padding-y);
-  padding-inline: var(--calcite-button-padding-x);
+  --calcite-button-content-margin-internal: 0.5rem;
+  --calcite-button-padding-x-internal: 7px;
+  --calcite-button-padding-y-internal: 3px;
+  padding-block: var(--calcite-button-padding-y-internal);
+  padding-inline: var(--calcite-button-padding-x-internal);
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -150,7 +150,7 @@
 .content {
   display: flex;
   flex-basis: auto;
-  margin-inline: var(--calcite-button-content-margin);
+  margin-inline: var(--calcite-button-content-margin-internal);
 }
 
 .icon-start-empty .content {
@@ -163,12 +163,12 @@
 
 :host([scale=m]) button,
 :host([scale=m]) a {
-  --calcite-button-content-margin: 0.75rem;
+  --calcite-button-content-margin-internal: 0.75rem;
 }
 
 :host([scale=l]) button,
 :host([scale=l]) a {
-  --calcite-button-content-margin: 1rem;
+  --calcite-button-content-margin-internal: 1rem;
 }
 
 :host([width=auto]) {
@@ -221,7 +221,7 @@
 
 :host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,
 :host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end {
-  margin-inline-start: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin-internal);
 }
 
 .icon {
@@ -289,7 +289,7 @@
 
 :host([loading]) button.content--slotted .calcite-button--loader calcite-loader,
 :host([loading]) a.content--slotted .calcite-button--loader calcite-loader {
-  margin-inline-end: var(--calcite-button-content-margin);
+  margin-inline-end: var(--calcite-button-content-margin-internal);
 }
 :host([loading]) button:not(.content--slotted) .icon--start,
 :host([loading]) button:not(.content--slotted) .icon--end,
@@ -694,7 +694,7 @@
   border-block-style: solid;
 }
 :host([appearance=transparent][kind=neutral].cancel-editing-button) button:not(.content--slotted) {
-  --calcite-button-padding-y: 0;
+  --calcite-button-padding-y-internal: 0;
 }
 :host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover {
   color: var(--calcite-ui-text-1);
@@ -724,50 +724,50 @@
 
 :host([scale=s][appearance=transparent]) button.content--slotted,
 :host([scale=s][appearance=transparent]) a.content--slotted {
-  --calcite-button-padding-x: 0.5rem;
+  --calcite-button-padding-x-internal: 0.5rem;
 }
 
 :host([scale=s]) button,
 :host([scale=s]) a {
-  --calcite-button-padding-y: 3px;
+  --calcite-button-padding-y-internal: 3px;
 }
 
 :host([scale=m]) button.content--slotted,
 :host([scale=m]) a.content--slotted {
-  --calcite-button-padding-x: 11px;
+  --calcite-button-padding-x-internal: 11px;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 :host([scale=m]) button,
 :host([scale=m]) a {
-  --calcite-button-padding-y: 7px;
+  --calcite-button-padding-y-internal: 7px;
 }
 
 :host([scale=m][appearance=transparent]) button.content--slotted,
 :host([scale=m][appearance=transparent]) a.content--slotted {
-  --calcite-button-padding-x: 0.75rem;
+  --calcite-button-padding-x-internal: 0.75rem;
 }
 
 :host([scale=l]) button.content--slotted,
 :host([scale=l]) a.content--slotted {
-  --calcite-button-padding-x: 15px;
+  --calcite-button-padding-x-internal: 15px;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 
 :host([scale=l]) .button-padding {
-  --calcite-button-padding-x: 1rem;
-  --calcite-button-padding-y: 11px;
+  --calcite-button-padding-x-internal: 1rem;
+  --calcite-button-padding-y-internal: 11px;
 }
 :host([scale=l]) .button-padding--shrunk {
-  --calcite-button-padding-y: 9px;
+  --calcite-button-padding-y-internal: 9px;
 }
 
 :host([scale=s]) button:not(.content--slotted),
 :host([scale=s]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 0.125rem;
-  --calcite-button-padding-y: 3px;
+  --calcite-button-padding-x-internal: 0.125rem;
+  --calcite-button-padding-y-internal: 3px;
   inline-size: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -776,8 +776,8 @@
 
 :host([scale=m]) button:not(.content--slotted),
 :host([scale=m]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 0.125rem;
-  --calcite-button-padding-y: 7px;
+  --calcite-button-padding-x-internal: 0.125rem;
+  --calcite-button-padding-y-internal: 7px;
   inline-size: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -786,8 +786,8 @@
 
 :host([scale=l]) button:not(.content--slotted),
 :host([scale=l]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 0.125rem;
-  --calcite-button-padding-y: 9px;
+  --calcite-button-padding-x-internal: 0.125rem;
+  --calcite-button-padding-y-internal: 9px;
   inline-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -796,12 +796,12 @@
 
 :host([scale=l][appearance=transparent]) button:not(.content--slotted),
 :host([scale=l][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-y: 0.625rem;
+  --calcite-button-padding-y-internal: 0.625rem;
 }
 
 :host([scale=s][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=s][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 23px;
+  --calcite-button-padding-x-internal: 23px;
   block-size: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -809,12 +809,12 @@
 
 :host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
 :host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 1.5rem;
+  --calcite-button-padding-x-internal: 1.5rem;
 }
 
 :host([scale=m][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=m][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 2rem;
+  --calcite-button-padding-x-internal: 2rem;
   block-size: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -822,12 +822,12 @@
 
 :host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
 :host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 33px;
+  --calcite-button-padding-x-internal: 33px;
 }
 
 :host([scale=l][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=l][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 43px;
+  --calcite-button-padding-x-internal: 43px;
   block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -839,5 +839,5 @@
 
 :host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
 :host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 2.75rem;
+  --calcite-button-padding-x-internal: 2.75rem;
 }

package/dist/collection/components/button/button.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-next.700
+ * v1.0.0-next.701
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { h, Build } from "@stencil/core";

package/dist/collection/components/button/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-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.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-next.700
+ * v1.0.0-next.701
  */
 import { h } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/card/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-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/checkbox/checkbox.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-next.700
+ * v1.0.0-next.701
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/chip/chip.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-next.700
+ * v1.0.0-next.701
  */
 import { h, Build } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/chip/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-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/color-picker/color-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.0.0-next.700
+ * v1.0.0-next.701
  */
 import { h } from "@stencil/core";
 import Color from "color";
@@ -81,7 +81,6 @@ export class ColorPicker {
     };
     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]]
@@ -96,7 +95,9 @@ export class ColorPicker {
         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/collection/components/color-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.0.0-next.700
+ * v1.0.0-next.701
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-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.0.0-next.700
+ * v1.0.0-next.701
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.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-next.700
+ * v1.0.0-next.701
  */
 import { h } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";

package/dist/collection/components/color-picker-hex-input/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-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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-next.700
+ * v1.0.0-next.701
  */
 import { h } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/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-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.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-next.700
+ * v1.0.0-next.701
  */
 import { h, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";

package/dist/collection/components/combobox/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-next.700
+ * v1.0.0-next.701
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/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.0.0-next.700
+ * v1.0.0-next.701
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.700
+ * v1.0.0-next.701
  */
 import { Host, h } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";

package/dist/collection/components/combobox-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   icon: "icon",

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.0.0-next.700
+ * v1.0.0-next.701
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";

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.0.0-next.700
+ * v1.0.0-next.701
  */
 export const CSS = {
   list: "list",

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.0.0-next.700
+ * v1.0.0-next.701
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "./utils";
@@ -209,8 +209,6 @@ export class DatePicker {
     this.value = undefined;
     this.headingLevel = undefined;
     this.valueAsDate = undefined;
-    this.startAsDate = undefined;
-    this.endAsDate = undefined;
     this.minAsDate = undefined;
     this.maxAsDate = undefined;
     this.min = undefined;
@@ -223,6 +221,8 @@ export class DatePicker {
     this.messages = undefined;
     this.activeStartDate = undefined;
     this.activeEndDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.localeData = undefined;
@@ -508,50 +508,6 @@ export class DatePicker {
           "text": "Specifies the selected date as a full date object (`new Date(\"yyyy-mm-dd\")`), or an array containing full date objects (`[new Date(\"yyyy-mm-dd\"), new Date(\"yyyy-mm-dd\")]`)."
         }
       },
-      "startAsDate": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date",
-          "references": {
-            "Date": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `valueAsDate` instead."
-            }],
-          "text": "Specifies the selected start date as a full date object."
-        }
-      },
-      "endAsDate": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date",
-          "references": {
-            "Date": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `valueAsDate` instead."
-            }],
-          "text": "Specifies the selected end date as a full date object."
-        }
-      },
       "minAsDate": {
         "type": "unknown",
         "mutable": true,
@@ -752,6 +708,8 @@ export class DatePicker {
     return {
       "activeStartDate": {},
       "activeEndDate": {},
+      "startAsDate": {},
+      "endAsDate": {},
       "effectiveLocale": {},
       "defaultMessages": {},
       "localeData": {},

package/dist/collection/components/date-picker/resources.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-next.700
+ * v1.0.0-next.701
  */
 export const HEADING_LEVEL = 2;

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.0.0-next.700
+ * v1.0.0-next.701
  */
 import { getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "../../utils/locale";

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-next.700
+ * v1.0.0-next.701
  */
 import { Host, h } from "@stencil/core";
 import { closestElementCrossShadowBoundary, 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-next.700
+ * v1.0.0-next.701
  */
 import { Host, h } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";

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.0.0-next.700
+ * v1.0.0-next.701
  */
 import { h, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, getOrder } from "../../utils/date";

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.0.0-next.700
+ * v1.0.0-next.701
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
 export const CSS = {

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

@@ -1,10 +1,10 @@
 /*!
  * 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.701
  */
 import { h, Host } from "@stencil/core";
-import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
+import { focusElement, focusElementInGroup, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -277,37 +277,27 @@ export class Dropdown {
   }
   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);
+        focusElementInGroup(this.items, target, "next");
         break;
       case "ArrowUp":
-        this.focusPrevItem(itemToFocus);
+        focusElementInGroup(this.items, target, "previous");
         break;
       case "Home":
-        this.focusFirstItem();
+        focusElementInGroup(this.items, target, "first");
         break;
       case "End":
-        this.focusLastItem();
+        focusElementInGroup(this.items, target, "last");
         break;
     }
     event.stopPropagation();
@@ -366,27 +356,6 @@ export class Dropdown {
       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;