@odx/foundation 1.0.0-rc.10 → 1.0.0-rc.11

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.0.0-rc.11
+
+### Minor Changes
+
+- Add `change` callback to `attachDarkModeToggle` options to notify when dark mode toggle is clicked
+
+### Patch Changes
+
+- Fix setTheme function not removing dark mode when `mode` is set to `light`
+- Clean up event listeners in `attachDarkModeToggle` cleanup function
+- Prevent dark mode toggle if click event on attached host is prevented by another event listener
+
 ## 1.0.0-rc.10
 
 ### Patch Changes

package/dist/lib/signals.d.ts

@@ -7,14 +7,14 @@ type SignalOptions<T> = Signal.Options<T> & {
   unwatched?(): void;
 };
 type ReadonlySignal<T> = Signal.Computed<T>;
+declare function computed<T>(computeFn: () => T, options?: SignalOptions<T>): ReadonlySignal<T>;
 declare function signal<T>(value: T, options?: SignalOptions<T>): Signal$1<T>;
+declare global {
+  var __ODX_SHARED_SIGNALS__: Record<string, unknown>;
+}
 /**
  * Creates or retrieves a shared signal stored on the global object. This is useful for signals that need to be shared across multiple modules without explicitly passing them around, such as localization settings or translation records.
  */
 declare function sharedSignal<T>(key: string, ...args: Parameters<typeof signal<T>>): ReturnType<typeof signal<T>>;
-declare function computed<T>(computeFn: () => T, options?: SignalOptions<T>): ReadonlySignal<T>;
 declare function effect(callback: (() => void) | (() => () => void)): () => void;
-declare global {
-  var __ODX_SHARED_SIGNALS__: Record<string, unknown>;
-}
 export { ReadonlySignal, Signal$1 as Signal, SignalOptions, computed, effect, sharedSignal, signal };

package/dist/lib/signals.js

@@ -7,6 +7,9 @@ function transformOptions(options) {
 		[Signal.subtle.unwatched]: options.unwatched
 	};
 }
+function computed(computeFn, options) {
+	return new Signal.Computed(computeFn, transformOptions(options));
+}
 function signal(value, options) {
 	const state = new Signal.State(value, transformOptions(options));
 	state.update = (updateFn) => state.set(updateFn(state.get()));
@@ -16,12 +19,10 @@ function signal(value, options) {
 * Creates or retrieves a shared signal stored on the global object. This is useful for signals that need to be shared across multiple modules without explicitly passing them around, such as localization settings or translation records.
 */
 function sharedSignal(key, ...args) {
+	globalThis.__ODX_SHARED_SIGNALS__ ||= {};
 	if (!(key in globalThis.__ODX_SHARED_SIGNALS__)) globalThis.__ODX_SHARED_SIGNALS__[key] = signal(...args);
 	return globalThis.__ODX_SHARED_SIGNALS__[key];
 }
-function computed(computeFn, options) {
-	return new Signal.Computed(computeFn, transformOptions(options));
-}
 let needsEnqueue = true;
 const watcher = new Signal.subtle.Watcher(() => {
 	if (!needsEnqueue) return;
@@ -46,5 +47,4 @@ function effect(callback) {
 		cleanup = void 0;
 	};
 }
-globalThis.__ODX_SHARED_SIGNALS__ ||= {};
 export { computed, effect, sharedSignal, signal };

package/dist/lib/theming.d.ts

@@ -2,13 +2,14 @@ import { ThemeConfig } from "@odx/design-tokens";
 declare global {
   var __ODX_THEME_ROOT__: HTMLElement;
 }
-declare const userPrefersDarkMode: boolean;
 declare const darkModeIcon = "core::night-mode";
 declare const lightModeIcon = "core::brightness";
+declare const userPrefersDarkMode: boolean;
 declare function setTheme$1(config: ThemeConfig, root?: HTMLElement): void;
 declare function isDarkModeEnabled(): boolean;
 declare function toggleDarkMode(enabled?: boolean | 'auto', root?: HTMLElement): void;
 interface AttachDarkModeToggleOptions<T extends HTMLElement> {
+  change?(darkModeEnabled: boolean): void;
   update?(host: T, darkModeEnabled: boolean, icon: string): void;
   root?: HTMLElement;
 }

package/dist/lib/theming.js

@@ -1,8 +1,8 @@
 import { effect, sharedSignal } from "./signals.js";
 import { darkModeClass, lightModeClass, setTheme } from "@odx/design-tokens";
-const { matches: userPrefersDarkMode = false } = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? {};
 const darkModeIcon = "core::night-mode";
 const lightModeIcon = "core::brightness";
+const { matches: userPrefersDarkMode = false } = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? {};
 globalThis.__ODX_THEME_ROOT__ ??= document.documentElement;
 const hasDarkModeClass = globalThis.__ODX_THEME_ROOT__.classList.contains(darkModeClass);
 const hasLightModeClass = globalThis.__ODX_THEME_ROOT__.classList.contains(lightModeClass);
@@ -11,7 +11,7 @@ function setTheme$1(config, root = globalThis.__ODX_THEME_ROOT__) {
 	setTheme(config, root);
 	if (!config.mode) return;
 	if (config.mode === "auto") darkModeEnabled.set(userPrefersDarkMode);
-	else darkModeEnabled.set(config.mode === "dark" ? true : !isDarkModeEnabled());
+	else darkModeEnabled.set(config.mode === "dark");
 }
 function isDarkModeEnabled() {
 	return darkModeEnabled.get();
@@ -21,12 +21,21 @@ function toggleDarkMode(enabled, root = globalThis.__ODX_THEME_ROOT__) {
 	setTheme$1({ mode: enabled === "auto" ? enabled : enabled ? "dark" : "light" }, root);
 }
 function attachDarkModeToggle(host, options = {}) {
-	host.addEventListener("click", () => toggleDarkMode(void 0, options.root));
-	return effect(() => {
+	const abortController = new AbortController();
+	const cleanup = effect(() => {
 		const darkModeEnabled = isDarkModeEnabled();
 		const icon = darkModeEnabled ? lightModeIcon : darkModeIcon;
 		host.setAttribute("icon", icon);
 		options.update?.(host, darkModeEnabled, icon);
 	});
+	host.addEventListener("click", (event) => {
+		if (event.defaultPrevented) return;
+		toggleDarkMode(void 0, options.root);
+		options.change?.(isDarkModeEnabled());
+	}, { signal: abortController.signal });
+	return () => {
+		abortController.abort();
+		cleanup();
+	};
 }
 export { attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme$1 as setTheme, toggleDarkMode, userPrefersDarkMode };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "The design foundation of the ODX Design System, providing base styles and utilities",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -20,10 +20,10 @@
     "@odx/design-tokens": "^4.0.0"
   },
   "devDependencies": {
-    "@tsdown/css": "0.22.2",
+    "@tsdown/css": "0.22.3",
     "lit": "3.3.3",
     "stylelint": "17.13.0",
-    "tsdown": "0.22.2",
+    "tsdown": "0.22.3",
     "@odx-internal/config-stylelint": "0.0.0",
     "@odx-internal/utils-storybook": "0.0.0"
   },
@@ -49,11 +49,14 @@
     "access": "public",
     "tag": "latest"
   },
+  "stylelint": {
+    "extends": "@odx-internal/config-stylelint"
+  },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --log-level error --no-clean --watch",
     "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
     "lint": "biome lint src",
-    "lint:styles": "stylelint '**/*.css' --config @odx-internal/config-stylelint"
+    "lint:styles": "stylelint '**/*.css'"
   }
 }