@progressive-development/pd-content 1.0.3 → 1.1.1

package/dist/pd-tab/PdTab.js

@@ -15,6 +15,7 @@ class PdTab extends LitElement {
   constructor() {
     super(...arguments);
     this.tabs = [];
+    this.orientation = "horizontal";
     this._resizeObserver = null;
   }
   static {
@@ -32,6 +33,17 @@ class PdTab extends LitElement {
         --_icon-size: var(--pd-tab-icon-size, 1.125em);
       }
 
+      /* --- Wrapper --- */
+      .tab-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host([orientation="vertical"]) .tab-wrapper {
+        flex-direction: row;
+      }
+
+      /* --- Header container --- */
       .header-container {
         display: flex;
         flex-wrap: nowrap;
@@ -39,6 +51,12 @@ class PdTab extends LitElement {
         font-size: var(--_font-size);
       }
 
+      :host([orientation="vertical"]) .header-container {
+        flex-direction: column;
+        border-bottom: none;
+        border-right: 1px solid var(--pd-default-disabled-light-col, #e5e7eb);
+      }
+
       /* --- Tab header --- */
       .tab-header {
         padding: var(--pd-tab-header-padding, 0.5em 1em);
@@ -60,6 +78,13 @@ class PdTab extends LitElement {
         flex-shrink: 0;
       }
 
+      :host([orientation="vertical"]) .tab-header {
+        border-bottom: none;
+        margin-bottom: 0;
+        border-left: var(--_active-height) solid transparent;
+        margin-left: calc(-1 * var(--_active-height) + 1px);
+      }
+
       .tab-header:hover {
         background-color: var(--pd-tab-hover-bg-col, rgba(0, 0, 0, 0.04));
       }
@@ -70,6 +95,11 @@ class PdTab extends LitElement {
         font-weight: 500;
       }
 
+      :host([orientation="vertical"]) .tab-header.active-header {
+        border-bottom-color: transparent;
+        border-left-color: var(--_active-col);
+      }
+
       .tab-header.disabled-header {
         pointer-events: none;
         color: var(
@@ -116,6 +146,13 @@ class PdTab extends LitElement {
         flex-shrink: 0;
       }
 
+      /* --- Panels container --- */
+      .panels-container {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+      }
+
       /* --- Content panels --- */
       .slot-container {
         display: none;
@@ -130,6 +167,14 @@ class PdTab extends LitElement {
         );
         border-top: none;
       }
+
+      :host([orientation="vertical"]) .active-slot {
+        border-top: var(
+          --pd-tab-content-border,
+          1px solid var(--pd-default-disabled-light-col, #e5e7eb)
+        );
+        border-left: none;
+      }
     `
     ];
   }
@@ -155,45 +200,54 @@ class PdTab extends LitElement {
     }
   }
   render() {
+    const isVertical = this.orientation === "vertical";
     return html`
-      <div
-        id="hc"
-        class="header-container"
-        role="tablist"
-        @keydown=${this._onKeyDown}
-      >
-        ${this.tabs.map(
+      <div class="tab-wrapper">
+        <div
+          id="hc"
+          class="header-container"
+          role="tablist"
+          aria-orientation="${isVertical ? "vertical" : "horizontal"}"
+          @keydown=${this._onKeyDown}
+        >
+          ${this.tabs.map(
       (t) => html`
-            <div
-              class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
-              data-key="${t.key}"
-              @click="${this._tabSelected}"
-              role="tab"
-              id="${`tab-${t.key}`}"
-              aria-selected="${this._activeTab === t.key}"
-              aria-controls="${`panel-${t.key}`}"
-              aria-disabled="${t.disabled || false}"
-              tabindex="${this._activeTab === t.key && !t.disabled ? 0 : -1}"
-            >
-              ${t.pdIcon ? html`<pd-icon class="tab-icon" .icon="${t.pdIcon}"></pd-icon>` : nothing}
-              <span class="full-label">${t.name}</span>
-              <span class="short-label">${t.shortLabel ?? t.name}</span>
-            </div>
-          `
+              <div
+                class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
+                data-key="${t.key}"
+                @click="${this._tabSelected}"
+                role="tab"
+                id="${`tab-${t.key}`}"
+                aria-selected="${this._activeTab === t.key}"
+                aria-controls="${`panel-${t.key}`}"
+                aria-disabled="${t.disabled || false}"
+                tabindex="${this._activeTab === t.key && !t.disabled ? 0 : -1}"
+              >
+                ${t.pdIcon ? html`<pd-icon
+                      class="tab-icon"
+                      .icon="${t.pdIcon}"
+                    ></pd-icon>` : nothing}
+                <span class="full-label">${t.name}</span>
+                <span class="short-label">${t.shortLabel ?? t.name}</span>
+              </div>
+            `
     )}
-      </div>
-      ${this.tabs.map(
+        </div>
+        <div class="panels-container">
+          ${this.tabs.map(
       (t) => html`
-          <div
-            id="${`panel-${t.key}`}"
-            role="tabpanel"
-            aria-labelledby="${`tab-${t.key}`}"
-            class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
-          >
-            <slot name="${t.key}"></slot>
-          </div>
-        `
+              <div
+                id="${`panel-${t.key}`}"
+                role="tabpanel"
+                aria-labelledby="${`tab-${t.key}`}"
+                class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
+              >
+                <slot name="${t.key}"></slot>
+              </div>
+            `
     )}
+        </div>
+      </div>
     `;
   }
   reset() {
@@ -205,7 +259,8 @@ class PdTab extends LitElement {
   _checkOverflow() {
     this.removeAttribute("data-compact");
     const c = this._headerContainer;
-    if (c.scrollWidth > c.clientWidth + 1 && this.tabs.some((t) => t.shortLabel)) {
+    const overflows = this.orientation === "vertical" ? c.scrollHeight > c.clientHeight + 1 : c.scrollWidth > c.clientWidth + 1;
+    if (overflows && this.tabs.some((t) => t.shortLabel)) {
       this.setAttribute("data-compact", "");
     }
   }
@@ -219,27 +274,23 @@ class PdTab extends LitElement {
       (t) => t.key === this._activeTab
     );
     let nextIndex = -1;
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        event.preventDefault();
-        nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        event.preventDefault();
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
-        break;
-      case "Home":
-        event.preventDefault();
-        nextIndex = 0;
-        break;
-      case "End":
-        event.preventDefault();
-        nextIndex = enabledTabs.length - 1;
-        break;
-      default:
-        return;
+    const isVertical = this.orientation === "vertical";
+    const nextKeys = isVertical ? ["ArrowDown"] : ["ArrowRight"];
+    const prevKeys = isVertical ? ["ArrowUp"] : ["ArrowLeft"];
+    if (nextKeys.includes(event.key)) {
+      event.preventDefault();
+      nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+    } else if (prevKeys.includes(event.key)) {
+      event.preventDefault();
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      event.preventDefault();
+      nextIndex = enabledTabs.length - 1;
+    } else {
+      return;
     }
     if (nextIndex >= 0 && nextIndex < enabledTabs.length) {
       const nextTab = enabledTabs[nextIndex];
@@ -279,6 +330,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], PdTab.prototype, "defaultTab");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdTab.prototype, "orientation");
 __decorateClass([
   state()
 ], PdTab.prototype, "_activeTab");

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;
@@ -49,7 +50,6 @@ export interface WizardStep {
 }
 export type { PdBadge, PdBadgeChangeDetail, PdBadgeReorderDetail, } from './pd-badge-order/types.js';
 export { TEXT_LIMIT_TITLE, TEXT_LIMIT_DESC, DEFAULT_BADGE_COLOR, } from './pd-badge-order/types.js';
-export type { GalleryImage, GalleryMode, GalleryOpenDetail, GalleryCloseDetail, GalleryNavigateDetail, } from './pd-gallery/types.js';
 /**
  * Notice types for different message contexts.
  */
@@ -57,5 +57,5 @@ export type NoticeType = "info" | "note" | "success" | "warning" | "error";
 /**
  * Visual variants for the notice box.
  */
-export type NoticeVariant = "box" | "sidebar";
+export type NoticeVariant = "box" | "sidebar" | "compact";
 //# sourceMappingURL=types.d.ts.map

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,YAAY,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAG/B;;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,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.0.3",
+  "version": "1.1.1",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -28,8 +28,6 @@
     "./pd-notice-box": "./dist/pd-notice-box/pd-notice-box.js",
     "./pd-code-snippet": "./dist/pd-code-snippet/pd-code-snippet.js",
     "./pd-badge-order": "./dist/pd-badge-order.js",
-    "./pd-gallery": "./dist/pd-gallery.js",
-    "./pd-gallery-lightbox": "./dist/pd-gallery-lightbox.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -41,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.0.3",
-    "@progressive-development/pd-icon": "1.0.2",
-    "@progressive-development/pd-shared-styles": "0.3.2",
-    "@progressive-development/pd-forms": "1.0.3",
-    "@progressive-development/pd-model": "1.1.1"
+    "@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": [

package/dist/pd-gallery/PdGallery.d.ts

@@ -1,72 +0,0 @@
-import { LitElement, nothing, CSSResultGroup } from 'lit';
-import { GalleryImage, GalleryMode } from './types.js';
-/**
- * Image gallery with Grid, Carousel, and Featured display modes.
- * Optionally opens a fullscreen lightbox on click.
- *
- * @tagname pd-gallery
- *
- * @event gallery-image-click - Fired when an image is clicked.
- * @event gallery-open - Fired when the lightbox opens.
- * @event gallery-close - Bubbles from lightbox when it closes.
- * @event gallery-navigate - Bubbles from lightbox on prev/next.
- *
- * @cssprop --pd-gallery-columns - Grid columns. Default: `3`.
- * @cssprop --pd-gallery-gap - Gap between items. Default: `0.75rem`.
- * @cssprop --pd-gallery-radius - Image border radius. Default: `8px`.
- * @cssprop --pd-gallery-aspect-ratio - Image aspect ratio. Default: `1/1`.
- * @cssprop --pd-gallery-hover-scale - Hover zoom factor. Default: `1.03`.
- * @cssprop --pd-gallery-caption-bg - Caption overlay background. Default: `rgba(0,0,0,0.6)`.
- * @cssprop --pd-gallery-featured-max-height - Featured image max height. Default: `500px`.
- * @cssprop --pd-gallery-carousel-transition - Carousel snap transition. Default: `smooth`.
- * @cssprop --pd-gallery-dot-size - Carousel dot size. Default: `10px`.
- * @cssprop --pd-gallery-dot-color - Carousel dot inactive color. Default: `rgba(0,0,0,0.25)`.
- * @cssprop --pd-gallery-dot-active-color - Carousel dot active color. Default: `var(--pd-default-col, #333)`.
- */
-export declare class PdGallery extends LitElement {
-    images: GalleryImage[];
-    mode: GalleryMode;
-    columns: number;
-    aspectRatio: string;
-    lightbox: boolean;
-    showCaptions: boolean;
-    maxHeight: string;
-    autoplay: boolean;
-    autoplayInterval: number;
-    loop: boolean;
-    showProgress: boolean;
-    /** @ignore */
-    private _carouselIndex;
-    /** @ignore */
-    private _lightbox;
-    /** @ignore */
-    private _carouselTrack;
-    /** @ignore */
-    private _autoplayTimer?;
-    /** @ignore */
-    private _observer?;
-    /** @ignore */
-    private _hovered;
-    static styles: CSSResultGroup;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    render(): import('lit').TemplateResult<1> | typeof nothing;
-    private _renderMode;
-    private _renderGrid;
-    private _renderCarousel;
-    private _setupCarouselObserver;
-    private _carouselPrev;
-    private _carouselNext;
-    private _carouselGoTo;
-    private _carouselScrollTo;
-    private _onCarouselKeyDown;
-    private _onCarouselEnter;
-    private _onCarouselLeave;
-    private _renderFeatured;
-    private _onImageClick;
-    private _onItemKeyDown;
-    private _startAutoplay;
-    private _stopAutoplay;
-}
-//# sourceMappingURL=PdGallery.d.ts.map

package/dist/pd-gallery/PdGallery.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PdGallery.d.ts","sourceRoot":"","sources":["../../src/pd-gallery/PdGallery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAqB,MAAM,YAAY,CAAC;AAG/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,SAAU,SAAQ,UAAU;IAEvC,MAAM,EAAE,YAAY,EAAE,CAAM;IAG5B,IAAI,EAAE,WAAW,CAAU;IAG3B,OAAO,SAAK;IAGZ,WAAW,SAAS;IAGpB,QAAQ,UAAQ;IAGhB,YAAY,UAAS;IAGrB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAGjB,gBAAgB,SAAQ;IAGxB,IAAI,UAAQ;IAGZ,YAAY,UAAQ;IAEpB,cAAc;IAEd,OAAO,CAAC,cAAc,CAAK;IAE3B,cAAc;IAEd,OAAO,CAAC,SAAS,CAAqB;IAEtC,cAAc;IAEd,OAAO,CAAC,cAAc,CAAe;IAErC,cAAc;IACd,OAAO,CAAC,cAAc,CAAC,CAAiC;IACxD,cAAc;IACd,OAAO,CAAC,SAAS,CAAC,CAAuB;IACzC,cAAc;IACd,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAiRpC;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA4B5C,MAAM;IAaf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,eAAe;IAkGvB,OAAO,CAAC,sBAAsB;IA4B9B,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa;CAMtB"}