@progressive-development/pd-page 0.9.2 → 1.0.1

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

@@ -1,8 +1,48 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn;
-export declare const OhneVersionUndMadeBy: StoryFn;
-export declare const NurLinks: StoryFn;
-export declare const NurMadeByMitLink: StoryFn;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdFooterLink, PdFooterMadeBy } from '../types.js';
+/**
+ * Story arguments interface for pd-footer component.
+ * Maps to the component's public API.
+ */
+interface PdFooterArgs {
+    /** Footer navigation links */
+    footerLinks: PdFooterLink[];
+    /** Copyright text */
+    copyright: string;
+    /** Version string */
+    version: string;
+    /** Developer/agency reference */
+    madeBy?: PdFooterMadeBy;
+}
+/**
+ * ## pd-footer
+ *
+ * Application footer with navigation links, copyright info, version display, and developer reference.
+ *
+ * ### Features
+ * - Configurable footer links with click events
+ * - Copyright text and version string display
+ * - Developer/agency reference with email (mailto:) or external link
+ * - Responsive layout with flex-wrap for links
+ * - Full keyboard accessibility (Tab, Enter, Space on links and madeBy)
+ *
+ * ### Accessibility
+ * - Uses `<nav>` element with `aria-label` for footer navigation landmark
+ * - Footer links use `role="button"` and `tabindex="0"`
+ * - Focus-visible styling for keyboard users
+ * - Made-by link opens in new tab with noopener,noreferrer for security
+ */
+declare const meta: Meta<PdFooterArgs>;
+export default meta;
+type Story = StoryObj<PdFooterArgs>;
+/** Default footer with links, copyright, and version. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Footer with developer/agency reference — email opens mailto:, link opens in new tab. */
+export declare const WithMadeBy: Story;
+/** Minimal footer configurations — different content combinations. */
+export declare const MinimalConfigurations: Story;
+/** Overview of all footer configurations at a glance. */
+export declare const AllVariants: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-footer.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-footer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,gBAAgB,CAAC;wBAcnB,IAAI;AAZT,wBAYU;AAuBV,eAAO,MAAM,OAAO,EAAE,OAA2B,CAAC;AAQlD,eAAO,MAAM,oBAAoB,EAAE,OAA2B,CAAC;AAM/D,eAAO,MAAM,QAAQ,EAAE,OAA2B,CAAC;AAKnD,eAAO,MAAM,gBAAgB,EAAE,OAA2B,CAAC"}
+{"version":3,"file":"pd-footer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,gBAAgB,CAAC;AAMxB;;;GAGG;AACH,UAAU,YAAY;IACpB,8BAA8B;IAC9B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,qBAAqB;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AA+BD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CA8E5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,yFAAyF;AACzF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,2FAA2F;AAC3F,eAAO,MAAM,UAAU,EAAE,KA0CxB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,EAAE,KAkCnC,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,WAAW,EAAE,KA8CzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAgF3B,CAAC"}

package/dist/pd-login/PdLogin.d.ts

@@ -0,0 +1,59 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * Login form component for email/password authentication.
+ *
+ * This is a pure UI component that emits events for login attempts.
+ * The actual authentication logic should be handled by the parent component.
+ *
+ * Supports two views:
+ * - **login**: Default login form with email and password fields.
+ * - **forgot-password**: Password reset request form with email field only.
+ *
+ * @summary Login form with email and password fields, including forgot password flow.
+ *
+ * @tagname pd-login
+ *
+ * @event login-attempt - Fired when user submits valid credentials. Detail: `LoginAttemptDetail`.
+ * @event forgot-password-attempt - Fired when user requests password reset. Detail: `ForgotPasswordAttemptDetail`.
+ *
+ * @cssprop --pd-login-bg-color - Form background color. Default: `var(--pd-default-bg-light-col)`.
+ * @cssprop --pd-login-border-radius - Form border radius. Default: `var(--pd-radius-md)`.
+ * @cssprop --pd-login-max-width - Maximum width of the form. Default: `500px`.
+ * @cssprop --pd-login-padding - Form padding. Default: `1rem 0 1rem 1rem`.
+ */
+export declare class PdLogin extends LitElement {
+    /** Shows loading state on the submit button. */
+    loading: boolean;
+    /** Error message to display. */
+    errorMessage: string;
+    /** Success message to display (e.g., after password reset request). */
+    successMessage: string;
+    /** Hide the forgot password link. */
+    hideForgotPassword: boolean;
+    /** Current view: login form or forgot password form (internal). */
+    private _view;
+    private _validForm;
+    private _forgotPasswordValidForm;
+    private _prefillEmail;
+    /** @ignore */
+    private _formElement;
+    /** @ignore */
+    private _forgotPasswordFormElement;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    private _renderLoginView;
+    private _renderForgotPasswordView;
+    /** Clears the form and resets validation state. */
+    clear(): void;
+    private _handleFormChange;
+    private _handleSubmit;
+    private _handleForgotPassword;
+    private _handleForgotPasswordFormChange;
+    private _handleForgotPasswordSubmit;
+    private _handleBackToLogin;
+    /** Switch to forgot password view. */
+    showForgotPassword(): void;
+    /** Switch back to login view. */
+    showLogin(): void;
+}
+//# sourceMappingURL=PdLogin.d.ts.map

package/dist/pd-login/PdLogin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdLogin.d.ts","sourceRoot":"","sources":["../../src/pd-login/PdLogin.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,mDAAmD,CAAC;AAS3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,gDAAgD;IAEhD,OAAO,UAAS;IAEhB,gCAAgC;IAEhC,YAAY,SAAM;IAElB,uEAAuE;IAEvE,cAAc,SAAM;IAEpB,qCAAqC;IAErC,kBAAkB,UAAS;IAE3B,mEAAmE;IAEnE,OAAO,CAAC,KAAK,CAAwC;IAGrD,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,wBAAwB,CAAS;IAGzC,OAAO,CAAC,aAAa,CAAM;IAE3B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmB;IAEvC,cAAc;IAEd,OAAO,CAAC,0BAA0B,CAAmB;IAErD,OAAgB,MAAM,EAAE,cAAc,CA0CpC;IAEF,MAAM;IAMN,OAAO,CAAC,gBAAgB;IAgExB,OAAO,CAAC,yBAAyB;IAqDjC,mDAAmD;IACnD,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,+BAA+B;IAKvC,OAAO,CAAC,2BAA2B;IAsBnC,OAAO,CAAC,kBAAkB;IAK1B,sCAAsC;IACtC,kBAAkB,IAAI,IAAI;IAM1B,iCAAiC;IACjC,SAAS,IAAI,IAAI;CAGlB"}

package/dist/pd-login/PdLogin.js

@@ -0,0 +1,292 @@
+import { css, LitElement, html } from 'lit';
+import { localized, msg } from '@lit/localize';
+import { property, state, query } from 'lit/decorators.js';
+import '@progressive-development/pd-forms/pd-form-container';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-input';
+import '@progressive-development/pd-forms/pd-panel-button';
+import '@progressive-development/pd-content/pd-notice-box';
+import { pdIcons } from '@progressive-development/pd-icon';
+
+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 PdLogin = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.errorMessage = "";
+    this.successMessage = "";
+    this.hideForgotPassword = false;
+    this._view = "login";
+    this._validForm = false;
+    this._forgotPasswordValidForm = false;
+    this._prefillEmail = "";
+  }
+  render() {
+    return this._view === "login" ? this._renderLoginView() : this._renderForgotPasswordView();
+  }
+  _renderLoginView() {
+    return html`
+      <div class="login-form">
+        ${this.successMessage ? html`<pd-notice-box type="success" variant="sidebar"
+              >${this.successMessage}</pd-notice-box
+            >` : ""}
+
+        <pd-form-container
+          id="loginFormId"
+          @pd-form-change="${this._handleFormChange}"
+          commonError="${this.errorMessage}"
+        >
+          <pd-form-row>
+            <pd-input
+              id="eMail"
+              maxlength="250"
+              fieldType="mail"
+              valueName="email"
+              label="${msg("E-Mail", { id: "pd.login.email.label" })}"
+              autoCompleteName="email"
+              required
+              @enter-pressed="${this._handleSubmit}"
+            ></pd-input>
+          </pd-form-row>
+
+          <pd-form-row>
+            <pd-input
+              id="pWord"
+              secret
+              maxlength="30"
+              label="${msg("Passwort", { id: "pd.login.password.label" })}"
+              valueName="password"
+              autoCompleteName="current-password"
+              required
+              @enter-pressed="${this._handleSubmit}"
+            ></pd-input>
+
+            ${!this.hideForgotPassword ? html`<span class="pwd-link"
+                  ><a href="#" @click="${this._handleForgotPassword}"
+                    >${msg("Passwort vergessen?", {
+      id: "pd.login.forgot.password"
+    })}</a
+                  ></span
+                >` : ""}
+          </pd-form-row>
+        </pd-form-container>
+
+        <pd-form-row>
+          <pd-button
+            text="${msg("Anmelden", { id: "pd.login.submit" })}"
+            icon="${pdIcons.ICON_USER}"
+            ?disabled="${!this._validForm || this.loading}"
+            ?loading="${this.loading}"
+            @button-clicked="${this._handleSubmit}"
+          ></pd-button>
+        </pd-form-row>
+      </div>
+    `;
+  }
+  _renderForgotPasswordView() {
+    return html`
+      <div class="login-form">
+        <pd-notice-box type="info" variant="sidebar">
+          ${msg(
+      "Geben Sie Ihre E-Mail-Adresse ein. Sie erhalten einen Link zum Zurücksetzen Ihres Passworts.",
+      {
+        id: "pd.login.forgot.info"
+      }
+    )}
+        </pd-notice-box>
+
+        <pd-form-container
+          id="forgotPasswordFormId"
+          @pd-form-change="${this._handleForgotPasswordFormChange}"
+          commonError="${this.errorMessage}"
+        >
+          <pd-form-row>
+            <pd-input
+              id="forgotEmail"
+              maxlength="250"
+              fieldType="mail"
+              valueName="email"
+              label="${msg("E-Mail", { id: "pd.login.email.label" })}"
+              autoCompleteName="email"
+              .value="${this._prefillEmail}"
+              required
+              @enter-pressed="${this._handleForgotPasswordSubmit}"
+            ></pd-input>
+
+            <span class="pwd-link">
+              <a href="#" @click="${this._handleBackToLogin}"
+                >${msg("Zurück zur Anmeldung", {
+      id: "pd.login.forgot.back"
+    })}</a
+              >
+            </span>
+          </pd-form-row>
+        </pd-form-container>
+
+        <pd-form-row>
+          <pd-button
+            text="${msg("Link anfordern", { id: "pd.login.forgot.submit" })}"
+            icon="${pdIcons.ICON_MAIL}"
+            ?disabled="${!this._forgotPasswordValidForm || this.loading}"
+            ?loading="${this.loading}"
+            @button-clicked="${this._handleForgotPasswordSubmit}"
+          ></pd-button>
+        </pd-form-row>
+      </div>
+    `;
+  }
+  /** Clears the form and resets validation state. */
+  clear() {
+    this._formElement?.clear();
+    this._validForm = false;
+  }
+  _handleFormChange(e) {
+    this._validForm = e.detail.overallValidity;
+    e.stopPropagation();
+  }
+  _handleSubmit() {
+    if (!this._formElement?.valid || this.loading) {
+      return;
+    }
+    const formValues = this._formElement.getValues().origin;
+    const detail = {
+      email: formValues.email,
+      password: formValues.password
+    };
+    this.dispatchEvent(
+      new CustomEvent("login-attempt", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleForgotPassword(e) {
+    e.preventDefault();
+    const formValues = this._formElement?.getValues()?.origin;
+    this._prefillEmail = formValues?.email || "";
+    this._view = "forgot-password";
+  }
+  _handleForgotPasswordFormChange(e) {
+    this._forgotPasswordValidForm = e.detail.overallValidity;
+    e.stopPropagation();
+  }
+  _handleForgotPasswordSubmit() {
+    if (!this._forgotPasswordFormElement?.valid || this.loading) {
+      return;
+    }
+    const formValues = this._forgotPasswordFormElement.getValues().origin;
+    const detail = {
+      email: formValues.email
+    };
+    this.dispatchEvent(
+      new CustomEvent("forgot-password-attempt", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+    this._view = "login";
+  }
+  _handleBackToLogin(e) {
+    e.preventDefault();
+    this.showLogin();
+  }
+  /** Switch to forgot password view. */
+  showForgotPassword() {
+    const formValues = this._formElement?.getValues()?.origin;
+    this._prefillEmail = formValues?.email || "";
+    this._view = "forgot-password";
+  }
+  /** Switch back to login view. */
+  showLogin() {
+    this._view = "login";
+  }
+};
+PdLogin.styles = [
+  css`
+      :host {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+      }
+
+      .login-form {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        background-color: var(
+          --pd-login-bg-color,
+          var(--pd-default-bg-light-col)
+        );
+        padding: var(--pd-login-padding, 1rem 0 1rem 1rem);
+        border-radius: var(--pd-login-border-radius, var(--pd-radius-md));
+        max-width: var(--pd-login-max-width, 500px);
+        width: 100%;
+      }
+
+      .pwd-link {
+        display: block;
+        padding-bottom: 0.5em;
+        text-align: right;
+        font-size: 0.8em;
+      }
+
+      .pwd-link a {
+        color: var(--pd-default-link-col, inherit);
+        text-decoration: none;
+      }
+
+      .pwd-link a:hover {
+        text-decoration: underline;
+      }
+
+      pd-notice-box {
+        margin-bottom: var(--pd-spacing-md, 1rem);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean })
+], PdLogin.prototype, "loading", 2);
+__decorateClass([
+  property({ type: String })
+], PdLogin.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ type: String })
+], PdLogin.prototype, "successMessage", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdLogin.prototype, "hideForgotPassword", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_view", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_validForm", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_forgotPasswordValidForm", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_prefillEmail", 2);
+__decorateClass([
+  query("#loginFormId")
+], PdLogin.prototype, "_formElement", 2);
+__decorateClass([
+  query("#forgotPasswordFormId")
+], PdLogin.prototype, "_forgotPasswordFormElement", 2);
+PdLogin = __decorateClass([
+  localized()
+], PdLogin);
+
+export { PdLogin };

package/dist/pd-login/pd-login.d.ts

@@ -0,0 +1,3 @@
+import { PdLogin } from './PdLogin.js';
+export { PdLogin };
+//# sourceMappingURL=pd-login.d.ts.map

package/dist/pd-login/pd-login.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-login.d.ts","sourceRoot":"","sources":["../../src/pd-login/pd-login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-login component.
+ * Maps to the component's public API.
+ */
+interface PdLoginArgs {
+    /** Shows loading state on the submit button */
+    loading: boolean;
+    /** Error message to display above the form */
+    errorMessage: string;
+    /** Success message to display above the form */
+    successMessage: string;
+    /** Hide the forgot password link */
+    hideForgotPassword: boolean;
+}
+/**
+ * ## pd-login
+ *
+ * Login form component for email/password authentication with a built-in forgot password flow.
+ *
+ * ### Features
+ * - Email and password fields with built-in validation (via pd-form-container)
+ * - Loading state that disables the submit button and shows a spinner
+ * - Error and success message display via pd-notice-box
+ * - Built-in forgot password view with automatic email prefill
+ * - Enter key submits the form from any input field
+ * - Localized labels via @lit/localize
+ *
+ * ### Views
+ * - **login**: Default form with email, password, and forgot password link
+ * - **forgot-password**: Password reset form with email field only
+ *
+ * ### Accessibility
+ * - Uses pd-form-container for proper form semantics and validation
+ * - Submit button disabled until form is valid (prevents empty submissions)
+ * - Loading state uses aria-busy on the button
+ * - Error messages displayed in pd-notice-box for screen reader visibility
+ */
+declare const meta: Meta<PdLoginArgs>;
+export default meta;
+type Story = StoryObj<PdLoginArgs>;
+/** Default login form with standard labels. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Overview of all login form states — default, loading, error, success, and no forgot password. */
+export declare const AllStates: Story;
+/** Forgot password view — demonstrates the built-in password reset flow. */
+export declare const ForgotPasswordFlow: Story;
+/**
+ * Interactive login with simulated authentication.
+ * Use test@example.com / password123 for success, anything else for error.
+ */
+export declare const InteractiveDemo: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-login.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-login.stories.d.ts","sourceRoot":"","sources":["../../src/pd-login/pd-login.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAOrE,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,cAAc,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AA8BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAsF3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,+EAA+E;AAC/E,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,oGAAoG;AACpG,eAAO,MAAM,SAAS,EAAE,KAkDvB,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,EAAE,KAwChC,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA+C7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAkE3B,CAAC"}

package/dist/pd-login.d.ts

@@ -0,0 +1,2 @@
+export * from './pd-login/pd-login'
+export {}

package/dist/pd-login.js

@@ -0,0 +1,8 @@
+import { PdLogin } from './pd-login/PdLogin.js';
+
+const tag = "pd-login";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdLogin);
+}
+
+export { PdLogin };

package/dist/pd-menu/PdMenu.d.ts

@@ -1,70 +1,102 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdMenuItem } from '../types.js';
+import { ButtonData } from '@progressive-development/pd-forms';
 /**
- * Menü-Komponente zur Navigation in der Anwendung.
+ * Application navigation menu with responsive burger menu.
  *
- * @fires route-event – Wird ausgelöst, wenn ein Menüpunkt mit Route geklickt wird
- * @fires locale-change – Wird ausgelöst, wenn die Sprache gewechselt wird
+ * @summary Responsive navigation menu with scroll-to-section and language selector.
  *
- * @slot slotLogo – Slot für das App-Logo
  * @tagname pd-menu
+ *
+ * @event route-event - Fired when a menu item with route is clicked.
+ * @event locale-change - Fired when language is changed.
+ * @event section-activated - Fired when the active section changes during scroll. Detail: `{ sectionId }`.
+ *
+ * @slot slotLogo - Slot for application logo.
+ *
+ * @cssprop --pd-menu-height - Menu height. Default: `100px`.
+ * @cssprop --pd-menu-bg-col - Menu background. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-menu-shadow - Menu shadow. Default: `var(--pd-shadow-lg)`.
+ * @cssprop --pd-menu-border-radius - Menu border radius. Default: `0`.
+ * @cssprop --pd-menu-max-width - Max menu container width. Default: `var(--pd-content-max-width, 1170px)`.
+ * @cssprop --pd-menu-font-col - Menu text color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-menu-font-family - Menu font family. Default: `var(--pd-default-font-title-family)`.
+ * @cssprop --pd-menu-font-size - Menu font size. Default: `1.2em`.
+ * @cssprop --pd-menu-font-weight - Menu font weight. Default: `bold`.
+ * @cssprop --pd-menu-item-padding - Menu item padding. Default: `0.6em`.
+ * @cssprop --pd-menu-item-bg-hover-col - Item hover background.
+ * @cssprop --pd-menu-burger-bg-col - Burger menu background. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-menu-burger-bottomborder - Burger menu bottom border.
+ * @cssprop --pd-menu-burger-top - Burger menu top offset. Default: `var(--pd-menu-height)`.
+ * @cssprop --pd-menu-burger-font-col - Burger menu text color. Default: `var(--pd-default-font-link-col)`.
+ * @cssprop --pd-menu-logo-maxwidth - Logo max width. Default: `8rem`.
+ * @cssprop --pd-menu-logo-padding - Logo padding. Default: `2em`.
+ * @cssprop --pd-menu-logo-color - Logo fill color. Default: `#067394`.
  */
 export declare class PdMenu extends LitElement {
-    /**
-     * Aktuelle aktive Route (zur Hervorhebung)
-     */
+    /** Currently active route for highlighting. */
     activeRoute: string;
-    /**
-     * Aktuell ausgewählte Sprache
-     */
+    /** Currently selected language (value from ButtonData). */
     selectedLocale: string;
-    /**
-     * Aktuell ausgewählte Sprache
-     */
+    /** Route to navigate on logo click. */
     logoRoute?: string;
-    /**
-     * Liste verfügbarer Sprachen
-     */
-    locales: string[];
-    /**
-     * Hauptmenüeinträge
-     */
+    /** Available language options with text (display) and value (locale code). */
+    locales: ButtonData[];
+    /** Main menu entries. */
     menuItems: PdMenuItem[];
-    /**
-     * Zusätzliche Einträge in der oberen Menüzeile
-     */
+    /** Additional entries in top menu. */
     topMenuItems: PdMenuItem[];
-    /**
-     * Flag, ob Burger-Menü deaktiviert ist
-     */
+    /** Disable responsive burger menu. */
     noBurgerMenu: boolean;
-    /**
-     * Größe des Headers (für Scroll-Berechnung)
-     */
-    headerSize: number;
     /**
      * Index des aktiven Inhaltsbereichs (bei Scroll)
-     */
+     * @ignore */
     private _activeSecIndex;
     /**
      * Burger-Menü aktiv?
-     */
+     * @ignore */
     private _activeBurgerMenu;
-    /**
-     * Sprachmenü aktiv?
-     */
-    private _activeLocaleMenu;
     /**
      * Zeige mobile Ansicht?
-     */
+     * @ignore */
     private _smallScreen;
+    /** @ignore */
+    private _mediaQueryList?;
+    /** @ignore */
+    private _boundScrollHandler;
+    /** @ignore */
+    private _boundMediaQueryHandler;
     static styles: CSSResultGroup;
-    protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _ticking;
+    private _handleScroll;
+    private _handleMediaQuery;
+    private _updateActiveSection;
     render(): import('lit').TemplateResult<1>;
     private _renderItems;
+    /**
+     * Handles keyboard events on menu items.
+     */
+    private _handleMenuItemKeydown;
+    /**
+     * Handles keyboard events on burger menu toggle.
+     */
+    private _handleBurgerKeydown;
     private _toggleBurgerMenu;
-    private _toggleLocaleSelection;
-    private _localeClicked;
+    /**
+     * Returns the index of the currently selected locale in the locales array.
+     */
+    private _getSelectedLocaleIndex;
+    /**
+     * Returns compact locale options for mobile display.
+     * Uses shortText if available, otherwise falls back to text.
+     */
+    private _getCompactLocales;
+    /**
+     * Handles locale selection change from PdButtonSelectGroup.
+     */
+    private _handleLocaleChange;
     private _menuItemClicked;
     private _logoClicked;
     private static _scrollToTop;

package/dist/pd-menu/PdMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdMenu.d.ts","sourceRoot":"","sources":["../../src/pd-menu/PdMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C;;;;;;;;GAQG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,OAAO,EAAE,MAAM,EAAE,CAAM;IAEvB;;OAEG;IAEH,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B;;OAEG;IAEH,YAAY,EAAE,UAAU,EAAE,CAAM;IAEhC;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,SAAK;IAEf;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAK;IAE5B;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAS;IAElC;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAS;IAElC;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAgB,MAAM,EAAE,cAAc,CAuOpC;IAEF,SAAS,CAAC,YAAY;IAmCtB,MAAM;IAqEN,OAAO,CAAC,YAAY;IAiCpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,MAAM,CAAC,YAAY;CAG5B"}
+{"version":3,"file":"PdMenu.d.ts","sourceRoot":"","sources":["../../src/pd-menu/PdMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D,OAAO,0CAA0C,CAAC;AAClD,OAAO,0DAA0D,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,+CAA+C;IAE/C,WAAW,SAAM;IAEjB,2DAA2D;IAE3D,cAAc,SAAM;IAEpB,uCAAuC;IAEvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8EAA8E;IAE9E,OAAO,EAAE,UAAU,EAAE,CAAM;IAE3B,yBAAyB;IAEzB,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B,sCAAsC;IAEtC,YAAY,EAAE,UAAU,EAAE,CAAM;IAEhC,sCAAsC;IAEtC,YAAY,UAAS;IAErB;;iBAEa;IAEb,OAAO,CAAC,eAAe,CAAK;IAE5B;;iBAEa;IAEb,OAAO,CAAC,iBAAiB,CAAS;IAElC;;iBAEa;IAEb,OAAO,CAAC,YAAY,CAAS;IAE7B,cAAc;IACd,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,cAAc;IACd,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,cAAc;IACd,OAAO,CAAC,uBAAuB,CAAqC;IAEpE,OAAgB,MAAM,EAAE,cAAc,CAgOpC;IAEO,iBAAiB;IAiBjB,oBAAoB;IAe7B,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IA0D5B,MAAM;IAqFN,OAAO,CAAC,YAAY;IAgCpB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAO9B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAI/B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAO1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,gBAAgB;IA8CxB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,MAAM,CAAC,YAAY;CAG5B"}