@aquera/nile-elements 0.1.57-beta-1.0 → 0.1.57-beta-1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.57-beta-1.0",
+  "version": "0.1.57-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-calendar/nile-calendar.css.ts

@@ -147,7 +147,6 @@ export const styles = css`
     color: var(--nile-colors-dark-900);
     font-size: 12px;
     font-weight: 500;
-    line-height: 12px;  
     letter-spacing: 0.2px;
   }
 
@@ -412,6 +411,7 @@ nile-icon[disabled] {
   flex-direction: column;
   gap: 18px;
   padding: 16px;
+  width: auto;
 }
 
  

package/src/nile-calendar/nile-calendar.ts

@@ -119,7 +119,7 @@ export class NileCalendar extends NileElement {
   }
 
   private get yearOptions(): number[] {
-    const fallbackStart = 1990;
+    const fallbackStart = 2000;
     const fallbackEnd = 2050;
   
     const start = this.startYear ?? fallbackStart;
@@ -193,12 +193,13 @@ export class NileCalendar extends NileElement {
           base:true,
           base__range:this.range,
         })}
+        part="calendar-root"
       >
         <div class=${classMap({
           "calendar-config":true,
           "hidden": !this.range || (this.range && this.hideTypes)
-        })}>
-          <div class="calendar-switcher">
+        })} part="calendar-config">
+          <div class="calendar-switcher" part="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
               <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
               <nile-tab slot="nav" panel="relative">Relative</nile-tab>
@@ -210,7 +211,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container">
+        <div class="button-container" part="calendar-footer">
           ${this.allowClear?
             html`
             <nile-button 
@@ -236,8 +237,8 @@ export class NileCalendar extends NileElement {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper">
-      <div class="calendar-container">
+    <div class="calendar-wrapper" part="calendar-wrapper">
+      <div class="calendar-container" part="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -456,7 +457,7 @@ export class NileCalendar extends NileElement {
     
     return html`
       <div class="calendar">
-        <div class="calendar-header">
+        <div class="calendar-header" part="calendar-header">
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowleft"
@@ -562,12 +563,13 @@ export class NileCalendar extends NileElement {
             
             return html` 
             <div
+            part="calendar-day"
               class=${classMap(classMapObj)}
               @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
             >
               <span style="position:relative;">
                 ${day}
-                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
               </span>
             </div>`;
           })}