@esri/calcite-components 1.0.0-next.313 → 1.0.0-next.317

package/dist/custom-elements/index.js

@@ -5,34 +5,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
-/**
- * Standardize key property of keyboard event (mostly for ie11)
- */
-function getKey(key, dir) {
-  const lookup = {
-    Up: "ArrowUp",
-    Down: "ArrowDown",
-    Left: "ArrowLeft",
-    Right: "ArrowRight",
-    Spacebar: " ",
-    Esc: "Escape"
-  };
-  const adjustedKey = lookup[key] || key;
-  const isRTL = dir === "rtl";
-  if (isRTL && adjustedKey === "ArrowLeft") {
-    return "ArrowRight";
-  }
-  if (isRTL && adjustedKey === "ArrowRight") {
-    return "ArrowLeft";
-  }
-  return adjustedKey;
-}
-function isActivationKey(key) {
-  key = getKey(key);
-  return key === "Enter" || key === " ";
-}
-const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-
 const calciteAccordionCss = "@-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:300ms}.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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}: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{display:block;position:relative;max-width:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);border-bottom-width:0;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
 
 let CalciteAccordion$1 = class extends HTMLElement$1 {
@@ -91,7 +63,7 @@ let CalciteAccordion$1 = class extends HTMLElement$1 {
     const item = e.detail.item;
     const parent = e.detail.parent;
     if (this.el === parent) {
-      const key = getKey(item.key);
+      const key = item.key;
       const itemToFocus = e.target;
       const isFirstItem = this.itemIndex(itemToFocus) === 0;
       const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
@@ -216,6 +188,12 @@ function nodeListToArray(nodeList) {
 function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
@@ -392,7 +370,7 @@ let CalciteAccordionItem$1 = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();
@@ -689,7 +667,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   return referenceElement;
 };
 const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
-  const rtl = getElementDir(el) === "rtl";
+  const rtl = getElementStyleDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS$d.chevronsLeft, ICONS$d.chevronsRight];
   if (rtl) {
@@ -698,7 +676,7 @@ const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, p
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { dir: getElementDir(el) === "rtl" ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };
 
@@ -2683,13 +2661,11 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.autoDismissTimeout = null;
-    this.trackTimer = new Date();
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
-      if (this.autoDismissTimeout) {
-        this.autoDismissTimeout = null;
-      }
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -2713,10 +2689,10 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  updateDuration(newDuration, prevDuration) {
-    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -2736,9 +2712,7 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
   disconnectedCallback() {
-    if (this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-    }
+    window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
     const dir = getElementDir(this.el);
@@ -2746,14 +2720,13 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = h("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS$l.title }), h("slot", { name: SLOTS$l.message }), h("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS$l.title }), h("slot", { name: SLOTS$l.message }), h("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -2799,9 +2772,9 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeout) {
-        this.trackTimer = new Date();
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {
@@ -3283,7 +3256,7 @@ let CalciteBlockSection$1 = class extends HTMLElement$1 {
   }
   render() {
     const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-    const dir = getElementDir(el);
+    const dir = getElementStyleDir(el);
     const arrowIcon = open
       ? ICONS$b.menuOpen
       : dir === "rtl"
@@ -3630,7 +3603,7 @@ let CalciteCard$1 = class extends HTMLElement$1 {
       this.selectCard();
     };
     this.cardSelectKeyDown = (e) => {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.selectCard();
@@ -6415,7 +6388,7 @@ let CalciteColorPicker$1 = class extends HTMLElement$1 {
       this.updateChannelsFromColor(this.color);
     };
     this.handleColorFieldScopeKeyDown = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXYOffset = {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
@@ -6430,7 +6403,7 @@ let CalciteColorPicker$1 = class extends HTMLElement$1 {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -6768,7 +6741,7 @@ let CalciteColorPicker$1 = class extends HTMLElement$1 {
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
-    const key = getKey(event.key);
+    const key = event.key;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
       !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS$F.channel); })) {
       return;
@@ -7167,7 +7140,7 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement$1 {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;
@@ -9229,7 +9202,7 @@ let CalciteCombobox$1 = class extends HTMLElement$1 {
       this.setFocus();
     };
     this.keydownHandler = (event) => {
-      const key = getKey(event.key, getElementDir(this.el));
+      const { key } = event;
       switch (key) {
         case "Tab":
           this.activeChipIndex = -1;
@@ -10038,6 +10011,11 @@ let CalciteComboboxItemGroup$1 = class extends HTMLElement$1 {
   static get style() { return calciteComboboxItemGroupCss; }
 };
 
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
+const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
 function isValidNumber(numberString) {
   return !(!numberString || isNaN(Number(numberString)));
 }
@@ -10421,7 +10399,7 @@ let CalciteDatePicker$1 = class extends HTMLElement$1 {
     //
     //--------------------------------------------------------------------------
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.reset();
       }
     };
@@ -10805,7 +10783,7 @@ let CalciteDatePickerDay$1 = class extends HTMLElement$1 {
       !this.disabled && this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         !this.disabled && this.calciteDaySelect.emit();
       }
@@ -10853,7 +10831,7 @@ let CalciteDatePickerMonth$1 = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
       const isRTL = this.el.dir === "rtl";
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
           this.addDays(-7);
@@ -11126,7 +11104,7 @@ let CalciteDatePickerMonthHeader$1 = class extends HTMLElement$1 {
      */
     this.onYearKey = (e) => {
       const year = e.target.value;
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
           this.setYear(year, -1);
@@ -11144,7 +11122,7 @@ let CalciteDatePickerMonthHeader$1 = class extends HTMLElement$1 {
       this.handleArrowClick(e, this.prevMonthDate);
     };
     this.prevMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.prevMonthClick(e);
       }
@@ -11153,7 +11131,7 @@ let CalciteDatePickerMonthHeader$1 = class extends HTMLElement$1 {
       this.handleArrowClick(e, this.nextMonthDate);
     };
     this.nextMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.nextMonthClick(e);
       }
@@ -11331,7 +11309,7 @@ let CalciteDropdown$1 = class extends HTMLElement$1 {
     };
     this.keyDownHandler = (e) => {
       const target = e.target;
-      const key = getKey(e.key);
+      const key = e.key;
       if (this.triggers.includes(target) ||
         this.triggers.some((trigger) => trigger.contains(target))) {
         if (target.nodeName !== "BUTTON" && target.nodeName !== "CALCITE-BUTTON") {
@@ -11452,7 +11430,7 @@ let CalciteDropdown$1 = class extends HTMLElement$1 {
     const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
-    switch (getKey(keyboardEvent.key)) {
+    switch (keyboardEvent.key) {
       case "Tab":
         if (isLastItem && !keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
@@ -11746,7 +11724,7 @@ let CalciteDropdownItem$1 = class extends HTMLElement$1 {
     this.emitRequestedItem();
   }
   keyDownHandler(e) {
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.emitRequestedItem();
         if (this.href) {
@@ -11971,25 +11949,12 @@ let CalciteFilter$1 = class extends HTMLElement$1 {
       this.setFocus();
     };
   }
-  watchDataHandler(value) {
-    this.items = value;
-  }
   watchItemsHandler() {
     this.filter(this.value);
   }
   valueHandler(value) {
     this.filter(value);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    if (this.data && !this.items) {
-      this.items = this.data;
-    }
-  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -12002,7 +11967,7 @@ let CalciteFilter$1 = class extends HTMLElement$1 {
   updateFiltered(filtered) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit(filtered);
+    this.calciteFilterChange.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -12018,7 +11983,6 @@ let CalciteFilter$1 = class extends HTMLElement$1 {
   }
   get el() { return this; }
   static get watchers() { return {
-    "data": ["watchDataHandler"],
     "items": ["watchItemsHandler"],
     "value": ["valueHandler"]
   }; }
@@ -12845,6 +12809,8 @@ let CalciteInput$1 = class extends HTMLElement$1 {
      * Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
      */
     this.type = "text";
+    /** input value */
+    this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
     //--------------------------------------------------------------------------
@@ -12860,13 +12826,13 @@ let CalciteInput$1 = class extends HTMLElement$1 {
       if (this.readOnly || this.disabled) {
         return;
       }
-      if (this.isClearable && getKey(event.key) === "Escape") {
+      if (this.isClearable && event.key === "Escape") {
         this.clearInputValue(event);
         event.preventDefault();
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue(null, nativeEvent, true);
+      this.setValue("", nativeEvent, true);
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
@@ -13008,7 +12974,7 @@ let CalciteInput$1 = class extends HTMLElement$1 {
         this.setLocalizedValue(this.value);
       }
       if (nativeEvent) {
-        if (this.type === "number" && (value === null || value === void 0 ? void 0 : value.endsWith("."))) {
+        if (this.type === "number" && value.endsWith(".")) {
           return;
         }
         const calciteInputInputEvent = this.calciteInputInput.emit({
@@ -13043,6 +13009,10 @@ let CalciteInput$1 = class extends HTMLElement$1 {
     this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
   }
   valueWatcher(newValue) {
+    if (newValue == null) {
+      this.value = "";
+      return;
+    }
     if (this.type === "number" &&
       this.localizedValue !== localizeNumberString(newValue, this.locale)) {
       this.setLocalizedValue(newValue);
@@ -13055,8 +13025,7 @@ let CalciteInput$1 = class extends HTMLElement$1 {
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
   get isClearable() {
-    var _a;
-    return !this.isTextarea && (this.clearable || this.type === "search") && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return !this.isTextarea && (this.clearable || this.type === "search") && this.value.length > 0;
   }
   get isTextarea() {
     return this.childElType === "textarea";
@@ -13289,7 +13258,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement$1 {
       this.active = false;
     };
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.active = false;
       }
     };
@@ -13881,7 +13850,7 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
     this.internalValueChange = false;
   }
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape" && this.active) {
+    if (event.key === "Escape" && this.active) {
       this.active = false;
     }
   }
@@ -14563,7 +14532,7 @@ let CalciteModal$1 = class extends HTMLElement$1 {
     return this.hasFooter ? (h("div", { class: CSS$m.footer }, h("span", { class: CSS$m.back }, h("slot", { name: SLOTS$e.back })), h("span", { class: CSS$m.secondary }, h("slot", { name: SLOTS$e.secondary })), h("span", { class: CSS$m.primary }, h("slot", { name: SLOTS$e.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, h("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : "l" }))) : null;
+    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, h("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
@@ -14593,7 +14562,7 @@ let CalciteModal$1 = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && getKey(e.key) === "Escape") {
+    if (this.active && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }
@@ -15189,7 +15158,7 @@ let CalcitePanel$1 = class extends HTMLElement$1 {
   // --------------------------------------------------------------------------
   renderBackButton() {
     const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
+    const rtl = getElementStyleDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT$8.back;
     const icon = rtl ? ICONS$5.backRight : ICONS$5.backLeft;
@@ -15496,8 +15465,8 @@ function selectSiblings(item, deselect = false) {
 }
 let groups;
 function handleFilter(event) {
-  const filteredData = event.detail;
-  const values = filteredData.map((item) => item.value);
+  const { filteredItems } = event.currentTarget;
+  const values = filteredItems.map((item) => item.value);
   let hasSelectedMatch = false;
   if (!groups) {
     groups = new Set();
@@ -15560,7 +15529,7 @@ const List = (_a) => {
   return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS$i.sticky]: true } },
-        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, dir: getElementDir(el), disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS$b.menuActions })),
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));
@@ -15928,7 +15897,7 @@ const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
 const HEADING_LEVEL$2 = 2;
 
-const calcitePopoverCss = "@-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:300ms}.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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{border-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-3);border-style:solid;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start}.heading{display:block;-ms-flex:1 1 auto;flex:1 1 auto;font-weight:var(--calcite-font-weight-medium);margin:0;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size-0);line-height:1.375;white-space:normal;word-wrap:break-word;word-break:break-word}.container{background-color:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;height:100%;color:var(--calcite-ui-text-1);border-radius:0.25rem}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;height:100%;width:100%}.calcite--rtl .close-button{border-radius:0.25rem 0 0 0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
+const calcitePopoverCss = "@-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:300ms}.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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{border-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-3);border-style:solid;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start}.heading{display:block;-ms-flex:1 1 auto;flex:1 1 auto;font-weight:var(--calcite-font-weight-medium);margin:0;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size-0);line-height:1.375;white-space:normal;word-wrap:break-word;word-break:break-word}.container{background-color:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;height:100%;color:var(--calcite-ui-text-1);border-radius:0.25rem}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;overflow:hidden;height:100%;width:100%}.calcite--rtl .close-button{border-radius:0.25rem 0 0 0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
 
 let CalcitePopover$1 = class extends HTMLElement$1 {
   constructor() {
@@ -16405,7 +16374,7 @@ let CalciteRadioButton$1 = class extends HTMLElement$1 {
     };
     this.handleKeyDown = (event) => {
       const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-      const key = getKey(event.key);
+      const key = event.key;
       const { el } = this;
       if (keys.indexOf(key) === -1) {
         return;
@@ -16415,7 +16384,7 @@ let CalciteRadioButton$1 = class extends HTMLElement$1 {
         return;
       }
       let adjustedKey = key;
-      if (getElementDir(el) === "rtl") {
+      if (getElementStyleDir(el) === "rtl") {
         if (key === "ArrowRight") {
           adjustedKey = "ArrowLeft";
         }
@@ -16704,7 +16673,7 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     this.handleClick = (event) => {
       if (event.target.localName === "calcite-radio-group-item") {
-        this.selectItem(event.target);
+        this.selectItem(event.target, true);
       }
     };
   }
@@ -16723,7 +16692,6 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
       .pop();
     if (match) {
       this.selectItem(match);
-      this.calciteRadioGroupChange.emit(match.value);
     }
     else if (items[0]) {
       items[0].tabIndex = 0;
@@ -16734,7 +16702,7 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  connectedCallback() {
+  componentWillLoad() {
     const items = this.getItems();
     const lastChecked = Array.from(items)
       .filter((item) => item.checked)
@@ -16745,6 +16713,8 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
     else if (items[0]) {
       items[0].tabIndex = 0;
     }
+  }
+  connectedCallback() {
     connectLabel(this);
     connectForm(this);
   }
@@ -16752,29 +16722,23 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  componentDidLoad() {
-    this.hasLoaded = true;
-  }
   render() {
     return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
-    // only fire after initial setup to prevent semi-infinite loops
-    if (this.hasLoaded) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.selectItem(event.target);
-    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.selectItem(event.target);
   }
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-    const key = getKey(event.key);
+    const key = event.key;
     const { el, selectedItem } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (getElementStyleDir(el) === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }
@@ -16794,17 +16758,17 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
       case "ArrowUp":
         event.preventDefault();
         const previous = selectedIndex < 1 ? items.item(items.length - 1) : items.item(selectedIndex - 1);
-        this.selectItem(previous);
+        this.selectItem(previous, true);
         return;
       case "ArrowRight":
       case "ArrowDown":
         event.preventDefault();
         const next = selectedIndex === -1 ? items.item(1) : items.item(selectedIndex + 1) || items.item(0);
-        this.selectItem(next);
+        this.selectItem(next, true);
         return;
       case " ":
         event.preventDefault();
-        this.selectItem(event.target);
+        this.selectItem(event.target, true);
         return;
       default:
         return;
@@ -16831,7 +16795,7 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
-  selectItem(selected) {
+  selectItem(selected, emit = false) {
     if (selected === this.selectedItem) {
       return;
     }
@@ -16845,6 +16809,9 @@ let CalciteRadioGroup$1 = class extends HTMLElement$1 {
       item.tabIndex = matches ? 0 : -1;
       if (matches) {
         match = item;
+        if (emit) {
+          this.calciteRadioGroupChange.emit(match.value);
+        }
       }
     });
     this.selectedItem = match;
@@ -17243,6 +17210,7 @@ let CalciteSelect$1 = class extends HTMLElement$1 {
     this.updateNativeElement(optionOrGroup, nativeEl);
     if (isOption(optionOrGroup) && optionOrGroup.selected) {
       this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
     }
   }
   //--------------------------------------------------------------------------
@@ -17282,7 +17250,7 @@ let CalciteSelect$1 = class extends HTMLElement$1 {
       }
     });
     if (futureSelected) {
-      requestAnimationFrame(() => (this.selectedOption = futureSelected));
+      this.selectedOption = futureSelected;
     }
   }
   toNativeElement(optionOrGroup) {
@@ -17527,7 +17495,7 @@ let CalciteShellPanel$1 = class extends HTMLElement$1 {
     };
     this.getKeyAdjustedWidth = (event) => {
       const { key } = event;
-      const { step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -17542,15 +17510,20 @@ let CalciteShellPanel$1 = class extends HTMLElement$1 {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const increaseKeys = key === "ArrowUp" || (position === "end" ? key === "ArrowLeft" : key === "ArrowRight");
+      const dir = getElementStyleDir(el);
+      const directionKeys = ["ArrowLeft", "ArrowRight"];
+      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
+      const increaseKeys = key === "ArrowUp" ||
+        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + stepValue;
+        return initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" || (position === "end" ? key === "ArrowRight" : key === "ArrowLeft");
+      const decreaseKeys = key === "ArrowDown" ||
+        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - stepValue;
+        return initialContentWidth - directionFactor * stepValue;
       }
       if (typeof contentWidthMin === "number" && key === "Home") {
         return contentWidthMin;
@@ -17575,9 +17548,13 @@ let CalciteShellPanel$1 = class extends HTMLElement$1 {
     };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { initialContentWidth, position, initialClientX } = this;
+      const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      this.setContentWidth(position === "end" ? initialContentWidth - offset : initialContentWidth + offset);
+      const dir = getElementStyleDir(el);
+      const adjustmentDirection = dir === "rtl" ? -1 : 1;
+      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
+      const width = initialContentWidth + adjustedOffset;
+      this.setContentWidth(width);
     };
     this.separatorPointerUp = (event) => {
       event.preventDefault();
@@ -17998,7 +17975,7 @@ let CalciteSlider$1 = class extends HTMLElement$1 {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Enter" || key === " ") {
       event.preventDefault();
       return;
@@ -21693,7 +21670,7 @@ let CalciteStepper$1 = class extends HTMLElement$1 {
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
-    switch (getKey(item.key)) {
+    switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
         if (isLastItem) {
@@ -21908,7 +21885,7 @@ let CalciteStepperItem$1 = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (!this.disabled && e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();
@@ -22012,7 +21989,7 @@ let CalciteSwitch$1 = class extends HTMLElement$1 {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
       }
@@ -22270,7 +22247,7 @@ let CalciteTabNav$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const width = `${this.indicatorWidth}px`;
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
@@ -22327,7 +22304,7 @@ let CalciteTabNav$1 = class extends HTMLElement$1 {
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;
     const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
@@ -22480,14 +22457,14 @@ let CalciteTabTitle$1 = class extends HTMLElement$1 {
     this.emitActiveTab();
   }
   keyDownHandler(e) {
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
       case "Enter":
         this.emitActiveTab();
         e.preventDefault();
         break;
       case "ArrowRight":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusNext.emit();
         }
         else {
@@ -22495,7 +22472,7 @@ let CalciteTabTitle$1 = class extends HTMLElement$1 {
         }
         break;
       case "ArrowLeft":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusPrevious.emit();
         }
         else {
@@ -23101,7 +23078,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newHour;
@@ -23189,7 +23166,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
       }
     };
     this.meridiemKeyDownHandler = (event) => {
-      switch (getKey(event.key)) {
+      switch (event.key) {
         case "a":
           this.setTime("meridiem", "AM");
           break;
@@ -23225,7 +23202,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
@@ -23273,7 +23250,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
@@ -23382,7 +23359,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     this.calciteTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
@@ -23441,7 +23418,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   buttonActivated(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === " ") {
       event.preventDefault();
     }
@@ -23807,7 +23784,7 @@ let CalciteTipManager$1 = class extends HTMLElement$1 {
   //
   // --------------------------------------------------------------------------
   renderPagination() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
     const nextLabel = intlNext || TEXT$1.next;
     const previousLabel = intlPrevious || TEXT$1.previous;
@@ -24143,7 +24120,7 @@ let CalciteTooltipManager$1 = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape") {
+    if (event.key === "Escape") {
       const { tooltipEl } = this;
       if (tooltipEl) {
         this.clearHoverTimeout(tooltipEl);
@@ -24537,7 +24514,7 @@ let CalciteTreeItem$1 = class extends HTMLElement$1 {
   }
   keyDownHandler(e) {
     let root;
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
           modifyCurrentSelection: e.shiftKey,
@@ -24973,7 +24950,7 @@ const CalciteDropdown = /*@__PURE__*/proxyCustomElement(CalciteDropdown$1, [1,"c
 const CalciteDropdownGroup = /*@__PURE__*/proxyCustomElement(CalciteDropdownGroup$1, [1,"calcite-dropdown-group",{"groupTitle":[513,"group-title"],"selectionMode":[513,"selection-mode"],"scale":[513]},[[0,"calciteDropdownItemSelect","updateActiveItemOnChange"]]]);
 const CalciteDropdownItem = /*@__PURE__*/proxyCustomElement(CalciteDropdownItem$1, [1,"calcite-dropdown-item",{"active":[1540],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"iconEnd":[513,"icon-end"],"href":[513],"label":[1],"rel":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"],[16,"calciteDropdownItemChange","updateActiveItemOnChange"]]]);
 const CalciteFab = /*@__PURE__*/proxyCustomElement(CalciteFab$1, [1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
-const CalciteFilter = /*@__PURE__*/proxyCustomElement(CalciteFilter$1, [1,"calcite-filter",{"data":[16],"items":[1040],"disabled":[516],"filteredItems":[1040],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"value":[1025]}]);
+const CalciteFilter = /*@__PURE__*/proxyCustomElement(CalciteFilter$1, [1,"calcite-filter",{"items":[1040],"disabled":[516],"filteredItems":[1040],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"value":[1025]}]);
 const CalciteFlow = /*@__PURE__*/proxyCustomElement(CalciteFlow$1, [1,"calcite-flow",{"panelCount":[32],"flowDirection":[32],"panels":[32]},[[0,"calcitePanelBackClick","handleCalcitePanelBackClick"]]]);
 const CalciteGraph = /*@__PURE__*/proxyCustomElement(CalciteGraph$1, [1,"calcite-graph",{"data":[16],"colorStops":[16],"width":[2],"height":[2],"highlightMin":[2,"highlight-min"],"highlightMax":[2,"highlight-max"],"min":[2],"max":[2]}]);
 const CalciteHandle = /*@__PURE__*/proxyCustomElement(CalciteHandle$1, [1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"]}]);