@progressive-development/pd-dialog 0.9.2 → 1.0.1

package/dist/pd-form-dialog/PdFormDialog.js

@@ -0,0 +1,181 @@
+import { LitElement, css, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import '@progressive-development/pd-forms/pd-form-container';
+import '../pd-popup-dialog.js';
+import { BUTTON_KEY_CONFIRM, EVENT_CANCEL, BUTTON_KEY_CANCEL } from '../pd-confirm-dialog/PdConfirmDialog.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_SUBMIT_DISABLE_TIMEOUT = 5e3;
+const EVENT_FORM_SUBMIT = "pd-form-submit";
+class PdFormDialog extends LitElement {
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+  constructor() {
+    super();
+    this.saveButtonText = "Save";
+    this.cancelButtonText = "Cancel";
+    this.showRequiredFieldInfo = true;
+    this.submitDisableTimeout = DEFAULT_SUBMIT_DISABLE_TIMEOUT;
+    this.closeByEscape = false;
+    this.closeByBackdrop = false;
+    this.blockScroll = false;
+    this._validForm = false;
+    this._buttons = [];
+    this._initializeButtons();
+  }
+  static {
+    // ---------------------------------------------------------------------------
+    // Styles
+    // ---------------------------------------------------------------------------
+    this.styles = css`
+    :host {
+      display: block;
+      --pd-popup-max-width: var(--pd-form-dialog-max-width, 700px);
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        --pd-popup-max-width: 95%;
+      }
+    }
+  `;
+  }
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  render() {
+    return html`
+      <pd-popup-dialog
+        @submit-button-clicked="${this._handleButtonClick}"
+        title="${this._dialogTitle}"
+        .buttons="${this._getButtons()}"
+        ?closeByEscape="${this.closeByEscape}"
+        ?closeByBackdrop="${this.closeByBackdrop}"
+        ?blockScroll="${this.blockScroll}"
+      >
+        <pd-form-container
+          slot="content"
+          ?requiredFieldInfo="${this.showRequiredFieldInfo}"
+          commonError="${this._validationError || ""}"
+          @pd-form-change="${this._handleFormChange}"
+        >
+          ${this._renderContent()}
+        </pd-form-container>
+      </pd-popup-dialog>
+    `;
+  }
+  // ---------------------------------------------------------------------------
+  // Public Methods
+  // ---------------------------------------------------------------------------
+  /** Reset the form to initial state */
+  reset() {
+    this._formContainer?.reset();
+    this._validForm = false;
+    this._validationError = void 0;
+  }
+  // ---------------------------------------------------------------------------
+  // Protected Methods
+  // ---------------------------------------------------------------------------
+  /**
+   * Handle button click events.
+   * Can be overridden for custom behavior.
+   */
+  _handleButtonClick(e) {
+    if (e.detail.button === BUTTON_KEY_CONFIRM && this._validForm) {
+      const formData = this._formContainer.getValues();
+      this._disableSaveButtonTemporarily();
+      this.dispatchEvent(
+        new CustomEvent(EVENT_FORM_SUBMIT, {
+          detail: formData,
+          bubbles: true,
+          composed: true
+        })
+      );
+    } else {
+      this.dispatchEvent(
+        new CustomEvent(EVENT_CANCEL, {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Private Methods
+  // ---------------------------------------------------------------------------
+  _initializeButtons() {
+    this._buttons = [
+      { key: BUTTON_KEY_CANCEL, name: this.cancelButtonText },
+      {
+        key: BUTTON_KEY_CONFIRM,
+        name: this.saveButtonText,
+        disabled: true,
+        primary: true
+      }
+    ];
+  }
+  _getButtons() {
+    return [
+      { ...this._buttons[0], name: this.cancelButtonText },
+      {
+        ...this._buttons[1],
+        name: this.saveButtonText,
+        disabled: !this._validForm
+      }
+    ];
+  }
+  _handleFormChange(e) {
+    this._validForm = e.detail.overallValidity && this._isValidFormData();
+    e.stopPropagation();
+  }
+  _disableSaveButtonTemporarily() {
+    this._validForm = false;
+    window.setTimeout(() => {
+      this._validForm = true;
+    }, this.submitDisableTimeout);
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdFormDialog.prototype, "saveButtonText");
+__decorateClass([
+  property({ type: String })
+], PdFormDialog.prototype, "cancelButtonText");
+__decorateClass([
+  property({ type: Boolean })
+], PdFormDialog.prototype, "showRequiredFieldInfo");
+__decorateClass([
+  property({ type: Number })
+], PdFormDialog.prototype, "submitDisableTimeout");
+__decorateClass([
+  property({ type: Boolean })
+], PdFormDialog.prototype, "closeByEscape");
+__decorateClass([
+  property({ type: Boolean })
+], PdFormDialog.prototype, "closeByBackdrop");
+__decorateClass([
+  property({ type: Boolean })
+], PdFormDialog.prototype, "blockScroll");
+__decorateClass([
+  state()
+], PdFormDialog.prototype, "_validForm");
+__decorateClass([
+  state()
+], PdFormDialog.prototype, "_validationError");
+__decorateClass([
+  state()
+], PdFormDialog.prototype, "_buttons");
+__decorateClass([
+  query("pd-form-container")
+], PdFormDialog.prototype, "_formContainer");
+
+export { EVENT_FORM_SUBMIT, PdFormDialog };

package/dist/pd-form-dialog/pd-form-dialog.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PdFormDialog barrel export
+ */
+export { PdFormDialog } from './PdFormDialog.js';
+export { EVENT_FORM_SUBMIT } from './PdFormDialog.js';
+//# sourceMappingURL=pd-form-dialog.d.ts.map

package/dist/pd-form-dialog/pd-form-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-dialog.d.ts","sourceRoot":"","sources":["../../src/pd-form-dialog/pd-form-dialog.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,118 @@
+import { HTMLTemplateResult, CSSResultGroup } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdFormDialog } from './PdFormDialog.js';
+/**
+ * Example: Contact form data interface
+ */
+interface ContactFormData {
+    name: string;
+    email: string;
+    message: string;
+}
+/**
+ * Example: Contact form dialog
+ */
+declare class ExampleContactForm extends PdFormDialog<ContactFormData> {
+    protected _dialogTitle: string;
+    protected _formData: ContactFormData;
+    static styles: CSSResultGroup;
+    protected _isValidFormData(): boolean;
+    protected _renderContent(): HTMLTemplateResult;
+}
+/**
+ * Example: User profile form data interface
+ */
+interface ProfileFormData {
+    displayName: string;
+    bio: string;
+    language: string;
+}
+/**
+ * Example: User profile form dialog
+ */
+declare class ExampleProfileForm extends PdFormDialog<ProfileFormData> {
+    protected _dialogTitle: string;
+    protected _formData: ProfileFormData;
+    static styles: CSSResultGroup;
+    protected _isValidFormData(): boolean;
+    protected _renderContent(): HTMLTemplateResult;
+}
+/**
+ * Example: Simple feedback form data interface
+ */
+interface FeedbackFormData {
+    rating: string;
+    feedback: string;
+}
+/**
+ * Example: Feedback form dialog with custom rating UI
+ */
+declare class ExampleFeedbackForm extends PdFormDialog<FeedbackFormData> {
+    protected _dialogTitle: string;
+    protected _formData: FeedbackFormData;
+    static styles: CSSResultGroup;
+    protected _isValidFormData(): boolean;
+    private _selectRating;
+    protected _renderContent(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "example-contact-form": ExampleContactForm;
+        "example-profile-form": ExampleProfileForm;
+        "example-feedback-form": ExampleFeedbackForm;
+    }
+}
+/**
+ * Story arguments interface for pd-form-dialog examples.
+ * Maps to the example components' properties.
+ */
+interface PdFormDialogArgs {
+    /** Save button text */
+    saveButtonText: string;
+    /** Cancel button text */
+    cancelButtonText: string;
+    /** Show required field info text */
+    showRequiredFieldInfo: boolean;
+    /** Double-submit prevention timeout in ms */
+    submitDisableTimeout: number;
+}
+/**
+ * ## PdFormDialog<T> (Abstract Base Class)
+ *
+ * Generic abstract base class for form dialogs with integrated validation.
+ * Not used directly -- extend it with a type parameter for your form data.
+ *
+ * ### Features
+ * - Integrated form validation via `pd-form-container`
+ * - Save button automatically disabled until form is valid
+ * - Double-submit prevention with configurable timeout
+ * - Type-safe form data handling via generic `T` parameter
+ * - Standardized events: `pd-form-submit` (with typed payload) and `pd-dialog-cancel`
+ * - Required field info display (optional)
+ *
+ * ### How to Extend
+ * Implement these abstract members:
+ * - `_dialogTitle`: Dialog title string
+ * - `_formData`: Your typed form data object
+ * - `_isValidFormData()`: Additional validation beyond field-level validation
+ * - `_renderContent()`: Returns form fields as `HTMLTemplateResult`
+ *
+ * ### Validation Flow
+ * 1. Each form field validates individually (via pd-form-container)
+ * 2. `_isValidFormData()` runs additional cross-field validation
+ * 3. Save button enables only when both pass
+ */
+declare const meta: Meta<PdFormDialogArgs>;
+export default meta;
+type Story = StoryObj<PdFormDialogArgs>;
+/** Contact form dialog with name, email, and message fields. Interactive via Controls panel. */
+export declare const Default: Story;
+/** User profile form with display name, bio, and language selection. */
+export declare const ProfileForm: Story;
+/** Feedback form with custom rating buttons and optional text area. */
+export declare const FeedbackForm: Story;
+/** Overview of all three form dialog implementations side by side. */
+export declare const AllForms: Story;
+/** Demonstrates the validation flow: Save button is disabled until form is valid. */
+export declare const ValidationBehavior: Story;
+//# sourceMappingURL=pd-form-dialog.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-dialog/pd-form-dialog.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,kBAAkB,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,4CAA4C,CAAC;AACpD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AAErD,OAAO,EAAE,YAAY,EAAqB,MAAM,mBAAmB,CAAC;AAOpE;;GAEG;AACH,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,cACM,kBAAmB,SAAQ,YAAY,CAAC,eAAe,CAAC;IAC5D,SAAS,CAAC,YAAY,SAAgB;IAGtC,SAAS,CAAC,SAAS,EAAE,eAAe,CAIlC;IAEF,MAAM,CAAC,MAAM,EASR,cAAc,CAAC;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC,SAAS,CAAC,cAAc,IAAI,kBAAkB;CA4B/C;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,cACM,kBAAmB,SAAQ,YAAY,CAAC,eAAe,CAAC;IAC5D,SAAS,CAAC,YAAY,SAAkB;IAGxC,SAAS,CAAC,SAAS,EAAE,eAAe,CAIlC;IAEF,MAAM,CAAC,MAAM,EASR,cAAc,CAAC;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAgC/C;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,cACM,mBAAoB,SAAQ,YAAY,CAAC,gBAAgB,CAAC;IAC9D,SAAS,CAAC,YAAY,SAAqB;IAG3C,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAGnC;IAEF,MAAM,CAAC,MAAM,EA6BR,cAAc,CAAC;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC,OAAO,CAAC,aAAa;IAKrB,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAiC/C;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF;AAMD;;;GAGG;AACH,UAAU,gBAAgB;IACxB,uBAAuB;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,6CAA6C;IAC7C,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA0GhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,gGAAgG;AAChG,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAMF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,QAAQ,EAAE,KAwCtB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAC"}

package/dist/pd-popup/PdPopup.d.ts

@@ -1,17 +1,44 @@
 import { LitElement, CSSResultGroup } from 'lit';
 /**
+ * Modal popup triggered by clicking a slot element.
+ *
  * @tagname pd-popup
+ * @summary Modal popup with trigger element and content slot.
+ *
+ * @event popup-close - Fired when popup is closed.
  *
- * Popup-Komponente, die bei Klick auf ein Trigger-Element (Slot `small-view`)
- * ein modales Fenster (Slot `content`) öffnet.
+ * @slot small-view - Trigger content (e.g., icon, text).
+ * @slot content - Content displayed in the popup.
  *
- * @element pd-popup
- * @slot small-view - Inhalt, der das Popup triggert (z.B. Icon, Text)
- * @slot content - Inhalt, der im Popup angezeigt wird
- * @event popup-close - Wird ausgelöst, wenn das Popup geschlossen wurde
+ * @cssprop --pd-popup-modal-bg-rgba - Modal overlay background. Default: `--pd-modal-overlay-col`.
+ * @cssprop --pd-popup-default-display - Initial display state. Default: `none`.
+ * @cssprop --pd-popup-z-index - Z-index for modal overlay. Default: `100`.
+ * @cssprop --pd-popup-modal-padding - Modal content padding. Default: `--pd-spacing-md`.
+ * @cssprop --pd-popup-modal-padding-top - Top padding for vertical positioning. Default: `100px`.
+ * @cssprop --pd-popup-modal-padding-bottom - Bottom padding inside content. Default: `130px`.
+ * @cssprop --pd-popup-max-width - Maximum popup width. Default: `1200px`.
+ * @cssprop --pd-popup-width - Popup width. Default: `80%`.
+ * @cssprop --pd-popup-border-radius - Corner radius. Default: `--pd-radius-lg`.
+ * @cssprop --pd-popup-modal-slot-max-width - Max width of slot content. Default: `1000px`.
+ * @cssprop --pd-popup-modal-slot-margin - Slot content margin. Default: `0 --pd-spacing-lg`.
+ * @cssprop --pd-popup-content-bg - Modal content background color. Default: `--pd-default-bg-col`.
+ * @cssprop --pd-popup-content-height - Modal content height. Default: `auto`.
  */
 export declare class PdPopup extends LitElement {
+    /** Enable closing with Escape key. */
     closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop overlay. */
+    closeByBackdrop: boolean;
+    /** Hide the built-in close icon. Useful when content provides its own close mechanism. */
+    hideCloseIcon: boolean;
+    /** Block body scroll when popup is open. */
+    blockScroll: boolean;
+    /** Accessible label for the popup (used for aria-label). */
+    popupLabel: string;
+    /** @ignore */
+    private _scrollBlocked;
+    /** @ignore */
+    private _modal;
     static styles: CSSResultGroup;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -27,5 +54,8 @@ export declare class PdPopup extends LitElement {
     private _activatePopup;
     private _closePopup;
     private _handleKeyDown;
+    private _onBackdropClick;
+    private _stopPropagation;
+    private _onCloseIconKeyDown;
 }
 //# sourceMappingURL=PdPopup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PdPopup.d.ts","sourceRoot":"","sources":["../../src/pd-popup/PdPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;GAUG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IAErC,aAAa,EAAE,OAAO,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA8CpC;IAEO,iBAAiB;IAOjB,oBAAoB;IAO7B;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB,SAAS,CAAC,MAAM;IAqBhB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,cAAc,CAEpB;CACH"}
+{"version":3,"file":"PdPopup.d.ts","sourceRoot":"","sources":["../../src/pd-popup/PdPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,sCAAsC;IAEtC,aAAa,EAAE,OAAO,CAAS;IAE/B,uDAAuD;IAEvD,eAAe,EAAE,OAAO,CAAS;IAEjC,0FAA0F;IAE1F,aAAa,EAAE,OAAO,CAAS;IAE/B,4CAA4C;IAE5C,WAAW,EAAE,OAAO,CAAS;IAE7B,4DAA4D;IAE5D,UAAU,EAAE,MAAM,CAAW;IAE7B,cAAc;IACd,OAAO,CAAC,cAAc,CAAS;IAE/B,cAAc;IAEd,OAAO,CAAC,MAAM,CAAkB;IAEhC,OAAgB,MAAM,EAAE,cAAc,CA0DpC;IAEO,iBAAiB;IAWjB,oBAAoB;IAW7B;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB,SAAS,CAAC,MAAM;IAsChB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;CAM5B"}

package/dist/pd-popup/PdPopup.js

@@ -1,5 +1,5 @@
-import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { LitElement, css, nothing, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import { pdIcons } from '@progressive-development/pd-icon';
 import '@progressive-development/pd-icon/pd-icon';
 
@@ -16,6 +16,12 @@ class PdPopup extends LitElement {
   constructor() {
     super(...arguments);
     this.closeByEscape = false;
+    this.closeByBackdrop = false;
+    this.hideCloseIcon = false;
+    this.blockScroll = false;
+    this.popupLabel = "Popup";
+    /** @ignore */
+    this._scrollBlocked = false;
     this._handleKeyDown = (e) => {
       if (e.key === "Escape") this._closePopup();
     };
@@ -29,7 +35,8 @@ class PdPopup extends LitElement {
 
       .modal {
         position: fixed;
-        z-index: 100;
+        box-sizing: border-box;
+        z-index: var(--pd-popup-z-index, 100);
         left: 0;
         top: 0;
         width: 100%;
@@ -37,34 +44,45 @@ class PdPopup extends LitElement {
         overflow: auto;
         background-color: var(
           --pd-popup-modal-bg-rgba,
-          rgba(175, 193, 210, 0.8)
+          var(--pd-modal-overlay-col)
         );
         display: var(--pd-popup-default-display, none);
-        padding-top: 100px;
+        padding-top: var(--pd-popup-modal-padding-top, 100px);
+        max-width: 100vw;
+        overflow-x: hidden;
       }
 
       .modal-content {
-        background-color: var(--pd-default-bg-col);
-        opacity: 1;
+        background-color: var(--pd-popup-content-bg, var(--pd-default-bg-col));
         margin: auto;
-        padding: var(--pd-popup-modal-padding, 20px);
-        padding-bottom: 130px;
-        border: 2px solid var(--pd-default-col);
-        width: 80%;
-        max-width: 1200px;
+        padding: var(--pd-popup-modal-padding, var(--pd-spacing-md));
+        padding-bottom: var(--pd-popup-modal-padding-bottom, 130px);
+        border: var(--pd-border-width, 1px) solid var(--pd-default-col);
+        border-radius: var(--pd-popup-border-radius, var(--pd-radius-lg));
+        box-shadow: var(--pd-shadow-xl);
+        width: var(--pd-popup-width, 80%);
+        max-width: var(--pd-popup-max-width, 1200px);
+        height: var(--pd-popup-content-height, auto);
         position: relative;
       }
 
       .modal-content-slot {
         max-width: var(--pd-popup-modal-slot-max-width, 1000px);
-        margin: var(--pd-popup-modal-slot-margin, 0 30px);
+        margin: var(--pd-popup-modal-slot-margin, 0 var(--pd-spacing-lg, 2rem));
+        height: 100%;
       }
 
       .close-icon {
         position: absolute;
         cursor: pointer;
-        right: 1.2em;
-        top: 1.2em;
+        right: var(--pd-spacing-md, 1rem);
+        top: var(--pd-spacing-md, 1rem);
+      }
+
+      .close-icon:focus {
+        outline: 2px solid var(--pd-default-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm, 2px);
       }
     `
     ];
@@ -74,12 +92,20 @@ class PdPopup 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;
+    }
   }
   /**
    * Öffnet das Popup programmatisch
@@ -94,19 +120,33 @@ class PdPopup extends LitElement {
     this._closePopup();
   }
   render() {
+    const popupId = `${this.id || "popup"}-content`;
     return html`
       <span @click=${this._activatePopup} @keypress=${this._activatePopup}>
         <slot name="small-view"></slot>
       </span>
 
-      <div id="modalId" class="modal">
-        <div class="modal-content">
-          <pd-icon
-            icon=${pdIcons.ICON_CLOSE}
-            class="close-icon"
-            @click=${this._closePopup}
-          ></pd-icon>
-          <div class="modal-content-slot">
+      <div
+        id="modalId"
+        class="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label="${this.popupLabel}"
+        @click=${this._onBackdropClick}
+      >
+        <div class="modal-content" @click=${this._stopPropagation}>
+          ${this.hideCloseIcon ? nothing : html`
+                <pd-icon
+                  icon=${pdIcons.ICON_CLOSE}
+                  class="close-icon"
+                  tabindex="0"
+                  role="button"
+                  aria-label="Close popup"
+                  @click=${this._closePopup}
+                  @keydown=${this._onCloseIconKeyDown}
+                ></pd-icon>
+              `}
+          <div id="${popupId}" class="modal-content-slot">
             <slot name="content"></slot>
           </div>
         </div>
@@ -114,12 +154,14 @@ class PdPopup extends LitElement {
     `;
   }
   _activatePopup() {
-    const modal = this.shadowRoot?.getElementById("modalId");
-    if (modal) modal.style.display = "block";
+    if (this._modal) this._modal.style.display = "block";
   }
   _closePopup() {
-    const modal = this.shadowRoot?.getElementById("modalId");
-    if (modal) modal.style.display = "none";
+    if (this._modal) this._modal.style.display = "none";
+    if (this._scrollBlocked) {
+      document.body.style.overflow = "";
+      this._scrollBlocked = false;
+    }
     this.dispatchEvent(
       new CustomEvent("popup-close", {
         bubbles: true,
@@ -127,9 +169,38 @@ class PdPopup extends LitElement {
       })
     );
   }
+  _onBackdropClick() {
+    if (this.closeByBackdrop) {
+      this._closePopup();
+    }
+  }
+  _stopPropagation(e) {
+    e.stopPropagation();
+  }
+  _onCloseIconKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._closePopup();
+    }
+  }
 }
 __decorateClass([
   property({ type: Boolean })
 ], PdPopup.prototype, "closeByEscape");
+__decorateClass([
+  property({ type: Boolean })
+], PdPopup.prototype, "closeByBackdrop");
+__decorateClass([
+  property({ type: Boolean })
+], PdPopup.prototype, "hideCloseIcon");
+__decorateClass([
+  property({ type: Boolean })
+], PdPopup.prototype, "blockScroll");
+__decorateClass([
+  property({ type: String })
+], PdPopup.prototype, "popupLabel");
+__decorateClass([
+  query("#modalId")
+], PdPopup.prototype, "_modal");
 
 export { PdPopup };

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

@@ -1,24 +1,58 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    render: ({ smallViewSlot, contentSlot }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        smallViewSlot: {
-            control: "text";
-            description: string;
-            initValue: string;
-        };
-        contentSlot: {
-            control: "text";
-            description: string;
-            initValue: string;
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-popup component.
+ * Maps to the component's public API.
+ */
+interface PdPopupArgs {
+    /** Content for the trigger slot */
+    smallViewSlot: string;
+    /** Content displayed in the popup */
+    contentSlot: string;
+    /** Enable closing with Escape key */
+    closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop overlay */
+    closeByBackdrop: boolean;
+    /** Hide the built-in close icon */
+    hideCloseIcon: boolean;
+    /** Block body scroll when popup is open */
+    blockScroll: boolean;
+    /** Accessible label for the popup */
+    popupLabel: string;
+}
+/**
+ * ## pd-popup
+ *
+ * A modal popup component triggered by clicking a slot element.
+ *
+ * ### Features
+ * - Trigger element via `small-view` slot (click to open)
+ * - Full-screen modal overlay with centered content
+ * - Built-in close icon (keyboard accessible, can be hidden)
+ * - Optional close on Escape key press (`closeByEscape`)
+ * - Optional close on backdrop click (`closeByBackdrop`)
+ * - Programmatic control via `showPopup()` and `hidePopup()` methods
+ * - Body scroll blocking when open (`blockScroll`)
+ * - Accessibility: `role="dialog"`, `aria-modal="true"`, `aria-label`
+ *
+ * ### Accessibility
+ * - Uses `role="dialog"` and `aria-modal="true"` on the modal container
+ * - `aria-label` set via `popupLabel` property
+ * - Close icon is keyboard focusable with `role="button"` and `aria-label`
+ * - Supports Escape key and backdrop click for closing
+ */
+declare const meta: Meta<PdPopupArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const DefaultPopup: Story;
-export declare const LongContent: Story;
-export declare const CustomStyledContent: Story;
+type Story = StoryObj<PdPopupArgs>;
+/** Default popup with simple text content. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Popup with structured HTML content including headings, text, and lists. */
+export declare const RichContent: Story;
+/** Demonstrates the three closing mechanisms: close icon, Escape key, and backdrop click. */
+export declare const ClosingOptions: Story;
+/** Popup with the built-in close icon hidden. Content provides its own close mechanism. */
+export declare const HiddenCloseIcon: Story;
+/** Demonstrates opening and closing the popup programmatically via `showPopup()` / `hidePopup()`. */
+export declare const ProgrammaticControl: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-popup.stories.d.ts.map