@johnmorrisdotca/kazoku-ui 0.2.1 → 0.7.2

package/dist/save-image/format.js

@@ -0,0 +1,37 @@
+// What saving needs that is not the DOM: the formats, the file name and the size of the picture. Nothing here touches the DOM.
+export const FORMATS = ["png", "svg"];
+export const MIME = { png: "image/png", svg: "image/svg+xml" };
+/** The most a picture may be on one side, and in all: past these a canvas fails in some browsers, so the scale is lowered instead. */
+export const MAX_SIDE = 8192;
+export const MAX_PIXELS = 36_000_000;
+/** The formats of `formats="png svg"`: the known ones, once each, in the order given. Nothing usable gives `png` and `svg`. */
+export function parseFormats(value) {
+    const found = [];
+    for (const word of (value ?? "").toLowerCase().split(/[\s,]+/))
+        if (FORMATS.includes(word) && !found.includes(word))
+            found.push(word);
+    return found.length > 0 ? found : [...FORMATS];
+}
+/** Which formats a kind of target can give: an SVG both, a canvas and any other element a PNG. */
+export const formatsFor = (kind) => (kind === "svg" ? FORMATS : ["png"]);
+/** A file name that is safe on any system, with the format's extension: no path, no control or reserved characters, at most 80 characters of name. */
+export function filenameFor(name, format) {
+    const base = (name ?? "")
+        .normalize("NFC")
+        .replace(/\.(png|svg)$/i, "")
+        .replace(/[\\/:*?"<>|]+/g, "-")
+        .replace(/\p{Cc}+/gu, "-")
+        .replace(/\s+/g, " ")
+        .replace(/^[\s.-]+|[\s.-]+$/g, "")
+        .slice(0, 80)
+        .trim();
+    return `${base === "" ? "image" : base}.${format}`;
+}
+/** The pixels of a PNG of a target `width` by `height` CSS pixels at `scale`: whole pixels, and the scale lowered so that no side passes MAX_SIDE and the whole stays within MAX_PIXELS. */
+export function pixelSize(width, height, scale) {
+    const w = Math.max(1, width);
+    const h = Math.max(1, height);
+    let s = Number.isFinite(scale) && scale > 0 ? scale : 1;
+    s = Math.min(s, MAX_SIDE / w, MAX_SIDE / h, Math.sqrt(MAX_PIXELS / (w * h)));
+    return { width: Math.max(1, Math.round(w * s)), height: Math.max(1, Math.round(h * s)), scale: s };
+}

package/dist/save-image/index.d.ts

@@ -0,0 +1,6 @@
+export { filenameFor, FORMATS, formatsFor, MAX_PIXELS, MAX_SIDE, MIME, parseFormats, pixelSize, type Format, type TargetKind } from "./format.ts";
+export { downloadBlob, kindOf, renderImage, saveImage, serializeElement, serializeSvg, sizeOf, svgToPng, type Picture, type RenderImageOptions, type RenderOptions } from "./render.ts";
+export { languageOf, WORDS, wordsFor, type Language, type SaveWords } from "./words.ts";
+export declare const EVENT = "kazoku-save";
+export declare const ERROR_EVENT = "kazoku-saveerror";
+export declare const TAG = "kazoku-save-image";

package/dist/save-image/index.js

@@ -0,0 +1,8 @@
+// The save-image part without the element: the formats, the file name, the size, and the functions that turn a canvas, an SVG or an element into a picture and download it.
+// Nothing here touches the DOM until a function is called, so it imports on a server.
+export { filenameFor, FORMATS, formatsFor, MAX_PIXELS, MAX_SIDE, MIME, parseFormats, pixelSize } from "./format.js";
+export { downloadBlob, kindOf, renderImage, saveImage, serializeElement, serializeSvg, sizeOf, svgToPng } from "./render.js";
+export { languageOf, WORDS, wordsFor } from "./words.js";
+export const EVENT = "kazoku-save";
+export const ERROR_EVENT = "kazoku-saveerror";
+export const TAG = "kazoku-save-image";

package/dist/save-image/render.d.ts

@@ -0,0 +1,55 @@
+import { type Format, type TargetKind } from "./format.ts";
+/** What a target is. */
+export declare function kindOf(target: Element): TargetKind;
+/** The target's size in CSS pixels: a canvas' own, else what is drawn on the page, else an SVG's `viewBox`. */
+export declare function sizeOf(target: Element): {
+    width: number;
+    height: number;
+};
+export interface RenderOptions {
+    /** Write the computed styles into what is saved, so it looks the same away from the page's stylesheets. On by default. */
+    inlineStyles?: boolean;
+}
+/** An SVG as text that stands alone: the namespaces, a size, a `viewBox`, and (unless `inlineStyles` is false) the styles it is drawn in. */
+export declare function serializeSvg(svg: Element, options?: RenderOptions): {
+    text: string;
+    width: number;
+    height: number;
+};
+/** Any element as an SVG that draws it (a `foreignObject`), the styles written in. */
+export declare function serializeElement(element: Element, options?: RenderOptions): {
+    text: string;
+    width: number;
+    height: number;
+};
+/** SVG text as a PNG `scale` times its size. A browser that will not draw it (or whose canvas would be tainted) rejects. */
+export declare function svgToPng(text: string, width: number, height: number, scale: number, background?: string): Promise<{
+    blob: Blob;
+    width: number;
+    height: number;
+}>;
+export interface RenderImageOptions extends RenderOptions {
+    format: Format;
+    /** PNG pixels for each CSS pixel of an SVG or element. 2 by default. A canvas is saved at its own size. */
+    scale?: number;
+    /** A CSS colour painted behind a PNG; the PNG is transparent without it. */
+    background?: string;
+}
+/** What a render makes. */
+export interface Picture {
+    blob: Blob;
+    format: Format;
+    /** The picture's size: pixels for a PNG, CSS pixels for an SVG. */
+    width: number;
+    height: number;
+}
+/** The target as a picture. Rejects for a format the target cannot give (an SVG of a canvas) and when the browser cannot draw it. */
+export declare function renderImage(target: Element, options: RenderImageOptions): Promise<Picture>;
+/** Hands the blob to the browser as a download of that name. */
+export declare function downloadBlob(blob: Blob, filename: string): void;
+/** Renders the target and downloads it as `name` with the format's extension. */
+export declare function saveImage(target: Element, options: RenderImageOptions & {
+    name?: string;
+}): Promise<Picture & {
+    filename: string;
+}>;

package/dist/save-image/render.js

@@ -0,0 +1,188 @@
+// Turns a target into a picture: a canvas, an SVG or any element, as a PNG, and an SVG as an SVG. Nothing here touches the DOM until a function is called.
+//
+// A canvas is saved at its own pixel size. An SVG is serialised with the styles it is drawn in written into it, so it looks the same on its own. Any other element is drawn
+// through an SVG `foreignObject` with every computed style written in: that carries layout, colours, borders, text and inline SVG, and draws a canvas inside it as a picture.
+// What cannot come with it: web fonts (a picture made this way has only the system's fonts), `::before` and `::after`, and images that are not `data:` URLs (an <img> whose
+// pixels this page may read is converted; a cross-origin one is left out).
+import { filenameFor, MIME, pixelSize } from "./format.js";
+const SVG_NS = "http://www.w3.org/2000/svg";
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+/** What a target is. */
+export function kindOf(target) {
+    if (target.localName === "canvas")
+        return "canvas";
+    return target.localName === "svg" && target.namespaceURI === SVG_NS ? "svg" : "element";
+}
+/** The target's size in CSS pixels: a canvas' own, else what is drawn on the page, else an SVG's `viewBox`. */
+export function sizeOf(target) {
+    if (target.localName === "canvas")
+        return { width: target.width, height: target.height };
+    const box = target.getBoundingClientRect();
+    if (box.width > 0 && box.height > 0)
+        return { width: Math.ceil(box.width), height: Math.ceil(box.height) };
+    const view = (target.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/).map(Number);
+    if (view.length === 4 && view[2] > 0 && view[3] > 0)
+        return { width: view[2], height: view[3] };
+    return { width: Math.ceil(Number(target.getAttribute("width")) || 300), height: Math.ceil(Number(target.getAttribute("height")) || 150) };
+}
+/** The properties of an SVG element that its stylesheet can decide, and so must travel with it. */
+const SVG_PROPERTIES = [
+    "fill", "fill-opacity", "fill-rule", "stroke", "stroke-width", "stroke-opacity", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-dasharray", "stroke-dashoffset",
+    "opacity", "color", "font-family", "font-size", "font-weight", "font-style", "letter-spacing", "text-anchor", "dominant-baseline", "visibility", "display", "paint-order", "stop-color", "stop-opacity", "clip-rule", "mix-blend-mode",
+];
+function inline(source, copy, properties) {
+    const style = (source.ownerDocument.defaultView ?? globalThis).getComputedStyle(source);
+    const target = copy.style;
+    // `corner-*-shape` is left out: it is a default, and a browser that writes it back as the `corner` shorthand loses the radius that the other properties carry.
+    for (const name of properties ?? Array.from(style).filter((one) => !one.startsWith("corner-")))
+        target.setProperty(name, style.getPropertyValue(name));
+}
+function walk(source, copy, visit) {
+    visit(source, copy);
+    for (let i = 0; i < source.children.length; i += 1) {
+        const child = copy.children[i];
+        if (child !== undefined)
+            walk(source.children[i], child, visit);
+    }
+}
+/** An SVG as text that stands alone: the namespaces, a size, a `viewBox`, and (unless `inlineStyles` is false) the styles it is drawn in. */
+export function serializeSvg(svg, options = {}) {
+    const { width, height } = sizeOf(svg);
+    const copy = svg.cloneNode(true);
+    if (options.inlineStyles !== false)
+        walk(svg, copy, (from, to) => inline(from, to, SVG_PROPERTIES));
+    copy.setAttribute("xmlns", SVG_NS);
+    if (!copy.hasAttribute("xmlns:xlink") && /xlink:/.test(svg.outerHTML))
+        copy.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    // The size written is the size it is drawn at. Without a viewBox the size it was authored at becomes the viewBox, so a scaled drawing is not cropped.
+    if (!copy.hasAttribute("viewBox")) {
+        const own = (name) => (/^\s*[\d.]+(px)?\s*$/.test(svg.getAttribute(name) ?? "") ? parseFloat(svg.getAttribute(name)) : undefined);
+        copy.setAttribute("viewBox", `0 0 ${own("width") ?? width} ${own("height") ?? height}`);
+    }
+    copy.setAttribute("width", String(width));
+    copy.setAttribute("height", String(height));
+    return { text: new globalThis.XMLSerializer().serializeToString(copy), width, height };
+}
+/** Any element as an SVG that draws it (a `foreignObject`), the styles written in. */
+export function serializeElement(element, options = {}) {
+    const { width, height } = sizeOf(element);
+    const copy = element.cloneNode(true);
+    walk(element, copy, (from, to) => {
+        if (options.inlineStyles !== false || from === element)
+            inline(from, to, undefined);
+        if (from.localName === "canvas") {
+            const picture = from.ownerDocument.createElement("img");
+            try {
+                picture.setAttribute("src", from.toDataURL("image/png"));
+            }
+            catch {
+                /* a canvas that may not be read: left empty */
+            }
+            picture.style.width = to.style.width;
+            picture.style.height = to.style.height;
+            to.replaceWith(picture);
+        }
+        else if (from.localName === "img") {
+            const data = imageData(from);
+            if (data !== undefined)
+                to.setAttribute("src", data);
+            to.removeAttribute("srcset");
+        }
+    });
+    copy.style.margin = "0";
+    copy.style.position = "static";
+    copy.style.width = `${width}px`;
+    copy.style.height = `${height}px`;
+    copy.style.boxSizing = "border-box";
+    const html = new globalThis.XMLSerializer().serializeToString(copy);
+    const text = `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><foreignObject x="0" y="0" width="100%" height="100%">${html.includes("xmlns=") ? html : html.replace(/^<([a-zA-Z][^\s/>]*)/, `<$1 xmlns="${XHTML_NS}"`)}</foreignObject></svg>`;
+    return { text, width, height };
+}
+/** An <img>'s pixels as a `data:` URL, when this page may read them (a `data:` source already is). */
+function imageData(image) {
+    if (image.src.startsWith("data:"))
+        return image.src;
+    if (!image.complete || image.naturalWidth === 0)
+        return undefined;
+    try {
+        const canvas = image.ownerDocument.createElement("canvas");
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        canvas.getContext("2d")?.drawImage(image, 0, 0);
+        return canvas.toDataURL("image/png");
+    }
+    catch {
+        return undefined;
+    }
+}
+function toBlob(canvas) {
+    return new Promise((done, fail) => canvas.toBlob((blob) => (blob === null ? fail(new Error("the picture could not be made")) : done(blob)), MIME.png));
+}
+function paint(width, height, background) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (context === null)
+        throw new Error("a canvas is not available");
+    if (background !== undefined && background !== "") {
+        context.fillStyle = background;
+        context.fillRect(0, 0, width, height);
+    }
+    return { canvas, context };
+}
+/** SVG text as a PNG `scale` times its size. A browser that will not draw it (or whose canvas would be tainted) rejects. */
+export async function svgToPng(text, width, height, scale, background) {
+    const pixels = pixelSize(width, height, scale);
+    const image = new globalThis.Image();
+    const loaded = new Promise((done, fail) => {
+        image.onload = () => done();
+        image.onerror = () => fail(new Error("the picture could not be drawn"));
+    });
+    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`;
+    await loaded;
+    const { canvas, context } = paint(pixels.width, pixels.height, background);
+    context.drawImage(image, 0, 0, pixels.width, pixels.height);
+    return { blob: await toBlob(canvas), width: pixels.width, height: pixels.height };
+}
+/** The target as a picture. Rejects for a format the target cannot give (an SVG of a canvas) and when the browser cannot draw it. */
+export async function renderImage(target, options) {
+    const kind = kindOf(target);
+    const { format } = options;
+    if (format === "svg") {
+        if (kind !== "svg")
+            throw new Error("only an SVG can be saved as SVG");
+        const { text, width, height } = serializeSvg(target, options);
+        return { blob: new Blob([text], { type: MIME.svg }), format, width, height };
+    }
+    if (kind === "canvas") {
+        const source = target;
+        if (options.background === undefined || options.background === "")
+            return { blob: await toBlob(source), format, width: source.width, height: source.height };
+        const { canvas, context } = paint(source.width, source.height, options.background);
+        context.drawImage(source, 0, 0);
+        return { blob: await toBlob(canvas), format, width: source.width, height: source.height };
+    }
+    const made = kind === "svg" ? serializeSvg(target, options) : serializeElement(target, options);
+    const png = await svgToPng(made.text, made.width, made.height, options.scale ?? 2, options.background);
+    return { blob: png.blob, format, width: png.width, height: png.height };
+}
+/** Hands the blob to the browser as a download of that name. */
+export function downloadBlob(blob, filename) {
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.href = url;
+    link.download = filename;
+    link.rel = "noopener";
+    document.body.append(link);
+    link.click();
+    link.remove();
+    globalThis.setTimeout(() => URL.revokeObjectURL(url), 4000);
+}
+/** Renders the target and downloads it as `name` with the format's extension. */
+export async function saveImage(target, options) {
+    const picture = await renderImage(target, options);
+    const filename = filenameFor(options.name, options.format);
+    downloadBlob(picture.blob, filename);
+    return { ...picture, filename };
+}

package/dist/save-image/styles.d.ts

@@ -0,0 +1 @@
+export declare const STYLES = "\n:host {\n  --_ink: var(--kazoku-ink, #1b1b1f);\n  --_surface: var(--kazoku-surface, #ffffff);\n  --_line: var(--kazoku-line, #c9ccd3);\n  --_accent: var(--kazoku-accent, #2457d6);\n  display: inline-block;\n  box-sizing: border-box;\n  color: var(--_ink);\n  font: 600 0.9rem/1.2 system-ui, -apple-system, \"Hiragino Sans\", \"Noto Sans JP\", \"Segoe UI\", sans-serif;\n  color-scheme: light dark;\n}\n@media (prefers-color-scheme: dark) {\n  :host(:not([theme=\"light\"]):not([data-scheme=\"light\"])) {\n    --_ink: var(--kazoku-ink, #f1f2f6);\n    --_surface: var(--kazoku-surface, #1c1d22);\n    --_line: var(--kazoku-line, #4a4d58);\n    --_accent: var(--kazoku-accent, #8fb0ff);\n  }\n}\n:host([theme=\"dark\"]), :host([data-scheme=\"dark\"]:not([theme=\"light\"])) {\n  --_ink: var(--kazoku-ink, #f1f2f6);\n  --_surface: var(--kazoku-surface, #1c1d22);\n  --_line: var(--kazoku-line, #4a4d58);\n  --_accent: var(--kazoku-accent, #8fb0ff);\n  color-scheme: dark;\n}\n:host([theme=\"light\"]) { color-scheme: light; }\n[hidden] { display: none !important; }\n.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }\nbutton { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--_line); border-radius: 24px; background: var(--_surface); color: var(--_ink); font: inherit; cursor: pointer; white-space: nowrap; }\nbutton:hover:not(:disabled) { border-color: var(--_ink); }\nbutton:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: var(--_ink); color: var(--_surface); border-color: var(--_ink); }\nbutton:disabled { opacity: 0.4; cursor: default; }\nsvg { width: 18px; height: 18px; fill: currentColor; flex: none; }\n\nbutton[aria-busy=\"true\"] { opacity: 0.6; cursor: progress; }\n@media (max-width: 640px) {\n  .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  button { padding: 0; }\n}\n";

package/dist/save-image/styles.js

@@ -0,0 +1,9 @@
+import { BASE_STYLES } from "../shared/base.js";
+// A button for each format, with a download arrow. On a phone the words are left to a screen reader.
+export const STYLES = `${BASE_STYLES}
+button[aria-busy="true"] { opacity: 0.6; cursor: progress; }
+@media (max-width: 640px) {
+  .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  button { padding: 0; }
+}
+`;

package/dist/save-image/words.d.ts

@@ -0,0 +1,12 @@
+export interface SaveWords {
+    group: string;
+    png: string;
+    svg: string;
+    saved: string;
+    failed: string;
+}
+export type Language = "en" | "ja";
+export declare const WORDS: Record<Language, SaveWords>;
+/** The language to use for a `lang` value such as "ja", "ja-JP" or "en-CA": Japanese for ja, English for anything else. */
+export declare const languageOf: (lang: string | null | undefined) => Language;
+export declare const wordsFor: (language: Language, overrides?: Partial<SaveWords>) => SaveWords;

package/dist/save-image/words.js

@@ -0,0 +1,7 @@
+export const WORDS = {
+    en: { group: "Save image", png: "Save PNG", svg: "Save SVG", saved: "Saved", failed: "Could not save" },
+    ja: { group: "画像を保存", png: "PNGで保存", svg: "SVGで保存", saved: "保存しました", failed: "保存できませんでした" },
+};
+/** The language to use for a `lang` value such as "ja", "ja-JP" or "en-CA": Japanese for ja, English for anything else. */
+export const languageOf = (lang) => (/^ja\b/i.test(lang ?? "") ? "ja" : "en");
+export const wordsFor = (language, overrides = {}) => ({ ...WORDS[language], ...overrides });

package/dist/shared/adopt.d.ts

@@ -0,0 +1,4 @@
+/** True when this browser can adopt a constructable stylesheet into a shadow root. */
+export declare function canAdopt(root: ShadowRoot): boolean;
+/** Adds `css` to `root`: as an adopted stylesheet where there is one (one sheet, shared by every element with the same text), else as a `<style>` carrying `nonce`. */
+export declare function adoptStyles(root: ShadowRoot, css: string, nonce?: string): void;

package/dist/shared/adopt.js

@@ -0,0 +1,34 @@
+// Puts an element's styles into its shadow root in a way a strict Content-Security-Policy allows.
+//
+// A `<style>` written into a shadow root is inline style, which `style-src 'self'` blocks. A constructable stylesheet handed to `adoptedStyleSheets` is not inline
+// markup and needs no allowance, so it is used wherever the browser has it. Where it does not (older browsers), the same text goes into a `<style>` element, and a
+// page with a strict `style-src` allows that one with a nonce: the element's `nonce` is copied onto the `<style>`.
+const sheets = new Map();
+/** True when this browser can adopt a constructable stylesheet into a shadow root. */
+export function canAdopt(root) {
+    return typeof CSSStyleSheet === "function" && "replaceSync" in CSSStyleSheet.prototype && "adoptedStyleSheets" in root;
+}
+/** Adds `css` to `root`: as an adopted stylesheet where there is one (one sheet, shared by every element with the same text), else as a `<style>` carrying `nonce`. */
+export function adoptStyles(root, css, nonce = "") {
+    if (canAdopt(root)) {
+        try {
+            let sheet = sheets.get(css);
+            if (sheet === undefined) {
+                sheet = new CSSStyleSheet();
+                sheet.replaceSync(css);
+                sheets.set(css, sheet);
+            }
+            if (!root.adoptedStyleSheets.includes(sheet))
+                root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+            return;
+        }
+        catch {
+            /* a browser that has the API and refuses it: the <style> below */
+        }
+    }
+    const style = (root.ownerDocument ?? document).createElement("style");
+    if (nonce !== "")
+        style.setAttribute("nonce", nonce);
+    style.textContent = css;
+    root.prepend(style);
+}

package/dist/shared/base.d.ts

@@ -0,0 +1 @@
+export declare const BASE_STYLES = "\n:host {\n  --_ink: var(--kazoku-ink, #1b1b1f);\n  --_surface: var(--kazoku-surface, #ffffff);\n  --_line: var(--kazoku-line, #c9ccd3);\n  --_accent: var(--kazoku-accent, #2457d6);\n  display: inline-block;\n  box-sizing: border-box;\n  color: var(--_ink);\n  font: 600 0.9rem/1.2 system-ui, -apple-system, \"Hiragino Sans\", \"Noto Sans JP\", \"Segoe UI\", sans-serif;\n  color-scheme: light dark;\n}\n@media (prefers-color-scheme: dark) {\n  :host(:not([theme=\"light\"]):not([data-scheme=\"light\"])) {\n    --_ink: var(--kazoku-ink, #f1f2f6);\n    --_surface: var(--kazoku-surface, #1c1d22);\n    --_line: var(--kazoku-line, #4a4d58);\n    --_accent: var(--kazoku-accent, #8fb0ff);\n  }\n}\n:host([theme=\"dark\"]), :host([data-scheme=\"dark\"]:not([theme=\"light\"])) {\n  --_ink: var(--kazoku-ink, #f1f2f6);\n  --_surface: var(--kazoku-surface, #1c1d22);\n  --_line: var(--kazoku-line, #4a4d58);\n  --_accent: var(--kazoku-accent, #8fb0ff);\n  color-scheme: dark;\n}\n:host([theme=\"light\"]) { color-scheme: light; }\n[hidden] { display: none !important; }\n.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }\nbutton { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--_line); border-radius: 24px; background: var(--_surface); color: var(--_ink); font: inherit; cursor: pointer; white-space: nowrap; }\nbutton:hover:not(:disabled) { border-color: var(--_ink); }\nbutton:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: var(--_ink); color: var(--_surface); border-color: var(--_ink); }\nbutton:disabled { opacity: 0.4; cursor: default; }\nsvg { width: 18px; height: 18px; fill: currentColor; flex: none; }\n";

package/dist/shared/base.js

@@ -0,0 +1,40 @@
+// What every part's styles start from: the colours as custom properties on the host (--kazoku-ink, --kazoku-surface, --kazoku-line, --kazoku-accent), light and dark
+// (`data-scheme`, which `watchScheme` keeps, or `theme="light|dark"` set by the page), the 48 px button and the focus ring.
+export const BASE_STYLES = `
+:host {
+  --_ink: var(--kazoku-ink, #1b1b1f);
+  --_surface: var(--kazoku-surface, #ffffff);
+  --_line: var(--kazoku-line, #c9ccd3);
+  --_accent: var(--kazoku-accent, #2457d6);
+  display: inline-block;
+  box-sizing: border-box;
+  color: var(--_ink);
+  font: 600 0.9rem/1.2 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([theme="light"]):not([data-scheme="light"])) {
+    --_ink: var(--kazoku-ink, #f1f2f6);
+    --_surface: var(--kazoku-surface, #1c1d22);
+    --_line: var(--kazoku-line, #4a4d58);
+    --_accent: var(--kazoku-accent, #8fb0ff);
+  }
+}
+:host([theme="dark"]), :host([data-scheme="dark"]:not([theme="light"])) {
+  --_ink: var(--kazoku-ink, #f1f2f6);
+  --_surface: var(--kazoku-surface, #1c1d22);
+  --_line: var(--kazoku-line, #4a4d58);
+  --_accent: var(--kazoku-accent, #8fb0ff);
+  color-scheme: dark;
+}
+:host([theme="light"]) { color-scheme: light; }
+[hidden] { display: none !important; }
+.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+button { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--_line); border-radius: 24px; background: var(--_surface); color: var(--_ink); font: inherit; cursor: pointer; white-space: nowrap; }
+button:hover:not(:disabled) { border-color: var(--_ink); }
+button:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }
+button[aria-pressed="true"] { background: var(--_ink); color: var(--_surface); border-color: var(--_ink); }
+button:disabled { opacity: 0.4; cursor: default; }
+svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
+`;

package/dist/shared/scheme.d.ts

@@ -0,0 +1 @@
+export declare function watchScheme(host: HTMLElement): () => void;

package/dist/shared/scheme.js

@@ -0,0 +1,19 @@
+// Keeps `data-scheme="light|dark"` on an element the same as the colours the page is in: the page's forced theme (`data-theme` on <html>) or else the device's.
+// An element's styles read that attribute, so it is dark in a page that forced dark on a light device. It cannot use `:host-context`, which Firefox and Safari lack.
+export function watchScheme(host) {
+    const root = host.ownerDocument.documentElement;
+    const media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+    const update = () => {
+        const forced = root.getAttribute("data-theme");
+        const dark = forced === "dark" || (forced !== "light" && media?.matches === true);
+        host.setAttribute("data-scheme", dark ? "dark" : "light");
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    media?.addEventListener("change", update);
+    return () => {
+        observer.disconnect();
+        media?.removeEventListener("change", update);
+    };
+}

package/dist/shared/store.d.ts

@@ -0,0 +1,2 @@
+export declare function localStore(): Storage | undefined;
+export declare function remember(key: string, value: string): void;

package/dist/shared/store.js

@@ -0,0 +1,17 @@
+// localStorage, for a choice a page wants to keep on the device. Every use is in a try/catch: a browser that keeps nothing (a private window, blocked site data, a sandboxed frame) is the same as an empty store.
+export function localStore() {
+    try {
+        return globalThis.localStorage;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function remember(key, value) {
+    try {
+        localStore()?.setItem(key, value);
+    }
+    catch {
+        /* not remembered; the choice still holds for this page */
+    }
+}

package/dist/shared/target.d.ts

@@ -0,0 +1,2 @@
+/** The element a part writes to, from a CSS selector: found in the part's own tree first (so it works inside a shadow root), then in the document. No selector is the page's <html>. A selector that matches nothing, or is not one, is `undefined`. */
+export declare function resolveTarget(host: HTMLElement, selector: string | null): Element | undefined;

package/dist/shared/target.js

@@ -0,0 +1,11 @@
+/** The element a part writes to, from a CSS selector: found in the part's own tree first (so it works inside a shadow root), then in the document. No selector is the page's <html>. A selector that matches nothing, or is not one, is `undefined`. */
+export function resolveTarget(host, selector) {
+    if (selector === null || selector === "")
+        return host.ownerDocument.documentElement;
+    try {
+        return host.getRootNode().querySelector(selector) ?? host.ownerDocument.querySelector(selector) ?? undefined;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/theme-switch/define.d.ts

@@ -0,0 +1 @@
+export declare function defineThemeSwitch(registry?: CustomElementRegistry): boolean;

package/dist/theme-switch/define.js

@@ -0,0 +1,9 @@
+// Importing this registers <kazoku-theme-switch>, unless the tag is already taken (the first definition wins; see view-controls/define.ts for why a taken tag is left alone).
+import { TAG, ThemeSwitchElement } from "./element.js";
+export function defineThemeSwitch(registry = customElements) {
+    if (registry.get(TAG) !== undefined)
+        return false;
+    registry.define(TAG, ThemeSwitchElement);
+    return true;
+}
+defineThemeSwitch();

package/dist/theme-switch/element.d.ts

@@ -0,0 +1,39 @@
+import { EVENT, TAG } from "./index.ts";
+import { type Scheme, type Theme } from "./theme.ts";
+import { type ThemeWords } from "./words.ts";
+export { EVENT, TAG };
+/** What the `kazoku-themechange` event carries in `detail`. */
+export interface ThemeChangeDetail {
+    /** What the reader chose: `light`, `dark` or `auto`. */
+    choice: Theme;
+    /** The colours now showing: `light` or `dark`. Auto is the device's. */
+    scheme: Scheme;
+    /** `init`, `user` (a button), `set` (the `value` property or attribute), `system` (the device changed under Auto) or `external` (something else wrote the target's `data-theme`). */
+    reason: "init" | "user" | "set" | "system" | "external";
+    /** The element the choice is written on. */
+    target: Element;
+}
+/**
+ * Attributes: `value` (`light`, `dark` or `auto`; the choice), `target` (a CSS selector for the element that gets `data-theme`; the page's <html> by default),
+ * `modes` (which buttons: `light dark` leaves Auto out), `address` (keep the choice in `?theme=`, or the key `address-key` names), `storage` (also remember it in
+ * localStorage under that key; a bare `storage` uses `kazoku-theme`), `lang` (`en` or `ja`), `theme` (`light` or `dark`: its own look, otherwise the page's).
+ * The choice is read, in this order, from the address, the store, `value`, then what the target already holds.
+ */
+export declare class ThemeSwitchElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    /** The choice now: `light`, `dark` or `auto`. Setting it applies it (event reason `set`). */
+    get value(): Theme;
+    set value(next: string);
+    /** The colours showing now: `light` or `dark`. */
+    get scheme(): Scheme;
+    /** The element the choice is written on. */
+    get target(): Element | undefined;
+    set target(element: Element | undefined);
+    /** Your own labels over the language's, for example `{ auto: "System" }`. */
+    set words(words: Partial<ThemeWords>);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+}