@aquera/nile-elements 0.1.14 → 0.1.16

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "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-checkbox/nile-checkbox.ts

@@ -216,7 +216,7 @@ export class NileCheckbox extends NileElement {
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
         />
- 
+
         <span
           part="control${this.checked ? ' control--checked' : ''}${this
             .indeterminate
@@ -249,24 +249,17 @@ export class NileCheckbox extends NileElement {
               `
             : ''}
         </span>
- 
+
         <div part="label" class="checkbox__label">
           ${typeof this.label === 'boolean' ? '' : this.label}
           <slot></slot>
         </div>
       </label>
- 
+
       ${hasHelpText
-        ? html`
-            <nile-tooltip content="${this.helpText}" placement="bottom">
-              <nile-icon
-                name="question"
-                class="checkbox__helptext-icon"
-              ></nile-icon>
-            </nile-tooltip>
-          `
+        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
         : ``}
- 
+        
       ${hasErrorMessage
         ? html`
             <nile-form-error-message

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.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

@@ -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",