inclusive-elements 0.1.3 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 **Accessible, lightweight, unstyled implementations of common UI controls.**
 
-[**Demo**](https://tobyzerner.github.io/inclusive-elements/demo/index.html)
+[**Demo**](https://tobyzerner.github.io/inclusive-elements/index.html)
 
 Basic interactive UI patterns like popup menus, tooltips, and modals are surprisingly hard to get right on the web. Component libraries tend to be weighty, opinionated, and come tightly coupled with styles you don't want. On the other hand, rolling your own components feels like you're reinventing the wheel and puts accessibility at risk.
 

package/package.json

@@ -1,41 +1,35 @@
 {
     "name": "inclusive-elements",
-    "version": "0.1.3",
+    "version": "0.2.0",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
+    "module": "./dist/inclusive-elements.js",
     "type": "module",
-    "types": "dist/index.d.ts",
+    "types": "./dist/types/index.d.ts",
     "license": "MIT",
     "repository": "tobyzerner/inclusive-elements",
     "files": [
-        "dist",
-        "README.md"
+        "./dist",
+        "./README.md"
     ],
     "sideEffects": false,
     "scripts": {
-        "build": "tsc && rollup -c && npm run build:demo",
-        "build:watch": "rollup -cw",
-        "build:demo": "rollup -c demo/rollup.config.js",
+        "dev": "vite",
+        "build": "tsc --noEmit && vite build && tsc --emitDeclarationOnly",
+        "preview": "vite preview",
         "release": "release-it --npm.tag=latest"
     },
     "dependencies": {
-        "@floating-ui/dom": "^0.5.2",
+        "@floating-ui/dom": "^1.0.0",
         "focus-trap": "^6.7.2",
         "hello-goodbye": "^0.1.0-beta.5",
         "tabbable": "^5.2.1"
     },
     "devDependencies": {
         "@release-it/keep-a-changelog": "^2.3.0",
-        "@rollup/plugin-node-resolve": "^11.2.1",
-        "@rollup/plugin-typescript": "^8.3.0",
         "prettier": "^2.6.2",
         "release-it": "^14.12.4",
-        "rollup": "^2.66.1",
-        "rollup-plugin-filesize": "^9.1.2",
-        "rollup-plugin-terser": "^7.0.2",
-        "tslib": "^2.3.1",
-        "typescript": "^4.5.5"
+        "typescript": "^4.5.5",
+        "vite": "^3.0.4"
     },
     "release-it": {
         "github": {

package/dist/alerts/alerts.d.ts

@@ -1,17 +0,0 @@
-export declare type AlertOptions = {
-    key?: string;
-    duration?: number;
-};
-export default class AlertsElement extends HTMLElement {
-    static duration: number;
-    private timeouts;
-    private index;
-    connectedCallback(): void;
-    show(el: HTMLElement, options?: AlertOptions): string;
-    dismiss(el: HTMLElement): void;
-    dismiss(key: string): void;
-    clear(): void;
-    speak(message: string): void;
-    private startTimeout;
-    private clearTimeout;
-}

package/dist/index.d.ts

@@ -1,6 +0,0 @@
-export { default as AlertsElement } from './alerts/alerts';
-export { default as MenuElement } from './menu/menu';
-export { default as ModalElement } from './modal/modal';
-export { default as PopupElement } from './popup/popup';
-export { default as ToolbarElement } from './toolbar/toolbar';
-export { default as TooltipElement } from './tooltip/tooltip';

package/dist/index.js

@@ -1 +0,0 @@
-import{move as t,hello as e,goodbye as i,cancel as s}from"hello-goodbye";import{isFocusable as n,focusable as o}from"tabbable";import{createFocusTrap as a}from"focus-trap";import{autoUpdate as r,computePosition as h,shift as d,flip as c,size as l}from"@floating-ui/dom";class u extends HTMLElement{static duration=1e4;timeouts=new Map;index=0;connectedCallback(){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")}show(i,s={}){const n=s.key||String(this.index++);this.dismiss(n),i.dataset.key=n,t(this.children,(()=>{this.append(i),e(i)}));const o=void 0!==s.duration?Number(s.duration):u.duration;return o>0&&(this.startTimeout(i,o),i.addEventListener("mouseenter",this.clearTimeout.bind(this,i)),i.addEventListener("focusin",this.clearTimeout.bind(this,i)),i.addEventListener("mouseleave",this.startTimeout.bind(this,i,o)),i.addEventListener("focusout",this.startTimeout.bind(this,i,o))),n}dismiss(e){"string"!=typeof e?(t(this.children,(()=>{i(e,{finish:()=>this.removeChild(e)})})),this.clearTimeout(e)):this.querySelectorAll(`[data-key="${e}"]`).forEach((t=>{this.dismiss(t)}))}clear(){for(const t of this.children)this.dismiss(t)}speak(t){const e=document.createElement("div");Object.assign(e.style,{clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",overflow:"hidden",position:"absolute",whiteSpace:"nowrap",width:"1px"}),e.textContent=t,this.show(e)}startTimeout(t,e){this.clearTimeout(t),this.timeouts.set(t,window.setTimeout((()=>{this.dismiss(t)}),e))}clearTimeout(t){this.timeouts.has(t)&&clearTimeout(this.timeouts.get(t))}}class p extends HTMLElement{static searchDelay=800;search="";searchTimeout;connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","menu"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.items.forEach((t=>{t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1")})),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onKeyDown)}get items(){return Array.from(this.querySelectorAll("[role^=menuitem]")).filter((t=>n(t)))}onKeyDown=t=>{if(!this.hidden)return"ArrowUp"===t.key?(this.navigate(-1),void t.preventDefault()):"ArrowDown"===t.key?(this.navigate(1),void t.preventDefault()):void(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=""}),p.searchDelay),this.items.some((t=>{if(0===t.textContent?.trim().toLowerCase().indexOf(this.search))return t.focus(),!0}))))};navigate(t){const e=this.items;let i=(document.activeElement instanceof HTMLElement?e.indexOf(document.activeElement):-1)+t;i<0&&(i=e.length-1),i>=e.length&&(i=0),e[i]?.focus()}}class m extends HTMLElement{static attention=t=>t.animate([{transform:"scale(1)"},{transform:"scale(1.1)"},{transform:"scale(1)"}],300);static get observedAttributes(){return["open"]}focusTrap;connected=!1;constructor(){super();const t=document.createElement("template");t.innerHTML='\n            <div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>\n            <div part="content" style="z-index: 1"><slot></slot></div>\n        ';const e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),this.backdrop.addEventListener("click",(()=>{this.hasAttribute("static")?m.attention?.(e.children[1]):this.close()})),this.focusTrap=a(this,{escapeDeactivates:!1,allowOutsideClick:!0})}connectedCallback(){this.connected=!0,this.content?.hasAttribute("role")||this.content?.setAttribute("role","dialog"),this.content?.hasAttribute("aria-modal")||this.content?.setAttribute("aria-modal","true"),this.content?.hasAttribute("tabindex")||this.content?.setAttribute("tabindex","-1"),this.addEventListener("keydown",(t=>{"Escape"===t.key&&this.open&&(t.preventDefault(),t.stopPropagation(),this.close())})),this.open&&this.wasOpened()}disconnectedCallback(){this.connected=!1}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}close(){if(!this.open)return;const t=new Event("beforeclose",{cancelable:!0});this.dispatchEvent(t)&&(this.open=!1)}attributeChangedCallback(t,e,i){"open"===t&&this.connected&&(null!==i?this.wasOpened():this.wasClosed())}wasOpened(){this.hidden=!1,e(this),this.focusTrap.activate(),this.querySelector("[autofocus]")?.focus(),this.dispatchEvent(new Event("open"))}wasClosed(){this.focusTrap.deactivate(),i(this,{finish:()=>this.hidden=!0}),this.dispatchEvent(new Event("close"))}get backdrop(){return this.shadowRoot?.firstElementChild}get content(){return this.firstElementChild}}class b extends HTMLElement{cleanup;static get observedAttributes(){return["open"]}constructor(){super();const t=document.createElement("template");t.innerHTML='\n            <div part="backdrop" hidden style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>\n            <slot></slot>\n        ';this.attachShadow({mode:"open"}).appendChild(t.content.cloneNode(!0)),this.backdrop.onclick=()=>this.open=!1}connectedCallback(){this.backdrop.hidden=!0,this.content.hidden=!0,this.open=!1,this.button.setAttribute("aria-expanded","false"),setTimeout((()=>{"menu"===this.content.getAttribute("role")&&this.button.setAttribute("aria-haspopup","true")})),this.button.addEventListener("click",(()=>{this.open=!this.open})),this.button.addEventListener("keydown",(t=>{"ArrowDown"===t.key&&(t.preventDefault(),this.open=!0,o(this.content)[0]?.focus())})),this.addEventListener("keydown",(t=>{"Escape"===t.key&&this.open&&(t.preventDefault(),t.stopPropagation(),this.open=!1,this.button.focus())})),this.addEventListener("focusout",(t=>{t.relatedTarget instanceof Node&&this.contains(t.relatedTarget)||(this.open=!1)})),this.content.addEventListener("click",(t=>{t.target instanceof Element&&t.target.closest("[role=menuitem], [role=menuitemradio]")&&(this.open=!1,this.button.focus())}))}disconnectedCallback(){s(this.backdrop),s(this.content)}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}attributeChangedCallback(t,e,i){"open"===t&&(null!==i?this.wasOpened():this.wasClosed())}wasOpened(){if(!this.content.hidden)return;this.content.hidden=!1,this.backdrop.hidden=!1,e(this.content),e(this.backdrop),this.button.setAttribute("aria-expanded","true"),this.content.style.position="absolute",this.cleanup=r(this.button,this.content,(()=>{h(this.button,this.content,{placement:this.getAttribute("placement")||"bottom",middleware:[d(),c(),l({apply:({availableWidth:t,availableHeight:e})=>{Object.assign(this.content.style,{maxWidth:"",maxHeight:""});const i=getComputedStyle(this.content);("none"===i.maxWidth||t<parseInt(i.maxWidth))&&(this.content.style.maxWidth=`${t}px`),("none"===i.maxHeight||e<parseInt(i.maxHeight))&&(this.content.style.maxHeight=`${e}px`)}})]}).then((({x:t,y:e,placement:i})=>{Object.assign(this.content.style,{left:`${t}px`,top:`${e}px`}),this.content.dataset.placement=i}))}),{ancestorScroll:!1});const t=this.content.querySelector("[autofocus]");t?t.focus():this.content.focus(),this.dispatchEvent(new Event("open"))}wasClosed(){this.content.hidden||(this.button.setAttribute("aria-expanded","false"),this.cleanup?.(),i(this.backdrop,{finish:()=>this.backdrop.hidden=!0}),i(this.content,{finish:()=>this.content.hidden=!0}),this.dispatchEvent(new Event("close")))}get backdrop(){return this.shadowRoot?.firstElementChild}get button(){return this.children[0]}get content(){return this.children[1]}}class v extends HTMLElement{connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","toolbar"),this.setAttribute("tabindex","0"),this.addEventListener("focus",this.onInitialFocus,{once:!0}),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onKeyDown)}onInitialFocus=t=>{this.removeAttribute("tabindex"),this.focusControlAtIndex(0)};onKeyDown=t=>{if("ArrowRight"!==t.key&&"ArrowLeft"!==t.key&&"Home"!==t.key&&"End"!==t.key)return;const e=this.controls,i=this.controls.length,s=e.indexOf(t.target);if(-1===s)return;let n=0;"ArrowLeft"===t.key&&(n=s-1),"ArrowRight"===t.key&&(n=s+1),"End"===t.key&&(n=i-1),n<0&&(n=i-1),n>i-1&&(n=0),this.focusControlAtIndex(n),t.preventDefault()};focusControlAtIndex(t){this.controls.forEach(((e,i)=>{i===t?(e.setAttribute("tabindex","0"),e.focus()):e.setAttribute("tabindex","-1")}))}get controls(){return o(this)}}class f extends HTMLElement{static delay=100;static placement="top";static tooltipClass="tooltip";parent;tooltip;timeout;observer;showing=!1;onMouseEnter=this.afterDelay.bind(this,this.show);onFocus=this.show.bind(this);onMouseLeave=this.afterDelay.bind(this,this.hide);onBlur=this.hide.bind(this);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=>{t.forEach((t=>{"disabled"===t.attributeName&&this.hide()}))})),this.observer.observe(this.parent,{attributes:!0})),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("scroll",this.onBlur)}disconnectedCallback(){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),this.observer.disconnect(),clearTimeout(this.timeout)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}onKeyDown=t=>{"Escape"===t.key&&this.hide()};show(){if(this.disabled)return;const t=this.createTooltip();clearTimeout(this.timeout),this.showing||(t.hidden=!1,e(t),this.showing=!0),t.innerHTML!==this.innerHTML&&(t.innerHTML=this.innerHTML),t.style.position="absolute",h(this.parent,t,{placement:this.getAttribute("placement")||f.placement,middleware:[d(),c()]}).then((({x:e,y:i,placement:s})=>{Object.assign(t.style,{left:`${e}px`,top:`${i}px`}),t.dataset.placement=s}))}hide(){clearTimeout(this.timeout),this.showing&&(this.showing=!1,i(this.tooltip,{finish:()=>{this.tooltip&&(this.tooltip.hidden=!0)}}))}afterDelay(t){clearTimeout(this.timeout);const e=parseInt(this.getAttribute("delay")||"");this.timeout=window.setTimeout(t.bind(this),isNaN(e)?f.delay:e)}createTooltip(){return this.tooltip||(this.tooltip=document.createElement("div"),this.tooltip.className=this.getAttribute("tooltip-class")||f.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}}export{u as AlertsElement,p as MenuElement,m as ModalElement,b as PopupElement,v as ToolbarElement,f as TooltipElement};

package/dist/menu/menu.d.ts

@@ -1,10 +0,0 @@
-export default class MenuElement extends HTMLElement {
-    static searchDelay: number;
-    private search;
-    private searchTimeout?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private get items();
-    private onKeyDown;
-    private navigate;
-}

package/dist/modal/modal.d.ts

@@ -1,17 +0,0 @@
-export default class ModalElement extends HTMLElement {
-    static attention: (el: Element) => void;
-    static get observedAttributes(): string[];
-    private focusTrap?;
-    private connected;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get open(): boolean;
-    set open(val: boolean);
-    close(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private wasOpened;
-    private wasClosed;
-    private get backdrop();
-    private get content();
-}

package/dist/popup/popup.d.ts

@@ -1,15 +0,0 @@
-export default class PopupElement extends HTMLElement {
-    cleanup?: () => void;
-    static get observedAttributes(): string[];
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get open(): boolean;
-    set open(val: boolean);
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private wasOpened;
-    private wasClosed;
-    private get backdrop();
-    private get button();
-    private get content();
-}

package/dist/toolbar/toolbar.d.ts

@@ -1,8 +0,0 @@
-export default class ToolbarElement extends HTMLElement {
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onInitialFocus;
-    private onKeyDown;
-    private focusControlAtIndex;
-    private get controls();
-}

package/dist/tooltip/tooltip.d.ts

@@ -1,23 +0,0 @@
-export default class TooltipElement extends HTMLElement {
-    static delay: number;
-    static placement: string;
-    static tooltipClass: string;
-    private parent?;
-    private tooltip?;
-    private timeout?;
-    private observer?;
-    private showing;
-    private onMouseEnter;
-    private onFocus;
-    private onMouseLeave;
-    private onBlur;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get disabled(): boolean;
-    set disabled(val: boolean);
-    private onKeyDown;
-    private show;
-    private hide;
-    private afterDelay;
-    private createTooltip;
-}