@aquera/nile-elements 0.1.67-beta-1.7 → 0.1.67-beta-1.8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.67-beta-1.7",
+  "version": "0.1.67-beta-1.8",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -87,7 +87,8 @@
     "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js",
     "./nile-pagination": "./dist/src/nile-pagination/index.js",
-    "./nile-slider": "./dist/src/nile-slider/index.js"
+    "./nile-slider": "./dist/src/nile-slider/index.js",
+    "./nile-option-header": "./dist/src/nile-option-header/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -191,4 +192,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -82,4 +82,4 @@ export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
-export { NileRichTextEditor } from './nile-rich-text-editor';
+export { NileOptionGroup } from './nile-option-group';

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

@@ -171,16 +171,6 @@ export { default as flowmapworkflow } from './flowmap-workflow';
 export { default as flowmap } from './flowmap';
 export { default as folder } from './folder';
 export { default as foreach } from './foreach';
-export { default as format_align_justify } from './format_align_justify';
-export { default as format_align_left } from './format_align_left';
-export { default as format_align_middle } from './format_align_middle';
-export { default as format_align_right } from './format_align_right';
-export { default as format_bold } from './format_bold';
-export { default as format_clear } from './format_clear';
-export { default as format_italic } from './format_italic';
-export { default as format_list_bulleted } from './format_list_bulleted';
-export { default as format_list_numbered } from './format_list_numbered';
-export { default as format_underline } from './format_underline';
 export { default as frequency } from './frequency';
 export { default as fullunion } from './full-union';
 export { default as fullscreen } from './fullscreen';
@@ -224,7 +214,6 @@ export { default as identityledger } from './identityledger';
 export { default as ifelse } from './ifelse';
 export { default as ifelsenew } from './ifelsenew';
 export { default as image } from './image';
-export { default as image_2 } from './image_2';
 export { default as immutable } from './immutable';
 export { default as infoicon } from './info-icon';
 export { default as info } from './info';
@@ -248,7 +237,6 @@ export { default as leftpointarrow } from './leftpointarrow';
 export { default as lifebuoy01 } from './life-buoy-01';
 export { default as line } from './line';
 export { default as link } from './link';
-export { default as link_2 } from './link_2';
 export { default as listattribute } from './list-attribute';
 export { default as list } from './list';
 export { default as loader } from './loader';

package/src/nile-option/nile-option.ts

@@ -68,6 +68,9 @@ export class NileOption extends NileElement {
   /** Indicates whether the option is selected. */
   @property({ type: Boolean, reflect: true }) selected = false;
 
+  /* used to pass group name to the option, so that grouped options can be shown */
+  @property({ type: String }) groupName: string = '';
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');

package/src/nile-option-group/index.ts

@@ -0,0 +1 @@
+export { NileOptionGroup } from './nile-option-group';

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

@@ -0,0 +1,60 @@
+/**
+* Copyright Aquera Inc 2025
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import { css } from 'lit';
+
+/**
+ * OptionHeader CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+
+	.option-group-header {
+		height: 40px;
+		display: flex;
+		align-items: center;
+		padding: 0px 15px;
+		background-color: var(--nile-colors-dark-200);
+		color: var(--nile-colors-dark-900);
+		font-feature-settings: 'liga' off, 'clig' off;
+		font-family: colfax-medium;
+		font-size: 14px;
+		font-weight: 400;
+		width: 100%;
+		box-sizing: border-box;
+		justify-content: space-between;
+	}
+
+	.content-container {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.gap-18px {
+		gap: 14px;
+	}
+
+	.option-group-prefix,
+  .option-group-suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option-group-prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .option-group-suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+`;
+
+export default [styles];

package/src/nile-option-group/nile-option-group.interface.ts

@@ -0,0 +1,24 @@
+export interface IconData {
+  name: string;
+  size?: string;
+  color?: string;
+}
+
+export interface ImageData {
+  src?: string;
+  height?: string;
+  width?: string;
+}
+
+export interface PrefixSuffixData {
+  icon?: IconData;
+  prefixText?: string;
+  suffixText?: string;
+  image?: ImageData;
+}
+
+export interface OptionGroupData {
+  prefix?: PrefixSuffixData;
+  suffix?: PrefixSuffixData;
+  textContent?: string;
+}

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

@@ -0,0 +1,87 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { customElement, property} from 'lit/decorators.js';
+import {styles} from './nile-option-group.css';
+import NileElement from '../internal/nile-element';
+import { OptionGroupData } from './nile-option-group.interface';
+
+@customElement('nile-option-group')
+export class NileOptionGroup extends NileElement {
+
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	@property({type: String}) name: string = "";
+	@property({type: Object}) data: OptionGroupData = {};
+
+	private checkForImageOrIcon() {
+		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
+	}
+
+	private normalizeImageDimension(value?: string | number): string {
+		if (value === undefined || value === null || value === "") {
+			return "20";
+		}
+		
+		const dimension = Number(value);
+		if (isNaN(dimension) || dimension <= 0) {
+			return "20";
+		}	
+		return dimension > 40 ? "25" : dimension.toString();
+	}	
+
+	public render(): TemplateResult {
+		console.log(this.data?.prefix?.image?.src);
+		
+		return html`
+			<div part="option-group-header" class="option-group-header">
+				<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
+					<!-- prefix content -->
+					${
+						this.data?.prefix?.icon?.name
+						? html`<nile-icon name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}"></nile-icon>`
+						: this.data?.prefix?.prefixText
+							? html`<span>${this.data?.prefix?.prefixText}</span>`
+							: this.data?.prefix?.image?.src
+								? html`<img src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
+								: html`<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`
+					}
+
+					<!-- main content -->
+					${
+						this.data?.textContent
+						? html`<span>${this.data?.textContent}</span>`
+						: this.name ? html`<span>${this.name}</span>`
+						: html`<slot part="content"></slot>`
+					}
+				</div>
+
+				<!-- suffix content -->
+				${
+					this.data?.suffix?.icon?.name
+					? html`<nile-icon name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}"></nile-icon>`
+					: this.data?.suffix?.suffixText
+						? html`<span>${this.data?.suffix?.suffixText}</span>`
+						: this.data?.suffix?.image?.src
+							? html`<img src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
+							: html`<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`
+				}
+			</div>
+			`;
+	}
+}
+
+export default NileOptionGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-option-group': NileOptionGroup;
+  }
+}

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

@@ -295,6 +295,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private options: NileOption[] = [];
+  private groupAttributes: NodeListOf<Element>; // for grouped options
 
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
@@ -303,6 +304,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.groupAttributes = document.querySelectorAll('nile-option-group[name]');
+    this.handleGroupSearchChange();
+    
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -379,6 +383,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
+    this.handleGroupShowSelected();
     // this.requestUpdate();
   }
 
@@ -392,6 +397,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       el.selected = false;
       el.hidden = false;
     });
+    this.handleGroupShowSelected();
     this.value = '';
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
@@ -541,6 +547,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.showSelected = false;
       this.value = '';
       this.displayInput.focus({ preventScroll: true });
+      this.handleGroupShowSelected();
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -604,7 +611,7 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-
+      this.handleGroupShowSelected();
       this.requestUpdate();
     }
   }
@@ -642,6 +649,7 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
+      this.handleGroupShowSelected();
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -811,6 +819,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
+    this.handleGroupSearchChange();
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
       if (filteredOptions.length === 0) {
@@ -874,8 +883,11 @@ export class NileSelect extends NileElement implements NileFormControl{
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
-      // Show
       this.emit('nile-show', { value: this.value, name: this.name });
+
+      this.groupAttributes.forEach((el: any) => {
+        el.style.display = 'block';
+      });
       this.addOpenListeners();
 
       this.showNoResults = !this.getAllOptions()?.length;
@@ -921,6 +933,33 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  handleGroupSearchChange() {
+    const filteredOptions = this.filterOptions(this.searchValue);
+    this.groupAttributes.forEach((el: any) => {
+      if(filteredOptions.some((option: any) => option.groupName === el.getAttribute('name'))) {
+        el.style.display = 'block';
+      } else {
+        el.style.display = 'none';
+      }
+    });
+  }
+
+  handleGroupShowSelected() {
+    const allOptions = this.getAllOptions();
+    this.groupAttributes.forEach((el: any) => {
+      const groupName = el.getAttribute('name');
+      if (!this.showSelected) {
+        el.style.display = 'block';
+        return;
+      }
+      const hasVisibleOptions = allOptions.some(
+        (option: any) =>
+          option.groupName === groupName && !option.hidden
+      );
+      el.style.display = hasVisibleOptions ? 'block' : 'none';
+    });
+  }
+
   /** Shows the listbox. */
   async show() {
     if (this.open || this.disabled) {

package/vscode-html-custom-data.json

@@ -2461,9 +2461,23 @@
         }
       ]
     },
+    {
+      "name": "nile-option-group",
+      "description": "Attributes:\n\n  * `name` {`string`} - \n\n  * `data` {`OptionGroupData`} - \n\nProperties:\n\n  * `name` {`string`} - \n\n  * `data` {`OptionGroupData`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "`name` {`string`} - \n\nProperty: name\n\nDefault: "
+        },
+        {
+          "name": "data",
+          "description": "`data` {`OptionGroupData`} - \n\nProperty: data\n\nDefault: [object Object]"
+        }
+      ]
+    },
     {
       "name": "nile-option",
-      "description": "Slots:\n\n  * ` ` {} - The option'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  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `current` {`boolean`} - \n\n  * `hasHover` {`boolean`} - \n\n  * `hidden` {`boolean`} - \n\n  * `isMultipleSelect` {`boolean`} - \n\n  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Slots:\n\n  * ` ` {} - The option'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  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `groupName` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `current` {`boolean`} - \n\n  * `hasHover` {`boolean`} - \n\n  * `hidden` {`boolean`} - \n\n  * `isMultipleSelect` {`boolean`} - \n\n  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `groupName` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -2483,6 +2497,10 @@
           "name": "selected",
           "description": "`selected` {`boolean`} - Indicates whether the option is selected.\n\nProperty: selected\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "groupName",
+          "description": "`groupName` {`string`} - \n\nProperty: groupName\n\nDefault: "
         }
       ]
     },
@@ -2951,168 +2969,6 @@
         }
       ]
     },
-    {
-      "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperties:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "`value` {`string`} - Initial HTML content\n\nProperty: value\n\nDefault: "
-        },
-        {
-          "name": "mentions",
-          "description": "`mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperty: mentions\n\nDefault: [object Object]"
-        },
-        {
-          "name": "oncontent-changed",
-          "description": "`content-changed` {`CustomEvent<{ content: string; }>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-color",
-      "description": "Events:\n\n  * `change` {`CustomEvent<{ mode: \"foreColor\" | \"backColor\"; value: string; }>`} - \n\nAttributes:\n\n  * `mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `palette` {`string[]`} - Default palette, user can override via property or attribute\n\nProperties:\n\n  * `mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `palette` {`string[]`} - Default palette, user can override via property or attribute\n\n  * `recentColors` {`string[]`} - \n\n  * `inputEl` {`HTMLInputElement`} - \n\n  * `pickCustom` - ",
-      "attributes": [
-        {
-          "name": "mode",
-          "description": "`mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\nProperty: mode\n\nDefault: foreColor",
-          "values": [
-            {
-              "name": "foreColor"
-            },
-            {
-              "name": "backColor"
-            }
-          ]
-        },
-        {
-          "name": "label",
-          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: Text Color"
-        },
-        {
-          "name": "value",
-          "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: #000000"
-        },
-        {
-          "name": "palette",
-          "description": "`palette` {`string[]`} - Default palette, user can override via property or attribute\n\nProperty: palette\n\nDefault: #000000,#444444,#666666,#999999,#cccccc,#eeeeee,#ffffff,#d32f2f,#f44336,#ff9800,#ffeb3b,#4caf50,#2196f3,#3f51b5,#9c27b0,#03a9f4,#00bcd4,#009688,#8bc34a,#cddc39,#ffc107,#ff5722"
-        },
-        {
-          "name": "onchange",
-          "description": "`change` {`CustomEvent<{ mode: \"foreColor\" | \"backColor\"; value: string; }>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-divider",
-      "attributes": []
-    },
-    {
-      "name": "nile-rte-link",
-      "description": "Events:\n\n  * `link-changed` {`CustomEvent<{ href: string; }>`} - \n\nAttributes:\n\n  * `placeholder` {`string`} - \n\nProperties:\n\n  * `editorEl` {`HTMLElement`} - \n\n  * `placeholder` {`string`} - \n\n  * `linkValue` {`string`} - \n\n  * `selectionRange` {`Range | null`} - ",
-      "attributes": [
-        {
-          "name": "placeholder",
-          "description": "`placeholder` {`string`} - \n\nProperty: placeholder\n\nDefault: https://"
-        },
-        {
-          "name": "onlink-changed",
-          "description": "`link-changed` {`CustomEvent<{ href: string; }>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-mentions-item",
-      "description": "Attributes:\n\n  * `mentionscharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\n  * `mentionscolor` {`string`} - \n\n  * `mentionsprefix` {`string`} - \n\n  * `mentionssuffix` {`string`} - \n\n  * `mentionsdata` {`MentionItem[]`} - \n\nProperties:\n\n  * `mentionsCharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\n  * `mentionsColor` {`string`} - \n\n  * `mentionsPrefix` {`string`} - \n\n  * `mentionsSuffix` {`string`} - \n\n  * `mentionsData` {`MentionItem[]`} - ",
-      "attributes": [
-        {
-          "name": "mentionscharacter",
-          "description": "`mentionscharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\nProperty: mentionsCharacter\n\nDefault: "
-        },
-        {
-          "name": "mentionscolor",
-          "description": "`mentionscolor` {`string`} - \n\nProperty: mentionsColor\n\nDefault: "
-        },
-        {
-          "name": "mentionsprefix",
-          "description": "`mentionsprefix` {`string`} - \n\nProperty: mentionsPrefix\n\nDefault: "
-        },
-        {
-          "name": "mentionssuffix",
-          "description": "`mentionssuffix` {`string`} - \n\nProperty: mentionsSuffix\n\nDefault: "
-        },
-        {
-          "name": "mentionsdata",
-          "description": "`mentionsdata` {`MentionItem[]`} - \n\nProperty: mentionsData\n\nDefault: "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-mentions",
-      "description": "Events:\n\n  * `input` {`InputEvent`} - \n\nAttributes:\n\n  * `mentions` - \n\n  * `mentionformat` - \n\n  * `mentioncolors` - \n\nProperties:\n\n  * `mentions` - \n\n  * `mentionFormat` - \n\n  * `itemsFormats` - \n\n  * `mentionColors` - \n\n  * `externalConfig` - External config from the editor (lowest priority)\n\n  * `itemsConfig` - Config gathered from child <nile-rte-mentions-item> (highest priority)\n\n  * `itemsColors` - \n\n  * `config` - \n\n  * `editorEl` {`HTMLElement | null`} - \n\n  * `hostEl` {`HTMLElement | null`} - \n\n  * `dropdownEl` {`HTMLElement | null`} - \n\n  * `menuEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `mentionOpen` {`boolean`} - \n\n  * `mentionTrigger` {`string | null`} - \n\n  * `mentionQuery` {`string`} - \n\n  * `mentionSuggestions` {`MentionItem[]`} - \n\n  * `mentionFiltered` {`MentionItem[]`} - \n\n  * `mentionX` {`number`} - \n\n  * `mentionY` {`number`} - \n\n  * `triggerBtn` {`HTMLElement | null`} - \n\n  * `mo` {`MutationObserver | null`} - \n\n  * `onSelectionChange` - \n\n  * `saveSelection` - \n\n  * `onEditorInput` - \n\n  * `onEditorKeyUp` - \n\n  * `onEditorKeyDown` - \n\n  * `repositionMention` - ",
-      "attributes": [
-        {
-          "name": "mentions",
-          "description": "`mentions` - \n\nProperty: mentions\n\nDefault: [object Object]"
-        },
-        {
-          "name": "mentionformat",
-          "description": "`mentionformat` - \n\nProperty: mentionFormat\n\nDefault: [object Object]"
-        },
-        {
-          "name": "mentioncolors",
-          "description": "`mentioncolors` - \n\nProperty: mentionColors\n\nDefault: [object Object]"
-        },
-        {
-          "name": "oninput",
-          "description": "`input` {`InputEvent`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-preview",
-      "attributes": []
-    },
-    {
-      "name": "nile-rte-select",
-      "description": "Events:\n\n  * `change` {`CustomEvent<string>`} - \n\nAttributes:\n\n  * `type` {`string`} - 'heading' | 'font' | 'align'\n\n  * `options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\n  * `label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\nProperties:\n\n  * `type` {`string`} - 'heading' | 'font' | 'align'\n\n  * `options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\n  * `optionsObj` {`(GenericOption | HeadingOption)[] | undefined`} - Programmatic options (preferred for TS safety).\n\n  * `label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\n  * `selectedValue` {`string`} - \n\n  * `parsedOptions` {`NormalizedOption[]`} - ",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "`type` {`string`} - 'heading' | 'font' | 'align'\n\nProperty: type\n\nDefault: "
-        },
-        {
-          "name": "options",
-          "description": "`options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\nProperty: options\n\nDefault: []"
-        },
-        {
-          "name": "label",
-          "description": "`label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\nProperty: label\n\nDefault: "
-        },
-        {
-          "name": "onchange",
-          "description": "`change` {`CustomEvent<string>`} - "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-toolbar-item",
-      "description": "Attributes:\n\n  * `name` {`string`} - \n\n  * `label` {`string`} - \n\nProperties:\n\n  * `name` {`string`} - \n\n  * `label` {`string`} - ",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "`name` {`string`} - \n\nProperty: name\n\nDefault: "
-        },
-        {
-          "name": "label",
-          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
-        }
-      ]
-    },
-    {
-      "name": "nile-rte-toolbar",
-      "attributes": []
-    },
     {
       "name": "nile-section-message",
       "description": "Attributes:\n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `icon-size` {`number`} - \n\n  * `variant` {`\"primary\" | \"success\" | \"warning\" | \"error\"`} - The section message theme variant.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `iconSize` {`number`} - \n\n  * `variant` {`\"primary\" | \"success\" | \"warning\" | \"error\"`} - The section message theme variant.\n\n  * `iconMap` {`{ primary: string; success: string; warning: string; error: string; }`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -3151,7 +3007,7 @@
     },
     {
       "name": "nile-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox 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  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `virtualScrollHelper` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox 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  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `options` {`NileOption[]`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox 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  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `virtualScrollHelper` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox 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  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `options` {`NileOption[]`} - \n\n  * `groupAttributes` {`NodeListOf<Element>`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",