@esri/calcite-components 1.0.0-next.700 → 1.0.0-next.702

package/dist/components/loadable.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.700
+ * v1.0.0-next.702
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();

package/dist/components/loader.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/locale.js

@@ -1,11 +1,11 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { n as numberKeys } from './key.js';
 import { c as createObserver } from './observers.js';
-import { r as containsCrossShadowBoundary, p as closestElementCrossShadowBoundary } from './dom.js';
+import { v as containsCrossShadowBoundary, r as closestElementCrossShadowBoundary } from './dom.js';
 
 const defaultMinusSignRegex = new RegExp("-", "g");
 const unnecessaryDecimalRegex = new RegExp("\\.?0+$");
@@ -337,9 +337,8 @@ const mutationObserver = createObserver("mutation", (records) => {
   records.forEach((record) => {
     const el = record.target;
     connectedComponents.forEach((component) => {
-      const hasOverridingLocale = !!(component.locale && !component.el.lang);
       const inUnrelatedSubtree = !containsCrossShadowBoundary(el, component.el);
-      if (hasOverridingLocale || inUnrelatedSubtree) {
+      if (inUnrelatedSubtree) {
         return;
       }
       const closestLangEl = closestElementCrossShadowBoundary(component.el, "[lang]");
@@ -362,7 +361,6 @@ const mutationObserver = createObserver("mutation", (records) => {
  */
 function getLocale(component) {
   return (component.el.lang ||
-    component.locale ||
     closestElementCrossShadowBoundary(component.el, "[lang]")?.lang ||
     document.documentElement.lang ||
     defaultLocale);
@@ -448,4 +446,4 @@ class NumberStringFormat {
 }
 const numberStringFormatter = new NumberStringFormat();
 
-export { defaultNumberingSystem as a, getSupportedNumberingSystem as b, connectLocalized as c, disconnectLocalized as d, getSupportedLocale as g, isValidNumber as i, numberStringFormatter as n, parseNumberString as p, sanitizeNumberString as s, updateEffectiveLocale as u };
+export { defaultNumberingSystem as a, getSupportedNumberingSystem as b, connectLocalized as c, disconnectLocalized as d, getSupportedLocale as g, isValidNumber as i, numberStringFormatter as n, parseNumberString as p, sanitizeNumberString as s };

package/dist/components/math.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.700
+ * v1.0.0-next.702
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalPlaces = (value) => {

package/dist/components/nonChromiumPlatformUtils.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.700
+ * v1.0.0-next.702
  */
 import { e as rectToClientRect } from './floating-ui.js';
 

package/dist/components/observers.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.700
+ * v1.0.0-next.702
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/openCloseComponent.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.700
+ * v1.0.0-next.702
  */
 import { readTask } from '@stencil/core/internal/client/index.js';
 

package/dist/components/panel.js

@@ -1,10 +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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
-import { t as toAriaBoolean } from './dom.js';
+import { j as focusFirstTabbable, t as toAriaBoolean } from './dom.js';
 import { H as Heading } from './Heading.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './action-menu.js';
 import { u as updateHostInteraction } from './interactive.js';
@@ -206,29 +206,10 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  async setFocus(focusId) {
+  async setFocus() {
     await componentLoaded(this);
-    const { backButtonEl, closeButtonEl, containerEl } = this;
-    if (focusId === "back-button") {
-      backButtonEl?.setFocus();
-      return;
-    }
-    if (focusId === "dismiss-button") {
-      closeButtonEl?.setFocus();
-      return;
-    }
-    if (backButtonEl) {
-      backButtonEl.setFocus();
-      return;
-    }
-    if (closeButtonEl) {
-      closeButtonEl.setFocus();
-      return;
-    }
-    containerEl?.focus();
+    focusFirstTabbable(this.containerEl);
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.

package/dist/components/pick-list-item.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { I as ICON_TYPES } from './resources3.js';

package/dist/components/popover.js

@@ -1,13 +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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client/index.js';
 import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, u as updateAfterClose, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
-import { c as connectFocusTrap, d as deactivateFocusTrap, a as activateFocusTrap, f as focusFirstTabbable } from './focusTrapComponent.js';
+import { c as connectFocusTrap, d as deactivateFocusTrap, a as activateFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
 import { g as guid } from './guid.js';
-import { i as isPrimaryPointerButton, t as toAriaBoolean, q as queryElementRoots } from './dom.js';
+import { i as isPrimaryPointerButton, t as toAriaBoolean, j as focusFirstTabbable, u as queryElementRoots } from './dom.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
 import { H as Heading } from './Heading.js';
 import { i as isActivationKey } from './key.js';
@@ -57,11 +57,11 @@ class PopoverManager {
       const composedPath = event.composedPath();
       const togglePopover = this.queryPopover(composedPath);
       if (togglePopover && !togglePopover.triggerDisabled) {
-        togglePopover.toggle();
+        togglePopover.open = !togglePopover.open;
       }
       Array.from(this.registeredElements.values())
         .filter((popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover))
-        .forEach((popover) => popover.toggle(false));
+        .forEach((popover) => (popover.open = false));
     };
     this.keyHandler = (event) => {
       if (event.defaultPrevented) {
@@ -101,7 +101,7 @@ class PopoverManager {
     }
   }
   closeAllPopovers() {
-    Array.from(this.registeredElements.values()).forEach((popover) => popover.toggle(false));
+    Array.from(this.registeredElements.values()).forEach((popover) => (popover.open = false));
   }
   addListeners() {
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
@@ -323,26 +323,17 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  async setFocus(focusId) {
+  async setFocus() {
     await componentLoaded(this);
-    const { closeButtonEl } = this;
-    if (focusId === "close-button" && closeButtonEl) {
-      forceUpdate(closeButtonEl);
-      closeButtonEl.setFocus();
-      return;
-    }
-    focusFirstTabbable(this);
+    forceUpdate(this.el);
+    focusFirstTabbable(this.focusTrapEl);
   }
   /**
-   * Toggles the component's open property.
-   *
-   * @param value
+   * Updates the element(s) that are used within the focus-trap of the component.
    */
-  async toggle(value = !this.open) {
-    this.open = value;
+  async updateFocusTrapElements() {
+    updateFocusTrapElements(this);
   }
   getReferenceElement() {
     const { referenceElement, el } = this;
@@ -371,12 +362,12 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { messages, closable } = this;
-    return closable ? (h("div", { class: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: this.scale, text: messages.close }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
+    return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: this.scale, text: messages.close }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
     const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel }, heading)) : null;
-    return headingNode ? (h("div", { class: CSS.header }, headingNode, this.renderCloseButton())) : null;
+    return headingNode ? (h("div", { class: CSS.header, key: CSS.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
     const { effectiveReferenceElement, heading, label, open, pointerDisabled } = this;
@@ -431,7 +422,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "defaultMessages": [32],
     "reposition": [64],
     "setFocus": [64],
-    "toggle": [64]
+    "updateFocusTrapElements": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/progress.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/resources.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.700
+ * v1.0.0-next.702
  */
 var KindIcons;
 (function (KindIcons) {

package/dist/components/resources2.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.700
+ * v1.0.0-next.702
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/resources3.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.700
+ * v1.0.0-next.702
  */
 const CSS = {
   sticky: "sticky-pos"

package/dist/components/resources4.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.700
+ * v1.0.0-next.702
  */
 const CSS = {
   heading: "heading",

package/dist/components/scrim.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
@@ -13,7 +13,7 @@ const CSS = {
   content: "content"
 };
 
-const scrimCss = "@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{position:absolute;inset:0px;z-index:700;display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background)}.content{padding:1rem}";
+const scrimCss = "@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{position:absolute;inset:0px;z-index:700;display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-scrim-background-internal))}.content{padding:1rem}";
 
 const Scrim = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/shared-list-render.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.700
+ * v1.0.0-next.702
  */
 import { h as focusElement, b as getSlotted, t as toAriaBoolean } from './dom.js';
 import { g as getRoundRobinIndex } from './array.js';

package/dist/components/sortable.esm.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.700
+ * v1.0.0-next.702
  */
 /**!
  * Sortable 1.15.0

package/dist/components/switch.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { h as focusElement, t as toAriaBoolean } from './dom.js';

package/dist/components/t9n.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.700
+ * v1.0.0-next.702
  */
 import { getAssetPath } from '@stencil/core/internal/client/index.js';
 import { g as getSupportedLocale } from './locale.js';
@@ -25,36 +25,12 @@ async function getMessageBundle(lang, component) {
 function throwMessageFetchError() {
   throw new Error("could not fetch component message bundle");
 }
-/**
- * This util helps preserve existing intlProp usage when they have not been replaced by overrides.
- *
- * @param component
- */
-function overridesFromIntlProps(component) {
-  const { el } = component;
-  const overrides = {};
-  Object.keys(el.constructor.prototype)
-    .filter((prop) => prop.startsWith("intl"))
-    .forEach((prop) => {
-    const assignedValue = el[prop];
-    if (assignedValue) {
-      let mappedProp = prop.replace("intl", "");
-      mappedProp = `${mappedProp[0].toLowerCase()}${mappedProp.slice(1)}`;
-      overrides[mappedProp] = assignedValue;
-    }
-  });
-  return overrides;
-}
 function mergeMessages(component) {
   component.messages = {
     ...component.defaultMessages,
-    ...getEffectiveMessageOverrides(component),
-    ...component.getExtraMessageOverrides?.()
+    ...component.messageOverrides
   };
 }
-function getEffectiveMessageOverrides(component) {
-  return component.messageOverrides ?? overridesFromIntlProps(component);
-}
 /**
  * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.
  *

package/dist/components/tab-nav.js

@@ -1,10 +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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { c as getElementDir, o as filterDirectChildren } from './dom.js';
+import { n as focusElementInGroup, c as getElementDir, q as filterDirectChildren } from './dom.js';
 import { c as createObserver } from './observers.js';
 
 const tabNavCss = "@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{position:relative;display:flex}:host([scale=s]){min-block-size:1.5rem}:host([scale=m]){min-block-size:2rem}:host([scale=l]){min-block-size:2.75rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-ui-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([position=bottom]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=bottom]) .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered][position=bottom]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}";
@@ -28,8 +28,8 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.handleTabFocus = (event, tabTitle) => {
-      tabTitle?.focus();
+    this.handleTabFocus = (event, el, destination) => {
+      focusElementInGroup(this.enabledTabTitles, el, destination);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -40,28 +40,28 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.storageId = undefined;
     this.syncId = undefined;
+    this.selectedTitle = null;
     this.scale = "m";
     this.layout = "inline";
     this.position = "bottom";
     this.bordered = false;
     this.indicatorOffset = undefined;
     this.indicatorWidth = undefined;
-    this.selectedTab = undefined;
-    this.selectedTabEl = undefined;
+    this.selectedTabId = undefined;
   }
-  async selectedTabChanged() {
+  async selectedTabIdChanged() {
     if (localStorage &&
       this.storageId &&
-      this.selectedTab !== undefined &&
-      this.selectedTab !== null) {
-      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTab));
+      this.selectedTabId !== undefined &&
+      this.selectedTabId !== null) {
+      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
     this.calciteInternalTabChange.emit({
-      tab: this.selectedTab
+      tab: this.selectedTabId
     });
-    this.selectedTabEl = await this.getTabTitleById(this.selectedTab);
+    this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
   }
-  selectedTabElChanged() {
+  selectedTitleChanged() {
     this.updateOffsetPosition();
     this.updateActiveWidth();
     // reset the animation time on tab selection
@@ -83,7 +83,7 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const storageKey = `calcite-tab-nav-${this.storageId}`;
     if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
       const storedTab = JSON.parse(localStorage.getItem(storageKey));
-      this.selectedTab = storedTab;
+      this.selectedTabId = storedTab;
     }
   }
   componentWillRender() {
@@ -93,7 +93,7 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.scale = parentTabsEl?.scale;
     this.bordered = parentTabsEl?.bordered;
     // fix issue with active tab-title not lining up with blue indicator
-    if (this.selectedTabEl) {
+    if (this.selectedTitle) {
       this.updateOffsetPosition();
     }
   }
@@ -101,7 +101,7 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // if every tab title is active select the first tab.
     if (this.tabTitles.length &&
       this.tabTitles.every((title) => !title.selected) &&
-      !this.selectedTab) {
+      !this.selectedTabId) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
         this.calciteInternalTabChange.emit({
           tab
@@ -122,22 +122,19 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   focusPreviousTabHandler(event) {
-    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
-    this.handleTabFocus(event, this.enabledTabTitles[currentIndex - 1] ||
-      this.enabledTabTitles[this.enabledTabTitles.length - 1]);
+    this.handleTabFocus(event, event.target, "previous");
   }
   focusNextTabHandler(event) {
-    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
-    this.handleTabFocus(event, this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0]);
+    this.handleTabFocus(event, event.target, "next");
   }
   focusFirstTabHandler(event) {
-    this.handleTabFocus(event, this.enabledTabTitles[0]);
+    this.handleTabFocus(event, event.target, "first");
   }
   focusLastTabHandler(event) {
-    this.handleTabFocus(event, this.enabledTabTitles[this.enabledTabTitles.length - 1]);
+    this.handleTabFocus(event, event.target, "last");
   }
   internalActivateTabHandler(event) {
-    this.selectedTab = event.detail.tab
+    this.selectedTabId = event.detail.tab
       ? event.detail.tab
       : this.getIndexOfTabTitle(event.target);
     event.stopPropagation();
@@ -155,15 +152,15 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   updateTabTitles(event) {
     if (event.target.selected) {
-      this.selectedTab = event.detail;
+      this.selectedTabId = event.detail;
     }
   }
   globalInternalTabChangeHandler(event) {
     if (this.syncId &&
       event.target !== this.el &&
       event.target.syncId === this.syncId &&
-      this.selectedTab !== event.detail.tab) {
-      this.selectedTab = event.detail.tab;
+      this.selectedTabId !== event.detail.tab) {
+      this.selectedTabId = event.detail.tab;
     }
     event.stopPropagation();
   }
@@ -173,14 +170,14 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   updateOffsetPosition() {
     const dir = getElementDir(this.el);
     const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
-    const tabLeft = this.selectedTabEl?.offsetLeft;
-    const tabWidth = this.selectedTabEl?.offsetWidth;
+    const tabLeft = this.selectedTitle?.offsetLeft;
+    const tabWidth = this.selectedTitle?.offsetWidth;
     const offsetRight = navWidth - (tabLeft + tabWidth);
     this.indicatorOffset =
       dir !== "rtl" ? tabLeft - this.tabNavEl?.scrollLeft : offsetRight + this.tabNavEl?.scrollLeft;
   }
   updateActiveWidth() {
-    this.indicatorWidth = this.selectedTabEl?.offsetWidth;
+    this.indicatorWidth = this.selectedTitle?.offsetWidth;
   }
   getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
     // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
@@ -200,21 +197,21 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get el() { return this; }
   static get watchers() { return {
-    "selectedTab": ["selectedTabChanged"],
-    "selectedTabEl": ["selectedTabElChanged"]
+    "selectedTabId": ["selectedTabIdChanged"],
+    "selectedTitle": ["selectedTitleChanged"]
   }; }
   static get style() { return tabNavCss; }
 }, [1, "calcite-tab-nav", {
     "storageId": [513, "storage-id"],
     "syncId": [513, "sync-id"],
+    "selectedTitle": [1040],
     "scale": [1537],
     "layout": [1537],
     "position": [1537],
     "bordered": [1540],
     "indicatorOffset": [1026, "indicator-offset"],
     "indicatorWidth": [1026, "indicator-width"],
-    "selectedTab": [32],
-    "selectedTabEl": [32]
+    "selectedTabId": [32]
   }, [[0, "calciteInternalTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteInternalTabsFocusNext", "focusNextTabHandler"], [0, "calciteInternalTabsFocusFirst", "focusFirstTabHandler"], [0, "calciteInternalTabsFocusLast", "focusLastTabHandler"], [0, "calciteInternalTabsActivate", "internalActivateTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteInternalTabTitleRegister", "updateTabTitles"], [16, "calciteInternalTabChange", "globalInternalTabChangeHandler"], [0, "calciteInternalTabIconChanged", "iconStartChangeHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/tab-title.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/tab.js

@@ -1,11 +1,11 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
-import { n as nodeListToArray } from './dom.js';
+import { o as nodeListToArray } from './dom.js';
 
 const tabCss = "@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([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}section,.container{display:none;block-size:100%;inline-size:100%}:host([scale=s]){padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}";
 

package/dist/components/tabs.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 

package/dist/components/tile.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.700
+ * v1.0.0-next.702
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';