@cobdfamily/clf-core 7.0.1

package/dist/components/cobd-support.js

@@ -0,0 +1,296 @@
+"use strict";
+// <cobd-support [label="..."] [color="..."]
+//               [donate-url="..."]
+//               [volunteer-url="..."]
+//               [subscribe-url="..."]
+//               [share-text="..."]>
+//   <!-- optional: child <a> elements override
+//        the default action list, like cobd-nav's
+//        path="local" mode -->
+// </cobd-support>
+//
+// Drop-in "Support COBD" button. On click, opens
+// an action sheet (`<ion-action-sheet>` if Ionic
+// is on the page; native `popover` element if
+// not) with four default actions:
+//
+//   - Donate         -> donate-url (cobd.ca/donate)
+//   - Volunteer      -> volunteer-url (cobd.ca/volunteer)
+//   - Spread the word-> Web Share API (clipboard
+//                       fallback on desktop)
+//   - Stay in touch  -> subscribe-url (cobd.ca/newsletter)
+//
+// Light DOM. The "Spread the word" handler tries
+// `navigator.share()` first (which on mobile opens
+// the system share sheet); when that's missing or
+// throws (desktop / user-cancelled), it falls back
+// to copying the share text to the clipboard.
+function ionicPresent() {
+    return typeof document !== "undefined"
+        && document.querySelector("ion-app") !== null;
+}
+const BASE_STYLE_ID = "cobd-support-base-style";
+const BASE_STYLE = `
+cobd-support { display: inline-block; }
+.cobd-support-menu {
+    border: 1px solid var(--cobd-color-medium, #92949c);
+    border-radius: var(--cobd-radius-md, 8px);
+    padding: var(--cobd-spacing-xs, 4px);
+    background: var(--cobd-color-background, #fff);
+    color: var(--cobd-color-foreground, #1a1a1a);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
+    min-width: 14rem;
+    margin: 0;
+}
+.cobd-support-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--cobd-spacing-sm, 8px);
+    padding: var(--cobd-spacing-sm, 8px) var(--cobd-spacing-md, 16px);
+    color: inherit;
+    background: none;
+    border: 0;
+    border-radius: var(--cobd-radius-sm, 4px);
+    text-decoration: none;
+    font: inherit;
+    text-align: left;
+    width: 100%;
+    cursor: pointer;
+}
+.cobd-support-menu-item:hover,
+.cobd-support-menu-item:focus-visible {
+    background: var(--cobd-color-light, #f4f5f8);
+    outline: 2px solid var(--cobd-color-primary, #72cadb);
+    outline-offset: -2px;
+}
+.cobd-support-button {
+    font-family: var(--cobd-typography-family-sans,
+        system-ui, sans-serif);
+    font-size: var(--cobd-typography-size-md, 1rem);
+    font-weight: var(--cobd-typography-weight-medium, 500);
+    padding: var(--cobd-spacing-sm, 8px) var(--cobd-spacing-md, 16px);
+    border-radius: var(--cobd-radius-sm, 4px);
+    border: 0;
+    background: var(--cobd-color-primary, #72cadb);
+    color: var(--cobd-color-primary-contrast, #000);
+    cursor: pointer;
+}
+.cobd-support-button:hover {
+    background: var(--cobd-color-primary-strong,
+        var(--cobd-color-primary, #72cadb));
+}
+`;
+function ensureBaseStyle() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(BASE_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = BASE_STYLE_ID;
+    style.textContent = BASE_STYLE;
+    document.head.appendChild(style);
+}
+function readCustomActions(host) {
+    const links = Array.from(host.querySelectorAll(":scope > a"));
+    if (links.length === 0)
+        return null;
+    return links.map(a => ({
+        label: a.textContent?.trim() ?? "",
+        icon: a.getAttribute("data-icon") ?? undefined,
+        href: a.getAttribute("href") ?? undefined,
+        target: a.getAttribute("target") ?? undefined,
+    })).filter(a => a.label);
+}
+class CobdSupport extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.rendered = false;
+        this.customActions = null;
+    }
+    static get observedAttributes() {
+        return [
+            "label", "color",
+            "donate-url", "volunteer-url",
+            "subscribe-url", "share-text",
+        ];
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        if (!this.rendered) {
+            // Snapshot the child <a> tags once -- the
+            // render path replaceChildren()s the host,
+            // which would otherwise wipe them.
+            this.customActions = readCustomActions(this);
+            this.render();
+        }
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Support COBD";
+        const actions = this.customActions ?? this.defaultActions();
+        if (ionicPresent()) {
+            this.renderIonic(label, actions);
+        }
+        else {
+            this.renderPlain(label, actions);
+        }
+        this.rendered = true;
+    }
+    defaultActions() {
+        return [
+            {
+                label: "Donate",
+                icon: "heart-outline",
+                href: this.getAttribute("donate-url")
+                    ?? "https://cobd.ca/donate",
+            },
+            {
+                label: "Volunteer",
+                icon: "hand-right-outline",
+                href: this.getAttribute("volunteer-url")
+                    ?? "https://cobd.ca/volunteer",
+            },
+            {
+                label: "Spread the word",
+                icon: "share-social-outline",
+                share: true,
+            },
+            {
+                label: "Stay in touch",
+                icon: "mail-outline",
+                href: this.getAttribute("subscribe-url")
+                    ?? "https://cobd.ca/newsletter",
+            },
+        ];
+    }
+    renderIonic(label, actions) {
+        const color = this.getAttribute("color") ?? "primary";
+        const btn = document.createElement("ion-button");
+        btn.setAttribute("color", color);
+        btn.textContent = label;
+        btn.addEventListener("click", () => this.openIonicSheet(actions));
+        this.replaceChildren(btn);
+    }
+    async openIonicSheet(actions) {
+        const sheet = document.createElement("ion-action-sheet");
+        sheet.header = "Support COBD";
+        sheet.buttons = [
+            ...actions.map(a => ({
+                text: a.label,
+                icon: a.icon,
+                handler: () => { this.handleAction(a); },
+            })),
+            { text: "Cancel", role: "cancel" },
+        ];
+        document.body.appendChild(sheet);
+        sheet.addEventListener("ionActionSheetDidDismiss", () => sheet.remove());
+        if (typeof sheet.present === "function") {
+            await sheet.present();
+        }
+    }
+    renderPlain(label, actions) {
+        const id = "cobd-support-pop-"
+            + Math.random().toString(36).slice(2, 10);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "cobd-support-button";
+        btn.textContent = label;
+        btn.setAttribute("popovertarget", id);
+        btn.setAttribute("aria-haspopup", "menu");
+        const popover = document.createElement("div");
+        popover.id = id;
+        popover.setAttribute("popover", "auto");
+        popover.className = "cobd-support-menu";
+        popover.setAttribute("role", "menu");
+        popover.setAttribute("aria-label", "Support COBD");
+        for (const action of actions) {
+            popover.appendChild(this.buildPlainItem(action, popover));
+        }
+        this.replaceChildren(btn, popover);
+    }
+    buildPlainItem(action, popover) {
+        const item = action.href && !action.share
+            ? document.createElement("a")
+            : document.createElement("button");
+        item.className = "cobd-support-menu-item";
+        item.setAttribute("role", "menuitem");
+        if (item instanceof HTMLAnchorElement && action.href) {
+            item.href = action.href;
+            if (action.target)
+                item.target = action.target;
+        }
+        else if (item instanceof HTMLButtonElement) {
+            item.type = "button";
+        }
+        item.addEventListener("click", async (e) => {
+            const handled = await this.handleAction(action);
+            if (handled) {
+                // Close the popover after a handled action.
+                // ".hidePopover()" is part of the native
+                // popover API; types may not have it yet
+                // in older lib.dom.
+                popover.hidePopover?.();
+                if (!action.href)
+                    e.preventDefault();
+            }
+        });
+        if (action.icon) {
+            const ic = document.createElement("ion-icon");
+            ic.setAttribute("name", action.icon);
+            ic.setAttribute("aria-hidden", "true");
+            item.appendChild(ic);
+        }
+        item.appendChild(document.createTextNode(action.label));
+        return item;
+    }
+    async handleAction(action) {
+        if (action.share) {
+            const text = this.getAttribute("share-text")
+                ?? "The Canadian Organization of the Blind "
+                    + "and DeafBlind: https://cobd.ca/";
+            const url = "https://cobd.ca/";
+            if (typeof navigator !== "undefined"
+                && typeof navigator.share === "function") {
+                try {
+                    await navigator.share({
+                        title: "COBD",
+                        text,
+                        url,
+                    });
+                    return true;
+                }
+                catch {
+                    // User cancelled or share API rejected;
+                    // fall through to clipboard.
+                }
+            }
+            if (typeof navigator !== "undefined"
+                && navigator.clipboard) {
+                try {
+                    await navigator.clipboard.writeText(text);
+                    return true;
+                }
+                catch {
+                    return false;
+                }
+            }
+            return false;
+        }
+        if (action.href) {
+            if (action.target === "_blank") {
+                window.open(action.href, "_blank", "noopener,noreferrer");
+            }
+            else {
+                window.location.href = action.href;
+            }
+            return true;
+        }
+        return true;
+    }
+}
+if (!customElements.get("cobd-support")) {
+    customElements.define("cobd-support", CobdSupport);
+}

package/dist/components/font-scale-toggle.d.ts

@@ -0,0 +1,9 @@
+export declare class CobdFontScaleToggle extends HTMLElement {
+    private buttons;
+    private group;
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onKeyDown;
+    private render;
+}

package/dist/components/font-scale-toggle.js

@@ -0,0 +1,159 @@
+// <cobd-font-scale-toggle> -- vanilla custom element
+// that lets the user pick a text-size scale
+// (Small / Medium / Large). Persists via the runtime's
+// font-scale storage (matching the theme's choice of
+// localStorage vs cookie); applies the scale to <html>
+// as --cobd-font-scale, which the consumer's stylesheet
+// multiplies into the root font-size:
+//
+//     html {
+//         font-size: calc(100% * var(--cobd-font-scale, 1));
+//     }
+//
+// ARIA: a `role="radiogroup"` with three button-style
+// radios. Arrow keys move focus + selection; Space /
+// Enter activate.
+import { getFontScalePreference, setFontScale, onFontScaleChange, } from "../theming/runtime.js";
+const ORDER = ["sm", "md", "lg"];
+// Visible label per scale + an aria-label that names
+// the scale (the visible label is just "A" rendered at
+// the right size, so screen readers need the explicit
+// name).
+const LABEL = {
+    sm: "Small",
+    md: "Medium",
+    lg: "Large",
+};
+const SIZE = {
+    sm: "0.85em",
+    md: "1em",
+    lg: "1.2em",
+};
+const STYLE = `
+:host {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    --_border: var(--cobd-color-medium, currentColor);
+    --_active-bg:
+        var(--cobd-color-primary-tint,
+            var(--ion-color-primary-tint, #80cfdf));
+    --_active-fg:
+        var(--cobd-color-primary-contrast, #000);
+}
+[role="radiogroup"] {
+    display: inline-flex;
+    border: 1px solid var(--_border);
+    border-radius: var(--cobd-radius-md, 8px);
+    overflow: hidden;
+}
+button {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    padding: 0.4rem 0.75rem;
+    font: inherit;
+    cursor: pointer;
+    line-height: 1;
+    border-right: 1px solid var(--_border);
+}
+button:last-of-type { border-right: 0; }
+button:focus-visible {
+    outline: 2px solid var(--cobd-color-primary, currentColor);
+    outline-offset: 2px;
+}
+button[aria-checked="true"] {
+    background: var(--_active-bg);
+    color: var(--_active-fg);
+    font-weight: 600;
+}
+.glyph {
+    display: inline-block;
+    line-height: 1;
+}
+`;
+export class CobdFontScaleToggle extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.buttons = {};
+        this.cleanup = null;
+    }
+    connectedCallback() {
+        if (!this.shadowRoot) {
+            const root = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = STYLE;
+            this.group = document.createElement("div");
+            this.group.setAttribute("role", "radiogroup");
+            this.group.setAttribute("aria-label", this.getAttribute("aria-label") || "Text size");
+            for (const pref of ORDER) {
+                const btn = document.createElement("button");
+                btn.type = "button";
+                btn.setAttribute("role", "radio");
+                btn.setAttribute("aria-checked", "false");
+                btn.setAttribute("aria-label", LABEL[pref]);
+                btn.dataset.cobdScale = pref;
+                const glyph = document.createElement("span");
+                glyph.className = "glyph";
+                glyph.setAttribute("aria-hidden", "true");
+                glyph.style.fontSize = SIZE[pref];
+                glyph.textContent = "A";
+                btn.appendChild(glyph);
+                btn.addEventListener("click", () => {
+                    setFontScale(pref);
+                });
+                btn.addEventListener("keydown", e => this.onKeyDown(e, pref));
+                this.buttons[pref] = btn;
+                this.group.appendChild(btn);
+            }
+            root.appendChild(style);
+            root.appendChild(this.group);
+        }
+        this.render();
+        this.cleanup = onFontScaleChange(() => this.render());
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = null;
+    }
+    onKeyDown(e, current) {
+        let target = null;
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            const i = ORDER.indexOf(current);
+            target = ORDER[(i + 1) % ORDER.length];
+        }
+        else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            const i = ORDER.indexOf(current);
+            target = ORDER[(i - 1 + ORDER.length) % ORDER.length];
+        }
+        else if (e.key === "Home") {
+            target = ORDER[0];
+        }
+        else if (e.key === "End") {
+            target = ORDER[ORDER.length - 1];
+        }
+        if (target) {
+            e.preventDefault();
+            setFontScale(target);
+            this.buttons[target]?.focus();
+        }
+    }
+    render() {
+        const pref = getFontScalePreference();
+        for (const k of ORDER) {
+            const btn = this.buttons[k];
+            if (!btn)
+                continue;
+            const active = k === pref;
+            btn.setAttribute("aria-checked", active ? "true" : "false");
+            // Roving tabindex: only the active radio is in
+            // the tab order; arrow keys move within the
+            // group.
+            btn.tabIndex = active ? 0 : -1;
+        }
+    }
+}
+if (typeof customElements !== "undefined"
+    && !customElements.get("cobd-font-scale-toggle")) {
+    customElements.define("cobd-font-scale-toggle", CobdFontScaleToggle);
+}

package/dist/components/forms/checkbox.d.ts

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

package/dist/components/forms/checkbox.js

@@ -0,0 +1,118 @@
+// <cobd-checkbox name="..." label="..." [value="..."]
+//                [checked] [help="..."] [error="..."]
+//                [required]>
+//
+// Single checkbox. Form-associated -- when checked,
+// the form sees `name=value` on POST (where value
+// defaults to "on", matching native <input
+// type="checkbox">). When unchecked, the form sees
+// no field for `name`, also matching native.
+//
+// Renders <ion-checkbox> + label when Ionic is on,
+// plain <input type="checkbox"> + label otherwise.
+import { ionicPresent, ensureBaseStyle, readAttr, readBoolAttr, readFieldDef, buildHelp, buildError, describedByValue, } from "./common.js";
+class CobdCheckbox extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "name", "label", "value", "checked",
+            "help", "error", "required", "id",
+        ];
+    }
+    constructor() {
+        super();
+        this.rendered = false;
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        ensureBaseStyle();
+        if (!this.rendered)
+            this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.rendered)
+            this.render();
+    }
+    render() {
+        const def = readFieldDef(this, "cobd-checkbox");
+        const value = readAttr(this, "value") ?? "on";
+        const checked = readBoolAttr(this, "checked");
+        const row = document.createElement("div");
+        row.className = "cobd-field-row";
+        // Layout: checkbox sits next to the label
+        // text, not on its own line. Use a flex
+        // wrapper so the click target spans both.
+        const wrap = document.createElement("label");
+        wrap.setAttribute("for", def.id);
+        wrap.style.display = "flex";
+        wrap.style.alignItems = "center";
+        wrap.style.gap = "var(--cobd-spacing-sm, 8px)";
+        const control = ionicPresent()
+            ? this.buildIonCheckbox(def, value, checked)
+            : this.buildPlainCheckbox(def, value, checked);
+        wrap.appendChild(control);
+        const labelText = document.createElement("span");
+        labelText.textContent = def.label;
+        if (def.required) {
+            const star = document.createElement("span");
+            star.className = "cobd-required-asterisk";
+            star.setAttribute("aria-hidden", "true");
+            star.textContent = "*";
+            labelText.appendChild(star);
+            const sr = document.createElement("span");
+            sr.className = "sr-only";
+            sr.textContent = " (required)";
+            labelText.appendChild(sr);
+        }
+        wrap.appendChild(labelText);
+        row.appendChild(wrap);
+        const help = buildHelp(def);
+        if (help)
+            row.appendChild(help);
+        row.appendChild(buildError(def));
+        this.replaceChildren(row);
+        this.syncForm(checked, value);
+        this.rendered = true;
+    }
+    buildIonCheckbox(def, value, checked) {
+        const it = document.createElement("ion-checkbox");
+        it.setAttribute("id", def.id);
+        if (def.name)
+            it.setAttribute("name", def.name);
+        it.setAttribute("value", value);
+        if (checked)
+            it.setAttribute("checked", "");
+        if (def.required)
+            it.setAttribute("required", "");
+        it.setAttribute("aria-describedby", describedByValue(def));
+        it.addEventListener("ionChange", e => {
+            const isChecked = e.detail?.checked
+                ?? it.checked;
+            this.syncForm(isChecked, value);
+        });
+        return it;
+    }
+    buildPlainCheckbox(def, value, checked) {
+        const it = document.createElement("input");
+        it.type = "checkbox";
+        it.id = def.id;
+        if (def.name)
+            it.name = def.name;
+        it.value = value;
+        it.checked = checked;
+        if (def.required)
+            it.required = true;
+        it.setAttribute("aria-describedby", describedByValue(def));
+        it.addEventListener("change", () => this.syncForm(it.checked, value));
+        return it;
+    }
+    syncForm(checked, value) {
+        // Native checkbox semantics: unchecked = field
+        // not sent. setFormValue(null) achieves the
+        // same on the form-associated element side.
+        this.internals.setFormValue(checked ? value : null);
+    }
+}
+CobdCheckbox.formAssociated = true;
+if (!customElements.get("cobd-checkbox")) {
+    customElements.define("cobd-checkbox", CobdCheckbox);
+}

package/dist/components/forms/common.d.ts

@@ -0,0 +1,17 @@
+export declare function ionicPresent(): boolean;
+export declare function ensureBaseStyle(): void;
+export declare function readAttr(el: HTMLElement, name: string): string | null;
+export declare function readBoolAttr(el: HTMLElement, name: string): boolean;
+export interface FieldDef {
+    id: string;
+    name: string;
+    label: string;
+    help: string | null;
+    error: string | null;
+    required: boolean;
+}
+export declare function readFieldDef(el: HTMLElement, fallbackIdPrefix: string): FieldDef;
+export declare function buildLabel(def: FieldDef): HTMLLabelElement;
+export declare function buildHelp(def: FieldDef): HTMLElement | null;
+export declare function buildError(def: FieldDef): HTMLElement;
+export declare function describedByValue(def: FieldDef): string;