@ni/ok-components 1.5.2 → 1.6.0

package/dist/custom-elements.md

@@ -8,22 +8,6 @@
 
 <hr/>
 
-## class: `TsIconDynamic`
-
-### Superclass
-
-| Name   | Module | Package                                  |
-| ------ | ------ | ---------------------------------------- |
-| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
-
-### Static Methods
-
-| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
-| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
-| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
-
-<hr/>
-
 ## class: `FvAccordionItem`
 
 ### Superclass
@@ -50,6 +34,46 @@
 
 <hr/>
 
+## class: `FvChipSelector`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name                | Privacy | Type      | Default           | Description | Inherited From |
+| ------------------- | ------- | --------- | ----------------- | ----------- | -------------- |
+| `disabled`          | public  | `boolean` | `false`           |             |                |
+| `open`              | public  | `boolean` | `false`           |             |                |
+| `label`             | public  | `string`  | `''`              |             |                |
+| `selectedValues`    | public  | `string`  | `''`              |             |                |
+| `options`           | public  | `string`  | `''`              |             |                |
+| `placeholder`       | public  | `string`  | `'Select values'` |             |                |
+| `allowCustomValues` | public  | `boolean` | `false`           |             |                |
+
+### Events
+
+| Name     | Type          | Description | Inherited From |
+| -------- | ------------- | ----------- | -------------- |
+| `change` | `CustomEvent` |             |                |
+
+### Attributes
+
+| Name                  | Field             | Inherited From |
+| --------------------- | ----------------- | -------------- |
+| `disabled`            | disabled          |                |
+| `open`                | open              |                |
+| `label`               | label             |                |
+| `selected-values`     | selectedValues    |                |
+| `options`             | options           |                |
+| `placeholder`         | placeholder       |                |
+| `allow-custom-values` | allowCustomValues |                |
+
+<hr/>
+
 ## class: `FvCard`
 
 ### Superclass
@@ -84,7 +108,7 @@
 
 <hr/>
 
-## class: `FvChipSelector`
+## class: `FvMasterDetailList`
 
 ### Superclass
 
@@ -94,15 +118,9 @@
 
 ### Fields
 
-| Name                | Privacy | Type      | Default           | Description | Inherited From |
-| ------------------- | ------- | --------- | ----------------- | ----------- | -------------- |
-| `disabled`          | public  | `boolean` | `false`           |             |                |
-| `open`              | public  | `boolean` | `false`           |             |                |
-| `label`             | public  | `string`  | `''`              |             |                |
-| `selectedValues`    | public  | `string`  | `''`              |             |                |
-| `options`           | public  | `string`  | `''`              |             |                |
-| `placeholder`       | public  | `string`  | `'Select values'` |             |                |
-| `allowCustomValues` | public  | `boolean` | `false`           |             |                |
+| Name          | Privacy | Type     | Default             | Description | Inherited From |
+| ------------- | ------- | -------- | ------------------- | ----------- | -------------- |
+| `placeholder` | public  | `string` | `'Filter items...'` |             |                |
 
 ### Events
 
@@ -112,15 +130,9 @@
 
 ### Attributes
 
-| Name                  | Field             | Inherited From |
-| --------------------- | ----------------- | -------------- |
-| `disabled`            | disabled          |                |
-| `open`                | open              |                |
-| `label`               | label             |                |
-| `selected-values`     | selectedValues    |                |
-| `options`             | options           |                |
-| `placeholder`         | placeholder       |                |
-| `allow-custom-values` | allowCustomValues |                |
+| Name          | Field       | Inherited From |
+| ------------- | ----------- | -------------- |
+| `placeholder` | placeholder |                |
 
 <hr/>
 
@@ -152,6 +164,40 @@
 
 <hr/>
 
+## class: `FvMasterDetailListItem`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name          | Privacy | Type      | Default | Description | Inherited From |
+| ------------- | ------- | --------- | ------- | ----------- | -------------- |
+| `titleText`   | public  | `string`  | `''`    |             |                |
+| `subtitle`    | public  | `string`  | `''`    |             |                |
+| `value`       | public  | `string`  | `''`    |             |                |
+| `compact`     | public  | `boolean` | `false` |             |                |
+| `selected`    | public  | `boolean` | `false` |             |                |
+| `statusColor` | public  | `string`  | `''`    |             |                |
+| `statusLabel` | public  | `string`  | `''`    |             |                |
+
+### Attributes
+
+| Name           | Field       | Inherited From |
+| -------------- | ----------- | -------------- |
+| `title-text`   | titleText   |                |
+| `subtitle`     | subtitle    |                |
+| `value`        | value       |                |
+| `compact`      | compact     |                |
+| `selected`     | selected    |                |
+| `status-color` | statusColor |                |
+| `status-label` | statusLabel |                |
+
+<hr/>
+
 ## class: `FvSearchInput`
 
 ### Superclass
@@ -324,6 +370,22 @@
 
 <hr/>
 
+## class: `TsIconDynamic`
+
+### Superclass
+
+| Name   | Module | Package                                  |
+| ------ | ------ | ---------------------------------------- |
+| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+
+### Static Methods
+
+| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
+| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
+| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+
+<hr/>
+
 ## class: `TsTableColumnBreakpoint`
 
 ### Superclass

package/dist/esm/fv/all-fv.d.ts

@@ -2,6 +2,8 @@ import './accordion-item';
 import './card';
 import './chip-selector';
 import './context-help';
+import './master-detail-list-item';
+import './master-detail-list';
 import './split-button';
 import './split-button-anchor';
 import './summary-panel';

package/dist/esm/fv/all-fv.js

@@ -2,6 +2,8 @@ import './accordion-item';
 import './card';
 import './chip-selector';
 import './context-help';
+import './master-detail-list-item';
+import './master-detail-list';
 import './split-button';
 import './split-button-anchor';
 import './summary-panel';

package/dist/esm/fv/all-fv.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './split-button';\nimport './split-button-anchor';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\n"]}
+{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\n"]}

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

@@ -0,0 +1,50 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import { FvMasterDetailListItem } from '../master-detail-list-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-master-detail-list': FvMasterDetailList;
+    }
+}
+export interface FvMasterDetailListChangeDetail {
+    item: FvMasterDetailListItem | null;
+    value: string | null;
+}
+/**
+ * A filterable master-detail list with keyboard selection.
+ */
+export declare class FvMasterDetailList extends FoundationElement {
+    placeholder: string;
+    /** @internal */
+    filterText: string;
+    /** @internal */
+    activeItemId: string | null;
+    /** @internal */
+    items: FvMasterDetailListItem[];
+    /** @internal */
+    readonly inputId: string;
+    /** @internal */
+    readonly listboxId: string;
+    private filterInput;
+    private selectedItem;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    filterTextChanged(): void;
+    /** @internal */
+    captureFilterInput(input: HTMLInputElement | null): void;
+    /** @internal */
+    get hasVisibleItems(): boolean;
+    /** @internal */
+    handleFilterInput(event: Event): void;
+    /** @internal */
+    handleFilterKeydown(event: KeyboardEvent): boolean;
+    /** @internal */
+    handleItemsSlotChange(): void;
+    /** @internal */
+    handleItemsClick(event: Event): void;
+    private get visibleItems();
+    private refreshItems;
+    private applyFilter;
+    private setSelectedItem;
+}
+export declare const fvMasterDetailListTag = "ok-fv-master-detail-list";

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";