@ponchia/ui 0.6.8 → 0.6.10
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.
- package/CHANGELOG.md +79 -4
- package/README.md +2 -2
- package/annotations/index.d.ts.map +1 -1
- package/annotations/index.js +5 -6
- package/behaviors/carousel.d.ts.map +1 -1
- package/behaviors/carousel.js +100 -60
- package/behaviors/combobox.d.ts.map +1 -1
- package/behaviors/combobox.js +167 -113
- package/behaviors/connectors.d.ts.map +1 -1
- package/behaviors/connectors.js +39 -23
- package/behaviors/forms.d.ts.map +1 -1
- package/behaviors/forms.js +211 -207
- package/behaviors/glyph.d.ts.map +1 -1
- package/behaviors/glyph.js +157 -132
- package/behaviors/inert.d.ts +1 -1
- package/behaviors/inert.d.ts.map +1 -1
- package/behaviors/inert.js +1 -1
- package/behaviors/internal.js +2 -2
- package/behaviors/modal.js +1 -1
- package/behaviors/popover.js +5 -5
- package/behaviors/table.d.ts +1 -1
- package/behaviors/table.d.ts.map +1 -1
- package/behaviors/table.js +7 -8
- package/behaviors/tabs.js +2 -2
- package/behaviors/toast.js +5 -5
- package/classes/classes.json +33 -2
- package/classes/index.d.ts +10 -0
- package/classes/index.js +59 -35
- package/connectors/index.d.ts +2 -2
- package/connectors/index.d.ts.map +1 -1
- package/connectors/index.js +7 -10
- package/css/app.css +3 -4
- package/css/base.css +1 -1
- package/css/content.css +3 -3
- package/css/disclosure.css +3 -3
- package/css/dots.css +4 -4
- package/css/feedback.css +6 -7
- package/css/forms.css +9 -12
- package/css/legend.css +1 -1
- package/css/marks.css +1 -1
- package/css/motion.css +6 -6
- package/css/overlay.css +5 -7
- package/css/primitives.css +14 -16
- package/css/sidenote.css +2 -2
- package/css/table.css +2 -2
- package/css/workbench.css +128 -0
- package/dist/css/workbench.css +1 -1
- package/docs/annotations.md +36 -0
- package/docs/architecture.md +28 -0
- package/docs/interop/react-flow.md +89 -0
- package/docs/package-contract.md +2 -0
- package/docs/reference.md +21 -1
- package/docs/reporting.md +8 -8
- package/docs/stability.md +67 -7
- package/docs/workbench.md +56 -9
- package/glyphs/glyphs.js +43 -33
- package/llms.txt +10 -4
- package/package.json +5 -2
- package/schemas/report-claims.v1.schema.json +1 -1
- package/tokens/index.js +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,81 @@
|
|
|
5
5
|
|> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
|
|
6
6
|
|> the deprecation policy in CONTRIBUTING.md.
|
|
7
7
|
|
|
8
|
+
## 0.6.10 — 2026-06-23
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **Workbench toolstrip primitives.** `workbench.css`, the generated class
|
|
13
|
+
registry, and the workbench docs now cover floating toolstrips, compact
|
|
14
|
+
grouped actions, segmented button groups, contextual labels, and search/action
|
|
15
|
+
slots for dense canvas or editor-style tools.
|
|
16
|
+
- **Annotation composition guidance.** The annotation docs now show how the
|
|
17
|
+
dependency-free `@ponchia/ui` annotation surface composes with richer
|
|
18
|
+
annotation engines in a workbench-style consumer, while keeping runtime
|
|
19
|
+
package boundaries explicit.
|
|
20
|
+
|
|
21
|
+
### Verified
|
|
22
|
+
|
|
23
|
+
- **Release evidence.** PR CI passed for the workbench expansion, including the
|
|
24
|
+
aggregate `check` gate, Chromium e2e, CodeQL, and the packed examples matrix.
|
|
25
|
+
This release adds opt-in workbench CSS and generated class/docs artifacts; it
|
|
26
|
+
does not move the default bundle contract.
|
|
27
|
+
|
|
28
|
+
## 0.6.9 — 2026-06-20
|
|
29
|
+
|
|
30
|
+
### Changed
|
|
31
|
+
|
|
32
|
+
- **Product doctrine and 1.0 readiness.** `CONTRIBUTING.md`, `ROADMAP.md`,
|
|
33
|
+
`docs/architecture.md`, and `docs/stability.md` now codify the
|
|
34
|
+
core-vs-opt-in surface boundary, the refusal list, registry-first gate
|
|
35
|
+
maintenance, packed-tarball proof, a gate-backed 1.0 readiness ledger, and
|
|
36
|
+
release evidence policy for public-safe downstream proof. The stability
|
|
37
|
+
matrix now includes explicit rows for every exported opt-in CSS leaf plus
|
|
38
|
+
the public machine-readable/theme subpath families.
|
|
39
|
+
- **Registry-backed gate ownership.** `check:report`,
|
|
40
|
+
`check:component-matrix`, `check:exports`, and `check:consumer-surface` now
|
|
41
|
+
share internal registries for the reporting toolbox, exported CSS leaves, and
|
|
42
|
+
optional framework peers instead of carrying separate hand-maintained lists.
|
|
43
|
+
The matrix gates also share one proof-owner helper for cached file reads,
|
|
44
|
+
owner-file existence, word matching, and required text evidence.
|
|
45
|
+
- **Native complexity budget.** `check:complexity` is now part of the
|
|
46
|
+
aggregate `npm run check` chain. It uses the existing TypeScript parser to
|
|
47
|
+
keep function-level cyclomatic complexity at 12 or lower and function size
|
|
48
|
+
under budget without carrying per-function exception baselines.
|
|
49
|
+
- **Gate-backed annotation package boundary.** The annotation docs now make the
|
|
50
|
+
split with `@ponchia/annotations` explicit: `@ponchia/ui/annotations` remains
|
|
51
|
+
the dependency-free Bronto static-helper compatibility surface, while richer
|
|
52
|
+
placement, renderer, editing, and adapter work belongs in the sibling
|
|
53
|
+
annotation package. `check:public-metadata` now guards that doctrine,
|
|
54
|
+
`check:exports` rejects packed code or declaration references to the sibling
|
|
55
|
+
package, and no runtime or public type dependency is added to `@ponchia/ui`.
|
|
56
|
+
- **Public source hygiene guard.** `check:public-hygiene` now rejects internal
|
|
57
|
+
audit-ticket markers across repository source files, and still scans the
|
|
58
|
+
packed public text files for private terms, local paths, and secret-looking
|
|
59
|
+
assignments. `check:doc-links` also rejects executable URL schemes in public
|
|
60
|
+
authoring docs. The pass also brought
|
|
61
|
+
`behaviors/inert.js` under the generated declaration emit inputs so
|
|
62
|
+
`check:dts-emit` covers its public `.d.ts` surface.
|
|
63
|
+
|
|
64
|
+
### Verified
|
|
65
|
+
|
|
66
|
+
- **Release evidence.** `npm run check` passed for `0.6.9`, including
|
|
67
|
+
`check:pack`, `check:consumer-surface`, `check:consumer-types`,
|
|
68
|
+
`check:examples`, `check:publint`, and `check:attw`. No default-bundle budget
|
|
69
|
+
movement; this release is gate/docs/declaration hardening rather than a
|
|
70
|
+
runtime surface expansion.
|
|
71
|
+
- **Downstream proof.** The packed current tarball installed into a disposable
|
|
72
|
+
copy of a real React/Vite app consumer that imports `@ponchia/ui/classes`,
|
|
73
|
+
`@ponchia/ui/behaviors`, `@ponchia/ui/tokens/resolved.json`, and
|
|
74
|
+
`@ponchia/ui/vega`; its `typecheck` and production `build` both passed.
|
|
75
|
+
|
|
76
|
+
### Fixed
|
|
77
|
+
|
|
78
|
+
- **Report sidecar hash validation.** `report-claims.v1` now requires
|
|
79
|
+
`contentHash` values to use exact SHA digest lengths (`sha256`, `sha384`, or
|
|
80
|
+
`sha512`) instead of accepting any hex payload after a supported algorithm
|
|
81
|
+
prefix.
|
|
82
|
+
|
|
8
83
|
## 0.6.8 — 2026-06-16
|
|
9
84
|
|
|
10
85
|
Patch release for the deep UI-framework audit: broader browser/package gates,
|
|
@@ -462,7 +537,7 @@ and D2. The data-viz **palette** (`--chart-*`, `tokens/charts.json`) and the
|
|
|
462
537
|
|
|
463
538
|
### Fixed
|
|
464
539
|
|
|
465
|
-
- **Published-type drift
|
|
540
|
+
- **Published-type drift.** `ui.meter({ tone: 'info' })` and
|
|
466
541
|
`ui.bracketNote({ tone: 'success' })` emit real classes at runtime, but the
|
|
467
542
|
generated `.d.ts` tone unions (hand-mirrored in `gen-dts.mjs`) omitted them, so
|
|
468
543
|
a TS consumer got a spurious type error for a value that renders. The unions
|
|
@@ -634,16 +709,16 @@ and D2. The data-viz **palette** (`--chart-*`, `tokens/charts.json`) and the
|
|
|
634
709
|
token source as a read-only export for foreign renderers (in-DOM ink is
|
|
635
710
|
`--button-text`). `contrast.md` now prints APCA `Lc` to one decimal so an
|
|
636
711
|
advisory shortfall (e.g. `Lc 44.9`) no longer rounds to a passing-looking `45`.
|
|
637
|
-
- Raw bundle budget 81 → 82 kB for the
|
|
712
|
+
- Raw bundle budget 81 → 82 kB for the accessibility/state
|
|
638
713
|
blocks (gzip held ~14.1 kB — the additions are repetitive media-query and
|
|
639
714
|
`:has()`/`:not()` rules that compress well).
|
|
640
|
-
- **Code-
|
|
715
|
+
- **Code-health pass — two new gates + targeted dedup, no churn.**
|
|
641
716
|
A code-health pass (complexity / duplication / AI-slop / missing-best-practice)
|
|
642
717
|
that deliberately left working, gate-protected code alone. Added:
|
|
643
718
|
`check:recipe-types` (factory↔`.d.ts` option parity, above) and `check:chain`
|
|
644
719
|
(every `check:*` script is wired into the aggregate `check` chain — closes the
|
|
645
720
|
silent-coverage-drop class; it would have caught a forgotten gate). Reconciled
|
|
646
|
-
a latent bug — `clamp()` had
|
|
721
|
+
a latent bug — `clamp()` had drifted between `connectors` and
|
|
647
722
|
`annotations`; the two now share one scalar/geometry kernel (the guarded form).
|
|
648
723
|
Dedup that removed real duplication: a shared `collectHosts()` /
|
|
649
724
|
`scrollIntoViewSafe()` / `wrapIndex()` in `behaviors/internal.js` (~9 behaviors),
|
package/README.md
CHANGED
|
@@ -67,7 +67,7 @@ npm i @ponchia/ui
|
|
|
67
67
|
Or drop it in with no build step, straight from a CDN:
|
|
68
68
|
|
|
69
69
|
```html
|
|
70
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
70
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/bronto.css">
|
|
71
71
|
```
|
|
72
72
|
|
|
73
73
|
## Quick start
|
|
@@ -140,7 +140,7 @@ Arrows, chevrons, check/close/plus/minus, search/menu/gear, info/warning/bell/lo
|
|
|
140
140
|
- **Disclosure & nav** — tabs, accordion, segmented, breadcrumb, pagination, `ui-steps`, `ui-timeline`, `ui-pagehead`, `ui-kbd`.
|
|
141
141
|
- **Shells** — a service/app shell (`ui-app-*`) and a content/marketing site shell (`ui-site*`, `ui-container`).
|
|
142
142
|
- **Prose** — `.ui-prose` styles raw, unclassed semantic HTML (Markdown / CMS / LLM output) with zero classes.
|
|
143
|
-
- **Analytical & communication primitives** _(opt-in)_ — `@ponchia/ui/css/analytical.css`: **figure** stages, SVG **annotations** (subject/connector/note), standalone **legends**/data-keys, text/evidence **marks**, leader-line **connectors** (+ a pure `@ponchia/ui/connectors` geometry kernel), a guided-focus **spotlight**, a **crosshair**/readout, a cross-cutting **selection** vocabulary, and CSS Custom Highlight API **highlights**. Each owns its visual grammar + pure geometry and refuses scales/state/hit-testing — figures that explain themselves, not a chart engine. Plus standalone **`source`/provenance** (trust), **interval**, **clamp**, and **lifecycle `state`** leaves.
|
|
143
|
+
- **Analytical & communication primitives** _(opt-in)_ — `@ponchia/ui/css/analytical.css`: **figure** stages, SVG **annotations** (subject/connector/note), standalone **legends**/data-keys, text/evidence **marks**, leader-line **connectors** (+ a pure `@ponchia/ui/connectors` geometry kernel), a guided-focus **spotlight**, a **crosshair**/readout, a cross-cutting **selection** vocabulary, and CSS Custom Highlight API **highlights**. Each owns its visual grammar + pure geometry and refuses scales/state/hit-testing — figures that explain themselves, not a chart engine. The richer annotation engine lives in `@ponchia/annotations`; this package keeps only the dependency-free Bronto helper surface. Plus standalone **`source`/provenance** (trust), **interval**, **clamp**, and **lifecycle `state`** leaves.
|
|
144
144
|
- **Reports** _(opt-in)_ — `@ponchia/ui/css/report-kit.css` for a complete static/PDF report vocabulary, or `@ponchia/ui/css/report.css` plus only the leaves a narrow report uses. Covers, decisions, claims, sections, severity-labelled findings, evidence packets, evidence ledgers, action registers, source-card bindings, `ui-figure` composition, intervals, bounded excerpts, chart wrappers and print utilities.
|
|
145
145
|
- **Motion & dots** — the dot-matrix motif kit: dot grid, status dots, dot loaders, the orbital spinner, matrix reveal — all reduced-motion aware.
|
|
146
146
|
- **Glyphs** — `@ponchia/ui/glyphs`, a 71-glyph dot-matrix icon set on the `.ui-dotmatrix` primitive (display marks + crisp `solid` inline icons + one-node `.ui-icon` mask rendering).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"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"}
|
package/annotations/index.js
CHANGED
|
@@ -209,8 +209,7 @@ import {
|
|
|
209
209
|
arrowHead,
|
|
210
210
|
dotMark,
|
|
211
211
|
angleBetween,
|
|
212
|
-
// Shared scalar/geometry kernel
|
|
213
|
-
// and the local clamp had silently diverged from the connectors one).
|
|
212
|
+
// Shared scalar/geometry kernel for annotation and connector path output.
|
|
214
213
|
roundNumber,
|
|
215
214
|
finite,
|
|
216
215
|
dimension,
|
|
@@ -220,8 +219,8 @@ import {
|
|
|
220
219
|
rectPath,
|
|
221
220
|
} from '../connectors/index.js';
|
|
222
221
|
|
|
223
|
-
// A circle subject is just a filled dot at (x, y)
|
|
224
|
-
//
|
|
222
|
+
// A circle subject is just a filled dot at (x, y); delegate to the connector
|
|
223
|
+
// kernel so arc geometry and numeric precision stay aligned.
|
|
225
224
|
function circlePathAt(x, y, radius) {
|
|
226
225
|
return dotMark({ x, y }, radius);
|
|
227
226
|
}
|
|
@@ -670,8 +669,8 @@ export function connectorCurve(opts = {}) {
|
|
|
670
669
|
return curvePath(start, end, { curvature: 0.35 });
|
|
671
670
|
}
|
|
672
671
|
|
|
673
|
-
// subject.type → its path builder. A flat dispatch table
|
|
674
|
-
//
|
|
672
|
+
// subject.type → its path builder. A flat dispatch table keyed by the
|
|
673
|
+
// SubjectType union; an unknown type throws below.
|
|
675
674
|
const SUBJECT_BUILDERS = {
|
|
676
675
|
circle: circleSubjectPath,
|
|
677
676
|
rect: rectSubjectPath,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["carousel.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["carousel.js"],"names":[],"mappings":"AA6HA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAsJ3C"}
|
package/behaviors/carousel.js
CHANGED
|
@@ -43,6 +43,86 @@ const renderedStatusIndex = (status) => {
|
|
|
43
43
|
return Number.isInteger(value) ? value - 1 : -1;
|
|
44
44
|
};
|
|
45
45
|
|
|
46
|
+
const snapshotCarouselState = ({ viewport, slides, status, prevBtn, nextBtn, thumbs }) => ({
|
|
47
|
+
viewport: snapshotNode(viewport),
|
|
48
|
+
slides: slides.map((slide) => snapshotNode(slide)),
|
|
49
|
+
status: snapshotNode(status, { html: true }),
|
|
50
|
+
controls: [prevBtn, nextBtn, ...thumbs].filter(Boolean).map((control) => snapshotNode(control)),
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
function restoreCarouselState(state) {
|
|
54
|
+
restoreNode(state.viewport);
|
|
55
|
+
state.slides.forEach(restoreNode);
|
|
56
|
+
restoreNode(state.status);
|
|
57
|
+
state.controls.forEach(restoreNode);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function setDefaultButtonType(button) {
|
|
61
|
+
if (button?.tagName === 'BUTTON' && !button.hasAttribute('type')) button.type = 'button';
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function applyCarouselA11y({ box, viewport, slides, status, prevBtn, nextBtn, thumbs, n }) {
|
|
65
|
+
// ARIA scaffolding — pragmatic carousel semantics (not the full APG
|
|
66
|
+
// tablist), the same restraint initMenu takes.
|
|
67
|
+
viewport.setAttribute('role', 'group');
|
|
68
|
+
viewport.setAttribute('aria-roledescription', 'carousel');
|
|
69
|
+
if (!viewport.hasAttribute('aria-label')) {
|
|
70
|
+
viewport.setAttribute(
|
|
71
|
+
'aria-label',
|
|
72
|
+
box.getAttribute('data-bronto-carousel-label') || 'Carousel',
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
if (!viewport.hasAttribute('tabindex')) viewport.tabIndex = 0;
|
|
76
|
+
slides.forEach((slide, i) => {
|
|
77
|
+
slide.setAttribute('role', 'group');
|
|
78
|
+
slide.setAttribute('aria-roledescription', 'slide');
|
|
79
|
+
if (!slide.hasAttribute('aria-label')) slide.setAttribute('aria-label', `${i + 1} of ${n}`);
|
|
80
|
+
});
|
|
81
|
+
if (status) status.setAttribute('aria-live', 'polite');
|
|
82
|
+
[prevBtn, nextBtn, ...thumbs].forEach(setDefaultButtonType);
|
|
83
|
+
if (prevBtn && !prevBtn.hasAttribute('aria-label'))
|
|
84
|
+
prevBtn.setAttribute('aria-label', 'Previous');
|
|
85
|
+
if (nextBtn && !nextBtn.hasAttribute('aria-label')) nextBtn.setAttribute('aria-label', 'Next');
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function bindCarouselLifecycle({
|
|
89
|
+
box,
|
|
90
|
+
viewport,
|
|
91
|
+
slides,
|
|
92
|
+
status,
|
|
93
|
+
prevBtn,
|
|
94
|
+
nextBtn,
|
|
95
|
+
thumbs,
|
|
96
|
+
n,
|
|
97
|
+
render,
|
|
98
|
+
onKey,
|
|
99
|
+
onClick,
|
|
100
|
+
io,
|
|
101
|
+
holdProgrammatic,
|
|
102
|
+
clearProgrammaticTimer,
|
|
103
|
+
}) {
|
|
104
|
+
const state = snapshotCarouselState({ viewport, slides, status, prevBtn, nextBtn, thumbs });
|
|
105
|
+
applyCarouselA11y({ box, viewport, slides, status, prevBtn, nextBtn, thumbs, n });
|
|
106
|
+
render();
|
|
107
|
+
viewport.addEventListener('keydown', onKey);
|
|
108
|
+
box.addEventListener('click', onClick);
|
|
109
|
+
// Observe inside the add callback so observe/disconnect pair with the
|
|
110
|
+
// binding lifecycle: a re-init tears down the prior binding (which
|
|
111
|
+
// disconnects the old observer) before this starts, so two observers
|
|
112
|
+
// never watch the same slides — even for one tick.
|
|
113
|
+
if (io) {
|
|
114
|
+
holdProgrammatic();
|
|
115
|
+
slides.forEach((slide) => io.observe(slide));
|
|
116
|
+
}
|
|
117
|
+
return () => {
|
|
118
|
+
viewport.removeEventListener('keydown', onKey);
|
|
119
|
+
box.removeEventListener('click', onClick);
|
|
120
|
+
io?.disconnect();
|
|
121
|
+
clearProgrammaticTimer();
|
|
122
|
+
restoreCarouselState(state);
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
|
|
46
126
|
/**
|
|
47
127
|
* Image carousel / gallery, built on CSS scroll-snap so touch + trackpad
|
|
48
128
|
* swipe (and momentum) are the browser's, not hand-rolled. This wires the
|
|
@@ -193,66 +273,26 @@ export function initCarousel({ root } = {}) {
|
|
|
193
273
|
);
|
|
194
274
|
}
|
|
195
275
|
|
|
196
|
-
const bound = bindOnce(box, 'carousel', () =>
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
slides.forEach((s, i) => {
|
|
217
|
-
s.setAttribute('role', 'group');
|
|
218
|
-
s.setAttribute('aria-roledescription', 'slide');
|
|
219
|
-
if (!s.hasAttribute('aria-label')) s.setAttribute('aria-label', `${i + 1} of ${n}`);
|
|
220
|
-
});
|
|
221
|
-
if (status) status.setAttribute('aria-live', 'polite');
|
|
222
|
-
for (const b of [prevBtn, nextBtn]) {
|
|
223
|
-
if (!b) continue;
|
|
224
|
-
if (b.tagName === 'BUTTON' && !b.hasAttribute('type')) b.type = 'button';
|
|
225
|
-
}
|
|
226
|
-
for (const b of thumbs) {
|
|
227
|
-
if (b.tagName === 'BUTTON' && !b.hasAttribute('type')) b.type = 'button';
|
|
228
|
-
}
|
|
229
|
-
if (prevBtn && !prevBtn.hasAttribute('aria-label'))
|
|
230
|
-
prevBtn.setAttribute('aria-label', 'Previous');
|
|
231
|
-
if (nextBtn && !nextBtn.hasAttribute('aria-label'))
|
|
232
|
-
nextBtn.setAttribute('aria-label', 'Next');
|
|
233
|
-
|
|
234
|
-
render();
|
|
235
|
-
viewport.addEventListener('keydown', onKey);
|
|
236
|
-
box.addEventListener('click', onClick);
|
|
237
|
-
// Observe inside the add callback so observe/disconnect pair with the
|
|
238
|
-
// binding lifecycle: a re-init tears down the prior binding (which
|
|
239
|
-
// disconnects the old observer) before this starts, so two observers
|
|
240
|
-
// never watch the same slides — even for one tick.
|
|
241
|
-
if (io) {
|
|
242
|
-
holdProgrammatic();
|
|
243
|
-
slides.forEach((s) => io.observe(s));
|
|
244
|
-
}
|
|
245
|
-
return () => {
|
|
246
|
-
viewport.removeEventListener('keydown', onKey);
|
|
247
|
-
box.removeEventListener('click', onClick);
|
|
248
|
-
io?.disconnect();
|
|
249
|
-
if (progTimer) clearTimeout(progTimer);
|
|
250
|
-
restoreNode(state.viewport);
|
|
251
|
-
state.slides.forEach(restoreNode);
|
|
252
|
-
restoreNode(state.status);
|
|
253
|
-
state.controls.forEach(restoreNode);
|
|
254
|
-
};
|
|
255
|
-
});
|
|
276
|
+
const bound = bindOnce(box, 'carousel', () =>
|
|
277
|
+
bindCarouselLifecycle({
|
|
278
|
+
box,
|
|
279
|
+
viewport,
|
|
280
|
+
slides,
|
|
281
|
+
status,
|
|
282
|
+
prevBtn,
|
|
283
|
+
nextBtn,
|
|
284
|
+
thumbs,
|
|
285
|
+
n,
|
|
286
|
+
render,
|
|
287
|
+
onKey,
|
|
288
|
+
onClick,
|
|
289
|
+
io,
|
|
290
|
+
holdProgrammatic,
|
|
291
|
+
clearProgrammaticTimer: () => {
|
|
292
|
+
if (progTimer) clearTimeout(progTimer);
|
|
293
|
+
},
|
|
294
|
+
}),
|
|
295
|
+
);
|
|
256
296
|
cleanups.push(bound);
|
|
257
297
|
}
|
|
258
298
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["combobox.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["combobox.js"],"names":[],"mappings":"AAmIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6O3C"}
|