@aquera/nile-elements 1.9.7 → 1.9.9

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-wysiwyg-toolbar.css.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmPxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Toolbar styled to match nile-rich-text-editor: white toolbar, 32×32\n * borderless buttons, dropdown-button selects with menu panels,\n * swatch-palette color pickers, 24px dividers.\n */\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(\n      --nile-font-family-sans-serif,\n      var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n    );\n  }\n\n  .toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));\n    border-radius: 8px 8px 0 0;\n    box-sizing: border-box;\n  }\n\n  .toolbar__divider {\n    width: 1px;\n    height: 24px;\n    margin: 0 4px;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));\n  }\n\n  button.toolbar__button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0 6px;\n    box-sizing: border-box;\n    border: none;\n    background: transparent;\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n    cursor: pointer;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 600;\n  }\n\n  button.toolbar__button:hover:not(:disabled) {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));\n  }\n\n  button.toolbar__button[data-active] {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n  }\n\n  button.toolbar__button:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  /* --- Dropdown selects (heading / font / size), nile-rte-select style --- */\n  .toolbar__dropdown {\n    position: relative;\n    display: inline-flex;\n  }\n\n  button.toolbar__dd-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    min-width: 32px;\n    height: 32px;\n    padding: 0 6px 0 10px;\n    box-sizing: border-box;\n    border: none;\n    background: transparent;\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n    cursor: pointer;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n    font-family: inherit;\n    font-size: 13px;\n    white-space: nowrap;\n  }\n\n  button.toolbar__dd-trigger:hover:not(:disabled) {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));\n  }\n\n  button.toolbar__dd-trigger:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  .toolbar__dd-menu {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: 30;\n    min-width: 140px;\n    max-height: 260px;\n    overflow-y: auto;\n    padding: 4px;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));\n    border: 1px solid\n      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n    box-sizing: border-box;\n  }\n\n  .toolbar__dd-item {\n    display: flex;\n    align-items: center;\n    padding: 6px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 13px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n    white-space: nowrap;\n  }\n\n  .toolbar__dd-item:hover {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));\n  }\n\n  .toolbar__dd-item[data-active] {\n    background: var(\n      --nile-colors-primary-50,\n      var(--ng-componentcolors-utility-blue-50, #eff4ff)\n    );\n    color: var(--nile-colors-primary-700, #1d4ed8);\n  }\n\n  /* --- Color pickers, nile-rte-color style --- */\n  .toolbar__color {\n    position: relative;\n    display: inline-flex;\n  }\n\n  .toolbar__color .glyph-stack {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  .toolbar__color .glyph {\n    font-size: 14px;\n    margin-bottom: 2px;\n    font-weight: 400;\n  }\n\n  .toolbar__color .underline {\n    width: 18px;\n    height: 3px;\n    border-radius: 2px;\n  }\n\n  .toolbar__color .swatch-box {\n    width: 18px;\n    height: 16px;\n    border-radius: 4px;\n    border: 1px solid rgba(0, 0, 0, 0.35);\n    pointer-events: none;\n    box-sizing: border-box;\n  }\n\n  .toolbar__swatch-panel {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    z-index: 30;\n    width: 235px;\n    padding: 12px;\n    background: var(--nile-colors-white-base, #ffffff);\n    border: 1px solid\n      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n    box-sizing: border-box;\n  }\n\n  .toolbar__swatch-panel .title {\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: var(--nile-colors-dark-900, #111);\n  }\n\n  .toolbar__swatch-panel .section {\n    margin-bottom: 12px;\n  }\n\n  .toolbar__swatch-panel .section:last-child {\n    margin-bottom: 0;\n  }\n\n  .toolbar__swatch-panel .swatches {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, 24px);\n    gap: 8px;\n  }\n\n  .toolbar__swatch-panel .swatch {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    border: 1px solid rgba(0, 0, 0, 0.25);\n    cursor: pointer;\n    position: relative;\n    padding: 0;\n    background-clip: content-box;\n  }\n\n  .toolbar__swatch-panel .swatch .checkmark {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 13px;\n    color: white;\n    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n  }\n\n  .toolbar__swatch-panel .swatch.add {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: bold;\n    font-size: 16px;\n    background: #fff;\n  }\n\n  .toolbar__color input[type='color'] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    width: 0;\n    height: 0;\n    border: 0;\n    padding: 0;\n  }\n`;\n"]}
+{"version":3,"file":"nile-wysiwyg-toolbar.css.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Toolbar styled to match nile-rich-text-editor: white toolbar, 32×32\n * borderless buttons, dropdown-button selects with menu panels,\n * swatch-palette color pickers, 24px dividers.\n */\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(\n      --nile-font-family-sans-serif,\n      var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n    );\n  }\n\n  .toolbar {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));\n    border-radius: 8px 8px 0 0;\n    box-sizing: border-box;\n  }\n\n  .toolbar__divider {\n    width: 1px;\n    height: 24px;\n    margin: 0 4px;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));\n  }\n\n  button.toolbar__button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0 6px;\n    box-sizing: border-box;\n    border: none;\n    background: transparent;\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n    cursor: pointer;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 600;\n  }\n\n  button.toolbar__button:hover:not(:disabled) {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));\n  }\n\n  button.toolbar__button[data-active] {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n  }\n\n  button.toolbar__button:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  /* --- Dropdown selects (heading / font / size), nile-rte-select style --- */\n  .toolbar__dropdown {\n    position: relative;\n    display: inline-flex;\n  }\n\n  button.toolbar__dd-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    min-width: 32px;\n    height: 32px;\n    padding: 0 6px 0 10px;\n    box-sizing: border-box;\n    border: none;\n    background: transparent;\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n    cursor: pointer;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n    font-family: inherit;\n    font-size: 13px;\n    white-space: nowrap;\n  }\n\n  button.toolbar__dd-trigger:hover:not(:disabled) {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));\n  }\n\n  button.toolbar__dd-trigger:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  .toolbar__dd-menu {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: 30;\n    min-width: 140px;\n    max-height: 260px;\n    overflow-y: auto;\n    padding: 4px;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));\n    border: 1px solid\n      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n    box-sizing: border-box;\n  }\n\n  .toolbar__dd-item {\n    display: flex;\n    align-items: center;\n    padding: 6px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 13px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n    white-space: nowrap;\n  }\n\n  .toolbar__dd-item:hover {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));\n  }\n\n  .toolbar__dd-item[data-active] {\n    background: var(\n      --nile-colors-primary-50,\n      var(--ng-componentcolors-utility-blue-50, #eff4ff)\n    );\n    color: var(--nile-colors-primary-700, #1d4ed8);\n  }\n\n  /* --- Color pickers, nile-rte-color style --- */\n  .toolbar__color {\n    position: relative;\n    display: inline-flex;\n  }\n\n  .toolbar__color .glyph-stack {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  .toolbar__color .glyph {\n    font-size: 14px;\n    margin-bottom: 2px;\n    font-weight: 400;\n  }\n\n  .toolbar__color .underline {\n    width: 18px;\n    height: 3px;\n    border-radius: 2px;\n  }\n\n  .toolbar__color .swatch-box {\n    width: 18px;\n    height: 16px;\n    border-radius: 4px;\n    border: 1px solid rgba(0, 0, 0, 0.35);\n    pointer-events: none;\n    box-sizing: border-box;\n  }\n\n  /* Floating panel that hosts the inline nile-color-picker. */\n  .toolbar__color-panel {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    z-index: 30;\n    background: var(--nile-colors-white-base, #ffffff);\n    border: 1px solid\n      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n    box-sizing: border-box;\n  }\n\n  /* --- Overflow (\"more\" / 3-dot) menu --- */\n  /* The 3-dot button stays in its normal place in the toolbar flow. */\n  .toolbar__overflow {\n    position: relative;\n    display: inline-flex;\n  }\n\n  /* Panel drops directly beneath the 3-dot button, aligned to its left edge and\n     extending right, so it opens wherever the button sits. width:max-content\n     sizes it to exactly its controls (rather than collapsing to the 32px\n     button's shrink-to-fit width); the max-width cap wraps a full menu onto\n     multiple rows instead of running off-screen. */\n  .toolbar__overflow-panel {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    right: auto;\n    width: max-content;\n    max-width: min(360px, calc(100vw - 32px));\n    z-index: 31;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px;\n    padding: 8px;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));\n    border: 1px solid\n      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n    box-sizing: border-box;\n  }\n\n  .toolbar__overflow-divider {\n    width: 1px;\n    height: 24px;\n    margin: 0 4px;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));\n  }\n`;\n"]}

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

@@ -2,6 +2,21 @@ import { TemplateResult, CSSResultArray } from 'lit';
 import NileElement from '../../internal/nile-element';
 import type { ToolbarState } from '../engine/selection-state';
 import '../ui/table-grid-picker';
+import '../../nile-color-picker/nile-color-picker';
+/**
+ * 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;
+}
 /**
  * Config-driven toolbar. Renders from a single immutable ToolbarState
  * snapshot; every interaction is dispatched to the host as a
@@ -12,17 +27,35 @@ import '../ui/table-grid-picker';
 export declare class NileWysiwygToolbar extends NileElement {
     /** Space-separated item names; `|` inserts a divider. */
     config: string;
+    /**
+     * 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.
+     */
+    items?: AuthoredToolbarItem[];
     disabled: boolean;
     toolbarState?: ToolbarState;
     /** Which dropdown/color panel is open (item name), if any. */
     private openMenu;
-    /** Recently used colors per color command, like nile-rte-color. */
-    private recentColors;
+    /** Whether the overflow ("more" / 3-dot) menu panel is open. */
+    private overflowOpen;
     static get styles(): CSSResultArray;
+    /**
+     * 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();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleOutsideClick;
     private toggleMenu;
+    private toggleOverflow;
     private dispatchCommand;
     /** Wraps a control in the design system's lightweight tooltip (same as
      * the legacy rich text editor's toolbar). */
@@ -32,6 +65,21 @@ export declare class NileWysiwygToolbar extends NileElement {
     private setColor;
     private renderColor;
     private renderItem;
+    /** Parses the `config` string into a flat token list, keeping the `|`
+     * (divider) and `>>` (overflow) markers as items. */
+    private itemsFromConfig;
+    /** Splits a flat item list into groups, breaking on `'|'` dividers. */
+    private groupItems;
+    /** 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;
+    /** 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;
     render(): TemplateResult;
 }
 declare global {

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.js

@@ -6,6 +6,7 @@ import { renderGlyph } from '../../internal/glyph';
 import { styles } from './nile-wysiwyg-toolbar.css';
 import { DEFAULT_TOOLBAR } from '../types';
 import '../ui/table-grid-picker';
+import '../../nile-color-picker/nile-color-picker';
 const FONT_FAMILIES = [
     'Arial',
     'Georgia',
@@ -16,12 +17,6 @@ const FONT_FAMILIES = [
     'Courier New',
 ];
 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 = {
     undo: {
         kind: 'button',
@@ -436,18 +431,38 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
         this.disabled = false;
         /** Which dropdown/color panel is open (item name), if any. */
         this.openMenu = null;
-        /** Recently used colors per color command, like nile-rte-color. */
-        this.recentColors = {};
+        /** Whether the overflow ("more" / 3-dot) menu panel is open. */
+        this.overflowOpen = false;
         this.handleOutsideClick = (event) => {
-            if (this.openMenu && !event.composedPath().includes(this))
+            if ((this.openMenu || this.overflowOpen) && !event.composedPath().includes(this)) {
                 this.openMenu = null;
+                this.overflowOpen = false;
+            }
+        };
+        this.toggleOverflow = () => {
+            this.overflowOpen = !this.overflowOpen;
+            this.openMenu = null;
         };
     }
     static get styles() {
         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.
+     */
+    get isAuthoringContainer() {
+        return !!this.closest('nile-wysiwyg-editor');
+    }
     connectedCallback() {
         super.connectedCallback();
+        if (this.isAuthoringContainer)
+            return;
         document.addEventListener('mousedown', this.handleOutsideClick);
     }
     disconnectedCallback() {
@@ -458,26 +473,32 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
         this.openMenu = this.openMenu === name ? null : name;
     }
     dispatchCommand(name, attrs) {
+        // 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 });
     }
     /** Wraps a control in the design system's lightweight tooltip (same as
      * the legacy rich text editor's toolbar). */
     withTooltip(label, control) {
         return html `
-      <nile-lite-tooltip content=${label} placement="bottom">${control}</nile-lite-tooltip>
+      <nile-lite-tooltip content=${label} placement="top">${control}</nile-lite-tooltip>
     `;
     }
-    renderButton(def) {
+    renderButton(def, overrides) {
         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;
-        return this.withTooltip(def.label, html `
+        const label = overrides?.label ?? def.label;
+        const baseIcon = overrides?.icon ?? def.icon;
+        const icon = isActive && def.iconActive ? def.iconActive : baseIcon;
+        return this.withTooltip(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}
@@ -488,20 +509,21 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
         </button>
       `);
     }
-    renderSelect(name, def) {
+    renderSelect(name, def, overrides) {
         const value = this.toolbarState ? def.value(this.toolbarState) : '';
         const options = typeof def.options === 'function' ? def.options(this.toolbarState) : def.options;
         const current = options.find(opt => opt.value === value) ?? options[0];
         const isDisabled = 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, html `
+        ${this.withTooltip(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}` : ''}
@@ -535,27 +557,23 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
       </span>
     `;
     }
-    setColor(name, def, color) {
-        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 });
+    setColor(def, color) {
+        // 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 });
     }
-    renderColor(name, def) {
+    renderColor(name, def, overrides) {
         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, html `
+        ${this.withTooltip(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) => e.preventDefault()}
@@ -573,76 +591,23 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
           `)}
         ${this.openMenu === name
             ? html `
-              <div class="toolbar__swatch-panel" @mousedown=${(e) => 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) => {
-                const input = e.currentTarget
-                    .closest('.toolbar__color')
-                    .querySelector('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) => this.setColor(def, e.detail.value)}
+                ></nile-color-picker>
               </div>
             `
             : nothing}
-        <input
-          type="color"
-          tabindex="-1"
-          aria-hidden="true"
-          .value=${shown}
-          @input=${(e) => this.setColor(name, def, e.target.value)}
-        />
       </span>
     `;
     }
-    renderItem(name) {
+    renderItem(name, overrides) {
         if (name === 'table') {
-            return this.withTooltip('Insert table', html `
+            return this.withTooltip(overrides?.label ?? 'Insert table', html `
           <nile-wysiwyg-table-picker
             part="button"
             ?disabled=${this.disabled}
@@ -654,26 +619,114 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
             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. */
+    itemsFromConfig(config) {
+        return config
+            .trim()
+            .split(/\s+/)
+            .filter(Boolean)
+            .map(name => ({ name }));
+    }
+    /** Splits a flat item list into groups, breaking on `'|'` dividers. */
+    groupItems(items) {
+        const groups = [[]];
+        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. */
+    partitionGroups(items) {
+        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. */
+    renderOverflow(hasMain, groups) {
+        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) => e.preventDefault()}
+              @click=${this.toggleOverflow}
+            >
+              ${renderGlyph('ng-dots-vertical', 18)}
+            </button>
+          `)}
+        ${open
+            ? html `
+              <div
+                class="toolbar__overflow-panel"
+                part="overflow-panel"
+                @mousedown=${(e) => 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>
+    `;
+    }
     render() {
-        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((group, index) => html `
+        ${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>
     `;
     }
@@ -681,6 +734,9 @@ let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
 __decorate([
     property({ type: String })
 ], NileWysiwygToolbar.prototype, "config", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygToolbar.prototype, "items", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileWysiwygToolbar.prototype, "disabled", void 0);
@@ -692,7 +748,7 @@ __decorate([
 ], NileWysiwygToolbar.prototype, "openMenu", void 0);
 __decorate([
     state()
-], NileWysiwygToolbar.prototype, "recentColors", void 0);
+], NileWysiwygToolbar.prototype, "overflowOpen", void 0);
 NileWysiwygToolbar = __decorate([
     customElement('nile-wysiwyg-toolbar')
 ], NileWysiwygToolbar);