@aquera/nile-elements 1.6.3 → 1.6.4-patch-1

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.4-patch-1",
   "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

@@ -586,13 +586,7 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    if(this.readonly || this.disabled) {
-      return [
-        EditorState.readOnly.of(true),
-        EditorView.editable.of(false),
-      ]
-    }
-    return [];
+    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
   }
 
   getSingleLineExtension() {

package/src/nile-dropdown/nile-dropdown.ts

@@ -289,6 +289,9 @@ export class NileDropdown extends NileElement {
     if(this.noOpenOnClick){
       return;
     }
+    if (this.disabled || this.isTriggerDisabled()) {
+      return;
+    }
     if (this.open) {
       this.hide();
     } else {
@@ -353,6 +356,11 @@ export class NileDropdown extends NileElement {
     this.updateAccessibleTrigger();
   }
 
+  private isTriggerDisabled(): boolean {
+    const trigger = this.querySelector('[slot="trigger"]') as any;
+    return trigger?.hasAttribute?.('disabled');
+  }
+
   //
   // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
   // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
@@ -387,7 +395,7 @@ export class NileDropdown extends NileElement {
 
   /** Shows the dropdown panel. */
   async show() {
-    if (this.open) {
+    if (this.open || this.disabled || this.isTriggerDisabled()) {
       return undefined;
     }
 
@@ -429,6 +437,8 @@ export class NileDropdown extends NileElement {
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
+  private _triggerDisabledByDropdown = false;
+
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     
@@ -451,17 +461,21 @@ export class NileDropdown extends NileElement {
   private updateTriggerDisabledState() {
     const trigger = this.querySelector('[slot="trigger"]') as any;
     if (!trigger) return;
-    const triggerAlreadyDisabled = trigger.hasAttribute('disabled');
-    if (this.disabled || triggerAlreadyDisabled) {
+    if (this.disabled) {
+      if (!trigger.disabled) {
+        this._triggerDisabledByDropdown = true;
+      }
       trigger.disabled = true;
-      this.disabled = true;
+    } else if (this._triggerDisabledByDropdown) {
+      trigger.disabled = false;
+      this._triggerDisabledByDropdown = false;
     }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     this.visibilityManager?.setup();
-    if (this.disabled) {
+    if (this.open && (this.disabled || this.isTriggerDisabled())) {
       this.open = false;
       return;
     }

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-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/vscode-html-custom-data.json

@@ -1552,7 +1552,7 @@
     },
     {
       "name": "nile-dropdown",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the dropdown opens.\n\n  * `nile-after-show` {} - Emitted after the dropdown opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the dropdown closes.\n\n  * `nile-after-hide` {} - Emitted after the dropdown closes and all animations are complete.\n\nSlots:\n\n  * ` ` {} - The dropdown's main content.\n\n  * `trigger` {} - The dropdown's trigger, usually a `<nile-button>` element.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stay-open-on-select` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stayOpenOnSelect` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `containingElement` {`HTMLElement | undefined`} - The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `portalManager` - \n\n  * `visibilityManager` - \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 dropdown opens.\n\n  * `nile-after-show` {} - Emitted after the dropdown opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the dropdown closes.\n\n  * `nile-after-hide` {} - Emitted after the dropdown closes and all animations are complete.\n\nSlots:\n\n  * ` ` {} - The dropdown's main content.\n\n  * `trigger` {} - The dropdown's trigger, usually a `<nile-button>` element.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stay-open-on-select` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n  * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n  * `stayOpenOnSelect` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n  * `containingElement` {`HTMLElement | undefined`} - The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n  * `noOpenOnClick` {`boolean`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `portalManager` - \n\n  * `visibilityManager` - \n\n  * `_triggerDisabledByDropdown` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -3514,7 +3514,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 +3542,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",