diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
index 90fd4ed9..60e9b396 100644
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -21,9 +21,6 @@ const preview = {
     },
     backgrounds: {
       default: 'light',
-      onchange: (value) => {
-        console.log('backgrounds', value)
-      },
       values: [
         {
           name: 'dark',
diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx
index 92d17420..fa18f0f2 100644
--- a/apps/storybook/stories/search-box.stories.tsx
+++ b/apps/storybook/stories/search-box.stories.tsx
@@ -18,16 +18,18 @@ const meta: Meta<Components.SearchBox> = {
 }
 export default meta
 
-const Template = ({ colorScheme, ...args }, context) => {
-  // todo: I'd like to programatically update parameters background value of colorScheme changes and vice versa
+// const Template = ({ colorScheme, ...args }, context) => {
+//   // todo: I'd like to programatically update parameters background value of colorScheme changes and vice versa
+//   console.log('colorScheme', colorScheme)
+//   console.log('args', args.themeConfig)
 
-  return html`
-  <search-box ${spread(args)} color-scheme=${colorScheme}></search-box>
-`
-}
+//   return html`
+//   <search-box ${spread(args)} color-scheme=${colorScheme}></search-box>
+// `
+// }
 
 export const SearchBox: Story = {
-  render: Template,
+  // render: Template,
   args: {
     open: true,
     facetProperty: 'category',
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
index 6b49c32b..8c15e1e9 100644
--- a/packages/ui-stencil-vue/lib/components.ts
+++ b/packages/ui-stencil-vue/lib/components.ts
@@ -34,8 +34,8 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatU
 
 export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama-facets', undefined, [
   'facets',
-  'onFacetClick',
-  'selectedFacet'
+  'selectedFacet',
+  'onFacetClick'
 ]);
 
 
diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx
index 0395d8af..2f74b92f 100644
--- a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx
@@ -13,8 +13,8 @@ export type Facet = { name: string; count: number }
  */
 export class OramaFacets {
   @Prop() facets: Facet[]
-  @Prop() onFacetClick: (facetName: string) => void
   @Prop() selectedFacet: string
+  @Prop() onFacetClick: (facetName: string) => void
 
   handleClick(facet: Facet) {
     this.onFacetClick(facet.name)