npm - @cobdfamily/clf-core - Versions diffs - 7.0.1 - Mend

@cobdfamily/clf-core 7.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/README.md +250 -0
package/dist/_variables.scss +973 -0
package/dist/components/cobd-embed.d.ts +4 -0
package/dist/components/cobd-embed.js +163 -0
package/dist/components/cobd-nav.d.ts +1 -0
package/dist/components/cobd-nav.js +383 -0
package/dist/components/cobd-support.d.ts +26 -0
package/dist/components/cobd-support.js +296 -0
package/dist/components/font-scale-toggle.d.ts +9 -0
package/dist/components/font-scale-toggle.js +159 -0
package/dist/components/forms/checkbox.d.ts +1 -0
package/dist/components/forms/checkbox.js +118 -0
package/dist/components/forms/common.d.ts +17 -0
package/dist/components/forms/common.js +137 -0
package/dist/components/forms/index.d.ts +5 -0
package/dist/components/forms/index.js +13 -0
package/dist/components/forms/select.d.ts +1 -0
package/dist/components/forms/select.js +132 -0
package/dist/components/forms/submit.d.ts +1 -0
package/dist/components/forms/submit.js +78 -0
package/dist/components/forms/textarea.d.ts +1 -0
package/dist/components/forms/textarea.js +95 -0
package/dist/components/forms/textfield.d.ts +1 -0
package/dist/components/forms/textfield.js +125 -0
package/dist/components/index.d.ts +7 -0
package/dist/components/index.js +33 -0
package/dist/components/theme-toggle.d.ts +10 -0
package/dist/components/theme-toggle.js +130 -0
package/dist/i18n/chrome.json +94 -0
package/dist/navs/cobd.ca.json +83 -0
package/dist/navs/more-cobd.json +60 -0
package/dist/navs.d.ts +27 -0
package/dist/navs.js +193 -0
package/dist/theming/font-scale-paint.d.ts +0 -0
package/dist/theming/font-scale-paint.js +32 -0
package/dist/theming/init.d.ts +1 -0
package/dist/theming/init.js +19 -0
package/dist/theming/runtime.d.ts +22 -0
package/dist/theming/runtime.js +333 -0
package/dist/tokens.css +972 -0
package/dist/tokens.json +97 -0
package/dist/tokens.scss +95 -0
package/package.json +123 -0
package/src/navs/schema.json +64 -0

package/dist/theming/runtime.js ADDED Viewed

@@ -0,0 +1,333 @@
+// CLF theming runtime. Framework-agnostic ESM.
+//
+// Writes <html data-theme="..."> to match the CSS that
+// build-tokens.mjs emits. Persists user choice via either
+// localStorage (default) or a cookie scoped to a parent
+// domain (so subdomains share a single preference).
+const ATTR = "data-theme";
+const DEFAULT_STORAGE_KEY = "cobd-theme";
+const ALL_THEMES = [
+    "light", "dark", "hc-light", "hc-dark", "auto",
+];
+const listeners = new Set();
+let mediaCleanup = null;
+function isBrowser() {
+    return typeof document !== "undefined"
+        && typeof window !== "undefined";
+}
+function isPref(v) {
+    return typeof v === "string"
+        && ALL_THEMES.includes(v);
+}
+// --- localStorage backend (default) -----------------------
+function localStorageBackend(key) {
+    function safe() {
+        try {
+            if (typeof localStorage === "undefined")
+                return null;
+            localStorage.setItem("__cobd_probe__", "1");
+            localStorage.removeItem("__cobd_probe__");
+            return localStorage;
+        }
+        catch {
+            return null;
+        }
+    }
+    return {
+        read() {
+            const v = safe()?.getItem(key);
+            return isPref(v) ? v : null;
+        },
+        write(p) {
+            const s = safe();
+            if (!s)
+                return;
+            if (p === "auto")
+                s.removeItem(key);
+            else
+                s.setItem(key, p);
+        },
+        clear() { safe()?.removeItem(key); },
+    };
+}
+// --- cookie backend (cross-subdomain) ---------------------
+function cookieBackend(name, domain, maxAgeDays) {
+    function read() {
+        if (!isBrowser())
+            return null;
+        const prefix = name + "=";
+        for (const part of document.cookie.split(";")) {
+            const p = part.trim();
+            if (p.startsWith(prefix)) {
+                const v = decodeURIComponent(p.slice(prefix.length));
+                return isPref(v) ? v : null;
+            }
+        }
+        return null;
+    }
+    function set(value) {
+        if (!isBrowser())
+            return;
+        const parts = [
+            `${name}=${value === null ? "" : encodeURIComponent(value)}`,
+            "Path=/",
+            "SameSite=Lax",
+        ];
+        if (location.protocol === "https:")
+            parts.push("Secure");
+        if (domain)
+            parts.push(`Domain=${domain}`);
+        if (value === null) {
+            parts.push("Max-Age=0");
+        }
+        else {
+            parts.push(`Max-Age=${maxAgeDays * 24 * 60 * 60}`);
+        }
+        document.cookie = parts.join("; ");
+    }
+    return {
+        read,
+        write(p) { p === "auto" ? set(null) : set(p); },
+        clear() { set(null); },
+    };
+}
+// --- Active backend (mutable so initTheming can swap it) ---
+let backend = localStorageBackend(DEFAULT_STORAGE_KEY);
+function readPref() {
+    return backend.read() ?? "auto";
+}
+function writePref(p) {
+    backend.write(p);
+}
+function osPrefersDark() {
+    if (!isBrowser())
+        return false;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+}
+function osPrefersHighContrast() {
+    if (!isBrowser())
+        return false;
+    return window.matchMedia?.("(prefers-contrast: more)").matches ?? false;
+}
+function resolve(pref) {
+    if (pref === "auto") {
+        const dark = osPrefersDark();
+        const hc = osPrefersHighContrast();
+        if (hc && dark)
+            return "hc-dark";
+        if (hc)
+            return "hc-light";
+        if (dark)
+            return "dark";
+        return "light";
+    }
+    return pref;
+}
+function apply(pref) {
+    if (!isBrowser())
+        return;
+    const resolved = resolve(pref);
+    if (pref === "auto") {
+        document.documentElement.removeAttribute(ATTR);
+    }
+    else {
+        document.documentElement.setAttribute(ATTR, resolved);
+    }
+    for (const cb of listeners) {
+        try {
+            cb(resolved);
+        }
+        catch (e) {
+            console.error("cobd theming listener", e);
+        }
+    }
+}
+function attachMediaWatcher() {
+    if (!isBrowser() || mediaCleanup)
+        return;
+    const queries = [
+        "(prefers-color-scheme: dark)",
+        "(prefers-contrast: more)",
+    ];
+    const mqs = queries
+        .map(q => window.matchMedia?.(q))
+        .filter((mq) => Boolean(mq));
+    if (mqs.length === 0)
+        return;
+    const handler = () => {
+        if (readPref() === "auto")
+            apply("auto");
+    };
+    for (const mq of mqs)
+        mq.addEventListener?.("change", handler);
+    mediaCleanup = () => {
+        for (const mq of mqs)
+            mq.removeEventListener?.("change", handler);
+    };
+}
+export function getThemes() {
+    return ALL_THEMES.slice();
+}
+export function getThemePreference() {
+    return readPref();
+}
+export function getActiveTheme() {
+    return resolve(readPref());
+}
+export function setTheme(pref) {
+    if (!ALL_THEMES.includes(pref)) {
+        throw new Error(`@cobdfamily/clf-core: unknown theme '${pref}'. `
+            + `Known: ${ALL_THEMES.join(", ")}`);
+    }
+    writePref(pref);
+    apply(pref);
+}
+export function onThemeChange(cb) {
+    listeners.add(cb);
+    return () => { listeners.delete(cb); };
+}
+export function initTheming(opts) {
+    // initTheming is intentionally idempotent: tear down any
+    // prior watcher + reset the backend, so callers can swap
+    // storage modes (or reinitialise after a hot-reload)
+    // without leaking listeners.
+    if (mediaCleanup) {
+        mediaCleanup();
+        mediaCleanup = null;
+    }
+    if (opts?.storage === "cookie") {
+        backend = cookieBackend(opts.cookieName ?? DEFAULT_STORAGE_KEY, opts.cookieDomain, opts.cookieMaxAgeDays ?? 365);
+        fontScaleBackend = makeFontScaleCookie(opts.cookieDomain, opts.cookieMaxAgeDays ?? 365);
+    }
+    else {
+        backend = localStorageBackend(opts?.cookieName ?? DEFAULT_STORAGE_KEY);
+        fontScaleBackend = makeFontScaleLocal();
+    }
+    if (!isBrowser())
+        return;
+    attachMediaWatcher();
+    apply(readPref());
+    applyFontScale(readFontScale());
+}
+const FONT_SCALES = {
+    sm: 0.9, md: 1.0, lg: 1.15,
+};
+const FONT_SCALE_ATTR = "data-cobd-font-scale";
+const FONT_SCALE_CSS_VAR = "--cobd-font-scale";
+const FONT_SCALE_STORAGE_KEY = "cobd-font-scale";
+function isFontScale(v) {
+    return typeof v === "string"
+        && (v === "sm" || v === "md" || v === "lg");
+}
+function makeFontScaleLocal() {
+    return {
+        read() {
+            try {
+                const v = localStorage.getItem(FONT_SCALE_STORAGE_KEY);
+                return isFontScale(v) ? v : null;
+            }
+            catch {
+                return null;
+            }
+        },
+        write(p) {
+            try {
+                if (p === "md") {
+                    localStorage.removeItem(FONT_SCALE_STORAGE_KEY);
+                }
+                else {
+                    localStorage.setItem(FONT_SCALE_STORAGE_KEY, p);
+                }
+            }
+            catch { /* private mode etc. */ }
+        },
+    };
+}
+function makeFontScaleCookie(domain, maxAgeDays) {
+    function read() {
+        if (!isBrowser())
+            return null;
+        const prefix = FONT_SCALE_STORAGE_KEY + "=";
+        for (const part of document.cookie.split(";")) {
+            const p = part.trim();
+            if (p.startsWith(prefix)) {
+                const v = decodeURIComponent(p.slice(prefix.length));
+                return isFontScale(v) ? v : null;
+            }
+        }
+        return null;
+    }
+    function set(value) {
+        if (!isBrowser())
+            return;
+        const parts = [
+            `${FONT_SCALE_STORAGE_KEY}=`
+                + (value === null ? "" : encodeURIComponent(value)),
+            "Path=/",
+            "SameSite=Lax",
+        ];
+        if (location.protocol === "https:")
+            parts.push("Secure");
+        if (domain)
+            parts.push(`Domain=${domain}`);
+        if (value === null) {
+            parts.push("Max-Age=0");
+        }
+        else {
+            parts.push(`Max-Age=${maxAgeDays * 24 * 60 * 60}`);
+        }
+        document.cookie = parts.join("; ");
+    }
+    return {
+        read,
+        write(p) {
+            // md is the default; clear the cookie when chosen
+            // so we don't carry empty state.
+            p === "md" ? set(null) : set(p);
+        },
+    };
+}
+// Default backend is localStorage. initTheming swaps to a
+// cookie-backed pair when the consumer asks for cookie
+// storage. Callers using set/getFontScale before
+// initTheming runs get the default.
+let fontScaleBackend = isBrowser()
+    ? makeFontScaleLocal()
+    : { read: () => null, write: () => undefined };
+function readFontScale() {
+    return fontScaleBackend.read() ?? "md";
+}
+function applyFontScale(pref) {
+    if (!isBrowser())
+        return;
+    const root = document.documentElement;
+    root.style.setProperty(FONT_SCALE_CSS_VAR, String(FONT_SCALES[pref]));
+    root.setAttribute(FONT_SCALE_ATTR, pref);
+    for (const cb of fontScaleListeners) {
+        try {
+            cb(pref);
+        }
+        catch (e) {
+            console.error("cobd font-scale listener", e);
+        }
+    }
+}
+const fontScaleListeners = new Set();
+export function getFontScales() {
+    return ["sm", "md", "lg"];
+}
+export function getFontScalePreference() {
+    return readFontScale();
+}
+export function setFontScale(pref) {
+    if (!isFontScale(pref)) {
+        throw new Error(`@cobdfamily/clf-core: unknown font-scale '${pref}'. `
+            + "Known: sm, md, lg");
+    }
+    fontScaleBackend.write(pref);
+    applyFontScale(pref);
+}
+export function onFontScaleChange(cb) {
+    fontScaleListeners.add(cb);
+    return () => { fontScaleListeners.delete(cb); };
+}