@progressive-development/pd-dialog 0.9.2 → 1.0.1

package/dist/pd-popup/pd-popup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-popup.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup/pd-popup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,eAAe,CAAC;AAGvB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC"}
+{"version":3,"file":"pd-popup.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup/pd-popup.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,mCAAmC;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA8F3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,8EAA8E;AAC9E,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,8EAA8E;AAC9E,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,cAAc,EAAE,KAiE5B,CAAC;AAMF,2FAA2F;AAC3F,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC;AAMF,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,EAAE,KA6CjC,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAyG3B,CAAC"}

package/dist/pd-popup-dialog/PdPopupDialog.d.ts

@@ -1,22 +1,47 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdDialogButton } from '../types';
 /**
+ * Modal dialog with header, content, and configurable footer buttons.
+ *
  * @tagname pd-popup-dialog
+ * @summary Modal dialog with header, content slot, and footer buttons.
+ *
+ * @event submit-button-clicked - Fired when a footer button is clicked. Emits `{button}`.
+ *
+ * @slot content - Main dialog content.
+ *
+ * @cssprop --pd-popup-modal-bg-rgba - Modal overlay background.
+ * @cssprop --pd-popup-modal-padding - Modal padding. Default: `--pd-spacing-md`.
+ * @cssprop --pd-popup-max-width - Maximum dialog width. Default: `700px`.
+ * @cssprop --pd-popup-header-col - Header background. Default: `--pd-default-col`.
+ * @cssprop --pd-popup-header-height - Header min-height. Default: `45px`.
+ * @cssprop --pd-popup-header-gap - Header gap between icon and text. Default: `--pd-spacing-sm`.
+ * @cssprop --pd-popup-header-font-size - Header font size. Default: `1.3em`.
+ * @cssprop --pd-popup-header-font-col - Header text color. Default: `--pd-default-bg-col`.
+ * @cssprop --pd-popup-content-padding - Content area padding. Default: `--pd-spacing-md`.
+ * @cssprop --pd-popup-footer-col - Footer background. Default: `--pd-default-light-col`.
+ * @cssprop --pd-popup-footer-padding - Footer padding. Default: `--pd-spacing-md`.
+ * @cssprop --pd-popup-footer-button-width - Footer button width. Default: `38%`.
+ * @cssprop --pd-popup-z-index - Z-index for modal overlay. Default: `100`.
+ * @cssprop --pd-popup-border-radius - Dialog border radius. Default: `var(--pd-radius-lg)`.
  */
 export declare class PdPopupDialog extends LitElement {
-    /**
-     * Typ des Popups: info | warn | error | help
-     */
+    /** Dialog type: info, warn, error, help. */
     type: string;
-    /**
-     * Titel, der im Header angezeigt wird
-     */
+    /** Dialog title text. */
     title: string;
-    /**
-     * Konfigurierbare Buttons mit Text, Key und optionalem Status
-     */
+    /** Footer button configurations. */
     buttons: PdDialogButton[];
+    /** Enable closing with Escape key. */
     closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop overlay. */
+    closeByBackdrop: boolean;
+    /** Block body scroll when dialog is open. */
+    blockScroll: boolean;
+    /** @ignore */
+    private _modal;
+    /** Track if scroll was blocked by this instance */
+    private _scrollBlocked;
     static styles: CSSResultGroup;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -33,5 +58,7 @@ export declare class PdPopupDialog extends LitElement {
     hidePopup(): void;
     private _setModalDisplay;
     private _handleKeyDown;
+    private _onBackdropClick;
+    private _stopPropagation;
 }
 //# sourceMappingURL=PdPopupDialog.d.ts.map

package/dist/pd-popup-dialog/PdPopupDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdPopupDialog.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/PdPopupDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;GAEG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAU;IAEtB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAiB;IAE9B;;OAEG;IAEH,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,aAAa,EAAE,OAAO,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA6HpC;IAEO,iBAAiB;IAOjB,oBAAoB;IAOpB,MAAM;IA6Bf,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IA0BnB;;OAEG;IACI,SAAS;IAIhB;;OAEG;IACI,SAAS;IAIhB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc,CAEpB;CACH"}
+{"version":3,"file":"PdPopupDialog.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/PdPopupDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IAE5C,IAAI,EAAE,MAAM,CAAU;IAEtB,yBAAyB;IAEzB,KAAK,EAAE,MAAM,CAAiB;IAE9B,oCAAoC;IAEpC,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B,sCAAsC;IAEtC,aAAa,EAAE,OAAO,CAAS;IAE/B,uDAAuD;IAEvD,eAAe,EAAE,OAAO,CAAS;IAEjC,6CAA6C;IAE7C,WAAW,EAAE,OAAO,CAAS;IAE7B,cAAc;IAEd,OAAO,CAAC,MAAM,CAAkB;IAEhC,mDAAmD;IACnD,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAgIpC;IAEO,iBAAiB;IAYjB,oBAAoB;IAYpB,MAAM;IAsCf,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IA0BnB;;OAEG;IACI,SAAS;IAIhB;;OAEG;IACI,SAAS;IAQhB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,gBAAgB;CAGzB"}

package/dist/pd-popup-dialog/PdPopupDialog.js

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import '@progressive-development/pd-forms/pd-panel-button';
+import { property, query } from 'lit/decorators.js';
+import '@progressive-development/pd-forms/pd-button';
 import '@progressive-development/pd-icon/pd-icon';
 
 var __defProp = Object.defineProperty;
@@ -19,6 +19,10 @@ class PdPopupDialog extends LitElement {
     this.title = "Popup Title";
     this.buttons = [];
     this.closeByEscape = false;
+    this.closeByBackdrop = false;
+    this.blockScroll = false;
+    /** Track if scroll was blocked by this instance */
+    this._scrollBlocked = false;
     this._handleKeyDown = (e) => {
       if (e.key === "Escape") this.hidePopup();
     };
@@ -28,13 +32,14 @@ class PdPopupDialog extends LitElement {
       css`
       :host {
         display: block;
+        --_dialog-radius: var(--pd-popup-border-radius, var(--pd-radius-lg));
       }
 
       .modal {
         position: fixed;
         box-sizing: border-box;
 
-        z-index: 100;
+        z-index: var(--pd-popup-z-index, 100);
         left: 0;
         top: 0;
         width: 100%;
@@ -42,45 +47,53 @@ class PdPopupDialog extends LitElement {
         overflow: auto;
         background-color: var(
           --pd-popup-modal-bg-rgba,
-          rgba(175, 193, 210, 0.8)
+          var(--pd-modal-overlay-col)
         );
-        display: block;
-        padding: 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--pd-popup-modal-padding, var(--pd-spacing-md));
 
         max-width: 100vw;
         overflow-x: hidden;
       }
 
       .modal-content {
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-        margin: 0 auto;
+        margin: auto;
         padding: 0;
         width: 100%;
         max-width: var(--pd-popup-max-width, 700px);
-        border-radius: var(--pd-border-radius, 8px);
-        border: 1px solid var(--pd-default-light-col);
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
-        background: white;
+        border-radius: var(--_dialog-radius);
+        border: var(--pd-border-width) solid var(--pd-default-light-col);
+        box-shadow: var(--pd-shadow-xl);
+        background: var(--pd-default-bg-col);
+      }
+
+      /* Mobile: align to top for full scrollability */
+      @media (max-width: 767px) {
+        .modal {
+          align-items: flex-start;
+        }
       }
 
       .header {
         display: flex;
-        gap: 0.5em;
+        gap: var(--pd-popup-header-gap, var(--pd-spacing-sm));
         align-items: center;
         background-color: var(--pd-popup-header-col, var(--pd-default-col));
-        height: var(--pd-popup-header-height, 45px);
-        padding: 0.5rem;
+        min-height: var(--pd-popup-header-height, 45px);
+        padding: var(--pd-spacing-sm);
 
-        border-top-left-radius: var(--pd-border-radius, 8px);
-        border-top-right-radius: var(--pd-border-radius, 8px);
+        border-top-left-radius: var(--_dialog-radius);
+        border-top-right-radius: var(--_dialog-radius);
       }
 
       .header-txt {
         font-family: var(--pd-default-font-title-family);
         font-size: var(--pd-popup-header-font-size, 1.3em);
         color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
+        overflow-wrap: break-word;
+        word-break: break-word;
       }
 
       .info-logo {
@@ -93,15 +106,15 @@ class PdPopupDialog extends LitElement {
 
       .info,
       .help {
-        --pd-icon-col: #6b86ff;
+        --pd-icon-col: var(--pd-default-info-col);
       }
 
       .warn {
-        --pd-icon-col: #ffbf00;
+        --pd-icon-col: var(--pd-default-warning-col);
       }
 
       .content {
-        padding: 1em;
+        padding: var(--pd-popup-content-padding, var(--pd-spacing-md));
         background-color: var(
           --pd-popup-header-font-col,
           var(--pd-default-bg-col)
@@ -119,32 +132,26 @@ class PdPopupDialog extends LitElement {
         align-items: center;
         justify-content: space-around;
 
-        padding: 1em;
+        padding: var(--pd-popup-footer-padding, var(--pd-spacing-md));
 
-        border-bottom-left-radius: var(--pd-border-radius, 8px);
-        border-bottom-right-radius: var(--pd-border-radius, 8px);
+        border-bottom-left-radius: var(--_dialog-radius);
+        border-bottom-right-radius: var(--_dialog-radius);
 
-        --pd-icon-button-width: 100%;
+        --pd-button-width: 100%;
       }
 
-      .footer pd-panel-button {
-        width: 38%;
+      .footer pd-button {
+        width: var(--pd-popup-footer-button-width, 38%);
       }
 
-      @media (max-width: 640px) {
-        .footer {
-          --pd-icon-button-font-size: 100%;
-        }
-      }
-
-      @media (max-width: 500px) {
+      /* Mobile: stack buttons vertically */
+      @media (max-width: 767px) {
         .footer {
           flex-direction: column;
-          gap: 0.5rem;
-          padding: 1rem;
+          gap: var(--pd-spacing-sm);
         }
 
-        .footer pd-panel-button {
+        .footer pd-button {
           width: 90%;
         }
       }
@@ -156,20 +163,36 @@ class PdPopupDialog extends LitElement {
     if (this.closeByEscape) {
       document.addEventListener("keydown", this._handleKeyDown);
     }
+    if (this.blockScroll) {
+      document.body.style.overflow = "hidden";
+      this._scrollBlocked = true;
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.closeByEscape) {
       document.removeEventListener("keydown", this._handleKeyDown);
     }
+    if (this._scrollBlocked) {
+      document.body.style.overflow = "";
+      this._scrollBlocked = false;
+    }
   }
   render() {
+    const titleId = `${this.id || "popup"}-title`;
     return html`
-      <div id="modalId" class="modal">
-        <div class="modal-content">
+      <div
+        id="modalId"
+        class="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="${titleId}"
+        @click=${this._onBackdropClick}
+      >
+        <div class="modal-content" @click=${this._stopPropagation}>
           <div class="header">
             ${this._renderIcon()}
-            <span class="header-txt">${this.title}</span>
+            <span id="${titleId}" class="header-txt">${this.title}</span>
           </div>
           <div class="content">
             <slot name="content"></slot>
@@ -177,13 +200,13 @@ class PdPopupDialog extends LitElement {
           <div class="footer">
             ${this.buttons.map(
       (bt) => html`
-                <pd-panel-button
+                <pd-button
                   data-key=${bt.key}
-                  buttonText=${bt.name}
+                  text=${bt.name}
                   ?disabled=${bt.disabled}
                   ?primary=${bt.primary}
                   @button-clicked=${this._onButtonClick}
-                ></pd-panel-button>
+                ></pd-button>
               `
     )}
           </div>
@@ -236,14 +259,25 @@ class PdPopupDialog extends LitElement {
    * Schließt das Popup-Dialog manuell
    */
   hidePopup() {
+    if (this._scrollBlocked) {
+      document.body.style.overflow = "";
+      this._scrollBlocked = false;
+    }
     this._setModalDisplay(false);
   }
   _setModalDisplay(visible) {
-    const modal = this.shadowRoot?.getElementById("modalId");
-    if (modal) {
-      modal.style.display = visible ? "block" : "none";
+    if (this._modal) {
+      this._modal.style.display = visible ? "block" : "none";
     }
   }
+  _onBackdropClick() {
+    if (this.closeByBackdrop) {
+      this.hidePopup();
+    }
+  }
+  _stopPropagation(e) {
+    e.stopPropagation();
+  }
 }
 __decorateClass([
   property({ type: String })
@@ -257,5 +291,14 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], PdPopupDialog.prototype, "closeByEscape");
+__decorateClass([
+  property({ type: Boolean })
+], PdPopupDialog.prototype, "closeByBackdrop");
+__decorateClass([
+  property({ type: Boolean })
+], PdPopupDialog.prototype, "blockScroll");
+__decorateClass([
+  query("#modalId")
+], PdPopupDialog.prototype, "_modal");
 
 export { PdPopupDialog };

package/dist/pd-popup-dialog/pd-popup-dialog.stories.d.ts

@@ -1,21 +1,55 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdDialogButton } from '../types.js';
+/**
+ * Story arguments interface for pd-popup-dialog component.
+ * Maps to the component's public API.
+ */
+interface PdPopupDialogArgs {
+    /** Dialog title text */
     title: string;
-    render: ({ title, type, buttons }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        title: {
-            control: "text";
-        };
-        type: {
-            control: "select";
-            options: string[];
-        };
-    };
-};
+    /** Dialog type: info, warn, error, help */
+    type: "info" | "warn" | "error" | "help";
+    /** Footer button configurations */
+    buttons: PdDialogButton[];
+    /** Enable closing with Escape key */
+    closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop overlay */
+    closeByBackdrop: boolean;
+}
+/**
+ * ## pd-popup-dialog
+ *
+ * A structured modal dialog with colored header, content slot, and configurable footer buttons.
+ *
+ * ### Features
+ * - Dialog types: info, warn, error, help (each with corresponding icon)
+ * - Colored header with icon and title text
+ * - Content area via `content` slot
+ * - Configurable footer buttons via `buttons` array property
+ * - Optional close on Escape key (`closeByEscape`)
+ * - Optional close on backdrop click (`closeByBackdrop`)
+ * - Programmatic control via `showPopup()` / `hidePopup()` methods
+ * - Mobile-responsive: buttons stack vertically on small screens
+ *
+ * ### Accessibility
+ * - Uses `role="dialog"` and `aria-modal="true"`
+ * - Title linked via `aria-labelledby` for screen readers
+ * - Footer buttons use native `<pd-button>` with keyboard support
+ * - Escape key close support
+ */
+declare const meta: Meta<PdPopupDialogArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Info: Story;
-export declare const InfoLongTitle: Story;
-export declare const Error: Story;
-export declare const Warn: Story;
+type Story = StoryObj<PdPopupDialogArgs>;
+/** Default info dialog with OK and Cancel buttons. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All four dialog types with their corresponding icons side by side. */
+export declare const AllTypes: Story;
+/** Different footer button configurations: single, two, and three buttons. */
+export declare const ButtonConfigurations: Story;
+/** Demonstrates opening/closing the dialog programmatically via `showPopup()` / `hidePopup()`. */
+export declare const ProgrammaticControl: Story;
+/** Dialog with a long title that wraps to multiple lines. */
+export declare const LongTitle: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-popup-dialog.stories.d.ts.map

package/dist/pd-popup-dialog/pd-popup-dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-popup-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/pd-popup-dialog.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAOtB,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}
+{"version":3,"file":"pd-popup-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/pd-popup-dialog.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,sBAAsB,CAAC;AAM9B;;;GAGG;AACH,UAAU,iBAAiB;IACzB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACzC,mCAAmC;IACnC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,qCAAqC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAyBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CA+FjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,sFAAsF;AACtF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,yEAAyE;AACzE,eAAO,MAAM,QAAQ,EAAE,KA0DtB,CAAC;AAMF,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,EAAE,KA+DlC,CAAC;AAMF,kGAAkG;AAClG,eAAO,MAAM,mBAAmB,EAAE,KAyDjC,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA4H3B,CAAC"}

package/dist/pd-submit-dialog/PdSubmitDialog.d.ts

@@ -1,11 +1,13 @@
 import { LitElement, PropertyValues } from 'lit';
 /**
+ * Submit dialog with progress, success, and failure states.
+ *
  * @tagname pd-submit-dialog
+ * @summary Progress dialog with loading spinner, success, and error states.
  *
- * A submit dialog that shows progress, success or failure state.
+ * @event submit-button-clicked - Fired when a footer button is clicked. Detail: `{ button: key }`.
  *
- * @fires submit-button-clicked - Triggered when a footer button is clicked, e.g. "Close" or "Back to Start".
- * @slot submit-content - Content shown above the progress area
+ * @slot submit-content - Content shown above the progress area.
  */
 export declare class PdSubmitDialog extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -21,7 +23,9 @@ export declare class PdSubmitDialog extends LitElement {
     confirmMail: string;
     /** Optional map with custom progress texts */
     progressTxtMap: Map<number, string>;
-    /** Internal list of buttons shown in the popup dialog */
+    /**
+     * Internal list of buttons shown in the popup dialog
+     * @ignore */
     private _buttons;
     updated(changedProps: PropertyValues<this>): void;
     private _updateButtonsBasedOnStatus;

package/dist/pd-submit-dialog/PdSubmitDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdSubmitDialog.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/PdSubmitDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAIlD,OAAO,uCAAuC,CAAC;AAE/C;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAsDpB;IAEF,mBAAmB;IAEnB,KAAK,SAAwB;IAE7B,yDAAyD;IAEzD,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAW;IAE9C,qBAAqB;IAErB,MAAM,SAAK;IAEX,uDAAuD;IAEvD,SAAS,SAAM;IAEf,0DAA0D;IAE1D,WAAW,SAAM;IAEjB,8CAA8C;IAE9C,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IAEhD,yDAAyD;IAChD,OAAO,CAAC,QAAQ,CAAwB;IAExC,OAAO,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC;IAMnD,OAAO,CAAC,2BAA2B;IAuB1B,MAAM;IAmBf,OAAO,CAAC,kBAAkB;IAiC1B,OAAO,CAAC,cAAc;CAUvB"}
+{"version":3,"file":"PdSubmitDialog.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/PdSubmitDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAIlD,OAAO,uCAAuC,CAAC;AAE/C;;;;;;;;;GASG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAsDpB;IAEF,mBAAmB;IAEnB,KAAK,SAAwB;IAE7B,yDAAyD;IAEzD,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAW;IAE9C,qBAAqB;IAErB,MAAM,SAAK;IAEX,uDAAuD;IAEvD,SAAS,SAAM;IAEf,0DAA0D;IAE1D,WAAW,SAAM;IAEjB,8CAA8C;IAE9C,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IAEhD;;iBAEa;IACJ,OAAO,CAAC,QAAQ,CAAwB;IAExC,OAAO,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC;IAMnD,OAAO,CAAC,2BAA2B;IAuB1B,MAAM;IAmBf,OAAO,CAAC,kBAAkB;IAiC1B,OAAO,CAAC,cAAc;CAUvB"}

package/dist/pd-submit-dialog/pd-submit-dialog.stories.d.ts

@@ -1,33 +1,50 @@
-import { StoryObj } from '@storybook/web-components';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 import { PdSubmitDialogStatus } from '../types.js';
-declare const meta: {
+/**
+ * Story arguments interface for pd-submit-dialog component.
+ * Maps to the component's public API.
+ */
+interface PdSubmitDialogArgs {
+    /** Dialog title text */
     title: string;
-    component: string;
-    render: ({ title, status, statusMsg, confirmMail }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        title: {
-            control: "text";
-        };
-        status: {
-            control: "select";
-            options: PdSubmitDialogStatus[];
-            mapping: {
-                SEND: PdSubmitDialogStatus;
-                SUCCESS: PdSubmitDialogStatus;
-                FAILED: PdSubmitDialogStatus;
-            };
-        };
-        statusMsg: {
-            control: "text";
-        };
-        confirmMail: {
-            control: "text";
-        };
-    };
-};
+    /** Current status: SEND (1), SUCCESS (2), or FAILED (3) */
+    status: PdSubmitDialogStatus;
+    /** Optional status message text */
+    statusMsg: string;
+    /** Confirmation email address */
+    confirmMail: string;
+    /** Custom progress text map */
+    progressTxtMap: Map<number, string>;
+}
+/**
+ * ## pd-submit-dialog
+ *
+ * A progress dialog that shows loading, success, and failure states during async operations.
+ *
+ * ### Features
+ * - Three progress states: SEND (loading spinner), SUCCESS (check icon), FAILED (error icon)
+ * - Custom progress text per state via `progressTxtMap`
+ * - Optional status message below the progress indicator
+ * - Dynamic footer buttons based on current status (no buttons while loading)
+ * - Content slot for additional information above the progress area
+ * - Built on top of `pd-popup-dialog`
+ *
+ * ### Status Flow
+ * 1. `PdSubmitDialogStatus.SEND` (1) -- Loading spinner, no buttons
+ * 2. `PdSubmitDialogStatus.SUCCESS` (2) -- Success icon, "Close" button
+ * 3. `PdSubmitDialogStatus.FAILED` (3) -- Error icon, action buttons
+ */
+declare const meta: Meta<PdSubmitDialogArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Send: Story;
-export declare const Success: Story;
-export declare const Failed: Story;
+type Story = StoryObj<PdSubmitDialogArgs>;
+/** Default submit dialog in sending state with loading spinner. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All three progress states side by side: Sending, Success, and Failed. */
+export declare const AllStates: Story;
+/** Dialog in success state with check icon and Close button. */
+export declare const SuccessState: Story;
+/** Dialog in failed state with error icon, status message, and action buttons. */
+export declare const FailedState: Story;
+/** Demonstrates the `submit-content` slot with rich HTML content above the progress area. */
+export declare const WithSlotContent: Story;
 //# sourceMappingURL=pd-submit-dialog.stories.d.ts.map

package/dist/pd-submit-dialog/pd-submit-dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-submit-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/pd-submit-dialog.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,uBAAuB,CAAC;AAa/B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAmCM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC"}
+{"version":3,"file":"pd-submit-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/pd-submit-dialog.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,uBAAuB,CAAC;AAM/B;;;GAGG;AACH,UAAU,kBAAkB;IAC1B,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,MAAM,EAAE,oBAAoB,CAAC;IAC7B,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAsBD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CA0FlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAM1C,mGAAmG;AACnG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,4EAA4E;AAC5E,eAAO,MAAM,SAAS,EAAE,KA0DvB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAMF,kFAAkF;AAClF,eAAO,MAAM,WAAW,EAAE,KA2BzB,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC"}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@progressive-development/pd-dialog",
-  "version": "0.9.2",
+  "version": "1.0.1",
   "description": "Progressive Development dialog components.",
   "author": "PD Progressive Development",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -27,10 +30,10 @@
     "lit": "^3.3.1",
     "@lit/localize": "^0.12.2",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-icon": "0.9.2",
-    "@progressive-development/pd-forms": "0.9.2",
-    "@progressive-development/pd-price": "0.9.2",
-    "@progressive-development/pd-shared-styles": "0.3.0"
+    "@progressive-development/pd-shared-styles": "0.3.2",
+    "@progressive-development/pd-icon": "1.0.1",
+    "@progressive-development/pd-forms": "1.0.1",
+    "@progressive-development/pd-price": "1.0.1"
   },
   "customElements": "custom-elements.json",
   "keywords": [