@kritzel/editor 0.4.31 → 0.4.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/LICENSE.md +50 -50
  2. package/README.md +5 -5
  3. package/dist/cjs/{index-B92VHWr4.js → index-BAdxtEc7.js} +27 -9
  4. package/dist/cjs/kritzel-active-users_46.cjs.entry.js +1029 -366
  5. package/dist/cjs/kritzel-brush-style.cjs.entry.js +2 -2
  6. package/dist/cjs/kritzel-editor.cjs.js +3 -3
  7. package/dist/cjs/loader.cjs.js +2 -2
  8. package/dist/collection/collection-manifest.json +1 -1
  9. package/dist/collection/components/kritzel-active-users/kritzel-active-users.css +65 -65
  10. package/dist/collection/components/kritzel-avatar/kritzel-avatar.css +58 -58
  11. package/dist/collection/components/kritzel-avatar/kritzel-avatar.js +3 -3
  12. package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
  13. package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  14. package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.css +42 -42
  15. package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.js +3 -3
  16. package/dist/collection/components/kritzel-button/kritzel-button.css +73 -73
  17. package/dist/collection/components/kritzel-button/kritzel-button.js +2 -2
  18. package/dist/collection/components/kritzel-color/kritzel-color.css +24 -24
  19. package/dist/collection/components/kritzel-color/kritzel-color.js +2 -2
  20. package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.css +46 -46
  21. package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.js +1 -1
  22. package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.css +113 -112
  23. package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.js +1 -1
  24. package/dist/collection/components/kritzel-current-user/kritzel-current-user.css +11 -11
  25. package/dist/collection/components/kritzel-current-user/kritzel-current-user.js +1 -1
  26. package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.css +39 -39
  27. package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
  28. package/dist/collection/components/kritzel-dialog/kritzel-dialog.css +209 -209
  29. package/dist/collection/components/kritzel-dropdown/kritzel-dropdown.css +190 -190
  30. package/dist/collection/components/kritzel-dropdown/kritzel-dropdown.js +2 -2
  31. package/dist/collection/components/kritzel-editor/kritzel-editor.css +160 -160
  32. package/dist/collection/components/kritzel-editor/kritzel-editor.js +72 -46
  33. package/dist/collection/components/kritzel-export/kritzel-export.css +89 -89
  34. package/dist/collection/components/kritzel-export/kritzel-export.js +1 -1
  35. package/dist/collection/components/kritzel-font/kritzel-font.css +10 -10
  36. package/dist/collection/components/kritzel-font/kritzel-font.js +1 -1
  37. package/dist/collection/components/kritzel-font-family/kritzel-font-family.css +48 -48
  38. package/dist/collection/components/kritzel-font-family/kritzel-font-family.js +2 -2
  39. package/dist/collection/components/kritzel-font-size/kritzel-font-size.css +30 -30
  40. package/dist/collection/components/kritzel-font-size/kritzel-font-size.js +1 -1
  41. package/dist/collection/components/kritzel-input/kritzel-input.css +69 -69
  42. package/dist/collection/components/kritzel-input/kritzel-input.js +1 -1
  43. package/dist/collection/components/kritzel-line-endings/kritzel-line-endings.css +60 -60
  44. package/dist/collection/components/kritzel-line-endings/kritzel-line-endings.js +3 -3
  45. package/dist/collection/components/kritzel-loading-overlay/kritzel-loading-overlay.css +54 -54
  46. package/dist/collection/components/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
  47. package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.css +98 -98
  48. package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  49. package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.css +190 -190
  50. package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.js +3 -3
  51. package/dist/collection/components/kritzel-menu/kritzel-menu.css +35 -34
  52. package/dist/collection/components/kritzel-menu/kritzel-menu.js +1 -1
  53. package/dist/collection/components/kritzel-menu-item/kritzel-menu-item.css +166 -166
  54. package/dist/collection/components/kritzel-menu-item/kritzel-menu-item.js +3 -3
  55. package/dist/collection/components/kritzel-more-menu/kritzel-more-menu.css +58 -58
  56. package/dist/collection/components/kritzel-more-menu/kritzel-more-menu.js +4 -4
  57. package/dist/collection/components/kritzel-notification-card/kritzel-notification-card.css +101 -101
  58. package/dist/collection/components/kritzel-numeric-input/kritzel-numeric-input.css +102 -102
  59. package/dist/collection/components/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  60. package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.css +85 -85
  61. package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  62. package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.css +68 -68
  63. package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
  64. package/dist/collection/components/kritzel-portal/kritzel-portal.js +1 -1
  65. package/dist/collection/components/kritzel-settings/kritzel-settings.css +137 -137
  66. package/dist/collection/components/kritzel-settings/kritzel-settings.js +1 -1
  67. package/dist/collection/components/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
  68. package/dist/collection/components/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
  69. package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.css +150 -150
  70. package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
  71. package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
  72. package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  73. package/dist/collection/components/kritzel-split-button/kritzel-split-button.css +78 -78
  74. package/dist/collection/components/kritzel-split-button/kritzel-split-button.js +3 -3
  75. package/dist/collection/components/kritzel-stroke-size/kritzel-stroke-size.css +37 -37
  76. package/dist/collection/components/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  77. package/dist/collection/components/kritzel-tool-config/kritzel-tool-config.css +38 -38
  78. package/dist/collection/components/kritzel-tool-config/kritzel-tool-config.js +1 -1
  79. package/dist/collection/components/kritzel-toolbar/kritzel-toolbar.css +347 -347
  80. package/dist/collection/components/kritzel-toolbar/kritzel-toolbar.js +12 -16
  81. package/dist/collection/components/kritzel-tooltip/kritzel-tooltip.css +18 -18
  82. package/dist/collection/components/kritzel-tooltip/kritzel-tooltip.js +2 -2
  83. package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
  84. package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
  85. package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.css +16 -16
  86. package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.js +1 -1
  87. package/dist/collection/components/kritzel-zoom-panel/kritzel-zoom-panel.css +72 -72
  88. package/dist/collection/components/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
  89. package/dist/components/index.js +1 -1
  90. package/dist/components/kritzel-active-users.js +1 -1
  91. package/dist/components/kritzel-avatar.js +1 -1
  92. package/dist/components/kritzel-awareness-cursors.js +1 -1
  93. package/dist/components/kritzel-back-to-content.js +1 -1
  94. package/dist/components/kritzel-brush-style.js +4 -4
  95. package/dist/components/kritzel-button.js +1 -1
  96. package/dist/components/kritzel-color-palette.js +1 -1
  97. package/dist/components/kritzel-color.js +1 -1
  98. package/dist/components/kritzel-context-menu.js +1 -1
  99. package/dist/components/kritzel-current-user-dialog.js +1 -1
  100. package/dist/components/kritzel-current-user.js +1 -1
  101. package/dist/components/kritzel-cursor-trail.js +1 -1
  102. package/dist/components/kritzel-dialog.js +1 -1
  103. package/dist/components/kritzel-dropdown.js +1 -1
  104. package/dist/components/kritzel-editor.js +108 -81
  105. package/dist/components/kritzel-engine.js +1 -1
  106. package/dist/components/kritzel-export.js +1 -1
  107. package/dist/components/kritzel-font-family.js +1 -1
  108. package/dist/components/kritzel-font-size.js +1 -1
  109. package/dist/components/kritzel-font.js +1 -1
  110. package/dist/components/kritzel-icon.js +1 -1
  111. package/dist/components/kritzel-input.js +1 -1
  112. package/dist/components/kritzel-line-endings.js +1 -1
  113. package/dist/components/kritzel-loading-overlay.js +1 -1
  114. package/dist/components/kritzel-login-dialog.js +1 -1
  115. package/dist/components/kritzel-master-detail.js +1 -1
  116. package/dist/components/kritzel-menu-item.js +1 -1
  117. package/dist/components/kritzel-menu.js +1 -1
  118. package/dist/components/kritzel-more-menu.js +1 -1
  119. package/dist/components/kritzel-notification-card.js +1 -1
  120. package/dist/components/kritzel-numeric-input.js +1 -1
  121. package/dist/components/kritzel-opacity-slider.js +1 -1
  122. package/dist/components/kritzel-pill-tabs.js +1 -1
  123. package/dist/components/kritzel-portal.js +1 -1
  124. package/dist/components/kritzel-settings.js +1 -1
  125. package/dist/components/kritzel-shape-fill.js +1 -1
  126. package/dist/components/kritzel-share-dialog.js +1 -1
  127. package/dist/components/kritzel-slide-toggle.js +1 -1
  128. package/dist/components/kritzel-split-button.js +1 -1
  129. package/dist/components/kritzel-stroke-size.js +1 -1
  130. package/dist/components/kritzel-tool-config.js +1 -1
  131. package/dist/components/kritzel-toolbar.js +1 -1
  132. package/dist/components/kritzel-tooltip.js +1 -1
  133. package/dist/components/kritzel-utility-panel.js +1 -1
  134. package/dist/components/kritzel-watermark.js +1 -1
  135. package/dist/components/kritzel-workspace-manager.js +1 -1
  136. package/dist/components/kritzel-zoom-panel.js +1 -1
  137. package/dist/components/{p-CrIEmItB.js → p-2DAZSvN6.js} +5 -5
  138. package/dist/components/{p-CmjXRLdr.js → p-2gylYpXk.js} +7 -7
  139. package/dist/components/{p-BN8VWPlq.js → p-B-Divd0Q.js} +7 -7
  140. package/dist/components/{p-R1D8Sr0l.js → p-B-U13Ew1.js} +3 -3
  141. package/dist/components/{p-BZ_KnHdR.js → p-B1rmcPZr.js} +7 -7
  142. package/dist/components/{p-B_gT0lCn.js → p-B2-SxV8E.js} +3 -3
  143. package/dist/components/p-B6Z_VKKH.js +214 -0
  144. package/dist/components/{p-CVxGF4bJ.js → p-B8tHdknP.js} +5 -5
  145. package/dist/components/{p-CoNexfpB.js → p-BDsuJNT_.js} +3 -3
  146. package/dist/components/{p-BvG3JO85.js → p-BMi-i7sC.js} +3 -3
  147. package/dist/components/{p-Cy_cLtOP.js → p-BZ0ReYAA.js} +18 -14
  148. package/dist/components/{p-DZsSiMnA.js → p-BeCy6w6M.js} +770 -173
  149. package/dist/components/{p-4-qLegHb.js → p-Bipc1XvF.js} +4 -4
  150. package/dist/components/{p-CS3YZVYE.js → p-BmFJelgk.js} +2 -2
  151. package/dist/components/{p-DqOC_Yck.js → p-BpvSYxxN.js} +6 -6
  152. package/dist/components/{p-peZjvnkK.js → p-C0ns8IPO.js} +2 -2
  153. package/dist/components/{p-ClfOtiNp.js → p-C1_r9nJU.js} +3 -3
  154. package/dist/components/{p-GbCxpbQ6.js → p-C2ySiAXO.js} +3 -3
  155. package/dist/components/{p-B3Tqoyl9.js → p-C3KlONnT.js} +3 -3
  156. package/dist/components/{p-B5xYV1o3.js → p-C68YXjuL.js} +2 -2
  157. package/dist/components/{p-DJxgPPfs.js → p-CCuNN278.js} +3 -3
  158. package/dist/components/{p-Ds0uNtwQ.js → p-CNH7N3Aq.js} +4 -4
  159. package/dist/components/{p-DVv8ChhE.js → p-CO1cJlfg.js} +4 -4
  160. package/dist/components/{p-Cp4e4oTE.js → p-CqHKGLYE.js} +2 -2
  161. package/dist/components/{p-Blq9a1ni.js → p-CrEWqua9.js} +6 -6
  162. package/dist/components/{p-CvaxFYS0.js → p-Cv2nqOL8.js} +8 -8
  163. package/dist/components/{p-CzUeIini.js → p-D-1ixLxq.js} +13 -13
  164. package/dist/components/{p-BfMlwIcG.js → p-DF8p-DxR.js} +3 -3
  165. package/dist/components/{p-QEue33R5.js → p-DQ3VKzAS.js} +3 -3
  166. package/dist/components/{p-Ckqh1tqY.js → p-DRe-rTlX.js} +27 -31
  167. package/dist/components/{p-McY5wZ0h.js → p-DSyb29RF.js} +2 -2
  168. package/dist/components/{p-D0tPTPkR.js → p-DYDruZIw.js} +3 -3
  169. package/dist/components/{p-kOINnzaR.js → p-D_JxJxQ6.js} +7 -7
  170. package/dist/components/{p-BDjRSoAc.js → p-Dko_6jIh.js} +2 -2
  171. package/dist/components/{p-BjFrt1q0.js → p-DnHvqeyr.js} +3 -3
  172. package/dist/components/{p-BrGJIoGK.js → p-DqMikMrS.js} +3 -3
  173. package/dist/components/p-DsnHq8en.js +55 -0
  174. package/dist/components/{p-DXZBWJBt.js → p-DxFNLy9X.js} +4 -4
  175. package/dist/components/{p-5qkOM1RJ.js → p-Dzr6X2aj.js} +16 -4
  176. package/dist/components/{p-DXuf225S.js → p-HbHo7awi.js} +3 -3
  177. package/dist/components/{p-CwBxnzYu.js → p-Qbk7xE91.js} +3 -3
  178. package/dist/components/{p-h_uh_Njf.js → p-VYGV0cr3.js} +3 -3
  179. package/dist/components/{p-DyRJFg4w.js → p-YGBl60lb.js} +2 -2
  180. package/dist/components/{p-hQwVRh0t.js → p-clFfXKKn.js} +7 -7
  181. package/dist/components/{p-SLnqczCS.js → p-dUcCDLDF.js} +3 -3
  182. package/dist/components/{p-B6UJztrf.js → p-kXnNX65j.js} +4 -4
  183. package/dist/esm/{index-OjbYJz-P.js → index-YR-6hzAW.js} +27 -10
  184. package/dist/esm/kritzel-active-users_46.entry.js +1029 -366
  185. package/dist/esm/kritzel-brush-style.entry.js +2 -2
  186. package/dist/esm/kritzel-editor.js +4 -4
  187. package/dist/esm/loader.js +3 -3
  188. package/dist/kritzel-editor/kritzel-editor.esm.js +4 -4
  189. package/dist/kritzel-editor/{p-501047d8.entry.js → p-3a0f60b0.entry.js} +2 -2
  190. package/dist/kritzel-editor/{p-OjbYJz-P.js → p-YR-6hzAW.js} +27 -10
  191. package/dist/kritzel-editor/{p-60319edb.entry.js → p-adc45d46.entry.js} +1029 -366
  192. package/dist/types/components/kritzel-editor/kritzel-editor.d.ts +9 -2
  193. package/dist/types/components.d.ts +15 -15
  194. package/dist/types/stencil-public-runtime.d.ts +61 -55
  195. package/package.json +3 -3
  196. package/dist/components/p-BGmTmdLe.js +0 -167
  197. package/dist/components/p-DOJCDPVD.js +0 -55
@@ -1,34 +1,35 @@
1
- :host {
2
- position: relative;
3
- display: flex;
4
- flex-direction: column;
5
- background-color: var(--kritzel-menu-background-color, #ffffff);
6
- width: var(--kritzel-menu-width, 200px);
7
- padding: var(--kritzel-menu-padding, 8px);
8
- border-radius: var(--kritzel-menu-border-radius, 12px);
9
- box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
10
- border: var(--kritzel-menu-border, 1px solid #ebebeb);
11
- z-index: 2;
12
- gap: var(--kritzel-menu-gap, 4px);
13
- overflow-y: auto;
14
- scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
15
- scrollbar-width: thin;
16
- max-height: var(--kritzel-portal-max-height, 300px);
17
- box-sizing: border-box;
18
- -webkit-tap-highlight-color: transparent;
19
- outline: none;
20
- clip-path: inset(0 round var(--kritzel-menu-border-radius, 12px));
21
- }
22
-
23
- :host:focus-visible {
24
- outline: auto;
25
- }
26
-
27
- .has-open-child-overlay {
28
- position: absolute;
29
- top: 0;
30
- left: 0;
31
- right: 0;
32
- bottom: 0;
33
- z-index: 3;
34
- }
1
+ :host {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ font-family: var(--kritzel-menu-font-family, var(--kritzel-global-font-family, sans-serif));
6
+ background-color: var(--kritzel-menu-background-color, #ffffff);
7
+ width: var(--kritzel-menu-width, 200px);
8
+ padding: var(--kritzel-menu-padding, 8px);
9
+ border-radius: var(--kritzel-menu-border-radius, 12px);
10
+ box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
11
+ border: var(--kritzel-menu-border, 1px solid #ebebeb);
12
+ z-index: 2;
13
+ gap: var(--kritzel-menu-gap, 4px);
14
+ overflow-y: auto;
15
+ scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
16
+ scrollbar-width: thin;
17
+ max-height: var(--kritzel-portal-max-height, 300px);
18
+ box-sizing: border-box;
19
+ -webkit-tap-highlight-color: transparent;
20
+ outline: none;
21
+ clip-path: inset(0 round var(--kritzel-menu-border-radius, 12px));
22
+ }
23
+
24
+ :host:focus-visible {
25
+ outline: auto;
26
+ }
27
+
28
+ .has-open-child-overlay {
29
+ position: absolute;
30
+ top: 0;
31
+ left: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ z-index: 3;
35
+ }
@@ -51,7 +51,7 @@ export class KritzelMenu {
51
51
  this.itemCloseChildMenu.emit(event.detail);
52
52
  };
53
53
  render() {
54
- return (h(Host, { key: 'f9512c13eb4865b9953887d44f08b565eff5a247', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c6dd6edce412716e9f2076670f5ec1eeb8f53dab', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
54
+ return (h(Host, { key: 'fc7816cfb7a4f88f95f5abe4c9dcbccd920ad6e7', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'fb36bc0122d79b4929356280fe5213dd00535eae', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
55
55
  }
56
56
  static get is() { return "kritzel-menu"; }
57
57
  static get encapsulation() { return "shadow"; }
@@ -1,167 +1,167 @@
1
- :host {
2
- position: relative;
3
- display: flex;
4
- align-items: center;
5
- justify-content: space-between;
6
- width: 100%;
7
- padding: var(--kritzel-menu-item-padding, 8px);
8
- box-sizing: border-box;
9
- gap: 16px;
10
- height: var(--kritzel-menu-item-height, 40px);
11
- min-height: var(--kritzel-menu-item-min-height, 40px);
12
- font-family: sans-serif;
13
- font-size: var(--kritzel-menu-item-font-size, 14px);
14
- color: var(--kritzel-menu-item-color, #333333);
15
- border-radius: var(--kritzel-menu-item-border-radius, 12px);
16
- -webkit-tap-highlight-color: transparent;
17
- }
18
-
19
- :host:focus:not(:focus-visible) {
20
- outline: none;
21
- }
22
-
23
- :host(:hover) .menu-item-overlay,
24
- :host(:focus-within) .menu-item-overlay {
25
- background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));
26
- }
27
-
28
- :host(.selected) {
29
- background-color: var(--kritzel-menu-item-selected-background-color, #007aff);
30
- color: var(--kritzel-menu-item-selected-color, #ffffff);
31
- }
32
-
33
- :host(.selected) .action-button {
34
- color: var(--kritzel-menu-item-selected-color, #ffffff);
35
- }
36
-
37
- :host(.selected.editing) {
38
- background-color: var(--kritzel-menu-item-selected-background-color, #007aff);
39
- }
40
-
41
- :host(.selected) .edit-input {
42
- color: var(--kritzel-menu-item-selected-color, #ffffff);
43
- caret-color: var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);
44
- border-color: var(--kritzel-menu-item-input-border-color-on-selected, #ffffff);
45
- }
46
-
47
- :host(.selected) .action-button kritzel-icon {
48
- --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);
49
- }
50
-
51
- kritzel-icon {
52
- --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);
53
- }
54
-
55
- :host(.selected) kritzel-icon {
56
- --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);
57
- }
58
-
59
- :host(.selected) .edit-input::selection {
60
- background-color: var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));
61
- color: var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff);
62
- }
63
-
64
- :host(.editing) {
65
- background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));
66
- }
67
-
68
- :host(.disabled) {
69
- opacity: 0.5;
70
- pointer-events: none !important;
71
- }
72
-
73
- :host(.child-open) {
74
- background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));
75
- }
76
-
77
- :host(.child-open.selected) {
78
- background-color: var(--kritzel-menu-item-selected-background-color, #007aff);
79
- }
80
-
81
- .menu-item-overlay {
82
- position: absolute;
83
- inset: 0;
84
- background-color: transparent;
85
- z-index: 0;
86
- pointer-events: none;
87
- border-radius: var(--kritzel-menu-item-border-radius, 12px);
88
- }
89
-
90
- .menu-item-content {
91
- display: flex;
92
- align-items: center;
93
- gap: 8px;
94
- position: relative;
95
- z-index: 1;
96
- height: 100%;
97
- }
98
-
99
- .menu-item-content span {
100
- display: flex;
101
- align-items: center;
102
- line-height: 0;
103
- }
104
-
105
- .left {
106
- justify-content: flex-start;
107
- flex: 1;
108
- min-width: 0;
109
- }
110
-
111
- .left>div {
112
- white-space: nowrap;
113
- overflow: hidden;
114
- text-overflow: ellipsis;
115
- }
116
-
117
- .right {
118
- justify-content: flex-end;
119
- }
120
-
121
- .edit-input {
122
- flex: 1;
123
- height: var(--kritzel-menu-item-input-height, 24px);
124
- padding: 0;
125
- background-color: transparent;
126
- border-radius: 0;
127
- border: none;
128
- border-bottom: var(--kritzel-menu-item-input-border, 1px solid #ccc);
129
- font-size: var(--kritzel-menu-item-font-size, 14px);
130
- width: 100%;
131
- min-width: 0;
132
- box-sizing: border-box;
133
- outline: none;
134
- color: inherit;
135
- }
136
-
137
- .edit-input {
138
- caret-color: var(--kritzel-menu-item-input-caret-color, currentColor);
139
- }
140
-
141
- .edit-input::selection {
142
- background-color: var(--kritzel-menu-item-input-selection-color, #007bff);
143
- color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);
144
- }
145
-
146
- .action-button {
147
- padding: 4px;
148
- border-radius: 8px;
149
- border: none;
150
- cursor: var(--kritzel-global-pointer-cursor, pointer);
151
- display: flex;
152
- align-items: center;
153
- justify-content: center;
154
- background-color: transparent;
155
- background: transparent;
156
- -webkit-tap-highlight-color: transparent;
157
- }
158
-
159
- .action-button:hover,
160
- .action-button:focus {
161
- background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
162
- }
163
-
164
- .action-button.disabled {
165
- pointer-events: none;
166
- opacity: 0.5;
1
+ :host {
2
+ position: relative;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ width: 100%;
7
+ padding: var(--kritzel-menu-item-padding, 8px);
8
+ box-sizing: border-box;
9
+ gap: 16px;
10
+ height: var(--kritzel-menu-item-height, 40px);
11
+ min-height: var(--kritzel-menu-item-min-height, 40px);
12
+ font-family: var(--kritzel-menu-font-family, var(--kritzel-global-font-family, sans-serif));
13
+ font-size: var(--kritzel-menu-item-font-size, 14px);
14
+ color: var(--kritzel-menu-item-color, #333333);
15
+ border-radius: var(--kritzel-menu-item-border-radius, 12px);
16
+ -webkit-tap-highlight-color: transparent;
17
+ }
18
+
19
+ :host:focus:not(:focus-visible) {
20
+ outline: none;
21
+ }
22
+
23
+ :host(:hover) .menu-item-overlay,
24
+ :host(:focus-within) .menu-item-overlay {
25
+ background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));
26
+ }
27
+
28
+ :host(.selected) {
29
+ background-color: var(--kritzel-menu-item-selected-background-color, #007aff);
30
+ color: var(--kritzel-menu-item-selected-color, #ffffff);
31
+ }
32
+
33
+ :host(.selected) .action-button {
34
+ color: var(--kritzel-menu-item-selected-color, #ffffff);
35
+ }
36
+
37
+ :host(.selected.editing) {
38
+ background-color: var(--kritzel-menu-item-selected-background-color, #007aff);
39
+ }
40
+
41
+ :host(.selected) .edit-input {
42
+ color: var(--kritzel-menu-item-selected-color, #ffffff);
43
+ caret-color: var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);
44
+ border-color: var(--kritzel-menu-item-input-border-color-on-selected, #ffffff);
45
+ }
46
+
47
+ :host(.selected) .action-button kritzel-icon {
48
+ --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);
49
+ }
50
+
51
+ kritzel-icon {
52
+ --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);
53
+ }
54
+
55
+ :host(.selected) kritzel-icon {
56
+ --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);
57
+ }
58
+
59
+ :host(.selected) .edit-input::selection {
60
+ background-color: var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));
61
+ color: var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff);
62
+ }
63
+
64
+ :host(.editing) {
65
+ background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));
66
+ }
67
+
68
+ :host(.disabled) {
69
+ opacity: 0.5;
70
+ pointer-events: none !important;
71
+ }
72
+
73
+ :host(.child-open) {
74
+ background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));
75
+ }
76
+
77
+ :host(.child-open.selected) {
78
+ background-color: var(--kritzel-menu-item-selected-background-color, #007aff);
79
+ }
80
+
81
+ .menu-item-overlay {
82
+ position: absolute;
83
+ inset: 0;
84
+ background-color: transparent;
85
+ z-index: 0;
86
+ pointer-events: none;
87
+ border-radius: var(--kritzel-menu-item-border-radius, 12px);
88
+ }
89
+
90
+ .menu-item-content {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 8px;
94
+ position: relative;
95
+ z-index: 1;
96
+ height: 100%;
97
+ }
98
+
99
+ .menu-item-content span {
100
+ display: flex;
101
+ align-items: center;
102
+ line-height: 0;
103
+ }
104
+
105
+ .left {
106
+ justify-content: flex-start;
107
+ flex: 1;
108
+ min-width: 0;
109
+ }
110
+
111
+ .left>div {
112
+ white-space: nowrap;
113
+ overflow: hidden;
114
+ text-overflow: ellipsis;
115
+ }
116
+
117
+ .right {
118
+ justify-content: flex-end;
119
+ }
120
+
121
+ .edit-input {
122
+ flex: 1;
123
+ height: var(--kritzel-menu-item-input-height, 24px);
124
+ padding: 0;
125
+ background-color: transparent;
126
+ border-radius: 0;
127
+ border: none;
128
+ border-bottom: var(--kritzel-menu-item-input-border, 1px solid #ccc);
129
+ font-size: var(--kritzel-menu-item-font-size, 14px);
130
+ width: 100%;
131
+ min-width: 0;
132
+ box-sizing: border-box;
133
+ outline: none;
134
+ color: inherit;
135
+ }
136
+
137
+ .edit-input {
138
+ caret-color: var(--kritzel-menu-item-input-caret-color, currentColor);
139
+ }
140
+
141
+ .edit-input::selection {
142
+ background-color: var(--kritzel-menu-item-input-selection-color, #007bff);
143
+ color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);
144
+ }
145
+
146
+ .action-button {
147
+ padding: 4px;
148
+ border-radius: 8px;
149
+ border: none;
150
+ cursor: var(--kritzel-global-pointer-cursor, pointer);
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ background-color: transparent;
155
+ background: transparent;
156
+ -webkit-tap-highlight-color: transparent;
157
+ }
158
+
159
+ .action-button:hover,
160
+ .action-button:focus {
161
+ background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
162
+ }
163
+
164
+ .action-button.disabled {
165
+ pointer-events: none;
166
+ opacity: 0.5;
167
167
  }
@@ -79,7 +79,7 @@ export class KritzelMenuItem {
79
79
  h("div", { class: "menu-item-content left" }, this.item.icon && (h("span", { title: this.item.iconTooltip }, h("kritzel-icon", { name: this.item.icon, size: 16, style: this.item.color ? { '--kritzel-icon-color': this.item.color } : undefined }))), h("div", { style: this.item.color ? { color: this.item.color } : undefined }, this.item.label)),
80
80
  h("div", { class: "menu-item-content right" }, this.item.children &&
81
81
  this.item.children.length > 0 && [
82
- h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 })),
82
+ h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, h("kritzel-icon", { name: "ellipsisVertical", size: 16 })),
83
83
  h("kritzel-portal", { anchor: this.item.childMenuAnchor, offsetY: 4, onClose: this.handleMenuClose }, h(childMenuTag, {
84
84
  items: this.item.children,
85
85
  parent: this.item,
@@ -98,12 +98,12 @@ export class KritzelMenuItem {
98
98
  ];
99
99
  }
100
100
  render() {
101
- return (h(Host, { key: '780f02a30f188baae7027e8268bbed85bd6924a3', tabIndex: this.item.isDisabled ? -1 : 0, class: {
101
+ return (h(Host, { key: '90064541474da10a040c49ba72be132a8317dbba', tabIndex: this.item.isDisabled ? -1 : 0, class: {
102
102
  'selected': this.item.isSelected,
103
103
  'editing': this.item.isEditing,
104
104
  'disabled': this.item.isDisabled,
105
105
  'child-open': this.item.isChildMenuOpen,
106
- }, onClick: this.handleItemSelect }, h("div", { key: 'c3ecefff3a6883890938d84337ea91681585e8d9', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
106
+ }, onClick: this.handleItemSelect }, h("div", { key: '73be9249dced01dcc40e06b045329f9f642f0cb9', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
107
107
  }
108
108
  static get is() { return "kritzel-menu-item"; }
109
109
  static get encapsulation() { return "shadow"; }
@@ -1,58 +1,58 @@
1
- :host {
2
- display: inline-flex;
3
- z-index: 1;
4
- }
5
-
6
- .more-menu-wrapper {
7
- display: inline-flex;
8
- padding: var(--kritzel-more-menu-padding, 4px);
9
- background-color: var(--kritzel-more-menu-background-color, #ffffff);
10
- border-radius: var(--kritzel-more-menu-border-radius, 12px);
11
- box-shadow: var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
12
- border: var(--kritzel-more-menu-border, 1px solid #ebebeb);
13
- opacity: 0;
14
- pointer-events: none;
15
- transition: opacity 0.2s ease-out;
16
- }
17
-
18
- .more-menu-wrapper.visible {
19
- opacity: 1;
20
- pointer-events: auto;
21
- }
22
-
23
- :host(.mobile) {
24
- --kritzel-more-menu-button-hover-background-color: transparent;
25
- --kritzel-more-menu-button-active-background-color: transparent;
26
- }
27
-
28
- .more-menu-button {
29
- display: flex;
30
- align-items: center;
31
- justify-content: center;
32
- width: var(--kritzel-more-menu-button-width, 40px);
33
- height: var(--kritzel-more-menu-button-height, 40px);
34
- padding: 0;
35
- border: none;
36
- border-radius: var(--kritzel-more-menu-inner-border-radius, 12px);
37
- background-color: transparent;
38
- cursor: var(--kritzel-global-pointer-cursor, pointer);
39
- box-shadow: none;
40
- transition: background-color 150ms ease;
41
- -webkit-tap-highlight-color: transparent;
42
- -webkit-appearance: none;
43
- -moz-appearance: none;
44
- appearance: none;
45
- color: var(--kritzel-more-menu-button-color, currentColor);
46
- }
47
-
48
- .more-menu-button:hover {
49
- background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
50
- }
51
-
52
- .more-menu-button:focus-visible {
53
- background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
54
- }
55
-
56
- .more-menu-button:active {
57
- background-color: var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%));
58
- }
1
+ :host {
2
+ display: inline-flex;
3
+ z-index: 1;
4
+ }
5
+
6
+ .more-menu-wrapper {
7
+ display: inline-flex;
8
+ padding: var(--kritzel-more-menu-padding, 4px);
9
+ background-color: var(--kritzel-more-menu-background-color, #ffffff);
10
+ border-radius: var(--kritzel-more-menu-border-radius, 12px);
11
+ box-shadow: var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
12
+ border: var(--kritzel-more-menu-border, 1px solid #ebebeb);
13
+ opacity: 0;
14
+ pointer-events: none;
15
+ transition: opacity 0.2s ease-out;
16
+ }
17
+
18
+ .more-menu-wrapper.visible {
19
+ opacity: 1;
20
+ pointer-events: auto;
21
+ }
22
+
23
+ :host(.mobile) {
24
+ --kritzel-more-menu-button-hover-background-color: transparent;
25
+ --kritzel-more-menu-button-active-background-color: transparent;
26
+ }
27
+
28
+ .more-menu-button {
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ width: var(--kritzel-more-menu-button-width, 40px);
33
+ height: var(--kritzel-more-menu-button-height, 40px);
34
+ padding: 0;
35
+ border: none;
36
+ border-radius: var(--kritzel-more-menu-inner-border-radius, 12px);
37
+ background-color: transparent;
38
+ cursor: var(--kritzel-global-pointer-cursor, pointer);
39
+ box-shadow: none;
40
+ transition: background-color 150ms ease;
41
+ -webkit-tap-highlight-color: transparent;
42
+ -webkit-appearance: none;
43
+ -moz-appearance: none;
44
+ appearance: none;
45
+ color: var(--kritzel-more-menu-button-color, currentColor);
46
+ }
47
+
48
+ .more-menu-button:hover {
49
+ background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
50
+ }
51
+
52
+ .more-menu-button:focus-visible {
53
+ background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
54
+ }
55
+
56
+ .more-menu-button:active {
57
+ background-color: var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%));
58
+ }
@@ -15,7 +15,7 @@ export class KritzelMoreMenu {
15
15
  /**
16
16
  * The icon to display on the button
17
17
  */
18
- icon = 'ellipsis-vertical';
18
+ icon = 'ellipsisVertical';
19
19
  /**
20
20
  * The size of the icon
21
21
  */
@@ -145,7 +145,7 @@ export class KritzelMoreMenu {
145
145
  this.closeMenu();
146
146
  };
147
147
  render() {
148
- return (h(Host, { key: '841c9097f30d0fd9e73741ec13541b5183f3a84d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'ac494e6a6f7e7a5155fc3ceac25517000ed41068', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '0d7edc5a525e692dc3692b616af0e198758ca95e', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'cc87018d0816f3c21be992bccc9feda460c98a32', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'abb10d21c437c660de25af6313081a9064ac2cac', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '3411f1403393845c098243d309cdb5e52c0eede8', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
148
+ return (h(Host, { key: '4474c94b4a72aa5692493de26f4379fa9602c0d4', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'd85da74f28b106b0b3634185825ed54ca6083879', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '3d060d5bf5da7cadb06a0ed35b967147a9bc53ad', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: '85bceb5f0eeacfed5e6b6c0f9043d845fd7ed03b', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '7b42098250c1a50032a48d17743d32169f8870ca', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '764efaaa19161b8ee4bd3d4b606b6c1029ad7d2e', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
149
149
  }
150
150
  static get is() { return "kritzel-more-menu"; }
151
151
  static get encapsulation() { return "shadow"; }
@@ -200,7 +200,7 @@ export class KritzelMoreMenu {
200
200
  "optional": false,
201
201
  "docs": {
202
202
  "tags": [],
203
- "text": "The menu items to display in the dropdown.\r\nItems with `isVisible` set to `false` will be filtered out.\r\nItems with an `action` will have that action invoked on selection."
203
+ "text": "The menu items to display in the dropdown.\nItems with `isVisible` set to `false` will be filtered out.\nItems with an `action` will have that action invoked on selection."
204
204
  },
205
205
  "getter": false,
206
206
  "setter": false,
@@ -224,7 +224,7 @@ export class KritzelMoreMenu {
224
224
  "setter": false,
225
225
  "reflect": false,
226
226
  "attribute": "icon",
227
- "defaultValue": "'ellipsis-vertical'"
227
+ "defaultValue": "'ellipsisVertical'"
228
228
  },
229
229
  "iconSize": {
230
230
  "type": "number",