kritzel-stencil 0.1.83 → 0.1.86

package/dist/collection/components/shared/kritzel-input/kritzel-input.css

@@ -1,69 +1,69 @@
-:host {
-  display: block;
-}
-
-.input-container {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.input-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--kritzel-text-input-label-color, #333333);
-}
-
-.input-wrapper {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
-  border-radius: 6px;
-  overflow: hidden;
-  background: var(--kritzel-text-input-background, #ffffff);
-  transition: border-color 150ms ease;
-}
-
-.input-wrapper:hover:not(:focus-within) {
-  border-color: var(--kritzel-text-input-hover-border-color, #cccccc);
-}
-
-.input-wrapper:focus-within {
-  border-color: var(--kritzel-text-input-focus-border-color, #007AFF);
-  border-width: 2px;
-}
-
-.text-input {
-  flex: 1;
-  padding: 10px 12px;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  font-family: inherit;
-  background: transparent;
-  color: var(--kritzel-text-input-text-color, #333333);
-  box-sizing: border-box;
-}
-
-.text-input::placeholder {
-  color: var(--kritzel-text-input-placeholder-color, #999999);
-}
-
-.text-input::selection {
-  background-color: var(--kritzel-text-input-selection-background, #007AFF);
-  color: var(--kritzel-text-input-selection-color, #ffffff);
-}
-
-.text-input:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.input-suffix {
-  padding: 10px 12px;
-  background: var(--kritzel-text-input-suffix-background, #f5f5f5);
-  color: var(--kritzel-text-input-suffix-color, #666666);
-  font-size: 14px;
-  border-left: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
-  flex-shrink: 0;
-}
+:host {
+  display: block;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-text-input-label-color, #333333);
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--kritzel-text-input-background, #ffffff);
+  transition: border-color 150ms ease;
+}
+
+.input-wrapper:hover:not(:focus-within) {
+  border-color: var(--kritzel-text-input-hover-border-color, #cccccc);
+}
+
+.input-wrapper:focus-within {
+  border-color: var(--kritzel-text-input-focus-border-color, #007AFF);
+  border-width: 2px;
+}
+
+.text-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  font-family: inherit;
+  background: transparent;
+  color: var(--kritzel-text-input-text-color, #333333);
+  box-sizing: border-box;
+}
+
+.text-input::placeholder {
+  color: var(--kritzel-text-input-placeholder-color, #999999);
+}
+
+.text-input::selection {
+  background-color: var(--kritzel-text-input-selection-background, #007AFF);
+  color: var(--kritzel-text-input-selection-color, #ffffff);
+}
+
+.text-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.input-suffix {
+  padding: 10px 12px;
+  background: var(--kritzel-text-input-suffix-background, #f5f5f5);
+  color: var(--kritzel-text-input-suffix-color, #666666);
+  font-size: 14px;
+  border-left: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
+  flex-shrink: 0;
+}

package/dist/collection/components/shared/kritzel-input/kritzel-input.js

@@ -28,7 +28,7 @@ export class KritzelInput {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (h(Host, { key: '5cfc93853afd27dd24ff9709dcd277571ae4d0a1' }, h("div", { key: 'fa0a43610b98ffbc30bf9485a4f8730b80f74ab7', class: "input-container" }, this.label && h("label", { key: '151346732ef4a00a1ea78bbc19ac56a94488dfc4', class: "input-label" }, this.label), h("div", { key: '79b28f6f45cdacf7d122988bb4c844c929544cce', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'e22abd0e10ee231b2e66f50085693769584a1254', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '5c96287d24dc28f4ac321f108a356527194f4e81', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: 'e482edcbaf7cee8c35effbce0428c2b4dea84bd4' }, h("div", { key: 'a71f5e3eeba5e34470227ea3be4dd6731a94a52e', class: "input-container" }, this.label && h("label", { key: '757a32997f09558412952fe948fa234d1baecb3f', class: "input-label" }, this.label), h("div", { key: 'cfb13fe0041efdd9fe4a7bf2a098ff321b545b79', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'b8bf209f14f15f4ad8eb0cf1be1afb1bfc958f79', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: 'b5d4444609ad93c10d86978a488252b673979c94', class: "input-suffix" }, this.suffix)))));
     }
     static get is() { return "kritzel-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css

@@ -1,60 +1,60 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.endings-section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.section-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--kritzel-line-endings-label-color, #666666);
-  padding-left: 4px;
-}
-
-.endings-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.ending-option {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 48px;
-  height: 32px;
-  border-radius: 6px;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  background: var(--kritzel-line-endings-option-background, #ffffff);
-  padding: 4px;
-  transition: background-color 0.15s ease, border-color 0.15s ease;
-}
-
-.ending-option:hover {
-  background-color: var(--kritzel-line-endings-hover-background-color, #ebebeb);
-}
-
-.ending-option.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-line-endings-selected-background-color, #ebebeb);
-}
-
-.ending-option:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
-}
-
-.ending-icon {
-  width: 100%;
-  height: 100%;
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.endings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.section-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--kritzel-line-endings-label-color, #666666);
+  padding-left: 4px;
+}
+
+.endings-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ending-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background: var(--kritzel-line-endings-option-background, #ffffff);
+  padding: 4px;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.ending-option:hover {
+  background-color: var(--kritzel-line-endings-hover-background-color, #ebebeb);
+}
+
+.ending-option.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-line-endings-selected-background-color, #ebebeb);
+}
+
+.ending-option:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.ending-icon {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js

@@ -65,10 +65,10 @@ export class KritzelLineEndings {
     render() {
         const startEnding = this.getStartEnding();
         const endEnding = this.getEndEnding();
-        return (h(Host, { key: 'fd254becee71940867504c80b47d56a69ae2ab12' }, h("div", { key: 'be03727ba2f5802a8adadc90b28dd7488d1bfe1c', class: "endings-section" }, h("div", { key: '0ba2fcefeb3690f7eee01c7b1c3f6db58ed8e918', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+        return (h(Host, { key: '38bcd0b0e56c0d0fc7fd57346b718054faa0ba06' }, h("div", { key: '5ae52039756334299a86d7301b15f6874d5689ff', class: "endings-section" }, h("div", { key: '8a0dd7792498248203f2db8c346828fe7f57534d', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
                 'ending-option': true,
                 'selected': startEnding === type,
-            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '058ce9870084adc6f1b061aba50e830c0e8b4a01', class: "endings-section" }, h("div", { key: '69c4ced0ddb8a47ea1fdd290431eee7bae95e192', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '001c6cc50af45e1461ef15e2c43df4efdd83b48f', class: "endings-section" }, h("div", { key: '96cc57da4bed38aa42207d40a6a21cd39fa18cad', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
                 'ending-option': true,
                 'selected': endEnding === type,
             }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
@@ -96,7 +96,7 @@ export class KritzelLineEndings {
                     "references": {
                         "LineEndingType": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-line-endings/kritzel-line-endings.tsx",
+                            "path": "/home/runner/work/kritzel/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-line-endings/kritzel-line-endings.tsx",
                             "id": "src/components/shared/kritzel-line-endings/kritzel-line-endings.tsx::LineEndingType"
                         }
                     }

package/dist/collection/components/shared/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;
+  }
+}