@kritzel/editor 0.4.31 → 0.4.32

package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.css

@@ -1,98 +1,98 @@
-:host {
-  display: contents;
-}
-
-kritzel-dialog {
-  --kritzel-dialog-width-small: 380px;
-}
-
-.login-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.login-subtitle {
-  font-size: 13px;
-  color: var(--kritzel-login-dialog-subtitle-color, #666666);
-  margin: 0;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.login-providers {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* Provider Button */
-.provider-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);
-  border-radius: 8px;
-  background: var(--kritzel-login-dialog-button-background, #ffffff);
-  color: var(--kritzel-login-dialog-button-text-color, #333333);
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.provider-button:hover:not(:disabled) {
-  background: var(--kritzel-login-dialog-button-hover-background, #f5f5f5);
-  border-color: var(--kritzel-login-dialog-button-hover-border-color, #cccccc);
-}
-
-.provider-button:active:not(:disabled) {
-  background: var(--kritzel-login-dialog-button-active-background, #ebebeb);
-}
-
-.provider-button:focus-visible {
-  outline: revert;
-  outline-offset: revert;
-}
-
-.provider-button.is-disabled {
-  opacity: 0.5;
-  cursor: default;
-  pointer-events: none;
-}
-
-.provider-button.is-loading {
-  cursor: default;
-}
-
-.provider-label {
-  flex-shrink: 0;
-}
-
-/* Loading Spinner */
-.provider-button.is-loading .provider-label {
-  opacity: 0.7;
-}
-
-@keyframes kritzel-login-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  display: block;
-  flex-shrink: 0;
-  border: 2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);
-  border-top-color: var(--kritzel-login-dialog-spinner-active-color, #333333);
-  border-radius: 50%;
-  animation: kritzel-login-spin 0.6s linear infinite;
-}
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 380px;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.login-subtitle {
+  font-size: 13px;
+  color: var(--kritzel-login-dialog-subtitle-color, #666666);
+  margin: 0;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.login-providers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Provider Button */
+.provider-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);
+  border-radius: 8px;
+  background: var(--kritzel-login-dialog-button-background, #ffffff);
+  color: var(--kritzel-login-dialog-button-text-color, #333333);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.provider-button:hover:not(:disabled) {
+  background: var(--kritzel-login-dialog-button-hover-background, #f5f5f5);
+  border-color: var(--kritzel-login-dialog-button-hover-border-color, #cccccc);
+}
+
+.provider-button:active:not(:disabled) {
+  background: var(--kritzel-login-dialog-button-active-background, #ebebeb);
+}
+
+.provider-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.provider-button.is-disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+.provider-button.is-loading {
+  cursor: default;
+}
+
+.provider-label {
+  flex-shrink: 0;
+}
+
+/* Loading Spinner */
+.provider-button.is-loading .provider-label {
+  opacity: 0.7;
+}
+
+@keyframes kritzel-login-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  border: 2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-login-dialog-spinner-active-color, #333333);
+  border-radius: 50%;
+  animation: kritzel-login-spin 0.6s linear infinite;
+}

package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '09738ca8deef6d44233b7f29bed5c63d1ec151e6' }, h("kritzel-dialog", { key: '3acdc31c0954837f3590d1087dc7a5597a177012', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'ec57c43e11a1800799b0bf5ac33fdd68cd03e746', class: "login-content" }, this.subtitle && (h("p", { key: 'ac1d59da1f857d7eb64d70a9a3f650bdb74c864c', class: "login-subtitle" }, this.subtitle)), h("div", { key: '0cf4e38f32f25a1f40b5e28b28784b5d53302cc3', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '68f2b90426d32b12ac1e03dbed2f0c6f5e34eb9e' }, h("kritzel-dialog", { key: '2f6b6134ac984237593e587b0480d71fbdc9789e', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'd078c5cc1ef8465da47021b6562783a01d50f574', class: "login-content" }, this.subtitle && (h("p", { key: 'd42b498c43796703b2f92a5aaae2505113008e0e', class: "login-subtitle" }, this.subtitle)), h("div", { key: '1e6484c63e5bf6799ad566d753cc1e2bc4b518ff', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,

package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.css

@@ -1,190 +1,190 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.master-detail-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: var(--kritzel-master-detail-min-height, 300px);
-  gap: var(--kritzel-master-detail-gap, 0);
-  background-color: var(--kritzel-master-detail-background-color, transparent);
-}
-
-/* Master Menu (Left Panel) */
-.master-menu {
-  display: flex;
-  flex-direction: column;
-  width: var(--kritzel-master-detail-menu-width, 200px);
-  min-width: var(--kritzel-master-detail-menu-min-width, 160px);
-  padding: var(--kritzel-master-detail-menu-padding, 8px);
-  background-color: var(--kritzel-master-detail-menu-background-color, #ffffff);
-  border-right: var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);
-  gap: var(--kritzel-master-detail-menu-gap, 4px);
-  overflow-y: auto;
-}
-
-/* Menu Item */
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: var(--kritzel-master-detail-menu-item-gap, 10px);
-  padding: var(--kritzel-master-detail-menu-item-padding, 10px 12px);
-  border: none;
-  border-radius: var(--kritzel-master-detail-menu-item-border-radius, 6px);
-  background-color: var(--kritzel-master-detail-menu-item-background-color, transparent);
-  color: var(--kritzel-master-detail-menu-item-color, #333333);
-  font-family: inherit;
-  font-size: var(--kritzel-master-detail-menu-item-font-size, 14px);
-  font-weight: var(--kritzel-master-detail-menu-item-font-weight, 400);
-  text-align: left;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  transition: background-color 150ms ease, color 150ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.menu-item:hover:not(.is-disabled) {
-  background-color: var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb);
-}
-
-.menu-item:active:not(.is-disabled) {
-  background-color: var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0);
-}
-
-.menu-item.is-selected {
-  background-color: var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);
-  color: var(--kritzel-master-detail-menu-item-selected-color, #ffffff);
-  font-weight: var(--kritzel-master-detail-menu-item-selected-font-weight, 500);
-}
-
-.menu-item.is-selected:hover {
-  background-color: var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3);
-}
-
-.menu-item.is-disabled {
-  color: var(--kritzel-master-detail-menu-item-disabled-color, #999999);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.menu-item:focus-visible {
-  outline: var(--kritzel-master-detail-menu-item-focus-outline, revert);
-  outline-offset: var(--kritzel-master-detail-menu-item-focus-outline-offset, revert);
-}
-
-/* Menu Item Icon */
-.menu-item-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Menu Item Label */
-.menu-item-label {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Detail Panel (Right Panel) */
-.detail-panel {
-  flex: 1;
-  min-height: 0;
-  padding: var(--kritzel-master-detail-detail-padding, 16px);
-  background-color: var(--kritzel-master-detail-detail-background-color, #ffffff);
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
-  scrollbar-width: thin;
-}
-
-.detail-panel:focus {
-  outline: none;
-}
-
-.detail-panel:focus-visible {
-  outline: var(--kritzel-master-detail-detail-focus-outline, revert);
-  outline-offset: var(--kritzel-master-detail-detail-focus-outline-offset, revert);
-}
-
-/* Mobile Back Button */
-.mobile-back-button {
-  display: none;
-  align-items: center;
-  gap: 8px;
-  background: none;
-  border: none;
-  padding: 0 0 16px 0;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  color: var(--kritzel-master-detail-back-button-color, #333333);
-  font-weight: 500;
-  font-size: 14px;
-  font-family: inherit;
-}
-
-.mobile-back-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* Mobile Chevron */
-.menu-item-chevron {
-  display: none;
-  flex-shrink: 0;
-  margin-left: auto;
-  color: var(--kritzel-master-detail-menu-item-chevron-color, #999999);
-}
-
-.menu-item-chevron svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-}
-
-/* Mobile specific styles */
-@media (max-width: 768px) {
-  .master-menu {
-    width: 100%;
-    border-right: none;
-  }
-
-  .detail-panel {
-    display: none;
-    width: 100%;
-  }
-
-  /* When detail is active on mobile */
-  .master-detail-container.is-mobile-detail-visible .master-menu {
-    display: none;
-  }
-
-  .master-detail-container.is-mobile-detail-visible .detail-panel {
-    display: block;
-  }
-
-  .mobile-back-button {
-    display: flex;
-  }
-
-  /* Override selected styles for mobile */
-  .menu-item.is-selected {
-    background-color: transparent;
-    color: var(--kritzel-master-detail-menu-item-color, #333333);
-    font-weight: var(--kritzel-master-detail-menu-item-font-weight, 400);
-  }
-
-  .menu-item.is-selected:hover {
-    background-color: var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb);
-  }
-
-  .menu-item-chevron {
-    display: flex;
-    align-items: center;
-  }
-}
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.master-detail-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: var(--kritzel-master-detail-min-height, 300px);
+  gap: var(--kritzel-master-detail-gap, 0);
+  background-color: var(--kritzel-master-detail-background-color, transparent);
+}
+
+/* Master Menu (Left Panel) */
+.master-menu {
+  display: flex;
+  flex-direction: column;
+  width: var(--kritzel-master-detail-menu-width, 200px);
+  min-width: var(--kritzel-master-detail-menu-min-width, 160px);
+  padding: var(--kritzel-master-detail-menu-padding, 8px);
+  background-color: var(--kritzel-master-detail-menu-background-color, #ffffff);
+  border-right: var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);
+  gap: var(--kritzel-master-detail-menu-gap, 4px);
+  overflow-y: auto;
+}
+
+/* Menu Item */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--kritzel-master-detail-menu-item-gap, 10px);
+  padding: var(--kritzel-master-detail-menu-item-padding, 10px 12px);
+  border: none;
+  border-radius: var(--kritzel-master-detail-menu-item-border-radius, 6px);
+  background-color: var(--kritzel-master-detail-menu-item-background-color, transparent);
+  color: var(--kritzel-master-detail-menu-item-color, #333333);
+  font-family: inherit;
+  font-size: var(--kritzel-master-detail-menu-item-font-size, 14px);
+  font-weight: var(--kritzel-master-detail-menu-item-font-weight, 400);
+  text-align: left;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 150ms ease, color 150ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.menu-item:hover:not(.is-disabled) {
+  background-color: var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb);
+}
+
+.menu-item:active:not(.is-disabled) {
+  background-color: var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0);
+}
+
+.menu-item.is-selected {
+  background-color: var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);
+  color: var(--kritzel-master-detail-menu-item-selected-color, #ffffff);
+  font-weight: var(--kritzel-master-detail-menu-item-selected-font-weight, 500);
+}
+
+.menu-item.is-selected:hover {
+  background-color: var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3);
+}
+
+.menu-item.is-disabled {
+  color: var(--kritzel-master-detail-menu-item-disabled-color, #999999);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.menu-item:focus-visible {
+  outline: var(--kritzel-master-detail-menu-item-focus-outline, revert);
+  outline-offset: var(--kritzel-master-detail-menu-item-focus-outline-offset, revert);
+}
+
+/* Menu Item Icon */
+.menu-item-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Menu Item Label */
+.menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Detail Panel (Right Panel) */
+.detail-panel {
+  flex: 1;
+  min-height: 0;
+  padding: var(--kritzel-master-detail-detail-padding, 16px);
+  background-color: var(--kritzel-master-detail-detail-background-color, #ffffff);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+}
+
+.detail-panel:focus {
+  outline: none;
+}
+
+.detail-panel:focus-visible {
+  outline: var(--kritzel-master-detail-detail-focus-outline, revert);
+  outline-offset: var(--kritzel-master-detail-detail-focus-outline-offset, revert);
+}
+
+/* Mobile Back Button */
+.mobile-back-button {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 0 0 16px 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--kritzel-master-detail-back-button-color, #333333);
+  font-weight: 500;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.mobile-back-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Mobile Chevron */
+.menu-item-chevron {
+  display: none;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--kritzel-master-detail-menu-item-chevron-color, #999999);
+}
+
+.menu-item-chevron svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+}
+
+/* Mobile specific styles */
+@media (max-width: 768px) {
+  .master-menu {
+    width: 100%;
+    border-right: none;
+  }
+
+  .detail-panel {
+    display: none;
+    width: 100%;
+  }
+
+  /* When detail is active on mobile */
+  .master-detail-container.is-mobile-detail-visible .master-menu {
+    display: none;
+  }
+
+  .master-detail-container.is-mobile-detail-visible .detail-panel {
+    display: block;
+  }
+
+  .mobile-back-button {
+    display: flex;
+  }
+
+  /* Override selected styles for mobile */
+  .menu-item.is-selected {
+    background-color: transparent;
+    color: var(--kritzel-master-detail-menu-item-color, #333333);
+    font-weight: var(--kritzel-master-detail-menu-item-font-weight, 400);
+  }
+
+  .menu-item.is-selected:hover {
+    background-color: var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb);
+  }
+
+  .menu-item-chevron {
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.js

@@ -90,15 +90,15 @@ export class KritzelMasterDetail {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: 'ee642d3c2df215971244c6dc3807721324d1a08e' }, h("div", { key: 'a005e6614961033574062968df84c65bd496f0c3', class: {
+        return (h(Host, { key: 'dfb5a1fcc9e7cdc1dc803a1ebad437fd125f0544' }, h("div", { key: '9f7dbadccd893ad5c60f4c51052805729144d09e', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: 'abf9285d82c4d4c49041b4bfff1cf11e0aaee37d', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: '40e23f5e5c123a80b7bd62fecc0c0121d9f671f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '9f30af7be93c5982e78d789903ad54514e9f9bd9', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '0ce5b6f012fbbc84b4a950afbb0604380070f1bc', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '898bcfb6ccb1e07476599bc998a4b5d2e6de0cf2', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '5ce1c6cdc8aa53fc3bd3c56c0ea5549d88a8f267' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'fe85069f67961b6f266fe602f17c130b5e554b1f', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '33feba674e61adddd31457e4a5c22d7932071c01', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'c94f80d668dbf8689bb4f2c8d7c8d1fb7b650715', name: "chevronLeft", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '8938f125f7597b13a64256400733de4cc5e1e7c4' })))));
     }
     static get is() { return "kritzel-master-detail"; }
     static get encapsulation() { return "shadow"; }