@aquera/nile-elements 0.0.75 → 0.0.76

package/package.json

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

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

@@ -67,13 +67,18 @@ export const styles = css`
     align-items: center;
     gap: 4px 7px;
   }
-  
-  @media not all and (min-resolution: .001dpcm) { 
-    @supports (-webkit-appearance:none) 
+
+  .day-names {
+    flex-wrap: nowrap;
+  }
+
+
+  @media not all and (min-resolution: .001dpcm) {
+    @supports (-webkit-appearance:none)
     { .day-names, .days {
-       column-gap: 6px; 
-      } 
-    } 
+       column-gap: 6px;
+      }
+    }
   }
 
   .days {

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

@@ -1,11 +1,11 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Drawer CSS
@@ -13,6 +13,7 @@ import {css} from 'lit-element';
 export const styles = css`
   :host {
     box-sizing: border-box;
+    --nile-drawer-remove-icon-color:#000;
   }
 
   :host *,
@@ -172,6 +173,10 @@ export const styles = css`
     display: none;
   }
 
+  .drawer__close:hover {
+    cursor:pointer;
+  }
+
   @media (forced-colors: active) {
     .drawer__panel {
       border: solid 1px hsl(0, 0%, 100%);

package/src/nile-drawer/nile-drawer.ts

@@ -317,10 +317,15 @@ export class NileDrawer extends NileElement {
           'drawer--contained': this.contained,
           'drawer--fixed': !this.contained,
           'drawer--rtl': 'rtl',
-          'drawer--has-footer': this.hasSlotController.test('footer')
+          'drawer--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <div part="overlay" class="drawer__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
+        <div
+          part="overlay"
+          class="drawer__overlay"
+          @click=${() => this.requestClose('overlay')}
+          tabindex="-1"
+        ></div>
 
         <div
           part="panel"
@@ -337,19 +342,23 @@ export class NileDrawer extends NileElement {
                 <header part="header" class="drawer__header">
                   <h2 part="title" class="drawer__title" id="title">
                     <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                    <slot name="label">
+                      ${this.label.length > 0
+                        ? this.label
+                        : String.fromCharCode(65279)}
+                    </slot>
                   </h2>
                   <div part="header-actions" class="drawer__header-actions">
                     <slot name="header-actions"></slot>
-                    <nile-icon-button
-                      part="close-button"
-                      exportparts="base:close-button__base"
+                    <nile-icon
                       class="drawer__close"
                       name="close"
-                      label='close'
-                      library="system"
+                      label="close"
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      color="var(--nile-drawer-remove-icon-color)"
                       @click=${() => this.requestClose('close-button')}
-                    ></nile-icon-button>
+                    ></nile-icon>
                   </div>
                 </header>
               `