@esri/calcite-components 1.0.0-next.556 → 1.0.0-next.559

package/dist/custom-elements/index.js

@@ -1,11 +1,64 @@
 /*!
  * 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.556
+ * v1.0.0-next.559
  */
 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';
 
+const autoTheme = "calcite-theme-auto";
+const darkTheme = "calcite-theme-dark";
+const lightTheme = "calcite-theme-light";
+const CSS_UTILITY = {
+  autoTheme,
+  darkTheme,
+  lightTheme,
+  rtl: "calcite--rtl"
+};
+const TEXT$u = {
+  loading: "Loading"
+};
+
+/**
+ * Emits when the theme is dynamically toggled between light and dark on <body> or in OS preferences.
+ */
+function initThemeChangeEvent() {
+  const { classList } = document.body;
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const getTheme = () => classList.contains(darkTheme) || (classList.contains(autoTheme) && prefersDark) ? "dark" : "light";
+  const emitThemeChange = (theme) => document.body.dispatchEvent(new CustomEvent("calciteThemeChange", { bubbles: true, detail: { theme } }));
+  const themeChangeHandler = (newTheme) => {
+    currentTheme !== newTheme && emitThemeChange(newTheme);
+    currentTheme = newTheme;
+  };
+  let currentTheme = getTheme();
+  // emits event on page load
+  emitThemeChange(currentTheme);
+  // emits event when changing OS theme preferences
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (event) => themeChangeHandler(event.matches ? "dark" : "light"));
+  // emits event when toggling between theme classes on <body>
+  new MutationObserver(() => themeChangeHandler(getTheme())).observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+}
+
+/**
+ * This file is imported in Stencil's `globalScript` config option.
+ *
+ * @see {@link https://stenciljs.com/docs/config#globalscript}
+ */
+function appGlobalScript () {
+  if (isBrowser()) {
+    initThemeChangeEvent();
+  }
+}
+const isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
+
+const globalScripts = appGlobalScript;
+
 const accordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 
 const Accordion = class extends HTMLElement$1 {
@@ -153,19 +206,6 @@ const Accordion = class extends HTMLElement$1 {
   static get style() { return accordionCss; }
 };
 
-const autoTheme = "calcite-theme-auto";
-const darkTheme = "calcite-theme-dark";
-const lightTheme = "calcite-theme-light";
-const CSS_UTILITY = {
-  autoTheme,
-  darkTheme,
-  lightTheme,
-  rtl: "calcite--rtl"
-};
-const TEXT$u = {
-  loading: "Loading"
-};
-
 function gen(counts) {
   return counts
     .map((count) => {
@@ -2434,7 +2474,12 @@ const ActionMenu = class extends HTMLElement$1 {
      * When true, the component is open.
      */
     this.open = false;
-    /** Determines 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 component will be positioned relative to the `referenceElement`.
@@ -2582,6 +2627,7 @@ const ActionMenu = class extends HTMLElement$1 {
       }
       if (key === "Escape") {
         this.toggleOpen(false);
+        event.preventDefault();
         return;
       }
       if (!actionElements.length) {
@@ -3808,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.
@@ -6999,7 +7047,6 @@ const ColorPicker = class extends HTMLElement$1 {
     this.handleSavedColorKeyDown = (event) => {
       if (isActivationKey(event.key)) {
         event.preventDefault();
-        event.stopPropagation();
         this.handleSavedColorSelect(event);
       }
     };
@@ -8864,11 +8911,59 @@ function getParentNode(node) {
 }
 
 function getTrueOffsetParent(element) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
 
-  return element.offsetParent;
+  return composedOffsetParent(element);
+}
+/**
+ * Polyfills the old offsetParent behavior from before the spec was changed:
+ * https://github.com/w3c/csswg-drafts/issues/159
+ */
+
+
+function composedOffsetParent(element) {
+  let {
+    offsetParent
+  } = element;
+  let ancestor = element;
+  let foundInsideSlot = false;
+
+  while (ancestor && ancestor !== offsetParent) {
+    const {
+      assignedSlot
+    } = ancestor;
+
+    if (assignedSlot) {
+      let newOffsetParent = assignedSlot.offsetParent;
+
+      if (getComputedStyle$1(assignedSlot).display === 'contents') {
+        const hadStyleAttribute = assignedSlot.hasAttribute('style');
+        const oldDisplay = assignedSlot.style.display;
+        assignedSlot.style.display = getComputedStyle$1(ancestor).display;
+        newOffsetParent = assignedSlot.offsetParent;
+        assignedSlot.style.display = oldDisplay;
+
+        if (!hadStyleAttribute) {
+          assignedSlot.removeAttribute('style');
+        }
+      }
+
+      ancestor = assignedSlot;
+
+      if (offsetParent !== newOffsetParent) {
+        offsetParent = newOffsetParent;
+        foundInsideSlot = true;
+      }
+    } else if (isShadowRoot(ancestor) && ancestor.host && foundInsideSlot) {
+      break;
+    }
+
+    ancestor = isShadowRoot(ancestor) && ancestor.host || ancestor.parentNode;
+  }
+
+  return offsetParent;
 }
 
 function getContainingBlock(element) {
@@ -8882,7 +8977,8 @@ function getContainingBlock(element) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
     } else {
-      currentNode = currentNode.parentNode;
+      const parent = currentNode.parentNode;
+      currentNode = isShadowRoot(parent) ? parent.host : parent;
     }
   }
 
@@ -8895,11 +8991,11 @@ function getOffsetParent(element) {
   const window = getWindow(element);
   let offsetParent = getTrueOffsetParent(element);
 
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent);
   }
 
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
     return window;
   }
 
@@ -9501,7 +9597,12 @@ const Combobox = class extends HTMLElement$1 {
     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.
@@ -9583,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);
@@ -9611,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()) {
@@ -9621,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()) {
@@ -9632,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;
@@ -11396,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();
       }
     };
   }
@@ -11447,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":
@@ -11778,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);
       }
     };
@@ -11787,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);
       }
     };
@@ -11796,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);
     };
   }
@@ -11932,7 +12046,12 @@ const Dropdown = class extends HTMLElement$1 {
      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.
@@ -12043,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 = () => {
@@ -12694,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();
@@ -13129,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;
@@ -13410,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();
@@ -13697,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) => {
@@ -14241,7 +14378,12 @@ const InputDatePicker = class extends HTMLElement$1 {
      * @internal
      */
     this.required = false;
-    /** 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";
     /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
     this.proximitySelectionDisabled = false;
@@ -14273,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) => {
@@ -14872,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) => {
@@ -15361,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) => {
@@ -15830,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) => {
@@ -16720,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();
     }
   }
   //--------------------------------------------------------------------------
@@ -17452,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 = () => {
@@ -18392,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);
@@ -18488,7 +18647,12 @@ const Popover = class extends HTMLElement$1 {
      * When true, displays and positions the component.
      */
     this.open = false;
-    /** Describes the positioning type to use for the overlaid content. If the 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 component will be positioned relative to the `referenceElement`.
@@ -18912,6 +19076,7 @@ const RadioButton = class extends HTMLElement$1 {
       }
       if (key === " ") {
         this.check();
+        event.preventDefault();
         return;
       }
       let adjustedKey = key;
@@ -19540,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 })));
     });
   }
@@ -19596,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;
   }
@@ -19649,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();
@@ -19864,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;
   }
@@ -19945,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";
   }
@@ -20018,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;
@@ -20242,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.
@@ -20260,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()}`;
@@ -24187,30 +24351,34 @@ 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;
-    /** Describes the type of positioning to use for the dropdown. 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";
-    /** 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);
@@ -24274,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";
     //--------------------------------------------------------------------------
     //
@@ -24382,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") {
@@ -24390,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") {
@@ -24399,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
    */
@@ -24409,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") {
@@ -24417,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") {
@@ -24495,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";
     //--------------------------------------------------------------------------
@@ -24657,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;
     //--------------------------------------------------------------------------
     //
@@ -24675,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();
       }
@@ -26239,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;
         }
@@ -26265,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;
         }
@@ -26278,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;
         }
@@ -26896,7 +27074,12 @@ const Tooltip = class extends HTMLElement$1 {
      * When true, the component is open.
      */
     this.open = false;
-    /** Describes the positioning type to use for the overlaid content. If the `referenceElement` 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 component will be positioned relative to the `referenceElement`.
@@ -27659,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));
@@ -27958,6 +28144,7 @@ const ValueListItem = class extends HTMLElement$1 {
   static get style() { return valueListItemCss; }
 };
 
+globalScripts();
 const CalciteAccordion = /*@__PURE__*/proxyCustomElement(Accordion, [1,"calcite-accordion",{"appearance":[513],"iconPosition":[513,"icon-position"],"iconType":[513,"icon-type"],"scale":[513],"selectionMode":[513,"selection-mode"]},[[0,"calciteInternalAccordionItemKeyEvent","calciteInternalAccordionItemKeyEvent"],[0,"calciteInternalAccordionItemRegister","registerCalciteAccordionItem"],[0,"calciteInternalAccordionItemSelect","updateActiveItemOnChange"]]]);
 const CalciteAccordionItem = /*@__PURE__*/proxyCustomElement(AccordionItem, [1,"calcite-accordion-item",{"active":[1540],"expanded":[1540],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"heading":[1],"description":[1],"icon":[513]},[[0,"keydown","keyDownHandler"],[16,"calciteInternalAccordionChange","updateActiveItemOnChange"]]]);
 const CalciteAction = /*@__PURE__*/proxyCustomElement(Action, [1,"calcite-action",{"active":[516],"alignment":[513],"appearance":[513],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"intlLoading":[1,"intl-loading"],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);