@progressive-development/pd-dialog 1.0.3 → 1.1.0

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { BUTTON_KEY_CANCEL, BUTTON_KEY_CONFIRM, EVENT_CONFIRM, EVENT_CANCEL, } f
 export type { PdDialogType } from './pd-confirm-dialog/pd-confirm-dialog.js';
 export { PdFormDialog } from './pd-form-dialog/pd-form-dialog.js';
 export { EVENT_FORM_SUBMIT } from './pd-form-dialog/pd-form-dialog.js';
+export { PdAssistantInputBar } from './pd-assistant-input-bar/pd-assistant-input-bar.js';
+export { PdAssistantDialog } from './pd-assistant-dialog/pd-assistant-dialog.js';
 export type { PdDialogButton, PdSubmitDialogProps, PdSubmitDialogStatus, } from './types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,YAAY,GACb,MAAM,0CAA0C,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,YAAY,GACb,MAAM,0CAA0C,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AAGjF,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -3,9 +3,13 @@ import './pd-popup-dialog.js';
 import './pd-submit-dialog.js';
 export { BUTTON_KEY_CANCEL, BUTTON_KEY_CONFIRM, EVENT_CANCEL, EVENT_CONFIRM, PdConfirmDialog } from './pd-confirm-dialog/PdConfirmDialog.js';
 export { EVENT_FORM_SUBMIT, PdFormDialog } from './pd-form-dialog/PdFormDialog.js';
+import './pd-assistant-input-bar.js';
+import './pd-assistant-dialog.js';
 export { templates as beTemplates } from './locales/be.js';
 export { templates as deTemplates } from './locales/de.js';
 export { templates as enTemplates } from './locales/en.js';
+export { PdAssistantDialog } from './pd-assistant-dialog/PdAssistantDialog.js';
+export { PdAssistantInputBar } from './pd-assistant-input-bar/PdAssistantInputBar.js';
 export { PdPopup } from './pd-popup/PdPopup.js';
 export { PdPopupDialog } from './pd-popup-dialog/PdPopupDialog.js';
 export { PdSubmitDialog } from './pd-submit-dialog/PdSubmitDialog.js';

package/dist/pd-assistant-dialog/PdAssistantDialog.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+/**
+ * Assistant-style dialog shell with header, scrollable content area, and input bar footer.
+ * Wraps pd-popup via composition. Reusable for AI chat, image search, etc.
+ *
+ * @tagname pd-assistant-dialog
+ * @summary Assistant dialog with header, content slot, and input bar.
+ *
+ * @event pd-assistant-dialog-close - Fired when dialog is closed.
+ * @event pd-assistant-submit - Bubbles from the input bar on submit.
+ *
+ * @slot - Default slot for main content (results, messages, etc.).
+ *
+ * @cssprop --pd-assistant-dialog-width - Dialog width. Default: `min(520px, 90vw)`.
+ * @cssprop --pd-assistant-dialog-content-min-height - Min content height. Default: `120px`.
+ * @cssprop --pd-assistant-dialog-content-max-height - Max content height. Default: `50vh`.
+ */
+export declare class PdAssistantDialog extends LitElement {
+    /** Whether the dialog is open. Reactive — controls pd-popup visibility. */
+    open: boolean;
+    /** Dialog title shown in the header. */
+    dialogTitle: string;
+    /** Icon displayed next to the title. */
+    dialogIcon: string;
+    /** Placeholder for the input bar. */
+    inputPlaceholder: string;
+    /** Button text for the input bar. */
+    inputButtonText: string;
+    /** Disable the input bar. */
+    inputDisabled: boolean;
+    /** Hide the input bar entirely. */
+    hideInput: boolean;
+    private _popup;
+    static styles: CSSResultGroup;
+    updated(changed: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    /** Open the dialog. */
+    show(): void;
+    /** Close the dialog. */
+    hide(): void;
+    /** Clear the input bar value. */
+    clearInput(): void;
+    private _onPopupClose;
+    private _onCloseKeyDown;
+}
+//# sourceMappingURL=PdAssistantDialog.d.ts.map

package/dist/pd-assistant-dialog/PdAssistantDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdAssistantDialog.d.ts","sourceRoot":"","sources":["../../src/pd-assistant-dialog/PdAssistantDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,UAAU,EAIV,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,0CAA0C,CAAC;AAGlD,OAAO,yBAAyB,CAAC;AAEjC,OAAO,qDAAqD,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,2EAA2E;IAE3E,IAAI,UAAS;IAEb,wCAAwC;IAExC,WAAW,SAAM;IAEjB,wCAAwC;IAExC,UAAU,SAAM;IAEhB,qCAAqC;IAErC,gBAAgB,SAA6B;IAE7C,qCAAqC;IAErC,eAAe,SAAY;IAE3B,6BAA6B;IAE7B,aAAa,UAAS;IAEtB,mCAAmC;IAEnC,SAAS,UAAS;IAGlB,OAAO,CAAC,MAAM,CAAW;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAsDpC;IAEO,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU5C,MAAM;IAgDf,uBAAuB;IAChB,IAAI,IAAI,IAAI;IAInB,wBAAwB;IACjB,IAAI,IAAI,IAAI;IAInB,iCAAiC;IAC1B,UAAU,IAAI,IAAI;IAOzB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,eAAe;CAMxB"}

package/dist/pd-assistant-dialog/PdAssistantDialog.js

@@ -0,0 +1,193 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
+import '../pd-popup.js';
+import '../pd-assistant-input-bar.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 PdAssistantDialog extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.dialogTitle = "";
+    this.dialogIcon = "";
+    this.inputPlaceholder = "Suchbegriff eingeben...";
+    this.inputButtonText = "Suchen";
+    this.inputDisabled = false;
+    this.hideInput = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: contents;
+    }
+
+    pd-popup {
+      --pd-popup-width: var(--pd-assistant-dialog-width, min(520px, 90vw));
+      --pd-popup-max-width: var(--pd-assistant-dialog-width, min(520px, 90vw));
+      --pd-popup-modal-padding: 0;
+      --pd-popup-modal-padding-bottom: 0;
+      --pd-popup-modal-padding-top: 10vh;
+      --pd-popup-border-radius: 12px;
+      --pd-popup-modal-slot-max-width: 100%;
+      --pd-popup-modal-slot-margin: 0;
+    }
+
+    .dialog-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--pd-default-light-col, #e0e0e0);
+    }
+
+    .dialog-header h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+      flex: 1;
+    }
+
+    .dialog-header .header-icon {
+      --pd-icon-size: 1.25rem;
+      color: var(--pd-default-col, #0066cc);
+    }
+
+    .close-icon {
+      cursor: pointer;
+      --pd-icon-size: 1.25rem;
+    }
+
+    .close-icon:focus {
+      outline: 2px solid var(--pd-default-col);
+      outline-offset: 2px;
+      border-radius: var(--pd-radius-sm, 2px);
+    }
+
+    .dialog-content {
+      flex: 1;
+      overflow-y: auto;
+      min-height: var(--pd-assistant-dialog-content-min-height, 120px);
+      max-height: var(--pd-assistant-dialog-content-max-height, 50vh);
+      padding: 16px 20px;
+    }
+  `;
+  }
+  updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) {
+        this._popup?.showPopup();
+      } else {
+        this._popup?.hidePopup();
+      }
+    }
+  }
+  render() {
+    return html`
+      <pd-popup
+        closeByEscape
+        closeByBackdrop
+        blockScroll
+        hideCloseIcon
+        popupLabel="${this.dialogTitle}"
+        @popup-close="${this._onPopupClose}"
+      >
+        <div slot="content">
+          <div class="dialog-header">
+            ${this.dialogIcon ? html`<pd-icon
+                  class="header-icon"
+                  .icon="${this.dialogIcon}"
+                ></pd-icon>` : nothing}
+            <h3>${this.dialogTitle}</h3>
+            <pd-icon
+              class="close-icon"
+              .icon="${pdIcons.ICON_CLOSE}"
+              tabindex="0"
+              role="button"
+              aria-label="Schließen"
+              @click="${this.hide}"
+              @keydown="${this._onCloseKeyDown}"
+            ></pd-icon>
+          </div>
+
+          <div class="dialog-content">
+            <slot></slot>
+          </div>
+
+          ${this.hideInput ? nothing : html`
+                <pd-assistant-input-bar
+                  placeholder="${this.inputPlaceholder}"
+                  buttonText="${this.inputButtonText}"
+                  ?disabled="${this.inputDisabled}"
+                ></pd-assistant-input-bar>
+              `}
+        </div>
+      </pd-popup>
+    `;
+  }
+  /** Open the dialog. */
+  show() {
+    this.open = true;
+  }
+  /** Close the dialog. */
+  hide() {
+    this.open = false;
+  }
+  /** Clear the input bar value. */
+  clearInput() {
+    const inputBar = this.renderRoot.querySelector(
+      "pd-assistant-input-bar"
+    );
+    inputBar?.clear();
+  }
+  _onPopupClose() {
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("pd-assistant-dialog-close", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onCloseKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.hide();
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdAssistantDialog.prototype, "open");
+__decorateClass([
+  property({ type: String })
+], PdAssistantDialog.prototype, "dialogTitle");
+__decorateClass([
+  property({ type: String })
+], PdAssistantDialog.prototype, "dialogIcon");
+__decorateClass([
+  property({ type: String })
+], PdAssistantDialog.prototype, "inputPlaceholder");
+__decorateClass([
+  property({ type: String })
+], PdAssistantDialog.prototype, "inputButtonText");
+__decorateClass([
+  property({ type: Boolean })
+], PdAssistantDialog.prototype, "inputDisabled");
+__decorateClass([
+  property({ type: Boolean })
+], PdAssistantDialog.prototype, "hideInput");
+__decorateClass([
+  query("pd-popup")
+], PdAssistantDialog.prototype, "_popup");
+
+export { PdAssistantDialog };

package/dist/pd-assistant-dialog/pd-assistant-dialog.d.ts

@@ -0,0 +1,3 @@
+import { PdAssistantDialog } from './PdAssistantDialog.js';
+export { PdAssistantDialog };
+//# sourceMappingURL=pd-assistant-dialog.d.ts.map

package/dist/pd-assistant-dialog/pd-assistant-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-assistant-dialog.d.ts","sourceRoot":"","sources":["../../src/pd-assistant-dialog/pd-assistant-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAO3D,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/pd-assistant-dialog.d.ts

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

package/dist/pd-assistant-dialog.js

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

package/dist/pd-assistant-input-bar/PdAssistantInputBar.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * Input bar for assistant-style dialogs (search, chat).
+ *
+ * @tagname pd-assistant-input-bar
+ * @summary Text input with submit button for assistant dialogs.
+ *
+ * @event pd-assistant-submit - Fired on submit. Detail: `{ value: string }`.
+ *
+ * @cssprop --pd-assistant-input-bar-gap - Gap between input and button. Default: `8px`.
+ * @cssprop --pd-assistant-input-bar-padding - Bar padding. Default: `12px 20px 16px`.
+ */
+export declare class PdAssistantInputBar extends LitElement {
+    /** Placeholder text for the input field. */
+    placeholder: string;
+    /** Icon for the submit button. */
+    buttonIcon: any;
+    /** Button label text (shown if no icon, or as tooltip). */
+    buttonText: string;
+    /** Disable the input bar. */
+    disabled: boolean;
+    private _value;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    private _onInputChange;
+    private _onSubmit;
+    /** Clear the input field. */
+    clear(): void;
+}
+//# sourceMappingURL=PdAssistantInputBar.d.ts.map

package/dist/pd-assistant-input-bar/PdAssistantInputBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdAssistantInputBar.d.ts","sourceRoot":"","sources":["../../src/pd-assistant-input-bar/PdAssistantInputBar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAClD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AAErD;;;;;;;;;;GAUG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IACjD,4CAA4C;IAE5C,WAAW,SAA6B;IAExC,kCAAkC;IAElC,UAAU,MAAuB;IAEjC,2DAA2D;IAE3D,UAAU,SAAY;IAEtB,6BAA6B;IAE7B,QAAQ,UAAS;IAER,OAAO,CAAC,MAAM,CAAM;IAE7B,OAAgB,MAAM,EAAE,cAAc,CAiBpC;IAEO,MAAM;IAoBf,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,SAAS;IAajB,6BAA6B;IACtB,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-assistant-input-bar/PdAssistantInputBar.js

@@ -0,0 +1,100 @@
+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 '@progressive-development/pd-forms/pd-input';
+import '@progressive-development/pd-forms/pd-button';
+
+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 PdAssistantInputBar extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "Suchbegriff eingeben...";
+    this.buttonIcon = pdIcons.ICON_SEARCH;
+    this.buttonText = "Suchen";
+    this.disabled = false;
+    this._value = "";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+    }
+
+    .input-row {
+      display: flex;
+      gap: var(--pd-assistant-input-bar-gap, 8px);
+      padding: var(--pd-assistant-input-bar-padding, 12px 20px 16px);
+      border-top: 1px solid var(--pd-default-light-col, #e0e0e0);
+      align-items: center;
+    }
+
+    .input-row pd-input {
+      flex: 1;
+      --pd-input-field-width: 100%;
+    }
+  `;
+  }
+  render() {
+    return html`
+      <div class="input-row">
+        <pd-input
+          placeHolder="${this.placeholder}"
+          .value="${this._value}"
+          ?disabled="${this.disabled}"
+          @pd-form-element-change="${this._onInputChange}"
+          @enter-pressed="${this._onSubmit}"
+        ></pd-input>
+        <pd-button
+          text="${this.buttonText}"
+          primary
+          ?disabled="${this.disabled || !this._value.trim()}"
+          @button-clicked="${this._onSubmit}"
+        ></pd-button>
+      </div>
+    `;
+  }
+  _onInputChange(e) {
+    this._value = e.detail.value;
+  }
+  _onSubmit() {
+    const value = this._value.trim();
+    if (!value || this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("pd-assistant-submit", {
+        bubbles: true,
+        composed: true,
+        detail: { value }
+      })
+    );
+  }
+  /** Clear the input field. */
+  clear() {
+    this._value = "";
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdAssistantInputBar.prototype, "placeholder");
+__decorateClass([
+  property({ type: String })
+], PdAssistantInputBar.prototype, "buttonIcon");
+__decorateClass([
+  property({ type: String })
+], PdAssistantInputBar.prototype, "buttonText");
+__decorateClass([
+  property({ type: Boolean })
+], PdAssistantInputBar.prototype, "disabled");
+__decorateClass([
+  state()
+], PdAssistantInputBar.prototype, "_value");
+
+export { PdAssistantInputBar };

package/dist/pd-assistant-input-bar/pd-assistant-input-bar.d.ts

@@ -0,0 +1,3 @@
+import { PdAssistantInputBar } from './PdAssistantInputBar.js';
+export { PdAssistantInputBar };
+//# sourceMappingURL=pd-assistant-input-bar.d.ts.map

package/dist/pd-assistant-input-bar/pd-assistant-input-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-assistant-input-bar.d.ts","sourceRoot":"","sources":["../../src/pd-assistant-input-bar/pd-assistant-input-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAO/D,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/pd-assistant-input-bar.d.ts

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

package/dist/pd-assistant-input-bar.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-dialog",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Progressive Development dialog components.",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -16,6 +16,8 @@
     "./pd-popup-dialog": "./dist/pd-popup-dialog.js",
     "./pd-popup": "./dist/pd-popup.js",
     "./pd-submit-dialog": "./dist/pd-submit-dialog.js",
+    "./pd-assistant-input-bar": "./dist/pd-assistant-input-bar.js",
+    "./pd-assistant-dialog": "./dist/pd-assistant-dialog.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -30,10 +32,10 @@
     "lit": "^3.3.1",
     "@lit/localize": "^0.12.2",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-shared-styles": "0.3.2",
-    "@progressive-development/pd-icon": "1.0.2",
-    "@progressive-development/pd-price": "1.0.1",
-    "@progressive-development/pd-forms": "1.0.3"
+    "@progressive-development/pd-shared-styles": "0.4.0",
+    "@progressive-development/pd-price": "1.0.2",
+    "@progressive-development/pd-icon": "1.1.0",
+    "@progressive-development/pd-forms": "1.1.0"
   },
   "customElements": "custom-elements.json",
   "keywords": [