inclusive-elements 0.3.0 → 0.3.1

package/README.md

@@ -8,7 +8,7 @@ Basic interactive UI patterns like popup menus, tooltips, and modals are surpris
 
 `inclusive-elements` provides those basic behaviors in the form of Custom Elements, without any of the cruft. They are:
 
--   **🦮 Accessible.** Designed following the [WAI-ARIA Authoring Practices](https://w3c.github.io/aria-practices) so everyone can use them.
+-   **🦮 Accessible.** Designed following the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) so everyone can use them.
 -   **🌳 Lightweight.** 3kB gzipped with minimal dependencies. Less if you tree-shake only the elements you need.
 -   **🎨 Unstyled.** Easily integrate with your design bottom-up without having to fight defaults.
 -   **🚀 Easy to use.** Simple API, works with any framework that supports Custom Elements.
@@ -23,7 +23,9 @@ npm install inclusive-elements --save
 
 Detailed descriptions and usage instructions are contained within each element:
 
+-   [Accordion](src/accordion)
 -   [Alerts](src/alerts)
+-   [Disclosure](src/disclosure)
 -   [Menu](src/menu)
 -   [Modal](src/modal)
 -   [Popup](src/popup)

package/dist/inclusive-elements.js

@@ -109,7 +109,7 @@ s(b, "duration", 1e4);
 function C(o) {
   return o.altKey || o.ctrlKey || o.metaKey || o.shiftKey || o.button !== void 0 && o.button !== 0;
 }
-class $ extends HTMLElement {
+class P extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "onButtonClick", (t) => {
@@ -272,7 +272,7 @@ s(m, "attention", (t) => t.animate(
   ],
   300
 ));
-class P extends HTMLElement {
+class $ extends HTMLElement {
   constructor() {
     super();
     s(this, "cleanup");
@@ -375,7 +375,7 @@ class P extends HTMLElement {
     return this.children[1];
   }
 }
-class j extends HTMLElement {
+class U extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "onInitialFocus", () => {
@@ -418,12 +418,15 @@ const l = class extends HTMLElement {
     s(this, "onFocus", this.show.bind(this));
     s(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
     s(this, "onBlur", this.hide.bind(this));
+    s(this, "onPointerUp", (t) => {
+      t.pointerType === "mouse" && this.hide();
+    });
     s(this, "onKeyDown", (t) => {
       t.key === "Escape" && this.hide();
     });
   }
   connectedCallback() {
-    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.observer = new MutationObserver((t) => {
+    this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("touchstart", 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) => {
       t.forEach((e) => {
         e.attributeName === "disabled" && this.hide();
       });
@@ -431,7 +434,7 @@ const l = class extends HTMLElement {
   }
   disconnectedCallback() {
     var t;
-    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("scroll", this.onBlur), (t = this.observer) == null || t.disconnect(), clearTimeout(this.timeout);
+    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("touchstart", 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);
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -480,10 +483,10 @@ s(c, "delay", 100), s(c, "placement", "top"), s(c, "tooltipClass", "tooltip");
 export {
   I as AccordionElement,
   b as AlertsElement,
-  $ as DisclosureElement,
+  P as DisclosureElement,
   f as MenuElement,
   m as ModalElement,
-  P as PopupElement,
-  j as ToolbarElement,
+  $ as PopupElement,
+  U as ToolbarElement,
   c as TooltipElement
 };

package/dist/types/tooltip/tooltip.d.ts

@@ -11,6 +11,7 @@ export default class TooltipElement extends HTMLElement {
     private onFocus;
     private onMouseLeave;
     private onBlur;
+    private onPointerUp;
     connectedCallback(): void;
     disconnectedCallback(): void;
     get disabled(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inclusive-elements",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
     "module": "dist/inclusive-elements.js",
     "type": "module",