@esri/calcite-components 1.0.0-next.430 → 1.0.0-next.433

package/hydrate/index.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.429
+ * v1.0.0-next.433
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v2.14.2 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v2.15.0 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -15213,8 +15213,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 +15240,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 +15369,6 @@ class Combobox {
      * @default "Remove tag"
      */
     this.intlRemoveTag = TEXT$f.removeTag;
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
@@ -15371,6 +15390,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 +15637,9 @@ class Combobox {
       this.updateItems();
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -15666,6 +15694,7 @@ class Combobox {
     this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.setFilteredPlacements();
   }
   componentWillLoad() {
     this.updateItems();
@@ -15703,7 +15732,7 @@ class Combobox {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -16031,6 +16060,7 @@ class Combobox {
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "value": ["valueHandler"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "selectedItems": ["selectedItemsHandler"],
     "text": ["textHandler"]
   }; }
@@ -17579,11 +17609,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 +17618,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 +17701,9 @@ class Dropdown {
       this.active = false;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
@@ -17686,6 +17720,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 +17837,7 @@ class Dropdown {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -17897,6 +17932,7 @@ class Dropdown {
   static get watchers() { return {
     "active": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],
     "placement": ["placementHandler"]
   }; }
@@ -19873,6 +19909,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 +20017,9 @@ class InputDatePicker {
       this.end = undefined;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   onMinChanged(min) {
     this.minAsDate = dateFromISO(min);
   }
@@ -20051,6 +20101,7 @@ class InputDatePicker {
     this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.setFilteredPlacements();
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -20095,11 +20146,6 @@ class InputDatePicker {
         : startWrapper || endWrapper;
     this.createPopper();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
@@ -20109,7 +20155,7 @@ class InputDatePicker {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -20270,6 +20316,7 @@ class InputDatePicker {
   static get watchers() { return {
     "disabled": ["handleDisabledChange"],
     "value": ["valueHandler"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
     "active": ["activeHandler"],
@@ -23273,6 +23320,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 +23376,9 @@ class Popover {
       }
     };
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   offsetDistanceOffsetHandler() {
     this.reposition();
   }
@@ -23344,6 +23400,9 @@ class Popover {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setFilteredPlacements();
+  }
   componentWillLoad() {
     this.setUpReferenceElement();
   }
@@ -23394,14 +23453,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 +23533,7 @@ class Popover {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "flipPlacements": ["flipPlacementsHandler"],
     "offsetDistance": ["offsetDistanceOffsetHandler"],
     "offsetSkidding": ["offsetSkiddingHandler"],
     "open": ["openHandler"],
@@ -25951,7 +26011,7 @@ class Slider {
 }
 
 /**!
- * Sortable 1.14.0
+ * Sortable 1.15.0
  * @author	RubaXa   <trash@rubaxa.org>
  * @author	owenm    <owen23355@gmail.com>
  * @license MIT
@@ -26079,7 +26139,7 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var version = "1.14.0";
+var version = "1.15.0";
 
 function userAgent(pattern) {
   if (typeof window !== 'undefined' && window.navigator) {
@@ -27000,11 +27060,11 @@ supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in
   return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2;
 },
 
-/**
- * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold.
- * @param  {Number} x      X position
- * @param  {Number} y      Y position
- * @return {HTMLElement}   Element of the first found nearest Sortable
+/**
+ * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold.
+ * @param  {Number} x      X position
+ * @param  {Number} y      Y position
+ * @return {HTMLElement}   Element of the first found nearest Sortable
  */
 _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
   var ret;
@@ -27070,7 +27130,7 @@ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
 }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position
 
 
-if (documentExists) {
+if (documentExists && !ChromeForAndroid) {
   document.addEventListener('click', function (evt) {
     if (ignoreNextClick) {
       evt.preventDefault();
@@ -27112,10 +27172,10 @@ var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) {
     dragEl.parentNode[expando]._isOutsideThisEl(evt.target);
   }
 };
-/**
- * @class  Sortable
- * @param  {HTMLElement}  el
- * @param  {Object}       [options]
+/**
+ * @class  Sortable
+ * @param  {HTMLElement}  el
+ * @param  {Object}       [options]
  */
 
 
@@ -27689,6 +27749,7 @@ Sortable.prototype =
 
     if (!Sortable.eventCanceled) {
       cloneEl = clone(dragEl);
+      cloneEl.removeAttribute("id");
       cloneEl.draggable = false;
       cloneEl.style['will-change'] = '';
 
@@ -27930,7 +27991,14 @@ Sortable.prototype =
 
         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
           capture();
-          el.appendChild(dragEl);
+
+          if (elLastChild && elLastChild.nextSibling) {
+            // the last draggable element is not the last node
+            el.insertBefore(dragEl, elLastChild.nextSibling);
+          } else {
+            el.appendChild(dragEl);
+          }
+
           parentEl = el; // actualization
 
           changed();
@@ -28253,9 +28321,9 @@ Sortable.prototype =
     }
   },
 
-  /**
-   * Serializes the item into an array of string.
-   * @returns {String[]}
+  /**
+   * Serializes the item into an array of string.
+   * @returns {String[]}
    */
   toArray: function toArray() {
     var order = [],
@@ -28276,9 +28344,9 @@ Sortable.prototype =
     return order;
   },
 
-  /**
-   * Sorts the elements according to the array.
-   * @param  {String[]}  order  order of the items
+  /**
+   * Sorts the elements according to the array.
+   * @param  {String[]}  order  order of the items
    */
   sort: function sort(order, useAnimation) {
     var items = {},
@@ -28300,29 +28368,29 @@ Sortable.prototype =
     useAnimation && this.animateAll();
   },
 
-  /**
-   * Save the current sorting
+  /**
+   * Save the current sorting
    */
   save: function save() {
     var store = this.options.store;
     store && store.set && store.set(this);
   },
 
-  /**
-   * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-   * @param   {HTMLElement}  el
-   * @param   {String}       [selector]  default: `options.draggable`
-   * @returns {HTMLElement|null}
+  /**
+   * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
+   * @param   {HTMLElement}  el
+   * @param   {String}       [selector]  default: `options.draggable`
+   * @returns {HTMLElement|null}
    */
   closest: function closest$1(el, selector) {
     return closest(el, selector || this.options.draggable, this.el, false);
   },
 
-  /**
-   * Set/get option
-   * @param   {string} name
-   * @param   {*}      [value]
-   * @returns {*}
+  /**
+   * Set/get option
+   * @param   {string} name
+   * @param   {*}      [value]
+   * @returns {*}
    */
   option: function option(name, value) {
     var options = this.options;
@@ -28344,8 +28412,8 @@ Sortable.prototype =
     }
   },
 
-  /**
-   * Destroy
+  /**
+   * Destroy
    */
   destroy: function destroy() {
     pluginEvent('destroy', this);
@@ -28522,11 +28590,11 @@ function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, inv
 
   return 0;
 }
-/**
- * Gets the direction dragEl must be swapped relative to target in order to make it
- * seem that dragEl has been "inserted" into that element's position
- * @param  {HTMLElement} target       The target whose position dragEl is being inserted at
- * @return {Number}                   Direction dragEl must be swapped
+/**
+ * Gets the direction dragEl must be swapped relative to target in order to make it
+ * seem that dragEl has been "inserted" into that element's position
+ * @param  {HTMLElement} target       The target whose position dragEl is being inserted at
+ * @return {Number}                   Direction dragEl must be swapped
  */
 
 
@@ -28537,11 +28605,11 @@ function _getInsertDirection(target) {
     return -1;
   }
 }
-/**
- * Generate id
- * @param   {HTMLElement} el
- * @returns {String}
- * @private
+/**
+ * Generate id
+ * @param   {HTMLElement} el
+ * @returns {String}
+ * @private
  */
 
 
@@ -28605,18 +28673,18 @@ Sortable.utils = {
   detectDirection: _detectDirection,
   getChild: getChild
 };
-/**
- * Get the Sortable instance of an element
- * @param  {HTMLElement} element The element
- * @return {Sortable|undefined}         The instance of Sortable
+/**
+ * Get the Sortable instance of an element
+ * @param  {HTMLElement} element The element
+ * @return {Sortable|undefined}         The instance of Sortable
  */
 
 Sortable.get = function (element) {
   return element[expando];
 };
-/**
- * Mount a plugin to Sortable
- * @param  {...SortablePlugin|SortablePlugin[]} plugins       Plugins being mounted
+/**
+ * Mount a plugin to Sortable
+ * @param  {...SortablePlugin|SortablePlugin[]} plugins       Plugins being mounted
  */
 
 
@@ -28635,10 +28703,10 @@ Sortable.mount = function () {
     PluginManager.mount(plugin);
   });
 };
-/**
- * Create sortable instance
- * @param {HTMLElement}  el
- * @param {Object}      [options]
+/**
+ * Create sortable instance
+ * @param {HTMLElement}  el
+ * @param {Object}      [options]
  */
 
 
@@ -29897,6 +29965,7 @@ class TabNav {
     /** @internal Parent tabs component bordered value when layout is "inline" */
     this.bordered = false;
     this.animationActiveDuration = 0.3;
+    this.resizeObserver = createObserver();
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -29932,7 +30001,13 @@ class TabNav {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.parentTabsEl = this.el.closest("calcite-tabs");
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     const storageKey = `calcite-tab-nav-${this.storageId}`;
@@ -29979,12 +30054,6 @@ class TabNav {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  resizeHandler() {
-    // remove active indicator transition duration during resize to prevent wobble
-    this.activeIndicatorEl.style.transitionDuration = "0s";
-    this.updateActiveWidth();
-    this.updateOffsetPosition();
-  }
   focusPreviousTabHandler(e) {
     const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
     const previousTab = this.enabledTabTitles[currentIndex - 1] ||
@@ -30074,7 +30143,7 @@ class TabNav {
       "selectedTab": [32],
       "selectedTabEl": [32]
     },
-    "$listeners$": [[9, "resize", "resizeHandler"], [0, "calciteTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteTabsFocusNext", "focusNextTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteTabTitleRegister", "updateTabTitles"], [16, "calciteTabChange", "globalTabChangeHandler"]],
+    "$listeners$": [[0, "calciteTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteTabsFocusNext", "focusNextTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteTabTitleRegister", "updateTabTitles"], [16, "calciteTabChange", "globalTabChangeHandler"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["scale", "scale"], ["layout", "layout"], ["position", "position"], ["bordered", "bordered"]]
   }; }
@@ -30464,7 +30533,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.