@esri/calcite-components 1.0.0-next.555 → 1.0.0-next.558

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.555
+ * v1.0.0-next.558
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";

package/dist/collection/components/button/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-next.555
+ * v1.0.0-next.558
  */
 export {};

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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Prop } 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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -10,6 +10,7 @@ import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
+import { isActivationKey } from "../../utils/key";
 export class Checkbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -63,7 +64,7 @@ export class Checkbox {
       }
     };
     this.keyDownHandler = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.toggle();
         event.preventDefault();
       }

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.555
+ * v1.0.0-next.558
  */
 import { Component, h, Prop, Event, Element, Method, Watch } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";

package/dist/collection/components/chip/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-next.555
+ * v1.0.0-next.558
  */
 export {};

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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -11,6 +11,7 @@ import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
 import { updateHostInteraction } from "../../utils/interactive";
+import { isActivationKey } from "../../utils/key";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
@@ -199,7 +200,7 @@ export class ColorPicker {
       this.updateChannelsFromColor(this.color);
     };
     this.handleColorFieldScopeKeyDown = (event) => {
-      const key = event.key;
+      const { key } = event;
       const arrowKeyToXYOffset = {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
@@ -214,7 +215,7 @@ export class ColorPicker {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = event.key;
+      const { key } = event;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -280,9 +281,8 @@ export class ColorPicker {
       this.updateColorFromChannels(channels);
     };
     this.handleSavedColorKeyDown = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         event.preventDefault();
-        event.stopPropagation();
         this.handleSavedColorSelect(event);
       }
     };
@@ -550,7 +550,7 @@ export class ColorPicker {
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
-    const key = event.key;
+    const { key } = event;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
       !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.channel); })) {
       return;

package/dist/collection/components/color-picker/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-next.555
+ * v1.0.0-next.558
  */
 export {};

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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -94,7 +94,7 @@ export class ColorPickerHexInput {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = event.key;
+    const { key } = event;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;

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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, h, Prop, Watch } 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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
@@ -44,7 +44,12 @@ export class Combobox {
     this.disabled = false;
     /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
     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. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * When true, makes the component required for form-submission.
@@ -126,19 +131,22 @@ export class Combobox {
           break;
         case "ArrowLeft":
           this.previousChip();
+          event.preventDefault();
           break;
         case "ArrowRight":
           this.nextChip();
+          event.preventDefault();
           break;
         case "ArrowUp":
+          event.preventDefault();
           this.shiftActiveItemIndex(-1);
           if (!this.comboboxInViewport()) {
             this.el.scrollIntoView();
           }
           break;
         case "ArrowDown":
+          event.preventDefault();
           if (!this.open) {
-            event.preventDefault();
             this.open = true;
           }
           this.shiftActiveItemIndex(1);
@@ -154,9 +162,10 @@ export class Combobox {
           }
           break;
         case "Home":
-          if (this.open) {
-            event.preventDefault();
+          if (!this.open) {
+            return;
           }
+          event.preventDefault();
           this.updateActiveItemIndex(0);
           this.scrollToActiveItem();
           if (!this.comboboxInViewport()) {
@@ -164,9 +173,10 @@ export class Combobox {
           }
           break;
         case "End":
-          if (this.open) {
-            event.preventDefault();
+          if (!this.open) {
+            return;
           }
+          event.preventDefault();
           this.updateActiveItemIndex(this.visibleItems.length - 1);
           this.scrollToActiveItem();
           if (!this.comboboxInViewport()) {
@@ -175,27 +185,35 @@ export class Combobox {
           break;
         case "Escape":
           this.open = false;
+          event.preventDefault();
           break;
         case "Enter":
           if (this.activeItemIndex > -1) {
             this.toggleSelection(this.visibleItems[this.activeItemIndex]);
+            event.preventDefault();
           }
           else if (this.activeChipIndex > -1) {
             this.removeActiveChip();
+            event.preventDefault();
           }
           else if (this.allowCustomValues && this.text) {
             this.addCustomChip(this.text, true);
+            event.preventDefault();
           }
           else if (!event.defaultPrevented) {
-            submitForm(this);
+            if (submitForm(this)) {
+              event.preventDefault();
+            }
           }
           break;
         case "Delete":
         case "Backspace":
           if (this.activeChipIndex > -1) {
+            event.preventDefault();
             this.removeActiveChip();
           }
           else if (!this.text && this.isMulti()) {
+            event.preventDefault();
             this.removeLastChip();
           }
           break;
@@ -999,7 +1017,7 @@ export class Combobox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
       "reflect": false,

package/dist/collection/components/combobox/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-next.555
+ * v1.0.0-next.558
  */
 export {};

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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } 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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, Prop, h, Element } 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.555
+ * v1.0.0-next.558
  */
 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.555
+ * v1.0.0-next.558
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";

package/dist/collection/components/date-picker/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-next.555
+ * v1.0.0-next.558
  */
 export {};

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.555
+ * v1.0.0-next.558
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

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

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

@@ -1,12 +1,13 @@
 /*!
  * 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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { updateHostInteraction } from "../../utils/interactive";
+import { isActivationKey } from "../../utils/key";
 export class DatePickerDay {
   constructor() {
     /** Date is outside of range and can't be selected */
@@ -36,9 +37,9 @@ export class DatePickerDay {
       !this.disabled && this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (event) => {
-      const key = event.key;
-      if (key === " " || key === "Enter") {
+      if (isActivationKey(event.key)) {
         !this.disabled && this.calciteDaySelect.emit();
+        event.preventDefault();
       }
     };
   }

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.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
@@ -15,6 +15,9 @@ export class DatePickerMonth {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
       const isRTL = this.el.dir === "rtl";
       switch (event.key) {
         case "ArrowUp":

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

@@ -1,12 +1,13 @@
 /*!
  * 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.555
+ * v1.0.0-next.558
  */
 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";
+import { isActivationKey } from "../../utils/key";
 export class DatePickerMonthHeader {
   constructor() {
     //--------------------------------------------------------------------------
@@ -47,8 +48,7 @@ export class DatePickerMonthHeader {
       this.handleArrowClick(event, this.prevMonthDate);
     };
     this.prevMonthKeydown = (event) => {
-      const key = event.key;
-      if (key === " " || key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.prevMonthClick(event);
       }
     };
@@ -56,8 +56,7 @@ export class DatePickerMonthHeader {
       this.handleArrowClick(event, this.nextMonthDate);
     };
     this.nextMonthKeydown = (event) => {
-      const key = event.key;
-      if (key === " " || key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.nextMonthClick(event);
       }
     };
@@ -65,8 +64,7 @@ export class DatePickerMonthHeader {
      * Update active month on clicks of left/right arrows
      */
     this.handleArrowClick = (event, date) => {
-      event === null || event === void 0 ? void 0 : event.preventDefault();
-      event.stopPropagation();
+      event.preventDefault();
       this.calciteDatePickerSelect.emit(date);
     };
   }

package/dist/collection/components/date-picker-month-header/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.555
+ * v1.0.0-next.558
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -11,6 +11,7 @@ import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { guid } from "../../utils/guid";
+import { isActivationKey } from "../../utils/key";
 /**
  * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
@@ -42,7 +43,12 @@ export class Dropdown {
      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. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the dropdown will be positioned relative to the button.
@@ -153,19 +159,29 @@ export class Dropdown {
       if (target !== this.referenceEl) {
         return;
       }
-      const key = event.key;
-      if (this.open && (key === "Escape" || (event.shiftKey && key === "Tab"))) {
-        this.closeCalciteDropdown();
+      const { defaultPrevented, key } = event;
+      if (defaultPrevented) {
         return;
       }
-      switch (key) {
-        case " ":
-        case "Enter":
-          this.openCalciteDropdown();
-          break;
-        case "Escape":
+      if (this.open) {
+        if (key === "Escape") {
           this.closeCalciteDropdown();
-          break;
+          event.preventDefault();
+          return;
+        }
+        else if (event.shiftKey && key === "Tab") {
+          this.closeCalciteDropdown();
+          event.preventDefault();
+          return;
+        }
+      }
+      if (isActivationKey(key)) {
+        this.openCalciteDropdown();
+        event.preventDefault();
+      }
+      else if (key === "Escape") {
+        this.closeCalciteDropdown();
+        event.preventDefault();
       }
     };
     this.focusOnFirstActiveOrFirstItem = () => {
@@ -559,7 +575,7 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
       "reflect": false,