@plusui/library 0.1.14 → 0.1.16

package/react/PlusModal.d.ts

@@ -25,15 +25,33 @@ export interface PlusModalProps
   /** Whether the modal should take full width */
   fullWidth?: boolean;
 
+  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
+  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) */
+  backdrop?: boolean | "static";
+
   /** Whether the modal should close when clicking the backdrop */
   closeOnBackdrop?: boolean;
 
   /** Whether the modal should close when pressing the Escape key */
   closeOnEsc?: boolean;
 
+  /** Hides the header section completely */
+  noHeader?: boolean;
+
+  /** Hides the footer section completely */
+  noFooter?: boolean;
+
   /** The size of the modal */
   size?: PlusModalElement["size"];
 
+  /** The placement of the modal on the screen */
+  placement?: PlusModalElement["placement"];
+
   /** The duration of the animation in milliseconds */
   animationDuration?: PlusModalElement["animationDuration"];
 
@@ -57,30 +75,51 @@ export interface PlusModalProps
 
   /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
   tabIndex?: number;
+
+  /** Emitted after the modal has opened */
+  onPlusModalOpen?: (event: CustomEvent) => void;
+
+  /** Emitted after the modal has closed */
+  onPlusModalClose?: (event: CustomEvent) => void;
+
+  /** Emitted before the modal opens (cancelable) */
+  onPlusModalBeforeOpen?: (event: CustomEvent) => void;
+
+  /** Emitted before the modal closes (cancelable) */
+  onPlusModalBeforeClose?: (event: CustomEvent) => void;
 }
 
 /**
- * Modal dialog component that appears on top of the page content.
+ * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
  * ---
  *
  *
+ * ### **Events:**
+ *  - **plus-modal-open** - Emitted after the modal has opened
+ * - **plus-modal-close** - Emitted after the modal has closed
+ * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
+ * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
+ *
  * ### **Methods:**
- *  - **hide(): _void_** - Hides the modal with animation
- * - **show(): _void_** - Shows the modal with animation
+ *  - **show(): _Promise<void>_** - Shows the modal with animation
+ * - **hide(): _Promise<void>_** - Hides the modal with animation
+ * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
  *
  * ### **Slots:**
- *  - **header** - The header content of the modal
- * - **body** - The main content of the modal
+ *  - _default_ - Main content area (same as body slot)
+ * - **header** - The header content of the modal
+ * - **body** - The main content of the modal (alternative to default slot)
  * - **footer** - The footer content of the modal
  * - **close** - Custom close button (defaults to an X icon)
  *
  * ### **CSS Parts:**
- *  - **container** - The main container element
- * - **overlay** - The overlay element
- * - **modal** - The modal element
- * - **header** - The header element
- * - **body** - The body element
- * - **footer** - The footer element
+ *  - **dialog** - The native dialog element
+ * - **container** - The container wrapper for centering and scrolling
+ * - **modal** - The main modal box
+ * - **header** - The header section
+ * - **header-content** - The content wrapper inside header
+ * - **body** - The main content area
+ * - **footer** - The footer section
  * - **close-button** - The close button element
  */
 export const PlusModal: React.ForwardRefExoticComponent<PlusModalProps>;

package/react/PlusModal.js

@@ -1,28 +1,53 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/modal/index.js";
+import { useEventListener } from "./react-utils.js";
 
 export const PlusModal = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
   const {
     isOpen,
     fullWidth,
+    fullScreen,
+    backdrop,
     closeOnBackdrop,
     closeOnEsc,
+    noHeader,
+    noFooter,
     size,
+    placement,
     animationDuration,
     ...filteredProps
   } = props;
 
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-modal-open", props.onPlusModalOpen);
+  useEventListener(ref, "plus-modal-close", props.onPlusModalClose);
+  useEventListener(ref, "plus-modal-before-open", props.onPlusModalBeforeOpen);
+  useEventListener(
+    ref,
+    "plus-modal-before-close",
+    props.onPlusModalBeforeClose,
+  );
+
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ({
-    hide: () => ref.current.hide(),
     show: () => ref.current.show(),
+    hide: () => ref.current.hide(),
+    toggle: () => ref.current.toggle(),
   }));
 
   return React.createElement(
     "plus-modal",
     {
+      ref,
       ...filteredProps,
       size: props.size,
+      placement: props.placement,
       "animation-duration":
         props.animationDuration || props["animation-duration"],
       class: props.className,
@@ -32,8 +57,12 @@ export const PlusModal = forwardRef((props, forwardedRef) => {
       tabindex: props.tabIndex,
       "is-open": props.isOpen ? "" : undefined,
       "full-width": props.fullWidth ? "" : undefined,
+      "full-screen": props.fullScreen ? "" : undefined,
+      backdrop: props.backdrop ? "" : undefined,
       "close-on-backdrop": props.closeOnBackdrop ? "" : undefined,
       "close-on-esc": props.closeOnEsc ? "" : undefined,
+      "no-header": props.noHeader ? "" : undefined,
+      "no-footer": props.noFooter ? "" : undefined,
       style: { ...props.style },
     },
     props.children,

package/types/custom-element-jsx.d.ts

@@ -414,16 +414,38 @@ export type PlusRadioGroupProps = {
 export type PlusModalProps = {
   /** The size of the modal */
   size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  /** The placement of the modal on the screen */
+  placement?: "center" | "top";
   /** Whether the modal is open */
   "is-open"?: boolean;
   /** Whether the modal should take full width */
   "full-width"?: boolean;
+  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
+  "full-screen"?: 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) */
+  backdrop?: boolean | "static";
   /** Whether the modal should close when clicking the backdrop */
   "close-on-backdrop"?: boolean;
   /** Whether the modal should close when pressing the Escape key */
   "close-on-esc"?: boolean;
+  /** Hides the header section completely */
+  "no-header"?: boolean;
+  /** Hides the footer section completely */
+  "no-footer"?: boolean;
   /** The duration of the animation in milliseconds */
   "animation-duration"?: number;
+
+  /** Emitted after the modal has opened */
+  "onplus-modal-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the modal has closed */
+  "onplus-modal-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal opens (cancelable) */
+  "onplus-modal-before-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal closes (cancelable) */
+  "onplus-modal-before-close"?: (e: CustomEvent<never>) => void;
 };
 
 export type PlusDrawerProps = {
@@ -1330,27 +1352,36 @@ export type CustomElements = {
   "plus-radio-group": Partial<PlusRadioGroupProps & BaseProps & BaseEvents>;
 
   /**
-   * Modal dialog component that appears on top of the page content.
+   * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **plus-modal-open** - Emitted after the modal has opened
+   * - **plus-modal-close** - Emitted after the modal has closed
+   * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
+   * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
+   *
    * ### **Methods:**
-   *  - **hide(): _void_** - Hides the modal with animation
-   * - **show(): _void_** - Shows the modal with animation
+   *  - **show(): _Promise<void>_** - Shows the modal with animation
+   * - **hide(): _Promise<void>_** - Hides the modal with animation
+   * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
    *
    * ### **Slots:**
-   *  - **header** - The header content of the modal
-   * - **body** - The main content of the modal
+   *  - _default_ - Main content area (same as body slot)
+   * - **header** - The header content of the modal
+   * - **body** - The main content of the modal (alternative to default slot)
    * - **footer** - The footer content of the modal
    * - **close** - Custom close button (defaults to an X icon)
    *
    * ### **CSS Parts:**
-   *  - **container** - The main container element
-   * - **overlay** - The overlay element
-   * - **modal** - The modal element
-   * - **header** - The header element
-   * - **body** - The body element
-   * - **footer** - The footer element
+   *  - **dialog** - The native dialog element
+   * - **container** - The container wrapper for centering and scrolling
+   * - **modal** - The main modal box
+   * - **header** - The header section
+   * - **header-content** - The content wrapper inside header
+   * - **body** - The main content area
+   * - **footer** - The footer section
    * - **close-button** - The close button element
    */
   "plus-modal": Partial<PlusModalProps & BaseProps & BaseEvents>;

package/types/custom-element-solidjs.d.ts

@@ -442,16 +442,38 @@ type PlusRadioGroupProps = {
 type PlusModalProps = {
   /** The size of the modal */
   size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  /** The placement of the modal on the screen */
+  placement?: "center" | "top";
   /** Whether the modal is open */
   "is-open"?: boolean;
   /** Whether the modal should take full width */
   "full-width"?: boolean;
+  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
+  "full-screen"?: 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) */
+  backdrop?: boolean | "static";
   /** Whether the modal should close when clicking the backdrop */
   "close-on-backdrop"?: boolean;
   /** Whether the modal should close when pressing the Escape key */
   "close-on-esc"?: boolean;
+  /** Hides the header section completely */
+  "no-header"?: boolean;
+  /** Hides the footer section completely */
+  "no-footer"?: boolean;
   /** The duration of the animation in milliseconds */
   "animation-duration"?: number;
+
+  /** Emitted after the modal has opened */
+  "on:plus-modal-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the modal has closed */
+  "on:plus-modal-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal opens (cancelable) */
+  "on:plus-modal-before-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal closes (cancelable) */
+  "on:plus-modal-before-close"?: (e: CustomEvent<never>) => void;
 } & JSX.DirectiveFunctionAttributes<PlusModal> &
   JSX.OnAttributes<PlusModal> &
   JSX.OnCaptureAttributes<PlusModal>;
@@ -1414,27 +1436,36 @@ export type CustomElements = {
   "plus-radio-group": Partial<PlusRadioGroupProps & BaseProps & BaseEvents>;
 
   /**
-   * Modal dialog component that appears on top of the page content.
+   * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **plus-modal-open** - Emitted after the modal has opened
+   * - **plus-modal-close** - Emitted after the modal has closed
+   * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
+   * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
+   *
    * ### **Methods:**
-   *  - **hide(): _void_** - Hides the modal with animation
-   * - **show(): _void_** - Shows the modal with animation
+   *  - **show(): _Promise<void>_** - Shows the modal with animation
+   * - **hide(): _Promise<void>_** - Hides the modal with animation
+   * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
    *
    * ### **Slots:**
-   *  - **header** - The header content of the modal
-   * - **body** - The main content of the modal
+   *  - _default_ - Main content area (same as body slot)
+   * - **header** - The header content of the modal
+   * - **body** - The main content of the modal (alternative to default slot)
    * - **footer** - The footer content of the modal
    * - **close** - Custom close button (defaults to an X icon)
    *
    * ### **CSS Parts:**
-   *  - **container** - The main container element
-   * - **overlay** - The overlay element
-   * - **modal** - The modal element
-   * - **header** - The header element
-   * - **body** - The body element
-   * - **footer** - The footer element
+   *  - **dialog** - The native dialog element
+   * - **container** - The container wrapper for centering and scrolling
+   * - **modal** - The main modal box
+   * - **header** - The header section
+   * - **header-content** - The content wrapper inside header
+   * - **body** - The main content area
+   * - **footer** - The footer section
    * - **close-button** - The close button element
    */
   "plus-modal": Partial<PlusModalProps & BaseProps & BaseEvents>;

package/types/custom-element-svelte.d.ts

@@ -391,16 +391,38 @@ type PlusRadioGroupProps = {
 type PlusModalProps = {
   /** The size of the modal */
   size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  /** The placement of the modal on the screen */
+  placement?: "center" | "top";
   /** Whether the modal is open */
   "is-open"?: boolean;
   /** Whether the modal should take full width */
   "full-width"?: boolean;
+  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
+  "full-screen"?: 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) */
+  backdrop?: boolean | "static";
   /** Whether the modal should close when clicking the backdrop */
   "close-on-backdrop"?: boolean;
   /** Whether the modal should close when pressing the Escape key */
   "close-on-esc"?: boolean;
+  /** Hides the header section completely */
+  "no-header"?: boolean;
+  /** Hides the footer section completely */
+  "no-footer"?: boolean;
   /** The duration of the animation in milliseconds */
   "animation-duration"?: number;
+
+  /** Emitted after the modal has opened */
+  "on:plus-modal-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the modal has closed */
+  "on:plus-modal-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal opens (cancelable) */
+  "on:plus-modal-before-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal closes (cancelable) */
+  "on:plus-modal-before-close"?: (e: CustomEvent<never>) => void;
 };
 
 type PlusDrawerProps = {
@@ -1307,27 +1329,36 @@ export type CustomElements = {
   "plus-radio-group": Partial<PlusRadioGroupProps & BaseProps & BaseEvents>;
 
   /**
-   * Modal dialog component that appears on top of the page content.
+   * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **plus-modal-open** - Emitted after the modal has opened
+   * - **plus-modal-close** - Emitted after the modal has closed
+   * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
+   * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
+   *
    * ### **Methods:**
-   *  - **hide(): _void_** - Hides the modal with animation
-   * - **show(): _void_** - Shows the modal with animation
+   *  - **show(): _Promise<void>_** - Shows the modal with animation
+   * - **hide(): _Promise<void>_** - Hides the modal with animation
+   * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
    *
    * ### **Slots:**
-   *  - **header** - The header content of the modal
-   * - **body** - The main content of the modal
+   *  - _default_ - Main content area (same as body slot)
+   * - **header** - The header content of the modal
+   * - **body** - The main content of the modal (alternative to default slot)
    * - **footer** - The footer content of the modal
    * - **close** - Custom close button (defaults to an X icon)
    *
    * ### **CSS Parts:**
-   *  - **container** - The main container element
-   * - **overlay** - The overlay element
-   * - **modal** - The modal element
-   * - **header** - The header element
-   * - **body** - The body element
-   * - **footer** - The footer element
+   *  - **dialog** - The native dialog element
+   * - **container** - The container wrapper for centering and scrolling
+   * - **modal** - The main modal box
+   * - **header** - The header section
+   * - **header-content** - The content wrapper inside header
+   * - **body** - The main content area
+   * - **footer** - The footer section
    * - **close-button** - The close button element
    */
   "plus-modal": Partial<PlusModalProps & BaseProps & BaseEvents>;

package/types/custom-element-vuejs.d.ts

@@ -354,16 +354,38 @@ type PlusRadioGroupProps = {
 type PlusModalProps = {
   /** The size of the modal */
   size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  /** The placement of the modal on the screen */
+  placement?: "center" | "top";
   /** Whether the modal is open */
   "is-open"?: boolean;
   /** Whether the modal should take full width */
   "full-width"?: boolean;
+  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
+  "full-screen"?: 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) */
+  backdrop?: boolean | "static";
   /** Whether the modal should close when clicking the backdrop */
   "close-on-backdrop"?: boolean;
   /** Whether the modal should close when pressing the Escape key */
   "close-on-esc"?: boolean;
+  /** Hides the header section completely */
+  "no-header"?: boolean;
+  /** Hides the footer section completely */
+  "no-footer"?: boolean;
   /** The duration of the animation in milliseconds */
   "animation-duration"?: number;
+
+  /** Emitted after the modal has opened */
+  "onplus-modal-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the modal has closed */
+  "onplus-modal-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal opens (cancelable) */
+  "onplus-modal-before-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted before the modal closes (cancelable) */
+  "onplus-modal-before-close"?: (e: CustomEvent<never>) => void;
 };
 
 type PlusDrawerProps = {
@@ -1270,27 +1292,36 @@ export type CustomElements = {
   "plus-radio-group": DefineComponent<PlusRadioGroupProps>;
 
   /**
-   * Modal dialog component that appears on top of the page content.
+   * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **plus-modal-open** - Emitted after the modal has opened
+   * - **plus-modal-close** - Emitted after the modal has closed
+   * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
+   * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
+   *
    * ### **Methods:**
-   *  - **hide(): _void_** - Hides the modal with animation
-   * - **show(): _void_** - Shows the modal with animation
+   *  - **show(): _Promise<void>_** - Shows the modal with animation
+   * - **hide(): _Promise<void>_** - Hides the modal with animation
+   * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
    *
    * ### **Slots:**
-   *  - **header** - The header content of the modal
-   * - **body** - The main content of the modal
+   *  - _default_ - Main content area (same as body slot)
+   * - **header** - The header content of the modal
+   * - **body** - The main content of the modal (alternative to default slot)
    * - **footer** - The footer content of the modal
    * - **close** - Custom close button (defaults to an X icon)
    *
    * ### **CSS Parts:**
-   *  - **container** - The main container element
-   * - **overlay** - The overlay element
-   * - **modal** - The modal element
-   * - **header** - The header element
-   * - **body** - The body element
-   * - **footer** - The footer element
+   *  - **dialog** - The native dialog element
+   * - **container** - The container wrapper for centering and scrolling
+   * - **modal** - The main modal box
+   * - **header** - The header section
+   * - **header-content** - The content wrapper inside header
+   * - **body** - The main content area
+   * - **footer** - The footer section
    * - **close-button** - The close button element
    */
   "plus-modal": DefineComponent<PlusModalProps>;

package/vscode.css-custom-data.json

@@ -365,15 +365,19 @@
       "name": "::part(animation-overlay)",
       "description": "The animation overlay element."
     },
+    { "name": "::part(dialog)", "description": "The native dialog element" },
     {
       "name": "::part(container)",
-      "description": "The main container element"
+      "description": "The container wrapper for centering and scrolling"
     },
-    { "name": "::part(overlay)", "description": "The overlay element" },
-    { "name": "::part(modal)", "description": "The modal element" },
-    { "name": "::part(header)", "description": "The header element" },
-    { "name": "::part(body)", "description": "The body element" },
-    { "name": "::part(footer)", "description": "The footer element" },
+    { "name": "::part(modal)", "description": "The main modal box" },
+    { "name": "::part(header)", "description": "The header section" },
+    {
+      "name": "::part(header-content)",
+      "description": "The content wrapper inside header"
+    },
+    { "name": "::part(body)", "description": "The main content area" },
+    { "name": "::part(footer)", "description": "The footer section" },
     {
       "name": "::part(close-button)",
       "description": "The close button element"

package/vscode.html-custom-data.json

@@ -656,7 +656,7 @@
     },
     {
       "name": "plus-modal",
-      "description": "Modal dialog component that appears on top of the page content.\n---\n\n\n### **Methods:**\n - **hide(): _void_** - Hides the modal with animation\n- **show(): _void_** - Shows the modal with animation\n\n### **Slots:**\n - **header** - The header content of the modal\n- **body** - The main content of the modal\n- **footer** - The footer content of the modal\n- **close** - Custom close button (defaults to an X icon)\n\n### **CSS Parts:**\n - **container** - The main container element\n- **overlay** - The overlay element\n- **modal** - The modal element\n- **header** - The header element\n- **body** - The body element\n- **footer** - The footer element\n- **close-button** - The close button element",
+      "description": "Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.\n---\n\n\n### **Events:**\n - **plus-modal-open** - Emitted after the modal has opened\n- **plus-modal-close** - Emitted after the modal has closed\n- **plus-modal-before-open** - Emitted before the modal opens (cancelable)\n- **plus-modal-before-close** - Emitted before the modal closes (cancelable)\n\n### **Methods:**\n - **show(): _Promise<void>_** - Shows the modal with animation\n- **hide(): _Promise<void>_** - Hides the modal with animation\n- **toggle(): _Promise<void>_** - Toggles the modal open/closed state\n\n### **Slots:**\n - _default_ - Main content area (same as body slot)\n- **header** - The header content of the modal\n- **body** - The main content of the modal (alternative to default slot)\n- **footer** - The footer content of the modal\n- **close** - Custom close button (defaults to an X icon)\n\n### **CSS Parts:**\n - **dialog** - The native dialog element\n- **container** - The container wrapper for centering and scrolling\n- **modal** - The main modal box\n- **header** - The header section\n- **header-content** - The content wrapper inside header\n- **body** - The main content area\n- **footer** - The footer section\n- **close-button** - The close button element",
       "attributes": [
         {
           "name": "size",
@@ -670,6 +670,11 @@
             { "name": "full" }
           ]
         },
+        {
+          "name": "placement",
+          "description": "The placement of the modal on the screen",
+          "values": [{ "name": "center" }, { "name": "top" }]
+        },
         {
           "name": "is-open",
           "description": "Whether the modal is open",
@@ -680,6 +685,16 @@
           "description": "Whether the modal should take full width",
           "values": []
         },
+        {
+          "name": "full-screen",
+          "description": "Makes the modal take the full screen (100vw x 100vh, no border radius)",
+          "values": []
+        },
+        {
+          "name": "backdrop",
+          "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)",
+          "values": [{ "name": "static" }]
+        },
         {
           "name": "close-on-backdrop",
           "description": "Whether the modal should close when clicking the backdrop",
@@ -690,6 +705,16 @@
           "description": "Whether the modal should close when pressing the Escape key",
           "values": []
         },
+        {
+          "name": "no-header",
+          "description": "Hides the header section completely",
+          "values": []
+        },
+        {
+          "name": "no-footer",
+          "description": "Hides the footer section completely",
+          "values": []
+        },
         {
           "name": "animation-duration",
           "description": "The duration of the animation in milliseconds",