@progressive-development/pd-forms 0.9.2 → 1.0.1

package/dist/pd-checkbox/PdCheckbox.js

@@ -78,11 +78,17 @@ class PdCheckbox extends PdBaseUIInput {
       }
 
       .readonly .label {
-        color: var(--pd-cb-font-col-readonly, #4d4d4d);
+        color: var(
+          --pd-cb-font-col-readonly,
+          var(--pd-default-disabled-text-col)
+        );
       }
 
       .disabled .label {
-        color: var(--pd-cb-font-col-disabled, #4d4d4d);
+        color: var(
+          --pd-cb-font-col-disabled,
+          var(--pd-default-disabled-text-col)
+        );
       }
 
       /*
@@ -90,23 +96,36 @@ class PdCheckbox extends PdBaseUIInput {
        */
       .checkbox {
         display: flex;
-        border-radius: 4px;
+        border-radius: var(--pd-cb-border-radius, var(--pd-radius-md));
         line-height: 0;
         align-items: center;
         justify-content: center;
+        margin-right: 0.2rem;
+        margin-bottom: 0.2rem;
+      }
+
+      .checkbox:focus {
+        outline: none;
+      }
+
+      .checkbox:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-cb-border-radius, var(--pd-radius-sm));
       }
 
       .checkbox pd-icon {
         --pd-icon-size: 1.3rem;
-        margin-right: 0.2rem;
-        margin-bottom: 0.2rem;
         border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        border-radius: var(--pd-cb-border-radius, 3px);
+        border-radius: var(--pd-cb-border-radius, var(--pd-radius-sm));
       }
 
       .readonly .checkbox pd-icon,
       .disabled .checkbox pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, darkgrey);
+        border-color: var(
+          --pd-cb-border-col-readonly,
+          var(--pd-default-disabled-col)
+        );
       }
 
       /*
@@ -122,6 +141,16 @@ class PdCheckbox extends PdBaseUIInput {
         justify-content: center;
       }
 
+      .radio:focus {
+        outline: none;
+      }
+
+      .radio:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: 50%;
+      }
+
       .radio pd-icon {
         --pd-icon-size: 1.5rem;
         --pd-icon-round-padding: 0.1rem;
@@ -130,20 +159,32 @@ class PdCheckbox extends PdBaseUIInput {
 
       .readonly .radio pd-icon,
       .disabled .radio pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, darkgrey);
+        border-color: var(
+          --pd-cb-border-col-readonly,
+          var(--pd-default-disabled-col)
+        );
       }
 
       /* Switch styles */
       .switch {
         height: var(--pd-cb-switch-height);
         position: relative;
-        outline: 0;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
       }
 
+      .switch-paddle:focus {
+        outline: none;
+      }
+
+      .switch-paddle:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-cb-border-radius, var(--pd-radius-md));
+      }
+
       .switch .label {
         margin-left: 0.5rem;
       }
@@ -156,7 +197,7 @@ class PdCheckbox extends PdBaseUIInput {
         min-width: 4.1rem;
         max-width: 4.1rem;
         height: 1.9rem;
-        border-radius: 0;
+        border-radius: var(--pd-cb-border-radius, var(--pd-radius-md));
         background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
         cursor: pointer;
       }
@@ -170,8 +211,8 @@ class PdCheckbox extends PdBaseUIInput {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-        border-radius: var(--pd-cb-border-radius, 4px);
+        box-shadow: var(--pd-shadow-sm);
+        border-radius: var(--pd-cb-border-radius, var(--pd-radius-md));
         -webkit-transition: all 0.25s ease-out;
         transition: all 0.25s ease-out;
         content: "";
@@ -236,14 +277,23 @@ class PdCheckbox extends PdBaseUIInput {
       isChecked: checked,
       isUnchecked: !checked
     };
+    const role = this.checkType === "RADIO" ? "radio" : this.checkType === "SWITCH" ? "switch" : "checkbox";
     return html`
       ${this._renderLabel(inputId)}
-      <div @click=${this._onClick} class=${classMap(classMapVal)}>
-        <div class=${classMap(aClassMap)}>
+      <div @click="${this._onClick}" class="${classMap(classMapVal)}">
+        <div
+          class="${classMap(aClassMap)}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @keydown="${this._onKeyDown}"
+          role="${role}"
+          aria-checked="${checked}"
+          aria-disabled="${this.disabled}"
+          aria-readonly="${this.readonly}"
+        >
           <pd-icon
-            icon=${this.checkType === "SWITCH" ? pdIcons.ICON_CHECKBOX : this.checkType === "RADIO" ? pdIcons.ICON_CIRCLE : pdIcons.ICON_CHECKBOX_ONLY_CHECK}
+            icon="${this.checkType === "SWITCH" ? pdIcons.ICON_CHECKBOX : this.checkType === "RADIO" ? pdIcons.ICON_CIRCLE : pdIcons.ICON_CHECKBOX_ONLY_CHECK}"
             class="${this.checkType === "RADIO" ? "round" : ""}"
-            ?activeIcon=${checked}
+            ?activeIcon="${checked}"
           ></pd-icon>
         </div>
         <span class="label"><slot></slot></span>
@@ -256,21 +306,35 @@ class PdCheckbox extends PdBaseUIInput {
     const checked = this._value === "true";
     this._handleChangedValue(!checked ? "true" : "false", event, true);
   }
-  _onKeyPress(event) {
-    event.preventDefault();
+  _onKeyDown(event) {
+    if (this.disabled || this.readonly) return;
     if (event.key === " " || event.code === "Space") {
+      event.preventDefault();
       this._onClick(event);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("enter-pressed", {
+          detail: {
+            value: this._value,
+            name: this.valueName || this.id || "field"
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
     }
   }
-  _onLinkClick(event) {
-    event.preventDefault();
-  }
   _getInitialValue(reset) {
     return reset ? this.initValue || "false" : this.initValue || this._value || "false";
   }
   clear() {
     this.reset();
   }
+  _getParsedValue() {
+    const truthy = /* @__PURE__ */ new Set([true, "true", "on", "1", 1]);
+    return truthy.has(this._value);
+  }
 }
 __decorateClass([
   property({ type: String, reflect: true })

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

@@ -1,29 +1,45 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {
-        backgroundColor: {
-            control: "color";
-        };
-        onClick: {
-            action: string;
-        };
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-        };
-        parameters: {
-            actions: {
-                handles: string[];
-            };
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-checkbox component.
+ * Defines all configurable properties available in Storybook controls.
+ */
+interface PdCheckboxArgs {
+    /** The label text displayed next to the checkbox */
+    label: string;
+    /** The name attribute for form submission */
+    valueName: string;
+    /** Initial checked state ("true" or "false") */
+    initValue: string;
+    /** Type of checkbox control: CHECK, RADIO, or SWITCH */
+    checkType: "CHECK" | "RADIO" | "SWITCH";
+    /** Whether the checkbox is disabled */
+    disabled: boolean;
+    /** Whether the checkbox is read-only */
+    readonly: boolean;
+    /** Whether the checkbox is required */
+    required: boolean;
+}
+/**
+ * ## pd-checkbox
+ *
+ * A versatile checkbox component supporting three visual styles:
+ * standard checkbox, radio button, and toggle switch.
+ *
+ * ### Features
+ * - **Three Check Types**: CHECK (standard checkbox), RADIO (radio button style), SWITCH (toggle switch)
+ * - **States**: Supports checked, unchecked, disabled, readonly, and required states
+ * - **Accessibility**: Keyboard navigation with Space/Enter support
+ * - **Form Integration**: Works with pd-form-container for validation
+ */
+declare const meta: Meta<PdCheckboxArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Checkbox: Story;
-export declare const SwitchTemplate: Story;
-export declare const RadioTemplate: Story;
+type Story = StoryObj<PdCheckboxArgs>;
+/** Default unchecked checkbox with a label. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All check types and states at a glance. */
+export declare const AllVariants: Story;
+/** Required checkbox with form validation pattern. */
+export declare const Required: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-checkbox.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-checkbox.stories.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/pd-checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KA8CtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}
+{"version":3,"file":"pd-checkbox.stories.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/pd-checkbox.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAMnC;;;GAGG;AACH,UAAU,cAAc;IACtB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAMD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAuF9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,+EAA+E;AAC/E,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAMF,8CAA8C;AAC9C,eAAO,MAAM,WAAW,EAAE,KA+IzB,CAAC;AAMF,sDAAsD;AACtD,eAAO,MAAM,QAAQ,EAAE,KA0CtB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAsK3B,CAAC"}

package/dist/pd-form-container/PdFormContainer.d.ts

@@ -2,41 +2,62 @@ import { CSSResultGroup, TemplateResult } from 'lit';
 import { PdBaseUI } from '../base/pd-base-ui.js';
 import { PdFormElementStatus } from '../types.js';
 /**
+ * Form container for managing and validating pd-* form elements.
+ *
  * @tagname pd-form-container
+ * @summary Container for form fields with validation and state management.
+ *
+ * @event pd-form-change - Fired when any form element changes with `{overallValidity}` detail.
+ *
+ * @slot - pd-* form elements to manage.
+ *
+ * @cssprop --pd-form-container-row-gap - Gap between form rows. Default: `var(--pd-spacing-sm, 0.5rem)`.
+ * @cssprop --pd-form-info-font-size - Validation info font size. Default: `0.8em`.
+ * @cssprop --pd-form-container-default-col - Default info text color. Default: `var(--pd-default-dark-col)`.
+ * @cssprop --pd-form-container-valid-col - Valid state text color. Default: `var(--pd-default-success-dark-col)`.
+ * @cssprop --pd-form-container-invalid-col - Invalid state text color. Default: `var(--pd-default-error-dark-col)`.
  */
 export declare class PdFormContainer extends PdBaseUI {
-    /**
-     * If true, display info about required fields
-     */
+    /** Display info about required fields validation status. */
     requiredFieldInfo: boolean;
-    /**
-     * If true, trim fields when values are returned.
-     */
+    /** Trim field values when calling getValues(). */
     autoTrimm: boolean;
-    /**
-     * Optional general error message
-     */
+    /** General error message to display. */
     commonError: string;
+    /** @ignore */
     private _fields;
     static styles: CSSResultGroup;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;
     private _renderValidationInfo;
+    /** @ignore */
     private _onRegister;
+    /** @ignore */
     private _onUnRegister;
+    /** @ignore */
     private _onUnRegisterBound;
+    /** @ignore */
     private _onChange;
+    /** @ignore */
     private _onBlur;
+    /** @ignore */
     private _onFocus;
     private _getOverallValidity;
+    /** Runs all field validators and returns overall validity. */
     triggerValidate(): Promise<boolean>;
+    /** Returns all field values as origin and parsed objects. */
     getValues(): {
         origin: Record<string, any>;
         parsed: Record<string, any>;
     };
+    /** Resets all form fields to their initial values. */
     reset(): void;
+    /** Clear all form fields. */
+    clear(): void;
+    /** Returns the current status map of all registered fields. */
     getStatus(): Map<string, PdFormElementStatus>;
+    /** Whether all form fields are currently valid. */
     get valid(): boolean;
 }
 //# sourceMappingURL=PdFormContainer.d.ts.map

package/dist/pd-form-container/PdFormContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdFormContainer.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/PdFormContainer.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD;;GAEG;AACH,qBAAa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CA8BpC;IAEO,iBAAiB,IAAI,IAAI;IA0BzB,oBAAoB,IAAI,IAAI;IA0B5B,MAAM,IAAI,cAAc;IAWjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CA8BjB;IAEF,OAAO,CAAC,aAAa,CAkBnB;IAEF,OAAO,CAAC,kBAAkB,CAAiC;IAE3D,OAAO,CAAC,SAAS,CA2Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IAad,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI;QAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KAC7B;IAcM,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}
+{"version":3,"file":"PdFormContainer.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/PdFormContainer.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,eAAgB,SAAQ,QAAQ;IAC3C,4DAA4D;IAE5D,iBAAiB,UAAS;IAE1B,kDAAkD;IAElD,SAAS,UAAS;IAElB,wCAAwC;IAExC,WAAW,SAAM;IAEjB,cAAc;IAEd,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAsDpC;IAEO,iBAAiB,IAAI,IAAI;IA0BzB,oBAAoB,IAAI,IAAI;IA0B5B,MAAM,IAAI,cAAc;IAWjC,OAAO,CAAC,qBAAqB;IAmB7B,cAAc;IACd,OAAO,CAAC,WAAW,CA8BjB;IAEF,cAAc;IACd,OAAO,CAAC,aAAa,CAkBnB;IAEF,cAAc;IACd,OAAO,CAAC,kBAAkB,CAAiC;IAE3D,cAAc;IACd,OAAO,CAAC,SAAS,CA2Bf;IAEF,cAAc;IACd,OAAO,CAAC,OAAO,CAQb;IAEF,cAAc;IACd,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IAa3B,8DAA8D;IACjD,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYhD,6DAA6D;IACtD,SAAS,IAAI;QAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KAC7B;IAcD,sDAAsD;IAC/C,KAAK,IAAI,IAAI;IASpB,6BAA6B;IACtB,KAAK,IAAI,IAAI;IASpB,+DAA+D;IACxD,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,mDAAmD;IACnD,IAAI,KAAK,YAER;CACF"}

package/dist/pd-form-container/PdFormContainer.js

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import { PdBaseUI } from '../base/pd-base-ui.js';
@@ -19,6 +19,7 @@ class PdFormContainer extends PdBaseUI {
     this.autoTrimm = false;
     this.commonError = "";
     this._fields = /* @__PURE__ */ new Map();
+    /** @ignore */
     this._onRegister = (e) => {
       const { name, value, parsedValue, state: state2 } = e.detail;
       console.debug("###### _onRegister", name, value, state2);
@@ -34,7 +35,7 @@ class PdFormContainer extends PdBaseUI {
           touched: state2.touched,
           focused: state2.focus,
           errors: {},
-          element: e.target
+          element: e.composedPath()[0] ?? e.target
         });
         this.requestUpdate();
         this.dispatchEvent(
@@ -47,6 +48,7 @@ class PdFormContainer extends PdBaseUI {
       }
       e.stopPropagation();
     };
+    /** @ignore */
     this._onUnRegister = (e) => {
       const { name, value } = e.detail;
       console.debug("###### _onUnRegister", name, value);
@@ -63,7 +65,9 @@ class PdFormContainer extends PdBaseUI {
       }
       e.stopPropagation();
     };
+    /** @ignore */
     this._onUnRegisterBound = this._onUnRegister.bind(this);
+    /** @ignore */
     this._onChange = (e) => {
       const { name, value, parsedValue, state: state2 } = e.detail;
       console.debug("###### _onChange", name, value, state2);
@@ -91,6 +95,7 @@ class PdFormContainer extends PdBaseUI {
       }
       e.stopPropagation();
     };
+    /** @ignore */
     this._onBlur = (e) => {
       const { name } = e.detail;
       const field = this._fields.get(name);
@@ -100,6 +105,7 @@ class PdFormContainer extends PdBaseUI {
       }
       e.stopPropagation();
     };
+    /** @ignore */
     this._onFocus = (e) => {
       const { name } = e.detail;
       const field = this._fields.get(name);
@@ -114,9 +120,22 @@ class PdFormContainer extends PdBaseUI {
       PdBaseUI.styles,
       css`
       :host {
+        --_row-gap: var(--pd-form-container-row-gap, var(--pd-spacing-md));
+
+        display: block;
+        width: 100%;
+      }
+
+      form {
         display: flex;
         flex-direction: column;
-        align-items: flex-start;
+        gap: var(--_row-gap);
+        width: 100%;
+      }
+
+      /* Ensure pd-form-row children take full width */
+      ::slotted(pd-form-row) {
+        width: 100%;
       }
 
       .validation-info {
@@ -139,6 +158,17 @@ class PdFormContainer extends PdBaseUI {
           var(--pd-default-error-dark-col)
         );
       }
+
+      .error-message {
+        color: var(--pd-error-col, #dc3545);
+        background-color: var(--pd-error-bg-col, #f8d7da);
+        border: 1px solid var(--pd-error-border-col, #f5c6cb);
+        border-radius: var(--pd-radius-md);
+        padding: 0.75rem 1rem;
+        margin-bottom: 1rem;
+        font-size: 0.875rem;
+        width: fit-content;
+      }
     `
     ];
   }
@@ -192,18 +222,22 @@ class PdFormContainer extends PdBaseUI {
     return html`
       <form>
         <slot></slot>
-        ${this.requiredFieldInfo || this.commonError ? this._renderValidationInfo() : ""}
+        ${this.requiredFieldInfo || this.commonError ? this._renderValidationInfo() : nothing}
       </form>
     `;
   }
   _renderValidationInfo() {
     const allValid = this._getOverallValidity() && !this.commonError;
     return html`
-      <p class="validation-info ${allValid ? "valid" : "invalid"}">
-        ${allValid ? msg("* Felder ausgefüllt", { id: "pd.form.required.valid" }) : this.commonError || msg("* Pflichtfeld fehlt oder fehlerhaft", {
+      ${this.commonError ? html`
+            <div class="error-message" role="alert">${this.commonError}</div>
+          ` : html`
+            <p class="validation-info ${allValid ? "valid" : "invalid"}">
+              ${allValid ? msg("* Felder ausgefüllt", { id: "pd.form.required.valid" }) : msg("* Pflichtfeld fehlt oder fehlerhaft", {
       id: "pd.form.required.missing"
     })}
-      </p>
+            </p>
+          `}
     `;
   }
   _getOverallValidity() {
@@ -217,6 +251,7 @@ class PdFormContainer extends PdBaseUI {
     }
     return true;
   }
+  /** Runs all field validators and returns overall validity. */
   async triggerValidate() {
     const validations = [];
     this._fields.forEach((field) => {
@@ -228,6 +263,7 @@ class PdFormContainer extends PdBaseUI {
     await Promise.all(validations);
     return this._getOverallValidity();
   }
+  /** Returns all field values as origin and parsed objects. */
   getValues() {
     const origin = {};
     const parsed = {};
@@ -241,14 +277,29 @@ class PdFormContainer extends PdBaseUI {
     });
     return { origin, parsed };
   }
+  /** Resets all form fields to their initial values. */
   reset() {
     this._fields.forEach((field) => {
-      field.element?.reset();
+      const element = field.element;
+      if (typeof element?.reset === "function") {
+        element.reset();
+      }
+    });
+  }
+  /** Clear all form fields. */
+  clear() {
+    this._fields.forEach((field) => {
+      const element = field.element;
+      if (typeof element?.clear === "function") {
+        element.clear();
+      }
     });
   }
+  /** Returns the current status map of all registered fields. */
   getStatus() {
     return this._fields;
   }
+  /** Whether all form fields are currently valid. */
   get valid() {
     return this._getOverallValidity();
   }

package/dist/pd-form-container/pd-form-container.stories.d.ts

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdFormContainerArgs {
+    requiredFieldInfo: boolean;
+    autoTrimm: boolean;
+    commonError: string;
+}
+/**
+ * ## pd-form-container
+ *
+ * Container element for managing form fields with validation and state tracking.
+ *
+ * ### Features
+ * - Automatic field registration and tracking
+ * - Form-wide validation with triggerValidate()
+ * - Value collection with getValues()
+ * - Form reset functionality
+ * - Required field indicator
+ * - Common error message display
+ * - Auto-trim option for string values
+ *
+ * ### Methods
+ * | Method | Returns | Description |
+ * |--------|---------|-------------|
+ * | `triggerValidate()` | `Promise<boolean>` | Runs all field validators and returns overall validity |
+ * | `getValues()` | `{origin, parsed}` | Returns all field values as origin and parsed objects |
+ * | `reset()` | `void` | Resets all form fields to their initial values |
+ * | `getStatus()` | `Map<string, PdFormElementStatus>` | Returns the current status map of all registered fields |
+ * | `valid` (getter) | `boolean` | Whether all form fields are currently valid |
+ */
+declare const meta: Meta<PdFormContainerArgs>;
+export default meta;
+type Story = StoryObj<PdFormContainerArgs>;
+/** Default form container with basic fields. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Form container displaying a common error message. */
+export declare const WithCommonError: Story;
+/** Form container with auto-trim enabled — spaces are trimmed on getValues(). */
+export declare const WithAutoTrim: Story;
+/** Form with pre-filled initial values — reset returns to these values. */
+export declare const WithInitialValues: Story;
+/** Comprehensive form with all supported field types. */
+export declare const AllFieldTypes: Story;
+/** Form with fieldsets for grouped/nested data (e.g. billing + shipping). */
+export declare const WithFieldsets: Story;
+/** Real-world registration form pattern. */
+export declare const RegistrationForm: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-form-container.stories.d.ts.map

package/dist/pd-form-container/pd-form-container.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-container.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/pd-form-container.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKhE,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAMnC,UAAU,mBAAmB;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAqED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAiEnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC;AAMF,wDAAwD;AACxD,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC;AAMF,iFAAiF;AACjF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,aAAa,EAAE,KAoE3B,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,aAAa,EAAE,KAiF3B,CAAC;AAMF,4CAA4C;AAC5C,eAAO,MAAM,gBAAgB,EAAE,KAyD9B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA0H3B,CAAC"}

package/dist/pd-form-field/PdFormField.d.ts

@@ -0,0 +1,35 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+/**
+ * Wrapper for custom content within pd-form-row.
+ *
+ * Use this component to include non-pd form elements (custom components,
+ * native HTML, etc.) in a pd-form-row while maintaining proper grid layout.
+ *
+ * @tagname pd-form-field
+ * @summary Grid-aware wrapper for non-pd form elements.
+ *
+ * @slot - Custom content to display.
+ *
+ * @example
+ * ```html
+ * <pd-form-row>
+ *   <pd-input span="half" label="Name"></pd-input>
+ *   <pd-form-field span="half">
+ *     <my-custom-component></my-custom-component>
+ *   </pd-form-field>
+ * </pd-form-row>
+ * ```
+ */
+export declare class PdFormField extends PdBaseUI {
+    /**
+     * Grid span for width control within pd-form-row.
+     *
+     * Semantic values: quarter, third, half, two-thirds, three-quarters, full
+     * Numeric values: 1-12
+     */
+    span: string;
+    static styles: CSSResultGroup;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=PdFormField.d.ts.map

package/dist/pd-form-field/PdFormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdFormField.d.ts","sourceRoot":"","sources":["../../src/pd-form-field/PdFormField.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,WAAY,SAAQ,QAAQ;IACvC;;;;;OAKG;IAEH,IAAI,EAAE,MAAM,CAAU;IAEtB,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAEO,MAAM,IAAI,cAAc;CAGlC"}

package/dist/pd-form-field/PdFormField.js

@@ -0,0 +1,38 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PdBaseUI } from '../base/pd-base-ui.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 PdFormField extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this.span = "full";
+  }
+  static {
+    this.styles = [
+      PdBaseUI.styles,
+      css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+    `
+    ];
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdFormField.prototype, "span");
+
+export { PdFormField };

package/dist/pd-form-field/pd-form-field.d.ts

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

package/dist/pd-form-field/pd-form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-field.d.ts","sourceRoot":"","sources":["../../src/pd-form-field/pd-form-field.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,WAAW,EAAE,CAAC"}