@ds-mo/ui 2.2.1 → 2.4.0

package/src/wc/components/AppShell/AppShell.tsx

@@ -1,5 +1,10 @@
-import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
+import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
+import {
+  isEditableShortcutTarget,
+  resolveShellShortcut,
+} from '../../nav/shell-shortcuts';
+import type { PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import {
   CHROME_TRANSITION_END,
   CHROME_TRANSITION_START,
@@ -48,6 +53,9 @@ export class AppShell {
    */
   @Prop() gradientSrc: string = '';
 
+  /** When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer. */
+  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;
+
   @Element() el!: HTMLElement;
 
   private resizeObserver: ResizeObserver | null = null;
@@ -242,6 +250,35 @@ export class AppShell {
     return this.gradient || this.grid;
   }
 
+  @Listen('keydown', { target: 'window', capture: true })
+  handleWindowKeyDown(e: KeyboardEvent) {
+    if (!this.shortcutsEnabled) return;
+    if (isEditableShortcutTarget(e.target)) return;
+
+    const action = resolveShellShortcut(e);
+    if (!action) return;
+
+    e.preventDefault();
+
+    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;
+    const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;
+
+    if (action === 'toggle-panel-nav') {
+      void panel?.toggleCollapsed();
+      return;
+    }
+
+    if (action === 'close-panel-tools') {
+      void tools?.closeDrawer();
+      return;
+    }
+
+    if (action.startsWith('open-tool:') && tools) {
+      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;
+      void tools.activateTool(toolId);
+    }
+  }
+
   private syncChrome() {
     const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;
     const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;
@@ -322,17 +359,15 @@ export class AppShell {
             <slot name="panel" />
           </div>
           <div class="app-shell__main">
-            <div class="app-shell__stack">
-              <div class="app-shell__bar">
-                <slot name="bar" />
-              </div>
-              <div class="app-shell__content">
-                <slot />
-              </div>
+            <div class="app-shell__bar">
+              <slot name="bar" />
             </div>
             <div class="app-shell__tools">
               <slot name="tools" />
             </div>
+            <div class="app-shell__content">
+              <slot />
+            </div>
           </div>
         </div>
       </Host>

package/src/wc/components/BarNav/BarNav.tsx

@@ -86,6 +86,7 @@ export class BarNav {
   @State() private visibleTabs: BarNavTab[] = [];
   @State() private overflowTabs: BarNavTab[] = [];
   @State() private menuInitialFocusVisible = false;
+  @State() private overflowRovingFocused = false;
 
   private static readonly HOST_PROP_SYNC_BUDGET = 8;
   private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;
@@ -95,7 +96,7 @@ export class BarNav {
   private headerEl: HTMLElement | null = null;
   private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;
   private menuEl: HTMLDsMenuElement | null = null;
-  private visibleTabGroupEl: QueryableHost | null = null;
+  private visibleTabGroupEl: HTMLDsTabGroupNavElement | null = null;
   private probeTabGroupEl: QueryableHost | null = null;
   private resizeObserver: ResizeObserver | null = null;
   private intrinsicWidthRetryCount = 0;
@@ -571,11 +572,32 @@ export class BarNav {
     this.menuOpen = true;
   }
 
+  private handleTabRovingExit(e: CustomEvent<'start' | 'end'>) {
+    if (e.detail !== 'end' || !this.hasOverflowTabs) return;
+    this.overflowRovingFocused = true;
+    void this.triggerEl?.setFocus?.();
+  }
+
+  private handleOverflowFocus = () => {
+    this.overflowRovingFocused = true;
+  };
+
+  private handleOverflowBlur = () => {
+    this.overflowRovingFocused = false;
+  };
+
   private handleTriggerKeyDown(e: KeyboardEvent) {
     if (!this.hasOverflowTabs) return;
 
     if (!this.menuOpen) {
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        this.overflowRovingFocused = false;
+        void this.visibleTabGroupEl?.focusLastTab();
+        return;
+      }
+
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         this.toggleTabMenu({ focusVisible: true });
       }
@@ -645,7 +667,13 @@ export class BarNav {
                   }}
                   tabs={renderedTabs}
                   value={this.effectiveValue}
+                  selectionFollowsFocus={false}
+                  rovingEnabled={!this.overflowRovingFocused}
                   onDsChange={(e: Event) => this.handleTabChange(e)}
+                  onDsRovingExit={(e: CustomEvent<'start' | 'end'>) => this.handleTabRovingExit(e)}
+                  onFocusin={() => {
+                    this.overflowRovingFocused = false;
+                  }}
                 />
               </div>
             )}
@@ -666,6 +694,7 @@ export class BarNav {
                 icon="Ellipses"
                 isActive={this.menuOpen}
                 activeFill={false}
+                focusTabIndex={this.overflowRovingFocused ? 0 : -1}
                 ref={(el?: HTMLDsButtonUnfilledIconElement) => {
                   this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;
                 }}
@@ -673,6 +702,8 @@ export class BarNav {
                 expanded={this.menuOpen}
                 aria-label="More tabs"
                 onDsClick={() => this.toggleTabMenu({ focusVisible: false })}
+                onFocusin={this.handleOverflowFocus}
+                onFocusout={this.handleOverflowBlur}
                 onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}
               />
             )}

package/src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx

@@ -46,6 +46,12 @@ export class ButtonUnfilledIcon {
   @Prop() haspopup: string | undefined;
   @Prop() pressed: boolean | undefined;
 
+  /**
+   * Native `tabindex` for roving keyboard groups in shell chrome.
+   * Omit for the default button tab stop (`0`).
+   */
+  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;
+
   @Event() dsClick!: EventEmitter<MouseEvent>;
   @Event() dsChange!: EventEmitter<boolean>;
 
@@ -88,6 +94,7 @@ export class ButtonUnfilledIcon {
           type={this.type}
           class={cls}
           disabled={this.inactive}
+          tabIndex={this.focusTabIndex ?? 0}
           aria-label={this.ariaLabel}
           aria-controls={this.controls}
           aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Watch, State, Element, Method, h, Host } from '@stencil/core';
 import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
 import {
@@ -143,14 +143,14 @@ export class PanelNav {
   @Watch('groups')
   onGroupsChange(val: string | PanelNavGroup[]) {
     this.parsedGroups = parsePanelNavGroups(val);
-    this.syncRovingIndex();
+    this.rovingIndex = 0;
     this.syncActiveFromUrl();
   }
 
   @Watch('activeId')
   @Watch('urlDerivedActiveId')
   onActiveIdChange() {
-    this.syncRovingIndex();
+    /* Active route updates aria-current only — roving tab stop stays user-controlled. */
   }
 
   @Watch('currentUrl')
@@ -288,26 +288,104 @@ export class PanelNav {
     return this.parsedGroups.flatMap(g => g.items);
   }
 
-  private syncRovingIndex() {
-    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);
-    this.rovingIndex = idx >= 0 ? idx : 0;
+  private getFooterRovingIndex(): number {
+    return 1 + this.getAllItems().length;
   }
 
-  private handleItemKeyDown(e: KeyboardEvent, index: number) {
-    const total = this.getAllItems().length;
-    let next: number;
+  private getUserRovingIndex(): number {
+    return this.getFooterRovingIndex() + 1;
+  }
+
+  private getRovingElement(index: number): HTMLElement | null {
+    const itemCount = this.getAllItems().length;
+    if (index === 0) {
+      return this.el.querySelector('.panel-nav__header-btn');
+    }
+    if (index >= 1 && index <= itemCount) {
+      const items = this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item');
+      return items[index - 1] ?? null;
+    }
+    if (index === this.getFooterRovingIndex()) {
+      return this.el.querySelector('.panel-nav__footer-btn .button-icon');
+    }
+    if (index === this.getUserRovingIndex()) {
+      return this.el.querySelector('.panel-nav__footer-user');
+    }
+    return null;
+  }
+
+  private focusRovingAt(index: number) {
+    this.rovingIndex = index;
+    this.getRovingElement(index)?.focus({ preventScroll: true });
+  }
+
+  private activateRovingIndex(index: number) {
+    const itemCount = this.getAllItems().length;
+    const items = this.getAllItems();
+    if (index === 0) {
+      this.handleToggle();
+      return;
+    }
+    if (index >= 1 && index <= itemCount) {
+      this.handleItemClick(items[index - 1].id);
+      return;
+    }
+    if (index === this.getFooterRovingIndex()) {
+      this.handleFooterAction();
+      return;
+    }
+    if (index === this.getUserRovingIndex()) {
+      const anchor = this.el.querySelector(`#${PANEL_NAV_USER_MENU_ANCHOR_ID}`) as HTMLElement | null;
+      if (anchor) this.dsNavUserAction.emit({ anchor });
+    }
+  }
+
+  private handleRovingKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.activateRovingIndex(index);
+      return;
+    }
+
+    const footerIdx = this.getFooterRovingIndex();
+    const userIdx = this.getUserRovingIndex();
+    let next: number | undefined;
+
     switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;
-      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;
-      case 'Home':      e.preventDefault(); next = 0; break;
-      case 'End':       e.preventDefault(); next = total - 1; break;
-      default: return;
+      case 'ArrowDown':
+        if (index === userIdx) return;
+        if (index === footerIdx) next = userIdx;
+        else next = index + 1;
+        break;
+      case 'ArrowUp':
+        if (index === 0) return;
+        if (index === userIdx) next = footerIdx;
+        else if (index === footerIdx) next = footerIdx - 1;
+        else next = index - 1;
+        break;
+      case 'ArrowRight':
+        if (index === footerIdx) next = userIdx;
+        else return;
+        break;
+      case 'ArrowLeft':
+        if (index === userIdx) next = footerIdx;
+        else return;
+        break;
+      case 'Home':
+        e.preventDefault();
+        next = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        next = userIdx;
+        break;
+      default:
+        return;
     }
-    this.rovingIndex = next;
-    const items = Array.from(
-      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')
-    );
-    items[next]?.focus();
+
+    if (next === undefined || next === index) return;
+    e.preventDefault();
+    this.focusRovingAt(next);
   }
 
   private checkScroll() {
@@ -331,6 +409,12 @@ export class PanelNav {
     this.applyToggle(!this.collapsed);
   }
 
+  /** Toggle expanded/collapsed panel nav — used by shell keyboard shortcuts. */
+  @Method()
+  async toggleCollapsed() {
+    this.handleToggle();
+  }
+
   private handleFooterAction() {
     this.dsNavFooterAction.emit();
   }
@@ -411,6 +495,7 @@ export class PanelNav {
 
   private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {
     const isActive = item.id === this.effectiveActiveId;
+    const rovingPosition = idx + 1;
 
     const itemContent = [
       <span class="panel-nav__item-icon">
@@ -446,10 +531,10 @@ export class PanelNav {
       },
       'aria-current': isActive ? ('page' as const) : undefined,
       title: collapsed ? item.label : undefined,
-      tabIndex: idx === this.rovingIndex ? 0 : -1,
+      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,
       onClick: () => this.handleItemClick(item.id),
-      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),
-      onFocus: () => { this.rovingIndex = idx; },
+      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),
+      onFocus: () => { this.rovingIndex = rovingPosition; },
     };
 
     const useAnchor = this.routerMode === 'anchor' && item.href;
@@ -487,7 +572,10 @@ export class PanelNav {
             <button
               type="button"
               class="panel-nav__header-btn ds-focus-ring-inset"
+              tabIndex={this.rovingIndex === 0 ? 0 : -1}
               onClick={() => this.handleToggle()}
+              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}
+              onFocus={() => { this.rovingIndex = 0; }}
               aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}
               aria-expanded={collapsed ? 'false' : 'true'}
             >
@@ -543,9 +631,12 @@ export class PanelNav {
               class="panel-nav__footer-btn"
               icon={isDashboardChrome ? 'Gear' : 'Dashboard'}
               activeFill={false}
+              focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}
               title={isDashboardChrome ? 'Settings' : 'Dashboard'}
               aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}
               onDsClick={() => this.handleFooterAction()}
+              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}
+              onFocusin={() => { this.rovingIndex = this.getFooterRovingIndex(); }}
             />
 
             {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}
@@ -553,8 +644,11 @@ export class PanelNav {
               type="button"
               id={PANEL_NAV_USER_MENU_ANCHOR_ID}
               class="panel-nav__item panel-nav__footer-user ds-focus-ring-inset"
+              tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}
               aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}
               onClick={(e) => this.handleUserAction(e)}
+              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}
+              onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}
             >
               <span class="panel-nav__item-label panel-nav__footer-user-label">
                 <span class="panel-nav__item-label-text">

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, Event, EventEmitter, Element, State, Watch, h, Host } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';
 import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
 import {
   PANEL_TOOLS_LABELS,
@@ -6,7 +6,7 @@ import {
   type PanelToolsItem,
   type PanelToolsToolId,
 } from './panel-tools-types';
-import { parsePanelToolsItems, panelToolsDrawerResting } from './panel-tools-utils';
+import { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';
 
 @Component({
   tag: 'ds-panel-tools',
@@ -51,12 +51,21 @@ export class PanelTools {
   /** Suppresses width transition until the host has painted its initial open state. */
   @State() private readyForMotion = false;
 
+  @State() private rovingIndex = 0;
+
   private motionEnableGeneration = 0;
 
   private get railItems(): PanelToolsItem[] {
     return parsePanelToolsItems(this.items, this.itemsJson);
   }
 
+  private get orderedRailItems(): PanelToolsItem[] {
+    const railItems = this.railItems;
+    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
+    return headerItem ? [headerItem, ...bodyItems] : bodyItems;
+  }
+
   disconnectedCallback() {
     this.el.removeEventListener('transitionend', this.handleTransitionEnd);
     this.motionEnableGeneration += 1;
@@ -102,6 +111,7 @@ export class PanelTools {
   @Watch('items')
   @Watch('itemsJson')
   itemsChanged() {
+    this.rovingIndex = 0;
     this.deferMotionEnable();
   }
 
@@ -132,17 +142,68 @@ export class PanelTools {
   }
 
   private handleToolChange = (id: PanelToolsToolId) => {
-    const selected = !this.isRailSelected(id);
-    if (selected) {
-      this.open = true;
-      this.activeTool = id;
-    } else {
-      this.open = false;
+    const next = resolvePanelToolActivation(this.open, this.activeTool, id);
+    this.open = next.open;
+    this.activeTool = next.activeTool;
+    this.dsToolChange.emit({ id, selected: next.selected });
+  };
+
+  /** Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this. */
+  @Method()
+  async activateTool(id: PanelToolsToolId) {
+    const item = this.railItems.find(entry => entry.id === id);
+    if (!item || item.inactive) return;
+    this.handleToolChange(id);
+  }
+
+  /** Close the tools drawer when open — used by shell keyboard shortcuts. */
+  @Method()
+  async closeDrawer() {
+    if (!this.open) return;
+    const id = this.activeTool;
+    this.open = false;
+    if (id) {
+      this.dsToolChange.emit({ id, selected: false });
+    }
+  }
+
+  private focusRailAt(index: number) {
+    const items = this.orderedRailItems;
+    if (!items.length) return;
+    const bounded = Math.max(0, Math.min(index, items.length - 1));
+    if (bounded === this.rovingIndex) return;
+    this.rovingIndex = bounded;
+    const actions = Array.from(
+      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),
+    );
+    actions[bounded]?.focus({ preventScroll: true });
+  }
+
+  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {
+    const items = this.orderedRailItems;
+    if (!items.length) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleToolChange(items[index].id);
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      if (index >= items.length - 1) return;
+      e.preventDefault();
+      this.focusRailAt(index + 1);
+      return;
+    }
+
+    if (e.key === 'ArrowUp') {
+      if (index <= 0) return;
+      e.preventDefault();
+      this.focusRailAt(index - 1);
     }
-    this.dsToolChange.emit({ id, selected });
   };
 
-  private renderRailAction(item: PanelToolsItem) {
+  private renderRailAction(item: PanelToolsItem, index: number) {
     return (
       <ds-button-unfilled-icon
         key={item.id}
@@ -152,18 +213,21 @@ export class PanelTools {
         activeFill={false}
         dot={item.dot ?? false}
         inactive={item.inactive}
+        focusTabIndex={index === this.rovingIndex ? 0 : -1}
         aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}
         pressed={this.isRailSelected(item.id)}
-        onDsChange={() => this.handleToolChange(item.id)}
+        onFocusin={() => { this.rovingIndex = index; }}
+        onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}
+        onDsClick={() => this.handleToolChange(item.id)}
       />
     );
   }
 
   render() {
     const headerLabel = this.headerLabel();
-    const railItems = this.railItems;
-    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
-    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const orderedRailItems = this.orderedRailItems;
+    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
     const showDrawerChrome = this.isDrawerPresent();
     const drawerResting = panelToolsDrawerResting(this.open, this.motion);
 
@@ -181,6 +245,19 @@ export class PanelTools {
         aria-label="Tools"
       >
         <div class="panel-tools__layout">
+          <nav class="panel-tools__rail" aria-label="Tool shortcuts">
+            {headerItem ? (
+              <div class="panel-tools__rail-header">
+                {this.renderRailAction(headerItem, 0)}
+              </div>
+            ) : null}
+            <div class="panel-tools__rail-body">
+              {bodyItems.map((item, bodyIdx) =>
+                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),
+              )}
+            </div>
+          </nav>
+
           <div
             class={{
               'panel-tools__drawer': true,
@@ -247,15 +324,6 @@ export class PanelTools {
               </div>
             </div>
           </div>
-
-          <nav class="panel-tools__rail" aria-label="Tool shortcuts">
-            {headerItem ? (
-              <div class="panel-tools__rail-header">{this.renderRailAction(headerItem)}</div>
-            ) : null}
-            <div class="panel-tools__rail-body">
-              {bodyItems.map(item => this.renderRailAction(item))}
-            </div>
-          </nav>
         </div>
       </Host>
     );

package/src/wc/components/PanelTools/panel-tools-utils.ts

@@ -1,5 +1,5 @@
 import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';
-import type { PanelToolsItem } from './panel-tools-types';
+import type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
 
 export function parsePanelToolsItems(
   items: PanelToolsItem[],
@@ -36,3 +36,15 @@ export type PanelToolsMotion = 'opening' | 'closing' | 'idle';
 export function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {
   return !open && motion === 'idle';
 }
+
+/** Toggle or switch rail tool selection — repeat activation closes the active tool. */
+export function resolvePanelToolActivation(
+  open: boolean,
+  activeTool: PanelToolsToolId | '',
+  id: PanelToolsToolId,
+): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {
+  if (open && activeTool === id) {
+    return { open: false, activeTool: id, selected: false };
+  }
+  return { open: true, activeTool: id, selected: true };
+}