From 48c729ecfc58d265e398ccfe54edd0853d49f16e Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Tue, 30 Jan 2024 15:05:02 +0100
Subject: [PATCH] fix: solve build errors

---
 .../website/src/components/utils/Controls.tsx | 49 +++++++++----------
 .../src/routes/examples/SfCheckbox/index.tsx  |  4 +-
 .../src/routes/examples/SfInput/index.tsx     |  4 +-
 .../src/routes/examples/SfRadio/index.tsx     |  4 +-
 .../src/routes/examples/SfSwitch/index.tsx    |  5 +-
 .../routes/showcases/Banners/Hero/index.tsx   |  2 +-
 .../showcases/Drawer/Placement/index.tsx      |  5 +-
 .../routes/showcases/Filters/Color/index.tsx  |  4 +-
 .../showcases/Filters/FiltersPanel/index.tsx  |  4 +-
 .../showcases/Input/InputCharacters/index.tsx |  4 +-
 .../showcases/Input/InputReadonly/index.tsx   |  4 +-
 .../Input/InputWithoutLabel/index.tsx         |  2 +-
 .../showcases/MegaMenu/BaseMegaMenu/index.tsx |  2 +-
 .../showcases/NavbarTop/NavbarTop/index.tsx   |  2 +-
 .../NavbarTop/NavbarTopFilled/index.tsx       |  2 +-
 .../NewsletterBox/NewsletterBox/index.tsx     |  4 +-
 .../OrderSummary/OrderSummary/index.tsx       |  4 +-
 .../ProgressCircularFloatingLabel/index.tsx   | 12 ++---
 .../showcases/Radio/RadioLeading/index.tsx    |  4 +-
 .../showcases/Radio/RadioTrailing/index.tsx   |  4 +-
 .../Radio/RadioWithoutLabel/index.tsx         |  4 +-
 .../showcases/Switch/SwitchLeading/index.tsx  |  4 +-
 .../showcases/Switch/SwitchTrailing/index.tsx |  4 +-
 .../Switch/SwitchWithoutLabel/index.tsx       |  4 +-
 apps/website/vite.config.ts                   | 12 +----
 .../src/components/SfIcons/SfIconCancel.tsx   |  4 +-
 .../SfIcons/SfIconCheckBoxOutlineBlank.tsx    |  4 +-
 .../src/components/SfIcons/SfIconCloseSm.tsx  |  4 +-
 .../src/components/SfIcons/SfIconError.tsx    |  4 +-
 .../src/components/SfIcons/SfIconFavorite.tsx |  4 +-
 .../SfIcons/SfIconIndeterminateCheckBox.tsx   |  4 +-
 .../src/components/SfIcons/SfIconInfo.tsx     |  4 +-
 .../src/components/SfIcons/SfIconLanguage.tsx |  4 +-
 .../components/SfIcons/SfIconLocationOn.tsx   |  4 +-
 .../SfIcons/SfIconLocationOnFilled.tsx        |  4 +-
 .../src/components/SfIcons/SfIconWarning.tsx  |  4 +-
 .../src/components/SfInput/SfInput.tsx        |  2 -
 .../src/components/SfInput/types.ts           | 14 ++----
 .../src/components/SfModal/types.ts           |  4 +-
 .../src/components/SfRadio/types.ts           | 11 ++---
 .../src/components/SfSelect/types.ts          |  1 +
 .../src/components/SfSwitch/types.ts          | 11 ++---
 packages/qwik-storefront-ui/vite.config.ts    | 11 -----
 43 files changed, 104 insertions(+), 147 deletions(-)

diff --git a/apps/website/src/components/utils/Controls.tsx b/apps/website/src/components/utils/Controls.tsx
index c1c8d08..3693d53 100644
--- a/apps/website/src/components/utils/Controls.tsx
+++ b/apps/website/src/components/utils/Controls.tsx
@@ -1,10 +1,4 @@
-import {
-  $,
-  QwikChangeEvent,
-  component$,
-  useContext,
-  useSignal,
-} from '@builder.io/qwik';
+import { $, component$, useContext, useSignal } from '@builder.io/qwik';
 import {
   SfButton,
   SfButtonSize,
@@ -26,22 +20,20 @@ export const Controls = component$<any>(() => {
     };
   });
 
-  const handleJsonOnChangeValue = $(
-    (e: QwikChangeEvent<HTMLTextAreaElement>, name: string) => {
-      examplesState.data.state = {
-        ...examplesState.data.state,
-        [name]: JSON.parse(e.target.value),
-      };
-    }
-  );
+  const handleJsonOnChangeValue = $((el: HTMLTextAreaElement, name: string) => {
+    examplesState.data.state = {
+      ...examplesState.data.state,
+      [name]: JSON.parse(el.value),
+    };
+  });
 
   const handleCheckbox = $(
     (
-      e: QwikChangeEvent<HTMLInputElement>,
+      el: HTMLInputElement,
       name: string,
       currentValue: string | boolean | []
     ) => {
-      const { value } = e.target;
+      const { value } = el;
       if (Array.isArray(currentValue)) {
         const newValue: string[] = [...currentValue];
         const valueItemIndex = newValue.indexOf(value);
@@ -161,11 +153,8 @@ export const Controls = component$<any>(() => {
                       <select
                         value={examplesState.data.state[control.modelName]}
                         aria-labelledby={control.modelName}
-                        onChange$={(e) => {
-                          handleOnChangeValue(
-                            control.modelName,
-                            e.target.value
-                          );
+                        onChange$={(_: Event, el: HTMLSelectElement) => {
+                          handleOnChangeValue(control.modelName, el.value);
                         }}
                       >
                         {(
@@ -224,9 +213,12 @@ export const Controls = component$<any>(() => {
                                           2
                                         ) as string
                                       }
-                                      onChange$={(e) => {
+                                      onChange$={(
+                                        _: Event,
+                                        el: HTMLTextAreaElement
+                                      ) => {
                                         handleJsonOnChangeValue(
-                                          e,
+                                          el,
                                           control.modelName
                                         );
                                       }}
@@ -266,10 +258,13 @@ export const Controls = component$<any>(() => {
                                       value={checkboxValue(option)}
                                       type={control.type}
                                       aria-labelledby={control.modelName}
-                                      onChange$={(e) => {
+                                      onChange$={(
+                                        _: Event,
+                                        el: HTMLInputElement
+                                      ) => {
                                         control.type === 'checkbox'
                                           ? handleCheckbox(
-                                              e,
+                                              el,
                                               control.modelName,
                                               examplesState.data.state[
                                                 control.modelName
@@ -277,7 +272,7 @@ export const Controls = component$<any>(() => {
                                             )
                                           : handleOnChangeValue(
                                               control.modelName,
-                                              e.target.value
+                                              el.value
                                             );
                                       }}
                                       name={`${control.modelName}-${index}`}
diff --git a/apps/website/src/routes/examples/SfCheckbox/index.tsx b/apps/website/src/routes/examples/SfCheckbox/index.tsx
index 8e0093c..685fec4 100644
--- a/apps/website/src/routes/examples/SfCheckbox/index.tsx
+++ b/apps/website/src/routes/examples/SfCheckbox/index.tsx
@@ -79,8 +79,8 @@ export default component$(() => {
         );
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
+  const onChange = $((_: Event, el: HTMLInputElement) => {
+    const { value } = el;
     examplesState.data.state =
       examplesState.data.state.checkedValue.indexOf(value) > -1
         ? {
diff --git a/apps/website/src/routes/examples/SfInput/index.tsx b/apps/website/src/routes/examples/SfInput/index.tsx
index 5249d91..0ab1b18 100644
--- a/apps/website/src/routes/examples/SfInput/index.tsx
+++ b/apps/website/src/routes/examples/SfInput/index.tsx
@@ -96,10 +96,10 @@ export default component$(() => {
     };
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
+  const onChange = $((_: Event, el: HTMLInputElement) => {
     examplesState.data.state = {
       ...examplesState.data.state,
-      value: event.target.value,
+      value: el.value,
     };
   });
   const isAboveLimit = examplesState.data.state.characterLimit
diff --git a/apps/website/src/routes/examples/SfRadio/index.tsx b/apps/website/src/routes/examples/SfRadio/index.tsx
index df5e137..c384ff1 100644
--- a/apps/website/src/routes/examples/SfRadio/index.tsx
+++ b/apps/website/src/routes/examples/SfRadio/index.tsx
@@ -81,8 +81,8 @@ export default component$(() => {
               checked={examplesState.data.state.checked === value}
               disabled={examplesState.data.state.disabled}
               invalid={examplesState.data.state.invalid}
-              onChange$={(event) => {
-                onChangeHandler(event.target.value);
+              onChange$={(_: Event, el: HTMLInputElement) => {
+                onChangeHandler(el.value);
               }}
             />
             <span class="ml-2 text-base font-normal leading-6 font-body">
diff --git a/apps/website/src/routes/examples/SfSwitch/index.tsx b/apps/website/src/routes/examples/SfSwitch/index.tsx
index b975ae0..3db9503 100644
--- a/apps/website/src/routes/examples/SfSwitch/index.tsx
+++ b/apps/website/src/routes/examples/SfSwitch/index.tsx
@@ -1,5 +1,6 @@
 import {
   $,
+  InputHTMLAttributes,
   QwikChangeEvent,
   component$,
   useContext,
@@ -49,8 +50,8 @@ export default component$(() => {
     };
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
+  const onChange = $((_: Event, el: HTMLInputElement) => {
+    const { checked } = el;
     examplesState.data.state = { ...examplesState.data.state, checked };
   });
 
diff --git a/apps/website/src/routes/showcases/Banners/Hero/index.tsx b/apps/website/src/routes/showcases/Banners/Hero/index.tsx
index 6d3155a..4c87a90 100644
--- a/apps/website/src/routes/showcases/Banners/Hero/index.tsx
+++ b/apps/website/src/routes/showcases/Banners/Hero/index.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <div class="relative min-h-[600px]">
       <picture>
-        <source srcSet={desktopBackground} media="(min-width: 768px)" />
+        <source src-set={desktopBackground} media="(min-width: 768px)" />
         <img
           src={mobileBackground}
           class="absolute w-full h-full z-[-1] md:object-cover"
diff --git a/apps/website/src/routes/showcases/Drawer/Placement/index.tsx b/apps/website/src/routes/showcases/Drawer/Placement/index.tsx
index 9c0b575..81547b0 100644
--- a/apps/website/src/routes/showcases/Drawer/Placement/index.tsx
+++ b/apps/website/src/routes/showcases/Drawer/Placement/index.tsx
@@ -1,4 +1,3 @@
-import type { QwikChangeEvent } from '@builder.io/qwik';
 import { $, component$, useSignal } from '@builder.io/qwik';
 import type { SfDrawerProps } from 'qwik-storefront-ui';
 import { SfButton, SfDrawer, SfDrawerPlacement } from 'qwik-storefront-ui';
@@ -9,8 +8,8 @@ export default component$(() => {
     SfDrawerPlacement.left
   );
 
-  const changePlacement = $((event: QwikChangeEvent<HTMLSelectElement>) => {
-    placementSignal.value = event.target.value as SfDrawerProps['placement'];
+  const changePlacement = $((_: Event, el: HTMLSelectElement) => {
+    placementSignal.value = el.value as SfDrawerProps['placement'];
   });
 
   return (
diff --git a/apps/website/src/routes/showcases/Filters/Color/index.tsx b/apps/website/src/routes/showcases/Filters/Color/index.tsx
index abf15e0..0f29121 100644
--- a/apps/website/src/routes/showcases/Filters/Color/index.tsx
+++ b/apps/website/src/routes/showcases/Filters/Color/index.tsx
@@ -89,8 +89,8 @@ export default component$(() => {
                   checked={colorListSignal.value.includes(value)}
                   class="appearance-none peer"
                   type="checkbox"
-                  onChange$={(event) => {
-                    handleColorSelection(event.target.value);
+                  onChange$={(_, el) => {
+                    handleColorSelection(el.value);
                   }}
                 />
                 <span class="inline-flex items-center justify-center p-1 transition duration-300 rounded-full cursor-pointer ring-1 ring-neutral-200 ring-inset outline-offset-2 outline-secondary-600 peer-checked:ring-2 peer-checked:ring-primary-700 peer-hover:bg-primary-100 peer-hover:ring-primary-200 peer-active:bg-primary-200 peer-active:ring-primary-300 peer-disabled:cursor-not-allowed peer-disabled:bg-disabled-100 peer-disabled:opacity-50 peer-disabled:ring-1 peer-disabled:ring-disabled-200 peer-disabled:hover:ring-disabled-200 peer-checked:hover:ring-primary-700 peer-checked:active:ring-primary-700 peer-focus:outline">
diff --git a/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx b/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx
index 41925ac..d8c4527 100644
--- a/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx
+++ b/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx
@@ -302,8 +302,8 @@ export default component$(() => {
                         value={value}
                         name="radio-price"
                         checked={selectedFiltersSignal.value.includes(value)}
-                        onChange$={(event) => {
-                          handleRadioSelection(event.target.value);
+                        onChange$={(_: Event, el: HTMLInputElement) => {
+                          handleRadioSelection(el.value);
                         }}
                       />
                     </div>
diff --git a/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx b/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx
index d80bedb..648dfdf 100644
--- a/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx
+++ b/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx
@@ -48,8 +48,8 @@ export default component$(() => {
               : ''
           }`}
           value={valueSignal.value}
-          onChange$={(event) => {
-            valueSignal.value = event.target.value;
+          onChange$={(_: Event, el: HTMLInputElement) => {
+            valueSignal.value = el.value;
           }}
         />
       </label>
diff --git a/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx b/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx
index 6f745ca..b3f6a42 100644
--- a/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx
+++ b/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
         <span class="text-sm font-medium">Label</span>
         <SfInput
           value={valueSignal.value}
-          onChange$={(event) => {
-            valueSignal.value = event.target.value;
+          onChange$={(_: Event, el: HTMLInputElement) => {
+            valueSignal.value = el.value;
           }}
           wrapperClass="!bg-disabled-100 !ring-disabled-300 !ring-1"
           readOnly
diff --git a/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx
index 2f24b57..997f0c5 100644
--- a/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx
+++ b/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx
@@ -6,7 +6,7 @@ export default component$(() => {
     <div class="flex flex-col gap-y-5">
       <SfInput size="sm" aria-label="Label size sm" />
       <SfInput aria-label="Label size base" />
-      <SfInput size="lg" aria-label="Label size lg" />
+      <SfInput size={'lg'} aria-label="Label size lg" />
     </div>
   );
 });
diff --git a/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx b/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx
index de7556a..fbf14d0 100644
--- a/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx
+++ b/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx
@@ -145,7 +145,7 @@ export default component$(() => {
           >
             <picture>
               <source
-                srcSet={'/images/vsf_logo_white.svg'}
+                src-set={'/images/vsf_logo_white.svg'}
                 media="(min-width: 767px)"
               />
               <img
diff --git a/apps/website/src/routes/showcases/NavbarTop/NavbarTop/index.tsx b/apps/website/src/routes/showcases/NavbarTop/NavbarTop/index.tsx
index 6a20b3b..5ad1e1c 100644
--- a/apps/website/src/routes/showcases/NavbarTop/NavbarTop/index.tsx
+++ b/apps/website/src/routes/showcases/NavbarTop/NavbarTop/index.tsx
@@ -40,7 +40,7 @@ export default component$(() => {
           >
             <picture>
               <source
-                srcSet={'/images/vsf_logo.svg'}
+                src-set={'/images/vsf_logo.svg'}
                 media="(min-width: 767px)"
               />
               <img
diff --git a/apps/website/src/routes/showcases/NavbarTop/NavbarTopFilled/index.tsx b/apps/website/src/routes/showcases/NavbarTop/NavbarTopFilled/index.tsx
index 7d1fa99..b3df508 100644
--- a/apps/website/src/routes/showcases/NavbarTop/NavbarTopFilled/index.tsx
+++ b/apps/website/src/routes/showcases/NavbarTop/NavbarTopFilled/index.tsx
@@ -36,7 +36,7 @@ export default component$(() => {
           <a href="/" aria-label="SF Homepage" class="inline-block text-white">
             <picture>
               <source
-                srcSet={'/images/vsf_logo_white.svg'}
+                src-set={'/images/vsf_logo_white.svg'}
                 media="(min-width: 767px)"
               />
               <img
diff --git a/apps/website/src/routes/showcases/NewsletterBox/NewsletterBox/index.tsx b/apps/website/src/routes/showcases/NewsletterBox/NewsletterBox/index.tsx
index 1a4c588..c4213b9 100644
--- a/apps/website/src/routes/showcases/NewsletterBox/NewsletterBox/index.tsx
+++ b/apps/website/src/routes/showcases/NewsletterBox/NewsletterBox/index.tsx
@@ -52,8 +52,8 @@ export default component$(() => {
             type="email"
             wrapperClass="grow"
             placeholder="Type your email"
-            onChange$={(event) => {
-              inputValueSignal.value = event.target.value;
+            onChange$={(_: Event, el: HTMLInputElement) => {
+              inputValueSignal.value = el.value;
             }}
           />
           <SfButton type="submit" size="lg">
diff --git a/apps/website/src/routes/showcases/OrderSummary/OrderSummary/index.tsx b/apps/website/src/routes/showcases/OrderSummary/OrderSummary/index.tsx
index 297f826..8a66b72 100644
--- a/apps/website/src/routes/showcases/OrderSummary/OrderSummary/index.tsx
+++ b/apps/website/src/routes/showcases/OrderSummary/OrderSummary/index.tsx
@@ -91,8 +91,8 @@ export default component$(() => {
             value={inputValueSignal.value}
             placeholder="Enter promo code"
             wrapperClass="grow"
-            onChange$={(event) => {
-              inputValueSignal.value = event.target.value;
+            onChange$={(_: Event, el: HTMLInputElement) => {
+              inputValueSignal.value = el.value;
             }}
           />
           <SfButton variant="secondary" onClick$={checkPromoCode}>
diff --git a/apps/website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx b/apps/website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx
index cc3a012..9694e5e 100644
--- a/apps/website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx
+++ b/apps/website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
       <SfProgressCircular size="2xl" value={value}>
         <text
           class="font-medium"
-          textAnchor="middle"
-          alignmentBaseline="central"
+          text-anchor="middle"
+          alignment-baseline="central"
           x="100%"
           y="100%"
         >
@@ -20,8 +20,8 @@ export default component$(() => {
       <SfProgressCircular size="3xl" value={value}>
         <text
           class="font-medium fill-neutral-400"
-          textAnchor="middle"
-          alignmentBaseline="central"
+          text-anchor="middle"
+          alignment-baseline="central"
           x="100%"
           y="100%"
         >
@@ -31,8 +31,8 @@ export default component$(() => {
       <SfProgressCircular size="3xl" value={value}>
         <text
           class="font-medium text-2xs"
-          textAnchor="middle"
-          alignmentBaseline="central"
+          text-anchor="middle"
+          alignment-baseline="central"
           x="100%"
           y="100%"
         >
diff --git a/apps/website/src/routes/showcases/Radio/RadioLeading/index.tsx b/apps/website/src/routes/showcases/Radio/RadioLeading/index.tsx
index 030227f..c1a7fad 100644
--- a/apps/website/src/routes/showcases/Radio/RadioLeading/index.tsx
+++ b/apps/website/src/routes/showcases/Radio/RadioLeading/index.tsx
@@ -25,8 +25,8 @@ export default component$(() => {
               name={name}
               value={value}
               checked={checkedStateSignal.value === value}
-              onChange$={(event) => {
-                checkedStateSignal.value = event.target.value;
+              onChange$={(_, el) => {
+                checkedStateSignal.value = el.value;
               }}
             />
             <span class="ml-2 text-base font-normal leading-6 font-body">
diff --git a/apps/website/src/routes/showcases/Radio/RadioTrailing/index.tsx b/apps/website/src/routes/showcases/Radio/RadioTrailing/index.tsx
index 8a9de40..e99067f 100644
--- a/apps/website/src/routes/showcases/Radio/RadioTrailing/index.tsx
+++ b/apps/website/src/routes/showcases/Radio/RadioTrailing/index.tsx
@@ -27,8 +27,8 @@ export default component$(() => {
               name={name}
               value={value}
               checked={checkedStateSignal.value === value}
-              onChange$={(event) => {
-                checkedStateSignal.value = event.target.value;
+              onChange$={(_, el) => {
+                checkedStateSignal.value = el.value;
               }}
             />
             <span class="ml-2 text-base font-normal leading-5 font-body">
diff --git a/apps/website/src/routes/showcases/Radio/RadioWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Radio/RadioWithoutLabel/index.tsx
index 1c3e1d0..ee6fa82 100644
--- a/apps/website/src/routes/showcases/Radio/RadioWithoutLabel/index.tsx
+++ b/apps/website/src/routes/showcases/Radio/RadioWithoutLabel/index.tsx
@@ -22,8 +22,8 @@ export default component$(() => {
           value={value}
           class="block mb-4"
           checked={checkedStateSignal.value === value}
-          onChange$={(event) => {
-            checkedStateSignal.value = event.target.value;
+          onChange$={(_, el) => {
+            checkedStateSignal.value = el.value;
           }}
         />
       ))}
diff --git a/apps/website/src/routes/showcases/Switch/SwitchLeading/index.tsx b/apps/website/src/routes/showcases/Switch/SwitchLeading/index.tsx
index 9217aca..41fe383 100644
--- a/apps/website/src/routes/showcases/Switch/SwitchLeading/index.tsx
+++ b/apps/website/src/routes/showcases/Switch/SwitchLeading/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
         <SfSwitch
           checked={checkedStateSignal.value}
           value="value-1"
-          onChange$={(event) => {
-            checkedStateSignal.value = event.target.checked;
+          onChange$={(_, el) => {
+            checkedStateSignal.value = el.checked;
           }}
         />
         <span class="text-base ml-[10px] text-gray-900 cursor-pointer font-body">
diff --git a/apps/website/src/routes/showcases/Switch/SwitchTrailing/index.tsx b/apps/website/src/routes/showcases/Switch/SwitchTrailing/index.tsx
index 6d95360..bce6fa6 100644
--- a/apps/website/src/routes/showcases/Switch/SwitchTrailing/index.tsx
+++ b/apps/website/src/routes/showcases/Switch/SwitchTrailing/index.tsx
@@ -12,8 +12,8 @@ export default component$(() => {
         <SfSwitch
           checked={checkedStateSignal.value}
           value="value-1"
-          onChange$={(event) => {
-            checkedStateSignal.value = event.target.checked;
+          onChange$={(_, el) => {
+            checkedStateSignal.value = el.checked;
           }}
         />
       </label>
diff --git a/apps/website/src/routes/showcases/Switch/SwitchWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Switch/SwitchWithoutLabel/index.tsx
index dae7f0b..cd47c74 100644
--- a/apps/website/src/routes/showcases/Switch/SwitchWithoutLabel/index.tsx
+++ b/apps/website/src/routes/showcases/Switch/SwitchWithoutLabel/index.tsx
@@ -7,8 +7,8 @@ export default component$(() => {
     <SfSwitch
       checked={checkedStateSignal.value}
       value="value-1"
-      onChange$={(event) => {
-        checkedStateSignal.value = event.target.checked;
+      onChange$={(_, el) => {
+        checkedStateSignal.value = el.checked;
       }}
     />
   );
diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts
index 42c3597..c6b28c2 100644
--- a/apps/website/vite.config.ts
+++ b/apps/website/vite.config.ts
@@ -1,8 +1,8 @@
-import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { qwikNxVite } from 'qwik-nx/plugins';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { qwikNxVite } from 'qwik-nx/plugins';
 
 export default defineConfig({
   plugins: [
@@ -29,12 +29,4 @@ export default defineConfig({
       'Cache-Control': 'public, max-age=600',
     },
   },
-  test: {
-    globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
-    environment: 'node',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-  },
 });
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCancel.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCancel.tsx
index eaabc2e..442a8f2 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCancel.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCancel.tsx
@@ -16,8 +16,8 @@ export const SfIconCancel = component$<SfIconBaseProps>(
         data-testid="cancel"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M2 12C2 6.47 6.47 2 12 2s10 4.47 10 10-4.47 10-10 10S2 17.53 2 12Zm14.295 4.295a.997.997 0 0 0 0-1.41L13.41 12l2.885-2.885a.997.997 0 1 0-1.41-1.41L12 10.59 9.115 7.705a.997.997 0 0 0-1.41 1.41L10.59 12l-2.885 2.885a.997.997 0 0 0 1.41 1.41L12 13.41l2.885 2.885c.39.39 1.02.39 1.41 0Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCheckBoxOutlineBlank.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCheckBoxOutlineBlank.tsx
index 0e2b083..651ff3b 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCheckBoxOutlineBlank.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCheckBoxOutlineBlank.tsx
@@ -16,8 +16,8 @@ export const SfIconCheckBoxOutlineBlank = component$<SfIconBaseProps>(
         data-testid="check-box-outline-blank"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm16 .5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-13Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCloseSm.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCloseSm.tsx
index a0cd044..9b2c696 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCloseSm.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconCloseSm.tsx
@@ -16,8 +16,8 @@ export const SfIconCloseSm = component$<SfIconBaseProps>(
         data-testid="close-sm"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M16.615 8.564a.974.974 0 0 0-1.378-1.378L11.9 10.522 8.563 7.186a.974.974 0 1 0-1.378 1.378l3.337 3.336-3.337 3.337a.974.974 0 1 0 1.378 1.378l3.337-3.337 3.336 3.337a.974.974 0 1 0 1.379-1.378L13.278 11.9l3.337-3.336Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconError.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconError.tsx
index 8b60791..33194ee 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconError.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconError.tsx
@@ -16,8 +16,8 @@ export const SfIconError = component$<SfIconBaseProps>(
         data-testid="error"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M22 12c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2s10 4.48 10 10ZM12 7a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm0 7.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconFavorite.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconFavorite.tsx
index ffe8708..2b39bc4 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconFavorite.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconFavorite.tsx
@@ -16,8 +16,8 @@ export const SfIconFavorite = component$<SfIconBaseProps>(
         data-testid="favorite"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M19.664 4.99c-2.64-1.8-5.9-.96-7.66 1.1-1.76-2.06-5.02-2.91-7.66-1.1-1.4.96-2.28 2.58-2.34 4.29-.14 3.88 3.3 6.99 8.55 11.76l.1.09c.76.69 1.93.69 2.69-.01l.11-.1c5.25-4.76 8.68-7.87 8.55-11.75-.06-1.7-.94-3.32-2.34-4.28Zm-7.56 14.56-.1.1-.1-.1c-4.76-4.31-7.9-7.16-7.9-10.05 0-2 1.5-3.5 3.5-3.5 1.54 0 3.04.99 3.57 2.36h1.87c.52-1.37 2.02-2.36 3.56-2.36 2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconIndeterminateCheckBox.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconIndeterminateCheckBox.tsx
index ab2be66..d64379c 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconIndeterminateCheckBox.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconIndeterminateCheckBox.tsx
@@ -16,8 +16,8 @@ export const SfIconIndeterminateCheckBox = component$<SfIconBaseProps>(
         data-testid="indeterminate-check-box"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm14 7a1 1 0 0 1-1 1H8a1 1 0 1 1 0-2h8a1 1 0 0 1 1 1Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconInfo.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconInfo.tsx
index d9b8359..cb9456e 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconInfo.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconInfo.tsx
@@ -18,8 +18,8 @@ export const SfIconInfo = component$<SfIconBaseProps>(
         <>
           <path d="M13.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM11 16a1 1 0 1 0 2 0v-4a1 1 0 1 0-2 0v4Z" />
           <path
-            fillRule="evenodd"
-            clipRule="evenodd"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
             d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12Zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8Z"
           />
         </>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLanguage.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLanguage.tsx
index 51c457b..1e75a4a 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLanguage.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLanguage.tsx
@@ -16,8 +16,8 @@ export const SfIconLanguage = component$<SfIconBaseProps>(
         data-testid="language"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M12.534 21.98a10.032 10.032 0 0 0 8.708-13.84 9.949 9.949 0 0 0-9.661-6.132 9.801 9.801 0 0 0-9.58 9.787 10.127 10.127 0 0 0 9.412 10.177c.095.02.192.025.289.016.085.004.17.006.257.008h.017c.124 0 .249-.002.373-.007.062.003.124 0 .185-.009ZM14.81 4.493a13.412 13.412 0 0 1 1.604 3.502h2.535a7.95 7.95 0 0 0-4.139-3.502Zm-2.805-.421c1.063 1.236 1.83 2.553 2.31 3.923h-4.62c.48-1.37 1.247-2.687 2.31-3.923Zm2.8 5.923h-5.6a10.848 10.848 0 0 0-.113 1.565c0 .881.105 1.782.319 2.696h5.188a11.82 11.82 0 0 0 .319-2.697c0-.526-.037-1.047-.112-1.564Zm-.84 6.261h-3.92a17.616 17.616 0 0 0 1.96 3.571 17.762 17.762 0 0 0 1.96-3.57Zm-6.6-2a13.71 13.71 0 0 1-.273-2.696c0-.526.032-1.048.095-1.565H4.213A7.798 7.798 0 0 0 4 11.801v.006a8.123 8.123 0 0 0 .358 2.45h3.005Zm-2.079 2H7.91c.38 1.101.893 2.199 1.532 3.285a8.125 8.125 0 0 1-4.156-3.285Zm10.813 0h2.66a8.03 8.03 0 0 1-4.21 3.315 18.231 18.231 0 0 0 1.55-3.315Zm3.569-2h-3.022c.18-.902.272-1.803.272-2.697 0-.526-.032-1.048-.095-1.564h2.935a7.97 7.97 0 0 1 .243 1.965v.002a8.03 8.03 0 0 1-.333 2.294ZM9.233 4.441a13.428 13.428 0 0 0-1.637 3.554H4.995a7.799 7.799 0 0 1 4.238-3.554ZM12 2h.003v.086l-.005-.002V2H12Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOn.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOn.tsx
index aaba326..ea0bfd6 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOn.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOn.tsx
@@ -18,8 +18,8 @@ export const SfIconLocationOn = component$<SfIconBaseProps>(
         <>
           <path d="M10 10c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2Z" />
           <path
-            fillRule="evenodd"
-            clipRule="evenodd"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
             d="M4 10.2c0 3.18 2.45 6.92 7.34 11.23.38.33.95.33 1.33 0C17.55 17.12 20 13.38 20 10.2 20 5.22 16.2 2 12 2s-8 3.22-8 8.2Zm2 0C6 6.386 8.842 4 12 4s6 2.386 6 6.2c0 1.073-.416 2.424-1.51 4.097-.986 1.51-2.465 3.191-4.486 5.042-2.025-1.851-3.506-3.532-4.494-5.042C6.416 12.623 6 11.273 6 10.2Z"
           />
         </>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOnFilled.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOnFilled.tsx
index da1a205..ff0f0a5 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOnFilled.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconLocationOnFilled.tsx
@@ -16,8 +16,8 @@ export const SfIconLocationOnFilled = component$<SfIconBaseProps>(
         data-testid="location-on-filled"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M12 2c-4.2 0-8 3.22-8 8.2 0 3.18 2.45 6.92 7.34 11.23.38.33.95.33 1.33 0C17.55 17.12 20 13.38 20 10.2 20 5.22 16.2 2 12 2Zm0 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconWarning.tsx b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconWarning.tsx
index 63aeeff..367cc81 100644
--- a/packages/qwik-storefront-ui/src/components/SfIcons/SfIconWarning.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfIcons/SfIconWarning.tsx
@@ -16,8 +16,8 @@ export const SfIconWarning = component$<SfIconBaseProps>(
         data-testid="warning"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M10.258 4.067c.764-1.363 2.725-1.363 3.49 0l7.818 13.95c.748 1.333-.216 2.978-1.744 2.978H4.183c-1.528 0-2.492-1.645-1.745-2.978l7.82-13.95ZM12 8a1 1 0 0 1 1 1v3.5a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1Zm0 7.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z"
         />
       </SfIconBase>
diff --git a/packages/qwik-storefront-ui/src/components/SfInput/SfInput.tsx b/packages/qwik-storefront-ui/src/components/SfInput/SfInput.tsx
index 92eb382..4634706 100644
--- a/packages/qwik-storefront-ui/src/components/SfInput/SfInput.tsx
+++ b/packages/qwik-storefront-ui/src/components/SfInput/SfInput.tsx
@@ -18,7 +18,6 @@ export const SfInput = component$<SfInputProps>(
     class: _class,
     wrapperClass,
     ref,
-    ...attributes
   }) => {
     return (
       <div
@@ -45,7 +44,6 @@ export const SfInput = component$<SfInputProps>(
           size={1}
           value={value}
           {...(ref ? { ref } : {})}
-          {...attributes}
           onChange$={onChange$}
         />
         {slotSuffix && (
diff --git a/packages/qwik-storefront-ui/src/components/SfInput/types.ts b/packages/qwik-storefront-ui/src/components/SfInput/types.ts
index c0aa798..dec2b04 100644
--- a/packages/qwik-storefront-ui/src/components/SfInput/types.ts
+++ b/packages/qwik-storefront-ui/src/components/SfInput/types.ts
@@ -1,14 +1,6 @@
-import {
-  PropFunction,
-  QwikChangeEvent,
-  QwikIntrinsicElements,
-  Signal,
-} from '@builder.io/qwik';
+import { PropsOf, Signal } from '@builder.io/qwik';
 
-export type SfInputProps = Omit<
-  QwikIntrinsicElements['input'],
-  'size' | 'class' | 'children' | 'change'
-> & {
+export type SfInputProps = Omit<PropsOf<'input'>, 'size' | 'children'> & {
   class?: string;
   size?: `${SfInputSize}`;
   invalid?: boolean;
@@ -16,7 +8,7 @@ export type SfInputProps = Omit<
   slotPrefix?: boolean;
   slotSuffix?: boolean;
   ref?: Signal<Element | undefined>;
-  onChange$?: PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>;
+  onChange$?: PropsOf<'input'>['onChange$'];
 };
 
 export enum SfInputSize {
diff --git a/packages/qwik-storefront-ui/src/components/SfModal/types.ts b/packages/qwik-storefront-ui/src/components/SfModal/types.ts
index 86d4bda..b054b49 100644
--- a/packages/qwik-storefront-ui/src/components/SfModal/types.ts
+++ b/packages/qwik-storefront-ui/src/components/SfModal/types.ts
@@ -1,6 +1,6 @@
-import { PropFunction, QwikIntrinsicElements, Signal } from '@builder.io/qwik';
+import { PropFunction, PropsOf, Signal } from '@builder.io/qwik';
 
-export type SfModalProps = QwikIntrinsicElements['modal'] & {
+export type SfModalProps = PropsOf<'modal'> & {
   as: any;
   class?: string;
   ref?: Signal<Element>;
diff --git a/packages/qwik-storefront-ui/src/components/SfRadio/types.ts b/packages/qwik-storefront-ui/src/components/SfRadio/types.ts
index 074cd27..e51b2ba 100644
--- a/packages/qwik-storefront-ui/src/components/SfRadio/types.ts
+++ b/packages/qwik-storefront-ui/src/components/SfRadio/types.ts
@@ -1,13 +1,8 @@
-import {
-  PropFunction,
-  QwikChangeEvent,
-  QwikIntrinsicElements,
-  Signal,
-} from '@builder.io/qwik';
+import { PropsOf, Signal } from '@builder.io/qwik';
 
-export type SfRadioProps = Omit<QwikIntrinsicElements['input'], 'children'> & {
+export type SfRadioProps = PropsOf<'input'> & {
   class?: string;
   ref?: Signal<Element | undefined>;
   invalid?: boolean;
-  onChange$: PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>;
+  onChange$?: PropsOf<'input'>['onChange$'];
 };
diff --git a/packages/qwik-storefront-ui/src/components/SfSelect/types.ts b/packages/qwik-storefront-ui/src/components/SfSelect/types.ts
index 1d233f5..6beb40c 100644
--- a/packages/qwik-storefront-ui/src/components/SfSelect/types.ts
+++ b/packages/qwik-storefront-ui/src/components/SfSelect/types.ts
@@ -10,6 +10,7 @@ export type SfSelectProps = Omit<QwikIntrinsicElements['select'], 'size'> & {
   invalid?: boolean;
   wrapperClass?: string;
   slotChevron?: boolean;
+  placeholder?: string;
   onChange$?: PropFunction<(event: QwikChangeEvent<HTMLSelectElement>) => void>;
 };
 
diff --git a/packages/qwik-storefront-ui/src/components/SfSwitch/types.ts b/packages/qwik-storefront-ui/src/components/SfSwitch/types.ts
index c92ecb6..03ddb71 100644
--- a/packages/qwik-storefront-ui/src/components/SfSwitch/types.ts
+++ b/packages/qwik-storefront-ui/src/components/SfSwitch/types.ts
@@ -1,13 +1,8 @@
-import {
-  PropFunction,
-  QwikChangeEvent,
-  QwikIntrinsicElements,
-  Signal,
-} from '@builder.io/qwik';
+import { PropsOf, Signal } from '@builder.io/qwik';
 
-export type SfSwitchProps = Omit<QwikIntrinsicElements['input'], 'children'> & {
+export type SfSwitchProps = PropsOf<'input'> & {
   ref?: Signal<Element | undefined>;
   class?: string;
   invalid?: boolean;
-  onChange$: PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>;
+  onChange$: PropsOf<'input'>['onChange$'];
 };
diff --git a/packages/qwik-storefront-ui/vite.config.ts b/packages/qwik-storefront-ui/vite.config.ts
index da2a7b1..85f82a8 100644
--- a/packages/qwik-storefront-ui/vite.config.ts
+++ b/packages/qwik-storefront-ui/vite.config.ts
@@ -56,15 +56,4 @@ export default defineConfig({
       },
     },
   },
-  test: {
-    globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
-    environment: 'node',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    coverage: {
-      reportsDirectory: '../../coverage/packages/qwik-storefront-ui',
-    },
-  },
 });