Exclusivebeta
Midnight — <mv-midnight>
A visible, time-boxed elevated mode (sudo/admin re-auth, “viewing as a customer”, temporary share access, a premium trial, break-glass access, an edit lock) that ends exactly on time and puts everything back. A calm band (or a compact chip with a details panel) says what is granted and by whom, how long is left in tabular digits, the exact end time in the user’s locale and, on demand, what will revert; a thin line drains toward the end with a notch at every chime mark. At each mark (5 min and 1 min by default) the band rings twice, the icon sways, the mark is announced politely and an optional soft WebAudio bell plays; in the last stretch Extend becomes the primary action. Extend goes through a cancelable mv-extend whose waitUntil(promise) holds a busy state while your app re-authenticates (a resolved date overrides the new end), with an optional extension limit. At the deadline nothing waits: elements marked data-midnight-only are hidden or made inert, data-midnight-original content comes back (the granted content is kept aside for the next start), mv-midnight tells the app to drop privileges, and the band reads “Admin mode ended at 3:42 PM”. The end is computed from an absolute deadline, so a throttled background tab still reports the exact end time; the until attribute (or persist) survives reloads, and a BroadcastChannel keeps every tab on the same grant.
| Category | Feedback |
|---|---|
| Type | Web Component (<mv-midnight>) |
| Status | beta |
| Also installs | button |
| Keywords | exclusive, culture, sudo, elevated-access, admin-mode, impersonation, view-as, temporary-access, break-glass, trial, countdown, timer, expiry, revert, permissions, security, broadcast-channel, multi-tab, banner |
When to use
- An admin re-authenticates for sensitive actions and those rights must visibly expire after a few minutes
- A support agent views or acts as a customer and must always see whose account it is and when it stops
- Temporary access (a share link, a break-glass role, a premium trial) must show its end time and revert the UI on expiry
- Several tabs share one elevated grant, and extending or ending it in one must apply to all of them
Avoid when
- The whole session expires and the user must prove they are still there to stay signed in → use Hatch instead
- A secret value must be shown once and then destroyed, rather than a mode being granted → use Self-Destruct instead
- The point is to tell which environment (staging, preview, test mode) the page runs in, with no expiry → use Totem instead
Install
node scripts/add.mjs midnight --out ./src/marvelousAI agent with the Marvelous UI MCP server: install_components({ slugs: ["midnight"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dismiss.js, core/dom.js, core/element.js, core/motion.js, core/observe.js, core/position.js, components/midnight/midnight.js, components/midnight/midnight.css, components/button/button.css.
Usage
Canonical markup — start from it and customize with attributes, data-* and CSS variables:
<div id="mn-demo" style="width:min(100%,56rem);margin-inline:auto">
<style>
#mn-demo { display:grid; gap:1.25rem; align-content:start }
#mn-demo .mn-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
#mn-demo .mn-top { display:flex; align-items:center; gap:1rem; height:3.25rem; padding:0 1rem 0 1.125rem; border-bottom:1px solid var(--mv-border) }
#mn-demo .mn-brand { display:flex; align-items:center; gap:.5rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em; white-space:nowrap }
#mn-demo .mn-logo { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--mv-radius-md); background:var(--mv-fg); color:var(--mv-bg) }
#mn-demo .mn-logo svg { width:1rem; height:1rem }
#mn-demo .mn-nav { display:flex; gap:.25rem; margin:0; padding:0; list-style:none }
#mn-demo .mn-nav a { display:block; padding:.375rem .625rem; border-radius:var(--mv-radius-md); color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500; text-decoration:none }
#mn-demo .mn-nav a[aria-current] { background:var(--mv-bg-muted); color:var(--mv-fg) }
#mn-demo .mn-end { display:flex; align-items:center; gap:.75rem; margin-inline-start:auto }
#mn-demo .mn-me { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--mv-bg-emphasis); color:var(--mv-fg); font-size:.75rem; font-weight:600 }
#mn-demo .mn-body { display:grid; gap:1rem; padding:1rem 1.125rem 1.125rem }
#mn-demo .mn-grid { display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:1rem }
#mn-demo .mn-card { min-width:0; padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
#mn-demo .mn-card h4 { margin:0 0 .25rem; font-size:.875rem }
#mn-demo .mn-card p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5 }
#mn-demo .mn-dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5rem 1rem; margin:.875rem 0 0; font-size:.8125rem }
#mn-demo .mn-dl dt { color:var(--mv-fg-muted) }
#mn-demo .mn-dl dd { margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
#mn-demo [data-midnight-reverted] { color:var(--mv-fg-subtle) }
#mn-demo .mn-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
#mn-demo .mn-log { min-height:1.25rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.45 var(--mv-font-mono) }
#mn-demo .mn-controls { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.875rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
#mn-demo .mn-controls .mv-choice { font-size:.8125rem }
#mn-demo .mn-actions { display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap }
#mn-demo .mn-list { display:grid; margin:.75rem 0 0; padding:0; list-style:none; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-surface); overflow:hidden }
#mn-demo .mn-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.125rem 1rem; padding:.625rem .875rem; font-size:.8125rem }
#mn-demo .mn-list li + li { border-top:1px solid var(--mv-border) }
#mn-demo .mn-list span:last-child { color:var(--mv-fg-subtle); font-variant-numeric:tabular-nums }
#mn-demo .mn-list small { grid-column:1 / -1; color:var(--mv-fg-muted); font-size:.75rem }
#mn-demo .mn-h { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
#mn-demo .mn-h h4 { margin:0; font-size:.9375rem }
@media (max-width:44rem) {
#mn-demo .mn-nav { display:none }
#mn-demo .mn-grid { grid-template-columns:minmax(0,1fr) }
}
</style>
<!-- 1. Band: sudo-style admin mode on a billing console (3 minutes here, chimes at 1 min and 15 s) -->
<section class="mn-app" aria-label="Billing admin console">
<header class="mn-top">
<span class="mn-brand">
<span class="mn-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16v10H4z"/><path d="M4 11h16"/></svg></span>
Tallybook
</span>
<ul class="mn-nav">
<li><a href="#" aria-current="page">Customers</a></li>
<li><a href="#">Invoices</a></li>
<li><a href="#">Audit log</a></li>
</ul>
<span class="mn-end"><span class="mn-me" aria-hidden="true">JL</span></span>
</header>
<div class="mn-body">
<mv-midnight id="mn-admin" autostart duration="3m" extend-by="2m" chimes="1m, 15s" max-extensions="2"
mode="Admin mode" grant="Refunds, MFA resets and full customer data unlocked" granted-by="Priya Raman"
channel="mn-demo-admin">
<ul slot="reverts">
<li>Refunds and workspace deletion disappear</li>
<li>MFA reset is locked again</li>
<li>Emails and card details are masked again</li>
<li>Your normal role (Support agent) applies</li>
</ul>
<button slot="ended" type="button" class="mv-button" data-size="sm" data-variant="outline" id="mn-again">Enter admin mode again</button>
</mv-midnight>
<div class="mn-grid">
<div class="mn-card">
<h4>Northwind Traders · Pro plan</h4>
<p>Customer since March 2023 · 48 seats · billed annually</p>
<dl class="mn-dl">
<dt>Billing email</dt>
<dd data-midnight-original="d•••••@northwind.com">[email protected]</dd>
<dt>Card on file</dt>
<dd data-midnight-original="Visa •••• ••••">Visa 4242 · exp 08/28 · ZIP 94107</dd>
<dt>Last invoice</dt>
<dd>INV-2048 · $12,400.00 · paid Sep 1, 2026</dd>
</dl>
<div class="mn-row">
<button type="button" class="mv-button" data-size="sm" data-midnight-only>Issue refund</button>
<button type="button" class="mv-button" data-size="sm" data-variant="outline" data-midnight-only="inert">Reset MFA</button>
<button type="button" class="mv-button" data-size="sm" data-variant="outline">Send receipt</button>
<button type="button" class="mv-button" data-size="sm" data-variant="destructive" data-midnight-only>Delete workspace</button>
</div>
</div>
<div class="mn-card">
<h4>Activity</h4>
<p>What the mode reports to the app.</p>
<p class="mn-log" id="mn-log" style="margin-top:.75rem">Admin mode started.</p>
</div>
</div>
</div>
<div class="mn-controls">
<span class="mn-actions">
<label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mn-reauth" checked> Extending asks for a passkey</label>
<label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mn-sound"> Soft chime sound</label>
</span>
<span class="mn-actions" style="gap:.5rem">
<button type="button" class="mv-button" data-variant="outline" data-size="sm" id="mn-ff">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 6 7 6-7 6zM13 6l7 6-7 6z"/></svg>
Jump to the last minute
</button>
<button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="mn-skip">Skip to the end</button>
</span>
</div>
</section>
<!-- 2. Chip: support agent viewing the app as a customer (impersonation), 10 minutes -->
<section class="mn-app" aria-label="Support workspace">
<header class="mn-top">
<span class="mn-brand">
<span class="mn-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16v10H8l-4 4z"/></svg></span>
Relaydesk
</span>
<span class="mn-end">
<mv-midnight id="mn-view" variant="chip" name="view-as" autostart duration="10m" extend-by="5m" chimes="5m, 1m"
mode="Viewing as Alex Chen" grant="Read-only: you see exactly what Alex sees" granted-by="Marcus Webb">
<ul slot="reverts">
<li>You’re back in your own account</li>
<li>Alex’s inbox and settings are hidden again</li>
</ul>
</mv-midnight>
<span class="mn-me" aria-hidden="true">SK</span>
</span>
</header>
<div class="mn-body">
<div class="mn-h">
<h4 data-midnight-for="view-as" data-midnight-original="Your inbox">Alex Chen’s inbox · [email protected]</h4>
<button type="button" class="mv-button" data-size="sm" data-variant="outline" data-midnight-for="view-as" data-midnight-only>Copy what Alex sees</button>
</div>
<ul class="mn-list" data-midnight-for="view-as" data-midnight-only>
<li><span>Invoice INV-3310 failed to send</span><span>2:14 PM</span><small>“Your card was declined” shown to Alex, but the card was updated yesterday.</small></li>
<li><span>Welcome to Lumen Analytics</span><span>Sep 18</span><small>Onboarding checklist: 3 of 5 steps done.</small></li>
<li><span>Your trial ends in 3 days</span><span>Sep 17</span><small>Upgrade prompt with the old price ($29/month).</small></li>
</ul>
</div>
</section>
<script type="module">
const admin = document.getElementById("mn-admin");
const view = document.getElementById("mn-view");
const log = document.getElementById("mn-log");
const reauth = document.getElementById("mn-reauth");
const time = (d = new Date()) => d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
const say = (text) => { log.textContent = `${time()} · ${text}`; };
// Extending can require a fresh passkey check: the app answers through waitUntil().
admin.addEventListener("mv-extend", (e) => {
if (!reauth.checked) { say("Extended without re-authentication."); return; }
say("Waiting for passkey confirmation…");
e.detail.waitUntil(new Promise((resolve) => setTimeout(resolve, 900)).then(() => say(`Passkey confirmed. Admin mode extended to ${time(e.detail.until)}.`)));
});
admin.addEventListener("mv-chime", (e) => say(`Chime: ${Math.round(e.detail.remaining / 1000)} s left.`));
admin.addEventListener("mv-end", () => say("Ending admin mode early…"));
admin.addEventListener("mv-midnight", (e) => say(`Admin mode ended (${e.detail.reason}). Privileges dropped.`));
admin.addEventListener("mv-sync", () => say("Extended from another tab."));
document.getElementById("mn-sound").addEventListener("change", (e) => { admin.sound = e.target.checked; });
const ensureOn = () => { if (admin.state === "ended" || admin.state === "idle") admin.start(); };
// Demo shortcut: pretend two of the three minutes have already gone by.
document.getElementById("mn-ff").addEventListener("click", () => {
ensureOn();
admin.since = new Date(Date.now() - 119_000).toISOString();
admin.deadline = Date.now() + 61_000;
});
document.getElementById("mn-skip").addEventListener("click", () => { ensureOn(); admin.deadline = Date.now() + 3_000; });
document.getElementById("mn-again").addEventListener("click", () => {
say("Passkey confirmed. Admin mode started.");
admin.start({ duration: "3m" });
});
admin.addEventListener("mv-dismiss", () => {
say("Band dismissed. Signing back in to admin mode…");
setTimeout(() => admin.start({ duration: "3m" }), 1500);
});
view.addEventListener("mv-dismiss", () => setTimeout(() => view.start({ duration: "10m" }), 1500));
</script>
</div>Cultural reference
Cinderella (Cendrillon) — Charles Perrault (1697, fable). A spell grants a transformation that holds only until the stroke of midnight, the chimes warn that time is running out, and at the last stroke everything reverts to what it was. In the UI, an elevated mode (admin, impersonation, temporary access) is granted until an exact deadline, soft chimes warn at set marks, and at the end every unlocked control and every changed content reverts on its own.
API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
until | ISO 8601 date-time | epoch ms | Absolute end of the mode, typically rendered by your server from the real grant expiry, so a reload shows the same deadline. Reflected by the component whenever the end moves (start, extend, another tab). A value already in the past on load shows the ended state and emits mv-midnight with late > 0. | |
since | ISO 8601 date-time | epoch ms | When the grant started: shown as “Granted by … at 3:27 PM” and used as the full length of the draining line. Defaults to the start time (or the load time when only until is known). | |
duration | time ("15m", "90s", "1h", "2d", ms number) | 15m | Length used by start() and autostart when no end is given. |
extend-by | time | (duration) | Time added by Extend, counted from the current end (or from now if it has passed). Shown in the button (“Extend 15 min”). |
max-extensions | number | How many times Extend may be used per grant. Once reached, the button reads “No extensions left” and is disabled. | |
chimes | comma-separated times | 5m, 1m | Warning marks before the end. Each one rings once (pulse, polite announcement, optional bell, mv-chime); the first one switches the tone to closing. Marks already passed on load or after an extension never ring, and several marks missed by a sleeping tab ring once. |
mode | string | Elevated access | Short name of the mode (“Admin mode”, “Viewing as Alex Chen”), used in the band, the chip, the region label and every announcement. |
grant | string | What the mode unlocks (“Refunds and MFA resets unlocked”), shown next to the name. | |
granted-by | string | Who granted it; shown as “Granted by Priya Raman at 3:27 PM” (otherwise “Started at 3:27 PM”). | |
variant | band | chip | band | band: full-width inline bar with actions and a collapsible “What reverts” list. chip: compact pill (name + time left) that opens a non-modal panel with the details, a big countdown and the actions. |
autostart | boolean | Starts a grant of duration on first connection when no until (or persisted state) is present. For demos and client-only modes; pair it with persist to survive reloads. | |
sound | boolean | Soft sine bell via WebAudio at each chime (two strikes for the last mark). Off by default and never before a user gesture. | |
channel | string | BroadcastChannel name shared by the tabs of the same grant: start, extend and end apply to all of them, and a newly opened tab joins a running grant. Ignored where BroadcastChannel is unsupported. | |
persist | string | localStorage key under which the end, start and extension count are kept, so a reload without server-rendered until resumes (or reports the end). Cleared when the mode ends. | |
scope | CSS selector | (document) | Root in which data-midnight-only and data-midnight-original elements are managed (including elements added later), and which receives data-midnight="active | closing | ended". |
name | string | With several instances: this one only manages elements whose data-midnight-for matches; an instance without name manages elements without data-midnight-for. | |
linger | time | Hides the ended band automatically after this delay (mv-dismiss). By default it stays until Dismiss. | |
locale | BCP 47 tag | en-US | Locale of the end and start times (“3:42 PM”, “Sep 24 at 9:00 AM” when the end is on another day). |
placement | bottom-end | bottom-start | bottom | top-end | top-start | top | bottom-end | chip variant: preferred side of the panel (flips and shifts to stay in the viewport). |
data-midnight-only | "" | "hide" | "inert" | On any element in scope: only available while the mode is on. Otherwise it gets hidden + inert ("" / "hide", enforced with display: none) or stays visible but inert and dimmed ("inert"). data-midnight-locked is set while it is locked. | |
data-midnight-original | string | On any element in scope: text shown whenever the mode is off (masked email, “Your inbox”). The granted content is kept aside and put back on the next start; data-midnight-reverted is set while the original shows. | |
data-midnight-for | string | On a managed element: binds it to the instance with this name. | |
data-state | idle | active | closing | ended | Set by the component (idle renders nothing). data-chime is present during a chime pulse ("last" for the last mark), data-pending while an extension waits. |
Properties
| Name | Type | Description |
|---|---|---|
deadline | number (ms epoch) | Date | ISO string | Absolute end. Setting it moves a running grant (broadcast to other tabs) or starts one if it is in the future. |
remaining | number (ms) | Time left, recomputed from the deadline on every read; 0 when not on (read-only). |
state | "idle" | "active" | "closing" | "ended" | Current phase (read-only). |
extensions | number | Extensions used in the current grant (read-only). |
endedAt / endReason | Date | null / string | null | When and why the last grant ended (read-only). |
pending | boolean | True while an extension waits for waitUntil promises (read-only). |
reverts | string[] | What reverts at the end, as plain text items (alternative to slot="reverts"). |
strings | Partial<Record<string, string>> | Overrides for every visible text and announcement (keys: mode, left, grantedBy, startedAt, endsAt, endsOn, extend ({by}), extendLimit, endNow, dismiss, reverts, reverted, revertsTitle, revertedTitle, endedTitle, endedChip, endedTimeout, endedManual, endedRemote, endedApi, error, timer, announceStart, announceChime, announceExtended, announceRemote, announceEnded). English defaults. |
Methods
| Name | Description |
|---|---|
start({ duration?, until?, since?, grant?, grantedBy? }) | Starts (or restarts) a grant: unlocks data-midnight-only elements, restores granted content, emits mv-start, announces the end time and broadcasts. Returns false if the end would be in the past. |
extend(by?) | Same as the Extend button (by defaults to extend-by). Returns Promise<boolean>: false if canceled, rejected, over the limit, or if the mode ended while waiting. |
end({ reason? }) | Ends now and reverts (reason defaults to "api"; "manual" emits the cancelable mv-end first, as the End now button does). |
dismiss() | Hides the ended band (state idle), returning focus to where it came from if it was inside. |
open() / close() | chip variant: opens or closes the details panel. |
Events
| Name | Description |
|---|---|
mv-start | A grant started. detail: { until, since, remote } (remote: joined from another tab). |
mv-chime | A warning mark was reached. detail: { mark (ms), remaining, until, last }. |
mv-extend | Cancelable, before an extension. detail: { by, until (proposed new end), remaining, extensions, waitUntil(promise) }. Call waitUntil() synchronously with your re-authentication: Extend shows a busy state, a rejection keeps the current end and shows an error, a promise resolving to a Date, ISO string or epoch ms uses it as the new end. The deadline is never held while you wait. |
mv-extend-error | A waitUntil promise rejected. detail: { error }. |
mv-end | Cancelable: End now was chosen. detail: { reason: "manual", remaining }. preventDefault() keeps the mode (e.g. to confirm first). |
mv-midnight | The mode ended and the UI reverted: drop the privileges now. detail: { reason: "timeout" | "manual" | "api" | "remote", endedAt (the exact deadline for timeouts), until, late (ms between the end and when this tab noticed), extensions }. |
mv-sync | Another tab moved the end. detail: { until, type }. |
mv-dismiss | The ended band was dismissed (button, dismiss() or linger). detail: { reason }. |
Content structure
| Name | Description |
|---|---|
reverts | A list (usually <ul>) of what reverts at the end, shown under “What reverts” in the band and always in the chip panel; after the end it becomes “Reverted at 3:42 PM”. |
actions | Extra actions shown while the mode is on (e.g. “Open audit log”), before End now / Extend. |
ended | Actions shown once it ended (e.g. “Enter admin mode again”, which calls start() after re-authentication), before Dismiss. |
CSS classes
| Name | Description |
|---|---|
mv-midnight-band / -bar | Band variant: labelled region with -icon, -text (-title with -mode and -grant, -meta with -by and -ends, -error), -clock (-digits, -caption), -actions and -track; -reverts below. |
mv-midnight-track / -fill / -tick | Draining line (--_p = remaining ratio) with one notch per chime mark (data-rung once passed). |
mv-midnight-chip / -panel | Chip variant: pill button (-chip-icon, -chip-label, -chip-digits) and its non-modal Popover API panel (-head, -clockblock, -reverts, -actions). |
mv-midnight-extend / -end / -toggle / -dismiss | Built-in actions (mv-button, size sm). |
CSS variables
| Name | Default | Description |
|---|---|---|
--mv-midnight-tone | var(--mv-accent) | Tint of the active mode: band, icon, chip, draining line. |
--mv-midnight-closing | var(--mv-warning) | Tint once the first chime mark is passed. |
--mv-midnight-radius | var(--mv-radius-lg) | Corner radius of the band (0 for a full-bleed top bar). |
Accessibility
The band is a region labelled by the mode name (“Admin mode”), so it is listed among landmarks and can be jumped to; the chip is a real <button> (aria-expanded, aria-controls) opening a labelled non-modal dialog placed right after it in the DOM, closed with Escape (focus returns to the chip) or an outside click. Time left lives in a visually hidden role="timer" element (“12 minutes left in Admin mode, ends at 3:42 PM”, to the second under 5 minutes) whose implicit aria-live is off, and Extend and the chip are described by it: screen readers read it on demand and it never chatters. Only real events are announced, once, in a polite live region: the start (“Admin mode is on until 3:42 PM.”), each chime (“Admin mode ends in 1 minute, at 3:42 PM.”), an extension, a failed extension and the end (“Admin mode ended at 3:42 PM. Everything it unlocked has been reverted.”). Focus is never moved on a timer event; if it sat on Extend or End now when the mode ends, it moves to Dismiss, and dismissing returns it to where it came from. Every action is a native button reachable with Tab; “What reverts” is a disclosure (aria-expanded, aria-controls); a pending extension sets aria-busy and aria-disabled; the extension limit disables the button with an explicit label. Locked data-midnight-only elements are hidden or inert, so they leave the tab order and the accessibility tree instead of looking clickable. State is never color-only: each phase has its own icon (shield, bell, undo arrow) and words (time left, “ended at”). Reduced motion (OS or data-motion="reduce"): no pulse, sway or draining animation, a chime becomes a static ring. Forced colors: system borders, Highlight fill and outline. Sound is opt-in and never plays before a user gesture.