kritzel-stencil 0.4.20 → 0.4.21

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

@@ -1,190 +1,190 @@
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-  width: 100%;
-  position: relative;
-}
-
-.dropdown-wrapper {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--kritzel-dropdown-border-color, #ebebeb);
-  border-radius: var(--kritzel-dropdown-border-radius, 6px);
-  overflow: visible;
-  height: 38px;
-  width: 100%;
-  position: relative;
-}
-
-.dropdown-wrapper:hover:not(:focus-within) {
-  border-color: var(--kritzel-dropdown-hover-border-color, #cccccc);
-}
-
-.dropdown-container {
-  flex: 1;
-  height: 100%;
-  min-width: 0;
-}
-
-.dropdown-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 8px;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: var(--kritzel-dropdown-border-radius, 6px);
-  border: none;
-  background-color: var(--kritzel-dropdown-background, #ffffff);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  outline: none;
-  font-size: inherit;
-  font-family: inherit;
-  color: var(--kritzel-dropdown-text-color, #333333);
-  -webkit-tap-highlight-color: transparent;
-  text-align: left;
-}
-
-.dropdown-trigger:focus-visible {
-  outline: revert;
-}
-
-.dropdown-trigger.has-suffix-border {
-  border-right: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.dropdown-trigger.has-prefix-border {
-  border-left: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.dropdown-trigger-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.dropdown-trigger-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-
-.dropdown-trigger-arrow svg {
-  width: 100%;
-  height: 100%;
-}
-
-.dropdown-trigger.is-open .dropdown-trigger-arrow {
-  transform: rotate(180deg);
-}
-
-.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow {
-  transform: rotate(0deg);
-}
-
-.dropdown-menu {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin: 0;
-  padding: 4px 0;
-  list-style: none;
-  background-color: var(--kritzel-dropdown-background, #ffffff);
-  border: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-radius: var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));
-  box-shadow: var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
-  z-index: 1000;
-  max-height: 240px;
-  overflow-y: auto;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0.15s;
-  outline: none;
-}
-
-/* Open downward (default) */
-.dropdown-menu.open-down {
-  top: calc(100% + 4px);
-  bottom: auto;
-  transform: translateY(-8px);
-}
-
-/* Open upward */
-.dropdown-menu.open-up {
-  bottom: calc(100% + 4px);
-  top: auto;
-  transform: translateY(8px);
-}
-
-.dropdown-menu.is-open {
-  opacity: 1;
-  visibility: inherit;
-  transform: translateY(0);
-}
-
-/* Adjust box shadow for upward opening */
-.dropdown-menu.open-up {
-  box-shadow: var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15));
-}
-
-.dropdown-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  color: var(--kritzel-dropdown-text-color, #333333);
-  transition: background-color 0.1s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.dropdown-option.is-focused {
-  background-color: var(--kritzel-dropdown-hover-background-color, #f0f0f0);
-}
-
-.dropdown-option.is-selected {
-  font-weight: 600;
-  background-color: var(--kritzel-dropdown-selected-background-color, #007bff1a);
-}
-
-.dropdown-option-check {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--kritzel-dropdown-accent-color, #007bff);
-}
-
-.dropdown-option-check svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Scrollbar styling */
-.dropdown-menu {
-  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
-  scrollbar-width: thin;
-}
-
-::slotted(*) {
-  height: 100%;
-  box-sizing: border-box;
-}
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+}
+
+.dropdown-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kritzel-dropdown-border-color, #ebebeb);
+  border-radius: var(--kritzel-dropdown-border-radius, 6px);
+  overflow: visible;
+  height: 38px;
+  width: 100%;
+  position: relative;
+}
+
+.dropdown-wrapper:hover:not(:focus-within) {
+  border-color: var(--kritzel-dropdown-hover-border-color, #cccccc);
+}
+
+.dropdown-container {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--kritzel-dropdown-border-radius, 6px);
+  border: none;
+  background-color: var(--kritzel-dropdown-background, #ffffff);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  outline: none;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--kritzel-dropdown-text-color, #333333);
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+}
+
+.dropdown-trigger:focus-visible {
+  outline: revert;
+}
+
+.dropdown-trigger.has-suffix-border {
+  border-right: 1px solid var(--kritzel-global-border-color, #ebebeb);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.dropdown-trigger.has-prefix-border {
+  border-left: 1px solid var(--kritzel-global-border-color, #ebebeb);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dropdown-trigger-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.dropdown-trigger-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-trigger-arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-trigger.is-open .dropdown-trigger-arrow {
+  transform: rotate(180deg);
+}
+
+.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow {
+  transform: rotate(0deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background-color: var(--kritzel-dropdown-background, #ffffff);
+  border: 1px solid var(--kritzel-global-border-color, #ebebeb);
+  border-radius: var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));
+  box-shadow: var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  z-index: 1000;
+  max-height: 240px;
+  overflow-y: auto;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0.15s;
+  outline: none;
+}
+
+/* Open downward (default) */
+.dropdown-menu.open-down {
+  top: calc(100% + 4px);
+  bottom: auto;
+  transform: translateY(-8px);
+}
+
+/* Open upward */
+.dropdown-menu.open-up {
+  bottom: calc(100% + 4px);
+  top: auto;
+  transform: translateY(8px);
+}
+
+.dropdown-menu.is-open {
+  opacity: 1;
+  visibility: inherit;
+  transform: translateY(0);
+}
+
+/* Adjust box shadow for upward opening */
+.dropdown-menu.open-up {
+  box-shadow: var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15));
+}
+
+.dropdown-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-dropdown-text-color, #333333);
+  transition: background-color 0.1s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dropdown-option.is-focused {
+  background-color: var(--kritzel-dropdown-hover-background-color, #f0f0f0);
+}
+
+.dropdown-option.is-selected {
+  font-weight: 600;
+  background-color: var(--kritzel-dropdown-selected-background-color, #007bff1a);
+}
+
+.dropdown-option-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--kritzel-dropdown-accent-color, #007bff);
+}
+
+.dropdown-option-check svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Scrollbar styling */
+.dropdown-menu {
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+}
+
+::slotted(*) {
+  height: 100%;
+  box-sizing: border-box;
+}

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

@@ -231,7 +231,7 @@ export class KritzelDropdown {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (h(Host, { key: '66ec6cbffa9fd25a7bad62d6e3477c0fe7726861' }, h("div", { key: '6dc1f20070dde95ab54f44d158659e99bd81b834', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'd9655fc7f5e6a0d74b4a1904a12cc0bf478ccf4e', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '325af053df9588e99b493c422a1f369f0af2243a', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '626d54cd8e01221b1cd61e61b9d53b534e7603db', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'bbc3ec7297ee98c1903cfd547ca20daf3a5f1311', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '591b71aec72d2e6eaa96e8eb4c91b1f34eb2177a', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '317034d40ceab9ca72090f6a58fc0fa5b92f2db0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '98867959ff1d7fd5515a3fe400bdc2378013dcb9', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'f9d2f73f7b233a30f57ba4a9209e1a32a8ee5e70', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f15048910c0d24855fb1e940d2adc994dee83d06', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index === this.focusedIndex;
             const optionClasses = {
@@ -265,7 +265,7 @@ export class KritzelDropdown {
                     "references": {
                         "DropdownOption": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx",
+                            "path": "/home/runner/work/kritzel/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx",
                             "id": "src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx::DropdownOption"
                         }
                     }

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

@@ -1,10 +1,10 @@
-:host {
-  display: block;
-}
-
-.font-preview {
-  color: var(--kritzel-font-size-text-color, #333333);
-  line-height: 1;
-  text-align: center;
-  font-weight: bold;
-}
+:host {
+  display: block;
+}
+
+.font-preview {
+  color: var(--kritzel-font-size-text-color, #333333);
+  line-height: 1;
+  text-align: center;
+  font-weight: bold;
+}

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

@@ -4,7 +4,7 @@ export class KritzelFont {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '8e4cf962a3456fb293faa678725e0c86af08bf49' }, h("div", { key: 'acf6986196dffd5c00b7edefa9453259149bf3cf', class: "font-preview", style: {
+        return (h(Host, { key: '42f058426e2afcc49c788f2385e23a5ff153e77c' }, h("div", { key: '962dfc48ba84c5f5d2b98eb2464c69c04764ab0f', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css

@@ -1,48 +1,48 @@
-:host {
-  display: flex; 
-  align-items: flex-start; 
-  gap: 8px; 
-  padding: 0; 
-  box-sizing: border-box; 
-  width: 100%;
-}
-
-.font-style-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 42px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border-radius: 0; 
-  color: var(--control-text-color);
-  font-weight: bold;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.font-style-button:not(:last-child) {
-  border-right: 1px solid #333333; 
-}
-
-.font-style-button:hover {
-  background-color: var(--control-hover-bg);
-}
-
-.font-style-button:active {
-  background-color: var(--control-active-bg);
-}
-
-.font-style-button.selected,
-.font-style-button.selected:hover,
-.font-style-button.selected:active {
-  background-color: var(--control-selected-bg);
-  color: var(--control-selected-color);
-}
-
-.font-style-button.italic-text {
-  font-style: italic;
-}
+:host {
+  display: flex; 
+  align-items: flex-start; 
+  gap: 8px; 
+  padding: 0; 
+  box-sizing: border-box; 
+  width: 100%;
+}
+
+.font-style-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 0; 
+  color: var(--control-text-color);
+  font-weight: bold;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.font-style-button:not(:last-child) {
+  border-right: 1px solid #333333; 
+}
+
+.font-style-button:hover {
+  background-color: var(--control-hover-bg);
+}
+
+.font-style-button:active {
+  background-color: var(--control-active-bg);
+}
+
+.font-style-button.selected,
+.font-style-button.selected:hover,
+.font-style-button.selected:active {
+  background-color: var(--control-selected-bg);
+  color: var(--control-selected-color);
+}
+
+.font-style-button.italic-text {
+  font-style: italic;
+}

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js

@@ -34,7 +34,7 @@ export class KritzelFontFamily {
             label: option.label,
             style: { fontFamily: option.cssFontFamily ?? option.value },
         }));
-        return (h(Host, { key: '42b2805b1d2df47a1b2336dffac32ee50740809e' }, h("kritzel-dropdown", { key: '3e1f019b2ecacea061f687c93f4fdd6a384b93b7', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
+        return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
     }
     static get is() { return "kritzel-font-family"; }
     static get encapsulation() { return "shadow"; }
@@ -59,7 +59,7 @@ export class KritzelFontFamily {
                     "references": {
                         "FontOption": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-font-family/kritzel-font-family.tsx",
+                            "path": "/home/runner/work/kritzel/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-font-family/kritzel-font-family.tsx",
                             "id": "src/components/shared/kritzel-font-family/kritzel-font-family.tsx::FontOption"
                         }
                     }

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css

@@ -1,30 +1,30 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.size-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  border-radius: 50%;
-}
-
-.size-container:hover {
-  background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);
-}
-
-.size-container.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
-}
-
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.size-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+
+.size-container:hover {
+  background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);
+}
+
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
+}
+

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js

@@ -17,7 +17,7 @@ export class KritzelFontSize {
     render() {
         const color = 'var(--kritzel-global-text-primary)';
         const sizes = this.sizes ?? [];
-        return (h(Host, { key: '18f23b3d58c708a2f385ec539b6a2f02fc33c12a' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '9d6592f049c25e9dfa2f6f3a270feb2440aa7f35' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));

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

@@ -1,18 +1,18 @@
-:host {
-  display: inline-flex; /* Changed from block to inline-flex for better alignment */
-  justify-content: center; /* Center content horizontally */
-  align-items: center; /* Center content vertically */
-  color: var(--kritzel-icon-color, inherited);
-}
-
-span {
-  display: flex;
-  align-items: center;
-  width: 100%; /* Make span fill host width */
-  height: 100%; /* Make span fill host height */
-}
-
-span > svg { /* Ensure SVG scales within the span */
-  width: 100%;
-  height: 100%;
-}
+:host {
+  display: inline-flex; /* Changed from block to inline-flex for better alignment */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  color: var(--kritzel-icon-color, inherited);
+}
+
+span {
+  display: flex;
+  align-items: center;
+  width: 100%; /* Make span fill host width */
+  height: 100%; /* Make span fill host height */
+}
+
+span > svg { /* Ensure SVG scales within the span */
+  width: 100%;
+  height: 100%;
+}