@progressive-development/pd-forms 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -3,14 +3,18 @@ export { PdFormField } from './pd-form-field/pd-form-field.js';
 export { PdFormFieldset } from './pd-form-fieldset/pd-form-fieldset.js';
 export { PdButton } from './pd-button/pd-button.js';
 export { PdCheckbox } from './pd-checkbox/pd-checkbox.js';
+export { PdColorPicker } from './pd-color-picker/pd-color-picker.js';
 export { PdFormContainer } from './pd-form-container/pd-form-container.js';
 export { PdHoverBox } from './pd-hover-box/pd-hover-box.js';
 export { PdInput } from './pd-input/pd-input.js';
 export { PdInputArea } from './pd-input-area/pd-input-area.js';
 export { PdInputFile } from './pd-input-file/pd-input-file.js';
+export { PdInputImage } from './pd-input-image/pd-input-image.js';
+export type { ImageSelection } from './pd-input-image/pd-input-image.js';
 export { PdInputTime } from './pd-input-time/pd-input-time.js';
 export { PdRadioGroup } from './pd-radio-group/pd-radio-group.js';
 export { PdBaseInputElement } from './base/pd-base-input-element.js';
+export { PdBaseUIInput } from './base/pd-base-ui-input.js';
 export { PdGenericForm } from './pd-generic-form/pd-generic-form.js';
 export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, SuggestedElement, } from './types.js';
 export { UNDEF } from './types.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,YAAY,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,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,14 +3,17 @@ import './pd-form-field.js';
 import './pd-form-fieldset/pd-form-fieldset.js';
 import './pd-button.js';
 import './pd-checkbox.js';
+import './pd-color-picker.js';
 import './pd-form-container.js';
 import './pd-hover-box.js';
 import './pd-input.js';
 import './pd-input-area.js';
 import './pd-input-file.js';
+import './pd-input-image.js';
 import './pd-input-time.js';
 import './pd-radio-group.js';
 export { PdBaseInputElement } from './base/pd-base-input-element.js';
+export { PdBaseUIInput } from './base/pd-base-ui-input.js';
 import './pd-generic-form.js';
 export { UNDEF } from './types.js';
 import * as validators from './validators.js';
@@ -20,6 +23,7 @@ export { templates as deTemplates } from './locales/de.js';
 export { templates as enTemplates } from './locales/en.js';
 export { PdButton } from './pd-button/PdButton.js';
 export { PdCheckbox } from './pd-checkbox/PdCheckbox.js';
+export { PdColorPicker } from './pd-color-picker/PdColorPicker.js';
 export { PdFormContainer } from './pd-form-container/PdFormContainer.js';
 export { PdFormField } from './pd-form-field/PdFormField.js';
 export { PdFormFieldset } from './pd-form-fieldset/PdFormFieldset.js';
@@ -29,5 +33,6 @@ export { PdHoverBox } from './pd-hover-box/PdHoverBox.js';
 export { PdInput } from './pd-input/PdInput.js';
 export { PdInputArea } from './pd-input-area/PdInputArea.js';
 export { PdInputFile } from './pd-input-file/PdInputFile.js';
+export { PdInputImage } from './pd-input-image/PdInputImage.js';
 export { PdInputTime } from './pd-input-time/PdInputTime.js';
 export { PdRadioGroup } from './pd-radio-group/PdRadioGroup.js';

package/dist/pd-button/PdButton.d.ts

@@ -53,6 +53,9 @@ export type PdButtonType = "button" | "submit" | "reset";
  * @cssprop --pd-button-icon-size - Icon size.
  * @cssprop --pd-button-white-space - Text wrapping behavior. Default: `nowrap`.
  * @cssprop --pd-button-font-weight - Font weight for button text. Default: `600`.
+ * @cssprop --pd-button-outline-border-col - Outline variant border color.
+ * @cssprop --pd-button-outline-font-col - Outline variant text color.
+ * @cssprop --pd-button-outline-bg-col-hover - Outline variant hover background.
  */
 export declare class PdButton extends PdBaseUI {
     /**
@@ -65,6 +68,11 @@ export declare class PdButton extends PdBaseUI {
      * Customize gradient colors via `--pd-button-gradient-start` and `--pd-button-gradient-end`.
      */
     gradient: boolean;
+    /**
+     * Displays the button with outline styling — transparent background, dashed border.
+     * Use for add/action triggers like "Add field" or "Add step".
+     */
+    outline: boolean;
     /**
      * Indicates toggle/selected state for toggle buttons.
      * When true, the button displays with selected styling and sets `aria-pressed="true"`.

package/dist/pd-button/PdButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IAKpC;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,IAAI,SAAQ;IAEZ;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,YAAY,EAAE,OAAO,GAAG,KAAK,CAAW;IAExC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAQ;IAE1B;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAY;IAE9B;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd;iBACa;IAEb,OAAO,CAAC,UAAU,CAAS;IAM3B,OAAgB,MAAM,EAAE,cAAc,CA2VpC;IAMO,MAAM;IAgEf;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,GAAG,WAAW,CAEjE;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAEX;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,OAAO,CAE1D;IAED;;;OAGG;IACH,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAIhE;;;OAGG;IACH,SAAS,CAAC,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAI9D;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;IAWvD;;;OAGG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;CAS3B"}
+{"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IAKpC;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,IAAI,SAAQ;IAEZ;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,YAAY,EAAE,OAAO,GAAG,KAAK,CAAW;IAExC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAQ;IAE1B;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAY;IAE9B;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd;iBACa;IAEb,OAAO,CAAC,UAAU,CAAS;IAM3B,OAAgB,MAAM,EAAE,cAAc,CA8WpC;IAMO,MAAM;IAgEf;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,GAAG,WAAW,CAEjE;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAEX;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,OAAO,CAE1D;IAED;;;OAGG;IACH,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAIhE;;;OAGG;IACH,SAAS,CAAC,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAI9D;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;IAWvD;;;OAGG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;CAS3B"}

package/dist/pd-button/PdButton.js

@@ -18,6 +18,7 @@ class PdButton extends PdBaseUI {
     super(...arguments);
     this.primary = false;
     this.gradient = false;
+    this.outline = false;
     this.selected = false;
     this.disabled = false;
     this.loading = false;
@@ -303,6 +304,25 @@ class PdButton extends PdBaseUI {
         opacity: 0.9;
       }
 
+      /* ========================================
+         OUTLINE VARIANT
+         Transparent bg, dashed border, used for add/action triggers.
+         ======================================== */
+      :host([outline]) button {
+        background: transparent;
+        background-image: none;
+        border: 1px dashed
+          var(--pd-button-outline-border-col, var(--pd-default-col));
+        color: var(--pd-button-outline-font-col, var(--pd-default-col));
+        text-shadow: none;
+      }
+      :host([outline]) button:hover:not(:disabled) {
+        background: var(
+          --pd-button-outline-bg-col-hover,
+          var(--pd-default-lightest-col)
+        );
+      }
+
       /* ========================================
          DISABLED STATE (matches pd-panel-button)
          ======================================== */
@@ -545,6 +565,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdButton.prototype, "gradient");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdButton.prototype, "outline");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdButton.prototype, "selected");

package/dist/pd-color-picker/PdColorPicker.d.ts

@@ -0,0 +1,25 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+/**
+ * Color picker input component.
+ *
+ * Renders a native `<input type="color">` with a hex text input and color preview swatch.
+ *
+ * @tagname pd-color-picker
+ * @summary Color picker with hex input and swatch preview.
+ *
+ * @event pd-form-element-change - Fired when color value changes. Detail: `{ value, name, parsedValue, state }`.
+ */
+export declare class PdColorPicker extends PdBaseUIInput {
+    /** Placeholder shown in hex text input (without #). */
+    placeholder: string;
+    private _colorInput;
+    private _textInput;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    private _onColorInput;
+    private _onColorChange;
+    private _onHexInput;
+    private _onHexBlur;
+}
+//# sourceMappingURL=PdColorPicker.d.ts.map

package/dist/pd-color-picker/PdColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdColorPicker.d.ts","sourceRoot":"","sources":["../../src/pd-color-picker/PdColorPicker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,uDAAuD;IAEvD,WAAW,SAAY;IAGvB,OAAO,CAAC,WAAW,CAAoB;IAGvC,OAAO,CAAC,UAAU,CAAoB;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAqIpC;IAEO,MAAM;IAwCf,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,UAAU;CAmBnB"}

package/dist/pd-color-picker/PdColorPicker.js

@@ -0,0 +1,238 @@
+import { css, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.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 PdColorPicker extends PdBaseUIInput {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "000000";
+  }
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      css`
+      :host {
+        display: block;
+      }
+
+      .color-container {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: var(--pd-input-field-width, 250px);
+        max-width: 100%;
+      }
+
+      .color-swatch {
+        position: relative;
+        width: 42px;
+        height: 42px;
+        min-width: 42px;
+        border-radius: var(--pd-radius-md, 6px);
+        border: 2px solid var(--pd-default-light-col, #cbd5e1);
+        overflow: hidden;
+        cursor: pointer;
+      }
+
+      .color-swatch input[type="color"] {
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        width: calc(100% + 8px);
+        height: calc(100% + 8px);
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        background: none;
+      }
+
+      .color-swatch input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      .color-swatch input[type="color"]::-webkit-color-swatch {
+        border: none;
+      }
+
+      .color-swatch input[type="color"]::-moz-color-swatch {
+        border: none;
+      }
+
+      .hex-field {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        height: var(--pd-input-field-height, 2.5rem);
+        background: var(
+          --pd-input-field-bg-col,
+          var(--pd-default-bg-col, #fff)
+        );
+        border: var(
+          --pd-input-field-border,
+          1px solid var(--pd-default-light-col, #cbd5e1)
+        );
+        border-bottom: var(
+          --pd-input-field-border-bottom,
+          2px solid var(--pd-default-col, #2563eb)
+        );
+        border-radius: var(--pd-radius-md, 6px);
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      .hex-field:focus-within {
+        border: var(
+          --pd-input-field-border-focus,
+          2px solid var(--pd-default-col, #2563eb)
+        );
+      }
+
+      .hex-field.disabled {
+        background: var(--pd-input-field-bg-col-disabled, #e9e9e9);
+        border-bottom: var(
+          --pd-input-field-border-bottom-disabled,
+          2px solid var(--pd-default-disabled-col, #94a3b8)
+        );
+        cursor: not-allowed;
+      }
+
+      .hex-prefix {
+        padding-left: 0.5rem;
+        font-family: var(--pd-default-font-input-family, monospace);
+        font-size: var(--pd-default-font-input-size, 0.95rem);
+        color: var(--pd-default-font-muted-col, #94a3b8);
+        user-select: none;
+        line-height: 1;
+      }
+
+      .hex-input {
+        flex: 1;
+        height: 100%;
+        padding: var(--pd-input-field-padding, 0.25rem) 0.5rem
+          var(--pd-input-field-padding, 0.25rem) 0.25rem;
+        font-family: var(--pd-default-font-input-family, monospace);
+        font-size: var(--pd-default-font-input-size, 0.95rem);
+        color: var(--pd-default-font-input-col, #1e293b);
+        background: transparent;
+        border: none;
+        box-sizing: border-box;
+        text-transform: uppercase;
+        outline: none;
+      }
+
+      .hex-input:disabled {
+        cursor: not-allowed;
+      }
+
+      .color-container.error .hex-field {
+        border-color: var(--pd-default-error-col, #ef4444);
+      }
+
+      .color-container.valid .hex-field {
+        border-color: var(--pd-default-success-col, #22c55e);
+      }
+
+      .color-swatch.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .color-swatch.disabled input[type="color"] {
+        pointer-events: none;
+      }
+    `
+    ];
+  }
+  render() {
+    const inputId = `${this.id}ColorPicker`;
+    const errorId = `${this.id}Error`;
+    const currentColor = this._value || "#000000";
+    const displayValue = this._value ? this._value.replace(/^#/, "") : "";
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="${classMap(this.getClassmap({ "color-container": true }))}">
+        <div class="color-swatch ${this.disabled ? "disabled" : ""}">
+          <input
+            type="color"
+            .value="${currentColor}"
+            ?disabled="${this.disabled}"
+            @input="${this._onColorInput}"
+            @change="${this._onColorChange}"
+            aria-label="${this.label || "Farbauswahl"}"
+          />
+        </div>
+        <div class="hex-field ${this.disabled ? "disabled" : ""}">
+          <span class="hex-prefix">#</span>
+          <input
+            id="${inputId}"
+            type="text"
+            class="hex-input"
+            .value="${displayValue}"
+            placeholder="${this.placeholder}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            maxlength="6"
+            @input="${this._onHexInput}"
+            @blur="${this._onHexBlur}"
+            aria-describedby="${errorId}"
+          />
+        </div>
+      </div>
+      ${this._renderErrorMsg(errorId)}
+    `;
+  }
+  _onColorInput(event) {
+    const input = event.target;
+    this._handleChangedValue(input.value, event, true);
+  }
+  _onColorChange(event) {
+    const input = event.target;
+    this._handleChangedValue(input.value, event, true);
+  }
+  _onHexInput(event) {
+    const input = event.target;
+    const raw = input.value.replace(/#/g, "").trim();
+    if (raw === "") {
+      this._handleChangedValue("", event, true);
+      return;
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(raw)) {
+      this._handleChangedValue("#" + raw.toLowerCase(), event, true);
+    }
+  }
+  _onHexBlur(event) {
+    const input = event.target;
+    const raw = input.value.replace(/#/g, "").trim();
+    if (raw === "") {
+      this._handleChangedValue("", event, true);
+      return;
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(raw)) {
+      this._handleChangedValue("#" + raw.toLowerCase(), event, true);
+    } else if (/^[0-9a-fA-F]{3}$/.test(raw)) {
+      const expanded = "#" + raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2];
+      this._handleChangedValue(expanded.toLowerCase(), event, true);
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdColorPicker.prototype, "placeholder");
+__decorateClass([
+  query('input[type="color"]')
+], PdColorPicker.prototype, "_colorInput");
+__decorateClass([
+  query('input[type="text"]')
+], PdColorPicker.prototype, "_textInput");
+
+export { PdColorPicker };

package/dist/pd-color-picker/pd-color-picker.d.ts

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

package/dist/pd-color-picker/pd-color-picker.d.ts.map

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

package/dist/pd-color-picker.d.ts

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

package/dist/pd-color-picker.js

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

package/dist/pd-generic-form/PdGenericForm.d.ts

@@ -18,6 +18,7 @@ export declare class PdGenericForm extends LitElement {
     disconnectedCallback(): void;
     private _onFieldChange;
     private _isVisible;
+    private _valuesMatch;
     /**
      * Extracts schema fields from raw form values
      * and converts them into typed SchemaFieldData.

package/dist/pd-generic-form/PdGenericForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdGenericForm.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/PdGenericForm.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAM7D,KAAK,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;AACxC,KAAK,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;AAIhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAInC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IAE5C,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,oCAAoC;IAEpC,IAAI,EAAE,eAAe,CAAM;IAE3B,0DAA0D;IAE1D,IAAI,EAAE,MAAM,GAAG,MAAM,CAAU;IAE/B,wCAAwC;IAExC,QAAQ,EAAE,OAAO,CAAS;IAE1B,iEAAiE;IAEjE,OAAO,CAAC,WAAW,CAA+B;IAElD,OAAgB,MAAM,EAAE,cAAc,CAAyB;IAEtD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,UAAU;IAclB;;;;;OAKG;IACI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAe;IAyB5E,OAAO,CAAC,aAAa;cAqBF,MAAM,IAAI,cAAc;IAM3C,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,WAAW;IAYnB,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAC,aAAa,CAM1B;IAEF,mDAAmD;IACnD,OAAO,CAAC,iBAAiB;IAMzB,+CAA+C;IAC/C,OAAO,CAAC,UAAU;IAQlB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAoBvB,oFAAoF;IACpF,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,qBAAqB;IAwB7B,OAAO,CAAC,sBAAsB;IAoB9B,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,mBAAmB;CAsB5B"}
+{"version":3,"file":"PdGenericForm.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/PdGenericForm.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAM7D,KAAK,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;AACxC,KAAK,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;AAIhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAInC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IAE5C,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,oCAAoC;IAEpC,IAAI,EAAE,eAAe,CAAM;IAE3B,0DAA0D;IAE1D,IAAI,EAAE,MAAM,GAAG,MAAM,CAAU;IAE/B,wCAAwC;IAExC,QAAQ,EAAE,OAAO,CAAS;IAE1B,iEAAiE;IAEjE,OAAO,CAAC,WAAW,CAA+B;IAElD,OAAgB,MAAM,EAAE,cAAc,CAAyB;IAEtD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,YAAY;IAapB;;;;;OAKG;IACI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAe;IAyB5E,OAAO,CAAC,aAAa;cAqBF,MAAM,IAAI,cAAc;IAM3C,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,WAAW;IAYnB,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAC,aAAa,CAM1B;IAEF,mDAAmD;IACnD,OAAO,CAAC,iBAAiB;IAMzB,+CAA+C;IAC/C,OAAO,CAAC,UAAU;IAQlB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAoBvB,oFAAoF;IACpF,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,qBAAqB;IAwB7B,OAAO,CAAC,sBAAsB;IAqB9B,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,mBAAmB;CAuB5B"}

package/dist/pd-generic-form/PdGenericForm.js

@@ -57,11 +57,19 @@ const _PdGenericForm = class _PdGenericForm extends LitElement {
     if (!showWhen) return true;
     const currentValue = this._formValues[showWhen.fieldId];
     if (currentValue !== void 0) {
-      return currentValue === showWhen.equals;
+      return this._valuesMatch(currentValue, showWhen.equals);
     }
     const fieldValue = this.data[showWhen.fieldId];
     if (!fieldValue) return false;
-    return fieldValue.value === showWhen.equals;
+    return this._valuesMatch(fieldValue.value, showWhen.equals);
+  }
+  _valuesMatch(actual, expected) {
+    if (actual === expected) return true;
+    if (typeof expected === "boolean") {
+      if (expected === true) return actual === "yes" || actual === "true";
+      return actual === "no" || actual === "false";
+    }
+    return false;
   }
   /**
    * Extracts schema fields from raw form values
@@ -273,6 +281,7 @@ const _PdGenericForm = class _PdGenericForm extends LitElement {
         ?disabled="${this.disabled}"
         ?handleChangeForInitVal="${true}"
         initValue="${initValue}"
+        .aiOptions="${field.aiOptions}"
       ></pd-input-area>
     `;
   }
@@ -310,6 +319,7 @@ const _PdGenericForm = class _PdGenericForm extends LitElement {
         ?disabled="${this.disabled}"
         ?handleChangeForInitVal="${true}"
         initValue="${initValue}"
+        .aiOptions="${field.aiOptions}"
       ></pd-input>
     `;
   }

package/dist/pd-generic-form/pd-generic-form.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-generic-form.styles.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/pd-generic-form.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yBAyG/B,CAAC"}
+{"version":3,"file":"pd-generic-form.styles.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/pd-generic-form.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yBAgH/B,CAAC"}

package/dist/pd-generic-form/pd-generic-form.styles.js

@@ -20,8 +20,8 @@ const pdGenericFormStyles = css`
 
   .view-item {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    align-items: baseline;
+    gap: 1rem;
     background: var(
       --pd-generic-form-view-item-bg,
       var(--pd-default-bg-light-col, #f8f9fc)
@@ -38,6 +38,8 @@ const pdGenericFormStyles = css`
   }
 
   .view-label {
+    flex: 0 0 auto;
+    max-width: 40%;
     font-weight: var(--pd-generic-form-view-label-weight, 500);
     font-size: var(
       --pd-generic-form-view-label-size,
@@ -51,13 +53,16 @@ const pdGenericFormStyles = css`
   }
 
   .view-value {
+    flex: 1 1 0;
+    min-width: 0;
+    text-align: right;
+    word-break: break-word;
     font-weight: var(--pd-generic-form-view-value-weight, 600);
     color: var(
       --pd-generic-form-view-value-col,
       var(--pd-default-col, #067394)
     );
     font-family: var(--pd-default-font-content-family);
-    white-space: nowrap;
   }
 
   .view-value a {
@@ -99,10 +104,12 @@ const pdGenericFormStyles = css`
       flex-direction: column;
       align-items: flex-start;
     }
+    .view-label {
+      max-width: none;
+    }
     .view-value {
       margin-top: 0.25rem;
-      white-space: normal;
-      word-break: break-word;
+      text-align: left;
     }
   }
 `;

package/dist/pd-input-image/PdInputImage.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+export interface ImageSelection {
+    /** Bild-URL (Data-URL oder externe URL) */
+    src: string;
+    /** Optionaler Kommentar zum Bild (Phase 2) */
+    comment?: string;
+    /** Whether this image is selected (only used when selectable mode is enabled) */
+    selected?: boolean;
+}
+/**
+ * Multi-image input component with file upload and optional AI image generation.
+ *
+ * @tagname pd-input-image
+ * @summary Multi-image picker with thumbnail grid, file upload, and AI integration.
+ *
+ * @event pd-form-element-change - Fired when the images array changes.
+ * @event pd-form-element-register - Fired on first render for form integration.
+ * @event pd-form-element-unregister - Fired on disconnect for form cleanup.
+ * @event pd-ai-trigger - Fired when AI sparkle icon is clicked (requires aiOptions).
+ *
+ * @cssprop --pd-input-field-width - Container width. Default: `300px`.
+ * @cssprop --pd-input-field-bg-col - Background color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-input-field-border - Border style. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-input-field-border-bottom - Bottom border. Default: `2px solid var(--pd-default-col)`.
+ * @cssprop --pd-input-image-grid-gap - Gap between thumbnails. Default: `var(--pd-spacing-sm, 8px)`.
+ * @cssprop --pd-input-image-thumb-size - Thumbnail tile size. Default: `120px`.
+ * @cssprop --pd-input-image-thumb-radius - Thumbnail border-radius. Default: `var(--pd-radius-md)`.
+ * @cssprop --pd-input-image-remove-bg - Remove button background. Default: `rgba(0,0,0,0.5)`.
+ * @cssprop --pd-input-image-remove-size - Remove button size. Default: `24px`.
+ */
+export declare class PdInputImage extends PdBaseUIInput {
+    /** Accepted file types for the file picker. */
+    accept: string;
+    /** Placeholder text shown when no image is set. */
+    placeholder: string;
+    /** Maximum number of images allowed. */
+    max: number;
+    /** Enable single-select mode: user can click a thumbnail to select it. */
+    selectable: boolean;
+    /** Internal images array – primary data source. */
+    private _images;
+    /** Index of the image currently shown in the preview overlay, or null. */
+    private _previewIndex;
+    /** Whether the URL input row is visible. */
+    private _showUrlInput;
+    /** Current value of the URL input field. */
+    private _urlInputValue;
+    static styles: CSSResultGroup;
+    private _boundHandleKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get value(): ImageSelection[];
+    set value(val: ImageSelection[]);
+    private _updateImages;
+    protected _dispatchChange(_value: string, eventName?: string): void;
+    protected _registerAtContainer(valid: boolean): void;
+    protected _getParsedValue(): ImageSelection[];
+    aiAdopt(value: string): void;
+    reset(): void;
+    clear(): void;
+    update(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _onPlaceholderClick;
+    private _onSelectClick;
+    private _openFilePicker;
+    private _onContainerKeyDown;
+    private _onFileSelect;
+    private _openPreview;
+    private _closePreview;
+    private _onBackdropClick;
+    private _handleGlobalKeyDown;
+    private _removeImage;
+    private _selectImage;
+    private _getSelectedImage;
+    private _onUrlAddClick;
+    private _onUrlConfirm;
+}
+//# sourceMappingURL=PdInputImage.d.ts.map

package/dist/pd-input-image/PdInputImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdInputImage.d.ts","sourceRoot":"","sources":["../../src/pd-input-image/PdInputImage.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAiB,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMpE,OAAO,0CAA0C,CAAC;AAElD,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAI5D,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,+CAA+C;IAE/C,MAAM,SAAa;IAEnB,mDAAmD;IAEnD,WAAW,SAAoB;IAE/B,wCAAwC;IAExC,GAAG,SAAY;IAEf,0EAA0E;IAE1E,UAAU,UAAS;IAEnB,mDAAmD;IAEnD,OAAO,CAAC,OAAO,CAAwB;IAEvC,0EAA0E;IAE1E,OAAO,CAAC,aAAa,CAAuB;IAE5C,4CAA4C;IAE5C,OAAO,CAAC,aAAa,CAAS;IAE9B,4CAA4C;IAE5C,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAEF,OAAO,CAAC,mBAAmB,CAAwC;IAE1D,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IASrC,IAAI,KAAK,IAAI,cAAc,EAAE,CAE5B;IAGD,IAAI,KAAK,CAAC,GAAG,EAAE,cAAc,EAAE,EAE9B;IAID,OAAO,CAAC,aAAa;cAaF,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;cAyBzD,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;cAyB1C,eAAe,IAAI,cAAc,EAAE;IAItC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B,KAAK,IAAI,IAAI;IAqCb,KAAK,IAAI,IAAI;IAMpB,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoChD,MAAM;IAkQf,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;CAiBtB"}