diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfafe5b..2d797ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+- New snippet: photo gallery, linked photos in a grid of figures that TagAction's viewer steps through (Previous, Next, arrow keys); asked for in the family evaluation, round 1.
+- The dashboard's sidebar folds behind a "Sections" button on phones (TagBrush.css's sidebar menu pattern): at 360px its whole link list used to sit between the top bar and the page.
+- Prices in the landing template and the pricing snippet are written `<strong>$12</strong> <small>per month</small>`, which TagBrush.css 2.0 shows as a large figure and a small muted period (1.x shows it as before).
+- New snippet: repeatable rows, a form where people add rows with TagAction's `--clone` and remove any of them with `--remove` (TagAction's next release). The Add and Remove buttons are written `hidden`, so without JavaScript the first row still works.
+- The confirm dialog's destructive button is red: `data-tone="error"` on the Delete button, and an outlined red opener (TagBrush.css's next release).
+- MkDocs theme: search. `search: titles` (the default) finds pages and sections by title from a box above the sidebar, filtered by TagAction 0.3's search-results list; `search: pagefind` uses Pagefind for full text; `search: false` leaves it out. The README no longer lists callouts as missing: TagBrush.css 1.2 styles `!!! note` once the `admonition` extension is on.
 - A row-actions snippet (`snippets/row-confirm.html`): a button on each table row opens that row's own confirm dialog, which posts the row's action. One dialog per row works with no page script, and the Actions column stays unsortable. The orders agent in the family evaluation worked this out on its own; now it's a pattern to copy.
 - A nonprofit starter site (`starters/nonprofit/`): 13 pages for a small nonprofit, built with `tagkit build` from shared includes, with donation and volunteer forms for static hosts, sortable and filterable event and budget tables, a live gift total, dialogs, a popover, a remembered FAQ, and a GitHub Pages workflow that runs TagCheck before publishing. Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit`. Tests build it and check every page with TagCheck (including contrast and phone overflow), TagAction, links, and JavaScript off.
 - Tested with TagBrush.css 1.2.0.
diff --git a/README.md b/README.md
index 458e86f..756da28 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ TagKit is part of the Tag family. Its HTML is styled by [TagBrush.css](https://g
 
 **Page templates** (`templates/`): landing page, dashboard, docs page, blog post, sign-up page, admin table. Each is a complete page; open it and copy the source.
 
-**Snippets** (`snippets/`): hero, feature grid, pricing table, testimonials, FAQ, card grid, stat tiles, page header, data table, search bar, confirm dialog, user menu, contact form, callouts, sidebar layout, docs layout, footer columns. Each file starts with a comment that says what it is and where it goes. Most go inside `<main>`; ones marked `(body)` are page-level.
+**Snippets** (`snippets/`): hero, feature grid, pricing table, testimonials, FAQ, card grid, stat tiles, page header, data table, search bar, confirm dialog (with a red destructive button), user menu, contact form, repeatable rows (add and remove), photo gallery, callouts, sidebar layout, docs layout, footer columns. Each file starts with a comment that says what it is and where it goes. Most go inside `<main>`; ones marked `(body)` are page-level.
 
 **Starter sites** (`starters/`): a whole multi-page site to copy and make your own. The [nonprofit starter](starters/nonprofit/) has 13 pages (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404), with donation and volunteer forms that work on any static host, built with `tagkit build`, checked with TagCheck, and published to GitHub Pages by an included workflow: `npx degit kovirlabs/tagkit/starters/nonprofit my-site`.
 
diff --git a/ai/AGENTS.md b/ai/AGENTS.md
index 4fb66c9..ac01756 100644
--- a/ai/AGENTS.md
+++ b/ai/AGENTS.md
@@ -45,7 +45,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
 - [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
-- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
+- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
 - [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
 - [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
 - [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.
@@ -54,16 +54,18 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
 - [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
-- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
+- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error").
 - [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
 - [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
 - [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
 - [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
 - [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
 - [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
+- [Photo gallery](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html): linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Repeatable rows](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html): a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.
 - [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
diff --git a/ai/claude/tagkit/SKILL.md b/ai/claude/tagkit/SKILL.md
index 3e08c27..d3a1a7c 100644
--- a/ai/claude/tagkit/SKILL.md
+++ b/ai/claude/tagkit/SKILL.md
@@ -50,7 +50,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
 - [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
-- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
+- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
 - [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
 - [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
 - [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.
@@ -59,16 +59,18 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
 - [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
-- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
+- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error").
 - [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
 - [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
 - [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
 - [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
 - [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
 - [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
+- [Photo gallery](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html): linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Repeatable rows](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html): a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.
 - [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
diff --git a/ai/cursor/tagkit.mdc b/ai/cursor/tagkit.mdc
index 5cbc6be..0400e78 100644
--- a/ai/cursor/tagkit.mdc
+++ b/ai/cursor/tagkit.mdc
@@ -51,7 +51,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
 - [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
-- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
+- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
 - [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
 - [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
 - [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.
@@ -60,16 +60,18 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
 - [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
-- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
+- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error").
 - [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
 - [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
 - [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
 - [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
 - [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
 - [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
+- [Photo gallery](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html): linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Repeatable rows](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html): a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.
 - [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
diff --git a/index.html b/index.html
index 9740780..1af049e 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@ <h2 id="templates">Page templates</h2>
     <ul>
       <li><a href="templates/admin-table.html">Admin table</a>: a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.</li>
       <li><a href="templates/blog-post.html">Blog post</a>: an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.</li>
-      <li><a href="templates/dashboard.html">Dashboard</a>: an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.</li>
+      <li><a href="templates/dashboard.html">Dashboard</a>: an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.</li>
       <li><a href="templates/docs.html">Docs page</a>: breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.</li>
       <li><a href="templates/landing.html">Landing page</a>: a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.</li>
       <li><a href="templates/signup.html">Sign-up page</a>: a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.</li>
@@ -75,8 +75,8 @@ <h3 id="card-grid">Card grid</h3>
   &lt;/article&gt;
 &lt;/section&gt;</code></pre>
     <h3 id="confirm-dialog">Confirm dialog</h3>
-    <p>a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. <a href="preview/confirm-dialog.html">Preview the confirm dialog</a>.</p>
-    <pre><code>&lt;button class="secondary" commandfor="delete-project" command="show-modal"&gt;Delete project&lt;/button&gt;
+    <p>a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error"). <a href="preview/confirm-dialog.html">Preview the confirm dialog</a>.</p>
+    <pre><code>&lt;button class="outline" data-tone="error" commandfor="delete-project" command="show-modal"&gt;Delete project&lt;/button&gt;
 &lt;dialog id="delete-project"&gt;
   &lt;form method="post" action="/projects/42/delete"&gt;
     &lt;header&gt;
@@ -86,7 +86,7 @@ <h3 id="confirm-dialog">Confirm dialog</h3>
     &lt;p&gt;This deletes the project and its 128 time entries. It can't be undone.&lt;/p&gt;
     &lt;footer&gt;
       &lt;button type="button" class="secondary" commandfor="delete-project" command="close"&gt;Cancel&lt;/button&gt;
-      &lt;button&gt;Delete project&lt;/button&gt;
+      &lt;button data-tone="error"&gt;Delete project&lt;/button&gt;
     &lt;/footer&gt;
   &lt;/form&gt;
 &lt;/dialog&gt;</code></pre>
@@ -218,6 +218,29 @@ <h3 id="footer-columns">Footer columns</h3>
   &lt;/nav&gt;
   &lt;p&gt;© 2026 Lumen Labs&lt;/p&gt;
 &lt;/footer&gt;</code></pre>
+    <h3 id="gallery">Photo gallery</h3>
+    <p>linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo. <a href="preview/gallery.html">Preview the photo gallery</a>.</p>
+    <pre><code>&lt;section&gt;
+  &lt;h2&gt;From the workshop&lt;/h2&gt;
+  &lt;div class="grid" style="--grid-min-column: 12rem"&gt;
+    &lt;figure&gt;
+      &lt;a href="https://picsum.photos/id/1060/1600/1200.jpg"&gt;&lt;img src="https://picsum.photos/id/1060/600/450.jpg" alt="A barista pouring milk into a cup" width="600" height="450" loading="lazy"&gt;&lt;/a&gt;
+      &lt;figcaption&gt;Morning pour&lt;/figcaption&gt;
+    &lt;/figure&gt;
+    &lt;figure&gt;
+      &lt;a href="https://picsum.photos/id/1080/1600/1200.jpg"&gt;&lt;img src="https://picsum.photos/id/1080/600/450.jpg" alt="Strawberries in a bowl on a wooden table" width="600" height="450" loading="lazy"&gt;&lt;/a&gt;
+      &lt;figcaption&gt;Market haul&lt;/figcaption&gt;
+    &lt;/figure&gt;
+    &lt;figure&gt;
+      &lt;a href="https://picsum.photos/id/1073/1600/1200.jpg"&gt;&lt;img src="https://picsum.photos/id/1073/600/450.jpg" alt="A row of books on a shelf" width="600" height="450" loading="lazy"&gt;&lt;/a&gt;
+      &lt;figcaption&gt;The reading shelf&lt;/figcaption&gt;
+    &lt;/figure&gt;
+    &lt;figure&gt;
+      &lt;a href="https://picsum.photos/id/1067/1600/1200.jpg"&gt;&lt;img src="https://picsum.photos/id/1067/600/450.jpg" alt="A city street at dusk" width="600" height="450" loading="lazy"&gt;&lt;/a&gt;
+      &lt;figcaption&gt;Walk home&lt;/figcaption&gt;
+    &lt;/figure&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
     <h3 id="hero">Hero</h3>
     <p>the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the &lt;header&gt; of your page. <a href="preview/hero.html">Preview the hero</a>.</p>
     <pre><code>&lt;header&gt;
@@ -263,7 +286,7 @@ <h3 id="pricing">Pricing table</h3>
   &lt;article&gt;
     &lt;header&gt;
       &lt;h3&gt;Starter&lt;/h3&gt;
-      &lt;p&gt;&lt;strong&gt;$0&lt;/strong&gt; per month&lt;/p&gt;
+      &lt;p&gt;&lt;strong&gt;$0&lt;/strong&gt; &lt;small&gt;per month&lt;/small&gt;&lt;/p&gt;
     &lt;/header&gt;
     &lt;ul&gt;
       &lt;li&gt;One client&lt;/li&gt;
@@ -275,7 +298,7 @@ <h3 id="pricing">Pricing table</h3>
   &lt;article&gt;
     &lt;header&gt;
       &lt;h3&gt;Pro &lt;mark data-tone="info"&gt;Most popular&lt;/mark&gt;&lt;/h3&gt;
-      &lt;p&gt;&lt;strong&gt;$12&lt;/strong&gt; per month&lt;/p&gt;
+      &lt;p&gt;&lt;strong&gt;$12&lt;/strong&gt; &lt;small&gt;per month&lt;/small&gt;&lt;/p&gt;
     &lt;/header&gt;
     &lt;ul&gt;
       &lt;li&gt;Unlimited clients&lt;/li&gt;
@@ -287,7 +310,7 @@ <h3 id="pricing">Pricing table</h3>
   &lt;article&gt;
     &lt;header&gt;
       &lt;h3&gt;Studio&lt;/h3&gt;
-      &lt;p&gt;&lt;strong&gt;$29&lt;/strong&gt; per month&lt;/p&gt;
+      &lt;p&gt;&lt;strong&gt;$29&lt;/strong&gt; &lt;small&gt;per month&lt;/small&gt;&lt;/p&gt;
     &lt;/header&gt;
     &lt;ul&gt;
       &lt;li&gt;Up to five people&lt;/li&gt;
@@ -297,6 +320,35 @@ <h3 id="pricing">Pricing table</h3>
     &lt;footer&gt;&lt;a class="button outline" href="/contact"&gt;Talk to us&lt;/a&gt;&lt;/footer&gt;
   &lt;/article&gt;
 &lt;/section&gt;</code></pre>
+    <h3 id="repeatable-rows">Repeatable rows</h3>
+    <p>a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden. <a href="preview/repeatable-rows.html">Preview the repeatable rows</a>.</p>
+    <pre><code>&lt;form action="/expenses" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Expenses&lt;/legend&gt;
+    &lt;ol&gt;
+      &lt;li id="expense"&gt;
+        &lt;div role="group"&gt;
+          &lt;input name="what" aria-label="What it was for" placeholder="What it was for" required&gt;
+          &lt;input type="number" name="amount" aria-label="Amount in dollars" placeholder="Amount" min="0" step="0.01" required&gt;
+          &lt;button type="button" class="outline" data-tone="error" commandfor="expense" command="--remove" hidden&gt;Remove&lt;/button&gt;
+        &lt;/div&gt;
+      &lt;/li&gt;
+      &lt;template id="new-expense"&gt;
+        &lt;li id="expense"&gt;
+          &lt;div role="group"&gt;
+            &lt;input name="what" aria-label="What it was for" placeholder="What it was for" required&gt;
+            &lt;input type="number" name="amount" aria-label="Amount in dollars" placeholder="Amount" min="0" step="0.01" required&gt;
+            &lt;button type="button" class="outline" data-tone="error" commandfor="expense" command="--remove" hidden&gt;Remove&lt;/button&gt;
+          &lt;/div&gt;
+        &lt;/li&gt;
+      &lt;/template&gt;
+    &lt;/ol&gt;
+  &lt;/fieldset&gt;
+  &lt;div role="group"&gt;
+    &lt;button type="button" class="secondary" commandfor="new-expense" command="--clone" hidden&gt;Add expense&lt;/button&gt;
+    &lt;button&gt;Submit report&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
     <h3 id="row-confirm">Row actions with a confirm dialog</h3>
     <p>each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable. <a href="preview/row-confirm.html">Preview the row actions with a confirm dialog</a>.</p>
     <pre><code>&lt;table&gt;
diff --git a/llms.txt b/llms.txt
index c4aac0f..a253ff0 100644
--- a/llms.txt
+++ b/llms.txt
@@ -43,7 +43,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
 - [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
-- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
+- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
 - [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
 - [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
 - [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.
@@ -52,16 +52,18 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
 - [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
-- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
+- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error").
 - [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
 - [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
 - [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
 - [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
 - [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
 - [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
+- [Photo gallery](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html): linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Repeatable rows](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html): a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.
 - [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
diff --git a/preview/confirm-dialog.html b/preview/confirm-dialog.html
index 4985869..07926ef 100644
--- a/preview/confirm-dialog.html
+++ b/preview/confirm-dialog.html
@@ -4,14 +4,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Confirm dialog · TagKit preview</title>
-<meta name="description" content="a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.">
+<meta name="description" content="a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone=&quot;error&quot;).">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagbrush@1/tagbrush.min.css">
 <script src="https://cdn.jsdelivr.net/npm/tagaction@0/tagaction.min.js" defer></script>
 </head>
 <body>
 <main>
 <h1>Confirm dialog</h1>
-<button class="secondary" commandfor="delete-project" command="show-modal">Delete project</button>
+<button class="outline" data-tone="error" commandfor="delete-project" command="show-modal">Delete project</button>
 <dialog id="delete-project">
   <form method="post" action="/projects/42/delete">
     <header>
@@ -21,7 +21,7 @@ <h2>Delete "Website redesign"?</h2>
     <p>This deletes the project and its 128 time entries. It can't be undone.</p>
     <footer>
       <button type="button" class="secondary" commandfor="delete-project" command="close">Cancel</button>
-      <button>Delete project</button>
+      <button data-tone="error">Delete project</button>
     </footer>
   </form>
 </dialog>
diff --git a/preview/gallery.html b/preview/gallery.html
new file mode 100644
index 0000000..54bbacf
--- /dev/null
+++ b/preview/gallery.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Photo gallery · TagKit preview</title>
+<meta name="description" content="linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagbrush@1/tagbrush.min.css">
+<script src="https://cdn.jsdelivr.net/npm/tagaction@0/tagaction.min.js" defer></script>
+</head>
+<body>
+<main>
+<h1>Photo gallery</h1>
+<section>
+  <h2>From the workshop</h2>
+  <div class="grid" style="--grid-min-column: 12rem">
+    <figure>
+      <a href="https://picsum.photos/id/1060/1600/1200.jpg"><img src="https://picsum.photos/id/1060/600/450.jpg" alt="A barista pouring milk into a cup" width="600" height="450" loading="lazy"></a>
+      <figcaption>Morning pour</figcaption>
+    </figure>
+    <figure>
+      <a href="https://picsum.photos/id/1080/1600/1200.jpg"><img src="https://picsum.photos/id/1080/600/450.jpg" alt="Strawberries in a bowl on a wooden table" width="600" height="450" loading="lazy"></a>
+      <figcaption>Market haul</figcaption>
+    </figure>
+    <figure>
+      <a href="https://picsum.photos/id/1073/1600/1200.jpg"><img src="https://picsum.photos/id/1073/600/450.jpg" alt="A row of books on a shelf" width="600" height="450" loading="lazy"></a>
+      <figcaption>The reading shelf</figcaption>
+    </figure>
+    <figure>
+      <a href="https://picsum.photos/id/1067/1600/1200.jpg"><img src="https://picsum.photos/id/1067/600/450.jpg" alt="A city street at dusk" width="600" height="450" loading="lazy"></a>
+      <figcaption>Walk home</figcaption>
+    </figure>
+  </div>
+</section>
+</main>
+</body>
+</html>
diff --git a/preview/pricing.html b/preview/pricing.html
index 098ba12..6449aa3 100644
--- a/preview/pricing.html
+++ b/preview/pricing.html
@@ -19,7 +19,7 @@ <h2>Simple plans that grow with you</h2>
   <article>
     <header>
       <h3>Starter</h3>
-      <p><strong>$0</strong> per month</p>
+      <p><strong>$0</strong> <small>per month</small></p>
     </header>
     <ul>
       <li>One client</li>
@@ -31,7 +31,7 @@ <h3>Starter</h3>
   <article>
     <header>
       <h3>Pro <mark data-tone="info">Most popular</mark></h3>
-      <p><strong>$12</strong> per month</p>
+      <p><strong>$12</strong> <small>per month</small></p>
     </header>
     <ul>
       <li>Unlimited clients</li>
@@ -43,7 +43,7 @@ <h3>Pro <mark data-tone="info">Most popular</mark></h3>
   <article>
     <header>
       <h3>Studio</h3>
-      <p><strong>$29</strong> per month</p>
+      <p><strong>$29</strong> <small>per month</small></p>
     </header>
     <ul>
       <li>Up to five people</li>
diff --git a/preview/repeatable-rows.html b/preview/repeatable-rows.html
new file mode 100644
index 0000000..7fa3a5b
--- /dev/null
+++ b/preview/repeatable-rows.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Repeatable rows · TagKit preview</title>
+<meta name="description" content="a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagbrush@1/tagbrush.min.css">
+<script src="https://cdn.jsdelivr.net/npm/tagaction@0/tagaction.min.js" defer></script>
+</head>
+<body>
+<main>
+<h1>Repeatable rows</h1>
+<form action="/expenses" method="post">
+  <fieldset>
+    <legend>Expenses</legend>
+    <ol>
+      <li id="expense">
+        <div role="group">
+          <input name="what" aria-label="What it was for" placeholder="What it was for" required>
+          <input type="number" name="amount" aria-label="Amount in dollars" placeholder="Amount" min="0" step="0.01" required>
+          <button type="button" class="outline" data-tone="error" commandfor="expense" command="--remove" hidden>Remove</button>
+        </div>
+      </li>
+      <template id="new-expense">
+        <li id="expense">
+          <div role="group">
+            <input name="what" aria-label="What it was for" placeholder="What it was for" required>
+            <input type="number" name="amount" aria-label="Amount in dollars" placeholder="Amount" min="0" step="0.01" required>
+            <button type="button" class="outline" data-tone="error" commandfor="expense" command="--remove" hidden>Remove</button>
+          </div>
+        </li>
+      </template>
+    </ol>
+  </fieldset>
+  <div role="group">
+    <button type="button" class="secondary" commandfor="new-expense" command="--clone" hidden>Add expense</button>
+    <button>Submit report</button>
+  </div>
+</form>
+</main>
+</body>
+</html>
diff --git a/snippets.json b/snippets.json
index 0610508..0c56946 100644
--- a/snippets.json
+++ b/snippets.json
@@ -19,7 +19,7 @@
     {
       "id": "confirm-dialog",
       "name": "Confirm dialog",
-      "description": "a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.",
+      "description": "a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone=\"error\").",
       "where": "main",
       "file": "snippets/confirm-dialog.html",
       "url": "https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html"
@@ -72,6 +72,14 @@
       "file": "snippets/footer-columns.html",
       "url": "https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html"
     },
+    {
+      "id": "gallery",
+      "name": "Photo gallery",
+      "description": "linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.",
+      "where": "main",
+      "file": "snippets/gallery.html",
+      "url": "https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html"
+    },
     {
       "id": "hero",
       "name": "Hero",
@@ -96,6 +104,14 @@
       "file": "snippets/pricing.html",
       "url": "https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html"
     },
+    {
+      "id": "repeatable-rows",
+      "name": "Repeatable rows",
+      "description": "a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.",
+      "where": "main",
+      "file": "snippets/repeatable-rows.html",
+      "url": "https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html"
+    },
     {
       "id": "row-confirm",
       "name": "Row actions with a confirm dialog",
@@ -163,7 +179,7 @@
     {
       "id": "dashboard",
       "name": "Dashboard",
-      "description": "an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.",
+      "description": "an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.",
       "file": "templates/dashboard.html",
       "url": "https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html"
     },
diff --git a/snippets/confirm-dialog.html b/snippets/confirm-dialog.html
index 0f21d7b..4880a2c 100644
--- a/snippets/confirm-dialog.html
+++ b/snippets/confirm-dialog.html
@@ -1,5 +1,5 @@
-<!-- Confirm dialog: a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. -->
-<button class="secondary" commandfor="delete-project" command="show-modal">Delete project</button>
+<!-- Confirm dialog: a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error"). -->
+<button class="outline" data-tone="error" commandfor="delete-project" command="show-modal">Delete project</button>
 <dialog id="delete-project">
   <form method="post" action="/projects/42/delete">
     <header>
@@ -9,7 +9,7 @@ <h2>Delete "Website redesign"?</h2>
     <p>This deletes the project and its 128 time entries. It can't be undone.</p>
     <footer>
       <button type="button" class="secondary" commandfor="delete-project" command="close">Cancel</button>
-      <button>Delete project</button>
+      <button data-tone="error">Delete project</button>
     </footer>
   </form>
 </dialog>
diff --git a/snippets/gallery.html b/snippets/gallery.html
new file mode 100644
index 0000000..7e7fbaa
--- /dev/null
+++ b/snippets/gallery.html
@@ -0,0 +1,22 @@
+<!-- Photo gallery: linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo. -->
+<section>
+  <h2>From the workshop</h2>
+  <div class="grid" style="--grid-min-column: 12rem">
+    <figure>
+      <a href="https://picsum.photos/id/1060/1600/1200.jpg"><img src="https://picsum.photos/id/1060/600/450.jpg" alt="A barista pouring milk into a cup" width="600" height="450" loading="lazy"></a>
+      <figcaption>Morning pour</figcaption>
+    </figure>
+    <figure>
+      <a href="https://picsum.photos/id/1080/1600/1200.jpg"><img src="https://picsum.photos/id/1080/600/450.jpg" alt="Strawberries in a bowl on a wooden table" width="600" height="450" loading="lazy"></a>
+      <figcaption>Market haul</figcaption>
+    </figure>
+    <figure>
+      <a href="https://picsum.photos/id/1073/1600/1200.jpg"><img src="https://picsum.photos/id/1073/600/450.jpg" alt="A row of books on a shelf" width="600" height="450" loading="lazy"></a>
+      <figcaption>The reading shelf</figcaption>
+    </figure>
+    <figure>
+      <a href="https://picsum.photos/id/1067/1600/1200.jpg"><img src="https://picsum.photos/id/1067/600/450.jpg" alt="A city street at dusk" width="600" height="450" loading="lazy"></a>
+      <figcaption>Walk home</figcaption>
+    </figure>
+  </div>
+</section>
diff --git a/snippets/pricing.html b/snippets/pricing.html
index b9799c2..426fd16 100644
--- a/snippets/pricing.html
+++ b/snippets/pricing.html
@@ -7,7 +7,7 @@ <h2>Simple plans that grow with you</h2>
   <article>
     <header>
       <h3>Starter</h3>
-      <p><strong>$0</strong> per month</p>
+      <p><strong>$0</strong> <small>per month</small></p>
     </header>
     <ul>
       <li>One client</li>
@@ -19,7 +19,7 @@ <h3>Starter</h3>
   <article>
     <header>
       <h3>Pro <mark data-tone="info">Most popular</mark></h3>
-      <p><strong>$12</strong> per month</p>
+      <p><strong>$12</strong> <small>per month</small></p>
     </header>
     <ul>
       <li>Unlimited clients</li>
@@ -31,7 +31,7 @@ <h3>Pro <mark data-tone="info">Most popular</mark></h3>
   <article>
     <header>
       <h3>Studio</h3>
-      <p><strong>$29</strong> per month</p>
+      <p><strong>$29</strong> <small>per month</small></p>
     </header>
     <ul>
       <li>Up to five people</li>
diff --git a/snippets/repeatable-rows.html b/snippets/repeatable-rows.html
new file mode 100644
index 0000000..630ca69
--- /dev/null
+++ b/snippets/repeatable-rows.html
@@ -0,0 +1,28 @@
+<!-- Repeatable rows: a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden. -->
+<form action="/expenses" method="post">
+  <fieldset>
+    <legend>Expenses</legend>
+    <ol>
+      <li id="expense">
+        <div role="group">
+          <input name="what" aria-label="What it was for" placeholder="What it was for" required>
+          <input type="number" name="amount" aria-label="Amount in dollars" placeholder="Amount" min="0" step="0.01" required>
+          <button type="button" class="outline" data-tone="error" commandfor="expense" command="--remove" hidden>Remove</button>
+        </div>
+      </li>
+      <template id="new-expense">
+        <li id="expense">
+          <div role="group">
+            <input name="what" aria-label="What it was for" placeholder="What it was for" required>
+            <input type="number" name="amount" aria-label="Amount in dollars" placeholder="Amount" min="0" step="0.01" required>
+            <button type="button" class="outline" data-tone="error" commandfor="expense" command="--remove" hidden>Remove</button>
+          </div>
+        </li>
+      </template>
+    </ol>
+  </fieldset>
+  <div role="group">
+    <button type="button" class="secondary" commandfor="new-expense" command="--clone" hidden>Add expense</button>
+    <button>Submit report</button>
+  </div>
+</form>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 1b99b51..ec97725 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,4 +1,4 @@
-<!-- Dashboard: an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list. -->
+<!-- Dashboard: an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list. -->
 <!doctype html>
 <html lang="en">
 <head>
@@ -11,14 +11,17 @@
 </head>
 <body>
 <aside>
-  <nav aria-label="Sections">
-    <ul>
-      <li><a href="/dashboard" aria-current="page">Dashboard</a></li>
-      <li><a href="/orders">Orders</a></li>
-      <li><a href="/customers">Customers</a></li>
-      <li><a href="/settings">Settings</a></li>
-    </ul>
-  </nav>
+  <button class="secondary" popovertarget="sections">Sections</button>
+  <div popover id="sections">
+    <nav aria-label="Sections">
+      <ul>
+        <li><a href="/dashboard" aria-current="page">Dashboard</a></li>
+        <li><a href="/orders">Orders</a></li>
+        <li><a href="/customers">Customers</a></li>
+        <li><a href="/settings">Settings</a></li>
+      </ul>
+    </nav>
+  </div>
 </aside>
 <header>
   <nav>
diff --git a/templates/landing.html b/templates/landing.html
index 8f9b8db..d006cc7 100644
--- a/templates/landing.html
+++ b/templates/landing.html
@@ -61,7 +61,7 @@ <h2>Simple plans that grow with you</h2>
     <article>
       <header>
         <h3>Starter</h3>
-        <p><strong>$0</strong> per month</p>
+        <p><strong>$0</strong> <small>per month</small></p>
       </header>
       <ul>
         <li>One client</li>
@@ -73,7 +73,7 @@ <h3>Starter</h3>
     <article>
       <header>
         <h3>Pro <mark data-tone="info">Most popular</mark></h3>
-        <p><strong>$12</strong> per month</p>
+        <p><strong>$12</strong> <small>per month</small></p>
       </header>
       <ul>
         <li>Unlimited clients</li>
@@ -85,7 +85,7 @@ <h3>Pro <mark data-tone="info">Most popular</mark></h3>
     <article>
       <header>
         <h3>Studio</h3>
-        <p><strong>$29</strong> per month</p>
+        <p><strong>$29</strong> <small>per month</small></p>
       </header>
       <ul>
         <li>Up to five people</li>
diff --git a/tests/kit.spec.mjs b/tests/kit.spec.mjs
index 5943a0c..65e6d53 100644
--- a/tests/kit.spec.mjs
+++ b/tests/kit.spec.mjs
@@ -104,12 +104,55 @@ test.describe('with TagAction', () => {
     await expect(page.locator('#account-menu')).toBeHidden();
   });
 
+  test('the gallery steps through its photos in the viewer', async ({ page }) => {
+    await open(page, 'preview/gallery.html');
+    await page.getByRole('link', { name: 'Strawberries in a bowl on a wooden table' }).click();
+    const viewer = page.locator('[data-tag="viewer"]');
+    await expect(viewer.locator('output')).toHaveText('2 of 4');
+    await page.keyboard.press('ArrowRight');
+    await expect(viewer.locator('figcaption')).toHaveText('The reading shelf');
+  });
+
+  test('the dashboard sidebar folds behind a Sections button on a phone', async ({ page }) => {
+    await page.setViewportSize({ width: 360, height: 800 });
+    await open(page, 'templates/dashboard.html');
+    await expect(page.getByRole('link', { name: 'Orders', exact: true })).toBeHidden();
+    await page.getByRole('button', { name: 'Sections' }).click();
+    await expect(page.getByRole('link', { name: 'Orders', exact: true })).toBeVisible();
+    await page.setViewportSize({ width: 1280, height: 800 });
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('button', { name: 'Sections' })).toBeHidden();
+    await expect(page.getByRole('link', { name: 'Orders', exact: true })).toBeVisible();
+  });
+
   test('the docs page builds its table of contents and code copy buttons', async ({ page }) => {
     await open(page, 'templates/docs.html');
     await expect(page.locator('nav[data-tag-toc] a')).toHaveText(['Requirements', 'Install', 'Check the install', 'Your first deploy']);
     await expect(page.getByRole('button', { name: 'Copy' })).toHaveCount(2);
   });
 
+  test('repeatable rows: Add copies a row, Remove takes any row out, and focus follows', async ({ page }) => {
+    await open(page, 'preview/repeatable-rows.html');
+    const rows = page.locator('ol > li');
+    await page.getByRole('button', { name: 'Add expense' }).click();
+    await page.getByRole('button', { name: 'Add expense' }).click();
+    await expect(rows).toHaveCount(3);
+    await expect(page.getByRole('button', { name: 'Remove' })).toHaveCount(3);
+    await page.getByRole('button', { name: 'Remove' }).nth(1).click();
+    await expect(rows).toHaveCount(2);
+    await expect(page.getByLabel('What it was for').first()).toBeFocused();
+  });
+
+  test('the confirm dialog\'s destructive button is red', async ({ page }) => {
+    await open(page, 'preview/confirm-dialog.html');
+    await page.getByRole('button', { name: 'Delete project' }).click();
+    const [confirm, cancel] = [page.getByRole('dialog').getByRole('button', { name: 'Delete project' }), page.getByRole('dialog').getByRole('button', { name: 'Cancel' })];
+    const bg = (locator) => locator.evaluate((el) => getComputedStyle(el).backgroundColor);
+    const red = await page.evaluate(() => { const i = document.createElement('i'); i.style.color = 'oklch(from var(--color-error) min(l, 0.5) c h)'; document.body.append(i); return getComputedStyle(i).color; });
+    expect(await bg(confirm)).toBe(red);
+    expect(await bg(cancel)).not.toBe(red);
+  });
+
   test('the sign-up form shows messages under fields and has a password toggle', async ({ page }) => {
     await open(page, 'templates/signup.html');
     await page.getByRole('button', { name: 'Join' }).click();
@@ -125,7 +168,7 @@ test.describe('without JavaScript', () => {
     test(`${file}: nothing but TagAction-only controls is hidden, and dropdown lists show`, async ({ page }) => {
       await open(page, file, { javaScript: false });
       const hidden = await page.locator('body [hidden]').evaluateAll((els) => els.map((e) => e.outerHTML.slice(0, 100)));
-      for (const html of hidden) expect(html).toMatch(/command="--clone"|aria-controls=/);
+      for (const html of hidden) expect(html).toMatch(/command="--(clone|remove)"|aria-controls=/);
       for (const id of await page.locator('button[aria-expanded][aria-controls]').evaluateAll((els) => els.map((e) => e.getAttribute('aria-controls')))) {
         await expect(page.locator(`#${id}`)).toBeVisible();
       }