inclusive-elements 0.3.4 → 0.4.1

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/README.md CHANGED
@@ -29,6 +29,7 @@ Detailed descriptions and usage instructions are contained within each element:
29
29
  - [Menu](src/menu)
30
30
  - [Modal](src/modal)
31
31
  - [Popup](src/popup)
32
+ - [Tabs](src/tabs)
32
33
  - [Toolbar](src/toolbar)
33
34
  - [Tooltip](src/tooltip)
34
35
 
@@ -1,480 +1,20 @@
1
- var T = Object.defineProperty;
2
- var D = (o, r, t) => r in o ? T(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
3
- var s = (o, r, t) => (D(o, typeof r != "symbol" ? r + "" : r, t), t);
4
- import { move as k, hello as h, goodbye as d, cancel as v } from "hello-goodbye";
5
- import { isFocusable as H, focusable as A } from "tabbable";
6
- import { createFocusTrap as O } from "focus-trap";
7
- import { autoUpdate as M, computePosition as g, shift as L, flip as x, size as K } from "@floating-ui/dom";
8
- class I extends HTMLElement {
9
- constructor() {
10
- super(...arguments);
11
- s(this, "onOpen", (t) => {
12
- this.querySelectorAll(
13
- ":scope > ui-disclosure"
14
- ).forEach((e) => {
15
- e.open = e === t.target, this.required && e.toggleAttribute("disabled", e === t.target);
16
- });
17
- });
18
- }
19
- connectedCallback() {
20
- this.addEventListener("open", this.onOpen, { capture: !0 });
21
- }
22
- disconnectedCallback() {
23
- this.removeEventListener("open", this.onOpen, { capture: !0 });
24
- }
25
- get required() {
26
- return this.hasAttribute("required");
27
- }
28
- }
29
- const w = class extends HTMLElement {
30
- constructor() {
31
- super();
32
- s(this, "timeouts", /* @__PURE__ */ new Map());
33
- s(this, "index", 0);
34
- new MutationObserver((e) => {
35
- e.forEach((i) => {
36
- i.addedNodes.forEach((n) => {
37
- n instanceof HTMLElement && this.show(n);
38
- });
39
- });
40
- }).observe(this, { childList: !0 });
41
- }
42
- connectedCallback() {
43
- this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("aria-live") || this.setAttribute("aria-live", "polite"), this.hasAttribute("aria-relevant") || this.setAttribute("aria-relevant", "additions");
44
- for (const t of this.children)
45
- this.show(t, { animate: !1 });
46
- }
47
- show(t, e = {}) {
48
- const i = e.key || t.dataset.key || String(this.index++);
49
- t.dataset.key = i, this.contains(t) ? h(t) : e.animate === !1 ? this.append(t) : k(this.children, () => {
50
- this.append(t), h(t);
51
- });
52
- const n = Number(
53
- e.duration !== void 0 ? e.duration : t.dataset.duration || w.duration
54
- );
55
- return n > 0 && (this.startTimeout(t, n), t.addEventListener("mouseenter", this.clearTimeout.bind(this, t)), t.addEventListener("focusin", this.clearTimeout.bind(this, t)), t.addEventListener(
56
- "mouseleave",
57
- this.startTimeout.bind(this, t, n)
58
- ), t.addEventListener(
59
- "focusout",
60
- this.startTimeout.bind(this, t, n)
61
- )), i;
62
- }
63
- dismiss(t) {
64
- if (typeof t == "string") {
65
- this.querySelectorAll(
66
- `[data-key="${t}"]`
67
- ).forEach((e) => {
68
- this.dismiss(e);
69
- });
70
- return;
71
- }
72
- k(this.children, () => {
73
- d(t).then(() => this.removeChild(t));
74
- }), this.clearTimeout(t);
75
- }
76
- clear() {
77
- Array.from(this.children).forEach((t) => {
78
- this.dismiss(t);
79
- });
80
- }
81
- speak(t) {
82
- const e = document.createElement("div");
83
- Object.assign(e.style, {
84
- clip: "rect(0 0 0 0)",
85
- clipPath: "inset(50%)",
86
- height: "1px",
87
- overflow: "hidden",
88
- position: "absolute",
89
- whiteSpace: "nowrap",
90
- width: "1px"
91
- }), e.textContent = t, this.show(e);
92
- }
93
- startTimeout(t, e) {
94
- this.clearTimeout(t), this.timeouts.set(
95
- t,
96
- window.setTimeout(() => {
97
- this.dismiss(t);
98
- }, e)
99
- );
100
- }
101
- clearTimeout(t) {
102
- this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
103
- }
104
- };
105
- let b = w;
106
- s(b, "duration", 1e4);
107
- function C(o) {
108
- return o.altKey || o.ctrlKey || o.metaKey || o.shiftKey || o.button !== void 0 && o.button !== 0;
109
- }
110
- class P extends HTMLElement {
111
- constructor() {
112
- super(...arguments);
113
- s(this, "onButtonClick", (t) => {
114
- !C(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
115
- });
116
- }
117
- static get observedAttributes() {
118
- return ["open"];
119
- }
120
- connectedCallback() {
121
- this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
122
- }
123
- disconnectedCallback() {
124
- v(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
125
- }
126
- get open() {
127
- return this.hasAttribute("open");
128
- }
129
- set open(t) {
130
- t ? this.setAttribute("open", "") : this.removeAttribute("open");
131
- }
132
- get disabled() {
133
- return this.hasAttribute("disabled");
134
- }
135
- attributeChangedCallback(t, e, i) {
136
- t === "open" && (i !== null ? this.wasOpened() : this.wasClosed());
137
- }
138
- wasOpened() {
139
- this.content.hidden && (this.content.hidden = !1, h(this.content), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("open")));
140
- }
141
- wasClosed() {
142
- this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), d(this.content).then(() => this.content.hidden = !0), this.dispatchEvent(new Event("close")));
143
- }
144
- get button() {
145
- return this.querySelector("button, [role=button]");
146
- }
147
- get content() {
148
- return this.children[1];
149
- }
150
- }
151
- const y = class extends HTMLElement {
152
- constructor() {
153
- super(...arguments);
154
- s(this, "search", "");
155
- s(this, "searchTimeout");
156
- s(this, "onKeyDown", (t) => {
157
- if (!this.hidden) {
158
- if (t.key === "ArrowUp") {
159
- this.navigate(-1), t.preventDefault();
160
- return;
161
- }
162
- if (t.key === "ArrowDown") {
163
- this.navigate(1), t.preventDefault();
164
- return;
165
- }
166
- t.key.length > 1 || t.ctrlKey || t.metaKey || t.altKey || (this.search += t.key.toLowerCase(), t.preventDefault(), clearTimeout(this.searchTimeout), this.searchTimeout = window.setTimeout(() => {
167
- this.search = "";
168
- }, y.searchDelay), this.items.some((e) => {
169
- var i;
170
- return ((i = e.textContent) == null ? void 0 : i.trim().toLowerCase().indexOf(this.search)) === 0 ? (e.focus(), !0) : !1;
171
- }));
172
- }
173
- });
174
- }
175
- connectedCallback() {
176
- this.hasAttribute("role") || this.setAttribute("role", "menu"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.items.forEach((t) => {
177
- t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1");
178
- }), this.addEventListener("keydown", this.onKeyDown);
179
- }
180
- disconnectedCallback() {
181
- this.removeEventListener("keydown", this.onKeyDown);
182
- }
183
- get items() {
184
- return Array.from(
185
- this.querySelectorAll("[role^=menuitem]")
186
- ).filter((t) => H(t));
187
- }
188
- navigate(t) {
189
- var n;
190
- const e = this.items;
191
- let i = (document.activeElement instanceof HTMLElement ? e.indexOf(document.activeElement) : -1) + t;
192
- i < 0 && (i = e.length - 1), i >= e.length && (i = 0), (n = e[i]) == null || n.focus();
193
- }
194
- };
195
- let f = y;
196
- s(f, "searchDelay", 800);
197
- const u = class extends HTMLElement {
198
- constructor() {
199
- super();
200
- s(this, "focusTrap");
201
- s(this, "connected", !1);
202
- const t = document.createElement("template");
203
- t.innerHTML = `
204
- <div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
205
- <div part="content" style="z-index: 1"><slot></slot></div>
206
- `;
207
- const e = this.attachShadow({ mode: "open" });
208
- e.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
209
- var i;
210
- this.hasAttribute("static") ? (i = u.attention) == null || i.call(u, e.children[1]) : this.close();
211
- }), this.focusTrap = O(this, {
212
- escapeDeactivates: !1,
213
- allowOutsideClick: !0,
214
- preventScroll: !0
215
- });
216
- }
217
- static get observedAttributes() {
218
- return ["open"];
219
- }
220
- connectedCallback() {
221
- var t, e, i, n, a, E;
222
- this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (e = this.content) == null || e.setAttribute("role", "dialog"), (i = this.content) != null && i.hasAttribute("aria-modal") || (n = this.content) == null || n.setAttribute("aria-modal", "true"), (a = this.content) != null && a.hasAttribute("tabindex") || (E = this.content) == null || E.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (p) => {
223
- p.key === "Escape" && this.open && (p.preventDefault(), p.stopPropagation(), this.close());
224
- }), this.open && this.wasOpened();
225
- }
226
- disconnectedCallback() {
227
- this.connected = !1;
228
- }
229
- get open() {
230
- return this.hasAttribute("open");
231
- }
232
- set open(t) {
233
- t ? this.setAttribute("open", "") : this.removeAttribute("open");
234
- }
235
- close() {
236
- if (!this.open)
237
- return;
238
- const t = new Event("beforeclose", { cancelable: !0 });
239
- this.dispatchEvent(t) && (this.open = !1);
240
- }
241
- attributeChangedCallback(t, e, i) {
242
- t !== "open" || !this.connected || (i !== null ? this.wasOpened() : this.wasClosed());
243
- }
244
- wasOpened() {
245
- var t, e;
246
- this.hidden = !1, h(this), (t = this.focusTrap) == null || t.activate(), (e = this.querySelector("[autofocus]")) == null || e.focus(), this.dispatchEvent(new Event("open"));
247
- }
248
- wasClosed() {
249
- var t;
250
- (t = this.focusTrap) == null || t.deactivate(), d(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
251
- }
252
- get backdrop() {
253
- var t;
254
- return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
255
- }
256
- get content() {
257
- return this.firstElementChild;
258
- }
259
- };
260
- let m = u;
261
- s(m, "attention", (t) => t.animate(
262
- [
263
- { transform: "scale(1)" },
264
- { transform: "scale(1.1)" },
265
- { transform: "scale(1)" }
266
- ],
267
- 300
268
- ));
269
- class $ extends HTMLElement {
270
- constructor() {
271
- super();
272
- s(this, "cleanup");
273
- s(this, "onButtonClick", (t) => {
274
- !C(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
275
- });
276
- s(this, "onButtonKeyDown", (t) => {
277
- var e;
278
- t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, (e = A(this.content)[0]) == null || e.focus());
279
- });
280
- s(this, "onKeyDown", (t) => {
281
- t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, this.button.focus());
282
- });
283
- s(this, "onFocusOut", (t) => {
284
- (!(t.relatedTarget instanceof Node) || !this.contains(t.relatedTarget)) && (this.open = !1);
285
- });
286
- s(this, "onContentClick", (t) => {
287
- t.target instanceof Element && t.target.closest("[role=menuitem], [role=menuitemradio]") && (this.open = !1, this.button.focus());
288
- });
289
- const t = document.createElement("template");
290
- t.innerHTML = `
291
- <div part="backdrop" hidden style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
292
- <slot></slot>
293
- `, this.attachShadow({ mode: "open" }).appendChild(t.content.cloneNode(!0)), this.backdrop.onclick = () => this.open = !1;
294
- }
295
- static get observedAttributes() {
296
- return ["open"];
297
- }
298
- connectedCallback() {
299
- this.backdrop.hidden = !0, this.content.hidden = !0, this.open = !1, this.button.setAttribute("aria-expanded", "false"), setTimeout(() => {
300
- this.content.getAttribute("role") === "menu" && this.button.setAttribute("aria-haspopup", "true");
301
- }), this.button.addEventListener("click", this.onButtonClick), this.button.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), this.content.addEventListener("click", this.onContentClick);
302
- }
303
- disconnectedCallback() {
304
- v(this.backdrop), v(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeAttribute("aria-haspopup"), this.button.removeEventListener("click", this.onButtonClick), this.button.removeEventListener("keydown", this.onButtonKeyDown), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focusout", this.onFocusOut), this.content.removeEventListener("click", this.onContentClick);
305
- }
306
- get open() {
307
- return this.hasAttribute("open");
308
- }
309
- set open(t) {
310
- t ? this.setAttribute("open", "") : this.removeAttribute("open");
311
- }
312
- get disabled() {
313
- return this.hasAttribute("disabled");
314
- }
315
- attributeChangedCallback(t, e, i) {
316
- t === "open" && (i !== null ? this.wasOpened() : this.wasClosed());
317
- }
318
- wasOpened() {
319
- if (!this.content.hidden)
320
- return;
321
- this.content.hidden = !1, this.content.style.position = "absolute", this.backdrop.hidden = !1, h(this.content), h(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.cleanup = M(
322
- this.button,
323
- this.content,
324
- () => {
325
- g(this.button, this.content, {
326
- placement: this.getAttribute("placement") || "bottom",
327
- middleware: [
328
- L(),
329
- x(),
330
- K({
331
- apply: ({ availableWidth: e, availableHeight: i }) => {
332
- Object.assign(this.content.style, {
333
- maxWidth: "",
334
- maxHeight: ""
335
- });
336
- const n = getComputedStyle(this.content);
337
- (n.maxWidth === "none" || e < parseInt(n.maxWidth)) && (this.content.style.maxWidth = `${e}px`), (n.maxHeight === "none" || i < parseInt(n.maxHeight)) && (this.content.style.maxHeight = `${i}px`);
338
- }
339
- })
340
- ]
341
- }).then(({ x: e, y: i, placement: n }) => {
342
- Object.assign(this.content.style, {
343
- left: `${e}px`,
344
- top: `${i}px`
345
- }), this.content.dataset.placement = n;
346
- });
347
- },
348
- { ancestorScroll: !1 }
349
- );
350
- const t = this.content.querySelector("[autofocus]");
351
- t ? t.focus() : this.content.focus(), this.dispatchEvent(new Event("open"));
352
- }
353
- wasClosed() {
354
- var t;
355
- this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), d(this.backdrop).then(() => this.backdrop.hidden = !0), d(this.content).then(() => this.content.hidden = !0), this.dispatchEvent(new Event("close")));
356
- }
357
- get backdrop() {
358
- var t;
359
- return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
360
- }
361
- get button() {
362
- return this.querySelector("button, [role=button]");
363
- }
364
- get content() {
365
- return this.children[1];
366
- }
367
- }
368
- class U extends HTMLElement {
369
- constructor() {
370
- super(...arguments);
371
- s(this, "onInitialFocus", () => {
372
- this.removeAttribute("tabindex"), this.focusControlAtIndex(0);
373
- });
374
- s(this, "onKeyDown", (t) => {
375
- if (t.key !== "ArrowRight" && t.key !== "ArrowLeft" && t.key !== "Home" && t.key !== "End")
376
- return;
377
- const e = this.controls, i = this.controls.length, n = e.indexOf(t.target);
378
- if (n === -1)
379
- return;
380
- let a = 0;
381
- t.key === "ArrowLeft" && (a = n - 1), t.key === "ArrowRight" && (a = n + 1), t.key === "End" && (a = i - 1), a < 0 && (a = i - 1), a > i - 1 && (a = 0), this.focusControlAtIndex(a), t.preventDefault();
382
- });
383
- }
384
- connectedCallback() {
385
- this.hasAttribute("role") || this.setAttribute("role", "toolbar"), this.setAttribute("tabindex", "0"), this.addEventListener("focus", this.onInitialFocus, { once: !0 }), this.addEventListener("keydown", this.onKeyDown);
386
- }
387
- disconnectedCallback() {
388
- this.removeEventListener("keydown", this.onKeyDown);
389
- }
390
- focusControlAtIndex(t) {
391
- this.controls.forEach((e, i) => {
392
- i === t ? (e.setAttribute("tabindex", "0"), e.focus()) : e.setAttribute("tabindex", "-1");
393
- });
394
- }
395
- get controls() {
396
- return A(this);
397
- }
398
- }
399
- const l = class extends HTMLElement {
400
- constructor() {
401
- super(...arguments);
402
- s(this, "parent");
403
- s(this, "tooltip");
404
- s(this, "timeout");
405
- s(this, "observer");
406
- s(this, "showing", !1);
407
- s(this, "onMouseEnter", this.afterDelay.bind(this, this.show));
408
- s(this, "onFocus", this.show.bind(this));
409
- s(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
410
- s(this, "onBlur", this.hide.bind(this));
411
- s(this, "onPointerUp", (t) => {
412
- t.pointerType === "mouse" ? this.hide() : this.show();
413
- });
414
- s(this, "onKeyDown", (t) => {
415
- t.key === "Escape" && this.hide();
416
- });
417
- }
418
- connectedCallback() {
419
- this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("mouseleave", this.onMouseLeave), this.parent.addEventListener("blur", this.onBlur), this.parent.addEventListener("pointerup", this.onPointerUp), this.observer = new MutationObserver((t) => {
420
- t.forEach((e) => {
421
- e.attributeName === "disabled" && this.hide();
422
- });
423
- }), this.observer.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("scroll", this.onBlur);
424
- }
425
- disconnectedCallback() {
426
- var t;
427
- this.tooltip && (this.tooltip.remove(), this.tooltip = void 0), this.parent && (this.parent.removeEventListener("mouseenter", this.onMouseEnter), this.parent.removeEventListener("focus", this.onFocus), this.parent.removeEventListener("mouseleave", this.onMouseLeave), this.parent.removeEventListener("blur", this.onBlur), this.parent.removeEventListener("pointerup", this.onPointerUp), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("scroll", this.onBlur), (t = this.observer) == null || t.disconnect(), clearTimeout(this.timeout);
428
- }
429
- get disabled() {
430
- return this.hasAttribute("disabled");
431
- }
432
- set disabled(t) {
433
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
434
- }
435
- show() {
436
- if (this.disabled)
437
- return;
438
- const t = this.createTooltip();
439
- clearTimeout(this.timeout), this.showing || (t.hidden = !1, h(t), this.showing = !0), t.innerHTML !== this.innerHTML && (t.innerHTML = this.innerHTML), t.style.position = "absolute", g(this.parent, t, {
440
- placement: this.getAttribute("placement") || l.placement,
441
- middleware: [L(), x()]
442
- }).then(({ x: e, y: i, placement: n }) => {
443
- Object.assign(t.style, {
444
- left: `${e}px`,
445
- top: `${i}px`
446
- }), t.dataset.placement = n;
447
- });
448
- }
449
- hide() {
450
- clearTimeout(this.timeout), this.showing && (this.showing = !1, d(this.tooltip).then(() => {
451
- this.tooltip && (this.tooltip.hidden = !0);
452
- }));
453
- }
454
- afterDelay(t) {
455
- clearTimeout(this.timeout);
456
- const e = parseInt(this.getAttribute("delay") || "");
457
- this.timeout = window.setTimeout(
458
- t.bind(this),
459
- isNaN(e) ? l.delay : e
460
- );
461
- }
462
- createTooltip() {
463
- return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || l.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
464
- "mouseleave",
465
- this.afterDelay.bind(this, this.hide)
466
- ), document.body.appendChild(this.tooltip)), this.tooltip;
467
- }
468
- };
469
- let c = l;
470
- s(c, "delay", 100), s(c, "placement", "top"), s(c, "tooltipClass", "tooltip");
1
+ import { default as o } from "./inclusive-elements2.js";
2
+ import { default as r } from "./inclusive-elements3.js";
3
+ import { default as f } from "./inclusive-elements4.js";
4
+ import { default as s } from "./inclusive-elements5.js";
5
+ import { default as u } from "./inclusive-elements6.js";
6
+ import { default as n } from "./inclusive-elements7.js";
7
+ import { default as E } from "./inclusive-elements8.js";
8
+ import { default as i } from "./inclusive-elements9.js";
9
+ import { default as b } from "./inclusive-elements10.js";
471
10
  export {
472
- I as AccordionElement,
473
- b as AlertsElement,
474
- P as DisclosureElement,
475
- f as MenuElement,
476
- m as ModalElement,
477
- $ as PopupElement,
478
- U as ToolbarElement,
479
- c as TooltipElement
11
+ o as AccordionElement,
12
+ r as AlertsElement,
13
+ f as DisclosureElement,
14
+ s as MenuElement,
15
+ u as ModalElement,
16
+ n as PopupElement,
17
+ E as TabsElement,
18
+ i as ToolbarElement,
19
+ b as TooltipElement
480
20
  };
@@ -0,0 +1,80 @@
1
+ var d = Object.defineProperty;
2
+ var l = (o, i, t) => i in o ? d(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
3
+ var e = (o, i, t) => (l(o, typeof i != "symbol" ? i + "" : i, t), t);
4
+ import { computePosition as p, shift as u, flip as c } from "@floating-ui/dom";
5
+ import { hello as m, goodbye as v } from "hello-goodbye";
6
+ const r = class extends HTMLElement {
7
+ constructor() {
8
+ super(...arguments);
9
+ e(this, "parent");
10
+ e(this, "tooltip");
11
+ e(this, "timeout");
12
+ e(this, "observer");
13
+ e(this, "showing", !1);
14
+ e(this, "onMouseEnter", this.afterDelay.bind(this, this.show));
15
+ e(this, "onFocus", this.show.bind(this));
16
+ e(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
17
+ e(this, "onBlur", this.hide.bind(this));
18
+ e(this, "onPointerUp", (t) => {
19
+ t.pointerType === "mouse" ? this.hide() : this.show();
20
+ });
21
+ e(this, "onKeyDown", (t) => {
22
+ t.key === "Escape" && this.hide();
23
+ });
24
+ }
25
+ connectedCallback() {
26
+ this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("mouseleave", this.onMouseLeave), this.parent.addEventListener("blur", this.onBlur), this.parent.addEventListener("pointerup", this.onPointerUp), this.observer = new MutationObserver((t) => {
27
+ t.forEach((s) => {
28
+ s.attributeName === "disabled" && this.hide();
29
+ });
30
+ }), this.observer.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("scroll", this.onBlur);
31
+ }
32
+ disconnectedCallback() {
33
+ var t;
34
+ this.tooltip && (this.tooltip.remove(), this.tooltip = void 0), this.parent && (this.parent.removeEventListener("mouseenter", this.onMouseEnter), this.parent.removeEventListener("focus", this.onFocus), this.parent.removeEventListener("mouseleave", this.onMouseLeave), this.parent.removeEventListener("blur", this.onBlur), this.parent.removeEventListener("pointerup", this.onPointerUp), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("scroll", this.onBlur), (t = this.observer) == null || t.disconnect(), clearTimeout(this.timeout);
35
+ }
36
+ get disabled() {
37
+ return this.hasAttribute("disabled");
38
+ }
39
+ set disabled(t) {
40
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
41
+ }
42
+ show() {
43
+ if (this.disabled)
44
+ return;
45
+ const t = this.createTooltip();
46
+ clearTimeout(this.timeout), this.showing || (t.hidden = !1, m(t), this.showing = !0), t.innerHTML !== this.innerHTML && (t.innerHTML = this.innerHTML), t.style.position = "absolute", p(this.parent, t, {
47
+ placement: this.getAttribute("placement") || r.placement,
48
+ middleware: [u(), c()]
49
+ }).then(({ x: s, y: h, placement: a }) => {
50
+ Object.assign(t.style, {
51
+ left: `${s}px`,
52
+ top: `${h}px`
53
+ }), t.dataset.placement = a;
54
+ });
55
+ }
56
+ hide() {
57
+ clearTimeout(this.timeout), this.showing && (this.showing = !1, v(this.tooltip).then(() => {
58
+ this.tooltip && (this.tooltip.hidden = !0);
59
+ }));
60
+ }
61
+ afterDelay(t) {
62
+ clearTimeout(this.timeout);
63
+ const s = parseInt(this.getAttribute("delay") || "");
64
+ this.timeout = window.setTimeout(
65
+ t.bind(this),
66
+ isNaN(s) ? r.delay : s
67
+ );
68
+ }
69
+ createTooltip() {
70
+ return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || r.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
71
+ "mouseleave",
72
+ this.afterDelay.bind(this, this.hide)
73
+ ), document.body.appendChild(this.tooltip)), this.tooltip;
74
+ }
75
+ };
76
+ let n = r;
77
+ e(n, "delay", 100), e(n, "placement", "top"), e(n, "tooltipClass", "tooltip");
78
+ export {
79
+ n as default
80
+ };
@@ -0,0 +1,6 @@
1
+ function n(t) {
2
+ return t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || t.button !== void 0 && t.button !== 0;
3
+ }
4
+ export {
5
+ n as shouldOpenInNewTab
6
+ };
@@ -0,0 +1,28 @@
1
+ var n = Object.defineProperty;
2
+ var l = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
+ var s = (r, e, t) => (l(r, typeof e != "symbol" ? e + "" : e, t), t);
4
+ class a extends HTMLElement {
5
+ constructor() {
6
+ super(...arguments);
7
+ s(this, "onToggle", (t) => {
8
+ const o = t.target;
9
+ o.open && this.querySelectorAll(
10
+ ":scope > :is(ui-disclosure, details)"
11
+ ).forEach((i) => {
12
+ i.toggleAttribute("open", i === o), this.required && i.toggleAttribute("disabled", i === o);
13
+ });
14
+ });
15
+ }
16
+ connectedCallback() {
17
+ this.addEventListener("toggle", this.onToggle, { capture: !0 });
18
+ }
19
+ disconnectedCallback() {
20
+ this.removeEventListener("toggle", this.onToggle, { capture: !0 });
21
+ }
22
+ get required() {
23
+ return this.hasAttribute("required");
24
+ }
25
+ }
26
+ export {
27
+ a as default
28
+ };
@@ -0,0 +1,85 @@
1
+ var c = Object.defineProperty;
2
+ var m = (a, s, t) => s in a ? c(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
3
+ var o = (a, s, t) => (m(a, typeof s != "symbol" ? s + "" : s, t), t);
4
+ import { move as d, hello as u, goodbye as f } from "hello-goodbye";
5
+ const n = class extends HTMLElement {
6
+ constructor() {
7
+ super();
8
+ o(this, "timeouts", /* @__PURE__ */ new Map());
9
+ o(this, "index", 0);
10
+ new MutationObserver((i) => {
11
+ i.forEach((r) => {
12
+ r.addedNodes.forEach((e) => {
13
+ e instanceof HTMLElement && this.show(e);
14
+ });
15
+ });
16
+ }).observe(this, { childList: !0 });
17
+ }
18
+ connectedCallback() {
19
+ this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("aria-live") || this.setAttribute("aria-live", "polite"), this.hasAttribute("aria-relevant") || this.setAttribute("aria-relevant", "additions");
20
+ for (const t of this.children)
21
+ this.show(t, { animate: !1 });
22
+ }
23
+ show(t, i = {}) {
24
+ const r = i.key || t.dataset.key || String(this.index++);
25
+ t.dataset.key = r, this.contains(t) ? u(t) : i.animate === !1 ? this.append(t) : d(this.children, () => {
26
+ this.append(t), u(t);
27
+ });
28
+ const e = Number(
29
+ i.duration !== void 0 ? i.duration : t.dataset.duration || n.duration
30
+ );
31
+ return e > 0 && (this.startTimeout(t, e), t.addEventListener("mouseenter", this.clearTimeout.bind(this, t)), t.addEventListener("focusin", this.clearTimeout.bind(this, t)), t.addEventListener(
32
+ "mouseleave",
33
+ this.startTimeout.bind(this, t, e)
34
+ ), t.addEventListener(
35
+ "focusout",
36
+ this.startTimeout.bind(this, t, e)
37
+ )), r;
38
+ }
39
+ dismiss(t) {
40
+ if (typeof t == "string") {
41
+ this.querySelectorAll(
42
+ `[data-key="${t}"]`
43
+ ).forEach((i) => {
44
+ this.dismiss(i);
45
+ });
46
+ return;
47
+ }
48
+ d(this.children, () => {
49
+ f(t).then(() => this.removeChild(t));
50
+ }), this.clearTimeout(t);
51
+ }
52
+ clear() {
53
+ Array.from(this.children).forEach((t) => {
54
+ this.dismiss(t);
55
+ });
56
+ }
57
+ speak(t) {
58
+ const i = document.createElement("div");
59
+ Object.assign(i.style, {
60
+ clip: "rect(0 0 0 0)",
61
+ clipPath: "inset(50%)",
62
+ height: "1px",
63
+ overflow: "hidden",
64
+ position: "absolute",
65
+ whiteSpace: "nowrap",
66
+ width: "1px"
67
+ }), i.textContent = t, this.show(i);
68
+ }
69
+ startTimeout(t, i) {
70
+ this.clearTimeout(t), this.timeouts.set(
71
+ t,
72
+ window.setTimeout(() => {
73
+ this.dismiss(t);
74
+ }, i)
75
+ );
76
+ }
77
+ clearTimeout(t) {
78
+ this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
79
+ }
80
+ };
81
+ let h = n;
82
+ o(h, "duration", 1e4);
83
+ export {
84
+ h as default
85
+ };
@@ -0,0 +1,49 @@
1
+ var o = Object.defineProperty;
2
+ var r = (n, e, t) => e in n ? o(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
3
+ var i = (n, e, t) => (r(n, typeof e != "symbol" ? e + "" : e, t), t);
4
+ import { cancel as h, hello as d, goodbye as a } from "hello-goodbye";
5
+ import { shouldOpenInNewTab as l } from "./inclusive-elements11.js";
6
+ class f extends HTMLElement {
7
+ constructor() {
8
+ super(...arguments);
9
+ i(this, "onButtonClick", (t) => {
10
+ !l(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
11
+ });
12
+ }
13
+ static get observedAttributes() {
14
+ return ["open"];
15
+ }
16
+ connectedCallback() {
17
+ this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
18
+ }
19
+ disconnectedCallback() {
20
+ h(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
21
+ }
22
+ get open() {
23
+ return this.hasAttribute("open");
24
+ }
25
+ set open(t) {
26
+ t ? this.setAttribute("open", "") : this.removeAttribute("open");
27
+ }
28
+ get disabled() {
29
+ return this.hasAttribute("disabled");
30
+ }
31
+ attributeChangedCallback(t, u, s) {
32
+ t === "open" && (s !== null ? this.wasOpened() : this.wasClosed());
33
+ }
34
+ wasOpened() {
35
+ this.content.hidden && (this.content.hidden = !1, d(this.content)), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("toggle"));
36
+ }
37
+ wasClosed() {
38
+ this.content.hidden || a(this.content).then(() => this.content.hidden = !0), this.button.setAttribute("aria-expanded", "false"), this.dispatchEvent(new Event("toggle"));
39
+ }
40
+ get button() {
41
+ return this.querySelector("button, [role=button]");
42
+ }
43
+ get content() {
44
+ return this.children[1];
45
+ }
46
+ }
47
+ export {
48
+ f as default
49
+ };
@@ -0,0 +1,53 @@
1
+ var c = Object.defineProperty;
2
+ var u = (r, e, t) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
+ var n = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
4
+ import { isFocusable as l } from "tabbable";
5
+ const o = class extends HTMLElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ n(this, "search", "");
9
+ n(this, "searchTimeout");
10
+ n(this, "onKeyDown", (t) => {
11
+ if (!this.hidden) {
12
+ if (t.key === "ArrowUp") {
13
+ this.navigate(-1), t.preventDefault();
14
+ return;
15
+ }
16
+ if (t.key === "ArrowDown") {
17
+ this.navigate(1), t.preventDefault();
18
+ return;
19
+ }
20
+ t.key.length > 1 || t.ctrlKey || t.metaKey || t.altKey || (this.search += t.key.toLowerCase(), t.preventDefault(), clearTimeout(this.searchTimeout), this.searchTimeout = window.setTimeout(() => {
21
+ this.search = "";
22
+ }, o.searchDelay), this.items.some((s) => {
23
+ var i;
24
+ return ((i = s.textContent) == null ? void 0 : i.trim().toLowerCase().indexOf(this.search)) === 0 ? (s.focus(), !0) : !1;
25
+ }));
26
+ }
27
+ });
28
+ }
29
+ connectedCallback() {
30
+ this.hasAttribute("role") || this.setAttribute("role", "menu"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.items.forEach((t) => {
31
+ t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1");
32
+ }), this.addEventListener("keydown", this.onKeyDown);
33
+ }
34
+ disconnectedCallback() {
35
+ this.removeEventListener("keydown", this.onKeyDown);
36
+ }
37
+ get items() {
38
+ return Array.from(
39
+ this.querySelectorAll("[role^=menuitem]")
40
+ ).filter((t) => l(t));
41
+ }
42
+ navigate(t) {
43
+ var h;
44
+ const s = this.items;
45
+ let i = (document.activeElement instanceof HTMLElement ? s.indexOf(document.activeElement) : -1) + t;
46
+ i < 0 && (i = s.length - 1), i >= s.length && (i = 0), (h = s[i]) == null || h.focus();
47
+ }
48
+ };
49
+ let a = o;
50
+ n(a, "searchDelay", 800);
51
+ export {
52
+ a as default
53
+ };
@@ -0,0 +1,80 @@
1
+ var p = Object.defineProperty;
2
+ var u = (n, s, t) => s in n ? p(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
3
+ var a = (n, s, t) => (u(n, typeof s != "symbol" ? s + "" : s, t), t);
4
+ import { createFocusTrap as f } from "focus-trap";
5
+ import { hello as b, goodbye as v } from "hello-goodbye";
6
+ const o = class extends HTMLElement {
7
+ constructor() {
8
+ super();
9
+ a(this, "focusTrap");
10
+ a(this, "connected", !1);
11
+ const t = document.createElement("template");
12
+ t.innerHTML = `
13
+ <div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
14
+ <div part="content" style="z-index: 1"><slot></slot></div>
15
+ `;
16
+ const e = this.attachShadow({ mode: "open" });
17
+ e.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
18
+ var i;
19
+ this.hasAttribute("static") ? (i = o.attention) == null || i.call(o, e.children[1]) : this.close();
20
+ }), this.focusTrap = f(this, {
21
+ escapeDeactivates: !1,
22
+ allowOutsideClick: !0,
23
+ preventScroll: !0
24
+ });
25
+ }
26
+ static get observedAttributes() {
27
+ return ["open"];
28
+ }
29
+ connectedCallback() {
30
+ var t, e, i, h, l, d;
31
+ this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (e = this.content) == null || e.setAttribute("role", "dialog"), (i = this.content) != null && i.hasAttribute("aria-modal") || (h = this.content) == null || h.setAttribute("aria-modal", "true"), (l = this.content) != null && l.hasAttribute("tabindex") || (d = this.content) == null || d.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (r) => {
32
+ r.key === "Escape" && this.open && (r.preventDefault(), r.stopPropagation(), this.close());
33
+ }), this.open && this.wasOpened();
34
+ }
35
+ disconnectedCallback() {
36
+ this.connected = !1;
37
+ }
38
+ get open() {
39
+ return this.hasAttribute("open");
40
+ }
41
+ set open(t) {
42
+ t ? this.setAttribute("open", "") : this.removeAttribute("open");
43
+ }
44
+ close() {
45
+ if (!this.open)
46
+ return;
47
+ const t = new Event("beforeclose", { cancelable: !0 });
48
+ this.dispatchEvent(t) && (this.open = !1);
49
+ }
50
+ attributeChangedCallback(t, e, i) {
51
+ t !== "open" || !this.connected || (i !== null ? this.wasOpened() : this.wasClosed());
52
+ }
53
+ wasOpened() {
54
+ var t, e;
55
+ this.hidden = !1, b(this), (t = this.focusTrap) == null || t.activate(), (e = this.querySelector("[autofocus]")) == null || e.focus(), this.dispatchEvent(new Event("open"));
56
+ }
57
+ wasClosed() {
58
+ var t;
59
+ (t = this.focusTrap) == null || t.deactivate(), v(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
60
+ }
61
+ get backdrop() {
62
+ var t;
63
+ return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
64
+ }
65
+ get content() {
66
+ return this.firstElementChild;
67
+ }
68
+ };
69
+ let c = o;
70
+ a(c, "attention", (t) => t.animate(
71
+ [
72
+ { transform: "scale(1)" },
73
+ { transform: "scale(1.1)" },
74
+ { transform: "scale(1)" }
75
+ ],
76
+ 300
77
+ ));
78
+ export {
79
+ c as default
80
+ };
@@ -0,0 +1,109 @@
1
+ var u = Object.defineProperty;
2
+ var d = (i, n, t) => n in i ? u(i, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[n] = t;
3
+ var o = (i, n, t) => (d(i, typeof n != "symbol" ? n + "" : n, t), t);
4
+ import { autoUpdate as l, computePosition as p, shift as b, flip as f, size as m } from "@floating-ui/dom";
5
+ import { cancel as r, hello as a, goodbye as c } from "hello-goodbye";
6
+ import { focusable as k } from "tabbable";
7
+ import { shouldOpenInNewTab as v } from "./inclusive-elements11.js";
8
+ class C extends HTMLElement {
9
+ constructor() {
10
+ super();
11
+ o(this, "cleanup");
12
+ o(this, "onButtonClick", (t) => {
13
+ !v(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
14
+ });
15
+ o(this, "onButtonKeyDown", (t) => {
16
+ var e;
17
+ t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, (e = k(this.content)[0]) == null || e.focus());
18
+ });
19
+ o(this, "onKeyDown", (t) => {
20
+ t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, this.button.focus());
21
+ });
22
+ o(this, "onFocusOut", (t) => {
23
+ (!(t.relatedTarget instanceof Node) || !this.contains(t.relatedTarget)) && (this.open = !1);
24
+ });
25
+ o(this, "onContentClick", (t) => {
26
+ t.target instanceof Element && t.target.closest("[role=menuitem], [role=menuitemradio]") && (this.open = !1, this.button.focus());
27
+ });
28
+ const t = document.createElement("template");
29
+ t.innerHTML = `
30
+ <div part="backdrop" hidden style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
31
+ <slot></slot>
32
+ `, this.attachShadow({ mode: "open" }).appendChild(t.content.cloneNode(!0)), this.backdrop.onclick = () => this.open = !1;
33
+ }
34
+ static get observedAttributes() {
35
+ return ["open"];
36
+ }
37
+ connectedCallback() {
38
+ this.backdrop.hidden = !0, this.content.hidden = !0, this.open = !1, this.button.setAttribute("aria-expanded", "false"), setTimeout(() => {
39
+ this.content.getAttribute("role") === "menu" && this.button.setAttribute("aria-haspopup", "true");
40
+ }), this.button.addEventListener("click", this.onButtonClick), this.button.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), this.content.addEventListener("click", this.onContentClick);
41
+ }
42
+ disconnectedCallback() {
43
+ r(this.backdrop), r(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeAttribute("aria-haspopup"), this.button.removeEventListener("click", this.onButtonClick), this.button.removeEventListener("keydown", this.onButtonKeyDown), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focusout", this.onFocusOut), this.content.removeEventListener("click", this.onContentClick);
44
+ }
45
+ get open() {
46
+ return this.hasAttribute("open");
47
+ }
48
+ set open(t) {
49
+ t ? this.setAttribute("open", "") : this.removeAttribute("open");
50
+ }
51
+ get disabled() {
52
+ return this.hasAttribute("disabled");
53
+ }
54
+ attributeChangedCallback(t, e, s) {
55
+ t === "open" && (s !== null ? this.wasOpened() : this.wasClosed());
56
+ }
57
+ wasOpened() {
58
+ if (!this.content.hidden)
59
+ return;
60
+ this.content.hidden = !1, this.content.style.position = "absolute", this.backdrop.hidden = !1, a(this.content), a(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.cleanup = l(
61
+ this.button,
62
+ this.content,
63
+ () => {
64
+ p(this.button, this.content, {
65
+ placement: this.getAttribute("placement") || "bottom",
66
+ middleware: [
67
+ b(),
68
+ f(),
69
+ m({
70
+ apply: ({ availableWidth: e, availableHeight: s }) => {
71
+ Object.assign(this.content.style, {
72
+ maxWidth: "",
73
+ maxHeight: ""
74
+ });
75
+ const h = getComputedStyle(this.content);
76
+ (h.maxWidth === "none" || e < parseInt(h.maxWidth)) && (this.content.style.maxWidth = `${e}px`), (h.maxHeight === "none" || s < parseInt(h.maxHeight)) && (this.content.style.maxHeight = `${s}px`);
77
+ }
78
+ })
79
+ ]
80
+ }).then(({ x: e, y: s, placement: h }) => {
81
+ Object.assign(this.content.style, {
82
+ left: `${e}px`,
83
+ top: `${s}px`
84
+ }), this.content.dataset.placement = h;
85
+ });
86
+ },
87
+ { ancestorScroll: !1 }
88
+ );
89
+ const t = this.content.querySelector("[autofocus]");
90
+ t ? t.focus() : this.content.focus(), this.dispatchEvent(new Event("open"));
91
+ }
92
+ wasClosed() {
93
+ var t;
94
+ this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), c(this.backdrop).then(() => this.backdrop.hidden = !0), c(this.content).then(() => this.content.hidden = !0), this.dispatchEvent(new Event("close")));
95
+ }
96
+ get backdrop() {
97
+ var t;
98
+ return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
99
+ }
100
+ get button() {
101
+ return this.querySelector("button, [role=button]");
102
+ }
103
+ get content() {
104
+ return this.children[1];
105
+ }
106
+ }
107
+ export {
108
+ C as default
109
+ };
@@ -0,0 +1,58 @@
1
+ var o = Object.defineProperty;
2
+ var b = (l, i, t) => i in l ? o(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t;
3
+ var n = (l, i, t) => (b(l, typeof i != "symbol" ? i + "" : i, t), t);
4
+ let c = 0;
5
+ class d extends HTMLElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ n(this, "idPrefix", "tabs" + ++c);
9
+ n(this, "onKeyDown", (t) => {
10
+ const a = t.target, e = this.tabs.indexOf(a), s = this.tablist.getAttribute("aria-orientation") === "vertical";
11
+ let r = !1;
12
+ switch (t.key) {
13
+ case (s ? "ArrowUp" : "ArrowLeft"):
14
+ this.selectTab(e - 1), r = !0;
15
+ break;
16
+ case (s ? "ArrowDown" : "ArrowRight"):
17
+ this.selectTab(e + 1), r = !0;
18
+ break;
19
+ case "Home":
20
+ this.selectTab(0), r = !0;
21
+ break;
22
+ case "End":
23
+ this.selectTab(this.tabs.length - 1), r = !0;
24
+ }
25
+ r && (t.stopPropagation(), t.preventDefault());
26
+ });
27
+ n(this, "onClick", (t) => {
28
+ const e = t.target.closest("[role=tab]");
29
+ e && this.selectTab(this.tabs.indexOf(e));
30
+ });
31
+ }
32
+ connectedCallback() {
33
+ this.tablist.addEventListener("keydown", this.onKeyDown), this.tablist.addEventListener("click", this.onClick), this.selectTab(0, !1), this.tabs.forEach((t, a) => {
34
+ const e = this.tabpanels[a], s = t.getAttribute("id") || this.idPrefix + "_tab_" + a, r = e.getAttribute("id") || this.idPrefix + "_panel_" + a;
35
+ t.setAttribute("id", s), t.setAttribute("aria-controls", r), e.setAttribute("id", r), e.setAttribute("aria-labelledby", s), e.setAttribute("tabindex", "0");
36
+ });
37
+ }
38
+ disconnectedCallback() {
39
+ this.tablist.removeEventListener("keydown", this.onKeyDown), this.tablist.removeEventListener("click", this.onClick);
40
+ }
41
+ selectTab(t, a = !0) {
42
+ t < 0 ? t += this.tabs.length : t >= this.tabs.length && (t -= this.tabs.length), this.tabs.forEach((e, s) => {
43
+ s === t ? (e.setAttribute("aria-selected", "true"), e.removeAttribute("tabindex"), this.tabpanels[s].hidden = !1, a && e.focus()) : (e.setAttribute("aria-selected", "false"), e.setAttribute("tabindex", "-1"), this.tabpanels[s].hidden = !0);
44
+ });
45
+ }
46
+ get tablist() {
47
+ return this.querySelector("[role=tablist]");
48
+ }
49
+ get tabs() {
50
+ return Array.from(this.querySelectorAll("[role=tab]"));
51
+ }
52
+ get tabpanels() {
53
+ return Array.from(this.querySelectorAll("[role=tabpanel]"));
54
+ }
55
+ }
56
+ export {
57
+ d as default
58
+ };
@@ -0,0 +1,38 @@
1
+ var c = Object.defineProperty;
2
+ var a = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
3
+ var l = (o, e, t) => (a(o, typeof e != "symbol" ? e + "" : e, t), t);
4
+ import { focusable as d } from "tabbable";
5
+ class u extends HTMLElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ l(this, "onInitialFocus", () => {
9
+ this.removeAttribute("tabindex"), this.focusControlAtIndex(0);
10
+ });
11
+ l(this, "onKeyDown", (t) => {
12
+ if (t.key !== "ArrowRight" && t.key !== "ArrowLeft" && t.key !== "Home" && t.key !== "End")
13
+ return;
14
+ const i = this.controls, s = this.controls.length, r = i.indexOf(t.target);
15
+ if (r === -1)
16
+ return;
17
+ let n = 0;
18
+ t.key === "ArrowLeft" && (n = r - 1), t.key === "ArrowRight" && (n = r + 1), t.key === "End" && (n = s - 1), n < 0 && (n = s - 1), n > s - 1 && (n = 0), this.focusControlAtIndex(n), t.preventDefault();
19
+ });
20
+ }
21
+ connectedCallback() {
22
+ this.hasAttribute("role") || this.setAttribute("role", "toolbar"), this.setAttribute("tabindex", "0"), this.addEventListener("focus", this.onInitialFocus, { once: !0 }), this.addEventListener("keydown", this.onKeyDown);
23
+ }
24
+ disconnectedCallback() {
25
+ this.removeEventListener("keydown", this.onKeyDown);
26
+ }
27
+ focusControlAtIndex(t) {
28
+ this.controls.forEach((i, s) => {
29
+ s === t ? (i.setAttribute("tabindex", "0"), i.focus()) : i.setAttribute("tabindex", "-1");
30
+ });
31
+ }
32
+ get controls() {
33
+ return d(this);
34
+ }
35
+ }
36
+ export {
37
+ u as default
38
+ };
@@ -1,6 +1,6 @@
1
1
  export default class AccordionElement extends HTMLElement {
2
2
  connectedCallback(): void;
3
3
  disconnectedCallback(): void;
4
- private onOpen;
4
+ private onToggle;
5
5
  get required(): boolean;
6
6
  }
@@ -4,5 +4,6 @@ export { default as DisclosureElement } from './disclosure/disclosure';
4
4
  export { default as MenuElement } from './menu/menu';
5
5
  export { default as ModalElement } from './modal/modal';
6
6
  export { default as PopupElement } from './popup/popup';
7
+ export { default as TabsElement } from './tabs/tabs';
7
8
  export { default as ToolbarElement } from './toolbar/toolbar';
8
9
  export { default as TooltipElement } from './tooltip/tooltip';
@@ -0,0 +1,11 @@
1
+ export default class TabsElement extends HTMLElement {
2
+ private idPrefix;
3
+ connectedCallback(): void;
4
+ disconnectedCallback(): void;
5
+ private selectTab;
6
+ private onKeyDown;
7
+ private onClick;
8
+ private get tablist();
9
+ private get tabs();
10
+ private get tabpanels();
11
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "inclusive-elements",
3
- "version": "0.3.4",
3
+ "version": "0.4.1",
4
4
  "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
5
5
  "module": "dist/inclusive-elements.js",
6
6
  "type": "module",