@aquera/nile-elements 2.0.0 → 2.0.2

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

@@ -21,8 +21,8 @@ export const styles = css `
     gap: 6px;
     padding: 8px;
     border-bottom: 1px solid
-      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: 8px 8px 0 0;
     box-sizing: border-box;
   }
@@ -31,7 +31,7 @@ export const styles = css `
     width: 1px;
     height: 24px;
     margin: 0 4px;
-    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   }
 
   button.toolbar__button {
@@ -46,18 +46,18 @@ export const styles = css `
     background: transparent;
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
     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));
     font-family: inherit;
     font-size: 14px;
     font-weight: 600;
   }
 
   button.toolbar__button:hover:not(:disabled) {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   button.toolbar__button[data-active] {
-    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
   }
 
   button.toolbar__button:disabled {
@@ -83,14 +83,14 @@ export const styles = css `
     background: transparent;
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
     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));
     font-family: inherit;
     font-size: 13px;
     white-space: nowrap;
   }
 
   button.toolbar__dd-trigger:hover:not(:disabled) {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   button.toolbar__dd-trigger:disabled {
@@ -107,9 +107,9 @@ export const styles = css `
     max-height: 260px;
     overflow-y: auto;
     padding: 4px;
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid
-      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
     box-sizing: border-box;
@@ -122,20 +122,20 @@ export const styles = css `
     border-radius: 6px;
     cursor: pointer;
     font-size: 13px;
-    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));
     white-space: nowrap;
   }
 
   .toolbar__dd-item:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   .toolbar__dd-item[data-active] {
     background: var(
       --nile-colors-primary-50,
-      var(--ng-componentcolors-utility-blue-50, #eff4ff)
+      var(--ng-componentcolors-utility-blue-50)
     );
-    color: var(--nile-colors-primary-700, #1d4ed8);
+    color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
   }
 
   /* --- Color pickers, nile-rte-color style --- */
@@ -179,9 +179,9 @@ export const styles = css `
     top: calc(100% + 6px);
     left: 0;
     z-index: 30;
-    background: var(--nile-colors-white-base, #ffffff);
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid
-      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
     box-sizing: border-box;
@@ -212,9 +212,9 @@ export const styles = css `
     align-items: center;
     gap: 6px;
     padding: 8px;
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid
-      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
     box-sizing: border-box;
@@ -224,7 +224,7 @@ export const styles = css `
     width: 1px;
     height: 24px;
     margin: 0 4px;
-    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   }
 `;
 //# sourceMappingURL=nile-wysiwyg-toolbar.css.js.map

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

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

package/dist/src/nile-wysiwyg-editor/ui/bookmark-panel.js

@@ -35,8 +35,8 @@ let NileWysiwygBookmarkPanel = class NileWysiwygBookmarkPanel extends NileElemen
           gap: 8px;
           min-width: 280px;
           padding: 12px;
-          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: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
           font-size: 13px;
@@ -46,29 +46,29 @@ let NileWysiwygBookmarkPanel = class NileWysiwygBookmarkPanel extends NileElemen
           display: flex;
           flex-direction: column;
           gap: 4px;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         input {
           font: inherit;
           padding: 6px 8px;
-          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;
           outline: none;
         }
 
         input:focus {
-          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));
         }
 
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         .error {
           font-size: 12px;
-          color: var(--nile-colors-error-600, #d92d20);
+          color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
         }
 
         .actions {
@@ -84,12 +84,12 @@ let NileWysiwygBookmarkPanel = class NileWysiwygBookmarkPanel extends NileElemen
           border: 1px solid transparent;
           cursor: pointer;
           background: transparent;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button.primary {
-          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);
         }
       `,
         ];

package/dist/src/nile-wysiwyg-editor/ui/bookmark-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"bookmark-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/bookmark-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAEtD;;;GAGG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QACuC,SAAI,GAAG,KAAK,CAAC;QAExC,UAAK,GAAG,EAAE,CAAC;IAwI9B,CAAC;IApIQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6EF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,uEAAuE;QACvE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACrE,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,IAAI,CAAC,KAAK,GAAG,wBAAwB,CAAC;YACtC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,YAAY;mBAChB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;;;;;;UAMC,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,KAAK,QAAQ;YAC9C,CAAC,CAAC,IAAI,CAAA,wEAAwE;;yCAE/C,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC;;;;;;KAM9E,CAAC;IACJ,CAAC;CACF,CAAA;AA1I6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAc;AAExC;IAAhB,KAAK,EAAE;uDAAoB;AAEI;IAA/B,KAAK,CAAC,uBAAuB,CAAC;2DAA8B;AALlD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA2IpC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Floating bookmark-insert panel: name an in-text anchor. Emits\n * `wysiwyg-bookmark-apply` detail: { id } and `wysiwyg-bookmark-cancel`.\n */\n@customElement('nile-wysiwyg-bookmark-panel')\nexport class NileWysiwygBookmarkPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private error = '';\n\n  @query('.bookmark-panel__name') nameInput?: HTMLInputElement;\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .bookmark-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n          min-width: 280px;\n          padding: 12px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n          font-size: 13px;\n        }\n\n        label {\n          display: flex;\n          flex-direction: column;\n          gap: 4px;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        input {\n          font: inherit;\n          padding: 6px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-error-600, #d92d20);\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n          justify-content: flex-end;\n        }\n\n        button {\n          font: inherit;\n          padding: 6px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.error = '';\n    this.updateComplete.then(() => {\n      if (this.nameInput) this.nameInput.value = '';\n      this.nameInput?.focus();\n    });\n  }\n\n  private handleSubmit(event: Event): void {\n    event.preventDefault();\n    // Anchor ids can't contain whitespace; collapse runs to a single dash.\n    const id = (this.nameInput?.value ?? '').trim().replace(/\\s+/g, '-');\n    if (!id) {\n      this.error = 'Enter a bookmark name.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-bookmark-apply', { id });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <form\n        class=\"bookmark-panel\"\n        part=\"bookmark-panel\"\n        @submit=${this.handleSubmit}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            e.stopPropagation();\n            this.emit('wysiwyg-bookmark-cancel');\n          }\n        }}\n      >\n        <label>\n          Bookmark name\n          <input class=\"bookmark-panel__name\" type=\"text\" placeholder=\"section-intro\" />\n        </label>\n        ${this.error\n          ? html`<div class=\"error\">${this.error}</div>`\n          : html`<div class=\"hint\">An invisible anchor you can link to with #name</div>`}\n        <div class=\"actions\">\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-bookmark-cancel')}>\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"primary\">Insert</button>\n        </div>\n      </form>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bookmark-panel': NileWysiwygBookmarkPanel;\n  }\n}\n"]}
+{"version":3,"file":"bookmark-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/bookmark-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAEtD;;;GAGG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QACuC,SAAI,GAAG,KAAK,CAAC;QAExC,UAAK,GAAG,EAAE,CAAC;IAwI9B,CAAC;IApIQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6EF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,uEAAuE;QACvE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACrE,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,IAAI,CAAC,KAAK,GAAG,wBAAwB,CAAC;YACtC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,YAAY;mBAChB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;;;;;;UAMC,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,KAAK,QAAQ;YAC9C,CAAC,CAAC,IAAI,CAAA,wEAAwE;;yCAE/C,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC;;;;;;KAM9E,CAAC;IACJ,CAAC;CACF,CAAA;AA1I6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAc;AAExC;IAAhB,KAAK,EAAE;uDAAoB;AAEI;IAA/B,KAAK,CAAC,uBAAuB,CAAC;2DAA8B;AALlD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA2IpC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Floating bookmark-insert panel: name an in-text anchor. Emits\n * `wysiwyg-bookmark-apply` detail: { id } and `wysiwyg-bookmark-cancel`.\n */\n@customElement('nile-wysiwyg-bookmark-panel')\nexport class NileWysiwygBookmarkPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private error = '';\n\n  @query('.bookmark-panel__name') nameInput?: HTMLInputElement;\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .bookmark-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n          min-width: 280px;\n          padding: 12px;\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: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n          font-size: 13px;\n        }\n\n        label {\n          display: flex;\n          flex-direction: column;\n          gap: 4px;\n          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n        }\n\n        input {\n          font: inherit;\n          padding: 6px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n          justify-content: flex-end;\n        }\n\n        button {\n          font: inherit;\n          padding: 6px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n          color: var(--ng-colors-text-white);\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.error = '';\n    this.updateComplete.then(() => {\n      if (this.nameInput) this.nameInput.value = '';\n      this.nameInput?.focus();\n    });\n  }\n\n  private handleSubmit(event: Event): void {\n    event.preventDefault();\n    // Anchor ids can't contain whitespace; collapse runs to a single dash.\n    const id = (this.nameInput?.value ?? '').trim().replace(/\\s+/g, '-');\n    if (!id) {\n      this.error = 'Enter a bookmark name.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-bookmark-apply', { id });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <form\n        class=\"bookmark-panel\"\n        part=\"bookmark-panel\"\n        @submit=${this.handleSubmit}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            e.stopPropagation();\n            this.emit('wysiwyg-bookmark-cancel');\n          }\n        }}\n      >\n        <label>\n          Bookmark name\n          <input class=\"bookmark-panel__name\" type=\"text\" placeholder=\"section-intro\" />\n        </label>\n        ${this.error\n          ? html`<div class=\"error\">${this.error}</div>`\n          : html`<div class=\"hint\">An invisible anchor you can link to with #name</div>`}\n        <div class=\"actions\">\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-bookmark-cancel')}>\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"primary\">Insert</button>\n        </div>\n      </form>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bookmark-panel': NileWysiwygBookmarkPanel;\n  }\n}\n"]}

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

@@ -109,9 +109,9 @@ let NileWysiwygBubbleMenu = class NileWysiwygBubbleMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
           border: 1px solid
-            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));
+            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));
           border-radius: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(
             --nile-wysiwyg-popover-shadow,
@@ -131,23 +131,23 @@ let NileWysiwygBubbleMenu = class NileWysiwygBubbleMenu extends NileElement {
           cursor: pointer;
           font-size: 13px;
           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));
         }
 
         button[data-active] {
-          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
-          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
 
         .divider {
           align-self: stretch;
           width: 1px;
           margin: 3px 2px;
-          background: var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
         }
       `,
         ];

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

@@ -1 +1 @@
-{"version":3,"file":"bubble-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/bubble-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { ToolbarState } from '../engine/selection-state';\nimport type { WysiwygCommandDetail } from '../types';\nimport type { AuthoredToolbarItem } from '../nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\n/** A control the bubble menu knows how to render, keyed by its authored name. */\ninterface BubbleDef {\n  /** The command dispatched on click. */\n  command: WysiwygCommandDetail['name'];\n  label: string;\n  /** nile-glyph icon name (ng-* names are stroke-drawn). */\n  icon: string;\n  /** Static attrs sent with the command (e.g. alignment direction). */\n  attrs?: WysiwygCommandDetail['attrs'];\n  active?: (state: ToolbarState) => boolean;\n}\n\n/**\n * Registry of controls addressable by `<nile-wysiwyg-bubble-item name=\"…\">`.\n * Icons/labels mirror the main toolbar so both surfaces look identical.\n */\nconst BUBBLE_ITEMS: Record<string, BubbleDef> = {\n  bold: { command: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },\n  italic: { command: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },\n  underline: {\n    command: 'underline',\n    label: 'Underline',\n    icon: 'format_underline',\n    active: s => s.underline,\n  },\n  strike: {\n    command: 'strike',\n    label: 'Strikethrough',\n    icon: 'ng-strikethrough',\n    active: s => s.strike,\n  },\n  code: { command: 'code', label: 'Inline code', icon: 'ng-code', active: s => s.code },\n  subscript: {\n    command: 'subscript',\n    label: 'Subscript',\n    icon: 'ng-subscript',\n    active: s => s.subscript,\n  },\n  superscript: {\n    command: 'superscript',\n    label: 'Superscript',\n    icon: 'ng-superscript',\n    active: s => s.superscript,\n  },\n  link: { command: 'openLink', label: 'Link', icon: 'link_2', active: s => s.linkActive },\n  bulletList: {\n    command: 'bulletList',\n    label: 'Bulleted list',\n    icon: 'format_list_bulleted',\n    active: s => s.inBulletList,\n  },\n  orderedList: {\n    command: 'orderedList',\n    label: 'Numbered list',\n    icon: 'format_list_numbered',\n    active: s => s.inOrderedList,\n  },\n  alignLeft: {\n    command: 'align',\n    label: 'Align left',\n    icon: 'format_align_left',\n    attrs: { align: 'left' },\n    active: s => s.align === 'left',\n  },\n  alignCenter: {\n    command: 'align',\n    label: 'Align center',\n    icon: 'format_align_middle',\n    attrs: { align: 'center' },\n    active: s => s.align === 'center',\n  },\n  alignRight: {\n    command: 'align',\n    label: 'Align right',\n    icon: 'format_align_right',\n    attrs: { align: 'right' },\n    active: s => s.align === 'right',\n  },\n  clearFormatting: {\n    command: 'clearFormatting',\n    label: 'Clear formatting',\n    icon: 'format_clear',\n  },\n};\n\n/** Built-in default when no `<nile-wysiwyg-bubble-item>` children are authored. */\nconst DEFAULT_BUBBLE = ['bold', 'italic', 'underline', 'strike', 'link'];\n\n/**\n * Balloon toolbar shown over non-empty selections. The host owns positioning\n * (absolute left/top) and visibility; commands bubble up as\n * `wysiwyg-command` events, same contract as the main toolbar.\n */\n@customElement('nile-wysiwyg-bubble-menu')\nexport class NileWysiwygBubbleMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\n\n  /**\n   * Structured item list authored in light DOM (from\n   * `<nile-wysiwyg-bubble-item>` children). `'|'` is a separator. Falls back to\n   * {@link DEFAULT_BUBBLE} when empty.\n   */\n  @property({ attribute: false }) items?: AuthoredToolbarItem[];\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        .bubble {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid\n            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(\n            --nile-wysiwyg-popover-shadow,\n            0 4px 12px rgba(16, 24, 40, 0.12)\n          );\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 26px;\n          height: 26px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 13px;\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n\n        .divider {\n          align-self: stretch;\n          width: 1px;\n          margin: 3px 2px;\n          background: var(--nile-colors-neutral-300, #e4e7ec);\n        }\n      `,\n    ];\n  }\n\n  /**\n   * True when this instance is an author's declarative `<nile-wysiwyg-bubble-menu>`\n   * container in an editor's light DOM (holding `<nile-wysiwyg-bubble-item>`\n   * children). It renders nothing — the editor reads the items and renders the\n   * real bubble menu in its own shadow DOM. The editor's internal instance\n   * lives in a shadow root, so `closest` never matches it.\n   */\n  private get isAuthoringContainer(): boolean {\n    return !!this.closest('nile-wysiwyg-editor');\n  }\n\n  public render(): TemplateResult {\n    if (this.isAuthoringContainer) return html``;\n\n    const state = this.toolbarState;\n    const entries: AuthoredToolbarItem[] =\n      this.items && this.items.length\n        ? this.items\n        : DEFAULT_BUBBLE.map(name => ({ name }));\n    return html`\n      <div class=\"bubble\" part=\"bubble-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${entries.map(entry => this.renderEntry(entry, state))}\n      </div>\n    `;\n  }\n\n  private renderEntry(\n    entry: AuthoredToolbarItem,\n    state?: ToolbarState\n  ): TemplateResult | typeof nothing {\n    if (entry.name === '|') {\n      return html`<span class=\"divider\" part=\"bubble-divider\"></span>`;\n    }\n    const base = BUBBLE_ITEMS[entry.name];\n    const label = entry.label || base?.label || entry.name;\n    const icon = entry.icon || base?.icon;\n    // Unknown command with no icon to draw → nothing to render.\n    if (!icon) return nothing;\n    const command = base?.command ?? (entry.name as WysiwygCommandDetail['name']);\n    const attrs = base?.attrs;\n    const isActive = base?.active && state ? base.active(state) : false;\n    return html`\n      <nile-lite-tooltip content=${label} placement=\"top\">\n        <button\n          type=\"button\"\n          aria-label=${label}\n          ?data-active=${isActive}\n          @click=${() =>\n            this.emit('wysiwyg-command', attrs ? { name: command, attrs } : { name: command })}\n        >\n          ${renderGlyph(icon, 16)}\n        </button>\n      </nile-lite-tooltip>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bubble-menu': NileWysiwygBubbleMenu;\n  }\n}\n"]}
+{"version":3,"file":"bubble-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/bubble-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,OAAO,EAAE,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,2CAA2C,CAAC;AAcnD;;;GAGG;AACH,MAAM,YAAY,GAA8B;IAC9C,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;IAClF,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;IAC5F,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,kBAAkB;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;KACzB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,kBAAkB;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;KACtB;IACD,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;IACrF,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;KACzB;IACD,WAAW,EAAE;QACX,OAAO,EAAE,aAAa;QACtB,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;KAC3B;IACD,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE;IACvF,UAAU,EAAE;QACV,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;KAC5B;IACD,WAAW,EAAE;QACX,OAAO,EAAE,aAAa;QACtB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;KAC7B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM;KAChC;IACD,WAAW,EAAE;QACX,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,qBAAqB;QAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ;KAClC;IACD,UAAU,EAAE;QACV,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,oBAAoB;QAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QACzB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO;KACjC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,iBAAiB;QAC1B,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,cAAc;KACrB;CACF,CAAC;AAEF,mFAAmF;AACnF,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAEzE;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAmI3D,CAAC;IAxHQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2DF;SACF,CAAC;IACJ,CAAC;IAED;;;;;;OAMG;IACH,IAAY,oBAAoB;QAC9B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC/C,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,oBAAoB;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE7C,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,MAAM,OAAO,GACX,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAC7B,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7C,OAAO,IAAI,CAAA;0DAC2C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAChF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;KAEzD,CAAC;IACJ,CAAC;IAEO,WAAW,CACjB,KAA0B,EAC1B,KAAoB;QAEpB,IAAI,KAAK,CAAC,IAAI,KAAK,GAAG,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA,qDAAqD,CAAC;QACnE,CAAC;QACD,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC;QACvD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,CAAC;QACtC,4DAA4D;QAC5D,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAK,KAAK,CAAC,IAAqC,CAAC;QAC9E,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACpE,OAAO,IAAI,CAAA;mCACoB,KAAK;;;uBAGjB,KAAK;yBACH,QAAQ;mBACd,GAAG,EAAE,CACZ,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;YAElF,WAAW,CAAC,IAAI,EAAE,EAAE,CAAC;;;KAG5B,CAAC;IACJ,CAAC;CACF,CAAA;AAnI6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2DAA6B;AAO5B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDAA+B;AAVnD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAoIjC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { ToolbarState } from '../engine/selection-state';\nimport type { WysiwygCommandDetail } from '../types';\nimport type { AuthoredToolbarItem } from '../nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\n/** A control the bubble menu knows how to render, keyed by its authored name. */\ninterface BubbleDef {\n  /** The command dispatched on click. */\n  command: WysiwygCommandDetail['name'];\n  label: string;\n  /** nile-glyph icon name (ng-* names are stroke-drawn). */\n  icon: string;\n  /** Static attrs sent with the command (e.g. alignment direction). */\n  attrs?: WysiwygCommandDetail['attrs'];\n  active?: (state: ToolbarState) => boolean;\n}\n\n/**\n * Registry of controls addressable by `<nile-wysiwyg-bubble-item name=\"…\">`.\n * Icons/labels mirror the main toolbar so both surfaces look identical.\n */\nconst BUBBLE_ITEMS: Record<string, BubbleDef> = {\n  bold: { command: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },\n  italic: { command: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },\n  underline: {\n    command: 'underline',\n    label: 'Underline',\n    icon: 'format_underline',\n    active: s => s.underline,\n  },\n  strike: {\n    command: 'strike',\n    label: 'Strikethrough',\n    icon: 'ng-strikethrough',\n    active: s => s.strike,\n  },\n  code: { command: 'code', label: 'Inline code', icon: 'ng-code', active: s => s.code },\n  subscript: {\n    command: 'subscript',\n    label: 'Subscript',\n    icon: 'ng-subscript',\n    active: s => s.subscript,\n  },\n  superscript: {\n    command: 'superscript',\n    label: 'Superscript',\n    icon: 'ng-superscript',\n    active: s => s.superscript,\n  },\n  link: { command: 'openLink', label: 'Link', icon: 'link_2', active: s => s.linkActive },\n  bulletList: {\n    command: 'bulletList',\n    label: 'Bulleted list',\n    icon: 'format_list_bulleted',\n    active: s => s.inBulletList,\n  },\n  orderedList: {\n    command: 'orderedList',\n    label: 'Numbered list',\n    icon: 'format_list_numbered',\n    active: s => s.inOrderedList,\n  },\n  alignLeft: {\n    command: 'align',\n    label: 'Align left',\n    icon: 'format_align_left',\n    attrs: { align: 'left' },\n    active: s => s.align === 'left',\n  },\n  alignCenter: {\n    command: 'align',\n    label: 'Align center',\n    icon: 'format_align_middle',\n    attrs: { align: 'center' },\n    active: s => s.align === 'center',\n  },\n  alignRight: {\n    command: 'align',\n    label: 'Align right',\n    icon: 'format_align_right',\n    attrs: { align: 'right' },\n    active: s => s.align === 'right',\n  },\n  clearFormatting: {\n    command: 'clearFormatting',\n    label: 'Clear formatting',\n    icon: 'format_clear',\n  },\n};\n\n/** Built-in default when no `<nile-wysiwyg-bubble-item>` children are authored. */\nconst DEFAULT_BUBBLE = ['bold', 'italic', 'underline', 'strike', 'link'];\n\n/**\n * Balloon toolbar shown over non-empty selections. The host owns positioning\n * (absolute left/top) and visibility; commands bubble up as\n * `wysiwyg-command` events, same contract as the main toolbar.\n */\n@customElement('nile-wysiwyg-bubble-menu')\nexport class NileWysiwygBubbleMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\n\n  /**\n   * Structured item list authored in light DOM (from\n   * `<nile-wysiwyg-bubble-item>` children). `'|'` is a separator. Falls back to\n   * {@link DEFAULT_BUBBLE} when empty.\n   */\n  @property({ attribute: false }) items?: AuthoredToolbarItem[];\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        .bubble {\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\n            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(\n            --nile-wysiwyg-popover-shadow,\n            0 4px 12px rgba(16, 24, 40, 0.12)\n          );\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 26px;\n          height: 26px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 13px;\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n        }\n\n        .divider {\n          align-self: stretch;\n          width: 1px;\n          margin: 3px 2px;\n          background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n        }\n      `,\n    ];\n  }\n\n  /**\n   * True when this instance is an author's declarative `<nile-wysiwyg-bubble-menu>`\n   * container in an editor's light DOM (holding `<nile-wysiwyg-bubble-item>`\n   * children). It renders nothing — the editor reads the items and renders the\n   * real bubble menu in its own shadow DOM. The editor's internal instance\n   * lives in a shadow root, so `closest` never matches it.\n   */\n  private get isAuthoringContainer(): boolean {\n    return !!this.closest('nile-wysiwyg-editor');\n  }\n\n  public render(): TemplateResult {\n    if (this.isAuthoringContainer) return html``;\n\n    const state = this.toolbarState;\n    const entries: AuthoredToolbarItem[] =\n      this.items && this.items.length\n        ? this.items\n        : DEFAULT_BUBBLE.map(name => ({ name }));\n    return html`\n      <div class=\"bubble\" part=\"bubble-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${entries.map(entry => this.renderEntry(entry, state))}\n      </div>\n    `;\n  }\n\n  private renderEntry(\n    entry: AuthoredToolbarItem,\n    state?: ToolbarState\n  ): TemplateResult | typeof nothing {\n    if (entry.name === '|') {\n      return html`<span class=\"divider\" part=\"bubble-divider\"></span>`;\n    }\n    const base = BUBBLE_ITEMS[entry.name];\n    const label = entry.label || base?.label || entry.name;\n    const icon = entry.icon || base?.icon;\n    // Unknown command with no icon to draw → nothing to render.\n    if (!icon) return nothing;\n    const command = base?.command ?? (entry.name as WysiwygCommandDetail['name']);\n    const attrs = base?.attrs;\n    const isActive = base?.active && state ? base.active(state) : false;\n    return html`\n      <nile-lite-tooltip content=${label} placement=\"top\">\n        <button\n          type=\"button\"\n          aria-label=${label}\n          ?data-active=${isActive}\n          @click=${() =>\n            this.emit('wysiwyg-command', attrs ? { name: command, attrs } : { name: command })}\n        >\n          ${renderGlyph(icon, 16)}\n        </button>\n      </nile-lite-tooltip>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bubble-menu': NileWysiwygBubbleMenu;\n  }\n}\n"]}

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

@@ -36,15 +36,15 @@ let NileWysiwygCodeMenu = class NileWysiwygCodeMenu extends NileElement {
           align-items: center;
           gap: 6px;
           padding: 4px 4px 4px 10px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
-          background: var(--nile-colors-white-base, #ffffff);
+          background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
           box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
         }
 
         .label {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           white-space: nowrap;
         }
 
@@ -56,13 +56,13 @@ let NileWysiwygCodeMenu = class NileWysiwygCodeMenu extends NileElement {
           border: none;
           border-radius: 5px;
           background: transparent;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
           cursor: pointer;
           outline: none;
         }
 
         select:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
       `,
         ];

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/code-block-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEzD,6DAA6D;QACjC,aAAQ,GAAkB,IAAI,CAAC;IAoF7D,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgDF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;QAClC,OAAO,IAAI,CAAA;2DAC4C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;mBAKzE,KAAK;oBACJ,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;YACvD,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC3B,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAAE;aACtC,CAAC,CAAC;QACL,CAAC;;YAEC,cAAc,CAAC,GAAG,CAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,KAAK,KAAK,KAAK;kBACxD,IAAI,CAAC,KAAK;;aAEf,CACF;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAc;AAG7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAgC;AAJhD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAwF/B","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { CODE_LANGUAGES } from '../engine/plugins/code-highlight';\n\n/**\n * Compact floating language picker shown while the cursor is inside a code\n * block. Selection dispatches `wysiwyg-command` with setCodeBlockLanguage.\n */\n@customElement('nile-wysiwyg-code-menu')\nexport class NileWysiwygCodeMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Current language attr ('' = auto, null treated as ''). */\n  @property({ type: String }) language: string | null = null;\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: inline-flex;\n          align-items: center;\n          gap: 6px;\n          padding: 4px 4px 4px 10px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          background: var(--nile-colors-white-base, #ffffff);\n          box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n        }\n\n        .label {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          white-space: nowrap;\n        }\n\n        select {\n          font: inherit;\n          font-size: 12px;\n          height: 24px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n          cursor: pointer;\n          outline: none;\n        }\n\n        select:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const value = this.language ?? '';\n    return html`\n      <span class=\"menu\" part=\"code-language\" @mousedown=${(e: Event) => e.stopPropagation()}>\n        <span class=\"label\">Language</span>\n        <select\n          aria-label=\"Code block language\"\n          title=\"Syntax highlighting language for this code block\"\n          .value=${value}\n          @change=${(e: Event) => {\n            const language = (e.target as HTMLSelectElement).value;\n            this.emit('wysiwyg-command', {\n              name: 'setCodeBlockLanguage',\n              attrs: { language: language || null },\n            });\n          }}\n        >\n          ${CODE_LANGUAGES.map(\n            lang => html`\n              <option value=${lang.value} ?selected=${lang.value === value}>\n                ${lang.label}\n              </option>\n            `\n          )}\n        </select>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-code-menu': NileWysiwygCodeMenu;\n  }\n}\n"]}
+{"version":3,"file":"code-block-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/code-block-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEzD,6DAA6D;QACjC,aAAQ,GAAkB,IAAI,CAAC;IAoF7D,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgDF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;QAClC,OAAO,IAAI,CAAA;2DAC4C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;mBAKzE,KAAK;oBACJ,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;YACvD,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC3B,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAAE;aACtC,CAAC,CAAC;QACL,CAAC;;YAEC,cAAc,CAAC,GAAG,CAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,KAAK,KAAK,KAAK;kBACxD,IAAI,CAAC,KAAK;;aAEf,CACF;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAc;AAG7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAgC;AAJhD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAwF/B","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { CODE_LANGUAGES } from '../engine/plugins/code-highlight';\n\n/**\n * Compact floating language picker shown while the cursor is inside a code\n * block. Selection dispatches `wysiwyg-command` with setCodeBlockLanguage.\n */\n@customElement('nile-wysiwyg-code-menu')\nexport class NileWysiwygCodeMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Current language attr ('' = auto, null treated as ''). */\n  @property({ type: String }) language: string | null = null;\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: inline-flex;\n          align-items: center;\n          gap: 6px;\n          padding: 4px 4px 4px 10px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 8px;\n          background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n          box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n        }\n\n        .label {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n          white-space: nowrap;\n        }\n\n        select {\n          font: inherit;\n          font-size: 12px;\n          height: 24px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n          cursor: pointer;\n          outline: none;\n        }\n\n        select:hover {\n          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const value = this.language ?? '';\n    return html`\n      <span class=\"menu\" part=\"code-language\" @mousedown=${(e: Event) => e.stopPropagation()}>\n        <span class=\"label\">Language</span>\n        <select\n          aria-label=\"Code block language\"\n          title=\"Syntax highlighting language for this code block\"\n          .value=${value}\n          @change=${(e: Event) => {\n            const language = (e.target as HTMLSelectElement).value;\n            this.emit('wysiwyg-command', {\n              name: 'setCodeBlockLanguage',\n              attrs: { language: language || null },\n            });\n          }}\n        >\n          ${CODE_LANGUAGES.map(\n            lang => html`\n              <option value=${lang.value} ?selected=${lang.value === value}>\n                ${lang.label}\n              </option>\n            `\n          )}\n        </select>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-code-menu': NileWysiwygCodeMenu;\n  }\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"embed-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAYnD,MAAM,GAAG,GAAc;IACrB;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,mBAAmB;QACzB,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,MAAM,IAAI,CAAC,CAAC,UAAU,KAAK,IAAI;KAC9D;IACD;QACE,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,qBAAqB;QAC3B,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,QAAQ;KACvC;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,oBAAoB;QAC1B,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QACzB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,OAAO;KACtC;IACD,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE;CACvE,CAAC;AAEF;;;;GAIG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IA+E3D,CAAC;IA3EQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiDF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;;;sBAGE,EAAE,CAAC,KAAK;2BACH,EAAE,CAAC,KAAK;6BACN,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;uBACnD,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC;;gBAEhF,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI;;WAEjD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA/E6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DAA6B;AAHjD,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAgFhC","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 { ToolbarState } from '../engine/selection-state';\n\ninterface EmbedOp {\n  label: string;\n  icon?: string;\n  text?: string;\n  command: string;\n  attrs?: Record<string, unknown>;\n  active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: EmbedOp[] = [\n  {\n    label: 'Align left',\n    icon: 'format_align_left',\n    command: 'setEmbedAlign',\n    attrs: { align: 'left' },\n    active: s => s.embedAlign === 'left' || s.embedAlign === null,\n  },\n  {\n    label: 'Align center',\n    icon: 'format_align_middle',\n    command: 'setEmbedAlign',\n    attrs: { align: 'center' },\n    active: s => s.embedAlign === 'center',\n  },\n  {\n    label: 'Align right',\n    icon: 'format_align_right',\n    command: 'setEmbedAlign',\n    attrs: { align: 'right' },\n    active: s => s.embedAlign === 'right',\n  },\n  { label: 'Delete video', icon: 'ng-trash-01', command: 'deleteEmbed' },\n];\n\n/**\n * Compact floating bar shown while a video embed is selected — mirrors the\n * image menu (align left/center/right, delete). The host positions it;\n * operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-embed-menu')\nexport class NileWysiwygEmbedMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"menu\" part=\"embed-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <button\n              type=\"button\"\n              title=${op.label}\n              aria-label=${op.label}\n              ?data-active=${state && op.active ? op.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n            >\n              ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-menu': NileWysiwygEmbedMenu;\n  }\n}\n"]}
+{"version":3,"file":"embed-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAYnD,MAAM,GAAG,GAAc;IACrB;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,mBAAmB;QACzB,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,MAAM,IAAI,CAAC,CAAC,UAAU,KAAK,IAAI;KAC9D;IACD;QACE,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,qBAAqB;QAC3B,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,QAAQ;KACvC;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,oBAAoB;QAC1B,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QACzB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,OAAO;KACtC;IACD,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE;CACvE,CAAC;AAEF;;;;GAIG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IA+E3D,CAAC;IA3EQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiDF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;;;sBAGE,EAAE,CAAC,KAAK;2BACH,EAAE,CAAC,KAAK;6BACN,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;uBACnD,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC;;gBAEhF,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI;;WAEjD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA/E6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DAA6B;AAHjD,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAgFhC","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 { ToolbarState } from '../engine/selection-state';\n\ninterface EmbedOp {\n  label: string;\n  icon?: string;\n  text?: string;\n  command: string;\n  attrs?: Record<string, unknown>;\n  active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: EmbedOp[] = [\n  {\n    label: 'Align left',\n    icon: 'format_align_left',\n    command: 'setEmbedAlign',\n    attrs: { align: 'left' },\n    active: s => s.embedAlign === 'left' || s.embedAlign === null,\n  },\n  {\n    label: 'Align center',\n    icon: 'format_align_middle',\n    command: 'setEmbedAlign',\n    attrs: { align: 'center' },\n    active: s => s.embedAlign === 'center',\n  },\n  {\n    label: 'Align right',\n    icon: 'format_align_right',\n    command: 'setEmbedAlign',\n    attrs: { align: 'right' },\n    active: s => s.embedAlign === 'right',\n  },\n  { label: 'Delete video', icon: 'ng-trash-01', command: 'deleteEmbed' },\n];\n\n/**\n * Compact floating bar shown while a video embed is selected — mirrors the\n * image menu (align left/center/right, delete). The host positions it;\n * operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-embed-menu')\nexport class NileWysiwygEmbedMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"menu\" part=\"embed-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <button\n              type=\"button\"\n              title=${op.label}\n              aria-label=${op.label}\n              ?data-active=${state && op.active ? op.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n            >\n              ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-menu': NileWysiwygEmbedMenu;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/embed-panel.js

@@ -42,8 +42,8 @@ let NileWysiwygEmbedPanel = class NileWysiwygEmbedPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          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: 0 4px 16px rgba(0, 0, 0, 0.08);
           font-size: 13px;
@@ -55,12 +55,12 @@ let NileWysiwygEmbedPanel = class NileWysiwygEmbedPanel extends NileElement {
 
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         .error {
           font-size: 12px;
-          color: var(--nile-colors-danger-600, #d92d20);
+          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));
         }
 
         .actions {

package/dist/src/nile-wysiwyg-editor/ui/embed-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"embed-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { toEmbedUrl } from '../engine/plugins/embeds';\nimport '../../nile-input/index';\nimport '../../nile-button/index';\n\n/**\n * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom\n * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to\n * match the image panel (nile-input + nile-button). Emits\n * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.\n */\n@customElement('nile-wysiwyg-embed-panel')\nexport class NileWysiwygEmbedPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private urlValue = '';\n  @state() private error = '';\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .embed-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n          min-width: 340px;\n          max-width: 420px;\n          padding: 12px;\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: 0 4px 16px rgba(0, 0, 0, 0.08);\n          font-size: 13px;\n        }\n\n        nile-input {\n          width: 100%;\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-danger-600, #d92d20);\n        }\n\n        .actions {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: 8px;\n          width: 100%;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;\n      input?.focus();\n    });\n  }\n\n  /** Clears the field. */\n  public reset(): void {\n    this.urlValue = '';\n    this.error = '';\n  }\n\n  private onUrl(event: CustomEvent): void {\n    this.urlValue = (event.detail?.value ?? '') as string;\n    this.error = '';\n  }\n\n  private handleSubmit(): void {\n    const target = toEmbedUrl(this.urlValue.trim());\n    if (!target) {\n      this.error = 'Enter a valid https:// URL.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-embed-apply', target);\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-embed-cancel');\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleSubmit();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"embed-panel\" part=\"embed-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"Video URL\"\n          placeholder=\"https://www.youtube.com/watch?v=…\"\n          .value=${this.urlValue}\n          @nile-input=${this.onUrl}\n        ></nile-input>\n\n        ${this.error\n          ? html`<span class=\"error\" part=\"error\">${this.error}</span>`\n          : html`<span class=\"hint\">Add any link to it</span>`}\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Embed</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;\n  }\n}\n"]}
+{"version":3,"file":"embed-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { toEmbedUrl } from '../engine/plugins/embeds';\nimport '../../nile-input/index';\nimport '../../nile-button/index';\n\n/**\n * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom\n * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to\n * match the image panel (nile-input + nile-button). Emits\n * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.\n */\n@customElement('nile-wysiwyg-embed-panel')\nexport class NileWysiwygEmbedPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private urlValue = '';\n  @state() private error = '';\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .embed-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n          min-width: 340px;\n          max-width: 420px;\n          padding: 12px;\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: 0 4px 16px rgba(0, 0, 0, 0.08);\n          font-size: 13px;\n        }\n\n        nile-input {\n          width: 100%;\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));\n        }\n\n        .actions {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: 8px;\n          width: 100%;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;\n      input?.focus();\n    });\n  }\n\n  /** Clears the field. */\n  public reset(): void {\n    this.urlValue = '';\n    this.error = '';\n  }\n\n  private onUrl(event: CustomEvent): void {\n    this.urlValue = (event.detail?.value ?? '') as string;\n    this.error = '';\n  }\n\n  private handleSubmit(): void {\n    const target = toEmbedUrl(this.urlValue.trim());\n    if (!target) {\n      this.error = 'Enter a valid https:// URL.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-embed-apply', target);\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-embed-cancel');\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleSubmit();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"embed-panel\" part=\"embed-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"Video URL\"\n          placeholder=\"https://www.youtube.com/watch?v=…\"\n          .value=${this.urlValue}\n          @nile-input=${this.onUrl}\n        ></nile-input>\n\n        ${this.error\n          ? html`<span class=\"error\" part=\"error\">${this.error}</span>`\n          : html`<span class=\"hint\">Add any link to it</span>`}\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Embed</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;\n  }\n}\n"]}

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

@@ -34,8 +34,8 @@ let NileWysiwygEmojiPicker = class NileWysiwygEmojiPicker extends NileElement {
         .panel {
           width: 316px;
           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));
         }
@@ -47,13 +47,13 @@ let NileWysiwygEmojiPicker = class NileWysiwygEmojiPicker extends NileElement {
           box-sizing: border-box;
           margin-bottom: 6px;
           padding: 5px 8px;
-          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;
           outline: none;
         }
 
         input:focus {
-          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));
         }
 
         .grid {
@@ -78,13 +78,13 @@ let NileWysiwygEmojiPicker = class NileWysiwygEmojiPicker extends NileElement {
         }
 
         .emoji:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         .empty {
           padding: 12px 4px;
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           text-align: center;
         }
       `,