@aquera/nile-elements 1.2.8-beta-1.1 → 1.2.8-beta-1.3

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -13,9 +13,9 @@ export const styles = css`
 
   .rte-container {
     width: 100%;
-    border: 1px solid var(--nile-colors-neutral-400);
-    border-radius: var(--nile-radius-radius-xl);
-    background: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     box-sizing: border-box;
   }
 
@@ -25,8 +25,8 @@ export const styles = css`
   align-items: center;
   gap: 6px;
   padding: 8px;
-  border-bottom: 1px solid var(--nile-colors-neutral-400);
-  background: var(--nile-colors-white-base);
+  border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+  background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   border-radius: 8px 8px 0 0;
 
   width: 100%;            
@@ -38,14 +38,14 @@ export const styles = css`
     min-height: 160px;
     width: 100%;
     padding: 12px;
-    background: var(--nile-colors-white-base);
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: 0 0 8px 8px;
     outline: none;
     tab-size: 4;
     -moz-tab-size: 4;
     word-break: break-word;
     box-sizing: border-box;
-    border-radius: var(--nile-radius-radius-xl);
+    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
   }
 
  
@@ -54,9 +54,9 @@ nile-rte-preview {
   width: 100%;
   margin-top: 16px;       
   padding: 12px;
-  border: 1px dashed var(--nile-colors-neutral-400);
-  border-radius: var(--nile-radius-radius-xl);
-  background: var(--nile-colors-white-base);
+  border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+  border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+  background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   box-sizing: border-box;
   word-wrap: break-word;
 }
@@ -72,9 +72,9 @@ nile-rte-preview {
 
   nile-rte-toolbar-item > button,
   nile-rte-toolbar button {
-    border: 1px solid var(--nile-colors-neutral-400);
-    background: var(--nile-colors-white-base);
-    border-radius: var(--nile-radius-radius-lg);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
     cursor: pointer;
   }
 
@@ -115,6 +115,7 @@ nile-rte-preview {
   nile-rte-preview.single-line {
     min-height: 50px;
     max-height: 50px;
+    line-height: 1.2;
     padding: 0px 12px 0px 12px;
     overflow-x: auto;
     white-space: nowrap;
@@ -126,7 +127,7 @@ nile-rte-preview {
   display: inline-block;
   height: 24px;
   width: 1px;
-  background: var(--nile-colors-neutral-400);
+  background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   }
  
   .editor ul,
@@ -140,13 +141,26 @@ nile-rte-preview {
  
 
   nile-rte-toolbar-item  nile-button[data-active]::part(base) {
-  background-color: var(--nile-colors-primary-400);
+  background-color: var(--nile-colors-primary-400, var(--ng-componentcolors-utility-blue-400));
 }
 
 nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
-  background-color: var(--nile-colors-primary-500);  
+  background-color: var(--nile-colors-primary-500, var(--ng-componentcolors-utility-blue-500));  
 }
 
+.editor.empty::before {
+  content: attr(data-placeholder);
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+  position: absolute;
+  font-family: var(var(--nile-font-family-sans-serif), var(--ng-font-family-body));
+  pointer-events: none;
+  user-select: none;
+  padding-top: 16px;
+  opacity: 0.7;
+}
+
+ 
+
 
 
 `;

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

@@ -51,6 +51,8 @@ export class NileRichTextEditor extends LitElement {
   @property({ type: Boolean, attribute: true, reflect: true }) noStyles = false;
   @property({ type: Boolean, attribute: 'singlelineeditor', reflect: true }) singleLineEditor =
     false;
+    @property({ type: String }) placeholder = '';
+
 
   @property({
     attribute: 'mentions',
@@ -113,6 +115,10 @@ export class NileRichTextEditor extends LitElement {
     super.connectedCallback();
     this.injectCss(styles.cssText);
     this.ensureStructure();
+    if (this.placeholder && this.editorEl) {
+      this.editorEl.dataset.placeholder = this.placeholder;
+    }
+
 
     if (this.value && !this.editorEl.innerHTML.trim()) {
       this.editorEl.innerHTML = this.value;
@@ -216,6 +222,10 @@ export class NileRichTextEditor extends LitElement {
       editor.setAttribute('contenteditable', 'true');
       this.editorEl = editor;
     }
+    if (this.placeholder) {
+      this.editorEl.dataset.placeholder = this.placeholder;
+    }
+  
     if (!this.editorEl.innerHTML.trim()) {
       this.editorEl.innerHTML = '<p><br></p>';
     }
@@ -781,6 +791,8 @@ export class NileRichTextEditor extends LitElement {
   private updateContent() {
     if (!this.editorEl) return;
     this.ensureAtLeastOneParagraph();
+    const isEmpty = (this.editorEl.textContent ?? '').trim() === '';
+    this.editorEl.classList.toggle('empty', isEmpty);
     const clone = this.editorEl.cloneNode(true) as HTMLElement;
   
     if (!this.noStyles) {

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
+ import {
   LitElement,
   html,
 } from 'lit';
@@ -1003,8 +1003,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange(): Promise<void> {
     if (this.open && !this.disabled) {
-      await this.handleOpen();
       this.showListbox = true;
+      await this.updateComplete;
+      await this.handleOpen();
       
       if (this.portal) {
         this.portalManager.setupPortalAppend();
@@ -1025,7 +1026,24 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.showNoResults = !this.data?.length;
 
     await stopAnimations(this);
+    
+    // Hide popup initially to prevent flickering during positioning calculation
+    // This allows content to be measured while invisible
+    if (this.popup?.popup) {
+      this.popup.popup.style.visibility = 'hidden';
+    }
+    
     this.popup.active = true;
+    
+    // Wait for positioning to complete before showing the popup
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    // Wait for next frame to allow Floating UI to calculate position
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    
+    // Show popup after positioning is calculated
+    if (this.popup?.popup) {
+      this.popup.popup.style.visibility = '';
+    }
 
     const { keyframes, options } = getAnimation(this, 'select.show', {
       dir: 'ltr',
@@ -1060,6 +1078,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     });
     await animateTo(this.popup.popup, keyframes, options);
     this.popup.active = false;
+    
+    // Reset visibility style when closing
+    if (this.popup?.popup) {
+      this.popup.popup.style.visibility = '';
+    }
 
     this.searchValue = '';
     
@@ -1630,3 +1653,4 @@ declare global {
     'nile-virtual-select': NileVirtualSelect;
   }
 }
+

package/vscode-html-custom-data.json

@@ -554,7 +554,7 @@
     },
     {
       "name": "nile-calendar",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `value` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hide-duration-fields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startYear` {`number | undefined`} - \n\n  * `endYear` {`number | undefined`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\nProperties:\n\n  * `valueAttribute` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hideDurationFields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startYear` {`number | undefined`} - \n\n  * `endYear` {`number | undefined`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `startDate` {`Date | null`} - \n\n  * `endDate` {`Date | null`} - \n\n  * `isSelectingStart` {`boolean`} - \n\n  * `hideInput` {`Boolean`} - \n\n  * `value` {`Date | null`} - \n\n  * `currentMonth` {`number`} - \n\n  * `currentYear` {`number`} - \n\n  * `allowedDatesLocal` - \n\n  * `monthNames` {`string[]`} - \n\n  * `yearOptions` {`number[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `value` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hide-duration-fields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\nProperties:\n\n  * `valueAttribute` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hideDurationFields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startDate` {`Date | null`} - \n\n  * `endDate` {`Date | null`} - \n\n  * `isSelectingStart` {`boolean`} - \n\n  * `hideInput` {`Boolean`} - \n\n  * `value` {`Date | null`} - \n\n  * `currentMonth` {`number`} - \n\n  * `currentYear` {`number`} - \n\n  * `allowedDatesLocal` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -630,30 +630,6 @@
           "name": "showManualInputs",
           "description": "`showManualInputs` {`boolean`} - \n\nProperty: showManualInputs\n\nDefault: false",
           "valueSet": "v"
-        },
-        {
-          "name": "startYear",
-          "description": "`startYear` {`number | undefined`} - \n\nProperty: startYear",
-          "values": []
-        },
-        {
-          "name": "endYear",
-          "description": "`endYear` {`number | undefined`} - \n\nProperty: endYear",
-          "values": []
-        },
-        {
-          "name": "showMonthDropdown",
-          "description": "`showMonthDropdown` {`boolean`} - \n\nProperty: showMonthDropdown\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "showYearDropdown",
-          "description": "`showYearDropdown` {`boolean`} - \n\nProperty: showYearDropdown\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "dateFormat",
-          "description": "`dateFormat` {`string`} - \n\nProperty: dateFormat\n\nDefault: MM/DD/YYYY"
         }
       ]
     },
@@ -1716,7 +1692,7 @@
     },
     {
       "name": "nile-format-date",
-      "description": "Nile format-date component.\n\nAttributes:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"long\" | \"narrow\" | \"short\"`} - The format for displaying the weekday.\n\n  * `era` {`\"long\" | \"narrow\" | \"short\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"long\" | \"narrow\" | \"short\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `time-zone-name` {`\"long\" | \"short\"`} - The format for displaying the time.\n\n  * `time-zone` {`string`} - The time zone to express the time in.\n\n  * `hour-format` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `date-separator` {`\"-\" | \"/\"`} - The separator for the date format.\n\nProperties:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"long\" | \"narrow\" | \"short\"`} - The format for displaying the weekday.\n\n  * `era` {`\"long\" | \"narrow\" | \"short\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"long\" | \"narrow\" | \"short\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `timeZoneName` {`\"long\" | \"short\"`} - The format for displaying the time.\n\n  * `timeZone` {`string`} - The time zone to express the time in.\n\n  * `hourFormat` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `dateSeparator` {`\"-\" | \"/\"`} - The separator for the date format.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile format-date component.\n\nAttributes:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the weekday.\n\n  * `era` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"narrow\" | \"short\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `time-zone-name` {`\"short\" | \"long\"`} - The format for displaying the time.\n\n  * `time-zone` {`string`} - The time zone to express the time in.\n\n  * `hour-format` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `date-separator` {`\"-\" | \"/\"`} - The separator for the date format.\n\nProperties:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the weekday.\n\n  * `era` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"narrow\" | \"short\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `timeZoneName` {`\"short\" | \"long\"`} - The format for displaying the time.\n\n  * `timeZone` {`string`} - The time zone to express the time in.\n\n  * `hourFormat` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `dateSeparator` {`\"-\" | \"/\"`} - The separator for the date format.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "date",
@@ -1725,31 +1701,31 @@
         },
         {
           "name": "weekday",
-          "description": "`weekday` {`\"long\" | \"narrow\" | \"short\"`} - The format for displaying the weekday.\n\nProperty: weekday",
+          "description": "`weekday` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the weekday.\n\nProperty: weekday",
           "values": [
-            {
-              "name": "long"
-            },
             {
               "name": "narrow"
             },
             {
               "name": "short"
+            },
+            {
+              "name": "long"
             }
           ]
         },
         {
           "name": "era",
-          "description": "`era` {`\"long\" | \"narrow\" | \"short\"`} - The format for displaying the era.\n\nProperty: era",
+          "description": "`era` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the era.\n\nProperty: era",
           "values": [
-            {
-              "name": "long"
-            },
             {
               "name": "narrow"
             },
             {
               "name": "short"
+            },
+            {
+              "name": "long"
             }
           ]
         },
@@ -1767,17 +1743,17 @@
         },
         {
           "name": "month",
-          "description": "`month` {`\"long\" | \"narrow\" | \"short\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\nProperty: month",
+          "description": "`month` {`\"narrow\" | \"short\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\nProperty: month",
           "values": [
-            {
-              "name": "long"
-            },
             {
               "name": "narrow"
             },
             {
               "name": "short"
             },
+            {
+              "name": "long"
+            },
             {
               "name": "numeric"
             },
@@ -1836,13 +1812,13 @@
         },
         {
           "name": "time-zone-name",
-          "description": "`time-zone-name` {`\"long\" | \"short\"`} - The format for displaying the time.\n\nProperty: timeZoneName",
+          "description": "`time-zone-name` {`\"short\" | \"long\"`} - The format for displaying the time.\n\nProperty: timeZoneName",
           "values": [
             {
-              "name": "long"
+              "name": "short"
             },
             {
-              "name": "short"
+              "name": "long"
             }
           ]
         },
@@ -2626,7 +2602,7 @@
     },
     {
       "name": "nile-lite-tooltip",
-      "description": "Nile lite-tooltip component.\n\nSupports wrapper, sibling (for), and singleton modes.\nAligns with Tippy.js props and Nile design system.\n\nEvents:\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\nAttributes:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\nProperties:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `tooltipInstances` {`Instance<Props>[] | undefined`} - \n\n  * `singleInstance` {`Instance<Props> | undefined`} - \n\n  * `singletonInstance` {`Instance<Props> | undefined`} - \n\n  * `targetEl` {`HTMLElement | null | undefined`} - \n\n  * `generatedId` {`string | undefined`} - \n\n  * `prevDescribedby` {`string | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile lite-tooltip component.\n\nSupports wrapper, sibling (for), and singleton modes.\nAligns with Tippy.js props and Nile design system.\n\nEvents:\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\nAttributes:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"large\" | \"narrow\" | \"default\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\nProperties:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"large\" | \"narrow\" | \"default\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `tooltipInstances` {`Instance<Props>[] | undefined`} - \n\n  * `singleInstance` {`Instance<Props> | undefined`} - \n\n  * `singletonInstance` {`Instance<Props> | undefined`} - \n\n  * `targetEl` {`HTMLElement | null | undefined`} - \n\n  * `generatedId` {`string | undefined`} - \n\n  * `prevDescribedby` {`string | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "for",
@@ -2760,7 +2736,7 @@
         },
         {
           "name": "arrow",
-          "description": "`arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\nProperty: arrow\n\nDefault: default",
+          "description": "`arrow` {`\"small\" | \"none\" | \"large\" | \"narrow\" | \"default\" | \"round\" | \"wide\"`} - \n\nProperty: arrow\n\nDefault: default",
           "values": [
             {
               "name": "small"
@@ -2768,15 +2744,15 @@
             {
               "name": "none"
             },
-            {
-              "name": "default"
-            },
             {
               "name": "large"
             },
             {
               "name": "narrow"
             },
+            {
+              "name": "default"
+            },
             {
               "name": "round"
             },
@@ -3490,7 +3466,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `mentions` - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `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  * `containerEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
+      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `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  * `containerEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",
@@ -3506,6 +3482,10 @@
           "description": "`singlelineeditor` {`boolean`} - \n\nProperty: singleLineEditor\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "placeholder",
+          "description": "`placeholder` {`string`} - \n\nProperty: placeholder\n\nDefault: "
+        },
         {
           "name": "mentions",
           "description": "`mentions` - \n\nProperty: mentions\n\nDefault: [object Object]"