@aquera/nile-elements 0.1.67-beta-1.5 → 0.1.67-beta-1.6

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.5",
+  "version": "0.1.67-beta-1.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -19,7 +19,7 @@ nile-rte-toolbar-item > nile-button::part(base) {
 
 
       .toolbar, nile-rte-toolbar {
-        display:flex; align-items:center; gap:8px; padding:8px; 
+        display:flex; align-items:center; gap:6px; padding:8px; 
         border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;
       }
 
@@ -66,14 +66,17 @@ font-weight: bold;}
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid var(--nile-color-border, #d9d9d9);
+  /* border: 1px solid var(--nile-color-border, #d9d9d9); */
   border-radius: 6px;
   background: #fff;
   cursor: pointer;
-}
+  border:none;
+ 
 
+}
+nile-button.rte-color-trigger::part(base){
+  width:32px; height:32px; padding:0px 6px;
+}
 .rte-color-trigger .glyph-stack {
   display: grid;               /* stack vertically */
   grid-auto-rows: max-content; 
@@ -85,17 +88,17 @@ font-weight: bold;}
 .rte-color-trigger .glyph {
   font-size: 14px;
   line-height: 1;
-  margin-bottom: 2px;          /* little breathing space above underline */
+  margin-bottom: 2px;          
 }
 
 .rte-color-trigger .underline {
   width: 18px;
   height: 3px;
   border-radius: 2px;
-  background: currentColor;    /* we override via JS with backgroundColor */
+  background: currentColor;    
 }
 
-/* (unchanged) highlight square */
+ 
 .rte-color-trigger .swatch-box {
   width: 18px;
   height: 16px;

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

@@ -33,8 +33,8 @@ const DEFAULT_ICONS: Record<string, string> = {
   center: 'format_align_middle',
   right: 'format_align_right',
   justify: 'format_align_justify',
-  ul: 'nile-ul',
-  ol: 'nile-ol',
+  ul: 'format_list_bulleted',
+  ol: 'format_list_numbered',
   clear: 'error',
 };
 
@@ -355,28 +355,28 @@ private bgSwatchEl: HTMLElement | null = null;
               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;
+              let trigger = child.querySelector(':scope > nile-button') as HTMLElement | null;
               if (!trigger) {
-                trigger = document.createElement('button');
-                trigger.type = 'button';
-                trigger.className = 'rte-color-trigger';
-                trigger.setAttribute('aria-label', label);
-            
+                const nb = document.createElement('nile-button');
+                (nb as any).variant = 'ghost';
+                nb.className = 'rte-color-trigger';
+                nb.setAttribute('aria-label', label);
+              
                 if (mode === 'background') {
-                  trigger.innerHTML = `
-                    <span class="swatch-box" aria-hidden="true"></span>
-                  `;
+                  nb.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>
+                  nb.innerHTML = `
+                    <span class="glyph-stack" aria-hidden="true">
+                      <span class="glyph">A</span>
+                      <span class="underline"></span>
+                    </span>
                   `;
                 }
-                child.appendChild(trigger);
+              
+                child.appendChild(nb);
+                trigger = nb;
               }
+              
             
               // Cache swatch elements to update later
               const underline = trigger.querySelector('.underline') as HTMLElement | null;
@@ -672,33 +672,52 @@ private ensureAtLeastOneParagraph() {
     if (!this.editorEl) return;
     this.ensureAtLeastOneParagraph();
   
-    // Clone content for safe manipulation
+ 
     const clone = this.editorEl.cloneNode(true) as HTMLElement;
   
-    // Walk the original DOM and the clone in parallel
+ 
     const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
     const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
   
+ 
+    const importantProps = [
+      'font-weight',
+      'font-style',
+      'text-decoration',
+      'color',
+      'background-color',
+      'font-size',
+      'font-family',
+      'text-align',
+      'line-height',
+      'letter-spacing',
+      'white-space',
+      'vertical-align'
+    ];
+  
     while (origWalker.nextNode() && cloneWalker.nextNode()) {
       const origEl = origWalker.currentNode as HTMLElement;
       const cloneEl = cloneWalker.currentNode as HTMLElement;
       const computed = window.getComputedStyle(origEl);
   
-      // Dump *all* computed styles into a single inline style attribute
-      const cssText = Array.from(computed)
+ 
+      const cssText = importantProps
         .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
         .join(';');
   
-      cloneEl.setAttribute('style', cssText);
+    
+      if (cssText.trim()) {
+        cloneEl.setAttribute('style', cssText);
+      }
     }
   
-    // Store the fully inlined HTML
+  
     this.content = clone.innerHTML;
   
-    // Live preview updates
+ 
     if (this.previewEl) this.previewEl.innerHTML = this.content;
   
-    // Emit event with full inline styles
+ 
     this.dispatchEvent(new CustomEvent('content-changed', {
       detail: { content: this.content },
       bubbles: true,
@@ -708,6 +727,7 @@ private ensureAtLeastOneParagraph() {
   
   
   
+  
 }
 
 declare global {

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

@@ -1,195 +1,180 @@
-  // nile-rte-select.ts
-  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);
+// nile-rte-select.ts
+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 {
+  protected createRenderRoot() { return this; }
+
+  /** 'heading' | 'font' | 'align' */
+  @property({ type: String }) type = '';
+
+  /** 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 = '';
+
+  @state() private selectedValue = '';
+
+  private mapAlignIcon(v: string) {
+    const map: Record<string,string> = {
+      left: 'format_align_left',
+      center: 'format_align_middle',
+      right: 'format_align_right',
+      justify: 'format_align_justify'
+    };
+    return map[v] || 'format_align_left';
   }
 
-  @customElement('nile-rte-select')
-  export class NileRteSelect extends LitElement {
-    protected createRenderRoot() { return this; }
-
-    /** 'heading' | 'font' | 'align' */
-    @property({ type: String }) type = '';
-
-    /** 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>;
+  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 = '';
+      }
+    }
 
-    /** Fallback label for trigger (e.g., "Align") */
-    @property({ type: String }) label = '';
+    return items;
+  }
 
-    @state() private selectedValue = '';
+  private ensureDefault() {
+    if (!this.selectedValue) {
+      const first = this.parsedOptions[0];
+      if (first) this.selectedValue = first.value;
+    }
+  }
 
-    private mapAlignIcon(v: string) {
-      const map: Record<string,string> = {
-        left: 'format_align_left',
-        center: 'format_align_middle',
-        right: 'format_align_right',
-        justify: 'format_align_justify'
-      };
-      return map[v] || 'align-left';
+  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
+    }));
+  }
 
-    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 = '';
-        }
-      }
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.injectLocalStyles();
+  }
 
-      return items;
-    }
+  private injectLocalStyles() {
+    if (this.querySelector('style[data-rte-select-style]')) return;
 
-    private ensureDefault() {
-      if (!this.selectedValue) {
-        const first = this.parsedOptions[0];
-        if (first) this.selectedValue = first.value;
+    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;
       }
-    }
-
-    private onSelect(value: string) {
-      if (this.type === 'heading' && !isHeadingTag(value)) {
-        console.warn(`[nile-rte-select] Ignoring invalid heading value: ${value}`);
-        return;
+      nile-menu.rte-align-menu,
+      nile-menu.rte-default-menu {
+        margin-top: 0px;
       }
-      this.selectedValue = value;
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: value, bubbles: true, composed: true
-      }));
-    }
+      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-button.rte-align-trigger::part(base) {
+ 
 
-    connectedCallback(): void {
-      super.connectedCallback();
-      this.injectLocalStyles();
-    }
+  border: none;
+}
+    `;
+    this.insertBefore(style, this.firstChild);
+  }
 
-    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;
-        }
-      `;
-      this.insertBefore(style, this.firstChild);
-    }
+  render() {
+    const opts = this.parsedOptions;
+    this.ensureDefault();
+    const current = opts.find(o => o.value === this.selectedValue);
 
-    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') {
-        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">
-              ${trigger}
-            </nile-button>
-            <nile-menu class="rte-align-menu">
-              ${opts.map(o => html`
-                <nile-menu-item
-                  class="rte-align-item"
-                  ?active=${o.value === this.selectedValue}
-                  @click=${() => this.onSelect(o.value)}>
-                  <nile-icon name="${o.icon}"></nile-icon>
-                </nile-menu-item>
-              `)}
-            </nile-menu>
-          </nile-dropdown>
-        `;
-      }
+    // ► Align: icon-only items + icon trigger
+    if (this.type === 'align') {
+      const trigger = current?.icon
+        ? html`<nile-icon name="${current.icon}"></nile-icon>`
+        : (this.label || 'Align');
 
-      // ► 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>
-        `;
-      }
+      return html`
+        <nile-dropdown class="rte-align-dd">
+          <nile-button slot="trigger" variant="tertiary" class="rte-align-trigger">
+            ${trigger}
+          </nile-button>
+          <nile-menu class="rte-align-menu">
+            ${opts.map(o => html`
+              <nile-menu-item
+                class="rte-align-item"
+                ?active=${o.value === this.selectedValue}
+                @click=${() => this.onSelect(o.value)}>
+                <nile-icon name="${o.icon}"></nile-icon>
+              </nile-menu-item>
+            `)}
+          </nile-menu>
+        </nile-dropdown>
+      `;
+    }
 
-      // ► Default (e.g., heading): text items; heading values are validated already
-      const triggerText = current?.label || this.label || 'Select';
+    // ► 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">
+          <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}
@@ -199,10 +184,30 @@
         </nile-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">
+        <nile-button slot="trigger" variant="tertiary" class="rte-default-trigger">
+          ${triggerText} <nile-icon name="arrowdown"></nile-icon>
+        </nile-button>
+        <nile-menu class="rte-default-menu">
+          ${opts.map(o => html`
+            <nile-menu-item
+              ?active=${o.value === this.selectedValue}
+              @click=${() => this.onSelect(o.value)}>
+              ${o.label}
+            </nile-menu-item>
+          `)}
+        </nile-menu>
+      </nile-dropdown>
+    `;
   }
+}
 
-  declare global {
-    interface HTMLElementTagNameMap {
-      'nile-rte-select': NileRteSelect;
-    }
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-select': NileRteSelect;
   }
+}