inclusive-elements 0.2.2 → 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

@@ -1,11 +1,32 @@
-var C = Object.defineProperty;
-var T = (o, r, t) => r in o ? C(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
-var s = (o, r, t) => (T(o, typeof r != "symbol" ? r + "" : r, t), t);
-import { move as k, hello as h, goodbye as l, cancel as E } from "hello-goodbye";
-import { isFocusable as D, focusable as A } from "tabbable";
-import { createFocusTrap as H } from "focus-trap";
-import { autoUpdate as K, computePosition as L, shift as g, flip as x, size as M } from "@floating-ui/dom";
-const v = class extends HTMLElement {
+var T = Object.defineProperty;
+var D = (o, r, t) => r in o ? T(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var s = (o, r, t) => (D(o, typeof r != "symbol" ? r + "" : r, t), t);
+import { move as k, hello as h, goodbye as d, cancel as v } from "hello-goodbye";
+import { isFocusable as H, focusable as A } from "tabbable";
+import { createFocusTrap as O } from "focus-trap";
+import { autoUpdate as M, computePosition as g, shift as L, flip as x, size as K } from "@floating-ui/dom";
+class I extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "onOpen", (t) => {
+      this.querySelectorAll(
+        ":scope > ui-disclosure"
+      ).forEach((e) => {
+        e.open = e === t.target, this.required && e.toggleAttribute("disabled", e === t.target);
+      });
+    });
+  }
+  connectedCallback() {
+    this.addEventListener("open", this.onOpen, { capture: !0 });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("open", this.onOpen, { capture: !0 });
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+}
+const w = class extends HTMLElement {
   constructor() {
     super();
     s(this, "timeouts", /* @__PURE__ */ new Map());
@@ -29,7 +50,7 @@ const v = class extends HTMLElement {
       this.append(t), h(t);
     });
     const n = Number(
-      e.duration !== void 0 ? e.duration : t.dataset.duration || v.duration
+      e.duration !== void 0 ? e.duration : t.dataset.duration || w.duration
     );
     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(
       "mouseleave",
@@ -49,7 +70,7 @@ const v = class extends HTMLElement {
       return;
     }
     k(this.children, () => {
-      l(t, {
+      d(t, {
         finish: () => this.removeChild(t)
       });
     }), this.clearTimeout(t);
@@ -83,9 +104,55 @@ const v = class extends HTMLElement {
     this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
   }
 };
-let f = v;
-s(f, "duration", 1e4);
-const w = class extends HTMLElement {
+let b = w;
+s(b, "duration", 1e4);
+function C(o) {
+  return o.altKey || o.ctrlKey || o.metaKey || o.shiftKey || o.button !== void 0 && o.button !== 0;
+}
+class P extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "onButtonClick", (t) => {
+      !C(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
+    });
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  connectedCallback() {
+    this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
+  }
+  disconnectedCallback() {
+    v(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "open" && (i !== null ? this.wasOpened() : this.wasClosed());
+  }
+  wasOpened() {
+    this.content.hidden && (this.content.hidden = !1, h(this.content), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("open")));
+  }
+  wasClosed() {
+    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), d(this.content, {
+      finish: () => this.content.hidden = !0
+    }), this.dispatchEvent(new Event("close")));
+  }
+  get button() {
+    return this.querySelector("button, [role=button]");
+  }
+  get content() {
+    return this.children[1];
+  }
+}
+const y = class extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "search", "");
@@ -102,7 +169,7 @@ const w = class extends HTMLElement {
         }
         t.key.length > 1 || t.ctrlKey || t.metaKey || t.altKey || (this.search += t.key.toLowerCase(), t.preventDefault(), clearTimeout(this.searchTimeout), this.searchTimeout = window.setTimeout(() => {
           this.search = "";
-        }, w.searchDelay), this.items.some((e) => {
+        }, y.searchDelay), this.items.some((e) => {
           var i;
           return ((i = e.textContent) == null ? void 0 : i.trim().toLowerCase().indexOf(this.search)) === 0 ? (e.focus(), !0) : !1;
         }));
@@ -120,7 +187,7 @@ const w = class extends HTMLElement {
   get items() {
     return Array.from(
       this.querySelectorAll("[role^=menuitem]")
-    ).filter((t) => D(t));
+    ).filter((t) => H(t));
   }
   navigate(t) {
     var n;
@@ -129,9 +196,9 @@ const w = class extends HTMLElement {
     i < 0 && (i = e.length - 1), i >= e.length && (i = 0), (n = e[i]) == null || n.focus();
   }
 };
-let b = w;
-s(b, "searchDelay", 800);
-const c = class extends HTMLElement {
+let f = y;
+s(f, "searchDelay", 800);
+const u = class extends HTMLElement {
   constructor() {
     super();
     s(this, "focusTrap");
@@ -144,18 +211,19 @@ const c = class extends HTMLElement {
     const e = this.attachShadow({ mode: "open" });
     e.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
       var i;
-      this.hasAttribute("static") ? (i = c.attention) == null || i.call(c, e.children[1]) : this.close();
-    }), this.focusTrap = H(this, {
+      this.hasAttribute("static") ? (i = u.attention) == null || i.call(u, e.children[1]) : this.close();
+    }), this.focusTrap = O(this, {
       escapeDeactivates: !1,
-      allowOutsideClick: !0
+      allowOutsideClick: !0,
+      preventScroll: !0
     });
   }
   static get observedAttributes() {
     return ["open"];
   }
   connectedCallback() {
-    var t, e, i, n, a, y;
-    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") || (y = this.content) == null || y.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (p) => {
+    var t, e, i, n, a, E;
+    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) => {
       p.key === "Escape" && this.open && (p.preventDefault(), p.stopPropagation(), this.close());
     }), this.open && this.wasOpened();
   }
@@ -183,7 +251,7 @@ const c = class extends HTMLElement {
   }
   wasClosed() {
     var t;
-    (t = this.focusTrap) == null || t.deactivate(), l(this, {
+    (t = this.focusTrap) == null || t.deactivate(), d(this, {
       finish: () => this.hidden = !0
     }), this.dispatchEvent(new Event("close"));
   }
@@ -195,7 +263,7 @@ const c = class extends HTMLElement {
     return this.firstElementChild;
   }
 };
-let m = c;
+let m = u;
 s(m, "attention", (t) => t.animate(
   [
     { transform: "scale(1)" },
@@ -204,15 +272,12 @@ s(m, "attention", (t) => t.animate(
   ],
   300
 ));
-function O(o) {
-  return o.altKey || o.ctrlKey || o.metaKey || o.shiftKey || o.button !== void 0 && o.button !== 0;
-}
 class $ extends HTMLElement {
   constructor() {
     super();
     s(this, "cleanup");
     s(this, "onButtonClick", (t) => {
-      !O(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
+      !C(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
     });
     s(this, "onButtonKeyDown", (t) => {
       var e;
@@ -242,7 +307,7 @@ class $ extends HTMLElement {
     }), 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);
   }
   disconnectedCallback() {
-    E(this.backdrop), E(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);
+    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);
   }
   get open() {
     return this.hasAttribute("open");
@@ -259,16 +324,16 @@ class $ extends HTMLElement {
   wasOpened() {
     if (!this.content.hidden)
       return;
-    this.content.hidden = !1, this.backdrop.hidden = !1, h(this.content), h(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.content.style.position = "absolute", this.cleanup = K(
+    this.content.hidden = !1, this.backdrop.hidden = !1, h(this.content), h(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.content.style.position = "absolute", this.cleanup = M(
       this.button,
       this.content,
       () => {
-        L(this.button, this.content, {
+        g(this.button, this.content, {
           placement: this.getAttribute("placement") || "bottom",
           middleware: [
-            g(),
+            L(),
             x(),
-            M({
+            K({
               apply: ({ availableWidth: e, availableHeight: i }) => {
                 Object.assign(this.content.style, {
                   maxWidth: "",
@@ -293,9 +358,9 @@ class $ extends HTMLElement {
   }
   wasClosed() {
     var t;
-    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), l(this.backdrop, {
+    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), d(this.backdrop, {
       finish: () => this.backdrop.hidden = !0
-    }), l(this.content, {
+    }), d(this.content, {
       finish: () => this.content.hidden = !0
     }), this.dispatchEvent(new Event("close")));
   }
@@ -304,13 +369,13 @@ class $ extends HTMLElement {
     return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
   }
   get button() {
-    return this.children[0];
+    return this.querySelector("button, [role=button]");
   }
   get content() {
     return this.children[1];
   }
 }
-class P extends HTMLElement {
+class U extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "onInitialFocus", () => {
@@ -341,7 +406,7 @@ class P extends HTMLElement {
     return A(this);
   }
 }
-const u = class extends HTMLElement {
+const l = class extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "parent");
@@ -353,12 +418,15 @@ const u = 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();
       });
@@ -366,7 +434,7 @@ const u = 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");
@@ -378,9 +446,9 @@ const u = class extends HTMLElement {
     if (this.disabled)
       return;
     const t = this.createTooltip();
-    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", L(this.parent, t, {
-      placement: this.getAttribute("placement") || u.placement,
-      middleware: [g(), x()]
+    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, {
+      placement: this.getAttribute("placement") || l.placement,
+      middleware: [L(), x()]
     }).then(({ x: e, y: i, placement: n }) => {
       Object.assign(t.style, {
         left: `${e}px`,
@@ -389,7 +457,7 @@ const u = class extends HTMLElement {
     });
   }
   hide() {
-    clearTimeout(this.timeout), this.showing && (this.showing = !1, l(this.tooltip, {
+    clearTimeout(this.timeout), this.showing && (this.showing = !1, d(this.tooltip, {
       finish: () => {
         this.tooltip && (this.tooltip.hidden = !0);
       }
@@ -400,23 +468,25 @@ const u = class extends HTMLElement {
     const e = parseInt(this.getAttribute("delay") || "");
     this.timeout = window.setTimeout(
       t.bind(this),
-      isNaN(e) ? u.delay : e
+      isNaN(e) ? l.delay : e
     );
   }
   createTooltip() {
-    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || u.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
+    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(
       "mouseleave",
       this.afterDelay.bind(this, this.hide)
     ), document.body.appendChild(this.tooltip)), this.tooltip;
   }
 };
-let d = u;
-s(d, "delay", 100), s(d, "placement", "top"), s(d, "tooltipClass", "tooltip");
+let c = l;
+s(c, "delay", 100), s(c, "placement", "top"), s(c, "tooltipClass", "tooltip");
 export {
-  f as AlertsElement,
-  b as MenuElement,
+  I as AccordionElement,
+  b as AlertsElement,
+  P as DisclosureElement,
+  f as MenuElement,
   m as ModalElement,
   $ as PopupElement,
-  P as ToolbarElement,
-  d as TooltipElement
+  U as ToolbarElement,
+  c as TooltipElement
 };

package/dist/types/accordion/accordion.d.ts

@@ -0,0 +1,6 @@
+export default class AccordionElement extends HTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onOpen;
+    get required(): boolean;
+}

package/dist/types/alerts/alerts.d.ts

@@ -1,4 +1,4 @@
-export declare type AlertOptions = {
+export type AlertOptions = {
     key?: string;
     duration?: number;
     animate?: boolean;

package/dist/types/disclosure/disclosure.d.ts

@@ -0,0 +1,14 @@
+export default class DisclosureElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onButtonClick;
+    get open(): boolean;
+    set open(val: boolean);
+    get disabled(): boolean;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private wasOpened;
+    private wasClosed;
+    private get button();
+    private get content();
+}

package/dist/types/index.d.ts

@@ -1,4 +1,6 @@
+export { default as AccordionElement } from './accordion/accordion';
 export { default as AlertsElement } from './alerts/alerts';
+export { default as DisclosureElement } from './disclosure/disclosure';
 export { default as MenuElement } from './menu/menu';
 export { default as ModalElement } from './modal/modal';
 export { default as PopupElement } from './popup/popup';

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.2.2",
+    "version": "0.3.1",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
     "module": "dist/inclusive-elements.js",
     "type": "module",
@@ -15,30 +15,35 @@
         "dev": "vite",
         "build": "tsc --noEmit && vite build && tsc --emitDeclarationOnly",
         "preview": "vite preview",
-        "release": "release-it --npm.tag=latest"
+        "release": "release-it"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.0.0",
-        "focus-trap": "^6.7.2",
-        "hello-goodbye": "^0.1.0-beta.5",
-        "tabbable": "^5.2.1"
+        "@floating-ui/dom": "^1.2.4",
+        "focus-trap": "^6.9.4",
+        "hello-goodbye": "^0.1.1",
+        "tabbable": "^5.3.3"
     },
     "devDependencies": {
-        "@release-it/keep-a-changelog": "^2.3.0",
-        "prettier": "^2.6.2",
-        "release-it": "^14.12.4",
-        "typescript": "^4.5.5",
-        "vite": "^3.0.4"
+        "@release-it/conventional-changelog": "^5.1.1",
+        "prettier": "^2.8.4",
+        "release-it": "^15.9.0",
+        "typescript": "^5.0.2",
+        "vite": "^4.2.0"
     },
     "release-it": {
+        "git": {
+            "commitMessage": "release: v${version}",
+            "tagName": "v${version}"
+        },
         "github": {
-            "release": true
+            "release": true,
+            "releaseName": "v${version}"
         },
         "plugins": {
-            "@release-it/keep-a-changelog": {
-                "filename": "CHANGELOG.md",
-                "addUnreleased": true,
-                "addVersionUrl": true
+            "@release-it/conventional-changelog": {
+                "preset": "conventionalcommits",
+                "infile": "CHANGELOG.md",
+                "header": "# Changelog"
             }
         },
         "hooks": {