feat: add stylings

src/ stylings.ts

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+
+export const absoluteHidden = css`[hidden] { display: none !important; }`;
+
+export const resetAnchor = css`
+a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  position: relative;
+  display: inline-block;
+  background: initial;
+  color: inherit;
+  font: inherit;
+  text-transform: inherit;
+  text-decoration: none;
+  outline: none;
+}
+a:focus,
+a:focus.page-selected {
+  text-decoration: underline;
+}
+`;
+
+export const resetButton = css`
+button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: 0;
+  background: none; /** NOTE: IE11 fix */
+  color: inherit;
+  border: none;
+  font: inherit;
+  text-align: left;
+  text-transform: inherit;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+`;
+
+export const resetShadowRoot = css`
+:host {
+  display: block;
+}
+
+* {
+  box-sizing: border-box;
+}
+`;
+
+export const resetSvgIcon = css`
+svg {
+  display: block;
+  min-width: var(--svg-icon-min-width, 24px);
+  min-height: var(--svg-icon-min-height, 24px);
+  fill: var(--svg-icon-fill, currentColor);
+  pointer-events: none;
+}
+`;

src/date-picker.ts

@@ -11,6 +11,7 @@ import { toFormatters } from './helpers/to-formatters.js';
 import { toResolvedDate } from './helpers/to-resolved-date.js';
 import { toYearList } from './helpers/to-year-list.js';
 import type { MaybeDate } from './helpers/typings.js';
+import { resetShadowRoot } from './ stylings.js';
 
 export class DatePicker extends DatePickerMixin(LitElement) implements DatePickerInterface {
   //#region public properties
@@ -22,7 +23,7 @@ export class DatePicker extends DatePickerMixin(LitElement) implements DatePicke
 
   @state()
   private _hasMax!: boolean;
-  
+
   @state()
   private _hasMin!: boolean;
 
@@ -44,15 +45,17 @@ export class DatePicker extends DatePickerMixin(LitElement) implements DatePicke
   @state()
   private _startView: CalendarView = 'calendar';
   //#endregion private states
-  
+
   //#region private properties
   private _formatters: Formatters;
   private _TODAY_DATE: Date;
   private _yearList: number[];
   //#endregion private properties
 
   public static styles = [
-    css``,
+    resetShadowRoot,
+    css`
+    `,
   ];
 
   constructor() {

src/icons.ts

@@ -0,0 +1,6 @@
+import { svg } from 'lit/static-html.js';
+
+// tslint:disable:max-line-length
+export const iconChevronLeft = svg`<svg height="24" viewBox="0 0 24 24" width="24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>`;
+export const iconChevronRight = svg`<svg height="24" viewBox="0 0 24 24" width="24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>`;
+// tslint:enable:max-line-length

tsconfig.json

@@ -25,7 +25,8 @@
       "lit/directives/template-content.js",
       "lit/directives/unsafe-html.js",
       "lit/directives/unsafe-svg.js",
-      "lit/directives/until.js"
+      "lit/directives/until.js",
+      "lit/static-html.js",
     ]
   },
   "include": [