@aquera/nile-elements 1.0.1-beta-1.1 → 1.0.1-beta-1.3

package/src/nile-toast/nile-toast.ts

@@ -83,7 +83,7 @@ export class NileToast extends NileElement {
 
   @property({ type: String, reflect: true }) prefixImageUrl = '';
   
-  @property({ type: String, reflect: true }) closeIconName = 'close';
+  @property({ type: String, reflect: true }) closeIconName = 'var(--nile-icon-close, var(--ng-icon-x-close))';
 
   /** The alert's theme variant. */
   @property({ reflect: true }) variant:
@@ -192,17 +192,17 @@ export class NileToast extends NileElement {
   getIconNameByVariant() {
     switch (this.variant) {
       case 'success':
-        return 'check-circle';
+        return 'var(--nile-icon-check-circle, var(--ng-icon-check-circle))';
       case 'info':
-        return 'info-circle';
+        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
       case 'warning':
-        return 'alert-circle';
+        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';
       case 'error':
-        return 'alert-circle';
+        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';
       case 'gray':
-        return 'info-circle';
+        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
       case 'black':
-        return 'info-circle';
+        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
     }
   }
 
@@ -315,7 +315,7 @@ export class NileToast extends NileElement {
                     name="${this.getIconNameByVariant()}"
                     size="20"
                     color="${this.getIconColorByVariant()}"
-                    method="stroke"
+                    method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))"
                   ></nile-icon>
                 </div>
               `

package/src/nile-tree-item/nile-tree-item.ts

@@ -258,10 +258,10 @@ export class NileTreeItem extends NileElement {
           >
             ${when(this.loading, () => html` <nile-spinner></nile-spinner> `)}
             <slot class="tree-item__expand-icon-slot" name="expand-icon">
-              <nile-icon library="system" name=${isRtl ? 'arrowleft' : 'arrowright'}></nile-icon>
+              <nile-icon library="system" name=${isRtl ? 'var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))' : 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))'} method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
             </slot>
             <slot class="tree-item__expand-icon-slot" name="collapse-icon">
-              <nile-icon library="system" name=${isRtl ? 'arrowleft' : 'arrowright'}></nile-icon>
+              <nile-icon library="system" name=${isRtl ? 'var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))' : 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))'} method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
             </slot>
           </div>
 

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -1,4 +1,4 @@
-/**
+ /**
  * Copyright Aquera Inc 2025
  *
  * This source code is licensed under the BSD-3-Clause license found in the
@@ -1050,7 +1050,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
             tabindex="-1"
           >
             <slot name="clear-icon">
-              <nile-icon name="close" library="system"></nile-icon>
+              <nile-icon name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
             </slot>
           </button>
         `
@@ -1076,7 +1076,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         part="expand-icon"
         class="select__expand-icon"
       >
-        <nile-icon library="system" name="arrowdown"></nile-icon>
+        <nile-icon library="system" name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
       </slot>
     `;
   }
@@ -1117,7 +1117,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
               @nile-focus=${this.handleSearchFocus}
               @nile-change="${this.onInputChange}"
             >
-              <nile-icon name="search" slot="suffix"> </nile-icon>
+              <nile-icon name="var(--nile-icon-search, var(--ng-icon-search-lg))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="suffix"> </nile-icon>
             </nile-input>
           </div>
         `
@@ -1130,7 +1130,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
           <span class="select__loader">
             <nile-icon
               class="select__loader--icon"
-              name="button-loading-blue"
+              name="var(--nile-icon-button-loading-blue, var(--ng-icon-button-loading-blue))"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>
           </span>
         `

package/vscode-html-custom-data.json

@@ -143,7 +143,7 @@
         },
         {
           "name": "icon",
-          "description": "`icon` {`string`} - Gives the icon to the Avatar\n\nProperty: icon\n\nDefault: user"
+          "description": "`icon` {`string`} - Gives the icon to the Avatar\n\nProperty: icon\n\nDefault: var(--nile-icon-user, var(--ng-icon-user-01))"
         },
         {
           "name": "name",
@@ -282,7 +282,7 @@
       "attributes": [
         {
           "name": "separator",
-          "description": "`separator` {`string`} - Render method\n\nProperty: separator\n\nDefault: arrowright"
+          "description": "`separator` {`string`} - Render method\n\nProperty: separator\n\nDefault: var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
         }
       ]
     },
@@ -859,7 +859,7 @@
         },
         {
           "name": "expandIcon",
-          "description": "`expandIcon` {`string`} - \n\nProperty: expandIcon\n\nDefault: expand-2"
+          "description": "`expandIcon` {`string`} - \n\nProperty: expandIcon\n\nDefault: var(--nile-icon-expand-2, var(--ng-icon-expand-06))"
         },
         {
           "name": "placeholder",
@@ -1381,7 +1381,7 @@
         },
         {
           "name": "icon",
-          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: error"
+          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: var(--nile-icon-error, var(--ng-icon-x-circle))"
         },
         {
           "name": "grayscale",
@@ -1875,7 +1875,7 @@
       "attributes": [
         {
           "name": "icon",
-          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: action"
+          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: var(--nile-icon-action, var(--ng-icon-action))"
         },
         {
           "name": "hero-text",
@@ -1889,7 +1889,7 @@
       "attributes": [
         {
           "name": "icon",
-          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: action"
+          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: var(--nile-icon-action, var(--ng-icon-action))"
         },
         {
           "name": "collapse",
@@ -4126,7 +4126,7 @@
         },
         {
           "name": "closeIconName",
-          "description": "`closeIconName` {`string`} - \n\nProperty: closeIconName\n\nDefault: close"
+          "description": "`closeIconName` {`string`} - \n\nProperty: closeIconName\n\nDefault: var(--nile-icon-close, var(--ng-icon-x-close))"
         },
         {
           "name": "variant",