@c2n/modal 0.0.6 → 0.0.8

package/dist/modal.js

@@ -1,8 +1,9 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { isServer } from "lit-html/is-server.js";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
-import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import { lockPageScroll, redispatchEvent } from "@c2n/core/dom-helper.js";
 //#region src/modal.scss?inline
 var modal_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: contents;\n}\n\n.c2-modal {\n  box-sizing: border-box;\n  width: var(--c2-modal--width,min(480px, calc(100vw - 32px)));\n  max-width: 100vw;\n  max-height: var(--c2-modal--max-height,calc(100vh - 64px));\n  margin-top: var(--c2-modal--margin-top,auto);\n  margin-bottom: var(--c2-modal--margin-bottom,auto);\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0;\n  border: var(--c2-modal--border,none);\n  border-top-left-radius: var(--c2-modal--border-top-left-radius,14px);\n  border-top-right-radius: var(--c2-modal--border-top-right-radius,14px);\n  border-bottom-left-radius: var(--c2-modal--border-bottom-left-radius,14px);\n  border-bottom-right-radius: var(--c2-modal--border-bottom-right-radius,14px);\n  background: var(--c2-modal--background,#ffffff);\n  color: var(--c2-modal--color,#18181b);\n  box-shadow: var(--c2-modal--box-shadow,0 24px 60px rgba(0, 0, 0, 0.25));\n  overflow: hidden;\n  opacity: 0;\n  transform: var(--c2-modal--enter-transform,translateY(12px) scale(0.98));\n  transition: opacity var(--c2-modal--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), transform var(--c2-modal--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), display var(--c2-modal--transition-duration,200ms) allow-discrete, overlay var(--c2-modal--transition-duration,200ms) allow-discrete;\n}\n.c2-modal[open] {\n  opacity: 1;\n  transform: none;\n}\n.c2-modal::backdrop {\n  background: var(--c2-modal__backdrop--background,rgba(9, 9, 11, 0.45));\n  backdrop-filter: var(--c2-modal__backdrop--backdrop-filter);\n  opacity: 0;\n  transition: opacity var(--c2-modal--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), display var(--c2-modal--transition-duration,200ms) allow-discrete, overlay var(--c2-modal--transition-duration,200ms) allow-discrete;\n}\n.c2-modal[open]::backdrop {\n  opacity: 1;\n}\n\n@starting-style {\n  .c2-modal[open] {\n    opacity: 0;\n    transform: var(--c2-modal--enter-transform,translateY(12px) scale(0.98));\n  }\n  .c2-modal[open]::backdrop {\n    opacity: 0;\n  }\n}\n.c2-modal__panel {\n  display: flex;\n  flex-direction: column;\n  max-height: var(--c2-modal--max-height,calc(100vh - 64px));\n  min-height: 0;\n}\n\n.c2-modal__header {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  flex: none;\n  padding-top: var(--c2-modal__header--padding-top,20px);\n  padding-right: var(--c2-modal__header--padding-right,20px);\n  padding-bottom: var(--c2-modal__header--padding-bottom,0px);\n  padding-left: var(--c2-modal__header--padding-left,24px);\n  border-bottom: var(--c2-modal__header--border-bottom);\n}\n.c2-modal__header[hidden] {\n  display: none;\n}\n\n.c2-modal__title {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--c2-modal__header--font-size,17px);\n  font-weight: var(--c2-modal__header--font-weight,600);\n  line-height: var(--c2-modal__header--line-height,1.35);\n  min-height: var(--c2-modal__close--size,32px);\n  display: flex;\n  align-items: center;\n}\n.c2-modal__title ::slotted(*) {\n  margin: 0;\n  font: inherit;\n}\n\n.c2-modal__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  box-sizing: border-box;\n  width: var(--c2-modal__close--size,32px);\n  height: var(--c2-modal__close--size,32px);\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--c2-modal__close--border-radius,8px);\n  background: transparent;\n  color: var(--c2-modal__close--color,#71717a);\n  cursor: pointer;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-modal__close svg,\n.c2-modal__close ::slotted(*) {\n  width: var(--c2-modal__close--icon-size,18px);\n  height: var(--c2-modal__close--icon-size,18px);\n}\n.c2-modal__close:hover {\n  background: var(--c2-modal__close__hover--background,#f4f4f5);\n  color: var(--c2-modal__close__hover--color,#18181b);\n}\n.c2-modal__close:focus-visible {\n  outline: var(--c2-modal__close__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: 1px;\n}\n\n.c2-modal__body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding-top: var(--c2-modal__body--padding-top,12px);\n  padding-right: var(--c2-modal__body--padding-right,24px);\n  padding-bottom: var(--c2-modal__body--padding-bottom,20px);\n  padding-left: var(--c2-modal__body--padding-left,24px);\n  font-size: var(--c2-modal__body--font-size,14px);\n  line-height: var(--c2-modal__body--line-height,1.6);\n  color: var(--c2-modal__body--color);\n}\n\n.c2-modal__footer {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: var(--c2-modal__footer--gap,8px);\n  justify-content: var(--c2-modal__footer--justify-content,flex-end);\n  padding-top: var(--c2-modal__footer--padding-top,0px);\n  padding-right: var(--c2-modal__footer--padding-right,24px);\n  padding-bottom: var(--c2-modal__footer--padding-bottom,20px);\n  padding-left: var(--c2-modal__footer--padding-left,24px);\n  border-top: var(--c2-modal__footer--border-top);\n}\n.c2-modal__footer[hidden] {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-modal,\n  .c2-modal::backdrop {\n    transition: none;\n  }\n}";
 //#endregion
@@ -15,8 +16,6 @@ function __decorate(decorators, target, key, desc) {
 }
 //#endregion
 //#region src/modal.ts
-var scrollLocks = 0;
-var previousOverflow = "";
 var Modal = class Modal extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -29,8 +28,8 @@ var Modal = class Modal extends LitElement {
 		this.returnValue = "";
 		this.hasTitle = false;
 		this.hasFooter = false;
-		this.locked = false;
-		this.handleDialogClose = () => {
+		this.handleDialogClose = (event) => {
+			if (event.target !== this.dialog) return;
 			this.returnValue = this.dialog.returnValue;
 			this.unlockScroll();
 			this.open = false;
@@ -41,6 +40,7 @@ var Modal = class Modal extends LitElement {
 			}));
 		};
 		this.handleDialogCancel = (event) => {
+			if (event.target !== this.dialog) return;
 			if (this.noEscape) {
 				event.preventDefault();
 				return;
@@ -69,17 +69,12 @@ var Modal = class Modal extends LitElement {
 		else this.open = false;
 	}
 	lockScroll() {
-		if (this.noScrollLock || this.locked || isServer) return;
-		if (scrollLocks++ === 0) {
-			previousOverflow = document.documentElement.style.overflow;
-			document.documentElement.style.overflow = "hidden";
-		}
-		this.locked = true;
+		if (this.noScrollLock || this.releaseScroll || isServer) return;
+		this.releaseScroll = lockPageScroll();
 	}
 	unlockScroll() {
-		if (!this.locked) return;
-		this.locked = false;
-		if (--scrollLocks === 0) document.documentElement.style.overflow = previousOverflow;
+		this.releaseScroll?.();
+		this.releaseScroll = void 0;
 	}
 	handleSlotChange(event) {
 		this.updateSlot(event.target);

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/modal",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/modal.js",
   "exports": {
     ".": {
-      "default": "./dist/modal.js",
-      "types": "./types/src/modal.d.ts"
+      "types": "./types/src/modal.d.ts",
+      "default": "./dist/modal.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "modal",
@@ -50,12 +62,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/modal. Import once, anywhere in the program:
+//
+//     import '@c2n/modal/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Modal } from '@c2n/modal'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-modal': C2Props<Modal>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/modal.d.ts

@@ -1,4 +1,17 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link Modal}, keyed for `addEventListener`. */
+export interface ModalEventMap {
+    open: Event;
+    close: CustomEvent<{
+        returnValue: string;
+    }>;
+    cancel: Event;
+}
+export interface Modal {
+    addEventListener: TypedAddEventListener<Modal, ModalEventMap>;
+    removeEventListener: TypedRemoveEventListener<Modal, ModalEventMap>;
+}
 /**
  * Modal dialog built on the native `<dialog>` element: focus is trapped and restored, Escape closes, the page behind
  * is inert and covered by a backdrop. Open it with the `open` attribute or `show()`, close it with `close(returnValue)`,
@@ -87,7 +100,7 @@ export declare class Modal extends LitElement {
     private hasTitle;
     private hasFooter;
     private dialog;
-    private locked;
+    private releaseScroll;
     disconnectedCallback(): void;
     /** Opens the dialog (modal). */
     show(): void;

package/types/src/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAU/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,yDAAyD;IACb,IAAI,UAAQ;IAExD,qDAAqD;IACzC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjD,yDAAyD;IACI,eAAe,UAAQ;IAEpF,qBAAqB;IACgC,QAAQ,UAAQ;IAErE,kCAAkC;IACmC,SAAS,UAAQ;IAEtF,0DAA0D;IACA,YAAY,UAAQ;IAE9E,wFAAwF;IACxF,WAAW,SAAK;IAEP,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,SAAS,CAAQ;IAEjB,OAAO,CAAC,MAAM,CAAoB;IAEnD,OAAO,CAAC,MAAM,CAAQ;IAEb,oBAAoB;IAK7B,gCAAgC;IAChC,IAAI;IAIJ,wDAAwD;IACxD,KAAK,CAAC,WAAW,SAAK;IAMtB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB,CAKxB;IAED,OAAO,CAAC,kBAAkB,CAMzB;IAED,OAAO,CAAC,iBAAiB,CAGxB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAMT,YAAY;IAIZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYrC,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAKhG,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,WAAW,CAAC;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC3C,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB,EAAE,qBAAqB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;IAC7D,mBAAmB,EAAE,wBAAwB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;CACpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,yDAAyD;IACb,IAAI,UAAQ;IAExD,qDAAqD;IACzC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjD,yDAAyD;IACI,eAAe,UAAQ;IAEpF,qBAAqB;IACgC,QAAQ,UAAQ;IAErE,kCAAkC;IACmC,SAAS,UAAQ;IAEtF,0DAA0D;IACA,YAAY,UAAQ;IAE9E,wFAAwF;IACxF,WAAW,SAAK;IAEP,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,SAAS,CAAQ;IAEjB,OAAO,CAAC,MAAM,CAAoB;IAEnD,OAAO,CAAC,aAAa,CAA0B;IAEtC,oBAAoB;IAK7B,gCAAgC;IAChC,IAAI;IAIJ,wDAAwD;IACxD,KAAK,CAAC,WAAW,SAAK;IAMtB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB,CAOxB;IAED,OAAO,CAAC,kBAAkB,CAOzB;IAED,OAAO,CAAC,iBAAiB,CAGxB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAMT,YAAY;IAIZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYrC,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}

package/vue.d.ts

@@ -0,0 +1,39 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/modal. Import once, anywhere in the program:
+//
+//     import '@c2n/modal/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Modal, ModalEventMap } from '@c2n/modal'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-modal': DefineComponent<
+      C2Props<Modal> & {
+        'no-backdrop-close'?: unknown
+        'no-escape'?: unknown
+        'hide-close'?: unknown
+        'no-scroll-lock'?: unknown
+        onOpen?: (event: ModalEventMap['open']) => void
+        onClose?: (event: ModalEventMap['close']) => void
+        onCancel?: (event: ModalEventMap['cancel']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}