@progressive-development/pd-content 0.9.1 → 1.0.0

package/dist/pd-timeline/PdTimeline.js

@@ -0,0 +1,315 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdTimeline extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.points = [];
+    this.clickable = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      --pd-timeline-line-color: var(--pd-default-col);
+      --pd-timeline-line-width: 2px;
+      --pd-timeline-line-style: solid;
+
+      --pd-timeline-point-size: 28px;
+      --pd-timeline-point-bg: var(--pd-default-bg-col);
+      --pd-timeline-point-color: var(--pd-default-darkest-col);
+      --pd-timeline-point-border-color: var(--pd-default-disabled-col);
+      --pd-timeline-point-border-width: 2px;
+      --pd-timeline-point-font-size: 0.875rem;
+
+      --pd-timeline-label-gap: 10px;
+      --pd-timeline-label-max-width: 20ch;
+
+      --pd-timeline-vertical-row-gap: 20px;
+
+      --pd-timeline-color-active: var(--pd-default-info-col);
+      --pd-timeline-color-done: var(--pd-default-success-col);
+      --pd-timeline-color-error: var(--pd-default-error-col);
+    }
+
+    /* === Common container === */
+    .rail {
+      position: relative;
+    }
+
+    /* === Horizontal layout === */
+    :host([orientation="horizontal"]) .rail {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      align-items: center;
+      gap: 0;
+      padding-block: calc(
+        var(--pd-timeline-point-size) * 0.5
+      ); /* Platz für Labels oben/unten */
+    }
+
+    :host([orientation="horizontal"]) .rail::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      border-top: var(--pd-timeline-line-width) var(--pd-timeline-line-style)
+        var(--pd-timeline-line-color);
+      z-index: 0;
+    }
+
+    /* === Vertical layout === */
+
+    :host([orientation="vertical"]) {
+      /* default: auto, kann außen überschrieben werden */
+      block-size: var(--pd-timeline-vertical-block-size, auto);
+      --pd-timeline-label-max-width: 100%;
+    }
+
+    :host([orientation="vertical"]) .rail {
+      block-size: 100%;
+      display: grid;
+      grid-template-rows: repeat(var(--_count, 1), auto);
+      row-gap: var(--pd-timeline-vertical-row-gap);
+      justify-items: start;
+      align-content: space-around;
+      padding-inline: 16px;
+      padding-block: 6px;
+    }
+
+    :host([orientation="vertical"]) .rail::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(16px + (var(--pd-timeline-point-size) * 0.5));
+      transform: translateX(-50%);
+      border-left: var(--pd-timeline-line-width) var(--pd-timeline-line-style)
+        var(--pd-timeline-line-color);
+      z-index: 0;
+    }
+
+    /* === Item === */
+    .item {
+      position: relative;
+      z-index: 1;
+      display: grid;
+    }
+
+    :host([orientation="horizontal"]) .item {
+      justify-items: center;
+      align-items: center;
+    }
+
+    /* hack: special case timeline-wizard, labels shoud grow */
+    :host([orientation="vertical"]) .item {
+      display: flex;
+      align-items: baseline;
+      gap: var(--pd-timeline-label-gap);
+      width: 100%;
+    }
+
+    /* === Dot (point) === */
+    .dot {
+      box-sizing: border-box;
+      width: var(--pd-timeline-point-size);
+      height: var(--pd-timeline-point-size);
+      border-radius: 999px;
+      background: var(--pd-timeline-point-bg);
+      color: var(--pd-timeline-point-color);
+      border: var(--pd-timeline-point-border-width) solid
+        var(--pd-timeline-point-border-color);
+      display: inline-grid;
+      place-items: center;
+      font-size: var(--pd-timeline-point-font-size);
+      line-height: 1;
+      user-select: none;
+    }
+
+    .dot[aria-current="step"] {
+      outline: 3px solid
+        color-mix(in srgb, var(--pd-timeline-color-active), transparent 60%);
+      outline-offset: 2px;
+    }
+
+    .dot--button {
+      cursor: pointer;
+    }
+
+    .dot--button:focus-visible {
+      outline: 2px solid var(--pd-focus-ring-col);
+      outline-offset: 2px;
+    }
+
+    /* State colors (border or inner ring hint) */
+    .state-active {
+      border-color: var(--pd-timeline-color-active);
+    }
+    .state-done {
+      border-color: var(--pd-timeline-color-done);
+    }
+    .state-error {
+      border-color: var(--pd-timeline-color-error);
+    }
+
+    /* === Labels === */
+    .label {
+      position: absolute;
+      max-width: var(--pd-timeline-label-max-width);
+      text-align: center;
+    }
+
+    :host([orientation="vertical"]) .label {
+      text-align: left;
+      /* max-width above not work? */
+      width: max-content;
+    }
+
+    /* Horizontal label placement */
+    :host([orientation="horizontal"]) .label.top {
+      bottom: calc(
+        50% + var(--pd-timeline-point-size) * 0.5 + var(--pd-timeline-label-gap)
+      );
+    }
+    :host([orientation="horizontal"]) .label.back {
+      top: calc(
+        50% + var(--pd-timeline-point-size) * 0.5 + var(--pd-timeline-label-gap)
+      );
+    }
+
+    /* Vertical label placement */
+    :host([orientation="vertical"]) .label.top {
+      right: calc(
+        50% + var(--pd-timeline-point-size) * 0.5 + var(--pd-timeline-label-gap)
+      );
+    }
+
+    :host([orientation="vertical"]) .label.back {
+      /* Specia use case for timeline-wizard, abel shoud grow corectly */
+      position: static;
+      width: 100%;
+      /* left: calc(var(--pd-timeline-point-size) + var(--pd-timeline-label-gap)); 
+      top: calc((var(--pd-timeline-point-size) * 0.5) - 9px); */
+    }
+
+    /* Make label wrappers not capture clicks if not interactive */
+    .label ::slotted(*) {
+      pointer-events: auto;
+    }
+  `;
+  }
+  updated() {
+    this.style.setProperty("--_count", String(this.points?.length ?? 0));
+  }
+  _labelClass(idx) {
+    const p = this.points[idx];
+    const defaultSide = "back";
+    const side = p?.labelSide ?? defaultSide;
+    const sideClass = side === "top" ? "top" : "back";
+    return `label ${sideClass}`;
+  }
+  _stateClass(p, idx) {
+    const s = p?.state ?? (this.activeIndex === idx ? "active" : "default");
+    return s && s !== "default" ? `state-${s}` : "";
+  }
+  _onClick(idx, id) {
+    if (!this.clickable) return;
+    this.dispatchEvent(
+      new CustomEvent("step-click", {
+        detail: { index: idx, id },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onKeyDown(e, idx, id) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._onClick(idx, id);
+    }
+  }
+  _renderDotContent(p) {
+    if (p.icon) {
+      return html`<span aria-hidden="true">${p.icon}</span>`;
+    }
+    if (p.text) {
+      return html`${p.text}`;
+    }
+    return nothing;
+  }
+  render() {
+    const roleAttr = "list";
+    const ariaOrientation = this.orientation;
+    return html`
+      <div
+        class="rail"
+        role="${roleAttr}"
+        aria-orientation="${ariaOrientation}"
+      >
+        ${this.points.map((p, i) => {
+      const isActive = this.activeIndex === i;
+      const stateClass = this._stateClass(p, i);
+      const labelName = `label-${i}`;
+      return html`
+            <div
+              class="item"
+              role="listitem"
+              aria-setsize="${this.points.length}"
+              aria-posinset="${i + 1}"
+            >
+              ${this.clickable ? html`<div
+                    class="dot dot--button ${stateClass}"
+                    aria-current=${ifDefined(isActive ? "step" : void 0)}
+                    role="button"
+                    tabindex="0"
+                    @click=${() => this._onClick(i, p.id)}
+                    @keydown=${(e) => this._onKeyDown(e, i, p.id)}
+                    title="${p.text ?? p.icon ?? p.id}"
+                  >
+                    ${this._renderDotContent(p)}
+                  </div>` : html`<div
+                    class="dot ${stateClass}"
+                    aria-current=${ifDefined(isActive ? "step" : void 0)}
+                    title="${p.text ?? p.icon ?? p.id}"
+                  >
+                    ${this._renderDotContent(p)}
+                  </div>`}
+
+              <div class="${this._labelClass(i)}" part="label">
+                <slot name="${labelName}"></slot>
+              </div>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ reflect: true })
+], PdTimeline.prototype, "orientation");
+__decorateClass([
+  property({ type: Array })
+], PdTimeline.prototype, "points");
+__decorateClass([
+  property({ type: Number })
+], PdTimeline.prototype, "activeIndex");
+__decorateClass([
+  property({ type: Boolean })
+], PdTimeline.prototype, "clickable");
+
+export { PdTimeline };

package/dist/pd-timeline/pd-timeline.d.ts

@@ -0,0 +1,3 @@
+import { PdTimeline } from './PdTimeline';
+export { PdTimeline };
+//# sourceMappingURL=pd-timeline.d.ts.map

package/dist/pd-timeline/pd-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-timeline.d.ts","sourceRoot":"","sources":["../../src/pd-timeline/pd-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { Orientation, PointItem } from '../types.js';
+/**
+ * Story arguments interface for pd-timeline component.
+ * Maps to the component's public API.
+ */
+interface PdTimelineArgs {
+    /** Layout direction: 'horizontal' or 'vertical' */
+    orientation: Orientation;
+    /** Array of point definitions for the timeline */
+    points: PointItem[];
+    /** Index of the currently active step */
+    activeIndex: number;
+    /** Whether points are clickable */
+    clickable: boolean;
+}
+/**
+ * ## pd-timeline
+ *
+ * A timeline/stepper component for displaying sequential steps or progress.
+ *
+ * ### Features
+ * - Two orientations: horizontal or vertical layout
+ * - State indication: points can show active, done, error, or default state
+ * - Clickable points with keyboard support for navigation
+ * - Slotted labels via named slots (`label-0`, `label-1`, etc.)
+ * - Flexible sizing via CSS custom properties
+ * - Vertical mode supports explicit height or container-based sizing
+ *
+ * ### Accessibility
+ * - Container uses `role="list"` with `aria-orientation`
+ * - Each point is a `role="listitem"` with `aria-setsize` and `aria-posinset`
+ * - Active step indicated via `aria-current="step"`
+ * - Clickable points use `role="button"` and `tabindex="0"`
+ * - Full keyboard support with Enter and Space keys
+ * - Clear `:focus-visible` outline on interactive points
+ * - State colors (done/active/error) have sufficient contrast
+ */
+declare const meta: Meta<PdTimelineArgs>;
+export default meta;
+type Story = StoryObj<PdTimelineArgs>;
+/** Default horizontal timeline. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Horizontal timeline with done, active, error, and default states. */
+export declare const WithStates: Story;
+/** Vertical timeline layout with labels positioned beside each point. */
+export declare const Vertical: Story;
+/** Vertical timeline constrained to a fixed-height container. */
+export declare const VerticalInContainer: Story;
+/** Display-only timeline without click interaction. */
+export declare const NonClickable: Story;
+/** Visual demonstration of all four individual point states. */
+export declare const AllStates: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-timeline.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-timeline.stories.d.ts","sourceRoot":"","sources":["../../src/pd-timeline/pd-timeline.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAc,MAAM,aAAa,CAAC;AAMtE;;;GAGG;AACH,UAAU,cAAc;IACtB,mDAAmD;IACnD,WAAW,EAAE,WAAW,CAAC;IACzB,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAsCD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAkG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,mEAAmE;AACnE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAC;AAMF,yEAAyE;AACzE,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAMF,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,EAAE,KA8BjC,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,SAAS,EAAE,KAwFvB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA+F3B,CAAC"}

package/dist/pd-timeline-wizard/PdTimelineWizard.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import { Orientation, WizardStep } from '../types';
+/**
+ * Wizard component combining timeline navigation with step content.
+ *
+ * @tagname pd-timeline-wizard
+ * @summary Timeline wizard with horizontal or vertical accordion layout.
+ *
+ * @slot content-[index] - Named slots for step content (content-0, content-1, etc.).
+ *
+ * @cssprop --pd-wizard-gap - Gap between timeline and content. Default: `16px`.
+ * @cssprop --pd-wizard-content-max-width - Maximum width of content area. Default: `80ch`.
+ * @cssprop --pd-wizard-content-padding - Padding around content area. Default: `0.5rem 0`.
+ */
+export declare class PdTimelineWizard extends LitElement {
+    orientation: Orientation;
+    /** Steps definieren Label & Zustand; daraus werden Points für die Timeline generiert */
+    steps: WizardStep[];
+    /** Gesteuerter aktiver Index (optional). Ohne diesen greift defaultActiveIndex, später erweitern wir die Logik. */
+    activeIndex?: number;
+    /** Nur initial, wenn activeIndex nicht gesetzt ist. */
+    defaultActiveIndex: number;
+    /** Ob die Punkte klickbar gestylt werden (Verhalten folgt später). */
+    clickable: boolean;
+    /**
+     * interner Startwert, solange keine Change-Logik vorhanden
+     * @ignore */
+    private _internalActive;
+    connectedCallback(): void;
+    /** @ignore */
+    private get _current();
+    static styles: import('lit').CSSResult;
+    /** Points für die Timeline aus Steps ableiten */
+    private _points;
+    private _renderHorizontal;
+    private _renderVertical;
+    protected render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=PdTimelineWizard.d.ts.map

package/dist/pd-timeline-wizard/PdTimelineWizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdTimelineWizard.d.ts","sourceRoot":"","sources":["../../src/pd-timeline-wizard/PdTimelineWizard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAa,UAAU,EAAE,MAAM,UAAU,CAAC;AAEnE,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IACjB,WAAW,EAAE,WAAW,CAAgB;IAErE,wFAAwF;IAC7D,KAAK,EAAE,UAAU,EAAE,CAAM;IAEpD,mHAAmH;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD,uDAAuD;IAC3B,kBAAkB,SAAK;IAEnD,sEAAsE;IACzC,SAAS,UAAS;IAE/C;;iBAEa;IACJ,OAAO,CAAC,eAAe,CAAK;IAErC,iBAAiB,IAAI,IAAI;IAUzB,cAAc;IACd,OAAO,KAAK,QAAQ,GAEnB;IAED,MAAM,CAAC,MAAM,0BAyBX;IAEF,iDAAiD;IACjD,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,eAAe;IA6BvB,SAAS,CAAC,MAAM;CAKjB"}

package/dist/pd-timeline-wizard/PdTimelineWizard.js

@@ -0,0 +1,150 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '../pd-collapse.js';
+import '../pd-collapse-group.js';
+import '../pd-timeline.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdTimelineWizard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.steps = [];
+    this.defaultActiveIndex = 0;
+    this.clickable = false;
+    this._internalActive = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.activeIndex == null) {
+      this._internalActive = Math.min(
+        Math.max(0, this.defaultActiveIndex || 0),
+        Math.max(0, this.steps.length - 1)
+      );
+    }
+  }
+  /** @ignore */
+  get _current() {
+    return this.activeIndex ?? this._internalActive ?? 0;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      --pd-wizard-gap: 16px;
+      --pd-wizard-content-max-width: 80ch;
+      --pd-wizard-content-padding: 0.5rem 0;
+    }
+    .h-wrap {
+      display: grid;
+      gap: var(--pd-wizard-gap);
+    }
+    .h-content {
+      max-inline-size: var(--pd-wizard-content-max-width);
+      padding: var(--pd-wizard-content-padding);
+    }
+
+    /* Vertikal: wir lassen Timeline die Labels rendern (als <pd-collapse>),
+       daher braucht der Wizard nur Flow-Abstand rundum */
+    .v-wrap {
+      display: block;
+    }
+    pd-collapse {
+      display: block;
+      margin-block: 6px;
+    }
+  `;
+  }
+  /** Points für die Timeline aus Steps ableiten */
+  _points() {
+    return this.steps.map((s, i) => ({
+      id: s.id ?? `step-${i}`,
+      text: String(i + 1),
+      // Nummer im Kreis, Icon später möglich
+      state: s.state,
+      labelSide: s.labelSide ?? (this.orientation === "vertical" ? "back" : "back")
+    }));
+  }
+  _renderHorizontal() {
+    const points = this._points();
+    const a = this._current;
+    return html`
+      <div class="h-wrap">
+        <pd-timeline
+          .orientation=${"horizontal"}
+          .points=${points}
+          .activeIndex=${a}
+          .clickable=${this.clickable}
+        >
+          ${this.steps.map(
+      (s, i) => html` <span slot="${`label-${i}`}">${s.label}</span> `
+    )}
+        </pd-timeline>
+
+        <div class="h-content">
+          ${this.steps.map(
+      (_, i) => i === a ? html`<slot name="${`content-${i}`}"></slot>` : nothing
+    )}
+        </div>
+      </div>
+    `;
+  }
+  _renderVertical() {
+    const points = this._points();
+    const a = this._current;
+    return html`
+      <div class="v-wrap">
+        <pd-collapse-group>
+          <pd-timeline
+            .orientation=${"vertical"}
+            .points=${points}
+            .activeIndex=${a}
+            .clickable=${this.clickable}
+          >
+            ${this.steps.map(
+      (s, i) => html`
+                <pd-collapse id="${`collapseId${i}`}" slot="${`label-${i}`}">
+                  <div slot="header">${s.label}</div>
+                  <div class="section" slot="content">
+                    <slot name="${`content-${i}`}"></slot>
+                  </div>
+                </pd-collapse>
+              `
+    )}
+          </pd-timeline>
+        </pd-collapse-group>
+      </div>
+    `;
+  }
+  render() {
+    return this.orientation === "horizontal" ? this._renderHorizontal() : this._renderVertical();
+  }
+}
+__decorateClass([
+  property({ reflect: true })
+], PdTimelineWizard.prototype, "orientation");
+__decorateClass([
+  property({ type: Array })
+], PdTimelineWizard.prototype, "steps");
+__decorateClass([
+  property({ type: Number })
+], PdTimelineWizard.prototype, "activeIndex");
+__decorateClass([
+  property({ type: Number })
+], PdTimelineWizard.prototype, "defaultActiveIndex");
+__decorateClass([
+  property({ type: Boolean })
+], PdTimelineWizard.prototype, "clickable");
+__decorateClass([
+  state()
+], PdTimelineWizard.prototype, "_internalActive");
+
+export { PdTimelineWizard };

package/dist/pd-timeline-wizard/pd-timeline-wizard.d.ts

@@ -0,0 +1,3 @@
+import { PdTimelineWizard } from './PdTimelineWizard';
+export { PdTimelineWizard };
+//# sourceMappingURL=pd-timeline-wizard.d.ts.map

package/dist/pd-timeline-wizard/pd-timeline-wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-timeline-wizard.d.ts","sourceRoot":"","sources":["../../src/pd-timeline-wizard/pd-timeline-wizard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAOtD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/pd-timeline-wizard/pd-timeline-wizard.stories.d.ts

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { Orientation, WizardStep } from '../types.js';
+/**
+ * Story arguments interface for pd-timeline-wizard component.
+ * Maps to the component's public API.
+ */
+interface PdTimelineWizardArgs {
+    /** Layout direction: 'horizontal' or 'vertical' */
+    orientation: Orientation;
+    /** Array of wizard step definitions */
+    steps: WizardStep[];
+    /** Initial active step index (when activeIndex is not controlled) */
+    defaultActiveIndex: number;
+    /** Whether points are clickable */
+    clickable: boolean;
+}
+/**
+ * ## pd-timeline-wizard
+ *
+ * A wizard component combining timeline navigation with step content.
+ *
+ * ### Features
+ * - Two orientations: horizontal (timeline above, content below) or vertical (accordion style)
+ * - Step states: each step can show done, active, error, or default state
+ * - Slotted content via named slots (`content-0`, `content-1`, etc.)
+ * - Horizontal mode renders only the active step's content
+ * - Vertical mode uses pd-collapse components for accordion behavior
+ * - Integrates pd-timeline, pd-collapse, and pd-collapse-group internally
+ *
+ * ### Accessibility
+ * - Inherits all pd-timeline accessibility features (role="list", aria-current)
+ * - Vertical mode provides expand/collapse semantics via pd-collapse
+ * - Clickable points support keyboard navigation (Tab, Enter, Space)
+ * - Focus follows natural tab order through interactive elements
+ * - State colors have sufficient contrast (WCAG AA)
+ */
+declare const meta: Meta<PdTimelineWizardArgs>;
+export default meta;
+type Story = StoryObj<PdTimelineWizardArgs>;
+/** Default horizontal wizard. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Horizontal wizard with step states (done, active, error). */
+export declare const WithStates: Story;
+/** Vertical wizard with accordion-style content sections. */
+export declare const Vertical: Story;
+/** Vertical wizard showing step state indicators alongside accordion sections. */
+export declare const VerticalWithStates: Story;
+/** Wizard with clickable timeline points for step navigation. */
+export declare const Clickable: Story;
+/** Wizard with rich step content including form inputs. */
+export declare const WithFormContent: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-timeline-wizard.stories.d.ts.map

package/dist/pd-timeline-wizard/pd-timeline-wizard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-timeline-wizard.stories.d.ts","sourceRoot":"","sources":["../../src/pd-timeline-wizard/pd-timeline-wizard.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAMvE;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,mDAAmD;IACnD,WAAW,EAAE,WAAW,CAAC;IACzB,uCAAuC;IACvC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AA0CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CA6GpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAM5C,iEAAiE;AACjE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAMF,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAMF,iEAAiE;AACjE,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAMF,2DAA2D;AAC3D,eAAO,MAAM,eAAe,EAAE,KAgF7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAoF3B,CAAC"}

package/dist/pd-timeline-wizard.d.ts

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

package/dist/pd-timeline-wizard.js

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

package/dist/pd-timeline.d.ts

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

package/dist/pd-timeline.js

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