@esri/calcite-components 1.9.0-next.7 → 1.9.0-next.9

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.7
+ * v1.9.0-next.9
  */
 'use strict';
 
@@ -9473,10 +9473,11 @@ const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
 const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
 const geActionDimensions = (actions) => {
-  const actionLen = actions?.length;
+  const actionsNotSlotted = actions.filter((action) => action.slot !== SLOTS$x.menuActions);
+  const actionLen = actionsNotSlotted?.length;
   return {
-    actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
-    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0,
+    actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,
+    actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,
   };
 };
 const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
@@ -9927,7 +9928,7 @@ function getRoundRobinIndex(index, total) {
   return (index + total) % total;
 }
 
-const actionMenuCss = "/*!@:host*/.sc-calcite-action-menu-h{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}/*!@.menu ::slotted(calcite-action)*/.menu .sc-calcite-action-menu-s>calcite-action{margin:0.125rem;display:flex;outline-color:transparent}/*!@.menu ::slotted(calcite-action[active])*/.menu .sc-calcite-action-menu-s>calcite-action[active]{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:0px}/*!@.default-trigger*/.default-trigger.sc-calcite-action-menu{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@slot[name=trigger]::slotted(calcite-action),\ncalcite-action::slotted([slot=trigger])*/slot[name=trigger].sc-calcite-action-menu-s>calcite-action,calcite-action.sc-calcite-action-menu-s>[slot=trigger]{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@.menu*/.menu.sc-calcite-action-menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}/*!@:host([hidden])*/[hidden].sc-calcite-action-menu-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action-menu{display:none}";
+const actionMenuCss = "/*!@:host*/.sc-calcite-action-menu-h{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}/*!@.menu ::slotted(calcite-action)*/.menu .sc-calcite-action-menu-s>calcite-action{margin:0.125rem;display:flex;outline-color:transparent}/*!@.menu ::slotted(calcite-action[active])*/.menu .sc-calcite-action-menu-s>calcite-action[active]{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:0px}/*!@.default-trigger*/.default-trigger.sc-calcite-action-menu{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@slot[name=trigger]::slotted(calcite-action),\ncalcite-action::slotted([slot=trigger])*/slot[name=trigger].sc-calcite-action-menu-s>calcite-action,calcite-action.sc-calcite-action-menu-s>[slot=trigger]{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@.menu*/.menu.sc-calcite-action-menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}/*!@:host([hidden])*/[hidden].sc-calcite-action-menu-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action-menu{display:none}";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 /**
@@ -10111,6 +10112,7 @@ class ActionMenu {
       this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
       this.open = value;
     };
+    this.appearance = "solid";
     this.expanded = false;
     this.flipPlacements = undefined;
     this.label = undefined;
@@ -10171,8 +10173,8 @@ class ActionMenu {
     return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
-    const { label, scale, expanded } = this;
-    const menuButtonSlot = (hAsync("slot", { name: SLOTS$w.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$1a.defaultTrigger, icon: ICONS$j.menu, scale: scale, text: label, textEnabled: expanded,
+    const { appearance, label, scale, expanded } = this;
+    const menuButtonSlot = (hAsync("slot", { name: SLOTS$w.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { appearance: appearance, class: CSS$1a.defaultTrigger, icon: ICONS$j.menu, scale: scale, text: label, textEnabled: expanded,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setDefaultMenuButtonEl })));
     return menuButtonSlot;
@@ -10200,6 +10202,7 @@ class ActionMenu {
     "$flags$": 9,
     "$tagName$": "calcite-action-menu",
     "$members$": {
+      "appearance": [513],
       "expanded": [516],
       "flipPlacements": [16],
       "label": [1],
@@ -10213,7 +10216,7 @@ class ActionMenu {
     },
     "$listeners$": [[9, "pointerdown", "closeCalciteActionMenuOnClick"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["expanded", "expanded"], ["open", "open"], ["overlayPositioning", "overlay-positioning"], ["placement", "placement"], ["scale", "scale"]]
+    "$attrsToReflect$": [["appearance", "appearance"], ["expanded", "expanded"], ["open", "open"], ["overlayPositioning", "overlay-positioning"], ["placement", "placement"], ["scale", "scale"]]
   }; }
 }
 
@@ -11156,7 +11159,12 @@ const blockCss = "/*!@:host*/.sc-calcite-block-h{box-sizing:border-box;backgroun
 class Block {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.calciteBlockBeforeClose = createEvent(this, "calciteBlockBeforeClose", 6);
+    this.calciteBlockBeforeOpen = createEvent(this, "calciteBlockBeforeOpen", 6);
+    this.calciteBlockClose = createEvent(this, "calciteBlockClose", 6);
+    this.calciteBlockOpen = createEvent(this, "calciteBlockOpen", 6);
     this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 6);
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -11166,6 +11174,9 @@ class Block {
       this.open = !this.open;
       this.calciteBlockToggle.emit();
     };
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+    };
     this.collapsible = false;
     this.disabled = false;
     this.dragHandle = false;
@@ -11180,6 +11191,9 @@ class Block {
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
+  openHandler() {
+    onToggleOpenCloseComponent(this);
+  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
@@ -11196,6 +11210,18 @@ class Block {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
+  onBeforeOpen() {
+    this.calciteBlockBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteBlockOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteBlockBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteBlockClose.emit();
+  }
   effectiveLocaleChange() {
     updateMessages(this);
   }
@@ -11219,6 +11245,9 @@ class Block {
   async componentWillLoad() {
     await setUpMessages(this);
     setUpLoadableComponent(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -11259,11 +11288,14 @@ class Block {
     const headerNode = (hAsync("div", { class: CSS$16.headerContainer }, this.dragHandle ? hAsync("calcite-handle", null) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$16.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$16.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), hasControl ? (hAsync("div", { class: CSS$16.controlContainer }, hAsync("slot", { name: SLOTS$s.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options }, hAsync("slot", { name: SLOTS$s.headerMenuActions }))) : null));
     return (hAsync(Host, null, hAsync("article", { "aria-busy": toAriaBoolean(loading), class: {
         [CSS$16.container]: true,
-      } }, headerNode, hAsync("section", { "aria-labelledby": IDS$1.toggle, class: CSS$16.content, hidden: !open, id: IDS$1.content }, this.renderScrim()))));
+      } }, headerNode, hAsync("section", { "aria-labelledby": IDS$1.toggle, class: CSS$16.content, hidden: !open, id: IDS$1.content,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, this.renderScrim()))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
@@ -22787,7 +22819,7 @@ function bezier(p0, p1, m0, m1, t) {
  * @param root0.min
  * @param root0.max
  */
-function translate$3({ width, height, min, max }) {
+function translate$4({ width, height, min, max }) {
   const rangeX = max[0] - min[0];
   const rangeY = max[1] - min[1];
   return (point) => {
@@ -22893,7 +22925,7 @@ class Graph {
     if (max > rangeMax[0] || max < rangeMax[0]) {
       currentMax = [max, rangeMax[1]];
     }
-    const t = translate$3({ min: currentMin, max: currentMax, width, height });
+    const t = translate$4({ min: currentMin, max: currentMax, width, height });
     const [hMinX] = t([highlightMin, currentMax[1]]);
     const [hMaxX] = t([highlightMax, currentMax[1]]);
     const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
@@ -27231,11 +27263,11 @@ var L = 'en'; // global locale
 var Ls = {}; // global loaded locale
 
 Ls[L] = en;
+var IS_DAYJS = '$isDayjsObject'; // eslint-disable-next-line no-use-before-define
 
 var isDayjs = function isDayjs(d) {
-  return d instanceof Dayjs;
-}; // eslint-disable-line no-use-before-define
-
+  return d instanceof Dayjs || !!(d && d[IS_DAYJS]);
+};
 
 var parseLocale = function parseLocale(preset, object, isLocal) {
   var l;
@@ -27328,13 +27360,15 @@ var Dayjs = /*#__PURE__*/function () {
   function Dayjs(cfg) {
     this.$L = parseLocale(cfg.locale, null, true);
     this.parse(cfg); // for plugin
+
+    this.$x = this.$x || cfg.x || {};
+    this[IS_DAYJS] = true;
   }
 
   var _proto = Dayjs.prototype;
 
   _proto.parse = function parse(cfg) {
     this.$d = parseDate(cfg);
-    this.$x = cfg.x || {};
     this.init();
   };
 
@@ -28349,12 +28383,17 @@ dayjs.extend(updateLocale);
 class InputTimePicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.calciteInputTimePickerBeforeClose = createEvent(this, "calciteInputTimePickerBeforeClose", 6);
+    this.calciteInputTimePickerBeforeOpen = createEvent(this, "calciteInputTimePickerBeforeOpen", 6);
     this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
+    this.calciteInputTimePickerClose = createEvent(this, "calciteInputTimePickerClose", 6);
+    this.calciteInputTimePickerOpen = createEvent(this, "calciteInputTimePickerOpen", 6);
     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.userChangedValue = false;
     this.referenceElementId = `input-time-picker-${guid()}`;
+    this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -28427,6 +28466,7 @@ class InputTimePicker {
           this.focusOnOpen = false;
         },
       });
+      this.open = false;
     };
     this.popoverOpenHandler = () => {
       activateFocusTrap(this, {
@@ -28480,8 +28520,9 @@ class InputTimePicker {
     this.setCalcitePopoverEl = (el) => {
       this.popoverEl = el;
     };
-    this.setCalciteInputEl = (el) => {
+    this.setInputAndTransitionEl = (el) => {
       this.calciteInputEl = el;
+      this.transitionEl = el;
     };
     this.setCalciteTimePickerEl = (el) => {
       this.calciteTimePickerEl = el;
@@ -28569,12 +28610,13 @@ class InputTimePicker {
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
-  openHandler(value) {
+  openHandler(open) {
+    onToggleOpenCloseComponent(this);
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
     }
-    if (value) {
+    if (open) {
       this.reposition(true);
     }
   }
@@ -28646,6 +28688,18 @@ class InputTimePicker {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  onBeforeOpen() {
+    this.calciteInputTimePickerBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteInputTimePickerOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteInputTimePickerBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteInputTimePickerClose.emit();
+  }
   delocalizeTimeString(value) {
     // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
     dayjs.locale(this.effectiveLocale.toLowerCase());
@@ -28854,6 +28908,9 @@ class InputTimePicker {
   async componentWillLoad() {
     setUpLoadableComponent(this);
     await Promise.all([setUpMessages(this), this.loadDateTimeLocaleData()]);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -28887,7 +28944,7 @@ class InputTimePicker {
     const { disabled, messages, readOnly, dialogId } = this;
     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 should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setCalciteInputEl }), !this.readOnly && 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,
+      ref: this.setInputAndTransitionEl }), !this.readOnly && 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 should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       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 -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
@@ -34314,8 +34371,13 @@ const noticeCss = "/*!@:host([scale=s])*/[scale=s].sc-calcite-notice-h{--calcite
 class Notice {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.calciteNoticeBeforeClose = createEvent(this, "calciteNoticeBeforeClose", 6);
+    this.calciteNoticeBeforeOpen = createEvent(this, "calciteNoticeBeforeOpen", 6);
     this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 6);
     this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 6);
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+    };
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -34323,8 +34385,8 @@ class Notice {
     //--------------------------------------------------------------------------
     this.close = () => {
       this.open = false;
-      this.calciteNoticeClose.emit();
     };
+    this.openTransitionProp = "opacity";
     this.open = false;
     this.kind = "brand";
     this.closable = false;
@@ -34337,6 +34399,9 @@ class Notice {
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
+  openHandler() {
+    onToggleOpenCloseComponent(this);
+  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
@@ -34362,6 +34427,9 @@ class Notice {
     setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     await setUpMessages(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -34372,7 +34440,9 @@ class Notice {
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const hasActionEnd = getSlotted(el, SLOTS$e.actionsEnd);
-    return (hAsync("div", { class: CSS$v.container }, this.requestedIcon ? (hAsync("div", { class: CSS$v.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: CSS$v.content }, hAsync("slot", { name: SLOTS$e.title }), hAsync("slot", { name: SLOTS$e.message }), hAsync("slot", { name: SLOTS$e.link })), hasActionEnd ? (hAsync("div", { class: CSS$v.actionsEnd }, hAsync("slot", { name: SLOTS$e.actionsEnd }))) : null, this.closable ? closeButton : null));
+    return (hAsync("div", { class: CSS$v.container,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, this.requestedIcon ? (hAsync("div", { class: CSS$v.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: CSS$v.content }, hAsync("slot", { name: SLOTS$e.title }), hAsync("slot", { name: SLOTS$e.message }), hAsync("slot", { name: SLOTS$e.link })), hasActionEnd ? (hAsync("div", { class: CSS$v.actionsEnd }, hAsync("slot", { name: SLOTS$e.actionsEnd }))) : null, this.closable ? closeButton : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -34393,12 +34463,25 @@ class Notice {
       this.closeButton.focus();
     }
   }
+  onBeforeClose() {
+    this.calciteNoticeBeforeClose.emit();
+  }
+  onBeforeOpen() {
+    this.calciteNoticeBeforeOpen.emit();
+  }
+  onClose() {
+    this.calciteNoticeClose.emit();
+  }
+  onOpen() {
+    this.calciteNoticeOpen.emit();
+  }
   effectiveLocaleChange() {
     updateMessages(this);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
     "icon": ["updateRequestedIcon"],
     "kind": ["updateRequestedIcon"],
@@ -45620,6 +45703,9 @@ var locale$M = {
   months: months$5,
   monthsShort: months$5,
   weekStart: 6,
+  meridiem: function meridiem(hour) {
+    return hour > 12 ? 'م' : 'ص';
+  },
   relativeTime: {
     future: 'بعد %s',
     past: 'منذ %s',
@@ -45807,7 +45893,7 @@ function plural$4(n) {
 /* eslint-disable */
 
 
-function translate$2(number, withoutSuffix, key, isFuture) {
+function translate$3(number, withoutSuffix, key, isFuture) {
   var result = number + " ";
 
   switch (key) {
@@ -45903,17 +45989,17 @@ var locale$I = {
   relativeTime: {
     future: 'za %s',
     past: 'před %s',
-    s: translate$2,
-    m: translate$2,
-    mm: translate$2,
-    h: translate$2,
-    hh: translate$2,
-    d: translate$2,
-    dd: translate$2,
-    M: translate$2,
-    MM: translate$2,
-    y: translate$2,
-    yy: translate$2
+    s: translate$3,
+    m: translate$3,
+    mm: translate$3,
+    h: translate$3,
+    hh: translate$3,
+    d: translate$3,
+    dd: translate$3,
+    M: translate$3,
+    MM: translate$3,
+    y: translate$3,
+    yy: translate$3
   }
 };
 dayjs.locale(locale$I, null, true);
@@ -47109,7 +47195,7 @@ var locale$l = {
   months: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
   monthsShort: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
   ordinal: function ordinal(n) {
-    return n;
+    return n + "\uC77C";
   },
   formats: {
     LT: 'A h:mm',
@@ -47405,7 +47491,7 @@ function plural$3(n) {
 /* eslint-disable */
 
 
-function translate$1(number, withoutSuffix, key) {
+function translate$2(number, withoutSuffix, key) {
   var result = number + " ";
 
   switch (key) {
@@ -47461,16 +47547,16 @@ var locale$f = {
     future: 'za %s',
     past: '%s temu',
     s: 'kilka sekund',
-    m: translate$1,
-    mm: translate$1,
-    h: translate$1,
-    hh: translate$1,
+    m: translate$2,
+    mm: translate$2,
+    h: translate$2,
+    hh: translate$2,
     d: '1 dzień',
     dd: '%d dni',
     M: 'miesiąc',
-    MM: translate$1,
+    MM: translate$2,
     y: 'rok',
-    yy: translate$1
+    yy: translate$2
   },
   formats: {
     LT: 'HH:mm',
@@ -47728,7 +47814,7 @@ function plural$1(n) {
 /* eslint-disable */
 
 
-function translate(number, withoutSuffix, key, isFuture) {
+function translate$1(number, withoutSuffix, key, isFuture) {
   var result = number + " ";
 
   switch (key) {
@@ -47825,17 +47911,17 @@ var locale$a = {
     future: 'za %s',
     // Should be `o %s` (change when moment/moment#5408 is fixed)
     past: 'pred %s',
-    s: translate,
-    m: translate,
-    mm: translate,
-    h: translate,
-    hh: translate,
-    d: translate,
-    dd: translate,
-    M: translate,
-    MM: translate,
-    y: translate,
-    yy: translate
+    s: translate$1,
+    m: translate$1,
+    mm: translate$1,
+    h: translate$1,
+    hh: translate$1,
+    d: translate$1,
+    dd: translate$1,
+    M: translate$1,
+    MM: translate$1,
+    y: translate$1,
+    yy: translate$1
   }
 };
 dayjs.locale(locale$a, null, true);
@@ -47846,6 +47932,107 @@ var sk = /*#__PURE__*/Object.freeze({
 });
 
 // Slovenian [sl]
+
+function dual(n) {
+  return n % 100 == 2; // eslint-disable-line
+}
+
+function threeFour(n) {
+  return n % 100 == 3 || n % 100 == 4; // eslint-disable-line
+}
+/* eslint-disable */
+
+
+function translate(number, withoutSuffix, key, isFuture) {
+  var result = number + " ";
+
+  switch (key) {
+    case 's':
+      // a few seconds / in a few seconds / a few seconds ago
+      return withoutSuffix || isFuture ? 'nekaj sekund' : 'nekaj sekundami';
+
+    case 'm':
+      // a minute / in a minute / a minute ago
+      return withoutSuffix ? 'ena minuta' : 'eno minuto';
+
+    case 'mm':
+      // 9 minutes / in 9 minutes / 9 minutes ago
+      if (dual(number)) {
+        return result + (withoutSuffix || isFuture ? 'minuti' : 'minutama');
+      }
+
+      if (threeFour(number)) {
+        return result + (withoutSuffix || isFuture ? 'minute' : 'minutami');
+      }
+
+      return result + (withoutSuffix || isFuture ? 'minut' : 'minutami');
+
+    case 'h':
+      // an hour / in an hour / an hour ago
+      return withoutSuffix ? 'ena ura' : isFuture ? 'eno uro' : 'eno uro';
+
+    case 'hh':
+      // 9 hours / in 9 hours / 9 hours ago
+      if (dual(number)) {
+        return result + (withoutSuffix || isFuture ? 'uri' : 'urama');
+      }
+
+      if (threeFour(number)) {
+        return result + (withoutSuffix || isFuture ? 'ure' : 'urami');
+      }
+
+      return result + (withoutSuffix || isFuture ? 'ur' : 'urami');
+
+    case 'd':
+      // a day / in a day / a day ago
+      return withoutSuffix || isFuture ? 'en dan' : 'enim dnem';
+
+    case 'dd':
+      // 9 days / in 9 days / 9 days ago
+      if (dual(number)) {
+        return result + (withoutSuffix || isFuture ? 'dneva' : 'dnevoma');
+      }
+
+      return result + (withoutSuffix || isFuture ? 'dni' : 'dnevi');
+
+    case 'M':
+      // a month / in a month / a month ago
+      return withoutSuffix || isFuture ? 'en mesec' : 'enim mesecem';
+
+    case 'MM':
+      // 9 months / in 9 months / 9 months ago
+      if (dual(number)) {
+        // 2 minutes / in 2 minutes
+        return result + (withoutSuffix || isFuture ? 'meseca' : 'mesecema');
+      }
+
+      if (threeFour(number)) {
+        return result + (withoutSuffix || isFuture ? 'mesece' : 'meseci');
+      }
+
+      return result + (withoutSuffix || isFuture ? 'mesecev' : 'meseci');
+
+    case 'y':
+      // a year / in a year / a year ago
+      return withoutSuffix || isFuture ? 'eno leto' : 'enim letom';
+
+    case 'yy':
+      // 9 years / in 9 years / 9 years ago
+      if (dual(number)) {
+        // 2 minutes / in 2 minutes
+        return result + (withoutSuffix || isFuture ? 'leti' : 'letoma');
+      }
+
+      if (threeFour(number)) {
+        return result + (withoutSuffix || isFuture ? 'leta' : 'leti');
+      }
+
+      return result + (withoutSuffix || isFuture ? 'let' : 'leti');
+  }
+}
+/* eslint-enable */
+
+
 var locale$9 = {
   name: 'sl',
   weekdays: 'nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota'.split('_'),
@@ -47863,22 +48050,23 @@ var locale$9 = {
     L: 'DD.MM.YYYY',
     LL: 'D. MMMM YYYY',
     LLL: 'D. MMMM YYYY H:mm',
-    LLLL: 'dddd, D. MMMM YYYY H:mm'
+    LLLL: 'dddd, D. MMMM YYYY H:mm',
+    l: 'D. M. YYYY'
   },
   relativeTime: {
     future: 'čez %s',
     past: 'pred %s',
-    s: 'nekaj sekund',
-    m: 'minuta',
-    mm: '%d minut',
-    h: 'ura',
-    hh: '%d ur',
-    d: 'dan',
-    dd: '%d dni',
-    M: 'mesec',
-    MM: '%d mesecev',
-    y: 'leto',
-    yy: '%d let'
+    s: translate,
+    m: translate,
+    mm: translate,
+    h: translate,
+    hh: translate,
+    d: translate,
+    dd: translate,
+    M: translate,
+    MM: translate,
+    y: translate,
+    yy: translate
   }
 };
 dayjs.locale(locale$9, null, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.9.0-next.7",
+  "version": "1.9.0-next.9",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
@@ -23,11 +23,11 @@
     "postbuild": "npm run util:patch && npm run util:generate-t9n-docs-json && git restore src/components/*/readme.md",
     "build:watch": "npm run util:prep-build-reqs && stencil build --no-docs --watch",
     "build:watch-dev": "npm run util:prep-build-reqs && stencil build --no-docs --dev --watch",
-    "build-storybook": "npm run util:build-docs && build-storybook --output-dir ./docs --quiet",
+    "build-storybook": "npm run util:build-docs && NODE_OPTIONS=--openssl-legacy-provider build-storybook --output-dir ./docs --quiet",
     "clean": "npm run util:clean-js-files && rimraf node_modules dist www hydrate docs .turbo src/components.d.ts",
     "deps:update": "updtr --exclude chalk cheerio typescript @types/jest jest jest-cli ts-jest puppeteer @whitespace/storybook-addon-html && npm audit fix",
     "docs": "build-storybook",
-    "docs:preview": "npm run util:build-docs && STORYBOOK_SCREENSHOT_LOCAL_BUILD=true start-storybook",
+    "docs:preview": "npm run util:build-docs && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true start-storybook",
     "lint": "concurrently npm:lint:*",
     "lint:html": "prettier --write \"**/*.html\" >/dev/null",
     "lint:json": "prettier --write \"**/*.json\" >/dev/null",
@@ -68,7 +68,7 @@
     "@types/color": "3.0.4",
     "color": "4.2.3",
     "composed-offset-position": "0.0.4",
-    "dayjs": "1.11.9",
+    "dayjs": "1.11.10",
     "focus-trap": "7.5.2",
     "form-request-submit-polyfill": "2.0.0",
     "lodash-es": "4.17.21",
@@ -76,7 +76,7 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "1.0.0",
-    "@esri/calcite-ui-icons": "3.24.3",
+    "@esri/calcite-ui-icons": "3.24.4",
     "@esri/eslint-plugin-calcite-components": "^0.2.3-next.4",
     "@stencil-community/eslint-plugin": "0.5.0",
     "@stencil/postcss": "2.1.0",
@@ -88,5 +88,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "711d6e856ee02bf5770ee80744237fa6ef1a3564"
+  "gitHead": "5188b214dc941a51d1ae639596419d3e0481aafc"
 }