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

package/hydrate/index.js

@@ -1,14 +1,14 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v2.16.1 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -695,25 +695,6 @@ class MockMouseEvent extends MockEvent {
     }
   }
 }
-class MockUIEvent extends MockEvent {
-  constructor(type, uiEventInitDic) {
-    super(type);
-    this.detail = null;
-    this.view = null;
-    if (uiEventInitDic != null) {
-      Object.assign(this, uiEventInitDic);
-    }
-  }
-}
-class MockFocusEvent extends MockUIEvent {
-  constructor(type, focusEventInitDic) {
-    super(type);
-    this.relatedTarget = null;
-    if (focusEventInitDic != null) {
-      Object.assign(this, focusEventInitDic);
-    }
-  }
-}
 class MockEventListener {
   constructor(type, handler) {
     this.type = type;
@@ -1626,9 +1607,6 @@ class MockElement extends MockNode {
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }
-  blur() {
-    dispatchEvent(this, new MockFocusEvent('blur', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }));
-  }
   get shadowRoot() {
     return this.__shadowRoot || null;
   }
@@ -1697,9 +1675,6 @@ class MockElement extends MockNode {
   get firstElementChild() {
     return this.children[0] || null;
   }
-  focus(_options) {
-    dispatchEvent(this, new MockFocusEvent('focus', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }));
-  }
   getAttribute(attrName) {
     if (attrName === 'style') {
       if (this.__style != null && this.__style.length > 0) {
@@ -2044,9 +2019,6 @@ class MockElement extends MockNode {
   set title(value) {
     this.setAttributeNS(null, 'title', value);
   }
-  animate() {
-    /**/
-  }
   onanimationstart() {
     /**/
   }
@@ -2311,18 +2283,6 @@ class MockElement extends MockNode {
   onwheel() {
     /**/
   }
-  requestFullscreen() {
-    /**/
-  }
-  scrollBy() {
-    /**/
-  }
-  scrollTo() {
-    /**/
-  }
-  scrollIntoView() {
-    /**/
-  }
   toString(opts) {
     return serializeNodeToHtml(this, opts);
   }
@@ -2618,28 +2578,7 @@ function createElementNS(ownerDocument, namespaceURI, tagName) {
     return createElement(ownerDocument, tagName);
   }
   else if (namespaceURI === 'http://www.w3.org/2000/svg') {
-    switch (tagName.toLowerCase()) {
-      case 'text':
-      case 'tspan':
-      case 'tref':
-      case 'altglyph':
-      case 'textpath':
-        return new MockSVGTextContentElement(ownerDocument, tagName);
-      case 'circle':
-      case 'ellipse':
-      case 'image':
-      case 'line':
-      case 'path':
-      case 'polygon':
-      case 'polyline':
-      case 'rect':
-      case 'use':
-        return new MockSVGGraphicsElement(ownerDocument, tagName);
-      case 'svg':
-        return new MockSVGSVGElement(ownerDocument, tagName);
-      default:
-        return new MockSVGElement(ownerDocument, tagName);
-    }
+    return new MockSVGElement(ownerDocument, tagName);
   }
   else {
     return new MockElement(ownerDocument, tagName);
@@ -2786,98 +2725,6 @@ class MockScriptElement extends MockHTMLElement {
 patchPropAttributes(MockScriptElement.prototype, {
   type: String,
 });
-class MockDOMMatrix {
-  constructor() {
-    this.a = 1;
-    this.b = 0;
-    this.c = 0;
-    this.d = 1;
-    this.e = 0;
-    this.f = 0;
-    this.m11 = 1;
-    this.m12 = 0;
-    this.m13 = 0;
-    this.m14 = 0;
-    this.m21 = 0;
-    this.m22 = 1;
-    this.m23 = 0;
-    this.m24 = 0;
-    this.m31 = 0;
-    this.m32 = 0;
-    this.m33 = 1;
-    this.m34 = 0;
-    this.m41 = 0;
-    this.m42 = 0;
-    this.m43 = 0;
-    this.m44 = 1;
-    this.is2D = true;
-    this.isIdentity = true;
-  }
-  static fromMatrix() {
-    return new MockDOMMatrix();
-  }
-  inverse() {
-    return new MockDOMMatrix();
-  }
-  flipX() {
-    return new MockDOMMatrix();
-  }
-  flipY() {
-    return new MockDOMMatrix();
-  }
-  multiply() {
-    return new MockDOMMatrix();
-  }
-  rotate() {
-    return new MockDOMMatrix();
-  }
-  rotateAxisAngle() {
-    return new MockDOMMatrix();
-  }
-  rotateFromVector() {
-    return new MockDOMMatrix();
-  }
-  scale() {
-    return new MockDOMMatrix();
-  }
-  scaleNonUniform() {
-    return new MockDOMMatrix();
-  }
-  skewX() {
-    return new MockDOMMatrix();
-  }
-  skewY() {
-    return new MockDOMMatrix();
-  }
-  toJSON() { }
-  toString() { }
-  transformPoint() {
-    return new MockDOMPoint();
-  }
-  translate() {
-    return new MockDOMMatrix();
-  }
-}
-class MockDOMPoint {
-  constructor() {
-    this.w = 1;
-    this.x = 0;
-    this.y = 0;
-    this.z = 0;
-  }
-  toJSON() { }
-  matrixTransform() {
-    return new MockDOMMatrix();
-  }
-}
-class MockSVGRect {
-  constructor() {
-    this.height = 10;
-    this.width = 10;
-    this.x = 0;
-    this.y = 0;
-  }
-}
 class MockStyleElement extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, 'style');
@@ -2910,6 +2757,9 @@ class MockSVGElement extends MockElement {
   get viewportElement() {
     return null;
   }
+  focus() {
+    /**/
+  }
   onunload() {
     /**/
   }
@@ -2927,27 +2777,6 @@ class MockSVGElement extends MockElement {
     return 0;
   }
 }
-class MockSVGGraphicsElement extends MockSVGElement {
-  getBBox(_options) {
-    return new MockSVGRect();
-  }
-  getCTM() {
-    return new MockDOMMatrix();
-  }
-  getScreenCTM() {
-    return new MockDOMMatrix();
-  }
-}
-class MockSVGSVGElement extends MockSVGGraphicsElement {
-  createSVGPoint() {
-    return new MockDOMPoint();
-  }
-}
-class MockSVGTextContentElement extends MockSVGGraphicsElement {
-  getComputedTextLength() {
-    return 0;
-  }
-}
 class MockBaseElement extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, 'base');
@@ -3473,7 +3302,6 @@ const WINDOW_PROPS = [
   'HTMLElement',
   'Node',
   'NodeList',
-  'FocusEvent',
   'KeyboardEvent',
   'MouseEvent',
 ];
@@ -3481,7 +3309,6 @@ const GLOBAL_CONSTRUCTORS = [
   ['CustomEvent', MockCustomEvent],
   ['Event', MockEvent],
   ['Headers', MockHeaders],
-  ['FocusEvent', MockFocusEvent],
   ['KeyboardEvent', MockKeyboardEvent],
   ['MouseEvent', MockMouseEvent],
   ['Request', MockRequest],
@@ -4924,6 +4751,59 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 const NAMESPACE = 'calcite';
 const BUILD = /* calcite */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
+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;
+
 function componentOnReady() {
  return getHostRef(this).$onReadyPromise$;
 }
@@ -5032,7 +4912,7 @@ function hydrateApp(e, t, o, n, s) {
     return Array.from(t).map(waitingOnElementMsg);
    }(d)}`);
   }), t.timeout), plt.$resourcesUrl$ = new URL(t.resourcesUrl || "./", doc.baseURI).href, 
-  function e(t) {
+  globalScripts(), function e(t) {
    if (null != t && 1 === t.nodeType) {
     f(t);
     const o = t.children;
@@ -5898,19 +5778,6 @@ class Accordion {
   }; }
 }
 
-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) => {
@@ -8251,7 +8118,12 @@ class ActionMenu {
      * 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`.
@@ -8399,6 +8271,7 @@ class ActionMenu {
       }
       if (key === "Escape") {
         this.toggleOpen(false);
+        event.preventDefault();
         return;
       }
       if (!actionElements.length) {
@@ -9751,13 +9624,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.
@@ -13036,7 +12911,6 @@ class ColorPicker {
     this.handleSavedColorKeyDown = (event) => {
       if (isActivationKey(event.key)) {
         event.preventDefault();
-        event.stopPropagation();
         this.handleSavedColorSelect(event);
       }
     };
@@ -14977,11 +14851,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) {
@@ -14995,7 +14917,8 @@ function getContainingBlock(element) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
     } else {
-      currentNode = currentNode.parentNode;
+      const parent = currentNode.parentNode;
+      currentNode = isShadowRoot(parent) ? parent.host : parent;
     }
   }
 
@@ -15008,11 +14931,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;
   }
 
@@ -15613,7 +15536,12 @@ 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.
@@ -15695,19 +15623,22 @@ 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);
@@ -15723,9 +15654,10 @@ class Combobox {
           }
           break;
         case "Home":
-          if (this.open) {
-            event.preventDefault();
+          if (!this.open) {
+            return;
           }
+          event.preventDefault();
           this.updateActiveItemIndex(0);
           this.scrollToActiveItem();
           if (!this.comboboxInViewport()) {
@@ -15733,9 +15665,10 @@ 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()) {
@@ -15744,27 +15677,35 @@ 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;
@@ -17495,9 +17436,9 @@ class DatePickerDay {
       !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();
       }
     };
   }
@@ -17566,6 +17507,9 @@ class DatePickerMonth {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
       const isRTL = this.el.dir === "rtl";
       switch (event.key) {
         case "ArrowUp":
@@ -17913,8 +17857,7 @@ class DatePickerMonthHeader {
       this.handleArrowClick(event, this.prevMonthDate);
     };
     this.prevMonthKeydown = (event) => {
-      const { key } = event;
-      if (isActivationKey(key)) {
+      if (isActivationKey(event.key)) {
         this.prevMonthClick(event);
       }
     };
@@ -17922,8 +17865,7 @@ class DatePickerMonthHeader {
       this.handleArrowClick(event, this.nextMonthDate);
     };
     this.nextMonthKeydown = (event) => {
-      const { key } = event;
-      if (isActivationKey(key)) {
+      if (isActivationKey(event.key)) {
         this.nextMonthClick(event);
       }
     };
@@ -17931,8 +17873,7 @@ 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);
     };
   }
@@ -18091,7 +18032,12 @@ 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.
@@ -18202,19 +18148,29 @@ class Dropdown {
       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 = () => {
@@ -18922,6 +18878,7 @@ class Filter {
     this.keyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.clear();
+        event.preventDefault();
       }
       if (event.key === "Enter") {
         event.preventDefault();
@@ -19400,12 +19357,14 @@ class Handle {
       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;
@@ -19640,20 +19599,23 @@ class InlineEditable {
     };
     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();
@@ -19947,7 +19909,9 @@ class Input {
         event.preventDefault();
       }
       if (event.key === "Enter" && !event.defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
     };
     this.clearInputValue = (nativeEvent) => {
@@ -20534,7 +20498,12 @@ class InputDatePicker {
      * @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;
@@ -20566,13 +20535,17 @@ class InputDatePicker {
     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) => {
@@ -21220,7 +21193,9 @@ class InputNumber {
         event.preventDefault();
       }
       if (event.key === "Enter" && !event.defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
     };
     this.clearInputValue = (nativeEvent) => {
@@ -21753,7 +21728,9 @@ class InputText {
         event.preventDefault();
       }
       if (event.key === "Enter" && !event.defaultPrevented) {
-        submitForm(this);
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
       }
     };
     this.clearInputTextValue = (nativeEvent) => {
@@ -22254,12 +22231,19 @@ class InputTimePicker {
     //  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) => {
@@ -23281,8 +23265,9 @@ class Modal {
   //
   //--------------------------------------------------------------------------
   handleEscape(event) {
-    if (this.open && !this.disableEscape && event.key === "Escape") {
+    if (this.open && !this.disableEscape && event.key === "Escape" && !event.defaultPrevented) {
       this.close();
+      event.preventDefault();
     }
   }
   //--------------------------------------------------------------------------
@@ -24113,8 +24098,9 @@ class Panel {
       this.backButtonEl = node;
     };
     this.panelKeyDownHandler = (event) => {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && !event.defaultPrevented) {
         this.close();
+        event.preventDefault();
       }
     };
     this.close = () => {
@@ -25140,7 +25126,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);
@@ -25237,7 +25223,12 @@ class Popover {
      * 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`.
@@ -25715,6 +25706,7 @@ class RadioButton {
       }
       if (key === " ") {
         this.check();
+        event.preventDefault();
         return;
       }
       let adjustedKey = key;
@@ -26408,7 +26400,7 @@ class Rating {
       return (hAsync("span", { class: { wrapper: true } }, hAsync("label", { class: { star: true, focused, selected, average, hovered, partial }, htmlFor: `${this.guid}-${i}`, onMouseOver: () => {
           this.hoverValue = i;
         } }, hAsync("calcite-icon", { "aria-hidden": "true", class: "icon", icon: selected || average || this.readOnly ? "star-f" : "star", scale: this.scale }), partial && (hAsync("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, hAsync("calcite-icon", { icon: "star-f", scale: this.scale }))), hAsync("span", { class: "visually-hidden" }, this.intlStars.replace("${num}", `${i}`))), hAsync("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 })));
     });
   }
@@ -26489,14 +26481,13 @@ class Scrim {
     //
     // --------------------------------------------------------------------------
     /**
-     * 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;
   }
@@ -26554,23 +26545,23 @@ class Select {
     //
     //--------------------------------------------------------------------------
     /**
-     * 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();
@@ -26777,14 +26768,14 @@ const SLOTS$7 = {
 const shellCss = "@-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*/.sc-calcite-shell: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*/.calcite-animate.sc-calcite-shell{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*/.calcite-animate__in.sc-calcite-shell{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:host*/.sc-calcite-shell-h{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-shell-h *.sc-calcite-shell{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:root*/.sc-calcite-shell:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-shell-h{display:none !important}/*!@:host*/.sc-calcite-shell-h{position:absolute;inset:0px;display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;-ms-flex-direction:column;flex-direction:column;overflow:hidden;--calcite-shell-tip-spacing:26vw}/*!@.main*/.main.sc-calcite-shell{position:relative;display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}/*!@.main--reversed*/.main--reversed.sc-calcite-shell{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@.content*/.content.sc-calcite-shell{display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:auto}/*!@.content ::slotted(calcite-shell-center-row), \n.content ::slotted(calcite-panel), \n.content ::slotted(calcite-flow)*/.content .sc-calcite-shell-s>calcite-shell-center-row,.content .sc-calcite-shell-s>calcite-panel,.content .sc-calcite-shell-s>calcite-flow{-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:stretch;align-self:stretch;max-block-size:unset}/*!@.content--behind*/.content--behind.sc-calcite-shell{position:absolute;inset:0px;z-index:1;border-width:0px;display:initial}/*!@::slotted(calcite-shell-center-row)*/.sc-calcite-shell-s>calcite-shell-center-row{inline-size:unset}/*!@::slotted(.header .heading)*/.sc-calcite-shell-s>.header .heading{font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal)}/*!@slot[name=panel-end]::slotted(calcite-shell-panel)*/slot[name=panel-end].sc-calcite-shell-s>calcite-shell-panel{-webkit-margin-start:auto;margin-inline-start:auto}/*!@::slotted(calcite-shell-panel), \n::slotted(calcite-shell-center-row)*/.sc-calcite-shell-s>calcite-shell-panel,.sc-calcite-shell-s>calcite-shell-center-row{position:relative;z-index:1}/*!@::slotted(calcite-panel), \n::slotted(calcite-flow)*/.sc-calcite-shell-s>calcite-panel,.sc-calcite-shell-s>calcite-flow{border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@slot[name=center-row]::slotted(calcite-shell-center-row:not([detached]))*/slot[name=center-row].sc-calcite-shell-s>calcite-shell-center-row:not([detached]){border-inline-start-width:1px;border-inline-end-width:1px;border-color:var(--calcite-ui-border-3)}/*!@::slotted(calcite-tip-manager)*/.sc-calcite-shell-s>calcite-tip-manager{position:absolute;z-index:500;-webkit-box-sizing:border-box;box-sizing:border-box}@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)}}/*!@::slotted(calcite-tip-manager)*/.sc-calcite-shell-s>calcite-tip-manager{-webkit-animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.25rem;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);inset-block-end:0.5rem;inset-inline:var(--calcite-shell-tip-spacing)}";
 
 /**
- * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
- * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
- * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the shell.
+ * @slot - A slot for adding content to the component. This content will appear between any leading and trailing panels added to the component, such as a map.
+ * @slot header - A slot for adding header content. This content will be positioned at the top of the component.
+ * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the component.
  * @slot panel-start - A slot for adding the starting `calcite-shell-panel`.
  * @slot panel-end - A slot for adding the ending `calcite-shell-panel`.
  * @slot primary-panel - [DEPRECATED] A slot for adding the leading `calcite-shell-panel`.
  * @slot contextual-panel - [DEPRECATED] A slot for adding the trailing `calcite-shell-panel`.
- * @slot center-row - A slot for adding custom content in the center row.
+ * @slot center-row - A slot for adding content to the center row.
  */
 class Shell {
   constructor(hostRef) {
@@ -26795,7 +26786,7 @@ class Shell {
     //
     // --------------------------------------------------------------------------
     /**
-     * Positions the center content behind any calcite-shell-panels.
+     * Positions the center content behind any `calcite-shell-panel`s.
      */
     this.contentBehind = false;
   }
@@ -26876,8 +26867,8 @@ const SLOTS$6 = {
 const shellCenterRowCss = "@-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*/.sc-calcite-shell-center-row: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*/.calcite-animate.sc-calcite-shell-center-row{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*/.calcite-animate__in.sc-calcite-shell-center-row{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell-center-row{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell-center-row{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell-center-row{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:host*/.sc-calcite-shell-center-row-h{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-shell-center-row-h *.sc-calcite-shell-center-row{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:root*/.sc-calcite-shell-center-row:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-shell-center-row-h{display:none !important}/*!@:host*/.sc-calcite-shell-center-row-h{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;background-color:transparent}/*!@.content*/.content.sc-calcite-shell-center-row{margin:0px;display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;overflow:hidden;-ms-flex:1 0 0px;flex:1 0 0}/*!@.action-bar-container*/.action-bar-container.sc-calcite-shell-center-row{display:-ms-flexbox;display:flex}/*!@:host([detached])*/[detached].sc-calcite-shell-center-row-h{margin-inline:0.5rem;margin-block:0.5rem 1.5rem}@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)}}/*!@:host([detached])*/[detached].sc-calcite-shell-center-row-h{-webkit-animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.25rem;border-width:0px;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host([position=end])*/[position=end].sc-calcite-shell-center-row-h{-ms-flex-item-align:end;align-self:flex-end}/*!@:host([position=start])*/[position=start].sc-calcite-shell-center-row-h{-ms-flex-item-align:start;align-self:flex-start}/*!@:host([height-scale=s])*/[height-scale=s].sc-calcite-shell-center-row-h{block-size:33.333333%}/*!@:host([height-scale=m])*/[height-scale=m].sc-calcite-shell-center-row-h{block-size:70%}/*!@:host([height-scale=l])*/[height-scale=l].sc-calcite-shell-center-row-h{block-size:100%}/*!@:host([height-scale=l][detached])*/[height-scale=l][detached].sc-calcite-shell-center-row-h{block-size:calc(100% - 2rem)}/*!@::slotted(calcite-panel)*/.sc-calcite-shell-center-row-s>calcite-panel{block-size:100%;inline-size:100%}/*!@::slotted(calcite-action-bar),\n::slotted(calcite-action-bar[position=end])*/.sc-calcite-shell-center-row-s>calcite-action-bar,.sc-calcite-shell-center-row-s>calcite-action-bar[position=end]{-webkit-border-end:1px solid;border-inline-end:1px solid;border-color:var(--calcite-ui-border-3)}";
 
 /**
- * @slot - A slot for adding content to the shell panel.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
+ * @slot - A slot for adding content to the `calcite-shell-panel`.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the `calcite-shell-panel`.
  */
 class ShellCenterRow {
   constructor(hostRef) {
@@ -26888,15 +26879,15 @@ class ShellCenterRow {
     //
     // --------------------------------------------------------------------------
     /**
-     * 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";
   }
@@ -26962,8 +26953,8 @@ const TEXT$3 = {
 const shellPanelCss = "@-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*/.sc-calcite-shell-panel: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*/.calcite-animate.sc-calcite-shell-panel{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*/.calcite-animate__in.sc-calcite-shell-panel{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell-panel{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell-panel{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell-panel{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-shell-panel-h{display:none !important}/*!@:host*/.sc-calcite-shell-panel-h{pointer-events:none;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-align:stretch;align-items:stretch;--calcite-shell-panel-detached-max-height:unset}/*!@.container*/.container.sc-calcite-shell-panel{pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}/*!@.container **/.container.sc-calcite-shell-panel *.sc-calcite-shell-panel{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:host(:hover) .separator:not(:hover):not(:focus), \n:host(:focus-within) .separator:not(:hover):not(:focus)*/.sc-calcite-shell-panel-h:hover .separator.sc-calcite-shell-panel:not(:hover):not(:focus),.sc-calcite-shell-panel-h:focus-within .separator.sc-calcite-shell-panel:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-ui-border-3)}/*!@.separator*/.separator.sc-calcite-shell-panel{pointer-events:auto;position:absolute;inset-block:0px;display:-ms-flexbox;display:flex;block-size:100%;inline-size:0.125rem;background-color:transparent;opacity:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}/*!@.separator:hover*/.separator.sc-calcite-shell-panel:hover{opacity:1;background-color:var(--calcite-ui-border-2)}/*!@.separator:focus*/.separator.sc-calcite-shell-panel:focus{background-color:var(--calcite-ui-brand);opacity:1}/*!@:host([position=start]) .separator*/[position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:-2px}/*!@:host([position=end]) .separator*/[position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-start:-2px}/*!@::slotted(calcite-panel), \n::slotted(calcite-flow)*/.sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-s>calcite-flow{block-size:100%;inline-size:100%;-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}/*!@::slotted(.calcite-match-height)*/.sc-calcite-shell-panel-s>.calcite-match-height{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}/*!@.content*/.content.sc-calcite-shell-panel{pointer-events:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-background);padding:0px;inline-size:var(--calcite-shell-panel-width);max-inline-size:var(--calcite-shell-panel-max-width);min-inline-size:var(--calcite-shell-panel-min-width);-webkit-transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}/*!@.content__header*/.content__header.sc-calcite-shell-panel{display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}/*!@.content__body*/.content__body.sc-calcite-shell-panel{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;overflow:hidden}/*!@:host([width-scale=s]) .content*/[width-scale=s].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}/*!@:host([width-scale=m]) .content*/[width-scale=m].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}/*!@:host([width-scale=l]) .content*/[width-scale=l].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}/*!@:host([detached-height-scale=s]) .content--detached*/[detached-height-scale=s].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:40vh}/*!@:host([detached-height-scale=m]) .content--detached*/[detached-height-scale=m].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:60vh}/*!@:host([detached-height-scale=l]) .content--detached*/[detached-height-scale=l].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:80vh}/*!@.content--detached*/.content--detached.sc-calcite-shell-panel{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-shell-panel-detached-max-height)}/*!@.content--detached ::slotted(calcite-panel),\n.content--detached ::slotted(calcite-flow)*/.content--detached .sc-calcite-shell-panel-s>calcite-panel,.content--detached .sc-calcite-shell-panel-s>calcite-flow{max-block-size:unset}/*!@:host([position=start]) .content--detached ::slotted(calcite-panel), \n:host([position=start]) .content--detached ::slotted(calcite-flow), \n:host([position=end]) .content--detached ::slotted(calcite-panel), \n:host([position=end]) .content--detached ::slotted(calcite-flow)*/.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-flow{border-style:none}/*!@.content[hidden]*/.content[hidden].sc-calcite-shell-panel{display:none}/*!@slot[name=action-bar]::slotted(calcite-action-bar), \n.content ::slotted(calcite-flow), \n.content ::slotted(calcite-panel:not([dismissed]))*/slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.content .sc-calcite-shell-panel-s>calcite-flow,.content .sc-calcite-shell-panel-s>calcite-panel:not([dismissed]){border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=start]) .content ::slotted(calcite-flow),\n:host([position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=start] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-panel{-webkit-border-start:none;border-inline-start:none}/*!@:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=end]) .content ::slotted(calcite-flow),\n:host([position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=end] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-panel{-webkit-border-end:none;border-inline-end:none}";
 
 /**
- * @slot - A slot for adding content to the shell panel.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
+ * @slot - A slot for adding content to the component.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
  */
 class ShellPanel {
   constructor(hostRef) {
@@ -26975,29 +26966,29 @@ class ShellPanel {
     //
     // --------------------------------------------------------------------------
     /**
-     * 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;
@@ -27214,17 +27205,17 @@ class Slider {
     //  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.
@@ -27232,20 +27223,20 @@ class Slider {
      * 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()}`;
@@ -31210,30 +31201,34 @@ class SplitButton {
     registerInstance(this, hostRef);
     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);
@@ -31322,13 +31317,13 @@ class Stepper {
     //  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";
     //--------------------------------------------------------------------------
     //
@@ -31430,7 +31425,7 @@ class Stepper {
   //  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") {
@@ -31438,7 +31433,7 @@ class Stepper {
     }
     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") {
@@ -31447,7 +31442,7 @@ class Stepper {
     this.updateStep(enabledStepIndex);
   }
   /**
-   * set the requested step as active
+   * Set a specified `calcite-stepper-item` as active.
    *
    * @param step
    */
@@ -31457,7 +31452,7 @@ class Stepper {
       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") {
@@ -31465,7 +31460,7 @@ class Stepper {
     }
     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") {
@@ -31562,25 +31557,25 @@ class StepperItem {
     //  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";
     //--------------------------------------------------------------------------
@@ -31744,17 +31739,17 @@ class Switch {
     //  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;
     //--------------------------------------------------------------------------
     //
@@ -31762,8 +31757,7 @@ class Switch {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
-      const { key } = event;
-      if (!this.disabled && isActivationKey(key)) {
+      if (!this.disabled && isActivationKey(event.key)) {
         this.toggle();
         event.preventDefault();
       }
@@ -33469,24 +33463,31 @@ class TimePicker {
     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;
         }
@@ -33495,10 +33496,12 @@ class TimePicker {
         switch (key) {
           case "ArrowLeft":
             this.setFocus("minute");
+            event.preventDefault();
             break;
           case "ArrowRight":
             if (this.hourCycle === "12") {
               this.setFocus("meridiem");
+              event.preventDefault();
             }
             break;
         }
@@ -33508,9 +33511,11 @@ class TimePicker {
           case "ArrowLeft":
             if (this.step !== 60) {
               this.setFocus("second");
+              event.preventDefault();
             }
             else {
               this.setFocus("minute");
+              event.preventDefault();
             }
             break;
         }
@@ -34218,7 +34223,12 @@ class Tooltip {
      * 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`.
@@ -35050,6 +35060,9 @@ class ValueList {
     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));