@progressive-development/pd-content 1.0.2 → 1.1.0

package/dist/pd-badge-order/pd-badge-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-badge-item.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/pd-badge-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/pd-badge-order/pd-badge-item.js

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

package/dist/pd-badge-order/pd-badge-order.d.ts

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

package/dist/pd-badge-order/pd-badge-order.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-badge-order.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/pd-badge-order.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/pd-badge-order/types.d.ts

@@ -0,0 +1,25 @@
+export interface PdBadge {
+    /** Unique badge ID */
+    id: string;
+    /** Display title (max TEXT_LIMIT_TITLE characters) */
+    title: string;
+    /** Optional description below title (max TEXT_LIMIT_DESC characters) */
+    description?: string;
+    /** Optional color (hex or CSS color name) */
+    color?: string;
+    /** Optional icon name from pd-icon library */
+    icon?: string;
+    /** Marks user-created badges (only these are deletable) */
+    custom?: boolean;
+}
+export interface PdBadgeChangeDetail {
+    value: string[];
+    badges: PdBadge[];
+}
+export interface PdBadgeReorderDetail {
+    value: string[];
+}
+export declare const TEXT_LIMIT_TITLE = 40;
+export declare const TEXT_LIMIT_DESC = 100;
+export declare const DEFAULT_BADGE_COLOR = "#9E9E9E";
+//# sourceMappingURL=types.d.ts.map

package/dist/pd-badge-order/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/pd-badge-order/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,sBAAsB;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,mBAAmB,YAAY,CAAC"}

package/dist/pd-badge-order/types.js

@@ -0,0 +1,3 @@
+const DEFAULT_BADGE_COLOR = "#9E9E9E";
+
+export { DEFAULT_BADGE_COLOR };

package/dist/pd-badge-order.d.ts

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

package/dist/pd-badge-order.js

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

package/dist/pd-loading-state/PdLoadingState.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, CSSResultGroup } from 'lit';
+import { LitElement, CSSResultGroup, nothing } from 'lit';
 /**
  * Sub-task item for loading state progress tracking.
  */
@@ -13,6 +13,7 @@ export interface LoadingSubTask {
 /**
  * Loading state configuration object.
  */
+export type LoaderStyle = "spinner" | "dots" | "pulse" | "logo";
 export interface LoadingState {
     /** Timestamp when loading started */
     creation?: Date;
@@ -28,6 +29,8 @@ export interface LoadingState {
     loadingTxt?: string;
     /** Optional sub-tasks to display progress */
     subTask?: LoadingSubTask[];
+    /** Override loader style for this specific action */
+    loaderStyle?: LoaderStyle;
 }
 /**
  * Loading state indicator component with modal and background modes.
@@ -38,13 +41,13 @@ export interface LoadingState {
  * @slot - Default slot (unused, component renders based on loadingState property)
  *
  * @cssprop --pd-popup-modal-bg-rgba - Modal overlay background color. Default: `rgba(175, 193, 210, 0.8)`.
- * @cssprop --pd-loading-state-background-bg - Background mode container color. Default: `white`.
- * @cssprop --pd-loading-state-bg-col - Content box background. Default: `#edf7fd`.
- * @cssprop --pd-loading-state-border-col - Content box border color. Default: `var(--pd-default-col)`.
- * @cssprop --pd-loading-state-completed-col - Completed sub-task icon color. Default: `green`.
- * @cssprop --pd-loading-state-loader-bg - Spinner background color. Default: `#0a3a48`.
- * @cssprop --pd-loading-state-loader-fg - Spinner foreground (animated) color. Default: `#067394`.
- * @cssprop --pd-loading-state-loading-col - In-progress sub-task icon color. Default: `orange`.
+ * @cssprop --pd-loading-state-background-bg - Background mode container color. Default: `var(--pd-default-bg-col, #fff)`.
+ * @cssprop --pd-loading-state-bg-col - Content box background. Default: `var(--pd-default-bg-light-col, #f2f9fa)`.
+ * @cssprop --pd-loading-state-border-col - Content box border color. Default: `var(--pd-default-col, #067394)`.
+ * @cssprop --pd-loading-state-completed-col - Completed sub-task icon color. Default: `var(--pd-default-success-col, #348b11)`.
+ * @cssprop --pd-loading-state-loader-bg - Spinner background color. Default: `var(--pd-default-dark-col, #0a3a48)`.
+ * @cssprop --pd-loading-state-loader-fg - Spinner foreground (animated) color. Default: `var(--pd-default-col, #067394)`.
+ * @cssprop --pd-loading-state-loading-col - In-progress sub-task icon color. Default: `var(--pd-default-warning-col, #ffbf00)`.
  */
 export declare class PdLoadingState extends LitElement {
     /**
@@ -52,8 +55,24 @@ export declare class PdLoadingState extends LitElement {
      * Controls visibility, mode (modal/background), and content.
      */
     loadingState?: LoadingState;
+    /**
+     * Visual style of the loading indicator.
+     * - `spinner`: rotating border spinner (default)
+     * - `dots`: three pulsing dots
+     * - `pulse`: expanding ring
+     * - `logo`: animated PD logo symbol (stroke draw loop)
+     */
+    loaderStyle: LoaderStyle;
+    /**
+     * When true, the content box stays in normal document flow instead of
+     * using `position: fixed`. Useful for embedding multiple loaders on one page
+     * (e.g. in a grid or side-by-side comparison).
+     */
+    inline: boolean;
     static styles: CSSResultGroup;
-    render(): import('lit').TemplateResult<1> | "";
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+    private _renderLoader;
+    private _renderSubTasks;
     private _renderContent;
 }
 declare global {

package/dist/pd-loading-state/PdLoadingState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdLoadingState.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/PdLoadingState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAEa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IAEH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAuHpC;IAEO,MAAM;IAsBf,OAAO,CAAC,cAAc;CAgEvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"PdLoadingState.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/PdLoadingState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,qDAAqD;IACrD,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IAEH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;;;OAMG;IAEH,WAAW,EAAE,WAAW,CAAa;IAErC;;;;OAIG;IAEH,MAAM,UAAS;IAEf,OAAgB,MAAM,EAAE,cAAc,CA0MpC;IAEO,MAAM;IAsBf,OAAO,CAAC,aAAa;IAsCrB,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,cAAc;CA+CvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/pd-loading-state/PdLoadingState.js

@@ -1,8 +1,9 @@
-import { css, LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { css, LitElement, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 import { classMap } from 'lit/directives/class-map.js';
 import '@progressive-development/pd-icon/pd-icon';
+import './register-pd-logo-loader.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,9 +16,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let PdLoadingState = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.loaderStyle = "spinner";
+    this.inline = false;
+  }
   render() {
     if (!this.loadingState) {
-      return "";
+      return nothing;
     }
     return this.loadingState.modal ? html`
           <div
@@ -34,56 +40,107 @@ let PdLoadingState = class extends LitElement {
           </div>
         ` : this._renderContent();
   }
+  _renderLoader() {
+    switch (this.loaderStyle) {
+      case "dots":
+        return html`<div
+          class="loader-dots"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        >
+          <span></span><span></span><span></span>
+        </div>`;
+      case "pulse":
+        return html`<div
+          class="loader-pulse"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        ></div>`;
+      case "logo":
+        return html`<pd-logo-loader
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        ></pd-logo-loader>`;
+      default:
+        return html`<div
+          class="loader-spinner"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        ></div>`;
+    }
+  }
+  _renderSubTasks(subTasks) {
+    const completed = subTasks.filter((t) => t.completed).length;
+    return html`
+      <div class="sub-tasks">
+        <div class="sub-task-header">
+          ${completed} von ${subTasks.length} Schritten
+        </div>
+        ${subTasks.map(
+      (task) => html`
+            <div class="sub-task-row">
+              ${task.completed ? html`<pd-icon
+                    class="sub-icon completed"
+                    icon="checkBox"
+                    activeIcon
+                  ></pd-icon>` : html`<pd-icon
+                    class="sub-icon loading"
+                    icon="syncIcon"
+                    activeIcon
+                  ></pd-icon>`}
+              <span>${task.loadingTxt}</span>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
   _renderContent() {
     if (!this.loadingState) {
-      return "";
+      return nothing;
+    }
+    if (this.loadingState.smallBackground) {
+      return html`
+        <div class="background-content" role="status" aria-live="polite">
+          <div
+            class="background-loader"
+            role="progressbar"
+            aria-label="${msg("Laden", {
+        id: "pdContent.loadingstate.ariaLoading"
+      })}"
+          ></div>
+          <span>
+            ${this.loadingState.loadingTxt || msg("Daten werden synchronisiert", {
+        id: "pdContent.loadingstate.syncState"
+      })}
+          </span>
+        </div>
+      `;
     }
     return html`
       <div
         class="${classMap({
-      content: !this.loadingState.smallBackground,
-      "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
-      "background-content": this.loadingState.smallBackground === true
+      content: true,
+      "no-modal-content": this.loadingState.modal !== true && !this.inline
     })}"
         role="status"
         aria-live="polite"
       >
-        <div
-          class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"
-          role="progressbar"
-          aria-label="${msg("Laden", {
-      id: "pdContent.loadingstate.ariaLoading"
-    })}"
-        ></div>
+        ${this._renderLoader()}
         <p>
-          ${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? msg("Daten werden synchronisiert", {
-      id: "pdContent.loadingstate.syncState"
-    }) : msg("Bitte warten, Daten werden geladen", {
+          ${this.loadingState.loadingTxt || msg("Bitte warten, Daten werden geladen", {
       id: "pdContent.loadingstate.pleaseWait"
-    }))}
+    })}
         </p>
-        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`
-              <ul class="sub-ul">
-                ${this.loadingState.subTask.map(
-      (task) => html`
-                    <li>
-                      <div class="sub-row">
-                        ${task.loadingTxt}
-                        ${task.completed ? html`<pd-icon
-                              class="sub-icon completed"
-                              icon="checkBox"
-                              activeIcon
-                            ></pd-icon>` : html`<pd-icon
-                              class="sub-icon loading"
-                              icon="syncIcon"
-                              activeIcon
-                            ></pd-icon>`}
-                      </div>
-                    </li>
-                  `
-    )}
-              </ul>
-            ` : ""}
+        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? this._renderSubTasks(this.loadingState.subTask) : nothing}
       </div>
     `;
   }
@@ -124,80 +181,139 @@ PdLoadingState.styles = [
 
       /* Main content box */
       .content {
-        padding: 1em;
+        padding: var(--pd-spacing-lg, 2rem) var(--pd-spacing-lg, 2rem);
         text-align: center;
-        background-color: var(--pd-loading-state-bg-col, #edf7fd);
-        border: 2px solid
+        background-color: var(
+          --pd-loading-state-bg-col,
+          var(--pd-default-bg-light-col, #f2f9fa)
+        );
+        border: var(--pd-border-width, 1px) solid
           var(--pd-loading-state-border-col, var(--pd-default-col, #067394));
+        border-radius: var(--pd-radius-lg, 8px);
+        box-shadow: var(--pd-shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));
+        min-width: 280px;
+        max-width: 420px;
         z-index: 101;
       }
 
-      /* Background mode (bottom-right corner) */
+      /* Background mode (bottom-right pill/toast) */
       .background-content {
         position: fixed;
-        right: 0em;
-        bottom: 0em;
-
-        padding: 1em;
+        right: var(--pd-spacing-md, 1rem);
+        bottom: var(--pd-spacing-md, 1rem);
+        padding: var(--pd-spacing-sm, 0.5rem) var(--pd-spacing-md, 1rem);
         z-index: 600;
-
         display: flex;
-        gap: 0.5em;
+        gap: var(--pd-spacing-sm, 0.5rem);
         align-items: center;
-
-        background-color: var(--pd-loading-state-background-bg, white);
+        background: var(
+          --pd-loading-state-background-bg,
+          var(--pd-default-bg-col, #fff)
+        );
+        border-radius: var(--pd-radius-lg, 8px);
+        box-shadow: var(--pd-shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));
+        font-size: 0.8125rem;
+        color: var(--pd-default-font-content-col, #353738);
       }
 
-      /* Main spinner */
-      .loader {
-        border: 16px solid var(--pd-loading-state-loader-bg, #0a3a48);
-        border-top: 16px solid var(--pd-loading-state-loader-fg, #067394);
+      /* ====== Spinner loader ====== */
+      .loader-spinner {
+        border: 4px solid
+          var(--pd-loading-state-loader-bg, var(--pd-default-dark-col, #0a3a48));
+        border-top: 4px solid
+          var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394));
         border-radius: 50%;
-        width: 30px;
-        height: 30px;
+        width: 40px;
+        height: 40px;
         animation: spin 2s linear infinite;
-
         margin-left: auto;
         margin-right: auto;
       }
 
-      /* Small spinner for background mode */
-      .background-loader {
-        border: 10px solid var(--pd-loading-state-loader-bg, #0a3a48);
-        border-top: 10px solid var(--pd-loading-state-loader-fg, #067394);
-        border-radius: 50%;
+      /* ====== Dots loader ====== */
+      .loader-dots {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+      }
+      .loader-dots span {
         width: 10px;
         height: 10px;
-        animation: spin 2s linear infinite;
+        border-radius: 50%;
+        background: var(
+          --pd-loading-state-loader-fg,
+          var(--pd-default-col, #067394)
+        );
+        animation: dot-pulse 1.4s ease-in-out infinite;
+      }
+      .loader-dots span:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+      .loader-dots span:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+
+      /* ====== Pulse loader ====== */
+      .loader-pulse {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin: 0 auto;
+        border: 3px solid
+          var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394));
+        animation: pulse-ring 1.5s ease-in-out infinite;
       }
 
-      /* Sub-task list */
-      .sub-ul {
-        text-align: start;
+      /* ====== Background spinner (small) ====== */
+      .background-loader {
+        border: 2px solid
+          var(--pd-loading-state-loader-bg, var(--pd-default-dark-col, #0a3a48));
+        border-top: 2px solid
+          var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394));
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        animation: spin 2s linear infinite;
+        flex-shrink: 0;
       }
 
-      .sub-row {
+      /* ====== Sub-tasks ====== */
+      .sub-tasks {
+        margin-top: var(--pd-spacing-md, 1rem);
+        text-align: left;
+      }
+      .sub-task-header {
+        font-size: 0.75rem;
+        color: var(--pd-default-font-muted-col, #6b7280);
+        margin-bottom: var(--pd-spacing-sm, 0.5rem);
+      }
+      .sub-task-row {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding-right: 10px;
+        gap: var(--pd-spacing-sm, 0.5rem);
+        padding: var(--pd-spacing-xs, 0.25rem) 0;
       }
-
-      .sub-icon {
+      .sub-task-row .sub-icon {
         --pd-icon-size: 1rem;
         padding: 0;
-        vertical-align: baseline;
-        margin: 0 0.25rem 0 0;
+        margin: 0;
+        flex-shrink: 0;
       }
-
-      .completed {
-        --pd-icon-col-active: var(--pd-loading-state-completed-col, green);
+      .sub-task-row .completed {
+        --pd-icon-col-active: var(
+          --pd-loading-state-completed-col,
+          var(--pd-default-success-col, #348b11)
+        );
       }
-
-      .loading {
-        --pd-icon-col-active: var(--pd-loading-state-loading-col, orange);
+      .sub-task-row .loading {
+        --pd-icon-col-active: var(
+          --pd-loading-state-loading-col,
+          var(--pd-default-warning-col, #ffbf00)
+        );
+        animation: spin 2s linear infinite;
       }
 
+      /* ====== Keyframes ====== */
       @keyframes spin {
         0% {
           transform: rotate(0deg);
@@ -206,14 +322,43 @@ PdLoadingState.styles = [
           transform: rotate(360deg);
         }
       }
+
+      @keyframes dot-pulse {
+        0%,
+        80%,
+        100% {
+          opacity: 0.3;
+          transform: scale(0.8);
+        }
+        40% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      @keyframes pulse-ring {
+        0% {
+          transform: scale(0.8);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1.4);
+          opacity: 0;
+        }
+      }
     `
 ];
 __decorateClass([
   property({ type: Object })
 ], PdLoadingState.prototype, "loadingState", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdLoadingState.prototype, "loaderStyle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdLoadingState.prototype, "inline", 2);
 PdLoadingState = __decorateClass([
-  localized(),
-  customElement("pd-loading-state")
+  localized()
 ], PdLoadingState);
 
 export { PdLoadingState };

package/dist/pd-loading-state/pd-loading-state.d.ts

@@ -2,5 +2,5 @@
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-export { PdLoadingState, type LoadingState, type LoadingSubTask, } from './PdLoadingState.js';
+export { PdLoadingState, type LoaderStyle, type LoadingState, type LoadingSubTask, } from './PdLoadingState.js';
 //# sourceMappingURL=pd-loading-state.d.ts.map

package/dist/pd-loading-state/pd-loading-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-loading-state.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-loading-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"pd-loading-state.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-loading-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,qBAAqB,CAAC"}

package/dist/pd-loading-state/pd-logo-loader.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Animated PD logo symbol used as a loading indicator.
+ *
+ * Renders only the intertwined P/D symbol (no company text) and loops
+ * the stroke-draw animation continuously: lines draw forward, then
+ * erase backward, creating a smooth "breathing" loading effect.
+ *
+ * @tagname pd-logo-loader
+ * @cssprop --pd-logo-loader-col - Stroke color. Default: `var(--pd-loading-state-loader-fg)`.
+ * @cssprop --pd-logo-loader-size - Width and height. Default: `56px`.
+ * @cssprop --pd-logo-loader-stroke-width - SVG stroke width. Default: `5`.
+ * @cssprop --pd-logo-loader-duration - Full draw+erase cycle. Default: `2.5s`.
+ */
+export declare class PdLogoLoader extends LitElement {
+    static styles: import('lit').CSSResult;
+    firstUpdated(): void;
+    render(): import('lit').TemplateResult<2>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "pd-logo-loader": PdLogoLoader;
+    }
+}
+//# sourceMappingURL=pd-logo-loader.d.ts.map

package/dist/pd-loading-state/pd-logo-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-logo-loader.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-logo-loader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAsCpB;IAEO,YAAY,IAAI,IAAI;IAQpB,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/pd-loading-state/pd-logo-loader.js

@@ -0,0 +1,63 @@
+import { LitElement, css, svg } from 'lit';
+
+class PdLogoLoader extends LitElement {
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: var(--pd-logo-loader-size, 56px);
+      height: var(--pd-logo-loader-size, 56px);
+      margin: 0 auto;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .pd-path {
+      stroke: var(
+        --pd-logo-loader-col,
+        var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394))
+      );
+      stroke-width: var(--pd-logo-loader-stroke-width, 5);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+      fill: none;
+      stroke-dasharray: var(--_path-len);
+      stroke-dashoffset: 0;
+      animation: logo-draw var(--pd-logo-loader-duration, 2.5s) ease-in-out
+        infinite alternate;
+    }
+
+    .pd-path-b {
+      animation-delay: 0.15s;
+    }
+
+    @keyframes logo-draw {
+      to {
+        stroke-dashoffset: var(--_path-len);
+      }
+    }
+  `;
+  }
+  firstUpdated() {
+    const path = this.shadowRoot?.querySelector(".pd-path");
+    if (path) {
+      const len = path.getTotalLength();
+      this.style.setProperty("--_path-len", `${len}`);
+    }
+  }
+  render() {
+    return svg`<svg viewBox="0 0 166.68 212.6" aria-hidden="true">
+      <path class="pd-path" d="M123.9,80.5l3.6,0.1c6.7,0,12.2-5.5,12.2-12.2s-5.5-12.2-12.2-12.2c-6.7,0-12.2,5.5-12.2,12.2v75.8
+        c0,15-12.2,27.2-27.2,27.2s-27.2-12.2-27.2-27.2c0-14.1,10.7-25.7,24.4-27.1V74.7c0-4.4-3.5-8-7.9-8c-4.4,0-8,3.6-8,8
+        c0,4.4,3.6,8,8,8"/>
+      <path class="pd-path pd-path-b" d="M91.7,132.1l-3.6-0.1c-6.7,0-12.2,5.5-12.2,12.2c0,6.7,5.5,12.2,12.2,12.2s12.2-5.5,12.2-12.2V68.4
+        c0-15,12.2-27.2,27.2-27.2s27.2,12.2,27.2,27.2c0,14.1-10.8,25.7-24.5,27.1v42.1c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8s-3.6-8-8-8"/>
+    </svg>`;
+  }
+}
+
+export { PdLogoLoader };

package/dist/pd-loading-state/register-pd-logo-loader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+export {};
+//# sourceMappingURL=register-pd-logo-loader.d.ts.map

package/dist/pd-loading-state/register-pd-logo-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-pd-logo-loader.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/register-pd-logo-loader.ts"],"names":[],"mappings":"AAAA;;;GAGG"}