@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

package/dist/cjs/calcite-filter.cjs.entry.js

@@ -1,35 +1,36 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a0010f96.js');
-const dom = require('./dom-2ec8c9ed.js');
-const interactive = require('./interactive-32293bca.js');
-const filter = require('./filter-9411bbc1.js');
-const debounce = require('./debounce-2c8b61fb.js');
-require('./resources-b5a5f8a7.js');
-require('./guid-f4f03a7a.js');
+const index = require('./index-012872b0.js');
+const interactive = require('./interactive-7d7c7d87.js');
+const filter = require('./filter-a9bcb847.js');
+const locale = require('./locale-585c56fa.js');
+const t9n = require('./t9n-279cb71a.js');
+const loadable = require('./loadable-5e96ff4a.js');
+const debounce = require('./debounce-a520c1de.js');
+require('./key-d6fef1dc.js');
+require('./observers-63fd261b.js');
+require('./dom-61eefe2c.js');
+require('./resources-2094ea79.js');
+require('./guid-8f36092c.js');
 
 const CSS = {
   container: "container",
   searchIcon: "search-icon"
 };
-const TEXT = {
-  filterLabel: "Filter",
-  clear: "Clear filter"
-};
 const ICONS = {
   search: "search",
   close: "x"
 };
 const DEBOUNCE_TIMEOUT = 250;
 
-const filterCss = "@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.01}}: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)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
+const filterCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
 
 const Filter = class {
   constructor(hostRef) {
@@ -37,34 +38,6 @@ const Filter = class {
     this.calciteFilterChange = index.createEvent(this, "calciteFilterChange", 6);
     // --------------------------------------------------------------------------
     //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * The items to filter through. The filter uses this as the starting point, and returns items
-     * that contain the string entered in the input, using a partial match and recursive search.
-     *
-     * This property is required.
-     */
-    this.items = [];
-    /**
-     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-     */
-    this.disabled = false;
-    /**
-     * The resulting items after filtering.
-     *
-     * @readonly
-     */
-    this.filteredItems = [];
-    /** specify the scale of filter, defaults to m */
-    this.scale = "m";
-    /**
-     * Filter value.
-     */
-    this.value = "";
-    // --------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
@@ -88,28 +61,53 @@ const Filter = class {
       this.filter("", true);
       this.setFocus();
     };
+    this.items = [];
+    this.disabled = false;
+    this.filteredItems = [];
+    this.placeholder = undefined;
+    this.scale = "m";
+    this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   watchItemsHandler() {
     this.filter(this.value);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   valueHandler(value) {
     this.filter(value);
   }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+    this.updateFiltered(filter.filter(this.items, this.value));
+    this.filter(this.value);
+    await t9n.setUpMessages(this);
+  }
+  connectedCallback() {
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
+  }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  componentWillLoad() {
-    this.filter(this.value);
+  disconnectedCallback() {
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -118,7 +116,8 @@ const Filter = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    dom.focusElement(this.textInput);
+    await loadable.componentLoaded(this);
+    this.el?.focus();
   }
   updateFiltered(filtered, emit = false) {
     this.filteredItems.length = 0;
@@ -134,14 +133,18 @@ const Filter = class {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (index.h(index.Fragment, null, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, clearable: true, disabled: disabled, icon: ICONS.search, intlClear: this.intlClear || TEXT.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+    return (index.h(index.Fragment, null, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
       }, scale: scale, type: "text", value: this.value })))));
   }
+  static get delegatesFocus() { return true; }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "items": ["watchItemsHandler"],
-    "value": ["valueHandler"]
+    "messageOverrides": ["onMessagesChange"],
+    "value": ["valueHandler"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
 Filter.style = filterCss;

package/dist/cjs/calcite-flow-item.cjs.entry.js

@@ -1,18 +1,23 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a0010f96.js');
-const dom = require('./dom-2ec8c9ed.js');
-const resources = require('./resources-abee76d7.js');
-const interactive = require('./interactive-32293bca.js');
-require('./resources-b5a5f8a7.js');
-require('./guid-f4f03a7a.js');
+const index = require('./index-012872b0.js');
+const dom = require('./dom-61eefe2c.js');
+const resources = require('./resources-186d00b2.js');
+const interactive = require('./interactive-7d7c7d87.js');
+const locale = require('./locale-585c56fa.js');
+const t9n = require('./t9n-279cb71a.js');
+const loadable = require('./loadable-5e96ff4a.js');
+require('./resources-2094ea79.js');
+require('./guid-8f36092c.js');
+require('./key-d6fef1dc.js');
+require('./observers-63fd261b.js');
 
 const CSS = {
   backButton: "back-button"
@@ -21,9 +26,6 @@ const ICONS = {
   backLeft: "chevron-left",
   backRight: "chevron-right"
 };
-const TEXT = {
-  back: "Back"
-};
 const SLOTS = {
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
@@ -34,42 +36,16 @@ const SLOTS = {
   footerActions: "footer-actions"
 };
 
-const flowItemCss = "@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.01}}: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)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}";
+const flowItemCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}";
 
 const FlowItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteFlowItemBack = index.createEvent(this, "calciteFlowItemBack", 6);
-    this.calciteFlowItemBackClick = index.createEvent(this, "calciteFlowItemBackClick", 6);
     this.calciteFlowItemScroll = index.createEvent(this, "calciteFlowItemScroll", 6);
     this.calciteFlowItemClose = index.createEvent(this, "calciteFlowItemClose", 6);
     // --------------------------------------------------------------------------
     //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /** When true, displays a close button in the trailing side of the header */
-    this.closable = false;
-    /** When true, flow-item will be hidden */
-    this.closed = false;
-    /**
-     *  When true, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When true, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * When true, the action menu items in the `header-menu-actions` slot are open.
-     */
-    this.menuOpen = false;
-    /**
-     * When true, displays a back button in the header.
-     */
-    this.showBackButton = false;
-    // --------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
@@ -82,7 +58,6 @@ const FlowItem = class {
       this.calciteFlowItemClose.emit();
     };
     this.backButtonClick = () => {
-      this.calciteFlowItemBackClick.emit();
       this.calciteFlowItemBack.emit();
     };
     this.setBackRef = (node) => {
@@ -91,18 +66,53 @@ const FlowItem = class {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.getBackLabel = () => {
-      return this.intlBack || TEXT.back;
-    };
+    this.closable = false;
+    this.closed = false;
+    this.beforeBack = undefined;
+    this.description = undefined;
+    this.disabled = false;
+    this.heading = undefined;
+    this.headingLevel = undefined;
+    this.heightScale = undefined;
+    this.loading = false;
+    this.menuOpen = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.showBackButton = false;
+    this.widthScale = undefined;
+    this.backButtonEl = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
+  }
+  async componentWillLoad() {
+    await t9n.setUpMessages(this);
+    loadable.setUpLoadableComponent(this);
+  }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -112,12 +122,13 @@ const FlowItem = class {
    * Sets focus on the component.
    */
   async setFocus() {
+    await loadable.componentLoaded(this);
     const { backButtonEl, containerEl } = this;
     if (backButtonEl) {
       backButtonEl.setFocus();
       return;
     }
-    containerEl === null || containerEl === void 0 ? void 0 : containerEl.setFocus();
+    containerEl?.setFocus();
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.
@@ -131,8 +142,7 @@ const FlowItem = class {
    * @param options
    */
   async scrollContentTo(options) {
-    var _a;
-    await ((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options));
+    await this.containerEl?.scrollContentTo(options);
   }
   // --------------------------------------------------------------------------
   //
@@ -142,17 +152,22 @@ const FlowItem = class {
   renderBackButton() {
     const { el } = this;
     const rtl = dom.getElementDir(el) === "rtl";
-    const { showBackButton, backButtonClick } = this;
-    const label = this.getBackLabel();
+    const { showBackButton, backButtonClick, messages } = this;
+    const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (index.h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label })) : null;
   }
   render() {
-    const { closable, closed, description, disabled, heading, headingLevel, heightScale, intlBack, intlClose, intlOptions, loading, menuOpen, widthScale, backButtonEl } = this;
-    const label = this.getBackLabel();
-    return (index.h(index.Host, null, index.h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlBack: intlBack, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null)), backButtonEl ? (index.h("calcite-tooltip", { label: label, placement: "auto", referenceElement: backButtonEl }, label)) : null));
+    const { closable, closed, description, disabled, heading, headingLevel, heightScale, loading, menuOpen, messages, widthScale, backButtonEl } = this;
+    const label = messages.back;
+    return (index.h(index.Host, null, index.h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null)), backButtonEl ? (index.h("calcite-tooltip", { label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
 };
 FlowItem.style = flowItemCss;
 

package/dist/cjs/calcite-flow.cjs.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-beta.97
+ * v1.0.0-beta.99
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a0010f96.js');
-const observers = require('./observers-5706326b.js');
+const index = require('./index-012872b0.js');
+const observers = require('./observers-63fd261b.js');
 
 const CSS = {
   frame: "frame",
@@ -16,14 +16,11 @@ const CSS = {
   frameRetreating: "frame--retreating"
 };
 
-const flowCss = "@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.01}}: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)}:host([hidden]){display:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0px}:host ::slotted(calcite-flow-item),:host ::slotted(calcite-panel){block-size:100%}:host ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}:host .frame--advancing{animation:calcite-frame-advance var(--calcite-animation-timing)}:host .frame--retreating{animation:calcite-frame-retreat var(--calcite-animation-timing)}@keyframes calcite-frame-advance{0%{--tw-bg-opacity:0.5;transform:translate3d(50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}";
+const flowCss = "@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{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0px}:host ::slotted(calcite-flow-item),:host ::slotted(calcite-panel){block-size:100%}:host ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}:host .frame--advancing{animation:calcite-frame-advance var(--calcite-animation-timing)}:host .frame--retreating{animation:calcite-frame-retreat var(--calcite-animation-timing)}@keyframes calcite-frame-advance{0%{--tw-bg-opacity:0.5;transform:translate3d(50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}";
 
 const Flow = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.flowDirection = null;
-    this.itemCount = 0;
-    this.items = [];
     this.itemMutationObserver = observers.createObserver("mutation", () => this.updateFlowProps());
     this.getFlowDirection = (oldFlowItemCount, newFlowItemCount) => {
       const allowRetreatingDirection = oldFlowItemCount > 1;
@@ -35,7 +32,7 @@ const Flow = class {
     };
     this.updateFlowProps = () => {
       const { el, items } = this;
-      const newItems = Array.from(el.querySelectorAll("calcite-flow-item, calcite-panel")).filter((flowItem) => !flowItem.matches("calcite-flow-item calcite-flow-item, calcite-panel calcite-panel"));
+      const newItems = Array.from(el.querySelectorAll("calcite-flow-item")).filter((flowItem) => flowItem.closest("calcite-flow") === el);
       const oldItemCount = items.length;
       const newItemCount = newItems.length;
       const activeItem = newItems[newItemCount - 1];
@@ -56,6 +53,9 @@ const Flow = class {
         this.flowDirection = flowDirection;
       }
     };
+    this.flowDirection = null;
+    this.itemCount = 0;
+    this.items = [];
   }
   // --------------------------------------------------------------------------
   //
@@ -63,7 +63,7 @@ const Flow = class {
   //
   // --------------------------------------------------------------------------
   /**
-   * Removes the currently active `calcite-flow-item` or `calcite-panel`.
+   * Removes the currently active `calcite-flow-item`.
    */
   async back() {
     const { items } = this;
@@ -85,13 +85,11 @@ const Flow = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.updateFlowProps();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.itemMutationObserver?.disconnect();
   }
   // --------------------------------------------------------------------------
   //