@progressive-development/pd-forms 0.9.2 → 1.0.0

package/dist/pd-input-area/PdInputArea.d.ts

@@ -1,18 +1,31 @@
 import { CSSResultGroup } from 'lit';
 import { PdBaseInputElement } from '../base/pd-base-input-element.js';
 /**
+ * Multiline textarea input component.
+ *
  * @tagname pd-input-area
+ * @summary Multiline textarea with validation and form integration.
+ *
+ * @event validate-form - Fired when input value changes for validation.
+ * @event field-change - Fired when input value changes.
+ *
+ * @cssprop --pd-input-field-width - Textarea width. Default: `240px`.
+ * @cssprop --pd-input-field-height - Textarea height. Default: `2.2rem`.
+ * @cssprop --pd-input-field-padding - Textarea padding. Default: `0.25rem`.
+ * @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-field-border-focus - Focus border. Default: `2px solid var(--pd-default-col)`.
+ * @cssprop --pd-input-field-border-col-hover - Hover border color. Default: `var(--pd-default-hover-col)`.
  */
 export declare class PdInputArea extends PdBaseInputElement {
+    /** Number of visible text rows. Default: 2. */
     rows: number;
+    /** Number of visible text columns. */
     cols?: number;
-    /**
-     * Minimum length constraint
-     */
+    /** Minimum character length constraint. */
     minlength?: number;
-    /**
-     * Maximum length constraint
-     */
+    /** Maximum character length constraint. Default: 500. */
     maxlength?: number;
     static styles: CSSResultGroup;
     constructor();

package/dist/pd-input-area/PdInputArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdInputArea.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/PdInputArea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAItE;;GAEG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,SAAK;IAGT,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAQpC;;IAOO,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM;CAgChB"}
+{"version":3,"file":"PdInputArea.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/PdInputArea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAItE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IACjD,+CAA+C;IAE/C,IAAI,SAAK;IAET,sCAAsC;IAEtC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,2CAA2C;IAE3C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yDAAyD;IAEzD,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAQpC;;IAOO,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM;CAkChB"}

package/dist/pd-input-area/PdInputArea.js

@@ -52,6 +52,7 @@ class PdInputArea extends PdBaseInputElement {
   }
   render() {
     const inputAreaId = `${this.id}InputArea`;
+    const errorId = `${this.id}Error`;
     return html`
       ${this._renderLabel(inputAreaId)}
       <div
@@ -62,24 +63,25 @@ class PdInputArea extends PdBaseInputElement {
     )}"
       >
         <textarea
-          id=${inputAreaId}
-          name=${this.name || this.valueName || this.autoCompleteName}
-          autocomplete=${this.autoCompleteName ?? "off"}
+          id="${inputAreaId}"
+          name="${this.name || this.valueName}"
           class="input-style ${this.gradient ? "gradient" : ""}"
-          rows=${this.rows}
-          cols=${this.cols ?? ""}
-          placeholder=${this.placeHolder}
-          minlength=${this.minlength ?? ""}
-          maxlength=${this.maxlength ?? ""}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          .value=${this.value}
-          @keyup=${this._onKeyUp}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
+          rows="${this.rows}"
+          cols="${this.cols ?? ""}"
+          placeholder="${this.placeHolder}"
+          minlength="${this.minlength ?? ""}"
+          maxlength="${this.maxlength ?? ""}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          .value="${this.value}"
+          aria-invalid="${this._invalid}"
+          aria-describedby="${this._errorMsg ? errorId : ""}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+          @focus="${this._onFocus}"
         ></textarea>
       </div>
-      ${this._renderErrorMsg()}
+      ${this._renderErrorMsg(errorId)}
     `;
   }
 }

package/dist/pd-input-area/pd-input-area.stories.d.ts

@@ -1,54 +1,67 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {
-        backgroundColor: {
-            control: "color";
-        };
-        onClick: {
-            action: string;
-        };
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-        };
-        primaryColor: {
-            control: "color";
-        };
-        secondaryColor: {
-            control: "color";
-        };
-        textColor: {
-            control: "color";
-        };
-        highlightColor: {
-            control: "color";
-        };
-        errorColor: {
-            control: "color";
-        };
-        errorBackgroundColor: {
-            control: "color";
-        };
-        borderRadius: {
-            control: "text";
-        };
-        displayFont: {
-            control: "text";
-        };
-        fontSize: {
-            control: "text";
-        };
-        parameters: {
-            actions: {
-                handles: string[];
-            };
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdFieldType, PdAutocomplete } from '../types.js';
+/**
+ * Arguments interface for pd-input-area stories.
+ * Maps to the component's public API.
+ */
+interface PdInputAreaArgs {
+    /** Label text displayed above the textarea */
+    label: string;
+    /** Initial value of the textarea */
+    initValue: string;
+    /** Placeholder text shown when textarea is empty */
+    placeHolder: string;
+    /** Whether the textarea is disabled */
+    disabled: boolean;
+    /** Whether the textarea is read-only */
+    readonly: boolean;
+    /** Whether the textarea is required */
+    required: boolean;
+    /** Number of visible text rows */
+    rows: number;
+    /** Number of visible text columns */
+    cols?: number;
+    /** Minimum character length */
+    minlength?: number;
+    /** Maximum character length */
+    maxlength?: number;
+    /** Field validation type */
+    fieldType: PdFieldType;
+    /** Helper text shown in tooltip */
+    helperTxt: string;
+    /** Character shown for required fields */
+    defaultRequiredChar: string;
+    /** Autocomplete attribute value */
+    autoCompleteName: PdAutocomplete;
+    /** Apply gradient styling */
+    gradient: boolean;
+}
+/**
+ * ## pd-input-area
+ *
+ * A multi-line text input component (textarea) for forms with
+ * validation and configurable dimensions.
+ *
+ * ### Features
+ * - **Multi-line Input**: Configurable rows and columns
+ * - **States**: Supports disabled, readonly, and required modes
+ * - **Validation**: Min/max length constraints with built-in validation
+ * - **Field Types**: text, number, mail, vat, phone validation
+ * - **Form Integration**: Works with pd-form-container for validation
+ */
+declare const meta: Meta<PdInputAreaArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const InputArea: Story;
+type Story = StoryObj<PdInputAreaArgs>;
+/** Default textarea with minimal configuration. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All textarea states for visual comparison. */
+export declare const AllStates: Story;
+/** Textarea with min/max character length validation. */
+export declare const WithLengthConstraints: Story;
+/** Different sizing options using rows attribute and CSS custom properties. */
+export declare const Sizing: Story;
+/** Textarea within a form container showing proper form integration. */
+export declare const InFormContainer: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-input-area.stories.d.ts.map

package/dist/pd-input-area/pd-input-area.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-input-area.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/pd-input-area.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,oBAAoB,CAAC;AAG5B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KA4GvB,CAAC"}
+{"version":3,"file":"pd-input-area.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/pd-input-area.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AAMnD;;;GAGG;AACH,UAAU,eAAe;IACvB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;IACvB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mCAAmC;IACnC,gBAAgB,EAAE,cAAc,CAAC;IACjC,6BAA6B;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAMD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAsG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,mFAAmF;AACnF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,SAAS,EAAE,KAqFvB,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,qBAAqB,EAAE,KAgBnC,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,MAAM,EAAE,KAiEpB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAoG3B,CAAC"}

package/dist/pd-input-file/PdInputFile.d.ts

@@ -1,17 +1,41 @@
 import { CSSResultGroup } from 'lit';
 import { PdBaseInputElement } from '../base/pd-base-input-element.js';
 /**
+ * File upload input component.
+ *
  * @tagname pd-input-file
+ * @summary File upload input with type filtering and form integration.
+ *
+ * @event input-icon-click - Fired when the input icon is clicked.
+ * @event validate-form - Fired when file selection changes for validation.
+ * @event field-change - Fired when file selection changes.
+ *
+ * @cssprop --pd-input-field-width - Input width. Default: `300px`.
+ * @cssprop --pd-input-field-height - Input height. Default: `2.2rem`.
+ * @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-icon-size - Icon size. Default: `calc(var(--pd-input-field-height) * 0.9)`.
+ * @cssprop --pd-input-icon-color - Icon color. Default: `var(--pd-default-col)`.
  */
 export declare class PdInputFile extends PdBaseInputElement {
+    /** Optional icon to display inside input. */
     icon?: string;
+    /** If true, icon is clickable and keyboard accessible. */
+    clickableIcon: boolean;
+    /** Accessible label for clickable icon (required when clickableIcon is true). */
+    iconLabel: string;
+    /** Accepted file types (e.g., ".pdf,.doc"). */
     accept?: string;
+    /** Maximum filename length. */
     maxlength?: number;
     static styles: CSSResultGroup;
     constructor();
     render(): import('lit').TemplateResult<1>;
     private _iconClicked;
+    private _onIconKeyDown;
     private _onChange;
+    /** Returns the selected files from the file input element. */
     get files(): FileList | null | undefined;
     reset(): void;
     clear(): void;

package/dist/pd-input-file/PdInputFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdInputFile.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/PdInputFile.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAGtE;;GAEG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,MAAM;IAqCf,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAKjB,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,CAEvC;IAEM,KAAK;IAKL,KAAK,IAAI,IAAI;CAGrB"}
+{"version":3,"file":"PdInputFile.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/PdInputFile.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAGtE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IACjD,6CAA6C;IAE7C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0DAA0D;IAE1D,aAAa,UAAS;IAEtB,iFAAiF;IAEjF,SAAS,SAAM;IAEf,+CAA+C;IAE/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+BAA+B;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAgB,MAAM,EAAE,cAAc,CAWpC;;IAOO,MAAM;IA+Cf,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,SAAS;IAKjB,8DAA8D;IAC9D,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,CAEvC;IAEM,KAAK;IAKL,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-input-file/PdInputFile.js

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '@progressive-development/pd-icon/pd-icon';
@@ -15,6 +15,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class PdInputFile extends PdBaseInputElement {
+  constructor() {
+    super();
+    this.clickableIcon = false;
+    this.iconLabel = "";
+    this._inputType = INPUT_TYPE_FILE;
+  }
   static {
     this.styles = [
       PdBaseInputElement.styles,
@@ -22,15 +28,16 @@ class PdInputFile extends PdBaseInputElement {
       * {
         box-sizing: border-box;
       }
+
+      :host {
+        --pd-input-field-width: 330px;
+      }
     `
     ];
   }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_FILE;
-  }
   render() {
     const inputId = `${this.id}Input`;
+    const errorId = `${this.id}Error`;
     return html`
       ${this._renderLabel(inputId)}
       <div
@@ -40,35 +47,53 @@ class PdInputFile extends PdBaseInputElement {
       })
     )}"
       >
-        ${this.icon ? html`<pd-icon
-              icon=${this.icon}
-              activeIcon
-              @click=${this._iconClicked}
-              class="infield-icon"
-            ></pd-icon>` : ""}
+        ${this.icon ? html`
+              <pd-icon
+                icon="${this.icon}"
+                ?activeIcon="${this.clickableIcon}"
+                class="infield-icon"
+                tabindex="${this.clickableIcon ? 0 : -1}"
+                role="${this.clickableIcon ? "button" : "img"}"
+                aria-label="${this.clickableIcon ? this.iconLabel : ""}"
+                aria-hidden="${!this.clickableIcon}"
+                @click="${this.clickableIcon ? this._iconClicked : null}"
+                @keydown="${this.clickableIcon ? this._onIconKeyDown : null}"
+              ></pd-icon>
+            ` : nothing}
         <input
-          id=${inputId}
-          name=${this.name || this.valueName || this.autoCompleteName}
+          id="${inputId}"
+          name="${this.name || this.valueName || this.autoCompleteName}"
           class="input-style ${this.gradient ? "gradient" : ""}"
           type="file"
-          maxlength=${this.maxlength ?? ""}
-          accept=${this.accept ?? ""}
-          ?disabled=${this.disabled}
-          @keyup=${this._onKeyUp}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
-          @change=${this._onChange}
+          maxlength="${this.maxlength ?? ""}"
+          accept="${this.accept ?? ""}"
+          ?disabled="${this.disabled}"
+          aria-invalid="${this._invalid}"
+          aria-describedby="${this._errorMsg ? errorId : ""}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+          @focus="${this._onFocus}"
+          @change="${this._onChange}"
         />
       </div>
-      ${this._renderErrorMsg()}
+      ${this._renderErrorMsg(errorId)}
     `;
   }
   _iconClicked() {
-    this.dispatchEvent(new CustomEvent("input-icon-click"));
+    this.dispatchEvent(
+      new CustomEvent("input-icon-click", { bubbles: true, composed: true })
+    );
+  }
+  _onIconKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this._iconClicked();
+    }
   }
   _onChange(e) {
     this._handleChangedValue(this._input.value, e, true);
   }
+  /** Returns the selected files from the file input element. */
   get files() {
     return this._input?.files;
   }
@@ -83,6 +108,12 @@ class PdInputFile extends PdBaseInputElement {
 __decorateClass([
   property({ type: String })
 ], PdInputFile.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean })
+], PdInputFile.prototype, "clickableIcon");
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "iconLabel");
 __decorateClass([
   property({ type: String })
 ], PdInputFile.prototype, "accept");

package/dist/pd-input-file/pd-input-file.stories.d.ts

@@ -1,49 +1,53 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {
-        backgroundColor: {
-            control: "color";
-        };
-        onClick: {
-            action: string;
-        };
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-        };
-        primaryColor: {
-            control: "color";
-        };
-        secondaryColor: {
-            control: "color";
-        };
-        textColor: {
-            control: "color";
-        };
-        highlightColor: {
-            control: "color";
-        };
-        errorColor: {
-            control: "color";
-        };
-        errorBackgroundColor: {
-            control: "color";
-        };
-        borderRadius: {
-            control: "text";
-        };
-        displayFont: {
-            control: "text";
-        };
-        fontSize: {
-            control: "text";
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-input-file component.
+ * Maps to the component's public API.
+ */
+interface PdInputFileArgs {
+    /** Label text displayed above the file input */
+    label: string;
+    /** Whether the file input is disabled */
+    disabled: boolean;
+    /** Whether the file input is required */
+    required: boolean;
+    /** File types to accept (MIME types or extensions) */
+    accept: string;
+    /** Optional icon to display */
+    icon: string;
+    /** Maximum filename length */
+    maxlength?: number;
+    /** Helper text shown in tooltip */
+    helperTxt: string;
+    /** Character shown for required fields */
+    defaultRequiredChar: string;
+    /** Apply gradient styling */
+    gradient: boolean;
+}
+/**
+ * ## pd-input-file
+ *
+ * A file upload input component with file type filtering
+ * and form integration.
+ *
+ * ### Features
+ * - **File Type Filtering**: Restrict uploads via accept attribute (MIME types or extensions)
+ * - **States**: Supports disabled and required modes
+ * - **Icons**: Optional icon with clickable mode
+ * - **Form Integration**: Works with pd-form-container for validation
+ */
+declare const meta: Meta<PdInputFileArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const InputFile: Story;
+type Story = StoryObj<PdInputFileArgs>;
+/** Default file input with minimal configuration. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All file input states at a glance for visual comparison. */
+export declare const AllVariants: Story;
+/** File input with icon variations. */
+export declare const WithIcon: Story;
+/** Different file type configurations using the accept attribute. */
+export declare const FileTypeFiltering: Story;
+/** File inputs within a form container showing proper form integration. */
+export declare const InFormContainer: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-input-file.stories.d.ts.map

package/dist/pd-input-file/pd-input-file.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-input-file.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/pd-input-file.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,oBAAoB,CAAC;AAG5B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAmFvB,CAAC"}
+{"version":3,"file":"pd-input-file.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/pd-input-file.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AAMnD;;;GAGG;AACH,UAAU,eAAe;IACvB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6BAA6B;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAMD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAkG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,qFAAqF;AACrF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,WAAW,EAAE,KAsDzB,CAAC;AAMF,uCAAuC;AACvC,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAC;AAMF,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,EAAE,KAyC/B,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,eAAe,EAAE,KAsC7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAgG3B,CAAC"}

package/dist/pd-input-time/PdInputTime.d.ts

@@ -1,14 +1,35 @@
 import { CSSResultGroup } from 'lit';
 import { PdBaseInputElement } from '../base/pd-base-input-element.js';
 /**
+ * Time input component for selecting hours and minutes.
+ *
  * @tagname pd-input-time
+ * @summary Time picker input with native browser support.
+ *
+ * @event input-icon-click - Fired when the input icon is clicked.
+ * @event validate-form - Fired when time value changes for validation.
+ * @event field-change - Fired when time value changes.
+ *
+ * @cssprop --pd-input-field-width - Input width. Default: `250px`.
+ * @cssprop --pd-input-field-height - Input height. Default: `2.2rem`.
+ * @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-icon-size - Icon size. Default: `calc(var(--pd-input-field-height) * 0.9)`.
+ * @cssprop --pd-input-icon-color - Icon color. Default: `var(--pd-default-col)`.
  */
 export declare class PdInputTime extends PdBaseInputElement {
+    /** Optional icon to display inside input. */
     icon?: string;
+    /** If true, icon is clickable and keyboard accessible. */
+    clickableIcon: boolean;
+    /** Accessible label for clickable icon (required when clickableIcon is true). */
+    iconLabel: string;
     static get styles(): CSSResultGroup;
     constructor();
     render(): import('lit').TemplateResult<1>;
     private _onChange;
     private _iconClicked;
+    private _onIconKeyDown;
 }
 //# sourceMappingURL=PdInputTime.d.ts.map

package/dist/pd-input-time/PdInputTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdInputTime.d.ts","sourceRoot":"","sources":["../../src/pd-input-time/PdInputTime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAGtE;;GAEG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,WAAoB,MAAM,IAAI,cAAc,CAS3C;;IAOQ,MAAM;IAqCf,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;CAGrB"}
+{"version":3,"file":"PdInputTime.d.ts","sourceRoot":"","sources":["../../src/pd-input-time/PdInputTime.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAGtE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IACjD,6CAA6C;IAE7C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0DAA0D;IAE1D,aAAa,UAAS;IAEtB,iFAAiF;IAEjF,SAAS,SAAM;IAEf,WAAoB,MAAM,IAAI,cAAc,CAS3C;;IAOQ,MAAM;IA+Cf,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;CAMvB"}