@aquera/nile-elements 2.0.0 → 2.0.1

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

@@ -1,4 +1,4 @@
-import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{property as r,state as o,customElement as s}from"lit/decorators.js";import{N as n}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let a=class extends n{constructor(){super(...arguments),this.disabled=!1,this.maxRows=20,this.maxCols=20,this.open=!1,this.hoverRows=0,this.hoverCols=0,this.customRows="",this.customCols="",this.handleOutside=t=>{this.open&&!t.composedPath().includes(this)&&(this.open=!1)}}static get styles(){return[e`
+import{__decorate as t}from"tslib";import{css as r,html as e}from"lit";import{property as i,state as o,customElement as s}from"lit/decorators.js";import{N as n}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let a=class extends n{constructor(){super(...arguments),this.disabled=!1,this.maxRows=20,this.maxCols=20,this.open=!1,this.hoverRows=0,this.hoverCols=0,this.customRows="",this.customCols="",this.handleOutside=t=>{this.open&&!t.composedPath().includes(this)&&(this.open=!1)}}static get styles(){return[r`
         :host {
           font-family: var(
             --nile-font-family-sans-serif,
@@ -20,11 +20,11 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           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 {
@@ -38,8 +38,8 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           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));
         }
@@ -52,22 +52,22 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
         .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 {
@@ -76,19 +76,19 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           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. */
@@ -104,12 +104,12 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
 
         .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 {
@@ -118,8 +118,8 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           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;
@@ -127,20 +127,20 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
         }
 
         .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 {
           opacity: 0.4;
           cursor: default;
         }
-      `]}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this.handleOutside)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("mousedown",this.handleOutside)}pick(t,e){this.open=!1,this.customRows="",this.customCols="",this.emit("wysiwyg-command",{name:"insertTable",attrs:{rows:t,cols:e,withHeaderRow:!0}})}clamp(t,e){const i=parseInt(t,10);return!Number.isFinite(i)||i<1?0:Math.min(i,e)}insertCustom(){const t=this.clamp(this.customRows,this.maxRows),e=this.clamp(this.customCols,this.maxCols);t>=1&&e>=1&&this.pick(t,e)}render(){const t=Math.min(Math.max(5,this.hoverRows+1),this.maxRows),e=Math.min(Math.max(5,this.hoverCols+1),this.maxCols),r=[];for(let o=1;o<=t;o+=1)for(let t=1;t<=e;t+=1)r.push(i`
+      `]}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this.handleOutside)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("mousedown",this.handleOutside)}pick(t,r){this.open=!1,this.customRows="",this.customCols="",this.emit("wysiwyg-command",{name:"insertTable",attrs:{rows:t,cols:r,withHeaderRow:!0}})}clamp(t,r){const e=parseInt(t,10);return!Number.isFinite(e)||e<1?0:Math.min(e,r)}insertCustom(){const t=this.clamp(this.customRows,this.maxRows),r=this.clamp(this.customCols,this.maxCols);t>=1&&r>=1&&this.pick(t,r)}render(){const t=Math.min(Math.max(5,this.hoverRows+1),this.maxRows),r=Math.min(Math.max(5,this.hoverCols+1),this.maxCols),i=[];for(let o=1;o<=t;o+=1)for(let t=1;t<=r;t+=1)i.push(e`
           <span
             class="cell ${o<=this.hoverRows&&t<=this.hoverCols?"hot":""}"
             @mouseenter=${()=>{this.hoverRows=o,this.hoverCols=t}}
             @click=${()=>this.pick(o,t)}
           ></span>
-        `);const o=this.clamp(this.customRows,this.maxRows)>=1&&this.clamp(this.customCols,this.maxCols)>=1;return i`
+        `);const o=this.clamp(this.customRows,this.maxRows)>=1&&this.clamp(this.customCols,this.maxCols)>=1;return e`
       <button
         type="button"
         class="trigger"
@@ -153,15 +153,15 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
       >
         <nile-glyph name="grid-01" size="18" method="stroke"></nile-glyph>
       </button>
-      ${this.open?i`
+      ${this.open?e`
             <div class="panel">
               <div
                 class="grid"
-                style="grid-template-columns: repeat(${e}, 14px)"
+                style="grid-template-columns: repeat(${r}, 14px)"
                 @mousedown=${t=>t.preventDefault()}
                 @mouseleave=${()=>{this.hoverRows=0,this.hoverCols=0}}
               >
-                ${r}
+                ${i}
               </div>
               <div class="label" @mousedown=${t=>t.preventDefault()}>
                 ${this.hoverRows>0?`${this.hoverRows} × ${this.hoverCols}`:"Pick a size"}
@@ -199,4 +199,4 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
               </div>
             </div>
           `:""}
-    `}};t([r({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),t([r({type:Number,attribute:"max-rows",reflect:!0})],a.prototype,"maxRows",void 0),t([r({type:Number,attribute:"max-cols",reflect:!0})],a.prototype,"maxCols",void 0),t([o()],a.prototype,"open",void 0),t([o()],a.prototype,"hoverRows",void 0),t([o()],a.prototype,"hoverCols",void 0),t([o()],a.prototype,"customRows",void 0),t([o()],a.prototype,"customCols",void 0),a=t([s("nile-wysiwyg-table-picker")],a);
+    `}};t([i({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),t([i({type:Number,attribute:"max-rows",reflect:!0})],a.prototype,"maxRows",void 0),t([i({type:Number,attribute:"max-cols",reflect:!0})],a.prototype,"maxCols",void 0),t([o()],a.prototype,"open",void 0),t([o()],a.prototype,"hoverRows",void 0),t([o()],a.prototype,"hoverCols",void 0),t([o()],a.prototype,"customRows",void 0),t([o()],a.prototype,"customCols",void 0),a=t([s("nile-wysiwyg-table-picker")],a);

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

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/glyph.cjs.js","../../nile-lite-tooltip/nile-lite-tooltip.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js","../../nile-lite-tooltip/nile-lite-tooltip.css.cjs.js","../../tippy.esm-78baa8f2.cjs.js","../../nile-lite-tooltip/utils.cjs.js","../../utilities/visibility-manager.cjs.js"],function(_export,_context){"use strict";var e,l,t,o,n,i,a,_templateObject,_templateObject2,_templateObject3,r,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){l=_lit.css;t=_lit.html;},function(_litDecoratorsJs){o=_litDecoratorsJs.property;n=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){i=_internalNileElementCjsJs.N;},function(_internalGlyphCjsJs){a=_internalGlyphCjsJs.r;},function(_nileLiteTooltipNileLiteTooltipCjsJs){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){},function(_nileLiteTooltipNileLiteTooltipCssCjsJs){},function(_tippyEsm009CjsJs){},function(_nileLiteTooltipUtilsCjsJs){},function(_utilitiesVisibilityManagerCjsJs){}],execute:function execute(){r=[{name:"addRowBefore",label:"Add row above",icon:"ng-between-vertical-start"},{name:"addRowAfter",label:"Add row below",icon:"ng-between-vertical-end"},{name:"addColumnBefore",label:"Add column left",icon:"ng-between-horizontal-start"},{name:"addColumnAfter",label:"Add column right",icon:"ng-between-horizontal-end"},{name:"deleteRow",label:"Delete row",icon:"ng-rows-2"},{name:"deleteColumn",label:"Delete column",icon:"ng-columns-2"},{name:"mergeCells",label:"Merge cells",icon:"ng-table-cells-merge"},{name:"splitCell",label:"Split cell",icon:"ng-table-cells-split"},{name:"toggleHeaderRow",label:"Toggle header row",icon:"ng-panel-top"},{name:"toggleLayoutTable",label:"Toggle layout table (borderless)",icon:"ng-grid-2x2"},{name:"deleteTable",label:"Delete table",icon:"ng-trash-2"}];s=/*#__PURE__*/function(_i){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.open=!1;return _this;}_inherits(s,_i);return _createClass(s,[{key:"render",value:function render(){var _this2=this;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"menu\" part=\"table-menu\" @mousedown=",">\n        ","\n      </div>\n    "])),function(e){return e.preventDefault();},r.map(function(e){return t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <nile-lite-tooltip content="," placement=\"top\">\n              <button\n                type=\"button\"\n                aria-label=","\n                @click=","\n              >\n                ","\n              </button>\n            </nile-lite-tooltip>\n          "])),e.label,e.label,function(){return _this2.emit("wysiwyg-command",{name:e.name});},a(e.icon,16));}));}}],[{key:"styles",get:function get(){return[l(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\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      "])))];}}]);}(i);e([o({type:Boolean,reflect:!0})],s.prototype,"open",void 0),s=e([n("nile-wysiwyg-table-menu")],s);}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/glyph.cjs.js","../../nile-lite-tooltip/nile-lite-tooltip.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js","../../nile-lite-tooltip/nile-lite-tooltip.css.cjs.js","../../tippy.esm-78baa8f2.cjs.js","../../nile-lite-tooltip/utils.cjs.js","../../utilities/visibility-manager.cjs.js"],function(_export,_context){"use strict";var e,l,t,o,n,i,r,_templateObject,_templateObject2,_templateObject3,a,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){l=_lit.css;t=_lit.html;},function(_litDecoratorsJs){o=_litDecoratorsJs.property;n=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){i=_internalNileElementCjsJs.N;},function(_internalGlyphCjsJs){r=_internalGlyphCjsJs.r;},function(_nileLiteTooltipNileLiteTooltipCjsJs){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){},function(_nileLiteTooltipNileLiteTooltipCssCjsJs){},function(_tippyEsm009CjsJs){},function(_nileLiteTooltipUtilsCjsJs){},function(_utilitiesVisibilityManagerCjsJs){}],execute:function execute(){a=[{name:"addRowBefore",label:"Add row above",icon:"ng-between-vertical-start"},{name:"addRowAfter",label:"Add row below",icon:"ng-between-vertical-end"},{name:"addColumnBefore",label:"Add column left",icon:"ng-between-horizontal-start"},{name:"addColumnAfter",label:"Add column right",icon:"ng-between-horizontal-end"},{name:"deleteRow",label:"Delete row",icon:"ng-rows-2"},{name:"deleteColumn",label:"Delete column",icon:"ng-columns-2"},{name:"mergeCells",label:"Merge cells",icon:"ng-table-cells-merge"},{name:"splitCell",label:"Split cell",icon:"ng-table-cells-split"},{name:"toggleHeaderRow",label:"Toggle header row",icon:"ng-panel-top"},{name:"toggleLayoutTable",label:"Toggle layout table (borderless)",icon:"ng-grid-2x2"},{name:"deleteTable",label:"Delete table",icon:"ng-trash-2"}];s=/*#__PURE__*/function(_i){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.open=!1;return _this;}_inherits(s,_i);return _createClass(s,[{key:"render",value:function render(){var _this2=this;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"menu\" part=\"table-menu\" @mousedown=",">\n        ","\n      </div>\n    "])),function(e){return e.preventDefault();},a.map(function(e){return t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <nile-lite-tooltip content="," placement=\"top\">\n              <button\n                type=\"button\"\n                aria-label=","\n                @click=","\n              >\n                ","\n              </button>\n            </nile-lite-tooltip>\n          "])),e.label,e.label,function(){return _this2.emit("wysiwyg-command",{name:e.name});},r(e.icon,16));}));}}],[{key:"styles",get:function get(){return[l(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\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      "])))];}}]);}(i);e([o({type:Boolean,reflect:!0})],s.prototype,"open",void 0),s=e([n("nile-wysiwyg-table-menu")],s);}};});
 //# sourceMappingURL=table-menu.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-menu.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"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"],"names":["OPS","name","label","icon","NileWysiwygTableMenu","_i","s","constructor","this","open","_this","_inherits","_createClass","key","value","render","_this2","html","_templateObject","_taggedTemplateLiteral","e","preventDefault","map","op","_templateObject2","emit","renderGlyph","get","styles","css","_templateObject3","NileElement","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"w5HAaMA,CAAAA,CAAiB,CACrB,CAAEC,IAAM,CAAA,cAAA,CAAgBC,KAAO,CAAA,eAAA,CAAiBC,KAAM,2BACtD,CAAA,CAAA,CAAEF,IAAM,CAAA,aAAA,CAAeC,KAAO,CAAA,eAAA,CAAiBC,IAAM,CAAA,yBAAA,CAAA,CACrD,CAAEF,IAAAA,CAAM,iBAAmBC,CAAAA,KAAAA,CAAO,iBAAmBC,CAAAA,IAAAA,CAAM,+BAC3D,CAAEF,IAAAA,CAAM,gBAAkBC,CAAAA,KAAAA,CAAO,kBAAoBC,CAAAA,IAAAA,CAAM,2BAC3D,CAAA,CAAA,CAAEF,IAAM,CAAA,WAAA,CAAaC,KAAO,CAAA,YAAA,CAAcC,IAAM,CAAA,WAAA,CAAA,CAChD,CAAEF,IAAM,CAAA,cAAA,CAAgBC,KAAO,CAAA,eAAA,CAAiBC,IAAM,CAAA,cAAA,CAAA,CACtD,CAAEF,IAAAA,CAAM,YAAcC,CAAAA,KAAAA,CAAO,aAAeC,CAAAA,IAAAA,CAAM,sBAClD,CAAA,CAAA,CAAEF,KAAM,WAAaC,CAAAA,KAAAA,CAAO,YAAcC,CAAAA,IAAAA,CAAM,sBAChD,CAAA,CAAA,CAAEF,IAAM,CAAA,iBAAA,CAAmBC,KAAO,CAAA,mBAAA,CAAqBC,IAAM,CAAA,cAAA,CAAA,CAC7D,CAAEF,IAAAA,CAAM,oBAAqBC,KAAO,CAAA,kCAAA,CAAoCC,IAAM,CAAA,aAAA,CAAA,CAC9E,CAAEF,IAAAA,CAAM,aAAeC,CAAAA,KAAAA,CAAO,cAAgBC,CAAAA,IAAAA,CAAM,YAQ/C,CAAA,CAAA,CAAMC,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCACuCC,KAAAA,CAAIC,IAAAA,CAAAA,CAAG,CAuEpD,QAAAC,KAAA,EArEQC,SAAA,CAAAL,CAAA,CAAAD,EAAA,SAAAO,YAAA,CAAAN,CAAA,GAAAO,GAAA,UAAAC,KAAA,CAkDA,SAAAC,MAAAA,CAAAA,CACL,KAAAC,MAAA,MAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,wGACyCC,SAAAA,CAAAA,QAAaA,CAAAA,CAAEC,CAAAA,cAAAA,CAAAA,CAAAA,GAC7DrB,CAAIsB,CAAAA,GAAAA,CACJC,SAAAA,SAAMN,CAAAA,CAAI,CAAAO,gBAAA,GAAAA,gBAAA,CAAAL,sBAAA,wSACqBI,CAAGrB,CAAAA,KAAAA,CAGfqB,CAAGrB,CAAAA,KAAAA,CACP,iBAAMM,CAAAA,MAAKiB,CAAAA,IAAAA,CAAK,iBAAmB,CAAA,CAAExB,KAAMsB,CAAGtB,CAAAA,IAAAA,CAAAA,CAAAA,GAErDyB,CAAAA,CAAYH,EAAGpB,IAAM,CAAA,EAAA,CAAA,MAOpC,CAAA,KAAAU,GAAA,UAAAc,GAAA,CApEM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CACLC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAX,sBAAA,kvCA8CN,EAEM,MArDiCY,GACIC,EAAA,CAA3CC,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,QAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAqBhC,CAAAiC,CAAAA,SAAAA,CAAA,WAAA,EAD9CjC,CAAAA,CAAAA,CAAAA,CAAoB4B,CAAA,CAAA,CADhCM,EAAc,yBACFlC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}
+{"version":3,"file":"table-menu.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"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"],"names":["OPS","name","label","icon","NileWysiwygTableMenu","_i","s","constructor","this","open","_this","_inherits","_createClass","key","value","render","_this2","html","_templateObject","_taggedTemplateLiteral","e","preventDefault","map","op","_templateObject2","emit","renderGlyph","get","styles","css","_templateObject3","NileElement","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"w5HAaMA,CAAAA,CAAiB,CACrB,CAAEC,IAAM,CAAA,cAAA,CAAgBC,KAAO,CAAA,eAAA,CAAiBC,KAAM,2BACtD,CAAA,CAAA,CAAEF,IAAM,CAAA,aAAA,CAAeC,KAAO,CAAA,eAAA,CAAiBC,IAAM,CAAA,yBAAA,CAAA,CACrD,CAAEF,IAAAA,CAAM,iBAAmBC,CAAAA,KAAAA,CAAO,iBAAmBC,CAAAA,IAAAA,CAAM,+BAC3D,CAAEF,IAAAA,CAAM,gBAAkBC,CAAAA,KAAAA,CAAO,kBAAoBC,CAAAA,IAAAA,CAAM,2BAC3D,CAAA,CAAA,CAAEF,IAAM,CAAA,WAAA,CAAaC,KAAO,CAAA,YAAA,CAAcC,IAAM,CAAA,WAAA,CAAA,CAChD,CAAEF,IAAM,CAAA,cAAA,CAAgBC,KAAO,CAAA,eAAA,CAAiBC,IAAM,CAAA,cAAA,CAAA,CACtD,CAAEF,IAAAA,CAAM,YAAcC,CAAAA,KAAAA,CAAO,aAAeC,CAAAA,IAAAA,CAAM,sBAClD,CAAA,CAAA,CAAEF,KAAM,WAAaC,CAAAA,KAAAA,CAAO,YAAcC,CAAAA,IAAAA,CAAM,sBAChD,CAAA,CAAA,CAAEF,IAAM,CAAA,iBAAA,CAAmBC,KAAO,CAAA,mBAAA,CAAqBC,IAAM,CAAA,cAAA,CAAA,CAC7D,CAAEF,IAAAA,CAAM,oBAAqBC,KAAO,CAAA,kCAAA,CAAoCC,IAAM,CAAA,aAAA,CAAA,CAC9E,CAAEF,IAAAA,CAAM,aAAeC,CAAAA,KAAAA,CAAO,cAAgBC,CAAAA,IAAAA,CAAM,YAQ/C,CAAA,CAAA,CAAMC,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCACuCC,KAAAA,CAAIC,IAAAA,CAAAA,CAAG,CAuEpD,QAAAC,KAAA,EArEQC,SAAA,CAAAL,CAAA,CAAAD,EAAA,SAAAO,YAAA,CAAAN,CAAA,GAAAO,GAAA,UAAAC,KAAA,CAkDA,SAAAC,MAAAA,CAAAA,CACL,KAAAC,MAAA,MAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,wGACyCC,SAAAA,CAAAA,QAAaA,CAAAA,CAAEC,CAAAA,cAAAA,CAAAA,CAAAA,GAC7DrB,CAAIsB,CAAAA,GAAAA,CACJC,SAAAA,SAAMN,CAAAA,CAAI,CAAAO,gBAAA,GAAAA,gBAAA,CAAAL,sBAAA,wSACqBI,CAAGrB,CAAAA,KAAAA,CAGfqB,CAAGrB,CAAAA,KAAAA,CACP,iBAAMM,CAAAA,MAAKiB,CAAAA,IAAAA,CAAK,iBAAmB,CAAA,CAAExB,KAAMsB,CAAGtB,CAAAA,IAAAA,CAAAA,CAAAA,GAErDyB,CAAAA,CAAYH,EAAGpB,IAAM,CAAA,EAAA,CAAA,MAOpC,CAAA,KAAAU,GAAA,UAAAc,GAAA,CApEM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CACLC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAX,sBAAA,g1CA8CN,EAEM,MArDiCY,GACIC,EAAA,CAA3CC,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,QAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAqBhC,CAAAiC,CAAAA,SAAAA,CAAA,WAAA,EAD9CjC,CAAAA,CAAAA,CAAAA,CAAoB4B,CAAA,CAAA,CADhCM,EAAc,yBACFlC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}

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

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{css as l,html as t}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{N as i}from"../../internal/nile-element.esm.js";import{r as a}from"../../internal/glyph.esm.js";import"../../nile-lite-tooltip/nile-lite-tooltip.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";import"../../nile-lite-tooltip/nile-lite-tooltip.css.esm.js";import"../../tippy.esm-57628c2b.esm.js";import"../../nile-lite-tooltip/utils.esm.js";import"../../utilities/visibility-manager.esm.js";const r=[{name:"addRowBefore",label:"Add row above",icon:"ng-between-vertical-start"},{name:"addRowAfter",label:"Add row below",icon:"ng-between-vertical-end"},{name:"addColumnBefore",label:"Add column left",icon:"ng-between-horizontal-start"},{name:"addColumnAfter",label:"Add column right",icon:"ng-between-horizontal-end"},{name:"deleteRow",label:"Delete row",icon:"ng-rows-2"},{name:"deleteColumn",label:"Delete column",icon:"ng-columns-2"},{name:"mergeCells",label:"Merge cells",icon:"ng-table-cells-merge"},{name:"splitCell",label:"Split cell",icon:"ng-table-cells-split"},{name:"toggleHeaderRow",label:"Toggle header row",icon:"ng-panel-top"},{name:"toggleLayoutTable",label:"Toggle layout table (borderless)",icon:"ng-grid-2x2"},{name:"deleteTable",label:"Delete table",icon:"ng-trash-2"}];let s=class extends i{constructor(){super(...arguments),this.open=!1}static get styles(){return[l`
+import{__decorate as e}from"tslib";import{css as l,html as t}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{N as i}from"../../internal/nile-element.esm.js";import{r}from"../../internal/glyph.esm.js";import"../../nile-lite-tooltip/nile-lite-tooltip.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";import"../../nile-lite-tooltip/nile-lite-tooltip.css.esm.js";import"../../tippy.esm-57628c2b.esm.js";import"../../nile-lite-tooltip/utils.esm.js";import"../../utilities/visibility-manager.esm.js";const a=[{name:"addRowBefore",label:"Add row above",icon:"ng-between-vertical-start"},{name:"addRowAfter",label:"Add row below",icon:"ng-between-vertical-end"},{name:"addColumnBefore",label:"Add column left",icon:"ng-between-horizontal-start"},{name:"addColumnAfter",label:"Add column right",icon:"ng-between-horizontal-end"},{name:"deleteRow",label:"Delete row",icon:"ng-rows-2"},{name:"deleteColumn",label:"Delete column",icon:"ng-columns-2"},{name:"mergeCells",label:"Merge cells",icon:"ng-table-cells-merge"},{name:"splitCell",label:"Split cell",icon:"ng-table-cells-split"},{name:"toggleHeaderRow",label:"Toggle header row",icon:"ng-panel-top"},{name:"toggleLayoutTable",label:"Toggle layout table (borderless)",icon:"ng-grid-2x2"},{name:"deleteTable",label:"Delete table",icon:"ng-trash-2"}];let s=class extends i{constructor(){super(...arguments),this.open=!1}static get styles(){return[l`
         :host {
           font-family: var(
             --nile-font-family-sans-serif,
@@ -17,8 +17,8 @@ import{__decorate as e}from"tslib";import{css as l,html as t}from"lit";import{pr
           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));
         }
@@ -36,22 +36,22 @@ import{__decorate as e}from"tslib";import{css as l,html as t}from"lit";import{pr
           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));
         }
       `]}render(){return t`
       <div class="menu" part="table-menu" @mousedown=${e=>e.preventDefault()}>
-        ${r.map((e=>t`
+        ${a.map((e=>t`
             <nile-lite-tooltip content=${e.label} placement="top">
               <button
                 type="button"
                 aria-label=${e.label}
                 @click=${()=>this.emit("wysiwyg-command",{name:e.name})}
               >
-                ${a(e.icon,16)}
+                ${r(e.icon,16)}
               </button>
             </nile-lite-tooltip>
           `))}

package/dist/src/nile-code-editor/nile-code-editor.css.js

@@ -26,7 +26,6 @@ export const styles = css `
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     position: relative;
-    overflow: hidden;
   }
 
   .no-scroller .cm-scroller{
@@ -66,7 +65,8 @@ export const styles = css `
   }
 
   .cm-gutters{
-   border-radius: 0;
+   border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
+   border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
   }
 
   .expand__icon__container{

package/dist/src/nile-code-editor/nile-code-editor.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CodeEditor CSS\n */\nexport const styles = css`\n  *{\n    box-sizing:border-box;\n  }\n\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .code__editor__container {\n    display: flex;\n    padding: var(--nile-spacing-5px, var(--ng-spacing-none));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    position: relative;\n    overflow: hidden;\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width: none;\n  }\n\n  .error {\n    border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));\n  }\n\n  .disabled {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  cursor: not-allowed;\n  opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n  .disabled .cm-editor {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .ͼ1.cm-focused {\n    outline: none;\n  }\n\n  .cm-gutters{\n   border-radius: 0;\n  }\n\n  .expand__icon__container{\n    display: none;\n    position: absolute;\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));\n    cursor: pointer;\n    right: var(--nile-spacing-none, var(--ng-spacing-1-5));\n    top: 5px;\n    z-index: 1;\n    padding: var(--nile-spacing-5px, var(--ng-spacing-none));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    }\n  \n  .code__editor__container:hover > .expand__icon__container{\n    display: flex;\n  }\n\n  .code__editor__container.disabled .expand__icon__container{\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CodeEditor CSS\n */\nexport const styles = css`\n  *{\n    box-sizing:border-box;\n  }\n\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .code__editor__container {\n    display: flex;\n    padding: var(--nile-spacing-5px, var(--ng-spacing-none));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width: none;\n  }\n\n  .error {\n    border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));\n  }\n\n  .disabled {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  cursor: not-allowed;\n  opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n  .disabled .cm-editor {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .ͼ1.cm-focused {\n    outline: none;\n  }\n\n  .cm-gutters{\n   border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));\n   border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));\n  }\n\n  .expand__icon__container{\n    display: none;\n    position: absolute;\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));\n    cursor: pointer;\n    right: var(--nile-spacing-none, var(--ng-spacing-1-5));\n    top: 5px;\n    z-index: 1;\n    padding: var(--nile-spacing-5px, var(--ng-spacing-none));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    }\n  \n  .code__editor__container:hover > .expand__icon__container{\n    display: flex;\n  }\n\n  .code__editor__container.disabled .expand__icon__container{\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-code-editor/nile-code-editor.d.ts

@@ -61,7 +61,11 @@ export declare class NileCodeEditor extends NileElement {
     private themeComp;
     private autoCompletionComp;
     private autoCompleteStyleComp;
+    private darkThemeComp;
     private isSpacePressed;
+    private themeObserver?;
+    private colorSchemeQuery?;
+    private onThemeChange;
     /**
      * The styles for CodeEditor
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -125,6 +129,17 @@ export declare class NileCodeEditor extends NileElement {
     getReadOnlyExtension(): Extension[];
     getSingleLineExtension(): Extension;
     getPlaceholderExtension(): Extension;
+    /** Parses a token value (#rgb, #rrggbb, #rrggbbaa or rgb()/rgba()) into r/g/b. */
+    private parseColor;
+    /**
+     * An explicit `data-theme` on the document root wins. Otherwise decide from the
+     * tokens the page actually resolved to, NOT from `prefers-color-scheme` — a page
+     * can load the light-only token sheet on a dark-mode OS, and trusting the OS there
+     * paints a dark editor theme over a light page.
+     */
+    private isDarkTheme;
+    /** Applied in dark only so light is untouched.*/
+    getDarkThemeExtension(): Extension;
     getDefaultSyntaxHighlightingExtension(): Extension;
     getCustomThemeExtension(): Extension;
     getAutoCompleteStyleExtension(width?: number): Extension;

package/dist/src/nile-code-editor/nile-code-editor.js

@@ -9,9 +9,9 @@ import { html, } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
-import { placeholder, tooltips } from '@codemirror/view';
+import { placeholder, tooltips, highlightActiveLine } from '@codemirror/view';
 import { Compartment, EditorState } from '@codemirror/state';
-import { syntaxHighlighting, } from '@codemirror/language';
+import { syntaxHighlighting, defaultHighlightStyle, } from '@codemirror/language';
 import { lineNumbers } from '@codemirror/view';
 import { javascript, javascriptLanguage, } from '@codemirror/lang-javascript';
 import { sql } from '@codemirror/lang-sql';
@@ -21,7 +21,7 @@ import { autocompletion, acceptCompletion, closeCompletion, completionStatus } f
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { customisedThemeCss, fontFamily, readOnlyTheme, nileEditorTheme, nileHighlightStyle } from './theme';
+import { customisedThemeCss, fontFamily, readOnlyTheme, oneDarkTheme, oneDarkHighlightStyle } from './theme';
 import { keymap } from '@codemirror/view';
 // Choose the appropriate mode for your use case
 /**
@@ -72,7 +72,16 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.themeComp = new Compartment();
         this.autoCompletionComp = new Compartment();
         this.autoCompleteStyleComp = new Compartment();
+        this.darkThemeComp = new Compartment();
         this.isSpacePressed = false;
+        this.onThemeChange = () => {
+            this.view?.dispatch({
+                effects: [
+                    this.darkThemeComp.reconfigure(this.getDarkThemeExtension()),
+                    this.defaultSyntaxHighlightingComp.reconfigure(this.getDefaultSyntaxHighlightingExtension()),
+                ]
+            });
+        };
         /**
          * Custom autocomplete handler for code editor suggestions
          * @param context CompletionContext from CodeMirror
@@ -104,11 +113,17 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.themeObserver = new MutationObserver(this.onThemeChange);
+        this.themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+        this.colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+        this.colorSchemeQuery?.addEventListener('change', this.onThemeChange);
         this.emit('nile-init', undefined, false);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.resizeObserver?.disconnect();
+        this.themeObserver?.disconnect();
+        this.colorSchemeQuery?.removeEventListener('change', this.onThemeChange);
         this.view.destroy();
         this.emit('nile-destroy', undefined, false);
     }
@@ -259,7 +274,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             name="${this.expandIcon}"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-fill))"
             size="16"
-            color="black"
+            color="var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))"
           ></nile-glyph>
         </div>`
             : ''}
@@ -335,7 +350,8 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
                 defaultSyntaxHighlightingExtension,
                 this.autoCompletionComp.of(autocompletion({ aboveCursor: this.aboveCursor })),
                 language,
-                EditorView.theme(nileEditorTheme),
+                // Before customThemeExtension so the tokenised autocomplete popup styles still win.
+                this.darkThemeComp.of(this.getDarkThemeExtension()),
                 customThemeExtension,
                 autoCompleteStyleExtension,
                 this.getTabCompletionKeymap(),
@@ -515,8 +531,51 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
     getPlaceholderExtension() {
         return this.placeholder ? placeholder(this.placeholder) : [];
     }
+    /** Parses a token value (#rgb, #rrggbb, #rrggbbaa or rgb()/rgba()) into r/g/b. */
+    parseColor(value) {
+        const hex = value.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+        if (hex) {
+            const full = hex.length <= 4 ? hex.slice(0, 3).replace(/./g, c => c + c) : hex.slice(0, 6);
+            if (full.length !== 6)
+                return null;
+            return [0, 2, 4].map(i => parseInt(full.slice(i, i + 2), 16));
+        }
+        const parts = value.match(/^rgba?\(([^)]+)\)$/i)?.[1].split(/[\s,/]+/).map(Number);
+        return parts && parts.length >= 3 && parts.slice(0, 3).every(n => !isNaN(n))
+            ? [parts[0], parts[1], parts[2]]
+            : null;
+    }
+    /**
+     * An explicit `data-theme` on the document root wins. Otherwise decide from the
+     * tokens the page actually resolved to, NOT from `prefers-color-scheme` — a page
+     * can load the light-only token sheet on a dark-mode OS, and trusting the OS there
+     * paints a dark editor theme over a light page.
+     */
+    isDarkTheme() {
+        const theme = document.documentElement.getAttribute('data-theme');
+        if (theme === 'dark')
+            return true;
+        if (theme === 'light')
+            return false;
+        const bg = getComputedStyle(document.documentElement)
+            .getPropertyValue('--ng-colors-bg-primary')
+            .trim();
+        const rgb = this.parseColor(bg);
+        // No NxtGen tokens on the page (e.g. the enterprise sheet, which has no dark mode).
+        if (!rgb)
+            return false;
+        // Rec. 601 luma; the surface is dark if the page background is dark.
+        return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 128;
+    }
+    /** Applied in dark only so light is untouched.*/
+    getDarkThemeExtension() {
+        return this.isDarkTheme() ? [oneDarkTheme, highlightActiveLine()] : [];
+    }
     getDefaultSyntaxHighlightingExtension() {
-        return !this.disableSyntaxHighlighting ? syntaxHighlighting(nileHighlightStyle, { fallback: true }) : [];
+        if (this.disableSyntaxHighlighting)
+            return [];
+        const highlightStyle = this.isDarkTheme() ? oneDarkHighlightStyle : defaultHighlightStyle;
+        return syntaxHighlighting(highlightStyle, { fallback: true });
     }
     getCustomThemeExtension() {
         if (this.customThemeCSS) {