@ne1410s/popup 0.3.185 → 1.0.1

package/LICENSE

@@ -1,21 +1,9 @@
 MIT License
 
-Copyright (c) 2020 ne1410s
+Copyright (c) 2026 ne1410s
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,74 +1,74 @@
-# @ne1410s/popup
-
-## A lightweight & configurable modal popup.
-
-```html
-<ne14-pop>
-  <p>Hello world</p>
-</ne14-pop>
-```
-
-- **Use:** `<script src="PATH_TO_UMD_SCRIPT"></script>`
-- **Extend:** _npm i @ne1410s/popup_
-
-### Attributes
-
-```html
-<ne14-pop move resize>YO' STUFF<ne14-pop></ne14-pop></ne14-pop>
-```
-
-- **move**: User can drag the popup around
-- **resize**: User can alter the size of the popup
-- **shrink**: (Requires **_resize_**: User can reduce size below that initially presented)
-- **open**: The popup is opened immediately
-- **no-close**: The close icon is not made available
-- **style**: If supplied inline, the following styles are propagated to the element. They are fairly self-explanatory
-  - `background-color`
-  - `border-radius`
-  - `box-shadow`
-
-### Events
-
-```javascript
-const pop = document.querySelector('ne14-pop');
-
-pop.addEventListener('open', () => {
-  console.log('Just opened!');
-});
-```
-
-- **open**: Fired when the popup is opened
-- **close**: Fired when the popup is closed
-- **confirmaccept**: Fired when the confirm callback allowed the popup to close
-- **confirmreject**: Fired when the confirm callback prevented the popup from closing
-- **dismissaccept**: Fired when the dismiss callback allowed the popup to close
-- **dismissreject**: Fired when the dismiss callback prevented the popup from closing
-
-### Methods
-
-- **open()**: Opens the popup
-- **close()**: Closes the popup
-- **wrap()**: Wraps existing html element(s) in a new popup
-- **confirm()**: Closes the popup, unless confirmCallback is provided and returns `false`
-- **dismiss()**: Closes the popup, unless dismissCallback is provided and returns `false`.
-
-### Properties
-
-- **confirmCallback**: () => boolean: Return false to prevent a call to confirm from closing the popup
-- **dismissCallback**: () => boolean: Return false to prevent a call to dismiss from closing the popup
-
-### CSS Variables
-
-Some degree of custom styling can be provided, by way of css variables:
-
-```css
-ne14-pop {
-  --background: rgba(0, 0, 0, 0.5);
-  --border-radius: 5px;
-  --box-shadow: 5px 5px 20px black;
-}
-```
-
-- **`--background`** _Background behind the popup. Defaults to: `rgba(0, 0, 0, .85)`_
-- **`--border-radius`** _Border radius for the popup._
-- **`--box-shadow`** _Box shadow for the popup (when stationary)._
+# @ne1410s/popup
+
+## A lightweight & configurable modal popup.
+
+```html
+<ne14-pop>
+  <p>Hello world</p>
+</ne14-pop>
+```
+
+- **Use:** `<script src="PATH_TO_UMD_SCRIPT"></script>`
+- **Extend:** _npm i @ne1410s/popup_
+
+### Attributes
+
+```html
+<ne14-pop move resize>YO' STUFF<ne14-pop></ne14-pop></ne14-pop>
+```
+
+- **move**: User can drag the popup around
+- **resize**: User can alter the size of the popup
+- **shrink**: (Requires **_resize_**: User can reduce size below that initially presented)
+- **open**: The popup is opened immediately
+- **no-close**: The close icon is not made available
+- **style**: If supplied inline, the following styles are propagated to the element. They are fairly self-explanatory
+  - `background-color`
+  - `border-radius`
+  - `box-shadow`
+
+### Events
+
+```javascript
+const pop = document.querySelector('ne14-pop');
+
+pop.addEventListener('open', () => {
+  console.log('Just opened!');
+});
+```
+
+- **open**: Fired when the popup is opened
+- **close**: Fired when the popup is closed
+- **confirmaccept**: Fired when the confirm callback allowed the popup to close
+- **confirmreject**: Fired when the confirm callback prevented the popup from closing
+- **dismissaccept**: Fired when the dismiss callback allowed the popup to close
+- **dismissreject**: Fired when the dismiss callback prevented the popup from closing
+
+### Methods
+
+- **open()**: Opens the popup
+- **close()**: Closes the popup
+- **wrap()**: Wraps existing html element(s) in a new popup
+- **confirm()**: Closes the popup, unless confirmCallback is provided and returns `false`
+- **dismiss()**: Closes the popup, unless dismissCallback is provided and returns `false`.
+
+### Properties
+
+- **confirmCallback**: () => boolean: Return false to prevent a call to confirm from closing the popup
+- **dismissCallback**: () => boolean: Return false to prevent a call to dismiss from closing the popup
+
+### CSS Variables
+
+Some degree of custom styling can be provided, by way of css variables:
+
+```css
+ne14-pop {
+  --background: rgba(0, 0, 0, 0.5);
+  --border-radius: 5px;
+  --box-shadow: 5px 5px 20px black;
+}
+```
+
+- **`--background`** _Background behind the popup. Defaults to: `rgba(0, 0, 0, .85)`_
+- **`--border-radius`** _Border radius for the popup._
+- **`--box-shadow`** _Box shadow for the popup (when stationary)._

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import { Popup } from './popup/popup';
 export { Popup };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMtC,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/index.iife.js

@@ -0,0 +1 @@
+"use strict";var ne_pop=(()=>{var d=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var L=(r,n)=>{for(var t in n)d(r,t,{get:n[t],enumerable:!0})},E=(r,n,t,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of k(n))!x.call(r,e)&&e!==t&&d(r,e,{get:()=>n[e],enumerable:!(s=w(n,e))||s.enumerable});return r};var z=r=>E(d({},"__esModule",{value:!0}),r);var S={};L(S,{Popup:()=>a});var p=".back{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--background,rgba(0,0,0,.85));opacity:0;overflow:hidden;transition:opacity .3s;z-index:99999}.back:not(.open){pointer-events:none}.back.open{opacity:1}.back.open .fore.ready{transition:box-shadow .3s,background-color .3s}.fore.over{cursor:move;background-color:#fafafa}.fore.moving{cursor:crosshair;background-color:#e6e6e6;user-select:none}.fore.moving,.fore.over{box-shadow:inset 0 0 .5em #000!important}.fore{background-color:#fff;min-width:1rem;max-width:100vw;min-height:1rem;max-height:100vh;position:absolute;overflow:hidden;top:50%;left:50%;transition:transform .3s;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.fore>span{position:absolute;font-size:1.5em;user-select:none;color:rgba(0,0,0,.3)}.fore.no-close{max-width:calc(100vw - 1em);max-height:calc(100vh - 1em)}.fore.no-close .close{display:none}.fore .close{cursor:pointer;top:-6px;right:0;padding:.2em}.fore:not(.resize) .se-resize{display:none}.fore .se-resize{cursor:se-resize;bottom:-9px;right:-4px}";var m='<div class="back"><div class="fore"><slot></slot><span class="close">&times;</span> <span class="se-resize">&#x25e2;</span></div></div>';var a=class extends HTMLElement{constructor(){super();this._coords=null;this._drag=null;this.confirmCallback=null;this.dismissCallback=null;this.root=this.attachShadow({mode:"open"});let t=new CSSStyleSheet;t.replaceSync(p),this.shadowRoot.adoptedStyleSheets=[t],this.shadowRoot.innerHTML=m;let s=this.root.querySelector(".back"),e=s.querySelector(".fore"),c=e.querySelector(".se-resize"),i=e.querySelector(".close");this.resetOffscreenPosition(e),i?.addEventListener("click",()=>this.close()),c?.addEventListener("mousedown",()=>{if(e.classList.toggle("over",this.canResize),e.classList.toggle("resizing",this.canResize),!this.canShrink&&!e.style.minWidth){let o=e.getBoundingClientRect();e.style.minWidth=o.width+"px",e.style.minHeight=o.height+"px"}}),s.addEventListener("mousedown",o=>{this._drag=o.target===s?"back":o.target===e?"fore":"fore*",this._coords=this._drag!=="fore"?null:{x:o.offsetX,y:o.offsetY},e.classList.toggle("moving",this.canMove&&this._drag==="fore")}),e.addEventListener("mouseover",o=>e.classList.toggle("over",this.canMove&&o.target===e)),e.addEventListener("mouseout",()=>e.classList.remove("over")),window.addEventListener("mousemove",o=>{let h=e.getBoundingClientRect();if(e.classList.contains("resizing"))e.style.width=5+o.pageX-h.x+"px",e.style.height=5+o.pageY-h.y+"px";else if(this.canMove&&this._drag==="fore"&&this._coords){let l=s.getBoundingClientRect(),f=l.width-window.innerWidth,g=l.height-window.innerHeight,u=100*Math.max(0,o.pageX-this._coords.x)/window.innerWidth,v=100*Math.max(0,o.pageY-this._coords.y)/window.innerHeight,b=`min(${u.toFixed(2)}vw, ${f}px + 100vw - 100%)`,y=`min(${v.toFixed(2)}vh, ${g}px + 100vh - 100%)`;e.style.top=e.style.left="0",e.style.transform=`translate(${b}, ${y})`}}),window.addEventListener("mouseup",()=>{this._drag=null,e.classList.remove("moving","resizing")}),s.addEventListener("mouseup",o=>{this._drag==="back"&&o.target===s&&this.dismiss(),this._drag=null,e.classList.remove("moving","resizing")}),e.addEventListener("transitionend",o=>{o.propertyName==="transform"&&(s.classList.contains("open")?e.classList.add("ready"):this.resetOffscreenPosition(e))})}static{this.observedAttributes=["open"]}get canMove(){return this.hasAttribute("move")}get canResize(){return this.hasAttribute("resize")}get canShrink(){return this.canResize&&this.hasAttribute("shrink")}get canClose(){return!this.hasAttribute("no-close")}close(){this.removeAttribute("open")}open(){this.setAttribute("open","")}wrap(t){let s=typeof t.append=="function"?t:document.querySelector(t+"");this.appendChild(s)}confirm(){let t=!!this.confirmCallback,s=!t||this.confirmCallback();t&&this.fire(s?"confirmaccept":"confirmreject"),s&&this.close()}dismiss(){let t=!!this.dismissCallback,s=!t||this.dismissCallback();t&&this.fire(s?"dismissaccept":"dismissreject"),s&&this.close()}attributeChangedCallback(t,s,e){if(t==="open"){let c=this.root.querySelector(".back"),i=c.querySelector(".fore"),o=!!e||typeof e=="string";i.classList.remove("ready","moving"),i.style.transform=o?"translate(-50%, -50%)":i.style.transform+" translateY(-100vh)",i.classList.toggle("resize",this.canResize),i.classList.toggle("no-close",!this.canClose),c.classList.toggle("open",o),o&&(i.style.minWidth=i.style.width="",i.style.minHeight=i.style.height=""),this.fire(o?"open":"close")}}connectedCallback(){let t=this.root.querySelector(".back"),s=t.querySelector(".fore");t.classList.contains("open")&&s.classList.add("ready")}resetOffscreenPosition(t){t.style.left="50%",t.style.top="50%",t.style.transform="translate(-50%, -100vh)"}fire(t,s){this.dispatchEvent(new CustomEvent(t,{detail:s}))}};customElements.get("ne14-pop")||customElements.define("ne14-pop",a);return z(S);})();

package/dist/index.js

@@ -0,0 +1 @@
+var l=".back{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--background,rgba(0,0,0,.85));opacity:0;overflow:hidden;transition:opacity .3s;z-index:99999}.back:not(.open){pointer-events:none}.back.open{opacity:1}.back.open .fore.ready{transition:box-shadow .3s,background-color .3s}.fore.over{cursor:move;background-color:#fafafa}.fore.moving{cursor:crosshair;background-color:#e6e6e6;user-select:none}.fore.moving,.fore.over{box-shadow:inset 0 0 .5em #000!important}.fore{background-color:#fff;min-width:1rem;max-width:100vw;min-height:1rem;max-height:100vh;position:absolute;overflow:hidden;top:50%;left:50%;transition:transform .3s;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.fore>span{position:absolute;font-size:1.5em;user-select:none;color:rgba(0,0,0,.3)}.fore.no-close{max-width:calc(100vw - 1em);max-height:calc(100vh - 1em)}.fore.no-close .close{display:none}.fore .close{cursor:pointer;top:-6px;right:0;padding:.2em}.fore:not(.resize) .se-resize{display:none}.fore .se-resize{cursor:se-resize;bottom:-9px;right:-4px}";var d='<div class="back"><div class="fore"><slot></slot><span class="close">&times;</span> <span class="se-resize">&#x25e2;</span></div></div>';var r=class extends HTMLElement{constructor(){super();this._coords=null;this._drag=null;this.confirmCallback=null;this.dismissCallback=null;this.root=this.attachShadow({mode:"open"});let t=new CSSStyleSheet;t.replaceSync(l),this.shadowRoot.adoptedStyleSheets=[t],this.shadowRoot.innerHTML=d;let o=this.root.querySelector(".back"),e=o.querySelector(".fore"),n=e.querySelector(".se-resize"),i=e.querySelector(".close");this.resetOffscreenPosition(e),i?.addEventListener("click",()=>this.close()),n?.addEventListener("mousedown",()=>{if(e.classList.toggle("over",this.canResize),e.classList.toggle("resizing",this.canResize),!this.canShrink&&!e.style.minWidth){let s=e.getBoundingClientRect();e.style.minWidth=s.width+"px",e.style.minHeight=s.height+"px"}}),o.addEventListener("mousedown",s=>{this._drag=s.target===o?"back":s.target===e?"fore":"fore*",this._coords=this._drag!=="fore"?null:{x:s.offsetX,y:s.offsetY},e.classList.toggle("moving",this.canMove&&this._drag==="fore")}),e.addEventListener("mouseover",s=>e.classList.toggle("over",this.canMove&&s.target===e)),e.addEventListener("mouseout",()=>e.classList.remove("over")),window.addEventListener("mousemove",s=>{let c=e.getBoundingClientRect();if(e.classList.contains("resizing"))e.style.width=5+s.pageX-c.x+"px",e.style.height=5+s.pageY-c.y+"px";else if(this.canMove&&this._drag==="fore"&&this._coords){let a=o.getBoundingClientRect(),h=a.width-window.innerWidth,p=a.height-window.innerHeight,m=100*Math.max(0,s.pageX-this._coords.x)/window.innerWidth,f=100*Math.max(0,s.pageY-this._coords.y)/window.innerHeight,g=`min(${m.toFixed(2)}vw, ${h}px + 100vw - 100%)`,u=`min(${f.toFixed(2)}vh, ${p}px + 100vh - 100%)`;e.style.top=e.style.left="0",e.style.transform=`translate(${g}, ${u})`}}),window.addEventListener("mouseup",()=>{this._drag=null,e.classList.remove("moving","resizing")}),o.addEventListener("mouseup",s=>{this._drag==="back"&&s.target===o&&this.dismiss(),this._drag=null,e.classList.remove("moving","resizing")}),e.addEventListener("transitionend",s=>{s.propertyName==="transform"&&(o.classList.contains("open")?e.classList.add("ready"):this.resetOffscreenPosition(e))})}static{this.observedAttributes=["open"]}get canMove(){return this.hasAttribute("move")}get canResize(){return this.hasAttribute("resize")}get canShrink(){return this.canResize&&this.hasAttribute("shrink")}get canClose(){return!this.hasAttribute("no-close")}close(){this.removeAttribute("open")}open(){this.setAttribute("open","")}wrap(t){let o=typeof t.append=="function"?t:document.querySelector(t+"");this.appendChild(o)}confirm(){let t=!!this.confirmCallback,o=!t||this.confirmCallback();t&&this.fire(o?"confirmaccept":"confirmreject"),o&&this.close()}dismiss(){let t=!!this.dismissCallback,o=!t||this.dismissCallback();t&&this.fire(o?"dismissaccept":"dismissreject"),o&&this.close()}attributeChangedCallback(t,o,e){if(t==="open"){let n=this.root.querySelector(".back"),i=n.querySelector(".fore"),s=!!e||typeof e=="string";i.classList.remove("ready","moving"),i.style.transform=s?"translate(-50%, -50%)":i.style.transform+" translateY(-100vh)",i.classList.toggle("resize",this.canResize),i.classList.toggle("no-close",!this.canClose),n.classList.toggle("open",s),s&&(i.style.minWidth=i.style.width="",i.style.minHeight=i.style.height=""),this.fire(s?"open":"close")}}connectedCallback(){let t=this.root.querySelector(".back"),o=t.querySelector(".fore");t.classList.contains("open")&&o.classList.add("ready")}resetOffscreenPosition(t){t.style.left="50%",t.style.top="50%",t.style.transform="translate(-50%, -100vh)"}fire(t,o){this.dispatchEvent(new CustomEvent(t,{detail:o}))}};customElements.get("ne14-pop")||customElements.define("ne14-pop",r);export{r as Popup};

package/dist/popup/popup.d.ts

@@ -1,8 +1,7 @@
-import { CustomElementBase } from '@ne1410s/cust-elems';
-export declare class Popup extends CustomElementBase {
+/** A customisable popup element */
+export declare class Popup extends HTMLElement {
     static readonly observedAttributes: string[];
-    private static readonly Css;
-    private static readonly Html;
+    private readonly root;
     protected get canMove(): boolean;
     protected get canResize(): boolean;
     protected get canShrink(): boolean;
@@ -12,8 +11,11 @@ export declare class Popup extends CustomElementBase {
     confirmCallback: () => boolean;
     dismissCallback: () => boolean;
     constructor();
+    /** Closes the popup. */
     close(): void;
+    /** Opens the popup. */
     open(): void;
+    /** Wraps the specified element within the popup. */
     wrap(selectorOrElem: string | Element): void;
     confirm(): void;
     dismiss(): void;
@@ -23,3 +25,4 @@ export declare class Popup extends CustomElementBase {
     /** Emits a new event. */
     private fire;
 }
+//# sourceMappingURL=popup.d.ts.map

package/dist/popup/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/popup/popup.ts"],"names":[],"mappings":"AAGA,mCAAmC;AACnC,qBAAa,KAAM,SAAQ,WAAW;IACpC,gBAAuB,kBAAkB,WAAY;IAErD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAa;IAElC,SAAS,KAAK,OAAO,YAEpB;IACD,SAAS,KAAK,SAAS,YAEtB;IACD,SAAS,KAAK,SAAS,YAEtB;IACD,OAAO,KAAK,QAAQ,GAEnB;IACD,OAAO,CAAC,OAAO,CAAyC;IACxD,OAAO,CAAC,KAAK,CAA0C;IAEhD,eAAe,EAAE,MAAM,OAAO,CAAS;IACvC,eAAe,EAAE,MAAM,OAAO,CAAS;IAE9C,cA0EC;IAED,wBAAwB;IACxB,KAAK,IAAI,IAAI,CAEZ;IAED,uBAAuB;IACvB,IAAI,IAAI,IAAI,CAEX;IAED,oDAAoD;IACpD,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAM3C;IAED,OAAO,IAAI,IAAI,CAKd;IAED,OAAO,IAAI,IAAI,CAKd;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAkBxE;IAED,iBAAiB,SAMhB;IAED,OAAO,CAAC,sBAAsB;IAM9B,yBAAyB;IACzB,OAAO,CAAC,IAAI;CAGb"}

package/package.json

@@ -1,54 +1,67 @@
-{
-  "name": "@ne1410s/popup",
-  "version": "0.3.185",
-  "description": "A lightweight configurable popup.",
-  "main": "dist/ne14_pop.cjs.min.js",
-  "module": "dist/ne14_pop.esm.min.js",
-  "browser": "dist/ne14_pop.umd.min.js",
-  "displayName": "ne_pop",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "npx rollup -c rollup.browser.config.js -m -w",
-    "clean": "npx rimraf dist",
-    "is-pretty": "npx prettier -l .",
-    "prettify": "npx prettier -w .",
-    "build": "npm run clean && npx rollup -c",
-    "test": "npm run is-pretty",
-    "publish-local": "npm run test && npm run build && npm pack",
-    "publish-patch": "npm run test && npm run build && npm version patch && npm publish --access public",
-    "publish-minor": "npm run test && npm run build && npm version minor && npm publish --access public",
-    "publish-major": "npm run test && npm run build && npm version major && npm publish --access public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ne14-fed/elem.popup.git"
-  },
-  "keywords": [
-    "Lightweight",
-    "configurable",
-    "popup"
-  ],
-  "author": "ne1410s <pgj646@gmail.com> (http://ne1410s.co.uk)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ne14-fed/elem.popup/issues"
-  },
-  "homepage": "https://github.com/ne14-fed/elem.popup#readme",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.1",
-    "@rollup/plugin-url": "^8.0.2",
-    "prettier": "^3.7.4",
-    "rimraf": "^5.0.10",
-    "rollup": "^4.54.0",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.9.3"
-  },
-  "dependencies": {
-    "@ne1410s/cust-elems": "^0.3.168"
-  }
-}
+{
+  "name": "@ne1410s/popup",
+  "version": "1.0.1",
+  "displayName": "ne_pop",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./iife": "./dist/index.iife.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "description": "A popup html element",
+  "author": "ne1410s <pgj646@gmail.com> (http://ne1410s.co.uk)",
+  "keywords": [
+    "popup",
+    "element"
+  ],
+  "homepage": "https://github.com/ne14-fed/elem.popup#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ne14-fed/elem.popup.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ne14-fed/elem.popup/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "npm link && concurrently \"npm run build:watch\" \"npm run demo:iife\" \"npm run demo:vite\"",
+    "clean": "del-cli dist",
+    "is-pretty": "prettier -l .",
+    "prettify": "prettier -w .",
+    "build": "npm run clean && tsc && node esbuild.mjs",
+    "build:watch": "concurrently \"tsc --watch\" \"node esbuild.mjs --watch\"",
+    "demo:vite": "cd demo/vite && npm i && npm link @ne1410s/popup && npx vite",
+    "demo:iife": "npx live-server demo/iife --mount=/package:dist --no-css-inject",
+    "test": "npm run typecheck && npm run is-pretty",
+    "typecheck": "tsc --noEmit",
+    "publish-local": "npm run build && npm pack",
+    "publish-patch": "npm run build && npm version patch && npm publish --access public",
+    "publish-minor": "npm run build && npm version minor && npm publish --access public",
+    "publish-major": "npm run build && npm version major && npm publish --access public"
+  },
+  "devDependencies": {
+    "clean-css": "^5.3.3",
+    "concurrently": "^10.0.5",
+    "del-cli": "^7.0.0",
+    "esbuild": "^0.28.2",
+    "esbuild-sass-plugin": "^3.7.0",
+    "html-minifier-terser": "^7.2.0",
+    "prettier": "^3.9.6",
+    "typescript": "^7.0.2"
+  },
+  "allowScripts": {
+    "esbuild@0.28.2": true,
+    "@parcel/watcher@2.6.0": true
+  }
+}

package/dist/ne14_pop.cjs.min.js

@@ -1,159 +0,0 @@
-'use strict';
-
-var custElems = require('@ne1410s/cust-elems');
-
-var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
-
-var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOg0KICAgIGJveC1zaGFkb3cgMC4zcywNCiAgICBiYWNrZ3JvdW5kLWNvbG9yIDAuM3M7DQp9DQouZm9yZS5vdmVyIHsNCiAgY3Vyc29yOiBtb3ZlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOw0KfQ0KLmZvcmUubW92aW5nIHsNCiAgY3Vyc29yOiBjcm9zc2hhaXI7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjMwLCAyMzAsIDIzMCwgMSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KLmZvcmUub3ZlciwNCi5mb3JlLm1vdmluZyB7DQogIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwLjVlbSBibGFjayAhaW1wb3J0YW50Ow0KfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07DQogIG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07DQogIG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOw0KICBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzOw0KICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTsNCiAgYm94LXNoYWRvdzogdmFyKC0tYm94LXNoYWRvdyk7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjMpOw0KfQ0KLmZvcmUubm8tY2xvc2Ugew0KICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxZW0pOw0KICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMWVtKTsNCn0NCi5mb3JlLm5vLWNsb3NlIC5jbG9zZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuY2xvc2Ugew0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRvcDogLTZweDsNCiAgcmlnaHQ6IDA7DQogIHBhZGRpbmc6IDAuMmVtOw0KfQ0KLmZvcmU6bm90KC5yZXNpemUpIC5zZS1yZXNpemUgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7DQogIGN1cnNvcjogc2UtcmVzaXplOw0KICBib3R0b206IC05cHg7DQogIHJpZ2h0OiAtNHB4Ow0KfQ0K";
-
-class Popup extends custElems.CustomElementBase {
-    get canMove() {
-        return this.hasAttribute('move');
-    }
-    get canResize() {
-        return this.hasAttribute('resize');
-    }
-    get canShrink() {
-        return this.canResize && this.hasAttribute('shrink');
-    }
-    get canClose() {
-        return !this.hasAttribute('no-close');
-    }
-    constructor() {
-        super(Popup.Css, Popup.Html);
-        const back = this.root.querySelector('.back');
-        const fore = back.querySelector('.fore');
-        const resizer = fore.querySelector('.se-resize');
-        const closer = fore.querySelector('.close');
-        this.resetOffscreenPosition(fore);
-        closer.addEventListener('click', () => this.close());
-        resizer.addEventListener('mousedown', () => {
-            fore.classList.toggle('over', this.canResize);
-            fore.classList.toggle('resizing', this.canResize);
-            if (!this.canShrink && !fore.style.minWidth) {
-                const rect = fore.getBoundingClientRect();
-                fore.style.minWidth = rect.width + 'px';
-                fore.style.minHeight = rect.height + 'px';
-            }
-        });
-        back.addEventListener('mousedown', (event) => {
-            this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
-            this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
-            fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
-        });
-        fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
-        fore.addEventListener('mouseout', () => fore.classList.remove('over'));
-        window.addEventListener('mousemove', (event) => {
-            const rect = fore.getBoundingClientRect();
-            if (fore.classList.contains('resizing')) {
-                const adjust = 5;
-                fore.style.width = adjust + event.pageX - rect.x + 'px';
-                fore.style.height = adjust + event.pageY - rect.y + 'px';
-            }
-            else if (this.canMove && this._drag === 'fore' && this._coords) {
-                const backRect = back.getBoundingClientRect();
-                const deltaW = backRect.width - window.innerWidth;
-                const deltaH = backRect.height - window.innerHeight;
-                const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
-                const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
-                const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
-                const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
-                fore.style.top = fore.style.left = '0';
-                fore.style.transform = `translate(${x_css}, ${y_css})`;
-            }
-        });
-        window.addEventListener('mouseup', () => {
-            this._drag = null;
-            fore.classList.remove('moving', 'resizing');
-        });
-        back.addEventListener('mouseup', (event) => {
-            if (this._drag === 'back' && event.target === back)
-                this.dismiss();
-            this._drag = null;
-            fore.classList.remove('moving', 'resizing');
-        });
-        fore.addEventListener('transitionend', (event) => {
-            if (event.propertyName === 'transform') {
-                if (back.classList.contains('open')) {
-                    fore.classList.add('ready');
-                }
-                else
-                    this.resetOffscreenPosition(fore);
-            }
-        });
-    }
-    close() {
-        this.removeAttribute('open');
-    }
-    open() {
-        this.setAttribute('open', '');
-    }
-    wrap(selectorOrElem) {
-        const target = typeof selectorOrElem.append === 'function'
-            ? selectorOrElem
-            : document.querySelector(selectorOrElem + '');
-        this.appendChild(target);
-    }
-    confirm() {
-        const doCheck = !!this.confirmCallback;
-        const proceed = !doCheck || this.confirmCallback();
-        if (doCheck)
-            this.fire(proceed ? 'confirmaccept' : 'confirmreject');
-        if (proceed)
-            this.close();
-    }
-    dismiss() {
-        const doCheck = !!this.dismissCallback;
-        const proceed = !doCheck || this.dismissCallback();
-        if (doCheck)
-            this.fire(proceed ? 'dismissaccept' : 'dismissreject');
-        if (proceed)
-            this.close();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case 'open':
-                const back = this.root.querySelector('.back');
-                const fore = back.querySelector('.fore');
-                const doOpen = !!newValue || typeof newValue === 'string';
-                fore.classList.remove('ready', 'moving');
-                fore.style.transform = doOpen
-                    ? 'translate(-50%, -50%)'
-                    : fore.style.transform + ' translateY(-100vh)';
-                fore.classList.toggle('resize', this.canResize);
-                fore.classList.toggle('no-close', !this.canClose);
-                back.classList.toggle('open', doOpen);
-                if (doOpen) {
-                    fore.style.minWidth = fore.style.width = '';
-                    fore.style.minHeight = fore.style.height = '';
-                }
-                this.fire(doOpen ? 'open' : 'close');
-                break;
-        }
-    }
-    connectedCallback() {
-        const back = this.root.querySelector('.back');
-        const fore = back.querySelector('.fore');
-        if (back.classList.contains('open')) {
-            fore.classList.add('ready');
-        }
-    }
-    resetOffscreenPosition(fore) {
-        fore.style.left = '50%';
-        fore.style.top = '50%';
-        fore.style.transform = 'translate(-50%, -100vh)';
-    }
-    /** Emits a new event. */
-    fire(event, detail) {
-        this.dispatchEvent(new CustomEvent(event, { detail }));
-    }
-}
-Popup.observedAttributes = ['open'];
-Popup.Css = custElems.reduceCss(custElems.decode(stylesUrl));
-Popup.Html = custElems.reduceHtml(custElems.decode(markupUrl));
-
-if ('customElements' in window) {
-    window.customElements.define('ne14-pop', Popup);
-}
-
-exports.Popup = Popup;

package/dist/ne14_pop.esm.min.js

@@ -1,157 +0,0 @@
-import { reduceCss, decode, reduceHtml, CustomElementBase } from '@ne1410s/cust-elems';
-
-var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
-
-var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOg0KICAgIGJveC1zaGFkb3cgMC4zcywNCiAgICBiYWNrZ3JvdW5kLWNvbG9yIDAuM3M7DQp9DQouZm9yZS5vdmVyIHsNCiAgY3Vyc29yOiBtb3ZlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOw0KfQ0KLmZvcmUubW92aW5nIHsNCiAgY3Vyc29yOiBjcm9zc2hhaXI7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjMwLCAyMzAsIDIzMCwgMSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KLmZvcmUub3ZlciwNCi5mb3JlLm1vdmluZyB7DQogIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwLjVlbSBibGFjayAhaW1wb3J0YW50Ow0KfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07DQogIG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07DQogIG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOw0KICBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzOw0KICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTsNCiAgYm94LXNoYWRvdzogdmFyKC0tYm94LXNoYWRvdyk7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjMpOw0KfQ0KLmZvcmUubm8tY2xvc2Ugew0KICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxZW0pOw0KICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMWVtKTsNCn0NCi5mb3JlLm5vLWNsb3NlIC5jbG9zZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuY2xvc2Ugew0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRvcDogLTZweDsNCiAgcmlnaHQ6IDA7DQogIHBhZGRpbmc6IDAuMmVtOw0KfQ0KLmZvcmU6bm90KC5yZXNpemUpIC5zZS1yZXNpemUgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7DQogIGN1cnNvcjogc2UtcmVzaXplOw0KICBib3R0b206IC05cHg7DQogIHJpZ2h0OiAtNHB4Ow0KfQ0K";
-
-class Popup extends CustomElementBase {
-    get canMove() {
-        return this.hasAttribute('move');
-    }
-    get canResize() {
-        return this.hasAttribute('resize');
-    }
-    get canShrink() {
-        return this.canResize && this.hasAttribute('shrink');
-    }
-    get canClose() {
-        return !this.hasAttribute('no-close');
-    }
-    constructor() {
-        super(Popup.Css, Popup.Html);
-        const back = this.root.querySelector('.back');
-        const fore = back.querySelector('.fore');
-        const resizer = fore.querySelector('.se-resize');
-        const closer = fore.querySelector('.close');
-        this.resetOffscreenPosition(fore);
-        closer.addEventListener('click', () => this.close());
-        resizer.addEventListener('mousedown', () => {
-            fore.classList.toggle('over', this.canResize);
-            fore.classList.toggle('resizing', this.canResize);
-            if (!this.canShrink && !fore.style.minWidth) {
-                const rect = fore.getBoundingClientRect();
-                fore.style.minWidth = rect.width + 'px';
-                fore.style.minHeight = rect.height + 'px';
-            }
-        });
-        back.addEventListener('mousedown', (event) => {
-            this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
-            this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
-            fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
-        });
-        fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
-        fore.addEventListener('mouseout', () => fore.classList.remove('over'));
-        window.addEventListener('mousemove', (event) => {
-            const rect = fore.getBoundingClientRect();
-            if (fore.classList.contains('resizing')) {
-                const adjust = 5;
-                fore.style.width = adjust + event.pageX - rect.x + 'px';
-                fore.style.height = adjust + event.pageY - rect.y + 'px';
-            }
-            else if (this.canMove && this._drag === 'fore' && this._coords) {
-                const backRect = back.getBoundingClientRect();
-                const deltaW = backRect.width - window.innerWidth;
-                const deltaH = backRect.height - window.innerHeight;
-                const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
-                const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
-                const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
-                const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
-                fore.style.top = fore.style.left = '0';
-                fore.style.transform = `translate(${x_css}, ${y_css})`;
-            }
-        });
-        window.addEventListener('mouseup', () => {
-            this._drag = null;
-            fore.classList.remove('moving', 'resizing');
-        });
-        back.addEventListener('mouseup', (event) => {
-            if (this._drag === 'back' && event.target === back)
-                this.dismiss();
-            this._drag = null;
-            fore.classList.remove('moving', 'resizing');
-        });
-        fore.addEventListener('transitionend', (event) => {
-            if (event.propertyName === 'transform') {
-                if (back.classList.contains('open')) {
-                    fore.classList.add('ready');
-                }
-                else
-                    this.resetOffscreenPosition(fore);
-            }
-        });
-    }
-    close() {
-        this.removeAttribute('open');
-    }
-    open() {
-        this.setAttribute('open', '');
-    }
-    wrap(selectorOrElem) {
-        const target = typeof selectorOrElem.append === 'function'
-            ? selectorOrElem
-            : document.querySelector(selectorOrElem + '');
-        this.appendChild(target);
-    }
-    confirm() {
-        const doCheck = !!this.confirmCallback;
-        const proceed = !doCheck || this.confirmCallback();
-        if (doCheck)
-            this.fire(proceed ? 'confirmaccept' : 'confirmreject');
-        if (proceed)
-            this.close();
-    }
-    dismiss() {
-        const doCheck = !!this.dismissCallback;
-        const proceed = !doCheck || this.dismissCallback();
-        if (doCheck)
-            this.fire(proceed ? 'dismissaccept' : 'dismissreject');
-        if (proceed)
-            this.close();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case 'open':
-                const back = this.root.querySelector('.back');
-                const fore = back.querySelector('.fore');
-                const doOpen = !!newValue || typeof newValue === 'string';
-                fore.classList.remove('ready', 'moving');
-                fore.style.transform = doOpen
-                    ? 'translate(-50%, -50%)'
-                    : fore.style.transform + ' translateY(-100vh)';
-                fore.classList.toggle('resize', this.canResize);
-                fore.classList.toggle('no-close', !this.canClose);
-                back.classList.toggle('open', doOpen);
-                if (doOpen) {
-                    fore.style.minWidth = fore.style.width = '';
-                    fore.style.minHeight = fore.style.height = '';
-                }
-                this.fire(doOpen ? 'open' : 'close');
-                break;
-        }
-    }
-    connectedCallback() {
-        const back = this.root.querySelector('.back');
-        const fore = back.querySelector('.fore');
-        if (back.classList.contains('open')) {
-            fore.classList.add('ready');
-        }
-    }
-    resetOffscreenPosition(fore) {
-        fore.style.left = '50%';
-        fore.style.top = '50%';
-        fore.style.transform = 'translate(-50%, -100vh)';
-    }
-    /** Emits a new event. */
-    fire(event, detail) {
-        this.dispatchEvent(new CustomEvent(event, { detail }));
-    }
-}
-Popup.observedAttributes = ['open'];
-Popup.Css = reduceCss(decode(stylesUrl));
-Popup.Html = reduceHtml(decode(markupUrl));
-
-if ('customElements' in window) {
-    window.customElements.define('ne14-pop', Popup);
-}
-
-export { Popup };

package/dist/ne14_pop.umd.min.js

@@ -1,188 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ne_pop = {}));
-})(this, (function (exports) { 'use strict';
-
-    class CustomElementBase extends HTMLElement {
-        constructor(css, html, mode = 'closed') {
-            super();
-            this.root = this.attachShadow({ mode });
-            this.root.innerHTML = html;
-            const style = document.createElement('style');
-            style.textContent = css;
-            this.root.appendChild(style);
-        }
-    }
-
-    function decode(b64) {
-        const bIndex = (b64 + '').indexOf('base64,');
-        return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
-    }
-    function reduceCss(cssIn) {
-        return cssIn
-            .replace(/\s+/g, ' ')
-            .replace(/([,{}:;])\s/g, '$1')
-            .replace(/\s([{])/g, '$1');
-    }
-    function reduceHtml(htmlIn) {
-        return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
-    }
-
-    var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
-
-    var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOg0KICAgIGJveC1zaGFkb3cgMC4zcywNCiAgICBiYWNrZ3JvdW5kLWNvbG9yIDAuM3M7DQp9DQouZm9yZS5vdmVyIHsNCiAgY3Vyc29yOiBtb3ZlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOw0KfQ0KLmZvcmUubW92aW5nIHsNCiAgY3Vyc29yOiBjcm9zc2hhaXI7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjMwLCAyMzAsIDIzMCwgMSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KLmZvcmUub3ZlciwNCi5mb3JlLm1vdmluZyB7DQogIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwLjVlbSBibGFjayAhaW1wb3J0YW50Ow0KfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07DQogIG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07DQogIG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOw0KICBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzOw0KICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTsNCiAgYm94LXNoYWRvdzogdmFyKC0tYm94LXNoYWRvdyk7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjMpOw0KfQ0KLmZvcmUubm8tY2xvc2Ugew0KICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxZW0pOw0KICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMWVtKTsNCn0NCi5mb3JlLm5vLWNsb3NlIC5jbG9zZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuY2xvc2Ugew0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRvcDogLTZweDsNCiAgcmlnaHQ6IDA7DQogIHBhZGRpbmc6IDAuMmVtOw0KfQ0KLmZvcmU6bm90KC5yZXNpemUpIC5zZS1yZXNpemUgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7DQogIGN1cnNvcjogc2UtcmVzaXplOw0KICBib3R0b206IC05cHg7DQogIHJpZ2h0OiAtNHB4Ow0KfQ0K";
-
-    class Popup extends CustomElementBase {
-        get canMove() {
-            return this.hasAttribute('move');
-        }
-        get canResize() {
-            return this.hasAttribute('resize');
-        }
-        get canShrink() {
-            return this.canResize && this.hasAttribute('shrink');
-        }
-        get canClose() {
-            return !this.hasAttribute('no-close');
-        }
-        constructor() {
-            super(Popup.Css, Popup.Html);
-            const back = this.root.querySelector('.back');
-            const fore = back.querySelector('.fore');
-            const resizer = fore.querySelector('.se-resize');
-            const closer = fore.querySelector('.close');
-            this.resetOffscreenPosition(fore);
-            closer.addEventListener('click', () => this.close());
-            resizer.addEventListener('mousedown', () => {
-                fore.classList.toggle('over', this.canResize);
-                fore.classList.toggle('resizing', this.canResize);
-                if (!this.canShrink && !fore.style.minWidth) {
-                    const rect = fore.getBoundingClientRect();
-                    fore.style.minWidth = rect.width + 'px';
-                    fore.style.minHeight = rect.height + 'px';
-                }
-            });
-            back.addEventListener('mousedown', (event) => {
-                this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
-                this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
-                fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
-            });
-            fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
-            fore.addEventListener('mouseout', () => fore.classList.remove('over'));
-            window.addEventListener('mousemove', (event) => {
-                const rect = fore.getBoundingClientRect();
-                if (fore.classList.contains('resizing')) {
-                    const adjust = 5;
-                    fore.style.width = adjust + event.pageX - rect.x + 'px';
-                    fore.style.height = adjust + event.pageY - rect.y + 'px';
-                }
-                else if (this.canMove && this._drag === 'fore' && this._coords) {
-                    const backRect = back.getBoundingClientRect();
-                    const deltaW = backRect.width - window.innerWidth;
-                    const deltaH = backRect.height - window.innerHeight;
-                    const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
-                    const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
-                    const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
-                    const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
-                    fore.style.top = fore.style.left = '0';
-                    fore.style.transform = `translate(${x_css}, ${y_css})`;
-                }
-            });
-            window.addEventListener('mouseup', () => {
-                this._drag = null;
-                fore.classList.remove('moving', 'resizing');
-            });
-            back.addEventListener('mouseup', (event) => {
-                if (this._drag === 'back' && event.target === back)
-                    this.dismiss();
-                this._drag = null;
-                fore.classList.remove('moving', 'resizing');
-            });
-            fore.addEventListener('transitionend', (event) => {
-                if (event.propertyName === 'transform') {
-                    if (back.classList.contains('open')) {
-                        fore.classList.add('ready');
-                    }
-                    else
-                        this.resetOffscreenPosition(fore);
-                }
-            });
-        }
-        close() {
-            this.removeAttribute('open');
-        }
-        open() {
-            this.setAttribute('open', '');
-        }
-        wrap(selectorOrElem) {
-            const target = typeof selectorOrElem.append === 'function'
-                ? selectorOrElem
-                : document.querySelector(selectorOrElem + '');
-            this.appendChild(target);
-        }
-        confirm() {
-            const doCheck = !!this.confirmCallback;
-            const proceed = !doCheck || this.confirmCallback();
-            if (doCheck)
-                this.fire(proceed ? 'confirmaccept' : 'confirmreject');
-            if (proceed)
-                this.close();
-        }
-        dismiss() {
-            const doCheck = !!this.dismissCallback;
-            const proceed = !doCheck || this.dismissCallback();
-            if (doCheck)
-                this.fire(proceed ? 'dismissaccept' : 'dismissreject');
-            if (proceed)
-                this.close();
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            switch (name) {
-                case 'open':
-                    const back = this.root.querySelector('.back');
-                    const fore = back.querySelector('.fore');
-                    const doOpen = !!newValue || typeof newValue === 'string';
-                    fore.classList.remove('ready', 'moving');
-                    fore.style.transform = doOpen
-                        ? 'translate(-50%, -50%)'
-                        : fore.style.transform + ' translateY(-100vh)';
-                    fore.classList.toggle('resize', this.canResize);
-                    fore.classList.toggle('no-close', !this.canClose);
-                    back.classList.toggle('open', doOpen);
-                    if (doOpen) {
-                        fore.style.minWidth = fore.style.width = '';
-                        fore.style.minHeight = fore.style.height = '';
-                    }
-                    this.fire(doOpen ? 'open' : 'close');
-                    break;
-            }
-        }
-        connectedCallback() {
-            const back = this.root.querySelector('.back');
-            const fore = back.querySelector('.fore');
-            if (back.classList.contains('open')) {
-                fore.classList.add('ready');
-            }
-        }
-        resetOffscreenPosition(fore) {
-            fore.style.left = '50%';
-            fore.style.top = '50%';
-            fore.style.transform = 'translate(-50%, -100vh)';
-        }
-        /** Emits a new event. */
-        fire(event, detail) {
-            this.dispatchEvent(new CustomEvent(event, { detail }));
-        }
-    }
-    Popup.observedAttributes = ['open'];
-    Popup.Css = reduceCss(decode(stylesUrl));
-    Popup.Html = reduceHtml(decode(markupUrl));
-
-    if ('customElements' in window) {
-        window.customElements.define('ne14-pop', Popup);
-    }
-
-    exports.Popup = Popup;
-
-}));