native-document 1.0.201 → 1.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.201",
+  "version": "1.0.203",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/drawer/Drawer.js

@@ -51,6 +51,7 @@ export default function Drawer(content = null, props = {}) {
         renderHeader: null,
         backdrop: true,
         isOpen: null,
+        closeIcon: null,
         props,
     };
     this.aria = {
@@ -341,4 +342,13 @@ Drawer.prototype.onOpen = function(handler) {
 Drawer.prototype.onClose = function(handler) {
     this.on('close', handler);
     return this;
+};
+
+/**
+ * @param {NdChild} icon
+ * @return {this}
+ */
+Drawer.prototype.closeIcon = function(icon) {
+    this.$description.closeIcon = icon;
+    return this;
 };

package/src/components/drawer/types/Drawer.d.ts

@@ -48,6 +48,7 @@ export interface DrawerInterface extends BaseComponent {
     hide(): void;
     onOpen(handler: (instance: DrawerInterface) => void): this;
     onClose(handler: (instance: DrawerInterface) => void): this;
+    closeIcon(icon: ValidChild): this;
 }
 
 

package/src/ui/components/drawer/DrawerRender.js

@@ -52,7 +52,7 @@ const buildDrawerHeader = ($desc, instance, closeFn) => {
             $desc.subtitle ? Paragraph({ class: 'drawer-sub-title' }, $desc.subtitle) : null,
         ]),
         $desc.closable
-            ? Button({ type: 'button', class: 'drawer-close', 'aria-label': 'Close menu' }, 'X').onClick(closeFn)
+            ? Button({ type: 'button', class: 'drawer-close', 'aria-label': 'Close menu' }, $desc.closeIcon ?? 'X').onClick(closeFn)
             : null,
     ];
 };

package/src/ui/components/drawer/drawer.css

@@ -1,6 +1,16 @@
+:root {
+    --drawer-z-index: 1000;
+    --drawer-background-color: white;
+    --drawer-width: 400px;
+    --drawer-backdrop-color: rgba(0, 0, 0, var(--opacity-backdrop));
+    --drawer-panel-backdrop-color: hsl(from var(--gray-lite-1) h s l / .5);
+    --drawer-panel-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    --drawer-panel-body-background: #F9F9F9;
+}
+
 .drawer-container {
     position: fixed;
-    z-index: 1000;
+    z-index: var(--drawer-z-index);
     display: none;
     inset: 0;
     pointer-events: none
@@ -16,7 +26,7 @@
 .drawer-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, var(--opacity-backdrop));
+    background: var(--drawer-backdrop-color);
     transition: opacity 0.25s ease;
 }
 
@@ -29,9 +39,9 @@
     max-width: 100%;
     max-height: 100%;
     display: flex;
-    width: 450px;
+    width: var(--drawer-width);
     border-radius: var(--radius-large);
-    background: hsl(from var(--gray-lite-1) h s l / .5);
+    background: var(--drawer-panel-backdrop-color);
     margin: var(--space-cozy)
 }
 
@@ -40,10 +50,10 @@
     justify-content: space-between;
     flex: 1;
     display: flex;
-    background: var(--gray-lite-4);
+    background: var(--drawer-background-color);
     border-radius: var(--radius-large);
     margin: var(--space-cozy);
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--drawer-panel-shadow);
 }
 
 
@@ -164,7 +174,7 @@
     flex: 1;
     overflow-y: auto;
     padding: 20px;
-    background: var(--gray-lite-3);
+    background: var(--drawer-panel-body-background);
     margin: var(--space-cozy);
     border-radius: var(--radius-large);
 }