@ship-ui/core 0.22.15 → 0.22.17

package/fesm2022/ship-ui-core-ship-table.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, input, signal, HostListener, Directive, computed, output, model, contentChild, viewChild, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { inject, ElementRef, Renderer2, Injector, signal, input, effect, HostListener, Directive, computed, output, model, contentChild, viewChild, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { shipComponentClasses, observeChildren } from '@ship-ui/core';
 import { ShipA11yKeybindingsService } from '@ship-ui/core/ship-a11y-keybindings';
 import { ShipChip } from '@ship-ui/core/ship-chip';
@@ -8,10 +8,24 @@ import { ShipIcon } from '@ship-ui/core/ship-icon';
 import { ShipProgressBar } from '@ship-ui/core/ship-progress-bar';
 
 class ShipResize {
+    #el;
+    #renderer;
+    #table;
+    #keybindings;
+    #injector;
+    #sort;
+    #startX;
+    #startWidth;
+    #resizing;
+    #animationFrameRequest;
     constructor() {
         this.#el = inject(ElementRef);
         this.#renderer = inject(Renderer2);
         this.#table = inject(ShipTable);
+        this.#keybindings = inject(ShipA11yKeybindingsService);
+        this.#injector = inject(Injector);
+        this.#sort = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#sort" }] : /* istanbul ignore next */ []));
         this.resizable = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
         this.minWidth = input(50, /* @ts-ignore */
@@ -21,25 +35,97 @@ class ShipResize {
         this.resizingClass = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizingClass" }] : /* istanbul ignore next */ []));
         this.#resizing = false;
-        this.#animationFrameRequest = null; // Store request ID
+        this.#animationFrameRequest = null;
+        effect(() => {
+            if (this.#sort())
+                return;
+            const hostEl = this.#el.nativeElement;
+            if (this.resizable()) {
+                const parts = [];
+                const decAction = 'table.column-resize-decrease';
+                const decShortcut = this.#keybindings.getShortcut(decAction);
+                if (decShortcut) {
+                    parts.push(this.#keybindings.getDisplayShortcut(decAction) || decShortcut);
+                }
+                const incAction = 'table.column-resize-increase';
+                const incShortcut = this.#keybindings.getShortcut(incAction);
+                if (incShortcut) {
+                    parts.push(this.#keybindings.getDisplayShortcut(incAction) || incShortcut);
+                }
+                if (parts.length > 0) {
+                    this.#renderer.setAttribute(hostEl, 'aria-keyshortcuts', parts.join(', '));
+                }
+                else {
+                    this.#renderer.removeAttribute(hostEl, 'aria-keyshortcuts');
+                }
+            }
+            else {
+                this.#renderer.removeAttribute(hostEl, 'aria-keyshortcuts');
+            }
+        });
     }
-    #el;
-    #renderer;
-    #table;
-    #startX;
-    #startWidth;
-    #resizing;
-    #animationFrameRequest; // Store request ID
     ngOnInit() {
         if (!this.#table) {
             console.error('shTableResize directive must be used within a sh-table component.');
             return;
         }
+        const hostEl = this.#el.nativeElement;
+        this.#sort.set(this.#injector.get(ShipSort, null, { optional: true, self: true }));
         if (this.resizable()) {
             const resizer = this.#renderer.createElement('div');
             this.#renderer.addClass(resizer, 'sh-resizer');
-            this.#renderer.appendChild(this.#el.nativeElement, resizer);
+            this.#renderer.appendChild(hostEl, resizer);
             this.#renderer.listen(resizer, 'mousedown', this.#onMouseDown.bind(this));
+            if (!hostEl.hasAttribute('role')) {
+                this.#renderer.setAttribute(hostEl, 'role', 'columnheader');
+            }
+            if (!this.#sort() && !hostEl.hasAttribute('tabindex')) {
+                this.#renderer.setAttribute(hostEl, 'tabindex', '0');
+            }
+        }
+    }
+    onKeyDown(event) {
+        if (!this.resizable())
+            return;
+        const target = event.target;
+        const host = this.#el.nativeElement;
+        if (target !== host &&
+            (target.tagName === 'BUTTON' ||
+                target.tagName === 'INPUT' ||
+                target.tagName === 'SELECT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.closest('button, input, select, textarea, a') !== null ||
+                target.closest('[role="button"], [role="checkbox"], [role="menuitem"]') !== null)) {
+            return;
+        }
+        if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && !event.shiftKey) {
+            if (!this.#sort()) {
+                const parentRow = host.parentElement;
+                if (parentRow) {
+                    const headers = Array.from(parentRow.querySelectorAll('th')).filter((el) => el.getAttribute('tabindex') === '0' || el.hasAttribute('shSort') || el.hasAttribute('shResize'));
+                    const currentIndex = headers.indexOf(host);
+                    if (currentIndex !== -1) {
+                        const nextIndex = event.key === 'ArrowRight' ? currentIndex + 1 : currentIndex - 1;
+                        if (nextIndex >= 0 && nextIndex < headers.length) {
+                            event.preventDefault();
+                            headers[nextIndex].focus();
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        const isDecrease = this.#keybindings.matches(event, 'table.column-resize-decrease');
+        const isIncrease = this.#keybindings.matches(event, 'table.column-resize-increase');
+        if (isDecrease || isIncrease) {
+            event.preventDefault();
+            event.stopPropagation();
+            const currentWidth = this.#el.nativeElement.offsetWidth;
+            const step = 10;
+            const targetWidth = isDecrease ? currentWidth - step : currentWidth + step;
+            const constrainedWidth = Math.max(this.minWidth(), this.maxWidth() ? Math.min(targetWidth, this.maxWidth() ?? targetWidth) : targetWidth);
+            this.#renderer.setAttribute(this.#el.nativeElement, 'size', `${constrainedWidth}px`);
+            this.#table.updateColumnSizes();
         }
     }
     onMouseMove(event) {
@@ -97,7 +183,7 @@ class ShipResize {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipResize, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipResize, isStandalone: true, selector: "[shResize]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)" }, properties: { "class.resizing": "resizingClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipResize, isStandalone: true, selector: "[shResize]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)" }, properties: { "class.resizing": "resizingClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipResize, decorators: [{
             type: Directive,
@@ -108,7 +194,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         '[class.resizing]': 'resizingClass()',
                     },
                 }]
-        }], propDecorators: { resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], onMouseMove: [{
+        }], ctorParameters: () => [], propDecorators: { resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
             }], onMouseUp: [{
@@ -122,8 +211,42 @@ class ShipSort {
     constructor() {
         this.#table = inject(ShipTable);
         this.#keybindings = inject(ShipA11yKeybindingsService);
+        this.#injector = inject(Injector);
+        this.#el = inject(ElementRef);
+        this.#resize = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#resize" }] : /* istanbul ignore next */ []));
         this.shSort = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "shSort" }] : /* istanbul ignore next */ []));
+        this.tabIndex = computed(() => {
+            const resize = this.#resize();
+            return this.shSort() || (resize && resize.resizable()) ? '0' : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        this.ariaKeyshortcuts = computed(() => {
+            const parts = [];
+            const resize = this.#resize();
+            if (this.shSort()) {
+                const action = 'table.sort';
+                const shortcut = this.#keybindings.getShortcut(action);
+                if (shortcut) {
+                    parts.push(this.#keybindings.getDisplayShortcut(action) || shortcut);
+                }
+            }
+            if (resize && resize.resizable()) {
+                const decAction = 'table.column-resize-decrease';
+                const decShortcut = this.#keybindings.getShortcut(decAction);
+                if (decShortcut) {
+                    parts.push(this.#keybindings.getDisplayShortcut(decAction) || decShortcut);
+                }
+                const incAction = 'table.column-resize-increase';
+                const incShortcut = this.#keybindings.getShortcut(incAction);
+                if (incShortcut) {
+                    parts.push(this.#keybindings.getDisplayShortcut(incAction) || incShortcut);
+                }
+            }
+            return parts.length > 0 ? parts.join(', ') : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaKeyshortcuts" }] : /* istanbul ignore next */ []));
         this.sortAsc = computed(() => {
             const currentSort = this.#table.sortByColumn();
             const thisColumn = this.shSort();
@@ -151,13 +274,59 @@ class ShipSort {
     }
     #table;
     #keybindings;
+    #injector;
+    #el;
+    #resize;
+    ngOnInit() {
+        // Resolve ShipResize lazily to avoid circular DI instantiation issues
+        this.#resize.set(this.#injector.get(ShipResize, null, { optional: true, self: true }));
+    }
     onKeyDown(event) {
-        if (this.shSort() && this.#keybindings.matches(event, 'table.sort')) {
+        if (!this.shSort())
+            return;
+        const target = event.target;
+        const host = this.#el.nativeElement;
+        if (target !== host &&
+            (target.tagName === 'BUTTON' ||
+                target.tagName === 'INPUT' ||
+                target.tagName === 'SELECT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.closest('button, input, select, textarea, a') !== null ||
+                target.closest('[role="button"], [role="checkbox"], [role="menuitem"]') !== null)) {
+            return;
+        }
+        if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && !event.shiftKey) {
+            const parentRow = host.parentElement;
+            if (parentRow) {
+                const headers = Array.from(parentRow.querySelectorAll('th')).filter((el) => el.getAttribute('tabindex') === '0' || el.hasAttribute('shSort') || el.hasAttribute('shResize'));
+                const currentIndex = headers.indexOf(host);
+                if (currentIndex !== -1) {
+                    const nextIndex = event.key === 'ArrowRight' ? currentIndex + 1 : currentIndex - 1;
+                    if (nextIndex >= 0 && nextIndex < headers.length) {
+                        event.preventDefault();
+                        headers[nextIndex].focus();
+                        return;
+                    }
+                }
+            }
+        }
+        if (this.#keybindings.matches(event, 'table.sort')) {
             this.toggleSort(event);
         }
     }
     toggleSort(event) {
         if (event) {
+            const target = event.target;
+            const host = this.#el.nativeElement;
+            if (target !== host &&
+                (target.tagName === 'BUTTON' ||
+                    target.tagName === 'INPUT' ||
+                    target.tagName === 'SELECT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.closest('button, input, select, textarea, a') !== null ||
+                    target.closest('[role="button"], [role="checkbox"], [role="menuitem"]') !== null)) {
+                return;
+            }
             event.preventDefault();
         }
         if (this.#table.resizing()) {
@@ -169,7 +338,7 @@ class ShipSort {
         this.#table.toggleSort(sortCol);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSort, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSort, isStandalone: true, selector: "[shSort]", inputs: { shSort: { classPropertyName: "shSort", publicName: "shSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "columnheader" }, listeners: { "click": "shSort() ? toggleSort() : null", "keydown": "onKeyDown($event)" }, properties: { "class.sortable": "!!shSort()", "attr.tabindex": "shSort() ? \"0\" : null", "attr.aria-sort": "shSort() ? ariaSort() : null", "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSort, isStandalone: true, selector: "[shSort]", inputs: { shSort: { classPropertyName: "shSort", publicName: "shSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "columnheader" }, listeners: { "click": "shSort() ? toggleSort($event) : null", "keydown": "onKeyDown($event)" }, properties: { "class.sortable": "!!shSort()", "attr.tabindex": "tabIndex()", "attr.aria-sort": "shSort() ? ariaSort() : null", "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()", "attr.aria-keyshortcuts": "ariaKeyshortcuts()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSort, decorators: [{
             type: Directive,
@@ -179,11 +348,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     host: {
                         role: 'columnheader',
                         '[class.sortable]': '!!shSort()',
-                        '[attr.tabindex]': 'shSort() ? "0" : null',
-                        '(click)': 'shSort() ? toggleSort() : null',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '(click)': 'shSort() ? toggleSort($event) : null',
                         '[attr.aria-sort]': 'shSort() ? ariaSort() : null',
                         '[class.sort-asc]': 'sortAsc()',
                         '[class.sort-desc]': 'sortDesc()',
+                        '[attr.aria-keyshortcuts]': 'ariaKeyshortcuts()',
                     },
                 }]
         }], propDecorators: { shSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSort", required: false }] }], onKeyDown: [{
@@ -228,6 +398,12 @@ const SCROLL_TOLERANCE = 1.5;
 class ShipTable {
     constructor() {
         this.#el = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.#keybindings = inject(ShipA11yKeybindingsService);
+        this.grid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.role = computed(() => (this.grid() ? 'grid' : 'table'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
         this.loading = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.data = input([], /* @ts-ignore */
@@ -288,6 +464,64 @@ class ShipTable {
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyEffect" }] : /* istanbul ignore next */ []));
+        this.gridSetupEffect = effect(() => {
+            const gridActive = this.grid();
+            const dataVal = this.data();
+            const colSignal = this.columns.signal();
+            untracked(() => {
+                const host = this.#el.nativeElement;
+                const allCells = host.querySelectorAll('th, td');
+                if (gridActive) {
+                    if (allCells.length === 0)
+                        return;
+                    let hasZero = false;
+                    allCells.forEach((cell) => {
+                        if (cell.getAttribute('tabindex') === '0') {
+                            hasZero = true;
+                        }
+                    });
+                    if (!hasZero) {
+                        this.#renderer.setAttribute(allCells[0], 'tabindex', '0');
+                    }
+                    allCells.forEach((cell) => {
+                        if (cell.getAttribute('tabindex') !== '0') {
+                            this.#renderer.setAttribute(cell, 'tabindex', '-1');
+                        }
+                        if (!cell.hasAttribute('role')) {
+                            this.#renderer.setAttribute(cell, 'role', cell.tagName === 'TD' ? 'gridcell' : 'columnheader');
+                        }
+                    });
+                    const allRows = host.querySelectorAll('tr');
+                    allRows.forEach((row) => {
+                        if (!row.hasAttribute('role')) {
+                            this.#renderer.setAttribute(row, 'role', 'row');
+                        }
+                    });
+                }
+                else {
+                    // Clean up
+                    allCells.forEach((cell) => {
+                        const isHeader = cell.tagName === 'TH';
+                        if (isHeader) {
+                            const isInteractiveHeader = cell.classList.contains('sortable') ||
+                                cell.querySelector('.sh-resizer') !== null ||
+                                cell.hasAttribute('aria-keyshortcuts');
+                            if (isInteractiveHeader) {
+                                this.#renderer.setAttribute(cell, 'tabindex', '0');
+                            }
+                            else {
+                                this.#renderer.removeAttribute(cell, 'tabindex');
+                            }
+                        }
+                        else {
+                            // Remove tabindex from td (data cells)
+                            this.#renderer.removeAttribute(cell, 'tabindex');
+                        }
+                    });
+                }
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridSetupEffect" }] : /* istanbul ignore next */ []));
         this.resizing = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
         this.sizeTrigger = signal(true, /* @ts-ignore */
@@ -399,6 +633,8 @@ class ShipTable {
         ...(ngDevMode ? [{ debugName: "e" }] : /* istanbul ignore next */ []));
     }
     #el;
+    #renderer;
+    #keybindings;
     #initialData;
     #initialDataSet;
     updateColumnSizes() {
@@ -413,6 +649,166 @@ class ShipTable {
     ngAfterViewInit() {
         queueMicrotask(() => this.#checkScroll());
     }
+    onFocusIn(event) {
+        if (!this.grid())
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        const cell = target.tagName === 'TH' || target.tagName === 'TD' ? target : target.closest('th, td');
+        if (cell) {
+            // Set roles dynamically for cells and rows if not present
+            if (!cell.hasAttribute('role')) {
+                this.#renderer.setAttribute(cell, 'role', cell.tagName === 'TD' ? 'gridcell' : 'columnheader');
+            }
+            const parentRow = cell.parentElement;
+            if (parentRow && !parentRow.hasAttribute('role')) {
+                this.#renderer.setAttribute(parentRow, 'role', 'row');
+            }
+            // Set tabindex="0" on focused cell and tabindex="-1" on all other cells
+            this.#renderer.setAttribute(cell, 'tabindex', '0');
+            const allCells = this.#el.nativeElement.querySelectorAll('th, td');
+            allCells.forEach((c) => {
+                if (c !== cell) {
+                    this.#renderer.setAttribute(c, 'tabindex', '-1');
+                }
+            });
+        }
+    }
+    onGridKeyDown(event) {
+        if (!this.grid())
+            return;
+        if (event.key === 'Tab') {
+            const target = event.target;
+            const cell = target.tagName === 'TH' || target.tagName === 'TD' ? target : target.closest('th, td');
+            if (!cell)
+                return;
+            const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+            const focusableChildren = Array.from(cell.querySelectorAll(focusableSelectors));
+            const row = cell.parentElement;
+            if (!row || row.tagName !== 'TR')
+                return;
+            const cellsInRow = Array.from(row.querySelectorAll('th, td'));
+            const currentColIndex = cellsInRow.indexOf(cell);
+            if (currentColIndex === -1)
+                return;
+            if (!event.shiftKey) {
+                // Forward Tab
+                const isLastChild = focusableChildren.length === 0 || target === focusableChildren[focusableChildren.length - 1];
+                const isCellSelf = target === cell;
+                if (isLastChild && !isCellSelf) {
+                    // Move to next cell in row
+                    if (currentColIndex < cellsInRow.length - 1) {
+                        event.preventDefault();
+                        this.#focusGridCell(cellsInRow[currentColIndex + 1]);
+                    }
+                }
+                else if (isCellSelf && focusableChildren.length === 0) {
+                    // Move to next cell in row
+                    if (currentColIndex < cellsInRow.length - 1) {
+                        event.preventDefault();
+                        this.#focusGridCell(cellsInRow[currentColIndex + 1]);
+                    }
+                }
+            }
+            else {
+                // Shift + Tab (Backward)
+                const isFirstChild = focusableChildren.length > 0 && target === focusableChildren[0];
+                const isCellSelf = target === cell;
+                if (isFirstChild) {
+                    event.preventDefault();
+                    this.#focusGridCell(cell);
+                }
+                else if (isCellSelf) {
+                    if (currentColIndex > 0) {
+                        event.preventDefault();
+                        const prevCell = cellsInRow[currentColIndex - 1];
+                        const prevFocusableChildren = Array.from(prevCell.querySelectorAll(focusableSelectors));
+                        if (prevFocusableChildren.length > 0) {
+                            this.#focusGridCell(prevCell);
+                            prevFocusableChildren[prevFocusableChildren.length - 1].focus();
+                        }
+                        else {
+                            this.#focusGridCell(prevCell);
+                        }
+                    }
+                }
+            }
+            return;
+        }
+        const isUp = this.#keybindings.matches(event, 'grid.focus-up');
+        const isDown = this.#keybindings.matches(event, 'grid.focus-down');
+        const isLeft = this.#keybindings.matches(event, 'grid.focus-left');
+        const isRight = this.#keybindings.matches(event, 'grid.focus-right');
+        const isFirst = this.#keybindings.matches(event, 'grid.focus-first');
+        const isLast = this.#keybindings.matches(event, 'grid.focus-last');
+        if (!isUp && !isDown && !isLeft && !isRight && !isFirst && !isLast)
+            return;
+        const target = event.target;
+        if (target.tagName !== 'TH' && target.tagName !== 'TD') {
+            // Focus is inside a child control, let them operate normally
+            return;
+        }
+        const row = target.parentElement;
+        if (!row || row.tagName !== 'TR')
+            return;
+        const allRows = Array.from(this.#el.nativeElement.querySelectorAll('tr'));
+        const currentRowIndex = allRows.indexOf(row);
+        if (currentRowIndex === -1)
+            return;
+        const cellsInRow = Array.from(row.querySelectorAll('th, td'));
+        const currentColIndex = cellsInRow.indexOf(target);
+        if (currentColIndex === -1)
+            return;
+        let targetRowIndex = currentRowIndex;
+        let targetColIndex = currentColIndex;
+        if (isUp) {
+            targetRowIndex = currentRowIndex - 1;
+        }
+        else if (isDown) {
+            targetRowIndex = currentRowIndex + 1;
+        }
+        else if (isLeft) {
+            targetColIndex = currentColIndex - 1;
+        }
+        else if (isRight) {
+            targetColIndex = currentColIndex + 1;
+        }
+        else if (isFirst) {
+            targetColIndex = 0;
+        }
+        else if (isLast) {
+            targetColIndex = cellsInRow.length - 1;
+        }
+        if (targetRowIndex !== currentRowIndex) {
+            const targetRow = allRows[targetRowIndex];
+            if (targetRow) {
+                const targetCells = Array.from(targetRow.querySelectorAll('th, td'));
+                const targetCell = targetCells[Math.min(currentColIndex, targetCells.length - 1)];
+                if (targetCell) {
+                    event.preventDefault();
+                    this.#focusGridCell(targetCell);
+                }
+            }
+        }
+        else if (targetColIndex !== currentColIndex) {
+            const targetCell = cellsInRow[targetColIndex];
+            if (targetCell) {
+                event.preventDefault();
+                this.#focusGridCell(targetCell);
+            }
+        }
+    }
+    #focusGridCell(cell) {
+        this.#renderer.setAttribute(cell, 'tabindex', '0');
+        cell.focus();
+        const allCells = this.#el.nativeElement.querySelectorAll('th, td');
+        allCells.forEach((c) => {
+            if (c !== cell) {
+                this.#renderer.setAttribute(c, 'tabindex', '-1');
+            }
+        });
+    }
     toggleSort(column) {
         const currentSort = this.sortByColumn();
         const sortDir = currentSort === column ? `-${column}` : currentSort === `-${column}` ? null : column;
@@ -450,7 +846,7 @@ class ShipTable {
         this.canScrollY.set(canScrollY);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { attributes: { "role": "table" }, listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "attr.aria-busy": "loading()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "class": "hostClasses()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, queries: [{ propertyName: "content", first: true, predicate: ShipTableContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "theadLocal", first: true, predicate: ["theadLocal"], descendants: true, isSignal: true }, { propertyName: "tbodyLocal", first: true, predicate: ["tbodyLocal"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)", "focusin": "onFocusIn($event)", "keydown": "onGridKeyDown($event)" }, properties: { "attr.role": "role()", "attr.aria-busy": "loading()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "class": "hostClasses()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, queries: [{ propertyName: "content", first: true, predicate: ShipTableContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "theadLocal", first: true, predicate: ["theadLocal"], descendants: true, isSignal: true }, { propertyName: "tbodyLocal", first: true, predicate: ["tbodyLocal"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="actionbar">
       <ng-content select="[actionbar]:not([align-right])" />
       <div class="actionbar-right">
@@ -480,7 +876,7 @@ class ShipTable {
         <ng-content select="[table-no-rows]" />
       </div>
     }
-  `, isInline: true, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:auto}sh-table th:hover,sh-table th.resizing{z-index:120}sh-table th:has(.sh-resizer){position:relative}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:.75rem;height:100%;position:absolute;top:0;right:-.375rem;cursor:col-resize;z-index:110}sh-table th .sh-resizer:after{content:\"\";position:absolute;top:.3125rem;bottom:.3125rem;border-radius:.125rem;right:.3125rem;width:.1875rem;background-color:var(--base-4);transition:width .15s ease,background-color .15s ease,right .15s ease}sh-table th .sh-resizer:hover:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table th.resizing .sh-resizer:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"], dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:auto}sh-table th:focus-visible{outline:.125rem solid var(--primary-8);outline-offset:-.125rem}sh-table th:hover,sh-table th.resizing{z-index:10}sh-table th:has(.sh-resizer){position:relative;z-index:2}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:.75rem;height:100%;position:absolute;top:0;right:-.375rem;cursor:col-resize;z-index:5}sh-table th .sh-resizer:after{content:\"\";position:absolute;top:.3125rem;bottom:.3125rem;border-radius:.125rem;left:50%;transform:translate(-50%);width:.1875rem;background-color:var(--base-4);transition:width .15s ease,background-color .15s ease}sh-table th .sh-resizer:hover:after{width:.3125rem;background-color:var(--primary-8)}@media(pointer:coarse){sh-table th .sh-resizer{width:1.5rem;right:-.75rem}}sh-table th.resizing .sh-resizer:after{width:.3125rem;background-color:var(--primary-8)}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"], dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTable, decorators: [{
             type: Component,
@@ -515,7 +911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
       </div>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        role: 'table',
+                        '[attr.role]': 'role()',
                         '[attr.aria-busy]': 'loading()',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.aria-labelledby]': 'ariaLabelledby()',
@@ -529,10 +925,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         '[class.scrolled-x-end]': 'scrollXState() === 1',
                         '[class.scrolled-y]': 'scrollYState() >= 0',
                         '[class.scrolled-y-end]': 'scrollYState() === 1',
-                    }, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:auto}sh-table th:hover,sh-table th.resizing{z-index:120}sh-table th:has(.sh-resizer){position:relative}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:.75rem;height:100%;position:absolute;top:0;right:-.375rem;cursor:col-resize;z-index:110}sh-table th .sh-resizer:after{content:\"\";position:absolute;top:.3125rem;bottom:.3125rem;border-radius:.125rem;right:.3125rem;width:.1875rem;background-color:var(--base-4);transition:width .15s ease,background-color .15s ease,right .15s ease}sh-table th .sh-resizer:hover:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table th.resizing .sh-resizer:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"] }]
-        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], sortByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByColumn", required: false }] }, { type: i0.Output, args: ["sortByColumnChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ShipTableContent), { isSignal: true }] }], theadLocal: [{ type: i0.ViewChild, args: ['theadLocal', { isSignal: true }] }], tbodyLocal: [{ type: i0.ViewChild, args: ['tbodyLocal', { isSignal: true }] }], onResize: [{
+                    }, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:auto}sh-table th:focus-visible{outline:.125rem solid var(--primary-8);outline-offset:-.125rem}sh-table th:hover,sh-table th.resizing{z-index:10}sh-table th:has(.sh-resizer){position:relative;z-index:2}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:.75rem;height:100%;position:absolute;top:0;right:-.375rem;cursor:col-resize;z-index:5}sh-table th .sh-resizer:after{content:\"\";position:absolute;top:.3125rem;bottom:.3125rem;border-radius:.125rem;left:50%;transform:translate(-50%);width:.1875rem;background-color:var(--base-4);transition:width .15s ease,background-color .15s ease}sh-table th .sh-resizer:hover:after{width:.3125rem;background-color:var(--primary-8)}@media(pointer:coarse){sh-table th .sh-resizer{width:1.5rem;right:-.75rem}}sh-table th.resizing .sh-resizer:after{width:.3125rem;background-color:var(--primary-8)}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"] }]
+        }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], sortByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByColumn", required: false }] }, { type: i0.Output, args: ["sortByColumnChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ShipTableContent), { isSignal: true }] }], theadLocal: [{ type: i0.ViewChild, args: ['theadLocal', { isSignal: true }] }], tbodyLocal: [{ type: i0.ViewChild, args: ['tbodyLocal', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onGridKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 class ShipTableContent {
     constructor() {
@@ -542,6 +944,7 @@ class ShipTableContent {
         this.data = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.sortByColumn = this.#table.sortByColumn;
+        this.grid = this.#table.grid;
         this.thead = viewChild('thead', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "thead" }] : /* istanbul ignore next */ []));
         this.tbody = viewChild('tbody', /* @ts-ignore */
@@ -607,7 +1010,7 @@ class ShipTableContent {
               [class.sticky-end]="col.sticky === 'end'"
               [id]="col.id + '-' + rowIndex"
               [attr.aria-labelledby]="col.id + ' ' + col.id + '-' + rowIndex"
-              [attr.role]="col.rowHeader ? 'rowheader' : 'cell'">
+              [attr.role]="col.rowHeader ? 'rowheader' : grid() ? 'gridcell' : 'cell'">
               @if (col.cellTemplate) {
                 <ng-container
                   [ngTemplateOutlet]="col.cellTemplate"
@@ -693,7 +1096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
               [class.sticky-end]="col.sticky === 'end'"
               [id]="col.id + '-' + rowIndex"
               [attr.aria-labelledby]="col.id + ' ' + col.id + '-' + rowIndex"
-              [attr.role]="col.rowHeader ? 'rowheader' : 'cell'">
+              [attr.role]="col.rowHeader ? 'rowheader' : grid() ? 'gridcell' : 'cell'">
               @if (col.cellTemplate) {
                 <ng-container
                   [ngTemplateOutlet]="col.cellTemplate"