dap-design-system 0.53.2 → 0.53.4

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

@@ -277,6 +277,8 @@ export default class DapDSButton extends GenericFormElement {
     oklchPoc: boolean;
     /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */
     targetBlankText: string;
+    /** Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role="link" on a button acting as a SPA navigation trigger). */
+    forceRole?: string;
     static readonly styles: import('lit').CSSResult;
     private loadingTimer?;
     private getSecureRel;
@@ -285,6 +287,7 @@ export default class DapDSButton extends GenericFormElement {
     private validateProperties;
     private isValidUrl;
     private handleClick;
+    private handleKeyDown;
     private toggleHighContrast;
     private startLoadingTimeout;
     private clearLoadingTimeout;

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

@@ -1,4 +1,4 @@
-import { FloatingStrategy, PopupPlacement } from '../../common/types';
+import { FloatingStrategy, LinkTarget, PopupPlacement } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
 import { SubmenuController } from './submenu-controller';
 declare const DapDSNavigationMenuItem_base: typeof DdsElement & {
@@ -15,6 +15,7 @@ declare const DapDSNavigationMenuItem_base: typeof DdsElement & {
  * @title - Navigation Menu Item
  * @group navigation-menu
  *
+ * @property {string} label - The label text for the navigation item. This will be displayed in the title slot if no custom title slot content is provided.
  * @property {'xs' | 'sm' | 'lg'} size - The size of the popup. Default is 'sm'.
  * @property {boolean} disabled - The disabled state of the popup. Default is false.
  * @property {boolean} opened - The open state of the popup. Default is false.
@@ -32,6 +33,9 @@ declare const DapDSNavigationMenuItem_base: typeof DdsElement & {
  * @property {string} ariaLabelledBy - The name of the element that labels the navigation dropdown.
  * @property {string} activeHref - The href of the navigation item that is active (receives aria-current="page").
  * @property {string} baseHref - The href of the navigation item. If provided, the navigation item will be active if the href is a substring of the activeHref.
+ * @property {string} href - The href URL for the navigation item link. When provided, the default trigger renders as a link.
+ * @property {'_blank' | '_self' | '_parent' | '_top'} target - The target attribute for link navigation.
+ * @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'.
  *
@@ -41,6 +45,8 @@ declare const DapDSNavigationMenuItem_base: typeof DdsElement & {
  * @slot trigger - The trigger element (link, button, etc.) for this navigation item.
  * @slot title - The title of the navigation item.
  * @slot indicator - The expand indicator icon (defaults to arrow icon based on orientation and level).
+ * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.
+ *   Rendered outside the popup so it is always accessible to programmatic clicks.
  * @slot - The dropdown content (can contain nested dap-ds-navigation-menu-item elements).
  *
  * @csspart base - The base part of the navigation item.
@@ -112,22 +118,40 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
     baseHref?: string;
     /** Whether the navigation item should use exact href matching. */
     exactHref: boolean;
+    /** The href URL for the navigation item link. When provided, the default trigger renders as a link. */
+    href?: string;
+    /** The target attribute for link navigation. */
+    target?: LinkTarget;
+    /** The rel attribute for link security and behavior. */
+    rel?: string;
+    /** The label text for the navigation item, displayed in the title slot when no slot content is provided. */
+    label?: string;
     /** The nesting level of this navigation item (0 = top-level). */
     level: number;
     /** The orientation of the parent navigation menu. */
     orientation: 'horizontal' | 'vertical';
     hasContent: boolean;
+    private hasLink;
+    private hasTitleSlot;
     private active;
     private openedByHover;
+    private _isRovingActive;
     /** Computed property to detect if this item contains nested navigation menu items. */
     get hasNestedItems(): boolean;
     private get _trigger();
+    /** Get the element slotted into the `link` slot, if any. */
+    private _getLinkElement;
+    /** Handle slot change for the `link` slot. */
+    private _handleLinkSlotChange;
+    /** Handle slot change for the `title` slot. */
+    private _handleTitleSlotChange;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(changedProperties: Map<string, unknown>): Promise<void>;
     handleOpenedChange(): void;
     handleActiveHrefChange(): void;
+    handleHrefChange(): void;
     handleLayoutChange(): void;
     /** Update nested navigation menu items with current properties. */
     private _updateNestedItems;
@@ -153,6 +177,22 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
     /** Check if target is within any nested navigation menu items. */
     private _isWithinNestedItems;
     focus(): void;
+    /**
+     * Sets this item as the active (or inactive) roving tabindex target.
+     * Only the active item's trigger is in the sequential tab order (tabindex="0").
+     * All others are removed (tabindex="-1") so Tab exits the whole nav in one step.
+     */
+    setRovingTabIndex(active: boolean): void;
+    /** Apply tabindex to a trigger element and its shadow-root inner focusable element. */
+    private _applyTriggerTabIndex;
+    /** Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content). */
+    focusFirstDropdownChild(): void;
+    /** Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content). */
+    focusLastDropdownChild(): void;
+    /** Get all top-level focusable items inside the popup slot content (for mega menu arrow navigation). */
+    private _getFocusablePopupItems;
+    private _collectFocusableItems;
+    private _focusPopupItem;
     showDropDown(byHover?: boolean): Promise<void>;
     hideDropDown(): Promise<void>;
     /** Handle trigger slot change events. */

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

@@ -53,13 +53,14 @@ export default class DapDSNavigationMenu extends DdsElement {
     /** Gets all slotted menu items, ignoring disabled elements */
     getAllItems(): DapDSNavigationMenuItem[];
     /**
-     * Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+     * Gets the current menu item (the one marked with `data-nav-current`).
      * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
      */
     getCurrentItem(): DapDSNavigationMenuItem | undefined;
     /**
-     * Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
-     * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+     * 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.
      */
     setCurrentItem(item: DapDSNavigationMenuItem): void;
     private _updateChildFullWidth;