@pequity/squirrel 10.0.3 → 10.1.0

package/squirrel/components/p-table/usePTableRowVirtualizer.spec.js

@@ -0,0 +1,207 @@
+import { usePTableRowVirtualizer } from '@squirrel/components/p-table/usePTableRowVirtualizer';
+import { computed, createApp, nextTick, ref } from 'vue';
+
+// Mock @tanstack/vue-virtual
+const mockVirtualizer = {
+  getVirtualItems: vi.fn(),
+  getTotalSize: vi.fn(),
+  measureElement: vi.fn(),
+};
+
+vi.mock('@tanstack/vue-virtual', () => ({
+  useVirtualizer: vi.fn(() => ref(mockVirtualizer)),
+}));
+
+const withSetup = (composable) => {
+  let result;
+
+  const app = createApp({
+    setup() {
+      result = composable();
+      return () => {};
+    },
+  });
+
+  app.mount(document.createElement('div'));
+
+  return result;
+};
+
+describe('usePTableRowVirtualizer', () => {
+  const mockOptions = computed(() => ({
+    count: 100,
+    getScrollElement: () => document.createElement('div'),
+    getItemKey: (index) => `item-${index}`,
+    estimateSize: () => 50,
+    overscan: 5,
+  }));
+
+  beforeEach(() => {
+    mockVirtualizer.getVirtualItems.mockReturnValue([]);
+    mockVirtualizer.getTotalSize.mockReturnValue(0);
+  });
+
+  it.each([
+    ['null', null],
+    ['undefined', undefined],
+    ['false', false],
+  ])('returns default values when options.value is %s', (description, value) => {
+    const options = computed(() => value);
+    const result = withSetup(() => usePTableRowVirtualizer(options));
+
+    expect(result.virtualizer).toBe(null);
+    expect(result.virtualRows.value).toEqual([{ key: 0, index: 0 }]);
+    expect(result.paddingTop.value).toBe(0);
+    expect(result.paddingBottom.value).toBe(0);
+    expect(result.measureElement()).toBeUndefined();
+  });
+
+  it('creates and returns virtualizer instance', () => {
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+
+    expect(result.virtualizer).toBeTruthy();
+    expect(result.virtualizer.value).toStrictEqual(mockVirtualizer);
+  });
+
+  it.each([
+    [
+      'with virtual items',
+      [
+        { key: 'item-0', index: 0, start: 0, end: 50 },
+        { key: 'item-1', index: 1, start: 50, end: 100 },
+      ],
+    ],
+    ['when empty', []],
+  ])('returns virtual items from virtualizer %s', (description, mockItems) => {
+    mockVirtualizer.getVirtualItems.mockReturnValue(mockItems);
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+
+    expect(result.virtualRows.value).toBe(mockItems);
+    expect(mockVirtualizer.getVirtualItems).toHaveBeenCalled();
+  });
+
+  it.each([
+    [
+      'returns first virtual row start when virtual rows exist',
+      [
+        { key: 'item-5', index: 5, start: 250, end: 300 },
+        { key: 'item-6', index: 6, start: 300, end: 350 },
+      ],
+      250,
+    ],
+    ['returns 0 when no virtual rows exist', [], 0],
+  ])('paddingTop: %s', (description, mockItems, expectedPadding) => {
+    mockVirtualizer.getVirtualItems.mockReturnValue(mockItems);
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+
+    expect(result.paddingTop.value).toBe(expectedPadding);
+  });
+
+  it.each([
+    [
+      'calculates correctly with multiple virtual rows',
+      [
+        { key: 'item-0', index: 0, start: 0, end: 50 },
+        { key: 'item-1', index: 1, start: 50, end: 100 },
+        { key: 'item-2', index: 2, start: 100, end: 150 },
+      ],
+      500,
+      350,
+    ],
+    ['returns 0 when no virtual rows exist', [], 500, 0],
+    ['handles single virtual row correctly', [{ key: 'item-0', index: 0, start: 0, end: 50 }], 200, 150],
+  ])('paddingBottom: %s', (description, mockItems, totalSize, expectedPadding) => {
+    mockVirtualizer.getVirtualItems.mockReturnValue(mockItems);
+    mockVirtualizer.getTotalSize.mockReturnValue(totalSize);
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+
+    expect(result.paddingBottom.value).toBe(expectedPadding);
+  });
+
+  it.each([
+    ['null', null],
+    ['undefined', undefined],
+  ])('measureElement returns undefined when element is %s', (description, element) => {
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+
+    expect(result.measureElement(element)).toBeUndefined();
+    expect(mockVirtualizer.measureElement).not.toHaveBeenCalled();
+  });
+
+  it('measureElement works with HTML element directly', async () => {
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    const htmlElement = document.createElement('div');
+
+    result.measureElement(htmlElement);
+
+    await nextTick();
+    expect(mockVirtualizer.measureElement).toHaveBeenCalledWith(htmlElement);
+  });
+
+  it('measureElement extracts $el from Vue component instance', async () => {
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    const mockEl = document.createElement('div');
+    const componentInstance = { $el: mockEl };
+
+    result.measureElement(componentInstance);
+
+    await nextTick();
+    expect(mockVirtualizer.measureElement).toHaveBeenCalledWith(mockEl);
+  });
+
+  it.each([
+    ['string', { $el: 'not-an-element' }],
+    ['null', { $el: null }],
+    ['text node', { $el: document.createTextNode('text') }],
+  ])('measureElement does not measure when extracted element is %s', async (description, componentInstance) => {
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+
+    result.measureElement(componentInstance);
+
+    await nextTick();
+    expect(mockVirtualizer.measureElement).not.toHaveBeenCalled();
+  });
+
+  it('measureElement always returns undefined', () => {
+    const result = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    const htmlElement = document.createElement('div');
+
+    const returnValue = result.measureElement(htmlElement);
+
+    expect(returnValue).toBeUndefined();
+  });
+
+  it('computes virtual rows from current virtualizer state', () => {
+    const items1 = [{ key: 'item-0', index: 0, start: 0, end: 50 }];
+    const items2 = [{ key: 'item-1', index: 1, start: 50, end: 100 }];
+
+    // Test with first set of items
+    mockVirtualizer.getVirtualItems.mockReturnValue(items1);
+    const result1 = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    expect(result1.virtualRows.value).toStrictEqual(items1);
+
+    // Test with second set of items (new composable instance)
+    mockVirtualizer.getVirtualItems.mockReturnValue(items2);
+    const result2 = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    expect(result2.virtualRows.value).toStrictEqual(items2);
+  });
+
+  it('computes padding values from current virtualizer state', () => {
+    const items1 = [{ key: 'item-0', index: 0, start: 0, end: 50 }];
+    const items2 = [{ key: 'item-5', index: 5, start: 250, end: 300 }];
+
+    mockVirtualizer.getTotalSize.mockReturnValue(500);
+
+    // Test with first set of items
+    mockVirtualizer.getVirtualItems.mockReturnValue(items1);
+    const result1 = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    expect(result1.paddingTop.value).toBe(0);
+    expect(result1.paddingBottom.value).toBe(450); // 500 - 50
+
+    // Test with second set of items (new composable instance)
+    mockVirtualizer.getVirtualItems.mockReturnValue(items2);
+    const result2 = withSetup(() => usePTableRowVirtualizer(mockOptions));
+    expect(result2.paddingTop.value).toBe(250);
+    expect(result2.paddingBottom.value).toBe(200); // 500 - 300
+  });
+});

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -83,6 +83,9 @@ export const WithIconSlot = {
 export const WithBackground = {
   render: (args) => ({
     components: { PTableHeaderCell },
+    setup() {
+      return { args };
+    },
     template: `
       <div class="w-52 px-2 py-2 bg-p-blue-10">
         <PTableHeaderCell v-bind="args" />

package/squirrel/components/p-table-sort/p-table-sort.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex items-center justify-between">
-      <div class="px-4 text-xs font-semibold text-p-gray-40">SORT</div>
+      <div class="px-4 text-xs font-semibold text-p-gray-40">{{ $t('squirrel.table_sort_sort') }}</div>
       <div
         :class="[
           'px-4 text-xs font-semibold text-primary',
@@ -11,7 +11,7 @@
         ]"
         @click="$emit('update:modelValue', SORTING_TYPES.NO_SORTING)"
       >
-        Clear
+        {{ $t('squirrel.table_sort_clear') }}
       </div>
     </div>
     <div class="mt-2">
@@ -23,7 +23,7 @@
           class="text-sm font-semibold text-p-purple-60"
           :class="{ 'text-primary': modelValue === SORTING_TYPES.ASC }"
         >
-          Sort ascending
+          {{ $t('squirrel.table_sort_sort_ascending') }}
         </div>
         <div>
           <img
@@ -41,7 +41,7 @@
           class="text-sm font-semibold text-p-purple-60"
           :class="{ 'text-primary': modelValue === SORTING_TYPES.DESC }"
         >
-          Sort descending
+          {{ $t('squirrel.table_sort_sort_descending') }}
         </div>
         <div>
           <img

package/squirrel/components/p-tabs-pills/p-tabs-pills.vue

@@ -1,7 +1,7 @@
 <template>
   <nav
     class="flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50"
-    aria-label="Tabs Pills"
+    :aria-label="$t('squirrel.tabs_pills_aria_label')"
     role="tablist"
     aria-orientation="horizontal"
   >

package/squirrel/index.spec.js

@@ -18,4 +18,9 @@ describe('index.ts module exports', () => {
     const utils = await import('@squirrel/utils');
     expect(utils).toBeDefined();
   });
+
+  it('should export from @squirrel/plugin', async () => {
+    const plugin = await import('@squirrel/plugin');
+    expect(plugin).toBeDefined();
+  });
 });

package/squirrel/index.ts

@@ -2,6 +2,7 @@ import '@squirrel/assets/squirrel.css';
 
 export * from '@squirrel/components';
 export * from '@squirrel/composables';
+export * from '@squirrel/plugin';
 export * from '@squirrel/tailwind/config';
 export * from '@squirrel/utils';
 export * from 'tailwind-variants';

package/squirrel/locales/en-US.json

@@ -0,0 +1,47 @@
+{
+  "squirrel": {
+    "close": "Close",
+    "action_bar_clear_all": "Clear All",
+    "select_list_items": "{count} item | {count} items",
+    "select_list_select_all": "Select all",
+    "select_list_select_all_filtered": "Select all filtered",
+    "select_list_clear_all": "Clear all",
+    "select_list_no_items_found": "No items found",
+    "dropdown_select_aria_label": "Dropdown select",
+    "dropdown_select_remove_item": "Remove item",
+    "dropdown_select_clear_selection": "Clear selection",
+    "dropdown_select_all_options_selected": "All options selected",
+    "dropdown_select_options": "option | options",
+    "dropdown_select_selected": "selected",
+    "dropdown_select_items": "@:squirrel.select_list_items",
+    "dropdown_select_select_all": "@:squirrel.select_list_select_all",
+    "dropdown_select_select_all_filtered": "@:squirrel.select_list_select_all_filtered",
+    "dropdown_select_clear_all": "@:squirrel.select_list_clear_all",
+    "dropdown_select_add": "Add",
+    "dropdown_select_no_items_found_type_to_add": "No items found. Type to add",
+    "dropdown_select_no_items_found": "@:squirrel.select_list_no_items_found",
+    "file_upload_dropzone": "dropzone",
+    "file_upload_drag_or_select": "Drag or {select}",
+    "file_upload_drop": "Drop {fileWord}",
+    "file_upload_max": "Max {count}",
+    "file_upload_one": "One",
+    "file_upload_files": "file | files",
+    "file_upload_select": "select {fileWord}",
+    "file_upload_with_size_less_than": "with size less than {maxSize} | with size less than {maxSize} each",
+    "file_upload_max_files_exceeded": "You can only upload a maximum of {count} {fileWord}.",
+    "file_upload_files_not_allowed": "{extension} files are not allowed.",
+    "file_upload_file_size_exceeded": "File size of {fileName} exceeds {maxSize}.",
+    "input_search_press_enter_to_search": "Press enter to search",
+    "input_search_clear_search_input": "Clear search input",
+    "pagination_go_to_previous_page": "go to the previous page",
+    "pagination_go_to_page": "go to page {page}",
+    "pagination_go_to_next_page": "go to the next page",
+    "pagination_info_showing_results": "Showing {from} to {to} of {count} results",
+    "pagination_info_no_results_found": "No results found",
+    "table_sort_sort": "SORT",
+    "table_sort_clear": "Clear",
+    "table_sort_sort_ascending": "Sort ascending",
+    "table_sort_sort_descending": "Sort descending",
+    "tabs_pills_aria_label": "Tabs Pills"
+  }
+}

package/squirrel/locales/fr-CA.json

@@ -0,0 +1,47 @@
+{
+  "squirrel": {
+    "close": "Fermer",
+    "action_bar_clear_all": "Effacer tout",
+    "select_list_items": "{count} élément | {count} éléments",
+    "select_list_select_all": "Tout sélectionner",
+    "select_list_select_all_filtered": "Sélectionner tout (filtré)",
+    "select_list_clear_all": "Effacer tout",
+    "select_list_no_items_found": "Aucun élément trouvé",
+    "dropdown_select_aria_label": "Liste déroulante",
+    "dropdown_select_remove_item": "Supprimer l'élément",
+    "dropdown_select_clear_selection": "Effacer la sélection",
+    "dropdown_select_all_options_selected": "Toutes les options sélectionnées",
+    "dropdown_select_options": "option | options",
+    "dropdown_select_selected": "sélectionné",
+    "dropdown_select_items": "@:squirrel.select_list_items",
+    "dropdown_select_select_all": "@:squirrel.select_list_select_all",
+    "dropdown_select_select_all_filtered": "@:squirrel.select_list_select_all_filtered",
+    "dropdown_select_clear_all": "@:squirrel.select_list_clear_all",
+    "dropdown_select_add": "Ajouter",
+    "dropdown_select_no_items_found_type_to_add": "Aucun élément trouvé. Tapez pour ajouter",
+    "dropdown_select_no_items_found": "@:squirrel.select_list_no_items_found",
+    "file_upload_dropzone": "zone de dépôt",
+    "file_upload_drag_or_select": "Glisser ou {select}",
+    "file_upload_drop": "Déposer {fileWord}",
+    "file_upload_max": "Max {count}",
+    "file_upload_one": "Un",
+    "file_upload_files": "fichier | fichiers",
+    "file_upload_select": "sélectionner {fileWord}",
+    "file_upload_with_size_less_than": "avec une taille inférieure à {maxSize} | avec une taille inférieure à {maxSize} chacun",
+    "file_upload_max_files_exceeded": "Vous ne pouvez télécharger qu'un maximum de {count} {fileWord}.",
+    "file_upload_files_not_allowed": "Les fichiers {extension} ne sont pas autorisés.",
+    "file_upload_file_size_exceeded": "La taille du fichier {fileName} dépasse {maxSize}.",
+    "input_search_press_enter_to_search": "Appuyez sur Entrée pour rechercher",
+    "input_search_clear_search_input": "Effacer la saisie de recherche",
+    "pagination_go_to_previous_page": "aller à la page précédente",
+    "pagination_go_to_page": "aller à la page {page}",
+    "pagination_go_to_next_page": "aller à la page suivante",
+    "pagination_info_showing_results": "Affichage de {from} à {to} sur {count} résultats",
+    "pagination_info_no_results_found": "Aucun résultat trouvé",
+    "table_sort_sort": "TRIER",
+    "table_sort_clear": "Effacer",
+    "table_sort_sort_ascending": "Trier par ordre croissant",
+    "table_sort_sort_descending": "Trier par ordre décroissant",
+    "tabs_pills_aria_label": "Onglets pilules"
+  }
+}

package/squirrel/plugin/index.spec.ts

@@ -0,0 +1,140 @@
+import enUS from '@squirrel/locales/en-US.json';
+import frCA from '@squirrel/locales/fr-CA.json';
+import { SquirrelPlugin } from '@squirrel/plugin/index';
+import { type App, createApp, nextTick, ref } from 'vue';
+
+type MockI18nMessages = {
+  [locale: string]: Record<string, unknown>;
+};
+
+// Mock i18n instance that matches the expected interface
+const createMockI18n = (initialLocale = 'en-US', initialMessages: MockI18nMessages = {}) => {
+  const locale = ref(initialLocale);
+  const messages: MockI18nMessages = { ...initialMessages };
+  const availableLocales = Object.keys(messages);
+
+  return {
+    global: {
+      locale,
+      mergeLocaleMessage: vi.fn((localeKey: string, newMessages: Record<string, unknown>) => {
+        if (!messages[localeKey]) {
+          messages[localeKey] = {};
+          availableLocales.push(localeKey);
+        }
+        Object.assign(messages[localeKey], newMessages);
+      }),
+      getLocaleMessage: vi.fn((localeKey: string) => {
+        return messages[localeKey] || {};
+      }),
+      availableLocales,
+    },
+  };
+};
+
+describe('SquirrelPlugin', () => {
+  let app: App;
+  let mockI18n: ReturnType<typeof createMockI18n>;
+
+  beforeEach(() => {
+    app = createApp({});
+    mockI18n = createMockI18n();
+  });
+
+  it('should install without errors', () => {
+    expect(() => {
+      app.use(SquirrelPlugin, mockI18n);
+    }).not.toThrow();
+  });
+
+  it('should merge en-US messages when locale is en-US', async () => {
+    mockI18n = createMockI18n('en-US', { 'en-US': {} });
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('en-US', enUS);
+  });
+
+  it('should merge fr-CA messages when locale is fr-CA', async () => {
+    mockI18n = createMockI18n('fr-CA', { 'fr-CA': {} });
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('fr-CA', frCA);
+  });
+
+  it('should not merge messages for unsupported locales', async () => {
+    mockI18n = createMockI18n('es-ES', { 'es-ES': {} });
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).not.toHaveBeenCalled();
+  });
+
+  it('should not merge messages when squirrel key already exists', async () => {
+    mockI18n = createMockI18n('en-US', {
+      'en-US': { squirrel: { someKey: 'someValue' } },
+    });
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).not.toHaveBeenCalled();
+  });
+
+  it('should react to locale changes', async () => {
+    // Only have en-US available initially, so watcher doesn't get unwatched
+    mockI18n = createMockI18n('en-US', { 'en-US': {}, 'fr-CA': {} });
+    mockI18n.global.availableLocales = ['en-US']; // Only one locale available
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('en-US', enUS);
+
+    // Clear the mock to test the next call
+    mockI18n.global.mergeLocaleMessage.mockClear();
+
+    // Add fr-CA to available locales and change to it
+    mockI18n.global.availableLocales.push('fr-CA');
+    mockI18n.global.locale.value = 'fr-CA';
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('fr-CA', frCA);
+  });
+
+  it('should stop watching when all Squirrel locales are available', async () => {
+    // Create mock with both locales available initially
+    mockI18n = createMockI18n('en-US', { 'en-US': {}, 'fr-CA': {} });
+    mockI18n.global.availableLocales = ['en-US', 'fr-CA'];
+
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    // Should merge the current locale
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('en-US', enUS);
+
+    // Clear the mock
+    mockI18n.global.mergeLocaleMessage.mockClear();
+
+    // Change locale after unwatching should not trigger more merges
+    mockI18n.global.locale.value = 'fr-CA';
+    await nextTick();
+
+    // Should not merge again since watcher was stopped
+    expect(mockI18n.global.mergeLocaleMessage).not.toHaveBeenCalled();
+  });
+
+  it('should handle empty existing messages', async () => {
+    mockI18n = createMockI18n('en-US', { 'en-US': {} });
+    mockI18n.global.getLocaleMessage = vi.fn().mockReturnValue({});
+
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('en-US', enUS);
+  });
+});

package/squirrel/plugin/index.ts

@@ -0,0 +1,54 @@
+import enUS from '@squirrel/locales/en-US.json';
+import frCA from '@squirrel/locales/fr-CA.json';
+import { type App, nextTick, type Plugin, watchEffect } from 'vue';
+
+type I18nInstance = {
+  global: {
+    locale: { value: string };
+    mergeLocaleMessage(locale: string, messages: Record<string, unknown>): void;
+    getLocaleMessage(locale: string): Record<string, unknown>;
+    availableLocales: string[];
+  };
+};
+
+const squirrelMessages = {
+  'en-US': enUS,
+  'fr-CA': frCA,
+} as const;
+
+type SquirrelLocale = keyof typeof squirrelMessages;
+
+const isSquirrelLocale = (locale: string): locale is SquirrelLocale => {
+  return locale in squirrelMessages;
+};
+
+/**
+ * Squirrel Vue Plugin for i18n integration.
+ *
+ * This plugin merges Squirrel's translations with the consumer's existing i18n instance.
+ * This ensures there's only one i18n instance and no component/directive conflicts.
+ *
+ * @param app - Vue application instance
+ * @param i18n - The consumer's i18n instance with mergeLocaleMessage support
+ */
+export const SquirrelPlugin: Plugin = {
+  install(app: App, i18n: I18nInstance) {
+    const unwatch = watchEffect(() => {
+      const currentLocale = i18n.global.locale.value;
+
+      if (isSquirrelLocale(currentLocale)) {
+        const existingMessages = i18n.global.getLocaleMessage(currentLocale);
+
+        if (!('squirrel' in existingMessages)) {
+          i18n.global.mergeLocaleMessage(currentLocale, squirrelMessages[currentLocale]);
+        }
+
+        if (Object.keys(squirrelMessages).every((locale) => i18n.global.availableLocales.includes(locale))) {
+          nextTick(() => {
+            unwatch();
+          });
+        }
+      }
+    });
+  },
+};

package/squirrel/utils/listKeyboardNavigation.spec.js

@@ -206,4 +206,62 @@ describe('listKeyboardNavigation', () => {
     navigationSvc2.destroy();
     consoleWarnSpy.mockRestore();
   });
+
+  it('handles arrow navigation when no items exist', () => {
+    // Create empty container
+    document.body.innerHTML = '<div class="empty-dropdown-menu"></div>';
+
+    const emptyContainer = document.querySelector('.empty-dropdown-menu');
+    const navigationSvc = setupListKeyboardNavigation({
+      itemContainer: emptyContainer,
+    });
+
+    const event = new window.KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+      keyCode: 40,
+      bubbles: true,
+      target: emptyContainer,
+    });
+
+    // Should not throw error when no items exist (covers line 86)
+    expect(() => navigationSvc.listKeydown(event)).not.toThrow();
+
+    navigationSvc.destroy();
+  });
+
+  it('scrolls elements into view when they are outside container bounds', () => {
+    const scrollIntoViewMock = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', { value: scrollIntoViewMock, writable: true });
+
+    const navigationSvc = createTestSvc();
+    const container = document.querySelector('.dropdown-menu');
+    const items = navigationSvc.getItems();
+
+    vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({ top: 100, bottom: 200 });
+
+    // Element above bounds
+    vi.spyOn(items[0], 'getBoundingClientRect').mockReturnValue({ top: 50, bottom: 80 });
+    navigationSvc.listKeydown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'auto', block: 'nearest', inline: 'start' });
+
+    // Element below bounds
+    vi.spyOn(items[1], 'getBoundingClientRect').mockReturnValue({ top: 220, bottom: 250 });
+    navigationSvc.listKeydown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'auto', block: 'nearest', inline: 'end' });
+
+    navigationSvc.destroy();
+  });
+
+  it('handles adjustScroll when container is invalid', async () => {
+    const domUtils = await vi.importActual('@squirrel/utils/dom');
+    const isElementSpy = vi.spyOn(domUtils, 'isElement').mockReturnValue(false);
+
+    const navigationSvc = createTestSvc();
+
+    // Navigation should handle invalid container gracefully (covers line 133)
+    expect(() => navigationSvc.listKeydown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))).not.toThrow();
+
+    isElementSpy.mockRestore();
+    navigationSvc.destroy();
+  });
 });