@progressive-development/pd-forms 0.9.2 → 1.0.1

package/dist/pd-radio-group/PdRadioGroup.js

@@ -2,16 +2,6 @@ import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
 
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- *
- * RadioGroup für pd-checkbox Elemente.
- *
- * - Erlaubt Auswahl genau eines Wertes aus mehreren Checkboxen
- * - Setzt `readonly` auf die selektierte Option
- * - Sendet `validate-form` Event nach Änderungen
- */
 class PdRadioGroup extends PdBaseUIInput {
   static {
     this.styles = [
@@ -47,7 +37,12 @@ class PdRadioGroup extends PdBaseUIInput {
     return html`
       ${this._renderLabel(radioInputId)}
       <div
-        id=${radioInputId}
+        id="${radioInputId}"
+        role="radiogroup"
+        aria-label="${this.label || ""}"
+        aria-disabled="${this.disabled}"
+        aria-readonly="${this.readonly}"
+        @keydown="${this._onKeyDown}"
         class="${classMap(
       this.getClassmap({
         "group-style": true,
@@ -60,6 +55,48 @@ class PdRadioGroup extends PdBaseUIInput {
       ${this._renderErrorMsg()}
     `;
   }
+  _onKeyDown(event) {
+    if (this.disabled || this.readonly) return;
+    const checkboxes = Array.from(
+      this.querySelectorAll("pd-checkbox")
+    );
+    if (checkboxes.length === 0) return;
+    const focusedIndex = checkboxes.findIndex(
+      (el) => el.shadowRoot?.activeElement || el.matches(":focus-within")
+    );
+    let nextIndex = -1;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        nextIndex = focusedIndex < checkboxes.length - 1 ? focusedIndex + 1 : 0;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        nextIndex = focusedIndex > 0 ? focusedIndex - 1 : checkboxes.length - 1;
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = checkboxes.length - 1;
+        break;
+      default:
+        return;
+    }
+    if (nextIndex >= 0 && nextIndex < checkboxes.length) {
+      const targetCheckbox = checkboxes[nextIndex];
+      const radioControl = targetCheckbox.shadowRoot?.querySelector(
+        '[role="radio"]'
+      );
+      if (radioControl) {
+        radioControl.focus();
+      }
+    }
+  }
   _onInternalBlur(e) {
     e.stopPropagation();
   }

package/dist/pd-radio-group/pd-radio-group.stories.d.ts

@@ -1,9 +1,39 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdRadioGroupArgs {
+    label: string;
+    id: string;
+    valueName: string;
+    required: boolean;
+    direction: "row" | "column";
+    gap: string;
+}
+/**
+ * ## pd-radio-group
+ *
+ * A radio group container for `pd-checkbox` elements with single-selection behavior.
+ *
+ * ### Features
+ * - **Single Selection**: Only one option can be selected at a time
+ * - **Flexible Layout**: Horizontal (row) or vertical (column) arrangement via CSS custom properties
+ * - **Form Integration**: Works with `pd-form-container` for validation
+ * - **Slot-based**: Uses slotted `pd-checkbox` elements as radio options
+ * - **Keyboard Navigation**: Arrow keys, Home/End for option cycling
+ */
+declare const meta: Meta<PdRadioGroupArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const RadioGroup: Story;
+type Story = StoryObj<PdRadioGroupArgs>;
+/** Default horizontal radio group with three options. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All visual states at a glance: default, preselected, required, and with many options. */
+export declare const AllVariants: Story;
+/** Vertical (column) layout for longer option labels. */
+export declare const VerticalLayout: Story;
+/** Visual difference between radio-style (checkType="RADIO") and checkbox-style children. */
+export declare const StyleComparison: Story;
+/** Required radio group inside a form — triggers validation on button click. */
+export declare const RequiredValidation: Story;
+/** Real-world form pattern with multiple radio groups and submit action. */
+export declare const CompleteFormExample: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-radio-group.stories.d.ts.map

package/dist/pd-radio-group/pd-radio-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-radio-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/pd-radio-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,IAAI;;;CAGM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,UAAU,EAAE,KAiDxB,CAAC"}
+{"version":3,"file":"pd-radio-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/pd-radio-group.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAMnC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAMD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA6EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,yFAAyF;AACzF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,WAAW,EAAE,KAoGzB,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,EAAE,KAoChC,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,EAAE,KAqFjC,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAoH3B,CAAC"}

package/dist/pd-range/PdRange.d.ts

@@ -1,13 +1,33 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
 import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
 /**
+ * Range slider input component.
+ *
  * @tagname pd-range
+ * @summary Range slider input with customizable min/max/step.
+ *
+ * @event validate-form - Fired when value changes for validation.
+ * @event field-change - Fired when value changes.
+ * @event pd-form-element-blur - Fired when the range input loses focus.
+ * @event pd-form-element-focus - Fired when the range input gains focus.
+ *
+ * @cssprop --pd-input-field-width - Slider width.
+ * @cssprop --pd-input-field-range-height - Slider height.
+ * @cssprop --pd-range-bg-col - Slider background.
+ * @cssprop --pd-range-thumb-col - Thumb color.
+ * @cssprop --pd-range-track-col - Track color.
+ * @cssprop --pd-range-track-hover-col - Track hover color.
  */
 export declare class PdRange extends PdBaseUIInput {
+    /** Minimum value. */
     min: number;
+    /** Maximum value. */
     max: number;
+    /** Step increment. */
     step: number;
+    /** Map of values to display labels. */
     optionValueMapper: Record<string, string>;
+    /** Form field name. */
     name: string;
     protected _input: HTMLInputElement | null | undefined;
     static styles: CSSResultGroup;
@@ -15,8 +35,8 @@ export declare class PdRange extends PdBaseUIInput {
     update(changedProps: PropertyValues<this>): void;
     firstUpdated(): void;
     protected _onChange(e: Event): void;
-    protected _onBlur(event: Event): void;
-    protected _onFocus(event: Event): void;
+    protected _onBlur(_event: Event): void;
+    protected _onFocus(_event: Event): void;
     focus(): void;
     render(): import('lit').TemplateResult<1>;
     _getInitialValue(): string;

package/dist/pd-range/PdRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdRange.d.ts","sourceRoot":"","sources":["../../src/pd-range/PdRange.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,aAAa,EAAoB,MAAM,6BAA6B,CAAC;AAE9E;;GAEG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IAExC,GAAG,EAAE,MAAM,CAAK;IAGhB,GAAG,EAAE,MAAM,CAAM;IAGjB,IAAI,SAAK;IAGT,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAG/C,IAAI,SAAM;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAqJpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,YAAY,IAAI,IAAI;IAK7B,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAgBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,KAAK,IAAI,IAAI;IAIJ,MAAM;IAuCN,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}
+{"version":3,"file":"PdRange.d.ts","sourceRoot":"","sources":["../../src/pd-range/PdRange.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,aAAa,EAAoB,MAAM,6BAA6B,CAAC;AAE9E;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,qBAAqB;IAErB,GAAG,EAAE,MAAM,CAAK;IAEhB,qBAAqB;IAErB,GAAG,EAAE,MAAM,CAAM;IAEjB,sBAAsB;IAEtB,IAAI,SAAK;IAET,uCAAuC;IAEvC,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAE/C,uBAAuB;IAEvB,IAAI,SAAM;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CA0JpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,YAAY,IAAI,IAAI;IAK7B,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAgBtC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAcvC,KAAK,IAAI,IAAI;IAIJ,MAAM;IA6CN,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-range/PdRange.js

@@ -26,14 +26,25 @@ class PdRange extends PdBaseUIInput {
     this.styles = [
       PdBaseUIInput.styles,
       css`
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
       :host([disabled]) {
-        --pd-range-bg-col: grey;
-        --pd-range-thumb-col: lightgrey;
+        --pd-range-bg-col: var(--pd-default-disabled-col);
+        --pd-range-thumb-col: var(--pd-default-disabled-light-col);
+      }
+
+      .input-range {
+        display: inline-block;
+        width: var(--pd-input-field-width, 250px);
+        box-sizing: border-box;
       }
 
       input[type="range"] {
         -webkit-appearance: none;
-        width: var(--pd-input-field-width, 250px);
+        width: 100%;
         background: transparent;
         background-color: var(--pd-range-bg-col, var(--pd-default-col));
         padding: 0.5rem;
@@ -46,6 +57,11 @@ class PdRange extends PdBaseUIInput {
         outline: none;
       }
 
+      input[type="range"]:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+      }
+
       input[type="range"]::-webkit-slider-thumb {
         -webkit-appearance: none;
         margin-top: -6px;
@@ -55,9 +71,7 @@ class PdRange extends PdBaseUIInput {
         background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
         border: 1px solid var(--pd-default-dark-col);
         border-radius: 3px;
-        box-shadow:
-          1px 1px 1px #000000,
-          0px 0px 1px #0d0d0d;
+        box-shadow: var(--pd-shadow-sm);
       }
 
       input[type="range"]::-moz-range-thumb {
@@ -67,9 +81,7 @@ class PdRange extends PdBaseUIInput {
         background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
         border: 1px solid var(--pd-default-dark-col);
         border-radius: 3px;
-        box-shadow:
-          1px 1px 1px #000000,
-          0px 0px 1px #0d0d0d;
+        box-shadow: var(--pd-shadow-sm);
       }
 
       input[type="range"]::-ms-thumb {
@@ -79,20 +91,16 @@ class PdRange extends PdBaseUIInput {
         background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
         border: 1px solid var(--pd-default-dark-col);
         border-radius: 3px;
-        box-shadow:
-          1px 1px 1px #000000,
-          0px 0px 1px #0d0d0d;
+        box-shadow: var(--pd-shadow-sm);
       }
 
       input[type="range"]::-webkit-slider-runnable-track {
         width: 100%;
         height: 8.4px;
         cursor: pointer;
-        box-shadow:
-          1px 1px 1px #000000,
-          0px 0px 1px #0d0d0d;
+        box-shadow: var(--pd-shadow-sm);
         background: var(--pd-range-track-col, var(--pd-default-light-col));
-        border: 0.2px solid #010101;
+        border: 0.2px solid var(--pd-default-darkest-col);
         border-radius: 0.75rem;
       }
 
@@ -108,12 +116,10 @@ class PdRange extends PdBaseUIInput {
         width: 100%;
         height: 8.4px;
         cursor: pointer;
-        box-shadow:
-          1px 1px 1px #000000,
-          0px 0px 1px #0d0d0d;
+        box-shadow: var(--pd-shadow-sm);
         background: var(--pd-range-track-col, var(--pd-default-light-col));
         border-radius: 0.75rem;
-        border: 0.2px solid #010101;
+        border: 0.2px solid var(--pd-default-darkest-col);
       }
 
       input[type="range"]::-ms-track {
@@ -129,25 +135,24 @@ class PdRange extends PdBaseUIInput {
       input[type="range"]::-ms-fill-lower,
       input[type="range"]::-ms-fill-upper {
         background: var(--pd-range-track-col, var(--pd-default-light-col));
-        border: 0.2px solid #010101;
+        border: 0.2px solid var(--pd-default-darkest-col);
         border-radius: 0.75rem;
-        box-shadow:
-          1px 1px 1px #000000,
-          0px 0px 1px #0d0d0d;
+        box-shadow: var(--pd-shadow-sm);
       }
 
       input[type="range"]:focus::-ms-fill-lower {
-        background: #3071a9;
+        background: var(--pd-default-col);
       }
 
       input[type="range"]:focus::-ms-fill-upper {
-        background: #367ebd;
+        background: var(--pd-default-lighter-col);
       }
 
       .ticks {
         display: flex;
         justify-content: space-between;
-        padding: 10px 30px;
+        padding: 10px 20px;
+        box-sizing: border-box;
       }
 
       .tick {
@@ -159,7 +164,7 @@ class PdRange extends PdBaseUIInput {
       }
 
       .ticks.disabled {
-        color: grey;
+        color: var(--pd-default-disabled-col);
       }
 
       .ticks.enabled {
@@ -187,7 +192,7 @@ class PdRange extends PdBaseUIInput {
   _onChange(e) {
     this._handleChangedValue(this._input?.value ?? "", e, true);
   }
-  _onBlur(event) {
+  _onBlur(_event) {
     this._focused = false;
     this._touched = true;
     this.dispatchEvent(
@@ -201,7 +206,7 @@ class PdRange extends PdBaseUIInput {
       })
     );
   }
-  _onFocus(event) {
+  _onFocus(_event) {
     this._focused = true;
     this.dispatchEvent(
       new CustomEvent("pd-form-element-focus", {
@@ -230,22 +235,28 @@ class PdRange extends PdBaseUIInput {
     )}"
       >
         <input
-          id=${inputId}
-          name=${this.name || this.valueName || ""}
+          id="${inputId}"
+          name="${this.name || this.valueName || ""}"
           class="input-range-style ${this.gradient ? "gradient" : ""}"
           type="range"
-          .value=${this._value}
-          ?readonly=${this.readonly}
-          ?disabled=${this.disabled}
-          min=${this.min}
-          max=${this.max}
-          step=${this.step}
-          @change=${this._onChange}
-          @input=${this._onChange}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
+          .value="${this._value}"
+          ?disabled="${this.disabled}"
+          min="${this.min}"
+          max="${this.max}"
+          step="${this.step}"
+          aria-valuemin="${this.min}"
+          aria-valuemax="${this.max}"
+          aria-valuenow="${this._value}"
+          aria-valuetext="${labelDetail}"
+          @change="${this._onChange}"
+          @input="${this._onChange}"
+          @blur="${this._onBlur}"
+          @focus="${this._onFocus}"
         />
-        <div class="ticks ${this.disabled ? "disabled" : "enabled"}">
+        <div
+          class="ticks ${this.disabled ? "disabled" : "enabled"}"
+          aria-hidden="true"
+        >
           ${Array.from({ length: this.max - this.min + 1 }).map(
       () => html`<span class="tick">|</span>`
     )}

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

@@ -1,9 +1,51 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdRangeArgs {
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    initValue: string;
+    helperTxt: string;
+    disabled: boolean;
+    required: boolean;
+    optionValueMapper: Record<string, string>;
+}
+/**
+ * ## pd-range
+ *
+ * A styled range slider for selecting numeric values with optional label mapping.
+ *
+ * ### Features
+ * - **Value Mapping**: Map numeric values to descriptive labels via `optionValueMapper`
+ * - **Custom Range**: Configurable min, max, and step values
+ * - **Visual Ticks**: Shows tick marks for each step on the slider
+ * - **Form Integration**: Works with `pd-form-container` for validation
+ *
+ * ### Accessibility
+ * - Native range input for keyboard navigation
+ * - Label displays current mapped value
+ * - Disabled state support
+ *
+ * ## Usage
+ * ```html
+ * <pd-range
+ *   label="Satisfaction"
+ *   min="1" max="5" initValue="3"
+ *   .optionValueMapper=${{ 1: "Poor", 5: "Excellent" }}
+ * ></pd-range>
+ * ```
+ */
+declare const meta: Meta<PdRangeArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Range: Story;
+type Story = StoryObj<PdRangeArgs>;
+/** Default range slider with value mapping. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All range slider states at a glance: default, helper text, disabled, required. */
+export declare const AllStates: Story;
+/** Different value mappers and range configurations side by side. */
+export declare const ValueMappers: Story;
+/** Range slider within a pd-form-container for validation. */
+export declare const FormIntegration: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-range.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-range.stories.d.ts","sourceRoot":"","sources":["../../src/pd-range/pd-range.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,eAAe,CAAC;AACvB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAGvC,QAAA,MAAM,IAAI;;;CAGM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAUtB,eAAO,MAAM,KAAK,EAAE,KAkFnB,CAAC"}
+{"version":3,"file":"pd-range.stories.d.ts","sourceRoot":"","sources":["../../src/pd-range/pd-range.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,eAAe,CAAC;AACvB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAMvC,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3C;AA8CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA2F3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,+EAA+E;AAC/E,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,SAAS,EAAE,KAqEvB,CAAC;AAMF,qEAAqE;AACrE,eAAO,MAAM,YAAY,EAAE,KAkE1B,CAAC;AAMF,8DAA8D;AAC9D,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA6F3B,CAAC"}

package/dist/pd-select/PdSelect.d.ts

@@ -2,19 +2,31 @@ import { CSSResultGroup, PropertyValues } from 'lit';
 import { PdBaseInputElement } from '../base/pd-base-input-element.js';
 import { PdSelectOption } from '../types.js';
 /**
+ * Select dropdown component for forms.
+ *
  * @tagname pd-select
+ * @summary Styled select dropdown with native accessibility.
+ *
+ * @event validate-form - Fired when selection changes for validation.
+ * @event field-change - Fired when selection changes.
+ *
+ * @cssprop --pd-input-field-width - Select width. Default: `250px`.
+ * @cssprop --pd-input-field-height - Select height. Default: `2.2rem`.
+ * @cssprop --pd-input-field-padding - Select 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 PdSelect extends PdBaseInputElement {
+    /** Array of options to display in the dropdown. */
     values: PdSelectOption[];
     static styles: CSSResultGroup;
     constructor();
     update(changedProps: PropertyValues<this>): void;
     render(): import('lit').TemplateResult<1>;
     protected _onSelectChange(event: Event): void;
-    /**
-     * Empty, reserved for possible future enhancements on keyup for select.
-     */
-    protected _onSelectKeyUp(): void;
     _getInitialValue(): string;
     clear(): void;
 }

package/dist/pd-select/PdSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdSelect.d.ts","sourceRoot":"","sources":["../../src/pd-select/PdSelect.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C;;GAEG;AACH,qBAAa,QAAS,SAAQ,kBAAkB;IAE9C,MAAM,EAAE,cAAc,EAAE,CAAM;IAE9B,OAAgB,MAAM,EAAE,cAAc,CA0DpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWhD,MAAM;IAoCf,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK;IAItC;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAIvB,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}
+{"version":3,"file":"PdSelect.d.ts","sourceRoot":"","sources":["../../src/pd-select/PdSelect.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,QAAS,SAAQ,kBAAkB;IAC9C,mDAAmD;IAEnD,MAAM,EAAE,cAAc,EAAE,CAAM;IAE9B,OAAgB,MAAM,EAAE,cAAc,CA4DpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAchD,MAAM;IAyCf,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK;IAI7B,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-select/PdSelect.js

@@ -23,13 +23,14 @@ class PdSelect extends PdBaseInputElement {
     this.styles = [
       PdBaseInputElement.styles,
       css`
+      /* SVG arrow color #067394 is hardcoded in data URI - matches --pd-default-col */
       .select-css {
         display: block;
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
-        padding: 5px;
-        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+        padding: var(--pd-input-field-padding, 0.25rem);
+        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23067394%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
         background-repeat: no-repeat, repeat;
         background-position:
           right 0.5em top 50%,
@@ -51,7 +52,7 @@ class PdSelect extends PdBaseInputElement {
 
       .gradient {
         background-image:
-          url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
+          url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23067394%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
           linear-gradient(
             to bottom,
             var(--my-background-gradient-color),
@@ -60,13 +61,14 @@ class PdSelect extends PdBaseInputElement {
         background-color: var(--my-background-color);
       }
 
+      /* SVG arrow color is hardcoded in data URI - uses disabled gray for error state */
       .error .gradient {
         background-image:
-          url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
+          url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23878787%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
           linear-gradient(
             to bottom,
             var(--my-background-gradient-color) 10%,
-            #f5979b 100%
+            var(--pd-default-error-light-col) 100%
           );
         background-repeat: no-repeat, repeat;
         background-position:
@@ -81,13 +83,14 @@ class PdSelect extends PdBaseInputElement {
     ];
   }
   update(changedProps) {
-    if (changedProps.has("values") && this.values?.length > 0 && !this.initValue) {
+    if (changedProps.has("values") && this.values?.length > 0 && !this.initValue && !this._value) {
       this._value = this.values[0].value;
     }
     super.update(changedProps);
   }
   render() {
     const selectId = `${this.id}Select`;
+    const errorId = `${this.id}Error`;
     return html`
       ${this._renderLabel(selectId)}
       <div
@@ -98,36 +101,35 @@ class PdSelect extends PdBaseInputElement {
     )}"
       >
         <select
-          id=${selectId}
+          id="${selectId}"
           class="input-style select-css ${this.gradient ? "gradient" : ""}"
-          ?disabled=${this.disabled}
-          name=${this.name || this.valueName || this.autoCompleteName}
-          autocomplete=${this.autoCompleteName ?? "off"}
-          @change=${this._onSelectChange}
-          @keyup=${this._onSelectKeyUp}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
+          ?disabled="${this.disabled}"
+          name="${this.name || this.valueName || this.autoCompleteName}"
+          autocomplete="${this.autoCompleteName ?? "off"}"
+          aria-invalid="${this._invalid}"
+          aria-describedby="${this._errorMsg ? errorId : ""}"
+          @change="${this._onSelectChange}"
+          @blur="${this._onBlur}"
+          @focus="${this._onFocus}"
         >
           ${this.values.map(
       (val) => html`
-              <option value=${val.value} ?selected=${this._value == val.value}>
+              <option
+                value="${val.value}"
+                ?selected="${String(this._value) === String(val.value)}"
+              >
                 ${val.name}
               </option>
             `
     )}
         </select>
       </div>
-      ${this._renderErrorMsg()}
+      ${this._renderErrorMsg(errorId)}
     `;
   }
   _onSelectChange(event) {
     this._handleChangedValue(this._input.value, event, true);
   }
-  /**
-   * Empty, reserved for possible future enhancements on keyup for select.
-   */
-  _onSelectKeyUp() {
-  }
   _getInitialValue() {
     return this.initValue || this.values[0]?.value || "";
   }