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

package/dist/custom-elements/index.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.557
+ * v1.0.0-next.558
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Build, forceUpdate, Host, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -2627,6 +2627,7 @@ const ActionMenu = class extends HTMLElement$1 {
       }
       if (key === "Escape") {
         this.toggleOpen(false);
+        event.preventDefault();
         return;
       }
       if (!actionElements.length) {
@@ -3853,13 +3854,15 @@ function hasRegisteredFormComponentParent(form, formComponentEl) {
  * Helper to submit a form.
  *
  * @param component
+ * @returns true if its associated form was submitted, false otherwise.
  */
 function submitForm(component) {
   const { formEl } = component;
   if (!formEl) {
-    return;
+    return false;
   }
   "requestSubmit" in formEl ? formEl.requestSubmit() : formEl.submit();
+  return true;
 }
 /**
  * Helper to reset a form.
@@ -7044,7 +7047,6 @@ const ColorPicker = class extends HTMLElement$1 {
     this.handleSavedColorKeyDown = (event) => {
       if (isActivationKey(event.key)) {
         event.preventDefault();
-        event.stopPropagation();
         this.handleSavedColorSelect(event);
       }
     };
@@ -9682,19 +9684,22 @@ const Combobox = class extends HTMLElement$1 {
           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);
@@ -9710,9 +9715,10 @@ const Combobox = class extends HTMLElement$1 {
           }
           break;
         case "Home":
-          if (this.open) {
-            event.preventDefault();
+          if (!this.open) {
+            return;
           }
+          event.preventDefault();
           this.updateActiveItemIndex(0);
           this.scrollToActiveItem();
           if (!this.comboboxInViewport()) {
@@ -9720,9 +9726,10 @@ const Combobox = class extends HTMLElement$1 {
           }
           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()) {
@@ -9731,27 +9738,35 @@ const Combobox = class extends HTMLElement$1 {
           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;
@@ -11495,9 +11510,9 @@ const DatePickerDay = class extends HTMLElement$1 {
       !this.disabled && this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (event) => {
-      const { key } = event;
-      if (isActivationKey(key)) {
+      if (isActivationKey(event.key)) {
         !this.disabled && this.calciteDaySelect.emit();
+        event.preventDefault();
       }
     };
   }
@@ -11546,6 +11561,9 @@ const DatePickerMonth = class extends HTMLElement$1 {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
       const isRTL = this.el.dir === "rtl";
       switch (event.key) {
         case "ArrowUp":
@@ -11877,8 +11895,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
       this.handleArrowClick(event, this.prevMonthDate);
     };
     this.prevMonthKeydown = (event) => {
-      const { key } = event;
-      if (isActivationKey(key)) {
+      if (isActivationKey(event.key)) {
         this.prevMonthClick(event);
       }
     };
@@ -11886,8 +11903,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
       this.handleArrowClick(event, this.nextMonthDate);
     };
     this.nextMonthKeydown = (event) => {
-      const { key } = event;
-      if (isActivationKey(key)) {
+      if (isActivationKey(event.key)) {
         this.nextMonthClick(event);
       }
     };
@@ -11895,8 +11911,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
      * 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);
     };
   }
@@ -12147,19 +12162,29 @@ const Dropdown = class extends HTMLElement$1 {
       if (target !== this.referenceEl) {
         return;
       }
-      const { key } = event;
-      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 = () => {
@@ -12798,6 +12823,7 @@ const Filter = class extends HTMLElement$1 {
     this.keyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.clear();
+        event.preventDefault();
       }
       if (event.key === "Enter") {
         event.preventDefault();
@@ -13233,12 +13259,14 @@ const Handle = class extends HTMLElement$1 {
       switch (event.key) {
         case " ":
           this.activated = !this.activated;
+          event.preventDefault();
           break;
         case "ArrowUp":
         case "ArrowDown":
           if (!this.activated) {
             return;
           }
+          event.preventDefault();
           const direction = event.key.toLowerCase().replace("arrow", "");
           this.calciteHandleNudge.emit({ handle: this.el, direction });
           break;
@@ -13514,20 +13542,23 @@ const InlineEditable = class extends HTMLElement$1 {
     };
     this.escapeKeyHandler = async (event) => {
       var _a;
-      if (event.key !== "Escape") {
-        if (event.key === "Tab" && this.shouldShowControls) {
-          if (!event.shiftKey && event.target === this.inputElement) {
-            event.preventDefault();
-            this.cancelEditingButton.setFocus();
-          }
-          if (!!event.shiftKey && event.target === this.cancelEditingButton) {
-            event.preventDefault();
-            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
-          }
-        }
+      if (event.defaultPrevented) {
         return;
       }
-      this.cancelEditing();
+      if (event.key === "Escape") {
+        event.preventDefault();
+        this.cancelEditing();
+      }
+      if (event.key === "Tab" && this.shouldShowControls) {
+        if (!event.shiftKey && event.target === this.inputElement) {
+          event.preventDefault();
+          this.cancelEditingButton.setFocus();
+        }
+        if (!!event.shiftKey && event.target === this.cancelEditingButton) {
+          event.preventDefault();
+          (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
+        }
+      }
     };
     this.cancelEditingHandler = async (event) => {
       event.preventDefault();
@@ -13801,7 +13832,9 @@ const Input = class extends HTMLElement$1 {
         event.preventDefault();
       }
       if (event.key === "Enter" && !event.defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
     };
     this.clearInputValue = (nativeEvent) => {
@@ -14382,13 +14415,17 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.deactivate = () => {
       this.open = false;
     };
-    this.keyDownHandler = ({ defaultPrevented, key }) => {
+    this.keyDownHandler = (event) => {
+      const { defaultPrevented, key } = event;
       if (key === "Enter" && !defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
-      else if (key === "Escape") {
+      else if (key === "Escape" && !defaultPrevented) {
         this.active = false;
         this.open = false;
+        event.preventDefault();
       }
     };
     this.inputBlur = (event) => {
@@ -14981,7 +15018,9 @@ const InputNumber = class extends HTMLElement$1 {
         event.preventDefault();
       }
       if (event.key === "Enter" && !event.defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
     };
     this.clearInputValue = (nativeEvent) => {
@@ -15470,7 +15509,9 @@ const InputText = class extends HTMLElement$1 {
         event.preventDefault();
       }
       if (event.key === "Enter" && !event.defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
     };
     this.clearInputTextValue = (nativeEvent) => {
@@ -15939,12 +15980,19 @@ const InputTimePicker = class extends HTMLElement$1 {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.keyDownHandler = ({ defaultPrevented, key }) => {
-      if (key === "Enter" && !defaultPrevented) {
-        submitForm(this);
+    this.keyDownHandler = (event) => {
+      const { defaultPrevented, key } = event;
+      if (defaultPrevented) {
+        return;
+      }
+      if (key === "Enter") {
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
       if (key === "Escape" && this.active) {
         this.active = false;
+        event.preventDefault();
       }
     };
     this.setCalcitePopoverEl = (el) => {
@@ -16829,8 +16877,9 @@ const Modal = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   handleEscape(event) {
-    if (this.open && !this.disableEscape && event.key === "Escape") {
+    if (this.open && !this.disableEscape && event.key === "Escape" && !event.defaultPrevented) {
       this.close();
+      event.preventDefault();
     }
   }
   //--------------------------------------------------------------------------
@@ -17561,8 +17610,9 @@ const Panel = class extends HTMLElement$1 {
       this.backButtonEl = node;
     };
     this.panelKeyDownHandler = (event) => {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && !event.defaultPrevented) {
         this.close();
+        event.preventDefault();
       }
     };
     this.close = () => {
@@ -18501,7 +18551,7 @@ class PopoverManager$1 {
         .forEach((popover) => popover.toggle(false));
     };
     this.keyHandler = (event) => {
-      if (!isActivationKey(event.key)) {
+      if (event.defaultPrevented || !isActivationKey(event.key)) {
         return;
       }
       this.togglePopovers(event);
@@ -19026,6 +19076,7 @@ const RadioButton = class extends HTMLElement$1 {
       }
       if (key === " ") {
         this.check();
+        event.preventDefault();
         return;
       }
       let adjustedKey = key;
@@ -19654,7 +19705,7 @@ const Rating = class extends HTMLElement$1 {
       return (h("span", { class: { wrapper: true } }, h("label", { class: { star: true, focused, selected, average, hovered, partial }, htmlFor: `${this.guid}-${i}`, onMouseOver: () => {
           this.hoverValue = i;
         } }, h("calcite-icon", { "aria-hidden": "true", class: "icon", icon: selected || average || this.readOnly ? "star-f" : "star", scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h("calcite-icon", { icon: "star-f", scale: this.scale }))), h("span", { class: "visually-hidden" }, this.intlStars.replace("${num}", `${i}`))), h("input", { checked: i === this.value, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: `${this.guid}-${i}`, name: this.guid, onChange: () => this.updateValue(i), onClick: (event) => 
-        // click is fired from the the component's label, so we treat this as an internal event
+        // click is fired from the component's label, so we treat this as an internal event
         event.stopPropagation(), onFocus: () => this.onFocusChange(i), onKeyDown: this.onKeyboardPressed, ref: (el) => (i === 1 || i === this.value) && (this.inputFocusRef = el), type: "radio", value: i })));
     });
   }
@@ -19710,14 +19761,13 @@ const Scrim = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * string to override English loading text
+     * Accessible name when the component is loading.
      *
      * @default "Loading"
      */
     this.intlLoading = TEXT$4.loading;
     /**
-     * Determines if the component will have the loader overlay.
-     * Otherwise, will render opaque disabled state.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
   }
@@ -19763,23 +19813,23 @@ const Select = class extends HTMLElement$1 {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, it prevents the option from being selected.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, makes the component required for form-submission.
+     * When true, the component must have a value on form submission.
      *
      * @internal
      */
     this.required = false;
     /**
-     * The component scale.
+     * Specifies the size of the component.
      */
     this.scale = "m";
-    /** The value of the selectedOption */
+    /** The component's "selectedOption" value. */
     this.value = null;
     /**
-     * The component width.
+     * Specifies the width of the component.
      */
     this.width = "auto";
     this.componentToNativeEl = new Map();
@@ -19978,7 +20028,7 @@ const Shell = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * Positions the center content behind any calcite-shell-panels.
+     * Positions the center content behind any `calcite-shell-panel`s.
      */
     this.contentBehind = false;
   }
@@ -20059,15 +20109,15 @@ const ShellCenterRow = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * This property makes the content area appear like a "floating" panel.
+     * When true, the content area displays like a floating panel.
      */
     this.detached = false;
     /**
-     * Specifies the maximum height of the row.
+     * Specifies the maximum height of the component.
      */
     this.heightScale = "s";
     /**
-     * Arranges the component depending on the elements 'dir' property.
+     * Specifies the component's position. Will be flipped when the element direction is right-to-left ("rtl").
      */
     this.position = "end";
   }
@@ -20132,29 +20182,29 @@ const ShellPanel = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * Hide the content panel.
+     * When true, hides the component's content area.
      */
     this.collapsed = false;
     /**
-     * This property makes the content area appear like a "floating" panel.
+     * When true, the content area displays like a floating panel.
      */
     this.detached = false;
     /**
-     * Specifies the maximum height of the contents when detached.
+     * When "detached", specifies the maximum height of the component.
      */
     this.detachedHeightScale = "l";
     /**
-     * This sets width of the content area.
+     * Specifies the width of the component's content area.
      */
     this.widthScale = "m";
     /**
-     * Accessible label for resize separator.
+     * Accessible name for the resize separator.
      *
      * @default "Resize"
      */
     this.intlResize = TEXT$3.resize;
     /**
-     * This property makes the content area resizable if the calcite-shell-panel is not 'detached'.
+     * When true and not "detached", the component's content area is resizable.
      */
     this.resizable = false;
     this.contentWidth = null;
@@ -20356,17 +20406,17 @@ const Slider = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Disable and gray out the slider */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** Indicates if a histogram is present */
+    /** When true, indicates a histogram is present. */
     this.hasHistogram = false;
-    /** Label handles with their numeric value */
+    /** When true, displays label handles with their numeric value. */
     this.labelHandles = false;
-    /** Label tick marks with their numeric value. */
+    /** When true and "ticks" is specified, displays label tick marks with their numeric value. */
     this.labelTicks = false;
-    /** Maximum selectable value */
+    /** The component's maximum selectable value. */
     this.max = 100;
-    /** Minimum selectable value */
+    /** The component's minimum selectable value. */
     this.min = 0;
     /**
      * When true, the slider will display values from high to low.
@@ -20374,20 +20424,20 @@ const Slider = class extends HTMLElement$1 {
      * Note that this value will be ignored if the slider has an associated histogram.
      */
     this.mirrored = false;
-    /** Use finer point for handles */
+    /** When true, sets a finer point for handles. */
     this.precise = false;
     /**
-     * When true, makes the component required for form-submission.
+     * When true, the component must have a value on form submission.
      */
     this.required = false;
-    /** When true, enables snap selection along the step interval */
+    /** When true, enables snap selection in coordination with "step" via a mouse. */
     this.snap = false;
-    /** Interval to move on up/down keys */
+    /** Specifies the interval to move with the up, or down keys. */
     this.step = 1;
-    /** Currently selected number (if single select) */
+    /** The component's value. */
     this.value = 0;
     /**
-     * Specify the scale of the slider, defaults to m
+     *  Specifies the size of the component.
      */
     this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
@@ -24301,23 +24351,22 @@ const SplitButton = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 6);
     this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 6);
-    /** specify the appearance style of the button, defaults to solid. */
+    /** Specifies the appearance style of the component. */
     this.appearance = "solid";
-    /** specify the color of the control, defaults to blue */
+    /** Specifies the color of the component. */
     this.color = "blue";
-    /** is the control disabled  */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * Is the dropdown currently active or not
+     * When true, the component is active.
      *
      * @internal
      */
     this.active = false;
-    /** specify the icon used for the dropdown menu, defaults to chevron */
+    /** Specifies the icon used for the dropdown menu. */
     this.dropdownIconType = "chevron";
     /**
-      optionally add a calcite-loader component to the control,
-     disabling interaction. with the primary button
+      When true, a busy indicator is displayed on the primary button.
      */
     this.loading = false;
     /**
@@ -24327,9 +24376,9 @@ const SplitButton = class extends HTMLElement$1 {
      *
      */
     this.overlayPositioning = "absolute";
-    /** specify the scale of the control, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** specify the width of the button, defaults to auto */
+    /** Specifies the width of the component. */
     this.width = "auto";
     this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
     this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
@@ -24393,13 +24442,13 @@ const Stepper = class extends HTMLElement$1 {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** optionally display a status icon next to the step title */
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
     this.icon = false;
-    /** specify the layout of stepper, defaults to horizontal */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** optionally display the number next to the step title */
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
     this.numbered = false;
-    /** specify the scale of stepper, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -24501,7 +24550,7 @@ const Stepper = class extends HTMLElement$1 {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** set the next step as active */
+  /** Set the next `calcite-stepper-item` as active. */
   async nextStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
     if (typeof enabledStepIndex !== "number") {
@@ -24509,7 +24558,7 @@ const Stepper = class extends HTMLElement$1 {
     }
     this.updateStep(enabledStepIndex);
   }
-  /** set the previous step as active */
+  /** Set the previous `calcite-stepper-item` as active. */
   async prevStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
@@ -24518,7 +24567,7 @@ const Stepper = class extends HTMLElement$1 {
     this.updateStep(enabledStepIndex);
   }
   /**
-   * set the requested step as active
+   * Set a specified `calcite-stepper-item` as active.
    *
    * @param step
    */
@@ -24528,7 +24577,7 @@ const Stepper = class extends HTMLElement$1 {
       this.updateStep(position);
     }
   }
-  /** set the first step as active */
+  /** Set the first `calcite-stepper-item` as active. */
   async startStep() {
     const enabledStepIndex = this.getEnabledStepIndex(0, "next");
     if (typeof enabledStepIndex !== "number") {
@@ -24536,7 +24585,7 @@ const Stepper = class extends HTMLElement$1 {
     }
     this.updateStep(enabledStepIndex);
   }
-  /** set the last step as active */
+  /** Set the last `calcite-stepper-item` as active. */
   async endStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
@@ -24614,25 +24663,25 @@ const StepperItem = class extends HTMLElement$1 {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** is the step active */
+    /** When true, the component is active. */
     this.active = false;
-    /** has the step been completed */
+    /** When true, the component's workflow has been completed. */
     this.complete = false;
-    /** does the step contain an error that needs to be resolved by the user */
+    /** When true, the component contains an error that requires resolution from the user. */
     this.error = false;
-    /** is the step disabled and not navigable to by a user */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     // internal props inherited from wrapping calcite-stepper
-    /** pass a title for the stepper item */
+    /** Defines the layout of the component. */
     /** @internal */
     this.layout = "horizontal";
-    /** should the items display an icon based on status */
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
     /** @internal */
     this.icon = false;
-    /** optionally display the step number next to the title and subtitle */
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
     /** @internal */
     this.numbered = false;
-    /** the scale of the item */
+    /** Specifies the size of the component. */
     /** @internal */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -24776,17 +24825,17 @@ const Switch = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** True if the switch is disabled */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** The scale of the switch */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * True if the switch is initially on
+     * When true, the component is checked.
      *
-     * @deprecated use 'checked' instead.
+     * @deprecated use "checked" instead.
      */
     this.switched = false;
-    /** True if the switch is initially on */
+    /** When true, the component is checked. */
     this.checked = false;
     //--------------------------------------------------------------------------
     //
@@ -24794,8 +24843,7 @@ const Switch = class extends HTMLElement$1 {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
-      const { key } = event;
-      if (!this.disabled && isActivationKey(key)) {
+      if (!this.disabled && isActivationKey(event.key)) {
         this.toggle();
         event.preventDefault();
       }
@@ -26358,24 +26406,31 @@ const TimePicker = class extends HTMLElement$1 {
     this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const { key } = event;
+    const { defaultPrevented, key } = event;
+    if (defaultPrevented) {
+      return;
+    }
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
           this.setFocus("minute");
+          event.preventDefault();
         }
         break;
       case this.minuteEl:
         switch (key) {
           case "ArrowLeft":
             this.setFocus("hour");
+            event.preventDefault();
             break;
           case "ArrowRight":
             if (this.step !== 60) {
               this.setFocus("second");
+              event.preventDefault();
             }
             else if (this.hourCycle === "12") {
               this.setFocus("meridiem");
+              event.preventDefault();
             }
             break;
         }
@@ -26384,10 +26439,12 @@ const TimePicker = class extends HTMLElement$1 {
         switch (key) {
           case "ArrowLeft":
             this.setFocus("minute");
+            event.preventDefault();
             break;
           case "ArrowRight":
             if (this.hourCycle === "12") {
               this.setFocus("meridiem");
+              event.preventDefault();
             }
             break;
         }
@@ -26397,9 +26454,11 @@ const TimePicker = class extends HTMLElement$1 {
           case "ArrowLeft":
             if (this.step !== 60) {
               this.setFocus("second");
+              event.preventDefault();
             }
             else {
               this.setFocus("minute");
+              event.preventDefault();
             }
             break;
         }
@@ -27783,6 +27842,9 @@ const ValueList = class extends HTMLElement$1 {
     this.handleFilter = handleFilter.bind(this);
     this.getItemData = getItemData.bind(this);
     this.keyDownHandler = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
       const { handle, item } = getHandleAndItemElement(event);
       if (handle && !item.handleActivated && event.key === " ") {
         this.updateScreenReaderText(getScreenReaderText(item, "commit", this));