@kritzel/editor 0.4.31 → 0.4.32

package/dist/collection/components/kritzel-notification-card/kritzel-notification-card.css

@@ -1,101 +1,101 @@
-:host {
-  display: block;
-}
-
-.card {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: var(--kritzel-notification-card-max-width, 360px);
-  margin-inline: auto;
-  font-family: var(--kritzel-font-family, sans-serif);
-  padding: var(--kritzel-notification-card-padding, 12px 14px);
-  border: var(--kritzel-notification-card-border, 1px solid #e5e7eb);
-  border-radius: var(--kritzel-notification-card-border-radius, 12px);
-  background-color: var(--kritzel-notification-card-background-color, #ffffff);
-  color: var(--kritzel-notification-card-color, #111827);
-  box-shadow: var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08));
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--kritzel-notification-card-header-gap, 8px);
-  margin-bottom: var(--kritzel-notification-card-header-margin-bottom, 8px);
-}
-
-.header-right {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--kritzel-notification-card-header-right-gap, 6px);
-}
-
-.type-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--kritzel-notification-card-pill-height, 22px);
-  padding: var(--kritzel-notification-card-pill-padding, 0 8px);
-  border-radius: var(--kritzel-notification-card-pill-border-radius, 999px);
-  background-color: var(--kritzel-notification-card-pill-background-color, #eff6ff);
-  color: var(--kritzel-notification-card-pill-color, #1d4ed8);
-  font-size: var(--kritzel-notification-card-pill-font-size, 12px);
-  font-weight: var(--kritzel-notification-card-pill-font-weight, 600);
-  line-height: 1;
-}
-
-.card.type-info .type-pill {
-  background-color: var(--kritzel-notification-card-info-pill-background-color, #eff6ff);
-  color: var(--kritzel-notification-card-info-pill-color, #1d4ed8);
-}
-
-.card.type-warning .type-pill {
-  background-color: var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);
-  color: var(--kritzel-notification-card-warning-pill-color, #b45309);
-}
-
-.card.type-error .type-pill {
-  background-color: var(--kritzel-notification-card-error-pill-background-color, #fef2f2);
-  color: var(--kritzel-notification-card-error-pill-color, #b91c1c);
-}
-
-.timestamp {
-  color: var(--kritzel-notification-card-timestamp-color, #6b7280);
-  font-size: var(--kritzel-notification-card-timestamp-font-size, 12px);
-  white-space: nowrap;
-}
-
-.dismiss-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--kritzel-notification-card-dismiss-button-size, 24px);
-  height: var(--kritzel-notification-card-dismiss-button-size, 24px);
-  padding: 0;
-  border: none;
-  border-radius: var(--kritzel-notification-card-dismiss-button-border-radius, 6px);
-  background: var(--kritzel-notification-card-dismiss-button-background-color, transparent);
-  color: var(--kritzel-notification-card-dismiss-button-color, #4b5563);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.dismiss-button:hover {
-  background: var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6);
-}
-
-.dismiss-button:active {
-  background: var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb);
-}
-
-.dismiss-button:focus-visible {
-  outline: revert;
-}
-
-.message {
-  margin: 0;
-  color: var(--kritzel-notification-card-message-color, inherit);
-  font-size: var(--kritzel-notification-card-message-font-size, 14px);
-  line-height: var(--kritzel-notification-card-message-line-height, 1.45);
-  word-break: break-word;
-}
+:host {
+  display: block;
+}
+
+.card {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--kritzel-notification-card-max-width, 360px);
+  margin-inline: auto;
+  font-family: var(--kritzel-global-font-family, sans-serif);
+  padding: var(--kritzel-notification-card-padding, 12px 14px);
+  border: var(--kritzel-notification-card-border, 1px solid #e5e7eb);
+  border-radius: var(--kritzel-notification-card-border-radius, 12px);
+  background-color: var(--kritzel-notification-card-background-color, #ffffff);
+  color: var(--kritzel-notification-card-color, #111827);
+  box-shadow: var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08));
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kritzel-notification-card-header-gap, 8px);
+  margin-bottom: var(--kritzel-notification-card-header-margin-bottom, 8px);
+}
+
+.header-right {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kritzel-notification-card-header-right-gap, 6px);
+}
+
+.type-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--kritzel-notification-card-pill-height, 22px);
+  padding: var(--kritzel-notification-card-pill-padding, 0 8px);
+  border-radius: var(--kritzel-notification-card-pill-border-radius, 999px);
+  background-color: var(--kritzel-notification-card-pill-background-color, #eff6ff);
+  color: var(--kritzel-notification-card-pill-color, #1d4ed8);
+  font-size: var(--kritzel-notification-card-pill-font-size, 12px);
+  font-weight: var(--kritzel-notification-card-pill-font-weight, 600);
+  line-height: 1;
+}
+
+.card.type-info .type-pill {
+  background-color: var(--kritzel-notification-card-info-pill-background-color, #eff6ff);
+  color: var(--kritzel-notification-card-info-pill-color, #1d4ed8);
+}
+
+.card.type-warning .type-pill {
+  background-color: var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);
+  color: var(--kritzel-notification-card-warning-pill-color, #b45309);
+}
+
+.card.type-error .type-pill {
+  background-color: var(--kritzel-notification-card-error-pill-background-color, #fef2f2);
+  color: var(--kritzel-notification-card-error-pill-color, #b91c1c);
+}
+
+.timestamp {
+  color: var(--kritzel-notification-card-timestamp-color, #6b7280);
+  font-size: var(--kritzel-notification-card-timestamp-font-size, 12px);
+  white-space: nowrap;
+}
+
+.dismiss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kritzel-notification-card-dismiss-button-size, 24px);
+  height: var(--kritzel-notification-card-dismiss-button-size, 24px);
+  padding: 0;
+  border: none;
+  border-radius: var(--kritzel-notification-card-dismiss-button-border-radius, 6px);
+  background: var(--kritzel-notification-card-dismiss-button-background-color, transparent);
+  color: var(--kritzel-notification-card-dismiss-button-color, #4b5563);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dismiss-button:hover {
+  background: var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6);
+}
+
+.dismiss-button:active {
+  background: var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb);
+}
+
+.dismiss-button:focus-visible {
+  outline: revert;
+}
+
+.message {
+  margin: 0;
+  color: var(--kritzel-notification-card-message-color, inherit);
+  font-size: var(--kritzel-notification-card-message-font-size, 14px);
+  line-height: var(--kritzel-notification-card-message-line-height, 1.45);
+  word-break: break-word;
+}

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

@@ -1,102 +1,102 @@
-:host {
-  display: block;
-}
-
-.input-container {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.input-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--kritzel-numeric-input-label-color, #333333);
-}
-
-.input-wrapper {
-  display: flex;
-  position: relative;
-}
-
-.numeric-input {
-  flex: 1;
-  padding: 8px 36px 8px 12px;
-  border: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
-  border-radius: var(--kritzel-numeric-input-border-radius, 6px);
-  font-size: 14px;
-  color: var(--kritzel-numeric-input-text-color, #333333);
-  background-color: var(--kritzel-numeric-input-input-background, #ffffff);
-  outline: none;
-  transition: border-color 150ms ease;
-  box-sizing: border-box;
-}
-
-/* Hide native spin buttons */
-.numeric-input::-webkit-outer-spin-button,
-.numeric-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.numeric-input[type='number'] {
-  -moz-appearance: textfield;
-}
-
-.numeric-input::selection {
-  background-color: var(--kritzel-numeric-input-selection-background, #007AFF);
-  color: var(--kritzel-numeric-input-selection-color, #ffffff);
-}
-
-.numeric-input:hover {
-  border-color: var(--kritzel-numeric-input-hover-border-color, #cccccc);
-}
-
-.numeric-input:focus {
-  border-color: var(--kritzel-numeric-input-focus-border-color, #0066ff);
-  border-width: 2px;
-  padding: 7px 35px 7px 11px;
-}
-
-.spinner-buttons {
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  bottom: 1px;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
-  border-radius: 0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;
-  overflow: hidden;
-}
-
-.spinner-button {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  padding: 0;
-  border: none;
-  background-color: var(--kritzel-numeric-input-spinner-background, #f5f5f5);
-  color: var(--kritzel-numeric-input-spinner-color, #666666);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-
-.spinner-button:hover {
-  background-color: var(--kritzel-numeric-input-spinner-hover-background, #ebebeb);
-}
-
-.spinner-button:active {
-  background-color: var(--kritzel-numeric-input-spinner-active-background, #dddddd);
-}
-
-.spinner-up {
-  border-bottom: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
-}
-
-.spinner-icon {
-  width: 10px;
-  height: 6px;
-}
+:host {
+  display: block;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-numeric-input-label-color, #333333);
+}
+
+.input-wrapper {
+  display: flex;
+  position: relative;
+}
+
+.numeric-input {
+  flex: 1;
+  padding: 8px 36px 8px 12px;
+  border: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
+  border-radius: var(--kritzel-numeric-input-border-radius, 6px);
+  font-size: 14px;
+  color: var(--kritzel-numeric-input-text-color, #333333);
+  background-color: var(--kritzel-numeric-input-input-background, #ffffff);
+  outline: none;
+  transition: border-color 150ms ease;
+  box-sizing: border-box;
+}
+
+/* Hide native spin buttons */
+.numeric-input::-webkit-outer-spin-button,
+.numeric-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.numeric-input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.numeric-input::selection {
+  background-color: var(--kritzel-numeric-input-selection-background, #007AFF);
+  color: var(--kritzel-numeric-input-selection-color, #ffffff);
+}
+
+.numeric-input:hover {
+  border-color: var(--kritzel-numeric-input-hover-border-color, #cccccc);
+}
+
+.numeric-input:focus {
+  border-color: var(--kritzel-numeric-input-focus-border-color, #0066ff);
+  border-width: 2px;
+  padding: 7px 35px 7px 11px;
+}
+
+.spinner-buttons {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
+  border-radius: 0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;
+  overflow: hidden;
+}
+
+.spinner-button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 0;
+  border: none;
+  background-color: var(--kritzel-numeric-input-spinner-background, #f5f5f5);
+  color: var(--kritzel-numeric-input-spinner-color, #666666);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.spinner-button:hover {
+  background-color: var(--kritzel-numeric-input-spinner-hover-background, #ebebeb);
+}
+
+.spinner-button:active {
+  background-color: var(--kritzel-numeric-input-spinner-active-background, #dddddd);
+}
+
+.spinner-up {
+  border-bottom: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
+}
+
+.spinner-icon {
+  width: 10px;
+  height: 6px;
+}

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

@@ -86,7 +86,7 @@ export class KritzelNumericInput {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '273ca34d6be0e76cfd742495cd75172c5112533a' }, h("div", { key: '2ef4be625b4f97c1a65f4e114a161ae092248479', class: "input-container" }, this.label && h("label", { key: '4f3866b2c33327100f6b49e7b12c10ab91601bf3', class: "input-label" }, this.label), h("div", { key: 'cc1608e9638d3ea5434096720731073e8e436e53', class: "input-wrapper" }, h("input", { key: 'f872d2fb83f1ecfc2bbb9edeae97b8a0deccca66', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '0893a104eb1b68138de0d77cfe6e644e7fff75d2', class: "spinner-buttons" }, h("button", { key: 'c39596aac8affea11a880835c63975e8cdae6599', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6cfad1fab40cd65ba54ee5d80d9b08af5676878c', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '50ca542fa773658823a9bc09ec3226bba02cfac7', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5c62a5a71555474e94e73b9123023f6cf0f70c81', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '72b12df906ebf5e2d07ec387faeb11567dbca76b', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a85205a5f31392e1db4bc893fad336f5b9775530', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '4492b328055747be0df872965fe8f8a644c1b99f' }, h("div", { key: '8e35306939f4da96af77658c02ae3c4f2f9bd9c3', class: "input-container" }, this.label && h("label", { key: '00eef99018632f20e98f372b29ee23efd6855196', class: "input-label" }, this.label), h("div", { key: '41bed7ac6642a3cd52e5be1d95d1243d48e1249b', class: "input-wrapper" }, h("input", { key: 'fcb996947286814e01e15f01df89ff161926c8f3', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '0ff1a0d8306cf45d594413332c2977202ad402d3', class: "spinner-buttons" }, h("button", { key: '1f5b278dff3052fd03e65aa6758c289200574eae', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '1722b868967111631dbf2442d33d2c9736b68c0c', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '75655b2843c384ab448c5447fc3d3546c6f360d9', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'b81a65fefb49157a76f9dd5dc0ad785e167a61fe', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'dc1cc93cb3bb8593a50682a49018bd4ca27b3a30', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'db9138181002c73da50fb3ab369a36912a7874f5', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "kritzel-numeric-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.css

@@ -1,85 +1,85 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.opacity-container {
-  display: flex;
-  align-items: center;
-  width: 232px;
-}
-
-.slider-wrapper {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.opacity-slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: linear-gradient(
-    to right,
-    var(--kritzel-opacity-slider-active-color, #007AFF) 0%,
-    var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),
-    var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),
-    var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%
-  );
-  outline: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-}
-
-.opacity-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--kritzel-opacity-slider-thumb-color, #ffffff);
-  border: 2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: transform 0.1s ease;
-}
-
-.opacity-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-.opacity-slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--kritzel-opacity-slider-thumb-color, #ffffff);
-  border: 2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: transform 0.1s ease;
-}
-
-.opacity-slider::-moz-range-thumb:hover {
-  transform: scale(1.1);
-}
-
-.opacity-slider::-moz-range-track {
-  height: 6px;
-  border-radius: 3px;
-  background: transparent;
-}
-
-.opacity-slider:focus {
-  outline: none;
-}
-
-.opacity-slider:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
-}
-
-.opacity-slider:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.opacity-container {
+  display: flex;
+  align-items: center;
+  width: 232px;
+}
+
+.slider-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.opacity-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(
+    to right,
+    var(--kritzel-opacity-slider-active-color, #007AFF) 0%,
+    var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),
+    var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),
+    var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%
+  );
+  outline: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+}
+
+.opacity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--kritzel-opacity-slider-thumb-color, #ffffff);
+  border: 2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.1s ease;
+}
+
+.opacity-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.opacity-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--kritzel-opacity-slider-thumb-color, #ffffff);
+  border: 2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.1s ease;
+}
+
+.opacity-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+
+.opacity-slider::-moz-range-track {
+  height: 6px;
+  border-radius: 3px;
+  background: transparent;
+}
+
+.opacity-slider:focus {
+  outline: none;
+}
+
+.opacity-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.opacity-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}

package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -22,7 +22,7 @@ export class KritzelOpacitySlider {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: '6de0826f246bd01ec2230aac0820439059ad73c9' }, h("div", { key: 'f1f00e8e6162a8731ddeb5a857475d189ba803b1', class: "opacity-container" }, h("div", { key: '964d210f3509480756fc20795a00bda5fcfa0fb7', class: "slider-wrapper" }, h("input", { key: '40123306802ac13259e1ccd98f04739ecafbb3b4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (h(Host, { key: 'bb0e9f56f5ede377700710940c29cc05c767549a' }, h("div", { key: 'aea9ee85b87ff8a91b4119f5ff008dd6d838c05b', class: "opacity-container" }, h("div", { key: '45e6e8b7f6ec871935143ef45996114ead9d9018', class: "slider-wrapper" }, h("input", { key: '7e3d4877bf04110784c20d2b4633b7c489d54a82', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));