dap-design-system 0.53.16 → 0.53.18

package/dist/common/types.d.ts

@@ -88,3 +88,5 @@ export interface TimePreset {
     value: string;
 }
 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/accordion/accordion-base-element.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValueMap, TemplateResult } from 'lit';
+import { AccordionVariant } from '../../common/types';
 import { HeadingLevel, LabelPlacement } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
-export type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
 export interface AccordionEventDetail {
     open: boolean;
     item: AccordionBaseElement;

package/dist/components/accordion-group/accordion-group.component.d.ts

@@ -1,6 +1,6 @@
 import { PropertyValueMap } from 'lit';
+import { AccordionVariant } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
-import { AccordionVariant } from '../accordion/accordion-base-element';
 /**
  * `dap-ds-accordion-group` is a custom accordion group component.
  * @element dap-ds-accordion-group

package/dist/components/link/link.component.d.ts

@@ -9,6 +9,8 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @event {{ event: Event }} dds-click - Emitted when the link is clicked.
  *
  * @slot - The text of the link.
+ * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.
+ *   Rendered outside the visible link so it is always accessible to programmatic clicks.
  *
  * @csspart base - The main link container.
  * @csspart text - The text of the link.
@@ -89,6 +91,9 @@ export default class DapDSLink extends DdsElement {
     /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */
     targetBlankText: string;
     static readonly styles: import('lit').CSSResult;
+    private hasLink;
+    private _getLinkElement;
+    private _handleLinkSlotChange;
     private handleClick;
     focus(): void;
     render(): import('lit-html').TemplateResult;

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;
@@ -192,6 +196,7 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
     /** Get all top-level focusable items inside the popup slot content (for mega menu arrow navigation). */
     private _getFocusablePopupItems;
     private _collectFocusableItems;
+    private _activateFocusableItem;
     private _focusPopupItem;
     showDropDown(byHover?: boolean): Promise<void>;
     hideDropDown(): Promise<void>;

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;
 }