@progressive-development/pd-content 0.9.1 → 1.0.0

package/dist/pd-code-snippet/pd-code-snippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-code-snippet.d.ts","sourceRoot":"","sources":["../../src/pd-code-snippet/pd-code-snippet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/pd-code-snippet/pd-code-snippet.js

@@ -0,0 +1,5 @@
+import { PdCodeSnippet } from './PdCodeSnippet.js';
+
+customElements.define("pd-code-snippet", PdCodeSnippet);
+
+export { PdCodeSnippet };

package/dist/pd-code-snippet/pd-code-snippet.stories.d.ts

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { CodeLanguage } from './PdCodeSnippet.js';
+/**
+ * Story arguments interface for pd-code-snippet component.
+ * Maps to the component's public API.
+ */
+interface PdCodeSnippetArgs {
+    /** Title displayed in header */
+    title: string;
+    /** Programming language */
+    language: CodeLanguage;
+    /** Source URL */
+    url: string;
+    /** Code content */
+    code: string;
+    /** Show line numbers */
+    showLineNumbers: boolean;
+}
+/**
+ * ## pd-code-snippet
+ *
+ * A code display component with syntax highlighting using Prism.js.
+ * Supports 11 languages plus plain text, with copy-to-clipboard, optional
+ * line numbers, and source URL display.
+ *
+ * ### Features
+ * - Syntax highlighting for JavaScript, TypeScript, HTML, CSS, JSON, Bash, YAML, Python, Java, SQL, Markdown
+ * - One-click copy to clipboard
+ * - Optional source URL link in footer
+ * - Optional line numbers
+ * - Code can be provided via `code` property or slot content
+ * - Extensive CSS Custom Properties for theming (colors, token colors, layout)
+ *
+ * ### Accessibility
+ * - Copy button has `aria-label="Copy code to clipboard"`
+ * - Focus-visible styling on the copy button for keyboard users
+ * - Line numbers are `aria-hidden="true"` (decorative)
+ * - Semantic HTML structure with `pre` and `code` elements
+ */
+declare const meta: Meta<PdCodeSnippetArgs>;
+export default meta;
+type Story = StoryObj<PdCodeSnippetArgs>;
+/** Default JavaScript code snippet. Interactive via Controls panel. */
+export declare const Default: Story;
+/** TypeScript snippet with title, source URL, and line numbers. Shows all header/footer features. */
+export declare const WithTitleAndUrl: Story;
+/** Overview of all 11 supported programming languages plus plain text. */
+export declare const AllLanguages: Story;
+/** Line numbers enabled for longer code blocks. */
+export declare const WithLineNumbers: Story;
+/** Code provided via slot content instead of the code property. */
+export declare const SlotContent: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-code-snippet.stories.d.ts.map

package/dist/pd-code-snippet/pd-code-snippet.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-code-snippet.stories.d.ts","sourceRoot":"","sources":["../../src/pd-code-snippet/pd-code-snippet.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAMvD;;;GAGG;AACH,UAAU,iBAAiB;IACzB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,iBAAiB;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CA0EjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,uEAAuE;AACvE,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAMF,qGAAqG;AACrG,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,YAAY,EAAE,KAsF1B,CAAC;AAMF,mDAAmD;AACnD,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAMF,mEAAmE;AACnE,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA6G3B,CAAC"}

package/dist/pd-collapse/PdCollapse.d.ts

@@ -1,22 +1,40 @@
 import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
 /**
+ * Collapsible accordion component with header and content.
+ *
  * @tagname pd-collapse
+ * @summary Collapsible accordion section with animated toggle.
  *
- * Ein auf- und zuklappbarer Bereich mit Header und Inhalt.
+ * @event pd-collapse-toggle - Fired when toggle state changes. Emits `{active, name}`.
+ * @event pd-collapse-register - Fired on mount for container registration.
+ * @event pd-collapse-unregister - Fired on unmount for container cleanup.
  *
- * @fires toggle-accordion - Wird ausgelöst, wenn der Zustand gewechselt wird (true/false).
+ * @slot header - Visible header area content.
+ * @slot content - Collapsible content area.
  *
- * @slot header - Slot für den sichtbaren Headerbereich
- * @slot content - Slot für den Inhalt, der ein- und ausgeklappt wird
+ * @cssprop --pd-collapse-border-radius - Border radius. Default: `--pd-radius-md`.
+ * @cssprop --pd-collapse-header-font-size - Header font size.
+ * @cssprop --pd-collapse-font-col - Header text color.
+ * @cssprop --pd-collapse-bg-col - Header background.
+ * @cssprop --pd-collapse-hover-col - Header hover background.
+ * @cssprop --pd-collapse-hover-font-col - Header hover font color
+ * @cssprop --pd-collapse-icon-col - Toggle icon color. Default: inherits from `--pd-collapse-font-col`.
+ * @cssprop --pd-collapse-icon-col-hover - Toggle icon hover color. Default: inherits from `--pd-collapse-font-col`.
+ * @cssprop --pd-collapse-content-bg-col - Content background.
+ * @cssprop --pd-collapse-content-border-col - Content border color.
+ * @cssprop --pd-collapse-content-padding - Content padding. Default: `--pd-spacing-sm`.
+ * @cssprop --pd-collapse-header-shadow - Header box-shadow for depth effect. Default: subtle shadow.
  */
 export declare class PdCollapse extends LitElement {
-    /**
-     * Optionales Icon für den Toggle Button (standardmäßig `ICON_TOGGLE_COLLAPSE`)
-     */
+    /** Toggle icon name. */
     icon: string;
+    /** Whether to start in open state. */
     startOpen: boolean;
+    /** Scroll content into view when opened. */
+    scrollOnOpen: boolean;
     /**
      * Gibt an, ob der Bereich geöffnet ist.
+     * @ignore
      */
     _active: boolean;
     static styles: CSSResultGroup;
@@ -30,8 +48,14 @@ export declare class PdCollapse extends LitElement {
     set active(activeVal: boolean);
     get active(): boolean;
     private _onClick;
+    private _onKeyDown;
+    /** @ignore */
+    private get _contentId();
+    /** @ignore */
+    private _scrollContentIntoView;
     protected _registerAtContainer(): void;
     protected _unRegisterAtContainer(): void;
+    /** @ignore */
     private _internalId?;
     private _getInternalId;
 }

package/dist/pd-collapse/PdCollapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdCollapse.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/PdCollapse.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,0CAA0C,CAAC;AAOlD;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAgC;IAG5C,SAAS,EAAE,OAAO,CAAS;IAE3B;;OAEG;IAEH,OAAO,UAAS;IAEhB,OAAgB,MAAM,EAAE,cAAc,CA+FpC;IAEO,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAmBf;;OAEG;IACH,IAAI,MAAM,CAAC,SAAS,EAAE,OAAO,EAe5B;IAED,IAAI,MAAM,IAjBY,OAAO,CAmB5B;IAED,OAAO,CAAC,QAAQ;IAIhB,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAatC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAaxC,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,cAAc;CAMvB"}
+{"version":3,"file":"PdCollapse.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/PdCollapse.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,wBAAwB;IAExB,IAAI,EAAE,MAAM,CAAgC;IAE5C,sCAAsC;IAEtC,SAAS,EAAE,OAAO,CAAS;IAE3B,4CAA4C;IAE5C,YAAY,EAAE,OAAO,CAAS;IAE9B;;;OAGG;IAEH,OAAO,UAAS;IAEhB,OAAgB,MAAM,EAAE,cAAc,CAoHpC;IAEO,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IA8Bf;;OAEG;IACH,IAAI,MAAM,CAAC,SAAS,EAAE,OAAO,EAoB5B;IAED,IAAI,MAAM,IAtBY,OAAO,CAwB5B;IAED,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,cAAc;IACd,OAAO,KAAK,UAAU,GAErB;IAED,cAAc;IACd,OAAO,CAAC,sBAAsB;IAQ9B,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAatC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAaxC,cAAc;IACd,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,cAAc;CAMvB"}

package/dist/pd-collapse/PdCollapse.js

@@ -2,7 +2,6 @@ import { LitElement, css, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { pdIcons } from '@progressive-development/pd-icon';
 import '@progressive-development/pd-icon/pd-icon';
-import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,14 +17,15 @@ class PdCollapse extends LitElement {
     super(...arguments);
     this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
     this.startOpen = false;
+    this.scrollOnOpen = false;
     this._active = false;
   }
   static {
     this.styles = [
-      PdColorStyles,
-      PdFontStyles,
       css`
       :host {
+        --_radius: var(--pd-collapse-border-radius, var(--pd-radius-md));
+
         display: block;
         width: 100%;
         position: relative;
@@ -38,35 +38,54 @@ class PdCollapse extends LitElement {
 
         display: flex;
         justify-content: space-between;
+        align-items: center;
         box-sizing: border-box;
-        padding: 0.5rem;
+        padding: var(--pd-spacing-sm) var(--pd-spacing-md);
         cursor: pointer;
 
         font-family: var(--pd-default-font-title-family);
-        font-size: var(--pd-collapse-header-font-size, 1rem);
+        font-size: var(--pd-collapse-header-font-size, 1.1rem);
         font-weight: bold;
         color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
         background: var(--pd-collapse-bg-col, var(--pd-default-col));
-        border-radius: var(--pd-border-radius) var(--pd-border-radius) 0 0;
+        border-radius: var(--_radius) var(--_radius) 0 0;
+        box-shadow: var(
+          --pd-collapse-header-shadow,
+          0 2px 4px rgba(0, 0, 0, 0.1)
+        );
 
         transition-property: box-shadow, background;
         transition: 0.2s ease-in;
       }
 
       .trigger pd-icon {
-        --pd-icon-col-active: var(--pd-default-dark-col);
-        /*
-        --pd-icon-col-hover: var(--pd-default-dark-col);
-        --pd-icon-col-active-hover: var(--pd-default-dark-col);
-        */
+        /* Primary icon uses --pd-icon-primary-col and --pd-icon-col-primary-active */
+        --pd-icon-primary-col: var(
+          --pd-collapse-icon-col,
+          var(--pd-collapse-font-col, var(--pd-default-bg-col))
+        );
+        --pd-icon-col-primary-active: var(
+          --pd-collapse-icon-col,
+          var(--pd-collapse-font-col, var(--pd-default-bg-col))
+        );
+        --pd-icon-col-hover: var(
+          --pd-collapse-icon-col-hover,
+          var(--pd-default-hover-col)
+        );
       }
 
       .trigger:hover {
         background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
+        color: var(--pd-collapse-hover-font-col, var(--pd-default-bg-col));
+      }
+
+      .trigger:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
       }
 
       .trigger.closed {
-        border-radius: var(--pd-border-radius);
+        border-radius: var(--_radius);
       }
 
       ::slotted(.header) {
@@ -83,11 +102,12 @@ class PdCollapse extends LitElement {
         overflow: hidden;
         opacity: 0;
         box-sizing: border-box;
-        padding: 0.5em;
 
-        border: 2px solid var(--pd-default-light-col);
+        border: 1px solid
+          var(--pd-collapse-content-border-col, var(--pd-default-light-col));
+        border-top: none;
         background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
-        border-radius: 0 0 var(--pd-border-radius) var(--pd-border-radius);
+        border-radius: 0 0 var(--_radius) var(--_radius);
 
         will-change: transform, opacity;
         transform: translate3d(0, -1.5em, 0);
@@ -106,6 +126,7 @@ class PdCollapse extends LitElement {
         overflow: visible;
         overflow-y: auto;
         opacity: 1;
+        padding: var(--pd-collapse-content-padding, var(--pd-spacing-sm));
 
         transform: translate3d(0, 0, 0);
         pointer-events: auto;
@@ -134,16 +155,27 @@ class PdCollapse extends LitElement {
     return html`
       <div
         class="trigger ${this._active ? "open" : "closed"}"
+        role="button"
+        tabindex="0"
+        aria-expanded="${this._active}"
+        aria-controls="${this._contentId}"
         @click=${this._onClick}
+        @keydown=${this._onKeyDown}
       >
         <slot name="header"></slot>
         <pd-icon
-          icon=${this.icon}
-          ?activeIcon=${this.active}
+          icon="${this.icon}"
+          ?activeIcon="${this._active}"
           class="small primary"
+          aria-hidden="true"
         ></pd-icon>
       </div>
-      <div class="content ${this._active ? "open" : "closed"}">
+      <div
+        id="${this._contentId}"
+        class="content ${this._active ? "open" : "closed"}"
+        role="region"
+        aria-hidden="${!this._active}"
+      >
         <slot name="content"></slot>
       </div>
     `;
@@ -165,6 +197,9 @@ class PdCollapse extends LitElement {
           }
         })
       );
+      if (this._active && this.scrollOnOpen) {
+        this._scrollContentIntoView();
+      }
     }
   }
   get active() {
@@ -173,6 +208,23 @@ class PdCollapse extends LitElement {
   _onClick() {
     this.active = !this._active;
   }
+  _onKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._onClick();
+    }
+  }
+  /** @ignore */
+  get _contentId() {
+    return `${this.id || this._getInternalId()}-content`;
+  }
+  /** @ignore */
+  _scrollContentIntoView() {
+    setTimeout(() => {
+      const content = this.shadowRoot?.getElementById(this._contentId);
+      content?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, 350);
+  }
   _registerAtContainer() {
     this.dispatchEvent(
       new CustomEvent("pd-collapse-register", {
@@ -209,6 +261,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], PdCollapse.prototype, "startOpen");
+__decorateClass([
+  property({ type: Boolean })
+], PdCollapse.prototype, "scrollOnOpen");
 __decorateClass([
   state()
 ], PdCollapse.prototype, "_active");

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

@@ -1,23 +1,51 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ active, header, content, }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        active: {
-            control: "boolean";
-        };
-        header: {
-            control: "text";
-        };
-        content: {
-            control: "text";
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-collapse component.
+ * Maps to the component's public API.
+ */
+interface PdCollapseArgs {
+    /** Whether the collapse starts in open state */
+    startOpen: boolean;
+    /** Header text content */
+    header: string;
+    /** Content text */
+    content: string;
+    /** Scroll content into view when opened */
+    scrollOnOpen: boolean;
+}
+/**
+ * ## pd-collapse
+ *
+ * A collapsible accordion component with animated open/close transitions.
+ *
+ * ### Features
+ * - Smooth animated toggle with CSS transitions
+ * - Configurable toggle icon via `icon` property
+ * - `startOpen` for initial open state
+ * - `scrollOnOpen` to scroll content into view after opening
+ * - Header and content slots for flexible markup
+ * - Works standalone or inside `pd-collapse-group` for accordion behavior
+ * - CSS custom properties for full visual customization
+ *
+ * ### Accessibility
+ * - Header uses `role="button"` with `tabindex="0"`
+ * - `aria-expanded` reflects open/closed state
+ * - `aria-controls` links header to content region
+ * - Content area uses `role="region"` with `aria-hidden`
+ * - Keyboard: Tab to focus, Enter/Space to toggle
+ * - Visible focus ring for keyboard users
+ */
+declare const meta: Meta<PdCollapseArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Closed: Story;
-export declare const Open: Story;
-export declare const OpenHugeContent: Story;
-export declare const OpenMiddleContent: Story;
+type Story = StoryObj<PdCollapseArgs>;
+/** Default closed collapse section. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All collapse states at a glance: closed, open, and long header. */
+export declare const AllStates: Story;
+/** Collapse sections with scrollOnOpen enabled for auto-scrolling behavior. */
+export declare const WithScrollOnOpen: Story;
+/** Collapse with rich HTML content including headings, lists, and links. */
+export declare const WithRichContent: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-collapse.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-collapse.stories.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/pd-collapse.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAiBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkD7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC"}
+{"version":3,"file":"pd-collapse.stories.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/pd-collapse.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAM1B;;;GAGG;AACH,UAAU,cAAc;IACtB,gDAAgD;IAChD,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,YAAY,EAAE,OAAO,CAAC;CACvB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwE9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,uEAAuE;AACvE,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,SAAS,EAAE,KA8CvB,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,gBAAgB,EAAE,KAqE9B,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA6F3B,CAAC"}

package/dist/pd-collapse-group/PdCollapseGroup.d.ts

@@ -1,27 +1,28 @@
 import { LitElement, CSSResultGroup } from 'lit';
 /**
- * @element pd-collapse-group
+ * Groups multiple pd-collapse elements to ensure only one is open at a time.
+ *
  * @tagname pd-collapse-group
  *
- * Gruppiert mehrere <pd-collapse> Elemente.
- * Stellt sicher, dass immer nur ein Element geöffnet (active) ist.
+ * @slot - List of pd-collapse elements.
  *
- * @slot default - Erwartet eine Liste von <pd-collapse> Elementen
+ * @csspart container - The group container element.
  *
- * @csspart container - Container der Collapse-Gruppe
+ * @cssprop --pd-collapse-group-gap - Gap between collapse elements. Default: `0.5rem`.
  */
 export declare class PdCollapseGroup extends LitElement {
     /**
      * Enthält alle zugewiesenen <pd-collapse>-Elemente
-     */
+     * @ignore */
     private _assignedCollapses;
     static styles: CSSResultGroup;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
+    /** @ignore */
     private _onRegister;
+    /** @ignore */
     private _onUnRegister;
-    private _onUnRegisterBound;
     private _onToggle;
     private _deactivateOtherCollapses;
 }

package/dist/pd-collapse-group/PdCollapseGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdCollapseGroup.d.ts","sourceRoot":"","sources":["../../src/pd-collapse-group/PdCollapseGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;GAUG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAA6C;IAEvE,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IAkBrC,MAAM;IAQN,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,kBAAkB,CAAiC;IAE3D,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,yBAAyB;CAOlC"}
+{"version":3,"file":"PdCollapseGroup.d.ts","sourceRoot":"","sources":["../../src/pd-collapse-group/PdCollapseGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;GAUG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C;;iBAEa;IACb,OAAO,CAAC,kBAAkB,CAA6C;IAEvE,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IAkBrC,MAAM;IAQN,cAAc;IACd,OAAO,CAAC,WAAW,CAKjB;IAEF,cAAc;IACd,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,yBAAyB;CAOlC"}

package/dist/pd-collapse-group/PdCollapseGroup.js

@@ -5,21 +5,22 @@ class PdCollapseGroup extends LitElement {
     super(...arguments);
     /**
      * Enthält alle zugewiesenen <pd-collapse>-Elemente
-     */
+     * @ignore */
     this._assignedCollapses = /* @__PURE__ */ new Map();
+    /** @ignore */
     this._onRegister = (e) => {
       const { name, collapse } = e.detail;
       console.debug("###### _onRegister collapse", name);
       this._assignedCollapses.set(name, collapse);
       e.stopPropagation();
     };
+    /** @ignore */
     this._onUnRegister = (e) => {
       const { name } = e.detail;
       console.debug("###### _onUnRegister collapse", name);
       this._assignedCollapses.delete(name);
       e.stopPropagation();
     };
-    this._onUnRegisterBound = this._onUnRegister.bind(this);
   }
   static {
     this.styles = [
@@ -30,7 +31,7 @@ class PdCollapseGroup extends LitElement {
       .container {
         display: flex;
         flex-direction: column;
-        gap: var(--pd-collapse-group-gap, 0.5rem);
+        gap: var(--pd-collapse-group-gap, var(--pd-spacing-md));
       }
     `
     ];
@@ -47,7 +48,7 @@ class PdCollapseGroup extends LitElement {
     );
     document.addEventListener(
       "pd-collapse-unregister",
-      this._onUnRegisterBound
+      this._onUnRegister
     );
   }
   disconnectedCallback() {
@@ -57,12 +58,12 @@ class PdCollapseGroup extends LitElement {
       this._onRegister
     );
     this.removeEventListener(
-      "pd-collapse-toogle",
+      "pd-collapse-toggle",
       this._onToggle
     );
     document.removeEventListener(
       "pd-collapse-unregister",
-      this._onUnRegisterBound
+      this._onUnRegister
     );
   }
   render() {

package/dist/pd-collapse-group/pd-collapse-group.stories.d.ts

@@ -1,5 +1,40 @@
-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-collapse-group component.
+ * Maps to the component's public API.
+ */
+interface PdCollapseGroupArgs {
+    /** Gap between collapse elements */
+    gap: string;
+}
+/**
+ * ## pd-collapse-group
+ *
+ * A container that groups multiple pd-collapse elements with accordion behavior.
+ * Only one collapse can be open at a time -- opening one automatically closes the others.
+ *
+ * ### Features
+ * - Accordion mode: only one collapse open at a time
+ * - Automatic registration of child pd-collapse elements
+ * - Configurable gap spacing via `--pd-collapse-group-gap`
+ * - CSS part `container` for external styling
+ *
+ * ### Accessibility
+ * - Inherits keyboard behavior from child pd-collapse elements
+ * - Each child collapse provides its own ARIA attributes
+ * - Accordion pattern: closing previous section when opening a new one
+ */
+declare const meta: Meta<PdCollapseGroupArgs>;
+export default meta;
+type Story = StoryObj<PdCollapseGroupArgs>;
+/** Default collapse group with accordion behavior. Opening one section closes others. */
+export declare const Default: Story;
+/** All sections initially closed -- no startOpen attribute on any child. */
+export declare const AllClosed: Story;
+/** Collapse group with rich HTML content in each section. */
+export declare const WithRichContent: Story;
+/** Different gap spacings side by side: tight (0px) vs. spacious (1.5rem). */
+export declare const CustomGap: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-collapse-group.stories.d.ts.map

package/dist/pd-collapse-group/pd-collapse-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-collapse-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-collapse-group/pd-collapse-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,wBAAwB,CAAC;wBAQ3B,IAAI;AANT,wBAMU;AAiCV,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"pd-collapse-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-collapse-group/pd-collapse-group.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AAMvC;;;GAGG;AACH,UAAU,mBAAmB;IAC3B,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAkCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C,yFAAyF;AACzF,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,eAAe,EAAE,KA+C7B,CAAC;AAMF,8EAA8E;AAC9E,eAAO,MAAM,SAAS,EAAE,KA2DvB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA2G3B,CAAC"}

package/dist/pd-edit-content/PdEditContent.d.ts

@@ -1,7 +1,19 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdEditContentDataEntry, PdEditLink } from '../types';
 /**
+ * Content card component for displaying editable data sections.
+ *
  * @tagname pd-edit-content
+ * @summary Editable content card with step number, data display, and edit links.
+ *
+ * @event edit-content - Fired when edit action is triggered. Emits `{step, link}`.
+ *
+ * @slot - Default slot for additional content.
+ *
+ * @cssprop --pd-ec-bg-col - Header background color. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-ec-font-title-col - Header title text color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-ec-font-title-size - Header title font size. Default: `1.2em`.
+ * @cssprop --pd-ec-nr-font-weight - Step number font weight. Default: `bold`.
  */
 export declare class PdEditContent extends LitElement {
     /**
@@ -28,5 +40,6 @@ export declare class PdEditContent extends LitElement {
     render(): import('lit').TemplateResult<1>;
     private static _getLinkLogo;
     private _editContent;
+    private _onLinkKeyDown;
 }
 //# sourceMappingURL=PdEditContent.d.ts.map

package/dist/pd-edit-content/PdEditContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdEditContent.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/PdEditContent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAuB9D;;GAEG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,IAAI,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAM;IAEzC;;OAEG;IAEH,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B;;OAEG;IAEH,YAAY,UAAS;IAErB,OAAgB,MAAM,EAAE,cAAc,CAoGpC;IAEO,MAAM;IAmDf,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B,OAAO,CAAC,YAAY;CAUrB"}
+{"version":3,"file":"PdEditContent.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/PdEditContent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAwB9D;;;;;;;;;;;;;;GAcG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,IAAI,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAM;IAEzC;;OAEG;IAEH,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B;;OAEG;IAEH,YAAY,UAAS;IAErB,OAAgB,MAAM,EAAE,cAAc,CAwGpC;IAEO,MAAM;IA+Df,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,cAAc;CAMvB"}