Buttons

<div class="flow items:center">
    <button id="process-save">Spara</button>
    <button id="process-send" class="secondary">Skicka</button>
    <button id="process-reset" class="tertiary small">Börja om</button>
</div>

<p id="process-message" role="status" aria-live="polite" class="mbs"></p>

<script>
    import {
        processButton,
        resetButton,
        type ProcessOutcome,
    } from "@dynamic-type/ddi/client";

    /** Stands in for the request a real handler would be waiting on. */
    const answerAfter = (ms: number, outcome: ProcessOutcome) =>
        new Promise<ProcessOutcome>((resolve) =>
            setTimeout(() => resolve(outcome), ms),
        );

    processButton("process-save", () =>
        answerAfter(2000, { ok: true, message: "Sparat!" }),
    );

    processButton("process-send", () =>
        answerAfter(2000, {
            ok: false,
            message: "Katastrof! Servern ballade ur.",
        }),
    );

    const say = (text: string) => {
        const line = document.getElementById("process-message");
        if (line) line.textContent = text;
    };

    // The button's own states are its business; showing the message is the
    // page's. Both events bubble, so one listener each covers every button here
    // — and a live region means a screen reader hears the answer too.
    document.addEventListener("ddi:process-started", () => say(""));
    document.addEventListener("ddi:process-ended", (event) =>
        say(event.detail.message ?? ""),
    );

    // "Spara" succeeds, and a success is terminal — this is the way back.
    document.getElementById("process-reset")?.addEventListener("click", () => {
        resetButton("process-save");
        resetButton("process-send");
        say("");
    });
</script>

<!-- A fixed size, so nothing moves as the buttons swap and the message below
     them changes length. -->
<div style="inline-size: 24rem; max-inline-size: 100%">
    <div class="x-flow items:center">
        <p id="countdown-note">Anteckning: ”Köp mjölk”</p>
        <button id="countdown-delete" class="secondary small">Ta bort</button>
        <button
            id="countdown-undo"
            class="secondary small"
            data-ddi-countdown-outline
            style="display: none"
        >
            Ångra
        </button>
        <button
            id="countdown-restore"
            class="tertiary small"
            style="display: none"
        >
            Börja om
        </button>
    </div>

    <p
        id="countdown-status"
        role="status"
        aria-live="polite"
        class="mbs"
        style="min-block-size: 1lh"
    >
    </p>
</div>

<script>
    import { startCountdown } from "@dynamic-type/ddi/client";

    const byId = (id: string) => document.getElementById(id) as HTMLElement;
    const note = byId("countdown-note");
    const remove = byId("countdown-delete");
    const undo = byId("countdown-undo");
    const restore = byId("countdown-restore");

    // Not the `hidden` attribute: a button's own `display` outranks it.
    const show = (element: HTMLElement, shown: boolean) => {
        element.style.display = shown ? "" : "none";
    };

    const say = (text: string) => {
        byId("countdown-status").textContent = text;
    };

    remove.addEventListener("click", async () => {
        // Each button that takes this one's place does so at its size, so
        // nothing around it moves — but may still grow to fit its own label.
        const { width, height } = remove.getBoundingClientRect();
        for (const button of [undo, restore]) {
            button.style.minInlineSize = `${width}px`;
            button.style.minBlockSize = `${height}px`;
        }

        show(remove, false);
        show(undo, true);
        // The outline is only drawn, so the deadline is also said out loud.
        say("Anteckningen tas bort om 3 sekunder.");

        // Shown before it starts: a hidden button has no box to trace.
        const { finished, cancel } = startCountdown(undo, { duration: 3000 });
        undo.addEventListener("click", cancel, { once: true });

        // Nothing happens at the end unless the page makes it happen.
        const outcome = await finished;
        undo.removeEventListener("click", cancel);
        show(undo, false);

        if (outcome === "done") {
            note.style.textDecoration = "line-through";
            show(restore, true);
            say("Anteckningen är borttagen.");
        } else {
            show(remove, true);
            say("Ångrat.");
        }
    });

    restore.addEventListener("click", () => {
        note.style.textDecoration = "";
        show(remove, true);
        show(restore, false);
        say("");
    });
</script>

---
import { ToggleButtons } from "@dynamic-type/ddi/server";
---

<ToggleButtons name="color" selectedvalue="green">
    <ToggleButtons.Item value="blue">Blå</ToggleButtons.Item>
    <ToggleButtons.Item value="green">Grön</ToggleButtons.Item>
    <ToggleButtons.Item value="yellow">Gul</ToggleButtons.Item>
    <ToggleButtons.Item value="red">Röd</ToggleButtons.Item>
    <ToggleButtons.Item value="orange">Orange</ToggleButtons.Item>
</ToggleButtons>