@esri/calcite-components 1.0.0-next.677 → 1.0.0-next.679

package/dist/components/time-picker.js

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.677
+ * v1.0.0-next.679
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { n as numberKeys, i as isActivationKey } from './key.js';
 import { i as isValidNumber, g as getSupportedLocale, b as getSupportedNumberingSystem, c as connectLocalized, d as disconnectLocalized } from './locale.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
+import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const maxTenthForMinuteAndSecond = 5;
@@ -214,20 +215,6 @@ const CSS = {
   timePicker: "time-picker",
   meridiemStart: "meridiem--start"
 };
-const TEXT = {
-  hour: "Hour",
-  hourDown: "Decrease hour",
-  hourUp: "Increase hour",
-  meridiem: "AM/PM",
-  meridiemDown: "Decrease AM/PM",
-  meridiemUp: "Increase AM/PM",
-  minute: "Minute",
-  minuteDown: "Decrease minute",
-  minuteUp: "Increase minute",
-  second: "Second",
-  secondDown: "Decrease second",
-  secondUp: "Increase second"
-};
 
 const timePickerCss = "@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-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}: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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}";
 
@@ -579,22 +566,24 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.calciteInternalTimePickerChange.emit();
       }
     };
-    this.intlHour = TEXT.hour;
-    this.intlHourDown = TEXT.hourDown;
-    this.intlHourUp = TEXT.hourUp;
-    this.intlMeridiem = TEXT.meridiem;
-    this.intlMeridiemDown = TEXT.meridiemDown;
-    this.intlMeridiemUp = TEXT.meridiemUp;
-    this.intlMinute = TEXT.minute;
-    this.intlMinuteDown = TEXT.minuteDown;
-    this.intlMinuteUp = TEXT.minuteUp;
-    this.intlSecond = TEXT.second;
-    this.intlSecondDown = TEXT.secondDown;
-    this.intlSecondUp = TEXT.secondUp;
+    this.intlHour = undefined;
+    this.intlHourDown = undefined;
+    this.intlHourUp = undefined;
+    this.intlMeridiem = undefined;
+    this.intlMeridiemDown = undefined;
+    this.intlMeridiemUp = undefined;
+    this.intlMinute = undefined;
+    this.intlMinuteDown = undefined;
+    this.intlMinuteUp = undefined;
+    this.intlSecond = undefined;
+    this.intlSecondDown = undefined;
+    this.intlSecondUp = undefined;
     this.scale = "m";
     this.step = 60;
     this.numberingSystem = undefined;
     this.value = null;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
     this.effectiveLocale = "";
     this.hour = undefined;
     this.hourCycle = undefined;
@@ -609,10 +598,14 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.minute = undefined;
     this.second = undefined;
     this.showSecond = this.step < 60;
+    this.defaultMessages = undefined;
   }
   valueWatcher(newValue) {
     this.setValue(newValue, false);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   effectiveLocaleWatcher() {
     this.updateLocale();
   }
@@ -725,6 +718,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return 0;
   }
   updateLocale() {
+    updateMessages(this, this.effectiveLocale);
     this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
     this.setValue(this.value, false);
   }
@@ -736,20 +730,23 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   connectedCallback() {
     connectLocalized(this);
     this.updateLocale();
+    connectMessages(this);
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem
     }));
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
+    await setUpMessages(this);
   }
   componentDidLoad() {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -767,54 +764,68 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [CSS.showMeridiem]: showMeridiem,
         [CSS.showSecond]: this.showSecond,
         [CSS[`scale-${this.scale}`]]: true
-      }, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlHourUp, class: {
+      }, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.hourUp, class: {
         [CSS.button]: true,
         [CSS.buttonHourUp]: true,
         [CSS.buttonTopLeft]: true
-      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlHour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
+      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS.input]: true,
         [CSS.hour]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { "aria-label": this.intlHourDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
         [CSS.button]: true,
         [CSS.buttonHourDown]: true,
         [CSS.buttonBottomLeft]: true
-      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlMinuteUp, class: {
+      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteUp]: true
-      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlMinute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
+      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS.input]: true,
         [CSS.minute]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { "aria-label": this.intlMinuteDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteDown]: true
-      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlSecondUp, class: {
+      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
         [CSS.button]: true,
         [CSS.buttonSecondUp]: true
-      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlSecond, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS.input]: true,
         [CSS.second]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { "aria-label": this.intlSecondDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
         [CSS.button]: true,
         [CSS.buttonSecondDown]: true
       }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
         [CSS.column]: true,
         [CSS.meridiemStart]: this.meridiemOrder === 0
-      }, role: "group" }, h("span", { "aria-label": this.intlMeridiemUp, class: {
+      }, role: "group" }, h("span", { "aria-label": this.messages.meridiemUp, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemUp]: true,
         [CSS.buttonTopRight]: true
-      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlMeridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS.input]: true,
         [CSS.meridiem]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.intlMeridiemDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemDown]: true,
         [CSS.buttonBottomRight]: true
       }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "value": ["valueWatcher"],
+    "intlHour": ["onMessagesChange"],
+    "intlHourDown": ["onMessagesChange"],
+    "intlHourUp": ["onMessagesChange"],
+    "intlMeridiem": ["onMessagesChange"],
+    "intlMeridiemDown": ["onMessagesChange"],
+    "intlMeridiemUp": ["onMessagesChange"],
+    "intlMinute": ["onMessagesChange"],
+    "intlMinuteDown": ["onMessagesChange"],
+    "intlMinuteUp": ["onMessagesChange"],
+    "intlSecond": ["onMessagesChange"],
+    "intlSecondDown": ["onMessagesChange"],
+    "intlSecondUp": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
   static get style() { return timePickerCss; }
@@ -835,6 +846,8 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "step": [514],
     "numberingSystem": [1, "numbering-system"],
     "value": [1025],
+    "messages": [1040],
+    "messageOverrides": [1040],
     "effectiveLocale": [32],
     "hour": [32],
     "hourCycle": [32],
@@ -849,6 +862,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "minute": [32],
     "second": [32],
     "showSecond": [32],
+    "defaultMessages": [32],
     "setFocus": [64]
   }, [[0, "blur", "hostBlurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"]]]);
 function defineCustomElement() {

package/dist/components/tooltip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.677
+ * v1.0.0-next.679
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.677
+ * v1.0.0-next.679
  */
 function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/components/utils2.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.677
+ * v1.0.0-next.679
  */
 import { n as nodeListToArray } from './dom.js';
 import { Build } from '@stencil/core/internal/client/index.js';
@@ -9,9 +9,6 @@ import { Build } from '@stencil/core/internal/client/index.js';
 const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
-const TEXT = {
-  removeTag: "Remove tag"
-};
 
 function getAncestors(element) {
   const parent = element.parentElement?.closest(ComboboxChildSelector);
@@ -36,4 +33,4 @@ function getDepth(element) {
   return result.snapshotLength;
 }
 
-export { ComboboxItemGroup as C, TEXT as T, ComboboxChildSelector as a, getItemChildren as b, ComboboxItem as c, getAncestors as d, getDepth as e, getItemAncestors as g, hasActiveChildren as h };
+export { ComboboxItemGroup as C, ComboboxChildSelector as a, getItemChildren as b, ComboboxItem as c, getAncestors as d, getDepth as e, getItemAncestors as g, hasActiveChildren as h };

package/dist/esm/ExpandToggle-8dc80be3.js

@@ -0,0 +1,99 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-next.679
+ */
+import { f as forceUpdate, h } from './index-3d40e818.js';
+import { b as getElementDir } from './dom-4b063f5a.js';
+import { S as SLOTS } from './resources-b806f4f3.js';
+import { S as SLOTS$1 } from './resources-98975ad7.js';
+
+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;
+  return {
+    actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
+    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0
+  };
+};
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount }) => {
+  const maxContainerPx = layout === "horizontal" ? width : height;
+  const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
+  return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
+};
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
+  return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
+};
+const queryActions = (el) => {
+  return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
+};
+const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
+  let needToSlotCount = overflowCount;
+  actionGroups.reverse().forEach((group) => {
+    let slottedWithinGroupCount = 0;
+    const groupActions = queryActions(group).reverse();
+    groupActions.forEach((groupAction) => {
+      if (groupAction.slot === SLOTS$1.menuActions) {
+        groupAction.removeAttribute("slot");
+        groupAction.textEnabled = expanded;
+      }
+    });
+    if (needToSlotCount > 0) {
+      groupActions.some((groupAction) => {
+        const unslottedActions = groupActions.filter((action) => !action.slot);
+        if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
+          groupAction.textEnabled = true;
+          groupAction.setAttribute("slot", SLOTS$1.menuActions);
+          slottedWithinGroupCount++;
+          if (slottedWithinGroupCount > 1) {
+            needToSlotCount--;
+          }
+        }
+        return needToSlotCount < 1;
+      });
+    }
+    forceUpdate(group);
+  });
+};
+
+const ICONS = {
+  chevronsLeft: "chevrons-left",
+  chevronsRight: "chevrons-right"
+};
+function getCalcitePosition(position, el) {
+  return position || el.closest("calcite-shell-panel")?.position || "start";
+}
+function toggleChildActionText({ parent, expanded }) {
+  queryActions(parent)
+    .filter((el) => el.slot !== SLOTS$1.menuActions)
+    .forEach((action) => (action.textEnabled = expanded));
+  parent
+    .querySelectorAll("calcite-action-group, calcite-action-menu")
+    .forEach((el) => (el.expanded = expanded));
+}
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
+  if (tooltip) {
+    tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
+  }
+  if (ref) {
+    ref(referenceElement);
+  }
+  return referenceElement;
+};
+const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
+  const rtl = getElementDir(el) === "rtl";
+  const expandText = expanded ? intlCollapse : intlExpand;
+  const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
+  if (rtl) {
+    icons.reverse();
+  }
+  const end = getCalcitePosition(position, el) === "end";
+  const expandIcon = end ? icons[1] : icons[0];
+  const collapseIcon = end ? icons[0] : icons[1];
+  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  return actionNode;
+};
+
+export { ExpandToggle as E, overflowActions as a, getOverflowCount as b, geActionDimensions as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };

package/dist/esm/Heading-a542ba34.js

@@ -0,0 +1,17 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-next.679
+ */
+import { h } from './index-3d40e818.js';
+
+function constrainHeadingLevel(level) {
+  return Math.min(Math.max(Math.ceil(level), 1), 6);
+}
+const Heading = (props, children) => {
+  const HeadingTag = props.level ? `h${props.level}` : "div";
+  delete props.level;
+  return h(HeadingTag, { ...props }, children);
+};
+
+export { Heading as H, constrainHeadingLevel as c };

package/dist/esm/app-globals-910629ce.js

@@ -0,0 +1,57 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-next.679
+ */
+import { d as darkTheme, a as autoTheme } from './resources-144d97f9.js';
+
+/**
+ * Emits when the theme is dynamically toggled between light and dark on <body> or in OS preferences.
+ */
+function initThemeChangeEvent() {
+  const { classList } = document.body;
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const getTheme = () => classList.contains(darkTheme) || (classList.contains(autoTheme) && prefersDark) ? "dark" : "light";
+  const emitThemeChange = (theme) => document.body.dispatchEvent(new CustomEvent("calciteThemeChange", { bubbles: true, detail: { theme } }));
+  const themeChangeHandler = (newTheme) => {
+    currentTheme !== newTheme && emitThemeChange(newTheme);
+    currentTheme = newTheme;
+  };
+  let currentTheme = getTheme();
+  // emits event on page load
+  emitThemeChange(currentTheme);
+  // emits event when changing OS theme preferences
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (event) => themeChangeHandler(event.matches ? "dark" : "light"));
+  // emits event when toggling between theme classes on <body>
+  new MutationObserver(() => themeChangeHandler(getTheme())).observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+}
+
+/**
+ * This file is imported in Stencil's `globalScript` config option.
+ *
+ * @see {@link https://stenciljs.com/docs/config#globalscript}
+ */
+function appGlobalScript () {
+  const isBrowser = typeof window !== "undefined" &&
+    typeof location !== "undefined" &&
+    typeof document !== "undefined" &&
+    window.location === location &&
+    window.document === document;
+  if (isBrowser) {
+    if (document.readyState === "interactive") {
+      initThemeChangeEvent();
+    }
+    else {
+      document.addEventListener("DOMContentLoaded", () => initThemeChangeEvent(), { once: true });
+    }
+  }
+}
+
+const globalScripts = appGlobalScript;
+
+export { globalScripts as g };

package/dist/esm/array-12b9465a.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-next.679
+ */
+function getRoundRobinIndex(index, total) {
+  return (index + total) % total;
+}
+
+export { getRoundRobinIndex as g };

package/dist/esm/calcite-accordion_2.entry.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.677
+ * v1.0.0-next.679
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-526fe44f.js';
-import { h as getElementProp, g as getSlotted, a as getElementDir, t as toAriaBoolean } from './dom-cb6da365.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0ff48e7e.js';
-import { C as CSS_UTILITY } from './resources-e5017586.js';
-import './guid-a54d5b0e.js';
-import './observers-d3bdba4b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-3d40e818.js';
+import { h as getElementProp, g as getSlotted, b as getElementDir, t as toAriaBoolean } from './dom-4b063f5a.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-fd34dd5a.js';
+import { C as CSS_UTILITY } from './resources-144d97f9.js';
+import './guid-5f99983c.js';
+import './observers-8de4feef.js';
 
 const accordionCss = "@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-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}: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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 

package/dist/esm/calcite-action-bar.entry.js

@@ -1,19 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.677
+ * v1.0.0-next.679
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-526fe44f.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-c3c33d72.js';
-import { f as focusElement, g as getSlotted } from './dom-cb6da365.js';
-import { c as createObserver } from './observers-d3bdba4b.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0ff48e7e.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-7d16143a.js';
-import { d as debounce } from './debounce-1466ff89.js';
-import './resources-7201ff09.js';
-import './resources-1900d9f0.js';
-import './resources-e5017586.js';
-import './guid-a54d5b0e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d40e818.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-8dc80be3.js';
+import { f as focusElement, g as getSlotted } from './dom-4b063f5a.js';
+import { c as createObserver } from './observers-8de4feef.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-fd34dd5a.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9f9398ba.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-d3d4a0f4.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentLoaded } from './loadable-b9b2ca65.js';
+import { d as debounce } from './debounce-48a363f4.js';
+import './resources-b806f4f3.js';
+import './resources-98975ad7.js';
+import './resources-144d97f9.js';
+import './guid-5f99983c.js';
+import './key-ede764e3.js';
 
 const CSS = {
   actionGroupBottom: "action-group--bottom"
@@ -22,10 +25,6 @@ const SLOTS = {
   bottomActions: "bottom-actions",
   expandTooltip: "expand-tooltip"
 };
-const TEXT = {
-  expand: "Expand",
-  collapse: "Collapse"
-};
 
 const actionBarCss = "@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-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}: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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;background:transparent;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-width:0px;border-inline-end-width:1px;border-style:solid}::slotted(calcite-action-group:last-child){border-block-end-width:0px;border-inline-end-width:0px}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px;padding-inline-end:0px}";
 
@@ -108,6 +107,10 @@ const ActionBar = class {
     this.overflowActionsDisabled = false;
     this.position = undefined;
     this.scale = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   expandHandler() {
     this.conditionallyOverflowActions();
@@ -121,20 +124,25 @@ const ActionBar = class {
       ? this.resizeObserver.disconnect()
       : this.resizeObserver.observe(this.el);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
   componentDidLoad() {
     setComponentLoaded(this);
     this.conditionallyOverflowActions();
   }
   connectedCallback() {
     const { el, expanded } = this;
+    connectLocalized(this);
+    connectMessages(this);
     toggleChildActionText({ parent: el, expanded });
     this.mutationObserver?.observe(el, { childList: true, subtree: true });
     if (!this.overflowActionsDisabled) {
@@ -143,10 +151,16 @@ const ActionBar = class {
     this.conditionallyOverflowActions();
     connectConditionalSlotComponent(this);
   }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
     disconnectConditionalSlotComponent(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -180,21 +194,26 @@ const ActionBar = class {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale, layout } = this;
+    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
-    const expandLabel = intlExpand || TEXT.expand;
-    const collapseLabel = intlCollapse || TEXT.collapse;
-    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
+    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded,
+      // rename intl properties for 1.0
+      intlCollapse: messages.collapse, intlExpand: messages.expand, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
     return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", null), this.renderBottomActionGroup()));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
     "expandDisabled": ["expandHandler"],
     "expanded": ["expandedHandler"],
-    "overflowActionsDisabled": ["overflowDisabledHandler"]
+    "overflowActionsDisabled": ["overflowDisabledHandler"],
+    "intlCollapse": ["onMessagesChange"],
+    "intlExpand": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
 ActionBar.style = actionBarCss;