@esri/calcite-components 5.2.0-next.10 → 5.2.0-next.101

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 { u as useFocusable } from "../../chunks/useFocusable.js";
+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-theme-space-2xs, 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-theme-color-surface-2, 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-theme-color-surface-2, 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-theme-color-surface-3, 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-theme-color-surface-4, 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-md);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)}: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}: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-start:var(--calcite-space-md);padding-inline-end:var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .content:not([href]){--calcite-internal-menu-item-content-min-block-size: 2.25rem}:host([scale=s][layout=vertical]):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base)}: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-xl);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]: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)}: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}:host([breadcrumb][scale=l]:not([layout=vertical])) .content{padding-inline-start:var(--calcite-space-xl);padding-inline-end:var(--calcite-space-lg)}: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([slot=submenu-item][layout=vertical][scale=s]) .parent--vertical{padding-inline-start:var(--calcite-space-xl)}:host([slot=submenu-item][layout=vertical][scale=m]) .parent--vertical{padding-inline-start:var(--calcite-space-2xl)}:host([slot=submenu-item][layout=vertical][scale=l]) .parent--vertical{padding-inline-start:var(--calcite-space-3xl)}: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=s]) .icon--end{padding-inline-start:var(--calcite-space-sm)}:host([layout=vertical][scale=m]) .icon--end{padding-inline-start:var(--calcite-space-md)}:host([layout=vertical][scale=l]) .icon--end{padding-inline-start:var(--calcite-space-lg)}.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--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-theme-space-2xs, var(--calcite-spacing-xxs))}.dropdown-action:after{position:absolute;display:block;inline-size:1px;content:"";inset-inline-start:calc(-1 * var(--calcite-theme-space-2xs, 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-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=l][layout=vertical]) .dropdown-action{margin-inline:var(--calcite-space-xs)}:host([scale=l][layout=vertical]) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}.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-internal-menu-item-padding-inline) 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();
@@ -47,21 +19,20 @@ class MenuItem extends LitElement {
     this.dropdownActionRef = createRef();
     this.isFocused = false;
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.hasSubmenu = false;
     this.active = false;
     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);
     this.listen("blur", this.blurHandler);
     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;
@@ -69,6 +40,9 @@ class MenuItem extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.anchorRef.value, options);
   }
+  load() {
+    this.listenOn(document, "click", this.handleClickOut);
+  }
   handleClickOut(event) {
     if (this.topLevelMenuLayout !== "vertical" && this.hasSubmenu && this.open && !event.composedPath().includes(this.el)) {
       this.open = false;
@@ -105,7 +79,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 +98,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 +121,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 +144,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,29 @@
 /// <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.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the background color of the component. */
+  "--calcite-meter-background-color": "*";
+  /** Specifies the border color of the component and displayed step lines. */
+  "--calcite-meter-border-color": "*";
+  /** Specifies the box shadow of the component. */
+  "--calcite-meter-shadow": "*";
+  /** Specifies the corner radius of the component. */
+  "--calcite-meter-corner-radius": "*";
+  /** Specifies the color of the component's fill. */
+  "--calcite-meter-fill-color": "*";
+  /** Specifies the color of the component's range labels. */
+  "--calcite-meter-range-text-color": "*";
+  /** Specifies the color of the component's value label. */
+  "--calcite-meter-value-text-color": "*";
+}
+}
+
 export abstract class Meter extends LitElement {
   /**
    * Specifies the appearance of the component.
@@ -28,9 +38,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 +83,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 = {
@@ -23,7 +23,7 @@ const CSS = {
   warning: "fill-warning",
   danger: "fill-danger"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-internal-meter-space: var(--calcite-spacing-base);--calcite-internal-meter-height: var(--calcite-spacing-lg);--calcite-internal-meter-font-size: var(--calcite-font-size--1);--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));--calcite-internal-meter-background-color: var(--calcite-meter-background-color, var(--calcite-color-foreground-2));--calcite-internal-meter-border-color: var(--calcite-meter-border-color, var(--calcite-color-border-2));--calcite-internal-meter-shadow: var(--calcite-meter-shadow, var(--calcite-shadow-none));--calcite-internal-meter-corner-radius: var(--calcite-meter-corner-radius, 9999px);--calcite-internal-meter-value-text-color: var(--calcite-meter-value-text-color, var(--calcite-color-text-1));--calcite-internal-meter-range-text-color: var(--calcite-meter-range-text-color, var(--calcite-color-text-3));--calcite-internal-meter-label-line-height: var(--calcite-font-line-height-base)}:host([scale=s]){--calcite-internal-meter-height: var(--calcite-spacing-md);--calcite-internal-meter-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-meter-height: var(--calcite-spacing-xxl);--calcite-internal-meter-font-size: var(--calcite-font-size-0);--calcite-internal-meter-label-line-height: var(--calcite-font-line-height-md)}:host([appearance=solid]){--calcite-internal-meter-border-color: var(--calcite-color-foreground-3);--calcite-internal-meter-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]){--calcite-internal-meter-background-color: transparent}.fill{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand))}.fill-danger{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger))}.fill-success{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success))}.fill-warning{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning))}.container{position:relative;display:flex;align-items:center;margin:0;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-internal-meter-height);background-color:var(--calcite-internal-meter-background-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-meter-border-color);border-radius:var(--calcite-internal-meter-corner-radius);box-shadow:var(--calcite-internal-meter-shadow)}.value-visible{margin-block-start:var(--calcite-spacing-xxl)}.steps-visible{margin-block-end:var(--calcite-spacing-xxl)}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-internal-meter-space);background-color:var(--calcite-internal-meter-border-color)}.label{position:absolute;display:flex;gap:var(--calcite-spacing-xxs);font-size:var(--calcite-internal-meter-font-size);line-height:var(--calcite-internal-meter-label-line-height)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + .5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-internal-meter-value-text-color)}.label-range{color:var(--calcite-internal-meter-range-text-color);inset-block-start:calc(100% + .5em)}.label-range .unit-label{font-weight:var(--calcite-font-weight-medium)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-inline-start:var(--calcite-internal-meter-space);inset-block:var(--calcite-internal-meter-space);border-radius:var(--calcite-internal-meter-corner-radius);max-inline-size:calc(100% - var(--calcite-internal-meter-space) * 2);min-inline-size:calc(var(--calcite-internal-meter-height) - var(--calcite-internal-meter-space) * 2);background-color:var(--calcite-internal-meter-fill-color);transition-property:inline-size,background-color,box-shadow}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-internal-meter-height));box-shadow:0 0 0 1px var(--calcite-internal-meter-fill-color)}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-internal-meter-space: var(--calcite-theme-space-base, var(--calcite-spacing-base));--calcite-internal-meter-height: var(--calcite-theme-space-lg, var(--calcite-spacing-lg));--calcite-internal-meter-font-size: var(--calcite-font-size--1);--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));--calcite-internal-meter-background-color: var( --calcite-meter-background-color, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) );--calcite-internal-meter-border-color: var(--calcite-meter-border-color, var(--calcite-color-border-2));--calcite-internal-meter-shadow: var(--calcite-meter-shadow, var(--calcite-shadow-none));--calcite-internal-meter-corner-radius: var(--calcite-meter-corner-radius, 9999px);--calcite-internal-meter-value-text-color: var(--calcite-meter-value-text-color, var(--calcite-color-text-1));--calcite-internal-meter-range-text-color: var(--calcite-meter-range-text-color, var(--calcite-color-text-3));--calcite-internal-meter-label-line-height: var(--calcite-font-line-height-base)}:host([scale=s]){--calcite-internal-meter-height: var(--calcite-theme-space-md, var(--calcite-spacing-md));--calcite-internal-meter-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-meter-height: var(--calcite-theme-space-2xl, var(--calcite-spacing-xxl));--calcite-internal-meter-font-size: var(--calcite-font-size-0);--calcite-internal-meter-label-line-height: var(--calcite-font-line-height-md)}:host([appearance=solid]){--calcite-internal-meter-border-color: var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3));--calcite-internal-meter-background-color: var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3))}:host([appearance=outline]){--calcite-internal-meter-background-color: transparent}.fill{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand))}.fill-danger{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger))}.fill-success{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success))}.fill-warning{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning))}.container{position:relative;display:flex;align-items:center;margin:0;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-internal-meter-height);background-color:var(--calcite-internal-meter-background-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-meter-border-color);border-radius:var(--calcite-internal-meter-corner-radius);box-shadow:var(--calcite-internal-meter-shadow)}.value-visible{margin-block-start:var(--calcite-theme-space-2xl, var(--calcite-spacing-xxl))}.steps-visible{margin-block-end:var(--calcite-theme-space-2xl, var(--calcite-spacing-xxl))}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-internal-meter-space);background-color:var(--calcite-internal-meter-border-color)}.label{position:absolute;display:flex;gap:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));font-size:var(--calcite-internal-meter-font-size);line-height:var(--calcite-internal-meter-label-line-height)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + .5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-internal-meter-value-text-color)}.label-range{color:var(--calcite-internal-meter-range-text-color);inset-block-start:calc(100% + .5em)}.label-range .unit-label{font-weight:var(--calcite-font-weight-medium)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-inline-start:var(--calcite-internal-meter-space);inset-block:var(--calcite-internal-meter-space);border-radius:var(--calcite-internal-meter-corner-radius);max-inline-size:calc(100% - var(--calcite-internal-meter-space) * 2);min-inline-size:calc(var(--calcite-internal-meter-height) - var(--calcite-internal-meter-space) * 2);background-color:var(--calcite-internal-meter-fill-color);transition-property:inline-size,background-color,box-shadow}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-internal-meter-height));box-shadow:0 0 0 1px var(--calcite-internal-meter-fill-color)}`;
 class Meter extends LitElement {
   constructor() {
     super(...arguments);
@@ -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,25 @@
 /// <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";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the width of the component's content area. */
+  "--calcite-navigation-width": "*";
+  /**
+   * Specifies the background color of the component.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-navigation-background-color` instead.
+   */
+  "--calcite-navigation-background": "*";
+  /** Specifies the component's background color. */
+  "--calcite-navigation-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-navigation-border-color": "*";
+}
+}
 
 /**
- * @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 +32,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 { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { i as isNavigationLogo } from "../../chunks/resources21.js";
+import { i as isNavigationUser } from "../../chunks/resources22.js";
+import { u as useFocusable } from "../../chunks/useFocusable.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,17 +32,27 @@ const SLOTS = {
 const ICONS = {
   hamburger: "hamburger"
 };
-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)}`;
+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-theme-color-surface-2, 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() {
     super(...arguments);
     this.navigationActionRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.mutationObserver = createObserver("mutation", () => {
       this.updateNavigationLogo();
       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) {

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

@@ -1,14 +1,21 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HeadingLevel } from "../functional/Heading.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** When `active`, specifies the component's border color. */
+  "--calcite-navigation-accent-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-navigation-background-color": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-navigation-logo-heading-text-color": "*";
+  /** Specifies the component's `description` text color. */
+  "--calcite-navigation-logo-text-color": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-navigation-accent-color] - When `active`, specifies the component's border color.
- * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-navigation-logo-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-navigation-logo-text-color] - Specifies the component's `description` text color.
- */
 export abstract class NavigationLogo extends LitElement {
   /**
    * When `true`, the component is highlighted.
@@ -17,15 +24,15 @@ export abstract class NavigationLogo extends LitElement {
    */
   accessor active: boolean;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -33,21 +40,21 @@ export abstract class NavigationLogo extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Defines the relationship between the `href` value and the current document.
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /** Specifies the `src` to an image. */
-  accessor thumbnail: string;
+  accessor thumbnail: string | undefined;
   /**
    * Sets focus on the component.
    *

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

@@ -4,27 +4,19 @@ import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
 import { H as Heading } from "../../chunks/Heading.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const CSS = {
-  container: "container",
-  containerLink: "container--link",
-  textContainer: "text-container",
-  heading: "heading",
-  description: "description",
-  image: "image",
-  standalone: "standalone",
-  icon: "icon"
-};
-const styles = css`:host{display:inline-flex}:host([scale=s]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-1);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-lg);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-logo-image-size: 2.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-2xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-2xl)}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{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))))}.image{block-size:var(--calcite-internal-navigation-logo-image-size)}.image,.icon{margin:0;display:flex;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, var(--calcite-ui-icon-color, inherit))));padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-logo-heading-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-logo-heading-line-height)}.standalone{font-size:var(--calcite-internal-navigation-logo-heading-standalone-font-size);padding-block-start:0}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-internal-navigation-logo-description-font-size);line-height:var(--calcite-internal-navigation-logo-description-line-height)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useFocusable } from "../../chunks/useFocusable.js";
+import { C as CSS } from "../../chunks/resources21.js";
+const styles = css`:host{display:inline-flex}:host([scale=s]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-1);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-lg);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-logo-image-size: 2.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-2xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-2xl)}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))));border-block-end:2px solid var(--calcite-color-transparent)}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{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))))}.image{block-size:var(--calcite-internal-navigation-logo-image-size)}.image,.icon{margin:0;display:flex;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, var(--calcite-ui-icon-color, inherit))));padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var( --calcite-theme-color-surface-3, var(--calcite-color-foreground-2) )}:host([href]:active){--calcite-internal-navigation-logo-background-color: var( --calcite-theme-color-surface-4, var(--calcite-color-foreground-3) )}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-logo-heading-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-logo-heading-line-height)}.standalone{font-size:var(--calcite-internal-navigation-logo-heading-standalone-font-size);padding-block-start:0}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-internal-navigation-logo-description-font-size);line-height:var(--calcite-internal-navigation-logo-description-line-height)}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationLogo extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
+    this.active = false;
     this.iconFlipRtl = false;
     this.scale = "m";
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], description: 1, heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], href: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], thumbnail: 1, scale: [3, {}, { reflect: true }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], description: 1, heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], href: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], thumbnail: 1, scale: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };