@marianmeres/stuic 2.0.0-next.5 → 2.0.2

package/dist/components/Modal/Modal.svelte

@@ -76,7 +76,9 @@
 	bind:el={elBackdrop}
 	bind:visible
 	class={twMerge(
-		"justify-center items-center bg-black/25 p-2 sm:p-4 md:p-[10vh] transition-all",
+		// "justify-center items-center bg-black/25 p-2 sm:p-4 md:p-[10vh] transition-all",
+		"justify-center items-center bg-black/25 transition-all",
+		"md:p-[10vh]",
 		classBackdrop
 	)}
 	{focusTrap}
@@ -91,15 +93,18 @@
 		aria-labelledby={labelledby}
 		aria-describedby={describedby}
 		class={twMerge(
-			"overflow-x-hidden overflow-y-hidden w-full h-full max-w-3xl",
-			// "overflow-y-auto w-full h-full max-w-3xl max-h-[66vh] border",
+			"overflow-x-hidden overflow-y-hidden flex flex-col",
+			"w-full max-w-3xl",
+			"h-dvh md:h-full",
 			classInner
 		)}
 	>
 		<div
 			class={twMerge(
-				"bg-white dark:bg-neutral-800 rounded-md flex flex-col overflow-hidden",
-				"w-full max-h-full md:max-h-2/3",
+				"bg-white dark:bg-neutral-800",
+				"flex flex-col overflow-hidden",
+				"rounded-none md:rounded-md",
+				"w-full flex-1 md:max-h-2/3",
 				classProp
 			)}
 		>

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -76,6 +76,31 @@
 		() => !noClickOutsideClose && close()
 	);
 
+	let _original: any = {};
+	$effect(() => {
+		// if (noScrollLock) return;
+		if (visible) {
+			_original = window.getComputedStyle(document.body);
+			const scrollY = window.scrollY;
+
+			document.body.style.position = "fixed";
+			document.body.style.top = `-${scrollY}px`;
+			document.body.style.width = "100%";
+			document.body.style.overflow = "hidden";
+		} else {
+			const scrollY = document.body.style.top;
+
+			document.body.style.position = _original.position;
+			document.body.style.position = "";
+			document.body.style.top = "";
+			document.body.style.width = "";
+			document.body.style.overflow = "";
+
+			// Restore scroll position
+			window.scrollTo(0, parseInt(scrollY || "0") * -1);
+		}
+	});
+
 	// $inspect("Modal dialog mounted, is visible:", visible).with(clog);
 </script>
 

package/dist/components/Notifications/Notifications.svelte

@@ -28,7 +28,7 @@
 		posX: "right",
 		posXMobile: "center",
 		posY: "top",
-		posYMobile: "bottom",
+		posYMobile: "top",
 	};
 
 	// prettier-ignore

package/dist/components/Progress/_internal/Bar.svelte

@@ -23,7 +23,7 @@
 	<div
 		class={twMerge(
 			"bar",
-			"w-full h-full bg-progress-accent transition-[width] ease-linear duration-1000",
+			"w-full h-full bg-progress-accent transition-[width] ease-linear duration-100",
 			classBar
 		)}
 		style="width:{Math.min(100, Math.max(0, progress))}%; {styleBar}"

package/dist/components/Spinner/SpinnerUnicode.svelte

@@ -0,0 +1,130 @@
+<script module lang="ts">
+	export type SpinnerUnicodeVariant =
+		| "braille_bar"
+		| "braille_bar_dot"
+		| "braille_dot_circle"
+		| "braille_dot_bounce"
+		| "half_circle"
+		| "quarter_circle"
+		| "ascii"
+		| "bar_v"
+		| "bar_h"
+		| "shade"
+		| "arrows"
+		| "arrows2";
+
+	//
+	export function spinnerCreateBackAndForthCharFrames(
+		width: number,
+		hiChar: string,
+		loChar: string,
+		glue: string = "\u200A"
+	): string[] {
+		if (width < 0) throw new TypeError("Expecting positive non-zero width");
+		if (width === 1) return [hiChar];
+
+		let frames: string[] = [];
+		let hiIdx = 0;
+		let inc = true;
+
+		const framesCount = 2 * width - 2;
+
+		for (let y = 0; y < framesCount; y++) {
+			let rowChars = [];
+			for (let x = 0; x < width; x++) {
+				rowChars.push(x == hiIdx ? hiChar : loChar);
+			}
+
+			if (inc) {
+				hiIdx++;
+				if (hiIdx === Math.ceil(framesCount / 2)) inc = false;
+			} else {
+				hiIdx--;
+				if (hiIdx === 0) inc = true;
+			}
+
+			frames.push(rowChars.join(glue));
+		}
+
+		return frames;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	let {
+		class: _class = "",
+		speed = 70,
+		variant = "braille_bar_dot",
+		reversed = false,
+		frames,
+	}: {
+		class?: string;
+		speed?: number;
+		variant?: SpinnerUnicodeVariant;
+		reversed?: boolean;
+		frames?: string[];
+	} = $props();
+
+	const braille_bar_dot = ["⣾", "⣷", "⣯", "⣟", "⡿", "⢿", "⣻", "⣽"];
+	const braille_bar = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+	const braille_dot_circle = ["⠁", "⠈", "⠐", "⠠", "⢀", "⡀", "⠄", "⠂"];
+	const braille_dot_bounce = ["⠈", "⠐", "⠠", "⢀", "⠠", "⠐"];
+	const half_circle = ["◐", "◓", "◑", "◒"];
+	const quarter_circle = ["◴", "◷", "◶", "◵"];
+	const ascii = ["|", "/", "-", "\\"];
+	const bar_v = ["▁", "▃", "▄", "▅", "▆", "▇", "█", "▇", "▆", "▅", "▄", "▃"];
+	const bar_h = ["▏", "▎", "▍", "▌", "▋", "▊", "▉", "█", "▉", "▋", "▌", "▍", "▎"];
+	const shade = ["░", "▒", "▓", "█", "▓", "▒"];
+	const arrows = ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"];
+	const arrows2 = ["⇠", "⇡", "⇢", "⇣"];
+
+	let _frames = $derived.by(() => {
+		if (frames) return frames;
+		const map: Record<SpinnerUnicodeVariant, string[]> = {
+			braille_bar,
+			braille_bar_dot,
+			braille_dot_circle,
+			braille_dot_bounce,
+			half_circle,
+			quarter_circle,
+			ascii,
+			bar_v,
+			bar_h,
+			shade,
+			arrows,
+			arrows2,
+		};
+
+		const _frames = map[variant] ?? braille_bar;
+		return reversed ? _frames.toReversed() : _frames;
+	});
+
+	let currentFrame = $state(0);
+	let timer: any;
+	let lastTime = 0;
+
+	onMount(() => {
+		const animate = (currentTime: number) => {
+			if (currentTime - lastTime >= speed) {
+				currentFrame = (currentFrame + 1) % _frames.length;
+				lastTime = currentTime;
+			}
+			timer = requestAnimationFrame(animate);
+		};
+
+		timer = requestAnimationFrame(animate);
+
+		return () => {
+			if (timer) {
+				cancelAnimationFrame(timer);
+			}
+		};
+	});
+</script>
+
+<span class={twMerge(`inline-block font-mono leading-none text-current text-xl`, _class)}>
+	{_frames[currentFrame]}
+</span>

package/dist/components/Spinner/SpinnerUnicode.svelte.d.ts

@@ -0,0 +1,12 @@
+export type SpinnerUnicodeVariant = "braille_bar" | "braille_bar_dot" | "braille_dot_circle" | "braille_dot_bounce" | "half_circle" | "quarter_circle" | "ascii" | "bar_v" | "bar_h" | "shade" | "arrows" | "arrows2";
+export declare function spinnerCreateBackAndForthCharFrames(width: number, hiChar: string, loChar: string, glue?: string): string[];
+type $$ComponentProps = {
+    class?: string;
+    speed?: number;
+    variant?: SpinnerUnicodeVariant;
+    reversed?: boolean;
+    frames?: string[];
+};
+declare const SpinnerUnicode: import("svelte").Component<$$ComponentProps, {}, "">;
+type SpinnerUnicode = ReturnType<typeof SpinnerUnicode>;
+export default SpinnerUnicode;

package/dist/components/Spinner/index.d.ts

@@ -1 +1,2 @@
 export { default as Spinner } from "./Spinner.svelte";
+export { default as SpinnerUnicode, spinnerCreateBackAndForthCharFrames, type SpinnerUnicodeVariant, } from "./SpinnerUnicode.svelte";

package/dist/components/Spinner/index.js

@@ -1 +1,2 @@
 export { default as Spinner } from "./Spinner.svelte";
+export { default as SpinnerUnicode, spinnerCreateBackAndForthCharFrames, } from "./SpinnerUnicode.svelte";

package/dist/components/TypeaheadInput/TypeaheadInput.svelte

@@ -0,0 +1,261 @@
+<script lang="ts" generics="T extends Item">
+	import { createClog } from "@marianmeres/clog";
+	import { ItemCollection, type Item } from "@marianmeres/item-collection";
+	import { Debounced, watch } from "runed";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { unaccent } from "../../utils/unaccent.js";
+	import Spinner from "../Spinner/Spinner.svelte";
+
+	const clog = createClog("TypeaheadInput");
+
+	interface Props {
+		input?: HTMLInputElement;
+		value: any;
+		placeholder?: string;
+		getOptions: (s: string, current: T[]) => Promise<T[]>;
+		renderOptionLabel?: (item: T) => string;
+		itemIdPropName?: string;
+		name?: string;
+		// consumer might need to differentiate between "value" and a "true submitted value"
+		// (eg. when hitting Enter)... so we have `onSubmit`. Note, that this is NOT a "form.onSubmit"
+		onSubmit?: (s: string) => void;
+		// when we hit backspace, and we are at cursor position 0... this is useful for
+		// consumer...
+		onDeleteRequest?: () => void;
+		//
+		class?: string;
+		classInput?: string;
+		noSpinner?: boolean;
+		// master disable flag not allowing to list all options on empty query
+		noListAllOnEmptyQ?: boolean;
+		// use empty string to disable hint
+		appendHint?: string;
+	}
+
+	let {
+		input = $bindable(),
+		value = $bindable(),
+		placeholder,
+		getOptions,
+		renderOptionLabel,
+		itemIdPropName = "id",
+		name = "text_input",
+		//
+		onSubmit,
+		onDeleteRequest,
+		//
+		class: classProp,
+		classInput = "",
+		noSpinner,
+		noListAllOnEmptyQ,
+		appendHint = " [tab]",
+	}: Props = $props();
+
+	let inputEl: HTMLInputElement = $state()!;
+	const randName = "name-" + Math.random().toString(36).slice(2);
+	let isFetching = $state(false); // not used currently
+	let previousKey = $state();
+
+	// special case flag to allow listing all available options when navigating with arrows
+	// even on empty query
+	let allowListAll = $state(false);
+
+	// ItemCollection of all possible candidates based on the current query (value)
+	const options = new ItemCollection<T>([], {
+		idPropName: itemIdPropName,
+		searchable: { getContent: (item) => _renderOptionLabel(item) },
+		allowNextPrevCycle: true,
+		sortFn: (a, b) => {
+			const _a = _renderOptionLabel(a).toLowerCase();
+			const _b = _renderOptionLabel(b).toLowerCase();
+			return _a.localeCompare(_b);
+		},
+	});
+
+	// deriving the actual suggestion from available candidates...
+	let available = $derived($options);
+	let suggestion: string = $derived.by(() => {
+		if (!available.active) return "";
+		// a little dance, since we need to be case insensitive
+		// otherwise we would just: `value = _renderOptionLabel(available.active)`
+		const suggestion = _renderOptionLabel(available.active);
+		return (value || "") + suggestion.slice(value?.length || 0);
+	});
+
+	let visibleSuggestion: string = $derived.by(() => {
+		if (
+			!suggestion ||
+			unaccent(suggestion.toLowerCase()) === unaccent(value?.toLowerCase())
+		) {
+			return "";
+		}
+
+		return suggestion ? suggestion + appendHint : suggestion;
+	});
+
+	// helper
+	function _renderOptionLabel(item: T): string {
+		return renderOptionLabel?.(item) || `${item[itemIdPropName]}`;
+	}
+
+	// reset suggestion asap, even before the debounced search finishes (it feels better)
+	// the debounce will take over short after
+	watch([() => value], ([currQ], [oldQ]) => {
+		if (value === undefined) return;
+
+		// if we don't have a query or nothing is active, reset asap
+		if ((!allowListAll && !currQ) || !available.active) {
+			options.clear();
+			return;
+		}
+
+		// we need to be case insensitive
+		const suggestion = _renderOptionLabel(available.active);
+		if (!suggestion.toLowerCase().startsWith(currQ.toLowerCase())) {
+			options.clear();
+			return;
+		}
+	});
+
+	// do the query search
+	const debounced = new Debounced(() => value, 150);
+	watch([() => debounced.current, () => allowListAll], ([currQ, ala], [oldQ, _]) => {
+		// always start fresh
+		options.clear();
+
+		// no suggestion on empty input
+		if (!ala && !currQ) return;
+
+		isFetching = true;
+
+		getOptions(currQ, [])
+			.then((res) => {
+				// no options?
+				if (!res.length) return;
+
+				let found = res;
+				if (currQ) {
+					// so, here we have some candidate items... but, this is not a typical
+					// "word search", this is an exact, case-insensitive "string begins with",
+					// so we need to filter further...
+					found = res.filter((item) => {
+						const label = unaccent(_renderOptionLabel(item).toLowerCase());
+						return label.startsWith(unaccent(currQ.toLowerCase()));
+					});
+				}
+
+				// no exact "starts with" found?
+				if (!found.length) return;
+
+				// finally, this is where we pick the actual suggestion (by setting it as active)
+				options.addMany(found);
+				options.setActiveFirst();
+			})
+			.catch(clog.error)
+			.finally(() => (isFetching = false));
+	});
+
+	//
+	let _fixedInputClasses = $derived(
+		twMerge(
+			"form-input z-10 relative",
+			classInput,
+			"text-black",
+			"border-0 p-0 bg-transparent block w-full",
+			"focus:outline-0 focus:border-0 focus:ring-0",
+			"focus-visible:outline-0 focus-visible:border-0 focus-visible:ring-0"
+		)
+	);
+
+	function _on_submit(v: string) {
+		v = `${v || ""}`.trim();
+		if (v) onSubmit?.(v);
+		// reset this flag, next up/down arrow will switch it on again
+		allowListAll = false;
+	}
+
+	// $inspect({ isFetching, value, suggestion }).with(clog);
+	// $inspect({ previousKey }).with(clog);
+</script>
+
+<div class={twMerge("", classProp)}>
+	<div class="flex items-center">
+		<div class="relative inline-block flex-1">
+			<input
+				type="text"
+				bind:value
+				bind:this={inputEl}
+				{name}
+				class={twMerge(_fixedInputClasses)}
+				placeholder={suggestion ? "" : placeholder}
+				autocomplete="off"
+				onkeydown={(e) => {
+					// ignore on any modifier key
+					if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) {
+						return;
+					}
+
+					const cursorPos = inputEl.selectionStart ?? 0;
+
+					// also ignore ArrowRight if cursor is not at the end
+					if (value?.length) {
+						const maxPos = value.length;
+						// clog({ cursorPosition: pos, maxPos, value });
+						if (e.key === "ArrowRight" && cursorPos < maxPos) return;
+					}
+
+					// special case Tab handling - if we hit Enter just before, we want Tab
+					// to behave normally (so we are able to set value which HAS a suggestion
+					// but is NOT a suggestion - eg "New" vs "New York")
+					if (previousKey === "Enter" && e.key === "Tab") {
+						return;
+					}
+
+					// this acts as trigger for getOptions if empty value (`allowListAll` is watched)
+					allowListAll =
+						!value?.length &&
+						!noListAllOnEmptyQ &&
+						["ArrowDown", "ArrowUp"].includes(e.key);
+
+					//
+					const suggestion = options.active ? _renderOptionLabel(options.active) : null;
+					if (e.key === "ArrowDown") {
+						options.setActiveNext();
+						e.preventDefault();
+					} else if (e.key === "ArrowUp") {
+						options.setActivePrevious();
+						e.preventDefault();
+					} else if (["ArrowRight", "Tab"].includes(e.key) && suggestion) {
+						if (e.key === "Tab" && value !== suggestion) {
+							e.preventDefault();
+						}
+						value = suggestion;
+						if (e.key === "Tab") _on_submit(value);
+					} else if (e.key === "Enter") {
+						options.clear();
+						_on_submit(value);
+					} else if (e.key === "Backspace" && cursorPos === 0) {
+						onDeleteRequest?.();
+					}
+
+					previousKey = e.key;
+				}}
+				onblur={() => _on_submit(value)}
+			/>
+			<input
+				type="text"
+				bind:value={visibleSuggestion}
+				class={twMerge(
+					_fixedInputClasses,
+					"absolute inset-0 pointer-events-none opacity-40 z-0"
+				)}
+				name={randName}
+				tabindex="-1"
+				readonly
+			/>
+		</div>
+		{#if !noSpinner && isFetching}
+			<Spinner class="size-5 opacity-50" />
+		{/if}
+	</div>
+</div>

package/dist/components/TypeaheadInput/TypeaheadInput.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type Item } from "@marianmeres/item-collection";
+declare function $$render<T extends Item>(): {
+    props: {
+        input?: HTMLInputElement;
+        value: any;
+        placeholder?: string;
+        getOptions: (s: string, current: T[]) => Promise<T[]>;
+        renderOptionLabel?: (item: T) => string;
+        itemIdPropName?: string;
+        name?: string;
+        onSubmit?: (s: string) => void;
+        onDeleteRequest?: () => void;
+        class?: string;
+        classInput?: string;
+        noSpinner?: boolean;
+        noListAllOnEmptyQ?: boolean;
+        appendHint?: string;
+    };
+    exports: {};
+    bindings: "value" | "input";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Item> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "input";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Item>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TypeaheadInput: $$IsomorphicComponent;
+type TypeaheadInput<T extends Item> = InstanceType<typeof TypeaheadInput<T>>;
+export default TypeaheadInput;

package/dist/components/TypeaheadInput/index.d.ts

@@ -0,0 +1 @@
+export { default as TypeaheadInput } from "./TypeaheadInput.svelte";

package/dist/components/TypeaheadInput/index.js

@@ -0,0 +1 @@
+export { default as TypeaheadInput } from "./TypeaheadInput.svelte";

package/dist/index.css

@@ -4,6 +4,7 @@
 
 @import "./actions/tooltip/index.css";
 @import "./components/Button/index.css";
+@import "./components/ButtonGroupRadio/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/Input/index.css";
 @import "./components/Notifications/index.css";

package/dist/index.d.ts

@@ -3,7 +3,9 @@ export * from "./components/AnimatedElipsis/index.js";
 export * from "./components/AppShell/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
+export * from "./components/ButtonGroupRadio/index.js";
 export * from "./components/ColorScheme/index.js";
+export * from "./components/CommandMenu/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
@@ -16,6 +18,7 @@ export * from "./components/Progress/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
 export * from "./components/TwCheck/index.js";
+export * from "./components/TypeaheadInput/index.js";
 export * from "./components/X/index.js";
 export * from "./utils/index.js";
 export * from "./actions/index.js";

package/dist/index.js

@@ -4,7 +4,9 @@ export * from "./components/AnimatedElipsis/index.js";
 export * from "./components/AppShell/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
+export * from "./components/ButtonGroupRadio/index.js";
 export * from "./components/ColorScheme/index.js";
+export * from "./components/CommandMenu/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
@@ -17,6 +19,7 @@ export * from "./components/Progress/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
 export * from "./components/TwCheck/index.js";
+export * from "./components/TypeaheadInput/index.js";
 export * from "./components/X/index.js";
 // utils
 export * from "./utils/index.js";

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 export type DataAttributes = {
     [key: `data-${string}`]: string | number | boolean;
 };
+export type TranslateFn = (k: string, values?: false | null | undefined | Record<string, string | number>, fallback?: string | boolean, i18nSpanWrap?: boolean) => string;
 export type TW_COLORS = "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "neutral" | "orange" | "pink" | "purple" | "red" | "rose" | "sky" | "slate" | "stone" | "teal" | "violet" | "yellow" | "zinc";
 /**
 DO NOTE REMOVE. FOOD FOR TW COMPILER...

package/dist/utils/escape-regex.d.ts

@@ -0,0 +1 @@
+export declare const escapeRegex: (str: string) => string;

package/dist/utils/escape-regex.js

@@ -0,0 +1 @@
+export const escapeRegex = (str) => `${str}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string

package/dist/utils/event-emitter.d.ts

@@ -0,0 +1,18 @@
+/** Sugar, Ah, Honey, Honey... */
+export declare class EventEmitter extends EventTarget {
+    #private;
+    constructor();
+    /** Overriding so we can use removeAll (via the abortController) later... */
+    addEventListener(type: string, listener: any, // fuck it (we would need 3 signatures)
+    options?: boolean | AddEventListenerOptions): void;
+    /** Yeah! */
+    removeAllListeners(): void;
+    /** Alias for dispatchEvent(CustomEvent) */
+    emit(eventName: string, detail?: any): void;
+    /** Alias for addEventListener */
+    on(eventName: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): () => void;
+    /** Alias for removeEventListener */
+    off(eventName: string, listener: EventListenerOrEventListenerObject): this;
+    /** Alias for addEventListener with once flag */
+    once(eventName: string, listener: EventListenerOrEventListenerObject): () => void;
+}

package/dist/utils/event-emitter.js

@@ -0,0 +1,40 @@
+/** Sugar, Ah, Honey, Honey... */
+export class EventEmitter extends EventTarget {
+    #abortController = new AbortController();
+    constructor() {
+        super();
+    }
+    /** Overriding so we can use removeAll (via the abortController) later... */
+    addEventListener(type, listener, // fuck it (we would need 3 signatures)
+    options = {}) {
+        // normalize opts (for the `once` shorthand)
+        options = typeof options === "boolean" ? { capture: options } : options;
+        // make sure to always add abort signal
+        options = { ...options, signal: this.#abortController.signal };
+        super.addEventListener(type, listener, options);
+    }
+    /** Yeah! */
+    removeAllListeners() {
+        this.#abortController.abort();
+        this.#abortController = new AbortController(); // reset for future listeners
+    }
+    /** Alias for dispatchEvent(CustomEvent) */
+    emit(eventName, detail = null) {
+        this.dispatchEvent(new CustomEvent(eventName, { detail }));
+    }
+    /** Alias for addEventListener */
+    on(eventName, listener, options) {
+        this.addEventListener(eventName, listener, options);
+        return () => this.removeEventListener(eventName, listener);
+    }
+    /** Alias for removeEventListener */
+    off(eventName, listener) {
+        this.removeEventListener(eventName, listener);
+        return this;
+    }
+    /** Alias for addEventListener with once flag */
+    once(eventName, listener) {
+        this.addEventListener(eventName, listener, { once: true });
+        return () => this.removeEventListener(eventName, listener);
+    }
+}