@ni/ok-components 1.5.2 → 1.6.1

package/dist/esm/fv/master-detail-list/index.js

@@ -0,0 +1,176 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { uniqueId } from '@ni/fast-web-utilities';
+import { diacriticInsensitiveStringNormalizer } from '@ni/nimble-components/dist/esm/utilities/models/string-normalizers';
+import { FvMasterDetailListItem, fvMasterDetailListItemTag } from '../master-detail-list-item';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A filterable master-detail list with keyboard selection.
+ */
+export class FvMasterDetailList extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = 'Filter items...';
+        /** @internal */
+        this.filterText = '';
+        /** @internal */
+        this.activeItemId = null;
+        /** @internal */
+        this.items = [];
+        /** @internal */
+        this.inputId = uniqueId('ok-fv-master-detail-list-input');
+        /** @internal */
+        this.listboxId = uniqueId('ok-fv-master-detail-list-listbox');
+        this.filterInput = null;
+        this.selectedItem = null;
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        queueMicrotask(() => {
+            this.refreshItems();
+        });
+    }
+    /** @internal */
+    filterTextChanged() {
+        if (this.$fastController.isConnected) {
+            this.applyFilter(true);
+        }
+    }
+    /** @internal */
+    captureFilterInput(input) {
+        this.filterInput = input;
+    }
+    /** @internal */
+    get hasVisibleItems() {
+        return this.visibleItems.length > 0;
+    }
+    /** @internal */
+    handleFilterInput(event) {
+        const input = event.target;
+        this.filterText = input.value;
+    }
+    /** @internal */
+    handleFilterKeydown(event) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return true;
+        }
+        const visibleItems = this.visibleItems;
+        if (visibleItems.length === 0) {
+            event.preventDefault();
+            return false;
+        }
+        const currentIndex = visibleItems.findIndex(item => item.selected);
+        let startingIndex = currentIndex;
+        if (startingIndex < 0) {
+            startingIndex = event.key === 'ArrowDown' ? -1 : visibleItems.length;
+        }
+        const nextIndex = event.key === 'ArrowDown'
+            ? Math.min(startingIndex + 1, visibleItems.length - 1)
+            : Math.max(startingIndex - 1, 0);
+        this.setSelectedItem(visibleItems[nextIndex] ?? null, true);
+        visibleItems[nextIndex]?.scrollIntoView({ block: 'nearest' });
+        event.preventDefault();
+        return false;
+    }
+    /** @internal */
+    handleItemsSlotChange() {
+        this.refreshItems();
+    }
+    /** @internal */
+    handleItemsClick(event) {
+        const item = event.composedPath().find(pathItem => pathItem instanceof HTMLElement && pathItem.localName === fvMasterDetailListItemTag);
+        if (!item || item.hidden) {
+            return;
+        }
+        this.setSelectedItem(item, true);
+        this.filterInput?.focus();
+    }
+    get visibleItems() {
+        return this.items.filter(item => !item.hidden);
+    }
+    refreshItems() {
+        const slot = this.shadowRoot?.querySelector('slot');
+        const assignedItems = slot?.assignedElements({ flatten: true }).filter(element => element instanceof HTMLElement && element.localName === fvMasterDetailListItemTag);
+        this.items = assignedItems ?? [];
+        for (const item of this.items) {
+            if (item.id.length === 0) {
+                item.id = uniqueId('ok-fv-master-detail-list-item');
+            }
+        }
+        this.applyFilter(false);
+    }
+    applyFilter(emitSelectionChange) {
+        const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());
+        let firstVisibleItem = null;
+        for (const item of this.items) {
+            const searchableText = diacriticInsensitiveStringNormalizer(`${item.titleText} ${item.subtitle} ${item.value}`.trim());
+            const matches = normalizedFilter.length === 0 || searchableText.includes(normalizedFilter);
+            item.hidden = !matches;
+            if (matches && firstVisibleItem === null) {
+                firstVisibleItem = item;
+            }
+        }
+        const visibleSelectedItems = this.visibleItems.filter(item => item.selected);
+        const preferredSelectedItem = visibleSelectedItems[0] ?? null;
+        for (const extraSelectedItem of visibleSelectedItems.slice(1)) {
+            extraSelectedItem.selected = false;
+        }
+        if (preferredSelectedItem) {
+            this.setSelectedItem(preferredSelectedItem, emitSelectionChange && preferredSelectedItem !== this.selectedItem);
+            return;
+        }
+        this.setSelectedItem(firstVisibleItem, emitSelectionChange && firstVisibleItem !== this.selectedItem);
+    }
+    setSelectedItem(nextItem, emitChange) {
+        if (this.selectedItem === nextItem) {
+            return;
+        }
+        if (this.selectedItem) {
+            this.selectedItem.selected = false;
+        }
+        this.selectedItem = nextItem;
+        if (this.selectedItem) {
+            this.selectedItem.selected = true;
+            this.activeItemId = this.selectedItem.id;
+        }
+        else {
+            this.activeItemId = null;
+        }
+        if (emitChange) {
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    item: this.selectedItem,
+                    value: this.selectedItem?.value || this.selectedItem?.titleText || null
+                }
+            }));
+        }
+    }
+}
+__decorate([
+    attr
+], FvMasterDetailList.prototype, "placeholder", void 0);
+__decorate([
+    observable
+], FvMasterDetailList.prototype, "filterText", void 0);
+__decorate([
+    observable
+], FvMasterDetailList.prototype, "activeItemId", void 0);
+__decorate([
+    observable
+], FvMasterDetailList.prototype, "items", void 0);
+const okFvMasterDetailList = FvMasterDetailList.compose({
+    baseName: 'fv-master-detail-list',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailList());
+export const fvMasterDetailListTag = 'ok-fv-master-detail-list';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/master-detail-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { uniqueId } from '@ni/fast-web-utilities';\nimport { diacriticInsensitiveStringNormalizer } from '@ni/nimble-components/dist/esm/utilities/models/string-normalizers';\nimport { FvMasterDetailListItem, fvMasterDetailListItemTag } from '../master-detail-list-item';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-master-detail-list': FvMasterDetailList;\n    }\n}\n\nexport interface FvMasterDetailListChangeDetail {\n    item: FvMasterDetailListItem | null;\n    value: string | null;\n}\n\n/**\n * A filterable master-detail list with keyboard selection.\n */\nexport class FvMasterDetailList extends FoundationElement {\n    @attr\n    public placeholder = 'Filter items...';\n\n    /** @internal */\n    @observable\n    public filterText = '';\n\n    /** @internal */\n    @observable\n    public activeItemId: string | null = null;\n\n    /** @internal */\n    @observable\n    public items: FvMasterDetailListItem[] = [];\n\n    /** @internal */\n    public readonly inputId = uniqueId('ok-fv-master-detail-list-input');\n\n    /** @internal */\n    public readonly listboxId = uniqueId('ok-fv-master-detail-list-listbox');\n\n    private filterInput: HTMLInputElement | null = null;\n\n    private selectedItem: FvMasterDetailListItem | null = null;\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        queueMicrotask(() => {\n            this.refreshItems();\n        });\n    }\n\n    /** @internal */\n    public filterTextChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.applyFilter(true);\n        }\n    }\n\n    /** @internal */\n    public captureFilterInput(input: HTMLInputElement | null): void {\n        this.filterInput = input;\n    }\n\n    /** @internal */\n    public get hasVisibleItems(): boolean {\n        return this.visibleItems.length > 0;\n    }\n\n    /** @internal */\n    public handleFilterInput(event: Event): void {\n        const input = event.target as HTMLInputElement;\n        this.filterText = input.value;\n    }\n\n    /** @internal */\n    public handleFilterKeydown(event: KeyboardEvent): boolean {\n        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {\n            return true;\n        }\n\n        const visibleItems = this.visibleItems;\n        if (visibleItems.length === 0) {\n            event.preventDefault();\n            return false;\n        }\n\n        const currentIndex = visibleItems.findIndex(item => item.selected);\n        let startingIndex = currentIndex;\n\n        if (startingIndex < 0) {\n            startingIndex = event.key === 'ArrowDown' ? -1 : visibleItems.length;\n        }\n\n        const nextIndex = event.key === 'ArrowDown'\n            ? Math.min(startingIndex + 1, visibleItems.length - 1)\n            : Math.max(startingIndex - 1, 0);\n\n        this.setSelectedItem(visibleItems[nextIndex] ?? null, true);\n        visibleItems[nextIndex]?.scrollIntoView({ block: 'nearest' });\n        event.preventDefault();\n        return false;\n    }\n\n    /** @internal */\n    public handleItemsSlotChange(): void {\n        this.refreshItems();\n    }\n\n    /** @internal */\n    public handleItemsClick(event: Event): void {\n        const item = event.composedPath().find(\n            pathItem => pathItem instanceof HTMLElement && pathItem.localName === fvMasterDetailListItemTag\n        ) as FvMasterDetailListItem | undefined;\n\n        if (!item || item.hidden) {\n            return;\n        }\n\n        this.setSelectedItem(item, true);\n        this.filterInput?.focus();\n    }\n\n    private get visibleItems(): FvMasterDetailListItem[] {\n        return this.items.filter(item => !item.hidden);\n    }\n\n    private refreshItems(): void {\n        const slot = this.shadowRoot?.querySelector('slot');\n        const assignedItems = slot?.assignedElements({ flatten: true }).filter(\n            element => element instanceof HTMLElement && element.localName === fvMasterDetailListItemTag\n        ) as FvMasterDetailListItem[] | undefined;\n\n        this.items = assignedItems ?? [];\n        for (const item of this.items) {\n            if (item.id.length === 0) {\n                item.id = uniqueId('ok-fv-master-detail-list-item');\n            }\n        }\n\n        this.applyFilter(false);\n    }\n\n    private applyFilter(emitSelectionChange: boolean): void {\n        const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());\n        let firstVisibleItem: FvMasterDetailListItem | null = null;\n\n        for (const item of this.items) {\n            const searchableText = diacriticInsensitiveStringNormalizer(\n                `${item.titleText} ${item.subtitle} ${item.value}`.trim()\n            );\n            const matches = normalizedFilter.length === 0 || searchableText.includes(normalizedFilter);\n            item.hidden = !matches;\n\n            if (matches && firstVisibleItem === null) {\n                firstVisibleItem = item;\n            }\n        }\n\n        const visibleSelectedItems = this.visibleItems.filter(item => item.selected);\n        const preferredSelectedItem = visibleSelectedItems[0] ?? null;\n\n        for (const extraSelectedItem of visibleSelectedItems.slice(1)) {\n            extraSelectedItem.selected = false;\n        }\n\n        if (preferredSelectedItem) {\n            this.setSelectedItem(\n                preferredSelectedItem,\n                emitSelectionChange && preferredSelectedItem !== this.selectedItem\n            );\n            return;\n        }\n\n        this.setSelectedItem(\n            firstVisibleItem,\n            emitSelectionChange && firstVisibleItem !== this.selectedItem\n        );\n    }\n\n    private setSelectedItem(nextItem: FvMasterDetailListItem | null, emitChange: boolean): void {\n        if (this.selectedItem === nextItem) {\n            return;\n        }\n\n        if (this.selectedItem) {\n            this.selectedItem.selected = false;\n        }\n\n        this.selectedItem = nextItem;\n\n        if (this.selectedItem) {\n            this.selectedItem.selected = true;\n            this.activeItemId = this.selectedItem.id;\n        } else {\n            this.activeItemId = null;\n        }\n\n        if (emitChange) {\n            this.dispatchEvent(new CustomEvent<FvMasterDetailListChangeDetail>('change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    item: this.selectedItem,\n                    value: this.selectedItem?.value || this.selectedItem?.titleText || null\n                }\n            }));\n        }\n    }\n}\n\nconst okFvMasterDetailList = FvMasterDetailList.compose({\n    baseName: 'fv-master-detail-list',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailList());\nexport const fvMasterDetailListTag = 'ok-fv-master-detail-list';"]}

package/dist/esm/fv/master-detail-list/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/master-detail-list/styles.js

@@ -0,0 +1,68 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, placeholderFontColor, smallDelay, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, focusVisible;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            color: ${bodyFontColor};
+            font: ${bodyFont};
+        }
+
+        .master-detail-list {
+            display: flex;
+            flex-direction: column;
+            min-block-size: 0;
+        }
+
+        .filter-row {
+            padding: ${standardPadding};
+            padding-block-end: 10px;
+        }
+
+        .filter-input {
+            -webkit-appearance: none;
+            appearance: none;
+            inline-size: 100%;
+            padding: 10px 2px 12px;
+            font: inherit;
+            color: inherit;
+            border: none;
+            border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.35);
+            background: transparent;
+            outline: none;
+            transition: border-color ${smallDelay} ease-in-out;
+        }
+
+        .filter-input::placeholder {
+            color: ${placeholderFontColor};
+        }
+
+        .items {
+            display: block;
+            min-block-size: 0;
+            overflow: auto;
+        }
+
+        .empty-state {
+            padding: 18px;
+            color: ${placeholderFontColor};
+        }
+    }
+
+    @layer hover {
+        .filter-input:hover {
+            border-bottom-color: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .filter-input:focus-visible {
+            border-bottom-color: ${borderHoverColor};
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/master-detail-list/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,oBAAoB,EACpB,UAAU,EACV,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;qBAGL,aAAa;oBACd,QAAQ;;;;;;;;;;uBAUL,eAAe;;;;;;;;;;;;6BAYT,WAAW,eAAe,qBAAqB;;;uCAGrC,UAAU;;;;qBAI5B,oBAAoB;;;;;;;;;;;qBAWpB,oBAAoB;;;;;;mCAMN,gBAAgB;;;;;;mCAMhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    placeholderFontColor,\n    smallDelay,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible;\n\n    @layer base {\n        ${display('block')}\n\n        :host {\n            color: ${bodyFontColor};\n            font: ${bodyFont};\n        }\n\n        .master-detail-list {\n            display: flex;\n            flex-direction: column;\n            min-block-size: 0;\n        }\n\n        .filter-row {\n            padding: ${standardPadding};\n            padding-block-end: 10px;\n        }\n\n        .filter-input {\n            -webkit-appearance: none;\n            appearance: none;\n            inline-size: 100%;\n            padding: 10px 2px 12px;\n            font: inherit;\n            color: inherit;\n            border: none;\n            border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.35);\n            background: transparent;\n            outline: none;\n            transition: border-color ${smallDelay} ease-in-out;\n        }\n\n        .filter-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .items {\n            display: block;\n            min-block-size: 0;\n            overflow: auto;\n        }\n\n        .empty-state {\n            padding: 18px;\n            color: ${placeholderFontColor};\n        }\n    }\n\n    @layer hover {\n        .filter-input:hover {\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .filter-input:focus-visible {\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/master-detail-list/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvMasterDetailList } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvMasterDetailList, any>;

package/dist/esm/fv/master-detail-list/template.js

@@ -0,0 +1,36 @@
+import { html, ref, when } from '@ni/fast-element';
+export const template = html `
+    <div class="master-detail-list">
+        <div class="filter-row">
+            <input
+                id="${x => x.inputId}"
+                class="filter-input"
+                type="text"
+                placeholder="${x => x.placeholder}"
+                :value="${x => x.filterText}"
+                aria-controls="${x => x.listboxId}"
+                aria-activedescendant="${x => x.activeItemId}"
+                aria-label="${x => x.placeholder}"
+                role="combobox"
+                aria-haspopup="listbox"
+                aria-autocomplete="list"
+                aria-expanded="true"
+                ${ref('captureFilterInput')}
+                @input="${(x, c) => x.handleFilterInput(c.event)}"
+                @keydown="${(x, c) => x.handleFilterKeydown(c.event)}"
+            />
+        </div>
+        <div
+            id="${x => x.listboxId}"
+            class="items"
+            role="listbox"
+            @click="${(x, c) => x.handleItemsClick(c.event)}"
+        >
+            <slot @slotchange="${x => x.handleItemsSlotChange()}"></slot>
+            ${when(x => !x.hasVisibleItems, html `
+                    <div class="empty-state">No matches</div>
+                `)}
+        </div>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/master-detail-list/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAoB;;;;sBAI1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;;+BAGL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;iCACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yCACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;8BAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;;;;kBAK9B,GAAG,CAAC,oBAAoB,CAAC;0BACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;4BACpC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;kBAInE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;;sBAGZ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC;;iCAE1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;cACjD,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,EACvB,IAAI,CAAoB;;iBAEvB,CACJ;;;CAGZ,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport type { FvMasterDetailList } from '.';\n\nexport const template = html<FvMasterDetailList>`\n    <div class=\"master-detail-list\">\n        <div class=\"filter-row\">\n            <input\n                id=\"${x => x.inputId}\"\n                class=\"filter-input\"\n                type=\"text\"\n                placeholder=\"${x => x.placeholder}\"\n                :value=\"${x => x.filterText}\"\n                aria-controls=\"${x => x.listboxId}\"\n                aria-activedescendant=\"${x => x.activeItemId}\"\n                aria-label=\"${x => x.placeholder}\"\n                role=\"combobox\"\n                aria-haspopup=\"listbox\"\n                aria-autocomplete=\"list\"\n                aria-expanded=\"true\"\n                ${ref('captureFilterInput')}\n                @input=\"${(x, c) => x.handleFilterInput(c.event)}\"\n                @keydown=\"${(x, c) => x.handleFilterKeydown(c.event as KeyboardEvent)}\"\n            />\n        </div>\n        <div\n            id=\"${x => x.listboxId}\"\n            class=\"items\"\n            role=\"listbox\"\n            @click=\"${(x, c) => x.handleItemsClick(c.event)}\"\n        >\n            <slot @slotchange=\"${x => x.handleItemsSlotChange()}\"></slot>\n            ${when(\n                x => !x.hasVisibleItems,\n                html<FvMasterDetailList>`\n                    <div class=\"empty-state\">No matches</div>\n                `\n            )}\n        </div>\n    </div>\n`;"]}

package/dist/esm/fv/master-detail-list-item/index.d.ts

@@ -0,0 +1,32 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-master-detail-list-item': FvMasterDetailListItem;
+    }
+}
+/**
+ * A selectable master-detail list item with title, subtitle, and optional status content.
+ */
+export declare class FvMasterDetailListItem extends FoundationElement {
+    titleText: string;
+    subtitle: string;
+    value: string;
+    compact: boolean;
+    selected: boolean;
+    statusColor: string;
+    statusLabel: string;
+    /** @internal */
+    hasStatusSlotContent: boolean;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    selectedChanged(): void;
+    /** @internal */
+    handleStatusSlotChange(event: Event): void;
+    /** @internal */
+    get hasStatus(): boolean;
+    /** @internal */
+    get fallbackStatusLabel(): string | null;
+    private syncSelectionAria;
+}
+export declare const fvMasterDetailListItemTag = "ok-fv-master-detail-list-item";

package/dist/esm/fv/master-detail-list-item/index.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A selectable master-detail list item with title, subtitle, and optional status content.
+ */
+export class FvMasterDetailListItem extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.titleText = '';
+        this.subtitle = '';
+        this.value = '';
+        this.compact = false;
+        this.selected = false;
+        this.statusColor = '';
+        this.statusLabel = '';
+        /** @internal */
+        this.hasStatusSlotContent = false;
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'option');
+        this.syncSelectionAria();
+    }
+    /** @internal */
+    selectedChanged() {
+        if (this.$fastController.isConnected) {
+            this.syncSelectionAria();
+        }
+    }
+    /** @internal */
+    handleStatusSlotChange(event) {
+        const slot = event.target;
+        this.hasStatusSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    /** @internal */
+    get hasStatus() {
+        return this.hasStatusSlotContent || this.statusColor.trim().length > 0;
+    }
+    /** @internal */
+    get fallbackStatusLabel() {
+        if (this.hasStatusSlotContent || this.statusColor.trim().length === 0) {
+            return null;
+        }
+        const normalizedStatusLabel = this.statusLabel.trim();
+        return normalizedStatusLabel.length > 0 ? normalizedStatusLabel : null;
+    }
+    syncSelectionAria() {
+        this.setAttribute('aria-selected', String(this.selected));
+    }
+}
+__decorate([
+    attr({ attribute: 'title-text' })
+], FvMasterDetailListItem.prototype, "titleText", void 0);
+__decorate([
+    attr
+], FvMasterDetailListItem.prototype, "subtitle", void 0);
+__decorate([
+    attr
+], FvMasterDetailListItem.prototype, "value", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvMasterDetailListItem.prototype, "compact", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvMasterDetailListItem.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: 'status-color' })
+], FvMasterDetailListItem.prototype, "statusColor", void 0);
+__decorate([
+    attr({ attribute: 'status-label' })
+], FvMasterDetailListItem.prototype, "statusLabel", void 0);
+__decorate([
+    observable
+], FvMasterDetailListItem.prototype, "hasStatusSlotContent", void 0);
+const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
+    baseName: 'fv-master-detail-list-item',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
+export const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/master-detail-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list-item/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-master-detail-list-item': FvMasterDetailListItem;\n    }\n}\n\n/**\n * A selectable master-detail list item with title, subtitle, and optional status content.\n */\nexport class FvMasterDetailListItem extends FoundationElement {\n    @attr({ attribute: 'title-text' })\n    public titleText = '';\n\n    @attr\n    public subtitle = '';\n\n    @attr\n    public value = '';\n\n    @attr({ mode: 'boolean' })\n    public compact = false;\n\n    @attr({ mode: 'boolean' })\n    public selected = false;\n\n    @attr({ attribute: 'status-color' })\n    public statusColor = '';\n\n    @attr({ attribute: 'status-label' })\n    public statusLabel = '';\n\n    /** @internal */\n    @observable\n    public hasStatusSlotContent = false;\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.setAttribute('role', 'option');\n        this.syncSelectionAria();\n    }\n\n    /** @internal */\n    public selectedChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.syncSelectionAria();\n        }\n    }\n\n    /** @internal */\n    public handleStatusSlotChange(event: Event): void {\n        const slot = event.target as HTMLSlotElement;\n        this.hasStatusSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n    }\n\n    /** @internal */\n    public get hasStatus(): boolean {\n        return this.hasStatusSlotContent || this.statusColor.trim().length > 0;\n    }\n\n    /** @internal */\n    public get fallbackStatusLabel(): string | null {\n        if (this.hasStatusSlotContent || this.statusColor.trim().length === 0) {\n            return null;\n        }\n\n        const normalizedStatusLabel = this.statusLabel.trim();\n        return normalizedStatusLabel.length > 0 ? normalizedStatusLabel : null;\n    }\n\n    private syncSelectionAria(): void {\n        this.setAttribute('aria-selected', String(this.selected));\n    }\n}\n\nconst okFvMasterDetailListItem = FvMasterDetailListItem.compose({\n    baseName: 'fv-master-detail-list-item',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());\nexport const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';"]}

package/dist/esm/fv/master-detail-list-item/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/master-detail-list-item/styles.js

@@ -0,0 +1,100 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, fillHoverColor, fillSelectedColor, iconColor, placeholderFontColor, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, selected;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            position: relative;
+            color: ${bodyFontColor};
+            cursor: pointer;
+            user-select: none;
+        }
+
+        :host([hidden]) {
+            display: none;
+        }
+
+        .item {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            align-items: center;
+            gap: ${standardPadding};
+            min-block-size: 76px;
+            padding: 14px 18px 14px 22px;
+            background: transparent;
+        }
+
+        :host([compact]) .item {
+            min-block-size: 56px;
+            padding: 10px 18px 10px 22px;
+        }
+
+        .text {
+            min-inline-size: 0;
+        }
+
+        .title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font: ${bodyFont};
+            font-weight: 600;
+            color: ${bodyFontColor};
+        }
+
+        .subtitle {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-block-start: 4px;
+            font: ${bodyFont};
+            color: ${placeholderFontColor};
+        }
+
+        :host([compact]) .subtitle {
+            margin-block-start: 2px;
+        }
+
+        .status {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            inline-size: 16px;
+            block-size: 16px;
+            flex: 0 0 auto;
+        }
+
+        .status-icon {
+            inline-size: 10px;
+            block-size: 10px;
+            color: currentColor;
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+    }
+
+    @layer hover {
+        :host(:hover) .item {
+            background: ${fillHoverColor};
+        }
+    }
+
+    @layer selected {
+        :host([selected]) .item {
+            background: ${fillSelectedColor};
+        }
+
+        :host([selected])::before {
+            content: '';
+            position: absolute;
+            inset-block: 0;
+            inset-inline-start: 0;
+            inline-size: calc(${borderWidth} * 4);
+            background: ${borderHoverColor};
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/master-detail-list-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;qBAIL,aAAa;;;;;;;;;;;;;mBAaf,eAAe;;;;;;;;;;;;;;;;;;;oBAmBd,QAAQ;;qBAEP,aAAa;;;;;;;;oBAQd,QAAQ;qBACP,oBAAoB;;;;;;;;;;;;;;;;;;;;cAoB3B,SAAS,CAAC,iBAAiB;;;;;;0BAMf,cAAc;;;;;;0BAMd,iBAAiB;;;;;;;;gCAQX,WAAW;0BACjB,gBAAgB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    fillHoverColor,\n    fillSelectedColor,\n    iconColor,\n    placeholderFontColor,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, selected;\n\n    @layer base {\n        ${display('block')}\n\n        :host {\n            position: relative;\n            color: ${bodyFontColor};\n            cursor: pointer;\n            user-select: none;\n        }\n\n        :host([hidden]) {\n            display: none;\n        }\n\n        .item {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) auto;\n            align-items: center;\n            gap: ${standardPadding};\n            min-block-size: 76px;\n            padding: 14px 18px 14px 22px;\n            background: transparent;\n        }\n\n        :host([compact]) .item {\n            min-block-size: 56px;\n            padding: 10px 18px 10px 22px;\n        }\n\n        .text {\n            min-inline-size: 0;\n        }\n\n        .title {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font: ${bodyFont};\n            font-weight: 600;\n            color: ${bodyFontColor};\n        }\n\n        .subtitle {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            margin-block-start: 4px;\n            font: ${bodyFont};\n            color: ${placeholderFontColor};\n        }\n\n        :host([compact]) .subtitle {\n            margin-block-start: 2px;\n        }\n\n        .status {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            inline-size: 16px;\n            block-size: 16px;\n            flex: 0 0 auto;\n        }\n\n        .status-icon {\n            inline-size: 10px;\n            block-size: 10px;\n            color: currentColor;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n    }\n\n    @layer hover {\n        :host(:hover) .item {\n            background: ${fillHoverColor};\n        }\n    }\n\n    @layer selected {\n        :host([selected]) .item {\n            background: ${fillSelectedColor};\n        }\n\n        :host([selected])::before {\n            content: '';\n            position: absolute;\n            inset-block: 0;\n            inset-inline-start: 0;\n            inline-size: calc(${borderWidth} * 4);\n            background: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/master-detail-list-item/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvMasterDetailListItem } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvMasterDetailListItem, any>;

package/dist/esm/fv/master-detail-list-item/template.js

@@ -0,0 +1,28 @@
+import { html, when } from '@ni/fast-element';
+import { iconCircleFilledTag } from '@ni/nimble-components/dist/esm/icons/circle-filled';
+export const template = html `
+    <div class="item" part="item">
+        <div class="text" part="text">
+            <div class="title" part="title">${x => x.titleText}</div>
+            <div class="subtitle" part="subtitle">${x => x.subtitle}</div>
+        </div>
+        <div class="status" part="status" ?hidden="${x => !x.hasStatus}">
+            <slot
+                name="status"
+                @slotchange="${(x, c) => x.handleStatusSlotChange(c.event)}"
+            >
+                ${when(x => x.statusColor.trim().length > 0, html `
+                        <${iconCircleFilledTag}
+                            class="status-icon"
+                            part="status-icon"
+                            role="${x => (x.fallbackStatusLabel ? 'img' : null)}"
+                            aria-label="${x => x.fallbackStatusLabel}"
+                            aria-hidden="${x => (x.fallbackStatusLabel === null ? 'true' : null)}"
+                            style="${x => `color: ${x.statusColor};`}"
+                        ></${iconCircleFilledTag}>
+                    `)}
+            </slot>
+        </div>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/master-detail-list-item/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAC;AAGzF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;;8CAGN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oDACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;qDAEd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;;;+BAGvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAK,CAAC;;kBAExD,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EACpC,IAAI,CAAwB;2BACrB,mBAAmB;;;oCAGV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;0CACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;2CACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;qCAC3D,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,WAAW,GAAG;6BACvC,mBAAmB;qBAC3B,CACJ;;;;CAIhB,CAAC","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { iconCircleFilledTag } from '@ni/nimble-components/dist/esm/icons/circle-filled';\nimport type { FvMasterDetailListItem } from '.';\n\nexport const template = html<FvMasterDetailListItem>`\n    <div class=\"item\" part=\"item\">\n        <div class=\"text\" part=\"text\">\n            <div class=\"title\" part=\"title\">${x => x.titleText}</div>\n            <div class=\"subtitle\" part=\"subtitle\">${x => x.subtitle}</div>\n        </div>\n        <div class=\"status\" part=\"status\" ?hidden=\"${x => !x.hasStatus}\">\n            <slot\n                name=\"status\"\n                @slotchange=\"${(x, c) => x.handleStatusSlotChange(c.event)}\"\n            >\n                ${when(\n                    x => x.statusColor.trim().length > 0,\n                    html<FvMasterDetailListItem>`\n                        <${iconCircleFilledTag}\n                            class=\"status-icon\"\n                            part=\"status-icon\"\n                            role=\"${x => (x.fallbackStatusLabel ? 'img' : null)}\"\n                            aria-label=\"${x => x.fallbackStatusLabel}\"\n                            aria-hidden=\"${x => (x.fallbackStatusLabel === null ? 'true' : null)}\"\n                            style=\"${x => `color: ${x.statusColor};`}\"\n                        ></${iconCircleFilledTag}>\n                    `\n                )}\n            </slot>\n        </div>\n    </div>\n`;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",
@@ -42,8 +42,8 @@
     "@ni/fast-element": "^10.1.1",
     "@ni/fast-foundation": "^10.2.3",
     "@ni/fast-web-utilities": "^10.0.0",
-    "@ni/nimble-components": "^35.11.0",
-    "@ni/spright-components": "^6.21.0",
+    "@ni/nimble-components": "^35.12.0",
+    "@ni/spright-components": "^6.21.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {