Button commands

Buttons that act without a line of the page's script: copy a value, print the page, switch the theme, share an address. Each carries its command in command and names what it acts on in aria-controls, as --toggle does - no commandfor.

Copy

command="--copy" copies its data-copy, or the value of the field aria-controls names, or that element's text. It says politely that it did - the page's texts copy.done and copy.failed - and shows a check in place of its icon for a moment; the page hears redz:copy with detail.text. A page served over plain http has no Clipboard API: the browser's copy command stands in.

The key for the API

<label class="form-label" for="commands-copy-key">The key for the API</label>
<div class="input-group">
	<input class="form-control font-monospace" id="commands-copy-key" type="text" value="rz_live_4f9a1c2e7b" readonly>
	<button class="btn btn-icon" type="button" command="--copy" aria-controls="commands-copy-key" aria-label="Copy the key"><i class="bi bi-copy" aria-hidden="true"></i></button>
</div>
<div class="hstack gap-8">
	<button class="btn" type="button" command="--copy" data-copy="https://lagoon.example/tours/north-bay"><i class="bi bi-link-45deg" aria-hidden="true"></i>Copy the address</button>
</div>

Print

command="--print" prints the page. However printing starts - the button, the browser's menu, a key - every closed details, an accordion's item among them, and every region a --toggle button holds closed open for the paper and close again after. A card is not cut across two pages, and a scrolling card's body prints whole; the shell, toasts, the save bar and anything with print:d-none stay off the paper.

<button class="btn" type="button" command="--print"><i class="bi bi-printer" aria-hidden="true"></i>Print</button>

Theme

Buttons with command="--theme" and the value light, dark or system set the page's theme - data-theme on html, removed for system - and aria-pressed says which shows. One button with the value toggle flips the theme shown between light and dark, the system's read from prefers-color-scheme: it is pressed while dark, so its words name the dark theme. The page hears redz:theme with detail.theme and keeps the choice - in a cookie, in the account - and writes data-theme on html on its server, so the page paints in its theme at once.

<div class="btn-group" role="group" aria-label="Theme">
	<button class="btn" type="button" command="--theme" value="light"><i class="bi bi-sun" aria-hidden="true"></i>Light</button>
	<button class="btn" type="button" command="--theme" value="dark"><i class="bi bi-moon" aria-hidden="true"></i>Dark</button>
	<button class="btn" type="button" command="--theme" value="system"><i class="bi bi-circle-half" aria-hidden="true"></i>System</button>
</div>
<button class="btn btn-icon" type="button" command="--theme" value="toggle" aria-label="Dark theme"><i class="bi bi-moon-stars" aria-hidden="true"></i></button>

command="--share" shares data-share-url - the page's own address when it has none - and data-share-title through the device's share sheet where it has one, as a phone does. Elsewhere it opens its menu, aria-controls, whose links the library writes by their class: share-telegram, share-facebook, share-messenger, share-linkedin, share-vk, share-line and share-whatsapp; a --copy item without data-copy copies the address. Each class gives its icon the network's colour; Bootstrap Icons has no VK mark, so share-vk draws its letters. Messenger opens its app, on a phone.

<button class="btn" type="button" command="--share" aria-controls="commands-share-menu" aria-haspopup="menu" data-share-url="https://lagoon.example/tours/north-bay" data-share-title="North Bay by speedboat"><i class="bi bi-share" aria-hidden="true"></i>Share</button>
<div id="commands-share-menu" class="menu menu-start" popover role="menu" aria-label="Share">
	<a class="menu-item share-telegram" role="menuitem"><i class="bi bi-telegram" aria-hidden="true"></i>Telegram</a>
	<a class="menu-item share-whatsapp" role="menuitem"><i class="bi bi-whatsapp" aria-hidden="true"></i>WhatsApp</a>
	<a class="menu-item share-line" role="menuitem"><i class="bi bi-line" aria-hidden="true"></i>LINE</a>
	<a class="menu-item share-facebook" role="menuitem"><i class="bi bi-facebook" aria-hidden="true"></i>Facebook</a>
	<a class="menu-item share-messenger" role="menuitem"><i class="bi bi-messenger" aria-hidden="true"></i>Messenger</a>
	<a class="menu-item share-linkedin" role="menuitem"><i class="bi bi-linkedin" aria-hidden="true"></i>LinkedIn</a>
	<a class="menu-item share-vk" role="menuitem">VK</a>
	<button class="menu-item" type="button" role="menuitem" command="--copy"><i class="bi bi-link-45deg" aria-hidden="true"></i>Copy the address</button>
</div>

Keyboard and accessibility

Each command is a button: Enter and Space run it, and one that is aria-disabled does nothing.
A copy is said once, politely, inside an open modal dialog when there is one; the check that shows for a moment is not read out.
The theme buttons say which theme shows in aria-pressed; the one toggle is pressed while dark, its words the dark theme's.
The share menu is a menu: it opens on its first link, the arrow keys move through it, and Escape closes it back to its button, which says in aria-expanded whether it is open.

Texts

The library has no words of its own; it reads these from the page's island #redz-ui-text.

Key	For	In English
`copy.done`	Said when a copy is done	Copied
`copy.failed`	Said when the browser refuses it	Could not copy