@cobdfamily/clf-core 7.0.1

package/dist/components/cobd-embed.d.ts

@@ -0,0 +1,4 @@
+declare class CobdEmbedElement extends HTMLElement {
+    connectedCallback(): void;
+}
+export { CobdEmbedElement };

package/dist/components/cobd-embed.js

@@ -0,0 +1,163 @@
+// <cobd-embed [service="https://..."]>
+//   <a href="https://target.example/...">
+//     Optional link text -- used as the iframe title
+//     and as the screen-reader fallback when JS is
+//     off.
+//   </a>
+// </cobd-embed>
+//
+// Progressive-enhancement embed. Authoring shape
+// is just an anchor; on connect, the element
+// upgrades to a sandboxed iframe pointing at the
+// embed microservice at embed.openapis.ca/v/embed.
+//
+// Why the proxy: provider embeds (YouTube IFrame
+// API, Twitter widgets.js, Bluesky, etc.) ship
+// inline scripts and load third-party resources.
+// Inlining them on the consumer page would force
+// every consumer CSP to whitelist every provider
+// origin. Instead, the proxy returns a self-
+// contained HTML doc; we iframe that doc; the
+// provider scripts run inside embed.openapis.ca's
+// origin and never touch the consumer's CSP.
+//
+// Light-DOM only. No shadow root, no slot routing.
+// The anchor stays in the DOM (visible below the
+// iframe by default) so screen-reader users can
+// always escape to the real URL -- some embeds
+// trap focus inside provider iframes badly, and
+// the explicit click-through is the seatbelt.
+//
+// Set the `service=` attribute to override the
+// default proxy URL (e.g. for COBD-internal staging
+// against a different embed deployment). Defaults
+// to https://embed.openapis.ca/v/embed.
+const DEFAULT_SERVICE = "https://embed.openapis.ca/v1/embed";
+const STYLE_ID = "cobd-embed-base-style";
+const BASE_STYLE = `
+cobd-embed {
+    display: block;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+}
+cobd-embed iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+}
+/* Hide the original anchor visually once the
+   iframe is in place, but keep it reachable in
+   the DOM (and to assistive tech via the
+   .cobd-embed-fallback link rendered below the
+   iframe). The original anchor is moved out of
+   tab order via tabindex=-1 in TS; this CSS
+   just hides it visually. */
+cobd-embed > a[hidden] {
+    display: none !important;
+}
+.cobd-embed-fallback {
+    display: block;
+    margin-top: var(--cobd-spacing-xs, 4px);
+    font-size: 0.875rem;
+    color: var(--cobd-color-link, #3a6fd1);
+}
+.cobd-embed-fallback:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+`;
+function ensureBaseStyle() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = BASE_STYLE;
+    document.head.appendChild(style);
+}
+// Hostname-only display string for the fallback
+// link's "Open at <host>". Using URL() means we
+// don't need a regex and get the parser's
+// normalisation for free (lowercased host, IDN
+// handling). Falls back to the raw URL string if
+// parsing throws -- defensive against an authoring
+// typo. We never throw out of connectedCallback.
+function hostOf(url) {
+    try {
+        return new URL(url).hostname;
+    }
+    catch {
+        return url;
+    }
+}
+class CobdEmbedElement extends HTMLElement {
+    connectedCallback() {
+        ensureBaseStyle();
+        // Bail out idempotently if we've already
+        // upgraded -- connectedCallback can fire
+        // again when the element moves in the DOM.
+        if (this.querySelector("iframe"))
+            return;
+        const anchor = this.querySelector("a[href]");
+        if (!anchor) {
+            // No authoring content to upgrade. Leave
+            // the element's contents alone so the
+            // author can iterate without a flash.
+            return;
+        }
+        const href = anchor.href;
+        if (!href)
+            return;
+        const title = (anchor.textContent || "").trim()
+            || hostOf(href);
+        const service = this.getAttribute("service")
+            || DEFAULT_SERVICE;
+        const iframe = document.createElement("iframe");
+        iframe.src = service + "?url="
+            + encodeURIComponent(href);
+        iframe.title = title;
+        iframe.loading = "lazy";
+        iframe.referrerPolicy = "no-referrer";
+        // No allow-same-origin: the proxy origin gets
+        // a unique opaque origin, so its scripts can
+        // still run (allow-scripts) and load child
+        // iframes for the provider, but can't act on
+        // cookies for embed.openapis.ca. Inner
+        // provider iframes have their own origin
+        // regardless.
+        iframe.setAttribute("sandbox", "allow-scripts allow-popups "
+            + "allow-popups-to-escape-sandbox");
+        // `allow` is the modern feature-policy
+        // surface; opt fullscreen in so video
+        // providers can present their player
+        // controls. Audio/encrypted-media are
+        // commonly needed for SoundCloud / Spotify.
+        iframe.setAttribute("allow", "fullscreen; encrypted-media; "
+            + "picture-in-picture");
+        // Hide the original anchor and pull it out
+        // of tab order. We render a parallel
+        // fallback link AFTER the iframe so the
+        // user still has a deterministic "open the
+        // real URL" anchor without competing for
+        // focus with the iframe's contents.
+        anchor.setAttribute("hidden", "");
+        anchor.setAttribute("tabindex", "-1");
+        const fallback = document.createElement("a");
+        fallback.className = "cobd-embed-fallback";
+        fallback.href = href;
+        fallback.target = "_blank";
+        fallback.rel = "noopener nofollow";
+        fallback.referrerPolicy = "no-referrer";
+        fallback.textContent = "Open at " + hostOf(href);
+        this.appendChild(iframe);
+        this.appendChild(fallback);
+    }
+}
+if (typeof customElements !== "undefined"
+    && !customElements.get("cobd-embed")) {
+    customElements.define("cobd-embed", CobdEmbedElement);
+}
+export { CobdEmbedElement };

package/dist/components/cobd-nav.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/cobd-nav.js

@@ -0,0 +1,383 @@
+// <cobd-nav path="..." aria-label="..." lines="inset">
+// -- Light-DOM custom element that renders one of the
+// COBD nav surfaces.
+//
+// `path` accepts three shapes:
+//
+//   path="local"
+//     Read the element's own <ul>/<li> children as the
+//     nav source. Server-rendered HTML works unchanged
+//     without JS. Locale labels are not supported in
+//     this mode -- the markup is the truth.
+//
+//   path="<URL>"   (has a scheme or leading /)
+//     Fetch the JSON from that URL and render it.
+//
+//   path="<slug>"  (anything else)
+//     Look the slug up via getNav() from
+//     clf-core's bundled nav data.
+//
+// Render shape depends on whether Ionic is in use on
+// the page. We detect this by looking for <ion-app>
+// in the DOM at render time (<ion-app> is present in
+// the DOM before <cobd-nav> upgrades in every Ionic
+// page, vanilla or Angular, which sidesteps the
+// custom-elements-not-yet-defined race that a
+// customElements.get("ion-list") check would hit
+// under Angular Ionic's deferred bootstrap):
+//
+//   Ionic present  -> emit <ion-list> of <ion-item>s
+//                     (or transform the local <ul>
+//                     into the same).
+//   Ionic absent   -> emit a plain <ul> of <li><a>s
+//                     in slug + URL modes; in local
+//                     mode the existing <ul> is the
+//                     source of truth, so the
+//                     element leaves it alone and
+//                     just tags the active link.
+//
+// Light DOM (no shadow root) so a surrounding
+// <ion-accordion slot="content"> still slot-routes
+// the rendered list, and so ion-* tags inside the
+// element get upgraded by the page's Ionic instance.
+//
+// Static-HTML fallback: in slug + URL modes the host
+// renders skeleton ion-items (or whatever) as child
+// content; those stay visible until the element
+// upgrades and replaces them. In local mode the
+// <ul>/<li> tree IS the source of truth -- a
+// JS-blocked page sees the same data, just as a
+// plain anchor list.
+// @ts-expect-error -- ../navs.js is generated by
+// build-navs.mjs into dist/ and has no source
+// counterpart in src/ at type-check time. At
+// runtime cobd-nav.js lives at
+// dist/components/cobd-nav.js and navs.js lives
+// at dist/navs.js, so the relative import is one
+// directory up.
+import { getNav } from "../navs.js";
+// `path="local"` is the sentinel that means "read
+// the children." URL form requires either an
+// http(s):// scheme or a leading `/` so a slug
+// like `cobd.ca` is not misread as a hostname.
+function resolveMode(path) {
+    if (path === "local")
+        return "local";
+    if (/^https?:\/\//i.test(path))
+        return "url";
+    if (path.startsWith("/"))
+        return "url";
+    return "slug";
+}
+// Sidestep the customElements-not-yet-defined race
+// under Angular by looking for <ion-app> in the DOM
+// rather than checking customElements.get("ion-list").
+// <ion-app> is present pre-bootstrap; ion-list isn't.
+function ionicPresent() {
+    return typeof document !== "undefined"
+        && document.querySelector("ion-app") !== null;
+}
+// Normalise a URL string (root-relative, absolute,
+// or with/without trailing slash) so the active-page
+// comparison works regardless of how the nav author
+// wrote the href.
+function norm(href) {
+    try {
+        const u = new URL(href, location.origin);
+        const p = u.pathname.replace(/\/$/, "") || "/";
+        return u.origin + p;
+    }
+    catch {
+        return null;
+    }
+}
+// ------------------------------------------------------------
+// Local-mode parser: <ul>/<li> -> NavItem[]
+//
+//   <li>
+//     <ion-icon name="..."></ion-icon>?         -- optional
+//     <a href="..." [target="_blank"]>Label</a> -- optional;
+//                                                  group-only
+//                                                  items omit
+//     <ul>...</ul>                              -- optional
+//                                                  submenu
+//   </li>
+//
+// Items without either an <a> or a textual label are
+// skipped. Author-supplied DOM is treated as the
+// source of truth; we do not validate against the
+// JSON nav schema (different shape, different
+// tradeoffs).
+//
+// Only used when Ionic is present -- the parsed
+// items feed buildIonList. In Ionic-absent mode we
+// leave the <ul>/<li> tree alone entirely.
+// ------------------------------------------------------------
+function parseLocalUL(ul) {
+    const out = [];
+    for (const li of Array.from(ul.children)) {
+        if (li.tagName !== "LI")
+            continue;
+        const a = li.querySelector(":scope > a");
+        const subUl = li.querySelector(":scope > ul");
+        const ionIcon = li.querySelector(":scope > ion-icon, :scope > a > ion-icon");
+        let label = "";
+        if (a) {
+            const clone = a.cloneNode(true);
+            for (const ic of Array.from(clone.querySelectorAll("ion-icon"))) {
+                ic.remove();
+            }
+            label = clone.textContent?.trim() ?? "";
+        }
+        else {
+            for (const node of Array.from(li.childNodes)) {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const t = node.textContent?.trim() ?? "";
+                    if (t) {
+                        label = t;
+                        break;
+                    }
+                }
+            }
+        }
+        if (!label)
+            continue;
+        const item = { label };
+        if (a?.getAttribute("href")) {
+            item.href = a.getAttribute("href") ?? undefined;
+        }
+        if (a?.getAttribute("target") === "_blank") {
+            item.rel = "external";
+        }
+        if (ionIcon) {
+            const name = ionIcon.getAttribute("name");
+            if (name)
+                item.icon = name;
+        }
+        if (subUl) {
+            const kids = parseLocalUL(subUl);
+            if (kids.length)
+                item.items = kids;
+        }
+        out.push(item);
+    }
+    return out;
+}
+// ------------------------------------------------------------
+// Renderer: NavItem[] -> <ion-list>  (Ionic-present)
+// ------------------------------------------------------------
+function buildIonList(items, lines, ariaLabel, here) {
+    const list = document.createElement("ion-list");
+    list.setAttribute("lines", lines);
+    if (ariaLabel)
+        list.setAttribute("aria-label", ariaLabel);
+    for (const item of items) {
+        const it = document.createElement("ion-item");
+        if (item.href)
+            it.setAttribute("href", item.href);
+        it.setAttribute("button", "");
+        it.setAttribute("detail", "true");
+        if (item.rel === "external") {
+            it.setAttribute("target", "_blank");
+        }
+        if (item.href && norm(item.href) === here) {
+            it.setAttribute("aria-current", "page");
+            it.classList.add("cobd-active-nav-item");
+        }
+        if (item.icon) {
+            const ic = document.createElement("ion-icon");
+            ic.setAttribute("slot", "start");
+            ic.setAttribute("name", item.icon);
+            ic.setAttribute("aria-hidden", "true");
+            it.appendChild(ic);
+        }
+        const lbl = document.createElement("ion-label");
+        lbl.textContent = item.label;
+        it.appendChild(lbl);
+        list.appendChild(it);
+    }
+    return list;
+}
+// ------------------------------------------------------------
+// Renderer: NavItem[] -> <ul>  (Ionic-absent)
+//
+// Plain semantic markup. <ion-icon> tags still emit;
+// they stay as inert unupgraded custom elements when
+// Ionic isn't on the page (zero-width text), and
+// consumers who DO bring ionicons separately get the
+// glyphs for free. Active link gets aria-current +
+// the .cobd-active-nav-item class on the <li>.
+// ------------------------------------------------------------
+function buildPlainUL(items, ariaLabel, here) {
+    const ul = document.createElement("ul");
+    if (ariaLabel)
+        ul.setAttribute("aria-label", ariaLabel);
+    for (const item of items) {
+        const li = document.createElement("li");
+        const isActive = !!item.href
+            && norm(item.href) === here;
+        if (isActive)
+            li.classList.add("cobd-active-nav-item");
+        if (item.href) {
+            const a = document.createElement("a");
+            a.setAttribute("href", item.href);
+            if (item.rel === "external") {
+                a.setAttribute("target", "_blank");
+                a.setAttribute("rel", "noopener noreferrer");
+            }
+            if (isActive)
+                a.setAttribute("aria-current", "page");
+            if (item.icon) {
+                const ic = document.createElement("ion-icon");
+                ic.setAttribute("name", item.icon);
+                ic.setAttribute("aria-hidden", "true");
+                a.appendChild(ic);
+            }
+            a.appendChild(document.createTextNode(item.label));
+            li.appendChild(a);
+        }
+        else {
+            li.appendChild(document.createTextNode(item.label));
+        }
+        if (item.items?.length) {
+            li.appendChild(buildPlainUL(item.items, null, here));
+        }
+        ul.appendChild(li);
+    }
+    return ul;
+}
+// ------------------------------------------------------------
+// In-place active marker for local + !ionic
+//
+// The author's <ul>/<li> tree IS the rendered output;
+// we just walk the existing anchors and stamp
+// aria-current="page" on whichever matches the
+// current page. Idempotent so re-renders are safe.
+// ------------------------------------------------------------
+function markActiveInPlace(root, here) {
+    for (const a of Array.from(root.querySelectorAll("a"))) {
+        const href = a.getAttribute("href");
+        const wasActive = a.getAttribute("aria-current") === "page";
+        const isActive = !!href && norm(href) === here;
+        if (isActive) {
+            a.setAttribute("aria-current", "page");
+            a.closest("li")?.classList.add("cobd-active-nav-item");
+        }
+        else if (wasActive) {
+            a.removeAttribute("aria-current");
+            a.closest("li")?.classList.remove("cobd-active-nav-item");
+        }
+    }
+}
+// Light-DOM elements get `display: inline` by
+// default, which would collapse the contained list
+// to zero height. Inject one global rule the first
+// time the element upgrades; idempotent so each
+// page only pays for it once.
+function ensureBaseStyle() {
+    if (typeof document === "undefined")
+        return;
+    const id = "cobd-nav-base-style";
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = "cobd-nav { display: block; }";
+    document.head.appendChild(style);
+}
+class CobdNav extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.rendered = false;
+    }
+    static get observedAttributes() {
+        return ["path", "lines", "aria-label", "locale"];
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        if (!this.rendered)
+            this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    async render() {
+        const path = this.getAttribute("path");
+        if (!path)
+            return;
+        const mode = resolveMode(path);
+        const lines = this.getAttribute("lines") ?? "inset";
+        const ariaLabel = this.getAttribute("aria-label");
+        const locale = this.getAttribute("locale") ?? undefined;
+        const useIonic = ionicPresent();
+        const here = norm(location.href);
+        // Local + !ionic: the markup IS the rendered
+        // output. Just tag active links and exit.
+        if (mode === "local" && !useIonic) {
+            markActiveInPlace(this, here);
+            this.rendered = true;
+            return;
+        }
+        let items = null;
+        try {
+            if (mode === "local") {
+                const ul = this.querySelector(":scope > ul");
+                if (!ul) {
+                    console.error("cobd-nav: path=\"local\""
+                        + " but no child <ul> found");
+                    return;
+                }
+                items = parseLocalUL(ul);
+            }
+            else if (mode === "url") {
+                const res = await fetch(path, {
+                    cache: "no-cache"
+                });
+                if (!res.ok) {
+                    throw new Error("http " + res.status);
+                }
+                const nav = await res.json();
+                items = applyLocale(nav.items, locale);
+            }
+            else {
+                const nav = getNav(path, locale);
+                items = nav.items;
+            }
+        }
+        catch (err) {
+            console.error("cobd-nav:", err);
+            return;
+        }
+        if (!items)
+            return;
+        const tree = useIonic
+            ? buildIonList(items, lines, ariaLabel, here)
+            : buildPlainUL(items, ariaLabel, here);
+        this.replaceChildren(tree);
+        this.rendered = true;
+    }
+}
+// Apply label_i18n overrides for URL mode. getNav()
+// already does this internally; here we apply the
+// same shape to remote JSON before render so the
+// two paths behave the same.
+function applyLocale(items, locale) {
+    if (!locale)
+        return items;
+    return items.map(it => {
+        const i18n = it.label_i18n;
+        const next = { ...it };
+        delete next.label_i18n;
+        if (i18n && i18n[locale]) {
+            next.label = i18n[locale];
+        }
+        if (next.items) {
+            next.items = applyLocale(next.items, locale);
+        }
+        return next;
+    });
+}
+if (!customElements.get("cobd-nav")) {
+    customElements.define("cobd-nav", CobdNav);
+}

package/dist/components/cobd-support.d.ts

@@ -0,0 +1,26 @@
+interface SupportAction {
+    label: string;
+    icon?: string;
+    href?: string;
+    target?: string;
+    share?: boolean;
+}
+declare function ionicPresent(): boolean;
+declare const BASE_STYLE_ID = "cobd-support-base-style";
+declare const BASE_STYLE = "\ncobd-support { display: inline-block; }\n.cobd-support-menu {\n    border: 1px solid var(--cobd-color-medium, #92949c);\n    border-radius: var(--cobd-radius-md, 8px);\n    padding: var(--cobd-spacing-xs, 4px);\n    background: var(--cobd-color-background, #fff);\n    color: var(--cobd-color-foreground, #1a1a1a);\n    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);\n    min-width: 14rem;\n    margin: 0;\n}\n.cobd-support-menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cobd-spacing-sm, 8px);\n    padding: var(--cobd-spacing-sm, 8px) var(--cobd-spacing-md, 16px);\n    color: inherit;\n    background: none;\n    border: 0;\n    border-radius: var(--cobd-radius-sm, 4px);\n    text-decoration: none;\n    font: inherit;\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n}\n.cobd-support-menu-item:hover,\n.cobd-support-menu-item:focus-visible {\n    background: var(--cobd-color-light, #f4f5f8);\n    outline: 2px solid var(--cobd-color-primary, #72cadb);\n    outline-offset: -2px;\n}\n.cobd-support-button {\n    font-family: var(--cobd-typography-family-sans,\n        system-ui, sans-serif);\n    font-size: var(--cobd-typography-size-md, 1rem);\n    font-weight: var(--cobd-typography-weight-medium, 500);\n    padding: var(--cobd-spacing-sm, 8px) var(--cobd-spacing-md, 16px);\n    border-radius: var(--cobd-radius-sm, 4px);\n    border: 0;\n    background: var(--cobd-color-primary, #72cadb);\n    color: var(--cobd-color-primary-contrast, #000);\n    cursor: pointer;\n}\n.cobd-support-button:hover {\n    background: var(--cobd-color-primary-strong,\n        var(--cobd-color-primary, #72cadb));\n}\n";
+declare function ensureBaseStyle(): void;
+declare function readCustomActions(host: HTMLElement): SupportAction[] | null;
+declare class CobdSupport extends HTMLElement {
+    static get observedAttributes(): string[];
+    private rendered;
+    private customActions;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+    private defaultActions;
+    private renderIonic;
+    private openIonicSheet;
+    private renderPlain;
+    private buildPlainItem;
+    private handleAction;
+}