@ng-cn/core 1.0.16 → 1.0.18

package/src/app/lib/components/ui/navigation-menu/navigation-menu-list.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'NavigationMenuList',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"navigation-menu-list"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/navigation-menu/navigation-menu-trigger.component.ts

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { ChevronDown, LucideAngularModule } from 'lucide-angular';
 import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigation-menu-context';
 import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
@@ -20,14 +28,21 @@ import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
     />
   `,
   host: {
+    'attr.data-slot': '"navigation-menu-trigger"',
     '[class]': 'computedClass()',
+    '[attr.id]': 'itemContext.triggerId',
     '[attr.data-state]': 'itemContext.open() ? "open" : "closed"',
+    '[attr.role]': '"button"',
+    '[attr.aria-expanded]': 'itemContext.open()',
+    '[attr.aria-haspopup]': '"menu"',
+    '[attr.aria-controls]': 'itemContext.contentId',
     '(click)': 'toggle()',
     '(mouseenter)': 'onMouseEnter()',
+    '(keydown)': 'onKeyDown($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NavigationMenuTrigger {
+export class NavigationMenuTrigger implements OnInit, OnDestroy {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
@@ -40,6 +55,14 @@ export class NavigationMenuTrigger {
 
   protected readonly ChevronDownIcon = ChevronDown;
 
+  ngOnInit(): void {
+    this.context.registerTrigger(this.itemContext.triggerId);
+  }
+
+  ngOnDestroy(): void {
+    this.context.unregisterTrigger(this.itemContext.triggerId);
+  }
+
   protected toggle(): void {
     this.itemContext.open.update((v) => !v);
     if (this.itemContext.open()) {
@@ -48,6 +71,7 @@ export class NavigationMenuTrigger {
       this.context.activeItem.set(null);
     }
   }
+
   protected onMouseEnter(): void {
     const activeItem = this.context.activeItem();
     if (activeItem && activeItem !== this.itemContext.itemId) {
@@ -55,4 +79,48 @@ export class NavigationMenuTrigger {
       this.itemContext.open.set(true);
     }
   }
+
+  protected onKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        this.toggle();
+        if (this.itemContext.open()) {
+          this.focusFirstContentItem();
+        }
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!this.itemContext.open()) {
+          this.itemContext.open.set(true);
+          this.context.activeItem.set(this.itemContext.itemId);
+        }
+        this.focusFirstContentItem();
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.context.focusNextTrigger(this.itemContext.triggerId);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.context.focusPreviousTrigger(this.itemContext.triggerId);
+        break;
+      case 'Escape':
+        if (this.itemContext.open()) {
+          this.itemContext.open.set(false);
+          this.context.activeItem.set(null);
+          document.getElementById(this.itemContext.triggerId)?.focus();
+        }
+        break;
+    }
+  }
+
+  private focusFirstContentItem(): void {
+    setTimeout(() => {
+      const content = document.getElementById(this.itemContext.contentId);
+      const focusable = content?.querySelector<HTMLElement>('a, button, [tabindex]');
+      focusable?.focus();
+    }, 10);
+  }
 }

package/src/app/lib/components/ui/navigation-menu/navigation-menu-viewport.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'NavigationMenuViewport',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"navigation-menu-viewport"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/navigation-menu/navigation-menu.component.ts

@@ -7,6 +7,37 @@ import {
 } from './navigation-menu-context';
 import { NavigationMenuViewport } from './navigation-menu-viewport.component';
 
+function createNavigationMenuContext(): NavigationMenuContextValue {
+  const triggerIds = signal<string[]>([]);
+  return {
+    activeItem: signal(null),
+    orientation: signal('horizontal'),
+    triggerIds,
+    registerTrigger: (triggerId: string) => {
+      triggerIds.update((ids) => [...ids, triggerId]);
+    },
+    unregisterTrigger: (triggerId: string) => {
+      triggerIds.update((ids) => ids.filter((id) => id !== triggerId));
+    },
+    focusNextTrigger: (currentTriggerId: string) => {
+      const ids = triggerIds();
+      const idx = ids.indexOf(currentTriggerId);
+      const nextId = idx < ids.length - 1 ? ids[idx + 1] : ids[0];
+      if (nextId) {
+        document.getElementById(nextId)?.focus();
+      }
+    },
+    focusPreviousTrigger: (currentTriggerId: string) => {
+      const ids = triggerIds();
+      const idx = ids.indexOf(currentTriggerId);
+      const prevId = idx > 0 ? ids[idx - 1] : ids[ids.length - 1];
+      if (prevId) {
+        document.getElementById(prevId)?.focus();
+      }
+    },
+  };
+}
+
 /**
  * Props for the NavigationMenu component
  */
@@ -114,13 +145,14 @@ export interface NavigationMenuProps {
       <NavigationMenuViewport />
     </div>
   `,
+  host: {
+    'attr.data-slot': '"navigation-menu"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: NAVIGATION_MENU_CONTEXT,
-      useFactory: (): NavigationMenuContextValue => ({
-        activeItem: signal(null),
-        orientation: signal('horizontal'),
-      }),
+      useFactory: createNavigationMenuContext,
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/pagination/pagination-content.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'PaginationContent',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination-content"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/pagination/pagination-ellipsis.component.ts

@@ -27,6 +27,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     <span class="sr-only">More pages</span>
   `,
   host: {
+    'attr.data-slot': '"pagination-ellipsis"',
     '[class]': 'computedClass()',
     '[attr.aria-hidden]': '"true"',
   },

package/src/app/lib/components/ui/pagination/pagination-item.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'PaginationItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination-item"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/pagination/pagination-link.component.ts

@@ -10,6 +10,7 @@ import { buttonVariants } from '../button/button-variants';
   selector: 'PaginationLink',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination-link"',
     '[class]': 'computedClass()',
     '[attr.href]': 'href()',
     '[attr.aria-current]': 'isActive() ? "page" : null',

package/src/app/lib/components/ui/pagination/pagination-next.component.ts

@@ -26,6 +26,7 @@ import { buttonVariants } from '../button/button-variants';
     </svg>
   `,
   host: {
+    'attr.data-slot': '"pagination-next"',
     '[class]': 'computedClass()',
     '[attr.href]': 'href()',
     '[attr.aria-label]': '"Go to next page"',

package/src/app/lib/components/ui/pagination/pagination-previous.component.ts

@@ -26,6 +26,7 @@ import { buttonVariants } from '../button/button-variants';
     <span>Previous</span>
   `,
   host: {
+    'attr.data-slot': '"pagination-previous"',
     '[class]': 'computedClass()',
     '[attr.href]': 'href()',
     '[attr.aria-label]': '"Go to previous page"',

package/src/app/lib/components/ui/pagination/pagination.component.ts

@@ -27,13 +27,16 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'Pagination',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination"',
     role: 'navigation',
-    '[attr.aria-label]': '"pagination"',
+    '[attr.aria-label]': 'ariaLabel()',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Pagination {
+  /** Accessible label for the navigation landmark */
+  readonly ariaLabel = input<string>('Pagination');
   /** Additional CSS classes */
   readonly class = input<string>('');
 

package/src/app/lib/components/ui/popover/popover-anchor.component.ts

@@ -42,6 +42,7 @@ export interface PopoverAnchorProps {
   selector: 'PopoverAnchor',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"popover-anchor"',
     class: 'inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/popover/popover-content.component.ts

@@ -100,6 +100,7 @@ export interface PopoverContentProps {
         [attr.data-align]="computedAlign()"
         [style]="mergedStyles()"
         role="dialog"
+        tabindex="-1"
         [attr.aria-modal]="context.modal() || null"
       >
         <ng-content />
@@ -107,6 +108,7 @@ export interface PopoverContentProps {
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"popover-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -276,5 +278,15 @@ export class PopoverContent {
       '--radix-popover-content-transform-origin': transformOrigin,
     });
     this.isPositioned.set(true);
+
+    // Move focus into the popover for keyboard accessibility
+    setTimeout(() => {
+      const dialog = this._elementRef.nativeElement.querySelector('[role="dialog"]') as HTMLElement;
+      if (!dialog) return;
+      const firstFocusable = dialog.querySelector<HTMLElement>(
+        'button:not([disabled]):not([data-disabled=""]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      (firstFocusable ?? dialog).focus({ preventScroll: true });
+    }, 0);
   }
 }

package/src/app/lib/components/ui/popover/popover-context.ts

@@ -16,6 +16,8 @@ export interface PopoverContextValue {
   triggerRef?: Signal<HTMLElement | null>;
   /** Set the trigger element reference */
   setTriggerRef?: (element: HTMLElement | null) => void;
+  /** Unique ID for aria-controls relationship */
+  contentId: string;
 }
 
 export const POPOVER_CONTEXT = new InjectionToken<PopoverContextValue>('POPOVER_CONTEXT');

package/src/app/lib/components/ui/popover/popover-trigger.component.ts

@@ -59,6 +59,7 @@ export interface PopoverTriggerProps {
   selector: 'PopoverTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"popover-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-expanded]': 'context.open()',
     '[attr.aria-haspopup]': '"dialog"',

package/src/app/lib/components/ui/popover/popover.component.ts

@@ -10,6 +10,8 @@ import { POPOVER_CONTEXT, type PopoverContextValue } from './popover-context';
 
 export type PopoverState = 'open' | 'closed';
 
+let idCounter = 0;
+
 /**
  * Props for the Popover component
  */
@@ -98,6 +100,7 @@ export interface PopoverProps {
   selector: 'Popover',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"popover"',
     class: 'relative',
   },
   providers: [
@@ -127,6 +130,8 @@ export class Popover implements PopoverContextValue {
   readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
 
   readonly open = signal(false);
+  /** Unique ID for aria-controls relationship */
+  readonly contentId = `popover-content-${++idCounter}`;
   /** Reference to the trigger element for positioning */
   readonly triggerRef = signal<HTMLElement | null>(null);
 

package/src/app/lib/components/ui/progress/progress.component.ts

@@ -102,9 +102,8 @@ export type ProgressProps = {
     '[attr.aria-label]': 'ariaLabel()',
     '[attr.aria-valuemin]': '0',
     '[attr.aria-valuemax]': 'max()',
-    '[attr.aria-valuenow]': 'value()',
+    '[attr.aria-valuenow]': 'value() !== null ? value() : null',
     '[attr.aria-valuetext]': 'computedValueText()',
-    '[attr.aria-live]': '"polite"',
     '[attr.data-state]': 'state()',
     '[attr.data-value]': 'value()',
     '[attr.data-max]': 'max()',

package/src/app/lib/components/ui/resizable/resizable-handle.component.ts

@@ -43,6 +43,7 @@ let handleIdCounter = 0;
     }
   `,
   host: {
+    'attr.data-slot': '"resizable-handle"',
     '[class]': 'computedClass()',
     '[attr.data-panel-resize-handle]': 'true',
     '[attr.data-panel-resize-handle-id]': 'handleId',

package/src/app/lib/components/ui/resizable/resizable-panel-group.component.ts

@@ -28,6 +28,7 @@ import { RESIZABLE_CONTEXT, type ResizableContextValue } from './resizable-conte
   selector: 'ResizablePanelGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"resizable-panel-group"',
     '[class]': 'computedClass()',
     '[attr.data-panel-group]': 'true',
     '[attr.data-panel-group-direction]': 'direction()',

package/src/app/lib/components/ui/resizable/resizable-panel.component.ts

@@ -17,6 +17,7 @@ let panelIdCounter = 0;
   selector: 'ResizablePanel',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"resizable-panel"',
     '[class]': 'computedClass()',
     '[style.flex-basis.%]': 'currentSize()',
     '[attr.data-panel]': 'true',

package/src/app/lib/components/ui/scroll-area/scroll-area.component.ts

@@ -84,6 +84,7 @@ export interface ScrollAreaProps {
     <ng-content select="ScrollBar" />
   `,
   host: {
+    'attr.data-slot': '"scroll-area"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -97,15 +98,16 @@ export class ScrollArea {
 
   protected readonly computedClass = computed(() => cn('relative overflow-hidden', this.class()));
 
-  protected readonly viewportClass = computed(() =>
-    cn(
+  protected readonly viewportClass = computed(() => {
+    const type = this.type();
+    return cn(
       'h-full w-full rounded-[inherit]',
       '[&>div]:!block',
-      // Hide native scrollbar
+      // Hide native scrollbar (custom ScrollBar component provides visual feedback)
       '[&::-webkit-scrollbar]:hidden',
       '[-ms-overflow-style:none]',
       '[scrollbar-width:none]',
-      'overflow-auto',
-    ),
-  );
+      type === 'always' ? 'overflow-scroll' : 'overflow-auto',
+    );
+  });
 }

package/src/app/lib/components/ui/scroll-area/scroll-bar.component.ts

@@ -46,6 +46,7 @@ export interface ScrollBarProps {
   selector: 'ScrollBar',
   template: ` <div [class]="thumbClass()"></div> `,
   host: {
+    'attr.data-slot': '"scroll-bar"',
     '[class]': 'computedClass()',
     '[attr.data-orientation]': 'orientation()',
   },

package/src/app/lib/components/ui/segmented/segmented-item.component.ts

@@ -13,6 +13,7 @@ import { segmentedItemVariants } from './segmented-variants';
   selector: 'SegmentedItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"segmented-item"',
     '[class]': 'computedClass()',
     '[attr.role]': 'itemRole()',
     '[attr.aria-selected]': 'itemRole() === "tab" ? isSelected() : null',

package/src/app/lib/components/ui/segmented/segmented.component.ts

@@ -33,6 +33,7 @@ import { segmentedVariants, type SegmentedVariants } from './segmented-variants'
   selector: 'Segmented',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"segmented"',
     '[class]': 'computedClass()',
     role: 'tablist',
     '[attr.aria-orientation]': '"horizontal"',

package/src/app/lib/components/ui/select/select-content.component.ts

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn, Presence } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { SELECT_CONTEXT } from './select-context';
 
@@ -9,25 +9,29 @@ import { SELECT_CONTEXT } from './select-context';
  */
 @Component({
   selector: 'SelectContent',
+  imports: [Presence],
   template: `
-    <div
-      [class]="dropdownClass()"
-      [attr.id]="context?.contentId"
-      [attr.data-state]="context?.open() ? 'open' : 'closed'"
-      [attr.data-side]="side()"
-      [attr.data-align]="align()"
-      role="listbox"
-      aria-label="Options"
-      (keydown.escape)="onEscape()"
-    >
-      <div [class]="viewportClass()">
-        <ng-content />
+    <Presence [present]="context?.open() ?? false">
+      <div
+        [class]="dropdownClass()"
+        [attr.id]="context?.contentId"
+        [attr.data-state]="context?.open() ? 'open' : 'closed'"
+        [attr.data-side]="side()"
+        [attr.data-align]="align()"
+        [attr.aria-activedescendant]="focusedItemId()"
+        role="listbox"
+        (keydown.escape)="onEscape()"
+        (keydown)="onKeydown($event)"
+      >
+        <div [class]="viewportClass()">
+          <ng-content />
+        </div>
       </div>
-    </div>
+    </Presence>
   `,
   host: {
     class: 'contents',
-    'data-slot': 'select-content',
+    'attr.data-slot': '"select-content"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -49,8 +53,9 @@ export class SelectContent {
   protected readonly dropdownClass = computed(() =>
     cn(
       'bg-popover text-popover-foreground absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-md border shadow-md',
-      'animate-in fade-in-0 zoom-in-95',
-      !this.context?.open() && 'pointer-events-none invisible opacity-0',
+      'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+      'data-[state=closed]:pointer-events-none',
       this.class(),
     ),
   );
@@ -58,6 +63,15 @@ export class SelectContent {
   /** Viewport class */
   protected readonly viewportClass = computed(() => cn('max-h-60 overflow-y-auto p-1'));
 
+  /** ID of the currently focused item for aria-activedescendant */
+  protected readonly focusedItemId = computed(() => {
+    if (!this.context) return null;
+    const values = this.context.itemValues();
+    const focusedIndex = this.context.focusedIndex();
+    const focusedValue = values[focusedIndex];
+    return focusedValue ? `select-item-${focusedValue}` : null;
+  });
+
   protected onEscape(): void {
     this.context?.setOpen(false);
     const trigger = this.context?.triggerElement();
@@ -65,4 +79,11 @@ export class SelectContent {
       setTimeout(() => trigger.focus());
     }
   }
+
+  /** Handle printable character keys for typeahead search */
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      this.context?.handleTypeahead(event.key);
+    }
+  }
 }

package/src/app/lib/components/ui/select/select-context.ts

@@ -31,6 +31,16 @@ export interface SelectContext {
   required?: () => boolean;
   /** Name for form submission */
   name?: () => string;
+  /** Map of item value → display label for typeahead */
+  itemLabels: WritableSignal<Map<string, string>>;
+  /** Accumulated typeahead characters */
+  typeaheadBuffer: WritableSignal<string>;
+  /** Timeout handle for clearing the typeahead buffer */
+  typeaheadTimeout: WritableSignal<ReturnType<typeof setTimeout> | null>;
+  /** Handle a typed character for typeahead search */
+  handleTypeahead: (char: string) => void;
+  /** Focus the first item whose label starts with query (case-insensitive) */
+  focusMatchingItem: (query: string) => void;
 }
 
 export interface SelectGroupContext {

package/src/app/lib/components/ui/select/select-item.component.ts

@@ -47,6 +47,7 @@ import { SELECT_CONTEXT } from './select-context';
   host: {
     '[class]': 'computedClass()',
     role: 'option',
+    '[attr.id]': 'itemId()',
     '[attr.aria-selected]': 'isSelected()',
     '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
     '[attr.data-disabled]': 'disabled() ? "" : null',
@@ -55,7 +56,7 @@ import { SELECT_CONTEXT } from './select-context';
     '[attr.tabindex]': 'disabled() ? -1 : 0',
     '(click)': 'select()',
     '(keydown)': 'onKeyDown($event)',
-    'data-slot': 'select-item',
+    'attr.data-slot': '"select-item"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -72,6 +73,9 @@ export class SelectItem implements OnInit, OnDestroy {
 
   private readonly _context = inject(SELECT_CONTEXT, { optional: true });
 
+  /** Stable DOM id for aria-activedescendant */
+  readonly itemId = computed(() => `select-item-${this.value()}`);
+
   /** Whether this item is selected */
   protected readonly isSelected = computed(() => {
     return this._context?.value() === this.value();
@@ -94,17 +98,28 @@ export class SelectItem implements OnInit, OnDestroy {
   });
 
   ngOnInit(): void {
-    // Register this item
+    // Register this item's value
     this._context?.itemValues.update((values) => {
       if (!values.includes(this.value())) {
         return [...values, this.value()];
       }
       return values;
     });
+    // Register this item's label for typeahead
+    this._context?.itemLabels.update((m) => {
+      const label = this.textContent()?.nativeElement?.textContent?.trim() || this.value();
+      m.set(this.value(), label);
+      return m;
+    });
   }
   ngOnDestroy(): void {
-    // Unregister this item
+    // Unregister this item's value
     this._context?.itemValues.update((values) => values.filter((v) => v !== this.value()));
+    // Unregister this item's label
+    this._context?.itemLabels.update((m) => {
+      m.delete(this.value());
+      return m;
+    });
   }
 
   /** Handle keyboard navigation */
@@ -117,17 +132,20 @@ export class SelectItem implements OnInit, OnDestroy {
         event.preventDefault();
         this.select();
         break;
-      case 'ArrowDown':
+      case 'ArrowDown': {
         event.preventDefault();
         const currentIndex = this._context.focusedIndex();
         const itemCount = this._context.itemValues().length;
-        this._context.focusItem(Math.min(currentIndex + 1, itemCount - 1));
+        this._context.focusItem((currentIndex + 1) % itemCount);
         break;
-      case 'ArrowUp':
+      }
+      case 'ArrowUp': {
         event.preventDefault();
         const idx = this._context.focusedIndex();
-        this._context.focusItem(Math.max(idx - 1, 0));
+        const count = this._context.itemValues().length;
+        this._context.focusItem(idx > 0 ? idx - 1 : count - 1);
         break;
+      }
       case 'Home':
         event.preventDefault();
         this._context.focusItem(0);