npm - @esri/calcite-components - Versions diffs - 1.0.0-next.554 → 1.0.0-next.557 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (964) hide show

package/dist/custom-elements/index.js CHANGED Viewed

@@ -1,11 +1,64 @@
 /*!
  * 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.557
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Build, forceUpdate, Host, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+const autoTheme = "calcite-theme-auto";
+const darkTheme = "calcite-theme-dark";
+const lightTheme = "calcite-theme-light";
+const CSS_UTILITY = {
+  autoTheme,
+  darkTheme,
+  lightTheme,
+  rtl: "calcite--rtl"
+};
+const TEXT$u = {
+  loading: "Loading"
+};
+/**
+ * Emits when the theme is dynamically toggled between light and dark on <body> or in OS preferences.
+ */
+function initThemeChangeEvent() {
+  const { classList } = document.body;
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const getTheme = () => classList.contains(darkTheme) || (classList.contains(autoTheme) && prefersDark) ? "dark" : "light";
+  const emitThemeChange = (theme) => document.body.dispatchEvent(new CustomEvent("calciteThemeChange", { bubbles: true, detail: { theme } }));
+  const themeChangeHandler = (newTheme) => {
+    currentTheme !== newTheme && emitThemeChange(newTheme);
+    currentTheme = newTheme;
+  };
+  let currentTheme = getTheme();
+  // emits event on page load
+  emitThemeChange(currentTheme);
+  // emits event when changing OS theme preferences
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (event) => themeChangeHandler(event.matches ? "dark" : "light"));
+  // emits event when toggling between theme classes on <body>
+  new MutationObserver(() => themeChangeHandler(getTheme())).observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+}
+/**
+ * This file is imported in Stencil's `globalScript` config option.
+ *
+ * @see {@link https://stenciljs.com/docs/config#globalscript}
+ */
+function appGlobalScript () {
+  if (isBrowser()) {
+    initThemeChangeEvent();
+  }
+}
+const isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
+const globalScripts = appGlobalScript;
 const accordionCss = "@-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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 const Accordion = class extends HTMLElement$1 {
@@ -70,7 +123,7 @@ const Accordion = class extends HTMLElement$1 {
     const item = event.detail.item;
     const parent = event.detail.parent;
     if (this.el === parent) {
-      const key = item.key;
+      const { key } = item;
       const itemToFocus = event.target;
       const isFirstItem = this.itemIndex(itemToFocus) === 0;
       const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
@@ -153,19 +206,6 @@ const Accordion = class extends HTMLElement$1 {
   static get style() { return accordionCss; }
 };
-const autoTheme = "calcite-theme-auto";
-const darkTheme = "calcite-theme-dark";
-const lightTheme = "calcite-theme-light";
-const CSS_UTILITY = {
-  autoTheme,
-  darkTheme,
-  lightTheme,
-  rtl: "calcite--rtl"
-};
-const TEXT$u = {
-  loading: "Loading"
-};
 function gen(counts) {
   return counts
     .map((count) => {
@@ -2406,7 +2446,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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host{-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){margin:0.125rem;display:-ms-flexbox;display:flex;outline-color:transparent}::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:0px}.default-trigger{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),calcite-action::slotted([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{-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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host{-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){margin:0.125rem;display:-ms-flexbox;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:0px}.default-trigger{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),calcite-action::slotted([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{-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"];
@@ -2429,7 +2474,12 @@ const ActionMenu = class extends HTMLElement$1 {
      * When true, the component is open.
      */
     this.open = false;
-    /** Determines the type of positioning to use for the overlaid content. If your element is in a fixed container, use the "fixed" value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the `referenceElement`.
@@ -2438,7 +2488,6 @@ const ActionMenu = class extends HTMLElement$1 {
      */
     this.placement = "auto";
     this.actionElements = [];
-    this.mutationObserver = createObserver("mutation", () => this.getActions());
     this.guid = `calcite-action-menu-${guid()}`;
     this.menuId = `${this.guid}-menu`;
     this.menuButtonId = `${this.guid}-menu-button`;
@@ -2449,8 +2498,8 @@ const ActionMenu = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     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;
       }
@@ -2484,6 +2533,15 @@ const ActionMenu = class extends HTMLElement$1 {
       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();
@@ -2528,23 +2586,29 @@ const ActionMenu = class extends HTMLElement$1 {
     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);
     };
@@ -2555,7 +2619,7 @@ const ActionMenu = class extends HTMLElement$1 {
         this.open = false;
         return;
       }
-      if (key === " " || key === "Enter") {
+      if (isActivationKey(key)) {
         event.preventDefault();
         const action = actionElements[activeMenuItemIndex];
         action ? action.click() : this.toggleOpen(false);
@@ -2574,6 +2638,9 @@ const ActionMenu = class extends HTMLElement$1 {
       this.handleActionNavigation(key, actionElements);
     };
     this.handleActionNavigation = (key, actions) => {
+      if (!this.open) {
+        return;
+      }
       const currentIndex = this.activeMenuItemIndex;
       if (key === "Home") {
         this.activeMenuItemIndex = 0;
@@ -2602,17 +2669,8 @@ const ActionMenu = class extends HTMLElement$1 {
   //  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;
@@ -2643,18 +2701,18 @@ const ActionMenu = class extends HTMLElement$1 {
   // --------------------------------------------------------------------------
   /** 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 = (h("slot", { name: SLOTS$r.trigger }, h("calcite-action", { class: CSS$Q.defaultTrigger, icon: ICONS$f.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
+    const menuButtonSlot = (h("slot", { name: SLOTS$r.trigger, onSlotchange: this.setMenuButtonEl }, h("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 (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, h("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 }, h("slot", null))));
+    return (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, h("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 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   render() {
     return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS$r.tooltip, onSlotchange: this.updateTooltip })));
@@ -3552,7 +3610,7 @@ const BlockSection = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     this.handleHeaderKeyDown = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.toggleSection();
         event.preventDefault();
         event.stopPropagation();
@@ -4300,7 +4358,7 @@ const Checkbox = class extends HTMLElement$1 {
       }
     };
     this.keyDownHandler = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.toggle();
         event.preventDefault();
       }
@@ -6903,7 +6961,7 @@ const ColorPicker = class extends HTMLElement$1 {
       this.updateChannelsFromColor(this.color);
     };
     this.handleColorFieldScopeKeyDown = (event) => {
-      const key = event.key;
+      const { key } = event;
       const arrowKeyToXYOffset = {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
@@ -6918,7 +6976,7 @@ const ColorPicker = class extends HTMLElement$1 {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = event.key;
+      const { key } = event;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -6984,7 +7042,7 @@ const ColorPicker = class extends HTMLElement$1 {
       this.updateColorFromChannels(channels);
     };
     this.handleSavedColorKeyDown = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         event.preventDefault();
         event.stopPropagation();
         this.handleSavedColorSelect(event);
@@ -7253,7 +7311,7 @@ const ColorPicker = class extends HTMLElement$1 {
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
-    const key = event.key;
+    const { key } = event;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
       !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS$I.channel); })) {
       return;
@@ -7631,7 +7689,7 @@ const ColorPickerHexInput = class extends HTMLElement$1 {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = event.key;
+    const { key } = event;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;
@@ -8851,11 +8909,59 @@ function getParentNode(node) {
 }
 function getTrueOffsetParent(element) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
-  return element.offsetParent;
+  return composedOffsetParent(element);
+}
+/**
+ * Polyfills the old offsetParent behavior from before the spec was changed:
+ * https://github.com/w3c/csswg-drafts/issues/159
+ */
+function composedOffsetParent(element) {
+  let {
+    offsetParent
+  } = element;
+  let ancestor = element;
+  let foundInsideSlot = false;
+  while (ancestor && ancestor !== offsetParent) {
+    const {
+      assignedSlot
+    } = ancestor;
+    if (assignedSlot) {
+      let newOffsetParent = assignedSlot.offsetParent;
+      if (getComputedStyle$1(assignedSlot).display === 'contents') {
+        const hadStyleAttribute = assignedSlot.hasAttribute('style');
+        const oldDisplay = assignedSlot.style.display;
+        assignedSlot.style.display = getComputedStyle$1(ancestor).display;
+        newOffsetParent = assignedSlot.offsetParent;
+        assignedSlot.style.display = oldDisplay;
+        if (!hadStyleAttribute) {
+          assignedSlot.removeAttribute('style');
+        }
+      }
+      ancestor = assignedSlot;
+      if (offsetParent !== newOffsetParent) {
+        offsetParent = newOffsetParent;
+        foundInsideSlot = true;
+      }
+    } else if (isShadowRoot(ancestor) && ancestor.host && foundInsideSlot) {
+      break;
+    }
+    ancestor = isShadowRoot(ancestor) && ancestor.host || ancestor.parentNode;
+  }
+  return offsetParent;
 }
 function getContainingBlock(element) {
@@ -8869,7 +8975,8 @@ function getContainingBlock(element) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
     } else {
-      currentNode = currentNode.parentNode;
+      const parent = currentNode.parentNode;
+      currentNode = isShadowRoot(parent) ? parent.host : parent;
     }
   }
@@ -8882,11 +8989,11 @@ function getOffsetParent(element) {
   const window = getWindow(element);
   let offsetParent = getTrueOffsetParent(element);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent);
   }
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
     return window;
   }
@@ -9488,7 +9595,12 @@ const Combobox = class extends HTMLElement$1 {
     this.disabled = false;
     /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
     this.maxItems = 0;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * When true, makes the component required for form-submission.
@@ -10424,11 +10536,6 @@ const ComboboxItemGroup = class extends HTMLElement$1 {
   static get style() { return comboboxItemGroupCss; }
 };
-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 = /(?!^\.)\.$/;
@@ -11388,8 +11495,8 @@ const DatePickerDay = class extends HTMLElement$1 {
       !this.disabled && this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (event) => {
-      const key = event.key;
-      if (key === " " || key === "Enter") {
+      const { key } = event;
+      if (isActivationKey(key)) {
         !this.disabled && this.calciteDaySelect.emit();
       }
     };
@@ -11770,8 +11877,8 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
       this.handleArrowClick(event, this.prevMonthDate);
     };
     this.prevMonthKeydown = (event) => {
-      const key = event.key;
-      if (key === " " || key === "Enter") {
+      const { key } = event;
+      if (isActivationKey(key)) {
         this.prevMonthClick(event);
       }
     };
@@ -11779,8 +11886,8 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
       this.handleArrowClick(event, this.nextMonthDate);
     };
     this.nextMonthKeydown = (event) => {
-      const key = event.key;
-      if (key === " " || key === "Enter") {
+      const { key } = event;
+      if (isActivationKey(key)) {
         this.nextMonthClick(event);
       }
     };
@@ -11924,7 +12031,12 @@ const Dropdown = class extends HTMLElement$1 {
      this value does not include groupTitles passed to calcite-dropdown-group
      */
     this.maxItems = 0;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the dropdown will be positioned relative to the button.
@@ -12035,7 +12147,7 @@ const Dropdown = class extends HTMLElement$1 {
       if (target !== this.referenceEl) {
         return;
       }
-      const key = event.key;
+      const { key } = event;
       if (this.open && (key === "Escape" || (event.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
@@ -14233,7 +14345,12 @@ const InputDatePicker = class extends HTMLElement$1 {
      * @internal
      */
     this.required = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
     this.proximitySelectionDisabled = false;
@@ -18384,7 +18501,7 @@ class PopoverManager$1 {
         .forEach((popover) => popover.toggle(false));
     };
     this.keyHandler = (event) => {
-      if (event.key !== "Enter" && event.key !== " ") {
+      if (!isActivationKey(event.key)) {
         return;
       }
       this.togglePopovers(event);
@@ -18480,7 +18597,12 @@ const Popover = class extends HTMLElement$1 {
      * When true, displays and positions the component.
      */
     this.open = false;
-    /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the `referenceElement`.
@@ -18842,27 +18964,27 @@ const RadioButton = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The checked state of the radio button. */
+    /** When true, the component is checked. */
     this.checked = false;
-    /** The disabled state of the radio button. */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * The focused state of the radio button.
+     * The focused state of the component.
      *
      * @internal
      */
     this.focused = false;
-    /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
+    /** When true, the component is not displayed and is not focusable or checkable. */
     this.hidden = false;
     /**
-     * The hovered state of the radio button.
+     * The hovered state of the component.
      *
      * @internal
      */
     this.hovered = false;
-    /** Requires that a value is selected for the radio button group before the parent form will submit. */
+    /** When true, the component must have a value selected from the `calcite-radio-button-group` on form submission. */
     this.required = false;
-    /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
+    /** Specifies the size of the component inherited from the `calcite-radio-button-group`. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -18897,7 +19019,7 @@ const RadioButton = class extends HTMLElement$1 {
     };
     this.handleKeyDown = (event) => {
       const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-      const key = event.key;
+      const { key } = event;
       const { el } = this;
       if (keys.indexOf(key) === -1) {
         return;
@@ -19094,15 +19216,15 @@ const RadioButtonGroup = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The disabled state of the radio button group. */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** The radio button group's hidden status.  When a radio button group is hidden none of its options are focusable or checkable. */
+    /** When true, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. */
     this.hidden = false;
-    /** The layout direction of the radio buttons in a group. */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** Requires that a value is selected for the radio button group before the parent form will submit. */
+    /** When true, the component must have a value on form submission. */
     this.required = false;
-    /** The scale (size) of the radio button group. */
+    /** Specifies the size of the component. */
     this.scale = "m";
     // --------------------------------------------------------------------------
     //
@@ -19193,23 +19315,23 @@ const RadioGroup = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** specify the appearance style of the radio group, defaults to solid. */
+    /** Specifies the appearance style of the component. */
     this.appearance = "solid";
-    /** is the radio group disabled  */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * When true, makes the component required for form-submission.
+     * When true, the component must have a value on form submission.
      *
      * @internal
      */
     this.required = false;
-    /** specify the layout of the radio group, defaults to horizontal */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** The scale of the radio group */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** The value of the selectedItem */
+    /** The component's "selectedItem" value. */
     this.value = null;
-    /** specify the width of the group, defaults to auto */
+    /** Specifies the width of the component. */
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
@@ -19283,7 +19405,7 @@ const RadioGroup = class extends HTMLElement$1 {
   }
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-    const key = event.key;
+    const { key } = event;
     const { el, selectedItem } = this;
     if (keys.indexOf(key) === -1) {
       return;
@@ -19398,11 +19520,11 @@ const RadioGroupItem = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Indicates whether the control is checked. */
+    /** When true, the component is checked. */
     this.checked = false;
-    /** flip the icon in rtl */
+    /** When true, the icon will be flipped when the element direction is right-to-left ("rtl"). */
     this.iconFlipRtl = false;
-    /** optionally used with icon, select where to position the icon */
+    /** When used with "icon", specifies its position. */
     this.iconPosition = "start";
   }
   handleCheckedChange() {
@@ -19447,30 +19569,30 @@ const Rating = class extends HTMLElement$1 {
     //  Properties
     //
     // --------------------------------------------------------------------------
-    /** specify the scale of the component, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** the value of the rating component */
+    /** The component's value. */
     this.value = 0;
-    /** is the rating component in a selectable mode */
+    /** When true, the component's value can be read, but cannot be modified. */
     this.readOnly = false;
-    /** is the rating component in a selectable mode */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** Show average and count data summary chip (if available) */
+    /** When true, and if available, displays the "average" and/or "count" data summary in a `calcite-chip`. */
     this.showChip = false;
     /**
-     * Localized string for "Rating" (used for aria label)
+     * Accessible name for the component.
      *
      * @default "Rating"
      */
     this.intlRating = TEXT$5.rating;
     /**
-     * Localized string for labelling each star, `${num}` in the string will be replaced by the number
+     * Accessible name for each star. The `${num}` in the string will be replaced by the number.
      *
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT$5.stars;
     /**
-     * When true, makes the component required for form-submission.
+     * When true, the component must have a value on form submission.
      *
      * @internal
      */
@@ -20555,8 +20677,8 @@ const Slider = class extends HTMLElement$1 {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = event.key;
-    if (key === "Enter" || key === " ") {
+    const { key } = event;
+    if (isActivationKey(key)) {
       event.preventDefault();
       return;
     }
@@ -24198,7 +24320,12 @@ const SplitButton = class extends HTMLElement$1 {
      disabling interaction. with the primary button
      */
     this.loading = false;
-    /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /** specify the scale of the control, defaults to m */
     this.scale = "m";
@@ -24667,8 +24794,8 @@ const Switch = class extends HTMLElement$1 {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
-      const key = event.key;
-      if (!this.disabled && (key === " " || key === "Enter")) {
+      const { key } = event;
+      if (!this.disabled && isActivationKey(key)) {
         this.toggle();
         event.preventDefault();
       }
@@ -24740,7 +24867,7 @@ const Switch = class extends HTMLElement$1 {
   static get style() { return switchCss; }
 };
-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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host([active]) section{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([active]){display:block;block-size:100%;inline-size:100%;overflow:auto}section{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}";
+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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host([selected]) section{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}section{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}";
 const Tab = class extends HTMLElement$1 {
   constructor() {
@@ -24750,14 +24877,26 @@ const Tab = class extends HTMLElement$1 {
     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
@@ -24765,10 +24904,15 @@ const Tab = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   render() {
     const id = this.el.id || this.guid;
-    return (h(Host, { "aria-labelledby": this.labeledBy, id: id }, h("div", { role: "tabpanel", tabIndex: this.active ? 0 : -1 }, h("section", null, h("slot", null)))));
+    return (h(Host, { "aria-labelledby": this.labeledBy, id: id }, h("div", { role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", null, h("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();
@@ -24800,11 +24944,11 @@ const Tab = class extends HTMLElement$1 {
       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();
@@ -24834,10 +24978,14 @@ const Tab = class extends HTMLElement$1 {
     this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
   }
   get el() { return this; }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "selected": ["selectedHandler"]
+  }; }
   static get style() { return tabCss; }
 };
-const tabNavCss = "@-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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host{position:relative;display:-ms-flexbox;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:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-pack:start;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);-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([position=below]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=bottom]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=below]) .tab-nav-active-indicator-container{inset-block-start:0px;inset-block-end:unset}: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=below]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start: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}}";
+const tabNavCss = "@-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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host{position:relative;display:-ms-flexbox;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:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-pack:start;justify-content:flex-start;overflow:auto}:host([layout=center]) .tab-nav{-ms-flex-pack:center;justify-content:center}.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);-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([position=below]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=bottom]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=below]) .tab-nav-active-indicator-container{inset-block-start:0px;inset-block-end:unset}: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=below]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start: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}}";
 const TabNav = class extends HTMLElement$1 {
   constructor() {
@@ -25041,7 +25189,7 @@ const TabNav = class extends HTMLElement$1 {
   static get style() { return tabNavCss; }
 };
-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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host([disabled]){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{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]){margin-block:0px;margin-inline:1.25rem;text-align:center;-ms-flex-preferred-size:12rem;flex-basis:12rem}:host([position=below]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host .container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host(:active) a,:host(:focus) a,:host(:hover) a{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{border-color:transparent;color:var(--calcite-ui-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) .container{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .container{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}:host([scale=l]) .container{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{-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{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}.calcite-tab-title--icon svg{-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{padding:0.25rem}.container--has-text .calcite-tab-title--icon.icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.container--has-text .calcite-tab-title--icon.icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([bordered]){-webkit-margin-end:0;margin-inline-end:0}:host([bordered][active]){-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]){-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]){-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,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-button-transparent-hover)}:host([bordered]) .container{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{border-block-start-style:unset}:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([active][bordered]) .container{border-inline-start-color:var(--calcite-ui-border-1);border-inline-end-color:var(--calcite-ui-border-1)}:host([bordered]) .container{padding-inline:0.75rem}:host([bordered][scale=s]) .container{padding-inline:0.5rem}:host([bordered][scale=l]) .container{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=below]) .container{border-block-start-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][active]) .container{border-block-end-style:none}:host([bordered][position=below][active]) .container{border-block-start-style:none}:host([bordered][position=bottom][active]) .container{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{--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;-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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none !important}:host([disabled]){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{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]){margin-block:0px;margin-inline:1.25rem;text-align:center;-ms-flex-preferred-size:12rem;flex-basis:12rem}:host([position=below]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host .container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host(:active) a,:host(:focus) a,:host(:hover) a{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{border-color:transparent;color:var(--calcite-ui-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) .container{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .container{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}:host([scale=l]) .container{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{-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{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}.calcite-tab-title--icon svg{-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{padding:0.25rem}.container--has-text .calcite-tab-title--icon.icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.container--has-text .calcite-tab-title--icon.icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([bordered]){-webkit-margin-end:0;margin-inline-end:0}:host([bordered][selected]){-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]){-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]){-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,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-button-transparent-hover)}:host([bordered]) .container{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{border-block-start-style:unset}:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-ui-border-1);border-inline-end-color:var(--calcite-ui-border-1)}:host([bordered]) .container{padding-inline:0.75rem}:host([bordered][scale=s]) .container{padding-inline:0.5rem}:host([bordered][scale=l]) .container{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=below]) .container{border-block-start-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=below][selected]) .container{border-block-start-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}}";
 const TabTitle = class extends HTMLElement$1 {
   constructor() {
@@ -25058,8 +25206,16 @@ const TabTitle = class extends HTMLElement$1 {
     //  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;
     /**
@@ -25077,8 +25233,12 @@ const TabTitle = class extends HTMLElement$1 {
     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);
     }
   }
@@ -25088,6 +25248,13 @@ const TabTitle = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   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");
@@ -25104,7 +25271,7 @@ const TabTitle = class extends HTMLElement$1 {
     if (Build.isBrowser) {
       this.updateHasText();
     }
-    if (this.tab && this.active) {
+    if (this.tab && this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -25125,7 +25292,7 @@ const TabTitle = class extends HTMLElement$1 {
     const id = this.el.id || this.guid;
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.active), id: id, role: "tab", tabIndex: this.active ? 0 : -1 }, h("div", { class: {
+    return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 }, h("div", { class: {
         container: true,
         "container--has-text": this.hasText
       } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
@@ -25135,7 +25302,7 @@ const TabTitle = class extends HTMLElement$1 {
   }
   componentDidRender() {
     updateHostInteraction(this, () => {
-      return this.active;
+      return this.selected;
     });
   }
   //--------------------------------------------------------------------------
@@ -25151,11 +25318,11 @@ const TabTitle = class extends HTMLElement$1 {
       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();
@@ -25234,7 +25401,8 @@ const TabTitle = class extends HTMLElement$1 {
   }
   get el() { return this; }
   static get watchers() { return {
-    "active": ["activeTabChanged"]
+    "active": ["activeHandler"],
+    "selected": ["selectedHandler"]
   }; }
   static get style() { return tabTitleCss; }
 };
@@ -25879,7 +26047,7 @@ const TimePicker = class extends HTMLElement$1 {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = event.key;
+      const { key } = event;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newHour;
@@ -25924,7 +26092,6 @@ const TimePicker = class extends HTMLElement$1 {
             this.incrementHour();
             break;
           case " ":
-          case "Spacebar":
             event.preventDefault();
             break;
         }
@@ -25987,7 +26154,6 @@ const TimePicker = class extends HTMLElement$1 {
           this.decrementMeridiem();
           break;
         case " ":
-        case "Spacebar":
           event.preventDefault();
           break;
       }
@@ -26003,7 +26169,7 @@ const TimePicker = class extends HTMLElement$1 {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = event.key;
+      const { key } = event;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
@@ -26034,7 +26200,6 @@ const TimePicker = class extends HTMLElement$1 {
             this.incrementMinute();
             break;
           case " ":
-          case "Spacebar":
             event.preventDefault();
             break;
         }
@@ -26051,7 +26216,7 @@ const TimePicker = class extends HTMLElement$1 {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = event.key;
+      const { key } = event;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
@@ -26082,7 +26247,6 @@ const TimePicker = class extends HTMLElement$1 {
             this.incrementSecond();
             break;
           case " ":
-          case "Spacebar":
             event.preventDefault();
             break;
         }
@@ -26194,7 +26358,7 @@ const TimePicker = class extends HTMLElement$1 {
     this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const key = event.key;
+    const { key } = event;
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
@@ -26262,7 +26426,7 @@ const TimePicker = class extends HTMLElement$1 {
   //
   // --------------------------------------------------------------------------
   buttonActivated(event) {
-    const key = event.key;
+    const { key } = event;
     if (key === " ") {
       event.preventDefault();
     }
@@ -26851,7 +27015,12 @@ const Tooltip = class extends HTMLElement$1 {
      * When true, the component is open.
      */
     this.open = false;
-    /** Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the "fixed" value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the `referenceElement`.
@@ -27913,12 +28082,13 @@ const ValueListItem = class extends HTMLElement$1 {
   static get style() { return valueListItemCss; }
 };
+globalScripts();
 const CalciteAccordion = /*@__PURE__*/proxyCustomElement(Accordion, [1,"calcite-accordion",{"appearance":[513],"iconPosition":[513,"icon-position"],"iconType":[513,"icon-type"],"scale":[513],"selectionMode":[513,"selection-mode"]},[[0,"calciteInternalAccordionItemKeyEvent","calciteInternalAccordionItemKeyEvent"],[0,"calciteInternalAccordionItemRegister","registerCalciteAccordionItem"],[0,"calciteInternalAccordionItemSelect","updateActiveItemOnChange"]]]);
 const CalciteAccordionItem = /*@__PURE__*/proxyCustomElement(AccordionItem, [1,"calcite-accordion-item",{"active":[1540],"expanded":[1540],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"heading":[1],"description":[1],"icon":[513]},[[0,"keydown","keyDownHandler"],[16,"calciteInternalAccordionChange","updateActiveItemOnChange"]]]);
 const CalciteAction = /*@__PURE__*/proxyCustomElement(Action, [1,"calcite-action",{"active":[516],"alignment":[513],"appearance":[513],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"intlLoading":[1,"intl-loading"],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
 const CalciteActionBar = /*@__PURE__*/proxyCustomElement(ActionBar, [1,"calcite-action-bar",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"layout":[513],"overflowActionsDisabled":[4,"overflow-actions-disabled"],"position":[513],"scale":[513]}]);
 const CalciteActionGroup = /*@__PURE__*/proxyCustomElement(ActionGroup, [1,"calcite-action-group",{"expanded":[516],"layout":[513],"columns":[514],"intlMore":[1,"intl-more"],"menuOpen":[1540,"menu-open"],"scale":[513]}]);
-const CalciteActionMenu = /*@__PURE__*/proxyCustomElement(ActionMenu, [1,"calcite-action-menu",{"expanded":[516],"flipPlacements":[16],"label":[1],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"scale":[513],"activeMenuItemIndex":[32]},[[9,"pointerdown","closeCalciteActionMenuOnClick"]]]);
+const CalciteActionMenu = /*@__PURE__*/proxyCustomElement(ActionMenu, [1,"calcite-action-menu",{"expanded":[516],"flipPlacements":[16],"label":[1],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"scale":[513],"menuButtonEl":[32],"activeMenuItemIndex":[32]},[[9,"pointerdown","closeCalciteActionMenuOnClick"]]]);
 const CalciteActionPad = /*@__PURE__*/proxyCustomElement(ActionPad, [1,"calcite-action-pad",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"layout":[513],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"scale":[513]}]);
 const CalciteAlert = /*@__PURE__*/proxyCustomElement(Alert, [1,"calcite-alert",{"active":[1540],"open":[1540],"autoDismiss":[4,"auto-dismiss"],"autoDismissDuration":[513,"auto-dismiss-duration"],"color":[513],"icon":[520],"intlClose":[1,"intl-close"],"label":[1],"placement":[1],"scale":[513],"queue":[32],"queueLength":[32],"queued":[32],"requestedIcon":[32]},[[8,"calciteInternalAlertSync","alertSync"],[8,"calciteInternalAlertRegister","alertRegister"]]]);
 const CalciteAvatar = /*@__PURE__*/proxyCustomElement(Avatar, [1,"calcite-avatar",{"scale":[513],"thumbnail":[1],"fullName":[1,"full-name"],"username":[1],"userId":[1,"user-id"],"error":[32]}]);
@@ -27988,9 +28158,9 @@ const CalciteSplitButton = /*@__PURE__*/proxyCustomElement(SplitButton, [1,"calc
 const CalciteStepper = /*@__PURE__*/proxyCustomElement(Stepper, [1,"calcite-stepper",{"icon":[516],"layout":[513],"numbered":[516],"scale":[513]},[[0,"calciteInternalStepperItemKeyEvent","calciteInternalStepperItemKeyEvent"],[0,"calciteInternalStepperItemRegister","registerItem"],[0,"calciteInternalStepperItemSelect","updateItem"],[0,"calciteInternalUserRequestedStepperItemSelect","handleUserRequestedStepperItemSelect"]]]);
 const CalciteStepperItem = /*@__PURE__*/proxyCustomElement(StepperItem, [1,"calcite-stepper-item",{"active":[1540],"complete":[516],"error":[4],"disabled":[516],"itemTitle":[1,"item-title"],"heading":[1],"itemSubtitle":[1,"item-subtitle"],"description":[1],"layout":[1537],"icon":[1028],"numbered":[1028],"scale":[1537]},[[16,"calciteInternalStepperItemChange","updateActiveItemOnChange"]]]);
 const CalciteSwitch = /*@__PURE__*/proxyCustomElement(Switch, [1,"calcite-switch",{"disabled":[516],"label":[1],"name":[513],"scale":[513],"switched":[1028],"checked":[1540],"value":[8]}]);
-const CalciteTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"calcite-tab",{"tab":[513],"active":[1540],"scale":[1537],"labeledBy":[32]},[[16,"calciteInternalTabChange","internalTabChangeHandler"]]]);
+const CalciteTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"calcite-tab",{"tab":[513],"active":[1540],"selected":[1540],"scale":[1537],"labeledBy":[32]},[[16,"calciteInternalTabChange","internalTabChangeHandler"]]]);
 const CalciteTabNav = /*@__PURE__*/proxyCustomElement(TabNav, [1,"calcite-tab-nav",{"storageId":[1,"storage-id"],"syncId":[1,"sync-id"],"scale":[1537],"layout":[1537],"position":[1537],"bordered":[1540],"indicatorOffset":[1026,"indicator-offset"],"indicatorWidth":[1026,"indicator-width"],"selectedTab":[32],"selectedTabEl":[32]},[[0,"calciteInternalTabsFocusPrevious","focusPreviousTabHandler"],[0,"calciteInternalTabsFocusNext","focusNextTabHandler"],[0,"calciteInternalTabsActivate","internalActivateTabHandler"],[0,"calciteTabsActivate","activateTabHandler"],[0,"calciteInternalTabTitleRegister","updateTabTitles"],[16,"calciteInternalTabChange","globalInternalTabChangeHandler"]]]);
-const CalciteTabTitle = /*@__PURE__*/proxyCustomElement(TabTitle, [1,"calcite-tab-title",{"active":[1540],"disabled":[516],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"layout":[1537],"position":[1537],"scale":[1537],"bordered":[1540],"tab":[513],"controls":[32],"hasText":[32]},[[16,"calciteInternalTabChange","internalTabChangeHandler"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
+const CalciteTabTitle = /*@__PURE__*/proxyCustomElement(TabTitle, [1,"calcite-tab-title",{"active":[1540],"selected":[1540],"disabled":[516],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"layout":[1537],"position":[1537],"scale":[1537],"bordered":[1540],"tab":[513],"controls":[32],"hasText":[32]},[[16,"calciteInternalTabChange","internalTabChangeHandler"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
 const CalciteTabs = /*@__PURE__*/proxyCustomElement(Tabs, [1,"calcite-tabs",{"layout":[513],"position":[513],"scale":[513],"bordered":[1540],"titles":[32],"tabs":[32]},[[0,"calciteInternalTabTitleRegister","calciteInternalTabTitleRegister"],[16,"calciteTabTitleUnregister","calciteTabTitleUnregister"],[0,"calciteInternalTabRegister","calciteInternalTabRegister"],[16,"calciteTabUnregister","calciteTabUnregister"]]]);
 const CalciteTile = /*@__PURE__*/proxyCustomElement(Tile, [1,"calcite-tile",{"active":[516],"description":[513],"disabled":[516],"embed":[516],"focused":[516],"heading":[513],"hidden":[516],"href":[513],"icon":[513]}]);
 const CalciteTileSelect = /*@__PURE__*/proxyCustomElement(TileSelect, [1,"calcite-tile-select",{"checked":[1540],"description":[513],"disabled":[516],"heading":[513],"hidden":[516],"icon":[513],"name":[520],"inputEnabled":[516,"input-enabled"],"inputAlignment":[513,"input-alignment"],"type":[513],"value":[8],"width":[513],"focused":[32]},[[0,"calciteCheckboxChange","checkboxChangeHandler"],[0,"calciteInternalCheckboxFocus","checkboxFocusBlurHandler"],[0,"calciteInternalCheckboxBlur","checkboxFocusBlurHandler"],[0,"calciteRadioButtonChange","radioButtonChangeHandler"],[0,"calciteInternalRadioButtonCheckedChange","radioButtonCheckedChangeHandler"],[0,"calciteInternalRadioButtonFocus","radioButtonFocusBlurHandler"],[0,"calciteInternalRadioButtonBlur","radioButtonFocusBlurHandler"],[0,"click","click"],[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);