@aquera/nile-elements 0.1.15 → 0.1.17

package/package.json

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

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

@@ -71,158 +71,158 @@ export const styles = css`
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-button-primary);
-    border-color: var(--nile-colors-button-primary-border);
-    color: var(--nile-colors-button-primary-text);
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-primary-hover);
-    border-color: var(--nile-colors-button-primary-hover);
-    color: var(--nile-colors-button-primary-text);
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-700);
+    color: var(--nile-colors-white-base);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-primary-pressed);
-    border-color: var(--nile-colors-button-primary-pressed-border);
-    color: var(--nile-colors-button-primary-text);
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
       0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-button-primary-disabled);
-    border-color: var(--nile-colors-button-primary-disabled);
-    color: var(--nile-colors-button-primary-disabled-text);
+    background-color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-button-primary-disabled);
-    border-color: var(--nile-colors-button-primary-disabled);
-    color: var(--nile-colors-button-primary-disabled-text);
+    background-color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
   }
 
   /*  Secondary */
   .button--standard.button--secondary {
-    background-color: var(--nile-colors-button-secondary);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-hover);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-pressed);
-    border-color: var(--nile-colors-button-secondary-pressed-border);
-    color: var(--nile-colors-button-secondary-text);
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary.button--disabled:hover,
   .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
     cursor: not-allowed;
   }
 
   /* Tertiary */
   .button--standard.button--tertiary {
-    background-color: var(--nile-colors-button-tertiary);
-    border-color: var(--nile-colors-button-tertiary-border);
-    color: var(--nile-colors-button-tertiary-text);
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--tertiary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-tertiary-hover);
+    background-color: var(--nile-colors-dark-200);
     border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-button-tertiary-text);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--tertiary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-tertiary-pressed);
-    border-color: var(--nile-colors-button-tertiary-pressed-border);
-    color: var(--nile-colors-button-tertiary-text);
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--tertiary.button--disabled,
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
     border-color: var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-button-tertiary-disabled);
-    color: var(--nile-colors-button-tertiary-disabled-text);
+    background-color: var(--nile-colors-white-base);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
     box-shadow: none;
   }
 
   /* ghost  */
   .button--standard.button--ghost {
-    background-color: var(--nile-colors-button-tertiary);
+    background-color: var(--nile-colors-white-base);
     border-color: transparent;
-    color: var(--nile-colors-button-tertiary-text);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--ghost:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-tertiary-hover);
+    background-color: var(--nile-colors-dark-200);
     border-color: transparent;
-    color: var(--nile-colors-button-tertiary-text);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--ghost:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-tertiary-pressed);
+    background-color: var(--nile-colors-neutral-400);
     border-color: transparent;
-    color: var(--nile-colors-button-tertiary-text);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
     border-color: transparent;
-    background-color: var(--nile-colors-button-tertiary-disabled);
-    color: var(--nile-colors-button-tertiary-disabled-text);
+    background-color: var(--nile-colors-white-base);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
     box-shadow: none;
   }
 
   /* caution */
   .button--standard.button--caution {
-    background-color: var(--nile-colors-button-caution);
-    border-color: var(--nile-colors-button-caution);
-    color: var(--nile-colors-button-caution-text);
+    background-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500);
+    color: var(--nile-colors-white-base);
   }
 
   .button--standard.button--caution:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-caution-hover);
-    border-color: var(--nile-colors-button-caution-hover);
-    color: var(--nile-colors-button-caution-text);
+    background-color: var(--nile-colors-red-700);
+    border-color: var(--nile-colors-red-700);
+    color: var(--nile-colors-white-base);
   }
 
   .button--standard.button--caution:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-caution-pressed);
-    border-color: var(--nile-colors-button-caution-pressed-border);
-    color: var(--nile-colors-button-caution-text);
+    background-color: var(--nile-colors-red-700);
+    border-color: #820B0B;
+    color: var(--nile-colors-white-base);
   }
 
   .button--standard.button--caution.button--disabled,
   .button--standard.button--caution.button--disabled:hover,
   .button--standard.button--caution.button--disabled:active {
-    background-color: var(--nile-colors-button-caution-disabled);
-    border-color: var(--nile-colors-button-caution-disabled);
-    color: var(--nile-colors-button-caution-disabled-text);
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-neutral-400);
   }
 
   /* destructive */
@@ -294,7 +294,7 @@ export const styles = css`
 
   .button--standard.button--secondary-grey.button--disabled {
     background-color: #eaecf0;
-    border-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-neutral-700);
     color: #98a2b3;
     cursor: not-allowed;
   }
@@ -302,7 +302,7 @@ export const styles = css`
   .button--standard.button--secondary-grey.button--disabled:hover,
   .button--standard.button--secondary-grey.button--disabled:active {
     background-color: #eaecf0;
-    border-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-neutral-700);
     color: #98a2b3;
     cursor: not-allowed;
   }
@@ -347,78 +347,72 @@ export const styles = css`
 
   /* Primary Variant - Nile Icon Fill */
   .button--standard.button--primary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--primary:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--primary:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
   }
 
   /* Secondary Variant */
   .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--secondary:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--secondary:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(
-      --nile-colors-button-secondary-disabled-text
-    ) !important;
+    --nile-svg-fill: var(--nile-colors-dark-500) !important;
   }
 
   /* Tertiary Variant */
   .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--tertiary:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--tertiary:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(
-      --nile-colors-button-tertiary-disabled-text
-    ) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
   }
 
   /* Ghost Variant */
   .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--ghost:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--ghost:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(
-      --nile-colors-button-tertiary-disabled-text
-    ) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
   }
 
   /* Caution Variant */
   .button--standard.button--caution ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--caution:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-400) !important;
   }
 
   /* destructive */

package/src/nile-checkbox/nile-checkbox.test.ts

@@ -2,6 +2,10 @@ import { fixture, html, expect, oneEvent } from '@open-wc/testing';
 import './nile-checkbox';
 import { NileCheckbox } from './nile-checkbox';
 
+function wait(ms:number=50000) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 describe('NileCheckbox', () => {
   it('renders correctly with default properties', async () => {
     const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);
@@ -83,9 +87,8 @@ describe('NileCheckbox', () => {
     const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text="test-help"></nile-checkbox>`);
     el.showHelpText = true;
     await el.updateComplete;
-
-    const helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
-    expect(helpTextIcon).to.exist;
+    const helpText=el.shadowRoot?.querySelector("nile-form-help-text")?.textContent?.trim()
+    expect(helpText).to.equal('test-help')
   });
 
   it('updates host class based on helpText', async () => {
@@ -166,23 +169,5 @@ describe('NileCheckbox', () => {
     expect(checkbox.getAttribute('form')).to.equal('test-form');
   });
 
-  it('displays and hides help text correctly', async () => {
-    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text="test-help"></nile-checkbox>`);
-
-    // Initially, help text should not be shown
-    expect(el.showHelpText).to.be.false;
-
-    // Show the help text
-    el.showHelpText = true;
-    await el.updateComplete;
-    let helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
-    expect(helpTextIcon).to.exist;
-
-    // Hide the help text
-    el.showHelpText = false;
-    await el.updateComplete;
-    helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');
-    expect(helpTextIcon).to.be.exist;
-  });
 });
 

package/src/nile-code-editor/nile-code-editor.ts

@@ -21,7 +21,7 @@ import {
   EditorState,
   Extension
 } from '@codemirror/state';
-
+import { StyleSpec } from 'style-mod';
 import {
   syntaxHighlighting,
   defaultHighlightStyle,
@@ -39,7 +39,7 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme, CustomTheme } from './theme';
+import { Theme as DefaultTheme, CustomTheme } from './theme';
 
 // Choose the appropriate mode for your use case
 
@@ -80,7 +80,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: false }) disableSyntaxHighlighting: boolean = false;
 
-  @property({ type: Boolean, reflect: true , attribute: false }) useCustomTextFormatting: boolean = false;
+  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = null;
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
 
@@ -105,6 +105,7 @@ export class NileCodeEditor extends NileElement {
   private customCompletionComp = new Compartment();
   private placeholderComp = new Compartment();
   private defaultSyntaxHighlightingComp = new Compartment();
+  private themeComp = new Compartment();
 
   /**
    * The styles for CodeEditor
@@ -186,6 +187,13 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if(changedProperties.has('customThemeCSS')){
+      this.view.dispatch({ 
+        effects: [
+          this.themeComp.reconfigure(this.getCustomThemeExtension())
+        ]
+      })
+    }
   }
 
   public render(): TemplateResult {
@@ -239,6 +247,7 @@ export class NileCodeEditor extends NileElement {
     const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
     const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
     const placeholderExtension = this.placeholderComp.of(this.getPlaceholderExtension())
+    const customThemeExtension=this.themeComp.of(this.getCustomThemeExtension());
     const defaultSyntaxHighlightingExtension = this.defaultSyntaxHighlightingComp.of(this.getDefaultSyntaxHighlightingExtension());
     const language = this.getLanguageExtension()
     const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
@@ -260,7 +269,7 @@ export class NileCodeEditor extends NileElement {
         defaultSyntaxHighlightingExtension,
         autocompletion(),
         language,
-        EditorView.theme(this.useCustomTextFormatting?CustomTheme:Theme),
+        customThemeExtension,
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
             this.debounce ? this.emitAfterTimeout({ value: this.view.state.doc.toString() }) : this.emit('nile-change', { value: this.view.state.doc.toString() })
@@ -447,6 +456,13 @@ export class NileCodeEditor extends NileElement {
     return !this.disableSyntaxHighlighting ? syntaxHighlighting(defaultHighlightStyle, { fallback: true }):[]
   }
 
+  getCustomThemeExtension(): Extension {
+    if (this.customThemeCSS) {
+      return EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec });
+    }
+    return EditorView.theme(DefaultTheme);
+  }
+
   restrictSingleLine() {
     return EditorState.transactionFilter.of(tr =>
       tr.newDoc.lines > 1 ? [] : tr

package/src/nile-form-group/nile-form-group.css.ts

@@ -22,7 +22,7 @@ export const styles = css`
     width: max-content;
     box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
     border-radius: var(--nile-radius-base-standard);
-    border: 1px solid var(--nile-colors-button-secondary);
+    border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
     font-family: var(--nile-font-family-serif);
   }

package/src/nile-stepper-item/nile-stepper-item.css.ts

@@ -17,7 +17,6 @@ export const styles = css`
 		
 		display:inline-block;
 		flex-grow:var(--stepper-flex-val);
-		color: var(--nile-stepper-color-text-default);
 		min-width:var(--nile-stepper-min-width);
 	}
 	

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

@@ -159,12 +159,12 @@ export const styles = css`
     height: 24px;
     display: flex;
     border-radius: 4px;
-    border: 1px solid #e5e9eb;
+    border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
 
   .alert__tag-content {
-    border-left: 1px solid #e5e9eb;
+    border-left: 1px solid var(--nile-colors-neutral-400);
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -82,6 +82,8 @@ export class NileToast extends NileElement {
   @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;
 
   @property({ type: String, reflect: true }) prefixImageUrl = '';
+  
+  @property({ type: String, reflect: true }) closeIconName = 'close';
 
   /** The alert's theme variant. */
   @property({ reflect: true }) variant:
@@ -366,7 +368,7 @@ export class NileToast extends NileElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 class="alert__close-button"
-                name="close"
+                name="${this.closeIconName}"
                 label="close"
                 size="20"
                 color="#98A2B3"

package/vscode-html-custom-data.json

@@ -784,7 +784,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `useCustomTextFormatting` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -3621,7 +3621,7 @@
     },
     {
       "name": "nile-toast",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the alert opens.\n\n  * `nile-after-show` {} - Emitted after the alert opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the alert closes.\n\n  * `nile-after-hide` {} - Emitted after the alert closes and all animations are complete.\n\nSlots:\n\n  * ` ` {} - The alert's main content.\n\n  * `icon` {} - An icon to show in the alert. Works best with `<nile-icon>`.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n\n  * `noIcon` {`boolean`} - \n\n  * `closable` {`boolean`} - Enables a close button that allows the user to dismiss the alert.\n\n  * `hasSlottedContent` {`boolean`} - \n\n  * `hasSlottedIcon` {`boolean`} - \n\n  * `prefixImageUrl` {`string`} - \n\n  * `variant` {`\"success\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"black\"`} - The alert's theme variant.\n\n  * `duration` {`number`} - The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.\n\n  * `title` {`string`} - \n\n  * `content` {`string`} - \n\n  * `tags` {`any[]`} - \n\nProperties:\n\n  * `styles` - \n\n  * `autoHideTimeout` {`number`} - \n\n  * `hasSlotController` - \n\n  * `base` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n\n  * `noIcon` {`boolean`} - \n\n  * `closable` {`boolean`} - Enables a close button that allows the user to dismiss the alert.\n\n  * `hasSlottedContent` {`boolean`} - \n\n  * `hasSlottedIcon` {`boolean`} - \n\n  * `prefixImageUrl` {`string`} - \n\n  * `variant` {`\"success\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"black\"`} - The alert's theme variant.\n\n  * `duration` {`number`} - The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.\n\n  * `title` {`string`} - \n\n  * `content` {`string`} - \n\n  * `tags` {`any[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the alert opens.\n\n  * `nile-after-show` {} - Emitted after the alert opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the alert closes.\n\n  * `nile-after-hide` {} - Emitted after the alert closes and all animations are complete.\n\nSlots:\n\n  * ` ` {} - The alert's main content.\n\n  * `icon` {} - An icon to show in the alert. Works best with `<nile-icon>`.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n\n  * `noIcon` {`boolean`} - \n\n  * `closable` {`boolean`} - Enables a close button that allows the user to dismiss the alert.\n\n  * `hasSlottedContent` {`boolean`} - \n\n  * `hasSlottedIcon` {`boolean`} - \n\n  * `prefixImageUrl` {`string`} - \n\n  * `closeIconName` {`string`} - \n\n  * `variant` {`\"success\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"black\"`} - The alert's theme variant.\n\n  * `duration` {`number`} - The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.\n\n  * `title` {`string`} - \n\n  * `content` {`string`} - \n\n  * `tags` {`any[]`} - \n\nProperties:\n\n  * `styles` - \n\n  * `autoHideTimeout` {`number`} - \n\n  * `hasSlotController` - \n\n  * `base` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n\n  * `noIcon` {`boolean`} - \n\n  * `closable` {`boolean`} - Enables a close button that allows the user to dismiss the alert.\n\n  * `hasSlottedContent` {`boolean`} - \n\n  * `hasSlottedIcon` {`boolean`} - \n\n  * `prefixImageUrl` {`string`} - \n\n  * `closeIconName` {`string`} - \n\n  * `variant` {`\"success\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"black\"`} - The alert's theme variant.\n\n  * `duration` {`number`} - The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.\n\n  * `title` {`string`} - \n\n  * `content` {`string`} - \n\n  * `tags` {`any[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -3652,6 +3652,10 @@
           "name": "prefixImageUrl",
           "description": "`prefixImageUrl` {`string`} - \n\nProperty: prefixImageUrl\n\nDefault: "
         },
+        {
+          "name": "closeIconName",
+          "description": "`closeIconName` {`string`} - \n\nProperty: closeIconName\n\nDefault: close"
+        },
         {
           "name": "variant",
           "description": "`variant` {`\"success\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"black\"`} - The alert's theme variant.\n\nProperty: variant\n\nDefault: success",