kritzel-stencil 0.1.83 → 0.1.86

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

@@ -1,72 +1,72 @@
-:host {
-  display: inline-block;
-  font-family: sans-serif;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border-radius: var(--kritzel-button-border-radius, 8px);
-  padding: var(--kritzel-button-padding, 12px 20px);
-  font-size: var(--kritzel-button-font-size, 14px);
-  font-weight: var(--kritzel-button-font-weight, 500);
-  transition: background-color 0.15s ease, opacity 0.15s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-button.primary {
-  background-color: var(--kritzel-button-primary-background-color, #007AFF);
-  color: var(--kritzel-button-primary-color, #ffffff);
-}
-
-button.primary:hover {
-  background-color: var(--kritzel-button-primary-hover-background-color, #006ae6);
-}
-
-button.primary:active {
-  background-color: var(--kritzel-button-primary-active-background-color, #005bbf);
-}
-
-button.secondary {
-  background-color: var(--kritzel-button-secondary-background-color, #f0f0f0);
-  color: var(--kritzel-button-secondary-color, #333333);
-}
-
-button.secondary:hover {
-  background-color: var(--kritzel-button-secondary-hover-background-color, #e0e0e0);
-}
-
-button.secondary:active {
-  background-color: var(--kritzel-button-secondary-active-background-color, #d0d0d0);
-}
-
-button.text {
-  background-color: transparent;
-  color: var(--kritzel-button-text-color, #007AFF);
-}
-
-button.text:hover {
-  background-color: var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08));
-}
-
-button.text:active {
-  background-color: var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15));
-}
-
-button.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
+:host {
+  display: inline-block;
+  font-family: sans-serif;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: var(--kritzel-button-border-radius, 8px);
+  padding: var(--kritzel-button-padding, 12px 20px);
+  font-size: var(--kritzel-button-font-size, 14px);
+  font-weight: var(--kritzel-button-font-weight, 500);
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button.primary {
+  background-color: var(--kritzel-button-primary-background-color, #007AFF);
+  color: var(--kritzel-button-primary-color, #ffffff);
+}
+
+button.primary:hover {
+  background-color: var(--kritzel-button-primary-hover-background-color, #006ae6);
+}
+
+button.primary:active {
+  background-color: var(--kritzel-button-primary-active-background-color, #005bbf);
+}
+
+button.secondary {
+  background-color: var(--kritzel-button-secondary-background-color, #f0f0f0);
+  color: var(--kritzel-button-secondary-color, #333333);
+}
+
+button.secondary:hover {
+  background-color: var(--kritzel-button-secondary-hover-background-color, #e0e0e0);
+}
+
+button.secondary:active {
+  background-color: var(--kritzel-button-secondary-active-background-color, #d0d0d0);
+}
+
+button.text {
+  background-color: transparent;
+  color: var(--kritzel-button-text-color, #007AFF);
+}
+
+button.text:hover {
+  background-color: var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08));
+}
+
+button.text:active {
+  background-color: var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15));
+}
+
+button.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: '3a285bfdc1b336fb450304856aa81c1bd9c4e5e3' }, h("button", { key: 'f3119bfe9cf8ca1b6e031cdcc8bee9549c18e620', type: this.type, class: {
+        return (h(Host, { key: 'aa82a9e0c6c39b0b2bce597ac2e864049543d474' }, h("button", { key: '5bda14f9fef89abacb9cd04e5aaa8ae7ae25048a', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '5a26eee0781c5fafc7a41260364b2a2c11f192a6' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8585675eec39345ddfbf3f6dbb705035f7a5d099' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,25 +1,25 @@
-:host {
-  display: flex;
-}
-
-.checkerboard-bg {
-  background: repeating-conic-gradient(
-      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
-      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
-    )
-    50% / 8px 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.color-circle {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  display: block;
-}
-
-.color-circle.white {
-  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
+:host {
+  display: flex;
+}
+
+.checkerboard-bg {
+  background: repeating-conic-gradient(
+      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
+      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
+    )
+    50% / 8px 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.color-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.color-circle.white {
+  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
 }

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

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: '7e36e97c383cff73b3146279e971526dd5c7f0f7' }, h("div", { key: 'e8ad3ca5e9771c51a96a846627ea20c75212ceeb', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'a740b94f2baacb978b26deae1ea1057c7faf9036' }, h("div", { key: 'e82f83a23e44a2ff23b5efbfac28e4c47cd5b749', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '9269087c7694604d70d50d846cedb6ce022373cd', class: {
+            } }, h("div", { key: 'd83e2be171f89ee4cd53e8cf83ab6591f585129f', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css

@@ -1,46 +1,46 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.color-grid {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(6, 32px);
-  gap: 8px;
-  justify-items: center;
-  overflow: hidden;
-  height: 40px;
-  transition: height 0.1s ease-in-out;
-}
-
-.color-grid.expanded {
-  height: 500px;
-}
-
-.color-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-}
-
-.color-container:hover {
-  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
-}
-
-.color-container.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-color-palette-selected-background-color);
-}
-
-
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.color-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(6, 32px);
+  gap: 8px;
+  justify-items: center;
+  overflow: hidden;
+  height: 40px;
+  transition: height 0.1s ease-in-out;
+}
+
+.color-grid.expanded {
+  height: 500px;
+}
+
+.color-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+}
+
+.color-container:hover {
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.color-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-color-palette-selected-background-color);
+}
+
+

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '22b6f0362933848cd40ad44c73a48fd4d8330884' }, h("div", { key: '38adb9abc39d78ae9528341212acf2de425b4eb8', class: {
+        return (h(Host, { key: 'a2c996d16a44f66471f6f76e08129142fc9f5ddb' }, h("div", { key: '245f4b9ff50412b84ede221d22b0894a104a6895', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {