@progressive-development/pd-content 1.1.0 → 1.1.1

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

@@ -1,4 +1,4 @@
-import { css, LitElement, html } from 'lit';
+import { css, LitElement, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 
@@ -17,34 +17,127 @@ let PdMoreInfo = class extends LitElement {
     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();
@@ -100,14 +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.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));
 

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)`.

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;IAErB,qFAAqF;IAErF,UAAU,UAAQ;IAGlB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BA4GX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IA4EN,YAAY;IAQH,oBAAoB;IAS7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAQpB;IAEF,OAAO,CAAC,cAAc,CAqCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}
+{"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

@@ -93,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));
@@ -140,6 +141,10 @@ class PdPanelViewer extends LitElement {
       right: 0;
     }
 
+    :host([fill]) .panel-container {
+      height: 100%;
+    }
+
     :host([overlayNav]) .panel-container {
       padding: 0;
     }
@@ -202,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`
@@ -227,30 +237,36 @@ class PdPanelViewer extends LitElement {
         >
           <slot></slot>
         </div>
-        <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>
+        ${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"
@@ -268,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 })}
@@ -354,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();

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

@@ -25,6 +25,8 @@ import { Orientation, PointItem } from '../types';
  * @cssprop --pd-timeline-label-max-width - Maximum label width.
  * @cssprop --pd-timeline-vertical-row-gap - Vertical layout row gap.
  * @cssprop --pd-timeline-vertical-block-size - Vertical layout height.
+ * @cssprop --pd-timeline-item-color - Per-item accent color (set via PointItem.color, overrides point-bg and point-border-color).
+ * @cssprop --pd-timeline-point-max-text-width - Max text width / circle diameter (default: 10ch).
  * @cssprop --pd-timeline-color-active - Active state color.
  * @cssprop --pd-timeline-color-done - Done state color.
  * @cssprop --pd-timeline-color-error - Error state color.

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

@@ -1 +1 @@
-{"version":3,"file":"PdTimeline.d.ts","sourceRoot":"","sources":["../../src/pd-timeline/PdTimeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAyB,MAAM,UAAU,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,oDAAoD;IAEpD,WAAW,EAAE,WAAW,CAAgB;IAExC,mDAAmD;IAEnD,MAAM,EAAE,SAAS,EAAE,CAAM;IAEzB,0CAA0C;IAE1C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IAEpC,SAAS,UAAS;IAElB,MAAM,CAAC,MAAM,0BA+LX;IAEF,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,iBAAiB;IAWzB,SAAS,CAAC,MAAM;CAoDjB"}
+{"version":3,"file":"PdTimeline.d.ts","sourceRoot":"","sources":["../../src/pd-timeline/PdTimeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAyB,MAAM,UAAU,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,oDAAoD;IAEpD,WAAW,EAAE,WAAW,CAAgB;IAExC,mDAAmD;IAEnD,MAAM,EAAE,SAAS,EAAE,CAAM;IAEzB,0CAA0C;IAE1C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IAEpC,SAAS,UAAS;IAElB,MAAM,CAAC,MAAM,0BA2NX;IAEF,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,iBAAiB;IAUzB,SAAS,CAAC,MAAM;CAwDjB"}

package/dist/pd-timeline/PdTimeline.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,22 +23,31 @@ class PdTimeline extends LitElement {
     this.styles = css`
     :host {
       display: block;
+
+      /* Line */
       --pd-timeline-line-color: var(--pd-default-col);
       --pd-timeline-line-width: 2px;
       --pd-timeline-line-style: solid;
 
+      /* Point (dot) */
       --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-point-font-size: var(
+        --pd-default-font-content-size,
+        0.875rem
+      );
 
-      --pd-timeline-label-gap: 10px;
+      /* Label */
+      --pd-timeline-label-gap: var(--pd-spacing-sm, 0.5rem);
       --pd-timeline-label-max-width: 20ch;
 
-      --pd-timeline-vertical-row-gap: 20px;
+      /* Vertical layout */
+      --pd-timeline-vertical-row-gap: var(--pd-spacing-lg, 2rem);
 
+      /* State colors */
       --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);
@@ -87,8 +97,8 @@ class PdTimeline extends LitElement {
       row-gap: var(--pd-timeline-vertical-row-gap);
       justify-items: start;
       align-content: space-around;
-      padding-inline: 16px;
-      padding-block: 6px;
+      padding-inline: var(--pd-spacing-md, 1rem);
+      padding-block: var(--pd-spacing-xs, 0.25rem);
     }
 
     :host([orientation="vertical"]) .rail::before {
@@ -96,7 +106,9 @@ class PdTimeline extends LitElement {
       position: absolute;
       top: 0;
       bottom: 0;
-      left: calc(16px + (var(--pd-timeline-point-size) * 0.5));
+      left: calc(
+        var(--pd-spacing-md, 1rem) + (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);
@@ -126,18 +138,39 @@ class PdTimeline extends LitElement {
     /* === Dot (point) === */
     .dot {
       box-sizing: border-box;
-      width: var(--pd-timeline-point-size);
-      height: var(--pd-timeline-point-size);
+      display: block;
+      width: fit-content;
+      min-width: var(--pd-timeline-point-size);
+      max-width: calc(
+        var(--pd-timeline-point-max-text-width, 10ch) + 1em +
+          var(--pd-timeline-point-border-width) * 2
+      );
+      aspect-ratio: 1;
+      padding: 0.5em;
       border-radius: 999px;
-      background: var(--pd-timeline-point-bg);
+      overflow: hidden;
+      background: var(--pd-timeline-item-color, 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;
+        var(--pd-timeline-item-color, var(--pd-timeline-point-border-color));
+      text-align: center;
       font-size: var(--pd-timeline-point-font-size);
       line-height: 1;
       user-select: none;
+      flex-shrink: 0;
+    }
+
+    .dot-text {
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+      max-width: var(--pd-timeline-point-max-text-width, 10ch);
+      white-space: normal;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--pd-timeline-point-max-lines, 3);
+      overflow: hidden;
     }
 
     .dot[aria-current="step"] {
@@ -181,14 +214,10 @@ class PdTimeline extends LitElement {
 
     /* Horizontal label placement */
     :host([orientation="horizontal"]) .label.top {
-      bottom: calc(
-        50% + var(--pd-timeline-point-size) * 0.5 + var(--pd-timeline-label-gap)
-      );
+      bottom: calc(100% + 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)
-      );
+      top: calc(100% + var(--pd-timeline-label-gap));
     }
 
     /* Vertical label placement */
@@ -247,7 +276,7 @@ class PdTimeline extends LitElement {
       return html`<span aria-hidden="true">${p.icon}</span>`;
     }
     if (p.text) {
-      return html`${p.text}`;
+      return html`<span class="dot-text">${p.text}</span>`;
     }
     return nothing;
   }
@@ -264,9 +293,11 @@ class PdTimeline extends LitElement {
       const isActive = this.activeIndex === i;
       const stateClass = this._stateClass(p, i);
       const labelName = `label-${i}`;
+      const itemStyles = p.color ? { "--pd-timeline-item-color": p.color } : {};
       return html`
             <div
               class="item"
+              style=${styleMap(itemStyles)}
               role="listitem"
               aria-setsize="${this.points.length}"
               aria-posinset="${i + 1}"

package/dist/types.d.ts

@@ -40,6 +40,7 @@ export interface PointItem {
     icon?: string;
     labelSide?: LabelSide;
     state?: PointState;
+    color?: string;
 }
 export interface WizardStep {
     id: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACjE,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAGD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAGD,YAAY,EACV,OAAO,EACP,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAGnC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACjE,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAGD,YAAY,EACV,OAAO,EACP,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAGnC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-content",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -39,17 +39,27 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.40.0",
     "@lit/localize": "^0.12.2",
     "@types/prismjs": "^1.26.5",
     "lit": "^3.3.1",
     "prismjs": "^1.30.0",
     "pwa-helpers": "^0.9.1",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-dialog": "1.1.0",
-    "@progressive-development/pd-icon": "1.1.0",
-    "@progressive-development/pd-shared-styles": "0.4.0",
-    "@progressive-development/pd-forms": "1.1.0",
-    "@progressive-development/pd-model": "1.2.0"
+    "@progressive-development/pd-dialog": "1.1.1",
+    "@progressive-development/pd-icon": "1.1.1",
+    "@progressive-development/pd-forms": "1.1.1",
+    "@progressive-development/pd-model": "1.2.1",
+    "@progressive-development/pd-shared-styles": "0.4.1"
   },
   "customElements": "custom-elements.json",
   "keywords": [