@progressive-development/pd-content 1.0.3 → 1.1.0

package/dist/index.d.ts

@@ -14,11 +14,9 @@ export { PdNoticeBox } from './pd-notice-box/pd-notice-box.js';
 export { PdCodeSnippet } from './pd-code-snippet/pd-code-snippet.js';
 export { PdBadgeOrder } from './pd-badge-order/pd-badge-order.js';
 export { PdBadgeItem } from './pd-badge-order/pd-badge-item.js';
-export { PdGallery } from './pd-gallery/pd-gallery.js';
-export { PdGalleryLightbox } from './pd-gallery/pd-gallery-lightbox.js';
-export type { LoadingState, LoadingSubTask, } from './pd-loading-state/pd-loading-state.js';
+export type { LoaderStyle, LoadingState, LoadingSubTask, } from './pd-loading-state/pd-loading-state.js';
 export type { CodeLanguage } from './pd-code-snippet/pd-code-snippet.js';
-export type { PdCollapseToggleEventDetail, PdEditLink, PdCollapseElement, NoticeType, NoticeVariant, TabHeader, PdBadge, PdBadgeChangeDetail, PdBadgeReorderDetail, GalleryImage, GalleryMode, GalleryOpenDetail, GalleryCloseDetail, GalleryNavigateDetail, } from './types.js';
+export type { PdCollapseToggleEventDetail, PdEditLink, PdCollapseElement, NoticeType, NoticeVariant, TabHeader, PdBadge, PdBadgeChangeDetail, PdBadgeReorderDetail, } from './types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';
 export { templates as enTemplates } from './generated/locales/en.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,YAAY,EACV,YAAY,EACZ,cAAc,GACf,MAAM,wCAAwC,CAAC;AAEhD,YAAY,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,YAAY,EACV,2BAA2B,EAC3B,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,SAAS,EACT,OAAO,EACP,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,YAAY,EACV,WAAW,EACX,YAAY,EACZ,cAAc,GACf,MAAM,wCAAwC,CAAC;AAEhD,YAAY,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,YAAY,EACV,2BAA2B,EAC3B,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,SAAS,EACT,OAAO,EACP,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -14,8 +14,6 @@ import './pd-notice-box/pd-notice-box.js';
 import './pd-code-snippet/pd-code-snippet.js';
 import './pd-badge-order.js';
 import './pd-badge-order/pd-badge-item.js';
-import './pd-gallery.js';
-import './pd-gallery-lightbox.js';
 export { templates as beTemplates } from './locales/be.js';
 export { templates as deTemplates } from './locales/de.js';
 export { templates as enTemplates } from './locales/en.js';
@@ -26,8 +24,6 @@ export { PdCodeSnippet } from './pd-code-snippet/PdCodeSnippet.js';
 export { PdCollapse } from './pd-collapse/PdCollapse.js';
 export { PdCollapseGroup } from './pd-collapse-group/PdCollapseGroup.js';
 export { PdEditContent } from './pd-edit-content/PdEditContent.js';
-export { PdGallery } from './pd-gallery/PdGallery.js';
-export { PdGalleryLightbox } from './pd-gallery/PdGalleryLightbox.js';
 export { PdLoadingState } from './pd-loading-state/PdLoadingState.js';
 export { PdMoreInfo } from './pd-more-info/PdMoreInfo.js';
 export { PdNoticeBox } from './pd-notice-box/PdNoticeBox.js';

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

@@ -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.
@@ -59,7 +62,7 @@ export declare class PdLoadingState extends LitElement {
      * - `pulse`: expanding ring
      * - `logo`: animated PD logo symbol (stroke draw loop)
      */
-    loaderStyle: "spinner" | "dots" | "pulse" | "logo";
+    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

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,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,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,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IAEH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;;;OAMG;IAEH,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAa;IAE/D;;;;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"}
+{"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/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;AASH,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.js

@@ -26,7 +26,7 @@ class PdLogoLoader extends LitElement {
       stroke-miterlimit: 10;
       fill: none;
       stroke-dasharray: var(--_path-len);
-      stroke-dashoffset: var(--_path-len);
+      stroke-dashoffset: 0;
       animation: logo-draw var(--pd-logo-loader-duration, 2.5s) ease-in-out
         infinite alternate;
     }
@@ -37,7 +37,7 @@ class PdLogoLoader extends LitElement {
 
     @keyframes logo-draw {
       to {
-        stroke-dashoffset: 0;
+        stroke-dashoffset: var(--_path-len);
       }
     }
   `;

package/dist/pd-more-info/PdMoreInfo.d.ts

@@ -18,6 +18,10 @@ import { LitElement, CSSResultGroup } from 'lit';
  * @cssprop --pd-default-font-link-col-hover - Hoverfarbe für Link
  */
 export declare class PdMoreInfo extends LitElement {
+    /**
+     * When set, disables the automatic scroll-into-view when collapsing.
+     */
+    noAutoScroll: boolean;
     /** @ignore */
     private _lessInfo;
     static styles: CSSResultGroup;

package/dist/pd-more-info/PdMoreInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,cAAc;IAEd,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAkCpC;IAEO,MAAM;IA8Bf,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAWtB"}
+{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IAEH,YAAY,UAAS;IAErB,cAAc;IAEd,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAmCpC;IAEO,MAAM;IA8Bf,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAatB"}

package/dist/pd-more-info/PdMoreInfo.js

@@ -1,5 +1,5 @@
 import { css, LitElement, html } from 'lit';
-import { state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 
 var __defProp = Object.defineProperty;
@@ -15,6 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 let PdMoreInfo = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.noAutoScroll = false;
     this._lessInfo = true;
   }
   render() {
@@ -55,12 +56,14 @@ let PdMoreInfo = class extends LitElement {
   }
   _showLessInfo() {
     this._lessInfo = true;
-    const rect = this.getBoundingClientRect();
-    window.scrollBy({
-      top: rect.top - 150,
-      left: 0,
-      behavior: "smooth"
-    });
+    if (!this.noAutoScroll) {
+      const rect = this.getBoundingClientRect();
+      window.scrollBy({
+        top: rect.top - 150,
+        left: 0,
+        behavior: "smooth"
+      });
+    }
   }
 };
 PdMoreInfo.styles = [
@@ -74,6 +77,7 @@ PdMoreInfo.styles = [
         font-family: var(--pd-default-font-content-family);
         font-size: var(--pd-default-font-content-size);
         line-height: var(--pd-default-font-content-line-height, 1.4em);
+        margin: 0;
       }
 
       a {
@@ -98,6 +102,9 @@ PdMoreInfo.styles = [
       }
     `
 ];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdMoreInfo.prototype, "noAutoScroll", 2);
 __decorateClass([
   state()
 ], PdMoreInfo.prototype, "_lessInfo", 2);

package/dist/pd-notice-box/PdNoticeBox.d.ts

@@ -3,9 +3,10 @@ import { NoticeType, NoticeVariant } from '../types.js';
 /**
  * Notice box component for displaying contextual messages.
  *
- * Supports two visual variants:
+ * Supports three visual variants:
  * - **box**: Full-width box with icon, colored background (like Confluence info boxes)
  * - **sidebar**: Minimal variant with colored left border only
+ * - **compact**: Inline-optimized variant with small icon, subtle tint, and reduced spacing — designed for embedding in other components
  *
  * @tagname pd-notice-box
  * @summary Contextual notice box for info, note, success, warning, and error messages.
@@ -47,6 +48,11 @@ import { NoticeType, NoticeVariant } from '../types.js';
  *   This is a warning message.
  * </pd-notice-box>
  *
+ * <!-- Compact variant (inline, small) -->
+ * <pd-notice-box type="note" variant="compact" icon="aiSparkleIcon">
+ *   AI-generated suggestion text.
+ * </pd-notice-box>
+ *
  * <!-- Custom icon -->
  * <pd-notice-box type="success" icon="starIcon" title="Success">
  *   Operation completed!
@@ -67,6 +73,7 @@ export declare class PdNoticeBox extends LitElement {
      * Visual variant of the notice box.
      * - `box`: Full box with icon and background color
      * - `sidebar`: Minimal with colored left border
+     * - `compact`: Inline-optimized with small icon, subtle tint, reduced spacing
      */
     variant: NoticeVariant;
     /**

package/dist/pd-notice-box/PdNoticeBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdNoticeBox.d.ts","sourceRoot":"","sources":["../../src/pd-notice-box/PdNoticeBox.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrE,OAAO,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAa7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAU;IAE1B;;;;OAIG;IAEH,OAAO,EAAE,aAAa,CAAS;IAE/B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,UAAS;IAEjB,OAAgB,MAAM,EAAE,cAAc,CA0JpC;IAEO,MAAM;CAsBhB"}
+{"version":3,"file":"PdNoticeBox.d.ts","sourceRoot":"","sources":["../../src/pd-notice-box/PdNoticeBox.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrE,OAAO,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAa7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAU;IAE1B;;;;;OAKG;IAEH,OAAO,EAAE,aAAa,CAAS;IAE/B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,UAAS;IAEjB,OAAgB,MAAM,EAAE,cAAc,CAiMpC;IAEO,MAAM;CAuBhB"}

package/dist/pd-notice-box/PdNoticeBox.js

@@ -182,11 +182,50 @@ class PdNoticeBox extends LitElement {
       .body ::slotted(*:not(:last-child)) {
         margin-bottom: 0.5em;
       }
+
+      /* Compact variant – propagate sizing via CSS vars for slotted components (e.g. pd-more-info) */
+      :host([variant="compact"]) {
+        --pd-default-font-content-size: 0.8rem;
+        --pd-default-font-content-line-height: 1.3;
+        --pd-default-font-link-size: 0.75rem;
+      }
+
+      :host([variant="compact"]) .notice-box {
+        background-color: color-mix(in srgb, var(--_type-col) 4%, transparent);
+        border: none;
+        border-left: 3px solid var(--_type-col);
+        border-radius: 0;
+        padding: 6px 8px;
+        gap: 6px;
+        font-size: 0.8rem;
+        line-height: 1.3;
+        align-items: center;
+      }
+
+      :host([variant="compact"]) .icon-wrapper {
+        width: 22px;
+        height: 22px;
+      }
+
+      :host([variant="compact"]) .icon-wrapper pd-icon {
+        width: 22px;
+        height: 22px;
+      }
+
+      :host([variant="compact"]) .title {
+        display: inline;
+        font-size: 0.8rem;
+        margin: 0 4px 0 0;
+      }
+
+      :host([variant="compact"]) .body {
+        line-height: 1.3;
+      }
     `
     ];
   }
   render() {
-    const showIcon = this.variant === "box" && !this.hideIcon;
+    const showIcon = (this.variant === "box" || this.variant === "compact") && !this.hideIcon;
     const iconName = this.icon || DEFAULT_ICONS[this.type];
     return html`
       <div class="notice-box" role="note" aria-label="${this.type} notice">

package/dist/pd-panel-viewer/PdPanelViewer.d.ts

@@ -23,6 +23,8 @@ import { LitElement } from 'lit';
  */
 export declare class PdPanelViewer extends LitElement {
     withProgress: boolean;
+    /** When true, navigation arrows overlay the content instead of sitting beside it. */
+    overlayNav: boolean;
     deltaCalc: number;
     /** @ignore */
     _index: number;

package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BAiGX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IA0EN,YAAY;IAQH,oBAAoB;IAS7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAQpB;IAEF,OAAO,CAAC,cAAc,CAqCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}
+{"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAErB,qFAAqF;IAErF,UAAU,UAAQ;IAGlB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BA4GX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IA4EN,YAAY;IAQH,oBAAoB;IAS7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAQpB;IAEF,OAAO,CAAC,cAAc,CAqCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}

package/dist/pd-panel-viewer/PdPanelViewer.js

@@ -17,6 +17,7 @@ class PdPanelViewer extends LitElement {
   constructor() {
     super(...arguments);
     this.withProgress = false;
+    this.overlayNav = true;
     this.deltaCalc = 3;
     this._index = 0;
     this._panData = {};
@@ -139,6 +140,17 @@ class PdPanelViewer extends LitElement {
       right: 0;
     }
 
+    :host([overlayNav]) .panel-container {
+      padding: 0;
+    }
+
+    :host([overlayNav]) pd-icon {
+      margin: 0 0.25rem;
+      --pd-icon-bg-col: rgba(0, 0, 0, 0.15);
+      --pd-icon-bg-col-hover: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(4px);
+    }
+
     @media (max-width: 768px) {
       .panel-container {
         padding: 0 0.5rem;
@@ -217,6 +229,7 @@ class PdPanelViewer extends LitElement {
         </div>
         <pd-icon
           id="prev"
+          class=${classMap({ round: this.overlayNav })}
           icon="previousArrow"
           ?activeIcon="${true}"
           ?disabled="${this.index <= 0}"
@@ -228,6 +241,7 @@ class PdPanelViewer extends LitElement {
         ></pd-icon>
         <pd-icon
           id="next"
+          class=${classMap({ round: this.overlayNav })}
           icon="nextArrow"
           ?activeIcon="${true}"
           ?disabled="${this.index === this.children.length - 1}"
@@ -353,6 +367,9 @@ class PdPanelViewer extends LitElement {
 __decorateClass([
   property({ type: Boolean })
 ], PdPanelViewer.prototype, "withProgress");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdPanelViewer.prototype, "overlayNav");
 __decorateClass([
   property({ type: Number })
 ], PdPanelViewer.prototype, "deltaCalc");

package/dist/pd-tab/PdTab.d.ts

@@ -3,11 +3,12 @@ import { TabHeader } from '../types';
 /**
  * Tab navigation component with header tabs and content slots.
  *
- * Supports responsive label switching (full → short labels)
- * when tabs overflow their container.
+ * Supports horizontal (default) and vertical orientation, plus
+ * responsive label switching (full -> short labels) when tabs
+ * overflow their container.
  *
  * @tagname pd-tab
- * @summary Tab navigation with responsive label switching.
+ * @summary Tab navigation with horizontal/vertical orientation and responsive labels.
  *
  * @event tab-selected - Fired when a tab is selected. Emits the tab key.
  *
@@ -18,8 +19,8 @@ import { TabHeader } from '../types';
  * @cssprop --pd-tab-font-size-compact - Font size in compact mode. Default: `0.8rem`.
  * @cssprop --pd-tab-text-col - Tab text color.
  * @cssprop --pd-tab-active-text-col - Active tab text color.
- * @cssprop --pd-tab-active-indicator-col - Active tab underline color.
- * @cssprop --pd-tab-active-indicator-height - Active tab underline thickness. Default: `2px`.
+ * @cssprop --pd-tab-active-indicator-col - Active tab indicator color.
+ * @cssprop --pd-tab-active-indicator-height - Active tab indicator thickness. Default: `2px`.
  * @cssprop --pd-tab-hover-bg-col - Tab hover background.
  * @cssprop --pd-tab-disabled-text-col - Disabled tab text color.
  * @cssprop --pd-tab-icon-size - Icon size in tab headers. Default: `1.125em`.
@@ -32,6 +33,8 @@ export declare class PdTab extends LitElement {
     tabs: TabHeader[];
     /** Key of the initially active tab. */
     defaultTab?: string;
+    /** Tab orientation. Default: horizontal. */
+    orientation: "horizontal" | "vertical";
     private _activeTab?;
     private _headerContainer;
     private _resizeObserver;

package/dist/pd-tab/PdTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdTab.d.ts","sourceRoot":"","sources":["../../src/pd-tab/PdTab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAgB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,uCAAuC;IAEvC,IAAI,EAAE,SAAS,EAAE,CAAM;IAEvB,uCAAuC;IAEvC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,OAAO,CAAC,UAAU,CAAC,CAAS;IAG5B,OAAO,CAAC,gBAAgB,CAAe;IAEvC,OAAO,CAAC,eAAe,CAA+B;IAEtD,MAAM,CAAC,MAAM,EAiHR,cAAc,CAAC;cAED,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;cAMzD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMhE,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;IAQrC,MAAM;IAiDN,KAAK;IAQL,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,UAAU;IAsDlB,OAAO,CAAC,YAAY;CAcrB"}
+{"version":3,"file":"PdTab.d.ts","sourceRoot":"","sources":["../../src/pd-tab/PdTab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAgB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,uCAAuC;IAEvC,IAAI,EAAE,SAAS,EAAE,CAAM;IAEvB,uCAAuC;IAEvC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4CAA4C;IAE5C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,OAAO,CAAC,UAAU,CAAC,CAAS;IAG5B,OAAO,CAAC,gBAAgB,CAAe;IAEvC,OAAO,CAAC,eAAe,CAA+B;IAEtD,MAAM,CAAC,MAAM,EA6JR,cAAc,CAAC;cAED,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;cAMzD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMhE,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;IAQrC,MAAM;IA0DN,KAAK;IAQL,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,UAAU;IAiDlB,OAAO,CAAC,YAAY;CAcrB"}

package/dist/pd-tab/PdTab.js

@@ -15,6 +15,7 @@ class PdTab extends LitElement {
   constructor() {
     super(...arguments);
     this.tabs = [];
+    this.orientation = "horizontal";
     this._resizeObserver = null;
   }
   static {
@@ -32,6 +33,17 @@ class PdTab extends LitElement {
         --_icon-size: var(--pd-tab-icon-size, 1.125em);
       }
 
+      /* --- Wrapper --- */
+      .tab-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host([orientation="vertical"]) .tab-wrapper {
+        flex-direction: row;
+      }
+
+      /* --- Header container --- */
       .header-container {
         display: flex;
         flex-wrap: nowrap;
@@ -39,6 +51,12 @@ class PdTab extends LitElement {
         font-size: var(--_font-size);
       }
 
+      :host([orientation="vertical"]) .header-container {
+        flex-direction: column;
+        border-bottom: none;
+        border-right: 1px solid var(--pd-default-disabled-light-col, #e5e7eb);
+      }
+
       /* --- Tab header --- */
       .tab-header {
         padding: var(--pd-tab-header-padding, 0.5em 1em);
@@ -60,6 +78,13 @@ class PdTab extends LitElement {
         flex-shrink: 0;
       }
 
+      :host([orientation="vertical"]) .tab-header {
+        border-bottom: none;
+        margin-bottom: 0;
+        border-left: var(--_active-height) solid transparent;
+        margin-left: calc(-1 * var(--_active-height) + 1px);
+      }
+
       .tab-header:hover {
         background-color: var(--pd-tab-hover-bg-col, rgba(0, 0, 0, 0.04));
       }
@@ -70,6 +95,11 @@ class PdTab extends LitElement {
         font-weight: 500;
       }
 
+      :host([orientation="vertical"]) .tab-header.active-header {
+        border-bottom-color: transparent;
+        border-left-color: var(--_active-col);
+      }
+
       .tab-header.disabled-header {
         pointer-events: none;
         color: var(
@@ -116,6 +146,13 @@ class PdTab extends LitElement {
         flex-shrink: 0;
       }
 
+      /* --- Panels container --- */
+      .panels-container {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+      }
+
       /* --- Content panels --- */
       .slot-container {
         display: none;
@@ -130,6 +167,14 @@ class PdTab extends LitElement {
         );
         border-top: none;
       }
+
+      :host([orientation="vertical"]) .active-slot {
+        border-top: var(
+          --pd-tab-content-border,
+          1px solid var(--pd-default-disabled-light-col, #e5e7eb)
+        );
+        border-left: none;
+      }
     `
     ];
   }
@@ -155,45 +200,54 @@ class PdTab extends LitElement {
     }
   }
   render() {
+    const isVertical = this.orientation === "vertical";
     return html`
-      <div
-        id="hc"
-        class="header-container"
-        role="tablist"
-        @keydown=${this._onKeyDown}
-      >
-        ${this.tabs.map(
+      <div class="tab-wrapper">
+        <div
+          id="hc"
+          class="header-container"
+          role="tablist"
+          aria-orientation="${isVertical ? "vertical" : "horizontal"}"
+          @keydown=${this._onKeyDown}
+        >
+          ${this.tabs.map(
       (t) => html`
-            <div
-              class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
-              data-key="${t.key}"
-              @click="${this._tabSelected}"
-              role="tab"
-              id="${`tab-${t.key}`}"
-              aria-selected="${this._activeTab === t.key}"
-              aria-controls="${`panel-${t.key}`}"
-              aria-disabled="${t.disabled || false}"
-              tabindex="${this._activeTab === t.key && !t.disabled ? 0 : -1}"
-            >
-              ${t.pdIcon ? html`<pd-icon class="tab-icon" .icon="${t.pdIcon}"></pd-icon>` : nothing}
-              <span class="full-label">${t.name}</span>
-              <span class="short-label">${t.shortLabel ?? t.name}</span>
-            </div>
-          `
+              <div
+                class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
+                data-key="${t.key}"
+                @click="${this._tabSelected}"
+                role="tab"
+                id="${`tab-${t.key}`}"
+                aria-selected="${this._activeTab === t.key}"
+                aria-controls="${`panel-${t.key}`}"
+                aria-disabled="${t.disabled || false}"
+                tabindex="${this._activeTab === t.key && !t.disabled ? 0 : -1}"
+              >
+                ${t.pdIcon ? html`<pd-icon
+                      class="tab-icon"
+                      .icon="${t.pdIcon}"
+                    ></pd-icon>` : nothing}
+                <span class="full-label">${t.name}</span>
+                <span class="short-label">${t.shortLabel ?? t.name}</span>
+              </div>
+            `
     )}
-      </div>
-      ${this.tabs.map(
+        </div>
+        <div class="panels-container">
+          ${this.tabs.map(
       (t) => html`
-          <div
-            id="${`panel-${t.key}`}"
-            role="tabpanel"
-            aria-labelledby="${`tab-${t.key}`}"
-            class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
-          >
-            <slot name="${t.key}"></slot>
-          </div>
-        `
+              <div
+                id="${`panel-${t.key}`}"
+                role="tabpanel"
+                aria-labelledby="${`tab-${t.key}`}"
+                class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
+              >
+                <slot name="${t.key}"></slot>
+              </div>
+            `
     )}
+        </div>
+      </div>
     `;
   }
   reset() {
@@ -205,7 +259,8 @@ class PdTab extends LitElement {
   _checkOverflow() {
     this.removeAttribute("data-compact");
     const c = this._headerContainer;
-    if (c.scrollWidth > c.clientWidth + 1 && this.tabs.some((t) => t.shortLabel)) {
+    const overflows = this.orientation === "vertical" ? c.scrollHeight > c.clientHeight + 1 : c.scrollWidth > c.clientWidth + 1;
+    if (overflows && this.tabs.some((t) => t.shortLabel)) {
       this.setAttribute("data-compact", "");
     }
   }
@@ -219,27 +274,23 @@ class PdTab extends LitElement {
       (t) => t.key === this._activeTab
     );
     let nextIndex = -1;
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        event.preventDefault();
-        nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        event.preventDefault();
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
-        break;
-      case "Home":
-        event.preventDefault();
-        nextIndex = 0;
-        break;
-      case "End":
-        event.preventDefault();
-        nextIndex = enabledTabs.length - 1;
-        break;
-      default:
-        return;
+    const isVertical = this.orientation === "vertical";
+    const nextKeys = isVertical ? ["ArrowDown"] : ["ArrowRight"];
+    const prevKeys = isVertical ? ["ArrowUp"] : ["ArrowLeft"];
+    if (nextKeys.includes(event.key)) {
+      event.preventDefault();
+      nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+    } else if (prevKeys.includes(event.key)) {
+      event.preventDefault();
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      event.preventDefault();
+      nextIndex = enabledTabs.length - 1;
+    } else {
+      return;
     }
     if (nextIndex >= 0 && nextIndex < enabledTabs.length) {
       const nextTab = enabledTabs[nextIndex];
@@ -279,6 +330,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], PdTab.prototype, "defaultTab");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdTab.prototype, "orientation");
 __decorateClass([
   state()
 ], PdTab.prototype, "_activeTab");

package/dist/types.d.ts

@@ -49,7 +49,6 @@ export interface WizardStep {
 }
 export type { PdBadge, PdBadgeChangeDetail, PdBadgeReorderDetail, } from './pd-badge-order/types.js';
 export { TEXT_LIMIT_TITLE, TEXT_LIMIT_DESC, DEFAULT_BADGE_COLOR, } from './pd-badge-order/types.js';
-export type { GalleryImage, GalleryMode, GalleryOpenDetail, GalleryCloseDetail, GalleryNavigateDetail, } from './pd-gallery/types.js';
 /**
  * Notice types for different message contexts.
  */
@@ -57,5 +56,5 @@ export type NoticeType = "info" | "note" | "success" | "warning" | "error";
 /**
  * Visual variants for the notice box.
  */
-export type NoticeVariant = "box" | "sidebar";
+export type NoticeVariant = "box" | "sidebar" | "compact";
 //# sourceMappingURL=types.d.ts.map