inclusive-elements 0.5.6 → 0.5.8
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/dist/inclusive-elements10.js +38 -40
- package/dist/inclusive-elements11.js +17 -2
- package/dist/inclusive-elements4.js +9 -9
- package/dist/inclusive-elements6.js +44 -26
- package/dist/inclusive-elements7.js +28 -28
- package/dist/types/modal/modal.d.ts +9 -1
- package/dist/types/utils.d.ts +14 -0
- package/package.json +6 -3
|
@@ -1,84 +1,82 @@
|
|
|
1
1
|
var l = Object.defineProperty;
|
|
2
|
-
var u = (n, s,
|
|
3
|
-
var
|
|
2
|
+
var u = (n, s, e) => s in n ? l(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
|
|
3
|
+
var t = (n, s, e) => (u(n, typeof s != "symbol" ? s + "" : s, e), e);
|
|
4
4
|
import { autoUpdate as p, computePosition as c, shift as v, flip as m } from "@floating-ui/dom";
|
|
5
|
-
import {
|
|
5
|
+
import { show as f, hide as b } from "./inclusive-elements11.js";
|
|
6
6
|
const o = class o extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
t(this, "parent");
|
|
10
|
+
t(this, "tooltip");
|
|
11
|
+
t(this, "timeout");
|
|
12
|
+
t(this, "disabledObserver");
|
|
13
|
+
t(this, "showing", !1);
|
|
14
|
+
t(this, "cleanup");
|
|
15
|
+
t(this, "prevInnerHTML");
|
|
16
|
+
t(this, "focusKeyPressed", !1);
|
|
17
|
+
t(this, "onMouseEnter", () => {
|
|
18
18
|
window.matchMedia("(hover: hover) and (pointer: fine)").matches && this.afterDelay(this.show);
|
|
19
19
|
});
|
|
20
|
-
|
|
20
|
+
t(this, "onFocus", () => {
|
|
21
21
|
this.focusKeyPressed && this.show();
|
|
22
22
|
});
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
this.isFocusTriggerKey(
|
|
23
|
+
t(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
|
|
24
|
+
t(this, "onBlur", this.hide.bind(this));
|
|
25
|
+
t(this, "onKeyDown", (e) => {
|
|
26
|
+
this.isFocusTriggerKey(e.key) && (this.focusKeyPressed = !0), e.key === "Escape" && this.hide();
|
|
27
27
|
});
|
|
28
|
-
|
|
29
|
-
this.isFocusTriggerKey(
|
|
28
|
+
t(this, "onKeyUp", (e) => {
|
|
29
|
+
this.isFocusTriggerKey(e.key) && (this.focusKeyPressed = !1);
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
connectedCallback() {
|
|
33
|
-
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("click", this.onBlur), this.disabledObserver = new MutationObserver((
|
|
34
|
-
|
|
33
|
+
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("click", this.onBlur), this.disabledObserver = new MutationObserver((e) => {
|
|
34
|
+
e.forEach((i) => {
|
|
35
35
|
i.attributeName === "disabled" && this.hide();
|
|
36
36
|
});
|
|
37
37
|
}), this.disabledObserver.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("keyup", this.onKeyUp), document.addEventListener("scroll", this.onBlur);
|
|
38
38
|
}
|
|
39
39
|
disconnectedCallback() {
|
|
40
|
-
var
|
|
41
|
-
(
|
|
40
|
+
var e, i;
|
|
41
|
+
(e = this.cleanup) == null || e.call(this), 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("click", this.onBlur), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keyup", this.onKeyUp), document.removeEventListener("scroll", this.onBlur), (i = this.disabledObserver) == null || i.disconnect(), clearTimeout(this.timeout);
|
|
42
42
|
}
|
|
43
43
|
get disabled() {
|
|
44
44
|
return this.hasAttribute("disabled");
|
|
45
45
|
}
|
|
46
|
-
set disabled(
|
|
47
|
-
|
|
46
|
+
set disabled(e) {
|
|
47
|
+
e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
48
48
|
}
|
|
49
|
-
isFocusTriggerKey(
|
|
50
|
-
return
|
|
49
|
+
isFocusTriggerKey(e) {
|
|
50
|
+
return e === "Tab" || e === "ArrowUp" || e === "ArrowDown" || e === "ArrowLeft" || e === "ArrowRight";
|
|
51
51
|
}
|
|
52
52
|
show() {
|
|
53
53
|
var i;
|
|
54
54
|
if (this.disabled)
|
|
55
55
|
return;
|
|
56
|
-
const
|
|
57
|
-
clearTimeout(this.timeout), this.showing || (
|
|
56
|
+
const e = this.createTooltip();
|
|
57
|
+
clearTimeout(this.timeout), this.showing || (f(e), this.showing = !0), this.innerHTML !== this.prevInnerHTML && (this.prevInnerHTML = e.innerHTML = this.innerHTML), e.style.position = "absolute", (i = this.cleanup) == null || i.call(this), this.cleanup = p(
|
|
58
58
|
this.parent,
|
|
59
|
-
|
|
60
|
-
() => c(this.parent,
|
|
59
|
+
e,
|
|
60
|
+
() => c(this.parent, e, {
|
|
61
61
|
placement: this.getAttribute("placement") || o.placement,
|
|
62
62
|
middleware: [v(), m()]
|
|
63
63
|
}).then(({ x: h, y: a, placement: d }) => {
|
|
64
|
-
Object.assign(
|
|
64
|
+
Object.assign(e.style, {
|
|
65
65
|
left: `${h}px`,
|
|
66
66
|
top: `${a}px`
|
|
67
|
-
}),
|
|
67
|
+
}), e.dataset.placement = d;
|
|
68
68
|
})
|
|
69
69
|
), this.dispatchEvent(new Event("open"));
|
|
70
70
|
}
|
|
71
71
|
hide() {
|
|
72
|
-
var
|
|
73
|
-
clearTimeout(this.timeout), (
|
|
74
|
-
this.tooltip && (this.tooltip.hidden = !0);
|
|
75
|
-
}), this.dispatchEvent(new Event("close")));
|
|
72
|
+
var e;
|
|
73
|
+
clearTimeout(this.timeout), (e = this.cleanup) == null || e.call(this), this.showing && (this.showing = !1, this.tooltip && b(this.tooltip), this.dispatchEvent(new Event("close")));
|
|
76
74
|
}
|
|
77
|
-
afterDelay(
|
|
75
|
+
afterDelay(e) {
|
|
78
76
|
clearTimeout(this.timeout);
|
|
79
77
|
const i = parseInt(this.getAttribute("delay") || "");
|
|
80
78
|
this.timeout = window.setTimeout(
|
|
81
|
-
|
|
79
|
+
e.bind(this),
|
|
82
80
|
isNaN(i) ? o.delay : i
|
|
83
81
|
);
|
|
84
82
|
}
|
|
@@ -89,7 +87,7 @@ const o = class o extends HTMLElement {
|
|
|
89
87
|
), document.body.appendChild(this.tooltip)), this.tooltip.className = this.getAttribute("tooltip-class") || o.tooltipClass, this.tooltip;
|
|
90
88
|
}
|
|
91
89
|
};
|
|
92
|
-
|
|
90
|
+
t(o, "delay", 100), t(o, "placement", "top"), t(o, "tooltipClass", "tooltip");
|
|
93
91
|
let r = o;
|
|
94
92
|
export {
|
|
95
93
|
r as default
|
|
@@ -1,6 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
import { enter as e, leave as i } from "transition-kit";
|
|
2
|
+
function a(t) {
|
|
2
3
|
return t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || t.button !== void 0 && t.button !== 0;
|
|
3
4
|
}
|
|
5
|
+
function r(t) {
|
|
6
|
+
t.hidden = !1, e(t);
|
|
7
|
+
}
|
|
8
|
+
function u(t) {
|
|
9
|
+
return t.classList.contains("leave-active");
|
|
10
|
+
}
|
|
11
|
+
function s(t) {
|
|
12
|
+
i(t, { detachFromLayout: !1 }).then(
|
|
13
|
+
(n) => n && (t.hidden = !0)
|
|
14
|
+
);
|
|
15
|
+
}
|
|
4
16
|
export {
|
|
5
|
-
|
|
17
|
+
s as hide,
|
|
18
|
+
u as isLeaving,
|
|
19
|
+
a as shouldOpenInNewTab,
|
|
20
|
+
r as show
|
|
6
21
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
var o = Object.defineProperty;
|
|
2
2
|
var r = (n, e, t) => e in n ? o(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
|
|
3
3
|
var i = (n, e, t) => (r(n, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
|
-
import { cancel as
|
|
5
|
-
import { shouldOpenInNewTab as l } from "./inclusive-elements11.js";
|
|
6
|
-
class
|
|
4
|
+
import { cancel as a } from "transition-kit";
|
|
5
|
+
import { shouldOpenInNewTab as h, isLeaving as d, show as l, hide as u } from "./inclusive-elements11.js";
|
|
6
|
+
class v extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
9
|
i(this, "onButtonClick", (t) => {
|
|
10
|
-
!
|
|
10
|
+
!h(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
|
|
11
11
|
});
|
|
12
12
|
}
|
|
13
13
|
static get observedAttributes() {
|
|
@@ -17,7 +17,7 @@ class f extends HTMLElement {
|
|
|
17
17
|
this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
|
|
18
18
|
}
|
|
19
19
|
disconnectedCallback() {
|
|
20
|
-
|
|
20
|
+
a(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
|
|
21
21
|
}
|
|
22
22
|
get open() {
|
|
23
23
|
return this.hasAttribute("open");
|
|
@@ -28,14 +28,14 @@ class f extends HTMLElement {
|
|
|
28
28
|
get disabled() {
|
|
29
29
|
return this.hasAttribute("disabled");
|
|
30
30
|
}
|
|
31
|
-
attributeChangedCallback(t,
|
|
31
|
+
attributeChangedCallback(t, c, s) {
|
|
32
32
|
t === "open" && (s !== null ? this.wasOpened() : this.wasClosed());
|
|
33
33
|
}
|
|
34
34
|
wasOpened() {
|
|
35
|
-
this.content.hidden
|
|
35
|
+
(this.content.hidden || d(this.content)) && l(this.content), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("toggle"));
|
|
36
36
|
}
|
|
37
37
|
wasClosed() {
|
|
38
|
-
this.content.hidden ||
|
|
38
|
+
this.content.hidden || u(this.content), this.button.setAttribute("aria-expanded", "false"), this.dispatchEvent(new Event("toggle"));
|
|
39
39
|
}
|
|
40
40
|
get button() {
|
|
41
41
|
return this.querySelector("button, [role=button]");
|
|
@@ -45,5 +45,5 @@ class f extends HTMLElement {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
export {
|
|
48
|
-
|
|
48
|
+
v as default
|
|
49
49
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { createFocusTrap as
|
|
5
|
-
import {
|
|
6
|
-
const
|
|
1
|
+
var d = Object.defineProperty;
|
|
2
|
+
var l = (n, s, t) => s in n ? d(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
|
|
3
|
+
var o = (n, s, t) => (l(n, typeof s != "symbol" ? s + "" : s, t), t);
|
|
4
|
+
import { createFocusTrap as p } from "focus-trap";
|
|
5
|
+
import { show as f, hide as m } from "./inclusive-elements11.js";
|
|
6
|
+
const a = class a extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
o(this, "focusTrap");
|
|
10
|
+
o(this, "focusTrapPaused", !1);
|
|
11
|
+
o(this, "connected", !1);
|
|
11
12
|
const t = document.createElement("template");
|
|
12
13
|
t.innerHTML = `
|
|
13
14
|
<div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
|
|
@@ -15,26 +16,34 @@ const n = class n extends HTMLElement {
|
|
|
15
16
|
`;
|
|
16
17
|
const i = this.attachShadow({ mode: "open" });
|
|
17
18
|
i.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
|
|
18
|
-
var
|
|
19
|
-
this.hasAttribute("static") ? (
|
|
20
|
-
}), this.focusTrap =
|
|
19
|
+
var e;
|
|
20
|
+
this.hasAttribute("static") ? (e = a.attention) == null || e.call(a, i.children[1]) : this.close();
|
|
21
|
+
}), this.focusTrap = p(this, {
|
|
21
22
|
escapeDeactivates: !1,
|
|
22
23
|
allowOutsideClick: !0,
|
|
23
24
|
preventScroll: !0,
|
|
24
|
-
|
|
25
|
+
// This runs after a delay on every activate and unpause, so the trap
|
|
26
|
+
// may be paused by then. If focus is already inside the modal (e.g.
|
|
27
|
+
// returned there by an overlay that has just closed), leave it.
|
|
28
|
+
initialFocus: () => {
|
|
29
|
+
if (this.focusTrap.paused)
|
|
30
|
+
return !1;
|
|
31
|
+
if (!this.contains(document.activeElement))
|
|
32
|
+
return this.querySelector("[autofocus]") || void 0;
|
|
33
|
+
},
|
|
25
34
|
// Content that is still loading may have nothing tabbable yet. The
|
|
26
35
|
// content element is focusable itself, so trap focus there until it does.
|
|
27
36
|
fallbackFocus: () => this.content ?? this
|
|
37
|
+
}), this.addEventListener("keydown", (e) => {
|
|
38
|
+
e.key === "Escape" && this.open && !this.focusTrapPaused && !this.focusTrap.paused && !e.defaultPrevented && (e.preventDefault(), e.stopPropagation(), this.close());
|
|
28
39
|
});
|
|
29
40
|
}
|
|
30
41
|
static get observedAttributes() {
|
|
31
42
|
return ["open"];
|
|
32
43
|
}
|
|
33
44
|
connectedCallback() {
|
|
34
|
-
var t, i,
|
|
35
|
-
this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (i = this.content) == null || i.setAttribute("role", "dialog"), (
|
|
36
|
-
r.key === "Escape" && this.open && (r.preventDefault(), r.stopPropagation(), this.close());
|
|
37
|
-
}), this.open && this.wasOpened();
|
|
45
|
+
var t, i, e, r, c, u;
|
|
46
|
+
this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (i = this.content) == null || i.setAttribute("role", "dialog"), (e = this.content) != null && e.hasAttribute("aria-modal") || (r = this.content) == null || r.setAttribute("aria-modal", "true"), (c = this.content) != null && c.hasAttribute("tabindex") || (u = this.content) == null || u.setAttribute("tabindex", "-1"), this.open && this.wasOpened();
|
|
38
47
|
}
|
|
39
48
|
disconnectedCallback() {
|
|
40
49
|
this.connected = !1;
|
|
@@ -51,18 +60,27 @@ const n = class n extends HTMLElement {
|
|
|
51
60
|
const t = new Event("beforeclose", { cancelable: !0 });
|
|
52
61
|
this.dispatchEvent(t) && (this.open = !1);
|
|
53
62
|
}
|
|
54
|
-
|
|
55
|
-
|
|
63
|
+
/**
|
|
64
|
+
* Temporarily stop trapping focus and handling Escape, so that another
|
|
65
|
+
* overlay opened from within the modal (e.g. a lightbox mounted in
|
|
66
|
+
* <body>) can manage focus itself.
|
|
67
|
+
*/
|
|
68
|
+
pauseFocusTrap() {
|
|
69
|
+
this.focusTrapPaused = !0, this.focusTrap.pause();
|
|
70
|
+
}
|
|
71
|
+
resumeFocusTrap() {
|
|
72
|
+
this.focusTrapPaused = !1, this.focusTrap.unpause();
|
|
73
|
+
}
|
|
74
|
+
attributeChangedCallback(t, i, e) {
|
|
75
|
+
t !== "open" || !this.connected || (e !== null ? this.wasOpened() : this.wasClosed());
|
|
56
76
|
}
|
|
57
77
|
async wasOpened() {
|
|
58
|
-
document.documentElement.style.overflow = "hidden",
|
|
59
|
-
|
|
60
|
-
return (t = this.focusTrap) == null ? void 0 : t.activate();
|
|
78
|
+
document.documentElement.style.overflow = "hidden", f(this), requestAnimationFrame(() => {
|
|
79
|
+
this.open && (this.focusTrap.activate(), this.focusTrapPaused ? this.focusTrap.pause() : this.focusTrap.unpause());
|
|
61
80
|
}), this.dispatchEvent(new Event("open"));
|
|
62
81
|
}
|
|
63
82
|
wasClosed() {
|
|
64
|
-
|
|
65
|
-
document.documentElement.style.overflow = "", (t = this.focusTrap) == null || t.deactivate(), m(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
|
|
83
|
+
document.documentElement.style.overflow = "", this.focusTrap.deactivate(), this.focusTrapPaused = !1, m(this), this.dispatchEvent(new Event("close"));
|
|
66
84
|
}
|
|
67
85
|
get backdrop() {
|
|
68
86
|
var t;
|
|
@@ -72,7 +90,7 @@ const n = class n extends HTMLElement {
|
|
|
72
90
|
return this.firstElementChild;
|
|
73
91
|
}
|
|
74
92
|
};
|
|
75
|
-
a
|
|
93
|
+
o(a, "attention", (t) => t.animate(
|
|
76
94
|
[
|
|
77
95
|
{ transform: "scale(1)" },
|
|
78
96
|
{ transform: "scale(1.1)" },
|
|
@@ -80,7 +98,7 @@ a(n, "attention", (t) => t.animate(
|
|
|
80
98
|
],
|
|
81
99
|
300
|
|
82
100
|
));
|
|
83
|
-
let
|
|
101
|
+
let h = a;
|
|
84
102
|
export {
|
|
85
|
-
|
|
103
|
+
h as default
|
|
86
104
|
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var h = (a, s, t) => (
|
|
4
|
-
import { autoUpdate as
|
|
5
|
-
import { cancel as
|
|
6
|
-
import { focusable as
|
|
7
|
-
import { shouldOpenInNewTab as y } from "./inclusive-elements11.js";
|
|
1
|
+
var p = Object.defineProperty;
|
|
2
|
+
var l = (a, s, t) => s in a ? p(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
|
|
3
|
+
var h = (a, s, t) => (l(a, typeof s != "symbol" ? s + "" : s, t), t);
|
|
4
|
+
import { autoUpdate as f, computePosition as m, shift as b, flip as g, size as k } from "@floating-ui/dom";
|
|
5
|
+
import { cancel as c } from "transition-kit";
|
|
6
|
+
import { focusable as v } from "tabbable";
|
|
7
|
+
import { shouldOpenInNewTab as w, isLeaving as y, show as u, hide as d } from "./inclusive-elements11.js";
|
|
8
8
|
class D extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super();
|
|
11
11
|
h(this, "cleanup");
|
|
12
12
|
h(this, "onButtonClick", (t) => {
|
|
13
|
-
!
|
|
13
|
+
!w(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
|
|
14
14
|
});
|
|
15
15
|
h(this, "onButtonKeyDown", (t) => {
|
|
16
16
|
var e;
|
|
17
|
-
t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, this.content && ((e =
|
|
17
|
+
t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, this.content && ((e = v(this.content)[0]) == null || e.focus()));
|
|
18
18
|
});
|
|
19
19
|
h(this, "onKeyDown", (t) => {
|
|
20
20
|
var e;
|
|
@@ -42,13 +42,13 @@ class D extends HTMLElement {
|
|
|
42
42
|
"aria-expanded",
|
|
43
43
|
this.open ? "true" : "false"
|
|
44
44
|
), setTimeout(() => {
|
|
45
|
-
var
|
|
46
|
-
((
|
|
45
|
+
var r, i;
|
|
46
|
+
((r = this.content) == null ? void 0 : r.getAttribute("role")) === "menu" && ((i = this.button) == null || i.setAttribute("aria-haspopup", "true"));
|
|
47
47
|
}), (e = this.button) == null || e.addEventListener("click", this.onButtonClick), (n = this.button) == null || n.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), (o = this.content) == null || o.addEventListener("click", this.onContentClick);
|
|
48
48
|
}
|
|
49
49
|
disconnectedCallback() {
|
|
50
|
-
var t, e, n, o,
|
|
51
|
-
|
|
50
|
+
var t, e, n, o, r;
|
|
51
|
+
c(this.backdrop), this.content && c(this.content), (t = this.button) == null || t.removeAttribute("aria-expanded"), (e = this.button) == null || e.removeAttribute("aria-haspopup"), (n = this.button) == null || n.removeEventListener("click", this.onButtonClick), (o = this.button) == null || o.removeEventListener("keydown", this.onButtonKeyDown), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focusout", this.onFocusOut), (r = this.content) == null || r.removeEventListener("click", this.onContentClick);
|
|
52
52
|
}
|
|
53
53
|
get open() {
|
|
54
54
|
return this.hasAttribute("open");
|
|
@@ -63,10 +63,10 @@ class D extends HTMLElement {
|
|
|
63
63
|
t === "open" && (n !== null ? this.wasOpened() : this.wasClosed());
|
|
64
64
|
}
|
|
65
65
|
wasOpened() {
|
|
66
|
-
var e
|
|
67
|
-
if (!
|
|
66
|
+
var e;
|
|
67
|
+
if (!this.content || !this.content.hidden && !y(this.content))
|
|
68
68
|
return;
|
|
69
|
-
this.content.
|
|
69
|
+
this.content.style.position = "fixed", u(this.content), u(this.backdrop), (e = this.button) == null || e.setAttribute("aria-expanded", "true"), this.button && (this.cleanup = f(
|
|
70
70
|
this.button,
|
|
71
71
|
this.content,
|
|
72
72
|
() => {
|
|
@@ -74,31 +74,31 @@ class D extends HTMLElement {
|
|
|
74
74
|
strategy: "fixed",
|
|
75
75
|
placement: this.getAttribute("placement") || "bottom",
|
|
76
76
|
middleware: [
|
|
77
|
-
|
|
77
|
+
b(),
|
|
78
78
|
g(),
|
|
79
|
-
|
|
79
|
+
k({
|
|
80
80
|
apply: ({
|
|
81
|
-
availableWidth:
|
|
82
|
-
availableHeight:
|
|
83
|
-
placement:
|
|
81
|
+
availableWidth: n,
|
|
82
|
+
availableHeight: o,
|
|
83
|
+
placement: r
|
|
84
84
|
}) => {
|
|
85
85
|
if (!this.content)
|
|
86
86
|
return;
|
|
87
|
-
this.content.dataset.placement =
|
|
87
|
+
this.content.dataset.placement = r, Object.assign(this.content.style, {
|
|
88
88
|
maxWidth: "",
|
|
89
89
|
maxHeight: ""
|
|
90
90
|
});
|
|
91
|
-
const
|
|
91
|
+
const i = getComputedStyle(
|
|
92
92
|
this.content
|
|
93
93
|
);
|
|
94
|
-
|
|
94
|
+
n -= parseInt(i.marginLeft) + parseInt(i.marginRight), (i.maxWidth === "none" || n < parseInt(i.maxWidth)) && (this.content.style.maxWidth = `${n}px`), o -= parseInt(i.marginTop) + parseInt(i.marginBottom), (i.maxHeight === "none" || o < parseInt(i.maxHeight)) && (this.content.style.maxHeight = `${o}px`);
|
|
95
95
|
}
|
|
96
96
|
})
|
|
97
97
|
]
|
|
98
|
-
}).then(({ x:
|
|
98
|
+
}).then(({ x: n, y: o }) => {
|
|
99
99
|
this.content && Object.assign(this.content.style, {
|
|
100
|
-
left: `${
|
|
101
|
-
top: `${
|
|
100
|
+
left: `${n}px`,
|
|
101
|
+
top: `${o}px`
|
|
102
102
|
});
|
|
103
103
|
});
|
|
104
104
|
},
|
|
@@ -109,7 +109,7 @@ class D extends HTMLElement {
|
|
|
109
109
|
}
|
|
110
110
|
wasClosed() {
|
|
111
111
|
var t, e, n;
|
|
112
|
-
(t = this.content) != null && t.hidden || ((e = this.button) == null || e.setAttribute("aria-expanded", "false"), (n = this.cleanup) == null || n.call(this),
|
|
112
|
+
(t = this.content) != null && t.hidden || ((e = this.button) == null || e.setAttribute("aria-expanded", "false"), (n = this.cleanup) == null || n.call(this), d(this.backdrop), this.content && d(this.content), this.dispatchEvent(new Event("close")));
|
|
113
113
|
}
|
|
114
114
|
get backdrop() {
|
|
115
115
|
var t;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export default class ModalElement extends HTMLElement {
|
|
2
2
|
static attention: (el: Element) => void;
|
|
3
3
|
static get observedAttributes(): string[];
|
|
4
|
-
private focusTrap
|
|
4
|
+
private focusTrap;
|
|
5
|
+
private focusTrapPaused;
|
|
5
6
|
private connected;
|
|
6
7
|
constructor();
|
|
7
8
|
connectedCallback(): void;
|
|
@@ -9,6 +10,13 @@ export default class ModalElement extends HTMLElement {
|
|
|
9
10
|
get open(): boolean;
|
|
10
11
|
set open(val: boolean);
|
|
11
12
|
close(): void;
|
|
13
|
+
/**
|
|
14
|
+
* Temporarily stop trapping focus and handling Escape, so that another
|
|
15
|
+
* overlay opened from within the modal (e.g. a lightbox mounted in
|
|
16
|
+
* <body>) can manage focus itself.
|
|
17
|
+
*/
|
|
18
|
+
pauseFocusTrap(): void;
|
|
19
|
+
resumeFocusTrap(): void;
|
|
12
20
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
13
21
|
private wasOpened;
|
|
14
22
|
private wasClosed;
|
package/dist/types/utils.d.ts
CHANGED
|
@@ -2,3 +2,17 @@
|
|
|
2
2
|
* Determine whether the user is trying to open a link in a new tab.
|
|
3
3
|
*/
|
|
4
4
|
export declare function shouldOpenInNewTab(e: MouseEvent): boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Unhide an element and run its enter transition.
|
|
7
|
+
*/
|
|
8
|
+
export declare function show(el: HTMLElement): void;
|
|
9
|
+
/**
|
|
10
|
+
* Determine whether an element's leave transition is still running, in which
|
|
11
|
+
* case it is visible but should be treated as hidden.
|
|
12
|
+
*/
|
|
13
|
+
export declare function isLeaving(el: HTMLElement): boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Run an element's leave transition, then hide it. If the element is shown
|
|
16
|
+
* again before the transition finishes, it stays visible.
|
|
17
|
+
*/
|
|
18
|
+
export declare function hide(el: HTMLElement): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inclusive-elements",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.8",
|
|
4
4
|
"description": "Accessible, lightweight, unstyled implementations of common UI controls.",
|
|
5
5
|
"module": "dist/inclusive-elements.js",
|
|
6
6
|
"type": "module",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@floating-ui/dom": "^1.7.4",
|
|
22
22
|
"focus-trap": "^7.6.5",
|
|
23
|
-
"
|
|
24
|
-
"
|
|
23
|
+
"tabbable": "^6.2.0",
|
|
24
|
+
"transition-kit": "^1.0.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
@@ -31,6 +31,9 @@
|
|
|
31
31
|
"vite": "^4.5.14"
|
|
32
32
|
},
|
|
33
33
|
"release-it": {
|
|
34
|
+
"npm": {
|
|
35
|
+
"tag": "legacy"
|
|
36
|
+
},
|
|
34
37
|
"git": {
|
|
35
38
|
"commitMessage": "release: v${version}",
|
|
36
39
|
"tagName": "v${version}"
|