@progressive-development/pd-forms 0.9.1 → 1.0.0

package/dist/pd-hover-box/PdHoverBox.js

@@ -1,5 +1,6 @@
-import { css, html } from 'lit';
-import { state } from 'lit/decorators.js';
+import { css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { calculateFloatingPosition } from '../pd-utils/dist/position-helper.js';
 import { PdBaseUI } from '../base/pd-base-ui.js';
 
 var __defProp = Object.defineProperty;
@@ -11,11 +12,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+let hoverBoxIdCounter = 0;
 class PdHoverBox extends PdBaseUI {
   constructor() {
     super(...arguments);
+    this.triggerLabel = "Show info";
     this._visible = false;
-    this._toBottom = false;
+    this._posTop = 0;
+    this._posLeft = 0;
+    /** @ignore - Unique ID for aria-controls */
+    this._infoId = `pd-hover-box-${++hoverBoxIdCounter}`;
+    /** @ignore - Bound method for click-outside listener */
+    this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+    /** @ignore - Bound method for keyboard listener */
+    this._boundHandleKeyDown = this._handleKeyDown.bind(this);
+    /** @ignore - Bound method for scroll listener */
+    this._boundHandleScroll = this._handleScroll.bind(this);
   }
   static {
     this.styles = [
@@ -30,17 +42,17 @@ class PdHoverBox extends PdBaseUI {
       }
 
       .info-view {
-        position: absolute;
-        z-index: 100;
+        position: fixed;
+        z-index: 9999;
         background-color: var(
           --pd-hover-box-bg-col,
           var(--pd-default-dark-col)
         );
         border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
         text-align: center;
-        padding: 10px;
-        width: 240px;
-        color: var(--pd-hover-box-font-col, white);
+        padding: var(--pd-spacing-sm);
+        width: var(--pd-hover-box-width, 240px);
+        color: var(--pd-hover-box-font-col, var(--pd-default-bg-col));
         font-size: var(--pd-hover-box-font-size, 0.8em);
         transition: opacity 0.2s ease-in;
       }
@@ -55,14 +67,22 @@ class PdHoverBox extends PdBaseUI {
         opacity: 0;
       }
 
-      .to-bottom {
-        right: -3px;
-        top: -3px;
+      /* Trigger styles */
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
       }
 
-      .to-top {
-        right: -3px;
-        bottom: -3px;
+      .trigger:focus {
+        outline: none;
+      }
+
+      .trigger:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm, 2px);
       }
 
       @media (max-width: 640px) {
@@ -76,14 +96,25 @@ class PdHoverBox extends PdBaseUI {
   render() {
     return html`
       <div class="hover-box">
-        <div @click=${this._activateInfo}>
+        <div
+          class="trigger"
+          tabindex="0"
+          role="button"
+          @click="${this._toggleInfo}"
+          @keydown="${this._onTriggerKeyDown}"
+          aria-expanded="${this._visible}"
+          aria-controls="${this._infoId}"
+          aria-label="${this.triggerLabel || nothing}"
+        >
           <slot name="normal-view"></slot>
         </div>
 
         <div
-          id="infoViewId"
-          @click=${this._closeInfo}
-          class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}"
+          id="${this._infoId}"
+          role="tooltip"
+          aria-hidden="${!this._visible}"
+          class="info-view ${this._visible ? "visible" : "hidden"}"
+          style="top: ${this._posTop}px; left: ${this._posLeft}px;"
         >
           <slot name="info-view"></slot>
         </div>
@@ -91,29 +122,100 @@ class PdHoverBox extends PdBaseUI {
     `;
   }
   /**
-   * Activates and positions the info box based on current viewport height.
+   * Calculates fixed position based on trigger location and available space.
+   * Uses viewport-relative coordinates for position: fixed.
+   */
+  _calculatePosition() {
+    const triggerEl = this.shadowRoot?.querySelector(".trigger");
+    if (!triggerEl) return;
+    const infoEl = this.shadowRoot?.getElementById(this._infoId);
+    const pos = calculateFloatingPosition({
+      anchor: triggerEl.getBoundingClientRect(),
+      floating: {
+        width: infoEl?.offsetWidth || 240,
+        height: infoEl?.offsetHeight || 100
+      }
+    });
+    this._posTop = pos.top;
+    this._posLeft = pos.left;
+  }
+  /**
+   * Opens the info box and registers close listeners.
+   * Uses fixed positioning to escape overflow containers.
    */
-  _activateInfo(e) {
-    const modal = this.shadowRoot?.getElementById("infoViewId");
-    if (!modal) return;
-    const rect = modal.getBoundingClientRect();
-    const fitsBelow = modal.offsetHeight + rect.top + rect.height <= window.innerHeight;
-    this._toBottom = fitsBelow;
+  _openInfo() {
+    this._calculatePosition();
     this._visible = true;
-    e.stopPropagation();
+    document.addEventListener("click", this._boundHandleClickOutside);
+    document.addEventListener("keydown", this._boundHandleKeyDown);
+    window.addEventListener("scroll", this._boundHandleScroll, true);
   }
   /**
-   * Hides the info box again
+   * Closes the info box and removes close listeners.
    */
   _closeInfo() {
     this._visible = false;
+    document.removeEventListener("click", this._boundHandleClickOutside);
+    document.removeEventListener("keydown", this._boundHandleKeyDown);
+    window.removeEventListener("scroll", this._boundHandleScroll, true);
+  }
+  /**
+   * Toggles the info box visibility.
+   */
+  _toggleInfo(e) {
+    e.stopPropagation();
+    if (this._visible) {
+      this._closeInfo();
+    } else {
+      this._openInfo();
+    }
+  }
+  /**
+   * Handles keyboard events on the trigger.
+   */
+  _onTriggerKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._toggleInfo(e);
+    }
+  }
+  /**
+   * Handles Escape key to close.
+   */
+  _handleKeyDown(e) {
+    if (e.key === "Escape") {
+      this._closeInfo();
+      const trigger = this.shadowRoot?.querySelector(".trigger");
+      trigger?.focus();
+    }
+  }
+  /**
+   * Handles clicks outside to close.
+   */
+  _handleClickOutside(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this._closeInfo();
+    }
+  }
+  /**
+   * Handles scroll to close (fixed position doesn't follow scroll).
+   */
+  _handleScroll() {
+    this._closeInfo();
   }
 }
+__decorateClass([
+  property({ type: String, attribute: "trigger-label" })
+], PdHoverBox.prototype, "triggerLabel");
 __decorateClass([
   state()
 ], PdHoverBox.prototype, "_visible");
 __decorateClass([
   state()
-], PdHoverBox.prototype, "_toBottom");
+], PdHoverBox.prototype, "_posTop");
+__decorateClass([
+  state()
+], PdHoverBox.prototype, "_posLeft");
 
 export { PdHoverBox };

package/dist/pd-hover-box/pd-hover-box.stories.d.ts

@@ -1,8 +1,31 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * ## pd-hover-box
+ *
+ * A floating container component for displaying contextual information
+ * in a tooltip-like popup that appears on click.
+ *
+ * ### Features
+ * - Click-to-Show: Shows info box when trigger is clicked
+ * - Auto-Positioning: Automatically positions above or below based on viewport
+ * - Slot-Based Content: Uses named slots for trigger and info content
+ * - Click-to-Dismiss: Info box closes when clicked outside or Escape pressed
+ */
+declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const HoverBoxContainer: Story;
+/** Default hover box with question mark trigger. Click the "?" to show the info box. */
+export declare const Default: Story;
+/** Hover box with structured long-form content. */
+export declare const WithLongContent: Story;
+/** All trigger style variations in one view. */
+export declare const TriggerStyles: Story;
+/** Hover box next to a form field label -- common real-world pattern. */
+export declare const WithFormField: Story;
+/** Hover box in a table header for column info. */
+export declare const InTableHeader: Story;
+/** Demonstrates auto-positioning: above (default) and below (when no space above). */
+export declare const AutoPositioning: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-hover-box.stories.d.ts.map

package/dist/pd-hover-box/pd-hover-box.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-hover-box.stories.d.ts","sourceRoot":"","sources":["../../src/pd-hover-box/pd-hover-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,iBAAiB,EAAE,KA4J/B,CAAC"}
+{"version":3,"file":"pd-hover-box.stories.d.ts","sourceRoot":"","sources":["../../src/pd-hover-box/pd-hover-box.stories.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,mBAAmB,CAAC;AAM3B;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,EAAE,IAuDX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAMtB,wFAAwF;AACxF,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAMF,mDAAmD;AACnD,eAAO,MAAM,eAAe,EAAE,KAmC7B,CAAC;AAMF,gDAAgD;AAChD,eAAO,MAAM,aAAa,EAAE,KA4D3B,CAAC;AAMF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,KA2C3B,CAAC;AAMF,mDAAmD;AACnD,eAAO,MAAM,aAAa,EAAE,KAwF3B,CAAC;AAMF,sFAAsF;AACtF,eAAO,MAAM,eAAe,EAAE,KAgE7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAsF3B,CAAC"}

package/dist/pd-input/PdComboboxInput.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from 'lit';
+import { PdInput } from './PdInput.js';
+/**
+ * Internal input component with combobox ARIA support.
+ * Extends PdInput to add role="combobox" and related ARIA attributes.
+ *
+ * @internal Not exported - for use by PdSuggestionBox only.
+ */
+export declare class PdComboboxInput extends PdInput {
+    /** ID of the element controlled by this combobox. */
+    ariaControls?: string;
+    /** Type of autocomplete behavior ("list", "both", "inline", "none"). */
+    ariaAutocomplete?: string;
+    /** ID of the currently active descendant in the listbox. */
+    ariaActivedescendant?: string;
+    /** Whether the combobox popup is expanded. */
+    expanded: boolean;
+    protected _renderInputField(inputId: string, errorId: string): TemplateResult;
+}
+//# sourceMappingURL=PdComboboxInput.d.ts.map

package/dist/pd-input/PdComboboxInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdComboboxInput.d.ts","sourceRoot":"","sources":["../../src/pd-input/PdComboboxInput.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,OAAO;IAC1C,qDAAqD;IAErD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,wEAAwE;IAExE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,4DAA4D;IAE5D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,8CAA8C;IAE9C,QAAQ,UAAS;cAEE,iBAAiB,CAClC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,GACd,cAAc;CAkClB"}

package/dist/pd-input/PdComboboxInput.js

@@ -0,0 +1,67 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { PdInput } from './PdInput.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 PdComboboxInput extends PdInput {
+  constructor() {
+    super(...arguments);
+    this.expanded = false;
+  }
+  _renderInputField(inputId, errorId) {
+    return html`
+      <input
+        id="${inputId}"
+        name="${this.name || this.valueName || this.autoCompleteName}"
+        autocomplete="${this.autoCompleteName ?? "off"}"
+        class="input-style ${this.gradient ? "gradient" : ""}"
+        type="${this.secret ? "password" : "text"}"
+        placeholder="${this.placeHolder}"
+        .value="${this._value}"
+        minlength="${this.minlength ?? ""}"
+        maxlength="${this.maxlength ?? ""}"
+        ?readonly="${this.readonly}"
+        ?disabled="${this.disabled}"
+        role="combobox"
+        aria-expanded="${this.expanded ? "true" : "false"}"
+        aria-controls="${ifDefined(this.ariaControls)}"
+        aria-autocomplete="${ifDefined(
+      this.ariaAutocomplete
+    )}"
+        aria-activedescendant="${ifDefined(this.ariaActivedescendant)}"
+        aria-invalid="${this._invalid}"
+        aria-describedby="${this._errorMsg ? errorId : ""}"
+        @keyup="${this._onKeyUp}"
+        @blur="${this._onBlur}"
+        @focus="${this._onFocus}"
+      />
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdComboboxInput.prototype, "ariaControls");
+__decorateClass([
+  property({ type: String })
+], PdComboboxInput.prototype, "ariaAutocomplete");
+__decorateClass([
+  property({ type: String })
+], PdComboboxInput.prototype, "ariaActivedescendant");
+__decorateClass([
+  property({ type: Boolean })
+], PdComboboxInput.prototype, "expanded");
+const tag = "pd-combobox-input";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdComboboxInput);
+}
+
+export { PdComboboxInput };

package/dist/pd-input/PdInput.d.ts

@@ -1,35 +1,53 @@
 import { TemplateResult, CSSResultGroup } from 'lit';
 import { PdBaseInputElement } from '../base/pd-base-input-element.js';
 /**
+ * Text input component for forms.
+ *
  * @tagname pd-input
+ * @summary Text input with validation, icons, and form integration.
+ *
+ * @event input-icon-click - Fired when the input icon is clicked.
+ * @event validate-form - Fired when input value changes for validation.
+ * @event field-change - Fired when input 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-padding - Input 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)`.
+ * @cssprop --pd-input-field-bg-col-disabled - Disabled background. Default: `#e9e9e9`.
+ * @cssprop --pd-input-field-border-bottom-disabled - Disabled bottom border. Default: `2px solid var(--pd-default-disabled-col)`.
+ * @cssprop --pd-input-placeholder-color - Placeholder text color. Default: `#474747e4`.
+ * @cssprop --pd-input-icon-size - Icon size when using icon attribute. Default: `calc(var(--pd-input-field-height) * 0.9)`.
+ * @cssprop --pd-input-icon-color - Icon color. Default: `var(--pd-default-col)`.
  */
 export declare class PdInput extends PdBaseInputElement {
-    /**
-     * Optional icon to display inside input
-     */
+    /** Optional icon to display inside input. */
     icon: string;
-    /**
-     * If true, uses input type password
-     */
+    /** If true, icon is clickable and keyboard accessible. */
+    clickableIcon: boolean;
+    /** Accessible label for clickable icon (required when clickableIcon is true). */
+    iconLabel: string;
+    /** If true, uses input type password. */
     secret: boolean;
-    /**
-     * Minimum length constraint
-     */
+    /** Minimum character length constraint. */
     minlength?: number;
-    /**
-     * Maximum length constraint
-     */
+    /** Maximum character length constraint. Default: 500. */
     maxlength?: number;
-    /**
-     * If true, restricts input to numbers only (legacy, use type="number" langfristig)
-     */
+    /** Restricts input to numbers only (remove other chars during typing). */
     onlyNumbers: boolean;
     static styles: CSSResultGroup;
     constructor();
     connectedCallback(): void;
     private _setupValidators;
     render(): TemplateResult;
+    /** Renders the input field. Override in subclasses to add additional attributes. */
+    protected _renderInputField(inputId: string, errorId: string): TemplateResult;
     protected _onKeyUp(e: KeyboardEvent): void;
     private _iconClicked;
+    private _onIconKeyDown;
 }
 //# sourceMappingURL=PdInput.d.ts.map

package/dist/pd-input/PdInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdInput.d.ts","sourceRoot":"","sources":["../../src/pd-input/PdInput.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAKtE;;GAEG;AACH,qBAAa,OAAQ,SAAQ,kBAAkB;IAC7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB;;OAEG;IAEH,WAAW,UAAS;IAEpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM,IAAI,cAAc;cA0Cd,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAWnD,OAAO,CAAC,YAAY;CAKrB"}
+{"version":3,"file":"PdInput.d.ts","sourceRoot":"","sources":["../../src/pd-input/PdInput.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAKtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,OAAQ,SAAQ,kBAAkB;IAC7C,6CAA6C;IAE7C,IAAI,SAAM;IAEV,0DAA0D;IAE1D,aAAa,UAAS;IAEtB,iFAAiF;IAEjF,SAAS,SAAM;IAEf,yCAAyC;IAEzC,MAAM,UAAS;IAEf,2CAA2C;IAE3C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yDAAyD;IAEzD,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB,0EAA0E;IAE1E,WAAW,UAAS;IAEpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM,IAAI,cAAc;IAiCjC,oFAAoF;IACpF,SAAS,CAAC,iBAAiB,CACzB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,GACd,cAAc;cAuBE,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAWnD,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;CAMvB"}

package/dist/pd-input/PdInput.js

@@ -15,11 +15,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const onlyContainsNumbers = (str2) => /^\d+$/.test(str2);
+const onlyContainsNumbers = (strVar) => /^\d+$/.test(strVar);
 class PdInput extends PdBaseInputElement {
   constructor() {
     super();
     this.icon = "";
+    this.clickableIcon = false;
+    this.iconLabel = "";
     this.secret = false;
     this.maxlength = 500;
     this.onlyNumbers = false;
@@ -55,6 +57,7 @@ class PdInput extends PdBaseInputElement {
   }
   render() {
     const inputId = `${this.id}Input`;
+    const errorId = `${this.id}Error`;
     return html`
       ${this._renderLabel(inputId)}
       <div
@@ -66,30 +69,43 @@ class PdInput extends PdBaseInputElement {
       >
         ${this.icon ? html`
               <pd-icon
-                icon=${this.icon}
-                activeIcon
-                @click=${this._iconClicked}
+                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>
             ` : ""}
-        <input
-          id=${inputId}
-          name=${this.name || this.valueName || this.autoCompleteName}
-          autocomplete=${this.autoCompleteName ?? "off"}
-          class="input-style ${this.gradient ? "gradient" : ""}"
-          type=${this.secret ? "password" : "text"}
-          placeholder=${this.placeHolder}
-          .value=${this._value}
-          minlength=${this.minlength ?? ""}
-          maxlength=${this.maxlength ?? ""}
-          ?readonly=${this.readonly}
-          ?disabled=${this.disabled}
-          @keyup=${this._onKeyUp}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
-        />
+        ${this._renderInputField(inputId, errorId)}
       </div>
-      ${this._renderErrorMsg()}
+      ${this._renderErrorMsg(errorId)}
+    `;
+  }
+  /** Renders the input field. Override in subclasses to add additional attributes. */
+  _renderInputField(inputId, errorId) {
+    return html`
+      <input
+        id="${inputId}"
+        name="${this.name || this.valueName || this.autoCompleteName}"
+        autocomplete="${this.autoCompleteName ?? "off"}"
+        class="input-style ${this.gradient ? "gradient" : ""}"
+        type="${this.secret ? "password" : "text"}"
+        placeholder="${this.placeHolder}"
+        .value="${this._value}"
+        minlength="${this.minlength ?? ""}"
+        maxlength="${this.maxlength ?? ""}"
+        ?readonly="${this.readonly}"
+        ?disabled="${this.disabled}"
+        aria-invalid="${this._invalid}"
+        aria-describedby="${this._errorMsg ? errorId : ""}"
+        @keyup="${this._onKeyUp}"
+        @blur="${this._onBlur}"
+        @focus="${this._onFocus}"
+      />
     `;
   }
   _onKeyUp(e) {
@@ -103,10 +119,22 @@ class PdInput extends PdBaseInputElement {
       new CustomEvent("input-icon-click", { bubbles: true, composed: true })
     );
   }
+  _onIconKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this._iconClicked();
+    }
+  }
 }
 __decorateClass([
   property({ type: String })
 ], PdInput.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean })
+], PdInput.prototype, "clickableIcon");
+__decorateClass([
+  property({ type: String })
+], PdInput.prototype, "iconLabel");
 __decorateClass([
   property({ type: Boolean })
 ], PdInput.prototype, "secret");

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

@@ -1,37 +1,73 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {
-        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';
+import { PdFieldType, PdAutocomplete } from '../types.js';
+/**
+ * Story arguments interface for pd-input component.
+ * Maps to the component's public API.
+ */
+interface PdInputArgs {
+    /** Label text displayed above the input */
+    label: string;
+    /** Initial value of the input */
+    initValue: string;
+    /** Placeholder text shown when input is empty */
+    placeHolder: string;
+    /** Whether the input is disabled */
+    disabled: boolean;
+    /** Whether the input is read-only */
+    readonly: boolean;
+    /** Whether the input is required */
+    required: boolean;
+    /** Whether to mask input as password */
+    secret: boolean;
+    /** Optional icon to display (use pdIcons constants) */
+    icon: string;
+    /** Whether the icon is clickable */
+    clickableIcon: boolean;
+    /** Accessible label for clickable icon */
+    iconLabel: string;
+    /** Minimum character length */
+    minlength?: number;
+    /** Maximum character length */
+    maxlength?: number;
+    /** Restrict input to numbers only (legacy - prefer fieldType="number") */
+    onlyNumbers: boolean;
+    /** 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
+ *
+ * A versatile text input component for forms with validation,
+ * icons, and multiple field types.
+ *
+ * ### Features
+ * - **Field Types**: text, number, mail, vat, phone validation
+ * - **States**: Supports disabled, readonly, required, and password (secret) modes
+ * - **Icons**: Optional left or right icon positioning, decorative or clickable
+ * - **Validation**: Built-in validation for email, phone, VAT formats
+ * - **Form Integration**: Works with pd-form-container for validation
+ */
+declare const meta: Meta<PdInputArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Input: Story;
+type Story = StoryObj<PdInputArgs>;
+/** Default input with minimal configuration. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All input states and variants at a glance. */
+export declare const AllVariants: Story;
+/** Decorative vs clickable icon usage patterns. */
+export declare const IconVariants: Story;
+/** Validation field types: email, number, onlyNumbers. */
+export declare const FieldTypes: Story;
+/** Input within a form container showing proper form layout and validation. */
+export declare const InFormContainer: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-input.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-input.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input/pd-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,eAAe,CAAC;AACvB,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAkKnB,CAAC"}
+{"version":3,"file":"pd-input.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input/pd-input.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,eAAe,CAAC;AACvB,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AAMnD;;;GAGG;AACH,UAAU,WAAW;IACnB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,aAAa,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,WAAW,EAAE,OAAO,CAAC;IACrB,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,WAAW,CAiI3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,WAAW,EAAE,KAsEzB,CAAC;AAMF,mDAAmD;AACnD,eAAO,MAAM,YAAY,EAAE,KAqE1B,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,UAAU,EAAE,KA8ExB,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,eAAe,EAAE,KAsC7B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA4H3B,CAAC"}