@ascribed/elements 0.2.0 → 0.2.1-next.11

package/CONTRACT.md

@@ -12,11 +12,11 @@ The site output (SPEC §9.4) is markdown plus custom elements. This contract is
 | Project widget | [An element named after the widget](#6-project-widgets), and `<ascribe-group>` for groups | The project's own; `<ascribe-group>` is the library's |
 | Glossary term | [An ordinary link](#7-glossary-terms), marked with `data-ascribe-term` | Optional CSS |
 
-A change to this contract changes the site emitter (`crates/tessera-emit`), the element library, and the site-render fixtures (`tests/render/`) together.
+A change to this contract changes the site emitter (`crates/ascribe-emit`), the element library, and the site-render fixtures (`tests/render/`) together.
 
 ## 0. Rules for every element
 
-**Light DOM, CSS, no behavior.** Elements render into the light DOM, so site styles apply and content stays visible to search engines and assistive technology (SPEC §9.7). They're styled with CSS and themed with custom properties whose names start with `--ascribe-`; the package README lists them. Only `<ascribe-tabs>` runs JavaScript. Everything else must render meaningfully with the library's CSS and no script, and must stay readable with neither.
+**Light DOM, CSS, no behavior.** Elements render into the light DOM, so site styles apply and content stays visible to search engines and assistive technology (SPEC §9.7). They're styled with CSS and themed with custom properties whose names start with `--ascribe-`; the package README lists them. The names are part of this contract; their default values aren't, and a release may change them, noting it in the changelog. Only `<ascribe-tabs>` runs JavaScript. Everything else must render meaningfully with the library's CSS and no script, and must stay readable with neither.
 
 **How the emitter writes elements.** Custom elements are raw HTML blocks in CommonMark, so the layout matters:
 

package/README.md

@@ -29,6 +29,12 @@ directly.
 Set any of these custom properties on `:root`, or on any ancestor of the
 elements. Defaults are in `css/style.css`.
 
+The names are part of the [contract](CONTRACT.md) and don't change. The
+default values are Ascribe's design tokens, shared with review and the HTML
+report, and a release may change them; the changelog says so under **Behavior
+change**, with the previous values. A site that needs a fixed look sets the
+properties itself.
+
 | Group | Properties |
 |---|---|
 | Type | `--ascribe-font-family`, `--ascribe-font-size-small`, `--ascribe-font-weight-strong` |
@@ -108,6 +114,7 @@ ascribe-availability::before {
 `pnpm --filter @ascribed/elements test` compiles the library and drives Chromium
 through Playwright in Chromium, Firefox, and WebKit. Install them with
 `pnpm --filter @ascribed/elements exec playwright-core install chromium firefox webkit`.
+CI runs them in Playwright's container image, which has all three.
 Chromium uses `/opt/pw-browsers/chromium` when present, or the binary in
 `ASCRIBE_CHROMIUM`. `ASCRIBE_ENGINES=chromium` (a comma-separated subset) runs
 fewer engines on a machine that can't install all three.

package/css/style.css

@@ -19,53 +19,65 @@
   --ascribe-font-weight-strong: 600;
 
   /* Spacing, borders */
+  --ascribe-border-width: 1px;
+  /* Generated from design/tokens.toml by scripts/design/tokens.ts: spacing, light. */
   --ascribe-space: 1rem;
   --ascribe-space-small: 0.5rem;
-  --ascribe-border-width: 1px;
-  --ascribe-border-color: #d0d7de;
+  --ascribe-border-color: #e3e6ec;
   --ascribe-radius: 0.375rem;
+  /* End of generated spacing. */
 
   /* Surfaces and text */
   --ascribe-text-color: inherit;
-  --ascribe-muted-color: #57606a;
   --ascribe-surface-color: transparent;
+  /* Generated from design/tokens.toml by scripts/design/tokens.ts: text, light. */
+  --ascribe-muted-color: #676c75;
+  /* End of generated text. */
 
   /* Note types: an accent color and a tinted background each. */
-  --ascribe-note-color: #0969da;
-  --ascribe-note-background: #ddf4ff;
-  --ascribe-tip-color: #1a7f37;
-  --ascribe-tip-background: #dafbe1;
-  --ascribe-important-color: #8250df;
-  --ascribe-important-background: #fbefff;
-  --ascribe-warning-color: #9a6700;
-  --ascribe-warning-background: #fff8c5;
-  --ascribe-caution-color: #cf222e;
-  --ascribe-caution-background: #ffebe9;
+  /* Generated from design/tokens.toml by scripts/design/tokens.ts: notes, light. */
+  --ascribe-note-color: #474dc6;
+  --ascribe-note-background: #f5f6fe;
+  --ascribe-tip-color: #057256;
+  --ascribe-tip-background: #e1fff2;
+  --ascribe-important-color: #932f8e;
+  --ascribe-important-background: #fff2fd;
+  --ascribe-warning-color: #845502;
+  --ascribe-warning-background: #fef5eb;
+  --ascribe-caution-color: #a73303;
+  --ascribe-caution-background: #fef4f1;
+  /* End of generated notes. */
 
   /* Steps */
-  --ascribe-steps-color: #0969da;
   --ascribe-steps-marker-size: 1.75rem;
+  /* Generated from design/tokens.toml by scripts/design/tokens.ts: steps, light. */
+  --ascribe-steps-color: #5962e8;
   --ascribe-steps-marker-text-color: #ffffff;
+  /* End of generated steps. */
 
   /* Tabs */
-  --ascribe-tab-color: #57606a;
-  --ascribe-tab-active-color: #0969da;
-  --ascribe-tab-focus-color: #0969da;
-  --ascribe-tab-hover-background: #f6f8fa;
+  /* Generated from design/tokens.toml by scripts/design/tokens.ts: tabs, light. */
+  --ascribe-tab-color: #676c75;
+  --ascribe-tab-active-color: #5962e8;
+  --ascribe-tab-focus-color: #5962e8;
+  --ascribe-tab-hover-background: #f7f9fd;
+  /* End of generated tabs. */
 
   /* Availability lifecycle states: an accent color and a background each. */
-  --ascribe-state-color: #57606a;
-  --ascribe-state-background: #eaeef2;
-  --ascribe-state-ga-color: #1a7f37;
-  --ascribe-state-ga-background: #dafbe1;
-  --ascribe-state-preview-color: #8250df;
-  --ascribe-state-preview-background: #fbefff;
-  --ascribe-state-beta-color: #0969da;
-  --ascribe-state-beta-background: #ddf4ff;
-  --ascribe-state-deprecated-color: #9a6700;
-  --ascribe-state-deprecated-background: #fff8c5;
-  --ascribe-state-removed-color: #cf222e;
-  --ascribe-state-removed-background: #ffebe9;
+  /* Generated from design/tokens.toml by scripts/design/tokens.ts: states, light. */
+  --ascribe-state-color: #676c75;
+  --ascribe-state-background: #f0f3f7;
+  --ascribe-state-ga-color: #057256;
+  --ascribe-state-ga-background: #e1fff2;
+  --ascribe-state-preview-color: #932f8e;
+  --ascribe-state-preview-background: #fff2fd;
+  --ascribe-state-beta-color: #474dc6;
+  --ascribe-state-beta-background: #f5f6fe;
+  --ascribe-state-deprecated-color: #845502;
+  --ascribe-state-deprecated-background: #fef5eb;
+  --ascribe-state-removed-color: #a73303;
+  --ascribe-state-removed-background: #fef4f1;
+  /* End of generated states. */
 }
 
 /* The same colors, light and dark. `light-dark()` picks by the element's
@@ -73,40 +85,53 @@
    `light-dark()` keeps the light colors above. */
 @supports (color: light-dark(#000, #fff)) {
   :root {
-    --ascribe-border-color: light-dark(#d0d7de, #3d444d);
-    --ascribe-muted-color: light-dark(#57606a, #9198a1);
-
-    --ascribe-note-color: light-dark(#0969da, #4493f8);
-    --ascribe-note-background: light-dark(#ddf4ff, #121d2f);
-    --ascribe-tip-color: light-dark(#1a7f37, #3fb950);
-    --ascribe-tip-background: light-dark(#dafbe1, #12261e);
-    --ascribe-important-color: light-dark(#8250df, #ab7df8);
-    --ascribe-important-background: light-dark(#fbefff, #1f1a33);
-    --ascribe-warning-color: light-dark(#9a6700, #d29922);
-    --ascribe-warning-background: light-dark(#fff8c5, #272115);
-    --ascribe-caution-color: light-dark(#cf222e, #f85149);
-    --ascribe-caution-background: light-dark(#ffebe9, #2d1517);
-
-    --ascribe-steps-color: light-dark(#0969da, #4493f8);
-    --ascribe-steps-marker-text-color: light-dark(#ffffff, #0d1117);
-
-    --ascribe-tab-color: light-dark(#57606a, #9198a1);
-    --ascribe-tab-active-color: light-dark(#0969da, #4493f8);
-    --ascribe-tab-focus-color: light-dark(#0969da, #4493f8);
-    --ascribe-tab-hover-background: light-dark(#f6f8fa, #151b23);
-
-    --ascribe-state-color: light-dark(#57606a, #9198a1);
-    --ascribe-state-background: light-dark(#eaeef2, #212830);
-    --ascribe-state-ga-color: light-dark(#1a7f37, #3fb950);
-    --ascribe-state-ga-background: light-dark(#dafbe1, #12261e);
-    --ascribe-state-preview-color: light-dark(#8250df, #ab7df8);
-    --ascribe-state-preview-background: light-dark(#fbefff, #1f1a33);
-    --ascribe-state-beta-color: light-dark(#0969da, #4493f8);
-    --ascribe-state-beta-background: light-dark(#ddf4ff, #121d2f);
-    --ascribe-state-deprecated-color: light-dark(#9a6700, #d29922);
-    --ascribe-state-deprecated-background: light-dark(#fff8c5, #272115);
-    --ascribe-state-removed-color: light-dark(#cf222e, #f85149);
-    --ascribe-state-removed-background: light-dark(#ffebe9, #2d1517);
+    /* Generated from design/tokens.toml by scripts/design/tokens.ts: spacing, light-dark. */
+    --ascribe-border-color: light-dark(#e3e6ec, #393d46);
+    /* End of generated spacing. */
+
+    /* Generated from design/tokens.toml by scripts/design/tokens.ts: text, light-dark. */
+    --ascribe-muted-color: light-dark(#676c75, #a5a9b2);
+    /* End of generated text. */
+
+    /* Generated from design/tokens.toml by scripts/design/tokens.ts: notes, light-dark. */
+    --ascribe-note-color: light-dark(#474dc6, #91a1fe);
+    --ascribe-note-background: light-dark(#f5f6fe, #161b3a);
+    --ascribe-tip-color: light-dark(#057256, #22c598);
+    --ascribe-tip-background: light-dark(#e1fff2, #02251a);
+    --ascribe-important-color: light-dark(#932f8e, #ffc8f9);
+    --ascribe-important-background: light-dark(#fff2fd, #2d132b);
+    --ascribe-warning-color: light-dark(#845502, #e0992e);
+    --ascribe-warning-background: light-dark(#fef5eb, #2b1a03);
+    --ascribe-caution-color: light-dark(#a73303, #fe7f57);
+    --ascribe-caution-background: light-dark(#fef4f1, #341308);
+    /* End of generated notes. */
+
+    /* Generated from design/tokens.toml by scripts/design/tokens.ts: steps, light-dark. */
+    --ascribe-steps-color: light-dark(#5962e8, #91a1fe);
+    --ascribe-steps-marker-text-color: light-dark(#ffffff, #0c0f16);
+    /* End of generated steps. */
+
+    /* Generated from design/tokens.toml by scripts/design/tokens.ts: tabs, light-dark. */
+    --ascribe-tab-color: light-dark(#676c75, #a5a9b2);
+    --ascribe-tab-active-color: light-dark(#5962e8, #91a1fe);
+    --ascribe-tab-focus-color: light-dark(#5962e8, #b3c0ff);
+    --ascribe-tab-hover-background: light-dark(#f7f9fd, #13171f);
+    /* End of generated tabs. */
+
+    /* Generated from design/tokens.toml by scripts/design/tokens.ts: states, light-dark. */
+    --ascribe-state-color: light-dark(#676c75, #a5a9b2);
+    --ascribe-state-background: light-dark(#f0f3f7, #22272e);
+    --ascribe-state-ga-color: light-dark(#057256, #22c598);
+    --ascribe-state-ga-background: light-dark(#e1fff2, #02251a);
+    --ascribe-state-preview-color: light-dark(#932f8e, #ffc8f9);
+    --ascribe-state-preview-background: light-dark(#fff2fd, #2d132b);
+    --ascribe-state-beta-color: light-dark(#474dc6, #91a1fe);
+    --ascribe-state-beta-background: light-dark(#f5f6fe, #161b3a);
+    --ascribe-state-deprecated-color: light-dark(#845502, #e0992e);
+    --ascribe-state-deprecated-background: light-dark(#fef5eb, #2b1a03);
+    --ascribe-state-removed-color: light-dark(#a73303, #fe7f57);
+    --ascribe-state-removed-background: light-dark(#fef4f1, #341308);
+    /* End of generated states. */
   }
 
   /* A page that says which it is. */

package/dist/index.js

@@ -3,11 +3,12 @@
 // (`@ascribed/elements/style.css`), which works without this script.
 import { AscribeGroup } from "./group.js";
 import { AscribeTab, AscribeTabs } from "./tabs.js";
+import { ELEMENT_GROUP, ELEMENT_TAB, ELEMENT_TABS } from "./names.js";
 export { AscribeGroup, AscribeTab, AscribeTabs };
 const registry = [
-    ["ascribe-tabs", AscribeTabs],
-    ["ascribe-tab", AscribeTab],
-    ["ascribe-group", AscribeGroup],
+    [ELEMENT_TABS, AscribeTabs],
+    [ELEMENT_TAB, AscribeTab],
+    [ELEMENT_GROUP, AscribeGroup],
 ];
 for (const [name, constructor] of registry) {
     if (!customElements.get(name))

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,mEAAmE;AACnE,qEAAqE;AAErE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAEjD,MAAM,QAAQ,GAAyC;IACrD,CAAC,cAAc,EAAE,WAAW,CAAC;IAC7B,CAAC,aAAa,EAAE,UAAU,CAAC;IAC3B,CAAC,eAAe,EAAE,YAAY,CAAC;CAChC,CAAC;AAEF,KAAK,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,QAAQ,EAAE,CAAC;IAC3C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["// @ascribed/elements: registers Ascribe's custom elements. Only\n// <ascribe-tabs> has behavior; the rest are styled by the CSS file\n// (`@ascribed/elements/style.css`), which works without this script.\n\nimport { AscribeGroup } from \"./group.js\";\nimport { AscribeTab, AscribeTabs } from \"./tabs.js\";\n\nexport { AscribeGroup, AscribeTab, AscribeTabs };\n\nconst registry: [string, CustomElementConstructor][] = [\n  [\"ascribe-tabs\", AscribeTabs],\n  [\"ascribe-tab\", AscribeTab],\n  [\"ascribe-group\", AscribeGroup],\n];\n\nfor (const [name, constructor] of registry) {\n  if (!customElements.get(name)) customElements.define(name, constructor);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,mEAAmE;AACnE,qEAAqE;AAErE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAEjD,MAAM,QAAQ,GAAyC;IACrD,CAAC,YAAY,EAAE,WAAW,CAAC;IAC3B,CAAC,WAAW,EAAE,UAAU,CAAC;IACzB,CAAC,aAAa,EAAE,YAAY,CAAC;CAC9B,CAAC;AAEF,KAAK,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,QAAQ,EAAE,CAAC;IAC3C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["// @ascribed/elements: registers Ascribe's custom elements. Only\n// <ascribe-tabs> has behavior; the rest are styled by the CSS file\n// (`@ascribed/elements/style.css`), which works without this script.\n\nimport { AscribeGroup } from \"./group.js\";\nimport { AscribeTab, AscribeTabs } from \"./tabs.js\";\nimport { ELEMENT_GROUP, ELEMENT_TAB, ELEMENT_TABS } from \"./names.js\";\n\nexport { AscribeGroup, AscribeTab, AscribeTabs };\n\nconst registry: [string, CustomElementConstructor][] = [\n  [ELEMENT_TABS, AscribeTabs],\n  [ELEMENT_TAB, AscribeTab],\n  [ELEMENT_GROUP, AscribeGroup],\n];\n\nfor (const [name, constructor] of registry) {\n  if (!customElements.get(name)) customElements.define(name, constructor);\n}\n"]}

package/dist/names.d.ts

@@ -0,0 +1,95 @@
+/** `<ascribe-note>`: a note (packages/elements/CONTRACT.md §1). */
+export declare const ELEMENT_NOTE = "ascribe-note";
+/** `<ascribe-steps>`: a procedure (packages/elements/CONTRACT.md §2). */
+export declare const ELEMENT_STEPS = "ascribe-steps";
+/** `<ascribe-tabs>`: a variant group of several arms (packages/elements/CONTRACT.md §3). */
+export declare const ELEMENT_TABS = "ascribe-tabs";
+/** `<ascribe-tab>`: one arm of `<ascribe-tabs>` (packages/elements/CONTRACT.md §3). */
+export declare const ELEMENT_TAB = "ascribe-tab";
+/** `<ascribe-availability>`: a badge or filter (packages/elements/CONTRACT.md §4). */
+export declare const ELEMENT_AVAILABILITY = "ascribe-availability";
+/**
+ * `<ascribe-availability-target>`: one target of `<ascribe-availability>`
+ * (packages/elements/CONTRACT.md §4).
+ */
+export declare const ELEMENT_AVAILABILITY_TARGET = "ascribe-availability-target";
+/** `<ascribe-group>`: a project widget's group (packages/elements/CONTRACT.md §6). */
+export declare const ELEMENT_GROUP = "ascribe-group";
+/** `<ascribe-attributes>`: the attribute marker (site-render contract §1). */
+export declare const ELEMENT_ATTRIBUTES = "ascribe-attributes";
+/** The name an anchor comment starts with, `<!--ascribe-anchor` (site-render contract §7.3). */
+export declare const COMMENT_ANCHOR = "ascribe-anchor";
+/** A block's source anchor (site-render contract §7.1). */
+export declare const DATA_SOURCE = "data-ascribe-source";
+/** The includes a block came through (site-render contract §7.1). */
+export declare const DATA_VIA = "data-ascribe-via";
+/** A glossary term's id, on its link (packages/elements/CONTRACT.md §7). */
+export declare const DATA_TERM = "data-ascribe-term";
+/** The element the report draws into. */
+export declare const ID_REPORT = "ascribe-review";
+/** The `<script type="application/json">` holding the report's data. */
+export declare const ID_REPORT_DATA = "ascribe-review-data";
+/**
+ * The page's light or dark scheme, `light` or `dark`, on the root
+ * element (docs/content/guides/astro.md).
+ */
+export declare const DATA_SCHEME = "data-ascribe-scheme";
+/** On a marked page's root: what it shows, `changes`, `will`, or `was`. */
+export declare const DATA_SHOW = "data-ascribe-show";
+/**
+ * On a marked block: its change, `added`, `changed`, `removed`, `moved`,
+ * or `moved-from`.
+ */
+export declare const DATA_CHANGE = "data-ascribe-change";
+/** On every element review adds to the page, so it can be taken away again. */
+export declare const DATA_UI = "data-ascribe-ui";
+/** On a change's label: the change. */
+export declare const DATA_LABEL = "data-ascribe-label";
+/** On a tab's hint: `added` or `changed`. */
+export declare const DATA_HINT = "data-ascribe-hint";
+/** On a moved block: the id its "moved from" link points at. */
+export declare const DATA_MOVE = "data-ascribe-move";
+/** On a changed block whose copy as it was follows it. */
+export declare const DATA_HAS_WAS = "data-ascribe-has-was";
+/** On a copy of a block as it was, shown only with the page as it was. */
+export declare const DATA_WAS_ONLY = "data-ascribe-was-only";
+/** On a changed, removed, or moved block: its source anchor as it was. */
+export declare const DATA_WAS_SOURCE = "data-ascribe-was-source";
+/** On the elements that hold the threads' overlay. */
+export declare const DATA_OVERLAY = "data-ascribe-overlay";
+/** On the style element the Astro dev toolbar adds for the marks. */
+export declare const DATA_REVIEW = "data-ascribe-review";
+/** On the root of a page whose changes are marked. */
+export declare const CLASS_MARKS = "ascribe-marks";
+/** A change's label. */
+export declare const CLASS_LABEL = "ascribe-label";
+/** A label placed before its block rather than over it. */
+export declare const CLASS_LABEL_BEFORE = "ascribe-label-before";
+/** Inserted text. */
+export declare const CLASS_INS = "ascribe-ins";
+/** Deleted text. */
+export declare const CLASS_DEL = "ascribe-del";
+/** A removed block. */
+export declare const CLASS_REMOVED = "ascribe-removed";
+/** A removed block's content. */
+export declare const CLASS_REMOVED_BODY = "ascribe-removed-body";
+/** The button that shows or collapses a removed block. */
+export declare const CLASS_TOGGLE = "ascribe-toggle";
+/** On a removed block that's shown. */
+export declare const CLASS_OPEN = "ascribe-open";
+/** What stands where a moved block was. */
+export declare const CLASS_MOVED_FROM = "ascribe-moved-from";
+/** The note with a moved block's link. */
+export declare const CLASS_MOVE_NOTE = "ascribe-move-note";
+/** A move note after its block, not inside it. */
+export declare const CLASS_MOVE_AFTER = "ascribe-move-after";
+/** The link between a moved block and where it was. */
+export declare const CLASS_MOVE_LINK = "ascribe-move-link";
+/** A moved block's copy as it was, where it was. */
+export declare const CLASS_WAS_COPY = "ascribe-was-copy";
+/** A tab's hint that it holds changes. */
+export declare const CLASS_HINT = "ascribe-hint";
+/** A block flashed after going to it. */
+export declare const CLASS_FLASH = "ascribe-flash";
+/** The tip that shows a block's source on hover and focus. */
+export declare const CLASS_WHERE = "ascribe-where";

package/dist/names.js

@@ -0,0 +1,99 @@
+// The names Ascribe puts on a page: elements, attributes, classes, and ids.
+// Generated from crates/ascribe-core/src/names.rs by
+// `ASCRIBE_BLESS=1 cargo test -p ascribe-core --test names`. Don't edit it.
+/** `<ascribe-note>`: a note (packages/elements/CONTRACT.md §1). */
+export const ELEMENT_NOTE = "ascribe-note";
+/** `<ascribe-steps>`: a procedure (packages/elements/CONTRACT.md §2). */
+export const ELEMENT_STEPS = "ascribe-steps";
+/** `<ascribe-tabs>`: a variant group of several arms (packages/elements/CONTRACT.md §3). */
+export const ELEMENT_TABS = "ascribe-tabs";
+/** `<ascribe-tab>`: one arm of `<ascribe-tabs>` (packages/elements/CONTRACT.md §3). */
+export const ELEMENT_TAB = "ascribe-tab";
+/** `<ascribe-availability>`: a badge or filter (packages/elements/CONTRACT.md §4). */
+export const ELEMENT_AVAILABILITY = "ascribe-availability";
+/**
+ * `<ascribe-availability-target>`: one target of `<ascribe-availability>`
+ * (packages/elements/CONTRACT.md §4).
+ */
+export const ELEMENT_AVAILABILITY_TARGET = "ascribe-availability-target";
+/** `<ascribe-group>`: a project widget's group (packages/elements/CONTRACT.md §6). */
+export const ELEMENT_GROUP = "ascribe-group";
+/** `<ascribe-attributes>`: the attribute marker (site-render contract §1). */
+export const ELEMENT_ATTRIBUTES = "ascribe-attributes";
+/** The name an anchor comment starts with, `<!--ascribe-anchor` (site-render contract §7.3). */
+export const COMMENT_ANCHOR = "ascribe-anchor";
+/** A block's source anchor (site-render contract §7.1). */
+export const DATA_SOURCE = "data-ascribe-source";
+/** The includes a block came through (site-render contract §7.1). */
+export const DATA_VIA = "data-ascribe-via";
+/** A glossary term's id, on its link (packages/elements/CONTRACT.md §7). */
+export const DATA_TERM = "data-ascribe-term";
+/** The element the report draws into. */
+export const ID_REPORT = "ascribe-review";
+/** The `<script type="application/json">` holding the report's data. */
+export const ID_REPORT_DATA = "ascribe-review-data";
+/**
+ * The page's light or dark scheme, `light` or `dark`, on the root
+ * element (docs/content/guides/astro.md).
+ */
+export const DATA_SCHEME = "data-ascribe-scheme";
+/** On a marked page's root: what it shows, `changes`, `will`, or `was`. */
+export const DATA_SHOW = "data-ascribe-show";
+/**
+ * On a marked block: its change, `added`, `changed`, `removed`, `moved`,
+ * or `moved-from`.
+ */
+export const DATA_CHANGE = "data-ascribe-change";
+/** On every element review adds to the page, so it can be taken away again. */
+export const DATA_UI = "data-ascribe-ui";
+/** On a change's label: the change. */
+export const DATA_LABEL = "data-ascribe-label";
+/** On a tab's hint: `added` or `changed`. */
+export const DATA_HINT = "data-ascribe-hint";
+/** On a moved block: the id its "moved from" link points at. */
+export const DATA_MOVE = "data-ascribe-move";
+/** On a changed block whose copy as it was follows it. */
+export const DATA_HAS_WAS = "data-ascribe-has-was";
+/** On a copy of a block as it was, shown only with the page as it was. */
+export const DATA_WAS_ONLY = "data-ascribe-was-only";
+/** On a changed, removed, or moved block: its source anchor as it was. */
+export const DATA_WAS_SOURCE = "data-ascribe-was-source";
+/** On the elements that hold the threads' overlay. */
+export const DATA_OVERLAY = "data-ascribe-overlay";
+/** On the style element the Astro dev toolbar adds for the marks. */
+export const DATA_REVIEW = "data-ascribe-review";
+/** On the root of a page whose changes are marked. */
+export const CLASS_MARKS = "ascribe-marks";
+/** A change's label. */
+export const CLASS_LABEL = "ascribe-label";
+/** A label placed before its block rather than over it. */
+export const CLASS_LABEL_BEFORE = "ascribe-label-before";
+/** Inserted text. */
+export const CLASS_INS = "ascribe-ins";
+/** Deleted text. */
+export const CLASS_DEL = "ascribe-del";
+/** A removed block. */
+export const CLASS_REMOVED = "ascribe-removed";
+/** A removed block's content. */
+export const CLASS_REMOVED_BODY = "ascribe-removed-body";
+/** The button that shows or collapses a removed block. */
+export const CLASS_TOGGLE = "ascribe-toggle";
+/** On a removed block that's shown. */
+export const CLASS_OPEN = "ascribe-open";
+/** What stands where a moved block was. */
+export const CLASS_MOVED_FROM = "ascribe-moved-from";
+/** The note with a moved block's link. */
+export const CLASS_MOVE_NOTE = "ascribe-move-note";
+/** A move note after its block, not inside it. */
+export const CLASS_MOVE_AFTER = "ascribe-move-after";
+/** The link between a moved block and where it was. */
+export const CLASS_MOVE_LINK = "ascribe-move-link";
+/** A moved block's copy as it was, where it was. */
+export const CLASS_WAS_COPY = "ascribe-was-copy";
+/** A tab's hint that it holds changes. */
+export const CLASS_HINT = "ascribe-hint";
+/** A block flashed after going to it. */
+export const CLASS_FLASH = "ascribe-flash";
+/** The tip that shows a block's source on hover and focus. */
+export const CLASS_WHERE = "ascribe-where";
+//# sourceMappingURL=names.js.map

package/dist/names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"names.js","sourceRoot":"","sources":["../src/names.ts"],"names":[],"mappings":"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","sourcesContent":["// The names Ascribe puts on a page: elements, attributes, classes, and ids.\n// Generated from crates/ascribe-core/src/names.rs by\n// `ASCRIBE_BLESS=1 cargo test -p ascribe-core --test names`. Don't edit it.\n\n/** `<ascribe-note>`: a note (packages/elements/CONTRACT.md §1). */\nexport const ELEMENT_NOTE = \"ascribe-note\";\n\n/** `<ascribe-steps>`: a procedure (packages/elements/CONTRACT.md §2). */\nexport const ELEMENT_STEPS = \"ascribe-steps\";\n\n/** `<ascribe-tabs>`: a variant group of several arms (packages/elements/CONTRACT.md §3). */\nexport const ELEMENT_TABS = \"ascribe-tabs\";\n\n/** `<ascribe-tab>`: one arm of `<ascribe-tabs>` (packages/elements/CONTRACT.md §3). */\nexport const ELEMENT_TAB = \"ascribe-tab\";\n\n/** `<ascribe-availability>`: a badge or filter (packages/elements/CONTRACT.md §4). */\nexport const ELEMENT_AVAILABILITY = \"ascribe-availability\";\n\n/**\n * `<ascribe-availability-target>`: one target of `<ascribe-availability>`\n * (packages/elements/CONTRACT.md §4).\n */\nexport const ELEMENT_AVAILABILITY_TARGET = \"ascribe-availability-target\";\n\n/** `<ascribe-group>`: a project widget's group (packages/elements/CONTRACT.md §6). */\nexport const ELEMENT_GROUP = \"ascribe-group\";\n\n/** `<ascribe-attributes>`: the attribute marker (site-render contract §1). */\nexport const ELEMENT_ATTRIBUTES = \"ascribe-attributes\";\n\n/** The name an anchor comment starts with, `<!--ascribe-anchor` (site-render contract §7.3). */\nexport const COMMENT_ANCHOR = \"ascribe-anchor\";\n\n/** A block's source anchor (site-render contract §7.1). */\nexport const DATA_SOURCE = \"data-ascribe-source\";\n\n/** The includes a block came through (site-render contract §7.1). */\nexport const DATA_VIA = \"data-ascribe-via\";\n\n/** A glossary term's id, on its link (packages/elements/CONTRACT.md §7). */\nexport const DATA_TERM = \"data-ascribe-term\";\n\n/** The element the report draws into. */\nexport const ID_REPORT = \"ascribe-review\";\n\n/** The `<script type=\"application/json\">` holding the report's data. */\nexport const ID_REPORT_DATA = \"ascribe-review-data\";\n\n/**\n * The page's light or dark scheme, `light` or `dark`, on the root\n * element (docs/content/guides/astro.md).\n */\nexport const DATA_SCHEME = \"data-ascribe-scheme\";\n\n/** On a marked page's root: what it shows, `changes`, `will`, or `was`. */\nexport const DATA_SHOW = \"data-ascribe-show\";\n\n/**\n * On a marked block: its change, `added`, `changed`, `removed`, `moved`,\n * or `moved-from`.\n */\nexport const DATA_CHANGE = \"data-ascribe-change\";\n\n/** On every element review adds to the page, so it can be taken away again. */\nexport const DATA_UI = \"data-ascribe-ui\";\n\n/** On a change's label: the change. */\nexport const DATA_LABEL = \"data-ascribe-label\";\n\n/** On a tab's hint: `added` or `changed`. */\nexport const DATA_HINT = \"data-ascribe-hint\";\n\n/** On a moved block: the id its \"moved from\" link points at. */\nexport const DATA_MOVE = \"data-ascribe-move\";\n\n/** On a changed block whose copy as it was follows it. */\nexport const DATA_HAS_WAS = \"data-ascribe-has-was\";\n\n/** On a copy of a block as it was, shown only with the page as it was. */\nexport const DATA_WAS_ONLY = \"data-ascribe-was-only\";\n\n/** On a changed, removed, or moved block: its source anchor as it was. */\nexport const DATA_WAS_SOURCE = \"data-ascribe-was-source\";\n\n/** On the elements that hold the threads' overlay. */\nexport const DATA_OVERLAY = \"data-ascribe-overlay\";\n\n/** On the style element the Astro dev toolbar adds for the marks. */\nexport const DATA_REVIEW = \"data-ascribe-review\";\n\n/** On the root of a page whose changes are marked. */\nexport const CLASS_MARKS = \"ascribe-marks\";\n\n/** A change's label. */\nexport const CLASS_LABEL = \"ascribe-label\";\n\n/** A label placed before its block rather than over it. */\nexport const CLASS_LABEL_BEFORE = \"ascribe-label-before\";\n\n/** Inserted text. */\nexport const CLASS_INS = \"ascribe-ins\";\n\n/** Deleted text. */\nexport const CLASS_DEL = \"ascribe-del\";\n\n/** A removed block. */\nexport const CLASS_REMOVED = \"ascribe-removed\";\n\n/** A removed block's content. */\nexport const CLASS_REMOVED_BODY = \"ascribe-removed-body\";\n\n/** The button that shows or collapses a removed block. */\nexport const CLASS_TOGGLE = \"ascribe-toggle\";\n\n/** On a removed block that's shown. */\nexport const CLASS_OPEN = \"ascribe-open\";\n\n/** What stands where a moved block was. */\nexport const CLASS_MOVED_FROM = \"ascribe-moved-from\";\n\n/** The note with a moved block's link. */\nexport const CLASS_MOVE_NOTE = \"ascribe-move-note\";\n\n/** A move note after its block, not inside it. */\nexport const CLASS_MOVE_AFTER = \"ascribe-move-after\";\n\n/** The link between a moved block and where it was. */\nexport const CLASS_MOVE_LINK = \"ascribe-move-link\";\n\n/** A moved block's copy as it was, where it was. */\nexport const CLASS_WAS_COPY = \"ascribe-was-copy\";\n\n/** A tab's hint that it holds changes. */\nexport const CLASS_HINT = \"ascribe-hint\";\n\n/** A block flashed after going to it. */\nexport const CLASS_FLASH = \"ascribe-flash\";\n\n/** The tip that shows a block's source on hover and focus. */\nexport const CLASS_WHERE = \"ascribe-where\";\n"]}

package/dist/tabs.js

@@ -2,6 +2,7 @@
 // element with behavior. Without this script every tab shows with its label
 // (CSS generated content); with it, the group follows the WAI-ARIA tabs
 // pattern.
+import { ELEMENT_TAB } from "./names.js";
 const STORAGE_PREFIX = "ascribe-tabs:";
 /** Choices made this page load, for readers whose storage is unavailable. */
 const pageChoices = new Map();
@@ -58,7 +59,7 @@ export class AscribeTabs extends HTMLElement {
     #setup() {
         if (!this.isConnected || this.#ready)
             return;
-        this.#tabs = Array.from(this.children).filter((child) => child.localName === "ascribe-tab");
+        this.#tabs = Array.from(this.children).filter((child) => child.localName === ELEMENT_TAB);
         if (this.#tabs.length === 0)
             return;
         this.#ready = true;

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../src/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["// <ascribe-tabs> and <ascribe-tab> (CONTRACT.md §3): the library's only\n// element with behavior. Without this script every tab shows with its label\n// (CSS generated content); with it, the group follows the WAI-ARIA tabs\n// pattern.\n\nconst STORAGE_PREFIX = \"ascribe-tabs:\";\n\n/** Choices made this page load, for readers whose storage is unavailable. */\nconst pageChoices = new Map<string, string>();\n\n/** Every connected, initialized group with a `sync` attribute. */\nconst syncedGroups = new Set<AscribeTabs>();\n\nlet idCounter = 0;\n\nfunction readChoice(dimension: string): string | null {\n  // This page's choices are always at least as fresh as storage, which a\n  // failed write leaves behind.\n  const chosen = pageChoices.get(dimension);\n  if (chosen !== undefined) return chosen;\n  try {\n    return localStorage.getItem(STORAGE_PREFIX + dimension);\n  } catch {\n    // Storage can be blocked or unavailable.\n    return null;\n  }\n}\n\nfunction writeChoice(dimension: string, value: string): void {\n  pageChoices.set(dimension, value);\n  try {\n    localStorage.setItem(STORAGE_PREFIX + dimension, value);\n  } catch {\n    // The choice lasts for the page only.\n  }\n}\n\nfunction valuesOf(tab: Element): string[] {\n  return (tab.getAttribute(\"value\") ?? \"\").split(/\\s+/).filter(Boolean);\n}\n\n/** A tab panel: one arm of a `@variant` group. Styled by CSS; no behavior. */\nexport class AscribeTab extends HTMLElement {}\n\nexport class AscribeTabs extends HTMLElement {\n  #tablist: HTMLElement | null = null;\n  #tabs: HTMLElement[] = [];\n  #buttons: HTMLButtonElement[] = [];\n  #selected = 0;\n  #ready = false;\n\n  connectedCallback(): void {\n    // A parser-created element is connected before its children are parsed.\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", () => this.#setup(), { once: true });\n    } else {\n      this.#setup();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.#teardown();\n  }\n\n  #setup(): void {\n    if (!this.isConnected || this.#ready) return;\n    this.#tabs = Array.from(this.children).filter(\n      (child): child is HTMLElement => child.localName === \"ascribe-tab\",\n    );\n    if (this.#tabs.length === 0) return;\n    this.#ready = true;\n\n    const tablist = document.createElement(\"div\");\n    tablist.setAttribute(\"role\", \"tablist\");\n    this.#tablist = tablist;\n\n    this.#buttons = this.#tabs.map((tab) => {\n      if (!tab.id) tab.id = `ascribe-tab-${++idCounter}`;\n      const button = document.createElement(\"button\");\n      button.type = \"button\";\n      button.id = `${tab.id}-button`;\n      button.setAttribute(\"role\", \"tab\");\n      button.setAttribute(\"aria-controls\", tab.id);\n      button.textContent = tab.getAttribute(\"label\") ?? \"\";\n      button.addEventListener(\"click\", () => this.#choose(this.#buttons.indexOf(button)));\n      button.addEventListener(\"keydown\", (event) => this.#onKeydown(event));\n      tablist.append(button);\n      tab.setAttribute(\"role\", \"tabpanel\");\n      tab.setAttribute(\"aria-labelledby\", button.id);\n      return button;\n    });\n    this.prepend(tablist);\n\n    const sync = this.getAttribute(\"sync\");\n    let initial = 0;\n    if (sync !== null) {\n      syncedGroups.add(this);\n      const remembered = readChoice(sync);\n      const match = remembered === null ? -1 : this.#indexOfValue(remembered);\n      if (match >= 0) initial = match;\n    }\n    this.#select(initial);\n  }\n\n  #teardown(): void {\n    if (!this.#ready) return;\n    syncedGroups.delete(this);\n    this.#tablist?.remove();\n    for (const tab of this.#tabs) {\n      tab.removeAttribute(\"role\");\n      tab.removeAttribute(\"aria-labelledby\");\n      tab.removeAttribute(\"hidden\");\n    }\n    this.#tablist = null;\n    this.#tabs = [];\n    this.#buttons = [];\n    this.#ready = false;\n  }\n\n  #indexOfValue(value: string): number {\n    return this.#tabs.findIndex((tab) => valuesOf(tab).includes(value));\n  }\n\n  /** Select a tab without recording or syncing the choice. */\n  #select(index: number): void {\n    this.#selected = index;\n    this.#tabs.forEach((tab, i) => {\n      tab.toggleAttribute(\"hidden\", i !== index);\n    });\n    this.#buttons.forEach((button, i) => {\n      button.setAttribute(\"aria-selected\", String(i === index));\n      button.tabIndex = i === index ? 0 : -1;\n    });\n  }\n\n  /** The reader picked a tab: select it and, for a synced group, tell the rest. */\n  #choose(index: number): void {\n    this.#select(index);\n    const sync = this.getAttribute(\"sync\");\n    const tab = this.#tabs[index];\n    const choice = tab ? valuesOf(tab)[0] : undefined;\n    if (sync === null || choice === undefined) return;\n    writeChoice(sync, choice);\n    for (const group of syncedGroups) {\n      if (group !== this && group.getAttribute(\"sync\") === sync) group.#follow(choice);\n    }\n  }\n\n  /** Another group with the same `sync` made a choice; keep our selection if we have no match. */\n  #follow(value: string): void {\n    const index = this.#indexOfValue(value);\n    if (index >= 0) this.#select(index);\n  }\n\n  #onKeydown(event: KeyboardEvent): void {\n    const last = this.#tabs.length - 1;\n    let next: number;\n    switch (event.key) {\n      case \"ArrowRight\":\n        next = this.#selected === last ? 0 : this.#selected + 1;\n        break;\n      case \"ArrowLeft\":\n        next = this.#selected === 0 ? last : this.#selected - 1;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = last;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.#choose(next);\n    this.#buttons[next]?.focus();\n  }\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../src/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["// <ascribe-tabs> and <ascribe-tab> (CONTRACT.md §3): the library's only\n// element with behavior. Without this script every tab shows with its label\n// (CSS generated content); with it, the group follows the WAI-ARIA tabs\n// pattern.\n\nimport { ELEMENT_TAB } from \"./names.js\";\n\nconst STORAGE_PREFIX = \"ascribe-tabs:\";\n\n/** Choices made this page load, for readers whose storage is unavailable. */\nconst pageChoices = new Map<string, string>();\n\n/** Every connected, initialized group with a `sync` attribute. */\nconst syncedGroups = new Set<AscribeTabs>();\n\nlet idCounter = 0;\n\nfunction readChoice(dimension: string): string | null {\n  // This page's choices are always at least as fresh as storage, which a\n  // failed write leaves behind.\n  const chosen = pageChoices.get(dimension);\n  if (chosen !== undefined) return chosen;\n  try {\n    return localStorage.getItem(STORAGE_PREFIX + dimension);\n  } catch {\n    // Storage can be blocked or unavailable.\n    return null;\n  }\n}\n\nfunction writeChoice(dimension: string, value: string): void {\n  pageChoices.set(dimension, value);\n  try {\n    localStorage.setItem(STORAGE_PREFIX + dimension, value);\n  } catch {\n    // The choice lasts for the page only.\n  }\n}\n\nfunction valuesOf(tab: Element): string[] {\n  return (tab.getAttribute(\"value\") ?? \"\").split(/\\s+/).filter(Boolean);\n}\n\n/** A tab panel: one arm of a `@variant` group. Styled by CSS; no behavior. */\nexport class AscribeTab extends HTMLElement {}\n\nexport class AscribeTabs extends HTMLElement {\n  #tablist: HTMLElement | null = null;\n  #tabs: HTMLElement[] = [];\n  #buttons: HTMLButtonElement[] = [];\n  #selected = 0;\n  #ready = false;\n\n  connectedCallback(): void {\n    // A parser-created element is connected before its children are parsed.\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", () => this.#setup(), { once: true });\n    } else {\n      this.#setup();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.#teardown();\n  }\n\n  #setup(): void {\n    if (!this.isConnected || this.#ready) return;\n    this.#tabs = Array.from(this.children).filter(\n      (child): child is HTMLElement => child.localName === ELEMENT_TAB,\n    );\n    if (this.#tabs.length === 0) return;\n    this.#ready = true;\n\n    const tablist = document.createElement(\"div\");\n    tablist.setAttribute(\"role\", \"tablist\");\n    this.#tablist = tablist;\n\n    this.#buttons = this.#tabs.map((tab) => {\n      if (!tab.id) tab.id = `ascribe-tab-${++idCounter}`;\n      const button = document.createElement(\"button\");\n      button.type = \"button\";\n      button.id = `${tab.id}-button`;\n      button.setAttribute(\"role\", \"tab\");\n      button.setAttribute(\"aria-controls\", tab.id);\n      button.textContent = tab.getAttribute(\"label\") ?? \"\";\n      button.addEventListener(\"click\", () => this.#choose(this.#buttons.indexOf(button)));\n      button.addEventListener(\"keydown\", (event) => this.#onKeydown(event));\n      tablist.append(button);\n      tab.setAttribute(\"role\", \"tabpanel\");\n      tab.setAttribute(\"aria-labelledby\", button.id);\n      return button;\n    });\n    this.prepend(tablist);\n\n    const sync = this.getAttribute(\"sync\");\n    let initial = 0;\n    if (sync !== null) {\n      syncedGroups.add(this);\n      const remembered = readChoice(sync);\n      const match = remembered === null ? -1 : this.#indexOfValue(remembered);\n      if (match >= 0) initial = match;\n    }\n    this.#select(initial);\n  }\n\n  #teardown(): void {\n    if (!this.#ready) return;\n    syncedGroups.delete(this);\n    this.#tablist?.remove();\n    for (const tab of this.#tabs) {\n      tab.removeAttribute(\"role\");\n      tab.removeAttribute(\"aria-labelledby\");\n      tab.removeAttribute(\"hidden\");\n    }\n    this.#tablist = null;\n    this.#tabs = [];\n    this.#buttons = [];\n    this.#ready = false;\n  }\n\n  #indexOfValue(value: string): number {\n    return this.#tabs.findIndex((tab) => valuesOf(tab).includes(value));\n  }\n\n  /** Select a tab without recording or syncing the choice. */\n  #select(index: number): void {\n    this.#selected = index;\n    this.#tabs.forEach((tab, i) => {\n      tab.toggleAttribute(\"hidden\", i !== index);\n    });\n    this.#buttons.forEach((button, i) => {\n      button.setAttribute(\"aria-selected\", String(i === index));\n      button.tabIndex = i === index ? 0 : -1;\n    });\n  }\n\n  /** The reader picked a tab: select it and, for a synced group, tell the rest. */\n  #choose(index: number): void {\n    this.#select(index);\n    const sync = this.getAttribute(\"sync\");\n    const tab = this.#tabs[index];\n    const choice = tab ? valuesOf(tab)[0] : undefined;\n    if (sync === null || choice === undefined) return;\n    writeChoice(sync, choice);\n    for (const group of syncedGroups) {\n      if (group !== this && group.getAttribute(\"sync\") === sync) group.#follow(choice);\n    }\n  }\n\n  /** Another group with the same `sync` made a choice; keep our selection if we have no match. */\n  #follow(value: string): void {\n    const index = this.#indexOfValue(value);\n    if (index >= 0) this.#select(index);\n  }\n\n  #onKeydown(event: KeyboardEvent): void {\n    const last = this.#tabs.length - 1;\n    let next: number;\n    switch (event.key) {\n      case \"ArrowRight\":\n        next = this.#selected === last ? 0 : this.#selected + 1;\n        break;\n      case \"ArrowLeft\":\n        next = this.#selected === 0 ? last : this.#selected - 1;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = last;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.#choose(next);\n    this.#buttons[next]?.focus();\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ascribed/elements",
-  "version": "0.2.0",
+  "version": "0.2.1-next.11",
   "description": "Ascribe's web component library for the site output.",
   "type": "module",
   "license": "MPL-2.0",
@@ -36,6 +36,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "gitHead": "dd64394135ff782efb8db030c81ac3b38e0f92c5",
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",