@esri/calcite-components 5.2.0-next.8 → 5.2.0-next.81

package/dist/components/calcite-menu/customElement.js

@@ -3,9 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { f as focusElementInGroup, a as slotChangeGetAssignedElements, i as focusElement } from "../../chunks/dom.js";
+import { e as focusElementInGroup, b as slotChangeGetAssignedElements, f as focusElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { i as isMenuItem } from "../../chunks/resources20.js";
 const styles = css`:host{display:flex;line-height:var(--calcite-font-line-height-fixed-lg)}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;
 class Menu extends LitElement {
   constructor() {
@@ -15,10 +16,11 @@ class Menu extends LitElement {
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.layout = "horizontal";
-    this.listen("calciteInternalMenuItemKeyEvent", this.calciteInternalNavMenuItemKeyEvent);
+    this.scale = "m";
+    this.listen("keydown", this.calciteInternalNavMenuItemKeyEvent);
   }
   static {
-    this.properties = { label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -30,59 +32,76 @@ class Menu extends LitElement {
     return this.focusSetter(() => this.menuItems[0], options);
   }
   willUpdate(changes) {
-    if (changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal")) {
-      this.setMenuItemLayout(this.menuItems, this.layout);
+    if (changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+      this.setMenuItemProperties(this.menuItems);
     }
   }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
-    this.setMenuItemLayout(this.menuItems, this.layout);
+    this.setMenuItemProperties(this.menuItems);
   }
   calciteInternalNavMenuItemKeyEvent(event) {
-    const target = event.target;
-    const submenuItems = event.detail.children;
-    const key = event.detail.event.key;
-    event.stopPropagation();
+    if (event.defaultPrevented) {
+      return;
+    }
+    const target = this.getMenuItemFromEvent(event);
+    if (!target) {
+      return;
+    }
+    const submenuItems = this.getSubmenuItems(target);
+    const hasSubmenu = submenuItems.length > 0;
+    const key = event.key;
+    let handled = false;
     if (key === "ArrowDown") {
       if (target.layout === "vertical") {
         focusElementInGroup(this.menuItems, target, "next", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          submenuItems[0].setFocus();
-        }
+        handled = true;
+      } else if (target.open && hasSubmenu) {
+        submenuItems[0].setFocus();
+        handled = true;
       }
     } else if (key === "ArrowUp") {
-      if (this.layout === "vertical") {
+      if (target.layout === "vertical") {
         focusElementInGroup(this.menuItems, target, "previous", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          submenuItems[submenuItems.length - 1].setFocus();
-        }
+        handled = true;
+      } else if (target.open && hasSubmenu) {
+        submenuItems[submenuItems.length - 1].setFocus();
+        handled = true;
       }
     } else if (key === "ArrowRight") {
       if (this.layout === "horizontal") {
         focusElementInGroup(this.menuItems, target, "next", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          submenuItems[0].setFocus();
-        }
+        handled = true;
+      } else if (target.open && hasSubmenu) {
+        submenuItems[0].setFocus();
+        handled = true;
       }
     } else if (key === "ArrowLeft") {
       if (this.layout === "horizontal") {
         focusElementInGroup(this.menuItems, target, "previous", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          this.focusParentElement(event.target);
-        }
+        handled = true;
+      } else if (isMenuItem(target.parentElement)) {
+        this.focusParentElement(target);
+        handled = true;
       }
-    } else if (key === "Escape") {
-      this.focusParentElement(event.target);
+    } else if (key === "Escape" && isMenuItem(target.parentElement)) {
+      this.focusParentElement(target);
+      handled = true;
     }
-    event.preventDefault();
+    if (handled) {
+      event.preventDefault();
+    }
+  }
+  getMenuItemFromEvent(event) {
+    const target = event.composedPath().find(isMenuItem);
+    return target && this.menuItems.includes(target) ? target : void 0;
+  }
+  getSubmenuItems(menuItem) {
+    return Array.from(menuItem.children).filter(isMenuItem).filter((child) => child.matches('[slot="submenu-item"]'));
   }
   handleMenuSlotChange(event) {
     this.menuItems = slotChangeGetAssignedElements(event);
-    this.setMenuItemLayout(this.menuItems, this.layout);
+    this.setMenuItemProperties(this.menuItems);
   }
   focusParentElement(el) {
     const parentEl = el.parentElement;
@@ -91,9 +110,10 @@ class Menu extends LitElement {
       parentEl.open = false;
     }
   }
-  setMenuItemLayout(items, layout) {
+  setMenuItemProperties(items) {
     items.forEach((item) => {
-      item.layout = layout;
+      item.layout = this.layout;
+      item.scale = this.scale;
       if (this.getEffectiveRole() === "menubar") {
         item.isTopLevelItem = true;
         item.topLevelMenuLayout = this.layout;

package/dist/components/calcite-menu-item/customElement.d.ts

@@ -1,16 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-menu-item-accent-color] - When `active`, specifies the component's border color.
- * @cssproperty [--calcite-menu-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-menu-item-sub-menu-border-color] - Specifies the submenu's border color.
- * @cssproperty [--calcite-menu-item-sub-menu-corner-radius] - Specifies the submenu's border radius.
- * @cssproperty [--calcite-menu-text-color] - Specifies the component's text color.
- * @slot [submenu-item] - A slot for adding `calcite-menu-item`s in a submenu.
- */
+/** @slot [submenu-item] - A slot for adding `calcite-menu-item`s in a submenu. */
 export abstract class MenuItem extends LitElement {
   /**
    * When `true`, the component is highlighted.
@@ -38,10 +31,14 @@ export abstract class MenuItem extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      submenu?: string;
-      open?: string;
+      submenu?: string | undefined;
+      open?: string | undefined;
   };
   /**
    * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
@@ -55,6 +52,12 @@ export abstract class MenuItem extends LitElement {
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
   accessor rel: string | undefined;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *

package/dist/components/calcite-menu-item/customElement.js

@@ -5,40 +5,12 @@ import { keyed } from "lit/directives/keyed.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const CSS = {
-  container: "container",
-  content: "content",
-  dropdownVertical: "dropdown--vertical",
-  dropdownMenuItems: "dropdown-menu-items",
-  dropdownAction: "dropdown-action",
-  layoutVertical: "layout--vertical",
-  hoverHrefIcon: "hover-href-icon",
-  icon: "icon",
-  iconBreadcrumb: "icon--breadcrumb",
-  iconDropdown: "icon--dropdown",
-  iconEnd: "icon--end",
-  iconStart: "icon--start",
-  isParentVertical: "parent--vertical",
-  itemContent: "item-content",
-  open: "open",
-  nested: "nested",
-  textContainer: "text-container"
-};
-const SLOTS = {
-  submenuItem: "submenu-item"
-};
-const ICONS = {
-  arrowLeft: "arrow-left",
-  arrowRight: "arrow-right",
-  chevronLeft: "chevron-left",
-  chevronRight: "chevron-right",
-  chevronUp: "chevron-up",
-  chevronDown: "chevron-down"
-};
-const styles = css`:host{--calcite-internal-menu-item-border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.item-content{background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)))}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;padding-inline:1rem;font-size:var(--calcite-font-size-relative-md);outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:.125rem;border-block-end:.125rem solid var(--calcite-color-transparent);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{--calcite-internal-menu-background-color: var(--calcite-color-foreground-2)}.content:focus{border-block-end-width:4px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));padding-block-start:.25rem;border-block-end-width:.25rem}.content:active{--calcite-internal-menu-background-color: var(--calcite-color-foreground-3);--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:var(--calcite-space-md);border-block-end:0;border-inline-end:.25rem solid var(--calcite-color-transparent)}:host([layout=vertical]) .content{padding-inline:.75rem}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var( --calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand)) )}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)))))}.icon--start{margin-inline-end:.75rem}.icon--end{margin-inline-start:.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}.dropdown-action{position:relative;align-self:center;--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color);margin-inline-start:var(--calcite-spacing-xxs)}.dropdown-action:after{position:absolute;display:block;inline-size:1px;content:"";inset-inline-start:calc(-1 * var(--calcite-spacing-xxs));inset-block:var(--calcite-spacing-xxs);background-color:var(--calcite-color-border-3)}.dropdown-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}:host([layout=vertical]) .dropdown-action{margin-inline-end:var(--calcite-spacing-xxs)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;box-shadow:var(--calcite-shadow-md);border:var(--calcite-internal-menu-item-border);border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items{border:none}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items:after{content:"";border-block-start:var(--calcite-internal-menu-item-border);position:absolute;inset-block-start:0;inset-inline:var(--calcite-space-md) 0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
+import { C as CSS, I as ICONS, S as SLOTS } from "../../chunks/resources20.js";
+const styles = css`:host{--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: 0;--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-xl);--calcite-internal-menu-item-dropdown-action-block-size: auto;--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-spacing-xxs);--calcite-internal-menu-item-dropdown-action-flex: initial;--calcite-internal-menu-item-font-size: var(--calcite-font-size-relative-md);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-md);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg);--calcite-internal-menu-item-border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([layout=vertical]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: auto;--calcite-internal-menu-item-padding-block: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-md);inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.item-content{background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)))}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:var(--calcite-space-base);border-block-end:var(--calcite-space-base) solid var(--calcite-color-transparent);font-size:var(--calcite-internal-menu-item-font-size);line-height:var(--calcite-internal-menu-item-line-height, inherit);padding-inline:var(--calcite-internal-menu-item-padding-inline);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{--calcite-internal-menu-background-color: var(--calcite-color-foreground-2)}.content:focus{border-block-end-width:4px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));padding-block-start:var(--calcite-space-2xs);border-block-end-width:var(--calcite-space-2xs)}.content:active{--calcite-internal-menu-background-color: var(--calcite-color-foreground-3);--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:var(--calcite-internal-menu-item-padding-block);border-block-end:0;border-inline-end:var(--calcite-space-2xs) solid var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-menu-item-content-min-block-size: 2.25rem;--calcite-internal-menu-item-font-size: var(--calcite-font-size);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-sm);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-sm);--calcite-internal-menu-item-line-height: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-sm);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=s]:not([layout=vertical])){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-space-2xl);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base);--calcite-internal-menu-item-dropdown-action-flex: 0 0 1.75rem}:host([scale=s]:not([layout=vertical])) .icon--dropdown{padding-inline-start:var(--calcite-space-xs)}:host([scale=s]:not([layout=vertical])) .dropdown-action{padding-block:0;padding-inline:0;padding-inline-start:var(--calcite-space-2xs)}:host([scale=s][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-sm);--calcite-internal-menu-item-padding-inline: var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-sm);padding-inline-start:var(--calcite-space-xs)}:host([breadcrumb][scale=s]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-xs)}:host([breadcrumb][scale=s]:not([layout=vertical])) .content{padding-inline-end:var(--calcite-space-sm)}:host(.is-child[scale=s][layout=vertical]) .parent--vertical{block-size:2.25rem}:host(.is-child[scale=s][layout=vertical]) .content{--calcite-internal-menu-item-content-min-block-size: 2.25rem}:host([scale=s][layout=vertical]):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-block-size: 2.25rem;--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-sm);--calcite-internal-menu-item-dropdown-action-flex: 0 0 var(--calcite-size-md)}:host([scale=s][layout=vertical]):has(.dropdown-action) .dropdown-action{align-items:center;box-sizing:border-box;padding-inline:var(--calcite-space-2xs)}:host([scale=s]) .dropdown-action,:host([scale=l]:not([layout=vertical])) .dropdown-action{margin-inline:0;margin-inline-start:var(--calcite-space-px)}:host([scale=s]) .dropdown-action:after,:host([scale=l]:not([layout=vertical])) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-px))}:host([scale=s][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-2xs)}:host([scale=m][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-sm)}:host([scale=l]){--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-2xl);--calcite-internal-menu-item-font-size: var(--calcite-font-size-lg);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-lg);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-lg);--calcite-internal-menu-item-line-height: var(--calcite-space-2xl);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=l]:not([layout=vertical])){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-sm-plus)}:host([scale=l]:not([layout=vertical])) .container,:host([scale=l]:not([layout=vertical])) .item-content,:host([scale=l]:not([layout=vertical])) .content{min-block-size:var(--calcite-size-2xl)}:host([scale=l]:not([layout=vertical])) .icon--dropdown{margin-inline-start:var(--calcite-space-sm-plus);padding-inline-start:0}:host([scale=l]:not([layout=vertical])) .dropdown-action{margin-inline-start:var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}:host([scale=l][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg)}:host([scale=l][layout=vertical]) .content:has(.icon--end):has(.icon--dropdown) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-lg);padding-inline-start:var(--calcite-space-sm-plus)}:host([scale=l][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-md)}:host([scale=l][layout=vertical]) .dropdown-action{margin-inline-end:0;padding-inline:var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-size-lg);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-xs);--calcite-internal-menu-item-dropdown-action-flex: 0 0 3.125rem}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .content{padding-inline-end:var(--calcite-space-xl)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .dropdown-action{box-sizing:border-box;padding-inline-start:var(--calcite-space-xs)}:host([scale=l][layout=vertical]):is([slot=submenu-item],.is-child) .parent--vertical{padding-inline-start:var(--calcite-size-md)}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var( --calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand)) )}:host([active][scale=l][layout=vertical]) .content{border-inline-end-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host(.is-child[layout=vertical]) .parent--vertical{box-sizing:border-box;padding-inline-start:var(--calcite-space-xl)}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}:host([layout=vertical]) .text-container{flex:1}:host([scale=m][layout=vertical]) .text-container{flex:0 1 auto}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)))))}.icon--start{margin-inline-end:var(--calcite-internal-menu-item-icon-spacing-start)}.icon--end{margin-inline-start:var(--calcite-internal-menu-item-icon-spacing-end)}:host([layout=vertical]) .icon--end{padding-inline-start:0;--calcite-internal-menu-item-icon-spacing-end: auto}:host([layout=vertical][scale=m]) .icon--end{padding-inline-start:.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-sm)}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-start:var(--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start);padding-inline-start:0;margin-inline-end:0px}:host([scale=m]) .icon--breadcrumb{padding-inline-start:.5rem}:host([breadcrumb][scale=l][layout=vertical]) .icon--breadcrumb{margin-inline-start:var(--calcite-space-sm-plus)}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}.dropdown-action{position:relative;align-self:center;--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color);block-size:var(--calcite-internal-menu-item-dropdown-action-block-size);flex:var(--calcite-internal-menu-item-dropdown-action-flex);margin-inline-start:var(--calcite-spacing-xxs)}.dropdown-action:after{position:absolute;display:block;inline-size:1px;content:"";inset-inline-start:calc(-1 * var(--calcite-spacing-xxs));inset-block:var(--calcite-internal-menu-item-dropdown-action-divider-inset-block);background-color:var(--calcite-color-border-3)}.dropdown-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}:host([layout=vertical]) .dropdown-action{margin-inline-end:var(--calcite-spacing-xxs)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;box-shadow:var(--calcite-shadow-md);border:var(--calcite-internal-menu-item-border);border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items{border:none}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items:after{content:"";border-block-start:var(--calcite-internal-menu-item-border);position:absolute;inset-block-start:0;inset-inline:var(--calcite-space-md) 0}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
 class MenuItem extends LitElement {
   constructor() {
     super();
@@ -53,7 +25,7 @@ class MenuItem extends LitElement {
     this.breadcrumb = false;
     this.isTopLevelItem = false;
     this.open = false;
-    this.calciteInternalMenuItemKeyEvent = createEvent();
+    this.scale = "m";
     this.calciteMenuItemSelect = createEvent();
     this.listenOn(window, "click", this.handleClickOut);
     this.listen("focusout", this.handleFocusOut);
@@ -61,7 +33,7 @@ class MenuItem extends LitElement {
     this.listen("focus", this.focusHandler);
   }
   static {
-    this.properties = { hasSubmenu: [16, {}, { state: true }], submenuItems: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], breadcrumb: [7, {}, { reflect: true, type: Boolean }], href: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], isTopLevelItem: [5, {}, { type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], text: 1, topLevelMenuLayout: 1 };
+    this.properties = { hasSubmenu: [16, {}, { state: true }], submenuItems: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], breadcrumb: [7, {}, { reflect: true, type: Boolean }], href: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], isTopLevelItem: [5, {}, { type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], text: 1, topLevelMenuLayout: 1 };
   }
   static {
     this.styles = styles;
@@ -105,7 +77,7 @@ class MenuItem extends LitElement {
     this.hasSubmenu = this.submenuItems.length > 0;
   }
   async keyDownHandler(event) {
-    const { hasSubmenu, href, layout, open, submenuItems } = this;
+    const { hasSubmenu, href, layout, open } = this;
     const key = event.key;
     const targetIsDropdown = event.target === this.dropdownActionRef.value;
     if (event.defaultPrevented) {
@@ -124,39 +96,21 @@ class MenuItem extends LitElement {
     } else if (key === "Escape") {
       if (open) {
         this.open = false;
+        event.preventDefault();
         return;
       }
-      this.calciteInternalMenuItemKeyEvent.emit({ event });
-      event.preventDefault();
     } else if (key === "ArrowDown" || key === "ArrowUp") {
-      event.preventDefault();
       if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "horizontal") {
         this.open = true;
+        event.preventDefault();
         return;
       }
-      this.calciteInternalMenuItemKeyEvent.emit({
-        event,
-        children: submenuItems,
-        isSubmenuOpen: open && hasSubmenu
-      });
-    } else if (key === "ArrowLeft") {
-      event.preventDefault();
-      this.calciteInternalMenuItemKeyEvent.emit({
-        event,
-        children: submenuItems,
-        isSubmenuOpen: true
-      });
     } else if (key === "ArrowRight") {
-      event.preventDefault();
       if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "vertical") {
         this.open = true;
+        event.preventDefault();
         return;
       }
-      this.calciteInternalMenuItemKeyEvent.emit({
-        event,
-        children: submenuItems,
-        isSubmenuOpen: open && hasSubmenu
-      });
     }
   }
   selectMenuItem(event) {
@@ -165,21 +119,21 @@ class MenuItem extends LitElement {
     }
   }
   renderIconStart() {
-    return keyed(CSS.iconStart, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconStart}`} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} scale=s></calcite-icon>`);
+    return keyed(CSS.iconStart, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconStart}`} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   renderIconEnd() {
-    return keyed(CSS.iconEnd, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconEnd}`} .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} scale=s></calcite-icon>`);
+    return keyed(CSS.iconEnd, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconEnd}`} .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   renderBreadcrumbIcon(dir) {
-    return keyed(CSS.iconBreadcrumb, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconBreadcrumb}`} .icon=${dir === "rtl" ? ICONS.chevronLeft : ICONS.chevronRight} scale=s></calcite-icon>`);
+    return keyed(CSS.iconBreadcrumb, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconBreadcrumb}`} .icon=${dir === "rtl" ? ICONS.chevronLeft : ICONS.chevronRight} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   renderDropdownIcon(dir) {
     const dirChevron = dir === "rtl" ? "chevron-left" : "chevron-right";
-    return keyed(CSS.iconDropdown, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconDropdown}`} .icon=${this.topLevelMenuLayout === "vertical" || this.isTopLevelItem ? this.open ? ICONS.chevronUp : ICONS.chevronDown : dirChevron} scale=s></calcite-icon>`);
+    return keyed(CSS.iconDropdown, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconDropdown}`} .icon=${this.topLevelMenuLayout === "vertical" || this.isTopLevelItem ? this.open ? ICONS.chevronUp : ICONS.chevronDown : dirChevron} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   renderDropdownAction(dir) {
     const dirChevron = dir === "rtl" ? "chevron-left" : "chevron-right";
-    return keyed(CSS.dropdownAction, html`<calcite-action .aria=${{ expanded: this.open }} class=${safeClassMap(CSS.dropdownAction)} .icon=${this.topLevelMenuLayout === "vertical" || this.isTopLevelItem ? this.open ? ICONS.chevronUp : ICONS.chevronDown : dirChevron} @click=${this.clickHandler} @keydown=${this.keyDownHandler} .text=${this.messages.open} ${ref(this.dropdownActionRef)}></calcite-action>`);
+    return keyed(CSS.dropdownAction, html`<calcite-action .aria=${{ expanded: this.open }} class=${safeClassMap(CSS.dropdownAction)} .icon=${this.topLevelMenuLayout === "vertical" || this.isTopLevelItem ? this.open ? ICONS.chevronUp : ICONS.chevronDown : dirChevron} @click=${this.clickHandler} @keydown=${this.keyDownHandler} .scale=${this.scale} .text=${this.messages.open} ${ref(this.dropdownActionRef)}></calcite-action>`);
   }
   renderSubmenuItems(dir) {
     return html`<calcite-menu class=${safeClassMap({
@@ -188,14 +142,15 @@ class MenuItem extends LitElement {
       [CSS.nested]: !this.isTopLevelItem,
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.dropdownVertical]: this.topLevelMenuLayout === "vertical"
-    })} .label=${this.messages.submenu} layout=vertical role=menu><slot name=${SLOTS.submenuItem} @slotchange=${this.handleMenuItemSlotChange}></slot></calcite-menu>`;
+    })} .label=${this.messages.submenu} layout=vertical role=menu .scale=${this.scale}><slot name=${SLOTS.submenuItem} @slotchange=${this.handleMenuItemSlotChange}></slot></calcite-menu>`;
   }
   renderHrefIcon(dir) {
-    return keyed(CSS.hoverHrefIcon, html`<calcite-icon class=${safeClassMap(CSS.hoverHrefIcon)} .icon=${dir === "rtl" ? ICONS.arrowLeft : ICONS.arrowRight} scale=s></calcite-icon>`);
+    return keyed(CSS.hoverHrefIcon, html`<calcite-icon class=${safeClassMap(CSS.hoverHrefIcon)} .icon=${dir === "rtl" ? ICONS.arrowLeft : ICONS.arrowRight} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   renderItemContent(dir) {
     const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
-    return html`${this.iconStart && this.renderIconStart() || ""}<div class=${safeClassMap(CSS.textContainer)}><span>${this.text}</span></div>${hasHref && this.renderHrefIcon(dir) || ""}${this.iconEnd && this.renderIconEnd() || ""}${this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}${!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}`;
+    const hasDropdownIcon = !this.href && this.hasSubmenu;
+    return html`${this.iconStart && this.renderIconStart() || ""}<div class=${safeClassMap(CSS.textContainer)}><span>${this.text}</span></div>${hasHref && this.renderHrefIcon(dir) || ""}${this.iconEnd && this.renderIconEnd() || ""}${this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}${hasDropdownIcon ? this.renderDropdownIcon(dir) : null}`;
   }
   render() {
     const dir = this.direction;

package/dist/components/calcite-meter/customElement.d.ts

@@ -1,19 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Scale } from "../interfaces.js";
+import type { Appearance, Scale } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { MeterFillType, MeterLabelType } from "./interfaces.js";
+import type { MeterFillType, MeterLabelType } from "./types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/**
- * @cssproperty [--calcite-meter-background-color] - Specifies the background color of the component.
- * @cssproperty [--calcite-meter-border-color] - Specifies the border color of the component and displayed step lines.
- * @cssproperty [--calcite-meter-shadow] - Specifies the box shadow of the component.
- * @cssproperty [--calcite-meter-corner-radius] - Specifies the corner radius of the component.
- * @cssproperty [--calcite-meter-fill-color] - Specifies the color of the component's fill.
- * @cssproperty [--calcite-meter-range-text-color] - Specifies the color of the component's range labels.
- * @cssproperty [--calcite-meter-value-text-color] - Specifies the color of the component's value label.
- */
 export abstract class Meter extends LitElement {
   /**
    * Specifies the appearance of the component.
@@ -28,9 +19,10 @@ export abstract class Meter extends LitElement {
    */
   accessor disabled: boolean;
   /**
-   * Specifies the component's display, where
-   * `"single"` displays a single color, and
-   * `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
+   * Specifies the component's display.
+   *
+   * - `"single"` displays a single color.
+   * - `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
    *
    * @default "range"
    */
@@ -72,7 +64,9 @@ export abstract class Meter extends LitElement {
    */
   accessor min: number;
   /**
-   * Specifies the name of the component. Required to pass the component's `value` on form submission.
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */

package/dist/components/calcite-meter/customElement.js

@@ -5,7 +5,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { z as intersects } from "../../chunks/dom.js";
+import { B as intersects } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {
@@ -98,13 +98,13 @@ class Meter extends LitElement {
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
-    const lowPercent = 100 * (low - min) / (max - min);
-    const highPercent = 100 * (high - min) / (max - min);
-    const currentPercent = 100 * (value - min) / (max - min);
-    if (!low || low < min || low > high || low > max) {
+    const lowPercent = low === void 0 ? NaN : 100 * (low - min) / (max - min);
+    const highPercent = high === void 0 ? NaN : 100 * (high - min) / (max - min);
+    const currentPercent = value === void 0 ? NaN : 100 * (value - min) / (max - min);
+    if (!low || low < min || high !== void 0 && low > high || low > max) {
       this.low = min;
     }
-    if (!high || high > max || high < low || high < min) {
+    if (!high || high > max || low !== void 0 && high < low || high < min) {
       this.high = max;
     }
     if (!value) {
@@ -140,10 +140,10 @@ class Meter extends LitElement {
     const { low, high, min, max, value } = this;
     const lowest = low ? low : min;
     const highest = high ? high : max;
-    const aboveLowest = value >= lowest;
-    const belowLowest = value < lowest;
-    const aboveHighest = value >= highest;
-    const belowHighest = value < highest;
+    const aboveLowest = value !== void 0 && value >= lowest;
+    const belowLowest = value !== void 0 && value < lowest;
+    const aboveHighest = value !== void 0 && value >= highest;
+    const belowHighest = value !== void 0 && value < highest;
     if (!value || !low && belowHighest || belowLowest) {
       return CSS.success;
     } else if (aboveLowest && belowHighest) {

package/dist/components/calcite-navigation/customElement.d.ts

@@ -1,12 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /**
- * @cssproperty [--calcite-navigation-width] - Specifies the width of the component's content area.
- * @cssproperty [--calcite-navigation-background] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-navigation-background-color` instead. Specifies the background color of the component.
- * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-navigation-border-color] - Specifies the component's border color.
  * @slot [logo] - A slot for adding a `calcite-logo` component to the primary navigation level.
  * @slot [user] - A slot for adding a `calcite-user` component to the primary navigation level.
  * @slot [progress] - A slot for adding a `calcite-progress` component to the primary navigation level.
@@ -19,7 +15,7 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class Navigation extends LitElement {
   /** When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.
    *

package/dist/components/calcite-navigation/customElement.js

@@ -4,8 +4,11 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { i as isNavigationLogo } from "../../chunks/resources21.js";
+import { i as isNavigationUser } from "../../chunks/resources22.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { c as createObserver } from "../../chunks/observers.js";
+import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
   container: "container",
   containerContent: "container-content",
@@ -29,6 +32,7 @@ const SLOTS = {
 const ICONS = {
   hamburger: "hamburger"
 };
+const isNavigation = isTag("calcite-navigation");
 const styles = css`:host([hidden]){display:none}[hidden]{display:none}:host{display:block}:host([scale=s]){--calcite-internal-navigation-primary-height: 3rem;--calcite-internal-navigation-secondary-height: 2.25rem;--calcite-internal-navigation-tertiary-height: 2.25rem;--calcite-internal-navigation-navigation-action-margin-inline: 8px}:host([scale=m]){--calcite-internal-navigation-primary-height: 4rem;--calcite-internal-navigation-secondary-height: 3rem;--calcite-internal-navigation-tertiary-height: 3rem;--calcite-internal-navigation-navigation-action-margin-inline: var(--calcite-font-size-sm)}:host([scale=l]){--calcite-internal-navigation-primary-height: 4.75rem;--calcite-internal-navigation-secondary-height: 4rem;--calcite-internal-navigation-tertiary-height: 4rem;--calcite-internal-navigation-navigation-action-margin-inline: var(--calcite-font-size-md)}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:var(--calcite-internal-navigation-primary-height)}.secondary{block-size:var(--calcite-internal-navigation-secondary-height)}.tertiary{block-size:var(--calcite-internal-navigation-tertiary-height)}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}slot[name=navigation-action] calcite-action{align-self:center;margin-inline-start:var(--calcite-internal-navigation-navigation-action-margin-inline)}`;
 class Navigation extends LitElement {
   constructor() {
@@ -40,6 +44,15 @@ class Navigation extends LitElement {
       this.updateNavigationUser();
       this.updateNestedNavigation();
     });
+    this.logoSlotHasElements = false;
+    this.navigationActionSlotHasElements = false;
+    this.primaryContentCenterSlotHasElements = false;
+    this.primaryContentEndSlotHasElements = false;
+    this.primaryContentStartSlotHasElements = false;
+    this.progressSlotHasElement = false;
+    this.secondarySlotHasElements = false;
+    this.tertiarySlotHasElements = false;
+    this.userSlotHasElements = false;
     this.navigationAction = false;
     this.scale = "m";
     this.calciteNavigationActionSelect = createEvent({ cancelable: false });
@@ -121,27 +134,27 @@ class Navigation extends LitElement {
   isPrimaryLevel() {
     return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;
   }
-  getOwnedNavigationElements(slotName, selector) {
+  getOwnedNavigationElements(slotName, predicate) {
     const slot = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
     if (!slot) {
       return [];
     }
-    return slot.assignedElements({ flatten: true }).filter((item) => item.matches(selector));
+    return slot.assignedElements({ flatten: true }).filter(predicate);
   }
   updateNavigationLogo() {
-    this.getOwnedNavigationElements(SLOTS.logo, "calcite-navigation-logo").forEach((item) => {
+    this.getOwnedNavigationElements(SLOTS.logo, isNavigationLogo).forEach((item) => {
       item.scale = this.scale;
     });
   }
   updateNavigationUser() {
-    this.getOwnedNavigationElements(SLOTS.user, "calcite-navigation-user").forEach((item) => {
+    this.getOwnedNavigationElements(SLOTS.user, isNavigationUser).forEach((item) => {
       item.scale = this.scale;
     });
   }
   updateNestedNavigation() {
     const nestedNavigation = [
-      ...this.getOwnedNavigationElements(SLOTS.navSecondary, "calcite-navigation"),
-      ...this.getOwnedNavigationElements(SLOTS.navTertiary, "calcite-navigation")
+      ...this.getOwnedNavigationElements(SLOTS.navSecondary, isNavigation),
+      ...this.getOwnedNavigationElements(SLOTS.navTertiary, isNavigation)
     ];
     nestedNavigation.forEach((item) => {
       if (item !== this.el) {