@fabric-msft/fabric-web 7.2.0 → 7.4.0

package/esm/components/dynamic-tab-list/dynamic-tab-list.js

@@ -0,0 +1,788 @@
+import { attr, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { createRovingFocusController } from '../../util/focus-management.js';
+import { DynamicTabListOrientations, DynamicTabListEventNames } from './dynamic-tab-list.options.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Dynamic Tab List
+ * @summary A structural container for dynamic tabs with public methods for tab management.
+ *
+ * @remarks
+ * This component provides structure, emits events, and offers public helper methods
+ * for common tab operations (close, closeOthers, closeToRight, etc.).
+ * Context menus should be implemented by the consumer using the native Popover API,
+ * listening to the `context-menu` event for positioning coordinates.
+ *
+ * @example
+ * ```html
+ * <fabric-dynamic-tab-list activeid="tab-1" show-managed-tabs>
+ *   <fabric-dynamic-tab id="tab-1" selected>Document.docx</fabric-dynamic-tab>
+ *   <fabric-dynamic-tab id="tab-2">Photo.png</fabric-dynamic-tab>
+ *   <button slot="actions">+</button>
+ *   <button slot="manage-tabs">☰</button>
+ * </fabric-dynamic-tab-list>
+ * ```
+ *
+ * @attr {string} activeid - The id of the currently active/selected tab.
+ * @attr {DynamicTabListOrientation} orientation - The layout orientation.
+ * @attr {boolean} show-managed-tabs - When true, renders built-in manage tabs menu.
+ * @attr {string} close-unmodified-label - Label for "Close unmodified tabs" menu item (i18n).
+ * @attr {string} close-all-label - Label for "Close all tabs" menu item (i18n).
+ *
+ * @slot - Container for fabric-dynamic-tab elements.
+ * @slot actions - Optional action buttons between tabs and manage-tabs button.
+ * @slot manage-tabs - Trigger button for manage tabs menu (used when show-managed-tabs is true).
+ *
+ * @csspart tabs-container - The scrollable container for tab elements.
+ * @csspart actions-container - The container for action buttons and manage-tabs.
+ *
+ * @fires tab-dismiss - Fires when a tab's dismiss button is clicked or closeTab() is called.
+ * @fires tab-select - Fires when a tab is selected.
+ * @fires context-menu - Fires when a tab is right-clicked. Detail includes { id, clientX, clientY }.
+ *
+ * @extends FASTElement
+ * @tagname fabric-dynamic-tab-list
+ * @public
+ */
+class DynamicTabList extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The layout orientation of the tab list.
+     * @public
+     * @remarks
+     * HTML Attribute: `orientation`
+     */
+    this.orientation = DynamicTabListOrientations.horizontal;
+    /**
+     * When true, renders a built-in manage tabs menu with "Close unmodified tabs",
+     * "Close all tabs" actions, and a list of all open tabs.
+     * @public
+     * @remarks
+     * HTML Attribute: `show-managed-tabs`
+     */
+    this.showManagedTabs = false;
+    /**
+     * Label for the "Close unmodified tabs" menu item.
+     * Override for i18n/localization.
+     * @public
+     * @remarks
+     * HTML Attribute: `close-unmodified-label`
+     */
+    this.closeUnmodifiedLabel = "";
+    /**
+     * Label for the "Close all tabs" menu item.
+     * Override for i18n/localization.
+     * @public
+     * @remarks
+     * HTML Attribute: `close-all-label`
+     */
+    this.closeAllLabel = "";
+    /**
+     * Label for the manage tabs button (accessibility).
+     * Override for i18n/localization.
+     * @public
+     * @remarks
+     * HTML Attribute: `manage-tabs-label`
+     */
+    this.manageTabsLabel = "";
+    /**
+     * The slotted tab elements.
+     * Exposed as public so consumers can access the tab list for their menu rendering.
+     * @public
+     */
+    this.tabs = [];
+    /**
+     * The ID of the tab that triggered the context menu.
+     * Exposed as public so consumers can access it for conditional menu rendering.
+     * @public
+     */
+    this.contextMenuTargetId = null;
+    /**
+     * Whether the context menu is currently open.
+     * @public
+     */
+    this.contextMenuOpen = false;
+    /**
+     * The X coordinate where the context menu was triggered.
+     * @public
+     */
+    this.contextMenuX = 0;
+    /**
+     * The Y coordinate where the context menu was triggered.
+     * @public
+     */
+    this.contextMenuY = 0;
+    /**
+     * Slotted manage-tabs trigger element(s).
+     * @internal
+     */
+    this.slottedManageTabsTrigger = [];
+    /**
+     * Whether the manage tabs menu is currently open.
+     * Used for aria-expanded on the trigger.
+     * @internal
+     */
+    this.manageTabsMenuOpen = false;
+    /**
+     * Reference to the manage-tabs-menu popover element.
+     * @internal
+     */
+    this.manageTabsMenuEl = null;
+    /**
+     * Roving focus controller for keyboard navigation.
+     * @internal
+     */
+    this.focusController = null;
+    /**
+     * Flag to track if activeid change is from user gesture.
+     * Used to prevent emitting tab-select on programmatic changes.
+     * @internal
+     */
+    this.isUserSelection = false;
+    /**
+     * Bound handler for manage tabs menu light dismiss.
+     * @internal
+     */
+    this.handleManageTabsLightDismiss = event => {
+      var _a, _b, _c, _d;
+      if (!this.manageTabsMenuEl) return;
+      const popover = this.manageTabsMenuEl;
+      // Check if popover is open
+      if (!((_a = popover.matches) === null || _a === void 0 ? void 0 : _a.call(popover, ":popover-open"))) return;
+      // Check if click is outside the menu
+      const target = event.target;
+      const clickedInMenu = this.manageTabsMenuEl.contains(target);
+      const clickedOnTrigger = (_c = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".manage-tabs-trigger")) === null || _c === void 0 ? void 0 : _c.contains(target);
+      if (!clickedInMenu && !clickedOnTrigger) {
+        (_d = popover.hidePopover) === null || _d === void 0 ? void 0 : _d.call(popover);
+        this.removeManageTabsMenuListeners();
+      }
+    };
+    /**
+     * Bound handler for manage tabs menu Escape key.
+     * @internal
+     */
+    this.handleManageTabsEscape = event => {
+      var _a, _b;
+      if (event.key === "Escape" && this.manageTabsMenuEl) {
+        const popover = this.manageTabsMenuEl;
+        if ((_a = popover.matches) === null || _a === void 0 ? void 0 : _a.call(popover, ":popover-open")) {
+          (_b = popover.hidePopover) === null || _b === void 0 ? void 0 : _b.call(popover);
+          this.removeManageTabsMenuListeners(true);
+        }
+      }
+    };
+  }
+  /**
+   * Whether the manage-tabs trigger should be interactive.
+   * True when the built-in menu is enabled or a custom trigger is slotted.
+   * @internal
+   */
+  get hasTrigger() {
+    return this.showManagedTabs || this.slottedManageTabsTrigger.length > 0;
+  }
+  /**
+   * Lifecycle callback - initialize focus controller.
+   * @internal
+   */
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    this.initializeFocusController();
+    // Get reference to manage-tabs-menu popover after DOM is ready
+    Updates.enqueue(() => {
+      var _a;
+      this.manageTabsMenuEl = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".manage-tabs-menu");
+    });
+    // Apply tabindex if tabs are already slotted
+    const tabElements = this.tabs.filter(node => node instanceof HTMLElement && node.tagName === "FABRIC-DYNAMIC-TAB");
+    if (tabElements.length > 0) {
+      (_a = this.focusController) === null || _a === void 0 ? void 0 : _a.applyTabindex();
+    }
+  }
+  /**
+   * Lifecycle callback - cleanup.
+   * @internal
+   */
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.focusController) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.focusController = null;
+    this.removeManageTabsMenuListeners();
+  }
+  /**
+   * Set up light dismiss listeners for manage tabs menu.
+   * @internal
+   */
+  setupManageTabsMenuListeners() {
+    document.addEventListener("click", this.handleManageTabsLightDismiss);
+    document.addEventListener("keydown", this.handleManageTabsEscape);
+  }
+  /**
+   * Remove light dismiss listeners for manage tabs menu.
+   * Optionally returns focus to the trigger button.
+   * @internal
+   */
+  removeManageTabsMenuListeners(restoreFocus = false) {
+    var _a;
+    this.manageTabsMenuOpen = false;
+    document.removeEventListener("click", this.handleManageTabsLightDismiss);
+    document.removeEventListener("keydown", this.handleManageTabsEscape);
+    if (restoreFocus) {
+      const trigger = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".manage-tabs-trigger");
+      trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+    }
+  }
+  /**
+   * Initialize the roving focus controller.
+   * @internal
+   */
+  initializeFocusController() {
+    this.focusController = createRovingFocusController({
+      // Filter to only actual DynamicTab elements (slot captures text nodes too)
+      items: () => this.tabs.filter(node => node instanceof HTMLElement && node.tagName === "FABRIC-DYNAMIC-TAB"),
+      isDisabled: el => {
+        const tab = el;
+        return tab.disabled === true;
+      },
+      orientation: this.orientation === DynamicTabListOrientations.vertical ? "vertical" : "horizontal",
+      enableHomeEnd: true,
+      wrap: false,
+      isRtl: () => this.matches(":dir(rtl)")
+      // Note: No onFocusChange callback - selection only happens via Enter/Space/Click
+    });
+  }
+  /**
+   * Called when tabs change.
+   * Filters to only DynamicTab elements (excludes text nodes and other elements).
+   * Reconciles activeid if the active tab was removed externally.
+   * @internal
+   */
+  tabsChanged() {
+    // Filter to only actual DynamicTab elements (slot captures text nodes too)
+    const tabElements = this.getTabElements();
+    // Reconcile activeid if active tab no longer exists
+    if (this.activeid) {
+      const activeTabExists = tabElements.some(tab => tab.id === this.activeid);
+      if (!activeTabExists && tabElements.length > 0) {
+        // Active tab was removed - select first available
+        this.activeid = tabElements[0].id;
+      } else if (!activeTabExists && tabElements.length === 0) {
+        this.activeid = undefined;
+      }
+    }
+    this.updateTabStates();
+    // Apply tabindex if we have valid tab elements and controller is ready
+    if (tabElements.length > 0 && this.focusController) {
+      this.focusController.applyTabindex();
+    }
+  }
+  /**
+   * Called when activeid changes.
+   * @internal
+   */
+  activeidChanged(oldValue, newValue) {
+    this.updateTabStates();
+    // Only emit tab-select for user-initiated changes, not programmatic ones
+    if (this.isUserSelection && oldValue !== newValue && newValue) {
+      this.emitTabSelect(newValue, oldValue !== null && oldValue !== void 0 ? oldValue : null);
+    }
+  }
+  /**
+   * Called when orientation changes - reinitialize focus controller.
+   * @internal
+   */
+  orientationChanged() {
+    if (this.focusController) {
+      this.focusController.destroy();
+      this.initializeFocusController();
+      this.focusController.applyTabindex();
+    }
+  }
+  /**
+   * Updates the selected state on all child tabs.
+   * @internal
+   */
+  updateTabStates() {
+    const tabElements = this.getTabElements();
+    const total = tabElements.length;
+    tabElements.forEach((tab, index) => {
+      tab.selected = tab.id === this.activeid;
+      // Set position attributes for screen readers
+      tab.setAttribute("aria-posinset", String(index + 1));
+      tab.setAttribute("aria-setsize", String(total));
+    });
+  }
+  /**
+   * Handles tab dismiss events from child tabs.
+   * Manages focus transfer and re-emits the event with index for consumer handling.
+   * @internal
+   */
+  handleTabDismiss(event) {
+    var _a, _b;
+    // Verify event came from a dynamic tab
+    const sourceTab = event.composedPath().find(el => el instanceof HTMLElement && el.tagName === "FABRIC-DYNAMIC-TAB");
+    if (!sourceTab) return;
+    const {
+      id
+    } = event.detail;
+    const tabElements = this.getTabElements();
+    const index = tabElements.findIndex(tab => tab.id === id);
+    if (index === -1) return;
+    const tab = tabElements[index];
+    const hadFocus = tab.matches(":focus") || tab.contains(document.activeElement);
+    // If the tab had focus, move focus to next tab BEFORE consumer removes it
+    if (hadFocus) {
+      const remainingTabs = tabElements.filter(t => t.id !== id);
+      if (remainingTabs.length > 0) {
+        const focusIndex = Math.min(index, remainingTabs.length - 1);
+        (_a = remainingTabs[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this.focusController) === null || _b === void 0 ? void 0 : _b.sync(remainingTabs[focusIndex]);
+      }
+    }
+    this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+      detail: {
+        id,
+        index
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Handles tab select events from child tabs.
+   * @internal
+   */
+  handleTabSelect(event) {
+    var _a;
+    // Verify event came from a dynamic tab
+    const tab = event.composedPath().find(el => el instanceof HTMLElement && el.tagName === "FABRIC-DYNAMIC-TAB");
+    if (!tab) return;
+    const {
+      id
+    } = event.detail;
+    if (id !== this.activeid) {
+      // Mark this as a user-initiated change
+      this.isUserSelection = true;
+      this.activeid = id;
+      this.isUserSelection = false;
+    }
+    // Sync focus controller to the actual tab element
+    (_a = this.focusController) === null || _a === void 0 ? void 0 : _a.sync(tab);
+  }
+  /**
+   * Handles right-click on tabs.
+   * Emits context-menu event with tab ID and cursor coordinates.
+   * Consumer implements their own context menu using native Popover API.
+   * @internal
+   */
+  handleTabContextMenu(event) {
+    const target = event.target;
+    const tab = target.closest("fabric-dynamic-tab");
+    // Not on a tab - let native context menu work
+    if (!tab) return true;
+    // Prevent native context menu
+    event.preventDefault();
+    // Store target and position for getContextMenuTab()
+    this.contextMenuTargetId = tab.id;
+    this.contextMenuOpen = true;
+    this.contextMenuX = event.clientX;
+    this.contextMenuY = event.clientY;
+    // Emit event with coordinates so consumer can position their menu
+    this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["context-menu"], {
+      detail: {
+        id: tab.id,
+        clientX: event.clientX,
+        clientY: event.clientY
+      },
+      bubbles: true,
+      composed: true
+    }));
+    return false; // We handled it
+  }
+  /**
+   * Handles keyboard navigation using roving focus controller.
+   * @internal
+   */
+  handleKeydown(event) {
+    var _a;
+    // Let the focus controller handle arrow keys, Home, End
+    if ((_a = this.focusController) === null || _a === void 0 ? void 0 : _a.handleKeydown(event)) {
+      return false;
+    }
+    return true; // Let unhandled events (like Tab) continue
+  }
+  /**
+   * Handles focusin events to sync the focus controller.
+   * @internal
+   */
+  handleFocusin(event) {
+    var _a;
+    // Find the actual tab element from composedPath
+    const tab = event.composedPath().find(el => el instanceof HTMLElement && el.tagName === "FABRIC-DYNAMIC-TAB");
+    if (tab) {
+      (_a = this.focusController) === null || _a === void 0 ? void 0 : _a.sync(tab);
+    }
+  }
+  /**
+   * Emits the tab-select event.
+   * @internal
+   */
+  emitTabSelect(id, previousId) {
+    this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-select"], {
+      detail: {
+        id,
+        previousId
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Gets the tab that triggered the context menu.
+   * Useful for consumers to render menu items based on tab state.
+   * @public
+   */
+  getContextMenuTab() {
+    var _a;
+    if (!this.contextMenuTargetId) return null;
+    return (_a = this.tabs.find(tab => tab.id === this.contextMenuTargetId)) !== null && _a !== void 0 ? _a : null;
+  }
+  /**
+   * Clears the context menu target ID and state.
+   * Call this when closing your context menu to reset state.
+   * @public
+   */
+  clearContextMenuTarget() {
+    this.contextMenuTargetId = null;
+    this.contextMenuOpen = false;
+  }
+  /**
+   * Closes the context menu and resets all context menu state.
+   * @public
+   */
+  closeContextMenu() {
+    this.contextMenuOpen = false;
+    this.contextMenuTargetId = null;
+    this.contextMenuX = 0;
+    this.contextMenuY = 0;
+  }
+  /**
+   * Toggles the manage tabs menu popover.
+   * @public
+   */
+  toggleManageTabsMenu() {
+    var _a, _b, _c;
+    if (!this.manageTabsMenuEl) {
+      // No popover element - just toggle the state directly
+      this.manageTabsMenuOpen = !this.manageTabsMenuOpen;
+      return;
+    }
+    const popover = this.manageTabsMenuEl;
+    if ((_a = popover.matches) === null || _a === void 0 ? void 0 : _a.call(popover, ":popover-open")) {
+      (_b = popover.hidePopover) === null || _b === void 0 ? void 0 : _b.call(popover);
+      this.manageTabsMenuOpen = false;
+      this.removeManageTabsMenuListeners(true);
+    } else {
+      (_c = popover.showPopover) === null || _c === void 0 ? void 0 : _c.call(popover);
+      this.manageTabsMenuOpen = true;
+      // Delay adding listeners to avoid immediately closing from current click
+      requestAnimationFrame(() => {
+        var _a;
+        this.setupManageTabsMenuListeners();
+        // Move focus into the first menu item for keyboard accessibility
+        const firstItem = (_a = this.manageTabsMenuEl) === null || _a === void 0 ? void 0 : _a.querySelector("fabric-menu-item");
+        firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+      });
+    }
+  }
+  /**
+   * Closes the manage tabs menu.
+   * @public
+   */
+  closeManageTabsMenu() {
+    this.manageTabsMenuOpen = false;
+    this.closeManageTabsMenuInternal();
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Public Tab Management Methods
+  // These methods emit events for the consumer to handle DOM removal.
+  // The component does NOT mutate light DOM directly.
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * Requests closing a tab by ID.
+   * Emits `tab-dismiss` event for the consumer to handle DOM removal.
+   * If the tab had focus, moves focus to an adjacent tab.
+   * @param id - The ID of the tab to close
+   * @public
+   */
+  closeTab(id) {
+    var _a, _b;
+    const tabElements = this.getTabElements();
+    const tabIndex = tabElements.findIndex(tab => tab.id === id);
+    if (tabIndex === -1) return;
+    const tab = tabElements[tabIndex];
+    const hadFocus = tab.matches(":focus") || tab.contains(document.activeElement);
+    // If the tab had focus, move focus to next tab
+    if (hadFocus) {
+      const remainingTabs = tabElements.filter(t => t.id !== id);
+      if (remainingTabs.length > 0) {
+        const focusIndex = Math.min(tabIndex, remainingTabs.length - 1);
+        (_a = remainingTabs[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this.focusController) === null || _b === void 0 ? void 0 : _b.sync(remainingTabs[focusIndex]);
+      }
+    }
+    // Emit tab-dismiss event for consumer to handle removal
+    this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+      detail: {
+        id,
+        index: tabIndex
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Requests closing all tabs except the specified one.
+   * Emits `tab-dismiss` events for each tab to close.
+   * @param id - The ID of the tab to keep open
+   * @public
+   */
+  closeOtherTabs(id) {
+    const tabElements = this.getTabElements();
+    const tabsToClose = tabElements.filter(tab => tab.id !== id);
+    // Emit dismiss event for each tab
+    tabsToClose.forEach(tab => {
+      const originalIndex = tabElements.findIndex(t => t.id === tab.id);
+      this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+        detail: {
+          id: tab.id,
+          index: originalIndex
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+  /**
+   * Requests closing all tabs to the right of the specified tab.
+   * Emits `tab-dismiss` events for each tab to close.
+   * @param id - The ID of the anchor tab
+   * @public
+   */
+  closeTabsToRight(id) {
+    const tabElements = this.getTabElements();
+    const tabIndex = tabElements.findIndex(tab => tab.id === id);
+    if (tabIndex === -1) return;
+    const tabsToClose = tabElements.slice(tabIndex + 1);
+    // Emit dismiss event for each tab (in reverse order for stable indices)
+    [...tabsToClose].reverse().forEach(tab => {
+      const originalIndex = tabElements.findIndex(t => t.id === tab.id);
+      this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+        detail: {
+          id: tab.id,
+          index: originalIndex
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+  /**
+   * Requests closing all tabs to the left of the specified tab.
+   * Emits `tab-dismiss` events for each tab to close.
+   * @param id - The ID of the anchor tab
+   * @public
+   */
+  closeTabsToLeft(id) {
+    const tabElements = this.getTabElements();
+    const tabIndex = tabElements.findIndex(tab => tab.id === id);
+    if (tabIndex === -1) return;
+    const tabsToClose = tabElements.slice(0, tabIndex);
+    // Emit dismiss event for each tab (in reverse order for stable indices)
+    [...tabsToClose].reverse().forEach(tab => {
+      const originalIndex = tabElements.findIndex(t => t.id === tab.id);
+      this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+        detail: {
+          id: tab.id,
+          index: originalIndex
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+  /**
+   * Requests closing all tabs.
+   * Emits `tab-dismiss` events for each tab.
+   * @public
+   */
+  closeAllTabs() {
+    const tabElements = this.getTabElements();
+    // Emit dismiss event for each tab (in reverse order for stable indices)
+    [...tabElements].reverse().forEach(tab => {
+      const originalIndex = tabElements.findIndex(t => t.id === tab.id);
+      this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+        detail: {
+          id: tab.id,
+          index: originalIndex
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+  /**
+   * Selects the next available tab after a tab is closed.
+   * Prefers the tab at the same index, then previous tabs.
+   * @param closedIndex - The index of the tab that was closed
+   * @internal
+   */
+  selectNextAvailableTab(closedIndex) {
+    // tabs array will be updated after DOM mutation, but we need to calculate now
+    // Get remaining tabs (excluding the one being removed)
+    const remainingTabs = this.tabs.filter((_, i) => i !== closedIndex);
+    if (remainingTabs.length === 0) {
+      this.activeid = undefined;
+      return;
+    }
+    // Try to select tab at same position, or previous if at end
+    const newIndex = Math.min(closedIndex, remainingTabs.length - 1);
+    const newActiveTab = remainingTabs[newIndex];
+    if (newActiveTab) {
+      this.activeid = newActiveTab.id;
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Built-in Manage Tabs Menu Methods
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * Requests closing all tabs that are not marked as modified.
+   * Emits `tab-dismiss` events for each unmodified tab.
+   * Tabs with `modified === true` are preserved.
+   * @public
+   */
+  closeUnmodifiedTabs() {
+    const tabElements = this.getTabElements();
+    const unmodifiedTabs = tabElements.filter(tab => !tab.modified);
+    // Emit dismiss event for each unmodified tab (in reverse order for stable indices)
+    [...unmodifiedTabs].reverse().forEach(tab => {
+      const originalIndex = tabElements.findIndex(t => t.id === tab.id);
+      this.dispatchEvent(new CustomEvent(DynamicTabListEventNames["tab-dismiss"], {
+        detail: {
+          id: tab.id,
+          index: originalIndex
+        },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    // Close the menu after action
+    this.closeManageTabsMenuInternal();
+  }
+  /**
+   * Selects a tab from the manage tabs menu, focuses it, and closes the menu.
+   * @param tab - The tab to select
+   * @internal
+   */
+  selectTabFromManageMenu(tab) {
+    var _a;
+    // Mark as user selection to emit tab-select event
+    this.isUserSelection = true;
+    this.activeid = tab.id;
+    this.isUserSelection = false;
+    // Focus the tab and sync roving focus controller
+    tab.focus();
+    (_a = this.focusController) === null || _a === void 0 ? void 0 : _a.sync(tab);
+    // Close the menu without restoring focus to trigger (focus goes to the tab)
+    this.closeManageTabsMenuInternal(false);
+  }
+  /**
+   * Closes the manage tabs menu popover and cleans up listeners.
+   * Used internally by built-in menu actions.
+   * @param restoreFocus - When true, returns focus to the trigger button.
+   * @internal
+   */
+  closeManageTabsMenuInternal(restoreFocus = true) {
+    var _a;
+    if (!this.manageTabsMenuEl) return;
+    const popover = this.manageTabsMenuEl;
+    (_a = popover.hidePopover) === null || _a === void 0 ? void 0 : _a.call(popover);
+    this.removeManageTabsMenuListeners(restoreFocus);
+  }
+  /**
+   * Gets the display label for a tab in the manage tabs menu.
+   * Reads only the default slot's assigned content for a clean label,
+   * excluding named-slot content (icons, dismiss-icon) and shadow DOM text (hint spans).
+   * Falls back through: default slot text → aria-label → id
+   * @param tab - The tab to get the label for
+   * @returns The display label string
+   * @internal
+   */
+  getTabDisplayLabel(tab) {
+    var _a;
+    const defaultSlot = (_a = tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("slot:not([name])");
+    if (defaultSlot) {
+      const slotText = defaultSlot.assignedNodes({
+        flatten: true
+      }).map(node => {
+        var _a;
+        return (_a = node.textContent) !== null && _a !== void 0 ? _a : "";
+      }).join("").trim();
+      if (slotText) return slotText;
+    }
+    const ariaLabel = tab.getAttribute("aria-label");
+    if (ariaLabel) return ariaLabel;
+    return tab.id;
+  }
+  /**
+   * Gets the filtered array of DynamicTab elements from the tabs slot.
+   * Filters out text nodes and non-tab elements.
+   * @returns Array of DynamicTab elements
+   * @public
+   */
+  getTabElements() {
+    return this.tabs.filter(node => node instanceof HTMLElement && node.tagName === "FABRIC-DYNAMIC-TAB");
+  }
+  /**
+   * Handles "Close all tabs" action from the built-in menu.
+   * Closes all tabs and then closes the menu.
+   * @internal
+   */
+  handleCloseAllFromMenu() {
+    this.closeAllTabs();
+    this.closeManageTabsMenuInternal();
+  }
+}
+__decorate([attr], DynamicTabList.prototype, "activeid", void 0);
+__decorate([attr], DynamicTabList.prototype, "orientation", void 0);
+__decorate([attr({
+  mode: "boolean",
+  attribute: "show-managed-tabs"
+})], DynamicTabList.prototype, "showManagedTabs", void 0);
+__decorate([attr({
+  attribute: "close-unmodified-label"
+})], DynamicTabList.prototype, "closeUnmodifiedLabel", void 0);
+__decorate([attr({
+  attribute: "close-all-label"
+})], DynamicTabList.prototype, "closeAllLabel", void 0);
+__decorate([attr({
+  attribute: "manage-tabs-label"
+})], DynamicTabList.prototype, "manageTabsLabel", void 0);
+__decorate([observable], DynamicTabList.prototype, "tabs", void 0);
+__decorate([observable], DynamicTabList.prototype, "contextMenuTargetId", void 0);
+__decorate([observable], DynamicTabList.prototype, "contextMenuOpen", void 0);
+__decorate([observable], DynamicTabList.prototype, "contextMenuX", void 0);
+__decorate([observable], DynamicTabList.prototype, "contextMenuY", void 0);
+__decorate([observable], DynamicTabList.prototype, "slottedManageTabsTrigger", void 0);
+__decorate([observable], DynamicTabList.prototype, "manageTabsMenuOpen", void 0);
+
+export { DynamicTabList };