dap-design-system 0.53.17 → 0.53.18

package/dist/common/types.d.ts

@@ -89,3 +89,4 @@ export interface TimePreset {
 }
 export type CloseSource = 'cancel-button' | 'close-button' | 'esc' | 'ok-button' | 'overlay';
 export type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
+export type TabNavigationMode = 'group' | 'items';

package/dist/components/navigation-menu/navigation-menu-item.component.d.ts

@@ -1,4 +1,4 @@
-import { FloatingStrategy, LinkTarget, PopupPlacement } from '../../common/types';
+import { FloatingStrategy, LinkTarget, PopupPlacement, TabNavigationMode } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
 import { SubmenuController } from './submenu-controller';
 declare const DapDSNavigationMenuItem_base: typeof DdsElement & {
@@ -38,6 +38,7 @@ declare const DapDSNavigationMenuItem_base: typeof DdsElement & {
  * @property {string} rel - The rel attribute for link security and behavior.
  * @property {number} level - The nesting level of this navigation item (0 = top-level, automatically set for nested items). Default is 0.
  * @property {'horizontal' | 'vertical'} orientation - The orientation of the parent navigation menu (automatically inherited). Default is 'horizontal'.
+ * @property {'group' | 'items'} tabMode - Controls how Tab key navigates through top-level items. Default is 'group'.
  *
  * @event {{ href: string, event: Event }} dds-navigation-item-click - Fired when a navigation item is clicked.
  * @event {{ item: DapDSNavigationMenuItem }} dds-navigation-dropdown-open - Fired when a navigation dropdown is opened.
@@ -130,9 +131,12 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
     level: number;
     /** The orientation of the parent navigation menu. */
     orientation: 'horizontal' | 'vertical';
+    /** Controls tab key behavior (propagated from parent navigation menu). */
+    tabMode: TabNavigationMode;
     hasContent: boolean;
     private hasLink;
     private hasTitleSlot;
+    private _titleText;
     private active;
     private openedByHover;
     private _isRovingActive;

package/dist/components/navigation-menu/navigation-menu.component.d.ts

@@ -1,3 +1,4 @@
+import { TabNavigationMode } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
 import { default as DapDSNavigationMenuItem } from './navigation-menu-item.component';
 /**
@@ -13,6 +14,7 @@ import { default as DapDSNavigationMenuItem } from './navigation-menu-item.compo
  * @property {'horizontal' | 'vertical'} orientation - The orientation of the navigation menu. Default is 'horizontal'.
  * @property {boolean} fullWidth - Whether the navigation menu should take full width of the screen. Default is false.
  * @property {boolean} allowMultipleOpen - Whether multiple dropdown branches can stay open simultaneously (accordion mode). Default is true.
+ * @property {'group' | 'items'} tabMode - Controls how Tab key navigates through top-level items. Default is 'group'. Group mode will have the first item in the tab order, and items mode will have all items in the tab order.
  *
  * @event {{ href: string, event: Event }} dds-navigation-item-click - Fired when a navigation item is clicked.
  *
@@ -42,6 +44,13 @@ export default class DapDSNavigationMenu extends DdsElement {
     fullWidth: boolean;
     /** Whether multiple dropdown branches can stay open simultaneously (accordion mode). */
     allowMultipleOpen: boolean;
+    /**
+     * Controls how Tab key navigates through top-level items.
+     * - 'group' (default): Roving tab index — only one item in the tab order, arrow keys move between items.
+     * - 'items': All top-level items have tabindex="0" — Tab moves through each item individually.
+     * @type {'group' | 'items'}
+     */
+    tabMode: TabNavigationMode;
     connectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
     firstUpdated(changedProperties: Map<string, unknown>): Promise<void>;
@@ -58,9 +67,9 @@ export default class DapDSNavigationMenu extends DdsElement {
      */
     getCurrentItem(): DapDSNavigationMenuItem | undefined;
     /**
-     * Sets the current menu item. Applies roving tabindex to the trigger elements so that only
-     * the active item's trigger is in the sequential tab order (tabindex="0"). All others get
-     * tabindex="-1" so a single Tab exits the entire navigation.
+     * Sets the current menu item. In 'group' mode (default), applies roving tabindex so only the
+     * active item's trigger is in the sequential tab order (tabindex="0"). In 'items' mode, all
+     * top-level items remain in the tab order — only the data-nav-current marker is updated.
      */
     setCurrentItem(item: DapDSNavigationMenuItem): void;
     private _updateChildFullWidth;
@@ -68,10 +77,23 @@ export default class DapDSNavigationMenu extends DdsElement {
     private _updateActiveHref;
     /** Recursively update orientation property for all navigation items. */
     private _updateOrientation;
+    /** Update tabMode property for all top-level navigation items. */
+    private _updateTabMode;
+    /**
+     * Applies tab behavior based on the current tabMode:
+     * - 'items': All top-level item triggers get tabindex="0".
+     * - 'group': Restore roving tabindex — only the current/first item gets tabindex="0".
+     */
+    private _applyTabMode;
     /** Helper method to recursively update properties on nested items. */
     private _updatePropertyRecursive;
     private _handleNavigationItemClick;
     private _handleDropdownOpen;
     private _handleSlotChange;
+    /**
+     * In `tabMode="items"`, keep `data-nav-current` in sync with the element that
+     * received focus so that arrow-key navigation always targets the right item.
+     */
+    private _handleFocusIn;
     render(): import('lit-html').TemplateResult;
 }