@progressive-development/pd-content 0.9.2 → 1.0.1

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

@@ -1,7 +1,7 @@
-import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { LitElement, css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import Hammer from 'hammerjs';
+import { msg } from '@lit/localize';
 import '@progressive-development/pd-icon/pd-icon';
 
 var __defProp = Object.defineProperty;
@@ -13,16 +13,78 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-let timer;
 class PdPanelViewer extends LitElement {
   constructor() {
     super(...arguments);
     this.withProgress = false;
     this.deltaCalc = 3;
     this._index = 0;
-    // eslint-disable-next-line no-undef
     this._panData = {};
     this._update = {};
+    /** @ignore */
+    this._resizeObserver = null;
+    /** @ignore */
+    this._pointerStartX = 0;
+    /** @ignore */
+    this._pointerStartY = 0;
+    /** @ignore */
+    this._activePointerId = null;
+    /** @ignore */
+    this._pointerMoved = false;
+    /** @ignore */
+    this._dragThreshold = 5;
+    /** @ignore */
+    this._isHorizontalDrag = null;
+    // --- Pointer Event Handlers (Drag Gesture on .panel-content) ---
+    this._onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      this._activePointerId = e.pointerId;
+      this._pointerStartX = e.clientX;
+      this._pointerStartY = e.clientY;
+      this._pointerMoved = false;
+      this._isHorizontalDrag = null;
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    this._onPointerMove = (e) => {
+      if (e.pointerId !== this._activePointerId) return;
+      const deltaX = e.clientX - this._pointerStartX;
+      const deltaY = e.clientY - this._pointerStartY;
+      if (this._isHorizontalDrag === null) {
+        const absDx = Math.abs(deltaX);
+        const absDy = Math.abs(deltaY);
+        if (absDx < this._dragThreshold && absDy < this._dragThreshold) return;
+        this._isHorizontalDrag = absDx > absDy;
+        if (this._isHorizontalDrag) {
+          this.style.userSelect = "none";
+          window.getSelection()?.removeAllRanges();
+        }
+        if (!this._isHorizontalDrag) {
+          this._activePointerId = null;
+          return;
+        }
+      }
+      if (!this._isHorizontalDrag) return;
+      e.preventDefault();
+      this._pointerMoved = true;
+      this._panData = { deltaX, isFinal: false };
+    };
+    this._onPointerUp = (e) => {
+      if (e.pointerId !== this._activePointerId) return;
+      if (this._pointerMoved && this._isHorizontalDrag) {
+        const deltaX = e.clientX - this._pointerStartX;
+        this._panData = { deltaX, isFinal: true };
+      }
+      this._activePointerId = null;
+      this._isHorizontalDrag = null;
+      this.style.userSelect = "";
+    };
+    this._onPointerCancel = (e) => {
+      if (e.pointerId !== this._activePointerId) return;
+      this._panData = { deltaX: 0, isFinal: true };
+      this._activePointerId = null;
+      this._isHorizontalDrag = null;
+      this.style.userSelect = "";
+    };
   }
   static {
     this.styles = css`
@@ -32,7 +94,7 @@ class PdPanelViewer extends LitElement {
       width: 100%;
       max-width: var(--pd-panel-width, 1170px);
       overflow: var(--pd-panel-overflow, hidden);
-      background-color: var(--pd-panel-viewer-bg-col);
+      background-color: var(--pd-panel-viewer-bg-col, var(--pd-default-col));
     }
 
     .panel-container {
@@ -45,11 +107,28 @@ class PdPanelViewer extends LitElement {
       box-sizing: border-box;
     }
 
+    .panel-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      touch-action: pan-y;
+    }
+
     pd-icon {
       position: absolute;
-      top: calc(50% - 25px);
+      top: var(--pd-panel-nav-top, calc(50% - 25px));
       height: 50px;
       cursor: pointer;
+      z-index: 1;
+      --pd-icon-col-active: var(--pd-panel-icon-col, var(--pd-on-primary-col));
+      --pd-icon-col-hover: var(
+        --pd-panel-icon-col-hover,
+        var(--pd-on-primary-col)
+      );
+      --pd-icon-col-disabled: var(
+        --pd-panel-icon-col-disabled,
+        var(--pd-default-disabled-col)
+      );
     }
 
     #prev {
@@ -60,11 +139,21 @@ class PdPanelViewer extends LitElement {
       right: 0;
     }
 
+    @media (max-width: 768px) {
+      .panel-container {
+        padding: 0 0.5rem;
+      }
+      pd-icon {
+        height: 36px;
+        top: var(--pd-panel-nav-top, calc(50% - 18px));
+      }
+    }
+
     #progress {
       position: relative;
       height: 20px;
       width: 50%;
-      margin: 0.5rem auto;
+      margin: var(--pd-panel-progress-margin, 0.5rem auto);
       display: grid;
       grid-auto-flow: column;
       grid-auto-columns: 1fr;
@@ -74,14 +163,18 @@ class PdPanelViewer extends LitElement {
     }
 
     #progress > div {
-      background: var(--pd-panel-progress-col, grey);
-      height: 4px;
+      background: var(--pd-panel-progress-col, rgba(255, 255, 255, 0.4));
+      height: var(--pd-panel-progress-height, 4px);
+      border-radius: var(--pd-panel-progress-border-radius, 0);
       transition: background 0.3s linear;
       cursor: pointer;
     }
 
     #progress > div.watched {
-      background: var(--pd-panel-progress-col, yellow);
+      background: var(
+        --pd-panel-progress-watched-col,
+        var(--pd-on-primary-col)
+      );
     }
 
     ::slotted(*) {
@@ -103,61 +196,112 @@ class PdPanelViewer extends LitElement {
   }
   render() {
     return html`
-      <div class="panel-container">
-        <slot></slot>
+      <div
+        class="panel-container"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label="${msg("Panel viewer", {
+      id: "pd.panel.viewer.aria.label"
+    })}"
+        aria-live="polite"
+      >
+        <div
+          class="panel-content"
+          @pointerdown=${this._onPointerDown}
+          @pointermove=${this._onPointerMove}
+          @pointerup=${this._onPointerUp}
+          @pointercancel=${this._onPointerCancel}
+          @dragstart=${(e) => e.preventDefault()}
+        >
+          <slot></slot>
+        </div>
         <pd-icon
           id="prev"
           icon="previousArrow"
-          activeIcon
+          ?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
+          ?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>
       </div>
-      ${this.withProgress ? html` <div id="progress">
+      ${this.withProgress ? html` <div
+            id="progress"
+            role="tablist"
+            aria-label="${msg("Panel navigation", {
+      id: "pd.panel.viewer.progress"
+    })}"
+          >
             ${Array.from(this.children).map(
       (childEl, i) => html` <div
+                  role="tab"
+                  tabindex="0"
+                  aria-selected="${i === this.index}"
+                  aria-label="${msg("Panel", {
+        id: "pd.panel.viewer.panel"
+      })} ${i + 1}"
                   @click="${() => {
         this._index = i;
       }}"
+                  @keydown="${(e) => this._onProgressKeyDown(e, i)}"
                   class=${classMap({ watched: i <= this.index })}
                 ></div>`
     )}
-          </div>` : ""}
+          </div>` : nothing}
     `;
   }
   firstUpdated() {
-    const hammerVal = new Hammer(this);
-    hammerVal.on("pan", (panEvent) => {
-      this._panData = panEvent;
+    this._resizeObserver = new ResizeObserver(() => {
+      this._panData = {};
+      this._updateLayout();
     });
-    const ro = new ResizeObserver((entries) => {
-      entries.forEach(() => {
-        window.clearTimeout(timer);
-        timer = setTimeout(() => {
-          this.requestUpdate();
-        }, 100);
-      });
-    });
-    ro.observe(this);
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
   }
   update(changedProperties) {
+    super.update(changedProperties);
+    this._updateLayout();
+  }
+  /**
+   * Positions all panels using translate3d + scale based on current index and pan delta.
+   * Handles snap-to-panel decision when pan gesture ends (isFinal).
+   *
+   * Historical note: Layout-Berechnung aus dem original StackBlitz-Beispiel übernommen.
+   * @see https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts
+   */
+  _updateLayout() {
     const { isFinal = false } = this._panData;
     let { deltaX = 0 } = this._panData;
     const width = this.clientWidth;
+    if (width === 0) return;
     const minScale = 0.8;
-    if (!changedProperties.has("_index") && isFinal) {
+    if (isFinal && deltaX !== 0) {
       if (deltaX > width / this.deltaCalc) {
         this.previous();
       } else if (deltaX < -width / this.deltaCalc) {
         this.next();
       }
+      this._panData = {};
+      deltaX = 0;
     }
     deltaX = isFinal ? 0 : deltaX;
     Array.from(this.children).forEach((el, i) => {
@@ -165,10 +309,10 @@ class PdPanelViewer extends LitElement {
       const u = deltaX / width + (i - this.index);
       const v = -Math.abs(u * (1 - minScale)) + 1;
       const scale = Math.max(v, minScale);
-      el.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;
-      el.style.opacity = scale;
+      const htmlEl = el;
+      htmlEl.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;
+      htmlEl.style.opacity = String(scale);
     });
-    super.update(changedProperties);
   }
   /* Advance to the next story card if possible */
   next() {
@@ -186,6 +330,25 @@ class PdPanelViewer extends LitElement {
     );
     this._update = false;
   }
+  // --- Keyboard Handlers ---
+  _onNavKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.currentTarget?.click();
+    }
+  }
+  _onProgressKeyDown(e, index) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._index = index;
+    } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      this.next();
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      this.previous();
+    }
+  }
 }
 __decorateClass([
   property({ type: Boolean })
@@ -194,13 +357,13 @@ __decorateClass([
   property({ type: Number })
 ], PdPanelViewer.prototype, "deltaCalc");
 __decorateClass([
-  property({ type: Number, state: true })
+  state()
 ], PdPanelViewer.prototype, "_index");
 __decorateClass([
-  property({ type: Object, state: true })
+  state()
 ], PdPanelViewer.prototype, "_panData");
 __decorateClass([
-  property({ type: Boolean, state: true })
+  state()
 ], PdPanelViewer.prototype, "_update");
 
 export { PdPanelViewer };

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

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-panel-viewer component.
+ * Maps to the component's public API.
+ */
+interface PdPanelViewerArgs {
+    /** Show progress indicator bar below the panels */
+    withProgress: boolean;
+    /** Swipe sensitivity divisor (higher = less sensitive) */
+    deltaCalc: number;
+}
+/**
+ * ## pd-panel-viewer
+ *
+ * A carousel/slider component for displaying panels with swipe gestures and navigation arrows.
+ *
+ * ### Features
+ * - Swipe navigation via pointer events (touch and mouse)
+ * - Previous/next arrow buttons for navigation
+ * - Optional progress indicator bar with clickable segments
+ * - Smooth CSS transitions with scale effects
+ * - Configurable swipe sensitivity via `deltaCalc`
+ * - Responsive layout adapting to container width
+ * - `entered` and `exited` events dispatched on child panels
+ *
+ * ### Accessibility
+ * - Container uses `role="region"` with `aria-roledescription="carousel"`
+ * - Navigation arrows: `role="button"`, `tabindex="0"`, localized `aria-label`
+ * - Progress indicator: `role="tablist"` with `role="tab"` on each segment
+ * - `aria-live="polite"` announces panel changes to screen readers
+ * - Keyboard: Tab between arrows/progress, Enter/Space to activate, Arrow keys on progress tabs
+ */
+declare const meta: Meta<PdPanelViewerArgs>;
+export default meta;
+type Story = StoryObj<PdPanelViewerArgs>;
+/** Default panel viewer with progress indicator. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Visual comparison: with progress, without progress, and compact size. */
+export declare const AllVariants: Story;
+/** Panel viewer with gradient content cards showing a realistic use case. */
+export declare const ContentCards: Story;
+/** Side-by-side comparison of high vs. low swipe sensitivity. */
+export declare const SwipeSensitivity: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-panel-viewer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel-viewer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/pd-panel-viewer.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,sBAAsB,CAAC;AAM9B;;;GAGG;AACH,UAAU,iBAAiB;IACzB,mDAAmD;IACnD,YAAY,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,SAAS,EAAE,MAAM,CAAC;CACnB;AAkGD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CA+DjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,oFAAoF;AACpF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,WAAW,EAAE,KA0CzB,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAMF,iEAAiE;AACjE,eAAO,MAAM,gBAAgB,EAAE,KA0C9B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAyE3B,CAAC"}

package/dist/pd-resize-content/PdResizeContent.d.ts

@@ -1,15 +1,12 @@
 import { LitElement } from 'lit';
 /**
- * @tagname pd-resize-content
- *
- * Komponente zur responsiven Darstellung von Inhalten.
- * Wenn die Bildschirmbreite unter `resizeWidth` liegt, wird ein Popup angezeigt.
+ * Responsive content component that switches between inline and popup display.
  *
- * @fires book-date – Wenn ein freier Termin ausgewählt wird (nicht aktiv)
- * @fires edit-selection – Wenn der Nutzer Datum oder PLZ bearbeiten möchte (nicht aktiv)
+ * @tagname pd-resize-content
+ * @summary Responsive content wrapper that shows popup below breakpoint.
  *
- * @slot resize-content - Der Hauptinhalt, der bei ausreichender Breite direkt angezeigt wird.
- * @slot preview-content - Der Vorschauinhalt, der im Popup angezeigt wird, wenn die Breite nicht ausreicht.
+ * @slot resize-content - Main content shown when viewport is wide enough.
+ * @slot preview-content - Preview content shown in popup trigger when viewport is narrow.
  */
 export declare class PdResizeContent extends LitElement {
     /**
@@ -17,11 +14,16 @@ export declare class PdResizeContent extends LitElement {
      */
     resizeWidth: string;
     /**
-     * Interner Zustand: Gibt an, ob der Inhalt versteckt werden soll und stattdessen ein Popup angezeigt wird.
-     */
+     * * Interner Zustand: Gibt an, ob der Inhalt versteckt werden soll und stattdessen ein Popup angezeigt wird.
+     * @ignore */
     private _hideContent;
+    /** @ignore */
+    private _mediaQueryList?;
+    /** @ignore */
+    private _mediaQueryHandler?;
     static styles: import('lit').CSSResult;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected render(): import('lit').TemplateResult<1>;
 }
 //# sourceMappingURL=PdResizeContent.d.ts.map

package/dist/pd-resize-content/PdResizeContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdResizeContent.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/PdResizeContent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,6CAA6C,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IAEH,WAAW,SAAY;IAEvB;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAS;IAE7B,MAAM,CAAC,MAAM,0BAaX;IAEF,iBAAiB,IAAI,IAAI;IAUzB,SAAS,CAAC,MAAM;CAUjB"}
+{"version":3,"file":"PdResizeContent.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/PdResizeContent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,6CAA6C,CAAC;AAErD;;;;;;;;GAQG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IAEH,WAAW,SAAY;IAEvB;;iBAEa;IAEb,OAAO,CAAC,YAAY,CAAS;IAE7B,cAAc;IACd,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,cAAc;IACd,OAAO,CAAC,kBAAkB,CAAC,CAAmC;IAE9D,MAAM,CAAC,MAAM,0BAaX;IAEF,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAU5B,SAAS,CAAC,MAAM;CAUjB"}

package/dist/pd-resize-content/PdResizeContent.js

@@ -1,6 +1,5 @@
 import { LitElement, css, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { installMediaQueryWatcher } from 'pwa-helpers/media-query';
 import '@progressive-development/pd-dialog/pd-popup';
 
 var __defProp = Object.defineProperty;
@@ -25,23 +24,34 @@ class PdResizeContent extends LitElement {
     }
 
     h3 {
-      color: #084c61;
-      font-family: Oswald;
+      color: var(--pd-default-col);
+      font-family: var(--pd-default-font-title-family);
     }
 
     p {
-      color: #084c61;
+      color: var(--pd-default-col);
     }
   `;
   }
   connectedCallback() {
     super.connectedCallback();
-    installMediaQueryWatcher(
-      `(min-width: ${this.resizeWidth})`,
-      (matches) => {
-        this._hideContent = !matches;
-      }
+    this._mediaQueryList = window.matchMedia(
+      `(min-width: ${this.resizeWidth})`
     );
+    this._mediaQueryHandler = (e) => {
+      this._hideContent = !e.matches;
+    };
+    this._hideContent = !this._mediaQueryList.matches;
+    this._mediaQueryList.addEventListener("change", this._mediaQueryHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._mediaQueryList && this._mediaQueryHandler) {
+      this._mediaQueryList.removeEventListener(
+        "change",
+        this._mediaQueryHandler
+      );
+    }
   }
   render() {
     return this._hideContent ? html`

package/dist/pd-resize-content/pd-resize-content.stories.d.ts

@@ -1,5 +1,37 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-resize-content component.
+ * Maps to the component's public API.
+ */
+interface PdResizeContentArgs {
+    /** Minimum width threshold - below this, content shows in popup */
+    resizeWidth: string;
+}
+/**
+ * ## pd-resize-content
+ *
+ * A responsive content component that switches between inline display and popup
+ * based on viewport width. Uses a native media query watcher for performance.
+ *
+ * ### Features
+ * - Responsive display: automatically switches between inline and popup
+ * - Configurable breakpoint via `resizeWidth` property
+ * - Media query based for optimal performance
+ * - Two slots: `resize-content` for full content, `preview-content` for popup trigger
+ * - Delegates to `pd-popup` when viewport is narrow
+ *
+ * ### Accessibility
+ * - Content remains accessible in both inline and popup modes
+ * - Popup mode inherits accessibility from `pd-popup` component
+ * - No keyboard traps; content is reachable via Tab navigation
+ */
+declare const meta: Meta<PdResizeContentArgs>;
+export default meta;
+type Story = StoryObj<PdResizeContentArgs>;
+/** Default resize-content with 800px breakpoint. Resize the browser window to see the popup behavior. */
+export declare const Default: Story;
+/** All breakpoint sizes at a glance. Resize the browser to see each threshold in action. */
+export declare const BreakpointComparison: Story;
+/** Rich content like tables that benefit from responsive display. */
+export declare const WithRichContent: Story;
 //# sourceMappingURL=pd-resize-content.stories.d.ts.map

package/dist/pd-resize-content/pd-resize-content.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-resize-content.stories.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/pd-resize-content.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,qBAAqB,CAAC;wBAWxB,IAAI;AATT,wBASU;AAqBV,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"pd-resize-content.stories.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/pd-resize-content.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,wBAAwB,CAAC;AAMhC;;;GAGG;AACH,UAAU,mBAAmB;IAC3B,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAuDnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C,yGAAyG;AACzG,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,EAAE,KA2DlC,CAAC;AAMF,qEAAqE;AACrE,eAAO,MAAM,eAAe,EAAE,KA0G7B,CAAC"}

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

@@ -1,16 +1,49 @@
 import { LitElement, CSSResultGroup } from 'lit';
 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.
+ *
  * @tagname pd-tab
+ * @summary Tab navigation with responsive label switching.
+ *
+ * @event tab-selected - Fired when a tab is selected. Emits the tab key.
+ *
+ * @slot [key] - Named slots for each tab content, matching the tab key.
+ *
+ * @cssprop --pd-tab-header-padding - Tab header padding. Default: `0.5em 1em`.
+ * @cssprop --pd-tab-font-size - Tab font size. Default: `0.875rem`.
+ * @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-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`.
+ * @cssprop --pd-tab-icon-gap - Gap between icon and label. Default: `0.35em`.
+ * @cssprop --pd-tab-content-padding - Content area padding.
+ * @cssprop --pd-tab-content-border - Content area border.
  */
 export declare class PdTab extends LitElement {
+    /** Array of tab header definitions. */
     tabs: TabHeader[];
+    /** Key of the initially active tab. */
     defaultTab?: string;
-    _activeTab?: string;
+    private _activeTab?;
+    private _headerContainer;
+    private _resizeObserver;
     static styles: CSSResultGroup;
-    protected update(changedProperties: any): void;
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
     reset(): void;
+    private _checkOverflow;
+    private _onKeyDown;
     private _tabSelected;
 }
 //# sourceMappingURL=PdTab.d.ts.map

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,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;GAEG;AACH,qBAAa,KAAM,SAAQ,UAAU;IAEnC,IAAI,EAAE,SAAS,EAAE,CAAM;IAGvB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,MAAM,EAiGR,cAAc,CAAC;IAEpB,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,GAAG,GAAG,IAAI;IAQ9C,MAAM;IAgCN,KAAK;IAKL,OAAO,CAAC,YAAY;CAQrB"}
+{"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"}