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

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

@@ -57,7 +57,7 @@ import type { DialogPlacement } from "./interfaces.js";
  */
 export abstract class Dialog extends LitElement {
   /** Specifies a function to run before the component closes. */
-  accessor beforeClose: () => Promise<void>;
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, disables the component's close button.
    *
@@ -65,7 +65,7 @@ export abstract class Dialog extends LitElement {
    */
   accessor closeDisabled: boolean;
   /** Specifies the component's description. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, the component is draggable.
    *
@@ -96,7 +96,7 @@ export abstract class Dialog extends LitElement {
    * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
    * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /**
    * When `true`, the component will not display at fullscreen, which may be desired in limited display areas, such as mobile devices.
    *
@@ -104,11 +104,11 @@ export abstract class Dialog extends LitElement {
    */
   accessor fullscreenDisabled: boolean;
   /** 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 an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -116,7 +116,7 @@ export abstract class Dialog extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies the component's kind, which determines the top border styling. */
-  accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
+  accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind> | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -189,7 +189,7 @@ export abstract class Dialog extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * Specifies the component's width.
    *

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

@@ -41,8 +41,8 @@ const SLOTS = {
   footerStart: "footer-start",
   footerEnd: "footer-end"
 };
-const initialDragPosition = { x: null, y: null };
-const initialResizePosition = { top: null, right: null, bottom: null, left: null };
+const initialDragPosition = { x: 0, y: 0 };
+const initialResizePosition = { top: 0, right: 0, bottom: 0, left: 0 };
 const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-content-top-space: var( --calcite-dialog-content-top-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-content-bottom-space: var( --calcite-dialog-content-bottom-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;opacity:0;box-shadow:var(--calcite-shadow-md);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}:host([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.panel{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:35rem){:host(:not([fullscreen-disabled])) .width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:51rem){:host(:not([fullscreen-disabled])) .width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:97rem){:host(:not([fullscreen-disabled])) .width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-warning))}:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-shown-position)}@starting-style{:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-hidden-position);opacity:0}}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class Dialog extends LitElement {
   constructor() {
@@ -70,7 +70,6 @@ class Dialog extends LitElement {
     this.panelRef = createRef();
     this.popoverRef = createRef();
     this.resizePosition = { ...initialResizePosition };
-    this.transitionEl = null;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.sizeOverride = useSizeOverride({
@@ -327,13 +326,13 @@ class Dialog extends LitElement {
       return;
     }
     if (!dragEnabled && !resizable) {
-      transitionEl.style.transform = null;
+      transitionEl.style.transform = "";
       return;
     }
     const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
     const translateX = Math.round(x + left + right);
     const translateY = Math.round(y + top + bottom);
-    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
+    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : "";
   }
   cleanUpInteractions() {
     this.interaction?.unset();
@@ -491,7 +490,7 @@ class Dialog extends LitElement {
       [CSS.container]: true,
       [CSS.containerOpen]: opened,
       [CSS.containerEmbedded]: this.embedded
-    })} .popover=${!this.embedded ? "manual" : null} role=dialog ${ref(this.popoverRef)}>${this.modal ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div class=${safeClassMap({
+    })} .popover=${!this.embedded ? "manual" : void 0} role=dialog ${ref(this.popoverRef)}>${this.modal ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div class=${safeClassMap({
       [CSS.dialog]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} @keydown=${this.handlePanelKeyDown} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;

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

@@ -27,7 +27,7 @@ export abstract class Dropdown extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when its initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scrollbar.
    * Value must be greater than `0`, and does not include `groupTitle`s from `calcite-dropdown-group`.
@@ -101,13 +101,13 @@ export abstract class Dropdown extends LitElement {
    */
   accessor type: "hover" | "click";
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * Specifies the component's width.
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
    */
-  accessor widthScale: Scale;
+  accessor widthScale: Scale | undefined;
   /**
    * Updates the component's position.
    *

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

@@ -75,7 +75,7 @@ class Dropdown extends LitElement {
     this.styles = styles;
   }
   get referenceElementType() {
-    return this.referenceElement ? this.type : null;
+    return this.referenceElement ? this.type : void 0;
   }
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
@@ -198,7 +198,7 @@ class Dropdown extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   updateItems() {
     this.items = this.groups.map((group) => Array.from(group?.querySelectorAll("calcite-dropdown-item"))).reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
@@ -266,8 +266,8 @@ class Dropdown extends LitElement {
     this.topLayer.hide();
   }
   setReferenceEl(el) {
-    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : null;
-    const nextReferenceEl = el instanceof HTMLElement ? el : null;
+    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : void 0;
+    const nextReferenceEl = el instanceof HTMLElement ? el : void 0;
     updateRefObserver(this.resizeObserver, previousReferenceEl, nextReferenceEl);
     if (this.referenceElementType || !nextReferenceEl) {
       return;
@@ -339,6 +339,9 @@ class Dropdown extends LitElement {
     this.selectedItems = this.items.filter((item) => item.selected);
   }
   getYDistanceFromScroller(last) {
+    if (!last) {
+      return NaN;
+    }
     const style = last.getBoundingClientRect();
     return last.offsetTop + style.height;
   }
@@ -380,7 +383,7 @@ class Dropdown extends LitElement {
     this.items.forEach((item) => {
       item.activeDescendant = item === activeItem;
     });
-    this.activeDescendantElement = activeItem ?? null;
+    this.activeDescendantElement = activeItem ?? void 0;
   }
   navigateActiveItem(direction) {
     const traversableItems = this.getTraversableItems();
@@ -446,7 +449,7 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? void 0} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl instanceof HTMLElement ? [this.referenceEl] : void 0} class=${safeClassMap({

package/dist/components/calcite-dropdown-group/customElement.d.ts

@@ -9,7 +9,7 @@ import type { SelectionMode } from "../interfaces.js";
  */
 export abstract class DropdownGroup extends LitElement {
   /** When specified, displays a group title. */
-  accessor groupTitle: string;
+  accessor groupTitle: string | undefined;
   /**
    * The position of the group in the dropdown menu.
    *

package/dist/components/calcite-dropdown-group/customElement.js

@@ -57,7 +57,7 @@ class DropdownGroup extends LitElement {
   render() {
     const groupTitle = this.groupTitle ? html`<span aria-hidden=true class=${safeClassMap({ [CSS.title]: true, [CSS.firstTitle]: this.position === 0 })}>${this.groupTitle}</span>` : null;
     const dropdownSeparator = this.position > 0 ? html`<div class=${safeClassMap(CSS.separator)} role=separator></div>` : null;
-    this.el.ariaLabel = this.groupTitle;
+    this.el.ariaLabel = this.groupTitle ?? null;
     this.el.role = "group";
     return html`<div class=${safeClassMap({
       [CSS$1.container]: true

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

@@ -24,17 +24,17 @@ export abstract class DropdownItem extends LitElement {
    *
    * Determines if the component will render as an anchor.
    */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** When the element direction is right-to-left (`"rtl"`), flips the component's `iconStart` and/or `iconEnd`. */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the relationship to the linked resource defined in `href`. */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -42,7 +42,7 @@ export abstract class DropdownItem extends LitElement {
    */
   accessor selected: boolean;
   /** Specifies the frame or window to open the linked resource. */
-  accessor target: string;
+  accessor target: string | undefined;
   /**
    * Sets focus on the component.
    *

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

@@ -55,7 +55,7 @@ class DropdownItem extends LitElement {
     this.emitRequestedItem();
   }
   updateActiveItemOnChange(event) {
-    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
+    const parentEmittedChange = this.parentDropdownGroupEl && event.composedPath().includes(this.parentDropdownGroupEl);
     if (parentEmittedChange) {
       this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
       this.requestedDropdownItem = event.detail.requestedDropdownItem;
@@ -64,7 +64,7 @@ class DropdownItem extends LitElement {
     event.stopPropagation();
   }
   initialize() {
-    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
+    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group") ?? void 0;
     if (this.selectionMode === "none") {
       this.selected = false;
     }
@@ -106,7 +106,7 @@ class DropdownItem extends LitElement {
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
     const { disabled } = this;
     this.el.ariaChecked = itemAria;
-    this.el.ariaLabel = !href ? label : "";
+    this.el.ariaLabel = !href ? label ?? null : "";
     this.el.role = itemRole;
     setAttribute(this.el, "tabIndex", -1);
     return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({

package/dist/components/calcite-input-date-picker/customElement.js

@@ -199,19 +199,19 @@ class InputDatePicker extends LitElement {
     const minSource = getMinMaxSource(changes, "min");
     const maxSource = getMinMaxSource(changes, "max");
     if (minSource === "min") {
-      this.minAsDate = dateFromISO(this.min) ?? void 0;
+      this.minAsDate = dateFromISO(this.min);
     } else if (minSource === "minAsDate") {
-      this.minAsDate = dateFromISO(dateToISO(this.minAsDate)) ?? void 0;
+      this.minAsDate = dateFromISO(dateToISO(this.minAsDate));
     }
     if (maxSource === "max") {
-      this.maxAsDate = dateFromISO(this.max) ?? void 0;
+      this.maxAsDate = dateFromISO(this.max);
     } else if (maxSource === "maxAsDate") {
-      this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate)) ?? void 0;
+      this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate));
     }
     if ((minSource || maxSource) && !Array.isArray(this.valueAsDate)) {
       const validValueAsDate = dateFromRange(this.valueAsDate, this.minAsDate, this.maxAsDate);
       if (validValueAsDate !== this.valueAsDate) {
-        this.valueAsDate = validValueAsDate ?? void 0;
+        this.valueAsDate = validValueAsDate;
       }
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
@@ -255,7 +255,7 @@ class InputDatePicker extends LitElement {
         if (Array.isArray(newValue)) {
           newValueAsDate = getValueAsDateRange(newValue);
         } else if (newValue) {
-          newValueAsDate = dateFromISO(newValue) ?? void 0;
+          newValueAsDate = dateFromISO(newValue);
         } else {
           newValueAsDate = void 0;
         }
@@ -382,21 +382,21 @@ class InputDatePicker extends LitElement {
         }
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : dateFromISO(value[0]) ?? void 0,
-            focusedInput === "end" ? date : dateFromISO(value[1]) ?? void 0
+            focusedInput === "start" ? date : dateFromISO(value[0]),
+            focusedInput === "end" ? date : dateFromISO(value[1])
           ]);
           this.localizeInputValues();
         } else {
           this.setRangeValue([
-            focusedInput === "end" ? dateFromISO(value[0]) ?? void 0 : void 0,
-            focusedInput === "start" ? dateFromISO(value[1]) ?? void 0 : void 0
+            focusedInput === "end" ? dateFromISO(value[0]) : void 0,
+            focusedInput === "start" ? dateFromISO(value[1]) : void 0
           ]);
         }
       } else {
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : dateFromISO(value[0]) ?? void 0,
-            focusedInput === "end" ? date : dateFromISO(value[1]) ?? void 0
+            focusedInput === "start" ? date : dateFromISO(value[0]),
+            focusedInput === "end" ? date : dateFromISO(value[1])
           ]);
           this.localizeInputValues();
         }
@@ -533,15 +533,15 @@ class InputDatePicker extends LitElement {
     if (this.shouldFocusRangeStart() || this.rangeStartValueChangedByUser) {
       return;
     }
-    if (this.proximitySelectionDisabled && this.valueAsDate && this.valueAsDate[1] === null) {
+    if (this.proximitySelectionDisabled && Array.isArray(this.valueAsDate) && this.valueAsDate[1] === void 0) {
       return;
     }
     this.open = false;
     this.focusInput();
   }
   localizeInputValues() {
-    const date = dateFromRange(this.range ? Array.isArray(this.valueAsDate) && this.valueAsDate[0] || void 0 : this.valueAsDate, this.minAsDate, this.maxAsDate);
-    const endDate = this.range ? dateFromRange(Array.isArray(this.valueAsDate) && this.valueAsDate[1] || void 0, this.minAsDate, this.maxAsDate) : null;
+    const date = dateFromRange(this.range ? Array.isArray(this.valueAsDate) && this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    const endDate = this.range ? dateFromRange(Array.isArray(this.valueAsDate) && this.valueAsDate[1], this.minAsDate, this.maxAsDate) : void 0;
     this.setInputValue((date && this.dateTimeFormat?.format(date)) ?? "", "start");
     this.setInputValue(this.range && endDate && this.dateTimeFormat?.format(endDate) || "", "end");
   }
@@ -602,7 +602,7 @@ class InputDatePicker extends LitElement {
       return;
     }
     this.userChangedValue = true;
-    this.valueAsDate = newValue ? dateFromISO(newValue) ?? void 0 : void 0;
+    this.valueAsDate = newValue ? dateFromISO(newValue) : void 0;
     this.value = newValue || "";
     const changeEvent = this.calciteInputDatePickerChange.emit();
     if (changeEvent.defaultPrevented) {

package/dist/components/calcite-input-time-picker/customElement.js

@@ -329,19 +329,19 @@ class InputTimePicker extends LitElement {
     })} role=combobox ${ref(this.containerRef)}><calcite-icon class=${safeClassMap(CSS.clockIcon)} .icon=${ICONS.clock} .scale=${scale === "l" ? "m" : "s"}></calcite-icon><div class=${safeClassMap(CSS.contentContainer)}>${this.showPlaceholder && html`<div class=${safeClassMap(CSS.placeholder)}>${this.placeholder}</div>` || ""}<div aria-label=${getLabelText(this) ?? nothing} .ariaRequired=${this.required} class=${safeClassMap({
       [CSS.inputContainer]: true,
       [CSS.inputContainerHidden]: this.showPlaceholder
-    })} dir=ltr id=${IDS.inputContainer} role=group>${showMeridiem && meridiemStart && this.renderMeridiem() || ""}<span aria-label=${this.messages.hour ?? nothing} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(hourIsNumber && parseInt(hour) || "0") ?? nothing} aria-valuetext=${hour ?? nothing} class=${safeClassMap({
+    })} dir=ltr id=${IDS.inputContainer} role=group>${showMeridiem && meridiemStart && this.renderMeridiem() || ""}<span aria-label=${this.messages.hour ?? nothing} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(hourIsNumber && parseInt(hour, 10) || "0") ?? nothing} aria-valuetext=${hour ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedHour,
       [CSS.hour]: true,
       [CSS.input]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleHourKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || emptyPlaceholder}</span><span class=${safeClassMap(CSS.hourSuffix)}>${localizedHourSuffix}</span><span aria-label=${this.messages.minute ?? nothing} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(minuteIsNumber && parseInt(minute) || "0") ?? nothing} aria-valuetext=${minute ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleHourKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || emptyPlaceholder}</span><span class=${safeClassMap(CSS.hourSuffix)}>${localizedHourSuffix}</span><span aria-label=${this.messages.minute ?? nothing} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(minuteIsNumber && parseInt(minute, 10) || "0") ?? nothing} aria-valuetext=${minute ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedMinute,
       [CSS.input]: true,
       [CSS.minute]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMinuteKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || emptyPlaceholder}</span><span class=${safeClassMap(CSS.minuteSuffix)}>${localizedMinuteSuffix}</span>${showSecond && html`<span aria-label=${this.messages.second ?? nothing} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(secondIsNumber && parseInt(second) || "0") ?? nothing} aria-valuetext=${second ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMinuteKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || emptyPlaceholder}</span><span class=${safeClassMap(CSS.minuteSuffix)}>${localizedMinuteSuffix}</span>${showSecond && html`<span aria-label=${this.messages.second ?? nothing} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(secondIsNumber && parseInt(second, 10) || "0") ?? nothing} aria-valuetext=${second ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedSecond,
       [CSS.input]: true,
       [CSS.second]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || emptyPlaceholder}</span>` || ""}${showFractionalSecond && html`<span class=${safeClassMap(CSS.decimalSeparator)}>${localizedDecimalSeparator}</span>` || ""}${showFractionalSecond && html`<span aria-label=${this.messages.fractionalSecond ?? nothing} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(fractionalSecondIsNumber && parseInt(fractionalSecond) || "0") ?? nothing} aria-valuetext=${localizedFractionalSecond ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || emptyPlaceholder}</span>` || ""}${showFractionalSecond && html`<span class=${safeClassMap(CSS.decimalSeparator)}>${localizedDecimalSeparator}</span>` || ""}${showFractionalSecond && html`<span aria-label=${this.messages.fractionalSecond ?? nothing} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(fractionalSecondIsNumber && parseInt(fractionalSecond, 10) || "0") ?? nothing} aria-valuetext=${localizedFractionalSecond ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedFractionalSecond,
       [CSS.fractionalSecond]: true,
       [CSS.input]: true

package/dist/components/calcite-input-time-zone/customElement.js

@@ -81,8 +81,8 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
         if (timeZoneA.startsWith(gmtTimeZoneString) && timeZoneB.startsWith(gmtTimeZoneString)) {
           const offsetStringA = timeZoneA.substring(gmtTimeZoneString.length);
           const offsetStringB = timeZoneB.substring(gmtTimeZoneString.length);
-          const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA);
-          const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB);
+          const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA, 10);
+          const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB, 10);
           return offsetB - offsetA;
         }
         return labeledTimeZoneA.localeCompare(labeledTimeZoneB);

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

@@ -187,7 +187,7 @@ class Pagination extends LitElement {
   }
   handlePageClick(event) {
     const target = event.target;
-    this.startItem = parseInt(target.value);
+    this.startItem = parseInt(target.value, 10);
     this.emitUpdate();
   }
   renderEllipsis(type) {

package/dist/components/calcite-tab-nav/customElement.js

@@ -33,12 +33,13 @@ class TabNav extends LitElement {
     this.resizeObserver = createObserver("resize", () => {
       this.updateScrollingState();
     });
-    this.makeFirstVisibleTabClosable = false;
     this.messages = useT9n();
     this.hasOverflowingEndTabTitle = false;
     this.hasOverflowingStartTabTitle = false;
+    this.hasVisibleTabTitles = true;
     this.bordered = false;
     this.layout = "inline";
+    this.lastTabClosable = false;
     this.position = "bottom";
     this.scale = "m";
     this.selectedTitle = null;
@@ -49,13 +50,14 @@ class TabNav extends LitElement {
     this.listen("calciteInternalTabsFocusNext", this.focusNextTabHandler);
     this.listen("calciteInternalTabsFocusFirst", this.focusFirstTabHandler);
     this.listen("calciteInternalTabsFocusLast", this.focusLastTabHandler);
+    this.listen("calciteInternalTabTitleCloseChange", this.syncVisibleTabTitlesState);
     this.listen("calciteInternalTabTitleRegister", this.updateTabTitles);
     this.listen("calciteInternalTabsActivate", this.internalActivateTabHandler);
     this.listen("calciteInternalTabsClose", this.internalCloseTabHandler);
     this.listenOn(document.body, "calciteInternalTabChange", this.globalInternalTabChangeHandler);
   }
   static {
-    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
+    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], hasVisibleTabTitles: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -76,7 +78,7 @@ class TabNav extends LitElement {
     }
   }
   willUpdate(changes) {
-    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null)) {
+    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null) && this.selectedTabId !== void 0) {
       this.calciteInternalTabChange.emit({
         tab: this.selectedTabId
       });
@@ -84,6 +86,9 @@ class TabNav extends LitElement {
     if (changes.has("selectedTabId")) {
       this.selectedTabIdChanged();
     }
+    if (changes.has("lastTabClosable") && this.hasUpdated) {
+      this.updateLastVisibleTabClosable();
+    }
     const { parentTabsEl } = this;
     if (parentTabsEl) {
       this.layout = parentTabsEl.layout;
@@ -93,7 +98,7 @@ class TabNav extends LitElement {
   }
   loaded() {
     this.scrollTabTitleIntoView(this.selectedTitle, "instant");
-    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && !this.selectedTabId) {
+    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && this.selectedTabId === void 0) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
         this.calciteInternalTabChange.emit({
           tab
@@ -110,7 +115,7 @@ class TabNav extends LitElement {
   }
   get scrollerButtonWidth() {
     const { scale } = this;
-    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
+    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44, 10);
   }
   get tabTitles() {
     return filterDirectChildren(this.el, "calcite-tab-title");
@@ -169,6 +174,7 @@ class TabNav extends LitElement {
       this.selectedTabId = event.detail;
       this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
+    this.syncVisibleTabTitlesState();
   }
   globalInternalTabChangeHandler(event) {
     if (this.syncId && event.target !== this.el && event.target.syncId === this.syncId && this.selectedTabId !== event.detail.tab) {
@@ -178,7 +184,10 @@ class TabNav extends LitElement {
   }
   async selectedTabIdChanged() {
     await this.componentOnReady();
-    if (localStorage && this.storageId && this.selectedTabId !== void 0 && this.selectedTabId !== null) {
+    if (this.selectedTabId === void 0) {
+      return;
+    }
+    if (localStorage && this.storageId) {
       localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
     this.calciteInternalTabChange.emit({
@@ -209,13 +218,33 @@ class TabNav extends LitElement {
     tabTitles.forEach((child) => {
       this.intersectionObserver?.observe(child);
     });
+    this.syncVisibleTabTitlesState();
+  }
+  syncVisibleTabTitlesState() {
+    this.updateLastVisibleTabClosable();
+    this.hasVisibleTabTitles = this.getVisibleTabTitlesIndices(this.tabTitles).length > 0;
+    this.calciteInternalTabNavSlotChange.emit([...this.tabTitles]);
+  }
+  updateLastVisibleTabClosable() {
+    const { tabTitles } = this;
     const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
     const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles > 1 && this.makeFirstVisibleTabClosable) {
-      tabTitles[visibleTabTitlesIndices[0]].closable = true;
-      this.makeFirstVisibleTabClosable = false;
+    if (totalVisibleTabTitles === 0) {
+      return;
+    }
+    const firstVisibleTabTitle = tabTitles[visibleTabTitlesIndices[0]];
+    const shouldDisableCloseButton = !this.lastTabClosable && totalVisibleTabTitles === 1;
+    if (shouldDisableCloseButton) {
+      if (firstVisibleTabTitle.closable) {
+        this.firstVisibleTabMadeNonClosable = firstVisibleTabTitle;
+        firstVisibleTabTitle.closable = false;
+      }
+      return;
+    }
+    if (this.firstVisibleTabMadeNonClosable && !this.firstVisibleTabMadeNonClosable.closed) {
+      this.firstVisibleTabMadeNonClosable.closable = true;
     }
-    this.calciteInternalTabNavSlotChange.emit(tabTitles);
+    this.firstVisibleTabMadeNonClosable = void 0;
   }
   setTabTitleContainerEl(el) {
     this.tabTitleContainerEl = el;
@@ -334,26 +363,35 @@ class TabNav extends LitElement {
   }
   handleTabTitleClose(closedTabTitleEl) {
     const { tabTitles } = this;
+    const visibleTabTitles = tabTitles.filter((tabTitle) => !tabTitle.closed);
+    const enabledVisibleTabTitles = this.enabledTabTitles;
+    const totalVisibleTabTitles = visibleTabTitles.length;
     const selectionModified = closedTabTitleEl.selected;
-    const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
-    const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
-      this.makeFirstVisibleTabClosable = true;
-      tabTitles[visibleTabTitlesIndices[0]].closable = false;
-      this.selectedTabId = visibleTabTitlesIndices[0];
-      if (selectionModified) {
-        tabTitles[visibleTabTitlesIndices[0]].activateTab();
-      }
-    } else if (totalVisibleTabTitles > 1) {
+    this.hasVisibleTabTitles = totalVisibleTabTitles > 0;
+    this.calciteInternalTabNavSlotChange.emit([...tabTitles]);
+    if (totalVisibleTabTitles === 0) {
+      this.selectedTitle = null;
+      this.selectedTabId = void 0;
+      return;
+    }
+    if (selectionModified) {
       const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
-      const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
-      if (this.selectedTabId === closedTabTitleIndex) {
-        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
-        tabTitles[this.selectedTabId].activateTab();
+      const nextVisibleTabTitle = enabledVisibleTabTitles.find((tabTitle) => tabTitles.indexOf(tabTitle) > closedTabTitleIndex) || enabledVisibleTabTitles.at(-1);
+      if (!nextVisibleTabTitle) {
+        this.selectedTitle = null;
+        this.selectedTabId = void 0;
+        this.updateLastVisibleTabClosable();
+        return;
       }
+      nextVisibleTabTitle.activateTab();
     }
+    this.updateLastVisibleTabClosable();
     requestAnimationFrame(() => {
-      focusElement(tabTitles[this.selectedTabId]);
+      const selectedTitle = this.selectedTitle;
+      if (!selectedTitle) {
+        return;
+      }
+      focusElement(selectedTitle);
     });
   }
   render() {
@@ -363,7 +401,7 @@ class TabNav extends LitElement {
       [CSS.scale(this.scale)]: true,
       [CSS.position(this.position)]: true,
       [CSS_UTILITY.rtl]: this.effectiveDir === "rtl"
-    })}><div class=${safeClassMap({
+    })} .hidden=${!this.hasVisibleTabTitles}><div class=${safeClassMap({
       [CSS.tabTitleSlotWrapper]: true
     })} @scroll=${this.onTabTitleScroll} @wheel=${this.onTabTitleWheel} ${ref(this.setTabTitleContainerEl)}><slot @slotchange=${this.onSlotChange}></slot></div><div class=${safeClassMap(CSS.scrollButtonContainer)} .hidden=${!this.hasOverflowingEndTabTitle && !this.hasOverflowingStartTabTitle}>${this.renderScrollButton("start")}${this.renderScrollButton("end")}</div></div>`;
   }

package/dist/components/calcite-tab-title/customElement.js

@@ -54,6 +54,7 @@ class TabTitle extends LitElement {
     this.selected = false;
     this.calciteInternalTabIconChanged = createEvent({ cancelable: false });
     this.calciteInternalTabTitleRegister = createEvent({ cancelable: false });
+    this.calciteInternalTabTitleCloseChange = createEvent({ cancelable: false });
     this.calciteInternalTabsActivate = createEvent({ cancelable: false });
     this.calciteInternalTabsClose = createEvent({ cancelable: false });
     this.calciteInternalTabsFocusFirst = createEvent({ cancelable: false });
@@ -108,6 +109,9 @@ class TabTitle extends LitElement {
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
       this.selectedHandler();
     }
+    if (changes.has("closed") && this.hasUpdated) {
+      this.calciteInternalTabTitleCloseChange.emit();
+    }
     if (this.parentTabsEl) {
       this.layout = this.parentTabsEl.layout;
       this.bordered = this.parentTabsEl.bordered;