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

package/hydrate/index.js

@@ -5511,34 +5511,6 @@ const cmpModules = new Map, getModule = e => {
  e["s-p"] = [], e["s-rc"] = [], addHostEventListeners(e, o, t.$listeners$), hostRefs.set(e, o);
 }, styles = new Map;
 
-/**
- * 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*/.sc-calcite-accordion:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-accordion{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-accordion{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-accordion{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-accordion{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-accordion{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-accordion:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-accordion-h{display:none}/*!@:host([scale=s])*/[scale=s].sc-calcite-accordion-h{--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])*/[scale=m].sc-calcite-accordion-h{--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])*/[scale=l].sc-calcite-accordion-h{--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*/.sc-calcite-accordion-h{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])*/[appearance=minimal].sc-calcite-accordion-h{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}/*!@:host([appearance=transparent])*/[appearance=transparent].sc-calcite-accordion-h{border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
 
 /**
@@ -5598,7 +5570,7 @@ class CalciteAccordion {
     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;
@@ -5737,6 +5709,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}]`;
@@ -5914,7 +5892,7 @@ class CalciteAccordionItem {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();
@@ -6244,7 +6222,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) {
@@ -6253,7 +6231,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 = (hAsync("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 = (hAsync("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 ? hAsync("calcite-tooltip-manager", null, actionNode) : actionNode;
 };
 
@@ -8319,13 +8297,11 @@ class CalciteAlert {
     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);
@@ -8349,10 +8325,10 @@ class CalciteAlert {
   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));
     }
   }
   //--------------------------------------------------------------------------
@@ -8372,9 +8348,7 @@ class CalciteAlert {
     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);
@@ -8382,14 +8356,13 @@ class CalciteAlert {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (hAsync("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, hAsync("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = hAsync("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (hAsync(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, hAsync("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$l.title }), hAsync("slot", { name: SLOTS$l.message }), hAsync("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$l.title }), hAsync("slot", { name: SLOTS$l.message }), hAsync("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -8435,9 +8408,9 @@ class CalciteAlert {
     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 {
@@ -8981,7 +8954,7 @@ class CalciteBlockSection {
   }
   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"
@@ -9380,7 +9353,7 @@ class CalciteCard {
       this.selectCard();
     };
     this.cardSelectKeyDown = (e) => {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.selectCard();
@@ -12216,7 +12189,7 @@ class CalciteColorPicker {
       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 },
@@ -12231,7 +12204,7 @@ class CalciteColorPicker {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -12569,7 +12542,7 @@ class CalciteColorPicker {
   // 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;
@@ -13015,7 +12988,7 @@ class CalciteColorPickerHexInput {
   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;
@@ -15102,7 +15075,7 @@ class CalciteCombobox {
       this.setFocus();
     };
     this.keydownHandler = (event) => {
-      const key = getKey(event.key, getElementDir(this.el));
+      const { key } = event;
       switch (key) {
         case "Tab":
           this.activeChipIndex = -1;
@@ -15978,6 +15951,11 @@ class CalciteComboboxItemGroup {
   }; }
 }
 
+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)));
 }
@@ -16261,7 +16239,7 @@ class CalciteDatePicker {
     //
     //--------------------------------------------------------------------------
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.reset();
       }
     };
@@ -16673,7 +16651,7 @@ class CalciteDatePickerDay {
       !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();
       }
@@ -16741,7 +16719,7 @@ class CalciteDatePickerMonth {
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
       const isRTL = this.el.dir === "rtl";
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
           this.addDays(-7);
@@ -17030,7 +17008,7 @@ class CalciteDatePickerMonthHeader {
      */
     this.onYearKey = (e) => {
       const year = e.target.value;
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
           this.setYear(year, -1);
@@ -17048,7 +17026,7 @@ class CalciteDatePickerMonthHeader {
       this.handleArrowClick(e, this.prevMonthDate);
     };
     this.prevMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.prevMonthClick(e);
       }
@@ -17057,7 +17035,7 @@ class CalciteDatePickerMonthHeader {
       this.handleArrowClick(e, this.nextMonthDate);
     };
     this.nextMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.nextMonthClick(e);
       }
@@ -17258,7 +17236,7 @@ class CalciteDropdown {
     };
     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") {
@@ -17379,7 +17357,7 @@ class CalciteDropdown {
     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();
@@ -17707,7 +17685,7 @@ class CalciteDropdownItem {
     this.emitRequestedItem();
   }
   keyDownHandler(e) {
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.emitRequestedItem();
         if (this.href) {
@@ -17965,25 +17943,12 @@ class CalciteFilter {
       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
@@ -17996,7 +17961,7 @@ class CalciteFilter {
   updateFiltered(filtered) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit(filtered);
+    this.calciteFilterChange.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -18012,7 +17977,6 @@ class CalciteFilter {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "data": ["watchDataHandler"],
     "items": ["watchItemsHandler"],
     "value": ["valueHandler"]
   }; }
@@ -18021,7 +17985,6 @@ class CalciteFilter {
     "$flags$": 9,
     "$tagName$": "calcite-filter",
     "$members$": {
-      "data": [16],
       "items": [1040],
       "disabled": [516],
       "filteredItems": [1040],
@@ -18867,6 +18830,8 @@ class CalciteInput {
      * 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";
     //--------------------------------------------------------------------------
@@ -18882,13 +18847,13 @@ class CalciteInput {
       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") {
@@ -19030,7 +18995,7 @@ class CalciteInput {
         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({
@@ -19065,6 +19030,10 @@ class CalciteInput {
     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);
@@ -19077,8 +19046,7 @@ class CalciteInput {
     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";
@@ -19351,7 +19319,7 @@ class CalciteInputDatePicker {
       this.active = false;
     };
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.active = false;
       }
     };
@@ -19990,7 +19958,7 @@ class CalciteInputTimePicker {
     this.internalValueChange = false;
   }
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape" && this.active) {
+    if (event.key === "Escape" && this.active) {
       this.active = false;
     }
   }
@@ -20803,7 +20771,7 @@ class CalciteModal {
     return this.hasFooter ? (hAsync("div", { class: CSS$m.footer }, hAsync("span", { class: CSS$m.back }, hAsync("slot", { name: SLOTS$e.back })), hAsync("span", { class: CSS$m.secondary }, hAsync("slot", { name: SLOTS$e.secondary })), hAsync("span", { class: CSS$m.primary }, hAsync("slot", { name: SLOTS$e.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (hAsync("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, hAsync("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : "l" }))) : null;
+    return !this.disableCloseButton ? (hAsync("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, hAsync("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}`));
@@ -20833,7 +20801,7 @@ class CalciteModal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && getKey(e.key) === "Escape") {
+    if (this.active && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }
@@ -21525,7 +21493,7 @@ class CalcitePanel {
   // --------------------------------------------------------------------------
   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;
@@ -21857,8 +21825,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();
@@ -21921,7 +21889,7 @@ const List = (_a) => {
   return (hAsync(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     hAsync("section", null,
       hAsync("header", { class: { [CSS$i.sticky]: true } },
-        filterEnabled ? (hAsync("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (hAsync("calcite-filter", { "aria-label": filterPlaceholder, dir: getElementDir(el), disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         hAsync("slot", { name: SLOTS$b.menuActions })),
       loading || disabled ? hAsync("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));
@@ -22347,7 +22315,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*/.sc-calcite-popover:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-popover{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-popover{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-popover{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-popover{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-popover{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-popover:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-popover-h{display:none}/*!@:host*/.sc-calcite-popover-h{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-popover{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*/[data-popper-placement^=bottom].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@:host([data-popper-placement^=top]) .calcite-popper-anim*/[data-popper-placement^=top].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@:host([data-popper-placement^=left]) .calcite-popper-anim*/[data-popper-placement^=left].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@:host([data-popper-placement^=right]) .calcite-popper-anim*/[data-popper-placement^=right].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@:host([data-popper-placement]) .calcite-popper-anim--active*/[data-popper-placement].sc-calcite-popover-h .calcite-popper-anim--active.sc-calcite-popover{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@.arrow,\n.arrow::before*/.arrow.sc-calcite-popover,.arrow.sc-calcite-popover::before{position:absolute;width:8px;height:8px;z-index:-1}/*!@.arrow::before*/.arrow.sc-calcite-popover::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*/[data-popper-placement^=top].sc-calcite-popover-h .arrow.sc-calcite-popover{bottom:-4px}/*!@:host([data-popper-placement^=bottom]) .arrow*/[data-popper-placement^=bottom].sc-calcite-popover-h .arrow.sc-calcite-popover{top:-4px}/*!@:host([data-popper-placement^=left]) .arrow*/[data-popper-placement^=left].sc-calcite-popover-h .arrow.sc-calcite-popover{right:-4px}/*!@:host([data-popper-placement^=right]) .arrow*/[data-popper-placement^=right].sc-calcite-popover-h .arrow.sc-calcite-popover{left:-4px}/*!@:host*/.sc-calcite-popover-h{pointer-events:none}/*!@:host([open])*/[open].sc-calcite-popover-h{pointer-events:initial}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-popover{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*/.arrow.sc-calcite-popover::before{outline:1px solid var(--calcite-ui-border-3)}/*!@.header*/.header.sc-calcite-popover{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*/.heading.sc-calcite-popover{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*/.container.sc-calcite-popover{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*/.container.has-header.sc-calcite-popover{-ms-flex-direction:column;flex-direction:column}/*!@.content*/.content.sc-calcite-popover{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*/.calcite--rtl.sc-calcite-popover .close-button.sc-calcite-popover{border-radius:0.25rem 0 0 0.25rem}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-popover-s>calcite-panel,.sc-calcite-popover-s>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*/.sc-calcite-popover:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-popover{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-popover{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-popover{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-popover{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-popover{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-popover:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-popover-h{display:none}/*!@:host*/.sc-calcite-popover-h{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-popover{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*/[data-popper-placement^=bottom].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@:host([data-popper-placement^=top]) .calcite-popper-anim*/[data-popper-placement^=top].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@:host([data-popper-placement^=left]) .calcite-popper-anim*/[data-popper-placement^=left].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@:host([data-popper-placement^=right]) .calcite-popper-anim*/[data-popper-placement^=right].sc-calcite-popover-h .calcite-popper-anim.sc-calcite-popover{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@:host([data-popper-placement]) .calcite-popper-anim--active*/[data-popper-placement].sc-calcite-popover-h .calcite-popper-anim--active.sc-calcite-popover{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@.arrow,\n.arrow::before*/.arrow.sc-calcite-popover,.arrow.sc-calcite-popover::before{position:absolute;width:8px;height:8px;z-index:-1}/*!@.arrow::before*/.arrow.sc-calcite-popover::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*/[data-popper-placement^=top].sc-calcite-popover-h .arrow.sc-calcite-popover{bottom:-4px}/*!@:host([data-popper-placement^=bottom]) .arrow*/[data-popper-placement^=bottom].sc-calcite-popover-h .arrow.sc-calcite-popover{top:-4px}/*!@:host([data-popper-placement^=left]) .arrow*/[data-popper-placement^=left].sc-calcite-popover-h .arrow.sc-calcite-popover{right:-4px}/*!@:host([data-popper-placement^=right]) .arrow*/[data-popper-placement^=right].sc-calcite-popover-h .arrow.sc-calcite-popover{left:-4px}/*!@:host*/.sc-calcite-popover-h{pointer-events:none}/*!@:host([open])*/[open].sc-calcite-popover-h{pointer-events:initial}/*!@.calcite-popper-anim*/.calcite-popper-anim.sc-calcite-popover{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*/.arrow.sc-calcite-popover::before{outline:1px solid var(--calcite-ui-border-3)}/*!@.header*/.header.sc-calcite-popover{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*/.heading.sc-calcite-popover{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*/.container.sc-calcite-popover{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*/.container.has-header.sc-calcite-popover{-ms-flex-direction:column;flex-direction:column}/*!@.content*/.content.sc-calcite-popover{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*/.calcite--rtl.sc-calcite-popover .close-button.sc-calcite-popover{border-radius:0.25rem 0 0 0.25rem}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-popover-s>calcite-panel,.sc-calcite-popover-s>calcite-flow{height:100%}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -22888,7 +22856,7 @@ class CalciteRadioButton {
     };
     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;
@@ -22898,7 +22866,7 @@ class CalciteRadioButton {
         return;
       }
       let adjustedKey = key;
-      if (getElementDir(el) === "rtl") {
+      if (getElementStyleDir(el) === "rtl") {
         if (key === "ArrowRight") {
           adjustedKey = "ArrowLeft";
         }
@@ -23226,7 +23194,7 @@ class CalciteRadioGroup {
     //--------------------------------------------------------------------------
     this.handleClick = (event) => {
       if (event.target.localName === "calcite-radio-group-item") {
-        this.selectItem(event.target);
+        this.selectItem(event.target, true);
       }
     };
   }
@@ -23245,7 +23213,6 @@ class CalciteRadioGroup {
       .pop();
     if (match) {
       this.selectItem(match);
-      this.calciteRadioGroupChange.emit(match.value);
     }
     else if (items[0]) {
       items[0].tabIndex = 0;
@@ -23256,7 +23223,7 @@ class CalciteRadioGroup {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  connectedCallback() {
+  componentWillLoad() {
     const items = this.getItems();
     const lastChecked = Array.from(items)
       .filter((item) => item.checked)
@@ -23267,6 +23234,8 @@ class CalciteRadioGroup {
     else if (items[0]) {
       items[0].tabIndex = 0;
     }
+  }
+  connectedCallback() {
     connectLabel(this);
     connectForm(this);
   }
@@ -23274,29 +23243,23 @@ class CalciteRadioGroup {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  componentDidLoad() {
-    this.hasLoaded = true;
-  }
   render() {
     return (hAsync(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null }, hAsync("slot", null), hAsync(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";
       }
@@ -23316,17 +23279,17 @@ class CalciteRadioGroup {
       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;
@@ -23353,7 +23316,7 @@ class CalciteRadioGroup {
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
-  selectItem(selected) {
+  selectItem(selected, emit = false) {
     if (selected === this.selectedItem) {
       return;
     }
@@ -23367,6 +23330,9 @@ class CalciteRadioGroup {
       item.tabIndex = matches ? 0 : -1;
       if (matches) {
         match = item;
+        if (emit) {
+          this.calciteRadioGroupChange.emit(match.value);
+        }
       }
     });
     this.selectedItem = match;
@@ -23829,6 +23795,7 @@ class CalciteSelect {
     this.updateNativeElement(optionOrGroup, nativeEl);
     if (isOption(optionOrGroup) && optionOrGroup.selected) {
       this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
     }
   }
   //--------------------------------------------------------------------------
@@ -23868,7 +23835,7 @@ class CalciteSelect {
       }
     });
     if (futureSelected) {
-      requestAnimationFrame(() => (this.selectedOption = futureSelected));
+      this.selectedOption = futureSelected;
     }
   }
   toNativeElement(optionOrGroup) {
@@ -24163,7 +24130,7 @@ class CalciteShellPanel {
     };
     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",
@@ -24178,15 +24145,20 @@ class CalciteShellPanel {
       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;
@@ -24211,9 +24183,13 @@ class CalciteShellPanel {
     };
     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();
@@ -24649,7 +24625,7 @@ class CalciteSlider {
     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;
@@ -28419,7 +28395,7 @@ class CalciteStepper {
     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) {
@@ -28654,7 +28630,7 @@ class CalciteStepperItem {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (!this.disabled && e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();
@@ -28775,7 +28751,7 @@ class CalciteSwitch {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
       }
@@ -29068,7 +29044,7 @@ class CalciteTabNav {
     }
   }
   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 };
@@ -29125,7 +29101,7 @@ class CalciteTabNav {
   }
   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;
@@ -29295,14 +29271,14 @@ class CalciteTabTitle {
     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 {
@@ -29310,7 +29286,7 @@ class CalciteTabTitle {
         }
         break;
       case "ArrowLeft":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusPrevious.emit();
         }
         else {
@@ -30010,7 +29986,7 @@ class CalciteTimePicker {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newHour;
@@ -30098,7 +30074,7 @@ class CalciteTimePicker {
       }
     };
     this.meridiemKeyDownHandler = (event) => {
-      switch (getKey(event.key)) {
+      switch (event.key) {
         case "a":
           this.setTime("meridiem", "AM");
           break;
@@ -30134,7 +30110,7 @@ class CalciteTimePicker {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
@@ -30182,7 +30158,7 @@ class CalciteTimePicker {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
@@ -30291,7 +30267,7 @@ class CalciteTimePicker {
     this.calciteTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
@@ -30350,7 +30326,7 @@ class CalciteTimePicker {
     (_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();
     }
@@ -30775,7 +30751,7 @@ class CalciteTipManager {
   //
   // --------------------------------------------------------------------------
   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;
@@ -31154,7 +31130,7 @@ class CalciteTooltipManager {
   //
   //--------------------------------------------------------------------------
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape") {
+    if (event.key === "Escape") {
       const { tooltipEl } = this;
       if (tooltipEl) {
         this.clearHoverTimeout(tooltipEl);
@@ -31575,7 +31551,7 @@ class CalciteTreeItem {
   }
   keyDownHandler(e) {
     let root;
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
           modifyCurrentSelection: e.shiftKey,