kritzel-stencil 0.4.20 → 0.4.21

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: var(--kritzel-text-input-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: var(--kritzel-text-input-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: 'b79679b0c9af30caa31423bdadb99819713c567e' }, h("div", { key: '7e54ab560bf19c41cc581e90777f3196931b727a', class: "input-container" }, this.label && h("label", { key: '9d4698d1c145a6aa481b4723d278ceb6e4909344', class: "input-label" }, this.label), h("div", { key: 'b4346d79a9b04ca3e663b490b837af3e8a838075', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '686abee5f9444b5227c634bab9743f32d964d74d', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: 'd0daea49eb781f6c0e6ca310b5f0493e96be5de6', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: 'a4d86101322da32c87a62ac8bb05edb7015ede2a' }, h("div", { key: 'abc5b007af0f6f9353e0b680636c92813ee1ef49', class: "input-container" }, this.label && h("label", { key: 'f79e02a925aa6bd1b6cd48fc4225e441695ff893', class: "input-label" }, this.label), h("div", { key: 'e2937d2ad1def996e1937a9dd711578a3f9b6494', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '8bc45cc6f2603bec30f2299286d03beacd8c07fb', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '917fb6fa6c5fe62ab0f1e5c83f09aedd22623353', 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: '81e3262408d26a06acb2677698832b89651292a1' }, h("div", { key: '85c67f948075b2d58abfbd9d168a84c89554e81f', class: "endings-section" }, h("div", { key: 'd10a0b1c58fd06926a83cd78e213417aca28d01c', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+        return (h(Host, { key: '60115b8a2840ffe21e0846fdc2678c6ba24b22c0' }, h("div", { key: '3b63aa05ca78699172c645fdd404efdc55bc4536', class: "endings-section" }, h("div", { key: '9538369e8d2bb26600d6054ddbbc13d6c960bd56', 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: 'fd99875f3cefa8c4e36e106e836088fa61c75432', class: "endings-section" }, h("div", { key: 'dbcd0a32f278cc0d0317913827034f912a14d2b4', 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: 'ecec29740c09a61190938bab4955ccde6b84cfa2', class: "endings-section" }, h("div", { key: 'ea054597c3e3566e7921f2c04c07d74e4f4331a1', 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;
+  }
+}