@odx/foundation 1.0.0-rc.3 → 1.0.0-rc.4

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.0.0-rc.4
+
+### Bug Fixes
+
+- Fix dark/light mode detection logic in `setTheme` function
+
 ## 1.0.0-rc.3
 
 ### Bug Fixes

package/dist/lib/breakpoints.d.ts

@@ -1,61 +1,61 @@
-import { Signal } from './signals.js';
+import { Signal } from "./signals.js";
+
+//#region src/lib/breakpoints.d.ts
 declare global {
-    namespace ODX.Breakpoints {
-        interface Config {
-            sm: true;
-            md: true;
-            lg: true;
-            xl: true;
-            xxl: true;
-        }
+  namespace ODX.Breakpoints {
+    interface Config {
+      sm: true;
+      md: true;
+      lg: true;
+      xl: true;
+      xxl: true;
     }
+  }
 }
-type FilteredKeys<T extends object> = {
-    [K in keyof T as T[K] extends true ? K : never]: T[K];
-};
-export type BreakpointOperator = '<' | '<=' | '>=' | '>';
-export interface BreakpointConfig {
-    name: keyof FilteredKeys<ODX.Breakpoints.Config>;
-    min: number;
-    max: number;
-    customQuery?: string;
+type FilteredKeys<T extends object> = { [K in keyof T as T[K] extends true ? K : never]: T[K] };
+type BreakpointOperator = '<' | '<=' | '>=' | '>';
+interface BreakpointConfig {
+  name: keyof FilteredKeys<ODX.Breakpoints.Config>;
+  min: number;
+  max: number;
+  customQuery?: string;
 }
-export interface Breakpoint extends BreakpointConfig {
-    id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
-    query: string;
-    operator?: BreakpointOperator;
+interface Breakpoint extends BreakpointConfig {
+  id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
+  query: string;
+  operator?: BreakpointOperator;
 }
-export declare const registeredBreakpoints: ReadonlyMap<Breakpoint['id'], Breakpoint>;
-export declare const breakpointAttribute = "odx-breakpoint";
-export declare const defaultBreakpoints: [{
-    readonly name: "sm";
-    readonly min: 0;
-    readonly max: 479.98;
+declare const registeredBreakpoints: ReadonlyMap<Breakpoint['id'], Breakpoint>;
+declare const breakpointAttribute = "odx-breakpoint";
+declare const defaultBreakpoints: [{
+  readonly name: "sm";
+  readonly min: 0;
+  readonly max: 479.98;
 }, {
-    readonly name: "md";
-    readonly min: 480;
-    readonly max: 768.98;
+  readonly name: "md";
+  readonly min: 480;
+  readonly max: 768.98;
 }, {
-    readonly name: "lg";
-    readonly min: 769;
-    readonly max: 990.98;
+  readonly name: "lg";
+  readonly min: 769;
+  readonly max: 990.98;
 }, {
-    readonly name: "xl";
-    readonly min: 991;
-    readonly max: 1280.98;
+  readonly name: "xl";
+  readonly min: 991;
+  readonly max: 1280.98;
 }, {
-    readonly name: "xxl";
-    readonly min: 1352;
-    readonly max: number;
+  readonly name: "xxl";
+  readonly min: 1352;
+  readonly max: number;
 }];
-export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
-export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
-export declare function observeBreakpoint(id: Breakpoint['id'], initialValue?: boolean): Signal<Breakpoint & {
-    matches: boolean;
+declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
+declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
+declare function observeBreakpoint(id: Breakpoint['id'], initialValue?: boolean): Signal<Breakpoint & {
+  matches: boolean;
 }>;
-export declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
-export declare function createBreakpointUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
-    matches: boolean;
+declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
+declare function createBreakpointUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
+  matches: boolean;
 }) => void): () => void;
-export {};
-//# sourceMappingURL=breakpoints.d.ts.map
+//#endregion
+export { Breakpoint, BreakpointConfig, BreakpointOperator, breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };

package/dist/lib/breakpoints.js

@@ -1,139 +1,158 @@
-import { signal, effect } from './signals.js';
-import { observeMedia } from './utils/shared-media-observer.js';
-
-const operators = ["<", "<=", ">=", ">"];
+import { effect, signal } from "./signals.js";
+import { observeMedia } from "./utils/shared-media-observer.js";
+//#region src/lib/breakpoints.ts
+const operators = [
+	"<",
+	"<=",
+	">=",
+	">"
+];
 const registeredBreakpoints = /* @__PURE__ */ new Map();
 const breakpointAttribute = "odx-breakpoint";
 const defaultBreakpoints = [
-  { name: "sm", min: 0, max: 479.98 },
-  { name: "md", min: 480, max: 768.98 },
-  { name: "lg", min: 769, max: 990.98 },
-  { name: "xl", min: 991, max: 1280.98 },
-  { name: "xxl", min: 1352, max: Number.MAX_SAFE_INTEGER }
+	{
+		name: "sm",
+		min: 0,
+		max: 479.98
+	},
+	{
+		name: "md",
+		min: 480,
+		max: 768.98
+	},
+	{
+		name: "lg",
+		min: 769,
+		max: 990.98
+	},
+	{
+		name: "xl",
+		min: 991,
+		max: 1280.98
+	},
+	{
+		name: "xxl",
+		min: 1352,
+		max: Number.MAX_SAFE_INTEGER
+	}
 ];
 function buildBreakpoint(breakpoint, operator) {
-  const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
-  let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
-  switch (operator) {
-    case "<":
-      query = `(max-width: ${breakpoint.min - 0.02}px)`;
-      break;
-    case "<=":
-      query = `(max-width: ${breakpoint.max}px)`;
-      break;
-    case ">=":
-      query = `(min-width: ${breakpoint.min}px)`;
-      break;
-    case ">":
-      query = `(min-width: ${breakpoint.max + 0.02}px)`;
-      break;
-  }
-  return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
+	const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
+	let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
+	switch (operator) {
+		case "<":
+			query = `(max-width: ${breakpoint.min - .02}px)`;
+			break;
+		case "<=":
+			query = `(max-width: ${breakpoint.max}px)`;
+			break;
+		case ">=":
+			query = `(min-width: ${breakpoint.min}px)`;
+			break;
+		case ">":
+			query = `(min-width: ${breakpoint.max + .02}px)`;
+			break;
+	}
+	return {
+		...breakpoint,
+		id,
+		operator,
+		query: [query, breakpoint.customQuery].filter(Boolean).join(" and ")
+	};
 }
 function expandBreakpoints(...breakpoints) {
-  return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
+	return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
 }
 function observeBreakpoint(id, initialValue = false) {
-  const breakpoint = registeredBreakpoints.get(id);
-  let unobserveMedia;
-  const state = signal(
-    { ...breakpoint, matches: initialValue },
-    {
-      watched() {
-        if (!breakpoint) return;
-        unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
-          state.set({ ...breakpoint, matches });
-        });
-      },
-      unwatched() {
-        unobserveMedia?.();
-        unobserveMedia = void 0;
-      }
-    }
-  );
-  return state;
+	const breakpoint = registeredBreakpoints.get(id);
+	let unobserveMedia;
+	const state = signal({
+		...breakpoint,
+		matches: initialValue
+	}, {
+		watched() {
+			if (!breakpoint) return;
+			unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
+				state.set({
+					...breakpoint,
+					matches
+				});
+			});
+		},
+		unwatched() {
+			unobserveMedia?.();
+			unobserveMedia = void 0;
+		}
+	});
+	return state;
 }
 function setupBreakpoints(breakpointsConfig = []) {
-  const breakpoints = expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig);
-  const directiveUpdater = createBreakpointUpdater(breakpoints);
-  let mutationObserver;
-  let unobserveBreakpoints = () => {
-  };
-  function initBreakpoints() {
-    destroyBreakpoints();
-    mutationObserver = new MutationObserver(directiveUpdater);
-    mutationObserver.observe(document.documentElement, {
-      attributes: true,
-      subtree: true,
-      childList: true,
-      attributeFilter: [breakpointAttribute]
-    });
-    unobserveBreakpoints = effect(directiveUpdater);
-  }
-  function destroyBreakpoints() {
-    unobserveBreakpoints();
-    mutationObserver?.disconnect();
-    globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
-  }
-  if (document.readyState === "loading") {
-    globalThis.addEventListener("DOMContentLoaded", initBreakpoints, { once: true });
-  } else {
-    initBreakpoints();
-  }
-  return destroyBreakpoints;
+	const directiveUpdater = createBreakpointUpdater(expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig));
+	let mutationObserver;
+	let unobserveBreakpoints = () => {};
+	function initBreakpoints() {
+		destroyBreakpoints();
+		mutationObserver = new MutationObserver(directiveUpdater);
+		mutationObserver.observe(document.documentElement, {
+			attributes: true,
+			subtree: true,
+			childList: true,
+			attributeFilter: [breakpointAttribute]
+		});
+		unobserveBreakpoints = effect(directiveUpdater);
+	}
+	function destroyBreakpoints() {
+		unobserveBreakpoints();
+		mutationObserver?.disconnect();
+		globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
+	}
+	if (document.readyState === "loading") globalThis.addEventListener("DOMContentLoaded", initBreakpoints, { once: true });
+	else initBreakpoints();
+	return destroyBreakpoints;
 }
 function updateHostElement(host, active) {
-  const attributeName = "data-odx-breakpoint-slot";
-  const classNames = host.getAttribute("odx-breakpoint-class");
-  if (classNames) {
-    for (const className of classNames.split(" ")) {
-      host.classList.toggle(className, active);
-    }
-    return;
-  }
-  host.hidden = !active;
-  let initialSlot = host.getAttribute(attributeName);
-  if (initialSlot == null) {
-    initialSlot = host.slot;
-    host.setAttribute(attributeName, initialSlot);
-  }
-  if (active) {
-    host.removeAttribute(attributeName);
-    if (initialSlot === "") {
-      host.removeAttribute("slot");
-      return;
-    }
-    host.slot = "";
-    host.slot = initialSlot;
-  } else {
-    host.slot = "_odx_breakpoint_hidden";
-  }
+	const attributeName = "data-odx-breakpoint-slot";
+	const classNames = host.getAttribute("odx-breakpoint-class");
+	if (classNames) {
+		for (const className of classNames.split(" ")) host.classList.toggle(className, active);
+		return;
+	}
+	host.hidden = !active;
+	let initialSlot = host.getAttribute(attributeName);
+	if (initialSlot == null) {
+		initialSlot = host.slot;
+		host.setAttribute(attributeName, initialSlot);
+	}
+	if (active) {
+		host.removeAttribute(attributeName);
+		if (initialSlot === "") {
+			host.removeAttribute("slot");
+			return;
+		}
+		host.slot = "";
+		host.slot = initialSlot;
+	} else host.slot = "_odx_breakpoint_hidden";
 }
 function createBreakpointUpdater(breakpoints, update) {
-  for (const breakpoint of breakpoints) {
-    registeredBreakpoints.set(breakpoint.id, breakpoint);
-  }
-  const breakpointCache = /* @__PURE__ */ new WeakMap();
-  const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint.id, false));
-  return () => {
-    const elements = document.querySelectorAll(`[${breakpointAttribute}]`);
-    const changes = breakpointObservers.reduce(
-      (breakpoints2, breakpoint) => {
-        breakpoints2[breakpoint.get().id] = breakpoint.get();
-        return breakpoints2;
-      },
-      {}
-    );
-    let i = elements.length;
-    while (i--) {
-      const element = elements[i];
-      const change = changes[element.getAttribute(breakpointAttribute) || ""];
-      if (!change || change.matches === breakpointCache.get(element)) continue;
-      breakpointCache.set(element, change.matches);
-      updateHostElement(element, change.matches);
-      update?.(element, change);
-    }
-  };
+	for (const breakpoint of breakpoints) registeredBreakpoints.set(breakpoint.id, breakpoint);
+	const breakpointCache = /* @__PURE__ */ new WeakMap();
+	const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint.id, false));
+	return () => {
+		const elements = document.querySelectorAll(`[${breakpointAttribute}]`);
+		const changes = breakpointObservers.reduce((breakpoints, breakpoint) => {
+			breakpoints[breakpoint.get().id] = breakpoint.get();
+			return breakpoints;
+		}, {});
+		let i = elements.length;
+		while (i--) {
+			const element = elements[i];
+			const change = changes[element.getAttribute("odx-breakpoint") || ""];
+			if (!change || change.matches === breakpointCache.get(element)) continue;
+			breakpointCache.set(element, change.matches);
+			updateHostElement(element, change.matches);
+			update?.(element, change);
+		}
+	};
 }
-
+//#endregion
 export { breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };

package/dist/lib/format.d.ts

@@ -1,58 +1,59 @@
-import { UnitIdentifier } from './models.js';
-export interface FormatOptions {
-    dateTimeFormatOptions?: DateTimeFormatOptions;
-    numberFormatOptions?: NumberFormatOptions;
-    listFormatOptions?: ListFormatOptions;
-    relativeTimeFormatOptions?: RelativeTimeFormatOptions;
+import { UnitIdentifier } from "./models.js";
+
+//#region src/lib/format.d.ts
+interface FormatOptions {
+  dateTimeFormatOptions?: DateTimeFormatOptions;
+  numberFormatOptions?: NumberFormatOptions;
+  listFormatOptions?: ListFormatOptions;
+  relativeTimeFormatOptions?: RelativeTimeFormatOptions;
 }
 interface BaseFormatOptions {
-    locale?: Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier;
+  locale?: Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier;
 }
-export interface DateTimeFormatOptions extends Omit<Intl.DateTimeFormatOptions, 'dateStyle'>, BaseFormatOptions {
-    dateStyle?: 'iso8601' | Intl.DateTimeFormatOptions['dateStyle'];
+interface DateTimeFormatOptions extends Omit<Intl.DateTimeFormatOptions, 'dateStyle'>, BaseFormatOptions {
+  dateStyle?: 'iso8601' | Intl.DateTimeFormatOptions['dateStyle'];
 }
-export declare function parseDate(value: number | string | Date): Date | null;
-export declare function formatDate(input: number | string | Date, options?: DateTimeFormatOptions): string;
-export interface NumberFormatOptions extends Intl.NumberFormatOptions, BaseFormatOptions {
-    unit?: UnitIdentifier;
+declare function parseDate(value: number | string | Date): Date | null;
+declare function formatDate(input: number | string | Date, options?: DateTimeFormatOptions): string;
+interface NumberFormatOptions extends Intl.NumberFormatOptions, BaseFormatOptions {
+  unit?: UnitIdentifier;
 }
-export declare function formatNumber(input: number | string, options?: NumberFormatOptions): string;
-export interface ListFormatOptions extends Intl.ListFormatOptions, BaseFormatOptions {
-}
-export declare function formatList(input: string[], options?: ListFormatOptions): string;
+declare function formatNumber(input: number | string, options?: NumberFormatOptions): string;
+interface ListFormatOptions extends Intl.ListFormatOptions, BaseFormatOptions {}
+declare function formatList(input: string[], options?: ListFormatOptions): string;
 declare const TIME_UNIT_MAP: {
-    readonly second: {
-        readonly max: 59000;
-        readonly value: 1000;
-    };
-    readonly minute: {
-        readonly max: 2760000;
-        readonly value: 60000;
-    };
-    readonly hour: {
-        readonly max: 72000000;
-        readonly value: 3600000;
-    };
-    readonly day: {
-        readonly max: 518400000;
-        readonly value: 86400000;
-    };
-    readonly week: {
-        readonly max: 2419200000;
-        readonly value: 604800000;
-    };
-    readonly month: {
-        readonly max: 28512000000;
-        readonly value: 2592000000;
-    };
-    readonly year: {
-        readonly max: number;
-        readonly value: 31536000000;
-    };
+  readonly second: {
+    readonly max: 59000;
+    readonly value: 1000;
+  };
+  readonly minute: {
+    readonly max: 2760000;
+    readonly value: 60000;
+  };
+  readonly hour: {
+    readonly max: 72000000;
+    readonly value: 3600000;
+  };
+  readonly day: {
+    readonly max: 518400000;
+    readonly value: 86400000;
+  };
+  readonly week: {
+    readonly max: 2419200000;
+    readonly value: 604800000;
+  };
+  readonly month: {
+    readonly max: 28512000000;
+    readonly value: 2592000000;
+  };
+  readonly year: {
+    readonly max: number;
+    readonly value: 31536000000;
+  };
 };
-export interface RelativeTimeFormatOptions extends Intl.RelativeTimeFormatOptions, BaseFormatOptions {
-    minUnit?: keyof typeof TIME_UNIT_MAP;
+interface RelativeTimeFormatOptions extends Intl.RelativeTimeFormatOptions, BaseFormatOptions {
+  minUnit?: keyof typeof TIME_UNIT_MAP;
 }
-export declare function formatRelativeTime(input: number | string | Date, options?: RelativeTimeFormatOptions): string;
-export {};
-//# sourceMappingURL=format.d.ts.map
+declare function formatRelativeTime(input: number | string | Date, options?: RelativeTimeFormatOptions): string;
+//#endregion
+export { DateTimeFormatOptions, FormatOptions, ListFormatOptions, NumberFormatOptions, RelativeTimeFormatOptions, formatDate, formatList, formatNumber, formatRelativeTime, parseDate };

package/dist/lib/format.js

@@ -1,63 +1,65 @@
+//#region src/lib/format.ts
 function parseDate(value) {
-  const createDate = (value2) => Number.isNaN(value2) ? null : new Date(value2);
-  if (value instanceof Date) {
-    return createDate(value.getTime());
-  }
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime()) && typeof value === "string") {
-    return createDate(Number(value));
-  }
-  return createDate(date.getTime());
+	const createDate = (value) => Number.isNaN(value) ? null : new Date(value);
+	if (value instanceof Date) return createDate(value.getTime());
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime()) && typeof value === "string") return createDate(Number(value));
+	return createDate(date.getTime());
 }
 function formatDate(input, options) {
-  const value = parseDate(input);
-  if (!value) return "";
-  if (options?.dateStyle === "iso8601") {
-    return new Intl.DateTimeFormat("sv-SE", { dateStyle: "short" }).format(value);
-  }
-  return new Intl.DateTimeFormat(options?.locale, options).format(value);
+	const value = parseDate(input);
+	if (!value) return "";
+	if (options?.dateStyle === "iso8601") return new Intl.DateTimeFormat("sv-SE", { dateStyle: "short" }).format(value);
+	return new Intl.DateTimeFormat(options?.locale, options).format(value);
 }
 function formatNumber(input, options) {
-  const value = Number(input);
-  if (Number.isNaN(value)) return "";
-  if (options?.currency) {
-    options.style = "currency";
-  } else if (options?.unit) {
-    options.style = "unit";
-  }
-  return new Intl.NumberFormat(options?.locale, options).format(value);
+	const value = Number(input);
+	if (Number.isNaN(value)) return "";
+	if (options?.currency) options.style = "currency";
+	else if (options?.unit) options.style = "unit";
+	return new Intl.NumberFormat(options?.locale, options).format(value);
 }
 function formatList(input, options) {
-  if (input.length === 0) return "";
-  return new Intl.ListFormat(options?.locale, options).format(input);
+	if (input.length === 0) return "";
+	return new Intl.ListFormat(options?.locale, options).format(input);
 }
 const TIME_UNIT_MAP = {
-  second: { max: 59e3, value: 1e3 },
-  // max 59 seconds
-  minute: { max: 276e4, value: 6e4 },
-  // max 46 minutes
-  hour: { max: 72e6, value: 36e5 },
-  // max 20 hours
-  day: { max: 5184e5, value: 864e5 },
-  // max 6 days
-  week: { max: 24192e5, value: 6048e5 },
-  // max 28 days
-  month: { max: 28512e6, value: 2592e6 },
-  // max 11 months
-  year: { max: Number.POSITIVE_INFINITY, value: 31536e6 }
+	second: {
+		max: 59e3,
+		value: 1e3
+	},
+	minute: {
+		max: 276e4,
+		value: 6e4
+	},
+	hour: {
+		max: 72e6,
+		value: 36e5
+	},
+	day: {
+		max: 5184e5,
+		value: 864e5
+	},
+	week: {
+		max: 24192e5,
+		value: 6048e5
+	},
+	month: {
+		max: 28512e6,
+		value: 2592e6
+	},
+	year: {
+		max: Number.POSITIVE_INFINITY,
+		value: 31536e6
+	}
 };
 function formatRelativeTime(input, options) {
-  const value = parseDate(input);
-  if (!value) return "";
-  const relativeTime = value.getTime() - Date.now();
-  const minUnit = options?.minUnit && TIME_UNIT_MAP[options.minUnit] || TIME_UNIT_MAP.second;
-  const [unit, unitConfig] = Object.entries(TIME_UNIT_MAP).find(
-    ([_, { value: value2, max }]) => Math.abs(relativeTime) < max && minUnit.value <= value2
-  );
-  return new Intl.RelativeTimeFormat(options?.locale, options).format(
-    Math.round(relativeTime / unitConfig.value),
-    unit
-  );
+	const value = parseDate(input);
+	if (!value) return "";
+	const relativeTime = value.getTime() - Date.now();
+	const minUnit = options?.minUnit && TIME_UNIT_MAP[options.minUnit] || TIME_UNIT_MAP.second;
+	const [unit, unitConfig] = Object.entries(TIME_UNIT_MAP).find(([_, { value, max }]) => Math.abs(relativeTime) < max && minUnit.value <= value);
+	return new Intl.RelativeTimeFormat(options?.locale, options).format(Math.round(relativeTime / unitConfig.value), unit);
 }
-
+//#endregion
 export { formatDate, formatList, formatNumber, formatRelativeTime, parseDate };