@dile/ui 2.0.1

package/components/slide-show/src/DileSlideShow.js

@@ -0,0 +1,111 @@
+import { LitElement, html, css } from 'lit';
+import { DileSlideDown } from '../../../mixins/slide-down';
+
+export class DileSlideShow extends DileSlideDown(LitElement) {
+  static get properties() {
+    return {
+      _opened: { attribute: false },
+      targetHeight: { type: String },
+      showLabel: { type: String },
+      hideLabel: { type: String },
+    }
+  }
+
+  constructor() {
+    super();
+    this.targetHeight = '0px';
+    this._opened = false;
+    this.showLabel = "Open";
+    this.hideLabel = "Close";
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      .closed {
+        padding: 0px;
+        margin-bottom: 0px;
+      }
+      #content {
+        height: var(--dile-slide-down-initial-height, 0);
+        overflow: hidden;
+        transition: height 0.5s ease-in;
+        -webkit-transition: height 0.5s ease-in;
+        padding: 1px 0;
+      }
+      nav {
+        padding-top: 0.5em;
+        cursor: pointer;
+        text-align: var(--dile-slide-show-align-control, left);
+        font-size: var(--dile-slide-down-font-size, 1em);
+        color: var(--dile-slide-show-text-color, #39c);
+        font-weight: var(--dile-slide-show-font-weight, bold);
+        text-decoration: var(--dile-slide-show-text-decoration, none);
+      }
+      .showmoreopen span , .showmoreclose span{
+        position: relative;
+        padding: 10px;
+        left: 15px;
+      }
+      .showmoreopen span::before, .showmoreclose span::before {
+        content: '';
+        border-style: solid;
+        border-width: 8px 12px 8px 0;
+        border-color: transparent var(--dile-slide-show-icon-color, #39c);
+        position: absolute;
+        left: -15px;
+        top: 0.75em;
+        transition: transform ease 0.5s;
+        transition-delay: 0.5s;
+      }
+      .showmoreclose span::before {
+        transform: rotate(-90deg);
+      }
+
+      .showmoreopen span::before {
+        transform: rotate(90deg);
+      }
+    `;
+  }
+
+  render() {
+    return html`
+    <div id="content">
+      <slot></slot>
+    </div> 
+    <nav @click="${this.toggle}" class="${this._opened ? 'showmoreopen' : 'showmoreclose'}">
+      <span>
+        ${this._opened ? this.hideLabel : this.showLabel}
+      </span>
+    </nav>
+    `;
+  }
+
+  firstUpdated() {
+    this.content = this.shadowRoot.getElementById('content');
+  }
+
+  toggle() {
+    if (this._opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    if(! this._opened) {
+      this.slideShow(this.content, this.targetHeight);
+      this._opened = true;
+    }
+  }
+  
+  close() {
+    if(this._opened) {
+      this.slideHide(this.content, this.targetHeight);
+      this._opened = false;
+    }
+  }
+}

package/components/social-icon/index.js

@@ -0,0 +1 @@
+export { DileSocialIcon } from './src/DileSocialIcon.js';

package/components/social-icon/social-icon.js

@@ -0,0 +1,3 @@
+import { DileSocialIcon } from './src/DileSocialIcon.js';
+
+window.customElements.define('dile-social-icon', DileSocialIcon);

package/components/social-icon/src/DileSocialIcon.js

@@ -0,0 +1,63 @@
+import { LitElement, html, css } from 'lit';
+
+import { icons } from './icons.js';
+
+/**
+ * 
+ * # <social-icon>
+ * 
+ * Web component to create social icons, based on Lit.
+ * 
+ * The "icon" property is used to set the social network to display
+ * 
+ */
+
+
+export class DileSocialIcon extends LitElement {
+
+  static get properties() {
+    return {
+      icon: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+    this.icon = 'facebook';
+  }
+
+  static get styles() {
+    return css`
+      :host[hidden] { display: none; }
+      :host { 
+        display: inline-block;
+      }
+      path {
+        fill: var(--dile-social-icon-color, #888);
+      }
+      path[fill="none"] {
+        fill: transparent;
+      }
+      svg {
+        width: var(--dile-social-icon-size, 24px);
+        height: var(--dile-social-icon-size, 24px);
+      }
+      span {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+    <span>
+      ${this._getIcon(this.icon)}
+    </span>
+    `;
+  }
+
+  _getIcon(icon) {
+    return icons[icon];
+  }
+}

package/components/social-icon/src/icons.js

@@ -0,0 +1,103 @@
+import { html } from 'lit';
+
+export const icons = {
+  facebook: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 408.788 408.788">
+  <path d="M353.701,0H55.087C24.665,0,0.002,24.662,0.002,55.085v298.616c0,30.423,24.662,55.085,55.085,55.085
+  h147.275l0.251-146.078h-37.951c-4.932,0-8.935-3.988-8.954-8.92l-0.182-47.087c-0.019-4.959,3.996-8.989,8.955-8.989h37.882
+  v-45.498c0-52.8,32.247-81.55,79.348-81.55h38.65c4.945,0,8.955,4.009,8.955,8.955v39.704c0,4.944-4.007,8.952-8.95,8.955
+  l-23.719,0.011c-25.615,0-30.575,12.172-30.575,30.035v39.389h56.285c5.363,0,9.524,4.683,8.892,10.009l-5.581,47.087
+  c-0.534,4.506-4.355,7.901-8.892,7.901h-50.453l-0.251,146.078h87.631c30.422,0,55.084-24.662,55.084-55.084V55.085
+  C408.786,24.662,384.124,0,353.701,0z" /></svg>`,
+  twitter: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410.155 410.155">
+  <path d="M403.632,74.18c-9.113,4.041-18.573,7.229-28.28,9.537c10.696-10.164,18.738-22.877,23.275-37.067
+  l0,0c1.295-4.051-3.105-7.554-6.763-5.385l0,0c-13.504,8.01-28.05,14.019-43.235,17.862c-0.881,0.223-1.79,0.336-2.702,0.336
+  c-2.766,0-5.455-1.027-7.57-2.891c-16.156-14.239-36.935-22.081-58.508-22.081c-9.335,0-18.76,1.455-28.014,4.325
+  c-28.672,8.893-50.795,32.544-57.736,61.724c-2.604,10.945-3.309,21.9-2.097,32.56c0.139,1.225-0.44,2.08-0.797,2.481
+  c-0.627,0.703-1.516,1.106-2.439,1.106c-0.103,0-0.209-0.005-0.314-0.015c-62.762-5.831-119.358-36.068-159.363-85.14l0,0
+  c-2.04-2.503-5.952-2.196-7.578,0.593l0,0C13.677,65.565,9.537,80.937,9.537,96.579c0,23.972,9.631,46.563,26.36,63.032
+  c-7.035-1.668-13.844-4.295-20.169-7.808l0,0c-3.06-1.7-6.825,0.485-6.868,3.985l0,0c-0.438,35.612,20.412,67.3,51.646,81.569
+  c-0.629,0.015-1.258,0.022-1.888,0.022c-4.951,0-9.964-0.478-14.898-1.421l0,0c-3.446-0.658-6.341,2.611-5.271,5.952l0,0
+  c10.138,31.651,37.39,54.981,70.002,60.278c-27.066,18.169-58.585,27.753-91.39,27.753l-10.227-0.006
+  c-3.151,0-5.816,2.054-6.619,5.106c-0.791,3.006,0.666,6.177,3.353,7.74c36.966,21.513,79.131,32.883,121.955,32.883
+  c37.485,0,72.549-7.439,104.219-22.109c29.033-13.449,54.689-32.674,76.255-57.141c20.09-22.792,35.8-49.103,46.692-78.201
+  c10.383-27.737,15.871-57.333,15.871-85.589v-1.346c-0.001-4.537,2.051-8.806,5.631-11.712c13.585-11.03,25.415-24.014,35.16-38.591
+  l0,0C411.924,77.126,407.866,72.302,403.632,74.18L403.632,74.18z" /></svg>`,
+  linkedin: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382 382">
+  <path d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889
+  C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056
+  H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806
+  c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1
+  s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73
+  c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079
+  c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426
+  c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472
+  L341.91,330.654L341.91,330.654z" /></svg>`,
+  google: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path
+    d="M113.597,193.064l-87.204-50.347C9.543,176.768,0.001,215.17,0,255.998c0,40.263,9.645,78.731,26.754,113.084	l86.837-50.135c-8.565-19.286-13.418-40.558-13.417-62.949C100.175,233.608,105.031,212.343,113.597,193.064z" />
+  <path
+    d="M423.925,62.768C378.935,23.634,320.145-0.043,255.823,0C167.822,0.059,89.276,44.985,43.127,113.824l87.275,50.39 c28.381-38.714,74.04-64.041,125.601-64.04c37.587,0.001,72.042,13.437,98.954,35.701c6.588,5.449,16.218,4.95,22.263-1.095 l47.531-47.531C431.605,80.395,431.238,69.128,423.925,62.768z" />
+  <path
+    d="M510.247,226.38c-0.997-8.475-8.122-14.89-16.653-14.89l-209.767-0.011c-9.22,0-16.696,7.475-16.696,16.696v66.727 c0,9.22,7.475,16.696,16.696,16.696h117.548c-10.827,28.179-29.633,52.403-53.575,70.013l49.928,86.478 c50.256-34.056,88.467-85.547,105.297-146.331C512.175,288.709,513.822,256.751,510.247,226.38z" />
+  <path
+    d="M318.93,398.381c-19.255,8.578-40.511,13.444-62.927,13.446c-51.619,0.001-97.252-25.327-125.613-64.026l-86.903,50.174 C89.249,466.137,166.915,512,256.001,512c40.272,0,78.603-9.845,112.889-27.084L318.93,398.381z" />
+  </svg>`,
+  pinterest: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 508.52 508.52">
+  <path
+    d="M254.26,0C113.845,0,0,113.845,0,254.26s113.845,254.26,254.26,254.26 s254.26-113.845,254.26-254.26C508.52,113.813,394.675,0,254.26,0z M274.092,323.005c-18.593-1.43-26.379-10.647-40.936-19.514 c-8.009,42.016-17.798,82.317-46.784,103.325c-8.963-63.47,13.126-111.143,23.392-161.773 c-17.48-29.462,2.098-88.673,38.965-74.085c45.354,17.957-39.315,109.427,17.544,120.869 c59.338,11.918,83.588-103.007,46.784-140.383c-53.204-53.967-154.781-1.24-142.29,76.024c3.051,18.879,22.534,24.6,7.787,50.693 c-34.039-7.501-44.209-34.389-42.906-70.176c2.098-58.575,52.632-99.575,103.325-105.264 c64.105-7.183,124.238,23.519,132.533,83.81C380.881,254.578,342.583,328.313,274.092,323.005z" />
+  </svg>`,
+  youtube: html`<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.75 97.75">
+  <path d="M39.969,59.587c7.334-3.803,14.604-7.571,21.941-11.376c-7.359-3.84-14.627-7.63-21.941-11.447
+     C39.969,44.398,39.969,51.954,39.969,59.587z" />
+  <path d="M48.875,0C21.883,0,0,21.882,0,48.875S21.883,97.75,48.875,97.75S97.75,75.868,97.75,48.875S75.867,0,48.875,0z
+      M82.176,65.189c-0.846,3.67-3.848,6.377-7.461,6.78c-8.557,0.957-17.217,0.962-25.842,0.957c-8.625,0.005-17.287,0-25.846-0.957
+     c-3.613-0.403-6.613-3.11-7.457-6.78c-1.203-5.228-1.203-10.933-1.203-16.314s0.014-11.088,1.217-16.314
+     c0.844-3.67,3.844-6.378,7.457-6.782c8.559-0.956,17.221-0.961,25.846-0.956c8.623-0.005,17.285,0,25.841,0.956
+     c3.615,0.404,6.617,3.111,7.461,6.782c1.203,5.227,1.193,10.933,1.193,16.314S83.379,59.962,82.176,65.189z" /></svg>`,
+  instagram: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path
+    d="M352,0H160C71.648,0,0,71.648,0,160v192c0,88.352,71.648,160,160,160h192c88.352,0,160-71.648,160-160V160 C512,71.648,440.352,0,352,0z M464,352c0,61.76-50.24,112-112,112H160c-61.76,0-112-50.24-112-112V160C48,98.24,98.24,48,160,48 h192c61.76,0,112,50.24,112,112V352z" />
+  <path
+    d="M256,128c-70.688,0-128,57.312-128,128s57.312,128,128,128s128-57.312,128-128S326.688,128,256,128z M256,336 c-44.096,0-80-35.904-80-80c0-44.128,35.904-80,80-80s80,35.872,80,80C336,300.096,300.096,336,256,336z" />
+  <circle cx="393.6" cy="118.4" r="17.056" /></svg>`,
+  whatsapp: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
+  <path id="WhatsApp"
+    d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522
+   c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982
+   c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537
+   c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938
+   c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537
+   c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333
+   c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882
+   c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977
+   c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344
+   c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223
+   C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z" /></svg>`,
+  gmail: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510">
+  <path
+    d="M459,51H51C22.95,51,0,73.95,0,102v306c0,28.05,22.95,51,51,51h408c28.05,0,51-22.95,51-51V102 C510,73.95,487.05,51,459,51z M459,408h-51V183.6l-153,96.9l-153-96.9V408H51V102h30.6L255,209.1L428.4,102H459V408z" />
+  </svg>`,
+  snapchat: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468.339 468.339">
+  <path d="M500.459,375.368c-64.521-10.633-93.918-75.887-97.058-83.294c-0.06-0.145-0.307-0.666-0.375-0.819
+  c-3.234-6.571-4.036-11.904-2.347-15.838c3.388-8.013,17.741-12.553,26.931-15.462c2.586-0.836,5.009-1.604,6.938-2.372
+  c18.586-7.339,27.913-16.717,27.716-27.895c-0.179-8.866-7.134-17.007-17.434-20.651c-3.55-1.485-7.774-2.295-11.887-2.295
+  c-2.842,0-7.066,0.401-11.102,2.287c-7.868,3.678-14.865,5.658-20.156,5.888c-2.355-0.094-4.139-0.486-5.427-0.922
+  c0.162-2.79,0.35-5.658,0.529-8.585l0.094-1.493c2.193-34.807,4.915-78.123-6.673-104.081
+  c-34.27-76.834-106.999-82.807-128.478-82.807l-10.018,0.094c-21.436,0-94.029,5.965-128.265,82.756
+  c-11.614,26.018-8.866,69.316-6.664,104.115c0.213,3.422,0.427,6.758,0.614,10.01c-1.468,0.503-3.584,0.947-6.46,0.947
+  c-6.161,0-13.542-1.997-21.931-5.922c-12.126-5.683-34.295,1.911-37.291,17.647c-1.63,8.516,1.801,20.796,27.383,30.908
+  c1.988,0.785,4.489,1.587,7.561,2.56c8.576,2.722,22.929,7.27,26.325,15.266c1.681,3.951,0.879,9.284-2.662,16.512
+  c-1.263,2.944-31.65,72.124-98.765,83.174c-6.963,1.143-11.93,7.322-11.537,14.353c0.111,1.954,0.563,3.917,1.399,5.897
+  c5.641,13.193,27.119,22.349,67.55,28.766c0.887,2.295,1.92,7.006,2.509,9.737c0.853,3.9,1.749,7.927,2.97,12.1
+  c1.229,4.224,4.881,11.307,15.445,11.307c3.575,0,7.714-0.811,12.211-1.681c6.468-1.271,15.309-2.995,26.274-2.995
+  c6.084,0,12.416,0.546,18.825,1.604c12.092,2.005,22.699,9.506,35.004,18.202c18.116,12.809,34.586,22.605,67.524,22.605
+  c0.87,0,1.732-0.026,2.577-0.085c1.22,0.06,2.449,0.085,3.695,0.085c28.851,0,54.246-7.62,75.494-22.63
+  c11.742-8.311,22.835-16.162,34.935-18.176c6.426-1.058,12.766-1.604,18.85-1.604c10.513,0,18.901,1.348,26.385,2.816
+  c5.06,0.998,9.02,1.476,12.672,1.476c7.373,0,12.8-4.053,14.874-11.127c1.195-4.113,2.091-8.021,2.961-12.015
+  c0.461-2.125,1.57-7.211,2.509-9.66c39.851-6.34,60.203-15.138,65.835-28.297c0.845-1.894,1.34-3.9,1.476-6.033
+  C512.372,382.707,507.422,376.529,500.459,375.368z" /></svg>`,
+  github: html`<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="m256 0c-140.609375 0-256 115.390625-256 256 0 119.988281 84.195312 228.984375 196 256v-84.695312c-11.078125 2.425781-21.273438 2.496093-32.550781-.828126-15.128907-4.464843-27.421875-14.542968-36.546875-29.910156-5.816406-9.8125-16.125-20.453125-26.878906-19.671875l-2.636719-29.882812c23.253906-1.992188 43.371093 14.167969 55.3125 34.230469 5.304687 8.921874 11.410156 14.152343 19.246093 16.464843 7.574219 2.230469 15.707032 1.160157 25.183594-2.1875 2.378906-18.972656 11.070313-26.074219 17.636719-36.074219v-.015624c-66.679687-9.945313-93.253906-45.320313-103.800781-73.242188-13.976563-37.074219-6.476563-83.390625 18.238281-112.660156.480469-.570313 1.347656-2.0625 1.011719-3.105469-11.332032-34.230469 2.476562-62.546875 2.984375-65.550781 13.078125 3.867187 15.203125-3.890625 56.808593 21.386718l7.191407 4.320313c3.007812 1.792969 2.0625.769531 5.070312.542969 17.371094-4.71875 35.683594-7.324219 53.726563-7.558594 18.179687.234375 36.375 2.839844 54.464844 7.75l2.328124.234375c-.203124-.03125.632813-.148437 2.035157-.984375 51.972656-31.480469 50.105469-21.191406 64.042969-25.722656.503906 3.007812 14.128906 31.785156 2.917968 65.582031-1.511718 4.65625 45.058594 47.300781 19.246094 115.753906-10.546875 27.933594-37.117188 63.308594-103.796875 73.253907v.015624c8.546875 13.027344 18.816406 19.957032 18.761719 46.832032v105.722656c111.808594-27.015625 196-136.011719 196-256 .003906-140.609375-115.386719-256-255.996094-256zm0 0" />
+  </svg>`,
+};

package/components/spinner/index.js

@@ -0,0 +1 @@
+export { DileSpinner } from './src/DileSpinner.js';

package/components/spinner/spinner-horizontal.js

@@ -0,0 +1,3 @@
+import { DileSpinnerHorizontal } from "./src/DileSpinnerHorizontal.js";
+
+window.customElements.define("dile-spinner-horizontal", DileSpinnerHorizontal);

package/components/spinner/spinner-modal.js

@@ -0,0 +1,4 @@
+import './spinner.js';
+import { DileSpinnerModal } from "./src/DileSpinnerModal.js";
+
+window.customElements.define("dile-spinner-modal", DileSpinnerModal);

package/components/spinner/spinner.js

@@ -0,0 +1,3 @@
+import { DileSpinner } from "./src/DileSpinner.js";
+
+window.customElements.define("dile-spinner", DileSpinner);

package/components/spinner/src/DileSpinner.js

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from "lit";
+import { DileSpinnerMixin } from "./DileSpinnerMixin.js";
+
+export class DileSpinner extends DileSpinnerMixin(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      i {
+        display: inline-block;
+        position: relative;
+        width: 64px;
+        height: 64px;
+        background-color: var(--dile-spinner-background, transparent);
+        border-radius: 50%;
+        border: 4px solid var(--dile-spinner-background, transparent);
+      }
+      i div {
+        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        transform-origin: 32px 32px;
+      }
+      i div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: var(--dile-spinner-dot-size, 6px);
+        height: var(--dile-spinner-dot-size, 6px);
+        border-radius: 50%;
+        background: var(--dile-spinner-color, #888);
+        margin: -3px 0 0 -3px;
+      }
+      i div:nth-child(1) {
+        animation-delay: -0.036s;
+      }
+      i div:nth-child(1):after {
+        top: 50px;
+        left: 50px;
+      }
+      i div:nth-child(2) {
+        animation-delay: -0.072s;
+      }
+      i div:nth-child(2):after {
+        top: 54px;
+        left: 45px;
+      }
+      i div:nth-child(3) {
+        animation-delay: -0.108s;
+      }
+      i div:nth-child(3):after {
+        top: 57px;
+        left: 39px;
+      }
+      i div:nth-child(4) {
+        animation-delay: -0.144s;
+      }
+      i div:nth-child(4):after {
+        top: 58px;
+        left: 32px;
+      }
+      i div:nth-child(5) {
+        animation-delay: -0.18s;
+      }
+      i div:nth-child(5):after {
+        top: 57px;
+        left: 25px;
+      }
+      i div:nth-child(6) {
+        animation-delay: -0.216s;
+      }
+      i div:nth-child(6):after {
+        top: 54px;
+        left: 19px;
+      }
+      i div:nth-child(7) {
+        animation-delay: -0.252s;
+      }
+      i div:nth-child(7):after {
+        top: 50px;
+        left: 14px;
+      }
+      i div:nth-child(8) {
+        animation-delay: -0.288s;
+      }
+      i div:nth-child(8):after {
+        top: 45px;
+        left: 10px;
+      }
+      @keyframes lds-roller {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.active
+        ? html`<i
+            ><div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div
+          ></i>`
+        : ""}
+    `;
+  }
+}

package/components/spinner/src/DileSpinnerHorizontal.js

@@ -0,0 +1,64 @@
+import { LitElement, html, css } from 'lit';
+
+export class DileSpinnerHorizontal extends LitElement {
+    static styles = [
+        css`
+            .loader {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: space-between;
+                width: var(--dile-spinner-horizontal-width, 70px);
+                height: var(--dile-spinner-horizontal-height, 1rem);
+            }
+            .loader div {
+                height: var(--dile-spinner-horizontal-line-size, 2px);
+                background: var(--dile-spinner-horizontal-color, #888);
+                animation: loader var(--dile-spinner-animation-time, 2.2s) linear infinite;
+            }
+            .loader div:nth-child(2) {
+                animation-delay: -0.65s;
+            }
+            .loader div:nth-child(1) {
+                animation-delay: -0.25s;
+            }
+            @keyframes loader {
+                0% {
+                    width: 12px;
+                }
+                25% {
+                    width: 95%;
+                }
+                50% {
+                    width: 10px;
+                }
+                75% {
+                    width: 45%;
+                }
+                100% {
+                    width: 12px;
+                }
+            }
+        `
+    ];
+
+    static properties = {
+        active: { type: Boolean }
+    }
+
+    render() {
+        return html`
+            ${this.active
+              ? html`
+                <div class="loader">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                </div>
+              `
+              : ''
+            }
+            
+        `;
+    }
+}

package/components/spinner/src/DileSpinnerMixin.js

@@ -0,0 +1,13 @@
+export const DileSpinnerMixin = (SuperClass) =>
+  class extends SuperClass {
+    static get properties() {
+      return {
+        active: { type: Boolean },
+      };
+    }
+
+    constructor() {
+      super();
+      this.active = false;
+    }
+  };

package/components/spinner/src/DileSpinnerModal.js

@@ -0,0 +1,51 @@
+import { LitElement, html, css } from "lit";
+import { DileSpinnerMixin } from "./DileSpinnerMixin.js";
+
+export class DileSpinnerModal extends DileSpinnerMixin(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      div {
+        display: flex;
+        position: fixed;
+        background-color: var(
+          --dile-spinner-modal-background-color,
+          rgba(255, 255, 255, 0.8)
+        );
+        height: 100vh;
+        width: 100vw;
+        justify-content: center;
+        align-items: center;
+        top: 0;
+        left: 0;
+        z-index: 999999999999999;
+      }
+      blockquote {
+        width: 120px;
+        height: 120px;
+        border-radius: 60px;
+        background-color: var(
+          --dile-spinner-modal-box-color,
+          rgba(0, 0, 0, 0.9)
+        );
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.active
+        ? html` <div>
+            <blockquote class="box">
+              <dile-spinner ?active="${this.active}"></dile-spinner>
+            </blockquote>
+          </div>`
+        : ""}
+    `;
+  }
+}

package/components/tabs/index.js

@@ -0,0 +1,2 @@
+export { DileTabs } from './src/DileTabs.js';
+export { DileTab } from './src/DileTab.js';

package/components/tabs/src/DileTab.js

@@ -0,0 +1,60 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectableItem } from "../../../mixins/selectable/index.js";
+
+export class DileTab  extends DileSelectableItem(LitElement) {
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        margin: 0 3px;
+      }
+      article {
+        border-top-left-radius: var(--dile-tab-border-radius, 4px);
+        border-top-right-radius: var(--dile-tab-border-radius, 4px);
+        transition: all 0.3s ease;
+        color: var(--dile-tab-text-color, #666);
+        background-color: var(--dile-tab-background-color, transparent);
+        cursor: pointer;
+        border: var(--dile-tab-border, none);
+        font-weight: var(--dile-tab-font-weight, normal);
+        font-size: var(--dile-tab-font-size, 1rem);
+      }
+      div.label {
+        padding: var(--dile-tab-padding, 8px 12px 6px 12px);
+        text-transform: var(--dile-tab-text-transform, uppercase);
+        white-space: nowrap;
+      }
+      .selected {
+        background-color: var(--dile-tab-selected-background-color, #039be5);
+        color: var(--dile-tab-selected-text-color, #fff);
+        border: var(--dile-tab-selected-border, none);
+      }
+      span {
+        display: block;
+        height: var(--dile-tab-selected-line-height, 5px);
+        width: 0;
+        background-color: var(--dile-tab-selected-line-color, #0070c0);
+        transition: width 0.3s ease;
+      }
+      .markselected {
+        width: 100%;
+      }
+      .line {
+        display: flex;
+        justify-content: center;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <article @click='${this.select}' class="${this.selected ? 'selected' : ''}">
+        <div class="label"><slot></slot></div>
+        <div class="line">
+          <span class="${this.selected ? 'markselected' : ''}"></span>
+        </div>
+      </article>
+    `;
+  }
+}

package/components/tabs/src/DileTabs.js

@@ -0,0 +1,12 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectable } from "../../../mixins/selectable/index.js";
+
+export class DileTabs extends DileSelectable(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
+    `;
+  }
+}

package/components/tabs/tab.js

@@ -0,0 +1,3 @@
+import { DileTab } from "./src/DileTab.js";
+
+window.customElements.define("dile-tab", DileTab);

package/components/tabs/tabs.js

@@ -0,0 +1,4 @@
+import './tab.js';
+import { DileTabs } from "./src/DileTabs.js";
+
+window.customElements.define("dile-tabs", DileTabs);

package/components/textarea/index.js

@@ -0,0 +1 @@
+export { DileTextarea } from './src/DileTextarea.js';