@aquera/nile-elements 1.9.7 → 1.9.9

package/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.ts

@@ -15,6 +15,7 @@ export const styles = css`
   }
 
   .toolbar {
+    position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -173,13 +174,12 @@ export const styles = css`
     box-sizing: border-box;
   }
 
-  .toolbar__swatch-panel {
+  /* Floating panel that hosts the inline nile-color-picker. */
+  .toolbar__color-panel {
     position: absolute;
     top: calc(100% + 6px);
     left: 0;
     z-index: 30;
-    width: 235px;
-    padding: 12px;
     background: var(--nile-colors-white-base, #ffffff);
     border: 1px solid
       var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
@@ -188,64 +188,43 @@ export const styles = css`
     box-sizing: border-box;
   }
 
-  .toolbar__swatch-panel .title {
-    font-size: 13px;
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: var(--nile-colors-dark-900, #111);
-  }
-
-  .toolbar__swatch-panel .section {
-    margin-bottom: 12px;
-  }
-
-  .toolbar__swatch-panel .section:last-child {
-    margin-bottom: 0;
-  }
-
-  .toolbar__swatch-panel .swatches {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 24px);
-    gap: 8px;
-  }
-
-  .toolbar__swatch-panel .swatch {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.25);
-    cursor: pointer;
+  /* --- Overflow ("more" / 3-dot) menu --- */
+  /* The 3-dot button stays in its normal place in the toolbar flow. */
+  .toolbar__overflow {
     position: relative;
-    padding: 0;
-    background-clip: content-box;
+    display: inline-flex;
   }
 
-  .toolbar__swatch-panel .swatch .checkmark {
+  /* Panel drops directly beneath the 3-dot button, aligned to its left edge and
+     extending right, so it opens wherever the button sits. width:max-content
+     sizes it to exactly its controls (rather than collapsing to the 32px
+     button's shrink-to-fit width); the max-width cap wraps a full menu onto
+     multiple rows instead of running off-screen. */
+  .toolbar__overflow-panel {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 13px;
-    color: white;
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-  }
-
-  .toolbar__swatch-panel .swatch.add {
+    top: calc(100% + 6px);
+    left: 0;
+    right: auto;
+    width: max-content;
+    max-width: min(360px, calc(100vw - 32px));
+    z-index: 31;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    font-size: 16px;
-    background: #fff;
+    gap: 6px;
+    padding: 8px;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    border: 1px solid
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+    box-sizing: border-box;
   }
 
-  .toolbar__color input[type='color'] {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    width: 0;
-    height: 0;
-    border: 0;
-    padding: 0;
+  .toolbar__overflow-divider {
+    width: 1px;
+    height: 24px;
+    margin: 0 4px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
   }
 `;

package/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.ts

@@ -7,6 +7,7 @@ import type { ToolbarState } from '../engine/selection-state';
 import type { CommandAttrs, CommandName } from '../engine/commands';
 import { DEFAULT_TOOLBAR, UiCommandName } from '../types';
 import '../ui/table-grid-picker';
+import '../../nile-color-picker/nile-color-picker';
 
 interface ButtonDef {
   kind: 'button';
@@ -46,6 +47,27 @@ interface ColorDef {
 
 type ItemDef = ButtonDef | SelectDef | ColorDef;
 
+/**
+ * A single control in an author-supplied (light-DOM) toolbar. `name` is a
+ * built-in control key (the same names the `config` string accepts) or `'|'`
+ * for a group divider; `label`/`icon` optionally override the built-in
+ * tooltip/glyph. Produced by the editor from `<nile-wysiwyg-toolbar-item>`
+ * children.
+ */
+export interface AuthoredToolbarItem {
+  name: string;
+  label?: string;
+  icon?: string;
+  /** When true, the control is placed in the 3-dot overflow menu. */
+  overflow?: boolean;
+}
+
+/** Per-instance overrides applied to a built-in control at render time. */
+interface ItemOverrides {
+  label?: string;
+  icon?: string;
+}
+
 const FONT_FAMILIES = [
   'Arial',
   'Georgia',
@@ -58,14 +80,6 @@ const FONT_FAMILIES = [
 
 const FONT_SIZES = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '48px'];
 
-
-/** Same default palette as nile-rte-color. */
-const COLOR_PALETTE = [
-  '#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',
-  '#d32f2f', '#f44336', '#ff9800', '#ffeb3b', '#4caf50', '#2196f3', '#3f51b5', '#9c27b0',
-  '#03a9f4', '#00bcd4', '#009688', '#8bc34a', '#cddc39', '#ffc107', '#ff5722',
-];
-
 const ITEMS: Record<string, ItemDef> = {
   undo: {
     kind: 'button',
@@ -481,6 +495,14 @@ export class NileWysiwygToolbar extends NileElement {
   /** Space-separated item names; `|` inserts a divider. */
   @property({ type: String }) config = DEFAULT_TOOLBAR;
 
+  /**
+   * Structured item list authored in light DOM (from
+   * `<nile-wysiwyg-toolbar-item>` children). When set and non-empty it takes
+   * precedence over `config`, and each item may override the built-in
+   * label/icon.
+   */
+  @property({ attribute: false }) items?: AuthoredToolbarItem[];
+
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property({ attribute: false }) toolbarState?: ToolbarState;
@@ -488,15 +510,29 @@ export class NileWysiwygToolbar extends NileElement {
   /** Which dropdown/color panel is open (item name), if any. */
   @state() private openMenu: string | null = null;
 
-  /** Recently used colors per color command, like nile-rte-color. */
-  @state() private recentColors: Record<string, string[]> = {};
+  /** Whether the overflow ("more" / 3-dot) menu panel is open. */
+  @state() private overflowOpen = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
+  /**
+   * True when this instance is an author's declarative `<nile-wysiwyg-toolbar>`
+   * container sitting in an editor's light DOM (holding
+   * `<nile-wysiwyg-toolbar-item>` children). Such an instance renders nothing
+   * and wires up no listeners — the editor reads the items and renders the real
+   * toolbar in its own shadow DOM. The editor's internal instance lives inside
+   * a shadow root, so `closest` (which stops at shadow boundaries) never
+   * matches it; a standalone toolbar on a page has no editor ancestor either.
+   */
+  private get isAuthoringContainer(): boolean {
+    return !!this.closest('nile-wysiwyg-editor');
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
+    if (this.isAuthoringContainer) return;
     document.addEventListener('mousedown', this.handleOutsideClick);
   }
 
@@ -506,14 +542,26 @@ export class NileWysiwygToolbar extends NileElement {
   }
 
   private handleOutsideClick = (event: MouseEvent): void => {
-    if (this.openMenu && !event.composedPath().includes(this)) this.openMenu = null;
+    if ((this.openMenu || this.overflowOpen) && !event.composedPath().includes(this)) {
+      this.openMenu = null;
+      this.overflowOpen = false;
+    }
   };
 
   private toggleMenu(name: string): void {
     this.openMenu = this.openMenu === name ? null : name;
   }
 
+  private toggleOverflow = (): void => {
+    this.overflowOpen = !this.overflowOpen;
+    this.openMenu = null;
+  };
+
   private dispatchCommand(name: CommandName | UiCommandName, attrs?: CommandAttrs): void {
+    // A dispatched command means the user picked an action, so collapse the
+    // overflow "more" panel (a select/color trigger only opens a submenu — it
+    // doesn't dispatch — so it leaves the panel open until a value is chosen).
+    this.overflowOpen = false;
     this.emit('wysiwyg-command', { name, attrs });
   }
 
@@ -521,23 +569,25 @@ export class NileWysiwygToolbar extends NileElement {
    * the legacy rich text editor's toolbar). */
   private withTooltip(label: string, control: TemplateResult): TemplateResult {
     return html`
-      <nile-lite-tooltip content=${label} placement="bottom">${control}</nile-lite-tooltip>
+      <nile-lite-tooltip content=${label} placement="top">${control}</nile-lite-tooltip>
     `;
   }
 
-  private renderButton(def: ButtonDef): TemplateResult {
+  private renderButton(def: ButtonDef, overrides?: ItemOverrides): TemplateResult {
     const state = this.toolbarState;
     const isActive = state && def.active ? def.active(state) : false;
     const isDisabled = this.disabled || (state && def.disabled ? def.disabled(state) : false);
-    const icon = isActive && def.iconActive ? def.iconActive : def.icon;
+    const label = overrides?.label ?? def.label;
+    const baseIcon = overrides?.icon ?? def.icon;
+    const icon = isActive && def.iconActive ? def.iconActive : baseIcon;
     return this.withTooltip(
-      def.label,
+      label,
       html`
         <button
           type="button"
           class="toolbar__button"
           part="button"
-          aria-label=${def.label}
+          aria-label=${label}
           aria-pressed=${isActive ? 'true' : 'false'}
           ?data-active=${isActive}
           ?disabled=${isDisabled}
@@ -550,7 +600,7 @@ export class NileWysiwygToolbar extends NileElement {
     );
   }
 
-  private renderSelect(name: string, def: SelectDef): TemplateResult {
+  private renderSelect(name: string, def: SelectDef, overrides?: ItemOverrides): TemplateResult {
     const value = this.toolbarState ? def.value(this.toolbarState) : '';
     const options =
       typeof def.options === 'function' ? def.options(this.toolbarState) : def.options;
@@ -559,15 +609,16 @@ export class NileWysiwygToolbar extends NileElement {
       this.disabled ||
       (this.toolbarState && def.disabled ? def.disabled(this.toolbarState) : false);
     const isFont = name === 'fontFamily';
+    const label = overrides?.label ?? def.label;
     return html`
       <span class="toolbar__dropdown" part="select">
         ${this.withTooltip(
-          def.label,
+          label,
           html`
             <button
               type="button"
               class="toolbar__dd-trigger"
-              aria-label=${def.label}
+              aria-label=${label}
               aria-expanded=${this.openMenu === name ? 'true' : 'false'}
               ?disabled=${isDisabled}
               style=${isFont && value ? `font-family: ${value}` : ''}
@@ -605,30 +656,26 @@ export class NileWysiwygToolbar extends NileElement {
     `;
   }
 
-  private setColor(name: string, def: ColorDef, color: string): void {
-    this.openMenu = null;
-    const recent = this.recentColors[name] ?? [];
-    this.recentColors = {
-      ...this.recentColors,
-      [name]: [color, ...recent.filter(c => c !== color)].slice(0, 8),
-    };
-    this.dispatchCommand(def.command, { color });
+  private setColor(def: ColorDef, color: string): void {
+    // nile-color-picker emits 'none' for the "No Fill" action; an empty color
+    // clears the mark in the command engine.
+    this.dispatchCommand(def.command, { color: color === 'none' ? '' : color });
   }
 
-  private renderColor(name: string, def: ColorDef): TemplateResult {
+  private renderColor(name: string, def: ColorDef, overrides?: ItemOverrides): TemplateResult {
     const current = this.toolbarState ? def.value(this.toolbarState) : null;
     const shown = current ?? '#000000';
-    const recent = this.recentColors[name] ?? [];
     const isBg = def.command === 'bgColor';
+    const label = overrides?.label ?? def.label;
     return html`
       <span class="toolbar__color" part="color">
         ${this.withTooltip(
-          def.label,
+          label,
           html`
             <button
               type="button"
               class="toolbar__button"
-              aria-label=${def.label}
+              aria-label=${label}
               aria-expanded=${this.openMenu === name ? 'true' : 'false'}
               ?disabled=${this.disabled}
               @mousedown=${(e: Event) => e.preventDefault()}
@@ -647,83 +694,26 @@ export class NileWysiwygToolbar extends NileElement {
         )}
         ${this.openMenu === name
           ? html`
-              <div class="toolbar__swatch-panel" @mousedown=${(e: Event) => e.preventDefault()}>
-                <div class="section">
-                  <div class="title">Default</div>
-                  <div class="swatches">
-                    ${COLOR_PALETTE.map(
-                      color => html`
-                        <button
-                          type="button"
-                          class="swatch"
-                          style="background: ${color}"
-                          title=${color}
-                          @click=${() => this.setColor(name, def, color)}
-                        >
-                          ${current === color
-                            ? html`<span class="checkmark">✓</span>`
-                            : nothing}
-                        </button>
-                      `
-                    )}
-                  </div>
-                </div>
-                ${recent.length
-                  ? html`
-                      <div class="section">
-                        <div class="title">Recently Used</div>
-                        <div class="swatches">
-                          ${recent.map(
-                            color => html`
-                              <button
-                                type="button"
-                                class="swatch"
-                                style="background: ${color}"
-                                title=${color}
-                                @click=${() => this.setColor(name, def, color)}
-                              ></button>
-                            `
-                          )}
-                        </div>
-                      </div>
-                    `
-                  : nothing}
-                <div class="section">
-                  <div class="title">Custom</div>
-                  <div class="swatches">
-                    <button
-                      type="button"
-                      class="swatch add"
-                      @click=${(e: Event) => {
-                        const input = (e.currentTarget as HTMLElement)
-                          .closest('.toolbar__color')!
-                          .querySelector<HTMLInputElement>('input[type="color"]');
-                        input?.click();
-                      }}
-                    >
-                      +
-                    </button>
-                  </div>
-                </div>
+              <div class="toolbar__color-panel">
+                <nile-color-picker
+                  mode="inline"
+                  type="swatches"
+                  .noFill=${isBg}
+                  .value=${shown}
+                  @nile-change=${(e: CustomEvent<{ value: string }>) =>
+                    this.setColor(def, e.detail.value)}
+                ></nile-color-picker>
               </div>
             `
           : nothing}
-        <input
-          type="color"
-          tabindex="-1"
-          aria-hidden="true"
-          .value=${shown}
-          @input=${(e: Event) =>
-            this.setColor(name, def, (e.target as HTMLInputElement).value)}
-        />
       </span>
     `;
   }
 
-  private renderItem(name: string): TemplateResult | typeof nothing {
+  private renderItem(name: string, overrides?: ItemOverrides): TemplateResult | typeof nothing {
     if (name === 'table') {
       return this.withTooltip(
-        'Insert table',
+        overrides?.label ?? 'Insert table',
         html`
           <nile-wysiwyg-table-picker
             part="button"
@@ -736,30 +726,134 @@ export class NileWysiwygToolbar extends NileElement {
     if (!def) return nothing;
     switch (def.kind) {
       case 'button':
-        return this.renderButton(def);
+        return this.renderButton(def, overrides);
       case 'select':
-        return this.renderSelect(name, def);
+        return this.renderSelect(name, def, overrides);
       case 'color':
-        return this.renderColor(name, def);
+        return this.renderColor(name, def, overrides);
       default:
         return nothing;
     }
   }
 
+  /** Parses the `config` string into a flat token list, keeping the `|`
+   * (divider) and `>>` (overflow) markers as items. */
+  private itemsFromConfig(config: string): AuthoredToolbarItem[] {
+    return config
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(name => ({ name }));
+  }
+
+  /** Splits a flat item list into groups, breaking on `'|'` dividers. */
+  private groupItems(items: AuthoredToolbarItem[]): AuthoredToolbarItem[][] {
+    const groups: AuthoredToolbarItem[][] = [[]];
+    for (const item of items) {
+      if (item.name === '|') {
+        if (groups[groups.length - 1].length) groups.push([]);
+        continue;
+      }
+      groups[groups.length - 1].push(item);
+    }
+    return groups.filter(group => group.length > 0);
+  }
+
+  /** Partitions the flat item list into the always-visible main groups and the
+   * overflow (3-dot menu) groups. Two forms are supported: a positional `>>`
+   * token in the `config` string (everything after it overflows), or a
+   * per-item `overflow` flag on authored items (each flagged item overflows,
+   * wherever it sits). Without either, everything stays on the main bar. */
+  private partitionGroups(items: AuthoredToolbarItem[]): {
+    main: AuthoredToolbarItem[][];
+    overflow: AuthoredToolbarItem[][];
+  } {
+    const at = items.findIndex(item => item.name === '>>');
+    if (at !== -1) {
+      return {
+        main: this.groupItems(items.slice(0, at)),
+        overflow: this.groupItems(items.slice(at + 1)),
+      };
+    }
+    if (!items.some(item => item.overflow)) {
+      return { main: this.groupItems(items), overflow: [] };
+    }
+    return {
+      main: this.groupItems(items.filter(item => !item.overflow)),
+      overflow: this.groupItems(items.filter(item => item.overflow)),
+    };
+  }
+
+  /** Renders the trailing 3-dot "more" button and its collapsible panel that
+   * hosts the overflow groups (everything after `>>` in the config). The panel
+   * drops directly beneath the button, wherever the button sits in the bar. */
+  private renderOverflow(hasMain: boolean, groups: AuthoredToolbarItem[][]): TemplateResult {
+    const open = this.overflowOpen;
+    return html`
+      ${hasMain ? html`<span class="toolbar__divider"></span>` : nothing}
+      <span class="toolbar__overflow" part="overflow">
+        ${this.withTooltip(
+          'More',
+          html`
+            <button
+              type="button"
+              class="toolbar__button"
+              aria-label="More"
+              aria-haspopup="true"
+              aria-expanded=${open ? 'true' : 'false'}
+              ?data-active=${open}
+              ?disabled=${this.disabled}
+              @mousedown=${(e: Event) => e.preventDefault()}
+              @click=${this.toggleOverflow}
+            >
+              ${renderGlyph('ng-dots-vertical', 18)}
+            </button>
+          `
+        )}
+        ${open
+          ? html`
+              <div
+                class="toolbar__overflow-panel"
+                part="overflow-panel"
+                @mousedown=${(e: Event) => e.preventDefault()}
+              >
+                ${groups.map(
+                  (group, index) => html`
+                    ${index > 0
+                      ? html`<span class="toolbar__overflow-divider"></span>`
+                      : nothing}
+                    ${group.map(item =>
+                      this.renderItem(item.name, { label: item.label, icon: item.icon })
+                    )}
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+      </span>
+    `;
+  }
+
   public render(): TemplateResult {
-    const groups = this.config
-      .split('|')
-      .map(group => group.trim().split(/\s+/).filter(Boolean))
-      .filter(group => group.length > 0);
+    // A declarative container in an editor's light DOM only carries authored
+    // <nile-wysiwyg-toolbar-item> children; the editor renders the real bar.
+    if (this.isAuthoringContainer) return html``;
+
+    const items =
+      this.items && this.items.length ? this.items : this.itemsFromConfig(this.config);
+    const { main, overflow } = this.partitionGroups(items);
 
     return html`
       <div class="toolbar" part="toolbar" role="toolbar" aria-label="Text formatting">
-        ${groups.map(
+        ${main.map(
           (group, index) => html`
             ${index > 0 ? html`<span class="toolbar__divider"></span>` : nothing}
-            ${group.map(name => this.renderItem(name))}
+            ${group.map(item =>
+              this.renderItem(item.name, { label: item.label, icon: item.icon })
+            )}
           `
         )}
+        ${overflow.length ? this.renderOverflow(main.length > 0, overflow) : nothing}
       </div>
     `;
   }

package/src/nile-wysiwyg-editor/types.ts

@@ -2,8 +2,10 @@ import type { CommandAttrs, CommandName } from './engine/commands';
 
 /**
  * Toolbar configuration. The string form uses space-separated item names with
- * `|` as a group divider, e.g. `"bold italic | heading | link"`. `"none"`
- * hides the toolbar entirely.
+ * `|` as a group divider, e.g. `"bold italic | heading | link"`. A `>>` marker
+ * moves every item after it into a collapsible 3-dot "more" menu, e.g.
+ * `"bold italic | heading >> link image | sourceView"`. `"none"` hides the
+ * toolbar entirely.
  */
 export type ToolbarConfig = string;
 
@@ -77,7 +79,7 @@ export const DEFAULT_TOOLBAR =
   'undo redo findReplace | heading | bold italic underline strike subscript superscript | fontFamily fontSize lineHeight | ' +
   'textColor bgColor | alignLeft alignCenter alignRight alignJustify | ' +
   'bulletList orderedList taskList listStyle indent outdent blockquote | ' +
-  'link bookmark table image embed codeBlock math horizontalRule specialChars emoji | ' +
-  'mergeField template | ' +
+  'link bookmark table image embed codeBlock math horizontalRule specialChars emoji ' +
+  '>> mergeField template | ' +
   'formatPainter caseChange clearFormatting pastePlainText showBlocks sourceView | ' +
   'importMarkdown importWord exportInlineHtml exportWord exportPdf | shortcutHelp fullscreen';

package/src/nile-wysiwyg-editor/ui/bubble-item.ts

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Declarative, light-DOM marker for a single selection bubble-menu control.
+ *
+ * Author these as children of `<nile-wysiwyg-editor>` to build the bubble menu
+ * shown over a text selection by hand, instead of the built-in five
+ * (bold / italic / underline / strike / link) — the same pattern as
+ * `<nile-wysiwyg-toolbar-item>`:
+ *
+ * ```html
+ * <nile-wysiwyg-editor bubble-menu>
+ *   <nile-wysiwyg-bubble-item name="bold"></nile-wysiwyg-bubble-item>
+ *   <nile-wysiwyg-bubble-item name="italic"></nile-wysiwyg-bubble-item>
+ *   <nile-wysiwyg-bubble-item divider></nile-wysiwyg-bubble-item>
+ *   <nile-wysiwyg-bubble-item name="link" label="Add link"></nile-wysiwyg-bubble-item>
+ * </nile-wysiwyg-editor>
+ * ```
+ *
+ * `name` maps to a built-in control (`bold`, `italic`, `underline`, `strike`,
+ * `code`, `subscript`, `superscript`, `link`, `bulletList`, `orderedList`,
+ * `alignLeft`, `alignCenter`, `alignRight`, `clearFormatting`). `label` and
+ * `icon` override the built-in tooltip/glyph; set `divider` for a separator.
+ *
+ * Any other `name` is dispatched as a raw `wysiwyg-command` (so custom editor
+ * commands work) as long as an `icon` is supplied.
+ *
+ * The element renders nothing itself — the editor discovers it and renders the
+ * real control inside the bubble menu's shadow DOM.
+ *
+ * @tag nile-wysiwyg-bubble-item
+ */
+@customElement('nile-wysiwyg-bubble-item')
+export class NileWysiwygBubbleItem extends LitElement {
+  protected createRenderRoot(): this {
+    return this;
+  }
+  protected shouldUpdate(): boolean {
+    return false;
+  }
+
+  /** Built-in control name, or a raw command name when paired with `icon`. */
+  @property({ type: String, reflect: true }) name = '';
+
+  /** Overrides the control's tooltip / accessible label. */
+  @property({ type: String, reflect: true }) label = '';
+
+  /** Overrides the control's glyph (a `nile-glyph` name). */
+  @property({ type: String, reflect: true }) icon = '';
+
+  /** Renders a separator instead of a control. */
+  @property({ type: Boolean, reflect: true }) divider = false;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-bubble-item': NileWysiwygBubbleItem;
+  }
+}