@esri/calcite-components 1.0.0-next.554 → 1.0.0-next.555

package/hydrate/index.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.554
+ * v1.0.0-next.555
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v2.16.1 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v2.17.3 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -695,6 +695,25 @@ class MockMouseEvent extends MockEvent {
     }
   }
 }
+class MockUIEvent extends MockEvent {
+  constructor(type, uiEventInitDic) {
+    super(type);
+    this.detail = null;
+    this.view = null;
+    if (uiEventInitDic != null) {
+      Object.assign(this, uiEventInitDic);
+    }
+  }
+}
+class MockFocusEvent extends MockUIEvent {
+  constructor(type, focusEventInitDic) {
+    super(type);
+    this.relatedTarget = null;
+    if (focusEventInitDic != null) {
+      Object.assign(this, focusEventInitDic);
+    }
+  }
+}
 class MockEventListener {
   constructor(type, handler) {
     this.type = type;
@@ -1607,6 +1626,9 @@ class MockElement extends MockNode {
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }
+  blur() {
+    dispatchEvent(this, new MockFocusEvent('blur', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }));
+  }
   get shadowRoot() {
     return this.__shadowRoot || null;
   }
@@ -1675,6 +1697,9 @@ class MockElement extends MockNode {
   get firstElementChild() {
     return this.children[0] || null;
   }
+  focus(_options) {
+    dispatchEvent(this, new MockFocusEvent('focus', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }));
+  }
   getAttribute(attrName) {
     if (attrName === 'style') {
       if (this.__style != null && this.__style.length > 0) {
@@ -2019,6 +2044,9 @@ class MockElement extends MockNode {
   set title(value) {
     this.setAttributeNS(null, 'title', value);
   }
+  animate() {
+    /**/
+  }
   onanimationstart() {
     /**/
   }
@@ -2283,6 +2311,18 @@ class MockElement extends MockNode {
   onwheel() {
     /**/
   }
+  requestFullscreen() {
+    /**/
+  }
+  scrollBy() {
+    /**/
+  }
+  scrollTo() {
+    /**/
+  }
+  scrollIntoView() {
+    /**/
+  }
   toString(opts) {
     return serializeNodeToHtml(this, opts);
   }
@@ -2578,7 +2618,28 @@ function createElementNS(ownerDocument, namespaceURI, tagName) {
     return createElement(ownerDocument, tagName);
   }
   else if (namespaceURI === 'http://www.w3.org/2000/svg') {
-    return new MockSVGElement(ownerDocument, tagName);
+    switch (tagName.toLowerCase()) {
+      case 'text':
+      case 'tspan':
+      case 'tref':
+      case 'altglyph':
+      case 'textpath':
+        return new MockSVGTextContentElement(ownerDocument, tagName);
+      case 'circle':
+      case 'ellipse':
+      case 'image':
+      case 'line':
+      case 'path':
+      case 'polygon':
+      case 'polyline':
+      case 'rect':
+      case 'use':
+        return new MockSVGGraphicsElement(ownerDocument, tagName);
+      case 'svg':
+        return new MockSVGSVGElement(ownerDocument, tagName);
+      default:
+        return new MockSVGElement(ownerDocument, tagName);
+    }
   }
   else {
     return new MockElement(ownerDocument, tagName);
@@ -2725,6 +2786,98 @@ class MockScriptElement extends MockHTMLElement {
 patchPropAttributes(MockScriptElement.prototype, {
   type: String,
 });
+class MockDOMMatrix {
+  constructor() {
+    this.a = 1;
+    this.b = 0;
+    this.c = 0;
+    this.d = 1;
+    this.e = 0;
+    this.f = 0;
+    this.m11 = 1;
+    this.m12 = 0;
+    this.m13 = 0;
+    this.m14 = 0;
+    this.m21 = 0;
+    this.m22 = 1;
+    this.m23 = 0;
+    this.m24 = 0;
+    this.m31 = 0;
+    this.m32 = 0;
+    this.m33 = 1;
+    this.m34 = 0;
+    this.m41 = 0;
+    this.m42 = 0;
+    this.m43 = 0;
+    this.m44 = 1;
+    this.is2D = true;
+    this.isIdentity = true;
+  }
+  static fromMatrix() {
+    return new MockDOMMatrix();
+  }
+  inverse() {
+    return new MockDOMMatrix();
+  }
+  flipX() {
+    return new MockDOMMatrix();
+  }
+  flipY() {
+    return new MockDOMMatrix();
+  }
+  multiply() {
+    return new MockDOMMatrix();
+  }
+  rotate() {
+    return new MockDOMMatrix();
+  }
+  rotateAxisAngle() {
+    return new MockDOMMatrix();
+  }
+  rotateFromVector() {
+    return new MockDOMMatrix();
+  }
+  scale() {
+    return new MockDOMMatrix();
+  }
+  scaleNonUniform() {
+    return new MockDOMMatrix();
+  }
+  skewX() {
+    return new MockDOMMatrix();
+  }
+  skewY() {
+    return new MockDOMMatrix();
+  }
+  toJSON() { }
+  toString() { }
+  transformPoint() {
+    return new MockDOMPoint();
+  }
+  translate() {
+    return new MockDOMMatrix();
+  }
+}
+class MockDOMPoint {
+  constructor() {
+    this.w = 1;
+    this.x = 0;
+    this.y = 0;
+    this.z = 0;
+  }
+  toJSON() { }
+  matrixTransform() {
+    return new MockDOMMatrix();
+  }
+}
+class MockSVGRect {
+  constructor() {
+    this.height = 10;
+    this.width = 10;
+    this.x = 0;
+    this.y = 0;
+  }
+}
 class MockStyleElement extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, 'style');
@@ -2757,9 +2910,6 @@ class MockSVGElement extends MockElement {
   get viewportElement() {
     return null;
   }
-  focus() {
-    /**/
-  }
   onunload() {
     /**/
   }
@@ -2777,6 +2927,27 @@ class MockSVGElement extends MockElement {
     return 0;
   }
 }
+class MockSVGGraphicsElement extends MockSVGElement {
+  getBBox(_options) {
+    return new MockSVGRect();
+  }
+  getCTM() {
+    return new MockDOMMatrix();
+  }
+  getScreenCTM() {
+    return new MockDOMMatrix();
+  }
+}
+class MockSVGSVGElement extends MockSVGGraphicsElement {
+  createSVGPoint() {
+    return new MockDOMPoint();
+  }
+}
+class MockSVGTextContentElement extends MockSVGGraphicsElement {
+  getComputedTextLength() {
+    return 0;
+  }
+}
 class MockBaseElement extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, 'base');
@@ -3302,6 +3473,7 @@ const WINDOW_PROPS = [
   'HTMLElement',
   'Node',
   'NodeList',
+  'FocusEvent',
   'KeyboardEvent',
   'MouseEvent',
 ];
@@ -3309,6 +3481,7 @@ const GLOBAL_CONSTRUCTORS = [
   ['CustomEvent', MockCustomEvent],
   ['Event', MockEvent],
   ['Headers', MockHeaders],
+  ['FocusEvent', MockFocusEvent],
   ['KeyboardEvent', MockKeyboardEvent],
   ['MouseEvent', MockMouseEvent],
   ['Request', MockRequest],
@@ -8047,7 +8220,12 @@ function getRoundRobinIndex(index, total) {
   return (index + total) % total;
 }
 
-const actionMenuCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-action-menu:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-action-menu{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-action-menu{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-action-menu{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-action-menu{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-action-menu{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-action-menu:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-action-menu-h{display:none !important}/*!@:host*/.sc-calcite-action-menu-h{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}/*!@.menu ::slotted(calcite-action)*/.menu .sc-calcite-action-menu-s>calcite-action{margin:0.125rem;display:-ms-flexbox;display:flex;outline-color:transparent}/*!@::slotted(calcite-action[active])*/.sc-calcite-action-menu-s>calcite-action[active]{outline:2px solid var(--calcite-ui-brand);outline-offset:0px}/*!@.default-trigger*/.default-trigger.sc-calcite-action-menu{position:relative;block-size:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}/*!@slot[name=trigger]::slotted(calcite-action), \ncalcite-action::slotted([slot=trigger])*/slot[name=trigger].sc-calcite-action-menu-s>calcite-action,calcite-action.sc-calcite-action-menu-s>[slot=trigger]{position:relative;block-size:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}/*!@.menu*/.menu.sc-calcite-action-menu{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
+const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+const actionMenuCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-action-menu:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-action-menu{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-action-menu{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-action-menu{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-action-menu{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-action-menu{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-action-menu:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-action-menu-h{display:none !important}/*!@:host*/.sc-calcite-action-menu-h{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}/*!@.menu ::slotted(calcite-action)*/.menu .sc-calcite-action-menu-s>calcite-action{margin:0.125rem;display:-ms-flexbox;display:flex;outline-color:transparent}/*!@.menu ::slotted(calcite-action[active])*/.menu .sc-calcite-action-menu-s>calcite-action[active]{outline:2px solid var(--calcite-ui-brand);outline-offset:0px}/*!@.default-trigger*/.default-trigger.sc-calcite-action-menu{position:relative;block-size:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}/*!@slot[name=trigger]::slotted(calcite-action), \ncalcite-action::slotted([slot=trigger])*/slot[name=trigger].sc-calcite-action-menu-s>calcite-action,calcite-action.sc-calcite-action-menu-s>[slot=trigger]{position:relative;block-size:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}/*!@.menu*/.menu.sc-calcite-action-menu{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";
 
 const SUPPORTED_BUTTON_NAV_KEYS = ["ArrowUp", "ArrowDown"];
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
@@ -8082,7 +8260,6 @@ class ActionMenu {
      */
     this.placement = "auto";
     this.actionElements = [];
-    this.mutationObserver = createObserver();
     this.guid = `calcite-action-menu-${guid()}`;
     this.menuId = `${this.guid}-menu`;
     this.menuButtonId = `${this.guid}-menu-button`;
@@ -8093,8 +8270,8 @@ class ActionMenu {
     //
     // --------------------------------------------------------------------------
     this.connectMenuButtonEl = () => {
-      const { el, menuButtonId, menuId, open, label } = this;
-      const menuButtonEl = getSlotted(el, SLOTS$r.trigger) || this.defaultMenuButtonEl;
+      const { menuButtonId, menuId, open, label } = this;
+      const menuButtonEl = this.slottedMenuButtonEl || this.defaultMenuButtonEl;
       if (this.menuButtonEl === menuButtonEl) {
         return;
       }
@@ -8128,6 +8305,15 @@ class ActionMenu {
       menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick);
       menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
     };
+    this.setMenuButtonEl = (event) => {
+      const actions = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+      this.slottedMenuButtonEl = actions[0];
+      this.connectMenuButtonEl();
+    };
     this.setDefaultMenuButtonEl = (el) => {
       this.defaultMenuButtonEl = el;
       this.connectMenuButtonEl();
@@ -8172,23 +8358,29 @@ class ActionMenu {
     this.updateActions = (actions) => {
       actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
     };
-    this.getActions = () => {
-      const { el } = this;
-      const actionElements = getSlotted(el, { all: true, matches: "calcite-action" });
-      this.updateActions(actionElements);
-      this.actionElements = actionElements;
-      this.connectMenuButtonEl();
+    this.handleDefaultSlotChange = (event) => {
+      const actions = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+      this.actionElements = actions;
     };
     this.menuButtonKeyDown = (event) => {
       const { key } = event;
       const { actionElements } = this;
-      if (!this.isValidKey(key, SUPPORTED_BUTTON_NAV_KEYS)) {
+      if (!actionElements.length) {
         return;
       }
-      event.preventDefault();
-      if (!actionElements.length) {
+      if (isActivationKey(key)) {
+        event.preventDefault();
+        this.toggleOpen();
+        return;
+      }
+      if (!this.isValidKey(key, SUPPORTED_BUTTON_NAV_KEYS)) {
         return;
       }
+      event.preventDefault();
       this.toggleOpen(true);
       this.handleActionNavigation(key, actionElements);
     };
@@ -8199,7 +8391,7 @@ class ActionMenu {
         this.open = false;
         return;
       }
-      if (key === " " || key === "Enter") {
+      if (isActivationKey(key)) {
         event.preventDefault();
         const action = actionElements[activeMenuItemIndex];
         action ? action.click() : this.toggleOpen(false);
@@ -8218,6 +8410,9 @@ class ActionMenu {
       this.handleActionNavigation(key, actionElements);
     };
     this.handleActionNavigation = (key, actions) => {
+      if (!this.open) {
+        return;
+      }
       const currentIndex = this.activeMenuItemIndex;
       if (key === "Home") {
         this.activeMenuItemIndex = 0;
@@ -8246,17 +8441,8 @@ class ActionMenu {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    this.getActions();
-    connectConditionalSlotComponent(this);
-  }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.disconnectMenuButtonEl();
-    disconnectConditionalSlotComponent(this);
   }
   expandedHandler() {
     this.open = false;
@@ -8287,18 +8473,18 @@ class ActionMenu {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.open ? this.menuEl : this.menuButtonEl);
+    focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
-    const menuButtonSlot = (hAsync("slot", { name: SLOTS$r.trigger }, hAsync("calcite-action", { class: CSS$Q.defaultTrigger, icon: ICONS$f.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
+    const menuButtonSlot = (hAsync("slot", { name: SLOTS$r.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$Q.defaultTrigger, icon: ICONS$f.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
     return menuButtonSlot;
   }
   renderMenuItems() {
     const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-    return (hAsync("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$Q.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 }, hAsync("slot", null))));
+    return (hAsync("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$Q.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   render() {
     return (hAsync(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), hAsync("slot", { name: SLOTS$r.tooltip, onSlotchange: this.updateTooltip })));
@@ -8324,6 +8510,7 @@ class ActionMenu {
       "overlayPositioning": [1, "overlay-positioning"],
       "placement": [513],
       "scale": [513],
+      "menuButtonEl": [32],
       "activeMenuItemIndex": [32],
       "setFocus": [64]
     },
@@ -16431,11 +16618,6 @@ class ComboboxItemGroup {
   }; }
 }
 
-function isActivationKey(key) {
-  return key === "Enter" || key === " ";
-}
-const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-
 // regex for number sanitization
 const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
 const decimalOnlyAtEndOfString = /(?!^\.)\.$/;
@@ -31670,7 +31852,7 @@ class Switch {
   }; }
 }
 
-const tabCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tab:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-tab{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tab{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tab{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tab{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tab{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tab:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tab-h{display:none !important}/*!@:host([active]) section*/[active].sc-calcite-tab-h section.sc-calcite-tab{display:block}/*!@:host*/.sc-calcite-tab-h{display:none;block-size:100%;inline-size:100%}/*!@:host([active])*/[active].sc-calcite-tab-h{display:block;block-size:100%;inline-size:100%;overflow:auto}/*!@section*/section.sc-calcite-tab{display:none;block-size:100%;inline-size:100%}/*!@:host([scale=s])*/[scale=s].sc-calcite-tab-h{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-tab-h{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tab-h{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}";
+const tabCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tab:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-tab{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tab{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tab{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tab{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tab{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tab:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tab-h{display:none !important}/*!@:host([selected]) section*/[selected].sc-calcite-tab-h section.sc-calcite-tab{display:block}/*!@:host*/.sc-calcite-tab-h{display:none;block-size:100%;inline-size:100%}/*!@:host([selected])*/[selected].sc-calcite-tab-h{display:block;block-size:100%;inline-size:100%;overflow:auto}/*!@section*/section.sc-calcite-tab{display:none;block-size:100%;inline-size:100%}/*!@:host([scale=s])*/[scale=s].sc-calcite-tab-h{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-tab-h{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tab-h{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -31681,14 +31863,26 @@ class Tab {
     this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 6);
     /**
      * Show this tab
+     *
+     * @deprecated Use selected instead.
      */
     this.active = false;
+    /**
+     * When true, display this tab.
+     */
+    this.selected = false;
     /**
      * @internal
      */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -31696,10 +31890,15 @@ class Tab {
   //--------------------------------------------------------------------------
   render() {
     const id = this.el.id || this.guid;
-    return (hAsync(Host, { "aria-labelledby": this.labeledBy, id: id }, hAsync("div", { role: "tabpanel", tabIndex: this.active ? 0 : -1 }, hAsync("section", null, hAsync("slot", null)))));
+    return (hAsync(Host, { "aria-labelledby": this.labeledBy, id: id }, hAsync("div", { role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, hAsync("section", null, hAsync("slot", null)))));
   }
   connectedCallback() {
     this.parentTabsEl = this.el.closest("calcite-tabs");
+    const isSelected = this.selected || this.active;
+    if (isSelected) {
+      this.activeHandler(isSelected);
+      this.selectedHandler(isSelected);
+    }
   }
   componentDidLoad() {
     this.calciteInternalTabRegister.emit();
@@ -31731,11 +31930,11 @@ class Tab {
       return;
     }
     if (this.tab) {
-      this.active = this.tab === event.detail.tab;
+      this.selected = this.tab === event.detail.tab;
     }
     else {
       this.getTabIndex().then((index) => {
-        this.active = index === event.detail.tab;
+        this.selected = index === event.detail.tab;
       });
     }
     event.stopPropagation();
@@ -31765,6 +31964,10 @@ class Tab {
     this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "selected": ["selectedHandler"]
+  }; }
   static get style() { return tabCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -31772,6 +31975,7 @@ class Tab {
     "$members$": {
       "tab": [513],
       "active": [1540],
+      "selected": [1540],
       "scale": [1537],
       "labeledBy": [32],
       "getTabIndex": [64],
@@ -31779,7 +31983,7 @@ class Tab {
     },
     "$listeners$": [[16, "calciteInternalTabChange", "internalTabChangeHandler"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["tab", "tab"], ["active", "active"], ["scale", "scale"]]
+    "$attrsToReflect$": [["tab", "tab"], ["active", "active"], ["selected", "selected"], ["scale", "scale"]]
   }; }
 }
 
@@ -32002,7 +32206,7 @@ class TabNav {
   }; }
 }
 
-const tabTitleCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tab-title:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-tab-title{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tab-title{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tab-title{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tab-title{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tab-title{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tab-title:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tab-title-h{display:none !important}/*!@:host([disabled])*/[disabled].sc-calcite-tab-title-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-tab-title-h{display:block;-ms-flex:0 1 auto;flex:0 1 auto;outline:2px solid transparent;outline-offset:2px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:1.25rem;margin-inline-end:1.25rem}/*!@:host([layout=center])*/[layout=center].sc-calcite-tab-title-h{margin-block:0px;margin-inline:1.25rem;text-align:center;-ms-flex-preferred-size:12rem;flex-basis:12rem}/*!@:host([position=below]) .container*/[position=below].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}/*!@:host([position=bottom]) .container*/[position=bottom].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}/*!@:host .container*/.sc-calcite-tab-title-h .container.sc-calcite-tab-title{outline-color:transparent}/*!@:host(:focus) .container*/.sc-calcite-tab-title-h:focus .container.sc-calcite-tab-title{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@:host(:active) a, \n:host(:focus) a, \n:host(:hover) a*/.sc-calcite-tab-title-h:active a.sc-calcite-tab-title,.sc-calcite-tab-title-h:focus a.sc-calcite-tab-title,.sc-calcite-tab-title-h:hover a.sc-calcite-tab-title{border-color:var(--calcite-ui-border-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}/*!@:host([active]) .container*/[active].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-color:transparent;color:var(--calcite-ui-text-1)}/*!@:host([disabled]) .container*/[disabled].sc-calcite-tab-title-h .container.sc-calcite-tab-title{pointer-events:none;opacity:0.5}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tab-title-h[disabled] .sc-calcite-tab-title-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tab-title-h [calcite-hydrated][disabled].sc-calcite-tab-title{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-tab-title-h{-webkit-margin-end:1rem;margin-inline-end:1rem}/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tab-title-h{-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@.container*/.container.sc-calcite-tab-title{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end-width:2px;padding-inline:0px;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-3);-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}/*!@.calcite-tab-title--icon*/.calcite-tab-title--icon.sc-calcite-tab-title{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}/*!@.calcite-tab-title--icon svg*/.calcite-tab-title--icon.sc-calcite-tab-title svg.sc-calcite-tab-title{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}/*!@.container--has-text*/.container--has-text.sc-calcite-tab-title{padding:0.25rem}/*!@.container--has-text .calcite-tab-title--icon.icon-start*/.container--has-text.sc-calcite-tab-title .calcite-tab-title--icon.icon-start.sc-calcite-tab-title{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}/*!@.container--has-text .calcite-tab-title--icon.icon-end*/.container--has-text.sc-calcite-tab-title .calcite-tab-title--icon.icon-end.sc-calcite-tab-title{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}/*!@:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child*/[icon-start][icon-end].sc-calcite-tab-title-h .calcite-tab-title--icon.sc-calcite-tab-title:first-child{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}/*!@:host([bordered])*/[bordered].sc-calcite-tab-title-h{-webkit-margin-end:0;margin-inline-end:0}/*!@:host([bordered][active])*/[bordered][active].sc-calcite-tab-title-h{-webkit-box-shadow:inset 0px -2px var(--calcite-ui-foreground-1);box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}/*!@:host([bordered][active][position=below])*/[bordered][active][position=below].sc-calcite-tab-title-h{-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}/*!@:host([bordered][active][position=bottom])*/[bordered][active][position=bottom].sc-calcite-tab-title-h{-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}/*!@:host([bordered]:hover) .container, \n:host([bordered]:focus) .container, \n:host([bordered]:active) .container*/[bordered].sc-calcite-tab-title-h:hover .container.sc-calcite-tab-title,[bordered].sc-calcite-tab-title-h:focus .container.sc-calcite-tab-title,[bordered].sc-calcite-tab-title-h:active .container.sc-calcite-tab-title{position:relative}/*!@:host([bordered]:hover) .container*/[bordered].sc-calcite-tab-title-h:hover .container.sc-calcite-tab-title{background-color:var(--calcite-button-transparent-hover)}/*!@:host([bordered]) .container*/[bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-style:unset;-webkit-border-start:1px solid transparent;border-inline-start:1px solid transparent;-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent}/*!@:host([bordered][position=below]) .container*/[bordered][position=below].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:unset}/*!@:host([bordered][position=bottom]) .container*/[bordered][position=bottom].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:unset}/*!@:host([active][bordered]) .container*/[active][bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-inline-start-color:var(--calcite-ui-border-1);border-inline-end-color:var(--calcite-ui-border-1)}/*!@:host([bordered]) .container*/[bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-inline:0.75rem}/*!@:host([bordered][scale=s]) .container*/[bordered][scale=s].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-inline:0.5rem}/*!@:host([bordered][scale=l]) .container*/[bordered][scale=l].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-inline:1rem}@media (forced-colors: active){/*!@:host*/.sc-calcite-tab-title-h{outline-width:0;outline-offset:0}/*!@:host(:focus) .container*/.sc-calcite-tab-title-h:focus .container.sc-calcite-tab-title{outline-color:highlight}/*!@:host([bordered]) .container*/[bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-style:solid}/*!@:host([bordered][position=below]) .container*/[bordered][position=below].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:solid}/*!@:host([bordered][position=bottom]) .container*/[bordered][position=bottom].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:solid}/*!@:host([bordered][active]) .container*/[bordered][active].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-style:none}/*!@:host([bordered][position=below][active]) .container*/[bordered][position=below][active].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:none}/*!@:host([bordered][position=bottom][active]) .container*/[bordered][position=bottom][active].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:none}}";
+const tabTitleCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tab-title:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-tab-title{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tab-title{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tab-title{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tab-title{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tab-title{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tab-title:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tab-title-h{display:none !important}/*!@:host([disabled])*/[disabled].sc-calcite-tab-title-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-tab-title-h{display:block;-ms-flex:0 1 auto;flex:0 1 auto;outline:2px solid transparent;outline-offset:2px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:1.25rem;margin-inline-end:1.25rem}/*!@:host([layout=center])*/[layout=center].sc-calcite-tab-title-h{margin-block:0px;margin-inline:1.25rem;text-align:center;-ms-flex-preferred-size:12rem;flex-basis:12rem}/*!@:host([position=below]) .container*/[position=below].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}/*!@:host([position=bottom]) .container*/[position=bottom].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}/*!@:host .container*/.sc-calcite-tab-title-h .container.sc-calcite-tab-title{outline-color:transparent}/*!@:host(:focus) .container*/.sc-calcite-tab-title-h:focus .container.sc-calcite-tab-title{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@:host(:active) a, \n:host(:focus) a, \n:host(:hover) a*/.sc-calcite-tab-title-h:active a.sc-calcite-tab-title,.sc-calcite-tab-title-h:focus a.sc-calcite-tab-title,.sc-calcite-tab-title-h:hover a.sc-calcite-tab-title{border-color:var(--calcite-ui-border-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}/*!@:host([selected]) .container*/[selected].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-color:transparent;color:var(--calcite-ui-text-1)}/*!@:host([disabled]) .container*/[disabled].sc-calcite-tab-title-h .container.sc-calcite-tab-title{pointer-events:none;opacity:0.5}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tab-title-h[disabled] .sc-calcite-tab-title-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tab-title-h [calcite-hydrated][disabled].sc-calcite-tab-title{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-tab-title-h{-webkit-margin-end:1rem;margin-inline-end:1rem}/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tab-title-h{-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@.container*/.container.sc-calcite-tab-title{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end-width:2px;padding-inline:0px;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-3);-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}/*!@.calcite-tab-title--icon*/.calcite-tab-title--icon.sc-calcite-tab-title{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}/*!@.calcite-tab-title--icon svg*/.calcite-tab-title--icon.sc-calcite-tab-title svg.sc-calcite-tab-title{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}/*!@.container--has-text*/.container--has-text.sc-calcite-tab-title{padding:0.25rem}/*!@.container--has-text .calcite-tab-title--icon.icon-start*/.container--has-text.sc-calcite-tab-title .calcite-tab-title--icon.icon-start.sc-calcite-tab-title{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}/*!@.container--has-text .calcite-tab-title--icon.icon-end*/.container--has-text.sc-calcite-tab-title .calcite-tab-title--icon.icon-end.sc-calcite-tab-title{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}/*!@:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child*/[icon-start][icon-end].sc-calcite-tab-title-h .calcite-tab-title--icon.sc-calcite-tab-title:first-child{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}/*!@:host([bordered])*/[bordered].sc-calcite-tab-title-h{-webkit-margin-end:0;margin-inline-end:0}/*!@:host([bordered][selected])*/[bordered][selected].sc-calcite-tab-title-h{-webkit-box-shadow:inset 0px -2px var(--calcite-ui-foreground-1);box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}/*!@:host([bordered][selected][position=below])*/[bordered][selected][position=below].sc-calcite-tab-title-h{-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}/*!@:host([bordered][selected][position=bottom])*/[bordered][selected][position=bottom].sc-calcite-tab-title-h{-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}/*!@:host([bordered]:hover) .container, \n:host([bordered]:focus) .container, \n:host([bordered]:active) .container*/[bordered].sc-calcite-tab-title-h:hover .container.sc-calcite-tab-title,[bordered].sc-calcite-tab-title-h:focus .container.sc-calcite-tab-title,[bordered].sc-calcite-tab-title-h:active .container.sc-calcite-tab-title{position:relative}/*!@:host([bordered]:hover) .container*/[bordered].sc-calcite-tab-title-h:hover .container.sc-calcite-tab-title{background-color:var(--calcite-button-transparent-hover)}/*!@:host([bordered]) .container*/[bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-style:unset;-webkit-border-start:1px solid transparent;border-inline-start:1px solid transparent;-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent}/*!@:host([bordered][position=below]) .container*/[bordered][position=below].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:unset}/*!@:host([bordered][position=bottom]) .container*/[bordered][position=bottom].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:unset}/*!@:host([selected][bordered]) .container*/[selected][bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-inline-start-color:var(--calcite-ui-border-1);border-inline-end-color:var(--calcite-ui-border-1)}/*!@:host([bordered]) .container*/[bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-inline:0.75rem}/*!@:host([bordered][scale=s]) .container*/[bordered][scale=s].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-inline:0.5rem}/*!@:host([bordered][scale=l]) .container*/[bordered][scale=l].sc-calcite-tab-title-h .container.sc-calcite-tab-title{padding-inline:1rem}@media (forced-colors: active){/*!@:host*/.sc-calcite-tab-title-h{outline-width:0;outline-offset:0}/*!@:host(:focus) .container*/.sc-calcite-tab-title-h:focus .container.sc-calcite-tab-title{outline-color:highlight}/*!@:host([bordered]) .container*/[bordered].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-style:solid}/*!@:host([bordered][position=below]) .container*/[bordered][position=below].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:solid}/*!@:host([bordered][position=bottom]) .container*/[bordered][position=bottom].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:solid}/*!@:host([bordered][selected]) .container*/[bordered][selected].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-end-style:none}/*!@:host([bordered][position=below][selected]) .container*/[bordered][position=below][selected].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:none}/*!@:host([bordered][position=bottom][selected]) .container*/[bordered][position=bottom][selected].sc-calcite-tab-title-h .container.sc-calcite-tab-title{border-block-start-style:none}}";
 
 /**
  * @slot - A slot for adding text.
@@ -32020,8 +32224,16 @@ class TabTitle {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Show this tab title as selected */
+    /**
+     * Show this tab title as selected
+     *
+     * @deprecated Use selected instead.
+     */
     this.active = false;
+    /**
+     * When true, display this tab title as selected.
+     */
+    this.selected = false;
     /** Disable this tab title  */
     this.disabled = false;
     /**
@@ -32039,8 +32251,12 @@ class TabTitle {
     this.hasText = false;
     this.guid = `calcite-tab-title-${guid()}`;
   }
-  activeTabChanged() {
-    if (this.active) {
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+    if (this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -32050,6 +32266,13 @@ class TabTitle {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const { selected, active } = this;
+    if (selected) {
+      this.active = selected;
+    }
+    else if (active) {
+      this.activeHandler(active);
+    }
     this.setupTextContentObserver();
     this.parentTabNavEl = this.el.closest("calcite-tab-nav");
     this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -32063,7 +32286,7 @@ class TabTitle {
     }));
   }
   componentWillLoad() {
-    if (this.tab && this.active) {
+    if (this.tab && this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -32084,7 +32307,7 @@ class TabTitle {
     const id = this.el.id || this.guid;
     const iconStartEl = (hAsync("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (hAsync("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (hAsync(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.active), id: id, role: "tab", tabIndex: this.active ? 0 : -1 }, hAsync("div", { class: {
+    return (hAsync(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 }, hAsync("div", { class: {
         container: true,
         "container--has-text": this.hasText
       } }, this.iconStart ? iconStartEl : null, hAsync("slot", null), this.iconEnd ? iconEndEl : null)));
@@ -32094,7 +32317,7 @@ class TabTitle {
   }
   componentDidRender() {
     updateHostInteraction(this, () => {
-      return this.active;
+      return this.selected;
     });
   }
   //--------------------------------------------------------------------------
@@ -32110,11 +32333,11 @@ class TabTitle {
       return;
     }
     if (this.tab) {
-      this.active = this.tab === event.detail.tab;
+      this.selected = this.tab === event.detail.tab;
     }
     else {
       this.getTabIndex().then((index) => {
-        this.active = index === event.detail.tab;
+        this.selected = index === event.detail.tab;
       });
     }
     event.stopPropagation();
@@ -32193,7 +32416,8 @@ class TabTitle {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "active": ["activeTabChanged"]
+    "active": ["activeHandler"],
+    "selected": ["selectedHandler"]
   }; }
   static get style() { return tabTitleCss; }
   static get cmpMeta() { return {
@@ -32201,6 +32425,7 @@ class TabTitle {
     "$tagName$": "calcite-tab-title",
     "$members$": {
       "active": [1540],
+      "selected": [1540],
       "disabled": [516],
       "iconEnd": [513, "icon-end"],
       "iconFlipRtl": [513, "icon-flip-rtl"],
@@ -32218,7 +32443,7 @@ class TabTitle {
     },
     "$listeners$": [[16, "calciteInternalTabChange", "internalTabChangeHandler"], [0, "click", "onClick"], [0, "keydown", "keyDownHandler"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["active", "active"], ["disabled", "disabled"], ["iconEnd", "icon-end"], ["iconFlipRtl", "icon-flip-rtl"], ["iconStart", "icon-start"], ["layout", "layout"], ["position", "position"], ["scale", "scale"], ["bordered", "bordered"], ["tab", "tab"]]
+    "$attrsToReflect$": [["active", "active"], ["selected", "selected"], ["disabled", "disabled"], ["iconEnd", "icon-end"], ["iconFlipRtl", "icon-flip-rtl"], ["iconStart", "icon-start"], ["layout", "layout"], ["position", "position"], ["scale", "scale"], ["bordered", "bordered"], ["tab", "tab"]]
   }; }
 }