@esri/calcite-components 1.0.0-next.431 → 1.0.0-next.434

package/dist/types/components/combobox/combobox.d.ts

@@ -60,6 +60,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * Defines the available placements that can be used when a flip occurs.
    */
   flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   documentClickHandler(event: Event): void;
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
   /** Updates the position of the component. */
@@ -99,6 +100,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
+  filteredFlipPlacements: ComputedPlacement[];
   internalValueChangeFlag: boolean;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
@@ -127,6 +129,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   private listContainerEl;
   private ignoreSelectedEventsFlag;
   private activeTransitionProp;
+  setFilteredPlacements: () => void;
   getValue: () => string | string[];
   onLabelClick: () => void;
   keydownHandler: (event: KeyboardEvent) => void;

package/dist/types/components/dropdown/dropdown.d.ts

@@ -25,6 +25,7 @@ export declare class Dropdown implements InteractiveComponent {
    * Defines the available placements that can be used when a flip occurs.
    */
   flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   /**
    specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
    this value does not include groupTitles passed to calcite-dropdown-group
@@ -71,6 +72,7 @@ export declare class Dropdown implements InteractiveComponent {
   mouseLeaveHandler(): void;
   calciteDropdownItemKeyEvent(e: CustomEvent<ItemKeyboardEvent>): void;
   handleItemSelect(event: CustomEvent): void;
+  filteredFlipPlacements: ComputedPlacement[];
   private items;
   /** trigger elements */
   private triggers;
@@ -81,6 +83,7 @@ export declare class Dropdown implements InteractiveComponent {
   private scrollerEl;
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;
+  setFilteredPlacements: () => void;
   updateItems: () => void;
   setMaxScrollerHeight: () => void;
   setScrollerEl: (scrollerEl: HTMLDivElement) => void;

package/dist/types/components/filter/filter.d.ts

@@ -50,10 +50,10 @@ export declare class Filter implements InteractiveComponent {
   componentWillLoad(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  filter: import("lodash").DebouncedFunc<(value: string) => void>;
+  filter: import("lodash").DebouncedFunc<(value: string, emit?: any) => void>;
   inputHandler: (event: CustomEvent) => void;
   keyDownHandler: ({ key }: KeyboardEvent) => void;
   clear: () => void;
-  updateFiltered(filtered: any[]): void;
+  updateFiltered(filtered: any[], emit?: boolean): void;
   render(): VNode;
 }

package/dist/types/components/filter/resources.d.ts

@@ -11,3 +11,4 @@ export declare const ICONS: {
   search: string;
   close: string;
 };
+export declare const DEBOUNCE_TIMEOUT = 250;

package/dist/types/components/input-date-picker/input-date-picker.d.ts

@@ -20,6 +20,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * Defines the available placements that can be used when a flip occurs.
    */
   flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   /**
    * Number at which section headings should start for this component.
    */
@@ -134,6 +135,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;
+  filteredFlipPlacements: ComputedPlacement[];
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
   defaultValue: InputDatePicker["value"];
@@ -148,6 +150,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private endWrapper;
   private activeTransitionProp;
   setReferenceEl(): void;
+  setFilteredPlacements: () => void;
   onLabelClick(): void;
   transitionEnd: (event: TransitionEvent) => void;
   setStartInput: (el: HTMLCalciteInputElement) => void;

package/dist/types/components/popover/popover.d.ts

@@ -27,6 +27,7 @@ export declare class Popover {
    * Defines the available placements that can be used when a flip occurs.
    */
   flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   /**
    * Heading text.
    */
@@ -70,6 +71,7 @@ export declare class Popover {
    * @default "Close"
    */
   intlClose: string;
+  filteredFlipPlacements: ComputedPlacement[];
   el: HTMLCalcitePopoverElement;
   effectiveReferenceElement: HTMLElement;
   popper: Popper;
@@ -77,6 +79,7 @@ export declare class Popover {
   closeButtonEl: HTMLCalciteActionElement;
   guid: string;
   private activeTransitionProp;
+  connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
@@ -90,6 +93,7 @@ export declare class Popover {
   setFocus(focusId?: "close-button"): Promise<void>;
   /** Toggles the popover's open property. */
   toggle(value?: boolean): Promise<void>;
+  setFilteredPlacements: () => void;
   setUpReferenceElement: () => void;
   getId: () => string;
   setExpandedAttr: () => void;

package/dist/types/components.d.ts

@@ -497,7 +497,7 @@ export namespace Components {
         /**
           * The type attribute to apply to the button
          */
-        "type"?: string;
+        "type": string;
         /**
           * specify the width of the button, defaults to auto
          */

package/dist/types/utils/popper.d.ts

@@ -5,15 +5,16 @@ export declare type ComputedPlacement = PopperComputedPlacement;
 export declare type PopperPlacement = Placement | PlacementRtl | VariationRtl;
 export declare type OverlayPositioning = PositioningStrategy;
 export declare const popperPlacements: PopperPlacement[];
-export declare const popperFlipPlacements: ComputedPlacement[];
+export declare const popperComputedPlacements: ComputedPlacement[];
 export declare type MenuPlacement = Extract<PopperPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;
 export declare const defaultMenuPlacement: MenuPlacement;
 export declare const popperMenuPlacements: MenuPlacement[];
-export declare const popperMenuFlipPlacements: ComputedPlacement[];
+export declare const popperMenuComputedPlacements: ComputedPlacement[];
 export declare const CSS: {
   animation: string;
   animationActive: string;
 };
+export declare function filterComputedPlacements(placements: string[], el: HTMLElement): PopperComputedPlacement[];
 export declare function getPlacement(el: HTMLElement, placement: PopperPlacement): Placement;
 export declare function createPopper({ referenceEl, el, placement, overlayPositioning, modifiers }: {
   el: HTMLElement;

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.430
+ * v1.0.0-next.434
  */
 'use strict';
 
@@ -9361,6 +9361,8 @@ class Button {
     this.scale = "m";
     /** is the button a child of a calcite-split-button */
     this.splitChild = false;
+    /** The type attribute to apply to the button */
+    this.type = "button";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
     /** watches for changing text content **/
@@ -9372,14 +9374,15 @@ class Button {
     // act on a requested or nearby form based on type
     this.handleClick = () => {
       const { formEl, type } = this;
+      if (this.href) {
+        return;
+      }
       // this.type refers to type attribute, not child element type
-      if (!this.href && type !== "button") {
-        if (type === "submit") {
-          formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
-        }
-        else if (type === "reset") {
-          formEl === null || formEl === void 0 ? void 0 : formEl.reset();
-        }
+      if (type === "submit") {
+        formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
+      }
+      else if (type === "reset") {
+        formEl === null || formEl === void 0 ? void 0 : formEl.reset();
       }
     };
   }
@@ -15213,8 +15216,22 @@ var createPopper$1 = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
+const popperComputedPlacements = [
+  "top",
+  "bottom",
+  "right",
+  "left",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end"
+];
 const defaultMenuPlacement = "bottom-leading";
-const popperMenuFlipPlacements = [
+const popperMenuComputedPlacements = [
   "top-start",
   "top",
   "top-end",
@@ -15226,6 +15243,16 @@ const CSS$D = {
   animation: "calcite-popper-anim",
   animationActive: "calcite-popper-anim--active"
 };
+function filterComputedPlacements(placements, el) {
+  const filteredPlacements = placements.filter((placement) => popperComputedPlacements.includes(placement));
+  if (filteredPlacements.length !== placements.length) {
+    console.warn(`${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${popperComputedPlacements
+      .map((placement) => `"${placement}"`)
+      .join(", ")
+      .trim()}`, { el });
+  }
+  return filteredPlacements;
+}
 function getPlacement(el, placement) {
   const placements = ["left", "right"];
   const variations = ["start", "end"];
@@ -15345,11 +15372,6 @@ class Combobox {
      * @default "Remove tag"
      */
     this.intlRemoveTag = TEXT$f.removeTag;
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
@@ -15371,6 +15393,12 @@ class Combobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.getValue = () => {
       const items = this.selectedItems.map((item) => item === null || item === void 0 ? void 0 : item.value.toString());
       return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
@@ -15612,6 +15640,9 @@ class Combobox {
       this.updateItems();
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -15666,6 +15697,7 @@ class Combobox {
     this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.setFilteredPlacements();
   }
   componentWillLoad() {
     this.updateItems();
@@ -15703,7 +15735,7 @@ class Combobox {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -16031,6 +16063,7 @@ class Combobox {
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "value": ["valueHandler"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "selectedItems": ["selectedItemsHandler"],
     "text": ["textHandler"]
   }; }
@@ -17579,11 +17612,6 @@ class Dropdown {
     this.type = "click";
     /** specify the width of dropdown, defaults to m */
     this.width = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.items = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver();
@@ -17593,6 +17621,12 @@ class Dropdown {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.updateItems = () => {
       this.updateSelectedItems();
       this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
@@ -17670,6 +17704,9 @@ class Dropdown {
       this.active = false;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
@@ -17686,6 +17723,7 @@ class Dropdown {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
     this.updateItems();
+    this.setFilteredPlacements();
   }
   componentDidLoad() {
     this.reposition();
@@ -17802,7 +17840,7 @@ class Dropdown {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -17897,6 +17935,7 @@ class Dropdown {
   static get watchers() { return {
     "active": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],
     "placement": ["placementHandler"]
   }; }
@@ -18296,10 +18335,10 @@ const ICONS$8 = {
   search: "search",
   close: "x"
 };
+const DEBOUNCE_TIMEOUT = 250;
 
 const filterCss = "@-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-filter:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-filter{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-filter{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-filter{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-filter{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-filter{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:host*/.sc-calcite-filter-h{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-filter-h *.sc-calcite-filter{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:root*/.sc-calcite-filter:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-filter-h{display:none}/*!@:host*/.sc-calcite-filter-h{display:-ms-flexbox;display:flex;width:100%}/*!@:host([disabled])*/[disabled].sc-calcite-filter-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-filter-h[disabled] .sc-calcite-filter-s>[calcite-hydrated][disabled],[disabled].sc-calcite-filter-h [calcite-hydrated][disabled].sc-calcite-filter{opacity:1}/*!@.container*/.container.sc-calcite-filter{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem}/*!@label*/label.sc-calcite-filter{position:relative;margin-left:0.25rem;margin-right:0.25rem;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;overflow:hidden}/*!@input[type=text]*/input[type=text].sc-calcite-filter{margin-bottom:0.25rem;width:100%;border-style:none;background-color:transparent;padding-top:0.25rem;padding-bottom:0.25rem;padding-right:0.25rem;padding-left:1.5rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);-webkit-transition:padding var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing)}/*!@input[type=text]::-ms-clear*/input[type=text].sc-calcite-filter::-ms-clear{display:none}/*!@calcite-input*/calcite-input.sc-calcite-filter{width:100%}/*!@.search-icon*/.search-icon.sc-calcite-filter{position:absolute;display:-ms-flexbox;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;-webkit-transition:left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);transition:left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}/*!@input[type=text]:focus*/input[type=text].sc-calcite-filter:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}/*!@input[type=text]:focus ~ .search-icon*/input[type=text].sc-calcite-filter:focus~.search-icon.sc-calcite-filter{inset-inline-start:calc(1rem * -1);opacity:0}/*!@.clear-button*/.clear-button.sc-calcite-filter{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}/*!@.clear-button:hover, .clear-button:focus*/.clear-button.sc-calcite-filter:hover,.clear-button.sc-calcite-filter:focus{color:var(--calcite-ui-text-1)}";
 
-const filterDebounceInMs = 250;
 class Filter {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -18337,10 +18376,10 @@ class Filter {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.filter = debounce$1((value) => {
+    this.filter = debounce$1((value, emit = false) => {
       const regex = new RegExp(value, "i");
       if (this.items.length === 0) {
-        this.updateFiltered([]);
+        this.updateFiltered([], emit);
         return;
       }
       const find = (input, RE) => {
@@ -18363,11 +18402,12 @@ class Filter {
       const result = this.items.filter((item) => {
         return find(item, regex);
       });
-      this.updateFiltered(result);
-    }, filterDebounceInMs);
+      this.updateFiltered(result, emit);
+    }, DEBOUNCE_TIMEOUT);
     this.inputHandler = (event) => {
       const target = event.target;
       this.value = target.value;
+      this.filter(target.value, true);
     };
     this.keyDownHandler = ({ key }) => {
       if (key === "Escape") {
@@ -18376,6 +18416,7 @@ class Filter {
     };
     this.clear = () => {
       this.value = "";
+      this.filter("", true);
       this.setFocus();
     };
   }
@@ -18410,10 +18451,12 @@ class Filter {
   async setFocus() {
     focusElement(this.textInput);
   }
-  updateFiltered(filtered) {
+  updateFiltered(filtered, emit = false) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit();
+    if (emit) {
+      this.calciteFilterChange.emit();
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -19873,6 +19916,17 @@ class InputDatePicker {
     this.layout = "horizontal";
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active
@@ -19970,6 +20024,9 @@ class InputDatePicker {
       this.end = undefined;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   onMinChanged(min) {
     this.minAsDate = dateFromISO(min);
   }
@@ -20051,6 +20108,7 @@ class InputDatePicker {
     this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.setFilteredPlacements();
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -20095,11 +20153,6 @@ class InputDatePicker {
         : startWrapper || endWrapper;
     this.createPopper();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
@@ -20109,7 +20162,7 @@ class InputDatePicker {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -20270,6 +20323,7 @@ class InputDatePicker {
   static get watchers() { return {
     "disabled": ["handleDisabledChange"],
     "value": ["valueHandler"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
     "active": ["activeHandler"],
@@ -23273,6 +23327,12 @@ class Popover {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.setUpReferenceElement = () => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
@@ -23323,6 +23383,9 @@ class Popover {
       }
     };
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   offsetDistanceOffsetHandler() {
     this.reposition();
   }
@@ -23344,6 +23407,9 @@ class Popover {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setFilteredPlacements();
+  }
   componentWillLoad() {
     this.setUpReferenceElement();
   }
@@ -23394,14 +23460,14 @@ class Popover {
       : referenceElement) || null);
   }
   getModifiers() {
-    const { arrowEl, flipPlacements, disableFlip, disablePointer, offsetDistance, offsetSkidding } = this;
+    const { arrowEl, disableFlip, disablePointer, offsetDistance, offsetSkidding, filteredFlipPlacements } = this;
     const flipModifier = {
       name: "flip",
       enabled: !disableFlip
     };
-    if (flipPlacements) {
+    if (filteredFlipPlacements) {
       flipModifier.options = {
-        fallbackPlacements: flipPlacements
+        fallbackPlacements: filteredFlipPlacements
       };
     }
     const arrowModifier = {
@@ -23474,6 +23540,7 @@ class Popover {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "flipPlacements": ["flipPlacementsHandler"],
     "offsetDistance": ["offsetDistanceOffsetHandler"],
     "offsetSkidding": ["offsetSkiddingHandler"],
     "open": ["openHandler"],
@@ -29691,6 +29758,7 @@ class Switch {
       const key = e.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
+        e.preventDefault();
       }
     };
     this.clickHandler = () => {
@@ -29753,7 +29821,7 @@ class Switch {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (hAsync(Host, { onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "container", onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, hAsync("div", { class: "track" }, hAsync("div", { class: "handle" })), hAsync(HiddenFormInputSlot, { component: this }))));
+    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, hAsync("div", { class: "track" }, hAsync("div", { class: "handle" })), hAsync(HiddenFormInputSlot, { component: this }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -30473,7 +30541,7 @@ const SLOTS$3 = {
   contentEnd: "content-end"
 };
 
-const tileCss = "@-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-tile:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-tile{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-tile{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tile{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tile{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tile{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tile:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tile-h{display:none}/*!@:host*/.sc-calcite-tile-h{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host .container*/.sc-calcite-tile-h .container.sc-calcite-tile{pointer-events:none;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:0.5rem}/*!@:host .content*/.sc-calcite-tile-h .content.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:0.5rem;width:10%}/*!@:host .content-container*/.sc-calcite-tile-h .content-container.sc-calcite-tile{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;padding:0px;color:var(--calcite-ui-text-2);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}/*!@:host .content-slot-container*/.sc-calcite-tile-h .content-slot-container.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}/*!@:host .content-slot-container:first-child*/.sc-calcite-tile-h .content-slot-container.sc-calcite-tile:first-child{padding-right:0.75rem}/*!@:host .content-slot-container:last-child*/.sc-calcite-tile-h .content-slot-container.sc-calcite-tile:last-child{padding-left:0.75rem}/*!@:host .heading*/.sc-calcite-tile-h .heading.sc-calcite-tile{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host .large-visual*/.sc-calcite-tile-h .large-visual.sc-calcite-tile{-ms-flex-align:center;align-items:center;text-align:center;min-height:12rem}/*!@:host .large-visual .icon*/.sc-calcite-tile-h .large-visual.sc-calcite-tile .icon.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:end;align-self:flex-end}/*!@:host .large-visual .content-container*/.sc-calcite-tile-h .large-visual.sc-calcite-tile .content-container.sc-calcite-tile{-ms-flex-item-align:center;align-self:center}/*!@:host .description*/.sc-calcite-tile-h .description.sc-calcite-tile{pointer-events:none;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host(:not([embed]))*/.sc-calcite-tile-h:not([embed]){padding:0.75rem;-webkit-box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-shadow:0 0 0 1px var(--calcite-ui-border-2)}/*!@:host(:not([embed])[href]:hover)*/.sc-calcite-tile-h:not([embed])[href]:hover{cursor:pointer;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-brand);box-shadow:0 0 0 2px var(--calcite-ui-brand)}/*!@:host(:not([embed])[href]:active)*/.sc-calcite-tile-h:not([embed])[href]:active{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand);box-shadow:0 0 0 3px var(--calcite-ui-brand)}/*!@:host([icon][heading]:not([description]):not([embed]))*/[icon][heading].sc-calcite-tile-h:not([description]):not([embed]){padding:0px}/*!@:host([icon][heading]:not([description])) .icon*/[icon][heading].sc-calcite-tile-h:not([description]) .icon.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}/*!@:host([icon][heading]:not([description])) .large-visual*/[icon][heading].sc-calcite-tile-h:not([description]) .large-visual.sc-calcite-tile{text-align:center}/*!@:host([disabled])*/[disabled].sc-calcite-tile-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tile-h[disabled] .sc-calcite-tile-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tile-h [calcite-hydrated][disabled].sc-calcite-tile{opacity:1}/*!@:host(:hover) .heading, :host([active]) .heading*/.sc-calcite-tile-h:hover .heading.sc-calcite-tile,[active].sc-calcite-tile-h .heading.sc-calcite-tile{color:var(--calcite-ui-text-1)}/*!@:host(:hover) .description, :host([active]) .description*/.sc-calcite-tile-h:hover .description.sc-calcite-tile,[active].sc-calcite-tile-h .description.sc-calcite-tile{color:var(--calcite-ui-text-2)}";
+const tileCss = "@-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-tile:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-tile{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-tile{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tile{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tile{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tile{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tile:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tile-h{display:none}/*!@:host*/.sc-calcite-tile-h{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host .container*/.sc-calcite-tile-h .container.sc-calcite-tile{pointer-events:none;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:0.5rem}/*!@:host .content*/.sc-calcite-tile-h .content.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:0.5rem;width:10%}/*!@:host .content-container*/.sc-calcite-tile-h .content-container.sc-calcite-tile{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;padding:0px;color:var(--calcite-ui-text-2);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}/*!@:host .content-slot-container*/.sc-calcite-tile-h .content-slot-container.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}/*!@:host .content-slot-container:first-child*/.sc-calcite-tile-h .content-slot-container.sc-calcite-tile:first-child{padding-inline:0 0.75rem}/*!@:host .content-slot-container:last-child*/.sc-calcite-tile-h .content-slot-container.sc-calcite-tile:last-child{padding-inline:0.75rem 0}/*!@:host .heading*/.sc-calcite-tile-h .heading.sc-calcite-tile{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host .large-visual*/.sc-calcite-tile-h .large-visual.sc-calcite-tile{-ms-flex-align:center;align-items:center;text-align:center;min-height:12rem}/*!@:host .large-visual .icon*/.sc-calcite-tile-h .large-visual.sc-calcite-tile .icon.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:end;align-self:flex-end}/*!@:host .large-visual .content-container*/.sc-calcite-tile-h .large-visual.sc-calcite-tile .content-container.sc-calcite-tile{-ms-flex-item-align:center;align-self:center}/*!@:host .description*/.sc-calcite-tile-h .description.sc-calcite-tile{pointer-events:none;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host(:not([embed]))*/.sc-calcite-tile-h:not([embed]){padding:0.75rem;-webkit-box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-shadow:0 0 0 1px var(--calcite-ui-border-2)}/*!@:host(:not([embed])[href]:hover)*/.sc-calcite-tile-h:not([embed])[href]:hover{cursor:pointer;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-brand);box-shadow:0 0 0 2px var(--calcite-ui-brand)}/*!@:host(:not([embed])[href]:active)*/.sc-calcite-tile-h:not([embed])[href]:active{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand);box-shadow:0 0 0 3px var(--calcite-ui-brand)}/*!@:host([icon][heading]:not([description]):not([embed]))*/[icon][heading].sc-calcite-tile-h:not([description]):not([embed]){padding:0px}/*!@:host([icon][heading]:not([description])) .icon*/[icon][heading].sc-calcite-tile-h:not([description]) .icon.sc-calcite-tile{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}/*!@:host([icon][heading]:not([description])) .large-visual*/[icon][heading].sc-calcite-tile-h:not([description]) .large-visual.sc-calcite-tile{text-align:center}/*!@:host([disabled])*/[disabled].sc-calcite-tile-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tile-h[disabled] .sc-calcite-tile-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tile-h [calcite-hydrated][disabled].sc-calcite-tile{opacity:1}/*!@:host(:hover) .heading, :host([active]) .heading*/.sc-calcite-tile-h:hover .heading.sc-calcite-tile,[active].sc-calcite-tile-h .heading.sc-calcite-tile{color:var(--calcite-ui-text-1)}/*!@:host(:hover) .description, :host([active]) .description*/.sc-calcite-tile-h:hover .description.sc-calcite-tile,[active].sc-calcite-tile-h .description.sc-calcite-tile{color:var(--calcite-ui-text-2)}";
 
 /**
  * @slot content-start - A slot for adding non-actionable elements before the tile content.
@@ -32195,11 +32263,7 @@ class TooltipManager {
     this.hoverEvent(event, false);
   }
   clickHandler(event) {
-    const clickedTooltip = this.queryTooltip(event.composedPath());
-    this.clickedTooltip = clickedTooltip;
-    if (clickedTooltip) {
-      this.toggleTooltip(clickedTooltip, false);
-    }
+    this.clickedTooltip = this.queryTooltip(event.composedPath());
   }
   focusShow(event) {
     this.focusEvent(event, true);