Dateline — <mv-dateline>

node scripts/add.mjs dateline --out ./src/marvelous

<div id="dl-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #dl-demo { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; align-content:start }
    #dl-demo .dl-bar { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.75rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #dl-demo .dl-view { display:flex; align-items:center; gap:.5rem .75rem; flex-wrap:wrap; min-width:0; max-width:100% }
    #dl-demo .dl-scroll { max-width:100%; overflow-x:auto; scrollbar-width:none }
    #dl-demo .dl-k { color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500 }
    #dl-demo .dl-tools { display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
    #dl-demo .dl-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.25rem; align-items:start }
    #dl-demo .dl-prose { display:grid; gap:.875rem; padding:1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm) }
    #dl-demo .dl-prose h4 { margin:0; font-size:.8125rem; font-weight:500; color:var(--mv-fg-muted) }
    #dl-demo .dl-prose p { margin:0; font-size:.9375rem; line-height:1.65 }
    #dl-demo .dl-prose .dl-from { display:block; margin-bottom:.125rem; color:var(--mv-fg-subtle); font-size:.75rem }
    #dl-demo .dl-sep { height:1px; background:var(--mv-border) }
    #dl-demo .dl-log { display:flex; align-items:center; gap:.5rem; min-height:1.5rem; color:var(--mv-fg-muted); font-size:.75rem }
    @media (max-width:52rem) { #dl-demo .dl-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="dl-bar">
    <div class="dl-view">
      <span class="dl-k" id="dl-view-label">Preview as a viewer in</span>
      <div class="dl-scroll"><mv-segmented id="dl-viewer" aria-labelledby="dl-view-label" value="">
        <button value="">This device</button>
        <button value="Europe/Madrid">Madrid</button>
        <button value="America/New_York">New York</button>
        <button value="Asia/Singapore">Singapore</button>
        <button value="Pacific/Auckland">Auckland</button>
      </mv-segmented></div>
    </div>
    <div class="dl-tools">
      <label class="mv-choice">
        <input type="checkbox" role="switch" class="mv-switch" id="dl-24">
        <span class="mv-choice-text"><span class="mv-choice-title">24-hour clock</span></span>
      </label>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="dl-soon">Deadline in 15 s</button>
    </div>
  </div>

  <!-- A global deadline set in Pacific time, with the team's zones -->
  <mv-dateline id="dl-main" variant="card" data-dl-roll
    label="Global Hackathon · submissions close"
    datetime="2026-10-02T17:00" zone="America/Los_Angeles"
    zones="Europe/Paris Asia/Kolkata=Bengaluru Asia/Tokyo"
    countdown countdown-text="Closes in {time}" ended-text="Closed {time} ago"
    actions="google ics copy" picker reminder="2h"
    summary="Global Hackathon: submissions close"
    details="Upload your repository link and a 3-minute video on the submission portal."></mv-dateline>

  <div class="dl-grid">
    <!-- A recurring meeting in the weeks when Europe and the US switch clocks on different dates -->
    <mv-dateline id="dl-sync" variant="card"
      label="Weekly product sync"
      datetime="2026-10-26T09:00" zone="America/New_York"
      zones="Europe/London Asia/Singapore"
      countdown countdown-text="Starts in {time}" ended-text="Started {time} ago"
      duration="45m" actions="ics" location="Video call"></mv-dateline>

    <div class="dl-prose">
      <h4>In running text</h4>
      <p><span class="dl-from">Status page · Planned maintenance</span>
        The EU and US clusters go read-only on
        <mv-dateline id="dl-maint" data-dl-roll datetime="2026-10-04T23:00Z" zone="UTC" countdown></mv-dateline>
        for about 40 minutes.</p>
      <div class="dl-sep"></div>
      <p><span class="dl-from">Email · Northwind Conference 2027</span>
        Early-bird registration opens
        <mv-dateline id="dl-reg" data-dl-roll datetime="2026-10-01T09:00" zone="Pacific/Auckland" zone-label="Auckland"></mv-dateline>,
        with 300 seats at $149.</p>
      <div class="dl-sep"></div>
      <p class="dl-log" id="dl-log" aria-live="polite"><span class="mv-badge" data-variant="secondary" data-shape="pill" id="dl-log-badge">Events</span><span id="dl-log-text">Change the viewer zone or use the picker.</span></p>
    </div>
  </div>

  <script type="module">
    const root = document.getElementById("dl-demo");
    await customElements.whenDefined("mv-dateline");
    const all = [...root.querySelectorAll("mv-dateline")];
    const $ = (id) => document.getElementById(id);
    const log = (text, variant = "secondary", badge = "Event") => {
      $("dl-log-text").textContent = text;
      $("dl-log-badge").textContent = badge;
      $("dl-log-badge").dataset.variant = variant;
    };

    // Keep the demo in the future: roll wall-time dates forward by whole weeks.
    const pad = (n) => String(n).padStart(2, "0");
    for (const el of root.querySelectorAll("[data-dl-roll]")) {
      let guard = 0;
      while (el.moment && el.moment.getTime() < Date.now() + 36e5 && guard++ < 200) {
        const [date, rest] = el.datetime.split("T");
        const d = new Date(`${date}T00:00:00Z`);
        d.setUTCDate(d.getUTCDate() + 7);
        el.datetime = `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T${rest}`;
      }
    }
    // The sync falls on the Monday after Europe's clock change (last Sunday of October).
    const sync = $("dl-sync");
    const europeGapMonday = (y) => {
      const d = new Date(Date.UTC(y, 9, 31));
      d.setUTCDate(31 - d.getUTCDay() + 1);
      return `${y}-10-${pad(d.getUTCDate())}T09:00`;
    };
    let y = new Date().getUTCFullYear();
    sync.datetime = europeGapMonday(y);
    if (sync.moment.getTime() < Date.now()) sync.datetime = europeGapMonday(y + 1);

    const viewer = $("dl-viewer");
    const setViewer = (zone) => { for (const el of all) el.viewerZone = zone || null; };
    viewer.addEventListener("mv-change", (e) => setViewer(e.detail.value));
    $("dl-24").addEventListener("change", (e) => { for (const el of all) el.clock = e.target.checked ? "24" : null; });

    root.addEventListener("mv-zone-change", (e) => {
      if (e.defaultPrevented) return;
      if (e.detail.source !== "user") { log(`Device zone changed to ${e.detail.zone}.`, "info", "Zone"); return; }
      // The picker of one card drives the whole page.
      setViewer(e.detail.automatic ? "" : e.detail.zone);
      viewer.value = [...viewer.querySelectorAll("button")].some((b) => b.value === (e.detail.automatic ? "" : e.detail.zone)) ? (e.detail.automatic ? "" : e.detail.zone) : viewer.value;
      log(`Showing times in ${e.detail.zone.replace(/_/g, " ")}.`, "info", "Zone");
    });
    root.addEventListener("mv-calendar", (e) => {
      if (e.detail.kind === "google") { e.preventDefault(); log("Google Calendar link ready (opening is disabled in this demo).", "info", "Calendar"); }
      else log(`.ics file downloaded${e.target.reminder ? `, with a reminder ${e.target.reminder} before` : ""}.`, "success", "Calendar");
    });
    root.addEventListener("mv-copy", (e) => log(`Copied: “${e.detail.text}”`, "success", "Copy"));

    const main = $("dl-main");
    const original = main.datetime;
    let restore = 0;
    main.addEventListener("mv-due", () => {
      log("Submissions are closed: the app can lock the form now.", "warning", "mv-due");
      clearTimeout(restore);
      restore = setTimeout(() => { if (main.isConnected) main.datetime = original; }, 6000);
    });
    $("dl-soon").addEventListener("click", () => {
      clearTimeout(restore);
      main.moment = Date.now() + 15_000;
      log("The deadline is now 15 seconds away: the countdown ticks every second in the last hour.", "info", "Countdown");
    });
  </script>
</div>