tosijs-ui 1.17.0-beta.4 → 1.17.0

package/CHANGELOG.md

@@ -1,73 +1,88 @@
 # Changelog
 
-## 1.17.0-beta.4
-
-> Prerelease, published under the `beta` dist-tag: install with `tosijs-ui@beta`. `latest` stays
-> on 1.16.41. Fixes from Learn 3D and from tosijs-native's first site build.
-
-- **Every doc page can be scrolled by keyboard, and has a main landmark (#3575).** A page of
-  plain prose had nothing to tab to inside its scrolling content, so a keyboard user could not
-  scroll it, which axe reports as `scrollable-region-focusable` (Learn 3D: 71 of 126 pages). The
-  content scroller is now focusable, and it is the page's main landmark, which the doc site did not
-  have at all: a screen reader's "jump to main content" now works. A doc browser embedded in
-  another page stays focusable without claiming that page's main landmark.
-- **`buildSite` says it needs `happy-dom` before it starts (#3600).** Without it, the build died
-  partway through with "Cannot find package 'happy-dom'" from a file inside tosijs-ui. It now
-  stops before writing anything and prints the install command. `happy-dom` stays an optional
-  peer: a project that only uses the components never needs it.
-- **TJS's own doc comments, `/# … #/`, become documentation (#3601).** In `.tjs` and `.ajs`
-  files they are read in source order with any `/*#` blocks. tjs-lang finds them, so its grammar
-  applies exactly; that needs a tjs-lang that exports `findDocCommentSpans` (requested). With an
-  older one, the build names each file whose `/#` comments it could not read, instead of
-  dropping the page silently. `.ajs` files are now scraped for `/*#` blocks too.
-
-### 1.17.0-beta.3 (prerelease detail)
-
-> Prerelease, published under the `beta` dist-tag: install with `tosijs-ui@beta`. `latest` stays
-> on 1.16.41. beta.2 was staged and never published; its notes follow.
-
-- **The axe audit waits for a page marked `aria-busy`, and one slow page no longer ends it.** A
-  page that is still loading (a 3D scene fetching large models, say) marks an element
-  `aria-busy="true"`, the standard ARIA signal, and is waited for up to 30 seconds; other pages
-  are audited once they have stopped adding elements, or after five seconds. A page that never
-  loads, or is still busy at 30 seconds, is listed as not fully checked, and the build makes no
-  claim about it. Before, each page load waited for the network to go idle, so a page that kept
-  downloading for 30 seconds, or that polled, threw and ended the audit of every page. The doc
-  site reference shows a component setting and clearing `aria-busy`.
-
-### 1.17.0-beta.2 (prerelease detail)
-
-> Prerelease, published under the `beta` dist-tag: install with `tosijs-ui@beta`. `latest` stays
-> on 1.16.41. Fixes from Learn 3D's first run of beta.1.
-
-- **Accessibility mode: headings in a blockquote or list shift with the rest of the page
-  (#3576).** A sidebar's `> ####` under `###` sections stayed an `<h4>` under the new `<h2>`s, so
-  the build reported a skipped level and DAISY Ace failed the ePub on heading order. A heading
-  inside a blockquote still never becomes the page's title.
-- **DAISY Ace is found on `PATH` (#3577).** The docs said `bun add -d @daisy/ace`, which brings
-  Electron and Puppeteer into the project, and their advisories then failed the build's own
-  dependency audit. Install it globally (`npm install -g @daisy/ace`) instead; the build looks in
-  the project first, then on `PATH`.
-- **The axe audit is about twice as fast, and audits the page a reader gets (#3585).** Pages are
-  audited four at a time (this site: 80s to 43s). Each is audited once it stops adding elements,
-  rather than after a fixed 300ms, which on a busy machine caught pages half-built. And the
-  audit no longer starts the doc browser's background test runner, which runs on localhost and
-  never on a deployed site. `TOSIJS_A11Y_AUDIT=off` skips the audit and the Ace check for one
-  build while the mode stays on; the ePub then claims no conformance.
-- **Section stubs are not written where they cannot be read, or mid-edit (#3584).** A page whose
-  `parent` names a missing doc gets a stub section doc in `sectionsDir`. When `sectionsDir` is
-  outside every `docPaths` entry, the build now warns and writes nothing, since the stub would
-  never be read back. Stubs are created only on the first build in a process, so a parent that
-  disappears for a second during a rename no longer leaves files behind. Each stub written is
-  named in the build output.
-- **`preview.host` is optional, and the preview docs no longer say `host` is required (#3586).**
-  The type has allowed a config with only `preview.tunnel` since 1.10.0, but the doc comment and
-  the reference table still said so. `as any` casts written for it can go.
+## 1.17.0
+
+> Accessibility and SEO for doc sites, and the components themselves passing WCAG 2.2 AA. A doc
+> site can now be built to a stated accessibility level, with an accessible ePub, and every page
+> carries share images, structured data and an llms.txt worth reading. Live examples can run
+> under a Content Security Policy with no `'unsafe-eval'`. `<tosi-table>` gains elastic columns,
+> and the icon generator keeps open paths open. Released as five betas; this section folds them
+> together.
+>
+> **`dist/iife.js` grew 505.2 kB → 509.5 kB gzip (+4.3 kB, +0.9%)**, measured with `gzip -9`
+> against 1.16.41. The ESM entry points pay only for what they import.
+
+**Visible changes.** Nothing an adopter must change, but these look or behave differently:
+
+- An editable `<tosi-select>` looks like a text field rather than a button, because it is one.
+- `<tosi-month>` uses mediumvioletred where it used hotpink, which failed contrast;
+  `--month-day-color` and `--month-date-checked-background` restore the old colour.
+- `<tosi-carousel>`'s dots are 24px apart rather than 16px.
+- An icon whose classes are both `stroked filled` now draws its outline, over a knockout fill
+  (`--tosi-icon-knockout`, default `--tosi-bg`). The `filled` class used to win and remove every
+  stroke.
+- The doc site header's site name is a `<span class="site-name">`, not an `<h2>`: site CSS that
+  styled `header h2` should target `header .site-name`.
+- A section page's `<!-- toc -->` list is no longer written into its source file.
 
-### 1.17.0-beta.1 (prerelease detail)
+### Security
 
-> Prerelease, published under the `beta` dist-tag: install with `tosijs-ui@beta`. `latest` stays
-> on 1.16.41. It carries the accessibility half of 1.17.0; the SEO work and #245/#246 follow.
+- **Image alt and title text are escaped in rendered pages.** marked wrote alt text into the
+  attribute as it was, so a `"` ended it. An ordinary caption (`A sign reading "Open"`) broke the
+  tag in every release that renders markdown images. In the 1.17 betas, alt text from an
+  `altText` hook, which is machine-generated and so untrusted, could inject markup such as a live
+  `<img onerror>`. **Affected:** 1.17.0-beta.1 through beta.5 with an `altText` hook (author
+  markdown with a `"` in its alt text rendered a broken tag in every earlier version, but that
+  text is the site author's own).
+- **What a `setExampleHooks` `sanitize` hook returns is what the preview gets.** The betas
+  serialized the hook's fragment and parsed it again, and HTML does not survive that round trip
+  through MathML or SVG: markup the hook had judged harmless could come back as a live
+  `<img onerror>` (shown in Chromium, Firefox and WebKit). The fragment is now inserted as it is.
+  **Affected:** 1.17.0-beta.5, on pages that register a `sanitize` hook.
+
+The 1.17.0 betas are deprecated on npm with a message pointing here; upgrade to 1.17.0.
+
+### Accessibility: the components pass axe's WCAG 2.2 AA rules
+
+The doc site's accessibility audit found 142 failures across 75 pages, most of them in
+components every adopter ships. A new Playwright spec holds 20 component pages, examples
+included, at zero.
+
+- **`<tosi-table>` is a grid of rows (#3570).** Its scroll area is `role="grid"` and every row
+  `role="row"`. It was a list of list items holding grid cells, which a screen reader announced
+  as a list of unnamed items. A custom `dataCell` gets `role="gridcell"` like the table's own
+  cells, unless it carries a role of its own, and an expanded row's detail is a full-width
+  `gridcell` rather than a `region`, because a row may only contain cells.
+- **`<tosi-tag-list>`'s chips are list items**, and an empty tag list is no longer an empty list.
+- **`<tosi-select>` no longer puts its input inside its button (#3571).** A select you pick from
+  is its button, which is the combobox and shows the caption as text; an editable one is its
+  input, in a field beside the button. The combobox is named by the host's `aria-label` or
+  `title`, its `<label>`, or the placeholder, and ↓ opens the list.
+- **`<tosi-tabs>` (#3572):** the tab row is the `tablist` and each body a `tabpanel`; a tab
+  points at its panel through `ariaControlsElements` (an id cannot cross the shadow root), and
+  `aria-selected` is `"true"` or absent rather than empty. The close glyph is no longer a button
+  inside the tab: Delete or Backspace closes a closeable tab from the keyboard, and the glyph
+  keeps a 24px pointer target.
+- **Names for icon-only controls.** An icon-only `<tosi-menu>`'s trigger is named by the host's
+  `aria-label` or `title`, and says it opens a menu. `<tosi-month>`'s header buttons and
+  month/year selects have names. `<tosi-code>`'s editable area is named (the host's `aria-label`
+  or `title`, else "<mode> code"). `<tosi-theme-editor>`'s inputs and the filter builder's
+  controls are named. `<tosi-schema-form>`'s labels are tied to their controls (a plugin's
+  through its first input), so every field has a name.
+- **Contrast.** `<tosi-month>`'s day headings and checked dates use mediumvioletred (5:1)
+  instead of hotpink (2.6:1); `--month-day-color` and `--month-date-checked-background` restore
+  the old colour. `<tosi-code>`'s light theme's type names are #075 instead of CodeMirror's #085
+  (4.43:1). `<tosi-palette>`'s trigger text is #0009 instead of #0008, just under 4.5:1 on a
+  near-white field.
+- **Targets and keyboard.** `<tosi-carousel>`'s dots sit 24px apart (WCAG 2.5.8), and its slide
+  strip takes focus, with ← and → paging it (#3573). `<tosi-rich-text>`'s toolbar buttons are
+  at least 24px, and a live example's scrolling test results take focus.
+- The doc examples name their controls and use colours that pass AA (#3574).
+- **Enter opens a `<tosi-select>` you pick from**, like Space and ↓. (beta.5 cancelled it.)
+- **`<tosi-table>` gives `role="row"` only to its own rows**: a list inside a cell keeps its list
+  items.
+
+### Accessibility mode for doc sites
 
 - **An opt-in accessibility mode for doc sites (#3521).** `accessibility: 'wcag22-aa'` in the
   site config makes the build do what it can decide on its own and report what it cannot, on the
@@ -108,6 +123,156 @@
 - **The header's site name is no longer a heading.** It was an `<h2>` above every page's own
   `<h1>`, so it was each page's first heading. It is now `<span class="site-name">` and looks the
   same; site CSS that styled `header h2` should target `header .site-name`.
+- **Accessibility mode: headings in a blockquote or list shift with the rest of the page
+  (#3576).** A sidebar's `> ####` under `###` sections stayed an `<h4>` under the new `<h2>`s, so
+  the build reported a skipped level and DAISY Ace failed the ePub on heading order. A heading
+  inside a blockquote still never becomes the page's title.
+- **DAISY Ace is found on `PATH` (#3577).** The docs said `bun add -d @daisy/ace`, which brings
+  Electron and Puppeteer into the project, and their advisories then failed the build's own
+  dependency audit. Install it globally (`npm install -g @daisy/ace`) instead; the build looks in
+  the project first, then on `PATH`.
+- **The axe audit is about twice as fast, and audits the page a reader gets (#3585).** Pages are
+  audited four at a time (this site: 80s to 43s). Each is audited once it stops adding elements,
+  rather than after a fixed 300ms, which on a busy machine caught pages half-built. And the
+  audit no longer starts the doc browser's background test runner, which runs on localhost and
+  never on a deployed site. `TOSIJS_A11Y_AUDIT=off` skips the audit and the Ace check for one
+  build while the mode stays on; the ePub then claims no conformance.
+- **Section stubs are not written where they cannot be read, or mid-edit (#3584).** A page whose
+  `parent` names a missing doc gets a stub section doc in `sectionsDir`. When `sectionsDir` is
+  outside every `docPaths` entry, the build now warns and writes nothing, since the stub would
+  never be read back. Stubs are created only on the first build in a process, so a parent that
+  disappears for a second during a rename no longer leaves files behind. Each stub written is
+  named in the build output.
+- **`preview.host` is optional, and the preview docs no longer say `host` is required (#3586).**
+  The type has allowed a config with only `preview.tunnel` since 1.10.0, but the doc comment and
+  the reference table still said so. `as any` casts written for it can go.
+- **The axe audit waits for a page marked `aria-busy`, and one slow page no longer ends it.** A
+  page that is still loading (a 3D scene fetching large models, say) marks an element
+  `aria-busy="true"`, the standard ARIA signal, and is waited for up to 30 seconds; other pages
+  are audited once they have stopped adding elements, or after five seconds. A page that never
+  loads, or is still busy at 30 seconds, is listed as not fully checked, and the build makes no
+  claim about it. Before, each page load waited for the network to go idle, so a page that kept
+  downloading for 30 seconds, or that polled, threw and ended the audit of every page. The doc
+  site reference shows a component setting and clearing `aria-busy`.
+- **Every doc page can be scrolled by keyboard, and has a main landmark (#3575).** A page of
+  plain prose had nothing to tab to inside its scrolling content, so a keyboard user could not
+  scroll it, which axe reports as `scrollable-region-focusable` (Learn 3D: 71 of 126 pages). The
+  content scroller is now focusable, and it is the page's main landmark, which the doc site did not
+  have at all: a screen reader's "jump to main content" now works. A doc browser embedded in
+  another page stays focusable without claiming that page's main landmark.
+- **`buildSite` says it needs `happy-dom` before it starts (#3600).** Without it, the build died
+  partway through with "Cannot find package 'happy-dom'" from a file inside tosijs-ui. It now
+  stops before writing anything and prints the install command. `happy-dom` stays an optional
+  peer: a project that only uses the components never needs it.
+- **TJS's own doc comments, `/# … #/`, become documentation (#3601).** In `.tjs` and `.ajs`
+  files they are read in source order with any `/*#` blocks. tjs-lang finds them, so its grammar
+  applies exactly; that needs a tjs-lang that exports `findDocCommentSpans` (requested). With an
+  older one, the build names each file whose `/#` comments it could not read, instead of
+  dropping the page silently. `.ajs` files are now scraped for `/*#` blocks too.
+
+### Live examples under a strict CSP
+
+- **`liveExamples: 'no-code'` (tosijs-ui#246):** only `html` and `css` fences run; script,
+  dialect and `test` fences are shown as highlighted code. Nothing on a no-code example's path
+  constructs a `Function` or calls `eval` (no Console tab, since its REPL evaluates), so a doc
+  system served under a CSP without `'unsafe-eval'` runs its examples.
+- **`setExampleHooks({ sanitize, hydrate, chat })`** from `tosijs-ui/live-example`:
+  `sanitize(fragment, example)` sees the markup parsed but inert before it enters the preview;
+  `hydrate(preview, signal, example)` runs once it is in (after any script), with a signal that
+  aborts on the next run; `chat(session)` builds a Chat tab whose `session.apply({ html, css })`
+  runs like an edit. They apply in every mode.
+- **`exampleTabs`** in the site config, and `{"tabs": [...]}` per fence, choose the code panel's
+  tabs from `js`, `html`, `css`, `test`, `console`, `chat`. Under no-code the default is
+  `['html', 'css', 'chat']`. A misspelt tab fails the build by name.
+- **`setExamplePolicy` and `setExampleTabs` are exported** from `tosijs-ui/live-example`; the
+  first was documented as callable but never exported.
+- **`exampleModules: true` (tosijs-ui#245):** the build writes each script example (`js`, `ts`,
+  `tjs`) to `<outputDir>/_examples/<hash>.js`, and the page runs an unedited inline example by
+  `import()`-ing its module instead of compiling its source, so it runs under
+  `script-src 'self'` with no `'unsafe-eval'`. The module's lines are the example's own, so an
+  error still names its line. Under such a policy, an EDITED example (which must compile) says
+  the policy refused it and that reverting runs the published example, instead of an engine
+  message about `'unsafe-eval'`.
+
+### The doc site's SEO surface
+
+- **Share images (#3562).** A page's share image (og:image, twitter:image) is its own `image`,
+  else its card at `/og/<slug>.webp|png|jpg` when the static files have one, else the site's
+  `ogImage`, else the home page's card. The cards `bun run og` wrote were linked from no page,
+  so every share unfurled without an image. A local share image gets `og:image:width`/`height`,
+  read from its header (PNG, WebP, JPEG, GIF), and every one gets an alt of the page's title.
+- **`bun run og`** cards only the home page and pages with a live example and no `image` of
+  their own; every other page shares the home page's card instead of getting a text-only one.
+  It encodes with cwebp (`brew install webp`): Homebrew's ffmpeg 8 has no webp encoder, so every
+  card failed to encode. A card with an example screenshot gives its title and description the
+  left column (they ran under the shot) and captures the preview without the example's toolbar,
+  and a page whose example cannot be captured now fails the run (exit 1) instead of quietly
+  getting a text-only card.
+- **`sitemap.xml` entries carry `lastmod` (#3565):** the last commit that touched the page's
+  source, or its mtime while it has uncommitted edits. Without git there is none, rather than
+  an invented one.
+- **JSON-LD names the page properly** (its headTitle without the project suffix), with
+  `dateModified`, `datePublished` (frontmatter `date`) and `author` (the page's, else
+  `epub.author`); a page inside a nav section gets a `BreadcrumbList`; the home page is the
+  `WebSite` rather than a `TechArticle`.
+- **`kind: 'book'`** in the site config: pages become `Chapter`s of a `Book`, numbered in
+  reading order, and link the previous and next page with `<link rel="prev/next">`.
+- **`llms.txt` follows llmstxt.org (#3564):** an H1, the site description as a `>` summary,
+  then `- [title](url): description` lines in nav order, with each nav section as its own `##`
+  section. Links are the pages' markdown copies, and descriptions are the ones the pages' heads
+  carry. **`llms-full.txt`** is the whole indexed corpus as one markdown file, in nav order,
+  each page followed by its URL, written to the output dir only.
+- **The metadata lint (#3563):** every build lists pages whose title or description needs
+  writing — missing, too short or long, derived from a paragraph cut mid-sentence, or shared
+  with another page. It warns (once per change under `bun start`) and fails a `strict` build.
+  A description derived from a page's first paragraph no longer keeps `_emphasis_`,
+  `~~strikethrough~~`, wikilinks or footnote markers, and is cut at 155 characters, where
+  search results cut it.
+- **`bun run og` no longer stops the dev server it captures from.** It wrote each card into the
+  watched `demo/static/og/` as it went, and the server's rebuild-loop guard shut the server down
+  part way through; cards are now written elsewhere and copied in at the end. It also removes
+  haltija's dev widget before capturing, which sat in the corner of every card.
+
+### Components
+
+- **Elastic table columns (snowfox, #3858).** A `<tosi-table>` column with `elastic: true` takes
+  a share of the space left over when the columns add up to less than the table's width, in
+  proportion to its `width`, and never shrinks below it, so a narrow table still scrolls. The
+  table's `elastic` attribute makes every unpinned column elastic unless it says
+  `elastic: false`, which covers columns inferred from the data. Pinned columns are never
+  elastic, and elastic columns take precedence over `full-width-header`. Dragging an elastic
+  column's edge keeps the edge under the pointer, and a stretched column's edge can be grabbed
+  where it is drawn.
+- **`--tosi-table-fill`** paints the space to the right of a table's columns when they don't
+  fill it. Transparent by default.
+- **`<tosi-palette>`'s `localizer` localizes every caption the palette owns (tosijs-ui#247):** the
+  footer's Navigate, Select and Close, the dialog's Search and the clear button's Clear names,
+  `emptyCaption` and `quickLinksCaption`, not only the placeholder.
+- **`tosijs-make-icons` keeps open paths open (tosijs-ui#249).** In a folder that is both stroked
+  and filled (`stroked/filled/`), an element's own `fill="none"`, or `fill:none` in its style, is
+  kept: those icons' fill is a knockout, and `fill="none"` is what keeps an arc or arrowhead
+  open. It also no longer swallows the rest of an icon after a `style` whose last fill or stroke
+  had no trailing `;`, and drops a style left empty. Checked against tosijs-3d's icons: the
+  output matches their post-pass, which can now go.
+
+### Doc system and build
+
+- **A memory-routed doc browser follows `/slug/` links in memory (tosijs-ui#243).** It resolved
+  only `?filename`, yet rewrote every internal link to `/slug/` itself, so every doc-to-doc link
+  in an embedded browser was a full page load. A `/slug/#heading` link scrolls to the heading, and
+  canonicalising a content link keeps its `#heading`; it used to drop it.
+- **A build handed to a running dev server is refused when the server has a different site
+  config (#3772, tosijs-ui#241).** The server builds the config it was started with, so editing
+  the config used to produce a build of the old one that reported success. Now `bun run build`
+  says to restart the server. The dev server also watches the `bundleEntry` file, so editing it
+  rebuilds the hydration bundle.
+- **`buildSite` no longer rewrites the `<!-- toc -->` block in a section's source `.md` on every
+  build (#3733),** which left every adopter with section pages a dirty tree after building. The
+  list of child pages is filled in the built page (and its book variant) only; a section with no
+  `<!-- toc -->` marker still gets the list at the end. A committed block's old list is harmless,
+  but can be emptied to the bare markers.
+- **A `liveExamples` or `kind` value the build does not know fails the build**, naming the allowed
+  values. `'nocode'` silently ran every example, on a site meant to run none.
 
 ## 1.16.41
 

package/README.md

@@ -1,6 +1,6 @@
 # tosijs-ui
 
-<!--{ "pin": "top", "order": 0, "layout": "full-width", "headTitle": "tosijs-ui — robust, standards-based web components", "description": "A small, fast library of standards-based web components (data tables, dialogs, forms, rich text, carousels, and more) built on tosijs — smaller and faster than a React app, with no virtual DOM.", "keywords": "web components, custom elements, tosijs, data table, dialog, form, rich text, no virtual dom" }-->
+<!--{ "pin": "top", "order": 0, "layout": "full-width", "headTitle": "tosijs-ui — robust, standards-based web components", "description": "Standards-based web components (data tables, dialogs, forms, rich text, carousels) built on tosijs: smaller and faster than React, with no virtual DOM.", "keywords": "web components, custom elements, tosijs, data table, dialog, form, rich text, no virtual dom" }-->
 
 [ui.tosijs.net live demo](https://ui.tosijs.net) | [tosijs](https://tosijs.net) | [discord](https://discord.gg/ramJ9rgky5) | [github](https://github.com/tonioloewald/tosijs-ui#readme) | [npm](https://www.npmjs.com/package/tosijs-ui)
 

package/bin/make-icon-data.js

@@ -32,6 +32,9 @@ Folder names control CSS classes on the generated SVGs:
 - `color/` — icons with baked-in colors (class `color`, fill/stroke preserved)
 - `stroked/` — stroke-only icons (class `stroked`, fill styles removed)
 - `filled/` — fill-only icons (class `filled`, stroke styles removed)
+- a folder that is both (`stroked/filled/`) — classes `stroked filled`; fill colours are
+  removed (the renderer supplies the fill), but an element's own `fill="none"` (or
+  `fill:none` in its style) is kept, because that is what keeps an arc or arrowhead open
 
 ### Directional folders
 
@@ -195,6 +198,9 @@ function getDirectionConfig(dir) {
   return DIRECTION_FOLDERS[dirName] || null
 }
 
+// Stands in for an element's `fill="none"` while the strips run (see keepsOpenPaths).
+const OPEN_PATH_MARK = 'data-tosi-open-path'
+
 function generateDirectionalRedirects(name, dirConfig) {
   // Find the base direction word in the camelCase name
   const baseDir = dirConfig.base
@@ -239,7 +245,28 @@ function findIcons(dirs, ignore = []) {
               .replace(/-([a-z0-9])/g, (_, char) => char.toLocaleUpperCase())
           )
         const name = names[0]
-        let svgSource = content
+        /*
+        In a folder that is BOTH stroked and filled, a fill is a knockout (the renderer sets
+        it on the root) and an element's own `fill="none"` is what keeps a path OPEN: an arc,
+        an arrowhead. Every strip below removes fills, so such an element filled with the
+        knockout colour, and an open arc painted a lens over whatever it crossed
+        (tosijs-ui#249). Mark those elements first; the mark survives the strips and becomes
+        `fill="none"` again at the end. The root <svg> is not an element here: its fill is
+        the folder's to decide.
+        */
+        const keepsOpenPaths = dir.includes('stroked') && dir.includes('filled')
+        let svgSource = (
+          keepsOpenPaths
+            ? content.replace(/<(?!svg\b)(\w+)\b[^>]*>/g, (tag) =>
+                /\bfill="none"|\bfill\s*:\s*none/.test(tag)
+                  ? tag
+                      .replace(/\s?\bfill="none"/, '')
+                      .replace(/\bfill\s*:\s*none\s*;?/, '')
+                      .replace(/^<\w+/, (open) => `${open} ${OPEN_PATH_MARK}`)
+                  : tag
+              )
+            : content
+        )
           .replace(/(<\?xml.*?>|<!DOCTYPE.*?>)\s?/g, '')
           .replace(/<svg.*?>/, (a) =>
             a.replace(
@@ -280,7 +307,7 @@ function findIcons(dirs, ignore = []) {
           out of the tinting path for an unrelated reason (tosijs-ui#30).
           */
           svgSource = svgSource.replace(
-            /(fill|stroke)(?!-rule)(-\w+)?:[^;]+;?/g,
+            /(fill|stroke)(?!-rule)(-\w+)?:[^;"]+;?/g,
             ''
           )
         }
@@ -289,12 +316,20 @@ function findIcons(dirs, ignore = []) {
         // survives every strip. `clip-rule` likewise.
         if (dir.includes('stroked')) {
           classes.push('stroked')
-          svgSource = svgSource.replace(/(fill)(?!-rule)(-\w+)?:[^;]+;?/g, '')
+          svgSource = svgSource.replace(/(fill)(?!-rule)(-\w+)?:[^;"]+;?/g, '')
         }
         if (dir.includes('filled')) {
           classes.push('filled')
-          svgSource = svgSource.replace(/(stroke)(?!-rule)(-\w+)?:[^;]+;?/g, '')
+          svgSource = svgSource.replace(
+            /(stroke)(?!-rule)(-\w+)?:[^;"]+;?/g,
+            ''
+          )
+        }
+        if (keepsOpenPaths) {
+          svgSource = svgSource.replaceAll(OPEN_PATH_MARK, 'fill="none"')
         }
+        // A style that held only colours is empty now.
+        svgSource = svgSource.replace(/\sstyle=""/g, '')
         if (classes.length) {
           svgSource = svgSource.replace(
             /^<svg/,

package/dist/ab-test.js

@@ -66,7 +66,7 @@ randomize()
 }
 
 .preview tosi-ab[not] p {
-  background: red;
+  background: #c00;
 }
 ```
 
@@ -75,7 +75,7 @@ randomize()
 - `condition` attribute determines which value in `AbTest.conditions` controls the element
 - `not` reverses the condition (so `<tosi-ab not condition="foo">` will be visible if `conditions.foo` is `false`)
 */
-/*{ "parent": "Helper Libraries", "description": "<tosi-ab> shows or hides content by condition, so you can run A/B tests or feature flags by setting AbTest.conditions." }*/
+/*{ "headTitle": "<tosi-ab> A/B tests and feature flags — tosijs-ui", "parent": "Helper Libraries", "description": "<tosi-ab> shows or hides content by condition, so you can run A/B tests or feature flags by setting AbTest.conditions." }*/
 import { withAttributes } from 'tosijs';
 const abTestConditions = {};
 export class AbTest extends withAttributes({

package/dist/affix.js

@@ -142,7 +142,7 @@ and `describePlacement({ position, inside })` convert between the attribute and
 `{ position, inside }`, and `affixCell(placement)` gives the grid cell and alignment a
 placement takes.
 */
-/*{ "parent": "Components", "description": "<tosi-affix> attaches a toolbar, badge or caption to one edge of its content, laid out beside it rather than floated, so it never covers it." }*/
+/*{ "headTitle": "<tosi-affix> edge toolbars and badges — tosijs-ui", "parent": "Components", "description": "<tosi-affix> attaches a toolbar, badge or caption to one edge of its content, laid out beside it rather than floated, so it never covers it." }*/
 import { Component, elements } from 'tosijs';
 const { slot } = elements;
 const POSITIONS = new Set([

package/dist/carousel.d.ts

@@ -36,7 +36,7 @@ export declare class TosiCarousel extends TosiCarousel_base {
             _carouseButtonWidth: number;
             _carouselDotCurrentColor: string;
             _carouselDotSize: number;
-            _carouselDotSpacing: string;
+            _carouselDotSpacing: number;
             _carouselDotHitSize: number;
             _carouselProgressPadding: number;
             _carouselDotTransition: string;
@@ -127,6 +127,10 @@ export declare class TosiCarousel extends TosiCarousel_base {
         ':host .dot.current::before': {
             background: string;
         };
+        ':host::part(scroller):focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
         ':host .dot:focus-visible::before': {
             boxShadow: string;
         };
@@ -140,6 +144,7 @@ export declare class TosiCarousel extends TosiCarousel_base {
     easing: (t: number) => number;
     indicateCurrent: () => void;
     snapPosition: () => void;
+    handleScrollerKey: (event: Event) => void;
     back: () => void;
     forward: () => void;
     handleDotClick: (event: Event) => void;

package/dist/carousel.js

@@ -62,7 +62,9 @@ This is a minimalist carousel component that supports the usual stuff.
   would ever end it.
 - **The dots are tappable:** each draws a `--carousel-dot-size` dot (8px) but answers taps across
   its whole slot and `--carousel-dot-hit-size` (44px) tall, so a tap that just misses a dot
-  doesn't open the slide underneath.
+  doesn't open the slide underneath. Dots sit 24px apart (`--carousel-dot-spacing`, 16px), the
+  spacing WCAG 2.5.8 asks of a target smaller than 24px.
+- **The keyboard reaches the slides:** the slide strip takes focus, and ← and → page it.
 - **Resizing keeps the current slide in place** (rotation, a window resize) instead of leaving
   it partway into the next one.
 
@@ -173,7 +175,12 @@ export class TosiCarousel extends withAttributes({
             _carouseButtonWidth: 48,
             _carouselDotCurrentColor: '#0008',
             _carouselDotSize: 8,
-            _carouselDotSpacing: vars.carouselDotSize,
+            /*
+            16px of spacing puts the dots 24px apart: WCAG 2.5.8 takes a target under 24px as long
+            as a 24px circle on each one touches no neighbour, and at 16px apart they overlapped
+            (#3573).
+            */
+            _carouselDotSpacing: 16,
             // The tappable area around each dot; the dot itself stays --carousel-dot-size (#204).
             _carouselDotHitSize: 44,
             _carouselProgressPadding: 12,
@@ -276,6 +283,10 @@ export class TosiCarousel extends withAttributes({
         ':host .dot.current::before': {
             background: vars.carouselDotCurrentColor,
         },
+        ':host::part(scroller):focus-visible': {
+            outline: `2px solid ${vars.carouselButtonActiveColor}`,
+            outlineOffset: '-2px',
+        },
         ':host .dot:focus-visible::before': {
             boxShadow: `0 0 0 2px ${vars.carouselButtonActiveColor}`,
         },
@@ -311,6 +322,18 @@ export class TosiCarousel extends withAttributes({
         }
         this.lastAutoAdvance = Date.now();
     };
+    handleScrollerKey = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        const { key } = event;
+        if (key === 'ArrowLeft')
+            this.back();
+        else if (key === 'ArrowRight')
+            this.forward();
+        else
+            return;
+        event.preventDefault();
+    };
     back = () => {
         this.page = this.page > 0 ? this.page - 1 : this.lastPage;
     };
@@ -359,7 +382,12 @@ export class TosiCarousel extends withAttributes({
         }
     }
     content = () => [
-        div({ part: 'pager' }, button({ title: 'previous slide', part: 'back' }, icons.chevronLeft()), div({ title: 'slides', role: 'group', part: 'scroller' }, div({ part: 'grid' }, slot())), button({ title: 'next slide', part: 'forward' }, icons.chevronRight())),
+        div({ part: 'pager' }, button({ title: 'previous slide', part: 'back' }, icons.chevronLeft()), div(
+        /*
+        Focusable, so the strip can be scrolled from the keyboard (#3573); ← and → page it,
+        like the arrow buttons.
+        */
+        { title: 'slides', role: 'group', part: 'scroller', tabindex: 0 }, div({ part: 'grid' }, slot())), button({ title: 'next slide', part: 'forward' }, icons.chevronRight())),
         div({ title: 'choose slide to display', role: 'group', part: 'progress' }),
     ];
     connectedCallback() {
@@ -371,6 +399,7 @@ export class TosiCarousel extends withAttributes({
         back.addEventListener('click', this.back);
         forward.addEventListener('click', this.forward);
         scroller.addEventListener('scroll', this.indicateCurrent);
+        scroller.addEventListener('keydown', this.handleScrollerKey);
         progress.addEventListener('click', this.handleDotClick);
         this.addEventListener('pointerenter', this.handlePointerEnter);
         this.addEventListener('pointerleave', this.handlePointerLeave);

package/dist/code-editor-cm.d.ts

@@ -53,6 +53,8 @@ export interface CmOptions {
     onChange?: (value: string) => void;
     /** style-injection root — pass the host's ShadowRoot when mounted in shadow DOM */
     root?: Document | ShadowRoot;
+    /** the editable area's accessible name */
+    label?: string;
 }
 /** Create a CodeMirror editor mounted in `parent`, returning an editor-agnostic handle. */
 export declare function createCmEditor(parent: HTMLElement, opts?: CmOptions): CmHandle;

package/dist/code-editor-cm.js

@@ -13,7 +13,7 @@ layered in separately and only when tjs-lang is installed.
 import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, tooltips, } from '@codemirror/view';
 import { EditorState, Compartment, Annotation, Transaction, } from '@codemirror/state';
 import { indentWithTab, history, defaultKeymap, historyKeymap, undo, redo, undoDepth, redoDepth, } from '@codemirror/commands';
-import { indentUnit, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, } from '@codemirror/language';
+import { indentUnit, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, defaultHighlightStyle, HighlightStyle, bracketMatching, } from '@codemirror/language';
 import { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap, } from '@codemirror/autocomplete';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 import { lintKeymap } from '@codemirror/lint';
@@ -44,9 +44,17 @@ const isDarkMode = () => typeof document !== 'undefined' &&
  * semantic to preserve — and tightening it after 1.7 is on `latest` would be breaking.
  */
 const programmatic = Annotation.define();
+/*
+CodeMirror's light style, with its one colour under WCAG AA's 4.5:1 darkened (#3572): type and
+namespace names are #085, 4.43:1 on a near-white editor. #075 is 5.5:1 and reads the same.
+*/
+const AA_COLORS = { '#085': '#075' };
+const lightHighlightStyle = HighlightStyle.define(defaultHighlightStyle.specs.map((spec) => typeof spec.color === 'string' && AA_COLORS[spec.color]
+    ? { ...spec, color: AA_COLORS[spec.color] }
+    : spec));
 const highlightFor = (dark) => dark
     ? syntaxHighlighting(oneDarkHighlightStyle)
-    : syntaxHighlighting(defaultHighlightStyle, { fallback: true });
+    : syntaxHighlighting(lightHighlightStyle, { fallback: true });
 /** Map a `<tosi-code mode>` value to a CodeMirror language extension. */
 export function languageForMode(mode) {
     switch (mode) {
@@ -209,6 +217,9 @@ export function createCmEditor(parent, opts = {}) {
                     highlight.of(highlightFor(isDarkMode())),
                     language.of(langExt),
                     readonly.of(EditorState.readOnly.of(!!opts.readOnly)),
+                    EditorView.contentAttributes.of({
+                        'aria-label': opts.label || 'code editor',
+                    }),
                     EditorView.updateListener.of((u) => {
                         if (!u.docChanged || !opts.onChange)
                             return;

package/dist/code-editor.js

@@ -409,6 +409,10 @@ export class CodeEditor extends withAttributes({
                     mode: this.mode,
                     readOnly: this.disabled,
                     root: this.shadowRoot ?? undefined,
+                    // The editable area is what a screen reader reaches; the host's name is its name.
+                    label: this.getAttribute('aria-label') ||
+                        this.title ||
+                        (this.mode ? `${this.mode} code` : ''),
                     onChange: (value) => this.dispatchEvent(new CustomEvent('change', { detail: { value } })),
                 });
                 this._handle = handle;

package/dist/crud.js

@@ -304,7 +304,7 @@ for every instance; each one re-checks it the next time it is resized.
 - `change` — the selection or the saved record changed.
 - `error` — a store operation failed.
 */
-/*{ "parent": "Components", "description": "<tosi-crud> pairs a searchable table with a schema-driven form over a store you supply (REST, IndexedDB or an array) for list-and-edit screens." }*/
+/*{ "headTitle": "<tosi-crud> list-and-edit screens — tosijs-ui", "parent": "Components", "description": "<tosi-crud> pairs a searchable table with a schema-driven form over a store you supply (REST, IndexedDB or an array) for list-and-edit screens." }*/
 import { elements, withAttributes } from 'tosijs';
 import { tosiTable } from './data-table.js';
 import { tosiSchemaForm } from './schema-form.js';