scoped-search-bar 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# [0.2.0](https://github.com/doberkofler/scoped-search-bar/compare/v0.1.0...v0.2.0) (2026-07-19)
+
+### Features
+
+* add react wrapper ([522941b](https://github.com/doberkofler/scoped-search-bar/commit/522941b4555683e87b02a277d00d912fa0a9be5b))
+
+# [0.1.0](https://github.com/doberkofler/scoped-search-bar/compare/e19b0e57d29cdd50370cb1a358811dccddc02073...v0.1.0) (2026-07-18)
+
+### Features
+
+* release scoped search bar ([e19b0e5](https://github.com/doberkofler/scoped-search-bar/commit/e19b0e57d29cdd50370cb1a358811dccddc02073))

package/LICENSE

@@ -0,0 +1,21 @@
+(The MIT License)
+
+Copyright (c) 2014-2018 Dieter Oberkofler <dieter.oberkofler@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+# scoped-search-bar
+
+A dependency-free TypeScript search component that combines a text input, a multi-select scope dropdown, and async submit handling.
+
+![Scoped search bar demo](https://raw.githubusercontent.com/doberkofler/scoped-search-bar/main/docs/images/scoped-search-bar-demo.png)
+
+## Features
+
+- Native TypeScript, HTML, and CSS. No React, MUI, or runtime framework dependency.
+- Strongly typed public API with an instance lifecycle.
+- Multi-select scope menu with keyboard navigation and ARIA state.
+- Async `onSearch` support with built-in pending/disabled state.
+- Enter-key and button submission.
+- Scoped CSS classes and custom properties for theming.
+- Vite demo, Vitest browser tests, Playwright e2e tests, TypeDoc API docs, and screenshot generation.
+
+## Install
+
+```bash
+npm install scoped-search-bar
+```
+
+```ts
+import {ScopedSearchBar, type SearchScope} from 'scoped-search-bar';
+import 'scoped-search-bar/styles/scoped-search-bar.css';
+
+const scopes: SearchScope[] = [
+	{id: 'west-coast', label: 'West Coast'},
+	{id: 'midwest', label: 'Midwest'},
+	{id: 'europe', label: 'Europe'},
+];
+
+const search = new ScopedSearchBar(document.querySelector('#search')!, {
+	scopes,
+	initialSelectedIds: ['west-coast', 'europe'],
+	initialSearchTerm: 'react',
+	onSearch: async (term, selectedScopeIds) => {
+		console.log(term, selectedScopeIds);
+	},
+});
+```
+
+## React Usage
+
+Use the React adapter from the dedicated subpath so vanilla consumers do not load React:
+
+```tsx
+import {ScopedSearchBar} from 'scoped-search-bar/react';
+import 'scoped-search-bar/styles/scoped-search-bar.css';
+
+const scopes = [
+	{id: 'articles', label: 'Articles'},
+	{id: 'users', label: 'Users'},
+	{id: 'docs', label: 'Docs'},
+];
+
+export function Search() {
+	return (
+		<ScopedSearchBar
+			scopes={scopes}
+			initialSelectedIds={['articles']}
+			initialSearchTerm="react"
+			onSearch={async (term, selectedScopeIds) => {
+				console.log(term, selectedScopeIds);
+			}}
+		/>
+	);
+}
+```
+
+The adapter creates the native component on mount and destroys it on unmount. Mount-time options mirror `ScopedSearchBarOptions`; `scopes`, `disabled`, `searchTerm`, and `selectedIds` are synchronized after mount through native setters.
+
+## API
+
+```ts
+export type SearchScope = {
+	readonly id: string;
+	readonly label: string;
+};
+
+export type ScopedSearchBarOptions = {
+	readonly scopes: readonly SearchScope[];
+	readonly initialSelectedIds?: readonly string[];
+	readonly initialSearchTerm?: string;
+	readonly onSearch: (term: string, selectedScopeIds: readonly string[]) => void | Promise<void>;
+	readonly placeholder?: string;
+	readonly inputLabel?: string;
+	readonly searchButtonLabel?: string;
+	readonly searchingButtonLabel?: string;
+	readonly scopeSelectorLabel?: string;
+	readonly clearScopesLabel?: string;
+	readonly scopeLabel?: (context: {count: number; total: number; selectedIds: readonly string[]}) => string;
+	readonly disabled?: boolean;
+	readonly className?: string;
+	readonly id?: string;
+	readonly menuMaxHeight?: number;
+};
+```
+
+Instance methods:
+
+- `search()` - submits the current term and selected scopes.
+- `openMenu()` / `closeMenu()` - controls the scope menu.
+- `clearScopes()` - clears all selected scopes.
+- `setScopes(scopes)` - replaces available scopes and drops unknown selected IDs.
+- `setSearchTerm(term)` - updates the input value.
+- `setSelectedIds(ids)` - updates selected IDs after normalization.
+- `setDisabled(disabled)` - enables/disables all controls.
+- `getSearchTerm()` / `getSelectedIds()` - returns current state.
+- `destroy()` - removes DOM and listeners. Later method calls throw.
+
+## Development
+
+```bash
+pnpm install
+pnpm run dev
+pnpm run ci
+pnpm run integration-test
+pnpm run screenshot
+```
+
+See [`docs/guide.md`](./docs/guide.md) for full usage and customization details.

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+import { a as ScopeLabelFormatter, c as ScopedSearchBarInstance, d as createScopedSearchBar, i as RequiredVisualOptions, l as ScopedSearchBarOptions, n as MaybePromise, o as ScopeLabelFormatterContext, r as OnSearch, s as ScopedSearchBar, t as DEFAULT_SCOPED_SEARCH_BAR_OPTIONS, u as SearchScope } from "./scoped-search-bar-D0ppSWb6.mjs";
+export { DEFAULT_SCOPED_SEARCH_BAR_OPTIONS, type MaybePromise, type OnSearch, type RequiredVisualOptions, type ScopeLabelFormatter, type ScopeLabelFormatterContext, ScopedSearchBar, type ScopedSearchBarInstance, type ScopedSearchBarOptions, type SearchScope, createScopedSearchBar };

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import { n as ScopedSearchBar, r as createScopedSearchBar, t as DEFAULT_SCOPED_SEARCH_BAR_OPTIONS } from "./scoped-search-bar-D8zVpZ4L.mjs";
+export { DEFAULT_SCOPED_SEARCH_BAR_OPTIONS, ScopedSearchBar, createScopedSearchBar };

package/dist/react.d.mts

@@ -0,0 +1,18 @@
+import { c as ScopedSearchBarInstance, l as ScopedSearchBarOptions } from "./scoped-search-bar-D0ppSWb6.mjs";
+//#region src/lib/react.d.ts
+type ScopedSearchBarReactProps = ScopedSearchBarOptions & {
+  /** Search term synced into the native input after mount. User edits remain internal unless this prop changes. */
+  readonly searchTerm?: string;
+  /** Selected scope IDs synced into the native selector after mount. User edits remain internal unless this prop changes. */
+  readonly selectedIds?: readonly string[];
+};
+/** React adapter for the native ScopedSearchBar component. */
+declare const ScopedSearchBar: import("react").ForwardRefExoticComponent<ScopedSearchBarOptions & {
+  /** Search term synced into the native input after mount. User edits remain internal unless this prop changes. */
+  readonly searchTerm?: string;
+  /** Selected scope IDs synced into the native selector after mount. User edits remain internal unless this prop changes. */
+  readonly selectedIds?: readonly string[];
+} & import("react").RefAttributes<ScopedSearchBarInstance>>;
+//#endregion
+export { ScopedSearchBar, ScopedSearchBarReactProps };
+//# sourceMappingURL=react.d.mts.map

package/dist/react.mjs

@@ -0,0 +1,60 @@
+import { n as ScopedSearchBar$1 } from "./scoped-search-bar-D8zVpZ4L.mjs";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/react.tsx
+function setForwardedRef(ref, value) {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref !== null) ref.current = value;
+}
+/** React adapter for the native ScopedSearchBar component. */
+const ScopedSearchBar = forwardRef((props, ref) => {
+	const { searchTerm, selectedIds, scopes, disabled, onSearch, ...mountOptions } = props;
+	const hostRef = useRef(null);
+	const instanceRef = useRef(null);
+	const onSearchRef = useRef(onSearch);
+	useEffect(() => {
+		onSearchRef.current = onSearch;
+	}, [onSearch]);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (host === null) return;
+		const instance = new ScopedSearchBar$1(host, {
+			...mountOptions,
+			...disabled === void 0 ? {} : { disabled },
+			...searchTerm === void 0 ? {} : { initialSearchTerm: searchTerm },
+			...selectedIds === void 0 ? {} : { initialSelectedIds: selectedIds },
+			scopes,
+			onSearch: async (term, selectedScopeIds) => {
+				await onSearchRef.current(term, selectedScopeIds);
+			}
+		});
+		instanceRef.current = instance;
+		setForwardedRef(ref, instance);
+		return () => {
+			instanceRef.current = null;
+			setForwardedRef(ref, null);
+			instance.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		instanceRef.current?.setScopes(scopes);
+	}, [scopes]);
+	useEffect(() => {
+		if (disabled !== void 0) instanceRef.current?.setDisabled(disabled);
+	}, [disabled]);
+	useEffect(() => {
+		if (searchTerm !== void 0) instanceRef.current?.setSearchTerm(searchTerm);
+	}, [searchTerm]);
+	useEffect(() => {
+		if (selectedIds !== void 0) instanceRef.current?.setSelectedIds(selectedIds);
+	}, [selectedIds]);
+	return /* @__PURE__ */ jsx("div", { ref: hostRef });
+});
+ScopedSearchBar.displayName = "ScopedSearchBar";
+//#endregion
+export { ScopedSearchBar };
+
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","names":["NativeScopedSearchBar"],"sources":["../src/lib/react.tsx"],"sourcesContent":["import {forwardRef, useEffect, useRef, type ForwardedRef, type ReactElement} from 'react';\n\nimport {ScopedSearchBar as NativeScopedSearchBar, type OnSearch, type ScopedSearchBarInstance, type ScopedSearchBarOptions} from './scoped-search-bar.ts';\n\nexport type ScopedSearchBarReactProps = ScopedSearchBarOptions & {\n\t/** Search term synced into the native input after mount. User edits remain internal unless this prop changes. */\n\treadonly searchTerm?: string;\n\t/** Selected scope IDs synced into the native selector after mount. User edits remain internal unless this prop changes. */\n\treadonly selectedIds?: readonly string[];\n};\n\nfunction setForwardedRef(ref: ForwardedRef<ScopedSearchBarInstance>, value: ScopedSearchBarInstance | null): void {\n\tif (typeof ref === 'function') {\n\t\tref(value);\n\t\treturn;\n\t}\n\tif (ref !== null) {\n\t\tref.current = value;\n\t}\n}\n\n/** React adapter for the native ScopedSearchBar component. */\nexport const ScopedSearchBar = forwardRef<ScopedSearchBarInstance, ScopedSearchBarReactProps>((props, ref): ReactElement => {\n\tconst {searchTerm, selectedIds, scopes, disabled, onSearch, ...mountOptions} = props;\n\tconst hostRef = useRef<HTMLDivElement | null>(null);\n\tconst instanceRef = useRef<ScopedSearchBarInstance | null>(null);\n\tconst onSearchRef = useRef<OnSearch>(onSearch);\n\n\tuseEffect((): void => {\n\t\tonSearchRef.current = onSearch;\n\t}, [onSearch]);\n\n\tuseEffect(() => {\n\t\tconst host = hostRef.current;\n\t\tif (host === null) {\n\t\t\treturn;\n\t\t}\n\t\tconst options: ScopedSearchBarOptions = {\n\t\t\t...mountOptions,\n\t\t\t...(disabled === undefined ? {} : {disabled}),\n\t\t\t...(searchTerm === undefined ? {} : {initialSearchTerm: searchTerm}),\n\t\t\t...(selectedIds === undefined ? {} : {initialSelectedIds: selectedIds}),\n\t\t\tscopes,\n\t\t\tonSearch: async (term, selectedScopeIds) => {\n\t\t\t\tawait onSearchRef.current(term, selectedScopeIds);\n\t\t\t},\n\t\t};\n\n\t\tconst instance = new NativeScopedSearchBar(host, options);\n\t\tinstanceRef.current = instance;\n\t\tsetForwardedRef(ref, instance);\n\n\t\treturn (): void => {\n\t\t\tinstanceRef.current = null;\n\t\t\tsetForwardedRef(ref, null);\n\t\t\tinstance.destroy();\n\t\t};\n\t\t// Mount-only options are intentionally captured once. Mutable props are synced below through native setters.\n\t\t// oxlint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\tuseEffect(() => {\n\t\tinstanceRef.current?.setScopes(scopes);\n\t}, [scopes]);\n\n\tuseEffect(() => {\n\t\tif (disabled !== undefined) {\n\t\t\tinstanceRef.current?.setDisabled(disabled);\n\t\t}\n\t}, [disabled]);\n\n\tuseEffect(() => {\n\t\tif (searchTerm !== undefined) {\n\t\t\tinstanceRef.current?.setSearchTerm(searchTerm);\n\t\t}\n\t}, [searchTerm]);\n\n\tuseEffect(() => {\n\t\tif (selectedIds !== undefined) {\n\t\t\tinstanceRef.current?.setSelectedIds(selectedIds);\n\t\t}\n\t}, [selectedIds]);\n\n\treturn <div ref={hostRef} />;\n});\n\nScopedSearchBar.displayName = 'ScopedSearchBar';\n"],"mappings":";;;;AAWA,SAAS,gBAAgB,KAA4C,OAA6C;CACjH,IAAI,OAAO,QAAQ,YAAY;EAC9B,IAAI,KAAK;EACT;CACD;CACA,IAAI,QAAQ,MACX,IAAI,UAAU;AAEhB;;AAGA,MAAa,kBAAkB,YAAgE,OAAO,QAAsB;CAC3H,MAAM,EAAC,YAAY,aAAa,QAAQ,UAAU,UAAU,GAAG,iBAAgB;CAC/E,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,cAAc,OAAuC,IAAI;CAC/D,MAAM,cAAc,OAAiB,QAAQ;CAE7C,gBAAsB;EACrB,YAAY,UAAU;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACf,MAAM,OAAO,QAAQ;EACrB,IAAI,SAAS,MACZ;EAaD,MAAM,WAAW,IAAIA,kBAAsB,MAAM;GAVhD,GAAG;GACH,GAAI,aAAa,KAAA,IAAY,CAAC,IAAI,EAAC,SAAQ;GAC3C,GAAI,eAAe,KAAA,IAAY,CAAC,IAAI,EAAC,mBAAmB,WAAU;GAClE,GAAI,gBAAgB,KAAA,IAAY,CAAC,IAAI,EAAC,oBAAoB,YAAW;GACrE;GACA,UAAU,OAAO,MAAM,qBAAqB;IAC3C,MAAM,YAAY,QAAQ,MAAM,gBAAgB;GACjD;EAGsD,CAAC;EACxD,YAAY,UAAU;EACtB,gBAAgB,KAAK,QAAQ;EAE7B,aAAmB;GAClB,YAAY,UAAU;GACtB,gBAAgB,KAAK,IAAI;GACzB,SAAS,QAAQ;EAClB;CAGD,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACf,YAAY,SAAS,UAAU,MAAM;CACtC,GAAG,CAAC,MAAM,CAAC;CAEX,gBAAgB;EACf,IAAI,aAAa,KAAA,GAChB,YAAY,SAAS,YAAY,QAAQ;CAE3C,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACf,IAAI,eAAe,KAAA,GAClB,YAAY,SAAS,cAAc,UAAU;CAE/C,GAAG,CAAC,UAAU,CAAC;CAEf,gBAAgB;EACf,IAAI,gBAAgB,KAAA,GACnB,YAAY,SAAS,eAAe,WAAW;CAEjD,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO,oBAAC,OAAD,EAAK,KAAK,QAAU,CAAA;AAC5B,CAAC;AAED,gBAAgB,cAAc"}

package/dist/scoped-search-bar-D0ppSWb6.d.mts

@@ -0,0 +1,83 @@
+//#region src/lib/scoped-search-bar.d.ts
+type MaybePromise<T> = T | Promise<T>;
+/** A selectable search scope shown in the dropdown menu. */
+type SearchScope = {
+  readonly id: string;
+  readonly label: string;
+};
+type ScopeLabelFormatterContext = {
+  readonly count: number;
+  readonly total: number;
+  readonly selectedIds: readonly string[];
+};
+type ScopeLabelFormatter = (context: ScopeLabelFormatterContext) => string;
+type OnSearch = (term: string, selectedScopeIds: readonly string[]) => MaybePromise<void>;
+type ScopedSearchBarOptions = {
+  /** Scopes available in the selector menu. IDs must be unique. */
+  readonly scopes: readonly SearchScope[];
+  /** Scope IDs selected on initial render. Unknown IDs are ignored. */
+  readonly initialSelectedIds?: readonly string[];
+  /** Initial search input value. */
+  readonly initialSearchTerm?: string;
+  /** Called when the user clicks Search or presses Enter in the input. */
+  readonly onSearch: OnSearch;
+  /** Placeholder shown in the search input. */
+  readonly placeholder?: string;
+  /** Accessible label for the search input. */
+  readonly inputLabel?: string;
+  /** Text shown in the submit button while idle. */
+  readonly searchButtonLabel?: string;
+  /** Text shown in the submit button while onSearch is pending. */
+  readonly searchingButtonLabel?: string;
+  /** Accessible label for the scope selector chip. */
+  readonly scopeSelectorLabel?: string;
+  /** Accessible label for the scope clear action. */
+  readonly clearScopesLabel?: string;
+  /** Formats the selector chip label. */
+  readonly scopeLabel?: ScopeLabelFormatter;
+  /** Disables all interactive controls. */
+  readonly disabled?: boolean;
+  /** Adds an extra class to the root element. */
+  readonly className?: string;
+  /** Optional id prefix used for input/menu ARIA relationships. */
+  readonly id?: string;
+  /** Maximum menu height in pixels before vertical scrolling. */
+  readonly menuMaxHeight?: number;
+};
+type ScopedSearchBarInstance = {
+  readonly element: HTMLElement;
+  destroy: () => void;
+  search: () => Promise<void>;
+  clearScopes: () => void;
+  closeMenu: () => void;
+  openMenu: () => void;
+  setDisabled: (disabled: boolean) => void;
+  setScopes: (scopes: readonly SearchScope[]) => void;
+  setSearchTerm: (term: string) => void;
+  setSelectedIds: (ids: readonly string[]) => void;
+  getSearchTerm: () => string;
+  getSelectedIds: () => readonly string[];
+};
+type RequiredVisualOptions = Required<Pick<ScopedSearchBarOptions, 'placeholder' | 'inputLabel' | 'searchButtonLabel' | 'searchingButtonLabel' | 'scopeSelectorLabel' | 'clearScopesLabel' | 'menuMaxHeight'>>;
+declare const DEFAULT_SCOPED_SEARCH_BAR_OPTIONS: RequiredVisualOptions;
+/** Native, dependency-free scoped search input with multi-select filtering. */
+declare class ScopedSearchBar implements ScopedSearchBarInstance {
+  #private;
+  readonly element: HTMLElement;
+  constructor(container: HTMLElement, options: ScopedSearchBarOptions);
+  openMenu(): void;
+  closeMenu(): void;
+  clearScopes(): void;
+  search(): Promise<void>;
+  setDisabled(disabled: boolean): void;
+  setScopes(scopes: readonly SearchScope[]): void;
+  setSearchTerm(term: string): void;
+  setSelectedIds(ids: readonly string[]): void;
+  getSearchTerm(): string;
+  getSelectedIds(): readonly string[];
+  destroy(): void;
+}
+declare function createScopedSearchBar(container: HTMLElement, options: ScopedSearchBarOptions): ScopedSearchBarInstance;
+//#endregion
+export { ScopeLabelFormatter as a, ScopedSearchBarInstance as c, createScopedSearchBar as d, RequiredVisualOptions as i, ScopedSearchBarOptions as l, MaybePromise as n, ScopeLabelFormatterContext as o, OnSearch as r, ScopedSearchBar as s, DEFAULT_SCOPED_SEARCH_BAR_OPTIONS as t, SearchScope as u };
+//# sourceMappingURL=scoped-search-bar-D0ppSWb6.d.mts.map

package/dist/scoped-search-bar-D8zVpZ4L.mjs

@@ -0,0 +1,310 @@
+//#region src/lib/scoped-search-bar.ts
+const DEFAULT_SCOPED_SEARCH_BAR_OPTIONS = {
+	placeholder: "Search for topics, articles, users...",
+	inputLabel: "Search",
+	searchButtonLabel: "Search",
+	searchingButtonLabel: "Searching...",
+	scopeSelectorLabel: "Choose search scopes",
+	clearScopesLabel: "Clear selected scopes",
+	menuMaxHeight: 320
+};
+let instanceCounter = 0;
+function defaultScopeLabel({ count }) {
+	if (count === 0) return "All Areas";
+	return `${count} ${count === 1 ? "Area" : "Areas"}`;
+}
+function createSvgIcon(pathData, className) {
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	icon.setAttribute("class", className);
+	icon.setAttribute("viewBox", "0 0 24 24");
+	icon.setAttribute("aria-hidden", "true");
+	icon.setAttribute("focusable", "false");
+	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute("d", pathData);
+	icon.append(path);
+	return icon;
+}
+function uniqueScopes(scopes) {
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const scope of scopes) {
+		if (seen.has(scope.id)) throw new Error(`Duplicate search scope id: ${scope.id}`);
+		seen.add(scope.id);
+		result.push(scope);
+	}
+	return result;
+}
+function normalizeIds(ids, scopes) {
+	const validIds = new Set(scopes.map((scope) => scope.id));
+	const normalized = [];
+	for (const id of ids) if (validIds.has(id) && !normalized.includes(id)) normalized.push(id);
+	return normalized;
+}
+/** Native, dependency-free scoped search input with multi-select filtering. */
+var ScopedSearchBar = class {
+	element;
+	#anchorButton;
+	#clearButton;
+	#input;
+	#menu;
+	#options;
+	#searchButton;
+	#scopes;
+	#selectedIds;
+	#term;
+	#isDisabled;
+	#isDestroyed = false;
+	#isMenuOpen = false;
+	#isSearching = false;
+	#documentClickController = new AbortController();
+	constructor(container, options) {
+		this.#options = options;
+		this.#scopes = uniqueScopes(options.scopes);
+		this.#selectedIds = normalizeIds(options.initialSelectedIds ?? [], this.#scopes);
+		this.#term = options.initialSearchTerm ?? "";
+		this.#isDisabled = options.disabled ?? false;
+		const idPrefix = options.id ?? `scoped-search-bar-${++instanceCounter}`;
+		this.element = document.createElement("div");
+		this.element.className = ["scoped-search-bar", options.className].filter(Boolean).join(" ");
+		this.element.dataset["component"] = "ScopedSearchBar";
+		const control = document.createElement("div");
+		control.className = "scoped-search-bar__control";
+		const searchIcon = createSvgIcon("M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z", "scoped-search-bar__search-icon");
+		this.#input = document.createElement("input");
+		this.#input.id = `${idPrefix}-input`;
+		this.#input.className = "scoped-search-bar__input";
+		this.#input.type = "search";
+		this.#input.autocomplete = "off";
+		this.#input.placeholder = options.placeholder ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.placeholder;
+		this.#input.setAttribute("aria-label", options.inputLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.inputLabel);
+		this.#input.value = this.#term;
+		const actions = document.createElement("div");
+		actions.className = "scoped-search-bar__actions";
+		this.#anchorButton = document.createElement("button");
+		this.#anchorButton.className = "scoped-search-bar__scope-chip";
+		this.#anchorButton.type = "button";
+		this.#anchorButton.setAttribute("aria-haspopup", "menu");
+		this.#anchorButton.setAttribute("aria-controls", `${idPrefix}-menu`);
+		this.#anchorButton.setAttribute("aria-expanded", "false");
+		this.#anchorButton.setAttribute("aria-label", options.scopeSelectorLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.scopeSelectorLabel);
+		this.#clearButton = document.createElement("button");
+		this.#clearButton.className = "scoped-search-bar__clear-scopes";
+		this.#clearButton.type = "button";
+		this.#clearButton.setAttribute("aria-label", options.clearScopesLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.clearScopesLabel);
+		this.#clearButton.append(createSvgIcon("M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4 17.6 5 12 10.6 6.4 5Z", "scoped-search-bar__clear-icon"));
+		this.#searchButton = document.createElement("button");
+		this.#searchButton.className = "scoped-search-bar__submit";
+		this.#searchButton.type = "button";
+		this.#searchButton.append(createSvgIcon("M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z", "scoped-search-bar__submit-icon"), document.createTextNode(options.searchButtonLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.searchButtonLabel));
+		actions.append(this.#anchorButton, this.#clearButton, this.#searchButton);
+		control.append(searchIcon, this.#input, actions);
+		this.#menu = document.createElement("div");
+		this.#menu.id = `${idPrefix}-menu`;
+		this.#menu.className = "scoped-search-bar__menu";
+		this.#menu.role = "menu";
+		this.#menu.hidden = true;
+		this.#menu.style.maxHeight = `${options.menuMaxHeight ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.menuMaxHeight}px`;
+		this.element.append(control, this.#menu);
+		container.replaceChildren(this.element);
+		this.#bindEvents();
+		this.#render();
+	}
+	openMenu() {
+		this.#assertActive();
+		if (this.#isDisabled || this.#isSearching) return;
+		this.#isMenuOpen = true;
+		this.#renderMenuState();
+	}
+	closeMenu() {
+		this.#assertActive();
+		this.#isMenuOpen = false;
+		this.#renderMenuState();
+	}
+	clearScopes() {
+		this.#assertActive();
+		if (this.#isDisabled || this.#isSearching) return;
+		this.#selectedIds = [];
+		this.#render();
+	}
+	async search() {
+		this.#assertActive();
+		if (this.#isDisabled || this.#isSearching) return;
+		this.#isSearching = true;
+		this.#renderDisabledState();
+		try {
+			await this.#options.onSearch(this.#term, [...this.#selectedIds]);
+		} finally {
+			this.#isSearching = false;
+			this.#renderDisabledState();
+		}
+	}
+	setDisabled(disabled) {
+		this.#assertActive();
+		this.#isDisabled = disabled;
+		if (disabled) this.#isMenuOpen = false;
+		this.#render();
+	}
+	setScopes(scopes) {
+		this.#assertActive();
+		this.#scopes = uniqueScopes(scopes);
+		this.#selectedIds = normalizeIds(this.#selectedIds, this.#scopes);
+		this.#render();
+	}
+	setSearchTerm(term) {
+		this.#assertActive();
+		this.#term = term;
+		this.#input.value = term;
+	}
+	setSelectedIds(ids) {
+		this.#assertActive();
+		this.#selectedIds = normalizeIds(ids, this.#scopes);
+		this.#render();
+	}
+	getSearchTerm() {
+		this.#assertActive();
+		return this.#term;
+	}
+	getSelectedIds() {
+		this.#assertActive();
+		return [...this.#selectedIds];
+	}
+	destroy() {
+		if (this.#isDestroyed) return;
+		this.#documentClickController.abort();
+		this.element.remove();
+		this.#isDestroyed = true;
+	}
+	#bindEvents() {
+		this.#input.addEventListener("input", () => {
+			this.#term = this.#input.value;
+		});
+		this.#input.addEventListener("keydown", (event) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				this.search();
+			}
+			if (event.key === "Escape" && this.#isMenuOpen) this.closeMenu();
+		});
+		this.#anchorButton.addEventListener("click", () => {
+			if (this.#isMenuOpen) {
+				this.closeMenu();
+				return;
+			}
+			this.openMenu();
+		});
+		this.#anchorButton.addEventListener("keydown", (event) => {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				this.openMenu();
+				this.#focusMenuItem(0);
+			}
+		});
+		this.#clearButton.addEventListener("click", (event) => {
+			event.stopPropagation();
+			this.clearScopes();
+		});
+		this.#searchButton.addEventListener("click", () => {
+			this.search();
+		});
+		document.addEventListener("click", (event) => {
+			if (!this.element.contains(event.target)) this.closeMenu();
+		}, { signal: this.#documentClickController.signal });
+	}
+	#render() {
+		this.#renderChipLabel();
+		this.#renderMenuItems();
+		this.#renderDisabledState();
+		this.#renderMenuState();
+	}
+	#renderChipLabel() {
+		const formatter = this.#options.scopeLabel ?? defaultScopeLabel;
+		this.#anchorButton.textContent = formatter({
+			count: this.#selectedIds.length,
+			total: this.#scopes.length,
+			selectedIds: [...this.#selectedIds]
+		});
+		this.#clearButton.hidden = this.#selectedIds.length === 0;
+	}
+	#renderMenuItems() {
+		this.#menu.replaceChildren();
+		for (const [index, scope] of this.#scopes.entries()) {
+			const item = document.createElement("button");
+			item.className = "scoped-search-bar__menu-item";
+			item.type = "button";
+			item.role = "menuitemcheckbox";
+			item.dataset["scopeId"] = scope.id;
+			item.setAttribute("aria-checked", this.#selectedIds.includes(scope.id) ? "true" : "false");
+			item.tabIndex = -1;
+			const checkbox = document.createElement("span");
+			checkbox.className = "scoped-search-bar__checkbox";
+			checkbox.setAttribute("aria-hidden", "true");
+			if (this.#selectedIds.includes(scope.id)) checkbox.append(createSvgIcon("M8.6 15.6 4.4 11.4 3 12.8 8.6 18.4 21 6 19.6 4.6 8.6 15.6Z", "scoped-search-bar__check-icon"));
+			const label = document.createElement("span");
+			label.className = "scoped-search-bar__menu-label";
+			label.textContent = scope.label;
+			item.append(checkbox, label);
+			item.addEventListener("click", () => {
+				this.#toggleScope(scope.id);
+			});
+			item.addEventListener("keydown", (event) => {
+				this.#handleMenuKeydown(event, index);
+			});
+			this.#menu.append(item);
+		}
+	}
+	#renderDisabledState() {
+		const disabled = this.#isDisabled || this.#isSearching;
+		this.element.classList.toggle("scoped-search-bar--disabled", disabled);
+		this.element.classList.toggle("scoped-search-bar--searching", this.#isSearching);
+		this.#input.disabled = disabled;
+		this.#anchorButton.disabled = disabled;
+		this.#clearButton.disabled = disabled;
+		this.#searchButton.disabled = disabled;
+		this.#searchButton.replaceChildren(createSvgIcon("M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z", "scoped-search-bar__submit-icon"), document.createTextNode(this.#isSearching ? this.#options.searchingButtonLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.searchingButtonLabel : this.#options.searchButtonLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.searchButtonLabel));
+		if (disabled) {
+			this.#isMenuOpen = false;
+			this.#renderMenuState();
+		}
+	}
+	#renderMenuState() {
+		this.#menu.hidden = !this.#isMenuOpen;
+		this.element.classList.toggle("scoped-search-bar--menu-open", this.#isMenuOpen);
+		this.#anchorButton.setAttribute("aria-expanded", this.#isMenuOpen ? "true" : "false");
+	}
+	#toggleScope(id) {
+		this.#selectedIds = this.#selectedIds.includes(id) ? this.#selectedIds.filter((selectedId) => selectedId !== id) : [...this.#selectedIds, id];
+		this.#render();
+	}
+	#handleMenuKeydown(event, index) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.closeMenu();
+			this.#anchorButton.focus();
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			this.#focusMenuItem(index + 1);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			this.#focusMenuItem(index - 1);
+		}
+	}
+	#focusMenuItem(index) {
+		const items = [...this.#menu.querySelectorAll(".scoped-search-bar__menu-item")];
+		if (items.length === 0) return;
+		items[(index + items.length) % items.length]?.focus();
+	}
+	#assertActive() {
+		if (this.#isDestroyed) throw new Error("ScopedSearchBar instance has been destroyed");
+	}
+};
+function createScopedSearchBar(container, options) {
+	return new ScopedSearchBar(container, options);
+}
+//#endregion
+export { ScopedSearchBar as n, createScopedSearchBar as r, DEFAULT_SCOPED_SEARCH_BAR_OPTIONS as t };
+
+//# sourceMappingURL=scoped-search-bar-D8zVpZ4L.mjs.map

package/dist/scoped-search-bar-D8zVpZ4L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped-search-bar-D8zVpZ4L.mjs","names":["#anchorButton","#clearButton","#input","#menu","#options","#searchButton","#documentClickController","#scopes","#selectedIds","#term","#isDisabled","#bindEvents","#render","#assertActive","#isSearching","#isMenuOpen","#renderMenuState","#renderDisabledState","#isDestroyed","#focusMenuItem","#renderChipLabel","#renderMenuItems","#toggleScope","#handleMenuKeydown"],"sources":["../src/lib/scoped-search-bar.ts"],"sourcesContent":["export type MaybePromise<T> = T | Promise<T>;\n\n/** A selectable search scope shown in the dropdown menu. */\nexport type SearchScope = {\n\treadonly id: string;\n\treadonly label: string;\n};\n\nexport type ScopeLabelFormatterContext = {\n\treadonly count: number;\n\treadonly total: number;\n\treadonly selectedIds: readonly string[];\n};\n\nexport type ScopeLabelFormatter = (context: ScopeLabelFormatterContext) => string;\nexport type OnSearch = (term: string, selectedScopeIds: readonly string[]) => MaybePromise<void>;\n\nexport type ScopedSearchBarOptions = {\n\t/** Scopes available in the selector menu. IDs must be unique. */\n\treadonly scopes: readonly SearchScope[];\n\t/** Scope IDs selected on initial render. Unknown IDs are ignored. */\n\treadonly initialSelectedIds?: readonly string[];\n\t/** Initial search input value. */\n\treadonly initialSearchTerm?: string;\n\t/** Called when the user clicks Search or presses Enter in the input. */\n\treadonly onSearch: OnSearch;\n\t/** Placeholder shown in the search input. */\n\treadonly placeholder?: string;\n\t/** Accessible label for the search input. */\n\treadonly inputLabel?: string;\n\t/** Text shown in the submit button while idle. */\n\treadonly searchButtonLabel?: string;\n\t/** Text shown in the submit button while onSearch is pending. */\n\treadonly searchingButtonLabel?: string;\n\t/** Accessible label for the scope selector chip. */\n\treadonly scopeSelectorLabel?: string;\n\t/** Accessible label for the scope clear action. */\n\treadonly clearScopesLabel?: string;\n\t/** Formats the selector chip label. */\n\treadonly scopeLabel?: ScopeLabelFormatter;\n\t/** Disables all interactive controls. */\n\treadonly disabled?: boolean;\n\t/** Adds an extra class to the root element. */\n\treadonly className?: string;\n\t/** Optional id prefix used for input/menu ARIA relationships. */\n\treadonly id?: string;\n\t/** Maximum menu height in pixels before vertical scrolling. */\n\treadonly menuMaxHeight?: number;\n};\n\nexport type ScopedSearchBarInstance = {\n\treadonly element: HTMLElement;\n\tdestroy: () => void;\n\tsearch: () => Promise<void>;\n\tclearScopes: () => void;\n\tcloseMenu: () => void;\n\topenMenu: () => void;\n\tsetDisabled: (disabled: boolean) => void;\n\tsetScopes: (scopes: readonly SearchScope[]) => void;\n\tsetSearchTerm: (term: string) => void;\n\tsetSelectedIds: (ids: readonly string[]) => void;\n\tgetSearchTerm: () => string;\n\tgetSelectedIds: () => readonly string[];\n};\n\nexport type RequiredVisualOptions = Required<\n\tPick<\n\t\tScopedSearchBarOptions,\n\t\t'placeholder' | 'inputLabel' | 'searchButtonLabel' | 'searchingButtonLabel' | 'scopeSelectorLabel' | 'clearScopesLabel' | 'menuMaxHeight'\n\t>\n>;\n\nexport const DEFAULT_SCOPED_SEARCH_BAR_OPTIONS: RequiredVisualOptions = {\n\tplaceholder: 'Search for topics, articles, users...',\n\tinputLabel: 'Search',\n\tsearchButtonLabel: 'Search',\n\tsearchingButtonLabel: 'Searching...',\n\tscopeSelectorLabel: 'Choose search scopes',\n\tclearScopesLabel: 'Clear selected scopes',\n\tmenuMaxHeight: 320,\n};\n\nlet instanceCounter = 0;\n\nfunction defaultScopeLabel({count}: ScopeLabelFormatterContext): string {\n\tif (count === 0) {\n\t\treturn 'All Areas';\n\t}\n\treturn `${count} ${count === 1 ? 'Area' : 'Areas'}`;\n}\n\nfunction createSvgIcon(pathData: string, className: string): SVGSVGElement {\n\tconst icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n\ticon.setAttribute('class', className);\n\ticon.setAttribute('viewBox', '0 0 24 24');\n\ticon.setAttribute('aria-hidden', 'true');\n\ticon.setAttribute('focusable', 'false');\n\n\tconst path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n\tpath.setAttribute('d', pathData);\n\ticon.append(path);\n\treturn icon;\n}\n\nfunction uniqueScopes(scopes: readonly SearchScope[]): SearchScope[] {\n\tconst seen = new Set<string>();\n\tconst result: SearchScope[] = [];\n\tfor (const scope of scopes) {\n\t\tif (seen.has(scope.id)) {\n\t\t\tthrow new Error(`Duplicate search scope id: ${scope.id}`);\n\t\t}\n\t\tseen.add(scope.id);\n\t\tresult.push(scope);\n\t}\n\treturn result;\n}\n\nfunction normalizeIds(ids: readonly string[], scopes: readonly SearchScope[]): string[] {\n\tconst validIds = new Set(scopes.map((scope) => scope.id));\n\tconst normalized: string[] = [];\n\tfor (const id of ids) {\n\t\tif (validIds.has(id) && !normalized.includes(id)) {\n\t\t\tnormalized.push(id);\n\t\t}\n\t}\n\treturn normalized;\n}\n\n/** Native, dependency-free scoped search input with multi-select filtering. */\nexport class ScopedSearchBar implements ScopedSearchBarInstance {\n\tpublic readonly element: HTMLElement;\n\n\treadonly #anchorButton: HTMLButtonElement;\n\treadonly #clearButton: HTMLButtonElement;\n\treadonly #input: HTMLInputElement;\n\treadonly #menu: HTMLDivElement;\n\treadonly #options: ScopedSearchBarOptions;\n\treadonly #searchButton: HTMLButtonElement;\n\t#scopes: SearchScope[];\n\t#selectedIds: string[];\n\t#term: string;\n\t#isDisabled: boolean;\n\t#isDestroyed = false;\n\t#isMenuOpen = false;\n\t#isSearching = false;\n\treadonly #documentClickController = new AbortController();\n\n\tpublic constructor(container: HTMLElement, options: ScopedSearchBarOptions) {\n\t\tthis.#options = options;\n\t\tthis.#scopes = uniqueScopes(options.scopes);\n\t\tthis.#selectedIds = normalizeIds(options.initialSelectedIds ?? [], this.#scopes);\n\t\tthis.#term = options.initialSearchTerm ?? '';\n\t\tthis.#isDisabled = options.disabled ?? false;\n\n\t\tconst idPrefix = options.id ?? `scoped-search-bar-${++instanceCounter}`;\n\t\tthis.element = document.createElement('div');\n\t\tthis.element.className = ['scoped-search-bar', options.className].filter(Boolean).join(' ');\n\t\tthis.element.dataset['component'] = 'ScopedSearchBar';\n\n\t\tconst control = document.createElement('div');\n\t\tcontrol.className = 'scoped-search-bar__control';\n\n\t\tconst searchIcon = createSvgIcon(\n\t\t\t'M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z',\n\t\t\t'scoped-search-bar__search-icon',\n\t\t);\n\n\t\tthis.#input = document.createElement('input');\n\t\tthis.#input.id = `${idPrefix}-input`;\n\t\tthis.#input.className = 'scoped-search-bar__input';\n\t\tthis.#input.type = 'search';\n\t\tthis.#input.autocomplete = 'off';\n\t\tthis.#input.placeholder = options.placeholder ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.placeholder;\n\t\tthis.#input.setAttribute('aria-label', options.inputLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.inputLabel);\n\t\tthis.#input.value = this.#term;\n\n\t\tconst actions = document.createElement('div');\n\t\tactions.className = 'scoped-search-bar__actions';\n\n\t\tthis.#anchorButton = document.createElement('button');\n\t\tthis.#anchorButton.className = 'scoped-search-bar__scope-chip';\n\t\tthis.#anchorButton.type = 'button';\n\t\tthis.#anchorButton.setAttribute('aria-haspopup', 'menu');\n\t\tthis.#anchorButton.setAttribute('aria-controls', `${idPrefix}-menu`);\n\t\tthis.#anchorButton.setAttribute('aria-expanded', 'false');\n\t\tthis.#anchorButton.setAttribute('aria-label', options.scopeSelectorLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.scopeSelectorLabel);\n\n\t\tthis.#clearButton = document.createElement('button');\n\t\tthis.#clearButton.className = 'scoped-search-bar__clear-scopes';\n\t\tthis.#clearButton.type = 'button';\n\t\tthis.#clearButton.setAttribute('aria-label', options.clearScopesLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.clearScopesLabel);\n\t\tthis.#clearButton.append(\n\t\t\tcreateSvgIcon('M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4 17.6 5 12 10.6 6.4 5Z', 'scoped-search-bar__clear-icon'),\n\t\t);\n\n\t\tthis.#searchButton = document.createElement('button');\n\t\tthis.#searchButton.className = 'scoped-search-bar__submit';\n\t\tthis.#searchButton.type = 'button';\n\t\tthis.#searchButton.append(\n\t\t\tcreateSvgIcon(\n\t\t\t\t'M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z',\n\t\t\t\t'scoped-search-bar__submit-icon',\n\t\t\t),\n\t\t\tdocument.createTextNode(options.searchButtonLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.searchButtonLabel),\n\t\t);\n\n\t\tactions.append(this.#anchorButton, this.#clearButton, this.#searchButton);\n\t\tcontrol.append(searchIcon, this.#input, actions);\n\n\t\tthis.#menu = document.createElement('div');\n\t\tthis.#menu.id = `${idPrefix}-menu`;\n\t\tthis.#menu.className = 'scoped-search-bar__menu';\n\t\tthis.#menu.role = 'menu';\n\t\tthis.#menu.hidden = true;\n\t\tthis.#menu.style.maxHeight = `${options.menuMaxHeight ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.menuMaxHeight}px`;\n\n\t\tthis.element.append(control, this.#menu);\n\t\tcontainer.replaceChildren(this.element);\n\n\t\tthis.#bindEvents();\n\t\tthis.#render();\n\t}\n\n\tpublic openMenu(): void {\n\t\tthis.#assertActive();\n\t\tif (this.#isDisabled || this.#isSearching) {\n\t\t\treturn;\n\t\t}\n\t\tthis.#isMenuOpen = true;\n\t\tthis.#renderMenuState();\n\t}\n\n\tpublic closeMenu(): void {\n\t\tthis.#assertActive();\n\t\tthis.#isMenuOpen = false;\n\t\tthis.#renderMenuState();\n\t}\n\n\tpublic clearScopes(): void {\n\t\tthis.#assertActive();\n\t\tif (this.#isDisabled || this.#isSearching) {\n\t\t\treturn;\n\t\t}\n\t\tthis.#selectedIds = [];\n\t\tthis.#render();\n\t}\n\n\tpublic async search(): Promise<void> {\n\t\tthis.#assertActive();\n\t\tif (this.#isDisabled || this.#isSearching) {\n\t\t\treturn;\n\t\t}\n\t\tthis.#isSearching = true;\n\t\tthis.#renderDisabledState();\n\t\ttry {\n\t\t\tawait this.#options.onSearch(this.#term, [...this.#selectedIds]);\n\t\t} finally {\n\t\t\tthis.#isSearching = false;\n\t\t\tthis.#renderDisabledState();\n\t\t}\n\t}\n\n\tpublic setDisabled(disabled: boolean): void {\n\t\tthis.#assertActive();\n\t\tthis.#isDisabled = disabled;\n\t\tif (disabled) {\n\t\t\tthis.#isMenuOpen = false;\n\t\t}\n\t\tthis.#render();\n\t}\n\n\tpublic setScopes(scopes: readonly SearchScope[]): void {\n\t\tthis.#assertActive();\n\t\tthis.#scopes = uniqueScopes(scopes);\n\t\tthis.#selectedIds = normalizeIds(this.#selectedIds, this.#scopes);\n\t\tthis.#render();\n\t}\n\n\tpublic setSearchTerm(term: string): void {\n\t\tthis.#assertActive();\n\t\tthis.#term = term;\n\t\tthis.#input.value = term;\n\t}\n\n\tpublic setSelectedIds(ids: readonly string[]): void {\n\t\tthis.#assertActive();\n\t\tthis.#selectedIds = normalizeIds(ids, this.#scopes);\n\t\tthis.#render();\n\t}\n\n\tpublic getSearchTerm(): string {\n\t\tthis.#assertActive();\n\t\treturn this.#term;\n\t}\n\n\tpublic getSelectedIds(): readonly string[] {\n\t\tthis.#assertActive();\n\t\treturn [...this.#selectedIds];\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.#isDestroyed) {\n\t\t\treturn;\n\t\t}\n\t\tthis.#documentClickController.abort();\n\t\tthis.element.remove();\n\t\tthis.#isDestroyed = true;\n\t}\n\n\t#bindEvents(): void {\n\t\tthis.#input.addEventListener('input', () => {\n\t\t\tthis.#term = this.#input.value;\n\t\t});\n\t\tthis.#input.addEventListener('keydown', (event) => {\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tvoid this.search();\n\t\t\t}\n\t\t\tif (event.key === 'Escape' && this.#isMenuOpen) {\n\t\t\t\tthis.closeMenu();\n\t\t\t}\n\t\t});\n\n\t\tthis.#anchorButton.addEventListener('click', () => {\n\t\t\tif (this.#isMenuOpen) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.openMenu();\n\t\t});\n\t\tthis.#anchorButton.addEventListener('keydown', (event) => {\n\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.openMenu();\n\t\t\t\tthis.#focusMenuItem(0);\n\t\t\t}\n\t\t});\n\n\t\tthis.#clearButton.addEventListener('click', (event) => {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.clearScopes();\n\t\t});\n\t\tthis.#searchButton.addEventListener('click', () => {\n\t\t\tvoid this.search();\n\t\t});\n\n\t\tdocument.addEventListener(\n\t\t\t'click',\n\t\t\t(event) => {\n\t\t\t\tif (!this.element.contains(event.target as Node)) {\n\t\t\t\t\tthis.closeMenu();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{signal: this.#documentClickController.signal},\n\t\t);\n\t}\n\n\t#render(): void {\n\t\tthis.#renderChipLabel();\n\t\tthis.#renderMenuItems();\n\t\tthis.#renderDisabledState();\n\t\tthis.#renderMenuState();\n\t}\n\n\t#renderChipLabel(): void {\n\t\tconst formatter = this.#options.scopeLabel ?? defaultScopeLabel;\n\t\tthis.#anchorButton.textContent = formatter({count: this.#selectedIds.length, total: this.#scopes.length, selectedIds: [...this.#selectedIds]});\n\t\tthis.#clearButton.hidden = this.#selectedIds.length === 0;\n\t}\n\n\t#renderMenuItems(): void {\n\t\tthis.#menu.replaceChildren();\n\t\tfor (const [index, scope] of this.#scopes.entries()) {\n\t\t\tconst item = document.createElement('button');\n\t\t\titem.className = 'scoped-search-bar__menu-item';\n\t\t\titem.type = 'button';\n\t\t\titem.role = 'menuitemcheckbox';\n\t\t\titem.dataset['scopeId'] = scope.id;\n\t\t\titem.setAttribute('aria-checked', this.#selectedIds.includes(scope.id) ? 'true' : 'false');\n\t\t\titem.tabIndex = -1;\n\n\t\t\tconst checkbox = document.createElement('span');\n\t\t\tcheckbox.className = 'scoped-search-bar__checkbox';\n\t\t\tcheckbox.setAttribute('aria-hidden', 'true');\n\t\t\tif (this.#selectedIds.includes(scope.id)) {\n\t\t\t\tcheckbox.append(createSvgIcon('M8.6 15.6 4.4 11.4 3 12.8 8.6 18.4 21 6 19.6 4.6 8.6 15.6Z', 'scoped-search-bar__check-icon'));\n\t\t\t}\n\n\t\t\tconst label = document.createElement('span');\n\t\t\tlabel.className = 'scoped-search-bar__menu-label';\n\t\t\tlabel.textContent = scope.label;\n\n\t\t\titem.append(checkbox, label);\n\t\t\titem.addEventListener('click', () => {\n\t\t\t\tthis.#toggleScope(scope.id);\n\t\t\t});\n\t\t\titem.addEventListener('keydown', (event) => {\n\t\t\t\tthis.#handleMenuKeydown(event, index);\n\t\t\t});\n\t\t\tthis.#menu.append(item);\n\t\t}\n\t}\n\n\t#renderDisabledState(): void {\n\t\tconst disabled = this.#isDisabled || this.#isSearching;\n\t\tthis.element.classList.toggle('scoped-search-bar--disabled', disabled);\n\t\tthis.element.classList.toggle('scoped-search-bar--searching', this.#isSearching);\n\t\tthis.#input.disabled = disabled;\n\t\tthis.#anchorButton.disabled = disabled;\n\t\tthis.#clearButton.disabled = disabled;\n\t\tthis.#searchButton.disabled = disabled;\n\t\tthis.#searchButton.replaceChildren(\n\t\t\tcreateSvgIcon(\n\t\t\t\t'M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z',\n\t\t\t\t'scoped-search-bar__submit-icon',\n\t\t\t),\n\t\t\tdocument.createTextNode(\n\t\t\t\tthis.#isSearching\n\t\t\t\t\t? (this.#options.searchingButtonLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.searchingButtonLabel)\n\t\t\t\t\t: (this.#options.searchButtonLabel ?? DEFAULT_SCOPED_SEARCH_BAR_OPTIONS.searchButtonLabel),\n\t\t\t),\n\t\t);\n\t\tif (disabled) {\n\t\t\tthis.#isMenuOpen = false;\n\t\t\tthis.#renderMenuState();\n\t\t}\n\t}\n\n\t#renderMenuState(): void {\n\t\tthis.#menu.hidden = !this.#isMenuOpen;\n\t\tthis.element.classList.toggle('scoped-search-bar--menu-open', this.#isMenuOpen);\n\t\tthis.#anchorButton.setAttribute('aria-expanded', this.#isMenuOpen ? 'true' : 'false');\n\t}\n\n\t#toggleScope(id: string): void {\n\t\tthis.#selectedIds = this.#selectedIds.includes(id) ? this.#selectedIds.filter((selectedId) => selectedId !== id) : [...this.#selectedIds, id];\n\t\tthis.#render();\n\t}\n\n\t#handleMenuKeydown(event: KeyboardEvent, index: number): void {\n\t\tif (event.key === 'Escape') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.#anchorButton.focus();\n\t\t\treturn;\n\t\t}\n\t\tif (event.key === 'ArrowDown') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.#focusMenuItem(index + 1);\n\t\t\treturn;\n\t\t}\n\t\tif (event.key === 'ArrowUp') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.#focusMenuItem(index - 1);\n\t\t}\n\t}\n\n\t#focusMenuItem(index: number): void {\n\t\tconst items = [...this.#menu.querySelectorAll<HTMLButtonElement>('.scoped-search-bar__menu-item')];\n\t\tif (items.length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tconst normalizedIndex = (index + items.length) % items.length;\n\t\titems[normalizedIndex]?.focus();\n\t}\n\n\t#assertActive(): void {\n\t\tif (this.#isDestroyed) {\n\t\t\tthrow new Error('ScopedSearchBar instance has been destroyed');\n\t\t}\n\t}\n}\n\nexport function createScopedSearchBar(container: HTMLElement, options: ScopedSearchBarOptions): ScopedSearchBarInstance {\n\treturn new ScopedSearchBar(container, options);\n}\n"],"mappings":"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"}

package/dist/styles/scoped-search-bar.css

@@ -0,0 +1,233 @@
+:root {
+	--scoped-search-bar-font-family: inter, "Segoe UI", system-ui, sans-serif;
+	--scoped-search-bar-bg: #fff;
+	--scoped-search-bar-bg-muted: #f6f8fb;
+	--scoped-search-bar-border: #0876d8;
+	--scoped-search-bar-border-muted: #d7dee8;
+	--scoped-search-bar-text: #17212f;
+	--scoped-search-bar-text-muted: #677489;
+	--scoped-search-bar-primary: #0a4f8f;
+	--scoped-search-bar-primary-strong: #073b6f;
+	--scoped-search-bar-primary-soft: #d9ecff;
+	--scoped-search-bar-shadow: 0 14px 32px rgba(9, 30, 66, 0.16);
+	--scoped-search-bar-focus: 0 0 0 3px rgba(8, 118, 216, 0.22);
+	--scoped-search-bar-radius: 999px;
+}
+
+.scoped-search-bar {
+	position: relative;
+	width: min(100%, 980px);
+	font-family: var(--scoped-search-bar-font-family);
+	color: var(--scoped-search-bar-text);
+}
+
+.scoped-search-bar__control {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-height: 64px;
+	padding: 8px 10px 8px 20px;
+	background: var(--scoped-search-bar-bg);
+	border: 2px solid var(--scoped-search-bar-border);
+	border-radius: var(--scoped-search-bar-radius);
+	box-shadow: var(--scoped-search-bar-shadow);
+}
+
+.scoped-search-bar__control:focus-within {
+	box-shadow: var(--scoped-search-bar-shadow), var(--scoped-search-bar-focus);
+}
+
+.scoped-search-bar__search-icon {
+	flex: 0 0 auto;
+	width: 28px;
+	height: 28px;
+	fill: #7a8492;
+}
+
+.scoped-search-bar__input {
+	min-width: 120px;
+	flex: 1 1 auto;
+	border: 0;
+	outline: 0;
+	font: inherit;
+	font-size: 18px;
+	color: var(--scoped-search-bar-text);
+	background: transparent;
+}
+
+.scoped-search-bar__input::placeholder {
+	color: var(--scoped-search-bar-text-muted);
+}
+
+.scoped-search-bar__actions {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex: 0 0 auto;
+}
+
+.scoped-search-bar__scope-chip,
+.scoped-search-bar__clear-scopes,
+.scoped-search-bar__submit,
+.scoped-search-bar__menu-item {
+	font: inherit;
+}
+
+.scoped-search-bar__scope-chip {
+	min-height: 34px;
+	padding: 0 14px;
+	border: 0;
+	border-radius: 999px;
+	color: var(--scoped-search-bar-text);
+	background: var(--scoped-search-bar-primary-soft);
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.scoped-search-bar__scope-chip:hover {
+	background: #c5e1ff;
+}
+
+.scoped-search-bar__clear-scopes {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	margin-left: -18px;
+	border: 0;
+	border-radius: 999px;
+	background: transparent;
+	cursor: pointer;
+}
+
+.scoped-search-bar__clear-scopes[hidden] {
+	display: none;
+}
+
+.scoped-search-bar__clear-icon {
+	width: 16px;
+	height: 16px;
+	fill: #4f647a;
+}
+
+.scoped-search-bar__submit {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	min-height: 48px;
+	padding: 0 22px;
+	border: 0;
+	border-radius: 999px;
+	color: #fff;
+	background: linear-gradient(180deg, var(--scoped-search-bar-primary), var(--scoped-search-bar-primary-strong));
+	box-shadow: 0 8px 18px rgba(10, 79, 143, 0.28);
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.scoped-search-bar__submit:hover {
+	filter: brightness(1.04);
+}
+
+.scoped-search-bar__submit-icon {
+	width: 24px;
+	height: 24px;
+	fill: currentcolor;
+}
+
+.scoped-search-bar__menu {
+	position: absolute;
+	top: calc(100% + 10px);
+	right: 120px;
+	z-index: 20;
+	min-width: 220px;
+	overflow-y: auto;
+	padding: 10px 0;
+	background: var(--scoped-search-bar-bg);
+	border: 1px solid var(--scoped-search-bar-border-muted);
+	border-radius: 8px;
+	box-shadow: var(--scoped-search-bar-shadow);
+}
+
+.scoped-search-bar__menu-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	padding: 8px 18px;
+	border: 0;
+	color: var(--scoped-search-bar-text);
+	background: transparent;
+	font-size: 18px;
+	text-align: left;
+	cursor: pointer;
+}
+
+.scoped-search-bar__menu-item:hover,
+.scoped-search-bar__menu-item:focus-visible {
+	background: var(--scoped-search-bar-bg-muted);
+	outline: 0;
+}
+
+.scoped-search-bar__checkbox {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	border: 2px solid #707987;
+	border-radius: 3px;
+	background: #fff;
+}
+
+.scoped-search-bar__menu-item[aria-checked="true"] .scoped-search-bar__checkbox {
+	border-color: var(--scoped-search-bar-primary);
+	background: var(--scoped-search-bar-primary);
+}
+
+.scoped-search-bar__check-icon {
+	width: 16px;
+	height: 16px;
+	fill: #fff;
+}
+
+.scoped-search-bar--disabled {
+	opacity: 0.68;
+}
+
+.scoped-search-bar--disabled .scoped-search-bar__scope-chip,
+.scoped-search-bar--disabled .scoped-search-bar__clear-scopes,
+.scoped-search-bar--disabled .scoped-search-bar__submit {
+	cursor: not-allowed;
+}
+
+@media (width <= 700px) {
+	.scoped-search-bar__control {
+		align-items: stretch;
+		flex-wrap: wrap;
+		border-radius: 28px;
+		padding: 12px;
+	}
+
+	.scoped-search-bar__search-icon {
+		margin-top: 10px;
+	}
+
+	.scoped-search-bar__input {
+		min-height: 44px;
+		font-size: 16px;
+	}
+
+	.scoped-search-bar__actions {
+		width: 100%;
+		justify-content: flex-end;
+	}
+
+	.scoped-search-bar__menu {
+		right: 12px;
+		left: 12px;
+		min-width: auto;
+	}
+}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "scoped-search-bar",
+  "version": "0.2.0",
+  "description": "A dependency-free TypeScript scoped search input with multi-select filters",
+  "keywords": [
+    "component",
+    "filter",
+    "search",
+    "typescript",
+    "vanilla"
+  ],
+  "homepage": "https://doberkofler.github.io/scoped-search-bar/",
+  "bugs": {
+    "url": "https://github.com/doberkofler/scoped-search-bar/issues"
+  },
+  "license": "MIT",
+  "author": "doberkofler",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doberkofler/scoped-search-bar.git"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.mts",
+      "import": "./dist/react.mjs",
+      "default": "./dist/react.mjs"
+    },
+    "./styles/scoped-search-bar.css": "./dist/styles/scoped-search-bar.css"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "21.2.1",
+    "@commitlint/config-conventional": "21.2.0",
+    "@playwright/test": "1.61.1",
+    "@tsdown/css": "0.22.9",
+    "@types/node": "26.1.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitest/browser": "4.1.10",
+    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/coverage-istanbul": "4.1.10",
+    "@vitest/coverage-v8": "4.1.10",
+    "conventional-changelog": "8.1.0",
+    "conventional-changelog-angular": "9.2.1",
+    "eslint-plugin-regexp": "3.1.1",
+    "husky": "9.1.7",
+    "oxfmt": "0.59.0",
+    "oxlint": "1.74.0",
+    "oxlint-tsgolint": "0.25.0",
+    "playwright": "1.61.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "release-it": "20.2.1",
+    "stylelint": "17.14.0",
+    "stylelint-config-standard": "40.0.0",
+    "tsdown": "0.22.9",
+    "typedoc": "0.28.20",
+    "typescript": "6.0.3",
+    "vite": "8.1.5",
+    "vitest": "4.1.10"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "lint:css": "stylelint 'src/{demo,styles}/**/*.css'",
+    "lint:css:fix": "stylelint --fix 'src/{demo,styles}/**/*.css'",
+    "format": "oxfmt --write && stylelint --fix 'src/{demo,styles}/**/*.css'",
+    "format:check": "oxfmt --check",
+    "ci": "pnpm run typecheck && pnpm run lint && pnpm run lint:css && pnpm run format:check && pnpm run build:lib && pnpm run build && pnpm run docs:api && pnpm run test",
+    "test": "vitest run",
+    "release": "release-it",
+    "create-changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "tsdown",
+    "build:demo": "vite build",
+    "docs:api": "typedoc",
+    "preview": "vite preview",
+    "test:ui": "vitest",
+    "integration-test": "playwright test",
+    "screenshot": "node scripts/screenshot.mjs"
+  }
+}