@aquera/nile-elements 1.9.11 → 2.0.1

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js

@@ -53,11 +53,11 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
 
         button.trigger:hover:not(:disabled) {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         button.trigger:disabled {
@@ -71,8 +71,8 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           left: 0;
           z-index: 30;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -85,22 +85,22 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
         .cell {
           width: 14px;
           height: 14px;
-          border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
           border-radius: 2px;
           box-sizing: border-box;
           cursor: pointer;
         }
 
         .cell.hot {
-          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
 
         .label {
           margin-top: 6px;
           text-align: center;
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #475467);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
         }
 
         .custom {
@@ -109,19 +109,19 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           gap: 6px;
           margin-top: 8px;
           padding-top: 8px;
-          border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
+          border-top: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
         }
 
         .custom input {
           width: 44px;
           height: 26px;
           padding: 0 6px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 6px;
           font-size: 12px;
           box-sizing: border-box;
           text-align: center;
-          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
           font-family: inherit;
           /* Hide native number spinners: they overlap the centered text in this
              narrow field and a stray click on the arrows mutates the value. */
@@ -137,12 +137,12 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
 
         .custom input:focus {
           outline: none;
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
 
         .custom .times {
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #475467);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
         }
 
         .custom button.insert {
@@ -151,8 +151,8 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           padding: 0 12px;
           border: none;
           border-radius: 6px;
-          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-          color: #ffffff;
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+          color: var(--ng-colors-text-white);
           font-size: 12px;
           font-weight: 600;
           font-family: inherit;
@@ -160,7 +160,7 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
         }
 
         .custom button.insert:hover:not(:disabled) {
-          background: var(--nile-colors-primary-700, #1d4ed8);
+          background: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
 
         .custom button.insert:disabled {

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/** Smallest grid shown before the pointer starts expanding it. */\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/**\n * Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.\n */\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Hard cap on the number of rows selectable via grid or custom input. */\n  @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n  /** Hard cap on the number of columns selectable via grid or custom input. */\n  @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n  @state() private open = false;\n\n  @state() private hoverRows = 0;\n\n  @state() private hoverCols = 0;\n\n  @state() private customRows = '';\n\n  @state() private customCols = '';\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: relative;\n          display: inline-flex;\n        }\n\n        button.trigger {\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          border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n          background: transparent;\n          cursor: pointer;\n          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n        }\n\n        button.trigger:hover:not(:disabled) {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        button.trigger:disabled {\n          opacity: 0.4;\n          cursor: default;\n        }\n\n        .panel {\n          position: absolute;\n          top: calc(100% + 4px);\n          left: 0;\n          z-index: 30;\n          padding: 8px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        .grid {\n          display: grid;\n          gap: 2px;\n        }\n\n        .cell {\n          width: 14px;\n          height: 14px;\n          border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);\n          border-radius: 2px;\n          box-sizing: border-box;\n          cursor: pointer;\n        }\n\n        .cell.hot {\n          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .label {\n          margin-top: 6px;\n          text-align: center;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n        }\n\n        .custom {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          margin-top: 8px;\n          padding-top: 8px;\n          border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n        }\n\n        .custom input {\n          width: 44px;\n          height: 26px;\n          padding: 0 6px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          font-size: 12px;\n          box-sizing: border-box;\n          text-align: center;\n          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n          font-family: inherit;\n          /* Hide native number spinners: they overlap the centered text in this\n             narrow field and a stray click on the arrows mutates the value. */\n          -moz-appearance: textfield;\n          appearance: textfield;\n        }\n\n        .custom input::-webkit-outer-spin-button,\n        .custom input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        .custom input:focus {\n          outline: none;\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .custom .times {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n        }\n\n        .custom button.insert {\n          margin-left: auto;\n          height: 26px;\n          padding: 0 12px;\n          border: none;\n          border-radius: 6px;\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n          font-size: 12px;\n          font-weight: 600;\n          font-family: inherit;\n          cursor: pointer;\n        }\n\n        .custom button.insert:hover:not(:disabled) {\n          background: var(--nile-colors-primary-700, #1d4ed8);\n        }\n\n        .custom button.insert:disabled {\n          opacity: 0.4;\n          cursor: default;\n        }\n      `,\n    ];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('mousedown', this.handleOutside);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('mousedown', this.handleOutside);\n  }\n\n  private handleOutside = (event: MouseEvent): void => {\n    if (this.open && !event.composedPath().includes(this)) this.open = false;\n  };\n\n  private pick(rows: number, cols: number): void {\n    this.open = false;\n    this.customRows = '';\n    this.customCols = '';\n    this.emit('wysiwyg-command', {\n      name: 'insertTable',\n      attrs: { rows, cols, withHeaderRow: true },\n    });\n  }\n\n  /** Clamp raw input to 1..max; returns 0 when empty/invalid. */\n  private clamp(raw: string, max: number): number {\n    const n = parseInt(raw, 10);\n    if (!Number.isFinite(n) || n < 1) return 0;\n    return Math.min(n, max);\n  }\n\n  private insertCustom(): void {\n    const rows = this.clamp(this.customRows, this.maxRows);\n    const cols = this.clamp(this.customCols, this.maxCols);\n    if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n  }\n\n  public render(): TemplateResult {\n    // Grow the grid by one row/col once the pointer reaches the edge, capped.\n    const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n    const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n    const cells: TemplateResult[] = [];\n    for (let r = 1; r <= visibleRows; r += 1) {\n      for (let c = 1; c <= visibleCols; c += 1) {\n        cells.push(html`\n          <span\n            class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n            @mouseenter=${() => {\n              this.hoverRows = r;\n              this.hoverCols = c;\n            }}\n            @click=${() => this.pick(r, c)}\n          ></span>\n        `);\n      }\n    }\n\n    const customValid =\n      this.clamp(this.customRows, this.maxRows) >= 1 &&\n      this.clamp(this.customCols, this.maxCols) >= 1;\n\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        part=\"button\"\n        aria-label=\"Insert table\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @mousedown=${(e: Event) => e.preventDefault()}\n        @click=${() => {\n          this.open = !this.open;\n          this.hoverRows = 0;\n          this.hoverCols = 0;\n        }}\n      >\n        <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n      </button>\n      ${this.open\n        ? html`\n            <div class=\"panel\">\n              <div\n                class=\"grid\"\n                style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n                @mousedown=${(e: Event) => e.preventDefault()}\n                @mouseleave=${() => {\n                  this.hoverRows = 0;\n                  this.hoverCols = 0;\n                }}\n              >\n                ${cells}\n              </div>\n              <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n                ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n              </div>\n              <div class=\"custom\">\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  max=${this.maxRows}\n                  aria-label=\"Rows\"\n                  placeholder=\"Rows\"\n                  .value=${this.customRows}\n                  @input=${(e: Event) => {\n                    this.customRows = (e.target as HTMLInputElement).value;\n                  }}\n                  @keydown=${(e: KeyboardEvent) => {\n                    if (e.key === 'Enter') this.insertCustom();\n                  }}\n                />\n                <span class=\"times\">×</span>\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  max=${this.maxCols}\n                  aria-label=\"Columns\"\n                  placeholder=\"Cols\"\n                  .value=${this.customCols}\n                  @input=${(e: Event) => {\n                    this.customCols = (e.target as HTMLInputElement).value;\n                  }}\n                  @keydown=${(e: KeyboardEvent) => {\n                    if (e.key === 'Enter') this.insertCustom();\n                  }}\n                />\n                <button\n                  type=\"button\"\n                  class=\"insert\"\n                  ?disabled=${!customValid}\n                  @click=${() => this.insertCustom()}\n                >\n                  Insert\n                </button>\n              </div>\n            </div>\n          `\n        : ''}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n  }\n}\n"]}
+{"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/** Smallest grid shown before the pointer starts expanding it. */\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/**\n * Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.\n */\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Hard cap on the number of rows selectable via grid or custom input. */\n  @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n  /** Hard cap on the number of columns selectable via grid or custom input. */\n  @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n  @state() private open = false;\n\n  @state() private hoverRows = 0;\n\n  @state() private hoverCols = 0;\n\n  @state() private customRows = '';\n\n  @state() private customCols = '';\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: relative;\n          display: inline-flex;\n        }\n\n        button.trigger {\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          border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n          background: transparent;\n          cursor: pointer;\n          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n        }\n\n        button.trigger:hover:not(:disabled) {\n          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n        }\n\n        button.trigger:disabled {\n          opacity: 0.4;\n          cursor: default;\n        }\n\n        .panel {\n          position: absolute;\n          top: calc(100% + 4px);\n          left: 0;\n          z-index: 30;\n          padding: 8px;\n          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        .grid {\n          display: grid;\n          gap: 2px;\n        }\n\n        .cell {\n          width: 14px;\n          height: 14px;\n          border: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n          border-radius: 2px;\n          box-sizing: border-box;\n          cursor: pointer;\n        }\n\n        .cell.hot {\n          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100));\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .label {\n          margin-top: 6px;\n          text-align: center;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n        }\n\n        .custom {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          margin-top: 8px;\n          padding-top: 8px;\n          border-top: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n        }\n\n        .custom input {\n          width: 44px;\n          height: 26px;\n          padding: 0 6px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 6px;\n          font-size: 12px;\n          box-sizing: border-box;\n          text-align: center;\n          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n          font-family: inherit;\n          /* Hide native number spinners: they overlap the centered text in this\n             narrow field and a stray click on the arrows mutates the value. */\n          -moz-appearance: textfield;\n          appearance: textfield;\n        }\n\n        .custom input::-webkit-outer-spin-button,\n        .custom input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        .custom input:focus {\n          outline: none;\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .custom .times {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n        }\n\n        .custom button.insert {\n          margin-left: auto;\n          height: 26px;\n          padding: 0 12px;\n          border: none;\n          border-radius: 6px;\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n          color: var(--ng-colors-text-white);\n          font-size: 12px;\n          font-weight: 600;\n          font-family: inherit;\n          cursor: pointer;\n        }\n\n        .custom button.insert:hover:not(:disabled) {\n          background: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n        }\n\n        .custom button.insert:disabled {\n          opacity: 0.4;\n          cursor: default;\n        }\n      `,\n    ];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('mousedown', this.handleOutside);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('mousedown', this.handleOutside);\n  }\n\n  private handleOutside = (event: MouseEvent): void => {\n    if (this.open && !event.composedPath().includes(this)) this.open = false;\n  };\n\n  private pick(rows: number, cols: number): void {\n    this.open = false;\n    this.customRows = '';\n    this.customCols = '';\n    this.emit('wysiwyg-command', {\n      name: 'insertTable',\n      attrs: { rows, cols, withHeaderRow: true },\n    });\n  }\n\n  /** Clamp raw input to 1..max; returns 0 when empty/invalid. */\n  private clamp(raw: string, max: number): number {\n    const n = parseInt(raw, 10);\n    if (!Number.isFinite(n) || n < 1) return 0;\n    return Math.min(n, max);\n  }\n\n  private insertCustom(): void {\n    const rows = this.clamp(this.customRows, this.maxRows);\n    const cols = this.clamp(this.customCols, this.maxCols);\n    if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n  }\n\n  public render(): TemplateResult {\n    // Grow the grid by one row/col once the pointer reaches the edge, capped.\n    const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n    const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n    const cells: TemplateResult[] = [];\n    for (let r = 1; r <= visibleRows; r += 1) {\n      for (let c = 1; c <= visibleCols; c += 1) {\n        cells.push(html`\n          <span\n            class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n            @mouseenter=${() => {\n              this.hoverRows = r;\n              this.hoverCols = c;\n            }}\n            @click=${() => this.pick(r, c)}\n          ></span>\n        `);\n      }\n    }\n\n    const customValid =\n      this.clamp(this.customRows, this.maxRows) >= 1 &&\n      this.clamp(this.customCols, this.maxCols) >= 1;\n\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        part=\"button\"\n        aria-label=\"Insert table\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @mousedown=${(e: Event) => e.preventDefault()}\n        @click=${() => {\n          this.open = !this.open;\n          this.hoverRows = 0;\n          this.hoverCols = 0;\n        }}\n      >\n        <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n      </button>\n      ${this.open\n        ? html`\n            <div class=\"panel\">\n              <div\n                class=\"grid\"\n                style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n                @mousedown=${(e: Event) => e.preventDefault()}\n                @mouseleave=${() => {\n                  this.hoverRows = 0;\n                  this.hoverCols = 0;\n                }}\n              >\n                ${cells}\n              </div>\n              <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n                ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n              </div>\n              <div class=\"custom\">\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  max=${this.maxRows}\n                  aria-label=\"Rows\"\n                  placeholder=\"Rows\"\n                  .value=${this.customRows}\n                  @input=${(e: Event) => {\n                    this.customRows = (e.target as HTMLInputElement).value;\n                  }}\n                  @keydown=${(e: KeyboardEvent) => {\n                    if (e.key === 'Enter') this.insertCustom();\n                  }}\n                />\n                <span class=\"times\">×</span>\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  max=${this.maxCols}\n                  aria-label=\"Columns\"\n                  placeholder=\"Cols\"\n                  .value=${this.customCols}\n                  @input=${(e: Event) => {\n                    this.customCols = (e.target as HTMLInputElement).value;\n                  }}\n                  @keydown=${(e: KeyboardEvent) => {\n                    if (e.key === 'Enter') this.insertCustom();\n                  }}\n                />\n                <button\n                  type=\"button\"\n                  class=\"insert\"\n                  ?disabled=${!customValid}\n                  @click=${() => this.insertCustom()}\n                >\n                  Insert\n                </button>\n              </div>\n            </div>\n          `\n        : ''}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/table-menu.js

@@ -47,8 +47,8 @@ let NileWysiwygTableMenu = class NileWysiwygTableMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -66,11 +66,11 @@ let NileWysiwygTableMenu = class NileWysiwygTableMenu extends NileElement {
           cursor: pointer;
           font-size: 12px;
           font-weight: 600;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
       `,
         ];

package/dist/src/nile-wysiwyg-editor/ui/table-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n  name: CommandName;\n  label: string;\n  icon: string;\n}\n\nconst OPS: TableOp[] = [\n  { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n  { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n  { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n  { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n  { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n  { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n  { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n  { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n  { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n  { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n  { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/**\n * Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .menu {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          min-width: 26px;\n          height: 26px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 12px;\n          font-weight: 600;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <nile-lite-tooltip content=${op.label} placement=\"top\">\n              <button\n                type=\"button\"\n                aria-label=${op.label}\n                @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n              >\n                ${renderGlyph(op.icon, 16)}\n              </button>\n            </nile-lite-tooltip>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n  }\n}\n"]}
+{"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n  name: CommandName;\n  label: string;\n  icon: string;\n}\n\nconst OPS: TableOp[] = [\n  { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n  { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n  { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n  { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n  { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n  { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n  { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n  { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n  { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n  { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n  { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/**\n * Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .menu {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          min-width: 26px;\n          height: 26px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 12px;\n          font-weight: 600;\n          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <nile-lite-tooltip content=${op.label} placement=\"top\">\n              <button\n                type=\"button\"\n                aria-label=${op.label}\n                @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n              >\n                ${renderGlyph(op.icon, 16)}\n              </button>\n            </nile-lite-tooltip>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n  }\n}\n"]}

package/dist/src/version.js

@@ -1,6 +1,6 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.9.11';
-export const NILE_VERSION = '1.2.7';
+export const NILE_ELEMENTS_VERSION = '2.0.1';
+export const NILE_VERSION = '1.2.8';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {
     window.nileElementsVersion = NILE_ELEMENTS_VERSION;

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.11';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '2.0.1';\nexport const NILE_VERSION = '1.2.8';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}