@ascribed/elements 0.2.1-next.12 → 0.2.1-next.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CONTRACT.md +1 -0
  2. package/README.md +8 -0
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/dist/tabs.d.ts +7 -0
  7. package/dist/tabs.js +21 -4
  8. package/dist/tabs.js.map +1 -1
  9. package/package.json +2 -2
package/CONTRACT.md CHANGED
@@ -131,6 +131,7 @@ pnpm add -g @quill/agent
131
131
  - **Initial selection:** for a group with `sync`, the first tab whose `value` contains the remembered value for that dimension; otherwise, and for labeled groups, the first tab.
132
132
  - **Syncing:** selecting a tab in a group with `sync` records the first value in the tab's `value` as the choice for that dimension, then selects, in every `<ascribe-tabs>` on the page with the same `sync`, the first tab whose `value` contains it. A group with no matching tab keeps its selection.
133
133
  - **Remembering:** the choice is stored in `localStorage` under the key `ascribe-tabs:<sync>`, such as `ascribe-tabs:pm`, and read when a group starts. Storage can be unavailable (private windows, blocked storage): every read and write is guarded, and without storage the choice lasts for the page only.
134
+ - **Choosing from a script:** the script exports `choose(dimension, value)`, which does what selecting a tab whose first value is `value`, in a group whose `sync` is `dimension`, does: it records the choice and selects it in every group on the page with that `sync`, and a group with no matching tab keeps its selection. It doesn't check the value. A page with no groups can call it before sending the reader on, and the next page's groups start on the choice, as a permalink's address does with its parameters.
134
135
 
135
136
  ## 4. `<ascribe-availability>` and `<ascribe-availability-target>`
136
137
 
package/README.md CHANGED
@@ -24,6 +24,14 @@ import "@ascribed/elements/style.css";
24
24
  The CSS works with no script at all. A site can also link `css/style.css`
25
25
  directly.
26
26
 
27
+ A script can make a reader's choice for a dimension, as selecting a tab does:
28
+
29
+ ```js
30
+ import { choose } from "@ascribed/elements";
31
+ // Remembered across pages, and selected in this page's `pm` groups.
32
+ choose("pm", "pnpm");
33
+ ```
34
+
27
35
  ## Theming
28
36
 
29
37
  Set any of these custom properties on `:root`, or on any ancestor of the
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { AscribeGroup } from "./group.js";
2
- import { AscribeTab, AscribeTabs } from "./tabs.js";
3
- export { AscribeGroup, AscribeTab, AscribeTabs };
2
+ import { AscribeTab, AscribeTabs, choose } from "./tabs.js";
3
+ export { AscribeGroup, AscribeTab, AscribeTabs, choose };
package/dist/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
  // <ascribe-tabs> has behavior; the rest are styled by the CSS file
3
3
  // (`@ascribed/elements/style.css`), which works without this script.
4
4
  import { AscribeGroup } from "./group.js";
5
- import { AscribeTab, AscribeTabs } from "./tabs.js";
5
+ import { AscribeTab, AscribeTabs, choose } from "./tabs.js";
6
6
  import { ELEMENT_GROUP, ELEMENT_TAB, ELEMENT_TABS } from "./names.js";
7
- export { AscribeGroup, AscribeTab, AscribeTabs };
7
+ export { AscribeGroup, AscribeTab, AscribeTabs, choose };
8
8
  const registry = [
9
9
  [ELEMENT_TABS, AscribeTabs],
10
10
  [ELEMENT_TAB, AscribeTab],
package/dist/index.js.map CHANGED
@@ -1 +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;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"]}
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,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AAEzD,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, choose } from \"./tabs.js\";\nimport { ELEMENT_GROUP, ELEMENT_TAB, ELEMENT_TABS } from \"./names.js\";\n\nexport { AscribeGroup, AscribeTab, AscribeTabs, choose };\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/tabs.d.ts CHANGED
@@ -1,3 +1,10 @@
1
+ /**
2
+ * Choose `value` for `dimension`, as a reader selecting a tab with that value
3
+ * does: remember it across pages, and select it in every group on this page
4
+ * that switches on the dimension. A group with no tab for it keeps its
5
+ * selection. The value isn't checked.
6
+ */
7
+ export declare function choose(dimension: string, value: string): void;
1
8
  /** A tab panel: one arm of a `@variant` group. Styled by CSS; no behavior. */
2
9
  export declare class AscribeTab extends HTMLElement {
3
10
  }
package/dist/tabs.js CHANGED
@@ -35,6 +35,18 @@ function writeChoice(dimension, value) {
35
35
  function valuesOf(tab) {
36
36
  return (tab.getAttribute("value") ?? "").split(/\s+/).filter(Boolean);
37
37
  }
38
+ /** Select `value` in every group on the page that switches on `dimension`, but `except`. */
39
+ let followChoice;
40
+ /**
41
+ * Choose `value` for `dimension`, as a reader selecting a tab with that value
42
+ * does: remember it across pages, and select it in every group on this page
43
+ * that switches on the dimension. A group with no tab for it keeps its
44
+ * selection. The value isn't checked.
45
+ */
46
+ export function choose(dimension, value) {
47
+ writeChoice(dimension, value);
48
+ followChoice(dimension, value);
49
+ }
38
50
  /** A tab panel: one arm of a `@variant` group. Styled by CSS; no behavior. */
39
51
  export class AscribeTab extends HTMLElement {
40
52
  }
@@ -44,6 +56,14 @@ export class AscribeTabs extends HTMLElement {
44
56
  #buttons = [];
45
57
  #selected = 0;
46
58
  #ready = false;
59
+ static {
60
+ followChoice = (dimension, value, except) => {
61
+ for (const group of syncedGroups) {
62
+ if (group !== except && group.getAttribute("sync") === dimension)
63
+ group.#follow(value);
64
+ }
65
+ };
66
+ }
47
67
  connectedCallback() {
48
68
  // A parser-created element is connected before its children are parsed.
49
69
  if (document.readyState === "loading") {
@@ -132,10 +152,7 @@ export class AscribeTabs extends HTMLElement {
132
152
  if (sync === null || choice === undefined)
133
153
  return;
134
154
  writeChoice(sync, choice);
135
- for (const group of syncedGroups) {
136
- if (group !== this && group.getAttribute("sync") === sync)
137
- group.#follow(choice);
138
- }
155
+ followChoice(sync, choice, this);
139
156
  }
140
157
  /** Another group with the same `sync` made a choice; keep our selection if we have no match. */
141
158
  #follow(value) {
package/dist/tabs.js.map CHANGED
@@ -1 +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\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"]}
1
+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../src/tabs.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,4EAA4E;AAC5E,wEAAwE;AACxE,WAAW;AAEX,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,cAAc,GAAG,eAAe,CAAC;AAEvC,6EAA6E;AAC7E,MAAM,WAAW,GAAG,IAAI,GAAG,EAAkB,CAAC;AAE9C,kEAAkE;AAClE,MAAM,YAAY,GAAG,IAAI,GAAG,EAAe,CAAC;AAE5C,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB,SAAS,UAAU,CAAC,SAAiB;IACnC,uEAAuE;IACvE,8BAA8B;IAC9B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC;IACxC,IAAI,CAAC;QACH,OAAO,YAAY,CAAC,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IAC1D,CAAC;IAAC,MAAM,CAAC;QACP,yCAAyC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,SAAiB,EAAE,KAAa;IACnD,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,cAAc,GAAG,SAAS,EAAE,KAAK,CAAC,CAAC;IAC1D,CAAC;IAAC,MAAM,CAAC;QACP,sCAAsC;IACxC,CAAC;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,GAAY;IAC5B,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,4FAA4F;AAC5F,IAAI,YAA8E,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAC,SAAiB,EAAE,KAAa;IACrD,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC9B,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AACjC,CAAC;AAED,8EAA8E;AAC9E,MAAM,OAAO,UAAW,SAAQ,WAAW;CAAG;AAE9C,MAAM,OAAO,WAAY,SAAQ,WAAW;IAC1C,QAAQ,GAAuB,IAAI,CAAC;IACpC,KAAK,GAAkB,EAAE,CAAC;IAC1B,QAAQ,GAAwB,EAAE,CAAC;IACnC,SAAS,GAAG,CAAC,CAAC;IACd,MAAM,GAAG,KAAK,CAAC;IAEf;QACE,YAAY,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;YAC1C,KAAK,MAAM,KAAK,IAAI,YAAY,EAAE,CAAC;gBACjC,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS;oBAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACzF,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,wEAAwE;QACxE,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACrF,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;QAC7C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC3C,CAAC,KAAK,EAAwB,EAAE,CAAC,KAAK,CAAC,SAAS,KAAK,WAAW,CACjE,CAAC;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAExB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACrC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,GAAG,CAAC,EAAE,GAAG,eAAe,EAAE,SAAS,EAAE,CAAC;YACnD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;YACvB,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,EAAE,SAAS,CAAC;YAC/B,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACnC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;YAC7C,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACrD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACpF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;YACtE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACvB,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;YAC/C,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEtB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACvB,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;YACpC,MAAM,KAAK,GAAG,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACxE,IAAI,KAAK,IAAI,CAAC;gBAAE,OAAO,GAAG,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;QACxB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7B,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC5B,GAAG,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;YACvC,GAAG,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,aAAa,CAAC,KAAa;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,4DAA4D;IAC5D,OAAO,CAAC,KAAa;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAC5B,GAAG,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;YAC1D,MAAM,CAAC,QAAQ,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iFAAiF;IACjF,OAAO,CAAC,KAAa;QACnB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9B,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAClD,IAAI,IAAI,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS;YAAE,OAAO;QAClD,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAC1B,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,gGAAgG;IAChG,OAAO,CAAC,KAAa;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,KAAK,IAAI,CAAC;YAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAED,UAAU,CAAC,KAAoB;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACnC,IAAI,IAAY,CAAC;QACjB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,YAAY;gBACf,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;gBACxD,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;gBACxD,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,GAAG,CAAC,CAAC;gBACT,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,GAAG,IAAI,CAAC;gBACZ,MAAM;YACR;gBACE,OAAO;QACX,CAAC;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IAC/B,CAAC;CACF","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/** Select `value` in every group on the page that switches on `dimension`, but `except`. */\nlet followChoice: (dimension: string, value: string, except?: AscribeTabs) => void;\n\n/**\n * Choose `value` for `dimension`, as a reader selecting a tab with that value\n * does: remember it across pages, and select it in every group on this page\n * that switches on the dimension. A group with no tab for it keeps its\n * selection. The value isn't checked.\n */\nexport function choose(dimension: string, value: string): void {\n writeChoice(dimension, value);\n followChoice(dimension, value);\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 static {\n followChoice = (dimension, value, except) => {\n for (const group of syncedGroups) {\n if (group !== except && group.getAttribute(\"sync\") === dimension) group.#follow(value);\n }\n };\n }\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 followChoice(sync, choice, this);\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ascribed/elements",
3
- "version": "0.2.1-next.12",
3
+ "version": "0.2.1-next.14",
4
4
  "description": "Ascribe's web component library for the site output.",
5
5
  "type": "module",
6
6
  "license": "MPL-2.0",
@@ -36,7 +36,7 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "05055e771692b3f4d26eb99097258a30086a4b1b",
39
+ "gitHead": "7f59c3e433d6830ddb59e07f050bd1ac21f71d11",
40
40
  "scripts": {
41
41
  "build": "tsc -p tsconfig.build.json",
42
42
  "typecheck": "tsc --noEmit",