@esri/calcite-components 1.4.0-next.15 → 1.4.0-next.17

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.4.0-next.15
+ * v1.4.0-next.17
  */
 'use strict';
 
@@ -4947,6 +4947,26 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
   /*hydrateAppClosure start*/
 
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
 const NAMESPACE = 'calcite';
 const BUILD = /* calcite */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
@@ -4957,7 +4977,14 @@ const CSS_UTILITY = {
   autoMode,
   darkMode,
   lightMode,
-  rtl: "calcite--rtl"
+  rtl: "calcite--rtl",
+  calciteAnimate: "calcite-animate",
+  calciteAnimateIn: "calcite-animate__in",
+  calciteAnimateInUp: "calcite-animate__in-up",
+  calciteAnimateInDown: "calcite-animate__in-down",
+  calciteAnimateInRight: "calcite-animate__in-right",
+  calciteAnimateInLeft: "calcite-animate__in-left",
+  calciteAnimateInScale: "calcite-animate__in-scale"
 };
 
 /**
@@ -5988,7 +6015,7 @@ function processMutations(mutations) {
 }
 
 /*!
-* tabbable 6.1.1
+* tabbable 6.1.2
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -7564,7 +7591,6 @@ class NumberStringFormat {
     // `numberFormatOptions` must be set in a component to create and cache the formatter.
     this._numberFormatOptions
       ? sanitizeExponentialNumberString(numberString, (nonExpoNumString) => nonExpoNumString
-        .trim()
         .replace(new RegExp(`[${this._minusSign}]`, "g"), "-")
         .replace(new RegExp(`[${this._group}]`, "g"), "")
         .replace(new RegExp(`[${this._decimal}]`, "g"), ".")
@@ -19233,7 +19259,9 @@ function dateFromLocalizedString(value, localeData) {
     return null;
   }
   const { separator } = localeData;
-  const { day, month, year } = parseDateString(value, localeData);
+  const parts = parseDateString(value, localeData);
+  const { day, month } = parts;
+  const year = parseCalendarYear(parts.year, localeData);
   const date = new Date(year, month, day);
   date.setFullYear(year);
   const validDay = day > 0;
@@ -19246,6 +19274,20 @@ function dateFromLocalizedString(value, localeData) {
   }
   return null;
 }
+function parseCalendarYear(year, localeData) {
+  return processCalendarYear(year, localeData, "read");
+}
+function formatCalendarYear(year, localeData) {
+  return processCalendarYear(year, localeData, "write");
+}
+function processCalendarYear(year, localeData, mode) {
+  if (localeData["default-calendar"] !== "buddhist") {
+    return year;
+  }
+  const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
+  const yearOffset = BUDDHIST_CALENDAR_YEAR_OFFSET * (mode === "read" ? -1 : 1);
+  return year + yearOffset;
+}
 /**
  * Retrieve day, month, and year strings from a localized string
  *
@@ -20291,7 +20333,6 @@ class DatePickerMonth {
   }; }
 }
 
-const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
 const CSS$K = {
   header: "header",
   month: "month",
@@ -20430,17 +20471,10 @@ class DatePickerMonthHeader {
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
   formatCalendarYear(year) {
-    const { localeData } = this;
-    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
-    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
-    return numberStringFormatter.localize(`${year + yearOffset}`);
+    return numberStringFormatter.localize(`${formatCalendarYear(year, this.localeData)}`);
   }
   parseCalendarYear(year) {
-    const { localeData } = this;
-    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
-    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
-    const parsedYear = Number(numberStringFormatter.delocalize(year)) - yearOffset;
-    return numberStringFormatter.localize(`${parsedYear}`);
+    return numberStringFormatter.localize(`${parseCalendarYear(Number(numberStringFormatter.delocalize(year)), this.localeData)}`);
   }
   getInRangeDate({ localizedYear, offset = 0 }) {
     const { min, max, activeDate } = this;
@@ -23175,7 +23209,7 @@ const CSS$y = {
 };
 
 /*!
-* focus-trap 7.4.0
+* focus-trap 7.4.2
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -23384,23 +23418,24 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   /**
    * Finds the index of the container that contains the element.
    * @param {HTMLElement} element
+   * @param {Event} [event]
    * @returns {number} Index of the container in either `state.containers` or
    *  `state.containerGroups` (the order/length of these lists are the same); -1
    *  if the element isn't found.
    */
-  var findContainerIndex = function findContainerIndex(element) {
+  var findContainerIndex = function findContainerIndex(element, event) {
+    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;
     // NOTE: search `containerGroups` because it's possible a group contains no tabbable
     //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
     //  and we still need to find the element in there
     return state.containerGroups.findIndex(function (_ref) {
       var container = _ref.container,
         tabbableNodes = _ref.tabbableNodes;
-      return container.contains(element) ||
-      // fall back to explicit tabbable search which will take into consideration any
+      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any
       //  web components if the `tabbableOptions.getShadowRoot` option was used for
       //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
       //  look inside web components even if open)
-      tabbableNodes.find(function (node) {
+      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {
         return node === element;
       });
     });
@@ -23561,7 +23596,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // so that it precedes the focus event.
   var checkPointerDown = function checkPointerDown(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       // allow the click since it ocurred inside the trap
       return;
     }
@@ -23594,7 +23629,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // In case focus escapes the trap for some strange reason, pull it back in.
   var checkFocusIn = function checkFocusIn(e) {
     var target = getActualTarget(e);
-    var targetContained = findContainerIndex(target) >= 0;
+    var targetContained = findContainerIndex(target, e) >= 0;
 
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
     if (targetContained || target instanceof Document) {
@@ -23621,7 +23656,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       // make sure the target is actually contained in a group
       // NOTE: the target may also be the container itself if it's focusable
       //  with tabIndex='-1' and was given initial focus
-      var containerIndex = findContainerIndex(target);
+      var containerIndex = findContainerIndex(target, event);
       var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
@@ -23722,7 +23757,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   };
   var checkClick = function checkClick(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       return;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {
@@ -25797,13 +25832,1091 @@ function parseTimeString(value) {
     second: null
   };
 }
+function toISOTimeString(value, includeSeconds = true) {
+  if (!isValidTime(value)) {
+    return "";
+  }
+  const { hour, minute, second } = parseTimeString(value);
+  let isoTimeString = `${formatTimePart(parseInt(hour))}:${formatTimePart(parseInt(minute))}`;
+  if (includeSeconds) {
+    isoTimeString += `:${formatTimePart(parseInt((includeSeconds && second) || "0"))}`;
+  }
+  return isoTimeString;
+}
 
 const CSS$v = {
   toggleIcon: "toggle-icon"
 };
 
+var SECONDS_A_MINUTE = 60;
+var SECONDS_A_HOUR = SECONDS_A_MINUTE * 60;
+var SECONDS_A_DAY = SECONDS_A_HOUR * 24;
+var SECONDS_A_WEEK = SECONDS_A_DAY * 7;
+var MILLISECONDS_A_SECOND = 1e3;
+var MILLISECONDS_A_MINUTE = SECONDS_A_MINUTE * MILLISECONDS_A_SECOND;
+var MILLISECONDS_A_HOUR = SECONDS_A_HOUR * MILLISECONDS_A_SECOND;
+var MILLISECONDS_A_DAY = SECONDS_A_DAY * MILLISECONDS_A_SECOND;
+var MILLISECONDS_A_WEEK = SECONDS_A_WEEK * MILLISECONDS_A_SECOND; // English locales
+
+var MS = 'millisecond';
+var S = 'second';
+var MIN = 'minute';
+var H = 'hour';
+var D = 'day';
+var W = 'week';
+var M = 'month';
+var Q = 'quarter';
+var Y = 'year';
+var DATE = 'date';
+var FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ssZ';
+var INVALID_DATE_STRING = 'Invalid Date'; // regex
+
+var REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/;
+var REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+
+// English [en]
+// We don't need weekdaysShort, weekdaysMin, monthsShort in en.js locale
+var en = {
+  name: 'en',
+  weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+  months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+  ordinal: function ordinal(n) {
+    var s = ['th', 'st', 'nd', 'rd'];
+    var v = n % 100;
+    return "[" + n + (s[(v - 20) % 10] || s[v] || s[0]) + "]";
+  }
+};
+
+var padStart = function padStart(string, length, pad) {
+  var s = String(string);
+  if (!s || s.length >= length) return string;
+  return "" + Array(length + 1 - s.length).join(pad) + string;
+};
+
+var padZoneStr = function padZoneStr(instance) {
+  var negMinutes = -instance.utcOffset();
+  var minutes = Math.abs(negMinutes);
+  var hourOffset = Math.floor(minutes / 60);
+  var minuteOffset = minutes % 60;
+  return "" + (negMinutes <= 0 ? '+' : '-') + padStart(hourOffset, 2, '0') + ":" + padStart(minuteOffset, 2, '0');
+};
+
+var monthDiff = function monthDiff(a, b) {
+  // function from moment.js in order to keep the same result
+  if (a.date() < b.date()) return -monthDiff(b, a);
+  var wholeMonthDiff = (b.year() - a.year()) * 12 + (b.month() - a.month());
+  var anchor = a.clone().add(wholeMonthDiff, M);
+  var c = b - anchor < 0;
+  var anchor2 = a.clone().add(wholeMonthDiff + (c ? -1 : 1), M);
+  return +(-(wholeMonthDiff + (b - anchor) / (c ? anchor - anchor2 : anchor2 - anchor)) || 0);
+};
+
+var absFloor = function absFloor(n) {
+  return n < 0 ? Math.ceil(n) || 0 : Math.floor(n);
+};
+
+var prettyUnit = function prettyUnit(u) {
+  var special = {
+    M: M,
+    y: Y,
+    w: W,
+    d: D,
+    D: DATE,
+    h: H,
+    m: MIN,
+    s: S,
+    ms: MS,
+    Q: Q
+  };
+  return special[u] || String(u || '').toLowerCase().replace(/s$/, '');
+};
+
+var isUndefined = function isUndefined(s) {
+  return s === undefined;
+};
+
+var U = {
+  s: padStart,
+  z: padZoneStr,
+  m: monthDiff,
+  a: absFloor,
+  p: prettyUnit,
+  u: isUndefined
+};
+
+var L = 'en'; // global locale
+
+var Ls = {}; // global loaded locale
+
+Ls[L] = en;
+
+var isDayjs = function isDayjs(d) {
+  return d instanceof Dayjs;
+}; // eslint-disable-line no-use-before-define
+
+
+var parseLocale = function parseLocale(preset, object, isLocal) {
+  var l;
+  if (!preset) return L;
+
+  if (typeof preset === 'string') {
+    var presetLower = preset.toLowerCase();
+
+    if (Ls[presetLower]) {
+      l = presetLower;
+    }
+
+    if (object) {
+      Ls[presetLower] = object;
+      l = presetLower;
+    }
+
+    var presetSplit = preset.split('-');
+
+    if (!l && presetSplit.length > 1) {
+      return parseLocale(presetSplit[0]);
+    }
+  } else {
+    var name = preset.name;
+    Ls[name] = preset;
+    l = name;
+  }
+
+  if (!isLocal && l) L = l;
+  return l || !isLocal && L;
+};
+
+var dayjs = function dayjs(date, c) {
+  if (isDayjs(date)) {
+    return date.clone();
+  } // eslint-disable-next-line no-nested-ternary
+
+
+  var cfg = typeof c === 'object' ? c : {};
+  cfg.date = date;
+  cfg.args = arguments; // eslint-disable-line prefer-rest-params
+
+  return new Dayjs(cfg); // eslint-disable-line no-use-before-define
+};
+
+var wrapper = function wrapper(date, instance) {
+  return dayjs(date, {
+    locale: instance.$L,
+    utc: instance.$u,
+    x: instance.$x,
+    $offset: instance.$offset // todo: refactor; do not use this.$offset in you code
+
+  });
+};
+
+var Utils = U; // for plugin use
+
+Utils.l = parseLocale;
+Utils.i = isDayjs;
+Utils.w = wrapper;
+
+var parseDate = function parseDate(cfg) {
+  var date = cfg.date,
+      utc = cfg.utc;
+  if (date === null) return new Date(NaN); // null is invalid
+
+  if (Utils.u(date)) return new Date(); // today
+
+  if (date instanceof Date) return new Date(date);
+
+  if (typeof date === 'string' && !/Z$/i.test(date)) {
+    var d = date.match(REGEX_PARSE);
+
+    if (d) {
+      var m = d[2] - 1 || 0;
+      var ms = (d[7] || '0').substring(0, 3);
+
+      if (utc) {
+        return new Date(Date.UTC(d[1], m, d[3] || 1, d[4] || 0, d[5] || 0, d[6] || 0, ms));
+      }
+
+      return new Date(d[1], m, d[3] || 1, d[4] || 0, d[5] || 0, d[6] || 0, ms);
+    }
+  }
+
+  return new Date(date); // everything else
+};
+
+var Dayjs = /*#__PURE__*/function () {
+  function Dayjs(cfg) {
+    this.$L = parseLocale(cfg.locale, null, true);
+    this.parse(cfg); // for plugin
+  }
+
+  var _proto = Dayjs.prototype;
+
+  _proto.parse = function parse(cfg) {
+    this.$d = parseDate(cfg);
+    this.$x = cfg.x || {};
+    this.init();
+  };
+
+  _proto.init = function init() {
+    var $d = this.$d;
+    this.$y = $d.getFullYear();
+    this.$M = $d.getMonth();
+    this.$D = $d.getDate();
+    this.$W = $d.getDay();
+    this.$H = $d.getHours();
+    this.$m = $d.getMinutes();
+    this.$s = $d.getSeconds();
+    this.$ms = $d.getMilliseconds();
+  } // eslint-disable-next-line class-methods-use-this
+  ;
+
+  _proto.$utils = function $utils() {
+    return Utils;
+  };
+
+  _proto.isValid = function isValid() {
+    return !(this.$d.toString() === INVALID_DATE_STRING);
+  };
+
+  _proto.isSame = function isSame(that, units) {
+    var other = dayjs(that);
+    return this.startOf(units) <= other && other <= this.endOf(units);
+  };
+
+  _proto.isAfter = function isAfter(that, units) {
+    return dayjs(that) < this.startOf(units);
+  };
+
+  _proto.isBefore = function isBefore(that, units) {
+    return this.endOf(units) < dayjs(that);
+  };
+
+  _proto.$g = function $g(input, get, set) {
+    if (Utils.u(input)) return this[get];
+    return this.set(set, input);
+  };
+
+  _proto.unix = function unix() {
+    return Math.floor(this.valueOf() / 1000);
+  };
+
+  _proto.valueOf = function valueOf() {
+    // timezone(hour) * 60 * 60 * 1000 => ms
+    return this.$d.getTime();
+  };
+
+  _proto.startOf = function startOf(units, _startOf) {
+    var _this = this;
+
+    // startOf -> endOf
+    var isStartOf = !Utils.u(_startOf) ? _startOf : true;
+    var unit = Utils.p(units);
+
+    var instanceFactory = function instanceFactory(d, m) {
+      var ins = Utils.w(_this.$u ? Date.UTC(_this.$y, m, d) : new Date(_this.$y, m, d), _this);
+      return isStartOf ? ins : ins.endOf(D);
+    };
+
+    var instanceFactorySet = function instanceFactorySet(method, slice) {
+      var argumentStart = [0, 0, 0, 0];
+      var argumentEnd = [23, 59, 59, 999];
+      return Utils.w(_this.toDate()[method].apply( // eslint-disable-line prefer-spread
+      _this.toDate('s'), (isStartOf ? argumentStart : argumentEnd).slice(slice)), _this);
+    };
+
+    var $W = this.$W,
+        $M = this.$M,
+        $D = this.$D;
+    var utcPad = "set" + (this.$u ? 'UTC' : '');
+
+    switch (unit) {
+      case Y:
+        return isStartOf ? instanceFactory(1, 0) : instanceFactory(31, 11);
+
+      case M:
+        return isStartOf ? instanceFactory(1, $M) : instanceFactory(0, $M + 1);
+
+      case W:
+        {
+          var weekStart = this.$locale().weekStart || 0;
+          var gap = ($W < weekStart ? $W + 7 : $W) - weekStart;
+          return instanceFactory(isStartOf ? $D - gap : $D + (6 - gap), $M);
+        }
+
+      case D:
+      case DATE:
+        return instanceFactorySet(utcPad + "Hours", 0);
+
+      case H:
+        return instanceFactorySet(utcPad + "Minutes", 1);
+
+      case MIN:
+        return instanceFactorySet(utcPad + "Seconds", 2);
+
+      case S:
+        return instanceFactorySet(utcPad + "Milliseconds", 3);
+
+      default:
+        return this.clone();
+    }
+  };
+
+  _proto.endOf = function endOf(arg) {
+    return this.startOf(arg, false);
+  };
+
+  _proto.$set = function $set(units, _int) {
+    var _C$D$C$DATE$C$M$C$Y$C;
+
+    // private set
+    var unit = Utils.p(units);
+    var utcPad = "set" + (this.$u ? 'UTC' : '');
+    var name = (_C$D$C$DATE$C$M$C$Y$C = {}, _C$D$C$DATE$C$M$C$Y$C[D] = utcPad + "Date", _C$D$C$DATE$C$M$C$Y$C[DATE] = utcPad + "Date", _C$D$C$DATE$C$M$C$Y$C[M] = utcPad + "Month", _C$D$C$DATE$C$M$C$Y$C[Y] = utcPad + "FullYear", _C$D$C$DATE$C$M$C$Y$C[H] = utcPad + "Hours", _C$D$C$DATE$C$M$C$Y$C[MIN] = utcPad + "Minutes", _C$D$C$DATE$C$M$C$Y$C[S] = utcPad + "Seconds", _C$D$C$DATE$C$M$C$Y$C[MS] = utcPad + "Milliseconds", _C$D$C$DATE$C$M$C$Y$C)[unit];
+    var arg = unit === D ? this.$D + (_int - this.$W) : _int;
+
+    if (unit === M || unit === Y) {
+      // clone is for badMutable plugin
+      var date = this.clone().set(DATE, 1);
+      date.$d[name](arg);
+      date.init();
+      this.$d = date.set(DATE, Math.min(this.$D, date.daysInMonth())).$d;
+    } else if (name) this.$d[name](arg);
+
+    this.init();
+    return this;
+  };
+
+  _proto.set = function set(string, _int2) {
+    return this.clone().$set(string, _int2);
+  };
+
+  _proto.get = function get(unit) {
+    return this[Utils.p(unit)]();
+  };
+
+  _proto.add = function add(number, units) {
+    var _this2 = this,
+        _C$MIN$C$H$C$S$unit;
+
+    number = Number(number); // eslint-disable-line no-param-reassign
+
+    var unit = Utils.p(units);
+
+    var instanceFactorySet = function instanceFactorySet(n) {
+      var d = dayjs(_this2);
+      return Utils.w(d.date(d.date() + Math.round(n * number)), _this2);
+    };
+
+    if (unit === M) {
+      return this.set(M, this.$M + number);
+    }
+
+    if (unit === Y) {
+      return this.set(Y, this.$y + number);
+    }
+
+    if (unit === D) {
+      return instanceFactorySet(1);
+    }
+
+    if (unit === W) {
+      return instanceFactorySet(7);
+    }
+
+    var step = (_C$MIN$C$H$C$S$unit = {}, _C$MIN$C$H$C$S$unit[MIN] = MILLISECONDS_A_MINUTE, _C$MIN$C$H$C$S$unit[H] = MILLISECONDS_A_HOUR, _C$MIN$C$H$C$S$unit[S] = MILLISECONDS_A_SECOND, _C$MIN$C$H$C$S$unit)[unit] || 1; // ms
+
+    var nextTimeStamp = this.$d.getTime() + number * step;
+    return Utils.w(nextTimeStamp, this);
+  };
+
+  _proto.subtract = function subtract(number, string) {
+    return this.add(number * -1, string);
+  };
+
+  _proto.format = function format(formatStr) {
+    var _this3 = this;
+
+    var locale = this.$locale();
+    if (!this.isValid()) return locale.invalidDate || INVALID_DATE_STRING;
+    var str = formatStr || FORMAT_DEFAULT;
+    var zoneStr = Utils.z(this);
+    var $H = this.$H,
+        $m = this.$m,
+        $M = this.$M;
+    var weekdays = locale.weekdays,
+        months = locale.months,
+        meridiem = locale.meridiem;
+
+    var getShort = function getShort(arr, index, full, length) {
+      return arr && (arr[index] || arr(_this3, str)) || full[index].slice(0, length);
+    };
+
+    var get$H = function get$H(num) {
+      return Utils.s($H % 12 || 12, num, '0');
+    };
+
+    var meridiemFunc = meridiem || function (hour, minute, isLowercase) {
+      var m = hour < 12 ? 'AM' : 'PM';
+      return isLowercase ? m.toLowerCase() : m;
+    };
+
+    var matches = {
+      YY: String(this.$y).slice(-2),
+      YYYY: this.$y,
+      M: $M + 1,
+      MM: Utils.s($M + 1, 2, '0'),
+      MMM: getShort(locale.monthsShort, $M, months, 3),
+      MMMM: getShort(months, $M),
+      D: this.$D,
+      DD: Utils.s(this.$D, 2, '0'),
+      d: String(this.$W),
+      dd: getShort(locale.weekdaysMin, this.$W, weekdays, 2),
+      ddd: getShort(locale.weekdaysShort, this.$W, weekdays, 3),
+      dddd: weekdays[this.$W],
+      H: String($H),
+      HH: Utils.s($H, 2, '0'),
+      h: get$H(1),
+      hh: get$H(2),
+      a: meridiemFunc($H, $m, true),
+      A: meridiemFunc($H, $m, false),
+      m: String($m),
+      mm: Utils.s($m, 2, '0'),
+      s: String(this.$s),
+      ss: Utils.s(this.$s, 2, '0'),
+      SSS: Utils.s(this.$ms, 3, '0'),
+      Z: zoneStr // 'ZZ' logic below
+
+    };
+    return str.replace(REGEX_FORMAT, function (match, $1) {
+      return $1 || matches[match] || zoneStr.replace(':', '');
+    }); // 'ZZ'
+  };
+
+  _proto.utcOffset = function utcOffset() {
+    // Because a bug at FF24, we're rounding the timezone offset around 15 minutes
+    // https://github.com/moment/moment/pull/1871
+    return -Math.round(this.$d.getTimezoneOffset() / 15) * 15;
+  };
+
+  _proto.diff = function diff(input, units, _float) {
+    var _C$Y$C$M$C$Q$C$W$C$D$;
+
+    var unit = Utils.p(units);
+    var that = dayjs(input);
+    var zoneDelta = (that.utcOffset() - this.utcOffset()) * MILLISECONDS_A_MINUTE;
+    var diff = this - that;
+    var result = Utils.m(this, that);
+    result = (_C$Y$C$M$C$Q$C$W$C$D$ = {}, _C$Y$C$M$C$Q$C$W$C$D$[Y] = result / 12, _C$Y$C$M$C$Q$C$W$C$D$[M] = result, _C$Y$C$M$C$Q$C$W$C$D$[Q] = result / 3, _C$Y$C$M$C$Q$C$W$C$D$[W] = (diff - zoneDelta) / MILLISECONDS_A_WEEK, _C$Y$C$M$C$Q$C$W$C$D$[D] = (diff - zoneDelta) / MILLISECONDS_A_DAY, _C$Y$C$M$C$Q$C$W$C$D$[H] = diff / MILLISECONDS_A_HOUR, _C$Y$C$M$C$Q$C$W$C$D$[MIN] = diff / MILLISECONDS_A_MINUTE, _C$Y$C$M$C$Q$C$W$C$D$[S] = diff / MILLISECONDS_A_SECOND, _C$Y$C$M$C$Q$C$W$C$D$)[unit] || diff; // milliseconds
+
+    return _float ? result : Utils.a(result);
+  };
+
+  _proto.daysInMonth = function daysInMonth() {
+    return this.endOf(M).$D;
+  };
+
+  _proto.$locale = function $locale() {
+    // get locale object
+    return Ls[this.$L];
+  };
+
+  _proto.locale = function locale(preset, object) {
+    if (!preset) return this.$L;
+    var that = this.clone();
+    var nextLocaleName = parseLocale(preset, object, true);
+    if (nextLocaleName) that.$L = nextLocaleName;
+    return that;
+  };
+
+  _proto.clone = function clone() {
+    return Utils.w(this.$d, this);
+  };
+
+  _proto.toDate = function toDate() {
+    return new Date(this.valueOf());
+  };
+
+  _proto.toJSON = function toJSON() {
+    return this.isValid() ? this.toISOString() : null;
+  };
+
+  _proto.toISOString = function toISOString() {
+    // ie 8 return
+    // new Dayjs(this.valueOf() + this.$d.getTimezoneOffset() * 60000)
+    // .format('YYYY-MM-DDTHH:mm:ss.SSS[Z]')
+    return this.$d.toISOString();
+  };
+
+  _proto.toString = function toString() {
+    return this.$d.toUTCString();
+  };
+
+  return Dayjs;
+}();
+
+var proto = Dayjs.prototype;
+dayjs.prototype = proto;
+[['$ms', MS], ['$s', S], ['$m', MIN], ['$H', H], ['$W', D], ['$M', M], ['$y', Y], ['$D', DATE]].forEach(function (g) {
+  proto[g[1]] = function (input) {
+    return this.$g(input, g[0], g[1]);
+  };
+});
+
+dayjs.extend = function (plugin, option) {
+  if (!plugin.$i) {
+    // install plugin only once
+    plugin(option, Dayjs, dayjs);
+    plugin.$i = true;
+  }
+
+  return dayjs;
+};
+
+dayjs.locale = parseLocale;
+dayjs.isDayjs = isDayjs;
+
+dayjs.unix = function (timestamp) {
+  return dayjs(timestamp * 1e3);
+};
+
+dayjs.en = Ls[L];
+dayjs.Ls = Ls;
+dayjs.p = {};
+
+// eslint-disable-next-line import/prefer-default-export
+var t = function t(format) {
+  return format.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function (_, a, b) {
+    return a || b.slice(1);
+  });
+};
+var englishFormats = {
+  LTS: 'h:mm:ss A',
+  LT: 'h:mm A',
+  L: 'MM/DD/YYYY',
+  LL: 'MMMM D, YYYY',
+  LLL: 'MMMM D, YYYY h:mm A',
+  LLLL: 'dddd, MMMM D, YYYY h:mm A'
+};
+var u = function u(formatStr, formats) {
+  return formatStr.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function (_, a, b) {
+    var B = b && b.toUpperCase();
+    return a || formats[b] || englishFormats[b] || t(formats[B]);
+  });
+};
+
+var formattingTokens = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
+var match1 = /\d/; // 0 - 9
+
+var match2 = /\d\d/; // 00 - 99
+
+var match3 = /\d{3}/; // 000 - 999
+
+var match4 = /\d{4}/; // 0000 - 9999
+
+var match1to2 = /\d\d?/; // 0 - 99
+
+var matchSigned = /[+-]?\d+/; // -inf - inf
+
+var matchOffset = /[+-]\d\d:?(\d\d)?|Z/; // +00:00 -00:00 +0000 or -0000 +00 or Z
+
+var matchWord = /\d*[^-_:/,()\s\d]+/; // Word
+
+var locale = {};
+
+var parseTwoDigitYear = function parseTwoDigitYear(input) {
+  input = +input;
+  return input + (input > 68 ? 1900 : 2000);
+};
+
+function offsetFromString(string) {
+  if (!string) return 0;
+  if (string === 'Z') return 0;
+  var parts = string.match(/([+-]|\d\d)/g);
+  var minutes = +(parts[1] * 60) + (+parts[2] || 0);
+  return minutes === 0 ? 0 : parts[0] === '+' ? -minutes : minutes; // eslint-disable-line no-nested-ternary
+}
+
+var addInput = function addInput(property) {
+  return function (input) {
+    this[property] = +input;
+  };
+};
+
+var zoneExpressions = [matchOffset, function (input) {
+  var zone = this.zone || (this.zone = {});
+  zone.offset = offsetFromString(input);
+}];
+
+var getLocalePart = function getLocalePart(name) {
+  var part = locale[name];
+  return part && (part.indexOf ? part : part.s.concat(part.f));
+};
+
+var meridiemMatch = function meridiemMatch(input, isLowerCase) {
+  var isAfternoon;
+  var _locale = locale,
+      meridiem = _locale.meridiem;
+
+  if (!meridiem) {
+    isAfternoon = input === (isLowerCase ? 'pm' : 'PM');
+  } else {
+    for (var i = 1; i <= 24; i += 1) {
+      // todo: fix input === meridiem(i, 0, isLowerCase)
+      if (input.indexOf(meridiem(i, 0, isLowerCase)) > -1) {
+        isAfternoon = i > 12;
+        break;
+      }
+    }
+  }
+
+  return isAfternoon;
+};
+
+var expressions = {
+  A: [matchWord, function (input) {
+    this.afternoon = meridiemMatch(input, false);
+  }],
+  a: [matchWord, function (input) {
+    this.afternoon = meridiemMatch(input, true);
+  }],
+  S: [match1, function (input) {
+    this.milliseconds = +input * 100;
+  }],
+  SS: [match2, function (input) {
+    this.milliseconds = +input * 10;
+  }],
+  SSS: [match3, function (input) {
+    this.milliseconds = +input;
+  }],
+  s: [match1to2, addInput('seconds')],
+  ss: [match1to2, addInput('seconds')],
+  m: [match1to2, addInput('minutes')],
+  mm: [match1to2, addInput('minutes')],
+  H: [match1to2, addInput('hours')],
+  h: [match1to2, addInput('hours')],
+  HH: [match1to2, addInput('hours')],
+  hh: [match1to2, addInput('hours')],
+  D: [match1to2, addInput('day')],
+  DD: [match2, addInput('day')],
+  Do: [matchWord, function (input) {
+    var _locale2 = locale,
+        ordinal = _locale2.ordinal;
+
+    var _input$match = input.match(/\d+/);
+
+    this.day = _input$match[0];
+    if (!ordinal) return;
+
+    for (var i = 1; i <= 31; i += 1) {
+      if (ordinal(i).replace(/\[|\]/g, '') === input) {
+        this.day = i;
+      }
+    }
+  }],
+  M: [match1to2, addInput('month')],
+  MM: [match2, addInput('month')],
+  MMM: [matchWord, function (input) {
+    var months = getLocalePart('months');
+    var monthsShort = getLocalePart('monthsShort');
+    var matchIndex = (monthsShort || months.map(function (_) {
+      return _.slice(0, 3);
+    })).indexOf(input) + 1;
+
+    if (matchIndex < 1) {
+      throw new Error();
+    }
+
+    this.month = matchIndex % 12 || matchIndex;
+  }],
+  MMMM: [matchWord, function (input) {
+    var months = getLocalePart('months');
+    var matchIndex = months.indexOf(input) + 1;
+
+    if (matchIndex < 1) {
+      throw new Error();
+    }
+
+    this.month = matchIndex % 12 || matchIndex;
+  }],
+  Y: [matchSigned, addInput('year')],
+  YY: [match2, function (input) {
+    this.year = parseTwoDigitYear(input);
+  }],
+  YYYY: [match4, addInput('year')],
+  Z: zoneExpressions,
+  ZZ: zoneExpressions
+};
+
+function correctHours(time) {
+  var afternoon = time.afternoon;
+
+  if (afternoon !== undefined) {
+    var hours = time.hours;
+
+    if (afternoon) {
+      if (hours < 12) {
+        time.hours += 12;
+      }
+    } else if (hours === 12) {
+      time.hours = 0;
+    }
+
+    delete time.afternoon;
+  }
+}
+
+function makeParser(format) {
+  format = u(format, locale && locale.formats);
+  var array = format.match(formattingTokens);
+  var length = array.length;
+
+  for (var i = 0; i < length; i += 1) {
+    var token = array[i];
+    var parseTo = expressions[token];
+    var regex = parseTo && parseTo[0];
+    var parser = parseTo && parseTo[1];
+
+    if (parser) {
+      array[i] = {
+        regex: regex,
+        parser: parser
+      };
+    } else {
+      array[i] = token.replace(/^\[|\]$/g, '');
+    }
+  }
+
+  return function (input) {
+    var time = {};
+
+    for (var _i = 0, start = 0; _i < length; _i += 1) {
+      var _token = array[_i];
+
+      if (typeof _token === 'string') {
+        start += _token.length;
+      } else {
+        var _regex = _token.regex,
+            _parser = _token.parser;
+        var part = input.slice(start);
+
+        var match = _regex.exec(part);
+
+        var value = match[0];
+
+        _parser.call(time, value);
+
+        input = input.replace(value, '');
+      }
+    }
+
+    correctHours(time);
+    return time;
+  };
+}
+
+var parseFormattedInput = function parseFormattedInput(input, format, utc) {
+  try {
+    if (['x', 'X'].indexOf(format) > -1) return new Date((format === 'X' ? 1000 : 1) * input);
+    var parser = makeParser(format);
+
+    var _parser2 = parser(input),
+        year = _parser2.year,
+        month = _parser2.month,
+        day = _parser2.day,
+        hours = _parser2.hours,
+        minutes = _parser2.minutes,
+        seconds = _parser2.seconds,
+        milliseconds = _parser2.milliseconds,
+        zone = _parser2.zone;
+
+    var now = new Date();
+    var d = day || (!year && !month ? now.getDate() : 1);
+    var y = year || now.getFullYear();
+    var M = 0;
+
+    if (!(year && !month)) {
+      M = month > 0 ? month - 1 : now.getMonth();
+    }
+
+    var h = hours || 0;
+    var m = minutes || 0;
+    var s = seconds || 0;
+    var ms = milliseconds || 0;
+
+    if (zone) {
+      return new Date(Date.UTC(y, M, d, h, m, s, ms + zone.offset * 60 * 1000));
+    }
+
+    if (utc) {
+      return new Date(Date.UTC(y, M, d, h, m, s, ms));
+    }
+
+    return new Date(y, M, d, h, m, s, ms);
+  } catch (e) {
+    return new Date(''); // Invalid Date
+  }
+};
+
+var customParseFormat = (function (o, C, d) {
+  d.p.customParseFormat = true;
+
+  if (o && o.parseTwoDigitYear) {
+    parseTwoDigitYear = o.parseTwoDigitYear;
+  }
+
+  var proto = C.prototype;
+  var oldParse = proto.parse;
+
+  proto.parse = function (cfg) {
+    var date = cfg.date,
+        utc = cfg.utc,
+        args = cfg.args;
+    this.$u = utc;
+    var format = args[1];
+
+    if (typeof format === 'string') {
+      var isStrictWithoutLocale = args[2] === true;
+      var isStrictWithLocale = args[3] === true;
+      var isStrict = isStrictWithoutLocale || isStrictWithLocale;
+      var pl = args[2];
+
+      if (isStrictWithLocale) {
+        pl = args[2];
+      }
+
+      locale = this.$locale();
+
+      if (!isStrictWithoutLocale && pl) {
+        locale = d.Ls[pl];
+      }
+
+      this.$d = parseFormattedInput(date, format, utc);
+      this.init();
+      if (pl && pl !== true) this.$L = this.locale(pl).$L; // use != to treat
+      // input number 1410715640579 and format string '1410715640579' equal
+      // eslint-disable-next-line eqeqeq
+
+      if (isStrict && date != this.format(format)) {
+        this.$d = new Date('');
+      } // reset global locale to make parallel unit test
+
+
+      locale = {};
+    } else if (format instanceof Array) {
+      var len = format.length;
+
+      for (var i = 1; i <= len; i += 1) {
+        args[1] = format[i - 1];
+        var result = d.apply(this, args);
+
+        if (result.isValid()) {
+          this.$d = result.$d;
+          this.$L = result.$L;
+          this.init();
+          break;
+        }
+
+        if (i === len) this.$d = new Date('');
+      }
+    } else {
+      oldParse.call(this, cfg);
+    }
+  };
+});
+
+var localeData = (function (o, c, dayjs) {
+  // locale needed later
+  var proto = c.prototype;
+
+  var getLocalePart = function getLocalePart(part) {
+    return part && (part.indexOf ? part : part.s);
+  };
+
+  var getShort = function getShort(ins, target, full, num, localeOrder) {
+    var locale = ins.name ? ins : ins.$locale();
+    var targetLocale = getLocalePart(locale[target]);
+    var fullLocale = getLocalePart(locale[full]);
+    var result = targetLocale || fullLocale.map(function (f) {
+      return f.slice(0, num);
+    });
+    if (!localeOrder) return result;
+    var weekStart = locale.weekStart;
+    return result.map(function (_, index) {
+      return result[(index + (weekStart || 0)) % 7];
+    });
+  };
+
+  var getDayjsLocaleObject = function getDayjsLocaleObject() {
+    return dayjs.Ls[dayjs.locale()];
+  };
+
+  var getLongDateFormat = function getLongDateFormat(l, format) {
+    return l.formats[format] || t(l.formats[format.toUpperCase()]);
+  };
+
+  var localeData = function localeData() {
+    var _this = this;
+
+    return {
+      months: function months(instance) {
+        return instance ? instance.format('MMMM') : getShort(_this, 'months');
+      },
+      monthsShort: function monthsShort(instance) {
+        return instance ? instance.format('MMM') : getShort(_this, 'monthsShort', 'months', 3);
+      },
+      firstDayOfWeek: function firstDayOfWeek() {
+        return _this.$locale().weekStart || 0;
+      },
+      weekdays: function weekdays(instance) {
+        return instance ? instance.format('dddd') : getShort(_this, 'weekdays');
+      },
+      weekdaysMin: function weekdaysMin(instance) {
+        return instance ? instance.format('dd') : getShort(_this, 'weekdaysMin', 'weekdays', 2);
+      },
+      weekdaysShort: function weekdaysShort(instance) {
+        return instance ? instance.format('ddd') : getShort(_this, 'weekdaysShort', 'weekdays', 3);
+      },
+      longDateFormat: function longDateFormat(format) {
+        return getLongDateFormat(_this.$locale(), format);
+      },
+      meridiem: this.$locale().meridiem,
+      ordinal: this.$locale().ordinal
+    };
+  };
+
+  proto.localeData = function () {
+    return localeData.bind(this)();
+  };
+
+  dayjs.localeData = function () {
+    var localeObject = getDayjsLocaleObject();
+    return {
+      firstDayOfWeek: function firstDayOfWeek() {
+        return localeObject.weekStart || 0;
+      },
+      weekdays: function weekdays() {
+        return dayjs.weekdays();
+      },
+      weekdaysShort: function weekdaysShort() {
+        return dayjs.weekdaysShort();
+      },
+      weekdaysMin: function weekdaysMin() {
+        return dayjs.weekdaysMin();
+      },
+      months: function months() {
+        return dayjs.months();
+      },
+      monthsShort: function monthsShort() {
+        return dayjs.monthsShort();
+      },
+      longDateFormat: function longDateFormat(format) {
+        return getLongDateFormat(localeObject, format);
+      },
+      meridiem: localeObject.meridiem,
+      ordinal: localeObject.ordinal
+    };
+  };
+
+  dayjs.months = function () {
+    return getShort(getDayjsLocaleObject(), 'months');
+  };
+
+  dayjs.monthsShort = function () {
+    return getShort(getDayjsLocaleObject(), 'monthsShort', 'months', 3);
+  };
+
+  dayjs.weekdays = function (localeOrder) {
+    return getShort(getDayjsLocaleObject(), 'weekdays', null, null, localeOrder);
+  };
+
+  dayjs.weekdaysShort = function (localeOrder) {
+    return getShort(getDayjsLocaleObject(), 'weekdaysShort', 'weekdays', 3, localeOrder);
+  };
+
+  dayjs.weekdaysMin = function (localeOrder) {
+    return getShort(getDayjsLocaleObject(), 'weekdaysMin', 'weekdays', 2, localeOrder);
+  };
+});
+
+var localizedFormat = (function (o, c, d) {
+  var proto = c.prototype;
+  var oldFormat = proto.format;
+  d.en.formats = englishFormats;
+
+  proto.format = function (formatStr) {
+    if (formatStr === void 0) {
+      formatStr = FORMAT_DEFAULT;
+    }
+
+    var _this$$locale = this.$locale(),
+        _this$$locale$formats = _this$$locale.formats,
+        formats = _this$$locale$formats === void 0 ? {} : _this$$locale$formats;
+
+    var result = u(formatStr, formats);
+    return oldFormat.call(this, result);
+  };
+});
+
+// Plugin template from https://day.js.org/docs/en/plugin/plugin
+var preParsePostFormat = (function (option, dayjsClass) {
+  var oldParse = dayjsClass.prototype.parse;
+
+  dayjsClass.prototype.parse = function (cfg) {
+    if (typeof cfg.date === 'string') {
+      var locale = this.$locale();
+      cfg.date = locale && locale.preparse ? locale.preparse(cfg.date) : cfg.date;
+    } // original parse result
+
+
+    return oldParse.bind(this)(cfg);
+  }; // // overriding existing API
+  // // e.g. extend dayjs().format()
+
+
+  var oldFormat = dayjsClass.prototype.format;
+
+  dayjsClass.prototype.format = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // original format result
+    var result = oldFormat.call.apply(oldFormat, [this].concat(args)); // return modified result
+
+    var locale = this.$locale();
+    return locale && locale.postformat ? locale.postformat(result) : result;
+  };
+
+  var oldFromTo = dayjsClass.prototype.fromToBase;
+
+  if (oldFromTo) {
+    dayjsClass.prototype.fromToBase = function (input, withoutSuffix, instance, isFrom) {
+      var locale = this.$locale() || instance.$locale(); // original format result
+
+      return oldFromTo.call(this, input, withoutSuffix, instance, isFrom, locale && locale.postformat);
+    };
+  }
+});
+
+var updateLocale = (function (option, Dayjs, dayjs) {
+  dayjs.updateLocale = function (locale, customConfig) {
+    var localeList = dayjs.Ls;
+    var localeConfig = localeList[locale];
+    if (!localeConfig) return;
+    var customConfigKeys = customConfig ? Object.keys(customConfig) : [];
+    customConfigKeys.forEach(function (c) {
+      localeConfig[c] = customConfig[c];
+    });
+    return localeConfig; // eslint-disable-line consistent-return
+  };
+});
+
 const inputTimePickerCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-input-time-picker: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-input-time-picker{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-input-time-picker{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-input-time-picker{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-input-time-picker{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-input-time-picker{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-input-time-picker{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-input-time-picker{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-input-time-picker:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-input-time-picker:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-input-time-picker-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-input-time-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-time-picker-h *.sc-calcite-input-time-picker,.sc-calcite-input-time-picker-h[disabled] .sc-calcite-input-time-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-time-picker-h{display:inline-block;-webkit-user-select:none;user-select:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-time-picker-h[disabled] .sc-calcite-input-time-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-time-picker-h [calcite-hydrated][disabled].sc-calcite-input-time-picker{opacity:1}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-time-picker-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([scale=s])*/[scale=s].sc-calcite-input-time-picker-h{--calcite-toggle-spacing:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-input-time-picker-h{--calcite-toggle-spacing:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-input-time-picker-h{--calcite-toggle-spacing:1rem}/*!@.input-wrapper*/.input-wrapper.sc-calcite-input-time-picker{position:relative}/*!@.toggle-icon*/.toggle-icon.sc-calcite-input-time-picker{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}";
 
+dayjs.extend(customParseFormat);
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(preParsePostFormat);
+dayjs.extend(updateLocale);
 class InputTimePicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -25811,66 +26924,71 @@ class InputTimePicker {
     this.focusOnOpen = false;
     this.dialogId = `time-picker-dialog--${guid()}`;
     /** whether the value of the input was changed as a result of user typing or not */
-    this.internalValueChange = false;
-    this.previousValidValue = null;
+    this.userChangedValue = false;
     this.referenceElementId = `input-time-picker-${guid()}`;
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.calciteInternalInputBlurHandler = () => {
-      const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const { effectiveLocale: locale, numberingSystem, value, calciteInputEl } = this;
-      numberStringFormatter.numberFormatOptions = {
-        locale,
-        numberingSystem,
-        useGrouping: false
-      };
-      const delocalizedValue = numberStringFormatter.delocalize(calciteInputEl.value);
-      const localizedInputValue = localizeTimeString({
-        value: delocalizedValue,
-        includeSeconds: shouldIncludeSeconds,
-        locale,
-        numberingSystem
+    this.hostBlurHandler = () => {
+      const inputValue = this.calciteInputEl.value;
+      const delocalizedInputValue = this.delocalizeTimeString(inputValue);
+      if (!delocalizedInputValue) {
+        this.setValue("");
+        return;
+      }
+      if (delocalizedInputValue !== this.value) {
+        this.setValue(delocalizedInputValue);
+      }
+      const localizedTimeString = localizeTimeString({
+        value: this.value,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds: this.shouldIncludeSeconds()
       });
-      this.setInputValue(localizedInputValue ||
-        localizeTimeString({ value, locale, numberingSystem, includeSeconds: shouldIncludeSeconds }));
+      if (localizedTimeString !== inputValue) {
+        this.setInputValue(localizedTimeString);
+      }
+      this.deactivate();
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
         event.stopPropagation();
       }
     };
-    this.calciteInputInputHandler = (event) => {
-      const target = event.target;
-      numberStringFormatter.numberFormatOptions = {
-        locale: this.effectiveLocale,
-        numberingSystem: this.numberingSystem,
-        useGrouping: false
-      };
-      const delocalizedValue = numberStringFormatter.delocalize(target.value);
-      this.setValue({ value: delocalizedValue });
-      // only translate the numerals until blur
-      const localizedValue = delocalizedValue
-        .split("")
-        .map((char) => numberKeys.includes(char)
-        ? numberStringFormatter.numberFormatter.format(Number(char))
-        : char)
-        .join("");
-      this.setInputValue(localizedValue);
+    this.calciteInternalInputInputHandler = (event) => {
+      const { effectiveLocale: locale, numberingSystem } = this;
+      if (numberingSystem && numberingSystem !== "latn") {
+        const target = event.target;
+        numberStringFormatter.numberFormatOptions = {
+          locale,
+          numberingSystem,
+          useGrouping: false
+        };
+        const valueInNumberingSystem = numberStringFormatter
+          .delocalize(target.value)
+          .split("")
+          .map((char) => numberKeys.includes(char)
+          ? numberStringFormatter.numberFormatter.format(Number(char))
+          : char)
+          .join("");
+        this.setInputValue(valueInNumberingSystem);
+      }
     };
     this.timePickerChangeHandler = (event) => {
       event.stopPropagation();
       const target = event.target;
       const value = target.value;
-      this.setValue({ value, origin: "time-picker" });
+      const includeSeconds = this.shouldIncludeSeconds();
+      this.setValue(toISOTimeString(value, includeSeconds));
+      this.setInputValue(localizeTimeString({
+        value,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds
+      }));
     };
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.popoverCloseHandler = () => {
       deactivateFocusTrap(this, {
         onDeactivate: () => {
@@ -25899,6 +27017,20 @@ class InputTimePicker {
           event.preventDefault();
           this.calciteInputEl.setFocus();
         }
+        if (event.composedPath().includes(this.calciteTimePickerEl)) {
+          return;
+        }
+        const newValue = this.delocalizeTimeString(this.calciteInputEl.value);
+        this.setValue(newValue);
+        const localizedTimeString = localizeTimeString({
+          value: this.value,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          includeSeconds: this.shouldIncludeSeconds()
+        });
+        if (newValue && this.calciteInputEl.value !== localizedTimeString) {
+          this.setInputValue(localizedTimeString);
+        }
       }
       else if (key === "ArrowDown") {
         this.open = true;
@@ -25933,50 +27065,50 @@ class InputTimePicker {
       }
       this.calciteInputEl.value = newInputValue;
     };
-    this.setValue = ({ value, origin = "input" }) => {
-      const previousValue = this.value;
-      const newValue = formatTimeString(value);
-      const newLocalizedValue = localizeTimeString({
-        value: newValue,
-        locale: this.effectiveLocale,
-        numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds()
-      });
-      this.internalValueChange = origin !== "external" && origin !== "loading";
-      const shouldEmit = origin !== "loading" &&
-        origin !== "external" &&
-        ((value !== this.previousValidValue && !value) ||
-          !!(!this.previousValidValue && newValue) ||
-          (newValue !== this.previousValidValue && newValue));
-      if (value) {
-        if (shouldEmit) {
-          this.previousValidValue = newValue;
-        }
-        if (newValue && newValue !== this.value) {
-          this.value = newValue;
-        }
-        this.localizedValue = newLocalizedValue;
-      }
-      else {
-        this.value = value;
-        this.localizedValue = null;
-      }
-      if (origin === "time-picker" || origin === "external") {
-        this.setInputValue(newLocalizedValue);
+    /**
+     * Sets the value and emits a change event.
+     * This is used to update the value as a result of user interaction.
+     *
+     * @param value
+     */
+    this.setValue = (value) => {
+      const oldValue = this.value;
+      const newValue = formatTimeString(value) || "";
+      if (newValue === oldValue) {
+        return;
       }
-      if (shouldEmit) {
-        const changeEvent = this.calciteInputTimePickerChange.emit();
-        if (changeEvent.defaultPrevented) {
-          this.internalValueChange = false;
-          this.value = previousValue;
-          this.setInputValue(previousValue);
-          this.previousValidValue = previousValue;
-        }
-        else {
-          this.previousValidValue = newValue;
-        }
+      this.userChangedValue = true;
+      this.value = newValue || "";
+      const changeEvent = this.calciteInputTimePickerChange.emit();
+      if (changeEvent.defaultPrevented) {
+        this.userChangedValue = false;
+        this.value = oldValue;
+        this.setInputValue(localizeTimeString({
+          value: oldValue,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          includeSeconds: this.shouldIncludeSeconds()
+        }));
       }
     };
+    /**
+     * Sets the value directly without emitting a change event.
+     * This is used to update the value on initial load and when props change that are not the result of user interaction.
+     *
+     * @param value
+     */
+    this.setValueDirectly = (value) => {
+      const includeSeconds = this.shouldIncludeSeconds();
+      this.value = toISOTimeString(value, includeSeconds);
+      this.setInputValue(this.value
+        ? localizeTimeString({
+          value: this.value,
+          includeSeconds,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem
+        })
+        : "");
+    };
     this.onInputWrapperClick = () => {
       this.open = !this.open;
     };
@@ -26000,7 +27132,6 @@ class InputTimePicker {
     this.value = null;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
-    this.localizedValue = undefined;
   }
   openHandler(value) {
     if (this.disabled || this.readOnly) {
@@ -26025,16 +27156,31 @@ class InputTimePicker {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  numberingSystemWatcher(numberingSystem) {
+    this.setInputValue(localizeTimeString({
+      value: this.value,
+      locale: this.effectiveLocale,
+      numberingSystem,
+      includeSeconds: this.shouldIncludeSeconds()
+    }));
+  }
+  stepWatcher(newStep, oldStep) {
+    if ((oldStep >= 60 && newStep > 0 && newStep < 60) ||
+      (newStep >= 60 && oldStep > 0 && oldStep < 60)) {
+      this.setValueDirectly(this.value);
+    }
+  }
   valueWatcher(newValue) {
-    if (!this.internalValueChange) {
-      this.setValue({ value: newValue, origin: "external" });
+    if (!this.userChangedValue) {
+      this.setValueDirectly(newValue);
     }
-    this.internalValueChange = false;
+    this.userChangedValue = false;
   }
-  valueRelatedPropChange() {
+  async effectiveLocaleWatcher(locale) {
+    await this.loadDateTimeLocaleData();
     this.setInputValue(localizeTimeString({
       value: this.value,
-      locale: this.effectiveLocale,
+      locale,
       numberingSystem: this.numberingSystem,
       includeSeconds: this.shouldIncludeSeconds()
     }));
@@ -26057,6 +27203,105 @@ class InputTimePicker {
   async reposition(delayed = false) {
     this.popoverEl?.reposition(delayed);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  delocalizeTimeString(value) {
+    // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
+    dayjs.locale(this.effectiveLocale.toLowerCase());
+    const dayjsParseResult = dayjs(value, ["LTS", "LT"]);
+    if (dayjsParseResult.isValid()) {
+      let unformattedTimeString = `${dayjsParseResult.get("hour")}:${dayjsParseResult.get("minute")}`;
+      if (this.shouldIncludeSeconds()) {
+        unformattedTimeString += `:${dayjsParseResult.get("seconds") || 0}`;
+      }
+      return formatTimeString(unformattedTimeString) || "";
+    }
+    return "";
+  }
+  async loadDateTimeLocaleData() {
+    const { effectiveLocale } = this;
+    if (effectiveLocale === "en" || effectiveLocale === "en-US") {
+      return;
+    }
+    let dayjsLocale = effectiveLocale.toLowerCase();
+    if (effectiveLocale === "pt-PT") {
+      dayjsLocale = "pt";
+    }
+    if (effectiveLocale === "no") {
+      dayjsLocale = "nb";
+    }
+    const { default: localeConfig } = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(getAssetPath(`./assets/input-time-picker/nls/dayjs/locale/${dayjsLocale}.js`))); });
+    dayjs.locale(localeConfig, null, true);
+    dayjs.updateLocale(dayjsLocale, this.getExtendedLocaleConfig(dayjsLocale));
+  }
+  getExtendedLocaleConfig(locale) {
+    if (locale === "ar") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "م" : "ص"),
+        formats: {
+          LT: "HH:mm A",
+          LTS: "HH:mm:ss A",
+          L: "DD/MM/YYYY",
+          LL: "D MMMM YYYY",
+          LLL: "D MMMM YYYY HH:mm A",
+          LLLL: "dddd D MMMM YYYY HH:mm A"
+        }
+      };
+    }
+    if (locale === "en-au") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+      };
+    }
+    if (locale === "en-ca") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "p.m." : "a.m.")
+      };
+    }
+    if (locale === "el") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ.")
+      };
+    }
+    if (locale === "hi") {
+      return {
+        formats: {
+          LT: "h:mm A",
+          LTS: "h:mm:ss A",
+          L: "DD/MM/YYYY",
+          LL: "D MMMM YYYY",
+          LLL: "D MMMM YYYY, h:mm A",
+          LLLL: "dddd, D MMMM YYYY, h:mm A"
+        },
+        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+      };
+    }
+    if (locale === "ko") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "오후" : "오전")
+      };
+    }
+    if (locale === "zh-tw") {
+      return {
+        formats: {
+          LT: "AHH:mm",
+          LTS: "AHH:mm:ss"
+        }
+      };
+    }
+    if (locale === "zh-hk") {
+      return {
+        formats: {
+          LT: "AHH:mm",
+          LTS: "AHH:mm:ss"
+        },
+        meridiem: (hour) => (hour > 12 ? "下午" : "上午")
+      };
+    }
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -26070,8 +27315,22 @@ class InputTimePicker {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
-    if (this.value) {
-      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
+    let { effectiveLocale } = this;
+    if (effectiveLocale === "en-US") {
+      effectiveLocale = "en";
+    }
+    if (effectiveLocale === "pt-PT") {
+      effectiveLocale = "pt";
+    }
+    if (effectiveLocale === "no") {
+      effectiveLocale = "nb";
+    }
+    this.effectiveLocale = effectiveLocale;
+    if (isValidTime(this.value)) {
+      this.setValueDirectly(this.value);
+    }
+    else {
+      this.value = undefined;
     }
     connectLabel(this);
     connectForm(this);
@@ -26079,11 +27338,18 @@ class InputTimePicker {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    await setUpMessages(this);
+    await Promise.all([setUpMessages(this), this.loadDateTimeLocaleData()]);
   }
   componentDidLoad() {
     setComponentLoaded(this);
-    this.setInputValue(this.localizedValue);
+    if (isValidTime(this.value)) {
+      this.setInputValue(localizeTimeString({
+        value: this.value,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds: this.shouldIncludeSeconds()
+      }));
+    }
   }
   disconnectedCallback() {
     disconnectLabel(this);
@@ -26102,9 +27368,9 @@ class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, messages, readOnly, dialogId } = this;
-    return (hAsync(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
+    return (hAsync(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setCalciteInputEl }), this.renderToggleIcon(this.open)), hAsync("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
+      ref: this.setCalciteInputEl }), this.renderToggleIcon(this.open)), hAsync("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setCalcitePopoverEl }, hAsync("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
       // eslint-disable-next-line react/jsx-sort-props
@@ -26122,9 +27388,10 @@ class InputTimePicker {
     "disabled": ["handleDisabledAndReadOnlyChange"],
     "readOnly": ["handleDisabledAndReadOnlyChange"],
     "messageOverrides": ["onMessagesChange"],
+    "numberingSystem": ["numberingSystemWatcher"],
+    "step": ["stepWatcher"],
     "value": ["valueWatcher"],
-    "effectiveLocale": ["valueRelatedPropChange"],
-    "step": ["valueRelatedPropChange"]
+    "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
   static get style() { return inputTimePickerCss; }
   static get cmpMeta() { return {
@@ -26148,7 +27415,6 @@ class InputTimePicker {
       "value": [1025],
       "defaultMessages": [32],
       "effectiveLocale": [32],
-      "localizedValue": [32],
       "setFocus": [64],
       "reposition": [64]
     },
@@ -31065,7 +32331,8 @@ const CSS$c = {
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
-  contentDetached: "content--detached",
+  contentFloat: "content--float",
+  contentOverlay: "content--overlay",
   separator: "separator"
 };
 const SLOTS$6 = {
@@ -31073,7 +32340,7 @@ const SLOTS$6 = {
   header: "header"
 };
 
-const shellPanelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-shell-panel{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-shell-panel{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell-panel{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell-panel{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-shell-panel{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-shell-panel{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell-panel{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-shell-panel:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-shell-panel-h{display:none}/*!@:host*/.sc-calcite-shell-panel-h{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;--calcite-shell-panel-detached-max-height:unset;z-index:var(--calcite-shell-panel-z-index, var(--calcite-app-z-index))}/*!@:host([layout=vertical])*/[layout=vertical].sc-calcite-shell-panel-h{z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index) + 1))}/*!@:host([layout=horizontal]) .content*/[layout=horizontal].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-height-internal:var(--calcite-shell-panel-height, 20vh);--calcite-shell-panel-max-height-internal:var(--calcite-shell-panel-max-height, 420px);--calcite-shell-panel-min-height-internal:var(--calcite-shell-panel-min-height, 240px)}/*!@:host([layout=vertical][width-scale=s]) .content*/[layout=vertical][width-scale=s].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 12vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 300px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 150px)}/*!@:host([layout=vertical][width-scale=m]) .content*/[layout=vertical][width-scale=m].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 20vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 420px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 240px)}/*!@:host([layout=vertical][width-scale=l]) .content*/[layout=vertical][width-scale=l].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 45vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 680px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 340px)}/*!@:host([detached-height-scale=s]) .content--detached*/[detached-height-scale=s].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height-internal:var(--calcite-shell-panel-detached-max-height, 40vh)}/*!@:host([detached-height-scale=m]) .content--detached*/[detached-height-scale=m].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height-internal:var(--calcite-shell-panel-detached-max-height, 60vh)}/*!@:host([detached-height-scale=l]) .content--detached*/[detached-height-scale=l].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height-internal:var(--calcite-shell-panel-detached-max-height, 80vh)}/*!@.container*/.container.sc-calcite-shell-panel{pointer-events:none;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}/*!@.container **/.container.sc-calcite-shell-panel *.sc-calcite-shell-panel{box-sizing:border-box}/*!@:host([layout=horizontal]) .container*/[layout=horizontal].sc-calcite-shell-panel-h .container.sc-calcite-shell-panel{flex-direction:column}/*!@:host(:hover) .separator:not(:hover):not(:focus),\n:host(:focus-within) .separator:not(:hover):not(:focus)*/.sc-calcite-shell-panel-h:hover .separator.sc-calcite-shell-panel:not(:hover):not(:focus),.sc-calcite-shell-panel-h:focus-within .separator.sc-calcite-shell-panel:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-ui-border-3)}/*!@.separator*/.separator.sc-calcite-shell-panel{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}/*!@.separator:hover*/.separator.sc-calcite-shell-panel:hover{opacity:1;background-color:var(--calcite-ui-border-2)}/*!@.separator:focus*/.separator.sc-calcite-shell-panel:focus{background-color:var(--calcite-ui-brand);opacity:1}/*!@:host([layout=vertical]) .separator*/[layout=vertical].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}/*!@:host([layout=horizontal][position=start]) .separator*/[layout=horizontal][position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-end:0px}/*!@:host([layout=horizontal][position=end]) .separator*/[layout=horizontal][position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-start:0px}/*!@:host([layout=horizontal]) .separator*/[layout=horizontal].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}/*!@:host([layout=vertical][position=start]) .separator*/[layout=vertical][position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:-2px}/*!@:host([layout=horizontal][position=start]) .separator*/[layout=horizontal][position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-end:-2px}/*!@:host([layout=vertical][position=end]) .separator*/[layout=vertical][position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-start:-2px}/*!@:host([layout=horizontal][position=end]) .separator*/[layout=horizontal][position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-start:-2px}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-s>calcite-flow{block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}/*!@::slotted(.calcite-match-height)*/.sc-calcite-shell-panel-s>.calcite-match-height{display:flex;flex:1 1 auto;overflow:hidden}/*!@.content*/.content.sc-calcite-shell-panel{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}/*!@:host([layout=vertical]) .content*/[layout=vertical].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{inline-size:var(--calcite-shell-panel-width-internal);max-inline-size:var(--calcite-shell-panel-max-width-internal);min-inline-size:var(--calcite-shell-panel-min-width-internal)}/*!@:host([layout=horizontal]) .content*/[layout=horizontal].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{block-size:var(--calcite-shell-panel-height-internal);max-block-size:var(--calcite-shell-panel-max-height-internal);min-block-size:var(--calcite-shell-panel-min-height-internal)}/*!@.content__header*/.content__header.sc-calcite-shell-panel{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}/*!@.content__body*/.content__body.sc-calcite-shell-panel{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}/*!@.content--detached*/.content--detached.sc-calcite-shell-panel{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-shell-panel-detached-max-height-internal)}/*!@.content--detached ::slotted(calcite-panel),\n.content--detached ::slotted(calcite-flow)*/.content--detached .sc-calcite-shell-panel-s>calcite-panel,.content--detached .sc-calcite-shell-panel-s>calcite-flow{max-block-size:unset}/*!@:host([position=start]) .content--detached ::slotted(calcite-panel),\n:host([position=start]) .content--detached ::slotted(calcite-flow),\n:host([position=end]) .content--detached ::slotted(calcite-panel),\n:host([position=end]) .content--detached ::slotted(calcite-flow)*/.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-flow{border-style:none}/*!@.content[hidden]*/.content[hidden].sc-calcite-shell-panel{display:none}/*!@slot[name=action-bar]::slotted(calcite-action-bar),\n.content ::slotted(calcite-flow),\n.content ::slotted(calcite-panel:not([closed]))*/slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.content .sc-calcite-shell-panel-s>calcite-flow,.content .sc-calcite-shell-panel-s>calcite-panel:not([closed]){border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=start]) .content ::slotted(calcite-flow),\n:host([position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=start] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline-start:none}/*!@:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=end]) .content ::slotted(calcite-flow),\n:host([position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=end] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline-end:none}/*!@:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar)*/.sc-calcite-shell-panel-h[layout=horizontal] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar{border-inline:0}/*!@:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),\n:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[layout=horizontal][position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[layout=horizontal][position=start] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline:0;border-block-start:0}/*!@:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),\n:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[layout=horizontal][position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[layout=horizontal][position=end] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline:0;border-block-end:0}";
+const shellPanelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-shell-panel{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-shell-panel{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell-panel{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell-panel{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-shell-panel{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-shell-panel{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell-panel{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-shell-panel:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-shell-panel-h{display:none}/*!@:host*/.sc-calcite-shell-panel-h{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-app-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-shell-panel-shadow-block-start-internal:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-block-end-internal:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-inline-start-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-inline-end-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}/*!@.calcite--rtl.content--overlay*/.calcite--rtl.content--overlay.sc-calcite-shell-panel{--calcite-shell-panel-shadow-inline-start-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-inline-end-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}/*!@:host([layout=vertical])*/[layout=vertical].sc-calcite-shell-panel-h{z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index) + 1))}/*!@:host([layout=vertical][display-mode=overlay])*/[layout=vertical][display-mode=overlay].sc-calcite-shell-panel-h{z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index-header) + 1))}/*!@:host([layout=vertical][width-scale=s]) .content*/[layout=vertical][width-scale=s].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 12vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 300px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 150px)}/*!@:host([layout=vertical][width-scale=m]) .content*/[layout=vertical][width-scale=m].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 20vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 420px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 240px)}/*!@:host([layout=vertical][width-scale=l]) .content*/[layout=vertical][width-scale=l].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 45vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 680px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 340px)}/*!@:host([layout=horizontal][height-scale=s]) .content*/[layout=horizontal][height-scale=s].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-max-height-internal:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}/*!@:host([layout=horizontal]) .content*/[layout=horizontal].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-min-height-internal:var(--calcite-shell-panel-min-height, 5vh);--calcite-shell-panel-max-height-internal:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}/*!@:host([layout=horizontal][height-scale=l]) .content*/[layout=horizontal][height-scale=l].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-max-height-internal:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}/*!@.container*/.container.sc-calcite-shell-panel{pointer-events:none;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}/*!@.container **/.container.sc-calcite-shell-panel *.sc-calcite-shell-panel{box-sizing:border-box}/*!@:host([layout=horizontal]) .container*/[layout=horizontal].sc-calcite-shell-panel-h .container.sc-calcite-shell-panel{flex-direction:column}/*!@:host(:hover) .separator:not(:hover):not(:focus),\n:host(:focus-within) .separator:not(:hover):not(:focus)*/.sc-calcite-shell-panel-h:hover .separator.sc-calcite-shell-panel:not(:hover):not(:focus),.sc-calcite-shell-panel-h:focus-within .separator.sc-calcite-shell-panel:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-ui-border-3)}/*!@.separator*/.separator.sc-calcite-shell-panel{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}/*!@.separator:hover*/.separator.sc-calcite-shell-panel:hover{opacity:1;background-color:var(--calcite-ui-border-2)}/*!@.separator:focus*/.separator.sc-calcite-shell-panel:focus{background-color:var(--calcite-ui-brand);opacity:1}/*!@:host([layout=vertical]) .separator*/[layout=vertical].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}/*!@:host([layout=horizontal][position=start]) .separator*/[layout=horizontal][position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-end:0px}/*!@:host([layout=horizontal][position=end]) .separator*/[layout=horizontal][position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-start:0px}/*!@:host([layout=horizontal]) .separator*/[layout=horizontal].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}/*!@:host([layout=vertical][position=start]) .separator*/[layout=vertical][position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:-2px}/*!@:host([layout=horizontal][position=start]) .separator*/[layout=horizontal][position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-end:-2px}/*!@:host([layout=vertical][position=end]) .separator*/[layout=vertical][position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-start:-2px}/*!@:host([layout=horizontal][position=end]) .separator*/[layout=horizontal][position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-block-start:-2px}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-s>calcite-flow{block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}/*!@::slotted(.calcite-match-height)*/.sc-calcite-shell-panel-s>.calcite-match-height{display:flex;flex:1 1 auto;overflow:hidden}/*!@.content*/.content.sc-calcite-shell-panel{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}/*!@:host([layout=vertical]) .content*/[layout=vertical].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{inline-size:var(--calcite-shell-panel-width-internal);max-inline-size:var(--calcite-shell-panel-max-width-internal);min-inline-size:var(--calcite-shell-panel-min-width-internal)}/*!@:host([layout=horizontal]) .content*/[layout=horizontal].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{block-size:var(--calcite-shell-panel-height-internal);max-block-size:var(--calcite-shell-panel-max-height-internal);min-block-size:var(--calcite-shell-panel-min-height-internal)}/*!@.content__header*/.content__header.sc-calcite-shell-panel{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}/*!@.content__body*/.content__body.sc-calcite-shell-panel{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}/*!@.content--overlay*/.content--overlay.sc-calcite-shell-panel{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host([layout=vertical]) .content--overlay*/[layout=vertical].sc-calcite-shell-panel-h .content--overlay.sc-calcite-shell-panel{inset-block-start:0px;block-size:100%}/*!@:host([layout=horizontal]) .content--overlay*/[layout=horizontal].sc-calcite-shell-panel-h .content--overlay.sc-calcite-shell-panel{inset-inline-start:0px;inline-size:100%}/*!@:host([layout=vertical][position=start]) .content--overlay*/[layout=vertical][position=start].sc-calcite-shell-panel-h .content--overlay.sc-calcite-shell-panel{inset-inline-start:100%;box-shadow:var(--calcite-shell-panel-shadow-inline-start-internal)}/*!@:host([layout=vertical][position=end]) .content--overlay*/[layout=vertical][position=end].sc-calcite-shell-panel-h .content--overlay.sc-calcite-shell-panel{inset-inline-end:100%;box-shadow:var(--calcite-shell-panel-shadow-inline-end-internal)}/*!@:host([layout=horizontal][position=start]) .content--overlay*/[layout=horizontal][position=start].sc-calcite-shell-panel-h .content--overlay.sc-calcite-shell-panel{inset-block-start:100%;box-shadow:var(--calcite-shell-panel-shadow-block-start-internal)}/*!@:host([layout=horizontal][position=end]) .content--overlay*/[layout=horizontal][position=end].sc-calcite-shell-panel-h .content--overlay.sc-calcite-shell-panel{inset-block-end:100%;box-shadow:var(--calcite-shell-panel-shadow-block-end-internal)}/*!@.content--float*/.content--float.sc-calcite-shell-panel{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-shell-panel-max-height-internal, calc(100% - 1rem))}/*!@.content--float ::slotted(calcite-panel),\n.content--float ::slotted(calcite-flow)*/.content--float .sc-calcite-shell-panel-s>calcite-panel,.content--float .sc-calcite-shell-panel-s>calcite-flow{max-block-size:unset}/*!@:host([layout=horizontal]) .content--float*/[layout=horizontal].sc-calcite-shell-panel-h .content--float.sc-calcite-shell-panel{margin-block:0.5rem}/*!@:host([position=start]) .content--float ::slotted(calcite-panel),\n:host([position=start]) .content--float ::slotted(calcite-flow),\n:host([position=end]) .content--float ::slotted(calcite-panel),\n:host([position=end]) .content--float ::slotted(calcite-flow)*/.sc-calcite-shell-panel-h[position=start] .content--float .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=start] .content--float .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content--float .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=end] .content--float .sc-calcite-shell-panel-s>calcite-flow{border-style:none}/*!@.content[hidden]*/.content[hidden].sc-calcite-shell-panel{display:none}/*!@slot[name=action-bar]::slotted(calcite-action-bar),\n.content ::slotted(calcite-flow),\n.content ::slotted(calcite-panel:not([closed]))*/slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.content .sc-calcite-shell-panel-s>calcite-flow,.content .sc-calcite-shell-panel-s>calcite-panel:not([closed]){border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=start]) .content ::slotted(calcite-flow),\n:host([position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=start] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline-start:none}/*!@:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=end]) .content ::slotted(calcite-flow),\n:host([position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=end] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline-end:none}/*!@:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar)*/.sc-calcite-shell-panel-h[layout=horizontal] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar{border-inline:0}/*!@:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),\n:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[layout=horizontal][position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[layout=horizontal][position=start] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline:0;border-block-start:0}/*!@:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),\n:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[layout=horizontal][position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[layout=horizontal][position=end] .content .sc-calcite-shell-panel-s>calcite-panel{border-inline:0;border-block-end:0}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -31235,7 +32502,7 @@ class ShellPanel {
     this.connectSeparator = (separatorEl) => {
       this.disconnectSeparator();
       this.separatorEl = separatorEl;
-      separatorEl.addEventListener("pointerdown", this.separatorPointerDown);
+      separatorEl?.addEventListener("pointerdown", this.separatorPointerDown);
     };
     this.disconnectSeparator = () => {
       this.separatorEl?.removeEventListener("pointerdown", this.separatorPointerDown);
@@ -31250,10 +32517,12 @@ class ShellPanel {
     };
     this.collapsed = false;
     this.detached = false;
-    this.detachedHeightScale = "l";
+    this.displayMode = "dock";
+    this.detachedHeightScale = undefined;
+    this.heightScale = undefined;
     this.widthScale = "m";
     this.layout = "vertical";
-    this.position = undefined;
+    this.position = "start";
     this.resizable = false;
     this.messages = undefined;
     this.messageOverrides = undefined;
@@ -31262,6 +32531,23 @@ class ShellPanel {
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
+  handleDetached(value) {
+    if (value) {
+      this.displayMode = "float";
+    }
+    else if (this.displayMode === "float") {
+      this.displayMode = "dock";
+    }
+  }
+  handleDisplayMode(value) {
+    this.detached = value === "float";
+  }
+  handleDetachedHeightScale(value) {
+    this.heightScale = value;
+  }
+  handleHeightScale(value) {
+    this.detachedHeightScale = value;
+  }
   layoutHandler() {
     this.setActionBarsLayout(this.actionBars);
   }
@@ -31304,8 +32590,9 @@ class ShellPanel {
     return hasHeader ? (hAsync("div", { class: CSS$c.contentHeader, key: "header" }, hAsync("slot", { name: SLOTS$6.header }))) : null;
   }
   render() {
-    const { collapsed, detached, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout } = this;
-    const allowResizing = !detached && resizable;
+    const { collapsed, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout, displayMode } = this;
+    const dir = getElementDir(this.el);
+    const allowResizing = displayMode !== "float" && resizable;
     const style = allowResizing
       ? layout === "horizontal"
         ? contentHeight
@@ -31315,16 +32602,34 @@ class ShellPanel {
           ? { width: `${contentWidth}px` }
           : null
       : null;
-    const contentNode = (hAsync("div", { class: { [CSS$c.content]: true, [CSS$c.contentDetached]: detached }, hidden: collapsed, key: "content", style: style,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.storeContentEl }, this.renderHeader(), hAsync("div", { class: CSS$c.contentBody }, hAsync("slot", null))));
-    const separatorNode = allowResizing ? (hAsync("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
+    const separatorNode = !collapsed && allowResizing ? (hAsync("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
         ? contentHeight ?? initialContentHeight
         : contentWidth ?? initialContentWidth, class: CSS$c.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.connectSeparator })) : null;
+    const getAnimationDir = () => {
+      if (layout === "horizontal") {
+        return position === "start"
+          ? CSS_UTILITY.calciteAnimateInDown
+          : CSS_UTILITY.calciteAnimateInUp;
+      }
+      else {
+        const isStart = (dir === "ltr" && position === "end") || (dir === "rtl" && position === "start");
+        return isStart ? CSS_UTILITY.calciteAnimateInLeft : CSS_UTILITY.calciteAnimateInRight;
+      }
+    };
+    const contentNode = (hAsync("div", { class: {
+        [CSS_UTILITY.rtl]: dir === "rtl",
+        [CSS$c.content]: true,
+        [CSS$c.contentOverlay]: displayMode === "overlay",
+        [CSS$c.contentFloat]: displayMode === "float",
+        [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
+        [getAnimationDir()]: displayMode === "overlay"
+      }, hidden: collapsed, key: "content", style: style,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.storeContentEl }, this.renderHeader(), hAsync("div", { class: CSS$c.contentBody }, hAsync("slot", null)), separatorNode));
     const actionBarNode = (hAsync("slot", { key: "action-bar", name: SLOTS$6.actionBar, onSlotchange: this.handleActionBarSlotChange }));
-    const mainNodes = [actionBarNode, contentNode, separatorNode];
+    const mainNodes = [actionBarNode, contentNode];
     if (position === "end") {
       mainNodes.reverse();
     }
@@ -31393,6 +32698,10 @@ class ShellPanel {
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "detached": ["handleDetached"],
+    "displayMode": ["handleDisplayMode"],
+    "detachedHeightScale": ["handleDetachedHeightScale"],
+    "heightScale": ["handleHeightScale"],
     "layout": ["layoutHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
@@ -31404,7 +32713,9 @@ class ShellPanel {
     "$members$": {
       "collapsed": [516],
       "detached": [516],
+      "displayMode": [513, "display-mode"],
       "detachedHeightScale": [513, "detached-height-scale"],
+      "heightScale": [513, "height-scale"],
       "widthScale": [513, "width-scale"],
       "layout": [513],
       "position": [513],
@@ -31418,7 +32729,7 @@ class ShellPanel {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["collapsed", "collapsed"], ["detached", "detached"], ["detachedHeightScale", "detached-height-scale"], ["widthScale", "width-scale"], ["layout", "layout"], ["position", "position"], ["resizable", "resizable"]]
+    "$attrsToReflect$": [["collapsed", "collapsed"], ["detached", "detached"], ["displayMode", "display-mode"], ["detachedHeightScale", "detached-height-scale"], ["heightScale", "height-scale"], ["widthScale", "width-scale"], ["layout", "layout"], ["position", "position"], ["resizable", "resizable"]]
   }; }
 }
 
@@ -37792,8 +39103,11 @@ class TimePicker {
         });
       }
       if (this.hour && this.minute) {
-        const showSeconds = this.second && this.showSecond;
-        this.value = `${this.hour}:${this.minute}:${showSeconds ? this.second : "00"}`;
+        let newValue = `${this.hour}:${this.minute}`;
+        if (this.showSecond) {
+          newValue = `${newValue}:${this.second ?? "00"}`;
+        }
+        this.value = newValue;
       }
       else {
         this.value = null;