@kritzel/editor 0.4.31 → 0.4.32

package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.css

@@ -1,112 +1,113 @@
-:host {
-  display: block; 
-}
-
-.menu-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--kritzel-context-menu-item-spacing, 2px);
-  background-color: var(--kritzel-context-menu-background-color, #ffffff);
-  border-radius: var(--kritzel-context-menu-border-radius, 12px);
-  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
-  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
-  padding: var(--kritzel-context-menu-padding, 4px);
-  min-width: var(--kritzel-context-menu-min-width, 140px);
-}
-
-.menu-item-wrapper {
-  position: relative;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: var(--kritzel-context-menu-item-gap, 8px);
-  background: none;
-  border: none;
-  text-align: left;
-  padding: var(--kritzel-context-menu-item-padding, 8px);
-  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  font-size: var(--kritzel-context-menu-item-font-size, 14px);
-  color: var(--kritzel-context-menu-item-color, #333333);
-  white-space: nowrap;
-  -webkit-tap-highlight-color: transparent;
-  width: 100%;
-  min-width: 0;
-}
-
-.menu-item:not(.disabled):hover,
-.menu-item.submenu-open {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item:not(.disabled):active {
-  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.menu-item.disabled {
-  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);
-}
-
-.menu-item.has-children.disabled {
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  color: var(--kritzel-context-menu-item-color, #333333);
-}
-
-.menu-item kritzel-icon {
-  opacity: 0.8;
-  flex-shrink: 0;
-}
-
-.menu-item.disabled kritzel-icon {
-  opacity: 0.4;
-}
-
-.menu-item.has-children.disabled kritzel-icon {
-  opacity: 0.8;
-}
-
-.label {
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.submenu-arrow {
-  margin-left: auto;
-  opacity: 0.5;
-}
-
-.menu-divider {
-  height: 1px;
-  background-color: var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));
-  margin: var(--kritzel-context-menu-divider-margin, 4px 8px);
-}
-
-.submenu-container {
-  position: absolute;
-  top: 0;
-  left: 100%;
-  z-index: 2;
-  margin-left: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--kritzel-context-menu-item-spacing, 2px);
-  background-color: var(--kritzel-context-menu-background-color, #ffffff);
-  border-radius: var(--kritzel-context-menu-border-radius, 12px);
-  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
-  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
-  padding: var(--kritzel-context-menu-padding, 4px);
-  min-width: 120px;
-}
-
-.submenu-container.position-left {
-  left: auto;
-  right: 100%;
-  margin-left: 0;
-  margin-right: 4px;
-}
+:host {
+  display: block; 
+}
+
+.menu-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kritzel-context-menu-item-spacing, 2px);
+  background-color: var(--kritzel-context-menu-background-color, #ffffff);
+  border-radius: var(--kritzel-context-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
+  padding: var(--kritzel-context-menu-padding, 4px);
+  min-width: var(--kritzel-context-menu-min-width, 140px);
+}
+
+.menu-item-wrapper {
+  position: relative;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--kritzel-context-menu-item-gap, 8px);
+  font-family: var(--kritzel-context-menu-font-family, var(--kritzel-global-font-family, sans-serif));
+  background: none;
+  border: none;
+  text-align: left;
+  padding: var(--kritzel-context-menu-item-padding, 8px);
+  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  font-size: var(--kritzel-context-menu-item-font-size, 14px);
+  color: var(--kritzel-context-menu-item-color, #333333);
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+  width: 100%;
+  min-width: 0;
+}
+
+.menu-item:not(.disabled):hover,
+.menu-item.submenu-open {
+  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.menu-item:not(.disabled):active {
+  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.menu-item.disabled {
+  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);
+}
+
+.menu-item.has-children.disabled {
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-context-menu-item-color, #333333);
+}
+
+.menu-item kritzel-icon {
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.menu-item.disabled kritzel-icon {
+  opacity: 0.4;
+}
+
+.menu-item.has-children.disabled kritzel-icon {
+  opacity: 0.8;
+}
+
+.label {
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.submenu-arrow {
+  margin-left: auto;
+  opacity: 0.5;
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));
+  margin: var(--kritzel-context-menu-divider-margin, 4px 8px);
+}
+
+.submenu-container {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 2;
+  margin-left: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kritzel-context-menu-item-spacing, 2px);
+  background-color: var(--kritzel-context-menu-background-color, #ffffff);
+  border-radius: var(--kritzel-context-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
+  padding: var(--kritzel-context-menu-padding, 4px);
+  min-width: 120px;
+}
+
+.submenu-container.position-left {
+  left: auto;
+  right: 100%;
+  margin-left: 0;
+  margin-right: 4px;
+}

package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.js

@@ -223,7 +223,7 @@ export class KritzelContextMenu {
             const submenuOpen = hasChildren && this.isSubmenuOpen(path);
             return [
                 showDivider && h("div", { class: "menu-divider", key: `divider-${path}` }),
-                h("div", { class: "menu-item-wrapper", key: `wrapper-${path}`, ref: el => el && this.menuItemWrapperRefs.set(path, el), onMouseEnter: () => this.handleItemMouseEnter(path, hasChildren) }, h("button", { key: `${item.label}-${path}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren, 'submenu-open': submenuOpen }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled && !hasChildren }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevron-right", size: 12, class: "submenu-arrow" })), hasChildren && submenuOpen && this.renderSubmenu(processedChildren, path)),
+                h("div", { class: "menu-item-wrapper", key: `wrapper-${path}`, ref: el => el && this.menuItemWrapperRefs.set(path, el), onMouseEnter: () => this.handleItemMouseEnter(path, hasChildren) }, h("button", { key: `${item.label}-${path}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren, 'submenu-open': submenuOpen }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled && !hasChildren }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevronRight", size: 12, class: "submenu-arrow" })), hasChildren && submenuOpen && this.renderSubmenu(processedChildren, path)),
             ];
         });
     }

package/dist/collection/components/kritzel-current-user/kritzel-current-user.css

@@ -1,11 +1,11 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-tap-highlight-color: transparent;
-}
-
-kritzel-avatar {
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border-radius: 50%;
-}
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-tap-highlight-color: transparent;
+}
+
+kritzel-avatar {
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 50%;
+}

package/dist/collection/components/kritzel-current-user/kritzel-current-user.js

@@ -11,7 +11,7 @@ export class KritzelCurrentUser {
     /** Resolved localized strings keyed by term key, supplied by the editor. */
     terms = {};
     render() {
-        return (h(Host, { key: '27a6be0c90f290588190f9810608041eb713ac75' }, h("kritzel-avatar", { key: 'f06de8b0e904cbcf3fb72ed2cc50da559ca2c9c4', user: this.user, size: this.avatarSize })));
+        return (h(Host, { key: 'e6b56d76dd339fd10216a4d788d56de1fdd20fc6' }, h("kritzel-avatar", { key: '03445e8fe4c43aa4015b6ec124ac731baec03a22', user: this.user, size: this.avatarSize })));
     }
     static get is() { return "kritzel-current-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.css

@@ -1,39 +1,39 @@
-:host {
-  display: contents;
-}
-
-kritzel-dialog {
-  --kritzel-dialog-width-small: 380px;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-}
-
-.user-name {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--kritzel-current-user-dialog-name-color, #333333);
-  text-align: center;
-  margin-top: 8px;
-}
-
-.user-email {
-  font-size: 14px;
-  color: var(--kritzel-current-user-dialog-email-color, #666666);
-  text-align: center;
-}
-
-.logout-button {
-  margin-top: 16px;
-  width: 100%;
-  --kritzel-button-width: 100%;
-  --kritzel-button-primary-background-color: var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);
-  --kritzel-button-primary-hover-background-color: var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);
-  --kritzel-button-primary-active-background-color: var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);
-  --kritzel-button-primary-color: var(--kritzel-current-user-dialog-logout-button-color, #ffffff);
-}
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 380px;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.user-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--kritzel-current-user-dialog-name-color, #333333);
+  text-align: center;
+  margin-top: 8px;
+}
+
+.user-email {
+  font-size: 14px;
+  color: var(--kritzel-current-user-dialog-email-color, #666666);
+  text-align: center;
+}
+
+.logout-button {
+  margin-top: 16px;
+  width: 100%;
+  --kritzel-button-width: 100%;
+  --kritzel-button-primary-background-color: var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);
+  --kritzel-button-primary-hover-background-color: var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);
+  --kritzel-button-primary-active-background-color: var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);
+  --kritzel-button-primary-color: var(--kritzel-current-user-dialog-logout-button-color, #ffffff);
+}

package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.js

@@ -29,7 +29,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: '68c0653cbd5d5dfccd5689223c08d82f36e2bc8e' }, h("kritzel-dialog", { key: '0e7b35e3bb4239ef7a992e5716c05117d14ac1df', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '236c41eaf4c570b91a0cfe0e5a35d8b00140b6ee', class: "user-info" }, h("kritzel-avatar", { key: 'edbaa83513e2c8838c29e32149fae44aefdbb122', user: this.user, size: 80 }), displayName && h("div", { key: '275560cca9980dd8664e6c4e9718cb7085c1031b', class: "user-name" }, displayName), this.user?.email && h("div", { key: '3f9483938a271d620ee3109fa3ce1e37001683ce', class: "user-email" }, this.user.email), h("kritzel-button", { key: 'd92f0613f9ee7f2d44a30f444d30e59294022809', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
+        return (h(Host, { key: '267ed65fe03d4de50880b5957c717c47fd2ec0c9' }, h("kritzel-dialog", { key: '7c5ef6bb8b29f04cc194cde990658869a0919015', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '734e5f893425d5d89631ad7c3e95697edd751837', class: "user-info" }, h("kritzel-avatar", { key: '926a957b6d7f78184a98f4ad96480b29210e6184', user: this.user, size: 80 }), displayName && h("div", { key: '054d3a724d0785d2a161fdcba23ca33c07dc18e2', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'a401b8f48d9dcd4ec990072f63a27111c476c224', class: "user-email" }, this.user.email), h("kritzel-button", { key: 'b1e8757279910a71dbee12be19635b4aa55bd23e', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }