@aquera/nile-elements 0.1.64-beta-1.2 → 0.1.65-beta-1.0

package/package.json

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

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

@@ -44,6 +44,49 @@ nile-rte-toolbar-item > nile-button::part(base) {
 
       .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none; }
       nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }
+
+      .rte-color-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--nile-color-border, #d9d9d9);
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.rte-color-trigger .glyph-stack {
+  display: grid;               /* stack vertically */
+  grid-auto-rows: max-content; 
+  align-items: center;
+  justify-items: center;
+  line-height: 1;
+}
+
+.rte-color-trigger .glyph {
+  font-size: 14px;
+  line-height: 1;
+  margin-bottom: 2px;          /* little breathing space above underline */
+}
+
+.rte-color-trigger .underline {
+  width: 18px;
+  height: 3px;
+  border-radius: 2px;
+  background: currentColor;    /* we override via JS with backgroundColor */
+}
+
+/* (unchanged) highlight square */
+.rte-color-trigger .swatch-box {
+  width: 18px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.35);
+  background: currentColor;    /* overridden via JS */
+}
+
 `;
 
 export default [styles];

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

@@ -13,7 +13,7 @@ import './nile-rte-mentions';
 import {
   closestBlock, nearestElement, rgbToHex,
   toggleInlineTag, setBlockTag, setAlignment,
-  setFontFamily, setForeColor,  insertOrEditLink
+  setFontFamily, setForeColor,  insertOrEditLink, setBackColor
 } from './utils';
 
 import {styles} from './nile-rich-text-editor.css';  
@@ -83,6 +83,10 @@ export class NileRichTextEditor extends LitElement {
   private headingSelect: HTMLSelectElement | null = null;
   private fontSelect: HTMLSelectElement | null = null;
   private colorInput: HTMLInputElement | null = null;
+private bgColorInput: HTMLInputElement | null = null; 
+private colorSwatchEl: HTMLElement | null = null;   
+private bgSwatchEl: HTMLElement | null = null; 
+
 
   // Mentions controller (child)
   private mentionsEl: HTMLElement | null = null;
@@ -100,27 +104,27 @@ export class NileRichTextEditor extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
 
-    // 1) Inject styles once (so authored DOM stays as-is)
+    
     this.injectCss(styles.cssText);     
     
 
-    // 2) Keep authored nodes
+   
     this.toolbarEl = this.querySelector('nile-rte-toolbar');
     this.previewEl = this.querySelector('nile-rte-preview');
 
-    // 3) Ensure there is an editor element; create if missing.
+   
     this.ensureEditor();
 
-    // 4) Fill initial content
+ 
     if (this.value && !this.editorEl.innerHTML.trim()) {
       this.editorEl.innerHTML = this.value;
     }
     this.content = this.editorEl.innerHTML;
 
-    // 5) Wire toolbar authored children directly
+   
     if (this.toolbarEl) this.wireAuthoredToolbar(this.toolbarEl);
 
-    // 6) Mentions: delegate to child controller
+ 
     this.mentionsEl = this.querySelector('nile-rte-mentions');
     if (this.mentionsEl) {
  
@@ -142,7 +146,7 @@ export class NileRichTextEditor extends LitElement {
 
   disconnectedCallback(): void {
     document.removeEventListener('selectionchange', this.onSelectionChange, true);
-    // Optionally tell mentions to cleanup
+ 
     if (this.mentionsEl && (this.mentionsEl as any).detach) {
       (this.mentionsEl as any).detach();
     }
@@ -167,7 +171,6 @@ export class NileRichTextEditor extends LitElement {
       }
       this.editorEl = editor;
     }
-    // **NEW**: seed an empty paragraph so setBlockTag() has something to swap
     if (!this.editorEl.innerHTML.trim()) {
       this.editorEl.innerHTML = '<p><br></p>';
     }
@@ -181,17 +184,17 @@ export class NileRichTextEditor extends LitElement {
       this.updateContent();
     });
     this.editorEl.addEventListener('mouseup', () => this.saveSelection());
-    this.editorEl.addEventListener('keyup', () => this.saveSelection()); // keep range fresh for toolbar
+    this.editorEl.addEventListener('keyup', () => this.saveSelection()); 
   }
 
   private wireAuthoredToolbar(tb: HTMLElement) {
-    // Clear previous map
+   
     this.buttonMap.clear();
     this.headingSelect = null;
     this.fontSelect = null;
     this.colorInput = null;
 
-    // Process children
+   
     Array.from(tb.children).forEach(child => {
       const tag = child.tagName.toLowerCase();
 
@@ -208,7 +211,7 @@ export class NileRichTextEditor extends LitElement {
   
 
       if (tag === 'nile-rte-toolbar-item') {
-        // Look for an authored <nile-button> (so authors can override)
+       
         let btn = child.querySelector(':scope > nile-button') as HTMLElement | null;
       
         const cmd   = child.getAttribute('name')  || '';
@@ -216,14 +219,14 @@ export class NileRichTextEditor extends LitElement {
         const iconAttr = child.getAttribute('icon');
         const authoredHasContent = child.innerHTML.trim().length > 0;
       
-        // If none, create one
+       
         if (!btn) {
           btn = document.createElement('nile-button');
           (btn as any).variant = 'tertiary';
           (btn as any).size = 'small';   // optional
         }
       
-        // Fill visual content
+       
         if (iconAttr) {
           btn.innerHTML = `<nile-icon name="${iconAttr}" aria-label="${label}"></nile-icon>`;
           child.innerHTML = '';
@@ -284,32 +287,89 @@ export class NileRichTextEditor extends LitElement {
              }
      
 
-      if (tag === 'nile-rte-color') {
-        const label = child.getAttribute('label') ?? 'Text color';
-        const value = child.getAttribute('value') ?? '#000000';
-        // render internal <input type="color">
-        let input = child.querySelector(':scope > input[type="color"]') as HTMLInputElement | null;
-        if (!input) {
-          input = document.createElement('input');
-          input.type = 'color';
-          child.appendChild(input);
-        }
-        input.title = label;
-        input.value = value;
-        input.addEventListener('mousedown', e => e.preventDefault());
-        input.addEventListener('input', () => {
-          this.focusAndRestore();
-          setForeColor(this.editorEl, input!.value);
-          this.updateContent(); this.updateToolbarState();
-        });
-        this.colorInput = input;
-      }
-
-      // nile-rte-divider: no-op (purely visual)
+             if (tag === 'nile-rte-color') {
+              const label = child.getAttribute('label') ?? 'Text color';
+              const value = child.getAttribute('value') ?? '#000000';
+              const mode  = child.getAttribute('mode')  ?? 'text'; // 'text' | 'background'
+            
+              // Create/attach the hidden color input
+              let input = child.querySelector(':scope > input[type="color"]') as HTMLInputElement | null;
+              if (!input) {
+                input = document.createElement('input');
+                input.type = 'color';
+                input.style.position = 'absolute';
+                input.style.opacity = '0';
+                input.style.pointerEvents = 'none'; // we'll click it programmatically
+                child.appendChild(input);
+              }
+              input.title = label;
+              input.value = value;
+            
+              // Build a custom trigger that shows the current color
+              let trigger = child.querySelector(':scope > button.rte-color-trigger') as HTMLButtonElement | null;
+              if (!trigger) {
+                trigger = document.createElement('button');
+                trigger.type = 'button';
+                trigger.className = 'rte-color-trigger';
+                trigger.setAttribute('aria-label', label);
+            
+                if (mode === 'background') {
+                  trigger.innerHTML = `
+                    <span class="swatch-box" aria-hidden="true"></span>
+                  `;
+                } else {
+                  trigger.innerHTML = `
+                     <span class="glyph-stack" aria-hidden="true">
+    <span class="glyph">A</span>
+    <span class="underline"></span>
+  </span>
+                  `;
+                }
+                child.appendChild(trigger);
+              }
+            
+              // Cache swatch elements to update later
+              const underline = trigger.querySelector('.underline') as HTMLElement | null;
+              const square    = trigger.querySelector('.swatch-box') as HTMLElement | null;
+            
+              if (mode === 'background') {
+                this.bgColorInput  = input;
+                this.bgSwatchEl    = square;
+                if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = input.value;
+              } else {
+                this.colorInput    = input;
+                this.colorSwatchEl = underline;
+                if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = input.value;
+              }
+            
+              // Open native picker on trigger click
+              trigger.addEventListener('click', (e) => {
+                e.preventDefault();
+                // Keep selection before opening the picker
+                this.focusAndRestore();
+                input!.click();
+              });
+            
+              // When the user picks a color, apply it + update swatch
+              input.addEventListener('input', () => {
+                this.focusAndRestore();
+                if (mode === 'background') {
+                  setBackColor(this.editorEl, input!.value);
+                  if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = input!.value;
+                } else {
+                  setForeColor(this.editorEl, input!.value);
+                  if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = input!.value;
+                }
+                this.updateContent();
+                this.updateToolbarState();
+              });
+            
+              // Prevent losing selection when interacting
+              trigger.addEventListener('mousedown', e => e.preventDefault());
+              input.addEventListener('mousedown',  e => e.preventDefault());
+            }
     });
   }
-
-  // ---------- Selection helpers (for toolbar state only) ----------
   private onSelectionChange = () => {
     if (!this.editorEl) return;
     const sel = document.getSelection();
@@ -533,13 +593,25 @@ private ensureAtLeastOneParagraph() {
       }
     }
 
-    // Reflect color
     if (this.colorInput) {
       const hex = rgbToHex(comp.color);
       if (hex && this.colorInput.value.toLowerCase() !== hex.toLowerCase()) {
         this.colorInput.value = hex;
       }
+      if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = this.colorInput.value;
     }
+    
+
+    if (this.bgColorInput) {
+      const bg = getComputedStyle(startElm).backgroundColor;
+      if (bg && !/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(bg)) {
+        const bgHex = rgbToHex(bg);
+        if (bgHex && this.bgColorInput.value.toLowerCase() !== bgHex.toLowerCase()) {
+          this.bgColorInput.value = bgHex;
+        }
+      }
+      if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = this.bgColorInput.value;
+      }
   }
 
   private syncPreview() {

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

@@ -186,6 +186,10 @@ private triggerBtn: HTMLElement | null = null;
       .mention-dropdown li { padding: 6px 8px; cursor: pointer; border-radius: 4px; }
       .mention-dropdown li:hover { background: #f1f5f9; }
       .mention { background: #eef2ff; padding: 0 3px; border-radius: 3px; }
+   nile-menu.mentions-menu::part(menu__items-wrapper){
+   max-height: 260px;
+   }
+
     `;
     this.insertBefore(style, this.firstChild);
   }
@@ -214,6 +218,7 @@ private ensureMentionDropdown() {
   dd.appendChild(btn);
   this.triggerBtn = btn; 
   const menu = document.createElement('nile-menu');
+  menu.classList.add('mentions-menu');
   dd.appendChild(menu);
 
   this.hostEl.appendChild(dd);

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

@@ -2,6 +2,18 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+type HeadingTag = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type GenericOption = { value: string; label?: string; icon?: string };
+type HeadingOption = { value: HeadingTag; label?: string; icon?: string };
+type NormalizedOption = { value: string; label: string; icon?: string };
+
+const HEADING_ALLOWLIST: ReadonlySet<HeadingTag> = new Set([
+  'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+]);
+
+function isHeadingTag(v: string): v is HeadingTag {
+  return HEADING_ALLOWLIST.has(v as HeadingTag);
+}
 
 @customElement('nile-rte-select')
 export class NileRteSelect extends LitElement {
@@ -9,8 +21,14 @@ export class NileRteSelect extends LitElement {
 
   /** 'heading' | 'font' | 'align' */
   @property({ type: String }) type = '';
-  /** JSON: [{ value, label?, icon? }, ...] */
+
+  /** JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated) */
   @property({ type: String }) options = '[]';
+
+  /** Programmatic options (preferred for TS safety). */
+  @property({ attribute: false })
+  optionsObj?: Array<GenericOption | HeadingOption>;
+
   /** Fallback label for trigger (e.g., "Align") */
   @property({ type: String }) label = '';
 
@@ -26,18 +44,37 @@ export class NileRteSelect extends LitElement {
     return map[v] || 'align-left';
   }
 
-  private get parsedOptions(): Array<{ value: string; label: string; icon?: string }> {
-    try {
-      const raw = JSON.parse(this.options);
-      return raw.map((o: any) => {
-        const value = o.value ?? o;
-        const label = o.label ?? o.value ?? o;
-        const icon  = o.icon ?? (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
-        return { value, label, icon };
-      });
-    } catch {
-      return [];
+  private get parsedOptions(): NormalizedOption[] {
+    // Prefer programmatic options if present (gives TS compile-time checks)
+    const source: unknown = this.optionsObj ?? this.options;
+
+    const rawArray: any[] = (() => {
+      if (Array.isArray(source)) return source;
+      try { return JSON.parse(String(source)); } catch { return []; }
+    })();
+
+    // Normalize to consistent shape
+    let items: NormalizedOption[] = rawArray.map((o: any) => {
+      const value: string = o?.value ?? o;
+      const label: string = o?.label ?? o?.value ?? o;
+      const icon: string | undefined =
+        o?.icon ?? (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
+      return { value, label, icon };
+    });
+
+    // If type is heading, enforce allowlist (runtime validation)
+    if (this.type === 'heading') {
+      const before = items.length;
+      items = items.filter(i => isHeadingTag(i.value));
+      if (items.length !== before) {
+      }
+      // If current selection is invalid for heading, reset
+      if (this.selectedValue && !isHeadingTag(this.selectedValue)) {
+        this.selectedValue = '';
+      }
     }
+
+    return items;
   }
 
   private ensureDefault() {
@@ -48,57 +85,56 @@ export class NileRteSelect extends LitElement {
   }
 
   private onSelect(value: string) {
+    if (this.type === 'heading' && !isHeadingTag(value)) {
+      console.warn(`[nile-rte-select] Ignoring invalid heading value: ${value}`);
+      return;
+    }
     this.selectedValue = value;
     this.dispatchEvent(new CustomEvent('change', {
       detail: value, bubbles: true, composed: true
     }));
   }
 
- 
-
   connectedCallback(): void {
     super.connectedCallback();
-    this.injectLocalStyles();   
+    this.injectLocalStyles();
   }
 
   private injectLocalStyles() {
- 
     if (this.querySelector('style[data-rte-select-style]')) return;
 
     const style = document.createElement('style');
     style.setAttribute('data-rte-select-style', 'true');
     style.textContent = `
-
-  nile-menu.rte-align-menu::part(menu__items-wrapper) {
-    display: flex;
-  }
-    nile-menu.rte-align-menu,nile-menu.rte-default-menu{
- margin-top: 0px;
-    }
-
-    nile-button.rte-align-trigger::part(base),nile-button.rte-default-trigger::part(base){
-     min-width: 32px;
-    height: 32px;
-    padding: 0px 6px;
-    box-shadow: none;
-    }
- 
+      nile-menu.rte-align-menu::part(menu__items-wrapper) {
+        display: flex;
+      }
+      nile-menu.rte-align-menu,
+      nile-menu.rte-default-menu {
+        margin-top: 0px;
+      }
+      nile-button.rte-align-trigger::part(base),
+      nile-button.rte-default-trigger::part(base) {
+        min-width: 32px;
+        height: 32px;
+        padding: 0px 6px;
+        box-shadow: none;
+      }
     `;
- 
-  this.insertBefore(style, this.firstChild);
+    this.insertBefore(style, this.firstChild);
   }
 
-
   render() {
     const opts = this.parsedOptions;
     this.ensureDefault();
     const current = opts.find(o => o.value === this.selectedValue);
 
+    // ► Align: icon-only items + icon trigger
     if (this.type === 'align') {
-      // ► Align: separate dropdown instance + icon-only items + icon trigger
       const trigger = current?.icon
         ? html`<nile-icon name="${current.icon}"></nile-icon>`
         : (this.label || 'Align');
+
       return html`
         <nile-dropdown class="rte-align-dd">
           <nile-button slot="trigger" variant="tertiary" class="rte-align-trigger">
@@ -115,33 +151,36 @@ export class NileRteSelect extends LitElement {
             `)}
           </nile-menu>
         </nile-dropdown>
+      `;
+    }
 
-        
+    // ► Font: show labels, preview fonts in items and trigger
+    if (this.type === 'font') {
+      const triggerText = current?.label || this.label || 'Font';
+      return html`
+        <nile-dropdown class="rte-default-dd">
+          <nile-button
+            slot="trigger"
+            variant="tertiary"
+            class="rte-default-trigger"
+            style="font-family: ${current?.value || 'inherit'}">
+            ${triggerText} <nile-icon name="arrowdown"></nile-icon>
+          </nile-button>
+          <nile-menu class="rte-default-menu">
+            ${opts.map(o => html`
+              <nile-menu-item
+                style="font-family: ${o.value}"
+                ?active=${o.value === this.selectedValue}
+                @click=${() => this.onSelect(o.value)}>
+                ${o.label}
+              </nile-menu-item>
+            `)}
+          </nile-menu>
+        </nile-dropdown>
       `;
-      if (this.type === 'font') {
-        const triggerText = current?.label || this.label || 'Font';
-        return html`
-          <nile-dropdown class="rte-default-dd">
-            <nile-button slot="trigger" variant="tertiary" class="rte-default-trigger"
-              style="font-family: ${current?.value || 'inherit'}">
-              ${triggerText} <nile-icon name="arrowdown"></nile-icon>
-            </nile-button>
-            <nile-menu class="rte-default-menu">
-              ${opts.map(o => html`
-                <nile-menu-item
-                  style="font-family: ${o.value}"
-                  ?active=${o.value === this.selectedValue}
-                  @click=${() => this.onSelect(o.value)}>
-                  ${o.label}
-                </nile-menu-item>
-              `)}
-            </nile-menu>
-          </nile-dropdown>
-        `;
-      }
     }
 
-    // ► Everything else: default (text) dropdown
+    // ► Default (e.g., heading): text items; heading values are validated already
     const triggerText = current?.label || this.label || 'Select';
     return html`
       <nile-dropdown class="rte-default-dd">

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

@@ -102,6 +102,24 @@ export function closestBlock(node: Node | null, root: HTMLElement): HTMLElement
     }
     surroundInline(range, 'span', { style: `font-family:${family}` });
   }
+
+export function setBackColor(rootEl: HTMLElement, color: string) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  if (!rootEl.contains(range.commonAncestorContainer) || range.collapsed) return;
+
+  const span = document.createElement('span');
+  span.style.backgroundColor = color;
+  span.appendChild(range.extractContents());
+  range.insertNode(span);
+  const after = document.createRange();
+  after.setStartAfter(span);
+  after.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(after);
+}
+
   
   export function setForeColor(root: HTMLElement, color: string) {
     const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;

package/vscode-html-custom-data.json

@@ -2820,7 +2820,7 @@
     },
     {
       "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  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onSelectionChange` - ",
+      "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  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",
@@ -2900,7 +2900,7 @@
     },
     {
       "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? }, ...]\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? }, ...]\n\n  * `label` {`string`} - Fallback label for trigger (e.g., \"Align\")\n\n  * `selectedValue` {`string`} - \n\n  * `parsedOptions` {`{ value: string; label: string; icon?: string | undefined; }[]`} - ",
+      "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",
@@ -2908,7 +2908,7 @@
         },
         {
           "name": "options",
-          "description": "`options` {`string`} - JSON: [{ value, label?, icon? }, ...]\n\nProperty: options\n\nDefault: []"
+          "description": "`options` {`string`} - JSON: [{ value, label?, icon? }, ...] (attribute-based; runtime-validated)\n\nProperty: options\n\nDefault: []"
         },
         {
           "name": "label",