@ds-mo/ui 2.1.1 → 2.2.0

package/src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts

@@ -35,6 +35,10 @@ export function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSec
   return sections;
 }
 
+export function tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {
+  return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);
+}
+
 export function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {
   const selectable = getSelectableTabs(tabs);
   return selectable.find(tab => tab.id === selectedId) ?? selectable[0];
@@ -57,3 +61,54 @@ export function tabsOverflowContainer(
   }
   return diff > hysteresis;
 }
+
+export function visibleTabCountForWidth(
+  itemWidths: number[],
+  availableWidth: number,
+  overflowTriggerWidth: number,
+  itemGap: number,
+  listExtraWidth: number,
+): number {
+  if (itemWidths.length === 0 || availableWidth <= 0) return 0;
+
+  const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);
+  if (fullWidth <= availableWidth) return itemWidths.length;
+
+  const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);
+  let count = 0;
+
+  for (let i = 1; i <= itemWidths.length; i++) {
+    const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);
+    if (width > availableForTabs) break;
+    count = i;
+  }
+
+  return count;
+}
+
+export function trimTrailingDividers(tabs: TabItem[]): TabItem[] {
+  let end = tabs.length;
+  while (end > 0 && isTabDivider(tabs[end - 1])) {
+    end -= 1;
+  }
+  return tabs.slice(0, end);
+}
+
+function trimLeadingDividers(tabs: TabItem[]): TabItem[] {
+  let start = 0;
+  while (start < tabs.length && isTabDivider(tabs[start])) {
+    start += 1;
+  }
+  return tabs.slice(start);
+}
+
+function widthForItemCount(
+  itemWidths: number[],
+  count: number,
+  itemGap: number,
+  listExtraWidth: number,
+): number {
+  if (count <= 0) return 0;
+  const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);
+  return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);
+}

package/src/wc/components/BarNav/bar-nav-types.ts

@@ -1,15 +1,3 @@
 import type { TabItem } from '../TabGroup/tab-item-utils';
 
 export type BarNavTab = TabItem;
-
-export interface BarNavActionItem {
-  id: string;
-  /** Icon name for <ds-icon>. */
-  icon: string;
-  /** Whether this action button is currently pressed/active. */
-  selected?: boolean;
-  /** Show a notification dot. */
-  dot?: boolean;
-  inactive?: boolean;
-  ariaLabel?: string;
-}

package/src/wc/components/BarNav/index.ts

@@ -1,2 +1,2 @@
-export type { BarNavTab, BarNavActionItem } from './bar-nav-types';
+export type { BarNavTab } from './bar-nav-types';
 export type { NavChromeStyle } from '../../nav/nav-chrome';

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

@@ -0,0 +1,113 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+
+export type ButtonUnfilledIconBackground =
+  | 'faint'
+  | 'medium'
+  | 'bold'
+  | 'strong'
+  | 'always-dark'
+  | 'navigation';
+
+@Component({
+  tag: 'ds-button-unfilled-icon',
+  styleUrl: 'ButtonUnfilledIcon.css',
+  scoped: true,
+})
+export class ButtonUnfilledIcon {
+  @Element() el!: HTMLElement;
+
+  /** Icon name passed to <ds-icon>. */
+  @Prop() icon: string = '';
+
+  /** Active/selected visual state. */
+  @Prop() isActive: boolean = false;
+
+  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */
+  @Prop() activeFill: boolean = true;
+
+  /** Show a 1px tertiary border without changing the interaction model. */
+  @Prop() hasBorder: boolean = false;
+
+  /** Show a notification dot at the top-right of the icon zone. */
+  @Prop() dot: boolean = false;
+
+  /** Disables interaction. */
+  @Prop() inactive: boolean = false;
+
+  /** Native button type. */
+  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
+
+  /** Parent surface context — adjusts hover/press/focus colours for coloured backgrounds. */
+  @Prop() background: ButtonUnfilledIconBackground | undefined;
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
+  @Prop() controls: string | undefined;
+  @Prop() expanded: boolean | undefined;
+  @Prop() haspopup: string | undefined;
+  @Prop() pressed: boolean | undefined;
+
+  @Event() dsClick!: EventEmitter<MouseEvent>;
+  @Event() dsChange!: EventEmitter<boolean>;
+
+  private buttonEl: HTMLButtonElement | null = null;
+
+  @Method()
+  async setFocus() {
+    this.buttonEl?.focus();
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    if (this.inactive) return;
+    this.dsClick.emit(event);
+    this.dsChange.emit(!this.isActive);
+  };
+
+  render() {
+    const bg = this.background;
+
+    const cls: Record<string, boolean> = {
+      'button-icon': true,
+      'button-icon--active': this.isActive,
+      'button-icon--active-fill': this.isActive && this.activeFill,
+      'button-icon--bordered': this.hasBorder,
+      'button-icon--inactive': this.inactive,
+      'button-icon--on-medium': bg === 'medium',
+      'button-icon--on-bold': bg === 'bold',
+      'button-icon--on-strong': bg === 'strong',
+      'button-icon--on-always-dark': bg === 'always-dark',
+      'button-icon--on-navigation': bg === 'navigation',
+    };
+
+    return (
+      <Host tabIndex={-1}>
+        <button
+          ref={el => {
+            this.buttonEl = el ?? null;
+          }}
+          type={this.type}
+          class={cls}
+          disabled={this.inactive}
+          aria-label={this.ariaLabel}
+          aria-controls={this.controls}
+          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}
+          aria-haspopup={this.haspopup}
+          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}
+          onClick={this.handleClick}
+        >
+          <span class="button-icon__icon-wrap">
+            <ds-icon name={this.icon} size="md" color="inherit" />
+            {this.dot && (
+              <ds-badge
+                class="button-icon__dot"
+                variant="dot"
+                background="var(--ds-button-unfilled-icon-dot-ring)"
+                label=""
+                aria-hidden="true"
+              />
+            )}
+          </span>
+        </button>
+      </Host>
+    );
+  }
+}

package/src/wc/components/ButtonUnfilledIcon/index.ts

@@ -0,0 +1 @@
+export type { ButtonUnfilledIconBackground } from './ButtonUnfilledIcon';

package/src/wc/components/Menu/Menu.tsx

@@ -29,12 +29,15 @@ export class Menu {
   @Prop() anchor: HTMLElement | undefined;
   /** ID of the external trigger element for positioning */
   @Prop() anchorId: string | undefined;
+  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */
+  @Prop() initialFocusVisible: boolean = false;
 
   @State() private shouldRender: boolean = false;
   @State() private closing: boolean = false;
   @State() private pos: { x: number; y: number } = { x: 0, y: 0 };
   @State() private focusedIndex: number = 0;
   @State() private positionReady: boolean = false;
+  @State() private focusRingVisible: boolean = false;
 
   @Event() dsClose!: EventEmitter<void>;
   @Event() dsSelect!: EventEmitter<MenuItemData>;
@@ -58,16 +61,16 @@ export class Menu {
   @Watch('open')
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
+      this.teardownListeners();
       this.shouldRender = true;
       this.closing = false;
       this.positionReady = false;
       this.listenersReady = false;
+      this.focusRingVisible = this.initialFocusVisible;
+      this.listenersReady = true;
+      this.setupListeners();
       this.schedulePositionUpdate(() => {
-        if (!this.listenersReady) {
-          this.listenersReady = true;
-          this.focusInitialItem();
-          this.setupListeners();
-        }
+        this.focusInitialItem();
       });
     } else if (this.shouldRender) {
       this.cancelPositionRetry();
@@ -218,7 +221,7 @@ export class Menu {
     };
 
     this.scrollResizeHandler = () => {
-      if (this.open) this.calculatePosition();
+      if (this.shouldRender && !this.closing) this.calculatePosition();
     };
 
     document.addEventListener('mousedown', this.clickOutsideHandler, true);
@@ -246,11 +249,12 @@ export class Menu {
     this.resolvedAnchor?.focus();
     this.dsClose.emit();
     this.open = false;
+    this.onOpenChange(false);
   }
 
   @Listen('keydown')
   handleKeyDown(e: KeyboardEvent) {
-    if (!this.open) return;
+    if (!this.shouldRender || this.closing) return;
     const flat = this.flatItems;
     const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);
     if (!enabled.length) return;
@@ -261,21 +265,25 @@ export class Menu {
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault(); e.stopPropagation();
+        this.focusRingVisible = true;
         this.focusedIndex = enabled[(safe + 1) % enabled.length];
         this.focusItem(this.focusedIndex);
         break;
       case 'ArrowUp':
         e.preventDefault(); e.stopPropagation();
+        this.focusRingVisible = true;
         this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];
         this.focusItem(this.focusedIndex);
         break;
       case 'Home':
         e.preventDefault(); e.stopPropagation();
+        this.focusRingVisible = true;
         this.focusedIndex = enabled[0];
         this.focusItem(this.focusedIndex);
         break;
       case 'End':
         e.preventDefault(); e.stopPropagation();
+        this.focusRingVisible = true;
         this.focusedIndex = enabled[enabled.length - 1];
         this.focusItem(this.focusedIndex);
         break;
@@ -349,6 +357,8 @@ export class Menu {
                     type="button"
                     class={{
                       'menu-item': true,
+                      'ds-focus-ring-inset': true,
+                      'ds-focus-ring--visible': isFocused && this.focusRingVisible,
                       'menu-item--selected': !!item.isSelected,
                       'menu-item--inactive': !!item.isInactive,
                       'menu-item--destructive': !!item.isDestructive,
@@ -358,6 +368,7 @@ export class Menu {
                     aria-current={item.isSelected ? 'true' : undefined}
                     disabled={item.isInactive}
                     tabIndex={isFocused ? 0 : -1}
+                    onMouseDown={() => { this.focusRingVisible = false; }}
                     onClick={() => this.handleItemClick(item)}
                     onFocus={() => { this.focusedIndex = idx; }}
                   >

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

@@ -439,7 +439,11 @@ export class PanelNav {
     ];
 
     const sharedProps = {
-      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },
+      class: {
+        'panel-nav__item': true,
+        'panel-nav__item--active': isActive,
+        'ds-focus-ring-inset': true,
+      },
       'aria-current': isActive ? ('page' as const) : undefined,
       title: collapsed ? item.label : undefined,
       tabIndex: idx === this.rovingIndex ? 0 : -1,
@@ -482,7 +486,7 @@ export class PanelNav {
           <div class="panel-nav__header">
             <button
               type="button"
-              class="panel-nav__header-btn"
+              class="panel-nav__header-btn ds-focus-ring-inset"
               onClick={() => this.handleToggle()}
               aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}
               aria-expanded={collapsed ? 'false' : 'true'}
@@ -535,21 +539,20 @@ export class PanelNav {
 
           {/* ── Footer ── */}
           <div class="panel-nav__footer">
-            <button
-              type="button"
+            <ds-button-unfilled-icon
               class="panel-nav__footer-btn"
+              icon={isDashboardChrome ? 'Gear' : 'Dashboard'}
+              activeFill={false}
               title={isDashboardChrome ? 'Settings' : 'Dashboard'}
               aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}
-              onClick={() => this.handleFooterAction()}
-            >
-              <ds-icon name={isDashboardChrome ? 'Gear' : 'Dashboard'} size="md" color="inherit" />
-            </button>
+              onDsClick={() => this.handleFooterAction()}
+            />
 
             {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}
             <button
               type="button"
               id={PANEL_NAV_USER_MENU_ANCHOR_ID}
-              class="panel-nav__item panel-nav__footer-user"
+              class="panel-nav__item panel-nav__footer-user ds-focus-ring-inset"
               aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}
               onClick={(e) => this.handleUserAction(e)}
             >

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

@@ -144,14 +144,16 @@ export class PanelTools {
 
   private renderRailAction(item: PanelToolsItem) {
     return (
-      <ds-bar-nav-action
+      <ds-button-unfilled-icon
         key={item.id}
         class="panel-tools__rail-action"
         icon={item.icon}
-        selected={this.isRailSelected(item.id)}
+        isActive={this.isRailSelected(item.id)}
+        activeFill={false}
         dot={item.dot ?? false}
         inactive={item.inactive}
         aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}
+        pressed={this.isRailSelected(item.id)}
         onDsChange={() => this.handleToolChange(item.id)}
       />
     );

package/src/wc/components/TabGroup/TabGroup.tsx

@@ -161,6 +161,7 @@ export class TabGroup {
                 class={{
                   tab: true,
                   'tab--selected': isSelected,
+                  'ds-focus-ring-inset': true,
                   [bgClass]: !!bgClass,
                 }}
                 aria-selected={isSelected}

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -167,6 +167,7 @@ export class TabGroupNav {
                 class={{
                   tab: true,
                   'tab--selected': isSelected,
+                  'ds-focus-ring-inset': true,
                   [bgClass]: !!bgClass,
                 }}
                 aria-selected={isSelected}