@progressive-development/pd-forms 0.0.13 → 0.0.15

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-icon": "0.0.4",
+    "@progressive-development/pd-icon": "0.0.6",
     "lit": "^2.0.0-rc.4",
     "@lit-labs/motion": "^1.0.0-rc.2"
   },

package/pd-button-goup.js

@@ -0,0 +1,3 @@
+import { PdButtonGroup } from './src/PdButtonGroup.js';
+
+customElements.define('pd-button-group', PdButtonGroup);

package/pd-button.js

@@ -0,0 +1,3 @@
+import { PdButton } from './src/PdButton.js';
+
+window.customElements.define('pd-button', PdButton);

package/pd-checkbox.js

@@ -0,0 +1,3 @@
+import { PdCheckbox } from './src/PdCheckbox.js';
+
+window.customElements.define('pd-checkbox', PdCheckbox);

package/pd-form-container.js

@@ -0,0 +1,3 @@
+import { PdFormContainer } from './src/PdFormContainer.js';
+
+window.customElements.define('pd-form-container', PdFormContainer);

package/pd-form-row.js

@@ -0,0 +1,3 @@
+import { PdFormRow } from './src/PdFormRow.js';
+
+window.customElements.define('pd-form-row', PdFormRow);

package/pd-input-area.js

@@ -0,0 +1,3 @@
+import { PdInputArea } from './src/PdInputArea.js';
+
+window.customElements.define('pd-input-area', PdInputArea);

package/pd-input.js

@@ -0,0 +1,3 @@
+import { PdInput } from './src/PdInput.js';
+
+window.customElements.define('pd-input', PdInput);

package/pd-label-value.js

@@ -0,0 +1,3 @@
+import { PdLabelValue } from './src/PdLabelValue.js';
+
+window.customElements.define('pd-label-value', PdLabelValue);

package/pd-radio-group.js

@@ -0,0 +1,3 @@
+import { PdRadioGroup } from './src/PdRadioGroup.js';
+
+window.customElements.define('pd-radio-group', PdRadioGroup);

package/pd-select.js

@@ -0,0 +1,3 @@
+import { PdSelect } from './src/PdSelect.js';
+
+window.customElements.define('pd-select', PdSelect);

package/src/{squi-base-ui.js → PdBaseUi.js}

@@ -5,7 +5,7 @@
 
 import { LitElement } from 'lit';
 
-export class SquiBaseUI extends LitElement {
+export class PdBaseUI extends LitElement {
 
     static get properties() {
         return {

package/src/{squi-base-ui-input.js → PdBaseUiInput.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { SquiBaseUI } from './squi-base-ui.js';
+import { PdBaseUI } from './PdBaseUi.js';
 
 export const INPUT_TYPE_TEXT = 1;
 export const INPUT_TYPE_SELECT = 2;
@@ -11,7 +11,7 @@ export const INPUT_TYPE_CHECK = 3;
 export const INPUT_TYPE_RANGE = 4;
 export const INPUT_TYPE_AREA = 5;
 
-export class SquiBaseUIInput extends SquiBaseUI {
+export class PdBaseUIInput extends PdBaseUI {
 
     static get properties() {
         return {            

package/src/{squi-button.js → PdButton.js}

@@ -7,7 +7,7 @@ import { html, css , LitElement } from 'lit';
 
 import { SharedInputStyles } from './shared-input-styles.js';
 
-export class SquiButton extends LitElement {
+export class PdButton extends LitElement {
 
   static get styles() {
     return [  
@@ -117,23 +117,23 @@ export class SquiButton extends LitElement {
         align-items: center;
         justify-content: center;
         white-space: nowrap;
-        --squi-icon-fill: var(--icon-fill-light);
-        --squi-icon-fill-hover: var(--icon-fill-light);
+        --pd-icon-fill: var(--icon-fill-light);
+        --pd-icon-fill-hover: var(--icon-fill-light);
       }
       
       .button-icon:not([disabled]) {
-        --squi-icon-fill: var(--app-primary-color);
-        --squi-icon-fill-hover: var(--app-primary-color-dark);
+        --pd-icon-fill: var(--app-primary-color);
+        --pd-icon-fill-hover: var(--app-primary-color-dark);
       }
 
-      .button-icon squi-icon {
+      .button-icon pd-icon {
         max-width: 1.25rem;
         height: 1.25rem;
         width: 1.25rem;
         margin: 0 .15rem;
       }
 
-      .button-icon.small squi-icon {
+      .button-icon.small pd-icon {
         max-width: 1.25rem;
         height: 1.25rem;
         width: 1.25rem;
@@ -148,16 +148,16 @@ export class SquiButton extends LitElement {
           fill: var(--app-primary-color);
       }
       
-      .button-icon:hover squi-icon,    
+      .button-icon:hover pd-icon,    
       .button-icon:hover svg {
           fill: var(--app-primary-color);
       }            
 
       @media (min-width: 580px) {        
-        .button-icon squi-icon {
+        .button-icon pd-icon {
             margin: 0 .5rem;
         }        
-        .button-icon.small squi-icon {
+        .button-icon.small pd-icon {
             padding-right: .5rem;
         }
       }

package/src/{squi-button-group.js → PdButtonGroup.js}

@@ -6,10 +6,10 @@
 import { html, css , LitElement } from 'lit';
 
 import { SharedInputStyles } from './shared-input-styles.js';
-import './squi-button.js';
+import '../pd-button.js';
 
 
-export class SquiButtonGroup extends LitElement {
+export class PdButtonGroup extends LitElement {
 
   static get styles() {
     return [  
@@ -46,7 +46,7 @@ export class SquiButtonGroup extends LitElement {
     return html`
     <div class="button-group">
       ${this.buttons.map(entry => html`
-        <squi-button text="${entry.text}" style="visibility: ${entry.visibility};"></squi-button>
+        <pd-button text="${entry.text}" style="visibility: ${entry.visibility};"></pd-button>
       `)}
     </div>
     `;

package/src/{squi-checkbox.js → PdCheckbox.js}

@@ -9,12 +9,12 @@ import { classMap } from 'lit/directives/class-map.js';
 // import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 
 import '@progressive-development/pd-icon';
-import { SquiBaseUIInput, INPUT_TYPE_CHECK } from "./squi-base-ui-input.js";
+import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
 
 
 // import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
 
-export class SquiCheckbox extends SquiBaseUIInput {
+export class PdCheckbox extends PdBaseUIInput {
   static get properties() {
     return {      
       hasInner: { type: Boolean },
@@ -54,7 +54,7 @@ export class SquiCheckbox extends SquiBaseUIInput {
 
 
 
-        /* TODO vars used in squi-icon */
+        /* TODO vars used in pd-icon */
         --squi-checkbox-checked-color: var(--my-primary);
         --squi-checkbox-unchecked-color: var(--my-ligth);
         --squi-checkbox-bg: var(--my-dark);
@@ -63,21 +63,21 @@ export class SquiCheckbox extends SquiBaseUIInput {
 
         --squi-checkbox-label-disabled-color:  var(--app-copy-color, #303030);
 
-        /* Checkbox squi-icon */
-        --squi-icon-fill: var(--my-icon-bg-color);
-        --squi-icon-bg: var(--my-icon-fill);
-        --squi-icon-fill-active: var(--my-icon-bg-active-color);
-        --squi-icon-bg-active: var(--my-icon-active-fill);
+        /* Checkbox pd-icon */
+        --pd-icon-fill: var(--my-icon-bg-color);
+        --pd-icon-bg: var(--my-icon-fill);
+        --pd-icon-fill-active: var(--my-icon-bg-active-color);
+        --pd-icon-bg-active: var(--my-icon-active-fill);
 
         display: inline-block;
         font-size: .8rem;
       }
-      /* Switch squi-icon */
+      /* Switch pd-icon */
       :host([isSwitch]) {
-          --squi-icon-fill: var(--my-icon-fill);
-          --squi-icon-bg: var(--my-icon-bg-color);
-          --squi-icon-fill-active: var(--my-icon-active-fill);
-          --squi-icon-bg-active: var(--my-icon-bg-active-color);
+          --pd-icon-fill: var(--my-icon-fill);
+          --pd-icon-bg: var(--my-icon-bg-color);
+          --pd-icon-fill-active: var(--my-icon-active-fill);
+          --pd-icon-bg-active: var(--my-icon-bg-active-color);
       }
       div {
         display: flex;
@@ -98,7 +98,7 @@ export class SquiCheckbox extends SquiBaseUIInput {
         align-items: center;
         justify-content: center;
       }
-      .checkbox squi-icon {
+      .checkbox pd-icon {
         margin: .25rem;
       }
       .label {
@@ -145,16 +145,16 @@ export class SquiCheckbox extends SquiBaseUIInput {
     min-width: 2rem;
     background: none;
 
-    --squi-icon-bg: transparent;
-    --squi-icon-fill: var(--card-dark-red);
-    --squi-icon-fill-hover: var(--squi-icon-fill);
-    --squi-icon-fill-active: var(--card-medium-green);
+    --pd-icon-bg: transparent;
+    --pd-icon-fill: var(--card-dark-red);
+    --pd-icon-fill-hover: var(--pd-icon-fill);
+    --pd-icon-fill-active: var(--card-medium-green);
   }
-  .readonly .isChecked.switch-paddle squi-icon {
+  .readonly .isChecked.switch-paddle pd-icon {
     transform: translate3d(0, 0, 0);
     left: 0.25rem;
   }
-  .switch-paddle squi-icon {
+  .switch-paddle pd-icon {
       position: absolute;
       top: 0.25rem;
       left: 0.25rem;
@@ -168,7 +168,7 @@ export class SquiCheckbox extends SquiBaseUIInput {
       transition: all 0.25s ease-out;
       content: '';
   }
-  .isChecked.switch-paddle squi-icon {
+  .isChecked.switch-paddle pd-icon {
       left: 2.25rem;
   }
 
@@ -211,7 +211,7 @@ export class SquiCheckbox extends SquiBaseUIInput {
     return html`<div @click="${this.onClick}" class="${classMap({'disabled': this.disabled, 'switch': this.isSwitch, 'readonly': this.readonly})}">
         <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}"
            class="${classMap({'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked})}">
-           <squi-icon icon="checkBox" class="${classMap({'switch': this.isSwitch, 'checkBox': !this.isSwitch})}" ?activeIcon="${checked}"></squi-icon>           
+           <pd-icon icon="checkBox" class="${classMap({'switch': this.isSwitch, 'checkBox': !this.isSwitch})}" ?activeIcon="${checked}"></pd-icon>           
         </a>
         ${this.hasInner
           ? html`<span class="label">

package/src/{squi-form-container.js → PdFormContainer.js}

@@ -11,7 +11,7 @@ import {LitElement, html, css} from 'lit';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class SquiFormContainer extends LitElement {
+export class PdFormContainer extends LitElement {
 
   static get styles() {
     return css`

package/src/{squi-form-row.js → PdFormRow.js}

@@ -11,7 +11,7 @@ import {LitElement, html, css} from 'lit';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class SquiFormRow extends LitElement {
+export class PdFormRow extends LitElement {
 
   static get styles() {
     return css`

package/src/{squi-input.js → PdInput.js}

@@ -7,7 +7,7 @@ import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SharedInputStyles } from './shared-input-styles.js';
 
-import { SquiBaseUIInput, INPUT_TYPE_TEXT } from './squi-base-ui-input.js';
+import { PdBaseUIInput, INPUT_TYPE_TEXT } from './PdBaseUiInput.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
@@ -39,34 +39,34 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
  *
- *     <squi-input icon-left></squi-input>
- *     <squi-input icon-right></squi-input>
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
  *
- *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
  *
  * Text can be left or right aligned. Default is left alignment.
  *
- *     <squi-input text-right></squi-input>
- *     <squi-input text-left></squi-input>
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
  */
-export class SquiInput extends SquiBaseUIInput {
+export class PdInput extends PdBaseUIInput {
   /**
-   * Fired when `squi-input` has focus and the user press `Enter` key.
+   * Fired when `pd-input` has focus and the user press `Enter` key.
    * @event enter-pressed
    */
 
   /**
-   * Fired when `squi-input` has focus and the user press any key except `Enter`.
+   * Fired when `pd-input` has focus and the user press any key except `Enter`.
    * @event key-pressed
    */
 
   /**
-   * Fire when the `squi-input` loses focus.
+   * Fire when the `pd-input` loses focus.
    * @event focus-lost
    */
 
   /**
-   * Fire when the icon inside `squi-input` is clicked.
+   * Fire when the icon inside `pd-input` is clicked.
    * @event icon-clicked
    */
 
@@ -85,10 +85,10 @@ export class SquiInput extends SquiBaseUIInput {
     return {
       key: { type: String }, // Test, wird für das setzten der Error Msg benötigt
 
-      /** Placeholder for `squi-input` initial text. */
+      /** Placeholder for `pd-input` initial text. */
       placeHolder: { type: String },
       /**
-       * Icon to be shown inside `squi-input`.
+       * Icon to be shown inside `pd-input`.
        */
       icon: { type: String },
       secret: { type: Boolean }, // True for type password
@@ -110,10 +110,10 @@ export class SquiInput extends SquiBaseUIInput {
     return html`
       <label for="${this.id}Input">${this.label}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
-        <squi-icon
+        <pd-icon
           icon="toggleCollapse"
           @click="${this._onIconClick}"
-        ></squi-icon>
+        ></pd-icon>
         <input
           id="${this.id}Input"
           class="input-style ${this.gradient ? 'gradient' : ''}"

package/src/{squi-input-area.js → PdInputArea.js}

@@ -7,7 +7,7 @@ import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SharedInputStyles } from './shared-input-styles.js';
 
-import { SquiBaseUIInput, INPUT_TYPE_AREA } from './squi-base-ui-input.js';
+import { PdBaseUIInput, INPUT_TYPE_AREA } from './PdBaseUiInput.js';
 
 
 import '@progressive-development/pd-icon/pd-icon.js';
@@ -40,35 +40,35 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
  *
- *     <squi-input icon-left></squi-input>
- *     <squi-input icon-right></squi-input>
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
  *
- *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
  *
  * Text can be left or right aligned. Default is left alignment.
  *
- *     <squi-input text-right></squi-input>
- *     <squi-input text-left></squi-input>
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
  */
-export class SquiInputArea extends SquiBaseUIInput {
+export class PdInputArea extends PdBaseUIInput {
 
   /**
-   * Fired when `squi-input-area` has focus and the user press `Enter` key.
+   * Fired when `pd-input-area` has focus and the user press `Enter` key.
    * @event enter-pressed
    */
 
   /**
-   * Fired when `squi-input-area` has focus and the user press any key except `Enter`.
+   * Fired when `pd-input-area` has focus and the user press any key except `Enter`.
    * @event key-pressed
    */
 
   /**
-   * Fire when the `squi-input-area` loses focus.
+   * Fire when the `pd-input-area` loses focus.
    * @event focus-lost
    */
 
   /**
-   * Fire when the icon inside `squi-input-area` is clicked.
+   * Fire when the icon inside `pd-input-area` is clicked.
    * @event icon-clicked
    */
 
@@ -116,8 +116,8 @@ export class SquiInputArea extends SquiBaseUIInput {
     return html`
     <label for="${this.id}InputArea">${this.label}</label>
     <div class="input ${classMap({'error': this.errorMsg.length > 0})}">
-      <squi-icon icon="toggleCollapse" 
-        @click="${this._onIconClick}"></squi-icon>
+      <pd-icon icon="toggleCollapse" 
+        @click="${this._onIconClick}"></pd-icon>
       <textarea
         id="${this.id}InputArea"        
         class="input-style ${this.gradient ? 'gradient' : ''}"

package/src/PdLabelValue.js

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+
+import {LitElement, html, css} from 'lit';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdLabelValue extends LitElement {
+
+  static get styles() {
+    return css`
+    :host {
+
+      --my-label-color: var(--squi-background-color, #24a3b9);
+      --my-label-font: var(--squi-background-color, #24a3b9);
+      
+      --my-value-color: var(--squi-background-hover-color, #23636e);
+      --my-value-font: var(--squi-background-hover-color, #23636e);
+
+        display: block;        
+      }
+
+      .container {
+
+      }
+
+      .label {
+
+      }
+
+      .value {
+
+      }
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      label: {type: String},
+      value: {type: String}
+    };
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.value = '';
+  }
+
+  render() {
+    return html`
+      <div class="container">
+        <span class="label">${this.label}</span>
+        <span class="value">${this.value}</span>
+      </div>
+    `;
+  }
+
+}

package/src/{squi-radio-group.js → PdRadioGroup.js}

@@ -13,7 +13,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class SquiRadioGroup extends LitElement {
+export class PdRadioGroup extends LitElement {
 
   static get styles() {
     return [
@@ -52,7 +52,7 @@ export class SquiRadioGroup extends LitElement {
   }
 
   get value() {
-    const elColl = this.getElementsByTagName('squi-checkbox');          
+    const elColl = this.getElementsByTagName('pd-checkbox');          
     let returnVal;
     Object.keys(elColl).forEach(keyValue => {              
       if (elColl[keyValue].value === 'true') {        
@@ -66,7 +66,7 @@ export class SquiRadioGroup extends LitElement {
 
     // add event listener
     this.addEventListener('checkbox-changed', (e) => {
-      const elCollection = this.getElementsByTagName('squi-checkbox');      
+      const elCollection = this.getElementsByTagName('pd-checkbox');      
       Object.keys(elCollection).forEach(keyValue => {                
         if (elCollection[keyValue] !== e.target) {
           elCollection[keyValue].value = false;          
@@ -78,7 +78,7 @@ export class SquiRadioGroup extends LitElement {
     });
 
     // set default
-    const elColl = this.getElementsByTagName('squi-checkbox');      
+    const elColl = this.getElementsByTagName('pd-checkbox');      
       Object.keys(elColl).forEach(keyValue => {        
         elColl[keyValue].readonly = elColl[keyValue].value === 'true';        
       });

package/src/{squi-select.js → PdSelect.js}

@@ -7,7 +7,7 @@ import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SharedInputStyles } from './shared-input-styles.js';
 
-import { SquiBaseUIInput, INPUT_TYPE_SELECT } from './squi-base-ui-input.js';
+import { PdBaseUIInput, INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
@@ -39,17 +39,17 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
  *
- *     <squi-input icon-left></squi-input>
- *     <squi-input icon-right></squi-input>
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
  *
- *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
  *
  * Text can be left or right aligned. Default is left alignment.
  *
- *     <squi-input text-right></squi-input>
- *     <squi-input text-left></squi-input>
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
  */
-export class SquiSelect extends SquiBaseUIInput {
+export class PdSelect extends PdBaseUIInput {
   /**
    * Fired when `squi-input` has focus and the user press `Enter` key.
    * @event enter-pressed
@@ -202,10 +202,10 @@ export class SquiSelect extends SquiBaseUIInput {
     return html`
       <label for="${this.id}Select">${this.label}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
-        <squi-icon
+        <pd-icon
           icon="toggleCollapse"
           @click="${this._onIconClick}"
-        ></squi-icon>
+        ></pd-icon>
         <select
           id="${this.id}Input"
           class="select-css input-style ${this.gradient ? 'gradient' : ''}"

package/src/shared-input-styles.js

@@ -45,8 +45,8 @@ export const SharedInputStyles = css`
   .input {
     display: inline-block;
     /*position: relative; Prüfen: Wennd as an ist, felder über scroll-menu?*/
-    /* squi-icon smaller than input */
-    --squi-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
+    /* pd-icon smaller than input */
+    --pd-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
 
     /* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
     padding-top: var(--squi-input-padding, 0.5rem);
@@ -55,28 +55,28 @@ export const SharedInputStyles = css`
     color: var(--my-error-color);
   }
   /* squi icon depends on input styles to fit inside */
-  squi-icon {
+  pd-icon {
     display: none;
     position: absolute;
-    --squi-icon-height: var(--squi-icon-computed-size, 2rem);
-    --squi-icon-width: var(--squi-icon-computed-size, 2rem);
-    --squi-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
-    --squi-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
+    --pd-icon-height: var(--pd-icon-computed-size, 2rem);
+    --pd-icon-width: var(--pd-icon-computed-size, 2rem);
+    --pd-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
+    --pd-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
   }
-  squi-icon:hover {
+  pd-icon:hover {
     cursor: pointer;
   }
   /* Display icon if it's positioned */
-  :host([icon-right]) .input squi-icon {
+  :host([icon-right]) .input pd-icon {
     display: inline-block;
     right: 0;
   }
-  :host([icon-left]) .input squi-icon {
+  :host([icon-left]) .input pd-icon {
     display: inline-block;
     left: 0;
   }
 
-  /* Padding space for squi-icon => Noch input spezifisch? */
+  /* Padding space for pd-icon => Noch input spezifisch? */
   :host([icon-right]) > input {
     padding-right: var(--my-input-height);
   }