@progressive-development/pd-wizard 0.9.1 → 1.0.0

package/dist/pd-wizard/pd-steps/PdSteps.js

@@ -1,6 +1,8 @@
 import { LitElement, css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg, str } from '@lit/localize';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,15 +22,20 @@ class PdSteps extends LitElement {
   }
   static {
     this.styles = [
-      PdColorStyles,
-      PdFontStyles,
       css`
+      /* =========================================================================
+         HOST & LAYOUT
+         ========================================================================= */
       :host {
-        --circle-size: var(--pd-step-circle-size, 40px);
+        --_circle-size: var(--pd-step-circle-size, 40px);
+        --_name-font-size: var(--pd-step-name-font-size, 0.9em);
+        --_color: var(--pd-step-color, var(--pd-on-primary-col));
+        --_bg: var(--pd-step-bg, var(--pd-default-col));
+
         display: block;
-        background-color: var(--pd-steps-bg-color, var(--pd-default-col));
-        padding-top: var(--pd-step-padding-top, 0.5em);
-        padding-bottom: calc(var(--pd-step-name-font-size, 1em) * 2.5);
+        background-color: var(--_bg);
+        padding-top: 0.5em;
+        padding-bottom: calc(var(--_name-font-size) * 2.5);
       }
 
       .parent {
@@ -38,6 +45,9 @@ class PdSteps extends LitElement {
         position: relative;
       }
 
+      /* =========================================================================
+         STEP CONTAINER (state holder)
+         ========================================================================= */
       .step-container {
         display: flex;
         flex-direction: column;
@@ -48,81 +58,108 @@ class PdSteps extends LitElement {
         position: relative;
       }
 
-      .step.circle {
-        width: var(--circle-size);
-        height: var(--circle-size);
+      /* =========================================================================
+         CIRCLE (the clickable step indicator)
+         ========================================================================= */
+      .step {
+        width: var(--_circle-size);
+        height: var(--_circle-size);
         border-radius: 50%;
-        border: solid var(--pd-step-circle-border-size, 2px)
-          var(--pd-step-circle-border-color, white);
-        background-color: var(--pd-step-circle-bg-color, var(--pd-default-col));
+        border: solid 2px var(--_color);
+        background-color: var(--_bg);
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
-        z-index: 51; /* Ensure the circle is above the hr line */
+        z-index: 51;
       }
 
-      /* Dynamische Schriftgröße der Nummer */
+      /* =========================================================================
+         STEP NUMBER (inside circle)
+         ========================================================================= */
       .step-nr {
         font-family: var(--pd-default-font-title-family);
         font-weight: bold;
-        color: var(--pd-step-circle-nr-color, white);
-        font-size: calc(var(--circle-size) / 1.8);
+        font-size: calc(var(--_circle-size) / 1.8);
+        color: var(--_color);
         position: absolute;
         pointer-events: none;
       }
 
+      /* =========================================================================
+         CONNECTING LINE
+         ========================================================================= */
       hr {
-        background-color: var(--pd-step-hr-color, white);
+        background-color: var(--_color);
         height: 2px;
         position: absolute;
         top: 50%;
         left: 0;
         width: 100%;
         z-index: 50;
-        border-style: none;
-        border-width: 0;
+        border: none;
         margin: 0;
       }
 
+      /* =========================================================================
+         STEP NAME (below circle)
+         ========================================================================= */
       .step-name {
         font-family: var(--pd-default-font-title-family);
-        color: var(--pd-step-name-color, white);
-        font-size: var(--pd-step-name-font-size, 1em);
         font-weight: bold;
+        font-size: var(--_name-font-size);
+        color: var(--_color);
         position: absolute;
-        top: calc(
-          var(--circle-size) + (var(--pd-step-name-font-size, 1em) / 2)
-        );
-      }
-
-      .current {
-        color: var(--pd-step-color-current, var(--pd-default-hover-col));
+        top: calc(var(--_circle-size) + (var(--_name-font-size) / 2));
       }
 
-      .step.circle.current {
-        border-color: var(--pd-step-color-current, var(--pd-default-hover-col));
+      /* =========================================================================
+         STATE: CURRENT
+         ========================================================================= */
+      .step-container.current .step {
+        border-color: var(--pd-step-current-color, var(--pd-default-hover-col));
       }
 
-      .passed {
-        color: var(--pd-step-color-passed, var(--pd-default-dark-col));
+      .step-container.current .step-nr,
+      .step-container.current .step-name {
+        color: var(--pd-step-current-color, var(--pd-default-hover-col));
       }
 
-      .step.circle.passed {
-        border-color: var(
-          --pd-step-color-passed,
-          var(--pd-default-success-col)
+      /* =========================================================================
+         STATE: PASSED
+         ========================================================================= */
+      .step-container.passed .step {
+        border-color: var(--pd-default-success-col);
+        background-color: var(
+          --pd-step-passed-bg,
+          var(--pd-default-success-light-col)
         );
-        background-color: var(--pd-default-success-light-col);
         cursor: pointer;
       }
 
+      .step-container.passed .step-nr {
+        color: var(--pd-step-passed-nr-color, var(--pd-default-col));
+      }
+
+      /* passed name uses default --_color (same as pending) */
+
+      .step-container.passed .step:hover {
+        transform: scale(1.1);
+        transition: transform 0.15s ease-in-out;
+      }
+
+      .step-container.passed .step:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-hover-col));
+        outline-offset: 2px;
+      }
+
+      /* =========================================================================
+         RESPONSIVE
+         ========================================================================= */
       @media (max-width: 700px) {
         :host {
-          --circle-size: 30px;
-        }
-        .step-name {
-          font-size: 0.9em;
+          --_circle-size: var(--pd-step-circle-size, 30px);
+          --_name-font-size: var(--pd-step-name-font-size, 0.8em);
         }
       }
     `
@@ -133,35 +170,45 @@ class PdSteps extends LitElement {
   }
   _renderCircle() {
     return html`
-      <div class="parent ${this.styleTyp}">
-        ${this.styleTyp === "circle" ? html`<hr />` : ""}
+      <div
+        class="parent"
+        role="list"
+        aria-label="${msg("Wizard-Schritte", { id: "pd.steps.aria.label" })}"
+      >
+        <hr />
         ${this.steps.map((st, index) => {
       const stepNr = index + 1;
       const isCurrent = this.currentStepNr === stepNr;
       const isPassed = this.currentStepNr > stepNr;
-      const classNames = [
-        "step",
-        this.styleTyp,
-        isCurrent ? "current" : isPassed ? "passed" : ""
-      ].join(" ");
-      const nrClassNames = [
-        "step-nr",
-        isCurrent ? "current" : isPassed ? "passed" : ""
-      ].join(" ");
-      const nameClassNames = [
-        "step-name",
-        isCurrent ? "current" : isPassed ? "passed" : ""
-      ].join(" ");
+      const containerClasses = classMap({
+        "step-container": true,
+        current: isCurrent,
+        passed: isPassed
+      });
+      const stepLabel = isPassed ? msg(
+        str`Schritt ${stepNr}: ${st.name ?? ""} - abgeschlossen, klicken um zurückzukehren`,
+        { id: "pd.steps.aria.passed" }
+      ) : isCurrent ? msg(
+        str`Schritt ${stepNr}: ${st.name ?? ""} - aktueller Schritt`,
+        { id: "pd.steps.aria.current" }
+      ) : msg(str`Schritt ${stepNr}: ${st.name ?? ""} - ausstehend`, {
+        id: "pd.steps.aria.pending"
+      });
       return html`
-            <div class="step-container">
+            <div class="${containerClasses}" role="listitem">
               <div
-                class="${classNames}"
+                class="step"
                 data-step="${stepNr}"
-                @click=${this._stepClicked}
+                tabindex="${isPassed ? "0" : "-1"}"
+                role="${ifDefined(isPassed ? "button" : void 0)}"
+                aria-label="${stepLabel}"
+                aria-current="${ifDefined(isCurrent ? "step" : void 0)}"
+                @click="${this._stepClicked}"
+                @keydown="${this._handleStepKeydown}"
               >
-                <span class="${nrClassNames}">${stepNr}</span>
+                <span class="step-nr" aria-hidden="true">${stepNr}</span>
               </div>
-              <span class="${nameClassNames}">${st.name}</span>
+              <span class="step-name" aria-hidden="true">${st.name}</span>
             </div>
           `;
     })}
@@ -170,6 +217,23 @@ class PdSteps extends LitElement {
   }
   _stepClicked(e) {
     const stepStr = e.currentTarget.dataset.step;
+    this._navigateToStep(stepStr);
+  }
+  /**
+   * Handles keyboard events on step circles.
+   * Activates on Enter or Space key.
+   */
+  _handleStepKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const stepStr = e.currentTarget.dataset.step;
+      this._navigateToStep(stepStr);
+    }
+  }
+  /**
+   * Navigates to a specific step if it's a passed step.
+   */
+  _navigateToStep(stepStr) {
     const step = Number(stepStr);
     if (!isNaN(step) && step < this.currentStepNr) {
       this.dispatchEvent(

package/dist/pd-wizard/pd-steps/pd-steps.stories.d.ts

@@ -1,42 +1,50 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    tags: string[];
-    render: ({ steps, currentStepNr, styleTyp }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        steps: {
-            control: "object";
-        };
-        currentStepNr: {
-            control: {
-                type: "number";
-                min: number;
-                max: number;
-            };
-        };
-        styleTyp: {
-            control: "select";
-            options: string[];
-        };
-    };
-};
-export default meta;
-type Story = StoryObj;
-/**
- * Standard-Zustand mit mehreren Schritten und aktuellem Schritt
- */
-export declare const DefaultSteps: Story;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdWizardStep } from '../../types.js';
 /**
- * Variante mit anderem Layout-Stil (tab), nur zwei Schritte
+ * Story arguments interface for pd-steps component.
+ * Maps to the component's public API.
  */
-export declare const TabSteps: Story;
+interface PdStepsArgs {
+    /** Step definitions with names */
+    steps: PdWizardStep[];
+    /** Current visible step (1-based) */
+    currentStepNr: number;
+    /** Display mode: circle or tab */
+    styleTyp: "circle" | "tab";
+}
 /**
- * Zeigt die erste Stufe als aktiv
+ * ## pd-steps
+ *
+ * A progress indicator component that displays wizard steps as numbered circles
+ * with connecting lines, showing current, passed, and future states.
+ *
+ * ### Features
+ * - Circle-style step indicators with numbered circles and connecting line
+ * - Three visual states: current (accent color), passed (green, clickable), and pending
+ * - Click navigation on passed steps to go back
+ * - Full keyboard accessibility on passed step circles
+ * - Responsive sizing for smaller screens
+ * - Step name labels displayed below each circle
+ * - CSS Custom Properties for circle size, colors, and font sizes
+ *
+ * ### Accessibility
+ * - Uses `role="list"` / `role="listitem"` for semantic step structure
+ * - Passed steps have `role="button"` and are keyboard focusable
+ * - `aria-current="step"` marks the current step
+ * - Each step has a descriptive `aria-label` with state information
+ * - Focus-visible styling on interactive passed steps
  */
-export declare const FirstStepActive: Story;
-/**
- * Zeigt alle Schritte als "abgeschlossen"
- */
-export declare const AllStepsPassed: Story;
+declare const meta: Meta<PdStepsArgs>;
+export default meta;
+type Story = StoryObj<PdStepsArgs>;
+/** Default step indicator with four steps, second step active. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All step states shown in one overview: first step, middle step, last step, and all passed. */
+export declare const AllStates: Story;
+/** Six steps demonstrating how the indicator handles a larger number of steps. */
+export declare const ManySteps: Story;
+/** Tab-style display variant (alternative to circle style). */
+export declare const TabStyle: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-steps.stories.d.ts.map

package/dist/pd-wizard/pd-steps/pd-steps.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-steps.stories.d.ts","sourceRoot":"","sources":["../../../src/pd-wizard/pd-steps/pd-steps.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,eAAe,CAAC;AAEvB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAuBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC"}
+{"version":3,"file":"pd-steps.stories.d.ts","sourceRoot":"","sources":["../../../src/pd-wizard/pd-steps/pd-steps.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,kCAAkC;IAClC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC5B;AAgCD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA0F3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,kGAAkG;AAClG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,iGAAiG;AACjG,eAAO,MAAM,SAAS,EAAE,KAwDvB,CAAC;AAMF,kFAAkF;AAClF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAC"}

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

@@ -1,12 +1,51 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 import { PdWizardStep } from '../types.js';
-type WizardArgs = {
+/**
+ * Story arguments interface for pd-wizard component.
+ * Maps to the component's public API.
+ */
+interface PdWizardArgs {
+    /** List of wizard step definitions */
     wizardSteps: PdWizardStep[];
+    /** Current step number (1-based index) */
     currentNumber: number;
-};
-declare const meta: Meta<WizardArgs>;
+}
+/**
+ * ## pd-wizard
+ *
+ * A multi-step wizard UI component with navigation, progress tracking, and submit handling.
+ *
+ * ### Features
+ * - Step navigation with Back/Next buttons and automatic visibility
+ * - Visual progress indicator via integrated pd-steps component
+ * - Dynamic step content via named slots (step-1, step-2, etc.)
+ * - Submit handling on final step with disabled-after-submit protection
+ * - Close button with keyboard accessibility (Enter/Space)
+ * - CSS Parts for full styling control (`::part(header)`, `::part(content)`, `::part(buttons)`)
+ * - CSS Custom Properties for token-based theming
+ * - Responsive padding adjustments for mobile screens
+ *
+ * ### Accessibility
+ * - Close icon is keyboard-focusable with `role="button"` and `aria-label`
+ * - Focus-visible styling on close icon for keyboard users
+ * - Back/Next buttons use native `<pd-button>` with full keyboard support
+ * - Step indicator supports keyboard navigation for passed steps
+ */
+declare const meta: Meta<PdWizardArgs>;
 export default meta;
-type Story = StoryObj<WizardArgs>;
-export declare const Wizard: Story;
-export declare const WizardPanel: Story;
+type Story = StoryObj<PdWizardArgs>;
+/** Default wizard with four steps at the first step. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Wizard navigated to the second step, showing Back and Next buttons. */
+export declare const MiddleStep: Story;
+/** Wizard at the final step with the Submit button replacing Next. */
+export declare const FinalStep: Story;
+/** A shorter wizard with three steps, demonstrating flexible step count. */
+export declare const ThreeSteps: Story;
+/** Default scroll behavior — content scrolls within fixed wizard height. */
+export declare const ScrollableContent: Story;
+/** Growing wizard — wizard expands with content, no internal scroll. */
+export declare const GrowingContent: Story;
+/** CSS Custom Properties and CSS Parts — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-wizard.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-wizard.stories.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/pd-wizard.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,gBAAgB,CAAC;AAExB,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA2B1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkEzB,CAAC"}
+{"version":3,"file":"pd-wizard.stories.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/pd-wizard.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,gBAAgB,CAAC;AAMxB;;;GAGG;AACH,UAAU,YAAY;IACpB,sCAAsC;IACtC,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,0CAA0C;IAC1C,aAAa,EAAE,MAAM,CAAC;CACvB;AAuBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAuH5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,wFAAwF;AACxF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAC;AA2BF,4EAA4E;AAC5E,eAAO,MAAM,iBAAiB,EAAE,KAsC/B,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,cAAc,EAAE,KAqC5B,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,aAAa,EAAE,KA+I3B,CAAC"}

package/dist/wizard-close-popup/WizardClosePopup.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup } from 'lit';
+import { PdConfirmDialog, PdDialogType } from '@progressive-development/pd-dialog';
+export declare class WizardClosePopup extends PdConfirmDialog {
+    protected _singleButton: boolean;
+    protected _dialogType: PdDialogType;
+    protected _dialogTitle: string;
+    /** Whether local storage persistence is enabled */
+    withStorage: boolean;
+    static styles: CSSResultGroup;
+    protected _renderContent(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=WizardClosePopup.d.ts.map

package/dist/wizard-close-popup/WizardClosePopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardClosePopup.d.ts","sourceRoot":"","sources":["../../src/wizard-close-popup/WizardClosePopup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,oCAAoC,CAAC;AAE5C,qBACa,gBAAiB,SAAQ,eAAe;IACnD,SAAS,CAAC,aAAa,UAAS;IAEhC,SAAS,CAAC,WAAW,EAAE,YAAY,CAAU;IAE7C,SAAS,CAAC,YAAY,SAEnB;IAEH,mDAAmD;IAEnD,WAAW,UAAS;IAEpB,MAAM,CAAC,MAAM,EAQR,cAAc,CAAC;IAEpB,SAAS,CAAC,cAAc;CAezB"}

package/dist/wizard-close-popup/WizardClosePopup.js

@@ -0,0 +1,56 @@
+import { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { PdConfirmDialog } from '@progressive-development/pd-dialog';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let WizardClosePopup = class extends PdConfirmDialog {
+  constructor() {
+    super(...arguments);
+    this._singleButton = false;
+    this._dialogType = "warn";
+    this._dialogTitle = msg("Änderungen verwerfen?", {
+      id: "pdWizard.close.popup.title"
+    });
+    this.withStorage = false;
+  }
+  _renderContent() {
+    return html`
+      <div class="popup-content">
+        <p>
+          ${this.withStorage ? msg("Eingaben für später speichern oder verwerfen?", {
+      id: "pdWizard.close.popup.storage.content"
+    }) : msg("Nicht gespeicherte Daten gehen verloren.", {
+      id: "pdWizard.close.popup.noStorage.content"
+    })}
+        </p>
+      </div>
+    `;
+  }
+};
+WizardClosePopup.styles = [
+  PdConfirmDialog.styles,
+  css`
+      .popup-content {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean })
+], WizardClosePopup.prototype, "withStorage", 2);
+WizardClosePopup = __decorateClass([
+  customElement("wizard-close-popup")
+], WizardClosePopup);
+
+export { WizardClosePopup };

package/dist/wizard-close-popup/wizard-close-popup.d.ts

@@ -0,0 +1,2 @@
+export { WizardClosePopup } from './WizardClosePopup.js';
+//# sourceMappingURL=wizard-close-popup.d.ts.map

package/dist/wizard-close-popup/wizard-close-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-close-popup.d.ts","sourceRoot":"","sources":["../../src/wizard-close-popup/wizard-close-popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/wizard-close-popup/wizard-close-popup.stories.d.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for wizard-close-popup component.
+ * Maps to the component's public API.
+ */
+interface WizardClosePopupArgs {
+    /** Whether local storage persistence is enabled */
+    withStorage: boolean;
+    /** Text for the confirm button */
+    confirmButtonText: string;
+    /** Text for the cancel button */
+    cancelButtonText: string;
+}
+/**
+ * ## wizard-close-popup
+ *
+ * A confirmation dialog shown when a user attempts to close a wizard with unsaved changes.
+ * Extends PdConfirmDialog with warning-style presentation.
+ *
+ * ### Features
+ * - Warning dialog type for visual emphasis on data loss
+ * - Two modes: with storage (save/discard) and without storage (close/cancel)
+ * - Customizable button texts via properties
+ * - Inherits full PdConfirmDialog behavior and styling
+ *
+ * ### Usage
+ * This component is typically used internally by DefaultWizard.
+ * It is instantiated programmatically when the close-wizard event fires.
+ */
+declare const meta: Meta<WizardClosePopupArgs>;
+export default meta;
+type Story = StoryObj<WizardClosePopupArgs>;
+/** Default close popup without storage — warns about losing unsaved data. */
+export declare const Default: Story;
+/** Close popup with storage enabled — offers save/discard options. */
+export declare const WithStorage: Story;
+/** Side-by-side comparison of both modes: without and with storage. */
+export declare const BothModes: Story;
+//# sourceMappingURL=wizard-close-popup.stories.d.ts.map

package/dist/wizard-close-popup/wizard-close-popup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-close-popup.stories.d.ts","sourceRoot":"","sources":["../../src/wizard-close-popup/wizard-close-popup.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,uBAAuB,CAAC;AAM/B;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,mDAAmD;IACnD,WAAW,EAAE,OAAO,CAAC;IACrB,kCAAkC;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAMD;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAqEpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAM5C,6EAA6E;AAC7E,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAMF,uEAAuE;AACvE,eAAO,MAAM,SAAS,EAAE,KAkCvB,CAAC"}

package/dist/wizard-close-popup.d.ts

@@ -0,0 +1,2 @@
+export * from './wizard-close-popup/wizard-close-popup'
+export {}

package/dist/wizard-close-popup.js

@@ -0,0 +1 @@
+export { WizardClosePopup } from './wizard-close-popup/WizardClosePopup.js';

package/dist/wizard-reload-popup/WizardReloadPopup.d.ts

@@ -0,0 +1,19 @@
+import { CSSResultGroup } from 'lit';
+import { PdConfirmDialog, PdDialogType } from '@progressive-development/pd-dialog';
+/** Reload item data from storage */
+export interface WizardReloadItem {
+    /** Timestamp when data was saved */
+    timestamp: string;
+    /** Step number where user left off */
+    wizardStep: number;
+}
+export declare class WizardReloadPopup extends PdConfirmDialog {
+    protected _singleButton: boolean;
+    protected _dialogType: PdDialogType;
+    protected _dialogTitle: string;
+    /** Saved wizard state to display */
+    reloadItem: WizardReloadItem;
+    static styles: CSSResultGroup;
+    protected _renderContent(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=WizardReloadPopup.d.ts.map

package/dist/wizard-reload-popup/WizardReloadPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardReloadPopup.d.ts","sourceRoot":"","sources":["../../src/wizard-reload-popup/WizardReloadPopup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,mDAAmD,CAAC;AAE3D,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,oCAAoC,CAAC;AAO5C,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,qBACa,iBAAkB,SAAQ,eAAe;IACpD,SAAS,CAAC,aAAa,UAAS;IAEhC,SAAS,CAAC,WAAW,EAAE,YAAY,CAAU;IAE7C,SAAS,CAAC,YAAY,SAEnB;IAEH,oCAAoC;IAEpC,UAAU,EAAG,gBAAgB,CAAC;IAE9B,MAAM,CAAC,MAAM,EA0BR,cAAc,CAAC;IAEpB,SAAS,CAAC,cAAc;CA4BzB"}