@ni/ok-components 1.10.3 → 1.11.1

package/dist/esm/fv/bulk-edit-state/index.js

@@ -0,0 +1,114 @@
+/**
+ * Framework-neutral state for editing common fields across selected records.
+ */
+export class BulkEditState {
+    constructor(options) {
+        this.selected = new Set();
+        this.pending = new Map();
+        this.draft = new Map();
+        this.records = options.records;
+        this.id = options.id;
+        this.read = options.read;
+    }
+    get selectedIds() {
+        return [...this.selected];
+    }
+    get changes() {
+        return Object.fromEntries(this.pending);
+    }
+    get selectedRecords() {
+        return this.records.filter(record => this.selected.has(this.id(record)));
+    }
+    field(field) {
+        if (this.pending.has(field)) {
+            const value = this.pending.get(field);
+            return { value, mixed: false, pending: true, willClear: value === '' };
+        }
+        const values = this.selectedRecords.map(record => this.read(record, field));
+        const value = values[0] ?? '';
+        const mixed = values.some(candidate => candidate !== value);
+        return { value: this.draft.get(field) ?? (mixed ? '' : value), mixed, pending: false, willClear: false };
+    }
+    edit(field, value) {
+        if (this.selected.size === 0) {
+            return;
+        }
+        if (value.trim() !== '' && this.selectedRecords.some(record => this.read(record, field) !== value)) {
+            this.setPending(field, value);
+        }
+        else {
+            this.pending.delete(field);
+        }
+        this.draft.set(field, value);
+    }
+    clear(field) {
+        if (this.selected.size === 0) {
+            return;
+        }
+        if (this.selectedRecords.some(record => this.read(record, field) !== '')) {
+            this.setPending(field, '');
+        }
+        else {
+            this.pending.delete(field);
+        }
+        this.draft.set(field, '');
+    }
+    resetField(field) {
+        this.pending.delete(field);
+        this.draft.delete(field);
+    }
+    revert() {
+        this.pending.clear();
+        this.draft.clear();
+    }
+    isSelection(ids) {
+        const next = new Set(ids);
+        return next.size === this.selected.size && [...next].every(id => this.selected.has(id));
+    }
+    visibleSelection(visibleIds) {
+        return visibleIds.filter(id => this.selected.has(id));
+    }
+    mergeVisible(visibleIds, selectedVisibleIds, additive = false) {
+        const visible = new Set(visibleIds);
+        const merged = additive
+            ? new Set(this.selected)
+            : new Set([...this.selected].filter(id => !visible.has(id)));
+        selectedVisibleIds.filter(id => visible.has(id)).forEach(id => merged.add(id));
+        return [...merged];
+    }
+    select(ids) {
+        if (this.isSelection(ids)) {
+            return;
+        }
+        this.selected = new Set(ids);
+        this.revert();
+    }
+    createCommit() {
+        const changes = this.changes;
+        const fields = [...this.pending.keys()];
+        return {
+            selectedIds: this.selectedIds,
+            changes,
+            affectedRecords: this.selectedRecords.filter(record => fields.some(field => this.read(record, field) !== changes[field]))
+        };
+    }
+    commitSucceeded(updatedRecords) {
+        if (updatedRecords) {
+            this.records = updatedRecords;
+        }
+        this.revert();
+    }
+    setPending(field, value) {
+        if (typeof field !== 'symbol') {
+            for (const existing of this.pending.keys()) {
+                if (typeof existing !== 'symbol'
+                    && typeof existing !== typeof field
+                    && String(existing) === String(field)) {
+                    throw new TypeError('Numeric and string field keys that map to the same object key cannot both be pending.');
+                }
+            }
+        }
+        this.pending.set(field, value);
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/bulk-edit-state/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/bulk-edit-state/index.ts"],"names":[],"mappings":"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","sourcesContent":["export type RecordId = string;\nexport type PendingChanges<TField extends PropertyKey> = {\n    [Field in TField]?: string;\n};\n\nexport interface BulkEditFieldValue {\n    value: string;\n    mixed: boolean;\n    pending: boolean;\n    willClear: boolean;\n}\n\nexport interface BulkEditCommit<TRecord, TField extends PropertyKey> {\n    selectedIds: readonly RecordId[];\n    changes: Readonly<PendingChanges<TField>>;\n    affectedRecords: readonly TRecord[];\n}\n\nexport interface BulkEditStateOptions<TRecord, TField extends PropertyKey> {\n    records: readonly TRecord[];\n    id: (record: TRecord) => RecordId;\n    read: (record: TRecord, field: TField) => string;\n}\n\n/**\n * Framework-neutral state for editing common fields across selected records.\n */\nexport class BulkEditState<TRecord, TField extends PropertyKey> {\n    private records: readonly TRecord[];\n    private readonly id: (record: TRecord) => RecordId;\n    private readonly read: (record: TRecord, field: TField) => string;\n    private selected = new Set<RecordId>();\n    private readonly pending = new Map<TField, string>();\n    private readonly draft = new Map<TField, string>();\n\n    public constructor(options: BulkEditStateOptions<TRecord, TField>) {\n        this.records = options.records;\n        this.id = options.id;\n        this.read = options.read;\n    }\n\n    public get selectedIds(): readonly RecordId[] {\n        return [...this.selected];\n    }\n\n    public get changes(): Readonly<PendingChanges<TField>> {\n        return Object.fromEntries(this.pending) as PendingChanges<TField>;\n    }\n\n    public get selectedRecords(): readonly TRecord[] {\n        return this.records.filter(record => this.selected.has(this.id(record)));\n    }\n\n    public field(field: TField): BulkEditFieldValue {\n        if (this.pending.has(field)) {\n            const value = this.pending.get(field)!;\n            return { value, mixed: false, pending: true, willClear: value === '' };\n        }\n\n        const values = this.selectedRecords.map(record => this.read(record, field));\n        const value = values[0] ?? '';\n        const mixed = values.some(candidate => candidate !== value);\n        return { value: this.draft.get(field) ?? (mixed ? '' : value), mixed, pending: false, willClear: false };\n    }\n\n    public edit(field: TField, value: string): void {\n        if (this.selected.size === 0) {\n            return;\n        }\n        if (value.trim() !== '' && this.selectedRecords.some(record => this.read(record, field) !== value)) {\n            this.setPending(field, value);\n        } else {\n            this.pending.delete(field);\n        }\n        this.draft.set(field, value);\n    }\n\n    public clear(field: TField): void {\n        if (this.selected.size === 0) {\n            return;\n        }\n        if (this.selectedRecords.some(record => this.read(record, field) !== '')) {\n            this.setPending(field, '');\n        } else {\n            this.pending.delete(field);\n        }\n        this.draft.set(field, '');\n    }\n\n    public resetField(field: TField): void {\n        this.pending.delete(field);\n        this.draft.delete(field);\n    }\n\n    public revert(): void {\n        this.pending.clear();\n        this.draft.clear();\n    }\n\n    public isSelection(ids: readonly RecordId[]): boolean {\n        const next = new Set(ids);\n        return next.size === this.selected.size && [...next].every(id => this.selected.has(id));\n    }\n\n    public visibleSelection(visibleIds: readonly RecordId[]): readonly RecordId[] {\n        return visibleIds.filter(id => this.selected.has(id));\n    }\n\n    public mergeVisible(\n        visibleIds: readonly RecordId[],\n        selectedVisibleIds: readonly RecordId[],\n        additive = false\n    ): readonly RecordId[] {\n        const visible = new Set(visibleIds);\n        const merged = additive\n            ? new Set(this.selected)\n            : new Set([...this.selected].filter(id => !visible.has(id)));\n        selectedVisibleIds.filter(id => visible.has(id)).forEach(id => merged.add(id));\n        return [...merged];\n    }\n\n    public select(ids: readonly RecordId[]): void {\n        if (this.isSelection(ids)) {\n            return;\n        }\n        this.selected = new Set(ids);\n        this.revert();\n    }\n\n    public createCommit(): BulkEditCommit<TRecord, TField> {\n        const changes = this.changes;\n        const fields = [...this.pending.keys()];\n        return {\n            selectedIds: this.selectedIds,\n            changes,\n            affectedRecords: this.selectedRecords.filter(\n                record => fields.some(field => this.read(record, field) !== changes[field])\n            )\n        };\n    }\n\n    public commitSucceeded(updatedRecords?: readonly TRecord[]): void {\n        if (updatedRecords) {\n            this.records = updatedRecords;\n        }\n        this.revert();\n    }\n\n    private setPending(field: TField, value: string): void {\n        if (typeof field !== 'symbol') {\n            for (const existing of this.pending.keys()) {\n                if (typeof existing !== 'symbol'\n                    && typeof existing !== typeof field\n                    && String(existing) === String(field)) {\n                    throw new TypeError('Numeric and string field keys that map to the same object key cannot both be pending.');\n                }\n            }\n        }\n        this.pending.set(field, value);\n    }\n}\n"]}

package/dist/esm/fv/edit-commit-bar/index.d.ts

@@ -0,0 +1,32 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import type { BannerToggleEventDetail } from '@ni/nimble-components/dist/esm/banner/types';
+import type { CommitMessage } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-edit-commit-bar': FvEditCommitBar;
+    }
+}
+/**
+ * Heading, pending-change summary, actions, and feedback for an edit pane.
+ */
+export declare class FvEditCommitBar extends FoundationElement {
+    heading: string;
+    changeCount: number;
+    affectedRowCount: number;
+    hiddenAffectedRowCount: number;
+    saveDisabled: boolean;
+    revertDisabled: boolean;
+    actionsHidden: boolean;
+    hideEmptySummary: boolean;
+    message: CommitMessage | undefined;
+    /** @internal */
+    get summary(): string;
+    /** @internal */
+    save(): boolean;
+    /** @internal */
+    revert(): boolean;
+    /** @internal */
+    handleBannerToggle(event: CustomEvent<BannerToggleEventDetail>): boolean;
+}
+export declare const fvEditCommitBarTag = "ok-fv-edit-commit-bar";
+export type { CommitMessage };

package/dist/esm/fv/edit-commit-bar/index.js

@@ -0,0 +1,92 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, observable, volatile } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * Heading, pending-change summary, actions, and feedback for an edit pane.
+ */
+export class FvEditCommitBar extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.heading = '';
+        this.changeCount = 0;
+        this.affectedRowCount = 0;
+        this.hiddenAffectedRowCount = 0;
+        this.saveDisabled = false;
+        this.revertDisabled = false;
+        this.actionsHidden = false;
+        this.hideEmptySummary = false;
+    }
+    /** @internal */
+    get summary() {
+        if (this.changeCount === 0) {
+            return 'No pending changes';
+        }
+        const changes = `${this.changeCount} unsaved ${this.changeCount === 1 ? 'change' : 'changes'}`;
+        const rows = `${this.affectedRowCount} ${this.affectedRowCount === 1 ? 'row' : 'rows'}`;
+        const hidden = this.hiddenAffectedRowCount > 0
+            ? ` (${this.hiddenAffectedRowCount} hidden)`
+            : '';
+        return `${changes} in ${rows}${hidden}`;
+    }
+    /** @internal */
+    save() {
+        if (!this.saveDisabled) {
+            this.$emit('save');
+        }
+        return true;
+    }
+    /** @internal */
+    revert() {
+        if (!this.revertDisabled) {
+            this.$emit('revert');
+        }
+        return true;
+    }
+    /** @internal */
+    handleBannerToggle(event) {
+        if (!event.detail.newState) {
+            this.$emit('dismiss-message');
+        }
+        return true;
+    }
+}
+__decorate([
+    attr
+], FvEditCommitBar.prototype, "heading", void 0);
+__decorate([
+    attr({ attribute: 'change-count', converter: nullableNumberConverter })
+], FvEditCommitBar.prototype, "changeCount", void 0);
+__decorate([
+    attr({ attribute: 'affected-row-count', converter: nullableNumberConverter })
+], FvEditCommitBar.prototype, "affectedRowCount", void 0);
+__decorate([
+    attr({ attribute: 'hidden-affected-row-count', converter: nullableNumberConverter })
+], FvEditCommitBar.prototype, "hiddenAffectedRowCount", void 0);
+__decorate([
+    attr({ attribute: 'save-disabled', mode: 'boolean' })
+], FvEditCommitBar.prototype, "saveDisabled", void 0);
+__decorate([
+    attr({ attribute: 'revert-disabled', mode: 'boolean' })
+], FvEditCommitBar.prototype, "revertDisabled", void 0);
+__decorate([
+    attr({ attribute: 'actions-hidden', mode: 'boolean' })
+], FvEditCommitBar.prototype, "actionsHidden", void 0);
+__decorate([
+    attr({ attribute: 'hide-empty-summary', mode: 'boolean' })
+], FvEditCommitBar.prototype, "hideEmptySummary", void 0);
+__decorate([
+    observable
+], FvEditCommitBar.prototype, "message", void 0);
+__decorate([
+    volatile
+], FvEditCommitBar.prototype, "summary", null);
+const okFvEditCommitBar = FvEditCommitBar.compose({
+    baseName: 'fv-edit-commit-bar',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvEditCommitBar());
+export const fvEditCommitBarTag = 'ok-fv-edit-commit-bar';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/edit-commit-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/edit-commit-bar/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, nullableNumberConverter, observable, volatile } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport type { BannerToggleEventDetail } from '@ni/nimble-components/dist/esm/banner/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { CommitMessage } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-edit-commit-bar': FvEditCommitBar;\n    }\n}\n\n/**\n * Heading, pending-change summary, actions, and feedback for an edit pane.\n */\nexport class FvEditCommitBar extends FoundationElement {\n    @attr\n    public heading = '';\n\n    @attr({ attribute: 'change-count', converter: nullableNumberConverter })\n    public changeCount = 0;\n\n    @attr({ attribute: 'affected-row-count', converter: nullableNumberConverter })\n    public affectedRowCount = 0;\n\n    @attr({ attribute: 'hidden-affected-row-count', converter: nullableNumberConverter })\n    public hiddenAffectedRowCount = 0;\n\n    @attr({ attribute: 'save-disabled', mode: 'boolean' })\n    public saveDisabled = false;\n\n    @attr({ attribute: 'revert-disabled', mode: 'boolean' })\n    public revertDisabled = false;\n\n    @attr({ attribute: 'actions-hidden', mode: 'boolean' })\n    public actionsHidden = false;\n\n    @attr({ attribute: 'hide-empty-summary', mode: 'boolean' })\n    public hideEmptySummary = false;\n\n    @observable\n    public message: CommitMessage | undefined;\n\n    /** @internal */\n    @volatile\n    public get summary(): string {\n        if (this.changeCount === 0) {\n            return 'No pending changes';\n        }\n        const changes = `${this.changeCount} unsaved ${this.changeCount === 1 ? 'change' : 'changes'}`;\n        const rows = `${this.affectedRowCount} ${this.affectedRowCount === 1 ? 'row' : 'rows'}`;\n        const hidden = this.hiddenAffectedRowCount > 0\n            ? ` (${this.hiddenAffectedRowCount} hidden)`\n            : '';\n        return `${changes} in ${rows}${hidden}`;\n    }\n\n    /** @internal */\n    public save(): boolean {\n        if (!this.saveDisabled) {\n            this.$emit('save');\n        }\n        return true;\n    }\n\n    /** @internal */\n    public revert(): boolean {\n        if (!this.revertDisabled) {\n            this.$emit('revert');\n        }\n        return true;\n    }\n\n    /** @internal */\n    public handleBannerToggle(event: CustomEvent<BannerToggleEventDetail>): boolean {\n        if (!event.detail.newState) {\n            this.$emit('dismiss-message');\n        }\n        return true;\n    }\n}\n\nconst okFvEditCommitBar = FvEditCommitBar.compose({\n    baseName: 'fv-edit-commit-bar',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvEditCommitBar());\nexport const fvEditCommitBarTag = 'ok-fv-edit-commit-bar';\nexport type { CommitMessage };\n"]}

package/dist/esm/fv/edit-commit-bar/styles.d.ts

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

package/dist/esm/fv/edit-commit-bar/styles.js

@@ -0,0 +1,65 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, dividerBackgroundColor, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        container-type: inline-size;
+    }
+
+    .bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: ${standardPadding};
+        padding: ${standardPadding};
+        border-block-end: 1px solid ${dividerBackgroundColor};
+    }
+
+    .text {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    .heading {
+        display: flex;
+        align-items: center;
+        gap: ${standardPadding};
+    }
+
+    h2 {
+        flex: 1 1 auto;
+        min-width: 0;
+        margin: 0;
+        font: inherit;
+        font-weight: 600;
+    }
+
+    .summary {
+        margin-block-start: 4px;
+    }
+
+    .actions {
+        display: flex;
+        flex: 0 0 auto;
+        gap: ${standardPadding};
+    }
+
+    @container (max-width: 420px) {
+        .bar {
+            flex-wrap: wrap;
+        }
+
+        .text {
+            flex-basis: 100%;
+        }
+
+        .actions {
+            margin-inline-start: auto;
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/edit-commit-bar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/edit-commit-bar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;iBAGL,aAAa;gBACd,QAAQ;;;;;;;;eAQT,eAAe;mBACX,eAAe;sCACI,sBAAsB;;;;;;;;;;;eAW7C,eAAe;;;;;;;;;;;;;;;;;;eAkBf,eAAe;;;;;;;;;;;;;;;;CAgB7B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    dividerBackgroundColor,\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    ${display('block')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        container-type: inline-size;\n    }\n\n    .bar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: ${standardPadding};\n        padding: ${standardPadding};\n        border-block-end: 1px solid ${dividerBackgroundColor};\n    }\n\n    .text {\n        flex: 1 1 auto;\n        min-width: 0;\n    }\n\n    .heading {\n        display: flex;\n        align-items: center;\n        gap: ${standardPadding};\n    }\n\n    h2 {\n        flex: 1 1 auto;\n        min-width: 0;\n        margin: 0;\n        font: inherit;\n        font-weight: 600;\n    }\n\n    .summary {\n        margin-block-start: 4px;\n    }\n\n    .actions {\n        display: flex;\n        flex: 0 0 auto;\n        gap: ${standardPadding};\n    }\n\n    @container (max-width: 420px) {\n        .bar {\n            flex-wrap: wrap;\n        }\n\n        .text {\n            flex-basis: 100%;\n        }\n\n        .actions {\n            margin-inline-start: auto;\n        }\n    }\n`;\n"]}

package/dist/esm/fv/edit-commit-bar/template.d.ts

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

package/dist/esm/fv/edit-commit-bar/template.js

@@ -0,0 +1,45 @@
+import { html, when } from '@ni/fast-element';
+import { bannerTag } from '@ni/nimble-components/dist/esm/banner';
+import { buttonTag } from '@ni/nimble-components/dist/esm/button';
+import { iconArrowPartialRotateLeftTag } from '@ni/nimble-components/dist/esm/icons/arrow-partial-rotate-left';
+import { iconFloppyDiskTag } from '@ni/nimble-components/dist/esm/icons/floppy-disk';
+export const template = html `
+    ${when(x => x.message !== undefined, html `
+            <${bannerTag}
+                :open="${x => x.message !== undefined}"
+                title-hidden
+                severity="${x => x.message?.severity}"
+                aria-live="${x => (x.message?.severity === 'error' ? 'assertive' : 'polite')}"
+                @toggle="${(x, c) => x.handleBannerToggle(c.event)}"
+            >${x => x.message?.text}</${bannerTag}>
+        `)}
+    <div class="bar">
+        <div class="text">
+            <div class="heading">
+                <h2>${x => x.heading}</h2>
+                <slot name="heading-actions"></slot>
+            </div>
+            ${when(x => !x.hideEmptySummary || x.changeCount > 0, html `
+                    <div class="summary" role="status" aria-live="polite" aria-atomic="true">
+                        ${x => x.summary}
+                    </div>
+                `)}
+        </div>
+        ${when(x => !x.actionsHidden, html `
+                <div class="actions">
+                    <${buttonTag}
+                        appearance="ghost"
+                        ?disabled="${x => x.revertDisabled}"
+                        @click="${x => x.revert()}"
+                    ><${iconArrowPartialRotateLeftTag} slot="start"></${iconArrowPartialRotateLeftTag}>Revert</${buttonTag}>
+                    <${buttonTag}
+                        appearance="block"
+                        appearance-variant="accent"
+                        ?disabled="${x => x.saveDisabled}"
+                        @click="${x => x.save()}"
+                    ><${iconFloppyDiskTag} slot="start"></${iconFloppyDiskTag}>Save</${buttonTag}>
+                </div>
+            `)}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/edit-commit-bar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/edit-commit-bar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,gEAAgE,CAAC;AAC/G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAGrF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAiB;MACvC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,SAAS,EAC5B,IAAI,CAAiB;eACd,SAAS;yBACC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,SAAS;;4BAEzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ;6BACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;2BACjE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAA6C,CAAC;eAC3F,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,KAAK,SAAS;SACxC,CACJ;;;;sBAIiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;;cAGtB,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,WAAW,GAAG,CAAC,EAC7C,IAAI,CAAiB;;0BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;iBAEvB,CACJ;;UAEH,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,EACrB,IAAI,CAAiB;;uBAEV,SAAS;;qCAEK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;kCACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;wBACzB,6BAA6B,mBAAmB,6BAA6B,YAAY,SAAS;uBACnG,SAAS;;;qCAGK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;kCACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;wBACvB,iBAAiB,mBAAmB,iBAAiB,UAAU,SAAS;;aAEnF,CACJ;;CAER,CAAC","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { bannerTag } from '@ni/nimble-components/dist/esm/banner';\nimport type { BannerToggleEventDetail } from '@ni/nimble-components/dist/esm/banner/types';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { iconArrowPartialRotateLeftTag } from '@ni/nimble-components/dist/esm/icons/arrow-partial-rotate-left';\nimport { iconFloppyDiskTag } from '@ni/nimble-components/dist/esm/icons/floppy-disk';\nimport type { FvEditCommitBar } from '.';\n\nexport const template = html<FvEditCommitBar>`\n    ${when(\n        x => x.message !== undefined,\n        html<FvEditCommitBar>`\n            <${bannerTag}\n                :open=\"${x => x.message !== undefined}\"\n                title-hidden\n                severity=\"${x => x.message?.severity}\"\n                aria-live=\"${x => (x.message?.severity === 'error' ? 'assertive' : 'polite')}\"\n                @toggle=\"${(x, c) => x.handleBannerToggle(c.event as CustomEvent<BannerToggleEventDetail>)}\"\n            >${x => x.message?.text}</${bannerTag}>\n        `\n    )}\n    <div class=\"bar\">\n        <div class=\"text\">\n            <div class=\"heading\">\n                <h2>${x => x.heading}</h2>\n                <slot name=\"heading-actions\"></slot>\n            </div>\n            ${when(\n                x => !x.hideEmptySummary || x.changeCount > 0,\n                html<FvEditCommitBar>`\n                    <div class=\"summary\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n                        ${x => x.summary}\n                    </div>\n                `\n            )}\n        </div>\n        ${when(\n            x => !x.actionsHidden,\n            html<FvEditCommitBar>`\n                <div class=\"actions\">\n                    <${buttonTag}\n                        appearance=\"ghost\"\n                        ?disabled=\"${x => x.revertDisabled}\"\n                        @click=\"${x => x.revert()}\"\n                    ><${iconArrowPartialRotateLeftTag} slot=\"start\"></${iconArrowPartialRotateLeftTag}>Revert</${buttonTag}>\n                    <${buttonTag}\n                        appearance=\"block\"\n                        appearance-variant=\"accent\"\n                        ?disabled=\"${x => x.saveDisabled}\"\n                        @click=\"${x => x.save()}\"\n                    ><${iconFloppyDiskTag} slot=\"start\"></${iconFloppyDiskTag}>Save</${buttonTag}>\n                </div>\n            `\n        )}\n    </div>\n`;\n"]}

package/dist/esm/fv/edit-commit-bar/types.d.ts

@@ -0,0 +1,4 @@
+export interface CommitMessage {
+    severity: 'information' | 'error';
+    text: string;
+}

package/dist/esm/fv/edit-commit-bar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv/edit-commit-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/edit-commit-bar/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface CommitMessage {\n    severity: 'information' | 'error';\n    text: string;\n}\n"]}

package/dist/esm/fv/search-input/styles.js

@@ -41,7 +41,7 @@ export const styles = css `
             position: absolute;
             inset-inline: 0;
             inset-block-end: calc(-1 * ${borderWidth});
-            border-bottom: calc(${borderWidth} + 1px) solid ${borderHoverColor};
+            border-bottom: ${borderWidth} solid ${borderHoverColor};
             transform: scaleX(0);
             transform-origin: center;
             transition:
@@ -135,12 +135,15 @@ export const styles = css `
             border-bottom-color: ${borderHoverColor};
         }
 
+        :host([appearance='block']) .search-input-container:hover::after,
         :host([appearance='underline']) .search-input-container:hover::after {
+            border-bottom-width: calc(${borderWidth} + 1px);
             border-bottom-color: ${borderHoverColor};
         }
 
         :host([appearance='frameless']) .search-input-container:hover::after {
             transform: scaleX(1);
+            border-bottom-width: calc(${borderWidth} + 1px);
             border-bottom-color: ${borderHoverColor};
         }
     }

package/dist/esm/fv/search-input/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/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,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,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,cAAc,CAAC;;;8DAG6B,eAAe;6DAChB,aAAa;uHAC6C,QAAQ,MAAM,YAAY;yHACxB,QAAQ;iEAChE,qBAAqB;;;sBAGhE,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;kCAClB,WAAW,iBAAiB,gBAAgB;;;;4BAIlD,UAAU;sCACA,UAAU;;;;;;;;;;;;qBAY3B,oBAAoB;;cAE3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;;;;;qBAsB7C,oBAAoB;;;;;;;;;;;;;;;;;;;;;cAqB3B,SAAS,CAAC,iBAAiB;;;;;;;;qCAQJ,qBAAqB;;;;;;;;;;;0BAWhC,cAAc;;;;4BAIZ,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;;;;;;;;uBAU5B,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    iconColor,\n    iconSize,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding,\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, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            --ni-private-ok-fv-search-input-inline-padding: ${standardPadding};\n            --ni-private-ok-fv-search-input-leading-inset: ${mediumPadding};\n            --ni-private-ok-fv-search-input-leading-space: calc(var(--ni-private-ok-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});\n            --ni-private-ok-fv-search-input-trailing-space: calc(var(--ni-private-ok-fv-search-input-inline-padding) + ${iconSize});\n            --ni-private-ok-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);\n            --ni-private-ok-fv-search-input-border-radius: 0px;\n            min-width: 120px;\n            height: ${controlHeight};\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .search-input-container {\n            position: relative;\n            display: flex;\n            align-items: center;\n            width: 100%;\n            height: 100%;\n            border: ${borderWidth} solid transparent;\n            border-radius: var(--ni-private-ok-fv-search-input-border-radius);\n            color: inherit;\n            background-color: transparent;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                box-shadow ${smallDelay} ease-in-out,\n                background-color ${smallDelay} ease-in-out;\n        }\n\n        .search-input-container::after {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: calc(-1 * ${borderWidth});\n            border-bottom: calc(${borderWidth} + 1px) solid ${borderHoverColor};\n            transform: scaleX(0);\n            transform-origin: center;\n            transition:\n                transform ${smallDelay} ease-in-out,\n                border-bottom-color ${smallDelay} ease-in-out;\n            pointer-events: none;\n        }\n\n        .search-input-icon {\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-start: var(--ni-private-ok-fv-search-input-leading-inset);\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            pointer-events: none;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        .search-input {\n            -webkit-appearance: none;\n            appearance: none;\n            display: block;\n            flex: 1 1 auto;\n            min-width: 0;\n            width: 100%;\n            height: 100%;\n            padding: 0 var(--ni-private-ok-fv-search-input-trailing-space) 0 var(--ni-private-ok-fv-search-input-leading-space);\n            font: inherit;\n            line-height: normal;\n            color: inherit;\n            border: none;\n            outline: none;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .search-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .search-input-clear {\n            -webkit-appearance: none;\n            appearance: none;\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-end: 3px;\n            height: calc(100% - 6px);\n            aspect-ratio: 1;\n            padding: 0;\n            transform: translateY(-50%);\n            color: inherit;\n            border: none;\n            border-radius: 2px;\n            background: transparent;\n            cursor: pointer;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        :host([appearance='outline']) .search-input-container {\n            border-color: var(--ni-private-ok-fv-search-input-border-color);\n        }\n\n        :host([appearance='block']) .search-input-container {\n            background-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([appearance='underline']) .search-input-container::after {\n            transform: scaleX(1);\n            border-bottom-color: var(--ni-private-ok-fv-search-input-border-color);\n        }\n    }\n\n    @layer hover {\n        .search-input-clear:hover {\n            background: ${fillHoverColor};\n        }\n\n        :host([appearance='outline']) .search-input-container:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:hover::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .search-input:focus-visible {\n            outline: none;\n        }\n\n        .search-input-clear:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n\n        :host([appearance='outline']) .search-input-container:focus-within {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:focus-within::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n`;"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/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,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,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,cAAc,CAAC;;;8DAG6B,eAAe;6DAChB,aAAa;uHAC6C,QAAQ,MAAM,YAAY;yHACxB,QAAQ;iEAChE,qBAAqB;;;sBAGhE,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;6BACvB,WAAW,UAAU,gBAAgB;;;;4BAItC,UAAU;sCACA,UAAU;;;;;;;;;;;;qBAY3B,oBAAoB;;cAE3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;;;;;qBAsB7C,oBAAoB;;;;;;;;;;;;;;;;;;;;;cAqB3B,SAAS,CAAC,iBAAiB;;;;;;;;qCAQJ,qBAAqB;;;;;;;;;;;0BAWhC,cAAc;;;;4BAIZ,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;;wCAKX,WAAW;mCAChB,gBAAgB;;;;;wCAKX,WAAW;mCAChB,gBAAgB;;;;;;;;;;uBAU5B,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    iconColor,\n    iconSize,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding,\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, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            --ni-private-ok-fv-search-input-inline-padding: ${standardPadding};\n            --ni-private-ok-fv-search-input-leading-inset: ${mediumPadding};\n            --ni-private-ok-fv-search-input-leading-space: calc(var(--ni-private-ok-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});\n            --ni-private-ok-fv-search-input-trailing-space: calc(var(--ni-private-ok-fv-search-input-inline-padding) + ${iconSize});\n            --ni-private-ok-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);\n            --ni-private-ok-fv-search-input-border-radius: 0px;\n            min-width: 120px;\n            height: ${controlHeight};\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .search-input-container {\n            position: relative;\n            display: flex;\n            align-items: center;\n            width: 100%;\n            height: 100%;\n            border: ${borderWidth} solid transparent;\n            border-radius: var(--ni-private-ok-fv-search-input-border-radius);\n            color: inherit;\n            background-color: transparent;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                box-shadow ${smallDelay} ease-in-out,\n                background-color ${smallDelay} ease-in-out;\n        }\n\n        .search-input-container::after {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: calc(-1 * ${borderWidth});\n            border-bottom: ${borderWidth} solid ${borderHoverColor};\n            transform: scaleX(0);\n            transform-origin: center;\n            transition:\n                transform ${smallDelay} ease-in-out,\n                border-bottom-color ${smallDelay} ease-in-out;\n            pointer-events: none;\n        }\n\n        .search-input-icon {\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-start: var(--ni-private-ok-fv-search-input-leading-inset);\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            pointer-events: none;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        .search-input {\n            -webkit-appearance: none;\n            appearance: none;\n            display: block;\n            flex: 1 1 auto;\n            min-width: 0;\n            width: 100%;\n            height: 100%;\n            padding: 0 var(--ni-private-ok-fv-search-input-trailing-space) 0 var(--ni-private-ok-fv-search-input-leading-space);\n            font: inherit;\n            line-height: normal;\n            color: inherit;\n            border: none;\n            outline: none;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .search-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .search-input-clear {\n            -webkit-appearance: none;\n            appearance: none;\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-end: 3px;\n            height: calc(100% - 6px);\n            aspect-ratio: 1;\n            padding: 0;\n            transform: translateY(-50%);\n            color: inherit;\n            border: none;\n            border-radius: 2px;\n            background: transparent;\n            cursor: pointer;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        :host([appearance='outline']) .search-input-container {\n            border-color: var(--ni-private-ok-fv-search-input-border-color);\n        }\n\n        :host([appearance='block']) .search-input-container {\n            background-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([appearance='underline']) .search-input-container::after {\n            transform: scaleX(1);\n            border-bottom-color: var(--ni-private-ok-fv-search-input-border-color);\n        }\n    }\n\n    @layer hover {\n        .search-input-clear:hover {\n            background: ${fillHoverColor};\n        }\n\n        :host([appearance='outline']) .search-input-container:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='block']) .search-input-container:hover::after,\n        :host([appearance='underline']) .search-input-container:hover::after {\n            border-bottom-width: calc(${borderWidth} + 1px);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-width: calc(${borderWidth} + 1px);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .search-input:focus-visible {\n            outline: none;\n        }\n\n        .search-input-clear:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n\n        :host([appearance='outline']) .search-input-container:focus-within {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:focus-within::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/split-layout/index.d.ts

@@ -0,0 +1,48 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-split-layout': FvSplitLayout;
+    }
+}
+/**
+ * A full-height, resizable two-pane layout.
+ */
+export declare class FvSplitLayout extends FoundationElement {
+    position: number;
+    min: number;
+    max: number;
+    minSecondaryPixels: number;
+    collapsed: boolean;
+    step: number;
+    primaryPaneId: string;
+    secondaryPaneId: string;
+    /** @internal */
+    availableWidth: number;
+    private readonly resizeObserver;
+    private requestedPosition;
+    private applyingConstrainedPosition;
+    private requestedPositionResetScheduled;
+    private positionChangeCallbackVersion;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    positionChanged(): void;
+    minChanged(): void;
+    maxChanged(): void;
+    minSecondaryPixelsChanged(): void;
+    collapsedChanged(): void;
+    /** @internal */
+    get effectiveMin(): number;
+    /** @internal */
+    get effectiveMax(): number;
+    /** @internal */
+    get gridTemplateColumns(): string;
+    /** @internal */
+    handleSplitterInput(event: Event): boolean;
+    /** @internal */
+    handleSplitterChange(event: Event): boolean;
+    private constrainPosition;
+    private resetRequestedPositionAfterSynchronousUpdates;
+    private get effectiveMinSecondaryPixels();
+}
+export declare const fvSplitLayoutTag = "ok-fv-split-layout";