kritzel-stencil 0.1.83 → 0.1.86

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: 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: 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: 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: 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: 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: 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: 'b753a3cf28a0f21625c213c9ec5337b922023206' }, h("div", { key: 'dffe30b1d6968ad612c94718eea72f118c43f378', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '0a08fa5aa5a2040e85ac80643d11ec778ed89b31', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '8a8b4519787863d53fa7c72928e7632de6daa848', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '803fe1e4ef138a58cde8941771875dd5eadfe944', 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: '05d9dfe94e62134c91316f33cf64f2a9efb57fbb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '332d5206a67ae8ef4ce0982d62c108210bca6252', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: 'f73539b0decf59fd59d075618dc5028ac82d11b5', 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: '7b45a14ab898233a68845a40363ee37c9922098c', points: "6 9 12 15 18 9" }))))), h("slot", { key: '8936739a53b5dca8debdce27c4bead487a5bf803', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f20417649f8988e46db5992100d93fd7bd827b96', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: 'ac4dc8a445f79fa68555756a4ac26ba174a13eaa' }, h("div", { key: '1c73835be42e6a289657920ef33c2a53c183913d', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'ac73d76b5e24e2f2740113523524bc00d1c98d02', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'e1e71c68a8abb2cf0dc2b9314e05d1170c0bb5b3', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '74588e1ff661f8f86318a2ed9bb53192ad96bacd', 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: '432f694526e20e1e6abb6721f12aa246471d830d', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '81f7d98f78201910f4427a7c442172d0283de45b', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '18db309dc145718fbb3d51e44058e3bfa96b0d27', 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: '32af6ce9a1f045c2ce3b205b1b1dc1fe1a80e227', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b37cd43daa06424ea7b7951929352154f7d1ea0f', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0e673d4e09e007a4c93ed6a992dddeb8eba33e91', 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: '3d5fd9aecf7abc96c438b890f5831281d6194922' }, h("div", { key: '2b3df82e475177e803f172f440ffcee97dbe5aa5', class: "font-preview", style: {
+        return (h(Host, { key: 'bcff1827a61df6896e49fe1df4819bf27b3610ef' }, h("div", { key: '53a03532afde5fca6e8ec1cc78e6cd41ab1444cd', 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

@@ -31,7 +31,7 @@ export class KritzelFontFamily {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '914739658f9d11eab9ff5f9bf674395cc7395804' }, h("kritzel-dropdown", { key: '8f8ec602c96f97680a614e21c088dd650e840919', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
+        return (h(Host, { key: '3d942116fc1019f1b2982395a08b14a9b0081040' }, h("kritzel-dropdown", { key: 'a042505de2d9b27c6f77ed929496a3921c3170cd', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
     }
     static get is() { return "kritzel-font-family"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +56,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"
                         }
                     }
@@ -69,7 +69,7 @@ export class KritzelFontFamily {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ]"
+                "defaultValue": "[\n    { value: 'arial', label: 'Arial' },\n    { value: 'verdana', label: 'Verdana' },\n    { value: 'helvetica', label: 'Helvetica' },\n    { value: 'tahoma', label: 'Tahoma' },\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\n    { value: 'times new roman', label: 'Times New Roman' },\n    { value: 'georgia', label: 'Georgia' },\n    { value: 'garamond', label: 'Garamond' },\n    { value: 'courier new', label: 'Courier New' },\n    { value: 'brush script mt', label: 'Brush Script MT' },\n  ]"
             },
             "selectedFontFamily": {
                 "type": "string",

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

@@ -16,7 +16,7 @@ export class KritzelFontSize {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (h(Host, { key: '32615ac4756efd047219b93642f7b5cc7d80669b' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'c409d73ff06966fd3861a16c7de32d41db85c12a' }, this.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%;
+}