zabi-components 8.0.0 → 9.0.0

package/dist/util/stepper.d.ts

@@ -0,0 +1,39 @@
+/** Types and pure helpers for `Stepper`. Kept out of the component so they can be tested without a DOM. */
+/** One step: a label, and optionally a line under it. A plain string is a step with only a label. */
+export interface StepperStep {
+    label: string;
+    /** A short line under the label in the full layout, and under the current step's name in the compact one. */
+    description?: string;
+}
+/** A step as the `steps` prop takes it. */
+export type StepperItem = string | StepperStep;
+/** Where a step is in the flow. */
+export type StepperStepState = "completed" | "current" | "upcoming";
+export type StepperLayout = "auto" | "full" | "compact";
+/**
+ * Every built-in string. Pass a partial object to `strings` to translate.
+ * `step` is counted from 1 in all of them.
+ */
+export interface StepperStrings {
+    /** The visible start of the compact line: "Step 2 of 3". */
+    position: (step: number, total: number) => string;
+    /**
+     * What a screen reader reads for a step, and the name of its button when
+     * the step is one: "Step 1 of 3: Details, completed".
+     */
+    stepLabel: (step: number, total: number, label: string, state: StepperStepState) => string;
+    /** Read out, politely, when the current step changes: "Step 2 of 3: Ratings". */
+    announcement: (step: number, total: number, label: string) => string;
+}
+export declare const STEPPER_STRINGS: StepperStrings;
+/** Strings and objects alike, as objects. */
+export declare function normalizeSteps(steps: readonly StepperItem[] | null | undefined): StepperStep[];
+/**
+ * The index of the step that is shown as current: `current` as a whole number
+ * held within the steps. Below the first step it is the first, past the last
+ * it is the last, and something that is not a number is the first. `-1` when
+ * there are no steps.
+ */
+export declare function clampStep(current: number | null | undefined, total: number): number;
+/** The state of the step at `index` when the step at `current` is the current one. */
+export declare function stepState(index: number, current: number): StepperStepState;

package/dist/util/stepper.js

@@ -0,0 +1,38 @@
+/** Types and pure helpers for `Stepper`. Kept out of the component so they can be tested without a DOM. */
+const STATE_WORDS = {
+    completed: "completed",
+    current: "current",
+    upcoming: "upcoming",
+};
+export const STEPPER_STRINGS = {
+    position: (step, total) => `Step ${step} of ${total}`,
+    stepLabel: (step, total, label, state) => `Step ${step} of ${total}: ${label}, ${STATE_WORDS[state]}`,
+    announcement: (step, total, label) => `Step ${step} of ${total}: ${label}`,
+};
+/** Strings and objects alike, as objects. */
+export function normalizeSteps(steps) {
+    return (steps ?? []).map((step) => (typeof step === "string" ? { label: step } : step));
+}
+/**
+ * The index of the step that is shown as current: `current` as a whole number
+ * held within the steps. Below the first step it is the first, past the last
+ * it is the last, and something that is not a number is the first. `-1` when
+ * there are no steps.
+ */
+export function clampStep(current, total) {
+    if (total <= 0)
+        return -1;
+    if (current === null || current === undefined || Number.isNaN(current))
+        return 0;
+    if (current === Infinity)
+        return total - 1;
+    if (current === -Infinity)
+        return 0;
+    return Math.max(0, Math.min(total - 1, Math.trunc(current)));
+}
+/** The state of the step at `index` when the step at `current` is the current one. */
+export function stepState(index, current) {
+    if (index < current)
+        return "completed";
+    return index === current ? "current" : "upcoming";
+}

package/dist/util/swipeable-list-item.d.ts

@@ -0,0 +1,35 @@
+import type { Component } from "svelte";
+/** Public types and shared state for `SwipeableListItem`. */
+/** One action behind a row, such as Delete. */
+export interface SwipeableListItemAction {
+    id: string;
+    /** The button's text, and its accessible name. */
+    label: string;
+    /** Drawn above the label. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    /** `danger` for an action that destroys something. */
+    tone?: "default" | "danger";
+    /** Runs when the button is pressed. The row closes afterwards. */
+    onselect: () => void;
+}
+/** The words a `SwipeableListItem` says by itself. */
+export interface SwipeableListItemStrings {
+    /** Accessible name of the button that opens the row's actions, and of the group they are in. */
+    actions: string;
+}
+export declare const DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS: SwipeableListItemStrings;
+/**
+ * Says that a row has opened: every other open row in the same list closes.
+ * Returns what to call when this row closes or goes away.
+ */
+export declare function registerOpenRow(root: HTMLElement, close: () => void): () => void;
+/**
+ * Where a swipe ends: open or closed. A flick decides by its direction,
+ * whatever the distance; otherwise the row goes to whichever is nearer.
+ * `revealed` and `width` are px of the actions; `velocity` is px per ms,
+ * positive towards revealing.
+ */
+export declare function settleSwipe(revealed: number, width: number, velocity: number, flick: number): boolean;

package/dist/util/swipeable-list-item.js

@@ -0,0 +1,32 @@
+export const DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS = {
+    actions: "Actions",
+};
+/** What groups rows: the nearest list around a row. Rows with none are each on their own. */
+const LIST = 'ul, ol, [role="list"], [role="listbox"]';
+/** The rows that are open now. */
+const openRows = new Set();
+/**
+ * Says that a row has opened: every other open row in the same list closes.
+ * Returns what to call when this row closes or goes away.
+ */
+export function registerOpenRow(root, close) {
+    const list = root.closest(LIST);
+    for (const other of [...openRows]) {
+        if (other.root !== root && list && other.root.closest(LIST) === list)
+            other.close();
+    }
+    const entry = { root, close };
+    openRows.add(entry);
+    return () => openRows.delete(entry);
+}
+/**
+ * Where a swipe ends: open or closed. A flick decides by its direction,
+ * whatever the distance; otherwise the row goes to whichever is nearer.
+ * `revealed` and `width` are px of the actions; `velocity` is px per ms,
+ * positive towards revealing.
+ */
+export function settleSwipe(revealed, width, velocity, flick) {
+    if (Math.abs(velocity) > flick)
+        return velocity > 0;
+    return revealed > width / 2;
+}

package/dist/util/temporal-field.d.ts

@@ -0,0 +1,88 @@
+/**
+ * What DateField and TimeField share once they are given a `locale`: the
+ * words, and the pure parts of the time picker (which hours and minutes
+ * there are, which are outside `min` and `max`).
+ */
+/** The words DateField says when it has a `locale`. Replace any of them to translate. */
+export interface DateFieldStrings {
+    /** The sheet's action that empties the field. Shown while the field has a value and is not `required`. */
+    clear: string;
+    /** The sheet's name when the field has no label. */
+    chooseDate: string;
+}
+export declare const DATE_FIELD_STRINGS: DateFieldStrings;
+/** The words TimeField says when it has a `locale`. Replace any of them to translate. */
+export interface TimeFieldStrings {
+    /** The sheet's action that empties the field. Shown while the field has a value and is not `required`. */
+    clear: string;
+    /** The sheet's action that sets the chosen time and closes it. */
+    done: string;
+    /** Accessible name of the column of hours. */
+    hours: string;
+    /** Accessible name of the column of minutes. */
+    minutes: string;
+    /** The sheet's words beside Done for the time Done will set: "Chosen time 18:00". */
+    chosenTime: string;
+    /** The sheet's name when the field has no label. */
+    chooseTime: string;
+}
+export declare const TIME_FIELD_STRINGS: TimeFieldStrings;
+/** Whether a `locale` was given: a tag, or a list with at least one. */
+export declare function hasLocale(locale: string | string[] | undefined | null): boolean;
+/** The minutes between choices when the app says nothing: five. */
+export declare const DEFAULT_MINUTE_STEP = 5;
+/**
+ * Whether the library's time picker can serve this `step`. It has hours and
+ * minutes only, so a step in seconds (under 60) or `"any"` is left to the
+ * platform's own picker.
+ */
+export declare function stepFitsLibraryPicker(step: number | "any" | undefined): boolean;
+/** `step` (in seconds) as whole minutes between choices; five without one. */
+export declare function minuteStep(step: number | "any" | undefined): number;
+/** `"19:30"` (or `"19:30:15"`) as [19, 30]; null for anything else. */
+export declare function parseHourMinute(value: string | null | undefined): [number, number] | null;
+/**
+ * The time an empty field's columns stand at: `openAt`, else `now` (an
+ * hour and a minute), kept within `min` and `max` and on the minute step.
+ * Only a place to scroll to; nothing is chosen. Two-digit strings, as the
+ * columns' option values.
+ */
+export declare function openingTime(options: {
+    openAt?: string;
+    now: [number, number];
+    stepMinutes: number;
+    min?: string;
+    max?: string;
+}): [string, string];
+/**
+ * Whether a time is within `min` and `max`, either of which may be missing.
+ * Like the native input, a `min` later than `max` is a range over midnight:
+ * 22:00 to 06:00 allows 23:30 and 05:00.
+ */
+export declare function timeInRange(hour: number, minute: number, min?: string, max?: string): boolean;
+export interface TimeChoice {
+    /** Two digits: `"07"`. */
+    value: string;
+    label: string;
+    disabled: boolean;
+}
+/** The hour as the locale writes it: "19" in Swedish, "7 PM" in American English. */
+export declare function hourLabel(hour: number, locale: string | string[] | undefined): string;
+/** The minute as two digits, in the locale's own numerals. */
+export declare function minuteLabel(minute: number, locale: string | string[] | undefined): string;
+/** The 24 hours. An hour is disabled when no time in it is within `min` and `max`. */
+export declare function hourChoices(locale: string | string[] | undefined, min?: string, max?: string): TimeChoice[];
+/**
+ * The minutes of one hour: every `stepMinutes`, plus the minute of `current`
+ * when it is not on the step, so a value such as 19:07 can be kept. A minute
+ * is disabled when the time is outside `min` and `max`; with no hour chosen
+ * none is.
+ */
+export declare function minuteChoices(options: {
+    locale: string | string[] | undefined;
+    stepMinutes: number;
+    hour: string;
+    current?: string;
+    min?: string;
+    max?: string;
+}): TimeChoice[];

package/dist/util/temporal-field.js

@@ -0,0 +1,136 @@
+/**
+ * What DateField and TimeField share once they are given a `locale`: the
+ * words, and the pure parts of the time picker (which hours and minutes
+ * there are, which are outside `min` and `max`).
+ */
+import { formatTime } from "./date.js";
+export const DATE_FIELD_STRINGS = {
+    clear: "Clear",
+    chooseDate: "Choose date",
+};
+export const TIME_FIELD_STRINGS = {
+    clear: "Clear",
+    done: "Done",
+    hours: "Hours",
+    minutes: "Minutes",
+    chosenTime: "Chosen time",
+    chooseTime: "Choose time",
+};
+/** Whether a `locale` was given: a tag, or a list with at least one. */
+export function hasLocale(locale) {
+    return Array.isArray(locale) ? locale.length > 0 : !!locale;
+}
+/** The minutes between choices when the app says nothing: five. */
+export const DEFAULT_MINUTE_STEP = 5;
+/**
+ * Whether the library's time picker can serve this `step`. It has hours and
+ * minutes only, so a step in seconds (under 60) or `"any"` is left to the
+ * platform's own picker.
+ */
+export function stepFitsLibraryPicker(step) {
+    if (step === undefined)
+        return true;
+    return typeof step === "number" && Number.isFinite(step) && step >= 60;
+}
+/** `step` (in seconds) as whole minutes between choices; five without one. */
+export function minuteStep(step) {
+    if (typeof step === "number" && Number.isFinite(step) && step >= 60)
+        return Math.round(step / 60);
+    return DEFAULT_MINUTE_STEP;
+}
+const pad2 = (value) => String(value).padStart(2, "0");
+/** `"19:30"` (or `"19:30:15"`) as [19, 30]; null for anything else. */
+export function parseHourMinute(value) {
+    const match = /^(\d{2}):(\d{2})(?::\d{2}(?:\.\d+)?)?$/.exec(value ?? "");
+    if (!match)
+        return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    return hour > 23 || minute > 59 ? null : [hour, minute];
+}
+/**
+ * The time an empty field's columns stand at: `openAt`, else `now` (an
+ * hour and a minute), kept within `min` and `max` and on the minute step.
+ * Only a place to scroll to; nothing is chosen. Two-digit strings, as the
+ * columns' option values.
+ */
+export function openingTime(options) {
+    const { openAt, now, stepMinutes, min, max } = options;
+    const [hour, minute] = parseHourMinute(openAt) ?? now;
+    let at = hour * 60 + minute;
+    const lower = parseHourMinute(min);
+    const upper = parseHourMinute(max);
+    const from = lower ? lower[0] * 60 + lower[1] : null;
+    const to = upper ? upper[0] * 60 + upper[1] : null;
+    const inRange = (value) => timeInRange(Math.floor(value / 60) % 24, value % 60, min, max);
+    if (!inRange(at)) {
+        const overMidnight = from !== null && to !== null && from > to;
+        at = from !== null && (overMidnight || at < from) ? from : (to ?? at);
+    }
+    const floored = Math.floor(at / stepMinutes) * stepMinutes;
+    const stepped = inRange(floored) ? floored : Math.min(Math.ceil(at / stepMinutes) * stepMinutes, 23 * 60 + 59);
+    return [pad2(Math.floor(stepped / 60)), pad2(stepped % 60)];
+}
+/**
+ * Whether a time is within `min` and `max`, either of which may be missing.
+ * Like the native input, a `min` later than `max` is a range over midnight:
+ * 22:00 to 06:00 allows 23:30 and 05:00.
+ */
+export function timeInRange(hour, minute, min, max) {
+    const at = hour * 60 + minute;
+    const lower = parseHourMinute(min);
+    const upper = parseHourMinute(max);
+    const from = lower ? lower[0] * 60 + lower[1] : null;
+    const to = upper ? upper[0] * 60 + upper[1] : null;
+    if (from !== null && to !== null && from > to)
+        return at >= from || at <= to;
+    if (from !== null && at < from)
+        return false;
+    if (to !== null && at > to)
+        return false;
+    return true;
+}
+/** The hour as the locale writes it: "19" in Swedish, "7 PM" in American English. */
+export function hourLabel(hour, locale) {
+    return formatTime(`${pad2(hour)}:00`, locale, { hour: "numeric" }) || pad2(hour);
+}
+/** The minute as two digits, in the locale's own numerals. */
+export function minuteLabel(minute, locale) {
+    try {
+        return new Intl.NumberFormat(locale || undefined, { minimumIntegerDigits: 2, useGrouping: false }).format(minute);
+    }
+    catch {
+        return pad2(minute);
+    }
+}
+/** The 24 hours. An hour is disabled when no time in it is within `min` and `max`. */
+export function hourChoices(locale, min, max) {
+    return Array.from({ length: 24 }, (_, hour) => ({
+        value: pad2(hour),
+        label: hourLabel(hour, locale),
+        disabled: !Array.from({ length: 60 }, (_, minute) => minute).some((minute) => timeInRange(hour, minute, min, max)),
+    }));
+}
+/**
+ * The minutes of one hour: every `stepMinutes`, plus the minute of `current`
+ * when it is not on the step, so a value such as 19:07 can be kept. A minute
+ * is disabled when the time is outside `min` and `max`; with no hour chosen
+ * none is.
+ */
+export function minuteChoices(options) {
+    const { locale, stepMinutes, hour, current, min, max } = options;
+    const minutes = new Set();
+    for (let minute = 0; minute < 60; minute += stepMinutes)
+        minutes.add(minute);
+    const now = parseHourMinute(current);
+    if (now)
+        minutes.add(now[1]);
+    const chosenHour = hour === "" ? null : Number(hour);
+    return [...minutes]
+        .sort((a, b) => a - b)
+        .map((minute) => ({
+        value: pad2(minute),
+        label: minuteLabel(minute, locale),
+        disabled: chosenHour !== null && !timeInRange(chosenHour, minute, min, max),
+    }));
+}

package/dist/util/theme-mode.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The page's theme mode, read and written in one place.
+ *
+ * The theme is switched on `<html>`: `data-theme="auto" | "light" | "dark"`,
+ * or the older `dark` class (THEMING.md, "Light, dark and auto"). ThemeToggle
+ * uses these helpers, and so can an app that renders a control of its own, a
+ * SegmentedControl with three options for instance: both then read and write
+ * the same attribute, and ThemeToggle follows whatever the other one sets.
+ *
+ * Everything here is safe to call on the server: without a document the
+ * readers return the default and the writers do nothing.
+ */
+/** `"auto"` follows the system; the other two are a choice. */
+export type ThemeMode = "auto" | "light" | "dark";
+/** The modes in the order a three-way ThemeToggle steps through them. */
+export declare const THEME_MODES: readonly ThemeMode[];
+/** Where the choice is kept in `localStorage` unless a key is given. The key ThemeToggle has always used. */
+export declare const DEFAULT_THEME_STORAGE_KEY = "theme";
+/** The texts ThemeToggle builds its accessible name from. Pass any of them as `labels`. */
+export interface ThemeToggleLabels {
+    /** What `"auto"` is called, with three modes. Default `"system"`. */
+    auto: string;
+    /** Default `"light"`. */
+    light: string;
+    /** Default `"dark"`. */
+    dark: string;
+    /**
+     * The name with three modes, from the current mode's word and the next
+     * one's. Default: "Theme: system. Switch to light".
+     */
+    describe: (current: string, next: string) => string;
+    /**
+     * The name with two modes. It does not change: the button is a switch, and
+     * `aria-pressed` says whether dark is on. Default "Dark mode".
+     */
+    darkMode: string;
+    /** The name before the button mounts, when the mode is not known yet. Default "Theme toggle". */
+    beforeMount: string;
+}
+export declare function isThemeMode(value: unknown): value is ThemeMode;
+/**
+ * The mode the page is in. `data-theme` says it outright; a page without the
+ * attribute is dark with the `dark` class and light without it (such a page
+ * does not follow the system, so it is never `"auto"`).
+ */
+export declare function getThemeMode(): ThemeMode;
+/** Whether the page is dark right now: by the class, by `data-theme="dark"`, or by `auto` on a dark system. */
+export declare function isThemeDark(): boolean;
+export interface SetThemeModeOptions {
+    /**
+     * Where to keep the choice in `localStorage`. Default `"theme"`; `null`
+     * keeps nothing (an app that stores the choice in its own backend).
+     */
+    storageKey?: string | null;
+}
+/**
+ * Puts the page in `mode` by writing `data-theme` on `<html>`, and remembers
+ * it. A leftover `dark` class and an inline `color-scheme` are removed: either
+ * would hold the page dark, or its native controls, under another mode. The
+ * theme sets `color-scheme` for each value of the attribute.
+ */
+export declare function setThemeMode(mode: ThemeMode, options?: SetThemeModeOptions): void;
+/** The stored choice, or `null` when there is none, it is not a mode, or `storageKey` is `null`. */
+export declare function getStoredThemeMode(storageKey?: string | null): ThemeMode | null;
+/** Remembers `mode` under `storageKey` (default `"theme"`); `null` keeps nothing. */
+export declare function storeThemeMode(mode: ThemeMode, storageKey?: string | null): void;
+/**
+ * A script for `<head>` that applies the stored mode before the first paint,
+ * so a returning visitor does not see the other theme flash by. Returns the
+ * source as a string; it has no dependencies and can be inlined as it is.
+ *
+ * It writes to whichever mechanism the page uses, as ThemeToggle does:
+ * `data-theme` when `<html>` already has the attribute or the stored mode is
+ * `"auto"`, and the `dark` class otherwise. With nothing stored it does
+ * nothing, and the markup's own `data-theme` (or its absence) stands.
+ *
+ * The key is written into the script as a JSON string, so any key is safe.
+ */
+export declare function themeInitScript(storageKey?: string): string;

package/dist/util/theme-mode.js

@@ -0,0 +1,121 @@
+/**
+ * The page's theme mode, read and written in one place.
+ *
+ * The theme is switched on `<html>`: `data-theme="auto" | "light" | "dark"`,
+ * or the older `dark` class (THEMING.md, "Light, dark and auto"). ThemeToggle
+ * uses these helpers, and so can an app that renders a control of its own, a
+ * SegmentedControl with three options for instance: both then read and write
+ * the same attribute, and ThemeToggle follows whatever the other one sets.
+ *
+ * Everything here is safe to call on the server: without a document the
+ * readers return the default and the writers do nothing.
+ */
+/** The modes in the order a three-way ThemeToggle steps through them. */
+export const THEME_MODES = ["auto", "light", "dark"];
+/** Where the choice is kept in `localStorage` unless a key is given. The key ThemeToggle has always used. */
+export const DEFAULT_THEME_STORAGE_KEY = "theme";
+export function isThemeMode(value) {
+    return value === "auto" || value === "light" || value === "dark";
+}
+function root() {
+    return typeof document === "undefined" ? undefined : document.documentElement;
+}
+function storage() {
+    try {
+        return typeof localStorage === "undefined" ? undefined : localStorage;
+    }
+    catch {
+        // Reading `localStorage` throws where storage is blocked.
+        return undefined;
+    }
+}
+/**
+ * The mode the page is in. `data-theme` says it outright; a page without the
+ * attribute is dark with the `dark` class and light without it (such a page
+ * does not follow the system, so it is never `"auto"`).
+ */
+export function getThemeMode() {
+    const html = root();
+    if (!html)
+        return "light";
+    const attribute = html.getAttribute("data-theme");
+    if (isThemeMode(attribute))
+        return attribute;
+    return html.classList.contains("dark") ? "dark" : "light";
+}
+/** Whether the page is dark right now: by the class, by `data-theme="dark"`, or by `auto` on a dark system. */
+export function isThemeDark() {
+    const html = root();
+    if (!html)
+        return false;
+    // The class brings the dark tokens whatever the attribute says.
+    if (html.classList.contains("dark"))
+        return true;
+    const mode = getThemeMode();
+    if (mode === "auto") {
+        return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+    }
+    return mode === "dark";
+}
+/**
+ * Puts the page in `mode` by writing `data-theme` on `<html>`, and remembers
+ * it. A leftover `dark` class and an inline `color-scheme` are removed: either
+ * would hold the page dark, or its native controls, under another mode. The
+ * theme sets `color-scheme` for each value of the attribute.
+ */
+export function setThemeMode(mode, options = {}) {
+    if (!isThemeMode(mode))
+        return;
+    const html = root();
+    if (!html)
+        return;
+    html.setAttribute("data-theme", mode);
+    html.classList.remove("dark");
+    html.style.removeProperty("color-scheme");
+    storeThemeMode(mode, options.storageKey);
+}
+/** The stored choice, or `null` when there is none, it is not a mode, or `storageKey` is `null`. */
+export function getStoredThemeMode(storageKey = DEFAULT_THEME_STORAGE_KEY) {
+    if (storageKey === null)
+        return null;
+    try {
+        const stored = storage()?.getItem(storageKey);
+        return isThemeMode(stored) ? stored : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** Remembers `mode` under `storageKey` (default `"theme"`); `null` keeps nothing. */
+export function storeThemeMode(mode, storageKey = DEFAULT_THEME_STORAGE_KEY) {
+    if (storageKey === null)
+        return;
+    try {
+        storage()?.setItem(storageKey, mode);
+    }
+    catch {
+        // Storage full or blocked: the page is still switched.
+    }
+}
+/**
+ * A script for `<head>` that applies the stored mode before the first paint,
+ * so a returning visitor does not see the other theme flash by. Returns the
+ * source as a string; it has no dependencies and can be inlined as it is.
+ *
+ * It writes to whichever mechanism the page uses, as ThemeToggle does:
+ * `data-theme` when `<html>` already has the attribute or the stored mode is
+ * `"auto"`, and the `dark` class otherwise. With nothing stored it does
+ * nothing, and the markup's own `data-theme` (or its absence) stands.
+ *
+ * The key is written into the script as a JSON string, so any key is safe.
+ */
+export function themeInitScript(storageKey = DEFAULT_THEME_STORAGE_KEY) {
+    const key = JSON.stringify(String(storageKey)).replace(/</g, "\\u003c");
+    return ("(function(){try{" +
+        `var m=localStorage.getItem(${key});` +
+        'if(m!=="auto"&&m!=="light"&&m!=="dark")return;' +
+        "var r=document.documentElement;" +
+        'if(r.hasAttribute("data-theme")||m==="auto"){r.setAttribute("data-theme",m);r.classList.remove("dark")}' +
+        'else{r.classList.toggle("dark",m==="dark")}' +
+        "}catch(e){}})();");
+}