@aquera/nile-elements 1.6.3 → 1.6.5

package/package.json

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

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

@@ -516,6 +516,11 @@ export const styles = css`
   .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
+
+  .button--standard.button--ghost.button--disabled ::slotted(nile-icon:not([color])) {
+    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;
+  }
+  
   .button--standard.button--ghost:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--ghost:active:not(.button--disabled)

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

@@ -39,7 +39,7 @@ import { autocompletion,acceptCompletion, closeCompletion,CompletionContext,Comp
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss, fontFamily, readOnlyTheme } from './theme';
 import { keymap } from '@codemirror/view';
 
 // Choose the appropriate mode for your use case
@@ -109,6 +109,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Object, attribute: false }) autoCompleteStyle: { width?: string; multiline?: boolean } | undefined = undefined;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) hideReadOnlyCursor: boolean = false; 
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -586,12 +588,21 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    if(this.readonly || this.disabled) {
+    if (this.disabled) {
       return [
         EditorState.readOnly.of(true),
         EditorView.editable.of(false),
-      ]
+      ];
+    }
+
+    if (this.readonly) {
+      const extensions = [EditorState.readOnly.of(true)];
+      if (this.hideReadOnlyCursor) {
+        extensions.push(EditorView.theme(readOnlyTheme));
+      }
+      return extensions;
     }
+
     return [];
   }
 

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

@@ -164,3 +164,9 @@ export const customisedThemeCss = {
     marginLeft: '18px',
   }
 };
+
+export const readOnlyTheme = {
+  '.cm-cursor': { 
+    display: 'none !important' 
+  },
+};

package/src/nile-icon/icons/svg/arrow-left-small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xNDM2IDYuOTk4MDNMOC44OTk4NSA5Ljc1NDI4TDguMzU4MDggMTAuMjk2MUw1LjA2MDA2IDYuOTk4MDNMOC4zNTgwOCAzLjcwMDAxTDguODk5ODUgNC4yNDE3OEw2LjE0MzYgNi45OTgwM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/arrow-right-small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy44MTYzMSA2Ljk5ODAzTDUuMDYwMDYgNC4yNDE3OEw1LjYwMTgzIDMuNzAwMDFMOC44OTk4NSA2Ljk5ODAzTDUuNjAxODMgMTAuMjk2MUw1LjA2MDA2IDkuNzU0MjhMNy44MTYzMSA2Ljk5ODAzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/arrow_left_small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xNDM2IDYuOTk4MDNMOC44OTk4NSA5Ljc1NDI4TDguMzU4MDggMTAuMjk2MUw1LjA2MDA2IDYuOTk4MDNMOC4zNTgwOCAzLjcwMDAxTDguODk5ODUgNC4yNDE3OEw2LjE0MzYgNi45OTgwM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/arrow_right_small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy44MTYzMSA2Ljk5ODAzTDUuMDYwMDYgNC4yNDE3OEw1LjYwMTgzIDMuNzAwMDFMOC44OTk4NSA2Ljk5ODAzTDUuNjAxODMgMTAuMjk2MUw1LjA2MDA2IDkuNzU0MjhMNy44MTYzMSA2Ljk5ODAzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -25,8 +25,12 @@ export { default as arrayofinteger } from './array-of-integer';
 export { default as arrayofstring } from './array-of-string';
 export { default as array } from './array';
 export { default as arrayofobject } from './arrayofobject';
+export { default as arrowleftsmall } from './arrow-left-small';
 export { default as arrownarrowleft } from './arrow-narrow-left';
+export { default as arrowrightsmall } from './arrow-right-small';
 export { default as arrow } from './arrow';
+export { default as arrow_left_small } from './arrow_left_small';
+export { default as arrow_right_small } from './arrow_right_small';
 export { default as arrowdown } from './arrowdown';
 export { default as arrowdropdown } from './arrowdropdown';
 export { default as arrowdropup } from './arrowdropup';

package/src/nile-inline-edit/nile-inline-edit.css.ts

@@ -64,6 +64,7 @@ export const styles = css`
   background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   cursor: not-allowed;
+  user-select: none;
 }
 
 `;

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

@@ -39,7 +39,6 @@ export const styles = css`
   .menu-item {
     position: relative;
     display: flex;
-    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
     align-items: stretch;
     font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
@@ -54,6 +53,11 @@ export const styles = css`
     padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
+  .menu-item.menu-item--active {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+  }
+
   .menu-item.menu-item--disabled {
     outline: none;
     opacity: 0.5;
@@ -89,11 +93,16 @@ export const styles = css`
     outline: none;
   }
 
-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
     background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 
+  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+  }
+
   :host(:focus-visible) .menu-item {
     outline: none;
     background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));

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

@@ -65,6 +65,9 @@ export class NileMenuItem extends NileElement {
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Draws the menu item in an active/selected state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
   /** Draws the item in a checked state. */
   @property({ type: Boolean, reflect: true }) hasSubMenu = false;
 
@@ -152,7 +155,8 @@ export class NileMenuItem extends NileElement {
           'menu-item': true,
           'menu-item--checked': this.checked,
           'menu-item--disabled': this.disabled,
-          'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
+          'menu-item--active': this.active,
+          'menu-item--has-submenu': this.hasSubMenu,
         })}
       >
         ${this.checked

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

@@ -382,6 +382,12 @@ export const styles = css`
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
   }
 
+  .prev-button[disabled]::part(base) {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  }
+  .next-button[disabled]::part(base) {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  }
 `;
 
 export default [styles];

package/src/nile-radio-group/nile-radio-group.ts

@@ -8,6 +8,7 @@ import NileElement from '../internal/nile-element';
 import styles from './nile-radio-group.css';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import type NileRadio from '../nile-radio/nile-radio';
+import { Nile_Events } from '../internal/enum';
 
 /**
  * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
@@ -111,9 +112,13 @@ export class NileRadioGroup extends NileElement {
     if (!this.allowUncheckGroup && this.value !== oldValue) {
       this.emit('change', { value: this.value});
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value});
     } else if (this.allowUncheckGroup) { 
       this.emit('change', { value: this.value , checked: target.checked});
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value , checked: target.checked});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value , checked: target.checked});
     }
   }
 
@@ -183,6 +188,8 @@ export class NileRadioGroup extends NileElement {
     if (this.value !== oldValue) {
       this.emit('change');
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value});
     }
 
     event.preventDefault();

package/src/nile-rich-text-editor/utils/list-utils.ts

@@ -3,8 +3,7 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
   if (!sel || sel.rangeCount === 0) return;
   const range = sel.getRangeAt(0);
   function styleList(list: HTMLElement) {
-    list.style.paddingInlineStart = '0';
-    list.style.margin = '0';
+        list.style.margin = '0';
   }
 
   function isEmptyBlock(el: HTMLElement) {

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -94,7 +94,7 @@ export default css`
 
   .nile-slide-toggle__slider:hover {
     &:not(.nile-slide--disabled) {
-      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));
+      background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-quaternary-alt));
     }
   }
 
@@ -115,6 +115,10 @@ export default css`
     background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
   }
 
+  .nile-slide-toggle__switch:hover input:checked + .nile-slide-toggle__slider {
+    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
+  }
+
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
     --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
     --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
@@ -134,7 +138,7 @@ export default css`
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-disabled));
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {

package/vscode-html-custom-data.json

@@ -1081,7 +1081,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  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \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  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `autoCompleteStyle` {`{ width?: string | undefined; multiline?: boolean | undefined; } | undefined`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `resizeObserver` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `autoCompletionComp` - \n\n  * `autoCompleteStyleComp` - \n\n  * `isSpacePressed` {`boolean`} - \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  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `hideReadOnlyCursor` {`boolean`} - \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  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `autoCompleteStyle` {`{ width?: string | undefined; multiline?: boolean | undefined; } | undefined`} - \n\n  * `hideReadOnlyCursor` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `resizeObserver` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `autoCompletionComp` - \n\n  * `autoCompleteStyleComp` - \n\n  * `isSpacePressed` {`boolean`} - \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",
@@ -1209,6 +1209,11 @@
           "description": "`defaultFont` {`boolean`} - \n\nProperty: defaultFont\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "hideReadOnlyCursor",
+          "description": "`hideReadOnlyCursor` {`boolean`} - \n\nProperty: hideReadOnlyCursor\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-focus",
           "description": "`nile-focus` {`Event`} - "
@@ -3514,7 +3519,7 @@
     },
     {
       "name": "nile-menu-item",
-      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The menu item's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `menuItem` {`HTMLElement`} - \n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The menu item's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `menuItem` {`HTMLElement`} - \n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3542,6 +3547,11 @@
           "description": "`disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - Draws the menu item in an active/selected state.\n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "hasSubMenu",
           "description": "`hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperty: hasSubMenu\n\nDefault: false",