@blotch/angular-lynx 22.2.3 → 22.2.5

package/fesm2022/blotch-angular-lynx.mjs

@@ -3,7 +3,7 @@ import { ApplicationRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef,
 import { ReplaySubject, Subject, firstValueFrom } from "rxjs";
 import { APP_BASE_HREF, IMAGE_CONFIG, Location, LocationStrategy, PlatformLocation, getLocaleId } from "@angular/common";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import { provideRouter as provideRouter$1, withRouterConfig } from "@angular/router";
+import { RouterLinkActive, provideRouter as provideRouter$1, withRouterConfig } from "@angular/router";
 import { bootstrapApplication as bootstrapApplication$1 } from "@angular/platform-browser";
 const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 const VALUES = new Map(Array.from(ALPHABET, (char, index) => [char, index]));
@@ -241,6 +241,7 @@ const handlers = {
 	registerJSModule: (name, module) => {
 		lynxApi("registerModule")(name, restoreFunctions(module));
 	},
+	osVersion: () => typeof SystemInfo !== "undefined" ? SystemInfo.osVersion : void 0,
 	fetch: (id, request) => fetchForMainThread(id, request),
 	abortFetch: (id) => abortFetchForMainThread(id)
 };
@@ -512,6 +513,121 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+const initDataUpdates = new Subject();
+const globalDataUpdates = new Subject();
+const asRecord = (data) => typeof data === "object" && data !== null ? data : {};
+const applyInitDataUpdate = (data, reset) => {
+	const host = lynx;
+	const next = {
+		...reset ? {} : host.__initData,
+		...asRecord(data)
+	};
+	host.__initData = next;
+	initDataUpdates.next(next);
+	return next;
+};
+const applyGlobalDataUpdate = (data) => {
+	const next = {
+		...lynx.__globalProps,
+		...asRecord(data)
+	};
+	lynx.__globalProps = next;
+	globalDataUpdates.next(next);
+	return next;
+};
+var LynxGlobalData = class LynxGlobalData {
+	globalData = signal(typeof lynx !== "undefined" && lynx.__globalProps || {}, ...ngDevMode ? [{ debugName: "globalData" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const subscription = globalDataUpdates.subscribe((data) => this.globalData.set(data));
+		inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxGlobalData,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxGlobalData,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LynxGlobalData,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const MEDIA_QUERIES = {
+	reduceMotion: "(prefers-reduced-motion: reduce)",
+	reduceTransparency: "(prefers-reduced-transparency: reduce)",
+	increaseContrast: "(prefers-contrast: more)"
+};
+const isOn = (data, setting) => data[setting] === true || data[setting] === "true";
+const pageWindow = () => {
+	if (!__WEB__ || typeof __GetPageElement !== "function") return void 0;
+	return __GetPageElement()?.ownerDocument?.defaultView ?? void 0;
+};
+const watchMediaQueries = (destroyRef) => {
+	const win = pageWindow();
+	const signals = {};
+	for (const setting of Object.keys(MEDIA_QUERIES)) {
+		const query = typeof win?.matchMedia === "function" ? win.matchMedia(MEDIA_QUERIES[setting]) : void 0;
+		const matches = signal(query?.matches ?? false, ...ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []);
+		if (query) {
+			const update = () => matches.set(query.matches);
+			query.addEventListener("change", update);
+			destroyRef.onDestroy(() => query.removeEventListener("change", update));
+		}
+		signals[setting] = matches.asReadonly();
+	}
+	return signals;
+};
+var LynxAccessibilitySettings = class LynxAccessibilitySettings {
+	#globalData = inject(LynxGlobalData);
+	#media = watchMediaQueries(inject(DestroyRef));
+	reduceMotion = this.#setting("reduceMotion");
+	reduceTransparency = this.#setting("reduceTransparency");
+	increaseContrast = this.#setting("increaseContrast");
+	#setting(setting) {
+		return computed(() => isOn(this.#globalData.globalData(), setting) || this.#media[setting]());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxAccessibilitySettings,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxAccessibilitySettings,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LynxAccessibilitySettings,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
 var LynxPerformance = class LynxPerformance {
 	#perf = this.#resolve();
 	#resolve() {
@@ -646,61 +762,6 @@ const registerDataProcessors = (definition) => {
 		}
 	};
 };
-const initDataUpdates = new Subject();
-const globalDataUpdates = new Subject();
-const asRecord = (data) => typeof data === "object" && data !== null ? data : {};
-const applyInitDataUpdate = (data, reset) => {
-	const host = lynx;
-	const next = {
-		...reset ? {} : host.__initData,
-		...asRecord(data)
-	};
-	host.__initData = next;
-	initDataUpdates.next(next);
-	return next;
-};
-const applyGlobalDataUpdate = (data) => {
-	const next = {
-		...lynx.__globalProps,
-		...asRecord(data)
-	};
-	lynx.__globalProps = next;
-	globalDataUpdates.next(next);
-	return next;
-};
-var LynxGlobalData = class LynxGlobalData {
-	globalData = signal(typeof lynx !== "undefined" && lynx.__globalProps || {}, ...ngDevMode ? [{ debugName: "globalData" }] : /* istanbul ignore next */ []);
-	constructor() {
-		const subscription = globalDataUpdates.subscribe((data) => this.globalData.set(data));
-		inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: LynxGlobalData,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Injectable
-	});
-	static ɵprov = i0.ɵɵngDeclareInjectable({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: LynxGlobalData,
-		providedIn: "root"
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: LynxGlobalData,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}],
-	ctorParameters: () => []
-});
 var LynxInitData = class LynxInitData {
 	initData = signal(typeof lynx !== "undefined" && lynx.__initData || {}, ...ngDevMode ? [{ debugName: "initData" }] : /* istanbul ignore next */ []);
 	constructor() {
@@ -1726,6 +1787,7 @@ var LynxBlurView = class LynxBlurView extends LynxElementBase {
 	"android-capture-target";
 	"experimental-update-blur-radius";
 	"blur-effect";
+	"blur-material";
 	spacing;
 	"glass-interactive";
 	"glass-tint-color";
@@ -1752,6 +1814,7 @@ var LynxBlurView = class LynxBlurView extends LynxElementBase {
 			"android-capture-target": "android-capture-target",
 			"experimental-update-blur-radius": "experimental-update-blur-radius",
 			"blur-effect": "blur-effect",
+			"blur-material": "blur-material",
 			spacing: "spacing",
 			"glass-interactive": "glass-interactive",
 			"glass-tint-color": "glass-tint-color",
@@ -1778,6 +1841,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"android-capture-target",
 				"experimental-update-blur-radius",
 				"blur-effect",
+				"blur-material",
 				"spacing",
 				"glass-interactive",
 				"glass-tint-color",
@@ -3304,6 +3368,99 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+const ROUTER_LINK_ACTIVE_CHANGE = new InjectionToken("router-link-active-change");
+var LynxRouterLinkActive = class LynxRouterLinkActive {
+	constructor() {
+		const activeChange = inject(ROUTER_LINK_ACTIVE_CHANGE, { optional: true })?.();
+		if (!activeChange) return;
+		const element = inject(ElementRef).nativeElement;
+		const subscription = activeChange.subscribe((active) => element.setAccessibilityTrait("selected", active));
+		inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxRouterLinkActive,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: LynxRouterLinkActive,
+		isStandalone: true,
+		selector: "[routerLinkActive]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LynxRouterLinkActive,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[routerLinkActive]" }]
+	}],
+	ctorParameters: () => []
+});
+var LynxAccessibilityTraits = class LynxAccessibilityTraits {
+	lynxAccessibilityTraits = input(...ngDevMode ? [void 0, { debugName: "lynxAccessibilityTraits" }] : /* istanbul ignore next */ []);
+	#element = inject(ElementRef).nativeElement;
+	#added = [];
+	constructor() {
+		effect(() => {
+			const states = this.lynxAccessibilityTraits() ?? {};
+			const on = Object.keys(states).filter((trait) => states[trait]);
+			for (const trait of this.#added) if (!on.includes(trait)) this.#element.setAccessibilityTrait(trait, false);
+			for (const trait of on) this.#element.setAccessibilityTrait(trait, true);
+			this.#added = on;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LynxAccessibilityTraits,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: LynxAccessibilityTraits,
+		isStandalone: true,
+		selector: "[lynxAccessibilityTraits]",
+		inputs: { lynxAccessibilityTraits: {
+			classPropertyName: "lynxAccessibilityTraits",
+			publicName: "lynxAccessibilityTraits",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LynxAccessibilityTraits,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[lynxAccessibilityTraits]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { lynxAccessibilityTraits: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "lynxAccessibilityTraits",
+			required: false
+		}]
+	}] }
+});
 const LYNX_ELEMENTS = [
 	LynxView,
 	LynxText,
@@ -3335,7 +3492,9 @@ const LYNX_ELEMENTS = [
 	LynxVideo,
 	LynxWebView,
 	LynxCoverView,
-	LynxTitleBarView
+	LynxTitleBarView,
+	LynxRouterLinkActive,
+	LynxAccessibilityTraits
 ];
 const LOG_EVENT = "__lynx_log__";
 const logUrl = () => __DEV__ && typeof __DEV_LOG_URL__ !== "undefined" ? __DEV_LOG_URL__ : "";
@@ -3942,12 +4101,21 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+const hostOsVersion = () => {
+	const value = typeof lynx !== "undefined" ? lynx.__globalProps?.["osVersion"] : void 0;
+	return typeof value === "string" && value !== "" ? value : void 0;
+};
 var LynxSystemInfo = class LynxSystemInfo {
 	#info;
+	#osVersion = signal(void 0, ...ngDevMode ? [{ debugName: "#osVersion" }] : /* istanbul ignore next */ []);
 	constructor() {
 		const info = (typeof lynx !== "undefined" ? lynx.SystemInfo : void 0) ?? (typeof SystemInfo !== "undefined" ? SystemInfo : void 0);
 		if (!info) throw new Error("SystemInfo is not available in this environment");
 		this.#info = info;
+		this.#osVersion.set(info.osVersion || hostOsVersion());
+		if (this.#osVersion() === void 0 && isMainThread()) callOnBackground("osVersion").then((version) => {
+			if (version) this.#osVersion.set(version);
+		}, () => {});
 	}
 	get platform() {
 		return this.#info.platform;
@@ -3956,7 +4124,7 @@ var LynxSystemInfo = class LynxSystemInfo {
 		return this.#info.engineVersion;
 	}
 	get osVersion() {
-		return this.#info.osVersion;
+		return this.#osVersion() ?? "";
 	}
 	get pixelWidth() {
 		return this.#info.pixelWidth;
@@ -4182,12 +4350,71 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+const DYNAMIC_COLOR_ROLES = [
+	"primary",
+	"onPrimary",
+	"primaryContainer",
+	"onPrimaryContainer",
+	"inversePrimary",
+	"secondary",
+	"onSecondary",
+	"secondaryContainer",
+	"onSecondaryContainer",
+	"tertiary",
+	"onTertiary",
+	"tertiaryContainer",
+	"onTertiaryContainer",
+	"background",
+	"onBackground",
+	"surface",
+	"onSurface",
+	"surfaceVariant",
+	"onSurfaceVariant",
+	"surfaceDim",
+	"surfaceBright",
+	"surfaceContainerLowest",
+	"surfaceContainerLow",
+	"surfaceContainer",
+	"surfaceContainerHigh",
+	"surfaceContainerHighest",
+	"inverseSurface",
+	"inverseOnSurface",
+	"outline",
+	"outlineVariant"
+];
+const HEX_COLOR = /^#[0-9a-f]{6}$/i;
+const parseScheme = (value) => {
+	if (typeof value !== "object" || value === null) return null;
+	const colors = value;
+	const scheme = {};
+	for (const role of DYNAMIC_COLOR_ROLES) {
+		const color = colors[role];
+		if (typeof color !== "string" || !HEX_COLOR.test(color)) return null;
+		scheme[role] = color;
+	}
+	return scheme;
+};
+const parseDynamicColors = (value) => {
+	if (typeof value !== "object" || value === null) return null;
+	const { light, dark } = value;
+	const lightScheme = parseScheme(light);
+	const darkScheme = parseScheme(dark);
+	return lightScheme && darkScheme ? {
+		light: lightScheme,
+		dark: darkScheme
+	} : null;
+};
+const sameColors = (a, b) => a === b || a !== null && b !== null && DYNAMIC_COLOR_ROLES.every((role) => a.light[role] === b.light[role] && a.dark[role] === b.dark[role]);
 var LynxTheme = class LynxTheme {
 	#globalData = inject(LynxGlobalData);
 	theme = computed(() => {
 		return this.#globalData.globalData()["theme"] ?? "Light";
 	}, ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
 	isDarkMode = computed(() => this.theme() === "Dark", ...ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []);
+	dynamicColors = computed(() => parseDynamicColors(this.#globalData.globalData()["dynamicColors"]), {
+		...ngDevMode ? { debugName: "dynamicColors" } : /* istanbul ignore next */ {},
+		equal: sameColors
+	});
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -4673,7 +4900,7 @@ const isAndroid = () => {
 const createBlurViewElement = (pageId) => {
 	const element = __CreateElement("blur-view", pageId);
 	if (!__WEB__ && isAndroid()) __SetAttribute(element, "android-capture-target", ANDROID_BLUR_CAPTURE_TARGET);
-	if (__WEB__ && __MAIN_THREAD__) import("./blotch-angular-lynx-web-glass-8MFrhPz0.mjs").then(({ attachWebGlass }) => attachWebGlass(element)).catch(() => {});
+	if (__WEB__ && __MAIN_THREAD__) import("./blotch-angular-lynx-web-glass-zlVeee5K.mjs").then(({ attachWebGlass }) => attachWebGlass(element)).catch(() => {});
 	return element;
 };
 const createCommentElement = (pageId) => {
@@ -4884,6 +5111,61 @@ const sanitizeSvgContent = (content) => {
 		return normalized === null ? before : `${before}stroke-dasharray:${normalized};`;
 	});
 };
+const LONG_PRESS_SLOP = 10;
+const TAP_GRACE = 300;
+let tapsDropped = false;
+let longPresses = 0;
+const dropsTap = () => tapsDropped;
+const pointOf = (event) => {
+	const { x = 0, y = 0 } = typeof event.detail === "object" && event.detail !== null ? event.detail : event;
+	return {
+		x,
+		y
+	};
+};
+var WebLongPress = class {
+	#fire;
+	#timer;
+	#start = null;
+	#fired = false;
+	constructor(fire) {
+		this.#fire = fire;
+	}
+	start = (event) => {
+		if (event.button !== void 0 && event.button !== 0) return;
+		this.#stop();
+		this.#fired = false;
+		const point = pointOf(event);
+		this.#start = point;
+		this.#timer = setTimeout(() => {
+			this.#timer = void 0;
+			this.#fired = true;
+			longPresses++;
+			tapsDropped = true;
+			this.#fire(point);
+		}, 500);
+	};
+	move = (event) => {
+		if (!this.#start) return;
+		const { x, y } = pointOf(event);
+		if (Math.hypot(x - this.#start.x, y - this.#start.y) > LONG_PRESS_SLOP) this.#stop();
+	};
+	end = () => {
+		this.#stop();
+		this.#start = null;
+		if (this.#fired) {
+			this.#fired = false;
+			const longPress = longPresses;
+			setTimeout(() => {
+				if (longPress === longPresses) tapsDropped = false;
+			}, TAP_GRACE);
+		}
+	};
+	#stop() {
+		if (this.#timer !== void 0) clearTimeout(this.#timer);
+		this.#timer = void 0;
+	}
+};
 const EVENT_PREFIXES = [
 	["capture-bind", "capture-bindEvent"],
 	["capture-catch", "capture-catchEvent"],
@@ -4891,12 +5173,62 @@ const EVENT_PREFIXES = [
 	["catch", "catchEvent"],
 	["bind", "bindEvent"]
 ];
+const DOM_EVENT_ALIASES = /* @__PURE__ */ new Map([["click", "tap"]]);
 var _a;
+const nativeEventKey = (type, name) => type === "global-bindEvent" ? `global:${name}` : name;
+const combinedEventType = (listeners) => {
+	if (listeners[0].eventType === "global-bindEvent") return "global-bindEvent";
+	const capture = listeners.every((l) => l.eventType.startsWith("capture-"));
+	const stops = listeners.some((l) => l.eventType.endsWith("catchEvent"));
+	if (capture) return stops ? "capture-catchEvent" : "capture-bindEvent";
+	return stops ? "catchEvent" : "bindEvent";
+};
+const parseEventName = (name) => {
+	const alias = DOM_EVENT_ALIASES.get(name);
+	if (alias) return {
+		eventType: "bindEvent",
+		eventName: alias
+	};
+	for (const [prefix, eventType] of EVENT_PREFIXES) if (name.startsWith(prefix)) return {
+		eventType,
+		eventName: name.slice(prefix.length)
+	};
+};
+const withAddedTraits = (own, added) => {
+	if (added.length === 0 || isAndroid()) return own;
+	const traits = own == null ? [] : String(own).split(",").map((trait) => trait.trim()).filter((trait) => trait !== "" && trait !== "none");
+	for (const trait of added) if (!traits.includes(trait)) traits.push(trait);
+	return traits.join(",");
+};
+const isCustomProperty = (name) => name.startsWith("--");
 const wouldFormCycle = (parent, candidate) => {
 	const candidateId = __GetElementUniqueID(candidate);
 	for (let cur = parent; cur; cur = __GetParent(cur)) if (__GetElementUniqueID(cur) === candidateId) return true;
 	return false;
 };
+const ancestry = (element) => {
+	const path = [];
+	for (let cur = element; cur; cur = __GetParent(cur)) path.push(cur);
+	return path;
+};
+const flushesBefore = (first, second) => {
+	const firstPath = ancestry(first);
+	const secondPath = ancestry(second);
+	const secondDepth = new Map(secondPath.map((element, depth) => [__GetElementUniqueID(element), depth]));
+	for (let depth = 0; depth < firstPath.length; depth++) {
+		const shared = secondDepth.get(__GetElementUniqueID(firstPath[depth]));
+		if (shared === void 0) continue;
+		if (depth === 0) return true;
+		if (shared === 0) return false;
+		const order = __GetChildren(firstPath[depth]).map((child) => __GetElementUniqueID(child));
+		return order.indexOf(__GetElementUniqueID(firstPath[depth - 1])) < order.indexOf(__GetElementUniqueID(secondPath[shared - 1]));
+	}
+	return false;
+};
+const isIOS = () => {
+	return ((typeof lynx !== "undefined" ? lynx.SystemInfo : void 0) ?? (typeof SystemInfo !== "undefined" ? SystemInfo : void 0))?.platform === "iOS";
+};
+const insertHidesBlurView = (parent, child) => !__WEB__ && child.tagName === "blur-view" && parent.tagName !== "blur-view" && isIOS();
 const isTextish = (el) => el.tagName === "text" || el.tagName === "raw-text";
 var LynxElement = class {
 	#nativeRef;
@@ -4917,7 +5249,12 @@ var LynxElement = class {
 	#inlineStyleWhole = null;
 	#inlineStyleKeys = /* @__PURE__ */ new Map();
 	#runtimeStyle = "";
+	#customProperties = /* @__PURE__ */ new Map();
+	#ownTraits = null;
+	#addedTraits = [];
 	#listeners = [];
+	#webLongPress = null;
+	#nativeHandlers = /* @__PURE__ */ new Map();
 	#text;
 	#rawText;
 	#children = [];
@@ -4925,6 +5262,8 @@ var LynxElement = class {
 	#paintingDead = false;
 	static #pendingRemovals = /* @__PURE__ */ new Set();
 	static #pendingTextNormalization = /* @__PURE__ */ new Set();
+	static #pendingAttributeRemovals = /* @__PURE__ */ new Set();
+	#removedAttributes = /* @__PURE__ */ new Set();
 	static #byNativeId = /* @__PURE__ */ new Map();
 	static #canonicalFor(ref) {
 		return _a.#byNativeId.get(__GetElementUniqueID(ref)) ?? new _a(ref);
@@ -4967,7 +5306,18 @@ var LynxElement = class {
 			this.#dataset[key] = value;
 		} else {
 			if (this.tagName === "svg" && name === "content" && typeof value === "string") value = sanitizeSvgContent(value);
-			__SetAttribute(this.element, name, value);
+			if (name === "accessibility-traits") {
+				this.#ownTraits = value ?? null;
+				value = withAddedTraits(this.#ownTraits, this.#addedTraits);
+			}
+			if (value == null) {
+				this.#removedAttributes.add(name);
+				_a.#pendingAttributeRemovals.add(this);
+				scheduleSettleFlush();
+			} else {
+				this.#removedAttributes.delete(name);
+				__SetAttribute(this.element, name, value);
+			}
 			if (value == null) this.#attrs.delete(name);
 			else this.#attrs.set(name, value);
 			if (this.tagName === "raw-text" && name === "text") {
@@ -4982,6 +5332,11 @@ var LynxElement = class {
 	updateBlurMaterial() {
 		if (usesAndroidBlurMaterials()) this.#setRuntimeStyle(androidBlurMaterialStyle(this.#attrs));
 	}
+	setAccessibilityTrait(trait, on) {
+		if (this.#addedTraits.includes(trait) === on) return;
+		this.#addedTraits = on ? [...this.#addedTraits, trait] : this.#addedTraits.filter((added) => added !== trait);
+		this.setAttribute("accessibility-traits", this.#ownTraits);
+	}
 	getAttribute(name) {
 		return __GetAttributeByName(this.element, name);
 	}
@@ -4989,10 +5344,25 @@ var LynxElement = class {
 		this.setAttribute(name, null);
 	}
 	setStyle(key, value) {
+		if (isCustomProperty(key)) {
+			if (value == null || value === "") {
+				this.removeStyle(key);
+				return;
+			}
+			const text = String(value);
+			if (this.#customProperties.get(key) === text) return;
+			this.#customProperties.set(key, text);
+			this.#rewriteInlineStyle();
+			return;
+		}
 		__AddInlineStyle(this.element, key, value);
 		this.#inlineStyleKeys.set(key, value);
 	}
 	removeStyle(key) {
+		if (isCustomProperty(key)) {
+			if (this.#customProperties.delete(key)) this.#rewriteInlineStyle();
+			return;
+		}
 		__AddInlineStyle(this.element, key, null);
 		this.#inlineStyleKeys.delete(key);
 	}
@@ -5001,30 +5371,48 @@ var LynxElement = class {
 		this.#inlineStyleWhole = inlineStyle;
 	}
 	#withRuntimeStyle(inlineStyle) {
-		if (!this.#runtimeStyle) return inlineStyle;
-		return inlineStyle ? `${this.#runtimeStyle}; ${inlineStyle}` : this.#runtimeStyle;
+		if (!this.#runtimeStyle && this.#customProperties.size === 0) return inlineStyle;
+		const variables = [...this.#customProperties].map(([name, value]) => `${name}: ${value}`).join("; ");
+		return [
+			this.#runtimeStyle,
+			inlineStyle?.replace(/[\s;]+$/, ""),
+			variables
+		].filter(Boolean).join("; ");
 	}
 	#setRuntimeStyle(style) {
 		if (style === this.#runtimeStyle) return;
 		this.#runtimeStyle = style;
+		this.#rewriteInlineStyle();
+	}
+	#rewriteInlineStyle() {
 		__SetInlineStyles(this.element, this.#withRuntimeStyle(this.#inlineStyleWhole));
 		for (const [key, value] of this.#inlineStyleKeys) __AddInlineStyle(this.element, key, value);
 	}
 	insertBefore(newChild, refChild) {
 		if (newChild.isRootPageElement) return;
 		newChild.#cancelPendingRemoval();
+		newChild.#removeIfMoveWouldBeLost(this);
 		newChild.#recreateIfDead();
 		if (refChild == null) this.appendChild(newChild);
 		else {
 			if (wouldFormCycle(this.element, newChild.element)) return;
-			__InsertElementBefore(this.element, newChild.element, refChild.element);
+			if (insertHidesBlurView(this, newChild)) this.#appendBefore(newChild, refChild);
+			else __InsertElementBefore(this.element, newChild.element, refChild.element);
 			this.#adoptChild(newChild, refChild);
 			if (isTextish(this) || isTextish(newChild)) _a.#enqueueTextNormalization(newChild);
 		}
 	}
+	#appendBefore(newChild, refChild) {
+		const childId = __GetElementUniqueID(newChild.element);
+		const following = [];
+		for (let sibling = refChild.element; sibling; sibling = __NextElement(sibling)) if (__GetElementUniqueID(sibling) !== childId) following.push(sibling);
+		__AppendElement(this.element, newChild.element);
+		for (const sibling of following) __AppendElement(this.element, sibling);
+	}
 	appendChild(newChild) {
 		if (newChild.isRootPageElement) return;
 		newChild.#cancelPendingRemoval();
+		newChild.#removeIfMoveWouldBeLost(this);
 		newChild.#recreateIfDead();
 		if (wouldFormCycle(this.element, newChild.element)) return;
 		__AppendElement(this.element, newChild.element);
@@ -5072,6 +5460,15 @@ var LynxElement = class {
 		}
 		_a.#pendingRemovals.add(this);
 	}
+	static commitPendingAttributeRemovals() {
+		if (_a.#pendingAttributeRemovals.size === 0) return;
+		const elements = [..._a.#pendingAttributeRemovals];
+		_a.#pendingAttributeRemovals.clear();
+		for (const el of elements) {
+			for (const name of el.#removedAttributes) __SetAttribute(el.element, name, null);
+			el.#removedAttributes.clear();
+		}
+	}
 	static commitPendingRemovals() {
 		if (_a.#pendingRemovals.size === 0) return;
 		const items = [..._a.#pendingRemovals];
@@ -5128,6 +5525,12 @@ var LynxElement = class {
 	#cancelPendingRemoval() {
 		_a.#pendingRemovals.delete(this);
 	}
+	#removeIfMoveWouldBeLost(newParent) {
+		if (__WEB__ || this.#paintingDead || this._virtualParent) return;
+		const oldParent = __GetParent(this.element);
+		if (!oldParent || __GetElementUniqueID(oldParent) === __GetElementUniqueID(newParent.element)) return;
+		if (flushesBefore(newParent.element, oldParent)) this.#doRemove();
+	}
 	#doRemove() {
 		const parent = this.parentNode();
 		if (!parent) return;
@@ -5173,9 +5576,9 @@ var LynxElement = class {
 		const inlineStyle = this.#withRuntimeStyle(this.#inlineStyleWhole);
 		if (inlineStyle != null) __SetInlineStyles(fresh, inlineStyle);
 		for (const [key, value] of this.#inlineStyleKeys) __AddInlineStyle(fresh, key, value);
-		for (const { eventType, eventName, listener } of this.#listeners) __AddEvent(fresh, eventType, eventName, {
+		for (const { eventType, eventName, dispatch } of this.#nativeHandlers.values()) __AddEvent(fresh, eventType, eventName, {
 			type: "worklet",
-			value: listener
+			value: dispatch
 		});
 		for (const child of this.#children) {
 			child.#recreateSubtree();
@@ -5213,46 +5616,96 @@ var LynxElement = class {
 		return anim;
 	}
 	addEventListener(name, cb) {
-		let eventName = "";
-		let eventType;
-		for (const [prefix, type] of EVENT_PREFIXES) if (name.startsWith(prefix)) {
-			eventName = name.slice(prefix.length);
-			eventType = type;
-			break;
-		}
-		if (!eventType) return () => {};
-		const listener = (event) => {
-			if (event && typeof event === "object") {
-				if (typeof event.stopPropagation !== "function") event.stopPropagation = () => {};
-				if (typeof event.preventDefault !== "function") event.preventDefault = () => {};
-				if (typeof event.stopImmediatePropagation !== "function") event.stopImmediatePropagation = () => {};
-			}
-			const result = cb(event);
-			scheduleSettleFlush();
-			return result;
-		};
+		const parsed = parseEventName(name);
+		if (!parsed) return () => {};
+		if (__WEB__ && parsed.eventName === "longpress") this.#listenForWebLongPress();
 		const entry = {
-			eventType,
-			eventName,
-			listener
+			...parsed,
+			listener: cb
 		};
 		this.#listeners.push(entry);
-		__AddEvent(this.element, eventType, eventName, {
-			type: "worklet",
-			value: listener
+		this.#syncNativeHandler(entry);
+		return () => this.#removeListener(entry);
+	}
+	removeEventListener(name, cb) {
+		const parsed = parseEventName(name);
+		if (!parsed) return;
+		const entry = this.#listeners.find((other) => other.listener === cb && other.eventType === parsed.eventType && other.eventName === parsed.eventName);
+		if (entry) this.#removeListener(entry);
+	}
+	#listenForWebLongPress() {
+		if (this.#webLongPress) return;
+		const press = new WebLongPress((detail) => {
+			const entry = this.#listeners.find((listener) => listener.eventName === "longpress");
+			if (entry) this.#dispatch(entry, {
+				type: "longpress",
+				detail
+			});
 		});
-		return () => {
-			const i = this.#listeners.indexOf(entry);
-			/* v8 ignore next */
-			if (i >= 0) this.#listeners.splice(i, 1);
-			__AddEvent(this.element, eventType, eventName, void 0);
+		this.#webLongPress = press;
+		this.addEventListener("bindtouchstart", press.start);
+		this.addEventListener("bindmousedown", press.start);
+		this.addEventListener("bindtouchmove", press.move);
+		this.addEventListener("bindmousemove", press.move);
+		for (const end of [
+			"touchend",
+			"touchcancel",
+			"mouseup",
+			"mouseleave"
+		]) this.addEventListener(`bind${end}`, press.end);
+	}
+	#removeListener(entry) {
+		const i = this.#listeners.indexOf(entry);
+		if (i < 0) return;
+		this.#listeners.splice(i, 1);
+		this.#syncNativeHandler(entry);
+	}
+	#listenersLike(entry) {
+		const key = nativeEventKey(entry.eventType, entry.eventName);
+		return this.#listeners.filter((other) => nativeEventKey(other.eventType, other.eventName) === key);
+	}
+	#syncNativeHandler(entry) {
+		const key = nativeEventKey(entry.eventType, entry.eventName);
+		const listeners = this.#listenersLike(entry);
+		const current = this.#nativeHandlers.get(key);
+		const eventType = listeners.length ? combinedEventType(listeners) : null;
+		if (current?.eventType === eventType) return;
+		if (current) {
+			__AddEvent(this.element, current.eventType, entry.eventName, void 0);
+			this.#nativeHandlers.delete(key);
+		}
+		if (!eventType) return;
+		const handler = {
+			eventType,
+			eventName: entry.eventName,
+			dispatch: current?.dispatch ?? ((event) => this.#dispatch(entry, event))
 		};
+		this.#nativeHandlers.set(key, handler);
+		__AddEvent(this.element, eventType, entry.eventName, {
+			type: "worklet",
+			value: handler.dispatch
+		});
+	}
+	#dispatch(entry, event) {
+		if (event && typeof event === "object") {
+			if (typeof event.stopPropagation !== "function") event.stopPropagation = () => {};
+			if (typeof event.preventDefault !== "function") event.preventDefault = () => {};
+			if (typeof event.stopImmediatePropagation !== "function") event.stopImmediatePropagation = () => {};
+		}
+		if (__WEB__ && entry.eventName === "tap" && dropsTap()) return void 0;
+		let result;
+		for (const other of this.#listenersLike(entry)) if (this.#listeners.includes(other)) result = other.listener(event);
+		scheduleSettleFlush();
+		return result;
 	}
 };
 _a = LynxElement;
 const processPendingRemovals = () => {
 	LynxElement.commitPendingRemovals();
 };
+const processPendingAttributeRemovals = () => {
+	LynxElement.commitPendingAttributeRemovals();
+};
 const processPendingTextNormalization = () => {
 	LynxElement.commitPendingTextNormalization();
 };
@@ -5264,6 +5717,7 @@ const scheduleSettleFlush = () => {
 		settleFlushScheduled = false;
 		if (isInsideChangeDetection()) return;
 		LynxElement.commitPendingRemovals();
+		LynxElement.commitPendingAttributeRemovals();
 		LynxElement.commitPendingTextNormalization();
 		__FlushElementTree();
 	});
@@ -5700,6 +6154,7 @@ var LynxRendererFactory2 = class LynxRendererFactory2 {
 			}
 			/* v8 ignore stop */
 			processPendingRemovals();
+			processPendingAttributeRemovals();
 			processPendingTextNormalization();
 			if (!isFirstRenderPending()) __FlushElementTree();
 			processPendingListUpdates();
@@ -6051,7 +6506,7 @@ var LynxBackButton = class LynxBackButton {
 			Promise.resolve().then(() => shell?.setBackHandlerEnabled(enabled)).catch(() => hasShell = false);
 		});
 		const emitter = modules.getJSModule("GlobalEventEmitter");
-		Promise.resolve().then(() => emitter?.addListener(BACK_EVENT, () => setTimeout(() => location.back()))).catch(() => {});
+		Promise.resolve().then(() => emitter?.addListener(BACK_EVENT, () => location.back())).catch(() => {});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -6091,7 +6546,14 @@ const provideRouter = (routes, ...features) => {
 			useClass: LynxLocationStrategy
 		},
 		provideRouter$1(routes, withRouterConfig({ resolveNavigationPromiseOnError: true }), ...features),
-		provideEnvironmentInitializer(() => inject(LynxBackButton))
+		provideEnvironmentInitializer(() => inject(LynxBackButton)),
+		{
+			provide: ROUTER_LINK_ACTIVE_CHANGE,
+			useValue: () => inject(RouterLinkActive, {
+				self: true,
+				optional: true
+			})?.isActiveChange ?? null
+		}
 	]);
 };
 globalThis.__lynxLastError = "";
@@ -8079,6 +8541,6 @@ const bootstrapOnMainThread = async (rootComponent, options) => {
 	if (__WEB__ && !wasHydrating) setTimeout(() => __FlushElementTree(), 0);
 	return appRef;
 };
-export { BaseGesture, ComposedGesture, ContinuousGesture, FlingDirection, FlingGesture, Gesture, GestureState, GestureStateManager, GestureType, LYNX_ELEMENTS, LYNX_FORM_ACCESSORS, LongPressGesture, LynxAccessibility, LynxAnimation, LynxBlock, LynxBlurView, LynxCoverView, LynxDevTools, LynxErrorHandler, LynxExposure, LynxFont, LynxFor, LynxFrame, LynxGestureDetector, LynxGlobalData, LynxGlobalExposure, LynxIf, LynxImage, LynxInitData, LynxInlineTruncation, LynxInput, LynxInputValueAccessor, LynxList, LynxListItem, LynxLocale, LynxLocationStrategy, LynxLogger, LynxMainThread, LynxMainThreadEvent, LynxNativeModule, LynxOverlay, LynxPerformance, LynxPlatformLocation, LynxPortal, LynxRefresh, LynxRefreshHeader, LynxResourcePrefetch, LynxRouteReuseStrategy, LynxSafeArea, LynxScrollCoordinator, LynxScrollCoordinatorHeader, LynxScrollCoordinatorSlot, LynxScrollCoordinatorSlotDrag, LynxScrollCoordinatorToolbar, LynxScrollView, LynxSessionStorage, LynxSvg, LynxSystemInfo, LynxText, LynxTextMeasure, LynxTextarea, LynxTextareaValueAccessor, LynxTheme, LynxTitleBarView, LynxTransition, LynxTransitionGroup, LynxVideo, LynxView, LynxViewPager, LynxViewPagerItem, LynxWebView, MainThreadElement, MainThreadRef, PanGesture, PinchGesture, PortalRef, RotationGesture, SAFE_AREA_INSET_BOTTOM, SAFE_AREA_INSET_LEFT, SAFE_AREA_INSET_RIGHT, SAFE_AREA_INSET_TOP, TapGesture, backgroundFn, bootstrapApplication, createMainThreadRef, getLynxAppLocale, loadLazyBundle, mainThreadFn, provideLocale, provideRenderer, provideRouter, registerDataProcessors, ɵhmrAccept, ɵstartBackgroundThread };
+export { BaseGesture, ComposedGesture, ContinuousGesture, DYNAMIC_COLOR_ROLES, FlingDirection, FlingGesture, Gesture, GestureState, GestureStateManager, GestureType, LYNX_ELEMENTS, LYNX_FORM_ACCESSORS, LongPressGesture, LynxAccessibility, LynxAccessibilitySettings, LynxAccessibilityTraits, LynxAnimation, LynxBlock, LynxBlurView, LynxCoverView, LynxDevTools, LynxErrorHandler, LynxExposure, LynxFont, LynxFor, LynxFrame, LynxGestureDetector, LynxGlobalData, LynxGlobalExposure, LynxIf, LynxImage, LynxInitData, LynxInlineTruncation, LynxInput, LynxInputValueAccessor, LynxList, LynxListItem, LynxLocale, LynxLocationStrategy, LynxLogger, LynxMainThread, LynxMainThreadEvent, LynxNativeModule, LynxOverlay, LynxPerformance, LynxPlatformLocation, LynxPortal, LynxRefresh, LynxRefreshHeader, LynxResourcePrefetch, LynxRouteReuseStrategy, LynxRouterLinkActive, LynxSafeArea, LynxScrollCoordinator, LynxScrollCoordinatorHeader, LynxScrollCoordinatorSlot, LynxScrollCoordinatorSlotDrag, LynxScrollCoordinatorToolbar, LynxScrollView, LynxSessionStorage, LynxSvg, LynxSystemInfo, LynxText, LynxTextMeasure, LynxTextarea, LynxTextareaValueAccessor, LynxTheme, LynxTitleBarView, LynxTransition, LynxTransitionGroup, LynxVideo, LynxView, LynxViewPager, LynxViewPagerItem, LynxWebView, MainThreadElement, MainThreadRef, PanGesture, PinchGesture, PortalRef, RotationGesture, SAFE_AREA_INSET_BOTTOM, SAFE_AREA_INSET_LEFT, SAFE_AREA_INSET_RIGHT, SAFE_AREA_INSET_TOP, TapGesture, backgroundFn, bootstrapApplication, createMainThreadRef, getLynxAppLocale, loadLazyBundle, mainThreadFn, provideLocale, provideRenderer, provideRouter, registerDataProcessors, ɵhmrAccept, ɵstartBackgroundThread };
 
 //# sourceMappingURL=blotch-angular-lynx.mjs.map