@progressive-development/pd-forms 0.9.2 → 1.0.0

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

@@ -1,37 +1,58 @@
-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 { PdSelectOption } from '../types.js';
+/**
+ * Story arguments interface for pd-select component.
+ * Defines all configurable properties available in Storybook controls.
+ */
+interface PdSelectArgs {
+    /** Label text displayed above the select */
+    label: string;
+    /** Array of options to display in the select */
+    values: PdSelectOption[];
+    /** Initially selected value */
+    initValue: string;
+    /** Whether the select is disabled */
+    disabled: boolean;
+    /** Whether the select is read-only */
+    readonly: boolean;
+    /** Whether a selection is required */
+    required: boolean;
+    /** Helper text displayed below the select */
+    helperTxt: string;
+    /** Apply gradient background styling */
+    gradient: boolean;
+    /** The name attribute for form submission */
+    valueName: string;
+}
+/**
+ * ## pd-select
+ *
+ * A styled select dropdown component for single-option selection.
+ *
+ * ### Features
+ * - **Native Select**: Uses native HTML select for accessibility and mobile support
+ * - **Custom Styling**: Styled dropdown arrow and consistent appearance across browsers
+ * - **Gradient Option**: Optional gradient background styling
+ * - **Form Integration**: Works with `pd-form-container` for validation
+ * - **Label Support**: Optional label with required indicator
+ * - **Helper Text**: Hover icon with additional information
+ *
+ * ### Accessibility
+ * - Native select element for full keyboard and screen reader support
+ * - Mobile-friendly with native picker on touch devices
+ * - Required field indication with asterisk
+ */
+declare const meta: Meta<PdSelectArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Select: Story;
+type Story = StoryObj<PdSelectArgs>;
+/** Default select with label. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All select states at a glance. */
+export declare const AllVariants: Story;
+/** Required select with form validation — demonstrates error state on empty submit. */
+export declare const RequiredValidation: Story;
+/** Select with many options — demonstrates native scroll behavior. */
+export declare const ManyOptions: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-select.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-select.stories.d.ts","sourceRoot":"","sources":["../../src/pd-select/pd-select.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,gBAAgB,CAAC;AACxB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAGvC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAqDpB,CAAC"}
+{"version":3,"file":"pd-select.stories.d.ts","sourceRoot":"","sources":["../../src/pd-select/pd-select.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,gBAAgB,CAAC;AACxB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7C;;;GAGG;AACH,UAAU,YAAY;IACpB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CA6F5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,iEAAiE;AACjE,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAMF,qCAAqC;AACrC,eAAO,MAAM,WAAW,EAAE,KAgEzB,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,kBAAkB,EAAE,KAiChC,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,KAsCzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA0G3B,CAAC"}

package/dist/pd-suggestion-box/PdSuggestionBox.d.ts

@@ -0,0 +1,74 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { SuggestedElement } from '../types.js';
+/**
+ * Autocomplete/suggestion input with async search support.
+ *
+ * @tagname pd-suggestion-box
+ * @summary Typeahead input with async search and suggestion panel.
+ *
+ * @event element-selected - Fired when a suggestion is selected.
+ * @event element-unselected - Fired when selection is cleared.
+ *
+ * @cssprop --pd-input-field-width - Input and panel width. Default: `300px`.
+ * @cssprop --pd-input-field-height - Input height. Default: `2.2rem`.
+ * @cssprop --pd-input-field-bg-col - Input background. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-input-field-border - Input border. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-input-field-border-bottom - Input bottom border. Default: `2px solid var(--pd-default-col)`.
+ * @cssprop --pd-radius-md - Input and panel border radius. Default: `0`.
+ * @cssprop --pd-input-label-col - Label color. Default: `var(--pd-default-font-title-col)`.
+ * @cssprop --pd-suggestion-panel-bg - Panel background. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-suggestion-panel-border - Panel border. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-suggestion-panel-shadow - Panel shadow. Default: `var(--pd-shadow-lg)`.
+ * @cssprop --pd-suggestion-item-hover-bg - Item hover background. Default: `var(--pd-default-hover-col)`.
+ * @cssprop --pd-suggestion-item-name-color - Item name color. Default: `var(--pd-default-font-col)`.
+ * @cssprop --pd-suggestion-item-subinfo-color - Item subinfo color. Default: `var(--pd-default-font-muted-col)`.
+ */
+export declare class PdSuggestionBox<T> extends LitElement {
+    /** Async function to fetch suggestions based on input. */
+    callFunction: (input: string) => Promise<SuggestedElement<T>[]>;
+    /** Allow creating new items when no results found. */
+    createNewEmptyItem: boolean;
+    /** Whether input is required. */
+    required: boolean;
+    /** Input label text. */
+    label: string;
+    /** Input placeholder text. */
+    placeholder: string;
+    /** Debounce delay in ms before triggering search. */
+    delayTime: number;
+    /** Minimum characters before searching. */
+    minCharsToSearch: number;
+    /** Maximum results to display. */
+    maxResult: number;
+    /** @ignore */
+    _selectedValue: string;
+    /** @ignore */
+    _currentSearchKey: string;
+    /** @ignore */
+    _loading: boolean;
+    /** @ignore */
+    _error: boolean;
+    /** @ignore */
+    _currentElements: SuggestedElement<T>[];
+    /** @ignore */
+    _localFilteredElements?: SuggestedElement<T>[];
+    /** @ignore */
+    _activeIndex: number;
+    /** @ignore */
+    private _timeoutRef;
+    static styles: CSSResultGroup;
+    disconnectedCallback(): void;
+    reset(): void;
+    private get _panelId();
+    private get _isPanelOpen();
+    private get _displayElements();
+    private get _activeOptionId();
+    render(): import('lit').TemplateResult<1>;
+    private _doSelection;
+    private _handleKeydown;
+    private _closePanel;
+    private _doChange;
+    private _createNewRecord;
+    private _unselectElement;
+}
+//# sourceMappingURL=PdSuggestionBox.d.ts.map

package/dist/pd-suggestion-box/PdSuggestionBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdSuggestionBox.d.ts","sourceRoot":"","sources":["../../src/pd-suggestion-box/PdSuggestionBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAO,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,OAAO,gCAAgC,CAAC;AAExC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,eAAe,CAAC,CAAC,CAAE,SAAQ,UAAU;IAChD,0DAA0D;IAE1D,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAI7D;IAEF,sDAAsD;IAEtD,kBAAkB,EAAE,OAAO,CAAS;IAEpC,iCAAiC;IAEjC,QAAQ,EAAE,OAAO,CAAS;IAE1B,wBAAwB;IAExB,KAAK,EAAE,MAAM,CAAM;IAEnB,8BAA8B;IAE9B,WAAW,EAAE,MAAM,CAAM;IAEzB,qDAAqD;IAErD,SAAS,EAAE,MAAM,CAAO;IAExB,2CAA2C;IAE3C,gBAAgB,EAAE,MAAM,CAAK;IAE7B,kCAAkC;IAElC,SAAS,EAAE,MAAM,CAAO;IAExB,cAAc;IAEd,cAAc,EAAE,MAAM,CAAM;IAE5B,cAAc;IAEd,iBAAiB,EAAE,MAAM,CAAM;IAE/B,cAAc;IAEd,QAAQ,EAAE,OAAO,CAAS;IAE1B,cAAc;IAEd,MAAM,EAAE,OAAO,CAAS;IAExB,cAAc;IAEd,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAM;IAE7C,cAAc;IAEd,sBAAsB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/C,cAAc;IAEd,YAAY,EAAE,MAAM,CAAM;IAE1B,cAAc;IACd,OAAO,CAAC,WAAW,CAAqB;IAExC,MAAM,CAAC,MAAM,EAOR,cAAc,CAAC;IAIX,oBAAoB,IAAI,IAAI;IAQrC,KAAK;IAUL,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,MAAM;IAkCN,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,cAAc;IAkDtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,SAAS;IAoEjB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;CAQzB"}

package/dist/pd-suggestion-box/PdSuggestionBox.js

@@ -0,0 +1,277 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { msg, str } from '@lit/localize';
+import { property, state } from 'lit/decorators.js';
+import '../pd-input/PdComboboxInput.js';
+import './PdSuggestionPanel.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 PdSuggestionBox extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.callFunction = async (_searchInput) => {
+      return Promise.resolve([]);
+    };
+    this.createNewEmptyItem = false;
+    this.required = false;
+    this.label = "";
+    this.placeholder = "";
+    this.delayTime = 800;
+    this.minCharsToSearch = 2;
+    this.maxResult = 100;
+    this._selectedValue = "";
+    this._currentSearchKey = "";
+    this._loading = false;
+    this._error = false;
+    this._currentElements = [];
+    this._activeIndex = -1;
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        position: relative;
+        --pd-input-field-width: 300px;
+      }
+    `
+    ];
+  }
+  /* class="${classMap({"panel-show": this._showPanel})}" */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._timeoutRef) {
+      window.clearTimeout(this._timeoutRef);
+      this._timeoutRef = void 0;
+    }
+  }
+  reset() {
+    this._selectedValue = "";
+    this._currentElements = [];
+    this._currentSearchKey = "";
+    this._localFilteredElements = void 0;
+    this._loading = false;
+    this._error = false;
+    this._activeIndex = -1;
+  }
+  get _panelId() {
+    return `${this.id || "suggestion"}-listbox`;
+  }
+  get _isPanelOpen() {
+    return this._displayElements.length > 0 || this._loading;
+  }
+  get _displayElements() {
+    return this._localFilteredElements || this._currentElements;
+  }
+  get _activeOptionId() {
+    if (this._activeIndex >= 0 && this._activeIndex < this._displayElements.length) {
+      return `option-${this._displayElements[this._activeIndex].id}`;
+    }
+    return void 0;
+  }
+  render() {
+    return html`
+      <pd-combobox-input
+        id="searchInputId"
+        label="${this.label}"
+        placeholder="${this.placeholder}"
+        icon-right
+        icon="searchIcon"
+        initValue="${this._selectedValue}"
+        ?expanded="${this._isPanelOpen}"
+        ariaControls="${this._panelId}"
+        ariaAutocomplete="list"
+        ariaActivedescendant="${this._activeOptionId ?? ""}"
+        @pd-form-element-change="${this._doChange}"
+        @keydown="${this._handleKeydown}"
+        ?required="${this.required}"
+      ></pd-combobox-input>
+      <pd-suggestion-panel
+        id="${this._panelId}"
+        ?loading="${this._loading}"
+        .displayElements="${this._displayElements}"
+        .activeIndex="${this._activeIndex}"
+        @element-selected="${this._doSelection}"
+      ></pd-suggestion-panel>
+      ${this._error ? html`<p>
+            ${msg("Technischer Fehler bei der Suche", {
+      id: "pd.suggestion.box.error.txt"
+    })}
+          </p>` : nothing}
+    `;
+  }
+  _doSelection(e) {
+    if (this._timeoutRef) {
+      window.clearTimeout(this._timeoutRef);
+      this._timeoutRef = void 0;
+    }
+    const selectedEl = e.detail;
+    this._selectedValue = selectedEl.name || selectedEl.label || selectedEl.id;
+    this._closePanel();
+  }
+  _handleKeydown(e) {
+    const elements = this._displayElements;
+    switch (e.key) {
+      case "ArrowDown":
+        if (this._isPanelOpen && elements.length > 0) {
+          e.preventDefault();
+          this._activeIndex = Math.min(
+            this._activeIndex + 1,
+            elements.length - 1
+          );
+        }
+        break;
+      case "ArrowUp":
+        if (this._isPanelOpen && elements.length > 0) {
+          e.preventDefault();
+          if (this._activeIndex <= 0) {
+            this._activeIndex = -1;
+          } else {
+            this._activeIndex = this._activeIndex - 1;
+          }
+        }
+        break;
+      case "Enter":
+        if (this._activeIndex >= 0 && this._activeIndex < elements.length) {
+          e.preventDefault();
+          const selectedEl = elements[this._activeIndex];
+          this._selectedValue = selectedEl.name || selectedEl.id;
+          this._closePanel();
+          this.dispatchEvent(
+            new CustomEvent("element-selected", {
+              detail: selectedEl.objectValue || selectedEl,
+              bubbles: true,
+              composed: true
+            })
+          );
+        }
+        break;
+      case "Escape":
+        if (this._isPanelOpen) {
+          e.preventDefault();
+          this._closePanel();
+        }
+        break;
+    }
+  }
+  _closePanel() {
+    this._currentSearchKey = "";
+    this._currentElements = [];
+    this._localFilteredElements = void 0;
+    this._activeIndex = -1;
+  }
+  _doChange(e) {
+    this._unselectElement();
+    if (this._timeoutRef) {
+      window.clearTimeout(this._timeoutRef);
+    }
+    this._activeIndex = -1;
+    if (e.detail.value === "") {
+      this._currentElements = [];
+      this._currentSearchKey = "";
+      this._localFilteredElements = void 0;
+      this._loading = false;
+      this._error = false;
+    } else if (this._currentSearchKey !== "" && e.detail.value.startsWith(this._currentSearchKey)) {
+      this._localFilteredElements = this._currentElements.filter(
+        (ce) => ce.name && ce.name.toLowerCase().replaceAll(" ", "").includes(e.detail.value.toLowerCase().replaceAll(" ", "")) || ce.subInfo && ce.subInfo.toLowerCase().includes(e.detail.value.toLowerCase())
+      );
+      if (this.createNewEmptyItem && this._localFilteredElements.length === 0) {
+        this._localFilteredElements = [this._createNewRecord(e)];
+      }
+    } else if (e.detail.value.length >= this.minCharsToSearch) {
+      this._loading = true;
+      this._currentElements = [];
+      this._localFilteredElements = void 0;
+      this._timeoutRef = window.setTimeout(() => {
+        this.callFunction(e.detail.value).then((result) => {
+          this._currentSearchKey = e.detail.value;
+          this._loading = false;
+          this._localFilteredElements = void 0;
+          this._currentElements = result;
+          this._timeoutRef = void 0;
+          if (this.createNewEmptyItem && this._currentElements.length === 0) {
+            this._currentElements = [this._createNewRecord(e)];
+          }
+        }).catch((error) => {
+          console.error("Error during suggestion search", error);
+          this._loading = false;
+          this._error = true;
+          this._currentElements = [];
+          this._localFilteredElements = void 0;
+        });
+      }, this.delayTime);
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
+  _createNewRecord(e) {
+    return {
+      id: "NEW",
+      name: msg(str`"${e.detail.value}" neu anlegen`, {
+        id: "pd.suggestion.box.add.new"
+      }),
+      createNew: e.detail.value
+    };
+  }
+  _unselectElement() {
+    this.dispatchEvent(
+      new CustomEvent("element-unselected", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], PdSuggestionBox.prototype, "callFunction");
+__decorateClass([
+  property({ type: Boolean })
+], PdSuggestionBox.prototype, "createNewEmptyItem");
+__decorateClass([
+  property({ type: Boolean })
+], PdSuggestionBox.prototype, "required");
+__decorateClass([
+  property({ type: String })
+], PdSuggestionBox.prototype, "label");
+__decorateClass([
+  property({ type: String })
+], PdSuggestionBox.prototype, "placeholder");
+__decorateClass([
+  property({ type: Number })
+], PdSuggestionBox.prototype, "delayTime");
+__decorateClass([
+  property({ type: Number })
+], PdSuggestionBox.prototype, "minCharsToSearch");
+__decorateClass([
+  property({ type: Number })
+], PdSuggestionBox.prototype, "maxResult");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_selectedValue");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_currentSearchKey");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_loading");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_error");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_currentElements");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_localFilteredElements");
+__decorateClass([
+  state()
+], PdSuggestionBox.prototype, "_activeIndex");
+
+export { PdSuggestionBox };

package/dist/pd-suggestion-box/PdSuggestionPanel.d.ts

@@ -0,0 +1,42 @@
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { SuggestedElement } from '../types';
+/**
+ * Dropdown panel displaying suggestion results.
+ *
+ * @tagname pd-suggestion-panel
+ *
+ * @property {boolean} loading - Whether data is loading.
+ * @property {SuggestedElement[]} displayElements - Suggestions to display.
+ *
+ * @event element-selected - Fired when a suggestion is clicked.
+ *
+ * @cssprop --pd-input-field-width - Panel width. Default: inherits from parent.
+ * @cssprop --pd-suggestion-panel-bg - Panel background color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-suggestion-panel-bg-gradient - Panel gradient background. Default: `linear-gradient(...)`.
+ * @cssprop --pd-suggestion-panel-border - Panel border. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-suggestion-panel-shadow - Panel shadow. Default: `var(--pd-shadow-lg)`.
+ * @cssprop --pd-suggestion-panel-max-height - Panel max height. Default: `15em`.
+ * @cssprop --pd-suggestion-item-hover-bg - Item hover background. Default: `var(--pd-default-hover-col)`.
+ * @cssprop --pd-suggestion-item-hover-border - Item hover border. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-suggestion-item-padding - Item padding. Default: `0.5em`.
+ * @cssprop --pd-suggestion-item-name-color - Item name color. Default: `var(--pd-default-font-col)`.
+ * @cssprop --pd-suggestion-item-name-size - Item name font size. Default: `var(--pd-default-font-input-size)`.
+ * @cssprop --pd-suggestion-item-subinfo-color - Item subinfo color. Default: `var(--pd-default-font-muted-col)`.
+ * @cssprop --pd-suggestion-item-subinfo-size - Item subinfo font size. Default: `0.875rem`.
+ * @cssprop --pd-suggestion-loader-color - Loader border color. Default: `var(--pd-default-dark-col)`.
+ * @cssprop --pd-suggestion-loader-active-color - Loader active color. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-suggestion-panel-z-index - Panel z-index. Default: `1000`.
+ * @cssprop --pd-suggestion-item-focus-outline - Focus outline color for keyboard navigation. Default: `var(--pd-default-col, #067394)`.
+ */
+declare class PdSuggestionPanel<T> extends LitElement {
+    loading: boolean;
+    displayElements: SuggestedElement<T>[];
+    activeIndex: number;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    private _scrollActiveIntoView;
+    private _selectElement;
+}
+export { PdSuggestionPanel };
+//# sourceMappingURL=PdSuggestionPanel.d.ts.map

package/dist/pd-suggestion-box/PdSuggestionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdSuggestionPanel.d.ts","sourceRoot":"","sources":["../../src/pd-suggestion-box/PdSuggestionPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAEV,cAAc,EAEd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,cAAM,iBAAiB,CAAC,CAAC,CAAE,SAAQ,UAAU;IAE3C,OAAO,EAAE,OAAO,CAAS;IAGzB,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAM;IAG5C,WAAW,EAAE,MAAM,CAAM;IAEzB,MAAM,CAAC,MAAM,EAoIR,cAAc,CAAC;IAEpB,MAAM;cAyCa,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMnE,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,cAAc;CAavB;AAOD,OAAO,EAAE,iBAAiB,EAAE,CAAC"}