@plusui/library 0.1.14 → 0.1.16

package/custom-elements.json

@@ -4356,27 +4356,31 @@
           "name": "PlusModal",
           "cssParts": [
             {
-              "description": "The main container element",
-              "name": "container"
+              "description": "The native dialog element",
+              "name": "dialog"
             },
             {
-              "description": "The overlay element",
-              "name": "overlay"
+              "description": "The container wrapper for centering and scrolling",
+              "name": "container"
             },
             {
-              "description": "The modal element",
+              "description": "The main modal box",
               "name": "modal"
             },
             {
-              "description": "The header element",
+              "description": "The header section",
               "name": "header"
             },
             {
-              "description": "The body element",
+              "description": "The content wrapper inside header",
+              "name": "header-content"
+            },
+            {
+              "description": "The main content area",
               "name": "body"
             },
             {
-              "description": "The footer element",
+              "description": "The footer section",
               "name": "footer"
             },
             {
@@ -4385,12 +4389,16 @@
             }
           ],
           "slots": [
+            {
+              "description": "Main content area (same as body slot)",
+              "name": ""
+            },
             {
               "description": "The header content of the modal",
               "name": "header"
             },
             {
-              "description": "The main content of the modal",
+              "description": "The main content of the modal (alternative to default slot)",
               "name": "body"
             },
             {
@@ -4403,6 +4411,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "dialogRef",
+              "type": {
+                "text": "HTMLDialogElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -4414,6 +4430,17 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'center' | 'top'"
+              },
+              "default": "'center'",
+              "description": "The placement of the modal on the screen",
+              "attribute": "placement",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "isOpen",
@@ -4436,6 +4463,28 @@
               "attribute": "full-width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "fullScreen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the modal take the full screen (100vw x 100vh, no border radius)",
+              "attribute": "full-screen",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "backdrop",
+              "type": {
+                "text": "boolean | 'static'"
+              },
+              "default": "true",
+              "description": "Controls backdrop behavior\n- true: Shows backdrop, modal can be closed by clicking outside\n- false: No backdrop\n- 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)",
+              "attribute": "backdrop",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "closeOnBackdrop",
@@ -4458,6 +4507,28 @@
               "attribute": "close-on-esc",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the header section completely",
+              "attribute": "no-header",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "noFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the footer section completely",
+              "attribute": "no-footer",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "animationDuration",
@@ -4480,42 +4551,89 @@
             },
             {
               "kind": "field",
-              "name": "keydownHandler",
+              "name": "shake",
               "type": {
-                "text": "(e: KeyboardEvent) => void"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Hides the modal with animation",
+              "name": "show",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
-              }
+              },
+              "description": "Shows the modal with animation"
             },
             {
               "kind": "method",
-              "name": "handleBeforeHide",
-              "privacy": "private"
+              "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Hides the modal with animation"
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Shows the modal with animation",
+              "name": "toggle",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
-              }
+              },
+              "description": "Toggles the modal open/closed state"
             },
             {
               "kind": "method",
-              "name": "handleBeforeShow",
+              "name": "handleOpenChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCloseChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleBeforeOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBeforeClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBackdropClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDialogCancel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleKeydown",
@@ -4531,7 +4649,7 @@
             },
             {
               "kind": "method",
-              "name": "handleBackdropClick",
+              "name": "handleClick",
               "privacy": "private",
               "parameters": [
                 {
@@ -4542,6 +4660,16 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "shakeModal",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getModalStyle",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "emit",
@@ -4566,6 +4694,24 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "Emitted after the modal has opened",
+              "name": "plus-modal-open"
+            },
+            {
+              "description": "Emitted after the modal has closed",
+              "name": "plus-modal-close"
+            },
+            {
+              "description": "Emitted before the modal opens (cancelable)",
+              "name": "plus-modal-before-open"
+            },
+            {
+              "description": "Emitted before the modal closes (cancelable)",
+              "name": "plus-modal-before-close"
+            }
+          ],
           "attributes": [
             {
               "name": "size",
@@ -4578,6 +4724,17 @@
               "attribute": "size",
               "propName": "size"
             },
+            {
+              "name": "placement",
+              "type": {
+                "text": "'center' | 'top'"
+              },
+              "default": "'center'",
+              "description": "The placement of the modal on the screen",
+              "fieldName": "placement",
+              "attribute": "placement",
+              "propName": "placement"
+            },
             {
               "name": "is-open",
               "type": {
@@ -4600,6 +4757,28 @@
               "attribute": "full-width",
               "propName": "fullWidth"
             },
+            {
+              "name": "full-screen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the modal take the full screen (100vw x 100vh, no border radius)",
+              "fieldName": "fullScreen",
+              "attribute": "full-screen",
+              "propName": "fullScreen"
+            },
+            {
+              "name": "backdrop",
+              "type": {
+                "text": "boolean | 'static'"
+              },
+              "default": "true",
+              "description": "Controls backdrop behavior\n- true: Shows backdrop, modal can be closed by clicking outside\n- false: No backdrop\n- 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)",
+              "fieldName": "backdrop",
+              "attribute": "backdrop",
+              "propName": "backdrop"
+            },
             {
               "name": "close-on-backdrop",
               "type": {
@@ -4622,6 +4801,28 @@
               "attribute": "close-on-esc",
               "propName": "closeOnEsc"
             },
+            {
+              "name": "no-header",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the header section completely",
+              "fieldName": "noHeader",
+              "attribute": "no-header",
+              "propName": "noHeader"
+            },
+            {
+              "name": "no-footer",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the footer section completely",
+              "fieldName": "noFooter",
+              "attribute": "no-footer",
+              "propName": "noFooter"
+            },
             {
               "name": "animation-duration",
               "type": {
@@ -4640,7 +4841,7 @@
           },
           "tagName": "plus-modal",
           "customElement": true,
-          "summary": "Modal dialog component that appears on top of the page content."
+          "summary": "Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management."
         }
       ],
       "exports": [

package/dist/components/modal/index.js

@@ -2,6 +2,10 @@ import PlusModal from './modal.js';
 import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../../state-D1d5Sfj8.js';
+import '../../query-CHb9Ft_d.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
 import '../../utils/boolean-converter.js';
 import './modal.style.js';
 import '../../index-B9iart53.js';

package/dist/components/modal/modal.d.ts

@@ -1,40 +1,70 @@
 import Tailwind from '../base/tailwind-base';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ModalPlacement = 'center' | 'top';
 /**
  * @tag plus-modal
- * @summary Modal dialog component that appears on top of the page content.
+ * @summary Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
  *
+ * @slot - Main content area (same as body slot)
  * @slot header - The header content of the modal
- * @slot body - The main content of the modal
+ * @slot body - The main content of the modal (alternative to default slot)
  * @slot footer - The footer content of the modal
  * @slot close - Custom close button (defaults to an X icon)
  *
- * @csspart container - The main container element
- * @csspart overlay - The overlay element
- * @csspart modal - The modal element
- * @csspart header - The header element
- * @csspart body - The body element
- * @csspart footer - The footer element
+ * @csspart dialog - The native dialog element
+ * @csspart container - The container wrapper for centering and scrolling
+ * @csspart modal - The main modal box
+ * @csspart header - The header section
+ * @csspart header-content - The content wrapper inside header
+ * @csspart body - The main content area
+ * @csspart footer - The footer section
  * @csspart close-button - The close button element
  *
+ * @event plus-modal-open - Emitted after the modal has opened
+ * @event plus-modal-close - Emitted after the modal has closed
+ * @event plus-modal-before-open - Emitted before the modal opens (cancelable)
+ * @event plus-modal-before-close - Emitted before the modal closes (cancelable)
+ *
  * @example
  * ```html
- * <plus-modal>
+ * <!-- Basic usage -->
+ * <plus-modal is-open>
  *   <div slot="header">Modal Title</div>
  *   <div slot="body">Modal Content</div>
  *   <div slot="footer">
- *     <button>Save</button>
+ *     <button data-dismiss>Close</button>
  *   </div>
  * </plus-modal>
+ *
+ * <!-- Full screen modal -->
+ * <plus-modal full-screen>
+ *   <div slot="header">Full Screen</div>
+ *   <p>Content here</p>
+ * </plus-modal>
+ *
+ * <!-- Static backdrop (shake on outside click) -->
+ * <plus-modal backdrop="static">
+ *   <div slot="header">Can't Close Outside</div>
+ *   <p>Must use close button</p>
+ * </plus-modal>
  * ```
  */
 export default class PlusModal extends Tailwind {
+    private dialogRef?;
     /**
      * The size of the modal
      * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
      * @default 'md'
      * @attr size
      */
-    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    size: ModalSize;
+    /**
+     * The placement of the modal on the screen
+     * @type {'center' | 'top'}
+     * @default 'center'
+     * @attr placement
+     */
+    placement: ModalPlacement;
     /**
      * Whether the modal is open
      * @type {boolean}
@@ -49,6 +79,23 @@ export default class PlusModal extends Tailwind {
      * @attr full-width
      */
     fullWidth: boolean;
+    /**
+     * Makes the modal take the full screen (100vw x 100vh, no border radius)
+     * @type {boolean}
+     * @default false
+     * @attr full-screen
+     */
+    fullScreen: boolean;
+    /**
+     * Controls backdrop behavior
+     * - true: Shows backdrop, modal can be closed by clicking outside
+     * - false: No backdrop
+     * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+     * @type {boolean | 'static'}
+     * @default true
+     * @attr backdrop
+     */
+    backdrop: boolean | 'static';
     /**
      * Whether the modal should close when clicking the backdrop
      * @type {boolean}
@@ -63,6 +110,20 @@ export default class PlusModal extends Tailwind {
      * @attr close-on-esc
      */
     closeOnEsc: boolean;
+    /**
+     * Hides the header section completely
+     * @type {boolean}
+     * @default false
+     * @attr no-header
+     */
+    noHeader: boolean;
+    /**
+     * Hides the footer section completely
+     * @type {boolean}
+     * @default false
+     * @attr no-footer
+     */
+    noFooter: boolean;
     /**
      * The duration of the animation in milliseconds
      * @type {number}
@@ -71,24 +132,36 @@ export default class PlusModal extends Tailwind {
      */
     animationDuration: number;
     private isAnimating;
-    private keydownHandler;
-    constructor();
+    private shake;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Shows the modal with animation
+     * @returns {Promise<void>}
+     */
+    show(): Promise<void>;
     /**
      * Hides the modal with animation
-     * @returns {void}
+     * @returns {Promise<void>}
      */
-    hide(): void;
-    private handleBeforeHide;
+    hide(): Promise<void>;
     /**
-     * Shows the modal with animation
-     * @returns {void}
+     * Toggles the modal open/closed state
+     * @returns {Promise<void>}
      */
-    show(): void;
-    private handleBeforeShow;
-    disconnectedCallback(): void;
-    private handleKeydown;
+    toggle(): Promise<void>;
+    private handleOpenChange;
+    private handleCloseChange;
+    private handleBeforeOpen;
+    private handleBeforeClose;
     private handleBackdropClick;
+    private handleDialogCancel;
+    private handleKeydown;
+    private handleClick;
+    private shakeModal;
+    private getModalStyle;
     render(): import("lit-html").TemplateResult<1>;
 }
 export { PlusModal };

package/dist/components/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAIA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,QAAQ;IAC7C;;;;;OAKG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAExD;;;;;OAKG;IAOH,MAAM,UAAS;IAEf;;;;;OAKG;IAOH,SAAS,UAAS;IAElB;;;;;OAKG;IAOH,eAAe,UAAQ;IAEvB;;;;;OAKG;IAOH,UAAU,UAAQ;IAElB;;;;;OAKG;IAEH,iBAAiB,SAAO;IAGxB,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,cAAc,CAA6B;;IAO1C,iBAAiB;IAM1B;;;OAGG;IACH,IAAI;IAKJ,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,IAAI;IAKJ,OAAO,CAAC,gBAAgB;IAkBf,oBAAoB;IAO7B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAOlB,MAAM;CAsDhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAKA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,QAAQ;IAE7C,OAAO,CAAC,SAAS,CAAC,CAAoB;IAEtC;;;;;OAKG;IAEH,IAAI,EAAE,SAAS,CAAQ;IAEvB;;;;;OAKG;IAEH,SAAS,EAAE,cAAc,CAAY;IAErC;;;;;OAKG;IAOH,MAAM,UAAS;IAEf;;;;;OAKG;IAOH,SAAS,UAAS;IAElB;;;;;OAKG;IAOH,UAAU,UAAS;IAEnB;;;;;;;;OAQG;IAEH,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAQ;IAEpC;;;;;OAKG;IAOH,eAAe,UAAQ;IAEvB;;;;;OAKG;IAOH,UAAU,UAAQ;IAElB;;;;;OAKG;IAOH,QAAQ,UAAS;IAEjB;;;;;OAKG;IAOH,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,iBAAiB,SAAO;IAGxB,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,KAAK,CAAS;IAEb,iBAAiB;IAMjB,oBAAoB;IASpB,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYxD;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3B;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3B;;;OAGG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;YAQf,gBAAgB;YAmBhB,iBAAiB;IAmB/B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAiCZ,MAAM;CA2EhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}