@progressive-development/pd-content 1.0.3 → 1.1.1

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

@@ -1,5 +1,5 @@
-import { css, LitElement, html } from 'lit';
-import { state } from 'lit/decorators.js';
+import { css, LitElement, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 
 var __defProp = Object.defineProperty;
@@ -15,35 +15,129 @@ var __decorateClass = (decorators, target, key, kind) => {
 let PdMoreInfo = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.noAutoScroll = false;
     this._lessInfo = true;
+    this._fullText = "";
+    this._isOverflowing = false;
   }
   render() {
+    if (this.maxLength) {
+      return this._renderMaxLength();
+    }
+    if (this.maxLines) {
+      return this._renderMaxLines();
+    }
+    return this._renderLegacy();
+  }
+  updated() {
+    if (this.maxLines && this._lessInfo) {
+      this._checkOverflow();
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // maxLength mode
+  // ---------------------------------------------------------------------------
+  _renderMaxLength() {
+    const needsTruncation = this._fullText.length > this.maxLength;
+    const collapsed = this._lessInfo && needsTruncation;
+    return html`
+      <p>
+        <span class=${collapsed ? "slot-hidden" : ""}
+          ><slot @slotchange=${this._onSlotChange}></slot
+        ></span>
+        ${collapsed ? html`${this._truncateText(this._fullText, this.maxLength)}
+            ${this._moreLink()}` : needsTruncation ? this._lessLink() : nothing}
+      </p>
+    `;
+  }
+  _truncateText(text, max) {
+    if (text.length <= max) return text;
+    const truncated = text.slice(0, max);
+    const lastSpace = truncated.lastIndexOf(" ");
+    return (lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated) + "…";
+  }
+  _onSlotChange(e) {
+    const slot = e.target;
+    const nodes = slot.assignedNodes({ flatten: true });
+    const raw = nodes.map((n) => n.textContent ?? "").join("");
+    const text = raw.replace(/\s+/g, " ").trim();
+    if (text !== this._fullText) {
+      this._fullText = text;
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // maxLines mode
+  // ---------------------------------------------------------------------------
+  _renderMaxLines() {
+    return html`
+      <p>
+        <span
+          class=${this._lessInfo ? "content-clamped" : ""}
+          style=${this._lessInfo ? `-webkit-line-clamp: ${this.maxLines}` : ""}
+        >
+          <slot @slotchange=${this._onMaxLinesSlotChange}></slot>
+        </span>
+        ${this._lessInfo && this._isOverflowing ? this._moreLink() : !this._lessInfo ? this._lessLink() : nothing}
+      </p>
+    `;
+  }
+  _onMaxLinesSlotChange() {
+    this.updateComplete.then(() => this._checkOverflow());
+  }
+  _checkOverflow() {
+    const wrapper = this.shadowRoot?.querySelector(
+      "p > span"
+    );
+    if (wrapper) {
+      this._isOverflowing = wrapper.scrollHeight > wrapper.clientHeight;
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Legacy mode (named slots)
+  // ---------------------------------------------------------------------------
+  _renderLegacy() {
     return html`
       <p>
         ${this._lessInfo ? html`
               <slot name="small-view"></slot>
-              <a
-                role="button"
-                tabindex="0"
-                @click=${this._showMoreInfo}
-                @keydown=${this._onKeyDown}
-              >
-                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
-              </a>
+              ${this._moreLink()}
             ` : html`
               <slot name="large-view"></slot>
-              <a
-                role="button"
-                tabindex="0"
-                @click=${this._showLessInfo}
-                @keydown=${this._onKeyDown}
-              >
-                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
-              </a>
+              ${this._lessLink()}
             `}
       </p>
     `;
   }
+  // ---------------------------------------------------------------------------
+  // Shared toggle links
+  // ---------------------------------------------------------------------------
+  _moreLink() {
+    return html`
+      <a
+        role="button"
+        tabindex="0"
+        @click=${this._showMoreInfo}
+        @keydown=${this._onKeyDown}
+      >
+        ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
+      </a>
+    `;
+  }
+  _lessLink() {
+    return html`
+      <a
+        role="button"
+        tabindex="0"
+        @click=${this._showLessInfo}
+        @keydown=${this._onKeyDown}
+      >
+        ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
+      </a>
+    `;
+  }
+  // ---------------------------------------------------------------------------
+  // Event handlers
+  // ---------------------------------------------------------------------------
   _onKeyDown(e) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -55,12 +149,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 +170,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 {
@@ -96,11 +193,36 @@ PdMoreInfo.styles = [
         outline-offset: 2px;
         border-radius: 2px;
       }
+
+      .content-clamped {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .slot-hidden {
+        display: none;
+      }
     `
 ];
+__decorateClass([
+  property({ type: Number, attribute: "max-length" })
+], PdMoreInfo.prototype, "maxLength", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-lines" })
+], PdMoreInfo.prototype, "maxLines", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdMoreInfo.prototype, "noAutoScroll", 2);
 __decorateClass([
   state()
 ], PdMoreInfo.prototype, "_lessInfo", 2);
+__decorateClass([
+  state()
+], PdMoreInfo.prototype, "_fullText", 2);
+__decorateClass([
+  state()
+], PdMoreInfo.prototype, "_isOverflowing", 2);
 PdMoreInfo = __decorateClass([
   localized()
 ], PdMoreInfo);

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

@@ -34,7 +34,7 @@ class PdNoticeBox extends LitElement {
       :host {
         /* Layout */
         --_width: var(--pd-notice-box-width, 100%);
-        --_radius: var(--pd-notice-box-border-radius, var(--pd-radius-md, 8px));
+        --_radius: var(--pd-notice-box-border-radius, var(--pd-radius-lg, 8px));
         --_padding: var(--pd-notice-box-padding, var(--pd-spacing-sm, 12px));
         --_gap: var(--pd-notice-box-gap, var(--pd-spacing-sm, 12px));
 
@@ -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/PdPanel.d.ts

@@ -6,6 +6,9 @@ import { LitElement } from 'lit';
  *
  * @cssprop --pd-panel-bg - Panel background color. Default: `#afc1d2`.
  * @cssprop --pd-panel-border-radius - Panel border radius. Default: `0.2em`.
+ * @cssprop --pd-panel-padding - Content padding. Default: `2rem`.
+ *
+ * @attr {boolean} no-padding - Remove content padding (useful for full-bleed slides).
  */
 export declare class PdPanel extends LitElement {
     static styles: import('lit').CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"PdPanel.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AAE5C;;;;;;;GAOG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BAsBX;IAEF,MAAM;CAOP"}
+{"version":3,"file":"PdPanel.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BA6BX;IAEF,MAAM;CAOP"}

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

@@ -5,6 +5,8 @@ class PdPanel extends LitElement {
     this.styles = css`
     :host {
       background: var(--pd-panel-bg, #afc1d2);
+      background-size: cover;
+      background-position: center;
       border-radius: var(--pd-panel-border-radius, 0.2em);
     }
 
@@ -15,12 +17,17 @@ class PdPanel extends LitElement {
       right: 0;
       bottom: 0;
       left: 0;
-      padding: 2rem;
+      padding: var(--pd-panel-padding, 2rem);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
     }
+
+    :host([no-padding]) #content {
+      padding: 0;
+    }
+
     #content > slot::slotted(*) {
       margin: 0;
     }

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

@@ -9,6 +9,7 @@ import { LitElement } from 'lit';
  *
  * @cssprop --pd-panel-viewer-bg-col - Viewer background color. Default: `var(--pd-default-col)`.
  * @cssprop --pd-panel-width - Max width of the panel viewer. Default: `1170px`.
+ * @attr {boolean} fill - Fill parent height instead of using --pd-panel-height.
  * @cssprop --pd-panel-height - Height of the panel viewer. Default: `60vh`.
  * @cssprop --pd-panel-overflow - Overflow behavior. Default: `hidden`.
  * @cssprop --pd-panel-nav-top - Top position of navigation arrows. Default: `calc(50% - 25px)`.
@@ -23,6 +24,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;;;;;;;;;;;;;;;;;;;;;;GAsBG;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,0BAiHX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EASd;IAED,MAAM;IAoFN,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 = {};
@@ -92,6 +93,7 @@ class PdPanelViewer extends LitElement {
       display: flex;
       flex-direction: column;
       width: 100%;
+      height: 100%;
       max-width: var(--pd-panel-width, 1170px);
       overflow: var(--pd-panel-overflow, hidden);
       background-color: var(--pd-panel-viewer-bg-col, var(--pd-default-col));
@@ -139,6 +141,21 @@ class PdPanelViewer extends LitElement {
       right: 0;
     }
 
+    :host([fill]) .panel-container {
+      height: 100%;
+    }
+
+    :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;
@@ -190,9 +207,14 @@ class PdPanelViewer extends LitElement {
     return this._index;
   }
   set index(value) {
-    this.children[this._index].dispatchEvent(new CustomEvent("exited"));
-    this.children[value].dispatchEvent(new CustomEvent("entered"));
+    const prev = this._index;
     this._index = value;
+    this.children[prev].dispatchEvent(
+      new CustomEvent("exited", { bubbles: true })
+    );
+    this.children[value].dispatchEvent(
+      new CustomEvent("entered", { bubbles: true })
+    );
   }
   render() {
     return html`
@@ -215,28 +237,36 @@ class PdPanelViewer extends LitElement {
         >
           <slot></slot>
         </div>
-        <pd-icon
-          id="prev"
-          icon="previousArrow"
-          ?activeIcon="${true}"
-          ?disabled="${this.index <= 0}"
-          aria-label="${msg("Previous panel", { id: "pd.panel.viewer.prev" })}"
-          role="button"
-          tabindex="0"
-          @click=${this.previous}
-          @keydown=${this._onNavKeyDown}
-        ></pd-icon>
-        <pd-icon
-          id="next"
-          icon="nextArrow"
-          ?activeIcon="${true}"
-          ?disabled="${this.index === this.children.length - 1}"
-          aria-label="${msg("Next panel", { id: "pd.panel.viewer.next" })}"
-          role="button"
-          tabindex="0"
-          @click=${this.next}
-          @keydown=${this._onNavKeyDown}
-        ></pd-icon>
+        ${this.children.length > 1 ? html`
+              <pd-icon
+                id="prev"
+                class=${classMap({ round: this.overlayNav })}
+                icon="previousArrow"
+                ?activeIcon="${true}"
+                ?disabled="${this.index <= 0}"
+                aria-label="${msg("Previous panel", {
+      id: "pd.panel.viewer.prev"
+    })}"
+                role="button"
+                tabindex="0"
+                @click=${this.previous}
+                @keydown=${this._onNavKeyDown}
+              ></pd-icon>
+              <pd-icon
+                id="next"
+                class=${classMap({ round: this.overlayNav })}
+                icon="nextArrow"
+                ?activeIcon="${true}"
+                ?disabled="${this.index === this.children.length - 1}"
+                aria-label="${msg("Next panel", {
+      id: "pd.panel.viewer.next"
+    })}"
+                role="button"
+                tabindex="0"
+                @click=${this.next}
+                @keydown=${this._onNavKeyDown}
+              ></pd-icon>
+            ` : nothing}
       </div>
       ${this.withProgress ? html` <div
             id="progress"
@@ -254,7 +284,7 @@ class PdPanelViewer extends LitElement {
         id: "pd.panel.viewer.panel"
       })} ${i + 1}"
                   @click="${() => {
-        this._index = i;
+        this.index = i;
       }}"
                   @keydown="${(e) => this._onProgressKeyDown(e, i)}"
                   class=${classMap({ watched: i <= this.index })}
@@ -340,7 +370,7 @@ class PdPanelViewer extends LitElement {
   _onProgressKeyDown(e, index) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      this._index = index;
+      this.index = index;
     } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
       e.preventDefault();
       this.next();
@@ -353,6 +383,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"}