@ni/ok-components 1.2.1 → 1.3.0

package/dist/esm/fv/chip-selector/index.js

@@ -0,0 +1,367 @@
+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 { chipTag } from '@ni/nimble-components/dist/esm/chip';
+import { diacriticInsensitiveStringNormalizer } from '@ni/nimble-components/dist/esm/utilities/models/string-normalizers';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A chip picker with inline text entry, removable chips, and a dropdown option list.
+ */
+export class FvChipSelector extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.open = false;
+        this.label = '';
+        this.selectedValues = '';
+        this.options = '';
+        this.placeholder = 'Select values';
+        this.allowCustomValues = false;
+        /** @internal */
+        this.filterText = '';
+        /** @internal */
+        this.activeOptionIndex = -1;
+        /** @internal */
+        this.activeOptionId = null;
+        /** @internal */
+        this.inputId = uniqueId('ok-fv-chip-selector-input');
+        /** @internal */
+        this.labelId = uniqueId('ok-fv-chip-selector-label');
+        /** @internal */
+        this.menuId = uniqueId('ok-fv-chip-selector-menu');
+        this.inputElement = null;
+        this.menuButtonElement = null;
+        this.documentClickHandler = (event) => {
+            if (this.open && !event.composedPath().includes(this)) {
+                this.setOpen(false);
+            }
+        };
+    }
+    /** @internal */
+    disabledChanged() {
+        if (this.disabled) {
+            this.filterText = '';
+            this.open = false;
+        }
+    }
+    /** @internal */
+    openChanged() {
+        this.syncMenuButtonState();
+        if (!this.open) {
+            this.activeOptionIndex = -1;
+        }
+    }
+    /** @internal */
+    activeOptionIndexChanged() {
+        this.syncActiveOption();
+    }
+    /** @internal */
+    filterTextChanged() {
+        this.activeOptionIndex = -1;
+    }
+    /** @internal */
+    optionsChanged() { }
+    /** @internal */
+    allowCustomValuesChanged() { }
+    /** @internal */
+    selectedValuesChanged() { }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.documentClickHandler);
+    }
+    /** @internal */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.documentClickHandler);
+        super.disconnectedCallback();
+    }
+    /** @internal */
+    captureInputRef(input) {
+        this.inputElement = input;
+    }
+    /** @internal */
+    captureMenuButtonRef(menuButton) {
+        this.menuButtonElement = menuButton;
+        this.syncMenuButtonState();
+    }
+    /** @internal */
+    regionChanged(_prev, _next) {
+        if (this.region && this.field) {
+            this.region.anchorElement = this.field;
+        }
+    }
+    /** @internal */
+    fieldChanged(_prev, _next) {
+        if (this.region) {
+            this.region.anchorElement = this.field ?? null;
+        }
+    }
+    /** @internal */
+    get selectedValueList() {
+        return Array.from(new Set(this.selectedValues
+            .split(',')
+            .map(value => value.trim())
+            .filter(value => value.length > 0)));
+    }
+    /** @internal */
+    get optionList() {
+        return Array.from(new Set(this.options
+            .split(',')
+            .map(option => option.trim())
+            .filter(option => option.length > 0)));
+    }
+    /** @internal */
+    get visibleOptionList() {
+        const selectedValues = new Set(this.selectedValueList);
+        const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());
+        return this.optionList.filter(option => {
+            if (selectedValues.has(option)) {
+                return false;
+            }
+            return normalizedFilter.length === 0
+                || diacriticInsensitiveStringNormalizer(option).includes(normalizedFilter);
+        });
+    }
+    /** @internal */
+    get customValueCandidate() {
+        const trimmedFilterText = this.filterText.trim();
+        if (!this.allowCustomValues || trimmedFilterText.length === 0 || trimmedFilterText.includes(',')) {
+            return '';
+        }
+        if (this.optionList.includes(trimmedFilterText) || this.selectedValueList.includes(trimmedFilterText)) {
+            return '';
+        }
+        return trimmedFilterText;
+    }
+    /** @internal */
+    get createOptionLabel() {
+        return `Add '${this.customValueCandidate}'`;
+    }
+    /** @internal */
+    get showEmptyState() {
+        return this.visibleOptionList.length === 0 && this.customValueCandidate.length === 0;
+    }
+    /** @internal */
+    handleFieldClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        const target = event.target;
+        if (target?.closest(chipTag) || target?.closest('.chip-selector-menu-button')) {
+            return;
+        }
+        this.setOpen(true);
+        this.inputElement?.focus();
+    }
+    /** @internal */
+    handleMenuButtonClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.disabled) {
+            return;
+        }
+        this.setOpen(!this.open);
+        this.inputElement?.focus();
+    }
+    /** @internal */
+    handleMenuButtonChange(event) {
+        // Prevent internal toggle-button change events from surfacing as chip-selector selection changes.
+        event.stopPropagation();
+        this.syncMenuButtonState();
+    }
+    /** @internal */
+    handleInput(event) {
+        const input = event.target;
+        this.filterText = input.value;
+        this.setOpen(true);
+    }
+    /** @internal */
+    handleInputFocus() {
+        if (!this.disabled) {
+            this.setOpen(true);
+        }
+    }
+    /** @internal */
+    handleInputKeydown(event) {
+        if (this.disabled) {
+            return true;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!this.open) {
+                this.setOpen(true);
+            }
+            const maxIndex = this.visibleOptionList.length + (this.customValueCandidate ? 1 : 0) - 1;
+            if (maxIndex < 0) {
+                return false;
+            }
+            if (event.key === 'ArrowDown') {
+                this.activeOptionIndex = Math.min(this.activeOptionIndex + 1, maxIndex);
+            }
+            else {
+                this.activeOptionIndex = Math.max(this.activeOptionIndex - 1, 0);
+            }
+            return false;
+        }
+        if (event.key === 'Enter') {
+            if (this.open && this.activeOptionIndex >= 0) {
+                event.preventDefault();
+                this.commitActiveOption();
+                return false;
+            }
+            return true;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.filterText = '';
+            this.setOpen(false);
+            return false;
+        }
+        if (event.key === 'Backspace' && this.filterText.length === 0) {
+            const selectedValues = this.selectedValueList;
+            const lastValue = selectedValues[selectedValues.length - 1];
+            if (lastValue) {
+                event.preventDefault();
+                this.removeValue(lastValue);
+            }
+            return false;
+        }
+        return true;
+    }
+    /** @internal */
+    handleChipRemove(event) {
+        const chip = event.composedPath().find(element => element instanceof HTMLElement && element.tagName.toLowerCase() === chipTag);
+        const value = chip?.getAttribute('data-chip-value')?.trim();
+        if (value) {
+            this.removeValue(value);
+        }
+    }
+    /** @internal */
+    handleMenuClick(event) {
+        const optionEl = event.composedPath().find(el => el instanceof HTMLElement && el.hasAttribute('data-option-value'));
+        const value = optionEl?.getAttribute('data-option-value')?.trim();
+        if (value) {
+            this.addValue(value);
+        }
+    }
+    /** @internal */
+    handleMenuItemChange(event) {
+        event.stopPropagation();
+        const menuItem = event.composedPath().find(pathItem => pathItem instanceof HTMLElement && pathItem.hasAttribute('data-option-value'));
+        const value = menuItem?.getAttribute('data-option-value')?.trim();
+        if (value) {
+            this.addValue(value);
+        }
+    }
+    syncActiveOption() {
+        const options = Array.from(this.shadowRoot?.querySelectorAll('.chip-selector-option') ?? []);
+        options.forEach((option, index) => {
+            option.setAttribute('aria-selected', String(index === this.activeOptionIndex));
+        });
+        if (this.activeOptionIndex < 0) {
+            this.activeOptionId = null;
+        }
+        else if (this.customValueCandidate.length > 0
+            && this.activeOptionIndex === this.visibleOptionList.length) {
+            this.activeOptionId = `${this.menuId}-option-create`;
+        }
+        else {
+            this.activeOptionId = `${this.menuId}-option-${this.activeOptionIndex}`;
+        }
+    }
+    commitActiveOption() {
+        const allOptions = [
+            ...this.visibleOptionList,
+            ...(this.customValueCandidate ? [this.customValueCandidate] : [])
+        ];
+        const value = allOptions[this.activeOptionIndex];
+        if (value !== undefined) {
+            this.addValue(value);
+        }
+    }
+    addValue(value) {
+        if (this.disabled) {
+            return;
+        }
+        const nextValues = this.selectedValueList;
+        if (nextValues.includes(value)) {
+            return;
+        }
+        nextValues.push(value);
+        this.commitSelection(nextValues);
+        this.filterText = '';
+        this.setOpen(true);
+        this.inputElement?.focus();
+    }
+    removeValue(value) {
+        if (this.disabled) {
+            return;
+        }
+        const nextValues = this.selectedValueList.filter(selectedValue => selectedValue !== value);
+        this.commitSelection(nextValues);
+        this.inputElement?.focus();
+    }
+    commitSelection(nextValues) {
+        this.selectedValues = nextValues.join(',');
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { selectedValues: nextValues }
+        }));
+    }
+    setOpen(nextOpen) {
+        this.open = this.disabled ? false : nextOpen;
+        this.syncMenuButtonState();
+    }
+    syncMenuButtonState() {
+        if (this.menuButtonElement) {
+            this.menuButtonElement.checked = this.open;
+        }
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], FvChipSelector.prototype, "disabled", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvChipSelector.prototype, "open", void 0);
+__decorate([
+    attr
+], FvChipSelector.prototype, "label", void 0);
+__decorate([
+    attr({ attribute: 'selected-values' })
+], FvChipSelector.prototype, "selectedValues", void 0);
+__decorate([
+    attr
+], FvChipSelector.prototype, "options", void 0);
+__decorate([
+    attr
+], FvChipSelector.prototype, "placeholder", void 0);
+__decorate([
+    attr({ attribute: 'allow-custom-values', mode: 'boolean' })
+], FvChipSelector.prototype, "allowCustomValues", void 0);
+__decorate([
+    observable
+], FvChipSelector.prototype, "filterText", void 0);
+__decorate([
+    observable
+], FvChipSelector.prototype, "activeOptionIndex", void 0);
+__decorate([
+    observable
+], FvChipSelector.prototype, "activeOptionId", void 0);
+__decorate([
+    observable
+], FvChipSelector.prototype, "region", void 0);
+__decorate([
+    observable
+], FvChipSelector.prototype, "field", void 0);
+const okFvChipSelector = FvChipSelector.compose({
+    baseName: 'fv-chip-selector',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
+export const fvChipSelectorTag = 'ok-fv-chip-selector';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/chip-selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/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 type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { chipTag } from '@ni/nimble-components/dist/esm/chip';\nimport { diacriticInsensitiveStringNormalizer } from '@ni/nimble-components/dist/esm/utilities/models/string-normalizers';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-chip-selector': FvChipSelector;\n    }\n}\n\n/**\n * A chip picker with inline text entry, removable chips, and a dropdown option list.\n */\nexport class FvChipSelector extends FoundationElement {\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    @attr\n    public label = '';\n\n    @attr({ attribute: 'selected-values' })\n    public selectedValues = '';\n\n    @attr\n    public options = '';\n\n    @attr\n    public placeholder = 'Select values';\n\n    @attr({ attribute: 'allow-custom-values', mode: 'boolean' })\n    public allowCustomValues = false;\n\n    /** @internal */\n    @observable\n    public filterText = '';\n\n    /** @internal */\n    @observable\n    public activeOptionIndex = -1;\n\n    /** @internal */\n    @observable\n    public activeOptionId: string | null = null;\n\n    /** @internal */\n    public readonly inputId = uniqueId('ok-fv-chip-selector-input');\n\n    /** @internal */\n    public readonly labelId = uniqueId('ok-fv-chip-selector-label');\n\n    /** @internal */\n    public readonly menuId = uniqueId('ok-fv-chip-selector-menu');\n\n    /** @internal */\n    @observable\n    public readonly region?: AnchoredRegion;\n\n    /** @internal */\n    @observable\n    public readonly field?: HTMLElement;\n\n    private inputElement: HTMLInputElement | null = null;\n\n    private menuButtonElement: (HTMLElement & { checked?: boolean }) | null = null;\n\n    /** @internal */\n    public disabledChanged(): void {\n        if (this.disabled) {\n            this.filterText = '';\n            this.open = false;\n        }\n    }\n\n    /** @internal */\n    public openChanged(): void {\n        this.syncMenuButtonState();\n        if (!this.open) {\n            this.activeOptionIndex = -1;\n        }\n    }\n\n    /** @internal */\n    public activeOptionIndexChanged(): void {\n        this.syncActiveOption();\n    }\n\n    /** @internal */\n    public filterTextChanged(): void {\n        this.activeOptionIndex = -1;\n    }\n\n    /** @internal */\n    public optionsChanged(): void {}\n\n    /** @internal */\n    public allowCustomValuesChanged(): void {}\n\n    /** @internal */\n    public selectedValuesChanged(): void {}\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        document.addEventListener('click', this.documentClickHandler);\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        document.removeEventListener('click', this.documentClickHandler);\n        super.disconnectedCallback();\n    }\n\n    /** @internal */\n    public captureInputRef(input: HTMLInputElement | null): void {\n        this.inputElement = input;\n    }\n\n    /** @internal */\n    public captureMenuButtonRef(menuButton: (HTMLElement & { checked?: boolean }) | null): void {\n        this.menuButtonElement = menuButton;\n        this.syncMenuButtonState();\n    }\n\n    /** @internal */\n    public regionChanged(\n        _prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (this.region && this.field) {\n            this.region.anchorElement = this.field;\n        }\n    }\n\n    /** @internal */\n    public fieldChanged(\n        _prev: HTMLElement | undefined,\n        _next: HTMLElement | undefined\n    ): void {\n        if (this.region) {\n            this.region.anchorElement = this.field ?? null;\n        }\n    }\n\n    /** @internal */\n    public get selectedValueList(): string[] {\n        return Array.from(new Set(\n            this.selectedValues\n                .split(',')\n                .map(value => value.trim())\n                .filter(value => value.length > 0)\n        ));\n    }\n\n    /** @internal */\n    public get optionList(): string[] {\n        return Array.from(new Set(\n            this.options\n                .split(',')\n                .map(option => option.trim())\n                .filter(option => option.length > 0)\n        ));\n    }\n\n    /** @internal */\n    public get visibleOptionList(): string[] {\n        const selectedValues = new Set(this.selectedValueList);\n        const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());\n\n        return this.optionList.filter(option => {\n            if (selectedValues.has(option)) {\n                return false;\n            }\n\n            return normalizedFilter.length === 0\n                || diacriticInsensitiveStringNormalizer(option).includes(normalizedFilter);\n        });\n    }\n\n    /** @internal */\n    public get customValueCandidate(): string {\n        const trimmedFilterText = this.filterText.trim();\n\n        if (!this.allowCustomValues || trimmedFilterText.length === 0 || trimmedFilterText.includes(',')) {\n            return '';\n        }\n\n        if (this.optionList.includes(trimmedFilterText) || this.selectedValueList.includes(trimmedFilterText)) {\n            return '';\n        }\n\n        return trimmedFilterText;\n    }\n\n    /** @internal */\n    public get createOptionLabel(): string {\n        return `Add '${this.customValueCandidate}'`;\n    }\n\n    /** @internal */\n    public get showEmptyState(): boolean {\n        return this.visibleOptionList.length === 0 && this.customValueCandidate.length === 0;\n    }\n\n    /** @internal */\n    public handleFieldClick(event: Event): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const target = event.target as HTMLElement | null;\n        if (target?.closest(chipTag) || target?.closest('.chip-selector-menu-button')) {\n            return;\n        }\n\n        this.setOpen(true);\n        this.inputElement?.focus();\n    }\n\n    /** @internal */\n    public handleMenuButtonClick(event: Event): void {\n        event.stopPropagation();\n        event.preventDefault();\n\n        if (this.disabled) {\n            return;\n        }\n\n        this.setOpen(!this.open);\n        this.inputElement?.focus();\n    }\n\n    /** @internal */\n    public handleMenuButtonChange(event: Event): void {\n        // Prevent internal toggle-button change events from surfacing as chip-selector selection changes.\n        event.stopPropagation();\n        this.syncMenuButtonState();\n    }\n\n    /** @internal */\n    public handleInput(event: Event): void {\n        const input = event.target as HTMLInputElement;\n        this.filterText = input.value;\n        this.setOpen(true);\n    }\n\n    /** @internal */\n    public handleInputFocus(): void {\n        if (!this.disabled) {\n            this.setOpen(true);\n        }\n    }\n\n    /** @internal */\n    public handleInputKeydown(event: KeyboardEvent): boolean {\n        if (this.disabled) {\n            return true;\n        }\n\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            if (!this.open) {\n                this.setOpen(true);\n            }\n            const maxIndex = this.visibleOptionList.length + (this.customValueCandidate ? 1 : 0) - 1;\n            if (maxIndex < 0) {\n                return false;\n            }\n            if (event.key === 'ArrowDown') {\n                this.activeOptionIndex = Math.min(this.activeOptionIndex + 1, maxIndex);\n            } else {\n                this.activeOptionIndex = Math.max(this.activeOptionIndex - 1, 0);\n            }\n            return false;\n        }\n\n        if (event.key === 'Enter') {\n            if (this.open && this.activeOptionIndex >= 0) {\n                event.preventDefault();\n                this.commitActiveOption();\n                return false;\n            }\n            return true;\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n            this.filterText = '';\n            this.setOpen(false);\n            return false;\n        }\n\n        if (event.key === 'Backspace' && this.filterText.length === 0) {\n            const selectedValues = this.selectedValueList;\n            const lastValue = selectedValues[selectedValues.length - 1];\n            if (lastValue) {\n                event.preventDefault();\n                this.removeValue(lastValue);\n            }\n            return false;\n        }\n\n        return true;\n    }\n\n    /** @internal */\n    public handleChipRemove(event: Event): void {\n        const chip = event.composedPath().find(\n            element => element instanceof HTMLElement && element.tagName.toLowerCase() === chipTag\n        ) as HTMLElement | undefined;\n\n        const value = chip?.getAttribute('data-chip-value')?.trim();\n        if (value) {\n            this.removeValue(value);\n        }\n    }\n\n    /** @internal */\n    public handleMenuClick(event: Event): void {\n        const optionEl = event.composedPath().find(\n            el => el instanceof HTMLElement && el.hasAttribute('data-option-value')\n        ) as HTMLElement | undefined;\n        const value = optionEl?.getAttribute('data-option-value')?.trim();\n        if (value) {\n            this.addValue(value);\n        }\n    }\n\n    /** @internal */\n    public handleMenuItemChange(event: Event): void {\n        event.stopPropagation();\n        const menuItem = event.composedPath().find(\n            pathItem => pathItem instanceof HTMLElement && pathItem.hasAttribute('data-option-value')\n        ) as HTMLElement | undefined;\n        const value = menuItem?.getAttribute('data-option-value')?.trim();\n        if (value) {\n            this.addValue(value);\n        }\n    }\n\n    private readonly documentClickHandler = (event: Event): void => {\n        if (this.open && !event.composedPath().includes(this)) {\n            this.setOpen(false);\n        }\n    };\n\n    private syncActiveOption(): void {\n        const options = Array.from(\n            this.shadowRoot?.querySelectorAll<HTMLElement>('.chip-selector-option') ?? []\n        );\n        options.forEach((option, index) => {\n            option.setAttribute('aria-selected', String(index === this.activeOptionIndex));\n        });\n\n        if (this.activeOptionIndex < 0) {\n            this.activeOptionId = null;\n        } else if (\n            this.customValueCandidate.length > 0\n            && this.activeOptionIndex === this.visibleOptionList.length\n        ) {\n            this.activeOptionId = `${this.menuId}-option-create`;\n        } else {\n            this.activeOptionId = `${this.menuId}-option-${this.activeOptionIndex}`;\n        }\n    }\n\n    private commitActiveOption(): void {\n        const allOptions = [\n            ...this.visibleOptionList,\n            ...(this.customValueCandidate ? [this.customValueCandidate] : [])\n        ];\n        const value = allOptions[this.activeOptionIndex];\n        if (value !== undefined) {\n            this.addValue(value);\n        }\n    }\n\n    private addValue(value: string): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const nextValues = this.selectedValueList;\n        if (nextValues.includes(value)) {\n            return;\n        }\n\n        nextValues.push(value);\n        this.commitSelection(nextValues);\n        this.filterText = '';\n        this.setOpen(true);\n        this.inputElement?.focus();\n    }\n\n    private removeValue(value: string): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const nextValues = this.selectedValueList.filter(selectedValue => selectedValue !== value);\n        this.commitSelection(nextValues);\n        this.inputElement?.focus();\n    }\n\n    private commitSelection(nextValues: string[]): void {\n        this.selectedValues = nextValues.join(',');\n        this.dispatchEvent(new CustomEvent('change', {\n            bubbles: true,\n            composed: true,\n            detail: { selectedValues: nextValues }\n        }));\n    }\n\n    private setOpen(nextOpen: boolean): void {\n        this.open = this.disabled ? false : nextOpen;\n        this.syncMenuButtonState();\n    }\n\n    private syncMenuButtonState(): void {\n        if (this.menuButtonElement) {\n            this.menuButtonElement.checked = this.open;\n        }\n    }\n}\n\nconst okFvChipSelector = FvChipSelector.compose({\n    baseName: 'fv-chip-selector',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());\nexport const fvChipSelectorTag = 'ok-fv-chip-selector';"]}

package/dist/esm/fv/chip-selector/styles.d.ts

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

package/dist/esm/fv/chip-selector/styles.js

@@ -0,0 +1,251 @@
+import { css } from '@ni/fast-element';
+import { applicationBackgroundColor, bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, elevation2BoxShadow, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, iconColor, placeholderFontColor, popupBorderColor, smallDelay, smallPadding, 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, active, disabled, top;
+
+    @layer base {
+        ${display('inline-block')}
+
+        :host {
+            width: 300px;
+            max-width: 100%;
+            box-sizing: border-box;
+            font: ${bodyFont};
+            color: ${bodyFontColor};
+        }
+
+        .chip-selector {
+            position: relative;
+            width: 100%;
+        }
+
+        .label {
+            display: flex;
+            margin-block-end: ${smallPadding};
+            color: ${controlLabelFontColor};
+            font: ${controlLabelFont};
+        }
+
+        .chip-selector-field {
+            position: relative;
+            display: flex;
+            align-items: stretch;
+            min-height: ${controlHeight};
+            border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+            background: transparent;
+            transition:
+                border-color ${smallDelay} ease-in-out;
+        }
+
+        .chip-selector-field::before {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            inset-block-end: -1px;
+            height: 1px;
+            background: transparent;
+            pointer-events: none;
+            transition: background-color ${smallDelay} ease-in-out;
+        }
+
+        .chip-selector-field::after {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            inset-block-end: -1px;
+            height: 2px;
+            background: transparent;
+            pointer-events: none;
+            transition:
+                background-color ${smallDelay} ease-in-out;
+        }
+
+        .chip-selector-selection-area {
+            position: relative;
+            display: flex;
+            flex: 1 1 auto;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: ${smallPadding};
+            min-width: 0;
+            padding: ${smallPadding} ${standardPadding} ${smallPadding} ${smallPadding};
+            box-sizing: border-box;
+        }
+
+        .chip-selector-selection-area::after {
+            content: '';
+            position: absolute;
+            inset-block: ${smallPadding};
+            inset-inline-end: 0;
+            width: 2px;
+            background: rgba(${borderRgbPartialColor}, 0.2);
+        }
+
+        /* Target only the picker's internal chips, not slotted client content. */
+        .chip-selector-selection-area > nimble-chip {
+            ${controlHeight.cssCustomProperty}: 24px;
+            min-width: 0;
+            max-width: calc(100% - ${smallPadding});
+        }
+
+        .chip-selector-input {
+            -webkit-appearance: none;
+            appearance: none;
+            flex: 1 1 0;
+            min-width: 0;
+            width: 0;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            outline: none;
+        }
+
+        .chip-selector-input::placeholder {
+            color: ${placeholderFontColor};
+        }
+
+        .chip-selector-menu-button {
+            ${controlHeight.cssCustomProperty}: 24px;
+            align-self: flex-start;
+            margin-block: ${smallPadding};
+            margin-inline: ${smallPadding};
+        }
+
+        .chip-selector-menu-icon {
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+
+        .chip-selector-menu {
+            width: 100%;
+            box-sizing: border-box;
+            margin-block-start: ${smallPadding};
+            display: flex;
+            flex-direction: column;
+            max-height: 192px;
+            overflow-y: auto;
+            border: ${borderWidth} solid ${popupBorderColor};
+            background: ${applicationBackgroundColor};
+            box-shadow: ${elevation2BoxShadow};
+            border-radius: 4px;
+        }
+
+        .chip-selector-menu[hidden] {
+            display: none;
+        }
+
+        .chip-selector-option {
+            -webkit-appearance: none;
+            appearance: none;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            min-width: 0;
+            min-height: ${controlHeight};
+            padding: 0 ${standardPadding};
+            border: none;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+        }
+
+        .chip-selector-create-option {
+            border-top: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.12);
+        }
+
+        .chip-selector-empty {
+            padding: ${smallPadding} ${standardPadding};
+            color: ${placeholderFontColor};
+        }
+    }
+
+    @layer hover {
+        .chip-selector-field:hover::after {
+            background: ${borderHoverColor};
+        }
+
+        .chip-selector-option:hover,
+        .chip-selector-option.active {
+            background: ${fillHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .chip-selector-field:focus-within::before {
+            background: ${borderHoverColor};
+        }
+
+        .chip-selector-field:focus-within {
+            border-bottom-color: transparent;
+        }
+
+        .chip-selector-field:focus-within::after {
+            background: transparent;
+        }
+
+        .chip-selector-option:focus-visible {
+            outline: ${borderWidth} solid ${borderHoverColor};
+            outline-offset: -1px;
+        }
+    }
+
+    @layer active {
+        :host([open]) .chip-selector-field::before {
+            background: ${borderHoverColor};
+        }
+
+        :host([open]) .chip-selector-field {
+            border-bottom-color: transparent;
+        }
+
+        :host([open]) .chip-selector-field::after {
+            background: transparent;
+        }
+
+        .chip-selector-option[aria-selected='true'] {
+            background: ${fillSelectedColor};
+        }
+
+        .chip-selector-option[aria-selected='true']:hover {
+            background: ${fillHoverSelectedColor};
+        }
+
+        .chip-selector-option:active {
+            background: ${fillSelectedColor};
+        }
+    }
+
+    @layer disabled {
+        :host([disabled]) {
+            color: ${bodyDisabledFontColor};
+        }
+
+        :host([disabled]) .label {
+            color: ${controlLabelDisabledFontColor};
+        }
+
+        :host([disabled]) .chip-selector-field {
+            border-color: rgba(${borderRgbPartialColor}, 0.1);
+            background: rgba(${borderRgbPartialColor}, 0.07);
+        }
+
+        :host([disabled]) .chip-selector-field::after {
+            background: transparent;
+        }
+
+        :host([disabled]) .chip-selector-menu-button,
+        :host([disabled]) .chip-selector-input {
+            cursor: not-allowed;
+        }
+    }
+
+    @layer top {}
+`;
+//# sourceMappingURL=styles.js.map