@progressive-development/pd-forms 0.9.1 → 1.0.0

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

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdFormFieldArgs {
+    span: string;
+}
+/**
+ * ## pd-form-field
+ *
+ * Wrapper component for custom content within pd-form-row.
+ *
+ * Use this component when you need to include non-pd form elements
+ * (custom components, native HTML elements, etc.) in a pd-form-row
+ * while maintaining proper grid layout positioning.
+ *
+ * ### Features
+ * - Grid-aware positioning with span property
+ * - Works seamlessly with pd-form-row's 12-column grid
+ * - Supports all semantic and numeric span values
+ *
+ * ### When to Use
+ * - Wrapping custom web components
+ * - Including native HTML form elements
+ * - Adding non-form content to a form row
+ * - Creating complex layouts with mixed content types
+ */
+declare const meta: Meta<PdFormFieldArgs>;
+export default meta;
+type Story = StoryObj<PdFormFieldArgs>;
+/** Default usage with full width. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All semantic span values demonstration. */
+export declare const AllSpanValues: Story;
+/** Wrapping a native HTML input alongside a pd-input. */
+export declare const NativeHtmlInput: Story;
+/** Informational content alongside a form input. */
+export declare const InfoPanel: Story;
+/** Multiple pd-form-field elements filling a row. */
+export declare const MultipleCustomElements: Story;
+/** Mixed pd-input and pd-form-field elements in a realistic form layout. */
+export declare const MixedWithInputs: Story;
+//# sourceMappingURL=pd-form-field.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-field.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-field/pd-form-field.stories.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AAMjC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAgE/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAMF,8CAA8C;AAC9C,eAAO,MAAM,aAAa,EAAE,KAgF3B,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,sBAAsB,EAAE,KAyCpC,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,eAAe,EAAE,KAiE7B,CAAC"}

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

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

package/dist/pd-form-field.js

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

package/dist/pd-form-fieldset/PdFormFieldset.d.ts

@@ -0,0 +1,144 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+import { PdFormElementStatus } from '../types.js';
+/**
+ * Groups form fields and returns their values as an object.
+ *
+ * PdFormFieldset wraps a native `<fieldset>` element and acts as a container
+ * for form fields. It aggregates all child field values into a single object
+ * and registers itself with the parent PdFormContainer as a single field.
+ *
+ * @tagname pd-form-fieldset
+ * @summary Groups form fields and returns their values as an object.
+ *
+ * @event pd-form-element-register - Fired when fieldset registers with parent container.
+ * @event pd-form-element-change - Fired when any child field changes. Detail contains aggregated object.
+ * @event pd-form-element-unregister - Fired when fieldset disconnects from parent container.
+ *
+ * @slot - Form fields to group (pd-input, pd-select, etc.).
+ *
+ * @cssprop --pd-fieldset-border - Border style. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-fieldset-border-radius - Border radius. Default: `var(--pd-radius-md, 4px)`.
+ * @cssprop --pd-fieldset-bg-col - Background color. Default: `transparent`.
+ * @cssprop --pd-fieldset-padding - Inner padding. Default: `1rem`.
+ * @cssprop --pd-fieldset-gap - Gap between child fields. Default: `var(--pd-spacing-sm, 0.5rem)`.
+ * @cssprop --pd-fieldset-legend-col - Legend text color. Default: `var(--pd-default-dark-col)`.
+ * @cssprop --pd-fieldset-legend-font-size - Legend font size. Default: `1em`.
+ * @cssprop --pd-fieldset-legend-font-weight - Legend font weight. Default: `500`.
+ *
+ * @example
+ * ```html
+ * <pd-form-container>
+ *   <pd-form-row>
+ *     <pd-form-fieldset name="address" legend="Address" span="full">
+ *       <pd-form-row>
+ *         <pd-input valueName="street" label="Street" span="two-thirds"></pd-input>
+ *         <pd-input valueName="number" label="Nr." span="third"></pd-input>
+ *       </pd-form-row>
+ *       <pd-form-row>
+ *         <pd-input valueName="zip" label="ZIP" span="quarter"></pd-input>
+ *         <pd-input valueName="city" label="City" span="three-quarters"></pd-input>
+ *       </pd-form-row>
+ *     </pd-form-fieldset>
+ *   </pd-form-row>
+ * </pd-form-container>
+ * ```
+ *
+ * **Note:** Fieldsets must be wrapped in a pd-form-row for proper grid layout.
+ * Nesting pd-form-fieldset inside another pd-form-fieldset is not officially supported.
+ */
+export declare class PdFormFieldset extends PdBaseUI {
+    /**
+     * Name of the fieldset (becomes the key in FormContainer).
+     * The aggregated object will be registered under this name.
+     */
+    name: string;
+    /**
+     * Label for the fieldset.
+     * Rendered as `<legend>` inside the `<fieldset>`.
+     */
+    legend: string;
+    /**
+     * Grid span for width control within pd-form-row.
+     * Allows fieldset to participate in form-row grid layout.
+     *
+     * **Important:** pd-form-fieldset must be wrapped in a pd-form-row to use the grid system.
+     * Set to "full" to span all columns, "half" for 50%, "third" for 33%, etc.
+     */
+    span: string;
+    /** @ignore */
+    private _fields;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): TemplateResult;
+    private _onChildRegister;
+    private _onChildChange;
+    private _onChildBlur;
+    private _onChildFocus;
+    /** @ignore */
+    private _onChildUnRegister;
+    /** @ignore */
+    private _onChildUnRegisterBound;
+    /**
+     * Checks if any child field is dirty.
+     */
+    private _isDirty;
+    /**
+     * Checks if any child field is touched.
+     */
+    private _isTouched;
+    /**
+     * Checks if any child field is focused.
+     */
+    private _isFocused;
+    /**
+     * Checks if all child fields are pristine.
+     */
+    private _isPristine;
+    /**
+     * Returns aggregated value object from all child fields.
+     * @private
+     */
+    private _getAggregatedValue;
+    /**
+     * Returns aggregated parsed value object from all child fields.
+     * @private
+     */
+    private _getAggregatedParsedValue;
+    /**
+     * Returns overall validity based on all child fields.
+     * Fieldset is valid only if ALL children are valid.
+     * @private
+     */
+    private _getOverallValidity;
+    /**
+     * Notifies parent container with aggregated value and state.
+     * @private
+     */
+    private _notifyContainer;
+    /**
+     * Registers fieldset at parent container.
+     * @private
+     */
+    private _registerAtContainer;
+    /**
+     * Unregisters fieldset from parent container.
+     * @private
+     */
+    private _unRegisterAtContainer;
+    /** Runs all field validators and returns overall validity. */
+    runValidators(): Promise<boolean>;
+    /** Resets all child fields to their initial values. */
+    reset(): void;
+    /** Clears all child fields. */
+    clear(): void;
+    /** Returns the current status map of all registered child fields. */
+    getStatus(): Map<string, PdFormElementStatus>;
+    /** Whether all child fields are currently valid. */
+    get valid(): boolean;
+    /** Current aggregated value object from all child fields. */
+    get value(): Record<string, any>;
+}
+//# sourceMappingURL=PdFormFieldset.d.ts.map

package/dist/pd-form-fieldset/PdFormFieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdFormFieldset.d.ts","sourceRoot":"","sources":["../../src/pd-form-fieldset/PdFormFieldset.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBAAa,cAAe,SAAQ,QAAQ;IAC1C;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,MAAM,SAAM;IAEZ;;;;;;OAMG;IAEH,IAAI,EAAE,MAAM,CAAU;IAEtB,cAAc;IAEd,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAyCpC;IAEO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAW5B,YAAY,IAAI,IAAI;IAKpB,MAAM,IAAI,cAAc;IAcjC,OAAO,CAAC,gBAAgB;IA6BxB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,aAAa;IAWrB,cAAc;IACd,OAAO,CAAC,kBAAkB,CAexB;IAEF,cAAc;IACd,OAAO,CAAC,uBAAuB,CAAsC;IAErE;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB;;OAEG;IACH,OAAO,CAAC,UAAU;IAOlB;;OAEG;IACH,OAAO,CAAC,UAAU;IAOlB;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAuB3B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAwBxB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAwB5B;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAa9B,8DAA8D;IACjD,aAAa,IAAI,OAAO,CAAC,OAAO,CAAC;IAwB9C,uDAAuD;IAChD,KAAK,IAAI,IAAI;IAUpB,+BAA+B;IACxB,KAAK,IAAI,IAAI;IAUpB,qEAAqE;IAC9D,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,oDAAoD;IACpD,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,6DAA6D;IAC7D,IAAI,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAE/B;CACF"}

package/dist/pd-form-fieldset/PdFormFieldset.js

@@ -0,0 +1,364 @@
+import { css, nothing, html } from 'lit';
+import { property, state } 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 PdFormFieldset extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.legend = "";
+    this.span = "full";
+    this._fields = /* @__PURE__ */ new Map();
+    /** @ignore */
+    this._onChildUnRegister = (e) => {
+      const { name } = e.detail;
+      console.debug("###### PdFormFieldset._onChildUnRegister", name);
+      if (this._fields.has(name)) {
+        this._fields.delete(name);
+        this.requestUpdate();
+        this._notifyContainer();
+      }
+      e.stopPropagation();
+    };
+    /** @ignore */
+    this._onChildUnRegisterBound = this._onChildUnRegister.bind(this);
+  }
+  static {
+    this.styles = [
+      PdBaseUI.styles,
+      css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* When used in pd-form-row, span only the 12 main columns, NOT the helper column */
+      :host([span="full"]) {
+        grid-column: span 12 !important;
+      }
+
+      fieldset {
+        /* Customizable via CSS variables */
+        border: var(
+          --pd-fieldset-border,
+          1px solid var(--pd-default-light-col)
+        );
+        border-radius: var(
+          --pd-fieldset-border-radius,
+          var(--pd-radius-md, 4px)
+        );
+        background-color: var(--pd-fieldset-bg-col, transparent);
+        padding: var(--pd-fieldset-padding, 1rem);
+        margin: 0;
+
+        /* Layout for children */
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-fieldset-gap, var(--pd-spacing-sm, 0.5rem));
+      }
+
+      legend {
+        color: var(--pd-fieldset-legend-col, var(--pd-default-dark-col));
+        font-family: var(--pd-default-font-content-family);
+        font-size: var(--pd-fieldset-legend-font-size, 1em);
+        font-weight: var(--pd-fieldset-legend-font-weight, 500);
+        padding: 0 0.5em;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener(
+      "pd-form-element-unregister",
+      this._onChildUnRegisterBound
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener(
+      "pd-form-element-unregister",
+      this._onChildUnRegisterBound
+    );
+    this._unRegisterAtContainer();
+  }
+  firstUpdated() {
+    this._registerAtContainer();
+  }
+  render() {
+    return html`
+      <fieldset
+        @pd-form-element-change="${this._onChildChange}"
+        @pd-form-element-blur="${this._onChildBlur}"
+        @pd-form-element-focus="${this._onChildFocus}"
+        @pd-form-element-register="${this._onChildRegister}"
+      >
+        ${this.legend ? html`<legend>${this.legend}</legend>` : nothing}
+        <slot></slot>
+      </fieldset>
+    `;
+  }
+  _onChildRegister(e) {
+    const { name, value, parsedValue, state: state2 } = e.detail;
+    console.debug("###### PdFormFieldset._onChildRegister", name, value, state2);
+    if (!this._fields.has(name)) {
+      this._fields.set(name, {
+        name,
+        value,
+        parsedValue,
+        valid: state2.valid,
+        invalid: state2.invalid,
+        pristine: state2.pristine,
+        dirty: state2.dirty,
+        touched: state2.touched,
+        focused: state2.focused,
+        errors: {},
+        element: e.target
+      });
+      this.requestUpdate();
+      this._notifyContainer();
+    }
+    e.stopPropagation();
+  }
+  _onChildChange(e) {
+    const { name, value, parsedValue, state: state2 } = e.detail;
+    console.debug("###### PdFormFieldset._onChildChange", name, value, state2);
+    const field = this._fields.get(name);
+    if (field) {
+      field.value = value;
+      field.parsedValue = parsedValue;
+      field.pristine = state2.pristine;
+      field.dirty = state2.dirty;
+      field.touched = state2.touched;
+      field.focused = state2.focused;
+      field.valid = state2.valid;
+      field.invalid = state2.invalid;
+      this.requestUpdate();
+      this._notifyContainer();
+    }
+    e.stopPropagation();
+  }
+  _onChildBlur(e) {
+    const { name } = e.detail;
+    const field = this._fields.get(name);
+    if (field) {
+      field.touched = true;
+      field.focused = false;
+    }
+    e.stopPropagation();
+  }
+  _onChildFocus(e) {
+    const { name } = e.detail;
+    const field = this._fields.get(name);
+    if (field) {
+      field.focused = true;
+    }
+    e.stopPropagation();
+  }
+  /**
+   * Checks if any child field is dirty.
+   */
+  _isDirty() {
+    for (const field of this._fields.values()) {
+      if (field.dirty) return true;
+    }
+    return false;
+  }
+  /**
+   * Checks if any child field is touched.
+   */
+  _isTouched() {
+    for (const field of this._fields.values()) {
+      if (field.touched) return true;
+    }
+    return false;
+  }
+  /**
+   * Checks if any child field is focused.
+   */
+  _isFocused() {
+    for (const field of this._fields.values()) {
+      if (field.focused) return true;
+    }
+    return false;
+  }
+  /**
+   * Checks if all child fields are pristine.
+   */
+  _isPristine() {
+    return !this._isDirty();
+  }
+  /**
+   * Returns aggregated value object from all child fields.
+   * @private
+   */
+  _getAggregatedValue() {
+    const obj = {};
+    this._fields.forEach((field, key) => {
+      obj[key] = field.value;
+    });
+    return obj;
+  }
+  /**
+   * Returns aggregated parsed value object from all child fields.
+   * @private
+   */
+  _getAggregatedParsedValue() {
+    const obj = {};
+    this._fields.forEach((field, key) => {
+      obj[key] = field.parsedValue;
+    });
+    return obj;
+  }
+  /**
+   * Returns overall validity based on all child fields.
+   * Fieldset is valid only if ALL children are valid.
+   * @private
+   */
+  _getOverallValidity() {
+    if (this._fields.size === 0) {
+      return true;
+    }
+    return ![...this._fields.values()].some((field) => field.invalid);
+  }
+  /**
+   * Notifies parent container with aggregated value and state.
+   * @private
+   */
+  _notifyContainer() {
+    const valid = this._getOverallValidity();
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-change", {
+        detail: {
+          name: this.name || this.id || "fieldset",
+          value: this._getAggregatedValue(),
+          parsedValue: this._getAggregatedParsedValue(),
+          state: {
+            valid,
+            invalid: !valid,
+            pristine: this._isPristine(),
+            dirty: this._isDirty(),
+            touched: this._isTouched(),
+            focused: this._isFocused()
+          }
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Registers fieldset at parent container.
+   * @private
+   */
+  _registerAtContainer() {
+    const valid = this._getOverallValidity();
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-register", {
+        detail: {
+          name: this.name || this.id || "fieldset",
+          value: this._getAggregatedValue(),
+          parsedValue: this._getAggregatedParsedValue(),
+          state: {
+            pristine: this._isPristine(),
+            dirty: this._isDirty(),
+            touched: this._isTouched(),
+            focused: this._isFocused(),
+            valid,
+            invalid: !valid
+          }
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Unregisters fieldset from parent container.
+   * @private
+   */
+  _unRegisterAtContainer() {
+    document.dispatchEvent(
+      new CustomEvent("pd-form-element-unregister", {
+        detail: {
+          name: this.name || this.id || "fieldset",
+          value: this._getAggregatedValue()
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /** Runs all field validators and returns overall validity. */
+  async runValidators() {
+    const validations = [];
+    this._fields.forEach((field) => {
+      const result = field.element?.runValidators();
+      if (result instanceof Promise) {
+        validations.push(result);
+      }
+    });
+    const results = await Promise.all(validations);
+    let index = 0;
+    this._fields.forEach((field) => {
+      const isValid = results[index];
+      field.valid = isValid;
+      field.invalid = !isValid;
+      index++;
+    });
+    return this._getOverallValidity();
+  }
+  /** Resets all child fields to their initial values. */
+  reset() {
+    this._fields.forEach((field) => {
+      const element = field.element;
+      if (typeof element?.reset === "function") {
+        element.reset();
+      }
+    });
+  }
+  /** Clears all child 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 child fields. */
+  getStatus() {
+    return this._fields;
+  }
+  /** Whether all child fields are currently valid. */
+  get valid() {
+    return this._getOverallValidity();
+  }
+  /** Current aggregated value object from all child fields. */
+  get value() {
+    return this._getAggregatedValue();
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdFormFieldset.prototype, "name");
+__decorateClass([
+  property({ type: String })
+], PdFormFieldset.prototype, "legend");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdFormFieldset.prototype, "span");
+__decorateClass([
+  state()
+], PdFormFieldset.prototype, "_fields");
+
+export { PdFormFieldset };

package/dist/pd-form-fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export { PdFormFieldset } from './pd-form-fieldset.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/pd-form-fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pd-form-fieldset/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-fieldset.d.ts","sourceRoot":"","sources":["../../src/pd-form-fieldset/pd-form-fieldset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAOrD,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/pd-form-fieldset/pd-form-fieldset.js

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

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

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdFormFieldsetArgs {
+    name: string;
+    legend: string;
+    disabled: boolean;
+    span: string;
+}
+/**
+ * ## pd-form-fieldset
+ *
+ * Groups form fields and returns their values as a single object.
+ *
+ * ### Features
+ * - Wraps native `<fieldset>` element
+ * - Aggregates child field values into an object
+ * - Registers as single field with PdFormContainer
+ * - Optional `<legend>` for labeling
+ * - Validation aggregation from all children
+ * - Supports grid layout via `span` property
+ */
+declare const meta: Meta<PdFormFieldsetArgs>;
+export default meta;
+type Story = StoryObj<PdFormFieldsetArgs>;
+/** Default fieldset with legend and grouped fields. */
+export declare const Default: Story;
+/** Overview of all fieldset visual states. */
+export declare const AllStates: Story;
+/** Multiple fieldsets in one form with regular fields. */
+export declare const MultipleFieldsets: Story;
+/** Fieldsets using span to sit side-by-side. */
+export declare const CustomSpan: Story;
+/** Fieldset with pre-filled initial values. */
+export declare const WithInitialValues: Story;
+/** Buttons positioned in form-row using span property alongside fieldset fields. */
+export declare const ButtonsInFormRow: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-form-fieldset.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-fieldset.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-fieldset/pd-form-fieldset.stories.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AAMnC,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AAMD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CA8ElC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAM1C,uDAAuD;AACvD,eAAO,MAAM,OAAO,EAAE,KAsCrB,CAAC;AAMF,8CAA8C;AAC9C,eAAO,MAAM,SAAS,EAAE,KAqFvB,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,iBAAiB,EAAE,KAsF/B,CAAC;AAMF,gDAAgD;AAChD,eAAO,MAAM,UAAU,EAAE,KAiCxB,CAAC;AAMF,+CAA+C;AAC/C,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAMF,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,EAAE,KA2E9B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAyH3B,CAAC"}

package/dist/pd-form-row/PdFormRow.d.ts

@@ -1,15 +1,45 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, TemplateResult } from 'lit';
 import { PdBaseUI } from '../base/pd-base-ui.js';
 /**
- * Ein flexibles Container-Element zur Darstellung von Formularzeilen mit Slot-Unterstützung.
+ * Responsive grid container for form elements.
+ *
+ * Uses CSS Grid with 12 columns and Container Queries for responsive behavior.
+ * Child elements use the `span` property to control their width within the grid.
+ * When the row width falls below 400px, all elements stack vertically.
  *
- * @slot - Standard-Slot für Formularelemente
  * @tagname pd-form-row
+ * @summary 12-column grid row with Container Query support.
+ *
+ * @slot - Form elements to display in the row.
+ *
+ * @cssprop --pd-form-row-gap - Gap between elements. Default: `20px`.
+ * @cssprop --pd-form-row-align-items - Vertical alignment of elements. Default: `flex-start`.
+ * @cssprop --pd-form-row-helper-width - Width reserved for helper icon column. Default: `0`. Use `with-helper-space` attribute to enable.
+ * @cssprop --pd-form-row-gap-top - Top margin when `gap-top` attribute is set. Default: `1.2rem`.
+ *
+ * @attr {boolean} with-helper-space - Reserves space for helper icon column (32px). Use for consistent alignment across rows.
+ * @attr {boolean} no-stack - Disables responsive stacking. Elements keep their span values regardless of container width.
+ *
+ * @example
+ * ```html
+ * <pd-form-row>
+ *   <pd-input span="half" label="First Name"></pd-input>
+ *   <pd-input span="half" label="Last Name"></pd-input>
+ * </pd-form-row>
  *
- * @since 2.0.0
+ * <pd-form-row with-helper-space helper-text="Enter your full address">
+ *   <pd-input span="quarter" label="ZIP"></pd-input>
+ *   <pd-input span="three-quarters" label="City"></pd-input>
+ * </pd-form-row>
+ * ```
  */
 export declare class PdFormRow extends PdBaseUI {
+    /**
+     * Helper text shown in a hover box at the right end of the row.
+     * Useful for providing context or instructions for a group of related fields.
+     */
+    helperText: string;
     static styles: CSSResultGroup;
-    render(): import('lit').TemplateResult<1>;
+    render(): TemplateResult;
 }
 //# sourceMappingURL=PdFormRow.d.ts.map