@blueprintui/cli 0.0.6 → 0.0.9

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/i18n.controller.d.ts

@@ -0,0 +1,19 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { I18nStrings } from '../services/i18n.service.js';
+export declare function i18n<T extends ReactiveElement & {
+    i18n: Partial<I18nStrings>;
+}>(config: {
+    key: keyof I18nStrings;
+}): ClassDecorator;
+export declare class I18nController<T extends ReactiveElement & {
+    i18n: Partial<I18nStrings>;
+}> implements ReactiveController {
+    #private;
+    private host;
+    private config;
+    constructor(host: T, config: {
+        key: keyof I18nStrings;
+    });
+    hostConnected(): void;
+    hostUpdated(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/i18n.controller.js

@@ -0,0 +1,40 @@
+import { GlobalStateService } from '../services/global.service.js';
+import { I18nService } from '../services/i18n.service.js';
+import { mergeObjects } from '../utils/traversal.js';
+import { matchInterpolate } from '../utils/i18n.js';
+export function i18n(config) {
+    return (target) => target.addInitializer((instance) => new I18nController(instance, config));
+}
+export class I18nController {
+    host;
+    config;
+    #i18n = {};
+    constructor(host, config) {
+        this.host = host;
+        this.config = config;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        GlobalStateService.stateUpdate.subscribe(update => {
+            if (update.type === 'i18nRegistry') {
+                this.#updateProp();
+            }
+        });
+    }
+    hostUpdated() {
+        if (this.#firstUpdated && !this.host.i18n?.__set) {
+            this.#i18n = this.host.i18n;
+            this.#updateProp();
+        }
+    }
+    #updateProp() {
+        const i18nObj = mergeObjects(I18nService.keys[this.config.key], this.#i18n);
+        this.host.i18n = { ...JSON.parse(matchInterpolate(JSON.stringify(i18nObj), this.host)), __set: true };
+        this.host.requestUpdate('i18n');
+    }
+    #updates = 0;
+    get #firstUpdated() {
+        this.#updates++;
+        return this.#updates > 1;
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/interaction-range-selection.controller.d.ts

@@ -0,0 +1,20 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+declare type GridRange = {
+    ref: {
+        grid: HTMLElement;
+        cells: NodeListOf<HTMLElement> | HTMLElement[];
+        rows: NodeListOf<HTMLElement> | HTMLElement[];
+    };
+    rangeSelection?: boolean;
+};
+/**
+ * Given a 2d array grid structure provide a highlight/range selection of given cells
+ */
+export declare function interactionRangeSelection<T extends ReactiveElement & GridRange>(): ClassDecorator;
+export declare class InteractionRangeSelectionController<T extends ReactiveElement & GridRange> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+}
+export {};

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/interaction-range-selection.controller.js

@@ -0,0 +1,103 @@
+import { onFirstInteraction } from '../utils/events.js';
+/**
+ * Given a 2d array grid structure provide a highlight/range selection of given cells
+ */
+export function interactionRangeSelection() {
+    return (target) => target.addInitializer((instance) => new InteractionRangeSelectionController(instance));
+}
+export class InteractionRangeSelectionController {
+    host;
+    #selectionActive = false;
+    #firstCell;
+    #activeCell;
+    get #enabled() {
+        return this.host.rangeSelection !== false && !Array.from(this.host.ref.rows).find(r => r.draggable);
+    }
+    constructor(host) {
+        this.host = host;
+        host.addController(this);
+    }
+    async hostConnected() {
+        await this.host.updateComplete;
+        await onFirstInteraction(this.host);
+        if (this.#enabled) {
+            this.#setupKeyboardListeners();
+            this.#setupMouseEvents();
+        }
+    }
+    #setupMouseEvents() {
+        const root = this.host.ref.grid?.shadowRoot ? this.host.ref.grid.shadowRoot : this.host.ref.grid;
+        root.addEventListener('mousedown', (e) => {
+            // preserve right click for context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard
+            if (this.#enabled && e.buttons === 1 && !e.ctrlKey) {
+                this.#setFirstCell(e);
+            }
+        });
+        root.addEventListener('mouseover', (e) => {
+            if (this.#enabled) {
+                this.#setActiveCell(e.composedPath().find((i) => Array.from(this.host.ref.cells).includes(i)));
+            }
+        });
+        root.addEventListener('mouseup', () => {
+            if (this.#enabled) {
+                this.#stopSelection();
+            }
+        });
+    }
+    #setupKeyboardListeners() {
+        this.host.addEventListener('bpKeyChange', (e) => {
+            if (this.#enabled && e.detail.code) {
+                this.#setActiveCell(e.detail.activeItem);
+                if (!e.detail.shiftKey) {
+                    this.#stopSelection();
+                    this.#resetAllActiveCells();
+                    this.host.dispatchEvent(new CustomEvent('rangeSelectionChange', { detail: [] }));
+                }
+            }
+        });
+        this.host.addEventListener('keydown', (e) => {
+            if (this.#enabled && e.code === 'ShiftLeft' && e.shiftKey && !this.#selectionActive) {
+                this.#setFirstCell(e);
+            }
+        });
+    }
+    #setFirstCell(e) {
+        const firstCell = e.composedPath().find((i) => Array.from(this.host.ref.cells).includes(i));
+        if (firstCell) {
+            this.#firstCell = firstCell;
+            this.#selectionActive = true;
+            this.#resetAllActiveCells();
+        }
+    }
+    #setActiveCell(activeCell) {
+        if (activeCell && this.#selectionActive) {
+            this.#activeCell = activeCell;
+            this.#calculateSelection();
+        }
+    }
+    #stopSelection() {
+        this.#selectionActive = false;
+    }
+    #resetAllActiveCells() {
+        this.host.ref.cells.forEach(cell => cell.removeAttribute('highlight'));
+    }
+    #calculateSelection() {
+        const x1 = parseInt(this.#firstCell.ariaColIndex);
+        const x2 = parseInt(this.#activeCell.ariaColIndex);
+        const y1 = parseInt(this.#firstCell.parentElement?.ariaRowIndex);
+        const y2 = parseInt(this.#activeCell.parentElement?.ariaRowIndex);
+        this.#resetAllActiveCells();
+        this.host.ref.cells.forEach((cell) => {
+            const colIndex = parseInt(cell.ariaColIndex);
+            const rowIndex = parseInt(cell.parentElement?.ariaRowIndex);
+            if ((x1 <= x2 && colIndex >= x1 && colIndex <= x2) || (x1 >= x2 && colIndex <= x1 && colIndex >= x2)) {
+                if ((y1 <= y2 && rowIndex >= y1 && rowIndex <= y2) || (y1 >= y2 && rowIndex <= y1 && rowIndex >= y2)) {
+                    cell.setAttribute('highlight', '');
+                }
+            }
+        });
+        this.host.dispatchEvent(new CustomEvent('rangeSelectionChange', {
+            detail: Array.from(this.host.ref.cells).filter(c => c.hasAttribute('highlight')),
+        }));
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/interaction-responsive.controller.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+interface ResponsiveConfig {
+    skipFirst?: boolean;
+    element?: HTMLElement;
+}
+/**
+ * Provides a `bpResizeChange` event when component dimensions are resized
+ */
+export declare function interactionResponsive<T extends ReactiveElement>(config?: ResponsiveConfig): ClassDecorator;
+export declare class InteractionResponsiveController<T extends ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T, config?: ResponsiveConfig);
+    hostConnected(): Promise<void>;
+    hostDisconnected(): void;
+}
+export {};

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/interaction-responsive.controller.js

@@ -0,0 +1,36 @@
+/**
+ * Provides a `bpResizeChange` event when component dimensions are resized
+ */
+export function interactionResponsive(config = { skipFirst: false }) {
+    return (target) => target.addInitializer((instance) => new InteractionResponsiveController(instance, config));
+}
+export class InteractionResponsiveController {
+    host;
+    #observer;
+    #resizeElement;
+    #skipFirst = false;
+    constructor(host, config = { skipFirst: false }) {
+        this.host = host;
+        this.host.addController(this);
+        this.#skipFirst = !!config.skipFirst;
+        this.#resizeElement = config.element ? config.element : this.host;
+    }
+    async hostConnected() {
+        await this.host.updateComplete;
+        this.#observer = new ResizeObserver(entries => {
+            window.requestAnimationFrame(() => {
+                if (this.#skipFirst) {
+                    this.#skipFirst = false;
+                }
+                else {
+                    this.host.dispatchEvent(new CustomEvent('bpResizeChange', { detail: entries[0].contentRect }));
+                    this.host.requestUpdate();
+                }
+            });
+        });
+        this.#observer.observe(this.#resizeElement);
+    }
+    hostDisconnected() {
+        this.#observer?.disconnect();
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/interaction-scroll-visibility.controller.d.ts

@@ -0,0 +1,12 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+/**
+ * Default to `content-visibility: auto` for lazy render, on scroll set all row items to `content-visibility: visible` for eager render
+ * Enables fast initial render and smooth eager rendering anytime after for items within a bounded scroll box.
+ */
+export declare function interactionScrollVisibility<T extends ReactiveElement>(): ClassDecorator;
+export declare class InteractionScrollVisibilityController<T extends ReactiveElement> implements ReactiveController {
+    private host;
+    private get root();
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/interaction-scroll-visibility.controller.js

@@ -0,0 +1,24 @@
+/**
+ * Default to `content-visibility: auto` for lazy render, on scroll set all row items to `content-visibility: visible` for eager render
+ * Enables fast initial render and smooth eager rendering anytime after for items within a bounded scroll box.
+ */
+export function interactionScrollVisibility() {
+    return (target) => target.addInitializer((instance) => new InteractionScrollVisibilityController(instance));
+}
+export class InteractionScrollVisibilityController {
+    host;
+    get root() {
+        return this.host.shadowRoot ? this.host.shadowRoot : this.host;
+    }
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    async hostConnected() {
+        await this.host.updateComplete;
+        this.root.addEventListener('scroll', () => this.host.style.setProperty('--row-content-visibility', 'visibile'), {
+            once: true,
+            capture: true,
+        });
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/key-grid.controller.d.ts

@@ -0,0 +1,21 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export interface KeyGridConfig {
+    ref: {
+        grid: HTMLElement;
+        columns?: NodeListOf<HTMLElement> | HTMLElement[];
+        columnRow?: HTMLElement;
+        rows: NodeListOf<HTMLElement> | HTMLElement[];
+        cells: NodeListOf<HTMLElement> | HTMLElement[];
+    };
+}
+/**
+ * https://w3c.github.io/aria-practices/#gridNav_focus
+ */
+export declare function keyGrid<T extends ReactiveElement & KeyGridConfig>(): ClassDecorator;
+export declare class KeyGridController<T extends ReactiveElement & KeyGridConfig> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+    hostDisconnected(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/key-grid.controller.js

@@ -0,0 +1,93 @@
+import { onChildListMutation, onFirstInteraction } from '../utils/events.js';
+import { getFlattenedDOMTree, getFlattenedFocusableItems } from '../utils/traversal.js';
+import { contextMenuClick } from '../utils/dom.js';
+import { validKeyNavigationCode } from '../utils/keynav.js';
+import { focusElement, getActiveElement, initializeKeyListItems, setActiveKeyListItem, simpleFocusable } from '../utils/focus.js';
+import { getNextKeyGridItem } from './key.utils.js';
+/**
+ * https://w3c.github.io/aria-practices/#gridNav_focus
+ */
+export function keyGrid() {
+    return (target) => target.addInitializer((instance) => new KeyGridController(instance));
+}
+export class KeyGridController {
+    host;
+    #observers = [];
+    get #rows() {
+        const rows = Array.from(this.host.ref.rows);
+        if (this.host.ref.columnRow) {
+            rows.unshift(this.host.ref.columnRow);
+        }
+        return rows;
+    }
+    get #cells() {
+        const cells = Array.from(this.host.ref.cells);
+        if (this.host.ref.columns) {
+            cells.unshift(...Array.from(this.host.ref.columns));
+        }
+        return cells;
+    }
+    get #activeCell() {
+        return Array.from(this.#cells).find(i => i.tabIndex === 0);
+    }
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    async hostConnected() {
+        await this.host.updateComplete;
+        await onFirstInteraction(this.host);
+        initializeKeyListItems(this.#cells);
+        this.host.ref.grid.addEventListener('mouseup', (e) => this.#clickCell(e));
+        this.host.ref.grid.addEventListener('keydown', (e) => this.#keynavCell(e));
+        this.host.ref.grid.addEventListener('keyup', (e) => this.#updateCellActivation(e));
+        this.#observers.push(onChildListMutation(this.host.ref.grid, () => initializeKeyListItems(this.#cells)));
+    }
+    hostDisconnected() {
+        this.#observers.forEach(o => o.disconnect());
+    }
+    #clickCell(e) {
+        if (!contextMenuClick(e)) {
+            const activeCell = e.composedPath().find(i => this.#cells.find(c => c === i));
+            if (activeCell) {
+                this.#setActiveCell(e, activeCell);
+            }
+        }
+    }
+    #keynavCell(e) {
+        if (validKeyNavigationCode(e) && simpleFocusable(getActiveElement())) {
+            const { x, y } = getNextKeyGridItem(this.#cells, this.#rows, {
+                code: e.code,
+                ctrlKey: e.ctrlKey,
+                dir: this.host.dir,
+            });
+            const nextCell = Array.from(getFlattenedDOMTree(this.#rows[y])).filter(c => !!this.#cells.find(i => i === c))[x];
+            this.#setActiveCell(e, nextCell);
+            e.preventDefault();
+        }
+    }
+    #setActiveCell(e, activeCell) {
+        setActiveKeyListItem(this.#cells, activeCell);
+        // https://w3c.github.io/aria-practices/#gridNav_focus
+        const items = getFlattenedFocusableItems(activeCell);
+        const simpleItems = items.filter(i => simpleFocusable(i));
+        if (simpleItems.length === 1 && items.length === 1) {
+            focusElement(simpleItems[0]);
+        }
+        else {
+            focusElement(activeCell);
+        }
+        activeCell.dispatchEvent(new CustomEvent('bpKeyChange', {
+            bubbles: true,
+            detail: { code: e.code, shiftKey: e.shiftKey, activeItem: activeCell },
+        }));
+    }
+    #updateCellActivation(e) {
+        if (e.code === 'Escape') {
+            this.#activeCell?.focus();
+        }
+        if (e.code === 'Enter' && this.#activeCell === e.composedPath()[0]) {
+            getFlattenedFocusableItems(this.#activeCell)[0]?.focus();
+        }
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/key-list.controller.d.ts

@@ -0,0 +1,27 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export interface KeyListConfig {
+    layout: 'both' | 'horizontal' | 'vertical';
+    manageFocus: boolean;
+    manageTabindex: boolean;
+    loop: boolean;
+    dir: string | null;
+}
+export interface KeyElement extends ReactiveElement {
+    ref: {
+        items: HTMLElement[] | NodeListOf<HTMLElement>;
+    };
+}
+/** https://webaim.org/techniques/keyboard/ */
+export declare function keyList<T extends KeyElement>(config?: Partial<KeyListConfig>): ClassDecorator;
+export declare class KeyListController<T extends KeyElement> implements ReactiveController {
+    private host;
+    private get listItems();
+    private config;
+    constructor(host: T, config?: Partial<KeyListConfig>);
+    hostConnected(): Promise<void>;
+    private initializeTabIndex;
+    private clickItem;
+    private focusItem;
+    private getActiveItem;
+    private setActiveItem;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/key-list.controller.js

@@ -0,0 +1,92 @@
+import { focusElement, initializeKeyListItems, setActiveKeyListItem } from '../utils/focus.js';
+import { validKeyNavigationCode } from '../utils/keynav.js';
+import { getFlattenedFocusableItems } from '../utils/traversal.js';
+import { getNextKeyListItem } from './key.utils.js';
+/** https://webaim.org/techniques/keyboard/ */
+export function keyList(config = {}) {
+    return (target) => {
+        target.addInitializer((instance) => {
+            if (!instance.keyNavigationListController) {
+                instance.keyNavigationListController = new KeyListController(instance, config);
+            }
+        });
+    };
+}
+export class KeyListController {
+    host;
+    get listItems() {
+        return Array.from(this.host.ref.items);
+    }
+    config;
+    constructor(host, config = {}) {
+        this.host = host;
+        this.host.addController(this);
+        this.config = {
+            layout: 'horizontal',
+            manageFocus: true,
+            manageTabindex: true,
+            loop: false,
+            dir: this.host.getAttribute('rtl'),
+            ...config,
+        };
+    }
+    async hostConnected() {
+        await this.host.updateComplete;
+        this.initializeTabIndex();
+        this.host.addEventListener('click', (e) => this.clickItem(e));
+        this.host.addEventListener('keydown', (e) => this.focusItem(e));
+        this.host.shadowRoot?.addEventListener('click', (e) => this.clickItem(e));
+        this.host.shadowRoot?.addEventListener('keydown', (e) => this.focusItem(e));
+    }
+    initializeTabIndex() {
+        if (this.config.manageFocus && this.config.manageTabindex) {
+            initializeKeyListItems(this.listItems);
+        }
+    }
+    clickItem(e) {
+        const activeItem = this.getActiveItem(e);
+        if (activeItem) {
+            this.setActiveItem(e, activeItem);
+        }
+    }
+    focusItem(e) {
+        if (validKeyNavigationCode(e)) {
+            const activeItem = this.getActiveItem(e);
+            if (activeItem) {
+                const { next, previous } = getNextKeyListItem(activeItem, Array.from(this.listItems), {
+                    ...this.config,
+                    code: e.code,
+                });
+                if (next !== previous) {
+                    this.setActiveItem(e, this.listItems[next], this.listItems[previous]);
+                }
+            }
+        }
+    }
+    getActiveItem(e) {
+        return Array.from(this.listItems).find(c => c === e.target.closest(this.listItems[0].tagName.toLocaleLowerCase()) ?? c === e.target);
+    }
+    setActiveItem(e, activeItem, previousItem) {
+        if (this.config.manageFocus) {
+            if (this.config.manageTabindex) {
+                setActiveKeyListItem(this.listItems, activeItem);
+            }
+            const items = getFlattenedFocusableItems(activeItem);
+            const item = items[0] ?? activeItem;
+            focusElement(item);
+            if (e.type !== 'click') {
+                e.preventDefault();
+            }
+        }
+        activeItem.dispatchEvent(new CustomEvent('bpKeyChange', {
+            bubbles: true,
+            detail: {
+                activeItem,
+                previousItem,
+                code: e.code,
+                metaKey: e.ctrlKey || e.metaKey,
+                items: this.host.ref.items
+            },
+        }));
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/key.utils.d.ts

@@ -0,0 +1,19 @@
+import { KeyNavigationCode } from '../utils/keynav.js';
+export declare function getNextKeyGridItem(cells: HTMLElement[], rows: HTMLElement[], config: {
+    code: KeyNavigationCode | string;
+    ctrlKey: boolean;
+    dir: string;
+}): {
+    x: number;
+    y: number;
+};
+export interface KeyListConfig {
+    code: KeyNavigationCode;
+    loop?: boolean;
+    layout?: 'horizontal' | 'vertical' | 'both';
+    dir: string | null | undefined;
+}
+export declare function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig): {
+    next: number;
+    previous: number;
+};

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/key.utils.js

@@ -0,0 +1,91 @@
+import { KeyNavigationCode } from '../utils/keynav.js';
+import { getFlattenedDOMTree } from '../utils/traversal.js';
+export function getNextKeyGridItem(cells, rows, config) {
+    const currentCell = cells.find(i => i.tabIndex === 0);
+    const currentRow = rows.find(r => getFlattenedDOMTree(r).find(c => c === currentCell));
+    const currentRowCells = Array.from(getFlattenedDOMTree(currentRow)).filter(c => !!cells.find(i => i === c));
+    const numOfRows = rows.length - 1;
+    const numOfColumns = currentRowCells.length - 1;
+    const { code, ctrlKey, dir } = config;
+    let x = currentRowCells.indexOf(currentCell);
+    let y = rows.indexOf(currentRow);
+    const inlineStart = dir === 'rtl' ? KeyNavigationCode.ArrowRight : KeyNavigationCode.ArrowLeft;
+    const inlineEnd = dir === 'rtl' ? KeyNavigationCode.ArrowLeft : KeyNavigationCode.ArrowRight;
+    if (code === KeyNavigationCode.ArrowUp && y !== 0) {
+        y = y - 1;
+    }
+    else if (code === KeyNavigationCode.ArrowDown && y < numOfRows) {
+        y = y + 1;
+    }
+    else if (code === inlineStart && x !== 0) {
+        x = x - 1;
+    }
+    else if (code === inlineEnd && x < numOfColumns) {
+        x = x + 1;
+    }
+    else if (code === KeyNavigationCode.End) {
+        x = numOfColumns;
+        if (ctrlKey) {
+            y = numOfRows;
+        }
+    }
+    else if (code === KeyNavigationCode.Home) {
+        x = 0;
+        if (ctrlKey) {
+            y = 0;
+        }
+    }
+    else if (code === KeyNavigationCode.PageUp) {
+        y = y - 4 > 0 ? y - 4 : 0;
+    }
+    else if (code === KeyNavigationCode.PageDown) {
+        y = y + 4 < numOfRows ? y + 4 : numOfRows;
+    }
+    return { x, y };
+}
+export function getNextKeyListItem(item, items, config) {
+    // todo: test
+    const { code, layout, loop, dir } = config;
+    let i = items.indexOf(item);
+    const previous = i;
+    const inlineStart = dir === 'rtl' ? KeyNavigationCode.ArrowRight : KeyNavigationCode.ArrowLeft;
+    const inlineEnd = dir === 'rtl' ? KeyNavigationCode.ArrowLeft : KeyNavigationCode.ArrowRight;
+    const numOfItems = items.length - 1;
+    if (layout !== 'horizontal' && code === KeyNavigationCode.ArrowUp && i !== 0) {
+        i = i - 1;
+    }
+    else if (layout !== 'horizontal' && code === KeyNavigationCode.ArrowUp && i === 0 && loop) {
+        i = numOfItems;
+    }
+    else if (layout !== 'horizontal' && code === KeyNavigationCode.ArrowDown && i < numOfItems) {
+        i = i + 1;
+    }
+    else if (layout !== 'horizontal' && code === KeyNavigationCode.ArrowDown && i === numOfItems && loop) {
+        i = 0;
+    }
+    else if (layout !== 'vertical' && code === inlineStart && i !== 0) {
+        i = i - 1;
+    }
+    else if (layout !== 'vertical' && code === inlineEnd && i < numOfItems) {
+        i = i + 1;
+    }
+    else if (layout !== 'vertical' && code === inlineStart && i === 0 && loop) {
+        i = numOfItems;
+    }
+    else if (layout !== 'vertical' && code === inlineEnd && i === numOfItems && loop) {
+        i = 0;
+    }
+    else if (code === KeyNavigationCode.End) {
+        i = numOfItems;
+    }
+    else if (code === KeyNavigationCode.Home) {
+        i = 0;
+    }
+    else if (code === KeyNavigationCode.PageUp) {
+        i = i - 4 > 0 ? i - 4 : 0;
+    }
+    else if (code === KeyNavigationCode.PageDown) {
+        i = i + 4 < numOfItems ? i + 4 : numOfItems;
+    }
+    return { next: i, previous };
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/internals/controllers/state-active.controller.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+declare type Active = ReactiveElement & {
+    disabled: boolean;
+    readonly?: boolean;
+    _internals?: ElementInternals;
+};
+/**
+ * Shim fix for CSS psuedo-selector :active on keydown space/enter for custom elements
+ */
+export declare function stateActive<T extends Active>(): ClassDecorator;
+export declare class StateActiveController<T extends Active> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+}
+export {};