@aquera/nile-elements 0.0.81 → 0.0.84

package/README.md

@@ -79,6 +79,25 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 0.0.84
+- Nile Calendar - Font styling fixed
+- Nile Menu - styling update for menu items
+- Nile Divider - New component
+- Nile Tab - Fixed error logs for element not found
+
+#### Version 0.0.83
+- Nile Calendar - bug fix
+- Nile Icon - added mouse, printer, keyboard-01, headphones-01
+
+#### Version 0.0.82
+- Nile Calendar - Design updated, allowed dates issue fixed
+- Nile Dialog - Hover issue fixed
+- Nile Menu - added custom search emit, Search positioning updated to sticky, Clearable added to search
+- Nile Tree - New component added
+- Nile Tab - Ui fixes, Console error fixed in no-track variant
+- Nile Icon - alert monitor filecheck icon added
+- Nile Table Header - Cursor update
+
 
 #### Version 0.0.81
 - Added nile-split-panel component

package/demo/filenames.txt

@@ -1 +1 @@
-api,accessreview,action,actionworkflow,address,agent,agents,aggregation,allapplication,allsearch,application,applications-2,applications,apply-filter,approve,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,basic,bell,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cancel,cases,caution,certification,chevron-down,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componentblock,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,continuous,copy,cor-analysis,correlation,create,createuser,custom,dashboard,data-type-array,data-type-boolean,data-type-expression,data-type-json,data-type-null,data-type-number,data-type-persistent-variable,data-type-string,data-type-unknown,data-type-variable,database-1,database,databaseview,default-1,default-cursor,default,delegate,delete,deleteuser,deligateduser,directory,disabled,dowhileloop,document,done,dontmap,donut,doublearrowleft,doublearrowright,downarrow,download,drag,draglist,droparrow,dropdown,edit-write,edit-1,edit-pencil,else,email,enable,enabled,entities,entitlement,error,escalate,event,every,exactmatch,execute,expand-2,expand-1,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow-h,flow,flowmap-cancel,flowmap-drag,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-aquera,flowmap-block,flowmap-colorpalatte,flowmap-ellipsis,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-hand,flowmap-redo,flowmap-section,flowmap-text,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,form,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-actions,header-child-workflow,header-flows,header-functions,header-tasks,header-variable,helpsupport,help-1,help,helpandsupport,history,identitygraph,identityledger,if,ifelse,image,immutable,info-icon,info-icon1,info,info2,inprogress,itemplaceholder,js,kill,leftarrow,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,manageduser,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,multiple-user,mute,next-down,next,nomatch,not,notscheduled,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pen,pencil,peopletask,persistent-variable,persistentdata,personaldetails,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,prev-up,prev,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo,refresh,reminder,resize,resource,returnvalue,revocationcycle,revokation-cycle,rightarrow,role,rolemanager,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,selectuser,send,sendemail,sendescalation,sendprompt,sendreminder,setting,settings-1,settings,shape,share,smalltick,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop-circle,stop,string,stringinput,stringletters,support,sync,table,tag,test,text,textarea-expander,themes,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trash,trigger,undo-1,undo,unmute,uparrow,updown,update,updateuser,upgrade,upload,user-group,user-analysis-icon,user-inactive,user-selection,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove-1,userremove-2,userremove,userremovegroup,userupdate,users,validationexpression,variable-new-1,variable-new,variable-global,variable-local-1,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,while,whileloop,workflow-application,workflow-orchestration,workflow-section,workflow-text,workflow,writeexpression,access-request,alert-circle,anomaly,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,back,bar-and-line-chart,bar-chart-square-02,bar-chart-square-03,bargraph,bell-icon,book-closed,border_all,box,bubble-chart,calendar-01,cell-loader,check-circle,check-done-01,check-done-02,check,chevron-left-double,chevron-selector-vertical,clock-check,clock-rewind,clock,cloud-01,columns-03,combo1,components-icon,copy-06,data-insight,dataflow-03,dataflow-04,dotpoints-02,dots-grid,dots-vertical,downgrade,download-01,download-02,edit-01,expand-03,expand-06,eye-off,file-06,file-shield-01,file-shield-02,file,fingerprint-03,flow-01,folder-01,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,help-circle,helpers,info-circle,integer,intersection,key-performance-indicator,laptop-01,layers-three-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,nightingale-chart,no-anomaly,operators,orchestration-solid,ou-analysis-icon,phone,pie,placeholder-wf,play-circle,plus-icon,priority-high,priority-highest,priority-low,priority-medium,radar,refresh-cw-03,right-join,sankey,scatter-plot,search-lg,search-steps-icon,semi-circle-donut-chart,server-03,settings-02,shield-01,stacked-bar-chart,storybook,swap,switch,table-1,trash-01,trash-03,trash-no-fill,trend-up-02,union,user-01,user-03,user-circle,user-square,users-01,users-02,users-plus,users-up,virtualservergroup,workflow-01,workflow-solid,x-circle
+api,accessreview,action,actionworkflow,address,agent,agents,aggregation,alert,allapplication,allsearch,application,applications-2,applications,apply-filter,approve,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,basic,bell,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cancel,cases,caution,certification,chevron-down,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componentblock,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,continuous,copy,cor-analysis,correlation,create,createuser,custom,dashboard,data-type-array,data-type-boolean,data-type-expression,data-type-json,data-type-null,data-type-number,data-type-persistent-variable,data-type-string,data-type-unknown,data-type-variable,database-1,database,databaseview,default-1,default-cursor,default,delegate,delete,deleteuser,deligateduser,directory,disabled,dowhileloop,document,done,dontmap,donut,doublearrowleft,doublearrowright,downarrow,download,drag,draglist,droparrow,dropdown,edit-write,edit-1,edit-pencil,else,email,enable,enabled,entities,entitlement,error,escalate,event,every,exactmatch,execute,expand-2,expand-1,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow-h,flow,flowmap-cancel,flowmap-drag,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-aquera,flowmap-block,flowmap-colorpalatte,flowmap-ellipsis,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-hand,flowmap-redo,flowmap-section,flowmap-text,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,form,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-actions,header-child-workflow,header-flows,header-functions,header-tasks,header-variable,helpsupport,help-1,help,helpandsupport,history,identitygraph,identityledger,if,ifelse,image,immutable,info-icon,info-icon1,info,info2,inprogress,itemplaceholder,js,kill,leftarrow,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,manageduser,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,multiple-user,mute,next-down,next,nomatch,not,notscheduled,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pen,pencil,peopletask,persistent-variable,persistentdata,personaldetails,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,prev-up,prev,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo,refresh,reminder,resize,resource,returnvalue,revocationcycle,revokation-cycle,rightarrow,role,rolemanager,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,selectuser,send,sendemail,sendescalation,sendprompt,sendreminder,setting,settings-1,settings,shape,share,smalltick,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop-circle,stop,string,stringinput,stringletters,support,sync,table,tag,test,text,textarea-expander,themes,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trash,trigger,undo-1,undo,unmute,uparrow,updown,update,updateuser,upgrade,upload,user-group,user-analysis-icon,user-inactive,user-selection,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove-1,userremove-2,userremove,userremovegroup,userupdate,users,validationexpression,variable-new-1,variable-new,variable-global,variable-local-1,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,while,whileloop,workflow-application,workflow-orchestration,workflow-section,workflow-text,workflow,writeexpression,access-request,alert-circle,anomaly,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,back,bar-and-line-chart,bar-chart-square-02,bar-chart-square-03,bargraph,bell-icon,book-closed,border_all,box,bubble-chart,calendar-01,cell-loader,check-circle,check-done-01,check-done-02,check,chevron-left-double,chevron-selector-vertical,clock-check,clock-rewind,clock,cloud-01,columns-03,combo1,components-icon,copy-06,data-insight,dataflow-03,dataflow-04,dotpoints-02,dots-grid,dots-vertical,downgrade,download-01,download-02,edit-01,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,flow-01,folder-01,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,headphones-01,help-circle,helpers,info-circle,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,monitor-01,mouse,nightingale-chart,no-anomaly,operators,orchestration-solid,ou-analysis-icon,phone,pie,placeholder-wf,play-circle,plus-icon,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh-cw-03,right-join,sankey,scatter-plot,search-lg,search-steps-icon,semi-circle-donut-chart,server-03,settings-02,shield-01,stacked-bar-chart,storybook,swap,switch,table-1,trash-01,trash-03,trash-no-fill,trend-up-02,union,user-01,user-03,user-circle,user-square,users-01,users-02,users-plus,users-up,virtualservergroup,workflow-01,workflow-solid,x-circle

package/demo/index.css

@@ -0,0 +1,117 @@
+body {
+  background: #fafafa;
+  font-family: colfax-regular, sans-serif;
+}
+#demo {
+  max-width: 40ch;
+  padding: 48px;
+}
+.pad {
+  padding: 32px;
+}
+.heading {
+  padding-left: 1.5rem;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom: solid 1px #ddd;
+  font-weight: 600;
+}
+
+#new-icons{
+  display:grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+#new-icons div {
+  width:8rem;
+  cursor: pointer;
+  padding:1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border:1px solid grey;
+
+}
+
+#new-icons div > small{
+  width:100%;
+  word-wrap: break-word;
+}
+
+@font-face {
+  font-family: 'colfax-regular';
+  src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'colfax-regular';
+  src: url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.stack--hor {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+nile-drawer {
+  display: flex;
+  flex-direction: column;
+}
+
+[slot='footer'] {
+  padding-top: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.nds-help {
+  font-size: 12px;
+}
+
+.frame-left-lg {
+  padding-left: 4rem;
+}
+
+.body {
+  display: flex;
+}

package/demo/index.html

@@ -1,248 +1,39 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
 
-    <script>
-      function changeImportBasedOnURLParam() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const variableStyle = urlParams.get('variableStyle');
-
-        if (variableStyle) {
-          const stylesheet = document.getElementById('stylesheet');
-          if (stylesheet) {
-            stylesheet.href = `${variableStyle}.css`;
-          }
-        }
-      }
-
-      changeImportBasedOnURLParam();
-    </script>
-    <style>
-      body {
-        background: #fafafa;
-        font-family: colfax-regular, sans-serif;
-      }
-      #demo {
-        max-width: 40ch;
-        padding: 48px;
-      }
-      .pad {
-        padding: 32px;
-      }
-      .heading {
-        padding-left: 1.5rem;
-        padding-top: 12px;
-        padding-bottom: 12px;
-        border-bottom: solid 1px #ddd;
-        font-weight: 600;
-      }
-
-      #new-icons{
-        display:grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      }
-      #new-icons div {
-        width:8rem;
-        cursor: pointer;
-        padding:1rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        border:1px solid grey;
-
-      }
-
-      #new-icons div > small{
-        width:100%;
-        word-wrap: break-word;
-      }
-
-      @font-face {
-        font-family: 'colfax-regular';
-        src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
-            format('woff2'),
-          url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
-            format('woff'),
-          url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
-            format('opentype');
-        font-display: auto;
-        font-style: normal;
-        font-weight: normal;
-      }
-
-      @font-face {
-        font-family: 'colfax-regular';
-        src: url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
-            format('woff2'),
-          url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
-            format('woff'),
-          url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
-            format('opentype');
-        font-display: auto;
-        font-style: normal;
-        font-weight: bold;
-      }
-
-      .stack {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-
-      .stack--hor {
-        display: flex;
-        flex-direction: row;
-        gap: 12px;
-      }
-
-      .hstack {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        align-self: stretch;
-      }
-
-      .vstack {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        align-self: stretch;
-      }
-
-      nile-drawer {
-        display: flex;
-        flex-direction: column;
-      }
-
-      [slot='footer'] {
-        padding-top: 0;
-      }
-
-      .container {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-
-      .nds-help {
-        font-size: 12px;
-      }
-
-      .frame-left-lg {
-        padding-left: 4rem;
-      }
-
-      .body {
-        display: flex;
-      }
-          </style>
-  </head>
-  <body>
-    <div id="demo">
-      <div class="container">
-        <nile-icon name="search"></nile-icon>
-          <div class="stack frame-left-lg">
-          <h1>Setup Reports</h1>
-          <nile-checkbox label="This is label" help-text="this is help text"> </nile-checkbox>
-          <nile-textarea label="this is label" help-text="i'm here to help you" resize="vertical">  </nile-textarea>
-          <nile-input label="Name of the report" required>
-            <p slot="help" class="nds-help">2FA Enabled</p>
-          </nile-input>
-          <nile-input label="Password"></nile-input>
-          <nile-input label="City"></nile-input>
-          <nile-input label="Address"></nile-input>
-          <div class="stack--hor" slot="footer">
-            <nile-button>Save</nile-button>
-            <nile-button variant="secondary">Reset</nile-button>
-            <nile-button variant="tertiary">Help</nile-button>
-          </div>
-                    </div>
-          
-        <div id="island">
-            <nile-button>Show Drawer</nile-button>
-          </div>
-          
-        <div id="new-icons">
-                      </div>
-              </div>
+<head>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
+  <link rel="stylesheet" href="index.css">
+  <script type="module" src="index.js"></script>
+</head>
+
+<body>
+  <div id="demo">
+    <div class="container">
+      <nile-icon name="search"></nile-icon>
+      <div class="stack frame-left-lg">
+        <h1>Setup Reports</h1>
+        <nile-checkbox label="This is label" help-text="this is help text"></nile-checkbox>
+        <nile-textarea label="this is label" help-text="i'm here to help you" resize="vertical"></nile-textarea>
+        <nile-input label="Name of the report" required>
+          <p slot="help" class="nds-help">2FA Enabled</p>
+        </nile-input>
+        <nile-input label="Password"></nile-input>
+        <nile-input label="City"></nile-input>
+        <nile-input label="Address"></nile-input>
+        <div class="stack--hor" slot="footer">
+          <nile-button>Save</nile-button>
+          <nile-button variant="secondary">Reset</nile-button>
+          <nile-button variant="tertiary">Help</nile-button>
+        </div>
+      </div>
+      <div id="island">
+        <nile-button>Show Drawer</nile-button>
+      </div>
+      <div id="new-icons"></div>
     </div>
+  </div>
+</body>
 
-    <script type="module">
-      window.showDrawer = true;
-      window.iconPath = '';
-      // import { html, render } from 'lit';
-      // import '../dist/src/nile-badge/index.js';
-      import '../dist/src/index.js';
-      // import '../dist/src/nile-input/index.js';
-
-      // find html element by id
-      const demo = document.getElementById('close');
-      demo?.addEventListener('click', () => {
-        console.log('clicked', window.showDrawer);
-        window.showDrawer = false;
-      });
-
-      // const title = 'Hello owc World!';
-
-      // function handleClick() {
-      //   console.log('clicked');
-      // };
-
-
-
-      function closeDrawer() {
-        // return false;
-        // console.log('close drawer', window.showDrawer);
-        window.showDrawer = false;
-        return false;
-      }
-
-      // for testing calendar 
-      document.addEventListener('DOMContentLoaded', () => {
-        const myComponent = document.querySelector('nile-calendar');
-        if (myComponent) {
-          // Accessing the allowedDates property after the component has been rendered
-          myComponent.allowedDates = {
-            startDate: '2024-03-24',
-            endDate: '2024-03-29',
-          };
-        } else {
-          console.error('Error: my-component not found in the DOM.');
-        }
-      });
-      
-      /*
-       * Added service worker to handle expensive flow of fetching huge amount of data from the filenames text file created through build script
-       */
-      const w  = new Worker('fetchTextFromFileWorker.js');
-      const getMessage =  (msg)=>{
-        const icons = splitStringBy(msg.data, ',');
-        // console.log(icons)
-        // renderNewIcons(icons)
-      }
-      function splitStringBy(str, seperator){
-        return str.split(seperator)
-      }
-
-      // rendering icons from filenames text file
-      function renderNewIcons(icons){
-        const iconsDiv = document.getElementById('new-icons');
-        iconsDiv.innerHTML = ''
-        icons?.forEach((icon)=>{
-          iconsDiv.innerHTML = ` ${iconsDiv.innerHTML}
-          <div title='${icon}' alt='${icon}'>
-            <nile-icon method="stroke" name=${icon.toLowerCase()} > </nile-icon>
-            <small>${icon}</small>
-          </div>`;
-        })
-        w.removeEventListener('message', getMessage)
-      }
-
-      w.postMessage('./filenames.txt');
-      w.addEventListener('message', getMessage)
-
-    </script>
-  </body>
-</html>
+</html>

package/demo/index.js

@@ -0,0 +1,72 @@
+function changeImportBasedOnURLParam() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const variableStyle = urlParams.get('variableStyle');
+
+  if (variableStyle) {
+    const stylesheet = document.getElementById('stylesheet');
+    if (stylesheet) {
+      stylesheet.href = `${variableStyle}.css`;
+    }
+  }
+}
+
+changeImportBasedOnURLParam();
+
+window.showDrawer = true;
+window.iconPath = '';
+// import { html, render } from 'lit';
+// import '../dist/src/nile-badge/index.js';
+import '../dist/src/index.js';
+// import '../dist/src/nile-input/index.js';
+
+// find html element by id
+const demo = document.getElementById('close');
+demo?.addEventListener('click', () => {
+  console.log('clicked', window.showDrawer);
+  window.showDrawer = false;
+});
+
+// for testing calendar
+document.addEventListener('DOMContentLoaded', () => {
+  const myComponent = document.querySelector('nile-calendar');
+  if (myComponent) {
+    // Accessing the allowedDates property after the component has been rendered
+    myComponent.allowedDates = {
+      startDate: '2024-03-24',
+      endDate: '2024-03-29',
+    };
+  } else {
+    console.error('Error: my-component not found in the DOM.');
+  }
+});
+
+/*
+ * Added service worker to handle expensive flow of fetching huge amount of data from the filenames text file created through build script
+ */
+const w = new Worker('fetchTextFromFileWorker.js');
+const getMessage = msg => {
+  const icons = splitStringBy(msg.data, ',');
+  /*For rendering the available icons*/
+  //   renderNewIcons(icons);
+};
+
+function splitStringBy(str, separator) {
+  return str.split(separator);
+}
+
+// rendering icons from filenames text file
+function renderNewIcons(icons) {
+  const iconsDiv = document.getElementById('new-icons');
+  iconsDiv.innerHTML = '';
+  icons?.forEach(icon => {
+    iconsDiv.innerHTML = ` ${iconsDiv.innerHTML}
+      <div title='${icon}' alt='${icon}'>
+        <nile-icon method="stroke" name=${icon.toLowerCase()} > </nile-icon>
+        <small>${icon}</small>
+      </div>`;
+  });
+  w.removeEventListener('message', getMessage);
+}
+
+w.postMessage('./filenames.txt');
+w.addEventListener('message', getMessage);

package/demo/variables.css

@@ -202,6 +202,7 @@
   --nile-font-family-serif-colfax-medium: colfax-medium, Times, Georgia, serif;
   --nile-font-family-serif: colfax-regular, Times, Georgia, serif;
   --nile-font-family-sans-serif: colfax-regular, Helvetica, Helvetica Neue, Arial, Segoe UI, Roboto, Droid Sans, sans-serif;
+  --nile-font-family-medium: colfax-medium;
   --nile-font-family-body: var(--nile-font-family-sans-serif);
   --nile-empty-state-min-width: 300px;
   --nile-empty-state-max-width: 512px;
@@ -268,13 +269,63 @@
   --nile-breakpoint-medium: 48rem; /* 768px */
   --nile-breakpoint-max: 99rem; /* 1584px */
   --nile-breakpoint-large: 66rem; /* 1056px */
+  --nile-badge-color-pill-outline-warning: #dc6803;
+  --nile-badge-color-pill-outline-success: #079455;
+  --nile-badge-color-pill-outline-purple: #6938ef;
+  --nile-badge-color-pill-outline-pink: #dd2590;
+  --nile-badge-color-pill-outline-orange: #e04f16;
+  --nile-badge-color-pill-outline-indigo: #444ce7;
+  --nile-badge-color-pill-outline-grayblue: #3e4784;
+  --nile-badge-color-pill-outline-gray: #475467;
+  --nile-badge-color-pill-outline-error: #d92d20;
+  --nile-badge-color-pill-outline-brand: #005ea6;
+  --nile-badge-color-pill-outline-bluelight: #0086c9;
+  --nile-badge-color-pill-outline-blue: #1570ef;
   --nile-badge-color-font-warning: #000;
   --nile-badge-color-font-success: #000;
+  --nile-badge-color-font-purple: #5925dc;
+  --nile-badge-color-font-pink: #c11574;
+  --nile-badge-color-font-orange: #b93815;
+  --nile-badge-color-font-indigo: #3538cd;
+  --nile-badge-color-font-grayblue: #363f72;
+  --nile-badge-color-font-gray: #344054;
   --nile-badge-color-font-error: #000;
+  --nile-badge-color-font-brand: #005291;
+  --nile-badge-color-font-bluelight: #026aa2;
+  --nile-badge-color-font-blue: #175cd3;
   --nile-badge-color-border-width: 0px;
+  --nile-badge-color-border-color-warning: #fedf89;
+  --nile-badge-color-border-color-success: #abefc6;
+  --nile-badge-color-border-color-purple: #d9d6fe;
+  --nile-badge-color-border-color-pink: #fcceee;
+  --nile-badge-color-border-color-orange: #f9dbaf;
+  --nile-badge-color-border-color-indigo: #c7d7fe;
+  --nile-badge-color-border-color-grayblue: #d5d9eb;
+  --nile-badge-color-border-color-gray: #eaecf0;
+  --nile-badge-color-border-color-error: #fecdca;
+  --nile-badge-color-border-color-brand: #b5c9e0;
+  --nile-badge-color-border-color-bluelight: #b9e6fe;
+  --nile-badge-color-border-color-blue: #b2ddff;
   --nile-badge-color-background-warning: #f3e0a5;
   --nile-badge-color-background-success: #a5f3e1;
+  --nile-badge-color-background-purple: #f4f3ff;
+  --nile-badge-color-background-primary: #005ea6;
+  --nile-badge-color-background-pink: #fdf2fa;
+  --nile-badge-color-background-orange: #fef6ee;
+  --nile-badge-color-background-normal: #e5e9eb;
+  --nile-badge-color-background-info: #a5d3f3;
+  --nile-badge-color-background-indigo: #eef4ff;
+  --nile-badge-color-background-grayblue: #f8f9fc;
+  --nile-badge-color-background-gray: #f9fafb;
   --nile-badge-color-background-error: #f3a5aa;
+  --nile-badge-color-background-brand: #eaf0f8;
+  --nile-badge-color-background-bluelight: #f0f9ff;
+  --nile-badge-color-background-blue: #eff8ff;
+  --nile-avatar-background-color-pink: #c11574;
+  --nile-avatar-background-color-orange: #e04f16;
+  --nile-avatar-background-color-lightblue: #0086c9;
+  --nile-avatar-background-color-green: #079455;
+  --nile-avatar-background-color-blue: #3538cd;
   --nile-asset-icon-x-circle: assets/icons/x-circle.svg;
   --nile-asset-icon-writeexpression: assets/icons/writeexpression.svg;
   --nile-asset-icon-workflow-text: assets/icons/workflow-text.svg;
@@ -436,6 +487,7 @@
   --nile-asset-icon-priority-low: assets/icons/priority-low.svg;
   --nile-asset-icon-priority-highest: assets/icons/priority-highest.svg;
   --nile-asset-icon-priority-high: assets/icons/priority-high.svg;
+  --nile-asset-icon-printer: assets/icons/printer.svg;
   --nile-asset-icon-preview: assets/icons/preview.svg;
   --nile-asset-icon-prev-up: assets/icons/prev-up.svg;
   --nile-asset-icon-prev: assets/icons/prev.svg;
@@ -492,6 +544,8 @@
   --nile-asset-icon-multiple-user: assets/icons/multiple-user.svg;
   --nile-asset-icon-moveright: assets/icons/moveright.svg;
   --nile-asset-icon-moveleft: assets/icons/moveleft.svg;
+  --nile-asset-icon-mouse: assets/icons/mouse.svg;
+  --nile-asset-icon-monitor-01: assets/icons/monitor-01.svg;
   --nile-asset-icon-minus: assets/icons/minus.svg;
   --nile-asset-icon-message-notification-square: assets/icons/message-notification-square.svg;
   --nile-asset-icon-menu: assets/icons/menu.svg;
@@ -530,6 +584,7 @@
   --nile-asset-icon-layers-three-01: assets/icons/layers-three-01.svg;
   --nile-asset-icon-laptop-01: assets/icons/laptop-01.svg;
   --nile-asset-icon-kill: assets/icons/kill.svg;
+  --nile-asset-icon-keyboard-01: assets/icons/keyboard-01.svg;
   --nile-asset-icon-key-performance-indicator: assets/icons/key-performance-indicator.svg;
   --nile-asset-icon-js: assets/icons/js.svg;
   --nile-asset-icon-itemplaceholder: assets/icons/itemplaceholder.svg;
@@ -554,6 +609,7 @@
   --nile-asset-icon-help-circle: assets/icons/help-circle.svg;
   --nile-asset-icon-help-1: assets/icons/help-1.svg;
   --nile-asset-icon-help: assets/icons/help.svg;
+  --nile-asset-icon-headphones-01: assets/icons/headphones-01.svg;
   --nile-asset-icon-header-variable: assets/icons/header-variable.svg;
   --nile-asset-icon-header-tasks: assets/icons/header-tasks.svg;
   --nile-asset-icon-header-functions: assets/icons/header-functions.svg;
@@ -620,6 +676,7 @@
   --nile-asset-icon-file-type-icon: assets/icons/file-type-icon.svg;
   --nile-asset-icon-file-shield-02: assets/icons/file-shield-02.svg;
   --nile-asset-icon-file-shield-01: assets/icons/file-shield-01.svg;
+  --nile-asset-icon-file-check-02: assets/icons/file-check-02.svg;
   --nile-asset-icon-file-06: assets/icons/file-06.svg;
   --nile-asset-icon-file: assets/icons/file.svg;
   --nile-asset-icon-featured-icon: assets/icons/featured-icon.svg;
@@ -786,6 +843,7 @@
   --nile-asset-icon-allsearch: assets/icons/allsearch.svg;
   --nile-asset-icon-allapplication: assets/icons/allapplication.svg;
   --nile-asset-icon-alert-circle: assets/icons/alert-circle.svg;
+  --nile-asset-icon-alert: assets/icons/alert.svg;
   --nile-asset-icon-aggregation: assets/icons/aggregation.svg;
   --nile-asset-icon-agents: assets/icons/agents.svg;
   --nile-asset-icon-agent: assets/icons/agent.svg;