@aquera/nile-elements 1.9.11 → 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(_tippyEsm008CjsJs){},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-calendar/nile-calendar.css.js

@@ -46,7 +46,7 @@ export const styles = css `
     width: 100%;
     height: auto;
     text-align: center;
-    background: white;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));
   }
 

package/dist/src/nile-calendar/nile-calendar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+nBxB,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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n  \n  .base {\n    background-color: var(\n      --nile-colors-white-base,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-2xl));\n    width: var(--nile-width-288px, var(--ng-width-312));\n    border: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));\n    box-shadow: var(\n      --nile-box-shadow-15,\n      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)\n    ); // Need to fix the token for this\n    border: var(\n      --nile-spacing-spacing-none,\n      1px solid var(--ng-colors-border-secondary-alt)\n    );\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-wrapper {\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: var(--nile-spacing-22px, var(--ng-spacing-2xl))\n      var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n    display: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date,\n  .day_name {\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-style: normal;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    text-align: center;\n    width: 100%;\n    height: var(--nile-width-32px, var(--ng-width-10));\n    display: grid;\n    place-items: center;\n  }\n\n  .day_name {\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .day_date {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-white)\n    );\n    position: absolute;\n    border-radius: 50%;\n    height: 5px;\n    width: 5px;\n    left: 25%;\n    top: 90%;\n  }\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  .day_date:hover {\n    background-color: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-secondary-hover)\n    );\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-end {\n    cursor: pointer;\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .day_date.in-range:not(.range-start, .range-end, .selected-date) {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n  }\n\n  .not-allowed {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: 100%;\n    justify-content: space-between;\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    width: auto;\n    align-items: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: nowrap;\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-container {\n    width: 100%;\n    display: flex;\n    justify-content: end;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  nile-tab::part(base) {\n    padding-bottom: 12px;\n    justify-content: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .units-wrapper {\n    width: min-content;\n    margin: auto;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  :host([disabled]) .unit-container {\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n  }\n\n  .unit-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .duration-name {\n    display: flex;\n    align-items: center;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .duration-units {\n    display: flex;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    gap: 6px;\n  }\n\n  .duration__value {\n    display: grid;\n    place-items: center;\n    width: var(--nile-width-32px, var(--ng-width-10));\n    height: var(--nile-width-32px, var(--ng-width-10));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    border: 1px solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  .duration__value:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n  }\n\n  .duration__value--selected {\n    background-color: var(\n      --nile-colors-blue-400,\n      var(--ng-colors-bg-brand-solid)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .duration__value--selected:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    line-height: 0;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-none, var(--ng-spacing-xl))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .duration-input,\n  .time-input,\n  .manual-input {\n    width: 125px;\n  }\n\n  .time-input::part(input),\n  .manual-input::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  /* New Styles */\n\n  nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {\n    transform: rotate(180deg);\n  }\n\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    font-feature-settings: 'liga' off, 'clig' off;\n  }\n\n  .calendar-header__center {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .calendar-header__trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    background: transparent;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n  }\n\n  .calendar-header__caret {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n    transform-origin: center;\n  }\n\n  .calendar-menu {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 100px;\n  }\n\n  .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 100px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  nile-menu-item[selected] {\n    background: var(--nile-colors-primary-100);\n  }\n\n  nile-menu-item[selected]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    border-radius: 0px;\n  }\n\n  nile-icon[disabled] {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  .units-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: auto;\n  }\n\n  .calendar-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-3xl))\n      var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-3xl));\n    box-sizing: border-box;\n  }\n\n  .manual-input {\n    flex: 1;\n    min-width: 120px;\n  }\n\n  .date-input nile-input::part(base),\n  .time-input nile-input::part(base) {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n  }\n\n  .day_date.in-range:hover:not(.range-start):not(.range-end) {\n    background-color: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-bg-quaternary)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-input.date-input::part(base),\n  .from-date {\n    width: var(--nile-width-150px, var(--ng-width-164));\n  }\n\n  nile-input.time-input::part(base),\n  .from-time {\n    width: var(--nile-width-99px, var(--ng-width-108));\n  }\n\n  .month-dropdown, .year-dropdown {\n    cursor: pointer;\n  }\n\n\n\n:host([disabled]) .calendar-header__month-navigation,\n:host([disabled]) .calendar-header__trigger,\n:host([disabled]) .day_date {\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .base {\n  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .calendar-container {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([disabled]) .day_name {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) nile-input::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n:host([disabled]) nile-select::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .calendar-switcher {\n  pointer-events: none;\n  opacity:var(--nile-opacity-50, var(--ng-opacity-50));\n}\n\n\n:host([disabled]) .day_date{\n  pointer-events:none;\n}\n:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .duration_unit{\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n}\n:host([disabled]) .duration__value {\n  cursor: not-allowed;\n}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+nBxB,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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n  \n  .base {\n    background-color: var(\n      --nile-colors-white-base,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-2xl));\n    width: var(--nile-width-288px, var(--ng-width-312));\n    border: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));\n    box-shadow: var(\n      --nile-box-shadow-15,\n      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)\n    ); // Need to fix the token for this\n    border: var(\n      --nile-spacing-spacing-none,\n      1px solid var(--ng-colors-border-secondary-alt)\n    );\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-wrapper {\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: var(--nile-spacing-22px, var(--ng-spacing-2xl))\n      var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n    display: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date,\n  .day_name {\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-style: normal;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    text-align: center;\n    width: 100%;\n    height: var(--nile-width-32px, var(--ng-width-10));\n    display: grid;\n    place-items: center;\n  }\n\n  .day_name {\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .day_date {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-white)\n    );\n    position: absolute;\n    border-radius: 50%;\n    height: 5px;\n    width: 5px;\n    left: 25%;\n    top: 90%;\n  }\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  .day_date:hover {\n    background-color: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-secondary-hover)\n    );\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-end {\n    cursor: pointer;\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .day_date.in-range:not(.range-start, .range-end, .selected-date) {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n  }\n\n  .not-allowed {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: 100%;\n    justify-content: space-between;\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    width: auto;\n    align-items: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: nowrap;\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-container {\n    width: 100%;\n    display: flex;\n    justify-content: end;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  nile-tab::part(base) {\n    padding-bottom: 12px;\n    justify-content: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .units-wrapper {\n    width: min-content;\n    margin: auto;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  :host([disabled]) .unit-container {\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n  }\n\n  .unit-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .duration-name {\n    display: flex;\n    align-items: center;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .duration-units {\n    display: flex;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    gap: 6px;\n  }\n\n  .duration__value {\n    display: grid;\n    place-items: center;\n    width: var(--nile-width-32px, var(--ng-width-10));\n    height: var(--nile-width-32px, var(--ng-width-10));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    border: 1px solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  .duration__value:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n  }\n\n  .duration__value--selected {\n    background-color: var(\n      --nile-colors-blue-400,\n      var(--ng-colors-bg-brand-solid)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .duration__value--selected:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    line-height: 0;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-none, var(--ng-spacing-xl))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .duration-input,\n  .time-input,\n  .manual-input {\n    width: 125px;\n  }\n\n  .time-input::part(input),\n  .manual-input::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  /* New Styles */\n\n  nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {\n    transform: rotate(180deg);\n  }\n\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    font-feature-settings: 'liga' off, 'clig' off;\n  }\n\n  .calendar-header__center {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .calendar-header__trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    background: transparent;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n  }\n\n  .calendar-header__caret {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n    transform-origin: center;\n  }\n\n  .calendar-menu {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 100px;\n  }\n\n  .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 100px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  nile-menu-item[selected] {\n    background: var(--nile-colors-primary-100);\n  }\n\n  nile-menu-item[selected]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    border-radius: 0px;\n  }\n\n  nile-icon[disabled] {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  .units-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: auto;\n  }\n\n  .calendar-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-3xl))\n      var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-3xl));\n    box-sizing: border-box;\n  }\n\n  .manual-input {\n    flex: 1;\n    min-width: 120px;\n  }\n\n  .date-input nile-input::part(base),\n  .time-input nile-input::part(base) {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n  }\n\n  .day_date.in-range:hover:not(.range-start):not(.range-end) {\n    background-color: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-bg-quaternary)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-input.date-input::part(base),\n  .from-date {\n    width: var(--nile-width-150px, var(--ng-width-164));\n  }\n\n  nile-input.time-input::part(base),\n  .from-time {\n    width: var(--nile-width-99px, var(--ng-width-108));\n  }\n\n  .month-dropdown, .year-dropdown {\n    cursor: pointer;\n  }\n\n\n\n:host([disabled]) .calendar-header__month-navigation,\n:host([disabled]) .calendar-header__trigger,\n:host([disabled]) .day_date {\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .base {\n  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .calendar-container {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([disabled]) .day_name {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) nile-input::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n:host([disabled]) nile-select::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .calendar-switcher {\n  pointer-events: none;\n  opacity:var(--nile-opacity-50, var(--ng-opacity-50));\n}\n\n\n:host([disabled]) .day_date{\n  pointer-events:none;\n}\n:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .duration_unit{\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n}\n:host([disabled]) .duration__value {\n  cursor: not-allowed;\n}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-calendar/nile-calendar.js

@@ -463,7 +463,7 @@ let NileCalendar = class NileCalendar extends NileElement {
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
+            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'}
             role="button"
             tabindex="${this.disabled || this.isPrevDisabled() ? '-1' : '0'}"
             @keydown="${(e) => { if (e.key === 'Enter' || e.key === ' ')
@@ -483,7 +483,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
         part="trigger"
       >
         ${new Date(year, month).toLocaleString('default', { month: 'long' })}
-        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'} class="calendar-header__caret"></nile-icon>
+        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'} class="calendar-header__caret"></nile-icon>
       </span>
       <nile-menu>
         <div class="month-scroll-wrapper">
@@ -513,7 +513,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
         part="trigger"
       >
         ${year}
-        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'} class="calendar-header__caret"></nile-icon>
+        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'} class="calendar-header__caret"></nile-icon>
       </span>
       <nile-menu>
         <div class="year-scroll-wrapper">
@@ -546,7 +546,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
+            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'}
             role="button"
             tabindex="${this.disabled || this.isNextDisabled() ? '-1' : '0'}"
             @keydown="${(e) => { if (e.key === 'Enter' || e.key === ' ')