elements-kit 0.0.9 → 0.0.10

package/dist/signals/lib/active-element.mjs

@@ -1,19 +1,11 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/active-element.ts
 /**
 * Returns a `Computed` that tracks `document.activeElement`.
 * Updates on every `focusin` / `focusout` event bubbling through the document.
 */
 function createActiveElement() {
-	const active = signal(typeof document !== "undefined" ? document.activeElement : null);
-	const update = () => active(document.activeElement);
-	const r1 = createEventListener(document, "focusin", update);
-	const r2 = createEventListener(document, "focusout", update);
-	const cleanup = () => {
-		r1();
-		r2();
-	};
+	const [active, cleanup] = sync(fromEvent(document, ["focusin", "focusout"]), () => typeof document !== "undefined" ? document.activeElement : null);
 	return Object.assign(active, { [Symbol.dispose]: cleanup });
 }
 //#endregion

package/dist/signals/lib/audio.d.mts

@@ -1,26 +1,21 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
+import { n as Signal, t as Computed } from "../../index-BtqiEEfc.mjs";
 
 //#region src/signals/lib/audio.d.ts
 type AudioResult = {
   element: HTMLAudioElement;
   playing: Computed<boolean>;
-  muted: Computed<boolean>;
-  volume: Computed<number>;
+  muted: Signal<boolean>;
+  volume: Signal<number>;
   duration: Computed<number>;
-  time: Computed<number>;
+  time: Signal<number>;
   ended: Computed<boolean>;
   play(): void;
   pause(): void;
   toggle(): void;
-  setVolume(v: number): void;
-  setTime(t: number): void;
-  mute(): void;
-  unmute(): void;
 } & Disposable;
 /**
  * Wraps an `HTMLAudioElement` with reactive state and playback controls.
- * Pass a `src` string to create a new element, or pass an existing element.
  */
-declare function createAudio(src: string | HTMLAudioElement): AudioResult;
+declare function createAudio(element: HTMLAudioElement): AudioResult;
 //#endregion
 export { createAudio };

package/dist/signals/lib/audio.mjs

@@ -1,37 +1,23 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/audio.ts
 /**
 * Wraps an `HTMLAudioElement` with reactive state and playback controls.
-* Pass a `src` string to create a new element, or pass an existing element.
 */
-function createAudio(src) {
-	const el = typeof src === "string" ? new Audio(src) : src;
-	const playing = signal(!el.paused);
-	const muted = signal(el.muted);
-	const volume = signal(el.volume);
-	const duration = signal(el.duration || 0);
-	const time = signal(el.currentTime);
-	const ended = signal(el.ended);
-	const onPlay = () => playing(true);
-	const onPause = () => playing(false);
-	const onVolumeChange = () => {
-		muted(el.muted);
-		volume(el.volume);
-	};
-	const onDurationChange = () => duration(el.duration);
-	const onTimeUpdate = () => time(el.currentTime);
-	const onEnded = () => ended(true);
-	const cleanups = [
-		createEventListener(el, "play", onPlay),
-		createEventListener(el, "pause", onPause),
-		createEventListener(el, "volumechange", onVolumeChange),
-		createEventListener(el, "durationchange", onDurationChange),
-		createEventListener(el, "timeupdate", onTimeUpdate),
-		createEventListener(el, "ended", onEnded)
-	];
-	const cleanup = () => cleanups.forEach((fn) => fn());
-	return Object.assign({
+function createAudio(element) {
+	const el = element;
+	const [playing] = sync(fromEvent(el, ["play", "pause"]), () => !el.paused);
+	const [muted] = sync(fromEvent(el, "volumechange"), () => el.muted, (v) => {
+		el.muted = v;
+	});
+	const [volume] = sync(fromEvent(el, "volumechange"), () => el.volume, (v) => {
+		el.volume = Math.min(1, Math.max(0, v));
+	});
+	const [duration] = sync(fromEvent(el, "durationchange"), () => el.duration || 0);
+	const [time] = sync(fromEvent(el, "timeupdate"), () => el.currentTime, (v) => {
+		el.currentTime = v;
+	});
+	const [ended] = sync(fromEvent(el, "ended"), () => el.ended);
+	return {
 		element: el,
 		playing,
 		muted,
@@ -42,19 +28,8 @@ function createAudio(src) {
 		play: () => el.play(),
 		pause: () => el.pause(),
 		toggle: () => el.paused ? el.play() : el.pause(),
-		setVolume: (v) => {
-			el.volume = Math.min(1, Math.max(0, v));
-		},
-		setTime: (t) => {
-			el.currentTime = t;
-		},
-		mute: () => {
-			el.muted = true;
-		},
-		unmute: () => {
-			el.muted = false;
-		}
-	}, { [Symbol.dispose]: cleanup });
+		[Symbol.dispose]: () => {}
+	};
 }
 //#endregion
 export { createAudio };

package/dist/signals/lib/audio.test.mjs

@@ -7,46 +7,49 @@ afterEach(() => {
 	vi.restoreAllMocks();
 });
 describe("createAudio", () => {
-	it("creates an Audio element from a src string", () => {
+	it("accepts an HTMLAudioElement", () => {
+		const el = new Audio();
 		let a;
 		effectScope(() => {
-			a = createAudio("test.mp3");
+			a = createAudio(el);
 		});
-		globalExpect(a.element).toBeInstanceOf(HTMLAudioElement);
+		globalExpect(a.element).toBe(el);
 	});
 	it("starts as paused", () => {
 		let a;
 		effectScope(() => {
-			a = createAudio("test.mp3");
+			a = createAudio(new Audio());
 		});
 		globalExpect(a.playing()).toBe(false);
 	});
-	it("mute() sets muted to true", () => {
+	it("muted(true) sets muted to true", () => {
 		let a;
 		effectScope(() => {
-			a = createAudio("test.mp3");
+			a = createAudio(new Audio());
 		});
-		a.mute();
+		a.muted(true);
 		globalExpect(a.element.muted).toBe(true);
 	});
-	it("setVolume clamps to [0, 1]", () => {
+	it("volume() clamps to [0, 1]", () => {
 		let a;
 		effectScope(() => {
-			a = createAudio("test.mp3");
+			a = createAudio(new Audio());
 		});
-		a.setVolume(2);
+		a.volume(2);
 		globalExpect(a.element.volume).toBe(1);
-		a.setVolume(-1);
+		a.volume(-1);
 		globalExpect(a.element.volume).toBe(0);
 	});
-	it("removes event listeners on Symbol.dispose", () => {
+	it("removes event listeners when scope is disposed", () => {
 		const removeSpy = vi.fn();
+		const el = new Audio();
+		let dispose;
 		let a;
-		effectScope(() => {
-			a = createAudio("test.mp3");
+		dispose = effectScope(() => {
+			a = createAudio(el);
 		});
 		vi.spyOn(a.element, "removeEventListener").mockImplementation(removeSpy);
-		a[Symbol.dispose]();
+		dispose();
 		globalExpect(removeSpy).toHaveBeenCalled();
 	});
 });

package/dist/signals/lib/event-driven.d.mts

@@ -0,0 +1,47 @@
+import { n as Signal, t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/event-driven.d.ts
+/**
+ * A subscribe function: registers a `notify` callback and returns an
+ * unsubscribe cleanup. Same contract as `useSyncExternalStore`.
+ */
+type Subscribe = (notify: () => void) => () => void;
+/**
+ * Returns a `Subscribe` for one or more DOM events on a target.
+ *
+ * @example
+ * ```ts
+ * const [playing, stop] = sync(fromEvent(el, ["play", "pause"]), () => !el.paused);
+ * ```
+ */
+declare function fromEvent(target: EventTarget, events: string | string[]): Subscribe;
+/**
+ * Keeps a reactive value in sync with an external source by re-reading
+ * `getter` whenever `subscribe` notifies of a change.
+ *
+ * Returns a `[value, cleanup]` tuple.
+ *
+ * Without `setter` → value is `Computed<T>` (read-only).
+ * With `setter`    → value is `Signal<T>` (writable).
+ *
+ * @example
+ * ```ts
+ * const [playing, stop] = sync(fromEvent(el, ["play", "pause"]), () => !el.paused);
+ *
+ * const [volume, stopVolume] = sync(
+ *   fromEvent(el, "volumechange"),
+ *   () => el.volume,
+ *   (v) => { el.volume = v; },
+ * );
+ *
+ * // Any external store
+ * const [data, unsub] = sync(
+ *   (notify) => { store.on("change", notify); return () => store.off("change", notify); },
+ *   () => store.getSnapshot(),
+ * );
+ * ```
+ */
+declare function sync<T>(subscribe: Subscribe, getter: () => T): [Computed<T>, () => void];
+declare function sync<T>(subscribe: Subscribe, getter: () => T, setter: (value: T) => void): [Signal<T>, () => void];
+//#endregion
+export { Subscribe, fromEvent, sync };

package/dist/signals/lib/event-driven.mjs

@@ -0,0 +1,38 @@
+import { d as onCleanup, f as signal, i as computed, p as trigger } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/event-driven.ts
+/**
+* Returns a `Subscribe` for one or more DOM events on a target.
+*
+* @example
+* ```ts
+* const [playing, stop] = sync(fromEvent(el, ["play", "pause"]), () => !el.paused);
+* ```
+*/
+function fromEvent(target, events) {
+	return (notify) => {
+		const evts = Array.isArray(events) ? events : [events];
+		evts.forEach((ev) => target.addEventListener(ev, notify));
+		return () => evts.forEach((ev) => target.removeEventListener(ev, notify));
+	};
+}
+function sync(subscribe, getter, setter) {
+	const tick = signal(void 0);
+	const value = computed(() => {
+		tick();
+		return getter();
+	});
+	value();
+	const cleanup = subscribe(() => trigger(tick));
+	onCleanup(cleanup);
+	if (setter) {
+		const proxy = (v) => {
+			if (v === void 0) return value();
+			setter(v);
+			return v;
+		};
+		return [proxy, cleanup];
+	}
+	return [value, cleanup];
+}
+//#endregion
+export { fromEvent, sync };

package/dist/signals/lib/fullscreen.mjs

@@ -1,5 +1,4 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/fullscreen.ts
 /**
 * Wraps the Fullscreen API.  `target` defaults to `document.documentElement`.
@@ -9,18 +8,17 @@ function createFullscreen(target) {
 		if (!target) return document.documentElement;
 		return typeof target === "function" ? target() ?? document.documentElement : target;
 	};
-	const isFullscreen = signal(!!document.fullscreenElement);
-	const onChange = () => isFullscreen(!!document.fullscreenElement);
-	const cleanup = createEventListener(document, "fullscreenchange", onChange);
+	const [isFullscreen, cleanup] = sync(fromEvent(document, "fullscreenchange"), () => !!document.fullscreenElement);
 	const enter = () => getTarget().requestFullscreen();
 	const exit = () => document.exitFullscreen();
 	const toggle = () => isFullscreen() ? exit() : enter();
-	return Object.assign({
+	return {
 		isFullscreen,
 		enter,
 		exit,
-		toggle
-	}, { [Symbol.dispose]: cleanup });
+		toggle,
+		[Symbol.dispose]: cleanup
+	};
 }
 //#endregion
 export { createFullscreen };

package/dist/signals/lib/fullscreen.test.mjs

@@ -34,22 +34,14 @@ describe("createFullscreen", () => {
 		document.dispatchEvent(new Event("fullscreenchange"));
 		globalExpect(f.isFullscreen()).toBe(true);
 	});
-	it("stops reacting after Symbol.dispose", () => {
-		Object.defineProperty(document, "fullscreenElement", {
-			configurable: true,
-			get: () => null
-		});
+	it("removes event listener on Symbol.dispose", () => {
+		const removeSpy = vi.spyOn(document, "removeEventListener");
 		let f;
 		effectScope(() => {
 			f = createFullscreen();
 		});
 		f[Symbol.dispose]();
-		Object.defineProperty(document, "fullscreenElement", {
-			configurable: true,
-			get: () => document.documentElement
-		});
-		document.dispatchEvent(new Event("fullscreenchange"));
-		globalExpect(f.isFullscreen()).toBe(false);
+		globalExpect(removeSpy).toHaveBeenCalledWith("fullscreenchange", globalExpect.any(Function));
 	});
 });
 //#endregion

package/dist/signals/lib/hash.mjs

@@ -1,20 +1,14 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/hash.ts
 /**
 * Returns a writable `Signal<string>` that stays in sync with `location.hash`
 * (including the leading `#`).  Writing the signal updates `location.hash`.
 */
 function createHash() {
-	const hash = signal(typeof location !== "undefined" ? location.hash : "");
-	const onHashChange = () => hash(location.hash);
-	const cleanup = createEventListener(window, "hashchange", onHashChange);
-	const proxy = (value) => {
-		if (value === void 0) return hash();
-		location.hash = value;
-		hash(value);
-	};
-	return Object.assign(proxy, { [Symbol.dispose]: cleanup });
+	const [hash, cleanup] = sync(fromEvent(window, "hashchange"), () => typeof location !== "undefined" ? location.hash : "", (v) => {
+		location.hash = v;
+	});
+	return Object.assign(hash, { [Symbol.dispose]: cleanup });
 }
 //#endregion
 export { createHash };

package/dist/signals/lib/hash.test.mjs

@@ -32,15 +32,14 @@ describe("createHash", () => {
 		h("#new");
 		globalExpect(location.hash).toBe("#new");
 	});
-	it("stops updating after Symbol.dispose", () => {
+	it("removes event listener on Symbol.dispose", () => {
+		const removeSpy = vi.spyOn(window, "removeEventListener");
 		let h;
 		effectScope(() => {
 			h = createHash();
 		});
 		h[Symbol.dispose]();
-		location.hash = "#other";
-		window.dispatchEvent(new HashChangeEvent("hashchange"));
-		globalExpect(h()).not.toBe("#other");
+		globalExpect(removeSpy).toHaveBeenCalledWith("hashchange", globalExpect.any(Function));
 	});
 });
 //#endregion

package/dist/signals/lib/is-document-visible.mjs

@@ -1,4 +1,4 @@
-import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/is-document-visible.ts
 /**
 * Returns a `Computed<boolean>` that tracks the Page Visibility API.
@@ -6,13 +6,7 @@ import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
 * background tab, etc.).
 */
 function createIsDocumentVisible() {
-	const visible = signal(typeof document !== "undefined" ? document.visibilityState === "visible" : true);
-	const handler = () => {
-		visible(document.visibilityState === "visible");
-	};
-	document.addEventListener("visibilitychange", handler);
-	const cleanup = () => document.removeEventListener("visibilitychange", handler);
-	onCleanup(cleanup);
+	const [visible, cleanup] = sync(fromEvent(document, "visibilitychange"), () => typeof document !== "undefined" ? document.visibilityState === "visible" : true);
 	return Object.assign(visible, { [Symbol.dispose]: cleanup });
 }
 //#endregion

package/dist/signals/lib/media.mjs

@@ -1,4 +1,5 @@
-import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/media.ts
 const isBrowser = typeof window !== "undefined";
 /**
@@ -11,15 +12,7 @@ const isBrowser = typeof window !== "undefined";
 function createMediaSignal(query, defaultState) {
 	if (!isBrowser) return signal(defaultState ?? false);
 	const mql = window.matchMedia(query);
-	const state = signal(mql.matches);
-	const handler = () => {
-		state(mql.matches);
-	};
-	mql.addEventListener("change", handler);
-	const cleanup = () => {
-		mql.removeEventListener("change", handler);
-	};
-	onCleanup(cleanup);
+	const [state, cleanup] = sync(fromEvent(mql, "change"), () => mql.matches);
 	return Object.assign(state, { [Symbol.dispose]: cleanup });
 }
 //#endregion

package/dist/signals/lib/orientation.mjs

@@ -1,21 +1,20 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/orientation.ts
 /**
 * Returns reactive signals for the screen orientation.
 */
 function createOrientation() {
-	const angle = signal(screen.orientation?.angle ?? 0);
-	const type = signal(screen.orientation?.type ?? "portrait-primary");
-	const onChange = () => {
-		angle(screen.orientation.angle);
-		type(screen.orientation.type);
-	};
-	const cleanup = createEventListener(screen.orientation, "change", onChange);
-	return Object.assign({
+	const subscribe = fromEvent(screen.orientation, "change");
+	const [angle, stopAngle] = sync(subscribe, () => screen.orientation?.angle ?? 0);
+	const [type, stopType] = sync(subscribe, () => screen.orientation?.type ?? "portrait-primary");
+	return {
 		angle,
-		type
-	}, { [Symbol.dispose]: cleanup });
+		type,
+		[Symbol.dispose]: () => {
+			stopAngle();
+			stopType();
+		}
+	};
 }
 //#endregion
 export { createOrientation };

package/dist/signals/lib/video.d.mts

@@ -1,21 +1,17 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
+import { n as Signal, t as Computed } from "../../index-BtqiEEfc.mjs";
 
 //#region src/signals/lib/video.d.ts
 type VideoResult = {
   element: HTMLVideoElement;
   playing: Computed<boolean>;
-  muted: Computed<boolean>;
-  volume: Computed<number>;
+  muted: Signal<boolean>;
+  volume: Signal<number>;
   duration: Computed<number>;
-  time: Computed<number>;
+  time: Signal<number>;
   ended: Computed<boolean>;
   play(): void;
   pause(): void;
   toggle(): void;
-  setVolume(v: number): void;
-  setTime(t: number): void;
-  mute(): void;
-  unmute(): void;
 } & Disposable;
 /**
  * Wraps an `HTMLVideoElement` with reactive state and playback controls.

package/dist/signals/lib/video.mjs

@@ -1,36 +1,23 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/video.ts
 /**
 * Wraps an `HTMLVideoElement` with reactive state and playback controls.
 */
 function createVideo(element) {
 	const el = element;
-	const playing = signal(!el.paused);
-	const muted = signal(el.muted);
-	const volume = signal(el.volume);
-	const duration = signal(el.duration || 0);
-	const time = signal(el.currentTime);
-	const ended = signal(el.ended);
-	const onPlay = () => playing(true);
-	const onPause = () => playing(false);
-	const onVolumeChange = () => {
-		muted(el.muted);
-		volume(el.volume);
-	};
-	const onDurationChange = () => duration(el.duration);
-	const onTimeUpdate = () => time(el.currentTime);
-	const onEnded = () => ended(true);
-	const cleanups = [
-		createEventListener(el, "play", onPlay),
-		createEventListener(el, "pause", onPause),
-		createEventListener(el, "volumechange", onVolumeChange),
-		createEventListener(el, "durationchange", onDurationChange),
-		createEventListener(el, "timeupdate", onTimeUpdate),
-		createEventListener(el, "ended", onEnded)
-	];
-	const cleanup = () => cleanups.forEach((fn) => fn());
-	return Object.assign({
+	const [playing] = sync(fromEvent(el, ["play", "pause"]), () => !el.paused);
+	const [muted] = sync(fromEvent(el, "volumechange"), () => el.muted, (v) => {
+		el.muted = v;
+	});
+	const [volume] = sync(fromEvent(el, "volumechange"), () => el.volume, (v) => {
+		el.volume = Math.min(1, Math.max(0, v));
+	});
+	const [duration] = sync(fromEvent(el, "durationchange"), () => el.duration || 0);
+	const [time] = sync(fromEvent(el, "timeupdate"), () => el.currentTime, (v) => {
+		el.currentTime = v;
+	});
+	const [ended] = sync(fromEvent(el, "ended"), () => el.ended);
+	return {
 		element: el,
 		playing,
 		muted,
@@ -41,19 +28,8 @@ function createVideo(element) {
 		play: () => el.play(),
 		pause: () => el.pause(),
 		toggle: () => el.paused ? el.play() : el.pause(),
-		setVolume: (v) => {
-			el.volume = Math.min(1, Math.max(0, v));
-		},
-		setTime: (t) => {
-			el.currentTime = t;
-		},
-		mute: () => {
-			el.muted = true;
-		},
-		unmute: () => {
-			el.muted = false;
-		}
-	}, { [Symbol.dispose]: cleanup });
+		[Symbol.dispose]: () => {}
+	};
 }
 //#endregion
 export { createVideo };

package/dist/signals/lib/video.test.mjs

@@ -25,25 +25,25 @@ describe("createVideo", () => {
 		});
 		globalExpect(v.playing()).toBe(false);
 	});
-	it("setTime updates currentTime", () => {
+	it("time(v) updates currentTime", () => {
 		const el = document.createElement("video");
 		document.body.appendChild(el);
 		let v;
 		effectScope(() => {
 			v = createVideo(el);
 		});
-		v.setTime(30);
+		v.time(30);
 		globalExpect(el.currentTime).toBe(30);
 	});
-	it("removes event listeners on Symbol.dispose", () => {
+	it("removes event listeners when scope is disposed", () => {
 		const el = document.createElement("video");
 		document.body.appendChild(el);
-		let v;
-		effectScope(() => {
-			v = createVideo(el);
+		let dispose;
+		dispose = effectScope(() => {
+			createVideo(el);
 		});
 		const removeSpy = vi.spyOn(el, "removeEventListener");
-		v[Symbol.dispose]();
+		dispose();
 		globalExpect(removeSpy).toHaveBeenCalled();
 	});
 });

package/dist/signals/lib/window-size.mjs

@@ -1,22 +1,21 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
 //#region src/signals/lib/window-size.ts
 /**
 * Returns reactive `width` and `height` signals tracking the browser window
 * inner dimensions.
 */
 function createWindowSize() {
-	const width = signal(typeof window !== "undefined" ? window.innerWidth : 0);
-	const height = signal(typeof window !== "undefined" ? window.innerHeight : 0);
-	const onResize = () => {
-		width(window.innerWidth);
-		height(window.innerHeight);
-	};
-	const cleanup = createEventListener(window, "resize", onResize);
-	return Object.assign({
+	const subscribe = fromEvent(window, "resize");
+	const [width, stopWidth] = sync(subscribe, () => typeof window !== "undefined" ? window.innerWidth : 0);
+	const [height, stopHeight] = sync(subscribe, () => typeof window !== "undefined" ? window.innerHeight : 0);
+	return {
 		width,
-		height
-	}, { [Symbol.dispose]: cleanup });
+		height,
+		[Symbol.dispose]: () => {
+			stopWidth();
+			stopHeight();
+		}
+	};
 }
 //#endregion
 export { createWindowSize };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",