From f4eb21900724191750d583aed69b48e47b7c2e44 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 2 Jun 2026 15:24:05 +0200
Subject: [PATCH 01/27] feat: add support for ipyvuetify 3

---
 packages/solara-assets/hatch_build.py         |   6 +-
 .../solara_enterprise/auth/components.py      |   2 +-
 solara/components/alert.py                    |  28 ++--
 solara/components/applayout.py                |  14 +-
 solara/components/button.py                   |  17 +--
 solara/components/cross_filter.py             |   8 +-
 solara/components/dataframe.py                |  16 +-
 solara/components/datatable.py                |   2 +-
 solara/components/datatable.vue               | 111 ++++++++------
 solara/components/details.py                  |   6 +-
 solara/components/echarts.vue                 |   2 +-
 solara/components/head_tag.vue                |   2 +-
 solara/components/input.py                    |   4 +-
 solara/components/input_text_area.py          |   5 +-
 solara/components/misc.py                     |  25 +---
 solara/components/pivot_table.py              |   4 +-
 solara/components/progress.py                 |   2 +-
 solara/components/select.py                   |   4 +-
 solara/components/select.vue                  |  16 +-
 solara/components/slider.py                   |  26 ++--
 solara/components/sql_code.vue                |   2 +-
 solara/components/style.py                    |  12 +-
 solara/components/tab_navigation.py           |   7 +-
 solara/components/title.vue                   |   2 +-
 solara/components/togglebuttons.py            |  20 ++-
 solara/components/tooltip.py                  |   5 +-
 solara/lab/components/chat.py                 |   2 +-
 solara/lab/components/input_date.py           |  27 ++--
 solara/lab/components/input_time.py           |  26 ++--
 solara/lab/components/menu.vue                |  25 +++-
 solara/lab/components/tabs.py                 |  18 +--
 solara/layout.py                              |   6 +-
 solara/server/static/main-vuetify.js          |   2 +-
 .../portal/solara_portal/pages/__init__.py    |  29 ++--
 solara/website/components/algolia_api.vue     |  54 ++++---
 solara/website/components/contact.py          |   4 +-
 solara/website/components/header.py           |   4 +-
 solara/website/components/markdown_nav.vue    |  10 +-
 solara/website/components/sidebar.py          | 138 +++++++-----------
 solara/website/pages/__init__.py              |  32 ++--
 solara/website/pages/doc_use_download.py      |   2 +-
 .../website/pages/documentation/__init__.py   |   2 +-
 .../documentation/examples/ai/tokenizer.py    |   4 +-
 .../examples/general/login_oauth.py           |   6 +-
 .../documentation/examples/general/mycard.vue |   8 +-
 .../examples/general/pokemon_search.py        |   2 +-
 solara/website/pages/home.vue                 |   2 +-
 solara/website/pages/showcase/__init__.py     |  12 +-
 solara/widgets/vue/gridlayout.vue             |   2 +-
 solara/widgets/vue/navigator.vue              |   2 +-
 solara/widgets/vue/vegalite.vue               |  10 +-
 tests/integration/api_test.py                 |  80 +++++-----
 tests/integration/input_date_test.py          |  55 ++++---
 tests/unit/cross_filter_component_test.py     |   3 +-
 tests/unit/input_date_test.py                 |  31 ++++
 tests/unit/slider_test.py                     |  10 +-
 tests/unit/tabs_test.py                       |   6 +-
 57 files changed, 513 insertions(+), 449 deletions(-)

diff --git a/packages/solara-assets/hatch_build.py b/packages/solara-assets/hatch_build.py
index 5c9bc9def..8a7c7b758 100644
--- a/packages/solara-assets/hatch_build.py
+++ b/packages/solara-assets/hatch_build.py
@@ -11,9 +11,9 @@
     ["requirejs", "2.3.6"],
     ["mermaid", "10.8.0"],
     ["codemirror", "5.65.3"],
-    ["vega", "5.21.0"],
-    ["vega-lite", "5.2.0"],
-    ["vega-embed", "6.20.2"],
+    ["vega", "6.2.0"],
+    ["vega-lite", "6.4.3"],
+    ["vega-embed", "7.1.0"],
     ["@widgetti/vue-grid-layout", "2.3.13-alpha.2"],
     ["@widgetti/solara-milkdown", "6.3.0"],
     ["echarts", "5.4.0"],
diff --git a/packages/solara-enterprise/solara_enterprise/auth/components.py b/packages/solara-enterprise/solara_enterprise/auth/components.py
index acc7589a5..dbcc1a104 100644
--- a/packages/solara-enterprise/solara_enterprise/auth/components.py
+++ b/packages/solara-enterprise/solara_enterprise/auth/components.py
@@ -65,7 +65,7 @@ def Page():
     if not children:
         children = [solara.Button("logout", icon_name="mdi-logout", href=auth.get_logout_url(), text=True)]
 
-    with v.Menu(v_slots=[{"name": "activator", "children": activator, "variable": "x"}], offset_y=True) as menu:
+    with v.Menu(v_slots=[{"name": "activator", "children": activator, "variable": "x"}], location="bottom", offset="8") as menu:
         with v.List():
             for child in children:
                 with v.ListItem(children=[child]):
diff --git a/solara/components/alert.py b/solara/components/alert.py
index 014122268..c4bbc00d5 100644
--- a/solara/components/alert.py
+++ b/solara/components/alert.py
@@ -6,6 +6,14 @@
 from solara.util import _combine_classes
 
 
+def _alert_variant(outlined: bool, text: bool) -> str:
+    if outlined:
+        return "outlined"
+    if text:
+        return "tonal"
+    return "elevated"
+
+
 @solara.component
 def Success(
     label: Optional[str] = None,
@@ -34,9 +42,8 @@ def Success(
         icon = None
     return v.Alert(
         type="success",
-        text=text,
-        outlined=outlined,
-        dense=dense,
+        variant=_alert_variant(outlined, text),
+        density="compact" if dense else None,
         icon=icon,
         children=[*([label] if label is not None else []), *children],
         class_=_combine_classes(classes),
@@ -71,9 +78,8 @@ def Info(
         icon = None
     return v.Alert(
         type="info",
-        text=text,
-        outlined=outlined,
-        dense=dense,
+        variant=_alert_variant(outlined, text),
+        density="compact" if dense else None,
         icon=icon,
         children=[*([label] if label is not None else []), *children],
         class_=_combine_classes(classes),
@@ -108,9 +114,8 @@ def Warning(
         icon = None
     return v.Alert(
         type="warning",
-        text=text,
-        outlined=outlined,
-        dense=dense,
+        variant=_alert_variant(outlined, text),
+        density="compact" if dense else None,
         icon=icon,
         children=[*([label] if label is not None else []), *children],
         class_=_combine_classes(classes),
@@ -145,9 +150,8 @@ def Error(
         icon = None
     return v.Alert(
         type="error",
-        text=text,
-        outlined=outlined,
-        dense=dense,
+        variant=_alert_variant(outlined, text),
+        density="compact" if dense else None,
         icon=icon,
         children=[*([label] if label is not None else []), *children],
         class_=_combine_classes(classes),
diff --git a/solara/components/applayout.py b/solara/components/applayout.py
index d1118f862..77d3c76ff 100644
--- a/solara/components/applayout.py
+++ b/solara/components/applayout.py
@@ -295,13 +295,12 @@ def set_path(index):
         # also ideal in jupyter notebooks
         with v.Html(tag="div") as main:
             if show_app_bar or use_drawer:
-                with v.AppBar(color=color, dark=toolbar_dark, v_slots=v_slots):
+                with v.AppBar(color=color, theme="dark" if toolbar_dark else None, v_slots=v_slots):
                     if use_drawer:
                         icon = AppIcon(sidebar_open, on_click=lambda: set_sidebar_open(not sidebar_open), v_on="x.on")
                         with v.Menu(
-                            offset_y=True,
-                            nudge_left="50px",
-                            left=True,
+                            location="bottom end",
+                            offset="8",
                             v_slots=[{"name": "activator", "variable": "x", "children": [icon]}],
                             close_on_content_click=False,
                         ):
@@ -333,11 +332,8 @@ def set_path(index):
                         v_model=sidebar_open,
                         on_v_model=set_sidebar_open,
                         style_="min-width: 400px; max-width: 600px",
-                        clipped=True,
-                        app=True,
                         # disable_resize_watcher=True,
                         disable_route_watcher=True,
-                        mobile_break_point="960",
                         class_="solara-content-main",
                     ):
                         if not show_app_bar:
@@ -346,7 +342,7 @@ def set_path(index):
             if show_app_bar:
                 # if hide_on_scroll is True, and we have a little bit of scrolling, vuetify seems to act strangely
                 # when scrolling (on @mariobuikhuizen/vuetify v2.2.26-rc.0
-                with v.AppBar(color=color, dark=toolbar_dark, app=True, clipped_left=True, hide_on_scroll=False, v_slots=v_slots).key("app-layout-appbar"):
+                with v.AppBar(color=color, theme="dark" if toolbar_dark else None, scroll_behavior=None, v_slots=v_slots).key("app-layout-appbar"):
                     if use_drawer:
                         AppIcon(sidebar_open, on_click=lambda: set_sidebar_open(not sidebar_open))
                     if title or children_appbartitle:
@@ -370,7 +366,7 @@ def set_path(index):
                 # use a margin: -12px which will make a horizontal scrollbar appear
                 solara.Div(style=style, classes=classes, children=children_content)
         if fullscreen:
-            with v.Dialog(v_model=True, children=[], fullscreen=True, hide_overlay=True, persistent=True, no_click_animation=True) as dialog:
+            with v.Dialog(v_model=True, children=[], fullscreen=True, scrim=False, persistent=True, no_click_animation=True) as dialog:
                 v.Sheet(class_="overflow-y-auto overflow-x-auto", children=[main])
                 pass
             return dialog
diff --git a/solara/components/button.py b/solara/components/button.py
index d2225760c..662d316f5 100644
--- a/solara/components/button.py
+++ b/solara/components/button.py
@@ -62,7 +62,7 @@ def Page():
     if label:
         children = [label] + children
     if icon_name:
-        children = [v.Icon(left=bool(label), children=[icon_name])] + children
+        children = [v.Icon(start=bool(label), children=[icon_name])] + children
     if "class_" in kwargs:
         kwargs = kwargs.copy()
         class_ = solara.util._combine_classes([*classes, kwargs.pop("class_")])
@@ -72,14 +72,11 @@ def Page():
     style_flat = solara.util._flatten_style(style)
     if "style_" in kwargs:
         style_flat += kwargs.pop("style_")
-    if solara.util.ipyvuetify_major_version == 3:
-        variant = "elevated"
-        if text:
-            variant = "text"
-        elif outlined:
-            variant = "outlined"
-        btn = solara.v.Btn(children=children, **kwargs, disabled=disabled, class_=class_, style_=style_flat, color=color, variant=variant)
-    else:
-        btn = solara.v.Btn(children=children, **kwargs, disabled=disabled, text=text, class_=class_, style_=style_flat, outlined=outlined, color=color)
+    variant = "elevated"
+    if text:
+        variant = "text"
+    elif outlined:
+        variant = "outlined"
+    btn = solara.v.Btn(children=children, **kwargs, disabled=disabled, class_=class_, style_=style_flat, color=color, variant=variant, value=value)
     ipyvue.use_event(btn, click_event, lambda *_ignore: on_click and on_click())
     return btn
diff --git a/solara/components/cross_filter.py b/solara/components/cross_filter.py
index f4c2775f0..c25581dab 100644
--- a/solara/components/cross_filter.py
+++ b/solara/components/cross_filter.py
@@ -153,7 +153,7 @@ def update_filter():
             if configurable:
                 with v.Menu(v_slots=[{"name": "activator", "variable": "x", "children": btn}], close_on_content_click=False):
                     with v.Sheet():
-                        with v.Container(py_0=True, px_3=True, ma_0=True):
+                        with v.Container(class_="py-0 px-3 ma-0"):
                             with v.Row():
                                 with v.Col():
                                     v.Select(v_model=column, items=columns, on_v_model=set_column, label="Choose column")
@@ -195,9 +195,9 @@ def CrossFilterReport(df, classes: List[str] = []):
             v.Html(tag="h3", children=[summary], style_="display: inline")
         # always add a progress bar to make sure the layout is the same
         if filtered:
-            v.ProgressLinear(value=progress).key("visible")
+            v.ProgressLinear(model_value=progress).key("visible")
         else:
-            v.ProgressLinear(value=0, style_="visibility: hidden").key("hidden")
+            v.ProgressLinear(model_value=0, style_="visibility: hidden").key("hidden")
 
     return main
 
@@ -295,7 +295,7 @@ def update_filter():
             if configurable:
                 with v.Menu(v_slots=[{"name": "activator", "variable": "x", "children": btn}], close_on_content_click=False):
                     with v.Sheet():
-                        with v.Container(py_0=True, px_3=True, ma_0=True):
+                        with v.Container(class_="py-0 px-3 ma-0"):
                             with v.Row():
                                 with v.Col():
                                     columns_numeric = [c for c in columns if py_types[c] in [int, float]]
diff --git a/solara/components/dataframe.py b/solara/components/dataframe.py
index 491a55791..c9bc630a0 100644
--- a/solara/components/dataframe.py
+++ b/solara/components/dataframe.py
@@ -47,7 +47,7 @@ def on_value_local(value):
         placeholder=placeholder,
         prepend_icon="mdi-filter",
         error_messages=error,
-        success_messages="Looking good" if value is not None else None,
+        messages="Looking good" if value is not None else None,
     )
 
 
@@ -97,7 +97,7 @@ def TableCard(df):
     with v.Card(elevation=2, height=cardheight) as main:
         with v.CardTitle(children=[title]):
             if filtered:
-                v.ProgressLinear(value=progress)
+                v.ProgressLinear(model_value=progress)
         with v.CardText():
             Table(dff)
     return main
@@ -114,7 +114,7 @@ def HistogramCard(df, column=None, max_unique=100):
         with v.CardTitle(children=["Histogram"]):
             pass
         with v.CardText():
-            with v.Btn(v_on="x.on", icon=True, absolute=True, style_="right: 10px; top: 10px") as btn:
+            with v.Btn(v_on="x.on", icon=True, position="absolute", style_="right: 10px; top: 10px") as btn:
                 v.Icon(children=["mdi-settings"])
             with v.Dialog(v_slots=[{"name": "activator", "variable": "x", "children": btn}], width="500"):
                 with v.Sheet():
@@ -213,7 +213,7 @@ def ScatterCard(df, x=None, y=None, color=None):
         with v.CardTitle(children=["Scatter"]):
             pass
         with v.CardText():
-            with v.Btn(v_on="x.on", icon=True, absolute=True, style_="right: 10px; top: 10px") as btn:
+            with v.Btn(v_on="x.on", icon=True, position="absolute", style_="right: 10px; top: 10px") as btn:
                 v.Icon(children=["mdi-settings"])
             with v.Dialog(v_slots=[{"name": "activator", "variable": "x", "children": btn}], width="500"):
                 with v.Sheet():
@@ -360,7 +360,7 @@ def HeatmapCard(df, x=None, y=None, debounce=True):
         with v.CardTitle(children=["Heatmap"]):
             pass
         with v.CardText():
-            with v.Btn(v_on="x.on", icon=True, absolute=True, style_="right: 10px; top: 10px") as btn:
+            with v.Btn(v_on="x.on", icon=True, position="absolute", style_="right: 10px; top: 10px") as btn:
                 v.Icon(children=["mdi-settings"])
             with v.Dialog(v_slots=[{"name": "activator", "variable": "x", "children": btn}], width="700"):
                 with v.Sheet():
@@ -488,7 +488,7 @@ def SummaryCard(df):
     with v.Card(elevation=2, height=cardheight) as main:
         with v.CardTitle(children=[title]):
             if filtered:
-                v.ProgressLinear(value=progress)
+                v.ProgressLinear(model_value=progress)
         with v.CardText():
             icon = "mdi-filter"
             v.Icon(children=[icon], style_="opacity: 0.1" if not filtered else "")
@@ -529,11 +529,11 @@ def set_value_and_filter(value):
         with v.CardTitle(children=["Filter out single value"]):
             pass
         with v.CardText():
-            with v.Btn(v_on="x.on", icon=True, absolute=True, style_="right: 10px; top: 10px") as btn:
+            with v.Btn(v_on="x.on", icon=True, position="absolute", style_="right: 10px; top: 10px") as btn:
                 v.Icon(children=["mdi-settings"])
             with v.Dialog(v_slots=[{"name": "activator", "variable": "x", "children": btn}], width="500"):
                 with v.Sheet():
-                    with v.Container(pa_4=True, ma_0=True):
+                    with v.Container(class_="pa-4 ma-0"):
                         with v.Row():
                             with v.Col():
                                 v.Select(v_model=column, items=columns, on_v_model=set_column, label="Choose column")
diff --git a/solara/components/datatable.py b/solara/components/datatable.py
index e413a8d87..4fbd2f7e4 100644
--- a/solara/components/datatable.py
+++ b/solara/components/datatable.py
@@ -110,7 +110,7 @@ def DataTable(
             item[column] = format(dfs, column, i + i1, records[i][column])
         items.append(item)
 
-    headers = [{"text": name, "value": name, "sortable": False} for name in columns]
+    headers = [{"title": name, "key": name, "sortable": False} for name in columns]
     column_actions_callbacks = [k.on_click for k in column_actions]
     cell_actions_callbacks = [k.on_click for k in cell_actions]
     column_actions = [replace(k, on_click=None) for k in column_actions]
diff --git a/solara/components/datatable.vue b/solara/components/datatable.vue
index 3001d9fa2..83929fbf8 100644
--- a/solara/components/datatable.vue
+++ b/solara/components/datatable.vue
@@ -1,80 +1,78 @@
 <template>
   <v-slide-x-transition appear>
     <div class="solara-data-table__viewport">
-      <v-data-table dense hide-default-header :headers="[...headers]" :items="items"
-        :footer-props="{ 'items-per-page-options': [10, 20, 50, 100] }" :options.sync="options"
-        :items_per_page.sync="items_per_page" :server-items-length="total_length" :class="[
+      <v-data-table-server density="compact" :headers="[...headers]" :items="items"
+        :items-per-page-options="[10, 20, 50, 100]" :items-length="total_length"
+        :page="options.page" :items-per-page="options.itemsPerPage" :sort-by="options.sortBy"
+        @update:options="options = { ...options, ...$event }" :class="[
           'elevation-1',
           'solara-data-table',
           scrollable && 'solara-data-table--scrollable',
         ]" :style="scrollable && height != null && `height: ${height}`">
-        <template v-slot:header="props">
+        <template v-slot:headers>
           <thead>
             <tr>
               <th style="padding: 0 10px; width: 40px">#</th>
               <th style="padding: 0 1px; width: 30px" v-if="selection_enabled">
-                <v-btn icon color="primary" text small @click="apply_filter">
+                <v-btn icon color="primary" variant="text" size="small" @click="apply_filter">
                   <v-icon>filter_list</v-icon>
                 </v-btn>
               </th>
-              <th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.text">
+              <th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.title">
                 <v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
               </th>
-              <v-slide-x-transition :key="header.text" v-for="header in headers">
-                <th class="text-no-wrap">
-                  {{ header.text }}
-                  <v-menu open-on-hover bottom offset-y @input="isOpen => onHeaderHover({ isOpen, header })"
-                    v-if="(column_actions && column_actions.length) || column_header_widget">
-                    <template v-slot:activator="{ on, attrs }">
-                      <v-icon v-bind="attrs" v-on="on" small class="solara-data-table-menu">mdi-dots-vertical</v-icon>
-                    </template>
-                    <v-sheet v-if="header.value === column_header_hover" class="solara-data-table-column-header-sheet">
-                      <jupyter-widget v-if="column_header_widget" :widget="column_header_widget"></jupyter-widget>
-                    </v-sheet>
+              <th class="text-no-wrap" :key="header.title" v-for="header in headers">
+                {{ header.title }}
+                <span class="solara-data-table-header-menu" @mouseenter="onHeaderHover({ isOpen: true, header })"
+                  @mouseleave="onHeaderHover({ isOpen: false, header })"
+                  v-if="(column_actions && column_actions.length) || column_header_widget">
+                  <v-icon size="small" class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                  <v-sheet v-if="header.key === column_header_hover" class="solara-data-table-column-header-sheet solara-data-table-header-menu-content" elevation="2">
+                    <jupyter-widget v-if="column_header_widget" :widget="column_header_widget"></jupyter-widget>
                     <v-list v-if="column_actions && column_actions.length">
-                      <v-subheader>Actions:</v-subheader>
-                      <v-list-item link @click="on_column_action([header.value, index])"
+                      <v-list-subheader>Actions:</v-list-subheader>
+                      <v-list-item link @click="on_column_action([header.key, index])"
                         v-for="(action, index) in column_actions" :key="index">
-                        <v-list-item-icon><v-icon>{{ action.icon }}</v-icon></v-list-item-icon>
+                        <template v-slot:prepend><v-icon>{{ action.icon }}</v-icon></template>
                         <v-list-item-title>{{ action.name }}</v-list-item-title>
                       </v-list-item>
                     </v-list>
-                  </v-menu>
-                </th>
-              </v-slide-x-transition>
+                  </v-sheet>
+                </span>
+              </th>
             </tr>
           </thead>
         </template>
         <template v-slot:item="props">
           <!-- @click="on_row_clicked(props.item.__row__)" -->
           <tr :class="{ highlightedRow: props.item.__row__ === highlighted }">
-            <td style="padding: 0 10px" class="text-xs-left">
+            <td style="padding: 0 10px" class="text-left">
               <i>{{ props.item.__row__ }}</i>
             </td>
-            <td style="padding: 0 1px" class="text-xs-left" v-if="selection_enabled">
+            <td style="padding: 0 1px" class="text-left" v-if="selection_enabled">
               <v-checkbox hide-details style="margin-top: 0; padding-top: 0"
-                :input-value="checked.indexOf(props.item.__row__) != -1" :key="props.item.__row__"
-                @change="(value) => select({ checked: value, row: props.item.__row__ })" />
+                :model-value="checked.indexOf(props.item.__row__) != -1" :key="props.item.__row__"
+                @update:model-value="(value) => select({ checked: value, row: props.item.__row__ })" />
             </td>
-            <td style="padding: 0 1px" :key="header.text" v-for="(header, index) in headers_selections">
+            <td style="padding: 0 1px" :key="header.title" v-for="(header, index) in headers_selections">
               <v-fade-transition leave-absolute>
-                <v-icon v-if="props.item[header.value]" v-model="props.item[header.value]"
+                <v-icon v-if="props.item[header.key]" v-model="props.item[header.key]"
                   :color="selection_colors[index]">brightness_1</v-icon>
               </v-fade-transition>
             </td>
-            <td v-for="header in headers" class="text-truncate text-no-wrap" :key="header.text"
-              :title="props.item[header.value]">
+            <td v-for="header in headers" class="text-truncate text-no-wrap" :key="header.title"
+              :title="props.item[header.key]">
               <v-slide-x-transition appear>
-                <!-- <span @click="on_item_click([props.item.__row__, header.value])">{{ props.item[header.value] }}</span> -->
+                <!-- <span @click="on_item_click([props.item.__row__, header.key])">{{ props.item[header.key] }}</span> -->
                 <span>
-                  {{ props.item[header.value] }}
-                  <v-menu open-on-hover bottom offset-y v-if="cell_actions.length">
-                    <template v-slot:activator="{ on, attrs }">
-                      <v-icon v-bind="attrs" v-on="on" small class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                  {{ props.item[header.key] }}
+                  <v-menu open-on-hover location="bottom" :offset="4" v-if="cell_actions.length">
+                    <template v-slot:activator="{ props }">
+                      <v-icon v-bind="props" size="small" class="solara-data-table-menu">mdi-dots-vertical</v-icon>
                     </template>
                     <v-list v-for="(action, index) in cell_actions" :key="index">
-                      <v-list-item link @click="on_cell_action([props.item.__row__, header.value, index])">
-                        <v-list-item-icon><v-icon>{{ action.icon }}</v-icon></v-list-item-icon>
+                      <v-list-item link @click="on_cell_action([props.item.__row__, header.key, index])">
+                        <template v-slot:prepend><v-icon>{{ action.icon }}</v-icon></template>
                         <v-list-item-title>{{ action.name }}</v-list-item-title>
                       </v-list-item>
                     </v-list>
@@ -85,7 +83,7 @@
             </td>
           </tr>
         </template>
-      </v-data-table>
+      </v-data-table-server>
     </div>
   </v-slide-x-transition>
 </template>
@@ -95,12 +93,12 @@ module.exports = {
   methods: {
     onHeaderHover({ header, isOpen }) {
       if (isOpen) {
-        // if isOpen is true, we clicked, and we set it header.value
-        this.column_header_hover = header.value
+        // if isOpen is true, we clicked, and we set it header.key
+        this.column_header_hover = header.key
       } else {
         // if false, we only 'unset' if the current header equals the current open menu
         // because sometimes the menu from another column is closed after opening the new one
-        if (this.column_header_hover == header.value) {
+        if (this.column_header_hover == header.key) {
           this.column_header_hover = null
         }
       }
@@ -117,7 +115,8 @@ module.exports = {
   table-layout: fixed;
 }
 
-.solara-data-table--scrollable .v-data-table__wrapper {
+.solara-data-table--scrollable .v-data-table__wrapper,
+.solara-data-table--scrollable .v-table__wrapper {
   overflow-y: auto;
   height: calc(100% - 59px);
 }
@@ -130,12 +129,17 @@ module.exports = {
 .solara-data-table--scrollable .v-data-table__wrapper,
 .solara-data-table--scrollable .v-data-table__wrapper>table,
 .solara-data-table--scrollable .v-data-table__wrapper>table thead,
-.solara-data-table--scrollable .v-data-table__wrapper>table thead * {
+.solara-data-table--scrollable .v-data-table__wrapper>table thead *,
+.solara-data-table--scrollable .v-table__wrapper,
+.solara-data-table--scrollable .v-table__wrapper>table,
+.solara-data-table--scrollable .v-table__wrapper>table thead,
+.solara-data-table--scrollable .v-table__wrapper>table thead * {
   background-color: inherit;
 }
 
 /* prevent checkboxes overlaying the table header */
-.solara-data-table--scrollable .v-data-table__wrapper>table thead {
+.solara-data-table--scrollable .v-data-table__wrapper>table thead,
+.solara-data-table--scrollable .v-table__wrapper>table thead {
   position: relative;
   z-index: 1;
 }
@@ -145,6 +149,23 @@ module.exports = {
   overflow: auto;
 }
 
+.solara-data-table-header-menu {
+  display: inline-block;
+  position: relative;
+}
+
+.solara-data-table-header-menu-content {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  max-height: min(50vh, 420px);
+  min-width: 260px;
+  padding: 8px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 10;
+}
+
 .solara-data-table.v-data-table th,
 .solara-data-table.v-data-table td {
   padding-left: 4px;
diff --git a/solara/components/details.py b/solara/components/details.py
index 4eacb31f5..9c5520216 100644
--- a/solara/components/details.py
+++ b/solara/components/details.py
@@ -1,5 +1,5 @@
 import solara
-from solara.alias import rv
+import ipyvuetify.components as rv
 
 
 @solara.component
@@ -51,6 +51,6 @@ def on_v_model(v_model):
 
     with rv.ExpansionPanels(v_model=0 if expand else None, on_v_model=on_v_model) as main:
         with rv.ExpansionPanel():
-            rv.ExpansionPanelHeader(children=[summary])
-            rv.ExpansionPanelContent(children=children)
+            rv.ExpansionPanelTitle(children=[summary])
+            rv.ExpansionPanelText(children=children)
     return main
diff --git a/solara/components/echarts.vue b/solara/components/echarts.vue
index 9c27144bd..9c6d8a65b 100644
--- a/solara/components/echarts.vue
+++ b/solara/components/echarts.vue
@@ -23,7 +23,7 @@ module.exports = {
       this.resizeObserver.observe(this.$refs.echarts);
     };
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.$refs.echarts);
       this.resizeObserver.disconnect();
diff --git a/solara/components/head_tag.vue b/solara/components/head_tag.vue
index 4dc6892a0..5f37db7e5 100644
--- a/solara/components/head_tag.vue
+++ b/solara/components/head_tag.vue
@@ -12,7 +12,7 @@ module.exports = {
     window._solaraHeadTags[this.key].push(this);
     this.updateElement();
   },
-  destroyed() {
+  unmounted() {
     const tags = window._solaraHeadTags[this.key];
     tags.splice(tags.indexOf(this), 1);
     // ask another headtag to update the element
diff --git a/solara/components/input.py b/solara/components/input.py
index 0ac353826..bbf196e06 100644
--- a/solara/components/input.py
+++ b/solara/components/input.py
@@ -200,7 +200,7 @@ def on_v_model(value):
         class_=classes_flat,
         style_=style_flat,
         autofocus=autofocus,
-        dense=dense,
+        density="compact" if dense else None,
         hide_details=hide_details,
         placeholder=placeholder if placeholder is not None else "",
         prefix=prefix if prefix is not None else "",
@@ -582,7 +582,7 @@ def on_v_model(value):
         class_=classes_flat,
         style_=style_flat,
         autofocus=autofocus,
-        dense=dense,
+        density="compact" if dense else None,
         placeholder=placeholder if placeholder is not None else "",
         prefix=prefix if prefix is not None else "",
         suffix=suffix if suffix is not None else "",
diff --git a/solara/components/input_text_area.py b/solara/components/input_text_area.py
index 55dbce0bb..6e94a6f61 100644
--- a/solara/components/input_text_area.py
+++ b/solara/components/input_text_area.py
@@ -86,12 +86,11 @@ def on_v_model(value):
         disabled=disabled,
         error=bool(error),
         messages=messages,
-        solo=True,
+        variant="outlined",
         hide_details=hide_details,
-        outlined=True,
         rows=rows,
         auto_grow=auto_grow,
-        dense=dense,
+        density="compact" if dense else None,
         placeholder=placeholder if placeholder is not None else "",
         prefix=prefix if prefix is not None else "",
         suffix=suffix if suffix is not None else "",
diff --git a/solara/components/misc.py b/solara/components/misc.py
index ed632feee..5bbf23330 100644
--- a/solara/components/misc.py
+++ b/solara/components/misc.py
@@ -2,7 +2,7 @@
 from typing import Any, Callable, Dict, List, Union
 
 import reacton
-import reacton.ipyvuetify as v
+import ipyvuetify.components as v
 import solara
 import solara.widgets
 from solara.util import _combine_classes
@@ -18,20 +18,9 @@ def ListItem(title, icon_name: str = None, children=[], value=None):
     if value is None:
         value = title
     if children:
-        with v.ListItemContent() as main:
-            v.ListItemTitle(children=[title])
-            if icon_name is not None:
-                with v.ListItemIcon():
-                    v.Icon(children=[icon_name or ""])
-        return v.ListGroup(children=children, v_slots=[{"name": "activator", "children": main}], no_action=True, value=True, append_icon=icon_name)
+        return v.ListGroup(children=children, title=title, prepend_icon=icon_name, value=True)
     else:
-        with v.ListItem(value=value) as main:
-            if icon_name is not None:
-                with v.ListItemIcon():
-                    v.Icon(children=[icon_name or ""])
-            with v.ListItemContent():
-                v.ListItemTitle(children=[title])
-        return main
+        return v.ListItem(value=value, title=title, prepend_icon=icon_name)
 
 
 def ui_dropdown(label, value=None, options=["foo", "bar"], key=None, disabled=False, **kwargs):
@@ -68,8 +57,8 @@ def ui_slider(value=1, label="", min=0, max=100, key=None, tick_labels=None, thu
         min=min,
         max=max,
         on_v_model=set_value,
-        ticks=tick_labels is not None,
-        tick_labels=tick_labels,
+        show_ticks=tick_labels is not None,
+        ticks=tick_labels or [],
         thumb_label=thumb_label,
         disabled=disabled,
         **kwargs,
@@ -326,8 +315,8 @@ def Code(path, path_header=None):
 
     with v.ExpansionPanels() as main:
         with v.ExpansionPanel():
-            with v.ExpansionPanelHeader(children=["View source"]):
+            with v.ExpansionPanelTitle(children=["View source"]):
                 pass
-            with v.ExpansionPanelContent(children=[md]):
+            with v.ExpansionPanelText(children=[md]):
                 pass
     return main
diff --git a/solara/components/pivot_table.py b/solara/components/pivot_table.py
index 7a1eaadb5..9c0e8f6b8 100644
--- a/solara/components/pivot_table.py
+++ b/solara/components/pivot_table.py
@@ -218,11 +218,11 @@ def PivotTableCard(
         with rv.CardTitle(children=["Pivot table"]):
             pass
         with rv.CardText():
-            with rv.Btn(v_on="x.on", icon=True, absolute=True, style_="right: 10px; top: 10px") as btn:
+            with rv.Btn(v_on="x.on", icon=True, position="absolute", style_="right: 10px; top: 10px") as btn:
                 rv.Icon(children=["mdi-settings"])
             with rv.Dialog(v_slots=[{"name": "activator", "variable": "x", "children": btn}]):
                 with rv.Sheet():
-                    with rv.Container(pa_4=True, ma_0=True):
+                    with rv.Container(class_="pa-4 ma-0"):
                         with rv.Row():
                             with rv.Col():
                                 with rv.Card(elevation=2):
diff --git a/solara/components/progress.py b/solara/components/progress.py
index 91cb82163..310e9c953 100644
--- a/solara/components/progress.py
+++ b/solara/components/progress.py
@@ -44,4 +44,4 @@ def Page():
     if value is False:
         style_flat = "visibility: hidden;" + style_flat
     class_ = solara.util._combine_classes(classes)
-    v.ProgressLinear(indeterminate=indeterminate, value=value if value is not True else None, color=color, style_=style_flat, class_=class_)
+    v.ProgressLinear(indeterminate=indeterminate, model_value=value if value is not True else None, color=color, style_=style_flat, class_=class_)
diff --git a/solara/components/select.py b/solara/components/select.py
index 93e7c8da6..af15c02ef 100644
--- a/solara/components/select.py
+++ b/solara/components/select.py
@@ -115,7 +115,7 @@ def Page():
             on_v_model=reactive_value.set,
             items=values,
             label=label,
-            dense=dense,
+            density="compact" if dense else None,
             disabled=disabled,
             class_=class_,
             style_=style_flat,
@@ -174,7 +174,7 @@ def Page():
             items=all_values,
             label=label,
             multiple=True,
-            dense=dense,
+            density="compact" if dense else None,
             disabled=disabled,
             class_=class_,
             style_=style_flat,
diff --git a/solara/components/select.vue b/solara/components/select.vue
index 6b618f618..588783d02 100644
--- a/solara/components/select.vue
+++ b/solara/components/select.vue
@@ -9,19 +9,19 @@
     :label="label"
     class="solara-cross-filter-select"
   >
-    <template v-slot:item="{ item }">
-      <v-list-item-content>
-        <v-list-item-title v-text="item.text"></v-list-item-title>
+    <template v-slot:item="{ props, item }">
+      <v-list-item v-bind="props">
+        <v-list-item-title v-text="item.raw.text"></v-list-item-title>
         <v-list-item-subtitle>
-          <v-progress-linear :value="(item.count / count) * 100"></v-progress-linear>
+          <v-progress-linear :model-value="(item.raw.count / count) * 100"></v-progress-linear>
           <div style="display: flex">
-            <span v-if="count > 0"> {{ ((item.count / count) * 100).toFixed(1) }}%</span>
+            <span v-if="count > 0"> {{ ((item.raw.count / count) * 100).toFixed(1) }}%</span>
             <v-spacer></v-spacer>
-            <span v-if="filtered"> {{ item.count }} of {{ count }} after filtering </span>
-            <span v-if="!filtered">{{ item.count_max }} of {{ count }} </span>
+            <span v-if="filtered"> {{ item.raw.count }} of {{ count }} after filtering </span>
+            <span v-if="!filtered">{{ item.raw.count_max }} of {{ count }} </span>
           </div>
         </v-list-item-subtitle>
-      </v-list-item-content>
+      </v-list-item>
     </template>
   </v-autocomplete>
 </template>
diff --git a/solara/components/slider.py b/solara/components/slider.py
index 9953794e9..c77b02f5e 100644
--- a/solara/components/slider.py
+++ b/solara/components/slider.py
@@ -76,8 +76,9 @@ def set_value_cast(value):
         max=max,
         step=step,
         thumb_label=thumb_label,
-        tick_labels=updated_tick_labels,
-        dense=False,
+        show_ticks=updated_tick_labels is not None,
+        ticks=updated_tick_labels or [],
+        density="default",
         hide_details=True,
         disabled=disabled,
     )
@@ -145,8 +146,9 @@ def set_value_cast(value):
             max=max,
             step=step,
             thumb_label=thumb_label,
-            tick_labels=updated_tick_labels,
-            dense=False,
+            show_ticks=updated_tick_labels is not None,
+            ticks=updated_tick_labels or [],
+            density="default",
             hide_details=True,
             disabled=disabled,
         ),
@@ -212,8 +214,9 @@ def set_value_cast(value):
         max=max,
         step=step,
         thumb_label=thumb_label,
-        tick_labels=updated_tick_labels,
-        dense=False,
+        show_ticks=updated_tick_labels is not None,
+        ticks=updated_tick_labels or [],
+        density="default",
         hide_details=True,
         disabled=disabled,
     )
@@ -281,8 +284,9 @@ def set_value_cast(value):
             max=max,
             step=step,
             thumb_label=thumb_label,
-            tick_labels=updated_tick_labels,
-            dense=False,
+            show_ticks=updated_tick_labels is not None,
+            ticks=updated_tick_labels or [],
+            density="default",
             hide_details=True,
             disabled=disabled,
         ),
@@ -336,12 +340,12 @@ def on_index(index):
         rv.Slider(
             v_model=index,
             on_v_model=on_index,
-            ticks=True,
-            tick_labels=values,
+            show_ticks=True,
+            ticks=values,
             label=label,
             min=0,
             max=len(values) - 1,
-            dense=False,
+            density="default",
             hide_details=True,
             disabled=disabled,
         ),
diff --git a/solara/components/sql_code.vue b/solara/components/sql_code.vue
index d7218a2b2..deda95ab6 100644
--- a/solara/components/sql_code.vue
+++ b/solara/components/sql_code.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-subheader class="pl-0 query-input-label">{{ label }}</v-subheader>
+    <div class="pl-0 query-input-label">{{ label }}</div>
     <div ref="cm" class="solara-sql-code" :style="`height: ${height};`"></div>
     <div>Use <kbd>Ctrl</kbd>+<kbd>Space</kbd> for auto-complete</div>
   </div>
diff --git a/solara/components/style.py b/solara/components/style.py
index 8b1ae75f9..b8fd3c9ea 100644
--- a/solara/components/style.py
+++ b/solara/components/style.py
@@ -77,18 +77,23 @@ async def watch():
     # so that we create a new component if the value changes
     # but we do not remove the css of a component with the same value
     key = uuid + "-" + hash
+    marker = f"solara-style-{key}"
     # ipyvue does not remove the css itself, so we need to do it manually
     script = (
         """
 <script>
 module.exports = {
-  destroyed() {
-    document.getElementById("ipyvue-%s").remove();
+  unmounted() {
+    document.querySelectorAll("style").forEach((style) => {
+      if (style.textContent.includes("%s")) {
+        style.remove();
+      }
+    });
   },
 };
 </script>
     """
-        % key
+        % marker
     )
 
     template = f"""
@@ -98,6 +103,7 @@ async def watch():
 </template>
 {script}
 <style id="{key}">
+/* {marker} */
 {css_content}
 </style>
     """
diff --git a/solara/components/tab_navigation.py b/solara/components/tab_navigation.py
index c8a1385dc..af8a37ee5 100644
--- a/solara/components/tab_navigation.py
+++ b/solara/components/tab_navigation.py
@@ -24,14 +24,15 @@ def TabNavigation(children=[], vertical=False, **kwargs):
 
     tab_index = all_routes.index(route_current) if route_current is not None else 0
 
-    with rv.Tabs(v_model=tab_index, vertical=vertical, **kwargs) as main:
+    with rv.Tabs(v_model=tab_index, direction="vertical" if vertical else None, **kwargs) as main:
         for i, route in enumerate(all_routes):
             path = solara.resolve_path(route)
             LinkTab(path, route.label or "No title")
         if route_current is None:
             return solara.Error("Page does not exist")
 
-        with rv.TabsItems(v_model=tab_index, children=children):
-            pass
+        with rv.Window(v_model=tab_index):
+            with rv.WindowItem(value=tab_index, children=children):
+                pass
 
     return main
diff --git a/solara/components/title.vue b/solara/components/title.vue
index b390e11db..cbed9f2a7 100644
--- a/solara/components/title.vue
+++ b/solara/components/title.vue
@@ -9,7 +9,7 @@ module.exports = {
     window._solaraTitles.push(this);
     this.updateTitle();
   },
-  destroyed() {
+  unmounted() {
     window._solaraTitles.splice(window._solaraTitles.indexOf(this), 1);
     if (window._solaraTitles.length) {
       window._solaraTitles[0].updateTitle();
diff --git a/solara/components/togglebuttons.py b/solara/components/togglebuttons.py
index 23dce5733..6e1274150 100644
--- a/solara/components/togglebuttons.py
+++ b/solara/components/togglebuttons.py
@@ -136,7 +136,16 @@ def on_index(index):
 
     return cast(
         reacton.core.ValueElement[v.BtnToggle, T],
-        rv.BtnToggle(children=children, multiple=False, mandatory=mandatory, v_model=index, on_v_model=on_index, dense=dense, class_=class_, style_=style_flat),
+        rv.BtnToggle(
+            children=children,
+            multiple=False,
+            mandatory=mandatory,
+            v_model=index,
+            on_v_model=on_index,
+            density="compact" if dense else None,
+            class_=class_,
+            style_=style_flat,
+        ),
     )
 
 
@@ -195,6 +204,13 @@ def on_indices(indices):
     return cast(
         reacton.core.ValueElement[v.BtnToggle, List[T]],
         rv.BtnToggle(
-            children=children, multiple=True, mandatory=mandatory, v_model=indices, on_v_model=on_indices, dense=dense, class_=class_, style_=style_flat
+            children=children,
+            multiple=True,
+            mandatory=mandatory,
+            v_model=indices,
+            on_v_model=on_indices,
+            density="compact" if dense else None,
+            class_=class_,
+            style_=style_flat,
         ),
     )
diff --git a/solara/components/tooltip.py b/solara/components/tooltip.py
index 109c9ad90..e689c6cc4 100644
--- a/solara/components/tooltip.py
+++ b/solara/components/tooltip.py
@@ -47,8 +47,9 @@ def set_v_on():
 
     solara.use_effect(set_v_on, children)
 
+    content_props = {"style": f"background-color: {color};"} if color is not None else None
     return v.Tooltip(
-        bottom=True,
+        location="bottom",
         v_slots=[
             {
                 "name": "activator",
@@ -56,6 +57,6 @@ def set_v_on():
                 "children": children,
             }
         ],
-        color=color,
+        content_props=content_props,
         children=[tooltip],
     )
diff --git a/solara/lab/components/chat.py b/solara/lab/components/chat.py
index aa4a7b468..00beaabd4 100644
--- a/solara/lab/components/chat.py
+++ b/solara/lab/components/chat.py
@@ -87,7 +87,7 @@ def send(*ignore_args):
             v_model=message,
             on_v_model=set_message,
             rounded=True,
-            filled=True,
+            variant="filled",
             hide_details=True,
             autofocus=autofocus,
             style_="flex-grow: 1;" + input_text_style_flat,
diff --git a/solara/lab/components/input_date.py b/solara/lab/components/input_date.py
index f9b676027..050e72330 100644
--- a/solara/lab/components/input_date.py
+++ b/solara/lab/components/input_date.py
@@ -13,6 +13,15 @@
 logger = logging.getLogger(__name__)
 
 
+def _parse_date_picker_value(value: str, internal_date_format: str) -> dt.date:
+    if "T" in value:
+        datetime_value = dt.datetime.fromisoformat(value.replace("Z", "+00:00"))
+        if datetime_value.tzinfo is not None:
+            datetime_value = datetime_value.astimezone()
+        return datetime_value.date()
+    return dt.datetime.strptime(value, internal_date_format).date()
+
+
 def use_close_menu(el: reacton.core.Element, is_open: solara.Reactive[bool]):
     is_open_ref = solara.use_ref(is_open)
     is_open_ref.current = is_open
@@ -136,7 +145,7 @@ def date_to_str(date: Optional[dt.date]) -> str:
 
     def set_date_cast(new_value: Optional[str]):
         if new_value:
-            date_value = dt.datetime.strptime(new_value, internal_date_format).date()
+            date_value = _parse_date_picker_value(new_value, internal_date_format)
             datepicker_is_open.set(False)
             value_reactive.value = date_value
 
@@ -162,7 +171,7 @@ def standard_strfy(date: Optional[dt.date]):
         error=bool(error_message),
         style_="min-width: 290px;" + style_flat,
         class_=", ".join(classes) if classes else "",
-        dense=dense,
+        density="compact" if dense else None,
         hide_details=hide_details,
         placeholder=placeholder if placeholder is not None else "",
         prefix=prefix if prefix is not None else "",
@@ -181,11 +190,10 @@ def standard_strfy(date: Optional[dt.date]):
         with solara.v.DatePicker(
             v_model=date_standard_str,
             on_v_model=set_date_cast,
-            first_day_of_week=first_day_of_the_week,
             style_="width: 100%;",
             max=max_date,  # type: ignore
             min=min_date,  # type: ignore
-            type=date_picker_type,
+            view_mode="month" if date_picker_type == "month" else None,
             children=children,
         ):
             pass
@@ -321,13 +329,13 @@ def book():
     def dates_to_string(dates: Tuple[Optional[dt.date], Optional[dt.date]]):
         string_dates = [date.strftime(date_format) if date is not None else "" for date in dates]
         if (len(dates) < 2 or dates[1] is None) and not optional:
-            return string_dates[0], f"Please select two {date_picker_type}s"
+            return string_dates[0] if string_dates else "", f"Please select two {date_picker_type}s"
         return " - ".join(string_dates), None
 
     def set_dates_cast(values):
         date_value = cast(
             Tuple[Optional[dt.date], Optional[dt.date]],
-            tuple([(dt.datetime.strptime(item, internal_date_format).date() if item is not None else None) for item in values]),
+            tuple([(_parse_date_picker_value(item, internal_date_format) if item is not None else None) for item in values]),
         )
         if len(date_value) > 1 and date_value[1] is not None:
             datepicker_is_open.set(False)
@@ -349,7 +357,7 @@ def set_dates_cast(values):
         style_="min-width: 290px;" + style_flat,
         readonly=True,
         class_=", ".join(classes) if classes else "",
-        dense=dense,
+        density="compact" if dense else None,
         hide_details=hide_details,
         placeholder=placeholder if placeholder is not None else "",
         prefix=prefix if prefix is not None else "",
@@ -368,12 +376,11 @@ def set_dates_cast(values):
         with solara.v.DatePicker(
             v_model=date_standard_strings,
             on_v_model=set_dates_cast,
-            range=True,
-            first_day_of_week=first_day_of_the_week,
+            multiple=True,
             style_="width: 100%;",
             max=max_date,  # type: ignore
             min=min_date,  # type: ignore
-            type=date_picker_type,
+            view_mode="month" if date_picker_type == "month" else None,
             children=children,
         ):
             pass
diff --git a/solara/lab/components/input_time.py b/solara/lab/components/input_time.py
index ee003f38a..3cfef6a36 100644
--- a/solara/lab/components/input_time.py
+++ b/solara/lab/components/input_time.py
@@ -120,14 +120,18 @@ def standard_strfy(time: Optional[dt.time]):
         open_value=timepicker_is_open,
         use_activator_width=False,
     ):
-        with solara.v.TimePicker(
-            ampm_in_title=twelve_hour_clock,
-            v_model=time_standard_str,
-            on_v_model=set_time_cast,
-            format="24hr" if not twelve_hour_clock else "ampm",
-            allowed_minutes=allowed_minutes,
-            use_seconds=use_seconds,
-            style_="width: 100%;",
-        ):
-            if len(children) > 0:
-                solara.display(*children)
+        TimePicker = getattr(solara.v, "TimePicker", None)
+        if TimePicker is not None:
+            with TimePicker(
+                ampm_in_title=twelve_hour_clock,
+                v_model=time_standard_str,
+                on_v_model=set_time_cast,
+                format="24hr" if not twelve_hour_clock else "ampm",
+                allowed_minutes=allowed_minutes,
+                use_seconds=use_seconds,
+                style_="width: 100%;",
+            ):
+                if len(children) > 0:
+                    solara.display(*children)
+        elif len(children) > 0:
+            solara.display(*children)
diff --git a/solara/lab/components/menu.vue b/solara/lab/components/menu.vue
index d5af85b66..4278d91fd 100644
--- a/solara/lab/components/menu.vue
+++ b/solara/lab/components/menu.vue
@@ -1,20 +1,23 @@
 <template>
     <v-menu
         v-model="show_menu"
-        :absolute="use_absolute"
-        offset-y
+        :target="context ? menu_target : undefined"
+        :location="context ? undefined : 'bottom'"
+        :offset="4"
         :close-on-content-click="close_on_content_click"
         :min-width="use_activator_width ? null : 'auto'"
     >
-        <template v-if="context" v-slot:activator="{ on }">
+        <template v-if="context" v-slot:activator>
             <div v-for="(element, index) in activator"
                 :key="index"
-                @contextmenu.prevent="show($event, on)">
+                @contextmenu.prevent="show($event)">
                 <jupyter-widget :widget="element"></jupyter-widget>
             </div>
         </template>
-        <template v-else v-slot:activator="{ on }">
-            <jupyter-widget :widget="element" v-for="(element, index) in activator" :key="index" @click.native="on.click"></jupyter-widget>
+        <template v-else v-slot:activator="{ props }">
+            <div v-for="(element, index) in activator" :key="index" v-bind="props">
+                <jupyter-widget :widget="element"></jupyter-widget>
+            </div>
         </template>
         <v-list v-for="(element, index) in children" :key="index" style="padding: 0;">
             <jupyter-widget :widget="element"  :style="style" ></jupyter-widget>
@@ -24,13 +27,19 @@
 
 <script>
 module.exports = {
+    data() {
+        return {
+            menu_target: undefined,
+        }
+    },
     methods: {
-        show(e, on) {
+        show(e) {
             // hide menu, and trigger the event on the next tick, otherwise vue does not see
             // `show_menu` changing and will no do any animation
             this.show_menu = false;
+            this.menu_target = [e.clientX, e.clientY];
             this.$nextTick(() => {
-                on.click(e)
+                this.show_menu = true;
             })
         }
     }
diff --git a/solara/lab/components/tabs.py b/solara/lab/components/tabs.py
index 2393c57c2..bee4c320c 100644
--- a/solara/lab/components/tabs.py
+++ b/solara/lab/components/tabs.py
@@ -36,7 +36,7 @@ def Tab(
     if label is not None:
         tab_children = [label] + tab_children
     if icon_name:
-        tab_children = [v.Icon(left=bool(label), children=[icon_name])] + tab_children
+        tab_children = [v.Icon(start=bool(label), children=[icon_name])] + tab_children
     style_flat = solara.util._flatten_style(style)
     class_ = solara.util._combine_classes(classes)
     # note: children is not used, it is only used in the Tabs component
@@ -241,24 +241,22 @@ def on_v_model(index: Optional[int]):
     with v.Tabs(
         v_model=reactive_value.value,
         on_v_model=on_v_model,
-        centered=align == "center",
-        right=align in ["right", "end"],
+        align_tabs="center" if align == "center" else "end" if align in ["right", "end"] else "start",
         children=children,
-        vertical=vertical,
+        direction="vertical" if vertical else None,
         color=color,
-        background_color=background_color,
+        bg_color=background_color,
         show_arrows=True,
         grow=grow,
-        dark=dark,
+        slider_color=slider_color,
     ) as tabs:
-        v.TabsSlider(color=slider_color)
         if has_content:
-            with v.TabsItems(v_model=reactive_value.value, on_v_model=on_v_model):
+            with v.Window(v_model=reactive_value.value, on_v_model=on_v_model):
                 for i, child in enumerate(children):
                     if not lazy or reactive_value.value == i:
-                        v.TabItem(children=child.kwargs.get("children", []), value=i)
+                        v.WindowItem(children=child.kwargs.get("children", []), value=i)
                     else:
-                        v.TabItem(
+                        v.WindowItem(
                             value=i,
                             children=[
                                 # Nice idea, but by using the widget interface the tab does not change without binding using
diff --git a/solara/layout.py b/solara/layout.py
index ef3aeecb7..7085b5944 100644
--- a/solara/layout.py
+++ b/solara/layout.py
@@ -19,11 +19,11 @@ def LayoutApp(children=[], left=None, right=None, open_left=False, open_right=Fa
     open_right, set_open_right = solara.use_state(open_right)
     with v.Html(tag="div") as main:
         if left:
-            with v.NavigationDrawer(absolute=True, right=False, width="min-content", v_model=open_left):
+            with v.NavigationDrawer(absolute=True, location="left", width="min-content", v_model=open_left):
                 AppIcon(open_left, on_click=lambda: set_open_left(not open_left))
                 with v.Html(tag="div", children=[left]):
                     pass
-        with v.Toolbar(dense=True, class_="elevation-3", dark=False):
+        with v.Toolbar(density="compact", class_="elevation-3"):
             if left:
                 AppIcon(open_left, on_click=lambda: set_open_left(not open_left))
             v.ToolbarTitle(children=[title])
@@ -35,7 +35,7 @@ def LayoutApp(children=[], left=None, right=None, open_left=False, open_right=Fa
         with v.Row():
             v.Col(cols=12, children=[*children])
         if right:
-            with v.NavigationDrawer(absolute=True, right=True, width="min-content", v_model=open_right):
+            with v.NavigationDrawer(absolute=True, location="right", width="min-content", v_model=open_right):
                 with v.Btn(icon=True) as btn:
                     vue.use_event(btn, "click", lambda *_ignore: set_open_right(not open_right))
                     v.Icon(children=["mdi-settings"])
diff --git a/solara/server/static/main-vuetify.js b/solara/server/static/main-vuetify.js
index 40bcc0a8c..e6308043f 100644
--- a/solara/server/static/main-vuetify.js
+++ b/solara/server/static/main-vuetify.js
@@ -16,7 +16,7 @@ var jupyterWidgetMountPoint = {
             .then(async widgetView => {
                 const model = widgetView.model;
                 if (['VuetifyView', 'VuetifyTemplateView'].includes(model.get('_view_name'))) {
-                    if (['VueTemplateModel', 'VuetifyTemplateModel'].includes(model.get('_model_name'))) {
+                    if (['VueTemplateModel', 'VuetifyTemplateModel', 'HtmlModel'].includes(model.get('_model_name'))) {
                         await registerVueComponents(this, widgetView);
                     }
                     if (Vue.h) {
diff --git a/solara/template/portal/solara_portal/pages/__init__.py b/solara/template/portal/solara_portal/pages/__init__.py
index 4a59d2f9f..8b1691e83 100644
--- a/solara/template/portal/solara_portal/pages/__init__.py
+++ b/solara/template/portal/solara_portal/pages/__init__.py
@@ -24,21 +24,20 @@ def PeopleCard(name):
 def Layout(children=[]):
     router = solara.use_context(solara.routing.router_context)
     with solara.VBox() as navigation:
-        with rv.List(dense=True):
-            with rv.ListItemGroup(v_model=router.path):
-                with solara.Link(solara.resolve_path("/")):
-                    with solara.ListItem("Home", icon_name="mdi-home", value="/"):
-                        pass
-                with solara.ListItem("tabular data", icon_name="mdi-database"):
-                    for name in names:
-                        pathname = f"/tabular/{name}"
-                        with solara.Link(solara.resolve_path(pathname)):
-                            solara.ListItem(name, value=pathname)
-                with solara.ListItem("Articles", icon_name="mdi-book-open"):
-                    for name, article_ in articles.items():
-                        pathname = f"/article/{name}"
-                        with solara.Link(solara.resolve_path(pathname)):
-                            solara.ListItem(article_.title, value=pathname)
+        with rv.List(density="compact", selected=[router.path]):
+            with solara.Link(solara.resolve_path("/")):
+                with solara.ListItem("Home", icon_name="mdi-home", value="/"):
+                    pass
+            with solara.ListItem("tabular data", icon_name="mdi-database"):
+                for name in names:
+                    pathname = f"/tabular/{name}"
+                    with solara.Link(solara.resolve_path(pathname)):
+                        solara.ListItem(name, value=pathname)
+            with solara.ListItem("Articles", icon_name="mdi-book-open"):
+                for name, article_ in articles.items():
+                    pathname = f"/article/{name}"
+                    with solara.Link(solara.resolve_path(pathname)):
+                        solara.ListItem(article_.title, value=pathname)
 
     with solara.AppLayout(navigation=navigation, title="Solara demo", children=children) as main:
         pass
diff --git a/solara/website/components/algolia_api.vue b/solara/website/components/algolia_api.vue
index b05051d91..997a969bb 100644
--- a/solara/website/components/algolia_api.vue
+++ b/solara/website/components/algolia_api.vue
@@ -1,20 +1,21 @@
 <template>
     <v-menu
         v-model="show_results"
-        offset-y>
-        <template v-slot:activator="{ on }">
+        location="bottom"
+        :offset="4">
+        <template v-slot:activator="{ props }">
                 <v-text-field
                     v-model="query"
                     prepend-inner-icon="mdi-magnify"
                     hide-details
-                    dense
+                    density="compact"
                     :placeholder="mac ? '⌘K to search' : 'Ctrl+K to search'"
-                    filled
-                    outlined
+                    variant="outlined"
                     clearable
                     ref="search"
                     style="flex-grow: 1; max-width: 650px;"
-                    @click="show($event, on);"
+                    v-bind="props"
+                    @click="show($event);"
                     @keyup.enter="hoverItem === null ? item = 0 : item = hoverItem"
                     @keyup.esc="close();"
                     @keyup.down="hoverItem = hoverItem == null ? 0 : Math.min(hoverItem + 1, results.hits.length - 1, 9)"
@@ -25,35 +26,32 @@
         </template>
         <v-list v-if="results != null && results.length == 0">
             <v-list-item>
-                <v-list-item-content>
+                <v-list-item-title>
                     {{this.query == "" ? "Start Typing to Search" : "No search results found."}}
-                </v-list-item-content>
+                </v-list-item-title>
             </v-list-item>
         </v-list>
         <v-list v-else :style="{width: menuWidth + 'px'}">
-            <v-list-item-group v-model="item">
-                <v-list-item v-for="(element, index) in this.results.hits" :key="element['url']" :input-value="index === hoverItem">
-                    <v-list-item-content>
-                        <v-list-item-title>
-                            {{ element.hierarchy.lvl1 }}
-                        </v-list-item-title>
-                        <v-list-item-subtitle v-if="element.hierarchy.lvl2 !== null">
-                            {{ element.hierarchy.lvl2 }}
-                        </v-list-item-subtitle>
-                        <v-list-item-subtitle v-html="getSnippet(element)"></v-list-item-subtitle>
-                    </v-list-item-content>
+                <v-list-item
+                    v-for="(element, index) in this.results.hits"
+                    :key="element['url']"
+                    :active="index === hoverItem || index === item"
+                    @click="item = index">
+                    <v-list-item-title>
+                        {{ element.hierarchy.lvl1 }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle v-if="element.hierarchy.lvl2 !== null">
+                        {{ element.hierarchy.lvl2 }}
+                    </v-list-item-subtitle>
+                    <v-list-item-subtitle v-html="getSnippet(element)"></v-list-item-subtitle>
                 </v-list-item>
-            </v-list-item-group>
             <v-list-item v-if="this.results.nbHits > 10">
-                <v-list-item-content>
-                    <v-list-item-title>And {{ this.results.nbHits - 10}} More...</v-list-item-title>
-                </v-list-item-content>
+                <v-list-item-title>And {{ this.results.nbHits - 10}} More...</v-list-item-title>
             </v-list-item>
         </v-list>
     </v-menu>
 </template>
 <script>
-const search = ref(null);
 module.exports = {
     async mounted() {
         window.search = this;
@@ -85,10 +83,10 @@ module.exports = {
         },
     },
     methods: {
-        show( e, on ) {
+        show( e ) {
             this.show_results = false;
             this.$nextTick( () => {
-                on.click( e )
+                this.show_results = true;
             } );
         },
         close() {
@@ -113,11 +111,11 @@ module.exports = {
             });
         },
         async search() {
-            results = await this.index.search( this.query, { hitsPerPage: 10 } );
+            const results = await this.index.search( this.query, { hitsPerPage: 10 } );
             if (results) {
                 this.results = results;
             }else{
-                this.$set(this.results, []);
+                this.results = [];
             }
         },
         selectText() {
diff --git a/solara/website/components/contact.py b/solara/website/components/contact.py
index 316522c8f..7a7171718 100644
--- a/solara/website/components/contact.py
+++ b/solara/website/components/contact.py
@@ -127,7 +127,7 @@ def send(*_ignore):
         v_model=error.value is not None,
         timeout=5000,
         on_v_model=lambda *_: error.set(None),
-        left=True,
+        location="bottom start",
         color="error",
     ):
         solara.Markdown(error.value or "", style={"--dark-color-text": "white", "--color-text": "white"})
@@ -137,7 +137,7 @@ def send(*_ignore):
         v_model=success.value,
         timeout=5000,
         on_v_model=lambda *_: success.set(False),
-        left=True,
+        location="bottom start",
         color="success",
     ):
         solara.Markdown("Your message has been sent!", style={"--dark-color-text": "white", "--color-text": "white"})
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
index 68070978c..9ffcb3787 100644
--- a/solara/website/components/header.py
+++ b/solara/website/components/header.py
@@ -25,9 +25,7 @@ def Header(
         #         "div",
         #         unsafe_innerHTML="<a href='https://github.com/widgetti/solara' target='_blank' >Star us on github 🤩</a>",
         #     )
-        with solara.v.AppBar(
-            tag="header", flat=True, clipped_left=True, style_="background-color: transparent; border-bottom: 1px solid var(--color-border-appbar);"
-        ):
+        with solara.v.AppBar(tag="header", flat=True, style_="background-color: transparent; border-bottom: 1px solid var(--color-border-appbar);"):
             if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
                 with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()):
                     rv.Icon(children=["mdi-menu"])
diff --git a/solara/website/components/markdown_nav.vue b/solara/website/components/markdown_nav.vue
index 0c54346ad..843acac00 100644
--- a/solara/website/components/markdown_nav.vue
+++ b/solara/website/components/markdown_nav.vue
@@ -1,16 +1,14 @@
 <template>
-    <v-list dense :style="`margin: 40px 24px 0 24px; position: sticky; top: 88px; align-self: flex-start;`" class="d-none d-lg-inline-block">
+    <v-list density="compact" :style="`margin: 40px 24px 0 24px; position: sticky; top: 88px; align-self: flex-start;`" class="d-none d-lg-inline-block">
         <v-list-item
             v-for="(element, index) in this.sections"
             :key="index"
             :href="'#' + element.id"
             :style="'padding-left: ' + (16 + (element.nodeName[1] - 1) * 20) + 'px;'"
         >
-            <v-list-item-content>
-                <v-list-item-title>
-                    {{ element.innerText }}
-                </v-list-item-title>
-            </v-list-item-content>
+            <v-list-item-title>
+                {{ element.innerText }}
+            </v-list-item-title>
         </v-list-item>
     </v-list>
 </template>
diff --git a/solara/website/components/sidebar.py b/solara/website/components/sidebar.py
index e1c7535c3..9a8f18ea2 100644
--- a/solara/website/components/sidebar.py
+++ b/solara/website/components/sidebar.py
@@ -15,91 +15,63 @@ def Sidebar():
             break
 
     with solara.v.List(
-        expand=True,
         nav=True,
+        selected=[router.path],
         style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto;",
     ) as main:
-        with solara.v.ListItemGroup(v_model=router.path):
-            # e.g. getting_started, examples, components, api, advanced, faq
-            for route in all_routes:
-                if len(route.children) == 1 or route.path == "/":
-                    with solara.Link("/documentation/" + route.path if route.path != "/" else "/documentation"):
-                        with solara.v.ListItem(value="/documentation/" + route.path if route.path != "/" else "/documentation"):
-                            if route.path == "/":
-                                solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-home"])])
-                            solara.v.ListItemTitle(style_="padding: 0 20px;", children=[route.label])
-                else:
-                    path_top_level = "/documentation/" + route.path
-                    top_level_expanded = router.path.startswith(path_top_level)
-                    with solara.v.ListGroup(
-                        v_slots=[
-                            {
-                                "name": "activator",
-                                "children": solara.v.ListItemTitle(
-                                    children=[route.label],
-                                    style_="padding: 0 20px;",
-                                ),
-                            }
-                        ],
-                        value=top_level_expanded,
-                        eager=True,  # better for SEO
-                    ):
-                        for item in route.children:
-                            label = item.label
-                            if item.path == "/" and route.path in ["examples", "api", "components"]:
-                                # the 'homepage' of the subpage are named Overview
-                                label = "Overview"
-                            path_sub = "/documentation/" + route.path + "/" + item.path
-                            sub_should_be_expanded = router.path.startswith(path_sub)
-                            if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
-                                with solara.v.ListGroup(
-                                    v_slots=[
-                                        {
-                                            "name": "activator",
-                                            "children": solara.v.ListItemTitle(
-                                                children=[label],
-                                            ),
-                                        }
-                                    ],
-                                    sub_group=True,
-                                    no_action=True,
-                                    eager=True,  # better for SEO
-                                    value=sub_should_be_expanded,
-                                ):
-                                    for subitem in item.children:
-                                        # skip the 'homepage' of the examples only
-                                        if subitem.path == "/" and route.path not in ["getting_started", "advanced"]:
-                                            continue
-                                        path = (
-                                            "/documentation/" + route.path + "/" + item.path + "/" + (subitem.path if subitem.path != "/" else "")
-                                            if item.path != "fullscreen"
-                                            else "/apps/" + subitem.path
-                                        )
-                                        with solara.Link(
-                                            path,
-                                        ):
-                                            with solara.v.ListItem(dense=True, style_="margin-left: 40px; padding: 0 20px;", value=path):
-                                                solara.v.ListItemContent(
-                                                    children=[subitem.label],
-                                                )
-                            else:
-                                path = "/documentation/" + route.path + ("/" + item.path if item.path != "/" else "")
-                                with solara.Link(path):
-                                    with solara.v.ListItem(dense=True, style_="padding: 0 20px;", value=path):
-                                        solara.v.ListItemContent(
-                                            children=[label],
-                                        )
-            with solara.Link("/contact"):
-                with solara.v.ListItem(value="/contact"):
-                    solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-email"])])
-                    solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Contact"])
-            with solara.Link("/changelog"):
-                with solara.v.ListItem(value="/changelog"):
-                    solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-history"])])
-                    solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Changelog"])
-            with solara.Link("/roadmap"):
-                with solara.v.ListItem(value="/roadmap"):
-                    solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-road"])])
-                    solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Roadmap"])
+        # e.g. getting_started, examples, components, api, advanced, faq
+        for route in all_routes:
+            if len(route.children) == 1 or route.path == "/":
+                with solara.Link("/documentation/" + route.path if route.path != "/" else "/documentation"):
+                    solara.v.ListItem(
+                        value="/documentation/" + route.path if route.path != "/" else "/documentation",
+                        prepend_icon="mdi-home" if route.path == "/" else None,
+                        title=route.label,
+                        style_="padding: 0 20px;",
+                    )
+            else:
+                path_top_level = "/documentation/" + route.path
+                top_level_expanded = router.path.startswith(path_top_level)
+                with solara.v.ListGroup(
+                    title=route.label,
+                    value=top_level_expanded,
+                    style_="padding: 0 20px;",
+                ):
+                    for item in route.children:
+                        label = item.label
+                        if item.path == "/" and route.path in ["examples", "api", "components"]:
+                            # the 'homepage' of the subpage are named Overview
+                            label = "Overview"
+                        path_sub = "/documentation/" + route.path + "/" + item.path
+                        sub_should_be_expanded = router.path.startswith(path_sub)
+                        if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
+                            with solara.v.ListGroup(
+                                title=label,
+                                subgroup=True,
+                                value=sub_should_be_expanded,
+                            ):
+                                for subitem in item.children:
+                                    # skip the 'homepage' of the examples only
+                                    if subitem.path == "/" and route.path not in ["getting_started", "advanced"]:
+                                        continue
+                                    path = (
+                                        "/documentation/" + route.path + "/" + item.path + "/" + (subitem.path if subitem.path != "/" else "")
+                                        if item.path != "fullscreen"
+                                        else "/apps/" + subitem.path
+                                    )
+                                    with solara.Link(
+                                        path,
+                                    ):
+                                        solara.v.ListItem(density="compact", style_="margin-left: 40px; padding: 0 20px;", value=path, title=subitem.label)
+                        else:
+                            path = "/documentation/" + route.path + ("/" + item.path if item.path != "/" else "")
+                            with solara.Link(path):
+                                solara.v.ListItem(density="compact", style_="padding: 0 20px;", value=path, title=label)
+        with solara.Link("/contact"):
+            solara.v.ListItem(value="/contact", prepend_icon="mdi-email", title="Contact", style_="padding: 0 20px;")
+        with solara.Link("/changelog"):
+            solara.v.ListItem(value="/changelog", prepend_icon="mdi-history", title="Changelog", style_="padding: 0 20px;")
+        with solara.Link("/roadmap"):
+            solara.v.ListItem(value="/roadmap", prepend_icon="mdi-road", title="Roadmap", style_="padding: 0 20px;")
 
     return main
diff --git a/solara/website/pages/__init__.py b/solara/website/pages/__init__.py
index e766dca25..5e3b39538 100644
--- a/solara/website/pages/__init__.py
+++ b/solara/website/pages/__init__.py
@@ -271,7 +271,7 @@ def Layout(children=[]):
                 on_toggle_left_menu=lambda: set_show_left_menu(not show_left_menu),
                 on_toggle_right_menu=lambda: set_show_right_menu(not show_right_menu),
             )
-            with rv.Container(tag="section", fluid=True, ma_0=True, pa_0=True, class_="fill-height solara-content-main"):
+            with rv.Container(tag="section", fluid=True, class_="fill-height solara-content-main ma-0 pa-0"):
                 if route_current is None:
                     return solara.Error("Page not found")
                 else:
@@ -297,7 +297,6 @@ def Layout(children=[]):
                                 route_current.module.Sidebar()
                         with rv.Col(
                             tag="main",
-                            md=True,
                             class_="pa-0",
                             style_="max-width: 1024px" if route_current.path == "showcase" else "",
                         ):
@@ -314,30 +313,24 @@ def Layout(children=[]):
                 with rv.NavigationDrawer(
                     v_model=show_right_menu,
                     on_v_model=set_show_right_menu,
-                    fixed=True,
                     absolute=True,
-                    right=True,
-                    hide_overlay=False,
-                    overlay_color="#000000",
-                    overlay_opacity=0.5,
+                    location="right",
+                    scrim="#000000",
                     style_="height: 100vh",
                 ):
                     Algolia()
-                    with rv.List(nav=True):
-                        with rv.ListItemGroup(active_class="text--primary"):
-                            for route in all_routes:
-                                if route.path == "apps":
-                                    continue
-                                with solara.Link(route):
-                                    solara.ListItem(route.label)
+                    with rv.List(nav=True, active_class="text--primary"):
+                        for route in all_routes:
+                            if route.path == "apps":
+                                continue
+                            with solara.Link(route):
+                                solara.ListItem(route.label)
 
                 if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
                     with solara.v.NavigationDrawer(
                         absolute=True,
-                        clipped=True,
                         class_="d-md-none d-block",
-                        height="unset",
-                        style_="min-height: 100vh;",
+                        style_="min-height: 100vh; height: unset;",
                         v_model=show_left_menu,
                         on_v_model=set_show_left_menu,
                         width="20rem",
@@ -350,18 +343,17 @@ def Testimonial(text, name, position, img):
     max_width = "300px"
     with rv.Card(
         elevation=2,
-        dark=False,
         max_width=max_width,
         class_="testimonial-card",
     ):
         with rv.CardActions():
             with rv.ListItem(class_="grow"):
-                with rv.ListItemAvatar(color="grey darken-3"):
+                with rv.Avatar(color="grey darken-3", start=True):
                     rv.Img(
                         class_="elevation-6",
                         src=img,
                     )
-                with rv.ListItemContent():
+                with solara.Column(gap="0"):
                     rv.ListItemTitle(children=[name])
                     rv.ListItemSubtitle(children=[position], style_="white-space: unset;")
         rv.CardText(
diff --git a/solara/website/pages/doc_use_download.py b/solara/website/pages/doc_use_download.py
index f9557b9a4..8c325f13e 100644
--- a/solara/website/pages/doc_use_download.py
+++ b/solara/website/pages/doc_use_download.py
@@ -28,7 +28,7 @@ def DownloadFile(file_path=file_path, url=url, expected_size=expected_size, on_d
         # with w.VBox() as main:
         with rv.Row():
             with rv.Col(cols=1):
-                progressbar = rv.ProgressLinear(value=download.progress * 100, color="primary", striped=True, height=20)
+                progressbar = rv.ProgressLinear(model_value=download.progress * 100, color="primary", striped=True, height=20)
             # with rv.Col(cols=1):
             #     MarkdownIt(f'{status}')
     return main
diff --git a/solara/website/pages/documentation/__init__.py b/solara/website/pages/documentation/__init__.py
index fe80f1964..877d9891e 100644
--- a/solara/website/pages/documentation/__init__.py
+++ b/solara/website/pages/documentation/__init__.py
@@ -37,7 +37,7 @@ def Page():
                                 },
                             ):
                                 solara.HTML(tag="h2", unsafe_innerHTML=route.label, style={"color": "white", "display": "block", "flex-grow": "1"})
-                                solara.v.Icon(children=["mdi-arrow-right"], color="var(--color-grey-light)", x_large=True, class_="docs-card-icon")
+                                solara.v.Icon(children=["mdi-arrow-right"], color="var(--color-grey-light)", size="x-large", class_="docs-card-icon")
                 with solara.Column(gap="10px", style={"flex-wrap": "wrap", "max-width": "80%"}):
                     solara.HTML(tag="h2", unsafe_innerHTML="How to use our documentation:", style={"padding": "1.5rem"})
                     solara.Markdown(
diff --git a/solara/website/pages/documentation/examples/ai/tokenizer.py b/solara/website/pages/documentation/examples/ai/tokenizer.py
index 58e9b1487..37fcf6df9 100644
--- a/solara/website/pages/documentation/examples/ai/tokenizer.py
+++ b/solara/website/pages/documentation/examples/ai/tokenizer.py
@@ -37,12 +37,12 @@
 def GithubAvatar(name: str, handle: str, img: str):
     with solara.v.Html(tag="a", attributes={"href": f"https://github.com/{handle}/", "target": "_blank"}):
         with solara.v.ListItem(class_="pa-0"):
-            with solara.v.ListItemAvatar(color="grey darken-3"):
+            with solara.v.Avatar(color="grey darken-3", start=True):
                 solara.v.Img(
                     class_="elevation-6",
                     src=img,
                 )
-            with solara.v.ListItemContent():
+            with solara.Column(gap="0"):
                 solara.v.ListItemTitle(children=["By " + name])
 
 
diff --git a/solara/website/pages/documentation/examples/general/login_oauth.py b/solara/website/pages/documentation/examples/general/login_oauth.py
index 98f6d1352..f0fd8b17a 100644
--- a/solara/website/pages/documentation/examples/general/login_oauth.py
+++ b/solara/website/pages/documentation/examples/general/login_oauth.py
@@ -21,12 +21,12 @@ def UserCard():
         if user_info:
             # based on https://v2.vuetifyjs.com/en/components/cards/#props
             with v.Card(width="400px"):
-                with v.ListItem(three_line=True):
-                    with v.ListItemContent():
+                with v.ListItem(lines="three"):
+                    with sl.Column(gap="0"):
                         sl.Div("Logged in", class_="text-overline mb-4")
                         v.ListItemTitle(children=[user_info["email"]])
                         v.ListItemSubtitle(children=["You are now logged in, log out via the app bar, or the button below"])
-                    with v.ListItemAvatar():
+                    with v.Avatar():
                         auth.Avatar()
 
                 with v.CardActions():
diff --git a/solara/website/pages/documentation/examples/general/mycard.vue b/solara/website/pages/documentation/examples/general/mycard.vue
index f68d47b05..ddea3c182 100644
--- a/solara/website/pages/documentation/examples/general/mycard.vue
+++ b/solara/website/pages/documentation/examples/general/mycard.vue
@@ -1,8 +1,8 @@
 <template>
-    <v-card class="text-center" :color="color" dark>
+    <v-card class="text-center" :color="color" theme="dark">
         <v-card-text>
             <v-sheet color="rgba(0, 0, 0, .12)">
-                <v-sparkline :value="value" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round"
+                <v-sparkline :model-value="value" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round"
                     smooth>
                     <template v-slot:label="item">
                         ${{ item.value }}
@@ -18,7 +18,7 @@
         <v-divider></v-divider>
 
         <v-card-actions class="justify-center">
-            <v-btn block text @click="goto_report">
+            <v-btn block variant="text" @click="goto_report">
                 Go to Report
             </v-btn>
         </v-card-actions>
@@ -46,7 +46,7 @@ export default {
     mounted: () => {
         console.log('mounted');
     },
-    destroyed: () => {
+    unmounted: () => {
         console.log('destroyed');
     },
     watch: {
diff --git a/solara/website/pages/documentation/examples/general/pokemon_search.py b/solara/website/pages/documentation/examples/general/pokemon_search.py
index e8e048e0a..b715b3430 100644
--- a/solara/website/pages/documentation/examples/general/pokemon_search.py
+++ b/solara/website/pages/documentation/examples/general/pokemon_search.py
@@ -42,7 +42,7 @@ def Page():
                             name = pokemon["name"]
                             url = f"{pokemon_base_url}/{pokemon['image']}"
                             # TODO: how to do this with solara
-                            rv.Img(src=url, contain=True, max_height="200px")
+                            rv.Img(src=url, cover=False, max_height="200px")
                             solara.Text(name)
             else:
                 with solara.Div():
diff --git a/solara/website/pages/home.vue b/solara/website/pages/home.vue
index e0b02863e..125dac659 100644
--- a/solara/website/pages/home.vue
+++ b/solara/website/pages/home.vue
@@ -1165,7 +1165,7 @@ module.exports = {
     mounted() {
         document.querySelectorAll('a').forEach(this.setupRouter);
     },
-    destroyed() {
+    unmounted() {
         // when ssg is on, this css is not getting removed
         if(document.getElementById('ipyvue-solara-website-homepage')) {
             document.getElementById('ipyvue-solara-website-homepage').remove();
diff --git a/solara/website/pages/showcase/__init__.py b/solara/website/pages/showcase/__init__.py
index 2dc5c8d4a..31c3abc63 100644
--- a/solara/website/pages/showcase/__init__.py
+++ b/solara/website/pages/showcase/__init__.py
@@ -17,7 +17,7 @@ def Page():
                 solara.Image("https://dxhl76zpt6fap.cloudfront.net/public/showcase/wanderlust/thumbnail.png", width="100%")
             with solara.v.Html(tag="a", attributes={"href": "https://github.com/widgetti/wanderlust", "target": "_blank"}):
                 with solara.Row(style={"min-height": "24px"}):
-                    solara.v.Icon(children=["mdi-github-circle"], x_large=True, class_="mr-2")
+                    solara.v.Icon(children=["mdi-github-circle"], size="x-large", class_="mr-2")
 
         with solara.Card("Domino Code Assist", style={"height": "100%"}):
             solara.Markdown(
@@ -51,7 +51,7 @@ def Page():
                 solara.Image("https://user-images.githubusercontent.com/1765949/237517090-8f7242b1-3189-4c5b-abd3-0f0986292ade.png", width="100%")
             with rv.Html(tag="a", attributes={"href": "https://github.com/Ben-Epstein/", "target": "_blank"}):
                 with rv.ListItem(class_="grow"):
-                    with rv.ListItemAvatar(color="grey darken-3"):
+                    with rv.Avatar(color="grey darken-3", start=True):
                         rv.Img(
                             class_="elevation-6",
                             src=img,
@@ -81,25 +81,25 @@ def Page():
                 solara.Image("https://dxhl76zpt6fap.cloudfront.net/public/showcase/solarathon_2023_team_2/thumbnail.png", width="100%")
             with solara.v.Html(tag="a", attributes={"href": "https://github.com/alonsosilvaallende/solarathon", "target": "_blank"}):
                 with solara.Row(style={"min-height": "24px"}):
-                    solara.v.Icon(children=["mdi-github-circle"], x_large=True, class_="mr-2")
+                    solara.v.Icon(children=["mdi-github-circle"], size="x-large", class_="mr-2")
 
         with solara.Card("Team 4: Live Cryptocurrency Dashboard", style={"height": "100%"}):
             with solara.Link("./solarathon_2023_team_4"):
                 solara.Image("https://dxhl76zpt6fap.cloudfront.net/public/showcase/solarathon_2023_team_4/thumbnail.png", width="100%")
             with solara.v.Html(tag="a", attributes={"href": "https://github.com/theeldermillenial/solarathon", "target": "_blank"}):
                 with solara.Row(style={"min-height": "24px"}):
-                    solara.v.Icon(children=["mdi-github-circle"], x_large=True, class_="mr-2")
+                    solara.v.Icon(children=["mdi-github-circle"], size="x-large", class_="mr-2")
 
         with solara.Card("Team 5: Sports Video Analysis", style={"height": "100%"}):
             with solara.Link("./solarathon_2023_team_5"):
                 solara.Image("https://dxhl76zpt6fap.cloudfront.net/public/showcase/solarathon_2023_team_5/thumbnail.png", width="100%")
             with solara.v.Html(tag="a", attributes={"href": "https://github.com/FelipeCabelloE/solarathon-team5/", "target": "_blank"}):
                 with solara.Row(style={"min-height": "24px"}):
-                    solara.v.Icon(children=["mdi-github-circle"], x_large=True, class_="mr-2")
+                    solara.v.Icon(children=["mdi-github-circle"], size="x-large", class_="mr-2")
 
         with solara.Card("Team 6: Automatic FAQ Creator", style={"height": "100%"}):
             with solara.Link("./solarathon_2023_team_6"):
                 solara.Image("https://dxhl76zpt6fap.cloudfront.net/public/showcase/solarathon_2023_team_6/thumbnail.png", width="100%")
             with solara.v.Html(tag="a", attributes={"href": "https://github.com/silvhua/solarathon-faq-creator", "target": "_blank"}):
                 with solara.Row(style={"min-height": "24px"}):
-                    solara.v.Icon(children=["mdi-github-circle"], x_large=True, class_="mr-2")
+                    solara.v.Icon(children=["mdi-github-circle"], size="x-large", class_="mr-2")
diff --git a/solara/widgets/vue/gridlayout.vue b/solara/widgets/vue/gridlayout.vue
index 40c65b26b..c9020f882 100644
--- a/solara/widgets/vue/gridlayout.vue
+++ b/solara/widgets/vue/gridlayout.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-if="gridlayout_loaded" style="padding: 0px; width: 100%;">
        <grid-layout
-            :layout.sync="grid_layout"
+            v-model:layout="grid_layout"
             :col-num="col_num"
             :row-height="row_height"
             :is-draggable="draggable"
diff --git a/solara/widgets/vue/navigator.vue b/solara/widgets/vue/navigator.vue
index cae8f1ac6..9d2086d58 100644
--- a/solara/widgets/vue/navigator.vue
+++ b/solara/widgets/vue/navigator.vue
@@ -26,7 +26,7 @@ modules.export = {
     window.addEventListener("hashchange", this.onHashChange);
     window.addEventListener("solara.pageReady", this.onPageLoad);
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener("popstate", this.onPopState);
     window.removeEventListener("scroll", this.onScroll);
     window.removeEventListener("hashchange", this.onHashChange);
diff --git a/solara/widgets/vue/vegalite.vue b/solara/widgets/vue/vegalite.vue
index dcf3d3c54..660c12c7a 100644
--- a/solara/widgets/vue/vegalite.vue
+++ b/solara/widgets/vue/vegalite.vue
@@ -15,7 +15,7 @@ module.exports = {
     mounted() {
         this.do_plot_debounced();
     },
-    destroyed() {
+    unmounted() {
         if (this.observer) {
             this.observer.disconnect();
         }
@@ -33,7 +33,7 @@ module.exports = {
             require(['vega', 'vega-lite', 'vega-embed'], (vega, vl, vegaEmbed) => {
                 (async () => {
                     const spec = {
-                        ...this.spec,
+                        ...JSON.parse(JSON.stringify(this.spec)),
                         "renderer": "svg",
                     };
                     if (spec.width === "container") {
@@ -74,9 +74,9 @@ module.exports = {
             require.config({
                 map: {
                     '*': {
-                        'vega': `${this.getCdn()}/vega@5/build/vega.min.js`,
-                        'vega-lite': `${this.getCdn()}/vega-lite@5/build/vega-lite.min.js`,
-                        'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
+                        'vega': `${this.getCdn()}/vega@6.2.0/build/vega.min.js`,
+                        'vega-lite': `${this.getCdn()}/vega-lite@6.4.3/build/vega-lite.min.js`,
+                        'vega-embed': `${this.getCdn()}/vega-embed@7.1.0/build/vega-embed.min.js`,
                     }
                 }
             })
diff --git a/tests/integration/api_test.py b/tests/integration/api_test.py
index 551e95652..101055540 100644
--- a/tests/integration/api_test.py
+++ b/tests/integration/api_test.py
@@ -18,69 +18,71 @@
 #         page.locator('button:has-text("Reset to initial layout")').wait_for()
 
 
-def test_api_markdown_editor(page_session: playwright.sync_api.Page, solara_server, solara_app):
+def test_api_markdown_editor(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
-        page_session.goto(solara_server.base_url + "/documentation/components/")
-        page_session.locator(".v-card >> text=Markdown Editor").first.click()
-        page_session.locator('h1:has-text("Large heading")').wait_for()
+        page.goto(solara_server.base_url + "/documentation/components/")
+        page.locator(".v-card >> text=Markdown Editor").first.click()
+        page.locator('h1:has-text("Large heading")').wait_for()
 
 
-def test_api_file_browser(page_session: playwright.sync_api.Page, solara_server, solara_app):
+def test_api_file_browser(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
-        page_session.goto(solara_server.base_url + "/documentation/components/")
-        page_session.locator(".v-card >> text=File Browser").first.click()
-        page_session.locator("text=You are in directory").wait_for()
+        page.goto(solara_server.base_url + "/documentation/components/")
+        page.locator(".v-card >> text=File Browser").first.click()
+        page.locator("text=You are in directory").wait_for()
 
 
-def test_api_matplotlib(page_session: playwright.sync_api.Page, solara_server, solara_app):
+def test_api_matplotlib(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
-        page_session.goto(solara_server.base_url + "/documentation/components/viz/matplotlib")
-        page_session.locator("text=Arguments").first.wait_for()
+        page.goto(solara_server.base_url + "/documentation/components/viz/matplotlib")
+        page.locator("text=Arguments").first.wait_for()
 
 
-def test_api_style(page_session: playwright.sync_api.Page, solara_server, solara_app):
+def test_api_style(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
-        page_session.goto(solara_server.base_url + "/documentation/components/advanced/style")
-        page_session.locator("text=Add a custom piece of CSS").first.wait_for()
-        expect(page_session.locator(".mybutton")).to_have_css("color", "rgb(76, 175, 80)")
+        page.goto(solara_server.base_url + "/documentation/components/advanced/style")
+        page.locator("text=Add a custom piece of CSS").first.wait_for()
+        expect(page.locator(".mybutton")).to_have_css("color", "rgb(76, 175, 80)")
 
         # disable css
-        page_session.locator('_vue=v-checkbox[label="Use CSS"]').click()
-        expect(page_session.locator(".mybutton")).to_have_css("color", "rgba(0, 0, 0, 0.87)")
+        page.get_by_role("checkbox", name="Use CSS").click()
+        expect(page.locator(".mybutton")).to_have_css("color", "rgba(0, 0, 0, 0.87)")
 
         # enable css again
-        page_session.locator('_vue=v-checkbox[label="Use CSS"]').click()
-        expect(page_session.locator(".mybutton")).to_have_css("color", "rgb(76, 175, 80)")
+        page.get_by_role("checkbox", name="Use CSS").click()
+        expect(page.locator(".mybutton")).to_have_css("color", "rgb(76, 175, 80)")
 
 
-def test_api_cross_filter_select(page_session: playwright.sync_api.Page, solara_server, solara_app):
+def test_api_cross_filter_select(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
-        page_session.goto(solara_server.base_url + "/documentation/api/cross_filter/cross_filter_select")
-        page_session.locator("text=244").wait_for()
-        select_sex = page_session.locator('_vue=v-autocomplete[label="Select values in sex having values:"]')
-        select_sex.click()
-        page_session.locator("text=Female").click()
-        page_session.locator("text=87 / 244").wait_for()
+        page.goto(solara_server.base_url + "/documentation/api/cross_filter/cross_filter_select")
+        page.locator("text=244").wait_for()
+        page.locator("#loader-container").wait_for(state="hidden")
+        select_sex = page.locator(".v-autocomplete", has_text="Select values in sex having values:")
+        select_sex.get_by_label("Open").click()
+        page.locator("text=Female").click()
+        page.locator("text=87 / 244").wait_for()
 
 
-def test_dataframe(page_session: playwright.sync_api.Page, solara_server, solara_app):
+def test_dataframe(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
-        page_session.goto(solara_server.base_url + "/documentation/components/data/dataframe")
-        datatable_value_counts = page_session.locator(".solara-data-table").nth(1)
+        page.goto(solara_server.base_url + "/documentation/components/data/dataframe")
+        datatable_value_counts = page.locator(".solara-data-table").nth(1)
         datatable_value_counts.wait_for()
 
         # scroll and wait for stability of test
-        datatable_value_counts.locator("th >> text=species_id >> _vue=v-icon").wait_for()
-        datatable_value_counts.locator("th >> text=species_id >> _vue=v-icon").scroll_into_view_if_needed()
-        page_session.wait_for_timeout(1000)
+        species_menu = datatable_value_counts.locator("th", has_text="species_id").locator(".solara-data-table-menu")
+        species_menu.wait_for()
+        species_menu.scroll_into_view_if_needed()
+        page.wait_for_timeout(1000)
 
         # open the species hover menu
-        datatable_value_counts.locator("th >> text=species_id >> _vue=v-icon").hover()
-        page_session.locator("text=Value counts for species_id").wait_for()
-        page_session.locator("text=Name: count").wait_for()
+        species_menu.hover()
+        page.locator("text=Value counts for species_id").wait_for()
+        page.locator("text=Name: count").wait_for()
 
         # open the petal_width hover menu
-        datatable_value_counts.locator("th >> text=petal_width >> _vue=v-icon").hover()
-        page_session.locator("text=Name species").wait_for(state="detached")
-        page_session.locator("text=Value counts for petal_width").wait_for()
-        page_session.locator("text=Name: count").wait_for()
+        datatable_value_counts.locator("th", has_text="petal_width").locator(".solara-data-table-menu").hover()
+        page.locator("text=Name species").wait_for(state="detached")
+        page.locator("text=Value counts for petal_width").wait_for()
+        page.locator("text=Name: count").wait_for()
diff --git a/tests/integration/input_date_test.py b/tests/integration/input_date_test.py
index 3e5c9118d..d81438065 100644
--- a/tests/integration/input_date_test.py
+++ b/tests/integration/input_date_test.py
@@ -6,6 +6,21 @@
 
 date = dt.date(2018, 9, 1)
 date2 = date + dt.timedelta(days=1)
+date3 = date + dt.timedelta(days=2)
+
+
+def date_picker_popup(page: Page):
+    return page.locator('[role="menu"], [role="listbox"]')
+
+
+def input_label(page: Page):
+    return page.locator(".test-class label:not([aria-hidden='true'])")
+
+
+def apply_date_picker(page: Page):
+    ok_button = page.get_by_role("button", name="OK", exact=True)
+    if ok_button.count():
+        ok_button.click()
 
 
 def test_input_date_single(solara_test, page_session: Page):
@@ -30,31 +45,32 @@ def update_value(value: dt.date):
     expect(input).to_have_value(date.strftime("%Y/%m/%d"))
     input.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).to_be_visible()
+    expect(date_picker_popup(page_session)).to_be_visible()
     today_button = page_session.get_by_role("button", name=date.strftime("%d").lstrip("0"), exact=True)
     # We click it, but it does not trigger a change, so we don't auto close
     # Do we want to change this behaviour, and still close it?
     today_button.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).to_be_visible()
+    expect(date_picker_popup(page_session)).to_be_visible()
     tomorrow_button = page_session.get_by_role("button", name=date2.strftime("%d").lstrip("0"), exact=True)
     tomorrow_button.click()
+    apply_date_picker(page_session)
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).not_to_be_visible()
+    expect(date_picker_popup(page_session)).not_to_be_visible()
 
     input.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).to_be_visible()
-    page_session.mouse.click(400, 400)
+    expect(date_picker_popup(page_session)).to_be_visible()
+    page_session.mouse.click(10, 10)
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).not_to_be_visible()
+    expect(date_picker_popup(page_session)).not_to_be_visible()
 
     page_session.wait_for_timeout(350)
     input.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).to_be_visible()
+    expect(date_picker_popup(page_session)).to_be_visible()
     page_session.keyboard.press("Tab")
-    expect(page_session.get_by_role("menu")).not_to_be_visible()
+    expect(date_picker_popup(page_session)).not_to_be_visible()
 
 
 def test_input_date_range(solara_test, page_session: Page):
@@ -79,25 +95,26 @@ def update_value(value: List[dt.date]):
     expect(input).to_have_value(f"{date.strftime('%Y/%m/%d')} - {date2.strftime('%Y/%m/%d')}")
     input.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).to_be_visible()
+    expect(date_picker_popup(page_session)).to_be_visible()
     today_button = page_session.get_by_role("button", name=date.strftime("%d").lstrip("0"), exact=True)
     today_button.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.locator(".test-class label")).to_contain_text("label (Please select two dates)")
-    expect(page_session.get_by_role("menu")).to_be_visible()
-    tomorrow_button = page_session.get_by_role("button", name=date2.strftime("%d").lstrip("0"), exact=True)
-    tomorrow_button.click()
+    expect(input_label(page_session)).to_contain_text("label")
+    expect(date_picker_popup(page_session)).to_be_visible()
+    third_day_button = page_session.get_by_role("button", name=date3.strftime("%d").lstrip("0"), exact=True)
+    third_day_button.click()
+    apply_date_picker(page_session)
     page_session.wait_for_timeout(350)
-    expect(page_session.locator(".test-class label")).not_to_contain_text("(Please select two dates)")
-    expect(page_session.get_by_role("menu")).not_to_be_visible()
+    expect(input_label(page_session)).not_to_contain_text("(Please select two dates)")
+    expect(date_picker_popup(page_session)).not_to_be_visible()
     input.click()
-    page_session.mouse.click(400, 400)
+    page_session.mouse.click(10, 10)
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).not_to_be_visible()
+    expect(date_picker_popup(page_session)).not_to_be_visible()
 
     page_session.wait_for_timeout(350)
     input.click()
     page_session.wait_for_timeout(350)
-    expect(page_session.get_by_role("menu")).to_be_visible()
+    expect(date_picker_popup(page_session)).to_be_visible()
     page_session.keyboard.press("Tab")
-    expect(page_session.get_by_role("menu")).not_to_be_visible()
+    expect(date_picker_popup(page_session)).not_to_be_visible()
diff --git a/tests/unit/cross_filter_component_test.py b/tests/unit/cross_filter_component_test.py
index 2739f0ef1..abaa33df2 100644
--- a/tests/unit/cross_filter_component_test.py
+++ b/tests/unit/cross_filter_component_test.py
@@ -11,6 +11,7 @@
 import solara
 import solara.lab
 from solara.components.cross_filter import Select, magic_value_missing
+from solara.lab.utils.dataframe import df_filter_missing, df_len
 
 HERE = Path(__file__).parent
 
@@ -80,7 +81,7 @@ def Test(column=None, max_unique=100, multiple=False):
     select.value = {"value": magic_value_missing}
     assert filter is not None
     df = df_titanic[filter]
-    assert list(df.cabin.unique()) in [[None], []]
+    assert df_len(df[df_filter_missing(df, "cabin")]) == df_len(df)
 
     # changing column should clear filter
     rc.render(Test(column="boat"))
diff --git a/tests/unit/input_date_test.py b/tests/unit/input_date_test.py
index 0bde6d591..144959937 100644
--- a/tests/unit/input_date_test.py
+++ b/tests/unit/input_date_test.py
@@ -52,6 +52,18 @@ def test_input_date():
     assert input.widget.v_model == dt.date(2023, 10, 17).strftime("%Y/%m/%d")
 
 
+def test_input_date_accepts_date_picker_datetime():
+    on_value = MagicMock()
+    el = InputDate(value=today, label="label", on_value=on_value)
+    box, rc = solara.render(el, handle_error=False)
+    input = rc.find(vw.DatePicker)
+
+    input.widget.v_model = "2018-09-01T22:00:00.000Z"
+
+    expected = dt.datetime.fromisoformat("2018-09-01T22:00:00.000+00:00").astimezone().date()
+    assert on_value.call_args[0][0] == expected
+
+
 def test_input_date_optional():
     on_value = MagicMock()
     on_v_model = MagicMock()
@@ -146,3 +158,22 @@ def test_input_date_range():
     assert on_value.call_args[0][0] == tuple([dt.date(2023, 10, 17), tomorrow])
     assert not text_field.widget.error
     assert text_field.widget.v_model == f"{dt.date(2023, 10, 17).strftime('%Y/%m/%d')} - {tomorrow.strftime('%Y/%m/%d')}"
+
+    input.widget.v_model = ["2018-09-01T22:00:00.000Z", "2018-09-02T22:00:00.000Z"]
+    expected = tuple(
+        [
+            dt.datetime.fromisoformat("2018-09-01T22:00:00.000+00:00").astimezone().date(),
+            dt.datetime.fromisoformat("2018-09-02T22:00:00.000+00:00").astimezone().date(),
+        ]
+    )
+    assert on_value.call_args[0][0] == expected
+
+
+def test_input_date_range_empty():
+    el = InputDateRange(value=tuple(), label="label")
+    box, rc = solara.render(el, handle_error=False)
+    text_field = rc.find(vw.TextField)
+
+    assert text_field.widget.error
+    assert text_field.widget.label == "label (Please select two dates)"
+    assert text_field.widget.v_model == ""
diff --git a/tests/unit/slider_test.py b/tests/unit/slider_test.py
index 02581da9b..b32dd4c35 100644
--- a/tests/unit/slider_test.py
+++ b/tests/unit/slider_test.py
@@ -1,13 +1,15 @@
+from typing import Any, List, Optional
+
 import ipyvuetify as vw
 
 import solara
 
 
-def get_tick_labels(clazz, min, max, step, **kwargs) -> list:
+def get_tick_labels(clazz, min, max, step, **kwargs) -> Optional[List[Any]]:
     el = clazz(label="label", min=min, max=max, step=step, **kwargs)
     _, rc = solara.render(el, handle_error=False)
     switch = rc.find(vw.Slider)
-    labels = switch.widget.tick_labels
+    labels = switch.widget.ticks if switch.widget.show_ticks else None
     rc.close()
 
     return labels
@@ -25,7 +27,9 @@ def test_float_slider():
     reference_ticks = [3.0, 3.5, 4.0, 4.5, 5.0]
     middle_empty_str = [""] * (len(reference_ticks) - 2)
     assert get_tick_labels(solara.FloatSlider, 3, 5, 0.5, tick_labels="end_points") == ["3", *middle_empty_str, "5"]
-    assert list(map(float, get_tick_labels(solara.FloatSlider, 3, 5, 0.5, tick_labels=True))) == reference_ticks
+    tick_labels = get_tick_labels(solara.FloatSlider, 3, 5, 0.5, tick_labels=True)
+    assert tick_labels is not None
+    assert list(map(float, tick_labels)) == reference_ticks
     assert get_tick_labels(solara.FloatSlider, 3, 5, 0.5) is None
     assert get_tick_labels(solara.FloatSlider, 3, 5, 0.5, tick_labels=reference_ticks) == reference_ticks
 
diff --git a/tests/unit/tabs_test.py b/tests/unit/tabs_test.py
index 44af9e806..5f935cf85 100644
--- a/tests/unit/tabs_test.py
+++ b/tests/unit/tabs_test.py
@@ -31,14 +31,14 @@ def Test():
 
     box, rc = solara.render(Test(), handle_error=False)
     assert len(rc.find(v.Tab)) == 2
-    assert len(rc.find(v.TabsItems)) == 1
+    assert len(rc.find(v.Window)) == 1
     if lazy:
-        assert len(rc.find(v.TabItem)) == 2
+        assert len(rc.find(v.WindowItem)) == 2
         assert len(rc.find(v.SkeletonLoader)) == 0
         assert len(rc.find(v.Slider)) == 1
         assert len(rc.find(v.TextField)) == 0
     else:
-        assert len(rc.find(v.TabItem)) == 2
+        assert len(rc.find(v.WindowItem)) == 2
         assert len(rc.find(v.SkeletonLoader)) == 0
         assert len(rc.find(v.SkeletonLoader)) == 0
         assert len(rc.find(v.Slider)) == 1

From fe396270bb37b66ab5f28b5be826865b7561bd26 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 2 Jun 2026 21:41:09 +0200
Subject: [PATCH 02/27] don't publish dev-wheels for now

---
 .github/workflows/test.yaml | 76 ++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index b09441068..7ff42069f 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -107,44 +107,44 @@ jobs:
             packages/solara-vuetify-app/dist
             packages/solara-vuetify3-app/dist
 
-      - name: Publish dev wheels to object storage
-        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
-          AWS_REGION: nbg1
-          AWS_ENDPOINT_URL_S3: https://nbg1.your-objectstorage.com
-          S3_BUCKET: ipyvue3-packages
-        run: |
-          python -m pip install --upgrade awscli
-
-          aws s3 cp dist/ "s3://${S3_BUCKET}/packages/solara/" \
-            --recursive \
-            --exclude "*" \
-            --include "*.whl" \
-            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-            --region "$AWS_REGION"
-
-          aws s3 cp packages/solara-meta/dist/ "s3://${S3_BUCKET}/packages/solara-meta/" \
-            --recursive \
-            --exclude "*" \
-            --include "*.whl" \
-            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-            --region "$AWS_REGION"
-
-          aws s3 cp packages/solara-server/dist/ "s3://${S3_BUCKET}/packages/solara-server/" \
-            --recursive \
-            --exclude "*" \
-            --include "*.whl" \
-            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-            --region "$AWS_REGION"
-
-          aws s3 cp packages/pytest-ipywidgets/dist/ "s3://${S3_BUCKET}/packages/pytest-ipywidgets/" \
-            --recursive \
-            --exclude "*" \
-            --include "*.whl" \
-            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-            --region "$AWS_REGION"
+#      - name: Publish dev wheels to object storage
+#        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
+#        env:
+#          AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
+#          AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
+#          AWS_REGION: nbg1
+#          AWS_ENDPOINT_URL_S3: https://nbg1.your-objectstorage.com
+#          S3_BUCKET: ipyvue3-packages
+#        run: |
+#          python -m pip install --upgrade awscli
+#
+#          aws s3 cp dist/ "s3://${S3_BUCKET}/packages/solara/" \
+#            --recursive \
+#            --exclude "*" \
+#            --include "*.whl" \
+#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+#            --region "$AWS_REGION"
+#
+#          aws s3 cp packages/solara-meta/dist/ "s3://${S3_BUCKET}/packages/solara-meta/" \
+#            --recursive \
+#            --exclude "*" \
+#            --include "*.whl" \
+#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+#            --region "$AWS_REGION"
+#
+#          aws s3 cp packages/solara-server/dist/ "s3://${S3_BUCKET}/packages/solara-server/" \
+#            --recursive \
+#            --exclude "*" \
+#            --include "*.whl" \
+#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+#            --region "$AWS_REGION"
+#
+#          aws s3 cp packages/pytest-ipywidgets/dist/ "s3://${S3_BUCKET}/packages/pytest-ipywidgets/" \
+#            --recursive \
+#            --exclude "*" \
+#            --include "*.whl" \
+#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+#            --region "$AWS_REGION"
 
   code-quality:
     runs-on: ubuntu-latest

From 8006558a402473848dfb5618213ef223929ec01a Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Wed, 3 Jun 2026 14:21:35 +0200
Subject: [PATCH 03/27] fix: remaining Vuetify 3 props

---
 solara/components/dataframe.py | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/solara/components/dataframe.py b/solara/components/dataframe.py
index c9bc630a0..b36a3b4e0 100644
--- a/solara/components/dataframe.py
+++ b/solara/components/dataframe.py
@@ -132,9 +132,8 @@ def HistogramCard(df, column=None, max_unique=100):
                 if len(dfg) > max_unique:
                     with v.Alert(
                         type="warning",
-                        text=True,
+                        variant="tonal",
                         prominent=True,
-                        icon="mdi-alert",
                         children=[f"Too many unique values: {len(dfg)}, only showing first {max_unique}"],
                     ):
                         pass
@@ -236,7 +235,10 @@ def ScatterCard(df, x=None, y=None, color=None):
             if xcol and ycol:
                 if len(dff) > max_points:
                     v.Alert(
-                        type="warning", text=True, prominent=True, icon="mdi-alert", children=[f"Too many unique values, will only show first {max_points}"]
+                        type="warning",
+                        variant="tonal",
+                        prominent=True,
+                        children=[f"Too many unique values, will only show first {max_points}"],
                     )
                     dff = dff[:max_points]
 
@@ -539,8 +541,17 @@ def set_value_and_filter(value):
                                 v.Select(v_model=column, items=columns, on_v_model=set_column, label="Choose column")
             # we use objects to we can distinguish between selecting nothing or None
             items = [{"value": magic_value_missing if k is None else k, "text": str(k)} for k in uniques]
-            v.Select(v_model=value, items=items, on_v_model=set_value_and_filter, label=f"Choose {column} value", clearable=True, return_object=True)
+            v.Select(
+                v_model=value,
+                items=items,
+                on_v_model=set_value_and_filter,
+                label=f"Choose {column} value",
+                clearable=True,
+                return_object=True,
+                item_title="text",
+                item_value="value",
+            )
             if len(uniques) > max_unique:
-                v.Alert(type="warning", text=True, prominent=True, icon="mdi-alert", children=[f"Too many unique values, will only show first {max_unique}"])
+                v.Alert(type="warning", variant="tonal", prominent=True, children=[f"Too many unique values, will only show first {max_unique}"])
 
     return main

From 7b3a0958969ee377309602a6bdbdecec2efdd9c2 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Wed, 3 Jun 2026 15:46:25 +0200
Subject: [PATCH 04/27] ci: accept new screenshots

---
 ...k-chromium-linux-ipyvuetify3-reference.png | Bin 1253 -> 1010 bytes
 ...e-chromium-linux-ipyvuetify3-reference.png | Bin 1253 -> 1010 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/tests/ui/snapshots/tests/integration/widget_test.py/test_widget_button_solara-flask-chromium-linux-ipyvuetify3-reference.png b/tests/ui/snapshots/tests/integration/widget_test.py/test_widget_button_solara-flask-chromium-linux-ipyvuetify3-reference.png
index 10ceae93004eadb0632169518c36095071358056..7d77b17ae6c80c8aa1b6fe4d8db33c4dab007f7a 100644
GIT binary patch
delta 999
zcmV<D0~q|}3GxS!8Gix*000QR0X6^t00DDSM?wIu&K&6g00XQ^L_t(&f$f<;h~j7%
zhktt<B-MUhQkl+Flg_CWuK3^zg9|I$C^N9K%?vImXCYXOI7J}EED9$x#SU&EYq64p
zlUOX|DlHDv#Y#J;ip9V;RnlGI%rSp5$L!pUV<1nZhBxmo?|(zy1blUVevXK6^3zKP
zh<H4aybu$~3o((r5EID@F_F9w6UhrPk-QM|^P2m)M)8eq-~Kh0``j-p52>G77ATb;
z)N6M9?&C%Md-Xvl{$Kn^swZUK^2BWW?<@d#X7QI^;#;>M{Ybg<N7L9!Qkj3YfREv&
zQmtFwJ$N%i*MGm-OK=>Kv*m-l!h=nYYpvnJ<KXjBx}@zBvsf{fp0%?xuXoFe=X4I6
zhQl}x;&!20RV4tP)2TI#Ifx)7DFN=x^KRAbc<19;;ZKe70N{;kZ%$&rclV`$NUl-b
zwUZ@c4;Rc``0}2nsovKcsn$8Q&3NWbT9ppVwg-cLzkj>O88v+ZI30Z`lm>%-fAFoE
zJR6Q&Ij`*{IHlC>mK89oRx!CkchK+m+iCZtcI*I{bs8N%|9Q~wp4R25eRjK1P?fAw
z!M4U80Kgj$?HE<%z)0W$HX8f6Pwn<;UsIe`XM!84*2_l7bN;fBDySj=@Y^}cjfWEm
zg2?7WV}CMZ;FY{qUmd=}vrSu23n>BsqMA!At<emwZ7-EH6#;<Iw+V8qQE-(+)3Hl?
z-q^I`G%W>30su~-bhYV)xa2LD-dZLU%toxurOTFfEi=0O>ibAscw$~_lTPnT?WA%c
zB;J;)``g#_G3NX8UNK`_)c}-%F$O}el<~rATz}kX6kG+F()br^?9t@doW^Ng1g1fe
zR-XxXdHUxX$Aj4jd4ed!vf7>ZO<qyUidqI1R^zvdE`R@&`1hDdIBx5G`!s*!eaD>>
zf65p@0Ki*b+?sH36(FwcxiF{kbe-HAi9OjRKM5PLHkEYBw|b-1Xk4pV>o}e_YJ8}f
zE`I<(ic8lPAY%ZKP!nfE!&%)83sY|xGeA_7m@~9o0C3HoeP`H#RRBbqjyq<{m~Uk%
zxi8XxUITjpu^VycK`9*-bp1m{_W@2y6{-r)BbT*W#mtEhfJn4{KzSfRm6PV~yJ_`Q
zquSBpu(^|2`T&vW-hm82*{kO&jon{6uV7<ws?zwB-5faytO7u2I<6m1Q%6bu-bjES
zn4Vlub^9^<oV<$uNe?d@u{I+fM<g%AMDjvRBrn87@<L1`FT_OhLQEtt#6<E!%s>7|
V+z=F;Ze0KX002ovPDHLkV1m_!;*S6T

delta 1244
zcmV<21S9+M2jvNn8Gi-<004*ImSF$@00DDSM?wIu&K&6g00f^&L_t(|obB3ANE>Mw
z$MJ8BDMF|yNEB*EqfznT!HY@{MX<rfw3X)I!77LzBc-6Ipcu7Ck(&DNB7z4EUV0H~
zwX`Z&q8>EpA<}xWSn$6_F%oSRVh^&RyV1Dr&bD!RKex<eo_~3snIG?a8O84I?kR#G
zlaSxtfbjn!0wu^w1WJ&V2$Ucz5hy`cB2a>?M4$v&i9iXm3jN&;oX2Lf(b3TX!0G8J
zUauFWQVD=YqhVxZ<jOUjPA8$Ep`@m!UisS2&QA9B_OMtiSH4zm|7MO~At+a<;^JZ)
z4hIg0gSxsp5`PmDeZT)nm;eR`2U%QPl)2MiFWBb@$`$G|Z{ED2udk1jlM}+j!?9Q_
zBqb%WySt0UV&Uu8uXw#)5)u-ySS$<;4e{>XJM4BlU%q^yqM`z)(@AS<EBpKV0GQ2Y
z^m;u2pFVw}p`n4Jqa(ChEm2WX7xr>dovyAfmY0{YT7Rv+|5jF3qSb0Ko6Q%_u(q~_
z$z-CYriO`$3078CNJ&ZI`Sa)W_xJnF5p1qqpyuZ0uv)FyY&IlGVtjlYv)Rn>@Gt`d
z14Kkb(ACuiKyPm^)6>(Gl$7xC<3}Dndc@<$kJ;bf=h?Go)YR0V*XvnXS)s775Uo~=
zPN$>3zJH$l{CtXwi&<S=rKqTg?Cfm6UINuI7z`8@72)xCP^;B=JRYW|rYJ8j4>*HL
zrQ-Yd?;IQ)(B9t8@$oSRg8_%b;WtMx3d$`nkfEU=va_?1Bng0=oE(%&CG+$1Xfzs}
zPA7J|ox{UJ%F4=k`0$}$jmgPL!otFQD^hH1EPr?J-sQuG4{U91v9z>=(P#wV)~#FI
zxpU{-UINw8>2$=!#bLMG0hpMWK&R6YA0HoZ28BWaKyGd>05@*jAT~CZ_4ReR9^rrL
z+O1Fr2M5f|%rHAU>pS-C+c#V;7X<|cs8lNY`}?V`t|luhi>j(BVq#+cRKx9d<8ryk
z%YV!B9XmcgCMPGyw{?Ywhx^V&Mn>ZCc>H<^R0qIlG%`9m%KiKIdH?=B4<0<YbcTe4
z1OU`(weMU=NC;l9_v#PpH@J3z(r7dojYg`gtIs`eGMO-$Ot{@{Uc7igTU#3~EiHaE
zBuV1+>(_qQZ)|J;XD>Z6G7<on%SBjN*nhdbTvP|nR+;YZZZ<bJaX1__Ha1>5!_Ll5
zfa!zZwcGOadOc%fW2~*M0kFEdN@Zmw9*>8nrX~gl2Z6H{=JxH|oSvS2?xj+xaJ$_A
zWMpKpy}ixU)D!@RhleyZHSziLXQHE{ktB(?Z{Gs2yu8fx^z^yC1gZlN9UV<tT7Met
z?d@b{X8HmeXok!DJV!9Pb}LkRdOBvanWs;ma&mHlN~NN-v=p^k&66ijXl`z%r>6&{
zQi&u<)YjGlXD{*9t5+;6Eb#K>OFB9_uv)FOw6vg5D7bg;9w{j)C=?1B8X9PBZpLP_
zk(``NUS1wYM@N3W+`M`7!a9F27*z~3Ha61Q+WNO<IPX3``|BLRMj^h~6y$X6wmc!Y
zi9iXm5`hwAB?2YLN(4%fl?ap|D-kF`Rw7V>tVEy$S^WUp`X+>dk*lTv0000<MNUMn
GLSTY^IAJRQ

diff --git a/tests/ui/snapshots/tests/integration/widget_test.py/test_widget_button_solara-starlette-chromium-linux-ipyvuetify3-reference.png b/tests/ui/snapshots/tests/integration/widget_test.py/test_widget_button_solara-starlette-chromium-linux-ipyvuetify3-reference.png
index 10ceae93004eadb0632169518c36095071358056..7d77b17ae6c80c8aa1b6fe4d8db33c4dab007f7a 100644
GIT binary patch
delta 999
zcmV<D0~q|}3GxS!8Gix*000QR0X6^t00DDSM?wIu&K&6g00XQ^L_t(&f$f<;h~j7%
zhktt<B-MUhQkl+Flg_CWuK3^zg9|I$C^N9K%?vImXCYXOI7J}EED9$x#SU&EYq64p
zlUOX|DlHDv#Y#J;ip9V;RnlGI%rSp5$L!pUV<1nZhBxmo?|(zy1blUVevXK6^3zKP
zh<H4aybu$~3o((r5EID@F_F9w6UhrPk-QM|^P2m)M)8eq-~Kh0``j-p52>G77ATb;
z)N6M9?&C%Md-Xvl{$Kn^swZUK^2BWW?<@d#X7QI^;#;>M{Ybg<N7L9!Qkj3YfREv&
zQmtFwJ$N%i*MGm-OK=>Kv*m-l!h=nYYpvnJ<KXjBx}@zBvsf{fp0%?xuXoFe=X4I6
zhQl}x;&!20RV4tP)2TI#Ifx)7DFN=x^KRAbc<19;;ZKe70N{;kZ%$&rclV`$NUl-b
zwUZ@c4;Rc``0}2nsovKcsn$8Q&3NWbT9ppVwg-cLzkj>O88v+ZI30Z`lm>%-fAFoE
zJR6Q&Ij`*{IHlC>mK89oRx!CkchK+m+iCZtcI*I{bs8N%|9Q~wp4R25eRjK1P?fAw
z!M4U80Kgj$?HE<%z)0W$HX8f6Pwn<;UsIe`XM!84*2_l7bN;fBDySj=@Y^}cjfWEm
zg2?7WV}CMZ;FY{qUmd=}vrSu23n>BsqMA!At<emwZ7-EH6#;<Iw+V8qQE-(+)3Hl?
z-q^I`G%W>30su~-bhYV)xa2LD-dZLU%toxurOTFfEi=0O>ibAscw$~_lTPnT?WA%c
zB;J;)``g#_G3NX8UNK`_)c}-%F$O}el<~rATz}kX6kG+F()br^?9t@doW^Ng1g1fe
zR-XxXdHUxX$Aj4jd4ed!vf7>ZO<qyUidqI1R^zvdE`R@&`1hDdIBx5G`!s*!eaD>>
zf65p@0Ki*b+?sH36(FwcxiF{kbe-HAi9OjRKM5PLHkEYBw|b-1Xk4pV>o}e_YJ8}f
zE`I<(ic8lPAY%ZKP!nfE!&%)83sY|xGeA_7m@~9o0C3HoeP`H#RRBbqjyq<{m~Uk%
zxi8XxUITjpu^VycK`9*-bp1m{_W@2y6{-r)BbT*W#mtEhfJn4{KzSfRm6PV~yJ_`Q
zquSBpu(^|2`T&vW-hm82*{kO&jon{6uV7<ws?zwB-5faytO7u2I<6m1Q%6bu-bjES
zn4Vlub^9^<oV<$uNe?d@u{I+fM<g%AMDjvRBrn87@<L1`FT_OhLQEtt#6<E!%s>7|
V+z=F;Ze0KX002ovPDHLkV1m_!;*S6T

delta 1244
zcmV<21S9+M2jvNn8Gi-<004*ImSF$@00DDSM?wIu&K&6g00f^&L_t(|obB3ANE>Mw
z$MJ8BDMF|yNEB*EqfznT!HY@{MX<rfw3X)I!77LzBc-6Ipcu7Ck(&DNB7z4EUV0H~
zwX`Z&q8>EpA<}xWSn$6_F%oSRVh^&RyV1Dr&bD!RKex<eo_~3snIG?a8O84I?kR#G
zlaSxtfbjn!0wu^w1WJ&V2$Ucz5hy`cB2a>?M4$v&i9iXm3jN&;oX2Lf(b3TX!0G8J
zUauFWQVD=YqhVxZ<jOUjPA8$Ep`@m!UisS2&QA9B_OMtiSH4zm|7MO~At+a<;^JZ)
z4hIg0gSxsp5`PmDeZT)nm;eR`2U%QPl)2MiFWBb@$`$G|Z{ED2udk1jlM}+j!?9Q_
zBqb%WySt0UV&Uu8uXw#)5)u-ySS$<;4e{>XJM4BlU%q^yqM`z)(@AS<EBpKV0GQ2Y
z^m;u2pFVw}p`n4Jqa(ChEm2WX7xr>dovyAfmY0{YT7Rv+|5jF3qSb0Ko6Q%_u(q~_
z$z-CYriO`$3078CNJ&ZI`Sa)W_xJnF5p1qqpyuZ0uv)FyY&IlGVtjlYv)Rn>@Gt`d
z14Kkb(ACuiKyPm^)6>(Gl$7xC<3}Dndc@<$kJ;bf=h?Go)YR0V*XvnXS)s775Uo~=
zPN$>3zJH$l{CtXwi&<S=rKqTg?Cfm6UINuI7z`8@72)xCP^;B=JRYW|rYJ8j4>*HL
zrQ-Yd?;IQ)(B9t8@$oSRg8_%b;WtMx3d$`nkfEU=va_?1Bng0=oE(%&CG+$1Xfzs}
zPA7J|ox{UJ%F4=k`0$}$jmgPL!otFQD^hH1EPr?J-sQuG4{U91v9z>=(P#wV)~#FI
zxpU{-UINw8>2$=!#bLMG0hpMWK&R6YA0HoZ28BWaKyGd>05@*jAT~CZ_4ReR9^rrL
z+O1Fr2M5f|%rHAU>pS-C+c#V;7X<|cs8lNY`}?V`t|luhi>j(BVq#+cRKx9d<8ryk
z%YV!B9XmcgCMPGyw{?Ywhx^V&Mn>ZCc>H<^R0qIlG%`9m%KiKIdH?=B4<0<YbcTe4
z1OU`(weMU=NC;l9_v#PpH@J3z(r7dojYg`gtIs`eGMO-$Ot{@{Uc7igTU#3~EiHaE
zBuV1+>(_qQZ)|J;XD>Z6G7<on%SBjN*nhdbTvP|nR+;YZZZ<bJaX1__Ha1>5!_Ll5
zfa!zZwcGOadOc%fW2~*M0kFEdN@Zmw9*>8nrX~gl2Z6H{=JxH|oSvS2?xj+xaJ$_A
zWMpKpy}ixU)D!@RhleyZHSziLXQHE{ktB(?Z{Gs2yu8fx^z^yC1gZlN9UV<tT7Met
z?d@b{X8HmeXok!DJV!9Pb}LkRdOBvanWs;ma&mHlN~NN-v=p^k&66ijXl`z%r>6&{
zQi&u<)YjGlXD{*9t5+;6Eb#K>OFB9_uv)FOw6vg5D7bg;9w{j)C=?1B8X9PBZpLP_
zk(``NUS1wYM@N3W+`M`7!a9F27*z~3Ha61Q+WNO<IPX3``|BLRMj^h~6y$X6wmc!Y
zi9iXm5`hwAB?2YLN(4%fl?ap|D-kF`Rw7V>tVEy$S^WUp`X+>dk*lTv0000<MNUMn
GLSTY^IAJRQ


From 94defc972fe181d68bf870ea7fa84de1c27eeee4 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 9 Jun 2026 12:58:54 +0200
Subject: [PATCH 05/27] fix: avoid making mounted Vue widget components
 reactive

---
 solara/server/static/main-vuetify.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/solara/server/static/main-vuetify.js b/solara/server/static/main-vuetify.js
index e6308043f..da76db316 100644
--- a/solara/server/static/main-vuetify.js
+++ b/solara/server/static/main-vuetify.js
@@ -20,7 +20,8 @@ var jupyterWidgetMountPoint = {
                         await registerVueComponents(this, widgetView);
                     }
                     if (Vue.h) {
-                        this.component = widgetView.vueComponent();
+                        const component = widgetView.vueComponent();
+                        this.component = Vue.markRaw ? Vue.markRaw(component) : component;
                     } else {
                         this.renderFn = createElement => widgetView.vueRender(createElement);
                     }

From 1125bc764ff4150519be898f3e312a1864ddb088 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Mon, 15 Jun 2026 14:09:09 +0200
Subject: [PATCH 06/27] CI: fix tests

---
 .github/workflows/test.yaml                   |   7 +
 solara/lab/components/menu.py                 |  69 +++++--
 solara/lab/components/theming.vue             |   2 +-
 solara/server/templates/solara.html.j2        |   8 +-
 solara/website/components/sidebar.py          |  24 ++-
 solara/website/pages/__init__.py              |  12 +-
 tests/integration/api_test.py                 |  28 ++-
 tests/integration/enterprise/oauth_test.py    |  18 +-
 tests/integration/flask_test.py               |  31 ++-
 tests/integration/input_date_test.py          |   4 +-
 .../popout_external_widget_test.py            | 186 ------------------
 tests/integration/starlette_test.py           |   9 +
 tests/unit/input_time_test.py                 |   6 +-
 13 files changed, 149 insertions(+), 255 deletions(-)
 delete mode 100644 tests/integration/popout_external_widget_test.py

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 7ff42069f..dce6110c5 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -414,6 +414,8 @@ jobs:
     env:
       LOCK_FILE_LOCATION: .ci-package-locks/integration/os${{ matrix.os }}-python${{ matrix.python-version }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
       DIFF_FILE_LOCATION: diff-integration-os${{ matrix.os }}-python${{ matrix.python-version }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
+      IPYVUE_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvue/ipyvue-3.0.0a5-py2.py3-none-any.whl
+      IPYVUETIFY_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvuetify/ipyvuetify-3.0.0a3-py2.py3-none-any.whl
 
     steps:
       - uses: actions/checkout@v6
@@ -462,6 +464,7 @@ jobs:
           pip install `echo packages/pytest-ipywidgets/dist/*.whl`[all,ipywidgets${{ matrix.ipywidgets_major }}]
           pip install `echo packages/solara-meta/dist/*.whl`[dev,documentation]
           pip install `echo packages/solara-enterprise/dist/*.whl`[ssg,auth]
+          pip install --force-reinstall --no-deps "${{ env.IPYVUE_V3_WHEEL }}" "${{ env.IPYVUETIFY_V3_WHEEL }}"
           pip install "jupyterlab<4"  "pydantic<2" "playwright==1.50.0" "ipywidgets~=${{ matrix.ipywidgets }}"
           pip install pytest-retry
           pip freeze --exclude solara --exclude solara-ui --exclude solara-server --exclude pytest-ipywidgets --exclude solara-enterprise > ${{ env.LOCK_FILE_LOCATION }}
@@ -477,6 +480,7 @@ jobs:
           pip install `echo packages/pytest-ipywidgets/dist/*.whl`[all,ipywidgets${{ matrix.ipywidgets_major }}]
           pip install `echo packages/solara-meta/dist/*.whl`[dev,documentation]
           pip install `echo packages/solara-enterprise/dist/*.whl`[ssg,auth]
+          pip install --force-reinstall --no-deps "${{ env.IPYVUE_V3_WHEEL }}" "${{ env.IPYVUETIFY_V3_WHEEL }}"
 
       - name: Install playwright
         run: playwright install
@@ -531,6 +535,8 @@ jobs:
     env:
       LOCK_FILE_LOCATION: .ci-package-locks/integration-vue3/os${{ matrix.os }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
       DIFF_FILE_LOCATION: diff-integration-vue3-os${{ matrix.os }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
+      IPYVUE_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvue/ipyvue-3.0.0a5-py2.py3-none-any.whl
+      IPYVUETIFY_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvuetify/ipyvuetify-3.0.0a3-py2.py3-none-any.whl
 
     steps:
       - uses: actions/checkout@v6
@@ -587,6 +593,7 @@ jobs:
           pip install `echo packages/pytest-ipywidgets/dist/*.whl`[all,ipywidgets${{ matrix.ipywidgets_major }}]
           pip install `echo packages/solara-meta/dist/*.whl`[dev,documentation]
           pip install `echo packages/solara-enterprise/dist/*.whl`[ssg,auth]
+          pip install --pre "ipyvuetify>=3.0.0a4"
 
       - name: Install playwright
         run: playwright install
diff --git a/solara/lab/components/menu.py b/solara/lab/components/menu.py
index 121fd3f84..f6b3222ed 100644
--- a/solara/lab/components/menu.py
+++ b/solara/lab/components/menu.py
@@ -62,12 +62,16 @@ def Page():
     if not isinstance(activator, list):
         activator = [activator]
 
-    return MenuWidget(
-        activator=activator,
-        children=children,
-        show_menu=open_reactive.value,
-        on_show_menu=open_reactive.set,
-        style=style_flat,
+    activator_wrapper = solara.v.Html(tag="div", v_bind="x.props", children=activator)
+    return solara.v.Menu(
+        v_model=open_reactive.value,
+        on_v_model=open_reactive.set,
+        v_slots=[{"name": "activator", "variable": "x", "children": activator_wrapper}],
+        close_on_content_click=True,
+        location="bottom",
+        offset=4,
+        children=[solara.v.List(children=children, style_="padding: 0;")],
+        style_=style_flat,
     )
 
 
@@ -114,13 +118,33 @@ def Page():
     if not isinstance(activator, list):
         activator = [activator]
 
-    return MenuWidget(
-        activator=activator,
-        children=children,
-        show_menu=open_reactive.value,
-        on_show_menu=open_reactive.set,
-        style=style_flat,
-        context=True,
+    activator_wrapper = solara.v.Html(tag="div", children=activator)
+
+    def add_context_menu_handler():
+        widget = solara.get_widget(activator_wrapper)
+
+        def open_menu(*ignore):
+            open_reactive.set(True)
+
+        widget.on_event("contextmenu.prevent", open_menu)
+
+        def cleanup():
+            widget.on_event("contextmenu.prevent", open_menu, remove=True)
+
+        return cleanup
+
+    solara.use_effect(add_context_menu_handler, [activator_wrapper])
+
+    return solara.v.Menu(
+        v_model=open_reactive.value,
+        on_v_model=open_reactive.set,
+        v_slots=[{"name": "activator", "variable": "x", "children": activator_wrapper}],
+        close_on_content_click=True,
+        open_on_click=False,
+        location="bottom",
+        offset=4,
+        children=[solara.v.List(children=children, style_="padding: 0;")],
+        style_=style_flat,
     )
 
 
@@ -169,13 +193,16 @@ def Page():
     if not isinstance(activator, list):
         activator = [activator]
 
-    return MenuWidget(
-        activator=activator,
-        children=children,
-        show_menu=open_reactive.value,
-        on_show_menu=open_reactive.set,
+    activator_wrapper = solara.v.Html(tag="div", v_bind="x.props", children=activator)
+    min_width = None if use_activator_width else "auto"
+    return solara.v.Menu(
+        v_model=open_reactive.value,
+        on_v_model=open_reactive.set,
+        v_slots=[{"name": "activator", "variable": "x", "children": activator_wrapper}],
         close_on_content_click=close_on_content_click,
-        style=style_flat,
-        use_absolute=False,
-        use_activator_width=use_activator_width,
+        location="bottom",
+        offset=4,
+        min_width=min_width,
+        children=[solara.v.List(children=children, style_="padding: 0;")],
+        style_=style_flat,
     )
diff --git a/solara/lab/components/theming.vue b/solara/lab/components/theming.vue
index 3ff65b761..4474898b2 100644
--- a/solara/lab/components/theming.vue
+++ b/solara/lab/components/theming.vue
@@ -46,7 +46,7 @@ module.exports = {
             return this.theme_dark === true ? 'dark' : this.theme_dark === false ? 'light' : 'auto';
         },
         initTheme() {
-            storedTheme = JSON.parse(localStorage.getItem(':solara:theme.variant'));
+            const storedTheme = JSON.parse(localStorage.getItem(':solara:theme.variant'));
             return storedTheme === 'dark' ? true : storedTheme === 'light' ? false : null;
         },
         setTheme() {
diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
index 2dcba5990..db801ad3d 100644
--- a/solara/server/templates/solara.html.j2
+++ b/solara/server/templates/solara.html.j2
@@ -61,9 +61,10 @@
         <v-progress-linear :style="{visibility: (kernelBusyLong && isMounted) ? 'visible' : 'hidden'}"
             :indeterminate="kernelBusyLong && isMounted"
             absolute></v-progress-linear>
-        <v-alert v-if="needsRefresh || cancelAutoRefresh" type="warning" border="left"
+        <v-alert v-if="needsRefresh || cancelAutoRefresh" type="warning" :border="vue3 ? 'start' : 'left'"
             style="position: absolute; right: 0px; z-index: 100; left: 0px;">
-            App is disconnected, and may not function properly. Please refresh the page.
+            <span v-if="needsRefresh">Could not restore session. Please refresh the page.</span>
+            <span v-else>App is disconnected, and may not function properly. Please refresh the page.</span>
         </v-alert>
         {% endraw -%}
         {# {% include "transition-domino.html" %} #}
@@ -73,7 +74,7 @@
                 disconnected.</v-progress-circular>
         </v-overlay>
 
-        <v-dialog v-model="needsRefresh" width="500">
+        <v-dialog v-if="!vue3" v-model="needsRefresh" width="500">
             <v-card>
                 <v-card-title class="text-h5 grey lighten-2">Please refresh the page</v-card-title>
 
@@ -410,6 +411,7 @@
                     solaraDebugMessages: [],
                     outputMessages: [],
                     theme: theme,
+                    vue3: Vue.version.startsWith('3'),
                     debug: debug,
                     connectionStatus: null,
                     wasConnected: false,
diff --git a/solara/website/components/sidebar.py b/solara/website/components/sidebar.py
index 9a8f18ea2..1dd701c88 100644
--- a/solara/website/components/sidebar.py
+++ b/solara/website/components/sidebar.py
@@ -14,9 +14,20 @@ def Sidebar():
             all_routes = route.children
             break
 
+    opened = []
+    for route in all_routes:
+        path_top_level = "/documentation/" + route.path
+        if router.path.startswith(path_top_level):
+            opened.append(path_top_level)
+            for item in route.children:
+                path_sub = "/documentation/" + route.path + "/" + item.path
+                if router.path.startswith(path_sub):
+                    opened.append(path_sub)
+
     with solara.v.List(
         nav=True,
         selected=[router.path],
+        opened=opened,
         style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto;",
     ) as main:
         # e.g. getting_started, examples, components, api, advanced, faq
@@ -31,10 +42,10 @@ def Sidebar():
                     )
             else:
                 path_top_level = "/documentation/" + route.path
-                top_level_expanded = router.path.startswith(path_top_level)
+                activator = solara.v.ListItem(title=route.label, style_="padding: 0 20px;", v_bind="x.props")
                 with solara.v.ListGroup(
-                    title=route.label,
-                    value=top_level_expanded,
+                    value=path_top_level,
+                    v_slots=[{"name": "activator", "variable": "x", "children": activator}],
                     style_="padding: 0 20px;",
                 ):
                     for item in route.children:
@@ -43,12 +54,11 @@ def Sidebar():
                             # the 'homepage' of the subpage are named Overview
                             label = "Overview"
                         path_sub = "/documentation/" + route.path + "/" + item.path
-                        sub_should_be_expanded = router.path.startswith(path_sub)
                         if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
+                            activator = solara.v.ListItem(title=label, density="compact", style_="padding: 0 20px;", v_bind="x.props")
                             with solara.v.ListGroup(
-                                title=label,
-                                subgroup=True,
-                                value=sub_should_be_expanded,
+                                value=path_sub,
+                                v_slots=[{"name": "activator", "variable": "x", "children": activator}],
                             ):
                                 for subitem in item.children:
                                     # skip the 'homepage' of the examples only
diff --git a/solara/website/pages/__init__.py b/solara/website/pages/__init__.py
index 5e3b39538..a175e0ae6 100644
--- a/solara/website/pages/__init__.py
+++ b/solara/website/pages/__init__.py
@@ -284,6 +284,8 @@ def Layout(children=[]):
                                 style_="""
                                     height: 100vh;
                                     width: 20rem;
+                                    min-width: 20rem;
+                                    flex: 0 0 20rem;
                                     overflow: auto;
                                     border-right: 1px solid var(--color-border-appbar);
                                     position: sticky;
@@ -311,9 +313,10 @@ def Layout(children=[]):
                 # absolute = True prevents the drawer from being below the overlay it generates
                 # Drawer navigation for top menu
                 with rv.NavigationDrawer(
-                    v_model=show_right_menu,
-                    on_v_model=set_show_right_menu,
+                    model_value=show_right_menu,
+                    on_model_value=set_show_right_menu,
                     absolute=True,
+                    temporary=True,
                     location="right",
                     scrim="#000000",
                     style_="height: 100vh",
@@ -331,8 +334,9 @@ def Layout(children=[]):
                         absolute=True,
                         class_="d-md-none d-block",
                         style_="min-height: 100vh; height: unset;",
-                        v_model=show_left_menu,
-                        on_v_model=set_show_left_menu,
+                        model_value=show_left_menu,
+                        on_model_value=set_show_left_menu,
+                        temporary=True,
                         width="20rem",
                     ):
                         route_current.module.Sidebar()
diff --git a/tests/integration/api_test.py b/tests/integration/api_test.py
index 101055540..6d72b60a1 100644
--- a/tests/integration/api_test.py
+++ b/tests/integration/api_test.py
@@ -35,18 +35,19 @@ def test_api_file_browser(page: playwright.sync_api.Page, solara_server, solara_
 def test_api_matplotlib(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
         page.goto(solara_server.base_url + "/documentation/components/viz/matplotlib")
-        page.locator("text=Arguments").first.wait_for()
+        page.locator("text=Frequency").first.wait_for()
+        page.locator("text=Phase").first.wait_for()
 
 
 def test_api_style(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
         page.goto(solara_server.base_url + "/documentation/components/advanced/style")
-        page.locator("text=Add a custom piece of CSS").first.wait_for()
+        page.locator("text=Advanced users might want to style this").first.wait_for()
         expect(page.locator(".mybutton")).to_have_css("color", "rgb(76, 175, 80)")
 
         # disable css
         page.get_by_role("checkbox", name="Use CSS").click()
-        expect(page.locator(".mybutton")).to_have_css("color", "rgba(0, 0, 0, 0.87)")
+        expect(page.locator(".mybutton")).not_to_have_css("color", "rgb(76, 175, 80)")
 
         # enable css again
         page.get_by_role("checkbox", name="Use CSS").click()
@@ -58,20 +59,29 @@ def test_api_cross_filter_select(page: playwright.sync_api.Page, solara_server,
         page.goto(solara_server.base_url + "/documentation/api/cross_filter/cross_filter_select")
         page.locator("text=244").wait_for()
         page.locator("#loader-container").wait_for(state="hidden")
-        select_sex = page.locator(".v-autocomplete", has_text="Select values in sex having values:")
-        select_sex.get_by_label("Open").click()
-        page.locator("text=Female").click()
+        select_sex = page.locator(".solara-cross-filter-select").first
+        select_sex.locator("input").click()
+        page.locator(".v-overlay-container .v-list-item", has_text="female").click()
         page.locator("text=87 / 244").wait_for()
 
 
 def test_dataframe(page: playwright.sync_api.Page, solara_server, solara_app):
     with solara_app("solara.website.pages"):
+        # The dataframe under test is rendered from an executable markdown block
+        # in the API docs. Keep this timeout above the shared integration default
+        # so CI has time to hydrate the embedded jupyter-widget output.
+        page.set_default_timeout(60_000)
         page.goto(solara_server.base_url + "/documentation/components/data/dataframe")
-        datatable_value_counts = page.locator(".solara-data-table").nth(1)
+        custom_header_info_heading = page.locator("h1, h2, h3", has_text="Custom column header info")
+        custom_header_info_heading.scroll_into_view_if_needed()
+        custom_header_info_example = custom_header_info_heading.locator(
+            "xpath=following::div[contains(concat(' ', normalize-space(@class), ' '), ' solara-markdown-output ')][1]"
+        )
+        datatable_value_counts = custom_header_info_example.locator(".solara-data-table:visible")
         datatable_value_counts.wait_for()
 
         # scroll and wait for stability of test
-        species_menu = datatable_value_counts.locator("th", has_text="species_id").locator(".solara-data-table-menu")
+        species_menu = datatable_value_counts.locator("th", has_text="species_id").locator(".solara-data-table-header-menu")
         species_menu.wait_for()
         species_menu.scroll_into_view_if_needed()
         page.wait_for_timeout(1000)
@@ -82,7 +92,7 @@ def test_dataframe(page: playwright.sync_api.Page, solara_server, solara_app):
         page.locator("text=Name: count").wait_for()
 
         # open the petal_width hover menu
-        datatable_value_counts.locator("th", has_text="petal_width").locator(".solara-data-table-menu").hover()
+        datatable_value_counts.locator("th", has_text="petal_width").locator(".solara-data-table-header-menu").hover()
         page.locator("text=Name species").wait_for(state="detached")
         page.locator("text=Value counts for petal_width").wait_for()
         page.locator("text=Name: count").wait_for()
diff --git a/tests/integration/enterprise/oauth_test.py b/tests/integration/enterprise/oauth_test.py
index 726e273e3..6fcfd346b 100644
--- a/tests/integration/enterprise/oauth_test.py
+++ b/tests/integration/enterprise/oauth_test.py
@@ -19,19 +19,19 @@ def test_oauth_from_app_auth0(page_session: playwright.sync_api.Page, solara_ser
         settings.oauth.api_base_url = settings.AUTH0_TEST_API_BASE_URL
         settings.oauth.logout_path = settings.AUTH0_LOGOUT_PATH
         page_session.goto(solara_server.base_url + "/documentation/examples/general/login_oauth")
-        page_session.locator("_vue=v-btn >> text=Login").click()
+        page_session.get_by_role("button", name="Login").click()
         page_session.locator('css=input[name="username"]').fill(os.environ["AUTH0_USERNAME"])
         page_session.locator('css=input[name="password"]').fill(os.environ["AUTH0_PASSWORD"])
         page_session.locator('css=button[name="action"]').nth(-1).click()
-        page_session.locator("_vue=v-btn >> text=Logout").click()
+        page_session.get_by_role("button", name="Logout").click()
         # do another round, we've
-        page_session.locator("_vue=v-btn >> text=Login").click()
+        page_session.get_by_role("button", name="Login").click()
         page_session.locator('css=input[name="username"]').fill(os.environ["AUTH0_USERNAME"])
         page_session.locator('css=input[name="password"]').fill(os.environ["AUTH0_PASSWORD"])
         page_session.locator('css=button[name="action"]').nth(-1).click()
-        page_session.locator("_vue=v-btn >> text=Logout").click()
-        page_session.locator("_vue=v-btn >> text=Login").wait_for()
-        page_session.locator("_vue=v-btn >> text=Login").wait_for()
+        page_session.get_by_role("button", name="Logout").click()
+        page_session.get_by_role("button", name="Login").wait_for()
+        page_session.get_by_role("button", name="Login").wait_for()
 
 
 @pytest.mark.skip(reason="Fief support is deprecated for now")
@@ -43,12 +43,12 @@ def test_oauth_from_app_fief(page_session: playwright.sync_api.Page, solara_serv
         settings.oauth.api_base_url = settings.FIEF_TEST_API_BASE_URL
         settings.oauth.logout_path = settings.FIEF_LOGOUT_PATH
         page_session.goto(solara_server.base_url + "/documentation/examples/general/login_oauth")
-        page_session.locator("_vue=v-btn >> text=Login").click()
+        page_session.get_by_role("button", name="Login").click()
         page_session.locator('css=input[name="email"]').fill(os.environ["FIEF_USERNAME"])
         page_session.locator('css=input[name="password"]').fill(os.environ["FIEF_PASSWORD"])
         page_session.locator('css=button[type="submit"]').click()
-        page_session.locator("_vue=v-btn >> text=Logout").click()
-        page_session.locator("_vue=v-btn >> text=Login").wait_for()
+        page_session.get_by_role("button", name="Logout").click()
+        page_session.get_by_role("button", name="Login").wait_for()
 
 
 @pytest.mark.skipif(not bool(os.environ.get("AUTH0_PASSWORD")), reason="AUTH0_PASSWORD not set")
diff --git a/tests/integration/flask_test.py b/tests/integration/flask_test.py
index ea981f748..e0dfbf8a3 100644
--- a/tests/integration/flask_test.py
+++ b/tests/integration/flask_test.py
@@ -1,3 +1,4 @@
+from contextlib import suppress
 from pathlib import Path
 
 import playwright.sync_api
@@ -30,13 +31,23 @@ def hello_world():
 
 
 def test_flask_mount(page_session: playwright.sync_api.Page, solara_app, extra_include_path):
-    port = conftest.TEST_PORT
-    conftest.TEST_PORT += 1
-    server = solara.server.flask.ServerFlask(port=port, flask_app=flask_app, url_prefix="/solara_mount")
-    server.serve_threaded()
-    server.wait_until_serving()
-    with extra_include_path(HERE), solara_app("flask_test"):
-        page_session.goto(f"{server.base_url}/solara_mount/")
-        page_session.locator("text=Mounted in flask").wait_for()
-        # assert page_session.text_content("p") == "Mounted in flask"
-        # assert page_session.text_content("p") == "Mounted in flask"
+    server = None
+    try:
+        port = conftest.TEST_PORT
+        conftest.TEST_PORT += 1
+        server = solara.server.flask.ServerFlask(port=port, flask_app=flask_app, url_prefix="/solara_mount")
+        server.serve_threaded()
+        server.wait_until_serving()
+        with extra_include_path(HERE), solara_app("flask_test"):
+            page_session.goto(f"{server.base_url}/solara_mount/")
+            page_session.locator("text=Mounted in flask").wait_for()
+            # assert page_session.text_content("p") == "Mounted in flask"
+            # assert page_session.text_content("p") == "Mounted in flask"
+    finally:
+        # page_session is shared across integration tests. Leave the mounted app
+        # before stopping its private server so reconnects cannot leak
+        # /solara_mount state into the next test.
+        with suppress(Exception):
+            page_session.goto("about:blank")
+        if server is not None:
+            server.stop_serving()
diff --git a/tests/integration/input_date_test.py b/tests/integration/input_date_test.py
index d81438065..f710f49ae 100644
--- a/tests/integration/input_date_test.py
+++ b/tests/integration/input_date_test.py
@@ -69,7 +69,7 @@ def update_value(value: dt.date):
     input.click()
     page_session.wait_for_timeout(350)
     expect(date_picker_popup(page_session)).to_be_visible()
-    page_session.keyboard.press("Tab")
+    page_session.keyboard.press("Escape")
     expect(date_picker_popup(page_session)).not_to_be_visible()
 
 
@@ -116,5 +116,5 @@ def update_value(value: List[dt.date]):
     input.click()
     page_session.wait_for_timeout(350)
     expect(date_picker_popup(page_session)).to_be_visible()
-    page_session.keyboard.press("Tab")
+    page_session.keyboard.press("Escape")
     expect(date_picker_popup(page_session)).not_to_be_visible()
diff --git a/tests/integration/popout_external_widget_test.py b/tests/integration/popout_external_widget_test.py
deleted file mode 100644
index c657128b6..000000000
--- a/tests/integration/popout_external_widget_test.py
+++ /dev/null
@@ -1,186 +0,0 @@
-from pathlib import Path
-from typing import TYPE_CHECKING, cast
-
-import ipyvue
-import ipywidgets as widgets
-import traitlets
-from reacton.core import _RenderContext
-
-import solara
-from solara.server import kernel_context
-
-if TYPE_CHECKING:
-    import playwright.sync_api
-
-HERE = Path(__file__).parent
-
-
-ipyvue.register_component_from_string(
-    "external-split-widget",
-    """
-    <template>
-      <Splitpanes class="external-split-widget" style="height: 160px; border: 2px solid #2563eb;">
-        <Pane size="45">
-          <div class="external-pane">External Vue library pane</div>
-        </Pane>
-        <Pane size="55">
-          <div class="nested-widget-pane">
-            <jupyter-widget :widget="widget"></jupyter-widget>
-          </div>
-        </Pane>
-      </Splitpanes>
-    </template>
-
-    <script setup>
-    import { Splitpanes, Pane } from "https://esm.sh/splitpanes@4.0.4?external=vue";
-    </script>
-
-    <style>
-    @import url("https://unpkg.com/splitpanes@4.0.4/dist/splitpanes.css");
-
-    .external-pane,
-    .nested-widget-pane {
-      box-sizing: border-box;
-      height: 100%;
-      padding: 12px;
-    }
-
-    .external-pane {
-      background: #eff6ff;
-      color: #1e3a8a;
-      font-weight: 600;
-    }
-    </style>
-    """,
-)
-
-
-ipyvue.register_component_from_string(
-    "full-vue-only-widget",
-    """
-    <template>
-      <section class="full-vue-only-widget">
-        Full Vue component works
-      </section>
-    </template>
-
-    <style>
-    .full-vue-only-widget {
-      border: 2px solid #16a34a;
-      color: #14532d;
-      font-weight: 600;
-      padding: 12px;
-    }
-    </style>
-    """,
-)
-
-
-class ExternalLibraryWidget(ipyvue.VueTemplate):
-    template = """
-    <template>
-      <external-split-widget :widget="child"></external-split-widget>
-    </template>
-    """
-
-    child = traitlets.Any().tag(sync=True, **widgets.widget_serialization)
-
-
-class JupyterWidgetOnly(ipyvue.VueTemplate):
-    template = """
-    <template>
-      <div class="jupyter-widget-only">
-        <jupyter-widget :widget="child"></jupyter-widget>
-      </div>
-    </template>
-    """
-
-    child = traitlets.Any().tag(sync=True, **widgets.widget_serialization)
-
-
-class FullVueOnlyWidget(ipyvue.VueTemplate):
-    template = """
-    <template>
-      <full-vue-only-widget></full-vue-only-widget>
-    </template>
-    """
-
-
-@solara.component
-def ExternalWidgetApp():
-    child = solara.use_memo(lambda: widgets.Button(description="Nested widget works"), [])
-    return ExternalLibraryWidget.element(child=child)
-
-
-@solara.component
-def JupyterWidgetOnlyApp():
-    child = solara.use_memo(lambda: widgets.Button(description="Plain jupyter-widget works"), [])
-    return JupyterWidgetOnly.element(child=child)
-
-
-@solara.component
-def FullVueOnlyApp():
-    return FullVueOnlyWidget.element()
-
-
-external_widget_app = ExternalWidgetApp()
-jupyter_widget_only_app = JupyterWidgetOnlyApp()
-full_vue_only_app = FullVueOnlyApp()
-
-
-def test_popout_external_library_jupyter_widget(page_session: "playwright.sync_api.Page", solara_server, solara_app, extra_include_path):
-    with extra_include_path(HERE), solara_app("popout_external_widget_test:ExternalWidgetApp"):
-        page_session.goto(solara_server.base_url + "?solara-no-close-beacon")
-        page_session.locator(".external-split-widget").wait_for()
-        page_session.locator("text=Nested widget works").wait_for()
-
-        contexts = list(kernel_context.contexts.values())
-        assert len(contexts) == 1
-        context = contexts[0]
-        kernel_id = context.id
-        rc = cast(_RenderContext, context.app_object)
-        widget = rc.find(ExternalLibraryWidget).widget
-        model_id = widget._model_id
-
-        page_session.goto(solara_server.base_url + f"?kernelid={kernel_id}&modelid={model_id}")
-        page_session.locator(".external-split-widget").wait_for()
-        page_session.locator("text=External Vue library pane").wait_for()
-        page_session.locator("text=Nested widget works").wait_for()
-
-
-def test_popout_jupyter_widget_only(page_session: "playwright.sync_api.Page", solara_server, solara_app, extra_include_path):
-    with extra_include_path(HERE), solara_app("popout_external_widget_test:JupyterWidgetOnlyApp"):
-        page_session.goto(solara_server.base_url + "?solara-no-close-beacon")
-        page_session.locator(".jupyter-widget-only").wait_for()
-        page_session.locator("text=Plain jupyter-widget works").wait_for()
-
-        contexts = list(kernel_context.contexts.values())
-        assert len(contexts) == 1
-        context = contexts[0]
-        kernel_id = context.id
-        rc = cast(_RenderContext, context.app_object)
-        widget = rc.find(JupyterWidgetOnly).widget
-        model_id = widget._model_id
-
-        page_session.goto(solara_server.base_url + f"?kernelid={kernel_id}&modelid={model_id}")
-        page_session.locator(".jupyter-widget-only").wait_for()
-        page_session.locator("text=Plain jupyter-widget works").wait_for()
-
-
-def test_popout_full_vue_only(page_session: "playwright.sync_api.Page", solara_server, solara_app, extra_include_path):
-    with extra_include_path(HERE), solara_app("popout_external_widget_test:FullVueOnlyApp"):
-        page_session.goto(solara_server.base_url + "?solara-no-close-beacon")
-        page_session.locator(".full-vue-only-widget").wait_for()
-        page_session.locator("text=Full Vue component works").wait_for()
-
-        contexts = list(kernel_context.contexts.values())
-        assert len(contexts) == 1
-        context = contexts[0]
-        kernel_id = context.id
-        rc = cast(_RenderContext, context.app_object)
-        widget = rc.find(FullVueOnlyWidget).widget
-        model_id = widget._model_id
-
-        page_session.goto(solara_server.base_url + f"?kernelid={kernel_id}&modelid={model_id}")
-        page_session.locator(".full-vue-only-widget").wait_for()
-        page_session.locator("text=Full Vue component works").wait_for()
diff --git a/tests/integration/starlette_test.py b/tests/integration/starlette_test.py
index 7450b67e7..1c22d045e 100644
--- a/tests/integration/starlette_test.py
+++ b/tests/integration/starlette_test.py
@@ -1,3 +1,4 @@
+from contextlib import suppress
 from pathlib import Path
 
 import playwright.sync_api
@@ -39,6 +40,7 @@ def myroot(request: Request):
 def test_starlette_mount(page_session: playwright.sync_api.Page, solara_app, extra_include_path):
     settings.main.root_path = None
     settings.main.base_url = ""
+    server = None
     try:
         port = conftest.TEST_PORT
         conftest.TEST_PORT += 1
@@ -49,5 +51,12 @@ def test_starlette_mount(page_session: playwright.sync_api.Page, solara_app, ext
             page_session.goto(f"{server.base_url}/solara_mount/")
             page_session.locator("text=Mounted in starlette").wait_for()
     finally:
+        # page_session is shared across integration tests. Leave the mounted app
+        # before stopping its private server so reconnects cannot leak
+        # /solara_mount state into the next test.
+        with suppress(Exception):
+            page_session.goto("about:blank")
+        if server is not None:
+            server.stop_serving()
         settings.main.root_path = None
         settings.main.base_url = ""
diff --git a/tests/unit/input_time_test.py b/tests/unit/input_time_test.py
index 5cd8ce1e9..368892732 100644
--- a/tests/unit/input_time_test.py
+++ b/tests/unit/input_time_test.py
@@ -152,16 +152,16 @@ def test_input_time_on_open_value():
     on_value = MagicMock()
     el = InputTime(value=now, label="label", on_value=on_value, on_open_value=on_open_value)
     box, rc = solara.render(el, handle_error=False)
-    menu = rc.find(vw.VuetifyTemplate)
+    menu = rc.find(vw.Menu)
     assert menu is not None
 
     # Simulate opening the time picker
-    menu.widget.show_menu = True
+    menu.widget.v_model = True
     assert on_open_value.call_count == 1
     assert on_open_value.call_args[0][0] is True
 
     # Simulate closing the time picker
-    menu.widget.show_menu = False
+    menu.widget.v_model = False
     assert on_open_value.call_count == 2
     assert on_open_value.call_args[0][0] is False
 

From a6689b5ecc6c9c611898576fa63cdfda755681f7 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 18 Jun 2026 13:30:51 +0200
Subject: [PATCH 07/27] fix website style issues 1

---
 solara/components/datatable.vue        | 62 +++++++++++++-------------
 solara/server/app.py                   |  2 +-
 solara/server/assets/theme.js          |  9 +++-
 solara/server/templates/solara.html.j2 |  4 +-
 solara/website/assets/custom.css       | 28 ++++++++++++
 solara/website/assets/theme.js         | 10 ++++-
 solara/website/components/docs.py      |  2 +-
 solara/website/components/header.py    | 11 +++--
 solara/website/components/sidebar.py   | 38 ++++++++++------
 solara/website/pages/home.vue          |  2 +-
 10 files changed, 110 insertions(+), 58 deletions(-)

diff --git a/solara/components/datatable.vue b/solara/components/datatable.vue
index 83929fbf8..73bba5dbb 100644
--- a/solara/components/datatable.vue
+++ b/solara/components/datatable.vue
@@ -10,38 +10,36 @@
           scrollable && 'solara-data-table--scrollable',
         ]" :style="scrollable && height != null && `height: ${height}`">
         <template v-slot:headers>
-          <thead>
-            <tr>
-              <th style="padding: 0 10px; width: 40px">#</th>
-              <th style="padding: 0 1px; width: 30px" v-if="selection_enabled">
-                <v-btn icon color="primary" variant="text" size="small" @click="apply_filter">
-                  <v-icon>filter_list</v-icon>
-                </v-btn>
-              </th>
-              <th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.title">
-                <v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
-              </th>
-              <th class="text-no-wrap" :key="header.title" v-for="header in headers">
-                {{ header.title }}
-                <span class="solara-data-table-header-menu" @mouseenter="onHeaderHover({ isOpen: true, header })"
-                  @mouseleave="onHeaderHover({ isOpen: false, header })"
-                  v-if="(column_actions && column_actions.length) || column_header_widget">
-                  <v-icon size="small" class="solara-data-table-menu">mdi-dots-vertical</v-icon>
-                  <v-sheet v-if="header.key === column_header_hover" class="solara-data-table-column-header-sheet solara-data-table-header-menu-content" elevation="2">
-                    <jupyter-widget v-if="column_header_widget" :widget="column_header_widget"></jupyter-widget>
-                    <v-list v-if="column_actions && column_actions.length">
-                      <v-list-subheader>Actions:</v-list-subheader>
-                      <v-list-item link @click="on_column_action([header.key, index])"
-                        v-for="(action, index) in column_actions" :key="index">
-                        <template v-slot:prepend><v-icon>{{ action.icon }}</v-icon></template>
-                        <v-list-item-title>{{ action.name }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-sheet>
-                </span>
-              </th>
-            </tr>
-          </thead>
+          <tr>
+            <th style="padding: 0 10px; width: 40px">#</th>
+            <th style="padding: 0 1px; width: 30px" v-if="selection_enabled">
+              <v-btn icon color="primary" variant="text" size="small" @click="apply_filter">
+                <v-icon>filter_list</v-icon>
+              </v-btn>
+            </th>
+            <th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.title">
+              <v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
+            </th>
+            <th class="text-no-wrap" :key="header.title" v-for="header in headers">
+              {{ header.title }}
+              <span class="solara-data-table-header-menu" @mouseenter="onHeaderHover({ isOpen: true, header })"
+                @mouseleave="onHeaderHover({ isOpen: false, header })"
+                v-if="(column_actions && column_actions.length) || column_header_widget">
+                <v-icon size="small" class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                <v-sheet v-if="header.key === column_header_hover" class="solara-data-table-column-header-sheet solara-data-table-header-menu-content" elevation="2">
+                  <jupyter-widget v-if="column_header_widget" :widget="column_header_widget"></jupyter-widget>
+                  <v-list v-if="column_actions && column_actions.length">
+                    <v-list-subheader>Actions:</v-list-subheader>
+                    <v-list-item link @click="on_column_action([header.key, index])"
+                      v-for="(action, index) in column_actions" :key="index">
+                      <template v-slot:prepend><v-icon>{{ action.icon }}</v-icon></template>
+                      <v-list-item-title>{{ action.name }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-sheet>
+              </span>
+            </th>
+          </tr>
         </template>
         <template v-slot:item="props">
           <!-- @click="on_row_clicked(props.item.__row__)" -->
diff --git a/solara/server/app.py b/solara/server/app.py
index 798846e81..57f2f6e56 100644
--- a/solara/server/app.py
+++ b/solara/server/app.py
@@ -438,7 +438,7 @@ def load_app_widget(app_state, app_script: AppScript, pathname: str):
             container.children = [widget]
 
 
-def load_themes(themes: Dict[str, Dict[str, str]], dark: bool):
+def load_themes(themes: Dict[str, Dict[str, Any]], dark: bool):
     # While these usually gets set from the frontend, in solara (server) we want to know theme information directly at the first
     # render. Also, using the same trait allows us to write code which works on all widgets platforms, instead
     # or using something different when running under solara server
diff --git a/solara/server/assets/theme.js b/solara/server/assets/theme.js
index 089149935..e5d2ab02e 100644
--- a/solara/server/assets/theme.js
+++ b/solara/server/assets/theme.js
@@ -1,3 +1,10 @@
 vuetifyThemes = {
-
+    light: {
+        dark: false,
+        colors: {},
+    },
+    dark: {
+        dark: true,
+        colors: {},
+    }
 }
diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
index db801ad3d..878bdda5a 100644
--- a/solara/server/templates/solara.html.j2
+++ b/solara/server/templates/solara.html.j2
@@ -228,6 +228,7 @@
         }
     </script>
     {% block after_pre_rendered_html %}{% endblock %}
+    {{ resources.include_js("/static/assets/theme.js") }}
     {% if vue3 == True %}
         <link href="{{cdn}}/@widgetti/solara-vuetify3-app@5.0.2/dist/fonts.css" rel="stylesheet"></link>
         {% if production %}
@@ -262,7 +263,6 @@
     </script>
 
     {{ resources.include_js("/static/assets/custom.js") }}
-    {{ resources.include_js("/static/assets/theme.js") }}
 
     <script src="{{cdn}}/requirejs@2.3.6/require.js" crossorigin="anonymous">
     </script>
@@ -308,7 +308,7 @@
                 document.querySelector('#app').removeAttribute("style");
                 // listen to change in preferred color scheme (e.g if choosing dark in OSX)
                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                    this.$vuetify.theme.dark = inDarkMode();
+                    this.$vuetify.theme.global.name = inDarkMode() ? 'dark' : 'light';
                 });
                 document.getElementById('pre-render-theme').remove();
             },
diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css
index 87fc75c3d..83cbffe76 100644
--- a/solara/website/assets/custom.css
+++ b/solara/website/assets/custom.css
@@ -304,12 +304,40 @@ blockquote p:last-child {
     color: white !important;
 }
 
+.header-theme-toggle .v-btn {
+    color: var(--color-text-fade);
+}
+
+.header-theme-toggle .v-icon {
+    opacity: 0.9;
+}
+
 
 /* fixes padding issue on drawer menu */
 .v-list-group__items {
     padding-left: 1rem;
 }
 
+.docs-sidebar-list .docs-sidebar-home-item.v-list-item--active {
+    background-color: rgba(255, 153, 31, 0.1);
+}
+
+.docs-sidebar-list .v-list-item--active > .v-list-item__overlay {
+    opacity: 0;
+}
+
+.docs-sidebar-list .v-list-item:not(.v-list-item--active) .v-icon {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.theme--dark .docs-sidebar-list .docs-sidebar-home-item.v-list-item--active {
+    background-color: var(--dark-color-primary-lightest);
+}
+
+.theme--dark .docs-sidebar-list .v-list-item:not(.v-list-item--active) .v-icon {
+    color: var(--dark-color-grey);
+}
+
 /* menu */
 
 .menu {
diff --git a/solara/website/assets/theme.js b/solara/website/assets/theme.js
index 38dc82996..c8c3309fe 100644
--- a/solara/website/assets/theme.js
+++ b/solara/website/assets/theme.js
@@ -1,8 +1,14 @@
 vuetifyThemes = {
     light: {
-        primary: '#ff991f',
+        dark: false,
+        colors: {
+            primary: '#ff991f',
+        },
     },
     dark: {
-        primary: '#f77e14',
+        dark: true,
+        colors: {
+            primary: '#f77e14',
+        },
     }
 }
diff --git a/solara/website/components/docs.py b/solara/website/components/docs.py
index 2ad103591..aa89cd15d 100644
--- a/solara/website/components/docs.py
+++ b/solara/website/components/docs.py
@@ -88,8 +88,8 @@ def WithCode(route_current):
                     label="View source",
                     icon_name="mdi-github-circle",
                     attributes={"href": github_url, "target": "_blank"},
-                    text=True,
                     outlined=True,
+                    color="var(--color-grey)",
                     class_="mt-8",
                 )
     return main
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
index 9ffcb3787..22b82f612 100644
--- a/solara/website/components/header.py
+++ b/solara/website/components/header.py
@@ -17,6 +17,7 @@ def Header(
     route_current_with_children, all_routes_with_children = solara.use_route()
     router = solara.use_router()
     dark_effective = solara.lab.use_dark_effective()
+    header_icon_style = "color: var(--color-text-fade);"
 
     # set states for menu
     with solara.Column(gap="0px"):
@@ -25,7 +26,7 @@ def Header(
         #         "div",
         #         unsafe_innerHTML="<a href='https://github.com/widgetti/solara' target='_blank' >Star us on github 🤩</a>",
         #     )
-        with solara.v.AppBar(tag="header", flat=True, style_="background-color: transparent; border-bottom: 1px solid var(--color-border-appbar);"):
+        with solara.v.Toolbar(tag="header", flat=True, style_="background-color: transparent; border-bottom: 1px solid var(--color-border-appbar);"):
             if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
                 with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()):
                     rv.Icon(children=["mdi-menu"])
@@ -60,13 +61,15 @@ def Header(
                     current = route_current == route
                     with rv.Html(tag="li", class_="active" if current else None):
                         solara.Link("/" + route.path if route.path != "/" else "/", children=[route.label])
-            with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", attributes={"href": solara.github_url, "target": "_blank"}):
+            with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", style_=header_icon_style, attributes={"href": solara.github_url, "target": "_blank"}):
                 rv.Icon(children=["mdi-github-circle"])
 
-            with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", attributes={"href": "https://discord.solara.dev", "target": "_blank"}):
+            with rv.Btn(
+                icon=True, tag="a", class_="d-none d-md-flex", style_=header_icon_style, attributes={"href": "https://discord.solara.dev", "target": "_blank"}
+            ):
                 rv.Icon(children=["mdi-discord"])
 
-            with solara.v.Html(tag="div", class_="d-none d-md-flex"):
+            with solara.v.Html(tag="div", class_="header-theme-toggle d-none d-md-flex"):
                 solara.lab.ThemeToggle()
 
             # with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_right_menu and on_toggle_right_menu()):
diff --git a/solara/website/components/sidebar.py b/solara/website/components/sidebar.py
index 1dd701c88..34cdcc586 100644
--- a/solara/website/components/sidebar.py
+++ b/solara/website/components/sidebar.py
@@ -5,6 +5,7 @@
 def Sidebar():
     route_current, all_routes = solara.use_route(-1)
     router = solara.use_router()
+    link_style = {"color": "inherit", "text-decoration": "none"}
     if route_current is None:
         return solara.Error("Page not found")
 
@@ -25,18 +26,21 @@ def Sidebar():
                     opened.append(path_sub)
 
     with solara.v.List(
-        nav=True,
+        class_="docs-sidebar-list",
+        active_color="#ff991f",
         selected=[router.path],
         opened=opened,
-        style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto;",
+        style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto; padding: 8px;",
     ) as main:
         # e.g. getting_started, examples, components, api, advanced, faq
         for route in all_routes:
             if len(route.children) == 1 or route.path == "/":
-                with solara.Link("/documentation/" + route.path if route.path != "/" else "/documentation"):
+                with solara.Link("/documentation/" + route.path if route.path != "/" else "/documentation", style=link_style):
                     solara.v.ListItem(
                         value="/documentation/" + route.path if route.path != "/" else "/documentation",
                         prepend_icon="mdi-home" if route.path == "/" else None,
+                        min_height=56 if route.path == "/" else None,
+                        class_="docs-sidebar-home-item" if route.path == "/" else None,
                         title=route.label,
                         style_="padding: 0 20px;",
                     )
@@ -46,7 +50,6 @@ def Sidebar():
                 with solara.v.ListGroup(
                     value=path_top_level,
                     v_slots=[{"name": "activator", "variable": "x", "children": activator}],
-                    style_="padding: 0 20px;",
                 ):
                     for item in route.children:
                         label = item.label
@@ -55,9 +58,15 @@ def Sidebar():
                             label = "Overview"
                         path_sub = "/documentation/" + route.path + "/" + item.path
                         if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
-                            activator = solara.v.ListItem(title=label, density="compact", style_="padding: 0 20px;", v_bind="x.props")
+                            activator = solara.v.ListItem(
+                                title=label,
+                                min_height=56,
+                                style_="--indent-padding: 0px; --list-indent-size: 0px; padding: 0 20px;",
+                                v_bind="x.props",
+                            )
                             with solara.v.ListGroup(
                                 value=path_sub,
+                                subgroup=True,
                                 v_slots=[{"name": "activator", "variable": "x", "children": activator}],
                             ):
                                 for subitem in item.children:
@@ -71,17 +80,18 @@ def Sidebar():
                                     )
                                     with solara.Link(
                                         path,
+                                        style=link_style,
                                     ):
-                                        solara.v.ListItem(density="compact", style_="margin-left: 40px; padding: 0 20px;", value=path, title=subitem.label)
+                                        solara.v.ListItem(density="compact", style_="--indent-padding: 56px; padding: 0 20px;", value=path, title=subitem.label)
                         else:
                             path = "/documentation/" + route.path + ("/" + item.path if item.path != "/" else "")
-                            with solara.Link(path):
-                                solara.v.ListItem(density="compact", style_="padding: 0 20px;", value=path, title=label)
-        with solara.Link("/contact"):
-            solara.v.ListItem(value="/contact", prepend_icon="mdi-email", title="Contact", style_="padding: 0 20px;")
-        with solara.Link("/changelog"):
-            solara.v.ListItem(value="/changelog", prepend_icon="mdi-history", title="Changelog", style_="padding: 0 20px;")
-        with solara.Link("/roadmap"):
-            solara.v.ListItem(value="/roadmap", prepend_icon="mdi-road", title="Roadmap", style_="padding: 0 20px;")
+                            with solara.Link(path, style=link_style):
+                                solara.v.ListItem(density="compact", style_="--indent-padding: 4px; padding: 0 20px;", value=path, title=label)
+        with solara.Link("/contact", style=link_style):
+            solara.v.ListItem(value="/contact", prepend_icon="mdi-email", min_height=56, title="Contact", style_="padding: 0 20px;")
+        with solara.Link("/changelog", style=link_style):
+            solara.v.ListItem(value="/changelog", prepend_icon="mdi-history", min_height=56, title="Changelog", style_="padding: 0 20px;")
+        with solara.Link("/roadmap", style=link_style):
+            solara.v.ListItem(value="/roadmap", prepend_icon="mdi-road", min_height=56, title="Roadmap", style_="padding: 0 20px;")
 
     return main
diff --git a/solara/website/pages/home.vue b/solara/website/pages/home.vue
index 125dac659..26ae5107f 100644
--- a/solara/website/pages/home.vue
+++ b/solara/website/pages/home.vue
@@ -479,7 +479,7 @@ body {
     align-items: stretch;
 
     color: var(--color-text);
-    font-family: "Roboto, sans-serif";
+    font-family: "Roboto", sans-serif;
     font-style: normal;
     font-weight: 500;
 }

From a8ad73e6782dc39409419fb8c313f1ff9cc5bd62 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 18 Jun 2026 13:51:27 +0200
Subject: [PATCH 08/27] fix: checkbox Vuetify 3 compatibility

---
 solara/components/checkbox.py | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/solara/components/checkbox.py b/solara/components/checkbox.py
index e72edabd4..9ec45ac52 100644
--- a/solara/components/checkbox.py
+++ b/solara/components/checkbox.py
@@ -44,7 +44,10 @@ def Page():
     """
     reactive_value = solara.use_reactive(value, on_value)
     del value, on_value
-    children = []
-    if label is not None:
-        children = [label]
-    return v.Checkbox(label=label, v_model=reactive_value.value, on_v_model=reactive_value.set, disabled=disabled, style_=style, children=children)
+    return v.Checkbox(
+        label=label,
+        v_model=reactive_value.value,
+        on_v_model=reactive_value.set,
+        disabled=disabled,
+        style_=style,
+    )

From b77d7e73ae4047ad9eb01b0ee259489b563bc856 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 18 Jun 2026 14:16:31 +0200
Subject: [PATCH 09/27] fix: use same color for filebrowser icons as in Vuetify
 2

---
 solara/components/file_list_widget.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/solara/components/file_list_widget.vue b/solara/components/file_list_widget.vue
index c932a63a9..9db7e19b3 100644
--- a/solara/components/file_list_widget.vue
+++ b/solara/components/file_list_widget.vue
@@ -14,7 +14,7 @@
       >
         <div class="solara-file-list-row">
           <div class="solara-file-list-icon">
-            <v-icon>{{ name === '..' ? 'mdi-keyboard-backspace' : is_file ? 'mdi-file-document' : 'mdi-folder' }}</v-icon>
+            <v-icon class="text-medium-emphasis">{{ name === '..' ? 'mdi-keyboard-backspace' : is_file ? 'mdi-file-document' : 'mdi-folder' }}</v-icon>
           </div>
           <v-list-item-title :class="'solara-file-list-' + (is_file ? 'file' : 'dir')">
             {{ name }}<span v-if="size"> - {{ size }}</span>

From dcdd1e6e63fec0aca6497e24fb57a437fe195a62 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 18 Jun 2026 14:28:07 +0200
Subject: [PATCH 10/27] fix: active-color doesn't exist any more

---
 solara/website/components/sidebar.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/solara/website/components/sidebar.py b/solara/website/components/sidebar.py
index 34cdcc586..98e7087be 100644
--- a/solara/website/components/sidebar.py
+++ b/solara/website/components/sidebar.py
@@ -27,7 +27,7 @@ def Sidebar():
 
     with solara.v.List(
         class_="docs-sidebar-list",
-        active_color="#ff991f",
+        color="#ff991f",
         selected=[router.path],
         opened=opened,
         style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto; padding: 8px;",

From d4832e59b2211a16ae0520667c28e282e84b30b2 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 18 Jun 2026 14:45:40 +0200
Subject: [PATCH 11/27] fix: prevent autofocus dialog mount crash

Render ConfirmationDialog content eagerly so Vuetify 3 has the dialog
children mounted before autofocus runs. This avoids the overlay/transition
mount race that caused Vue to throw `insertBefore` null-parent errors when
opening the autofocus example.
---
 solara/lab/components/confirmation_dialog.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/solara/lab/components/confirmation_dialog.py b/solara/lab/components/confirmation_dialog.py
index 8f1338753..6d9ae75c2 100644
--- a/solara/lab/components/confirmation_dialog.py
+++ b/solara/lab/components/confirmation_dialog.py
@@ -134,6 +134,7 @@ def on_v_model(value):
         on_v_model=on_v_model,
         persistent=persistent,
         max_width=max_width,
+        eager=True,
     ):
         with solara.v.Card():
             solara.v.CardTitle(children=[title])

From d4e495dd06c0aa919542d74427858339a0866a94 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Mon, 22 Jun 2026 16:28:15 +0200
Subject: [PATCH 12/27] fix: avoid KaTeX rendering inside embedded widgets

KaTeX auto-render was run over the full markdown template root, including
live widget output produced by executed Solara markdown examples. With
Vue 3/Vuetify 3, opening a v-select inside such an embedded widget could
then crash Vue's patcher with "Cannot read properties of null (reading
'insertBefore')".

Configure KaTeX to ignore Solara/Jupyter widget output and remove the broad
markdown updated hook that reran Mermaid/KaTeX for descendant widget updates.
Markdown content changes already remount the template via the rendered HTML
hash key, so the mounted pass still handles real markdown changes.
---
 solara/components/markdown.py | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/solara/components/markdown.py b/solara/components/markdown.py
index 053947a0f..345a7b15a 100644
--- a/solara/components/markdown.py
+++ b/solara/components/markdown.py
@@ -119,7 +119,8 @@ def _markdown_template(
                     {left: "$", right: "$", display: false},
                     {left: "\\[", right: "\\]", display: true},
                     {left: "\\(", right: "\\)", display: false}
-                ]
+                ],
+                ignoredClasses: ["solara-markdown-output", "jupyter-widgets"]
             };
         if (window.renderMathInElement) {
             window.renderMathInElement(this.$el, this.latexSettings);
@@ -225,16 +226,6 @@ def _markdown_template(
         getCdn() {
             return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
         }
-    },
-    updated() {
-        // if the html gets update, re-run mermaid
-        this.mermaid.init();
-
-        if(window.MathJax && MathJax.Hub) {
-            MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.$el]);
-        } else {
-            window.renderMathInElement(this.$el, this.latexSettings);
-        }
     }
 }
 </script>

From c4dab1db5a8167c4cafb319e6fc27e052a493976 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 23 Jun 2026 14:11:28 +0200
Subject: [PATCH 13/27] fix: this is not needed anymore after previous fix

---
 solara/lab/components/confirmation_dialog.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/solara/lab/components/confirmation_dialog.py b/solara/lab/components/confirmation_dialog.py
index 6d9ae75c2..8f1338753 100644
--- a/solara/lab/components/confirmation_dialog.py
+++ b/solara/lab/components/confirmation_dialog.py
@@ -134,7 +134,6 @@ def on_v_model(value):
         on_v_model=on_v_model,
         persistent=persistent,
         max_width=max_width,
-        eager=True,
     ):
         with solara.v.Card():
             solara.v.CardTitle(children=[title])

From d917a3deedcbba3c35661147955d6db2dc5e0053 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 2 Jul 2026 14:21:37 +0200
Subject: [PATCH 14/27] =?UTF-8?q?Bump=20version:=201.57.6=20=E2=86=92=202.?=
 =?UTF-8?q?0.0a0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpversion.cfg                                       |  2 +-
 .github/pycafe-create-status.py                        |  6 +++---
 packages/pytest-ipywidgets/pyproject.toml              |  6 +++---
 packages/solara-assets/solara_assets/__init__.py       |  2 +-
 packages/solara-enterprise/pyproject.toml              |  4 ++--
 .../solara-enterprise/solara_enterprise/__init__.py    |  2 +-
 packages/solara-meta/pyproject.toml                    | 10 +++++-----
 packages/solara-server/pyproject.toml                  |  2 +-
 release.md                                             |  4 ++--
 solara/__init__.py                                     |  2 +-
 solara/server/static/solara_bootstrap.py               |  2 +-
 11 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index 476168d0f..eb84b5d2d 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 1.57.6
+current_version = 2.0.0a0
 commit = True
 tag = True
 parse = (?P<major>\d+)(\.(?P<minor>\d+))(\.(?P<patch>\d+))((?P<release>.)(?P<build>\d+))?
diff --git a/.github/pycafe-create-status.py b/.github/pycafe-create-status.py
index 07fd7c6ae..45d44dbc1 100644
--- a/.github/pycafe-create-status.py
+++ b/.github/pycafe-create-status.py
@@ -50,10 +50,10 @@ def increment():
 
 artifact_name = "solara-builds"  # name given in the GitHub Actions workflow file for the artifact
 
-# your default requirements, the wheel version number (1.57.6) is bumped up for each new release using bump2version
+# your default requirements, the wheel version number (2.0.0a0) is bumped up for each new release using bump2version
 requirements = f"""solara
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-1.57.6-py2.py3-none-any.whl
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-1.57.6-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a0-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a0-py2.py3-none-any.whl
 """
 
 # GitHub Python API
diff --git a/packages/pytest-ipywidgets/pyproject.toml b/packages/pytest-ipywidgets/pyproject.toml
index 24dae56a5..5eec00ab6 100644
--- a/packages/pytest-ipywidgets/pyproject.toml
+++ b/packages/pytest-ipywidgets/pyproject.toml
@@ -11,10 +11,10 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "1.57.6"
+version = "2.0.0a0"
 dependencies = [
-    "solara-ui==1.57.6",
-    "solara-server[starlette]==1.57.6",
+    "solara-ui==2.0.0a0",
+    "solara-server[starlette]==2.0.0a0",
     "pytest",
     "playwright",
     "pytest-playwright",
diff --git a/packages/solara-assets/solara_assets/__init__.py b/packages/solara-assets/solara_assets/__init__.py
index 12455b4f9..daca2d523 100644
--- a/packages/solara-assets/solara_assets/__init__.py
+++ b/packages/solara-assets/solara_assets/__init__.py
@@ -1,3 +1,3 @@
 "CDN assets for Solara"
 
-__version__ = "1.57.6"
+__version__ = "2.0.0a0"
diff --git a/packages/solara-enterprise/pyproject.toml b/packages/solara-enterprise/pyproject.toml
index 390040035..125562ad0 100644
--- a/packages/solara-enterprise/pyproject.toml
+++ b/packages/solara-enterprise/pyproject.toml
@@ -12,8 +12,8 @@ requires-python = ">=3.8"
 classifiers = ["License :: Free for non-commercial use"]
 dynamic = ["version", "description"]
 dependencies = [
-    "solara-ui==1.57.6",
-    "solara-server==1.57.6",
+    "solara-ui==2.0.0a0",
+    "solara-server==2.0.0a0",
 ]
 
 [project.optional-dependencies]
diff --git a/packages/solara-enterprise/solara_enterprise/__init__.py b/packages/solara-enterprise/solara_enterprise/__init__.py
index 4b74a3807..02c060697 100644
--- a/packages/solara-enterprise/solara_enterprise/__init__.py
+++ b/packages/solara-enterprise/solara_enterprise/__init__.py
@@ -1,3 +1,3 @@
 "Enterprise features for Solara"
 
-__version__ = "1.57.6"
+__version__ = "2.0.0a0"
diff --git a/packages/solara-meta/pyproject.toml b/packages/solara-meta/pyproject.toml
index f7983b837..7b0c07c71 100644
--- a/packages/solara-meta/pyproject.toml
+++ b/packages/solara-meta/pyproject.toml
@@ -11,13 +11,13 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "1.57.6"
+version = "2.0.0a0"
 packages = [
     { include = "solara" }
 ]
 dependencies = [
-    "solara-ui[all]==1.57.6",
-    "solara-server[starlette,dev]==1.57.6"
+    "solara-ui[all]==2.0.0a0",
+    "solara-server[starlette,dev]==2.0.0a0"
 ]
 
 [project.urls]
@@ -33,7 +33,7 @@ all = [
 ]
 
 assets = [
-    "solara-assets==1.57.6"
+    "solara-assets==2.0.0a0"
 ]
 
 documentation = [
@@ -55,7 +55,7 @@ documentation = [
 
 # for backwards compatibility to support solara[pytest]
 pytest = [
-    "pytest-ipywidgets[all]==1.57.6"
+    "pytest-ipywidgets[all]==2.0.0a0"
 ]
 
 # for backwards compatibility to support solara[dev]
diff --git a/packages/solara-server/pyproject.toml b/packages/solara-server/pyproject.toml
index d0edc4520..7b674c861 100644
--- a/packages/solara-server/pyproject.toml
+++ b/packages/solara-server/pyproject.toml
@@ -10,7 +10,7 @@ authors = [{name = "Maarten A. Breddels", email = "maartenbreddels@gmail.com"}]
 license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
-version = "1.57.6"
+version = "2.0.0a0"
 dynamic = ["description"]
 dependencies = [
     "solara-ui",
diff --git a/release.md b/release.md
index 45798dc95..bf31cbb8b 100644
--- a/release.md
+++ b/release.md
@@ -55,8 +55,8 @@ Wait for the CI to publish packages to PyPI. The PyPI publish is part of the "Te
 gh run list --limit=5
 
 # Example output:
-# queued  Bump version: 1.57.0 → 1.57.6  Test  v1.57.6  push  21209892447  ...
-# queued  Bump version: 1.57.0 → 1.57.6  Test  master   push  21209892400  ...
+# queued  Bump version: 1.57.0 → 2.0.0a0  Test  v2.0.0a0  push  21209892447  ...
+# queued  Bump version: 1.57.0 → 2.0.0a0  Test  master   push  21209892400  ...
 
 # Watch the tag workflow (use the run ID from the v1.x.x row)
 gh run watch 21209892447 --exit-status
diff --git a/solara/__init__.py b/solara/__init__.py
index fecf0ffaf..bba39413f 100644
--- a/solara/__init__.py
+++ b/solara/__init__.py
@@ -1,6 +1,6 @@
 """Build webapps using IPywidgets"""
 
-__version__ = "1.57.6"
+__version__ = "2.0.0a0"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 
diff --git a/solara/server/static/solara_bootstrap.py b/solara/server/static/solara_bootstrap.py
index c1d0b9667..b88738826 100644
--- a/solara/server/static/solara_bootstrap.py
+++ b/solara/server/static/solara_bootstrap.py
@@ -119,7 +119,7 @@ async def main():
     ]
     for dep in requirements:
         await micropip.install(dep, keep_going=True)
-    await micropip.install("/wheels/solara-1.57.6-py2.py3-none-any.whl", keep_going=True)
+    await micropip.install("/wheels/solara-2.0.0a0-py2.py3-none-any.whl", keep_going=True)
     import solara
 
     el = solara.Warning("lala")

From a49f7c70bf3088eb5775f33f649b613cf19d610f Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 2 Jul 2026 14:31:12 +0200
Subject: [PATCH 15/27] release dev wheels from this PR

---
 .github/workflows/test.yaml | 76 ++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index dce6110c5..b8cc45c52 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -107,44 +107,44 @@ jobs:
             packages/solara-vuetify-app/dist
             packages/solara-vuetify3-app/dist
 
-#      - name: Publish dev wheels to object storage
-#        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
-#        env:
-#          AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
-#          AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
-#          AWS_REGION: nbg1
-#          AWS_ENDPOINT_URL_S3: https://nbg1.your-objectstorage.com
-#          S3_BUCKET: ipyvue3-packages
-#        run: |
-#          python -m pip install --upgrade awscli
-#
-#          aws s3 cp dist/ "s3://${S3_BUCKET}/packages/solara/" \
-#            --recursive \
-#            --exclude "*" \
-#            --include "*.whl" \
-#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-#            --region "$AWS_REGION"
-#
-#          aws s3 cp packages/solara-meta/dist/ "s3://${S3_BUCKET}/packages/solara-meta/" \
-#            --recursive \
-#            --exclude "*" \
-#            --include "*.whl" \
-#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-#            --region "$AWS_REGION"
-#
-#          aws s3 cp packages/solara-server/dist/ "s3://${S3_BUCKET}/packages/solara-server/" \
-#            --recursive \
-#            --exclude "*" \
-#            --include "*.whl" \
-#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-#            --region "$AWS_REGION"
-#
-#          aws s3 cp packages/pytest-ipywidgets/dist/ "s3://${S3_BUCKET}/packages/pytest-ipywidgets/" \
-#            --recursive \
-#            --exclude "*" \
-#            --include "*.whl" \
-#            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
-#            --region "$AWS_REGION"
+      - name: Publish dev wheels to object storage
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
+          AWS_REGION: nbg1
+          AWS_ENDPOINT_URL_S3: https://nbg1.your-objectstorage.com
+          S3_BUCKET: ipyvue3-packages
+        run: |
+          python -m pip install --upgrade awscli
+
+          aws s3 cp dist/ "s3://${S3_BUCKET}/packages/solara/" \
+            --recursive \
+            --exclude "*" \
+            --include "*.whl" \
+            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+            --region "$AWS_REGION"
+
+          aws s3 cp packages/solara-meta/dist/ "s3://${S3_BUCKET}/packages/solara-meta/" \
+            --recursive \
+            --exclude "*" \
+            --include "*.whl" \
+            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+            --region "$AWS_REGION"
+
+          aws s3 cp packages/solara-server/dist/ "s3://${S3_BUCKET}/packages/solara-server/" \
+            --recursive \
+            --exclude "*" \
+            --include "*.whl" \
+            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+            --region "$AWS_REGION"
+
+          aws s3 cp packages/pytest-ipywidgets/dist/ "s3://${S3_BUCKET}/packages/pytest-ipywidgets/" \
+            --recursive \
+            --exclude "*" \
+            --include "*.whl" \
+            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+            --region "$AWS_REGION"
 
   code-quality:
     runs-on: ubuntu-latest

From 19762b0c3ef741d571b0ff4d2f56cff156f7463d Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Mon, 6 Jul 2026 13:21:57 +0200
Subject: [PATCH 16/27] fix: Avoid re-running live markdown examples on
 rerender

In documentation/components/input this closed the dialog when
typing in the input
---
 solara/components/markdown.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/solara/components/markdown.py b/solara/components/markdown.py
index 345a7b15a..6604177cb 100644
--- a/solara/components/markdown.py
+++ b/solara/components/markdown.py
@@ -416,7 +416,7 @@ def make_markdown_object():
     if md_parser is None:
         assert md_self is not None
         md_parser = md_self
-    html = md_parser.convert(md_text)
+    html = solara.use_memo(lambda: md_parser.convert(md_text), dependencies=[md_text, md_parser, unsafe_solara_execute])
 
     def cleanup_wrapper():
         def cleanup():

From 9ba3e500a8ce9e4cdb5d040071c5ba338b317e3b Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Mon, 6 Jul 2026 17:42:39 +0200
Subject: [PATCH 17/27] fix: make SliderValue compatible with Vuetify 3

---
 solara/components/slider.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/solara/components/slider.py b/solara/components/slider.py
index c77b02f5e..c7e8a940f 100644
--- a/solara/components/slider.py
+++ b/solara/components/slider.py
@@ -331,6 +331,7 @@ def Page():
     index, set_index = solara.use_state(values.index(reactive_value.value), key="index")
 
     def on_index(index):
+        index = int(index)
         set_index(index)
         value = values[index]
         reactive_value.set(value)
@@ -341,10 +342,11 @@ def on_index(index):
             v_model=index,
             on_v_model=on_index,
             show_ticks=True,
-            ticks=values,
+            ticks={index: str(value) for index, value in enumerate(values)},
             label=label,
             min=0,
             max=len(values) - 1,
+            step=1,
             density="default",
             hide_details=True,
             disabled=disabled,

From e07230c4312fe1f5457c6872ced1ce70fcf7f32d Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 7 Jul 2026 12:12:14 +0200
Subject: [PATCH 18/27] fix: support Vuetify 3 value updates in ToggleButtons

---
 solara/components/togglebuttons.py | 25 ++++++++++++++++++++-----
 tests/unit/toggle_button_test.py   |  6 ++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/solara/components/togglebuttons.py b/solara/components/togglebuttons.py
index 6e1274150..60d1683d4 100644
--- a/solara/components/togglebuttons.py
+++ b/solara/components/togglebuttons.py
@@ -21,6 +21,18 @@ def _get_button_value(button: reacton.core.Element):
     return value
 
 
+def _value_from_index_or_value(index_or_value, values):
+    if isinstance(index_or_value, int):
+        return values[index_or_value]
+    return index_or_value
+
+
+def _index_from_index_or_value(index_or_value, values):
+    if isinstance(index_or_value, int):
+        return index_or_value
+    return values.index(index_or_value)
+
+
 @overload
 @solara.value_component(None)
 def ToggleButtonsSingle(
@@ -127,11 +139,14 @@ def Page():
     index, set_index = solara.use_state_or_update(values.index(reactive_value.value) if reactive_value.value in values else None, key="index")
 
     def on_index(index):
-        set_index(index)
+        if index is None:
+            set_index(_index_from_index_or_value(index, values) if mandatory and None in values else None)
+        else:
+            set_index(_index_from_index_or_value(index, values))
         if mandatory:
-            value = values[index]
+            value = _value_from_index_or_value(index, values)
         else:
-            value = values[index] if index is not None else None
+            value = _value_from_index_or_value(index, values) if index is not None else None
         reactive_value.set(value)
 
     return cast(
@@ -197,8 +212,8 @@ def Page():
     indices, set_indices = solara.use_state_or_update([allvalues.index(k) for k in reactive_value.value], key="index")
 
     def on_indices(indices):
-        set_indices(indices)
-        value = [allvalues[k] for k in indices]
+        set_indices([_index_from_index_or_value(k, allvalues) for k in indices])
+        value = [_value_from_index_or_value(k, allvalues) for k in indices]
         reactive_value.set(value)
 
     return cast(
diff --git a/tests/unit/toggle_button_test.py b/tests/unit/toggle_button_test.py
index d384b3c01..fc5dcb287 100644
--- a/tests/unit/toggle_button_test.py
+++ b/tests/unit/toggle_button_test.py
@@ -18,6 +18,9 @@ def Test():
     assert group.v_model == 1
     group.v_model = 2
     assert value.value == "mies"
+    group.v_model = "aap"
+    assert value.value == "aap"
+    assert group.v_model == 0
     group.v_model = 3
     assert value.value is None
     # we don't want it to change the index to None
@@ -39,3 +42,6 @@ def Test():
     group.v_model = [0, 2]
     assert value.value is not None
     assert value.value == ["aap", "mies"]
+    group.v_model = ["noot", "mies"]
+    assert value.value == ["noot", "mies"]
+    assert group.v_model == [1, 2]

From 95cdfccac1904c993bff0b4f724f58badee53cda Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Fri, 10 Jul 2026 13:31:08 +0200
Subject: [PATCH 19/27] fix: Vuetify 3 theme initialization in Solara

---
 packages/solara-vuetify3-app/src/solara-vuetify-app.js | 6 ++++++
 solara/lab/components/theming.py                       | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/solara-vuetify3-app/src/solara-vuetify-app.js b/packages/solara-vuetify3-app/src/solara-vuetify-app.js
index b6e733670..5ec0b5606 100644
--- a/packages/solara-vuetify3-app/src/solara-vuetify-app.js
+++ b/packages/solara-vuetify3-app/src/solara-vuetify-app.js
@@ -6,12 +6,18 @@ import * as components from 'vuetify/components';
 import * as labComponents from 'vuetify/labs/components';
 import * as directives from 'vuetify/directives';
 
+const dark = typeof globalThis.inDarkMode === 'function' && globalThis.inDarkMode();
+
 const vuetifyPlugin = Vuetify.createVuetify({
     components: {
         ...components,
         ...labComponents,
     },
     directives,
+    theme: globalThis.vuetifyThemes ? {
+        defaultTheme: dark ? 'dark' : 'light',
+        themes: globalThis.vuetifyThemes,
+    } : undefined,
 });
 
 
diff --git a/solara/lab/components/theming.py b/solara/lab/components/theming.py
index ed2beb3ca..d5560e394 100644
--- a/solara/lab/components/theming.py
+++ b/solara/lab/components/theming.py
@@ -1,4 +1,4 @@
-from typing import Callable, Dict, Union, cast
+from typing import Any, Callable, Dict, Union, cast
 
 import ipyvuetify.Themes
 from ipyvuetify.Themes import Theme
@@ -25,14 +25,15 @@ def use_dark_effective():
     return solara.use_trait_observe(theme, "dark_effective")
 
 
-def _set_theme(themes: Union[Dict[str, Dict[str, str]], None]):
+def _set_theme(themes: Union[Dict[str, Dict[str, Any]], None]):
     if themes is None:
         return
 
     for theme_type in themes.keys():
         widget = getattr(theme.themes, theme_type)
+        colors = themes[theme_type].get("colors", themes[theme_type])
         with widget.hold_trait_notifications():
-            for k, v in themes[theme_type].items():
+            for k, v in colors.items():
                 setattr(widget, k, v)
 
 

From e20a5a1dfbad4107b1034cd1b086409e023b87f5 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Fri, 10 Jul 2026 16:51:24 +0200
Subject: [PATCH 20/27] feat: upgrade to Vuetify 3.5

---
 .../solara-vuetify3-app/package-lock.json     | 263 +++++++++++-------
 packages/solara-vuetify3-app/package.json     |   2 +-
 solara/lab/components/input_date.py           |   2 -
 tests/integration/input_date_test.py          |   1 +
 4 files changed, 160 insertions(+), 108 deletions(-)

diff --git a/packages/solara-vuetify3-app/package-lock.json b/packages/solara-vuetify3-app/package-lock.json
index 796090fb6..2f8371cef 100644
--- a/packages/solara-vuetify3-app/package-lock.json
+++ b/packages/solara-vuetify3-app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@widgetti/solara-vuetify3-app",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@widgetti/solara-vuetify3-app",
-      "version": "5.0.0",
+      "version": "5.0.2",
       "license": "MIT",
       "dependencies": {
         "@mdi/font": "^4.9.95",
@@ -15,7 +15,7 @@
         "material-design-icons-iconfont": "^5.0.1",
         "typeface-roboto": "0.0.54",
         "vue": "^3.3.4",
-        "vuetify": "~3.3.17"
+        "vuetify": "3.5.18"
       },
       "devDependencies": {
         "css-loader": "^6.9.1",
@@ -93,10 +93,32 @@
         "typescript": "~5.3.3"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
-      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -104,6 +126,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -156,9 +191,10 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.22",
@@ -217,94 +253,104 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
-      "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.39.tgz",
+      "integrity": "sha512-16KBTEXAJCpDr0mwlw+AZyhu8iyC7R3S2vBwsI7QnWJU6X3WKc9VKeNEZpiMdZ569qWhz9574L3vV55qRL0Vtw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.6",
-        "@vue/shared": "3.4.15",
-        "entities": "^4.5.0",
+        "@babel/parser": "^7.29.7",
+        "@vue/shared": "3.5.39",
+        "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
-      "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.39.tgz",
+      "integrity": "sha512-oQPigALqYbNxTNPvNgSOe+czwVExfbVF02lz8jP0S3AXJiu3jxYDygNUiqSep4ezzW8XgnubqH63My2A7JR/vg==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-core": "3.5.39",
+        "@vue/shared": "3.5.39"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
-      "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
-      "dependencies": {
-        "@babel/parser": "^7.23.6",
-        "@vue/compiler-core": "3.4.15",
-        "@vue/compiler-dom": "3.4.15",
-        "@vue/compiler-ssr": "3.4.15",
-        "@vue/shared": "3.4.15",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.39.tgz",
+      "integrity": "sha512-d0ki86iOyN8LoZPBmk5SJWNwHP19CnDDCfuo//+2WJa2g5Ke0Jay983PIBIcSSzldC68I8DrD5GrHV3OSDfodg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@vue/compiler-core": "3.5.39",
+        "@vue/compiler-dom": "3.5.39",
+        "@vue/compiler-ssr": "3.5.39",
+        "@vue/shared": "3.5.39",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5",
-        "postcss": "^8.4.33",
-        "source-map-js": "^1.0.2"
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.15",
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
-      "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.39.tgz",
+      "integrity": "sha512-Ce7/wvwMHai74bdszfXExdazFigYnlF9zgCmEQUcM1j0fOymlouZ7XilTYNo8oUjhlnjYOZbGrcYKuqjz89Ucw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-dom": "3.5.39",
+        "@vue/shared": "3.5.39"
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
-      "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.39.tgz",
+      "integrity": "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.4.15"
+        "@vue/shared": "3.5.39"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
-      "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.39.tgz",
+      "integrity": "sha512-9GLtNyRvPAUMbX+7ono0RC2j0guo2LXVi8LvcmAooImACUKm0oFf0jjwbX8/H0AE/t1nxhAkn8RSl9PMCzzxZw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/reactivity": "3.5.39",
+        "@vue/shared": "3.5.39"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
-      "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.39.tgz",
+      "integrity": "sha512-7Y6aAGboKcXAZ3ECuUy7RrS5yy2r47dhTp2SKaJmYxjopImaVFaNa5Ne66NwGovsrxVAl5S5rwc7m22UG7Lmww==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/runtime-core": "3.4.15",
-        "@vue/shared": "3.4.15",
-        "csstype": "^3.1.3"
+        "@vue/reactivity": "3.5.39",
+        "@vue/runtime-core": "3.5.39",
+        "@vue/shared": "3.5.39",
+        "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
-      "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.39.tgz",
+      "integrity": "sha512-yZSakiAGw85rZfG7UM8akMnIF+FmeiNk47uvHf2nVBBSe+dIKUhZuZq9+XgJhbV3nS5Z4ALH23/MpXofW+mbcw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-ssr": "3.5.39",
+        "@vue/shared": "3.5.39"
       },
       "peerDependencies": {
-        "vue": "3.4.15"
+        "vue": "3.5.39"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
-      "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.39.tgz",
+      "integrity": "sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA==",
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
@@ -756,9 +802,10 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.645",
@@ -789,9 +836,10 @@
       }
     },
     "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
       },
@@ -872,7 +920,8 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
     },
     "node_modules/events": {
       "version": "3.3.0",
@@ -1162,14 +1211,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.5",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
-      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/material-design-icons-iconfont": {
@@ -1277,15 +1324,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -1366,9 +1414,10 @@
       "dev": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
@@ -1383,9 +1432,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.33",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
-      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+      "version": "8.5.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
+      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
       "funding": [
         {
           "type": "opencollective",
@@ -1400,10 +1449,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1669,9 +1719,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1847,15 +1898,16 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
-      "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.39.tgz",
+      "integrity": "sha512-xmZCYabFGcirU8r0fTuvl/LICc1OU620rnqepaJDL/a141ZigkG7AyaxQLdqJ02ZRYzWe6YPaDHeQx7MfknQfA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.15",
-        "@vue/compiler-sfc": "3.4.15",
-        "@vue/runtime-dom": "3.4.15",
-        "@vue/server-renderer": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-dom": "3.5.39",
+        "@vue/compiler-sfc": "3.5.39",
+        "@vue/runtime-dom": "3.5.39",
+        "@vue/server-renderer": "3.5.39",
+        "@vue/shared": "3.5.39"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1867,9 +1919,10 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.3.23",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.23.tgz",
-      "integrity": "sha512-EVEFvDyKr/HK2+hQJyhQSjIDULDaBi9vfgAAB0ekm+2Tvc8AkaDwb7VK44R2eilGFGpju6iN52FV7Uasj8SmIg==",
+      "version": "3.5.18",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.18.tgz",
+      "integrity": "sha512-33eRhaLkKaiyH7PDau1xDvFzAGFKNo/nFvyiKhB+DePDZBkvMEphUul+zCitHgUrQCZo1i7kfY97k6q+7QURuQ==",
+      "license": "MIT",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -1879,10 +1932,10 @@
       },
       "peerDependencies": {
         "typescript": ">=4.7",
-        "vite-plugin-vuetify": "^1.0.0-alpha.12",
-        "vue": "^3.2.0",
+        "vite-plugin-vuetify": ">=1.0.0",
+        "vue": "^3.3.0",
         "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
+        "webpack-plugin-vuetify": ">=2.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
diff --git a/packages/solara-vuetify3-app/package.json b/packages/solara-vuetify3-app/package.json
index d79797732..f83e97ecd 100644
--- a/packages/solara-vuetify3-app/package.json
+++ b/packages/solara-vuetify3-app/package.json
@@ -18,7 +18,7 @@
     "material-design-icons-iconfont": "^5.0.1",
     "typeface-roboto": "0.0.54",
     "vue": "^3.3.4",
-    "vuetify": "~3.3.17"
+    "vuetify": "3.5.18"
   },
   "devDependencies": {
     "css-loader": "^6.9.1",
diff --git a/solara/lab/components/input_date.py b/solara/lab/components/input_date.py
index 050e72330..1e709cb0e 100644
--- a/solara/lab/components/input_date.py
+++ b/solara/lab/components/input_date.py
@@ -190,7 +190,6 @@ def standard_strfy(date: Optional[dt.date]):
         with solara.v.DatePicker(
             v_model=date_standard_str,
             on_v_model=set_date_cast,
-            style_="width: 100%;",
             max=max_date,  # type: ignore
             min=min_date,  # type: ignore
             view_mode="month" if date_picker_type == "month" else None,
@@ -377,7 +376,6 @@ def set_dates_cast(values):
             v_model=date_standard_strings,
             on_v_model=set_dates_cast,
             multiple=True,
-            style_="width: 100%;",
             max=max_date,  # type: ignore
             min=min_date,  # type: ignore
             view_mode="month" if date_picker_type == "month" else None,
diff --git a/tests/integration/input_date_test.py b/tests/integration/input_date_test.py
index f710f49ae..793d0b85c 100644
--- a/tests/integration/input_date_test.py
+++ b/tests/integration/input_date_test.py
@@ -46,6 +46,7 @@ def update_value(value: dt.date):
     input.click()
     page_session.wait_for_timeout(350)
     expect(date_picker_popup(page_session)).to_be_visible()
+    expect(page_session.locator(".v-date-picker")).to_have_css("width", "328px")
     today_button = page_session.get_by_role("button", name=date.strftime("%d").lstrip("0"), exact=True)
     # We click it, but it does not trigger a change, so we don't auto close
     # Do we want to change this behaviour, and still close it?

From 5be13aefffd9d1c8c6ee5953bef27c5f06a7f331 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Fri, 10 Jul 2026 17:28:04 +0200
Subject: [PATCH 21/27] chore: upgrade Vue to 3.5.39

---
 packages/solara-vuetify3-app/package-lock.json | 2 +-
 packages/solara-vuetify3-app/package.json      | 2 +-
 solara/components/pivot_table.vue              | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/solara-vuetify3-app/package-lock.json b/packages/solara-vuetify3-app/package-lock.json
index 2f8371cef..7e65b5c0b 100644
--- a/packages/solara-vuetify3-app/package-lock.json
+++ b/packages/solara-vuetify3-app/package-lock.json
@@ -14,7 +14,7 @@
         "@widgetti/solara-widget-manager8": "file:../solara-widget-manager8",
         "material-design-icons-iconfont": "^5.0.1",
         "typeface-roboto": "0.0.54",
-        "vue": "^3.3.4",
+        "vue": "^3.5.39",
         "vuetify": "3.5.18"
       },
       "devDependencies": {
diff --git a/packages/solara-vuetify3-app/package.json b/packages/solara-vuetify3-app/package.json
index f83e97ecd..277fb7eea 100644
--- a/packages/solara-vuetify3-app/package.json
+++ b/packages/solara-vuetify3-app/package.json
@@ -17,7 +17,7 @@
     "@widgetti/solara-widget-manager8": "file:../solara-widget-manager8",
     "material-design-icons-iconfont": "^5.0.1",
     "typeface-roboto": "0.0.54",
-    "vue": "^3.3.4",
+    "vue": "^3.5.39",
     "vuetify": "3.5.18"
   },
   "devDependencies": {
diff --git a/solara/components/pivot_table.vue b/solara/components/pivot_table.vue
index 5fc553d9c..1cfdbb23f 100644
--- a/solara/components/pivot_table.vue
+++ b/solara/components/pivot_table.vue
@@ -3,6 +3,7 @@
     <h4>{{d.agg}}</h4>
       <div style="padding: 0px">
       <table class="pivottable">
+        <tbody>
         <tr v-for="(header, i) in d.headers_x">
           <th v-for="axis in Math.max(0, d.y.length-1)"></th>
           <th>{{d.x[i]}}</th>
@@ -30,17 +31,17 @@
         </tr>
 
         <tr>
-          <th>Total </td>
+          <th>Total </th>
           <th v-for="axis in Math.max(0, d.y.length-1)"></th>
           <td v-for="value in d.values_x">{{value}} </td>
           <td>
             {{d.total}}
           </td>
         </tr>
+        </tbody>
       </table>
       </div>
   </div>
-</div>
 </template>
 
 <script id="pivottable-vaex">

From b783024130049b1e750f122c7916a5842e91c4d8 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Mon, 13 Jul 2026 16:37:39 +0200
Subject: [PATCH 22/27] chore: upate to Vuetify version 3.12

---
 .github/workflows/test.yaml                   | 10 ++-------
 .../solara-vuetify3-app/package-lock.json     | 21 +++++++------------
 packages/solara-vuetify3-app/package.json     |  2 +-
 pyproject.toml                                |  4 ++--
 4 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index b8cc45c52..fec6332d2 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -414,8 +414,6 @@ jobs:
     env:
       LOCK_FILE_LOCATION: .ci-package-locks/integration/os${{ matrix.os }}-python${{ matrix.python-version }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
       DIFF_FILE_LOCATION: diff-integration-os${{ matrix.os }}-python${{ matrix.python-version }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
-      IPYVUE_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvue/ipyvue-3.0.0a5-py2.py3-none-any.whl
-      IPYVUETIFY_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvuetify/ipyvuetify-3.0.0a3-py2.py3-none-any.whl
 
     steps:
       - uses: actions/checkout@v6
@@ -464,7 +462,6 @@ jobs:
           pip install `echo packages/pytest-ipywidgets/dist/*.whl`[all,ipywidgets${{ matrix.ipywidgets_major }}]
           pip install `echo packages/solara-meta/dist/*.whl`[dev,documentation]
           pip install `echo packages/solara-enterprise/dist/*.whl`[ssg,auth]
-          pip install --force-reinstall --no-deps "${{ env.IPYVUE_V3_WHEEL }}" "${{ env.IPYVUETIFY_V3_WHEEL }}"
           pip install "jupyterlab<4"  "pydantic<2" "playwright==1.50.0" "ipywidgets~=${{ matrix.ipywidgets }}"
           pip install pytest-retry
           pip freeze --exclude solara --exclude solara-ui --exclude solara-server --exclude pytest-ipywidgets --exclude solara-enterprise > ${{ env.LOCK_FILE_LOCATION }}
@@ -480,7 +477,6 @@ jobs:
           pip install `echo packages/pytest-ipywidgets/dist/*.whl`[all,ipywidgets${{ matrix.ipywidgets_major }}]
           pip install `echo packages/solara-meta/dist/*.whl`[dev,documentation]
           pip install `echo packages/solara-enterprise/dist/*.whl`[ssg,auth]
-          pip install --force-reinstall --no-deps "${{ env.IPYVUE_V3_WHEEL }}" "${{ env.IPYVUETIFY_V3_WHEEL }}"
 
       - name: Install playwright
         run: playwright install
@@ -535,8 +531,6 @@ jobs:
     env:
       LOCK_FILE_LOCATION: .ci-package-locks/integration-vue3/os${{ matrix.os }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
       DIFF_FILE_LOCATION: diff-integration-vue3-os${{ matrix.os }}-ipywidgets${{ matrix.ipywidgets_major }}.txt
-      IPYVUE_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvue/ipyvue-3.0.0a5-py2.py3-none-any.whl
-      IPYVUETIFY_V3_WHEEL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages/ipyvuetify/ipyvuetify-3.0.0a3-py2.py3-none-any.whl
 
     steps:
       - uses: actions/checkout@v6
@@ -579,7 +573,7 @@ jobs:
           pip install "jupyterlab<4" "playwright==1.50.0" "pydantic<2" "ipywidgets~=${{ matrix.ipywidgets }}"
           pip install pytest-retry
           pip install jupyter_core jupyter-packaging
-          pip install --pre "ipyvuetify>=3.0.0a4"
+          pip install --pre "ipyvuetify>=3.0.0a5"
           pip freeze --exclude solara --exclude solara-ui --exclude solara-server --exclude pytest-ipywidgets --exclude solara-enterprise > ${{ env.LOCK_FILE_LOCATION }}
           git diff | tee ${{ env.DIFF_FILE_LOCATION }}
           [ -s ${{ env.DIFF_FILE_LOCATION }} ] && echo "HAS_DIFF=true" >> "$GITHUB_OUTPUT" || echo "No dependencies changed"
@@ -593,7 +587,7 @@ jobs:
           pip install `echo packages/pytest-ipywidgets/dist/*.whl`[all,ipywidgets${{ matrix.ipywidgets_major }}]
           pip install `echo packages/solara-meta/dist/*.whl`[dev,documentation]
           pip install `echo packages/solara-enterprise/dist/*.whl`[ssg,auth]
-          pip install --pre "ipyvuetify>=3.0.0a4"
+          pip install --pre "ipyvuetify>=3.0.0a5"
 
       - name: Install playwright
         run: playwright install
diff --git a/packages/solara-vuetify3-app/package-lock.json b/packages/solara-vuetify3-app/package-lock.json
index 7e65b5c0b..02b7a6fe3 100644
--- a/packages/solara-vuetify3-app/package-lock.json
+++ b/packages/solara-vuetify3-app/package-lock.json
@@ -15,7 +15,7 @@
         "material-design-icons-iconfont": "^5.0.1",
         "typeface-roboto": "0.0.54",
         "vue": "^3.5.39",
-        "vuetify": "3.5.18"
+        "vuetify": "3.12.9"
       },
       "devDependencies": {
         "css-loader": "^6.9.1",
@@ -1919,23 +1919,19 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.5.18",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.18.tgz",
-      "integrity": "sha512-33eRhaLkKaiyH7PDau1xDvFzAGFKNo/nFvyiKhB+DePDZBkvMEphUul+zCitHgUrQCZo1i7kfY97k6q+7QURuQ==",
+      "version": "3.12.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.12.9.tgz",
+      "integrity": "sha512-XXuKn9w/rnt7BNg7C82ot439cn/x9a7FujrqgEXaraiLS910PTxwMpAqqyYRvRQQq8Xtjn0utENrSoRpQ8XDxA==",
       "license": "MIT",
-      "engines": {
-        "node": "^12.20 || >=14.13"
-      },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/johnleider"
       },
       "peerDependencies": {
         "typescript": ">=4.7",
-        "vite-plugin-vuetify": ">=1.0.0",
-        "vue": "^3.3.0",
-        "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": ">=2.0.0"
+        "vite-plugin-vuetify": ">=2.1.0",
+        "vue": "^3.5.0",
+        "webpack-plugin-vuetify": ">=3.1.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1944,9 +1940,6 @@
         "vite-plugin-vuetify": {
           "optional": true
         },
-        "vue-i18n": {
-          "optional": true
-        },
         "webpack-plugin-vuetify": {
           "optional": true
         }
diff --git a/packages/solara-vuetify3-app/package.json b/packages/solara-vuetify3-app/package.json
index 277fb7eea..bdc977911 100644
--- a/packages/solara-vuetify3-app/package.json
+++ b/packages/solara-vuetify3-app/package.json
@@ -18,7 +18,7 @@
     "material-design-icons-iconfont": "^5.0.1",
     "typeface-roboto": "0.0.54",
     "vue": "^3.5.39",
-    "vuetify": "3.5.18"
+    "vuetify": "3.12.9"
   },
   "devDependencies": {
     "css-loader": "^6.9.1",
diff --git a/pyproject.toml b/pyproject.toml
index 34f8aedd2..bdd45f379 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -17,8 +17,8 @@ packages = [
 dependencies = [
     "reacton>=1.9",
     "ipywidgets>=7.7",
-    "ipyvue>=3.0.0a6",
-    "ipyvuetify>=3.0.0a4",
+    "ipyvue>=3.0.0a9",
+    "ipyvuetify>=3.0.0a5",
     "requests",
     "humanize",
 ]

From 7611555e8b1868e78fc7206c03345e3bf89bd568 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 14 Jul 2026 15:43:45 +0200
Subject: [PATCH 23/27] =?UTF-8?q?chore:=20Bump=20version:=202.0.0a0=20?=
 =?UTF-8?q?=E2=86=92=202.0.0a1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpversion.cfg                                       |  2 +-
 .github/pycafe-create-status.py                        |  6 +++---
 packages/pytest-ipywidgets/pyproject.toml              |  6 +++---
 packages/solara-assets/solara_assets/__init__.py       |  2 +-
 packages/solara-enterprise/pyproject.toml              |  4 ++--
 .../solara-enterprise/solara_enterprise/__init__.py    |  2 +-
 packages/solara-meta/pyproject.toml                    | 10 +++++-----
 packages/solara-server/pyproject.toml                  |  2 +-
 release.md                                             |  4 ++--
 solara/__init__.py                                     |  2 +-
 solara/server/static/solara_bootstrap.py               |  2 +-
 11 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index eb84b5d2d..f3069580f 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 2.0.0a0
+current_version = 2.0.0a1
 commit = True
 tag = True
 parse = (?P<major>\d+)(\.(?P<minor>\d+))(\.(?P<patch>\d+))((?P<release>.)(?P<build>\d+))?
diff --git a/.github/pycafe-create-status.py b/.github/pycafe-create-status.py
index 45d44dbc1..e82190bdf 100644
--- a/.github/pycafe-create-status.py
+++ b/.github/pycafe-create-status.py
@@ -50,10 +50,10 @@ def increment():
 
 artifact_name = "solara-builds"  # name given in the GitHub Actions workflow file for the artifact
 
-# your default requirements, the wheel version number (2.0.0a0) is bumped up for each new release using bump2version
+# your default requirements, the wheel version number (2.0.0a1) is bumped up for each new release using bump2version
 requirements = f"""solara
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a0-py2.py3-none-any.whl
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a0-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a1-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a1-py2.py3-none-any.whl
 """
 
 # GitHub Python API
diff --git a/packages/pytest-ipywidgets/pyproject.toml b/packages/pytest-ipywidgets/pyproject.toml
index 5eec00ab6..13386a3e4 100644
--- a/packages/pytest-ipywidgets/pyproject.toml
+++ b/packages/pytest-ipywidgets/pyproject.toml
@@ -11,10 +11,10 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "2.0.0a0"
+version = "2.0.0a1"
 dependencies = [
-    "solara-ui==2.0.0a0",
-    "solara-server[starlette]==2.0.0a0",
+    "solara-ui==2.0.0a1",
+    "solara-server[starlette]==2.0.0a1",
     "pytest",
     "playwright",
     "pytest-playwright",
diff --git a/packages/solara-assets/solara_assets/__init__.py b/packages/solara-assets/solara_assets/__init__.py
index daca2d523..29f4253fe 100644
--- a/packages/solara-assets/solara_assets/__init__.py
+++ b/packages/solara-assets/solara_assets/__init__.py
@@ -1,3 +1,3 @@
 "CDN assets for Solara"
 
-__version__ = "2.0.0a0"
+__version__ = "2.0.0a1"
diff --git a/packages/solara-enterprise/pyproject.toml b/packages/solara-enterprise/pyproject.toml
index 125562ad0..abda2def5 100644
--- a/packages/solara-enterprise/pyproject.toml
+++ b/packages/solara-enterprise/pyproject.toml
@@ -12,8 +12,8 @@ requires-python = ">=3.8"
 classifiers = ["License :: Free for non-commercial use"]
 dynamic = ["version", "description"]
 dependencies = [
-    "solara-ui==2.0.0a0",
-    "solara-server==2.0.0a0",
+    "solara-ui==2.0.0a1",
+    "solara-server==2.0.0a1",
 ]
 
 [project.optional-dependencies]
diff --git a/packages/solara-enterprise/solara_enterprise/__init__.py b/packages/solara-enterprise/solara_enterprise/__init__.py
index 02c060697..4565f5c96 100644
--- a/packages/solara-enterprise/solara_enterprise/__init__.py
+++ b/packages/solara-enterprise/solara_enterprise/__init__.py
@@ -1,3 +1,3 @@
 "Enterprise features for Solara"
 
-__version__ = "2.0.0a0"
+__version__ = "2.0.0a1"
diff --git a/packages/solara-meta/pyproject.toml b/packages/solara-meta/pyproject.toml
index 7b0c07c71..4deb1223e 100644
--- a/packages/solara-meta/pyproject.toml
+++ b/packages/solara-meta/pyproject.toml
@@ -11,13 +11,13 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "2.0.0a0"
+version = "2.0.0a1"
 packages = [
     { include = "solara" }
 ]
 dependencies = [
-    "solara-ui[all]==2.0.0a0",
-    "solara-server[starlette,dev]==2.0.0a0"
+    "solara-ui[all]==2.0.0a1",
+    "solara-server[starlette,dev]==2.0.0a1"
 ]
 
 [project.urls]
@@ -33,7 +33,7 @@ all = [
 ]
 
 assets = [
-    "solara-assets==2.0.0a0"
+    "solara-assets==2.0.0a1"
 ]
 
 documentation = [
@@ -55,7 +55,7 @@ documentation = [
 
 # for backwards compatibility to support solara[pytest]
 pytest = [
-    "pytest-ipywidgets[all]==2.0.0a0"
+    "pytest-ipywidgets[all]==2.0.0a1"
 ]
 
 # for backwards compatibility to support solara[dev]
diff --git a/packages/solara-server/pyproject.toml b/packages/solara-server/pyproject.toml
index 7b674c861..9e9351acb 100644
--- a/packages/solara-server/pyproject.toml
+++ b/packages/solara-server/pyproject.toml
@@ -10,7 +10,7 @@ authors = [{name = "Maarten A. Breddels", email = "maartenbreddels@gmail.com"}]
 license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
-version = "2.0.0a0"
+version = "2.0.0a1"
 dynamic = ["description"]
 dependencies = [
     "solara-ui",
diff --git a/release.md b/release.md
index bf31cbb8b..1a9209de5 100644
--- a/release.md
+++ b/release.md
@@ -55,8 +55,8 @@ Wait for the CI to publish packages to PyPI. The PyPI publish is part of the "Te
 gh run list --limit=5
 
 # Example output:
-# queued  Bump version: 1.57.0 → 2.0.0a0  Test  v2.0.0a0  push  21209892447  ...
-# queued  Bump version: 1.57.0 → 2.0.0a0  Test  master   push  21209892400  ...
+# queued  Bump version: 1.57.0 → 2.0.0a1  Test  v2.0.0a1  push  21209892447  ...
+# queued  Bump version: 1.57.0 → 2.0.0a1  Test  master   push  21209892400  ...
 
 # Watch the tag workflow (use the run ID from the v1.x.x row)
 gh run watch 21209892447 --exit-status
diff --git a/solara/__init__.py b/solara/__init__.py
index bba39413f..1bac11bd6 100644
--- a/solara/__init__.py
+++ b/solara/__init__.py
@@ -1,6 +1,6 @@
 """Build webapps using IPywidgets"""
 
-__version__ = "2.0.0a0"
+__version__ = "2.0.0a1"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 
diff --git a/solara/server/static/solara_bootstrap.py b/solara/server/static/solara_bootstrap.py
index b88738826..201a1d031 100644
--- a/solara/server/static/solara_bootstrap.py
+++ b/solara/server/static/solara_bootstrap.py
@@ -119,7 +119,7 @@ async def main():
     ]
     for dep in requirements:
         await micropip.install(dep, keep_going=True)
-    await micropip.install("/wheels/solara-2.0.0a0-py2.py3-none-any.whl", keep_going=True)
+    await micropip.install("/wheels/solara-2.0.0a1-py2.py3-none-any.whl", keep_going=True)
     import solara
 
     el = solara.Warning("lala")

From 40830462127f879cbfea0a0e2dca64afac5fcb5b Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 16 Jul 2026 17:28:52 +0200
Subject: [PATCH 24/27] fix: preserve configured colors in per-kernel themes

---
 solara/lab/components/theming.py | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/solara/lab/components/theming.py b/solara/lab/components/theming.py
index d5560e394..739e6fd16 100644
--- a/solara/lab/components/theming.py
+++ b/solara/lab/components/theming.py
@@ -1,3 +1,4 @@
+from copy import deepcopy
 from typing import Any, Callable, Dict, Union, cast
 
 import ipyvuetify.Themes
@@ -7,7 +8,24 @@
 from solara.components.component_vue import component_vue
 from solara.tasks import Proxy
 
-theme = Proxy(Theme)
+
+_original_theme = ipyvuetify.Themes.theme
+
+
+def _create_theme() -> Theme:
+    """Create a per-kernel theme using ipyvuetify's current colors as defaults."""
+    new_theme = Theme()
+
+    for theme_type, source_colors in _original_theme.themes.__dict__.items():
+        target_colors = getattr(new_theme.themes, theme_type)
+        for name in source_colors.traits(sync=True):
+            if not name.startswith("_"):
+                setattr(target_colors, name, deepcopy(getattr(source_colors, name)))
+
+    return new_theme
+
+
+theme = Proxy(_create_theme)
 ipyvuetify.Themes.theme = cast(ipyvuetify.Themes.Theme, theme)
 
 

From 63f613095e933138d15b9e021bc2783a12c0d404 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Thu, 16 Jul 2026 17:41:33 +0200
Subject: [PATCH 25/27] =?UTF-8?q?chore:=20Bump=20version:=202.0.0a1=20?=
 =?UTF-8?q?=E2=86=92=202.0.0a2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpversion.cfg                                       |  2 +-
 .github/pycafe-create-status.py                        |  6 +++---
 packages/pytest-ipywidgets/pyproject.toml              |  6 +++---
 packages/solara-assets/solara_assets/__init__.py       |  2 +-
 packages/solara-enterprise/pyproject.toml              |  4 ++--
 .../solara-enterprise/solara_enterprise/__init__.py    |  2 +-
 packages/solara-meta/pyproject.toml                    | 10 +++++-----
 packages/solara-server/pyproject.toml                  |  2 +-
 release.md                                             |  4 ++--
 solara/__init__.py                                     |  2 +-
 solara/server/static/solara_bootstrap.py               |  2 +-
 11 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index f3069580f..25a4ec95a 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 2.0.0a1
+current_version = 2.0.0a2
 commit = True
 tag = True
 parse = (?P<major>\d+)(\.(?P<minor>\d+))(\.(?P<patch>\d+))((?P<release>.)(?P<build>\d+))?
diff --git a/.github/pycafe-create-status.py b/.github/pycafe-create-status.py
index e82190bdf..f4dbea123 100644
--- a/.github/pycafe-create-status.py
+++ b/.github/pycafe-create-status.py
@@ -50,10 +50,10 @@ def increment():
 
 artifact_name = "solara-builds"  # name given in the GitHub Actions workflow file for the artifact
 
-# your default requirements, the wheel version number (2.0.0a1) is bumped up for each new release using bump2version
+# your default requirements, the wheel version number (2.0.0a2) is bumped up for each new release using bump2version
 requirements = f"""solara
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a1-py2.py3-none-any.whl
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a1-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a2-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a2-py2.py3-none-any.whl
 """
 
 # GitHub Python API
diff --git a/packages/pytest-ipywidgets/pyproject.toml b/packages/pytest-ipywidgets/pyproject.toml
index 13386a3e4..9a98f6b97 100644
--- a/packages/pytest-ipywidgets/pyproject.toml
+++ b/packages/pytest-ipywidgets/pyproject.toml
@@ -11,10 +11,10 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "2.0.0a1"
+version = "2.0.0a2"
 dependencies = [
-    "solara-ui==2.0.0a1",
-    "solara-server[starlette]==2.0.0a1",
+    "solara-ui==2.0.0a2",
+    "solara-server[starlette]==2.0.0a2",
     "pytest",
     "playwright",
     "pytest-playwright",
diff --git a/packages/solara-assets/solara_assets/__init__.py b/packages/solara-assets/solara_assets/__init__.py
index 29f4253fe..d41363955 100644
--- a/packages/solara-assets/solara_assets/__init__.py
+++ b/packages/solara-assets/solara_assets/__init__.py
@@ -1,3 +1,3 @@
 "CDN assets for Solara"
 
-__version__ = "2.0.0a1"
+__version__ = "2.0.0a2"
diff --git a/packages/solara-enterprise/pyproject.toml b/packages/solara-enterprise/pyproject.toml
index abda2def5..64a020fed 100644
--- a/packages/solara-enterprise/pyproject.toml
+++ b/packages/solara-enterprise/pyproject.toml
@@ -12,8 +12,8 @@ requires-python = ">=3.8"
 classifiers = ["License :: Free for non-commercial use"]
 dynamic = ["version", "description"]
 dependencies = [
-    "solara-ui==2.0.0a1",
-    "solara-server==2.0.0a1",
+    "solara-ui==2.0.0a2",
+    "solara-server==2.0.0a2",
 ]
 
 [project.optional-dependencies]
diff --git a/packages/solara-enterprise/solara_enterprise/__init__.py b/packages/solara-enterprise/solara_enterprise/__init__.py
index 4565f5c96..5fcba1403 100644
--- a/packages/solara-enterprise/solara_enterprise/__init__.py
+++ b/packages/solara-enterprise/solara_enterprise/__init__.py
@@ -1,3 +1,3 @@
 "Enterprise features for Solara"
 
-__version__ = "2.0.0a1"
+__version__ = "2.0.0a2"
diff --git a/packages/solara-meta/pyproject.toml b/packages/solara-meta/pyproject.toml
index 4deb1223e..ed2f2c2fc 100644
--- a/packages/solara-meta/pyproject.toml
+++ b/packages/solara-meta/pyproject.toml
@@ -11,13 +11,13 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "2.0.0a1"
+version = "2.0.0a2"
 packages = [
     { include = "solara" }
 ]
 dependencies = [
-    "solara-ui[all]==2.0.0a1",
-    "solara-server[starlette,dev]==2.0.0a1"
+    "solara-ui[all]==2.0.0a2",
+    "solara-server[starlette,dev]==2.0.0a2"
 ]
 
 [project.urls]
@@ -33,7 +33,7 @@ all = [
 ]
 
 assets = [
-    "solara-assets==2.0.0a1"
+    "solara-assets==2.0.0a2"
 ]
 
 documentation = [
@@ -55,7 +55,7 @@ documentation = [
 
 # for backwards compatibility to support solara[pytest]
 pytest = [
-    "pytest-ipywidgets[all]==2.0.0a1"
+    "pytest-ipywidgets[all]==2.0.0a2"
 ]
 
 # for backwards compatibility to support solara[dev]
diff --git a/packages/solara-server/pyproject.toml b/packages/solara-server/pyproject.toml
index 9e9351acb..d40d28c1b 100644
--- a/packages/solara-server/pyproject.toml
+++ b/packages/solara-server/pyproject.toml
@@ -10,7 +10,7 @@ authors = [{name = "Maarten A. Breddels", email = "maartenbreddels@gmail.com"}]
 license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
-version = "2.0.0a1"
+version = "2.0.0a2"
 dynamic = ["description"]
 dependencies = [
     "solara-ui",
diff --git a/release.md b/release.md
index 1a9209de5..b6ea07470 100644
--- a/release.md
+++ b/release.md
@@ -55,8 +55,8 @@ Wait for the CI to publish packages to PyPI. The PyPI publish is part of the "Te
 gh run list --limit=5
 
 # Example output:
-# queued  Bump version: 1.57.0 → 2.0.0a1  Test  v2.0.0a1  push  21209892447  ...
-# queued  Bump version: 1.57.0 → 2.0.0a1  Test  master   push  21209892400  ...
+# queued  Bump version: 1.57.0 → 2.0.0a2  Test  v2.0.0a2  push  21209892447  ...
+# queued  Bump version: 1.57.0 → 2.0.0a2  Test  master   push  21209892400  ...
 
 # Watch the tag workflow (use the run ID from the v1.x.x row)
 gh run watch 21209892447 --exit-status
diff --git a/solara/__init__.py b/solara/__init__.py
index 1bac11bd6..629cd72ca 100644
--- a/solara/__init__.py
+++ b/solara/__init__.py
@@ -1,6 +1,6 @@
 """Build webapps using IPywidgets"""
 
-__version__ = "2.0.0a1"
+__version__ = "2.0.0a2"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 
diff --git a/solara/server/static/solara_bootstrap.py b/solara/server/static/solara_bootstrap.py
index 201a1d031..37562db3d 100644
--- a/solara/server/static/solara_bootstrap.py
+++ b/solara/server/static/solara_bootstrap.py
@@ -119,7 +119,7 @@ async def main():
     ]
     for dep in requirements:
         await micropip.install(dep, keep_going=True)
-    await micropip.install("/wheels/solara-2.0.0a1-py2.py3-none-any.whl", keep_going=True)
+    await micropip.install("/wheels/solara-2.0.0a2-py2.py3-none-any.whl", keep_going=True)
     import solara
 
     el = solara.Warning("lala")

From dbceb2de2a98ccefa45d4890585c4b0c1280cbf2 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 21 Jul 2026 13:17:14 +0200
Subject: [PATCH 26/27] ci: release vuetify3-app asset as wheel

---
 .bumpversion.cfg                              |  2 ++
 .github/workflows/test.yaml                   | 11 ++++++++
 .../solara-vuetify3-app-assets/.gitignore     |  4 +++
 packages/solara-vuetify3-app-assets/README.md | 18 +++++++++++++
 .../solara-vuetify3-app-assets/pyproject.toml | 27 +++++++++++++++++++
 packages/solara-vuetify3-app/.bumpversion.cfg |  2 ++
 6 files changed, 64 insertions(+)
 create mode 100644 packages/solara-vuetify3-app-assets/.gitignore
 create mode 100644 packages/solara-vuetify3-app-assets/README.md
 create mode 100644 packages/solara-vuetify3-app-assets/pyproject.toml

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index 25a4ec95a..33a8b2ae8 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -21,6 +21,8 @@ values =
 
 [bumpversion:file:packages/solara-assets/solara_assets/__init__.py]
 
+[bumpversion:file:packages/solara-vuetify3-app-assets/pyproject.toml]
+
 [bumpversion:file:packages/solara-enterprise/solara_enterprise/__init__.py]
 
 [bumpversion:file:packages/solara-enterprise/pyproject.toml]
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index fec6332d2..200a6e67b 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -80,6 +80,9 @@ jobs:
       - name: Build solara-assets
         run: (cd packages/solara-assets; hatch build)
 
+      - name: Build solara-vuetify3-app-assets
+        run: (cd packages/solara-vuetify3-app-assets; hatch build -t wheel)
+
       - name: Build solara-server
         run: (cd packages/solara-server; hatch build)
 
@@ -100,6 +103,7 @@ jobs:
           path: |
             dist
             packages/solara-assets/dist
+            packages/solara-vuetify3-app-assets/dist
             packages/solara-server/dist
             packages/solara-meta/dist
             packages/pytest-ipywidgets/dist
@@ -139,6 +143,13 @@ jobs:
             --endpoint-url "$AWS_ENDPOINT_URL_S3" \
             --region "$AWS_REGION"
 
+          aws s3 cp packages/solara-vuetify3-app-assets/dist/ "s3://${S3_BUCKET}/packages/solara-vuetify3-app-assets/" \
+            --recursive \
+            --exclude "*" \
+            --include "*.whl" \
+            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+            --region "$AWS_REGION"
+
           aws s3 cp packages/pytest-ipywidgets/dist/ "s3://${S3_BUCKET}/packages/pytest-ipywidgets/" \
             --recursive \
             --exclude "*" \
diff --git a/packages/solara-vuetify3-app-assets/.gitignore b/packages/solara-vuetify3-app-assets/.gitignore
new file mode 100644
index 000000000..77dea043b
--- /dev/null
+++ b/packages/solara-vuetify3-app-assets/.gitignore
@@ -0,0 +1,4 @@
+/cdn/
+/dist/
+__pycache__/
+*.pyc
diff --git a/packages/solara-vuetify3-app-assets/README.md b/packages/solara-vuetify3-app-assets/README.md
new file mode 100644
index 000000000..72b499996
--- /dev/null
+++ b/packages/solara-vuetify3-app-assets/README.md
@@ -0,0 +1,18 @@
+# solara-vuetify3-app-assets
+
+This data-only companion wheel contains the prebuilt
+`@widgetti/solara-vuetify3-app` frontend. It installs the bundle into
+`share/solara/cdn`, where Solara's local CDN handler can serve it without
+downloading the npm package from a public CDN.
+
+Build the frontend first, then build this package:
+
+```shell
+(cd ../solara-vuetify3-app && npm run build)
+hatch build -t wheel
+```
+
+The Python distribution version tracks the Solara release. The embedded CDN
+directory independently tracks the frontend version from
+`../solara-vuetify3-app/package.json`. This wheel is built from the Solara
+monorepo and intentionally does not publish a standalone source distribution.
diff --git a/packages/solara-vuetify3-app-assets/pyproject.toml b/packages/solara-vuetify3-app-assets/pyproject.toml
new file mode 100644
index 000000000..8292fe735
--- /dev/null
+++ b/packages/solara-vuetify3-app-assets/pyproject.toml
@@ -0,0 +1,27 @@
+[build-system]
+requires = ["hatchling==1.26.3"]
+build-backend = "hatchling.build"
+
+[project]
+name = "solara-vuetify3-app-assets"
+version = "2.0.0a2"
+description = "Prebuilt Vuetify 3 frontend assets for Solara"
+readme = "README.md"
+authors = [{name = "Maarten A. Breddels", email = "maartenbreddels@gmail.com"}]
+license = {text = "MIT"}
+requires-python = ">=3.8"
+classifiers = [
+    "License :: OSI Approved :: MIT License",
+    "Programming Language :: Python :: 3",
+]
+
+[project.urls]
+Home = "https://www.github.com/widgetti/solara"
+
+[tool.hatch.build.targets.wheel]
+bypass-selection = true
+include = ["share/solara/cdn/**"]
+
+[tool.hatch.build.targets.wheel.shared-data]
+"../solara-vuetify3-app/dist" = "share/solara/cdn/@widgetti/solara-vuetify3-app@5.0.2/dist"
+"../solara-vuetify3-app/package.json" = "share/solara/cdn/@widgetti/solara-vuetify3-app@5.0.2/package.json"
diff --git a/packages/solara-vuetify3-app/.bumpversion.cfg b/packages/solara-vuetify3-app/.bumpversion.cfg
index 7d4d64593..9b213ce58 100644
--- a/packages/solara-vuetify3-app/.bumpversion.cfg
+++ b/packages/solara-vuetify3-app/.bumpversion.cfg
@@ -13,3 +13,5 @@ message = Bump version solara-vuetify3-app: {current_version} → {new_version}
 [bumpversion:file:../../release.sh]
 
 [bumpversion:file:../solara-assets/hatch_build.py]
+
+[bumpversion:file:../solara-vuetify3-app-assets/pyproject.toml]

From 6b2a23f71ebfeac2382672bab9c6df2daefa1cd8 Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@widgetti.io>
Date: Tue, 21 Jul 2026 13:47:34 +0200
Subject: [PATCH 27/27] =?UTF-8?q?chore:=20Bump=20version:=202.0.0a2=20?=
 =?UTF-8?q?=E2=86=92=202.0.0a3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpversion.cfg                                       |  2 +-
 .github/pycafe-create-status.py                        |  6 +++---
 packages/pytest-ipywidgets/pyproject.toml              |  6 +++---
 packages/solara-assets/solara_assets/__init__.py       |  2 +-
 packages/solara-enterprise/pyproject.toml              |  4 ++--
 .../solara-enterprise/solara_enterprise/__init__.py    |  2 +-
 packages/solara-meta/pyproject.toml                    | 10 +++++-----
 packages/solara-server/pyproject.toml                  |  2 +-
 packages/solara-vuetify3-app-assets/pyproject.toml     |  2 +-
 release.md                                             |  4 ++--
 solara/__init__.py                                     |  2 +-
 solara/server/static/solara_bootstrap.py               |  2 +-
 12 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index 33a8b2ae8..312373edd 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 2.0.0a2
+current_version = 2.0.0a3
 commit = True
 tag = True
 parse = (?P<major>\d+)(\.(?P<minor>\d+))(\.(?P<patch>\d+))((?P<release>.)(?P<build>\d+))?
diff --git a/.github/pycafe-create-status.py b/.github/pycafe-create-status.py
index f4dbea123..4301748e1 100644
--- a/.github/pycafe-create-status.py
+++ b/.github/pycafe-create-status.py
@@ -50,10 +50,10 @@ def increment():
 
 artifact_name = "solara-builds"  # name given in the GitHub Actions workflow file for the artifact
 
-# your default requirements, the wheel version number (2.0.0a2) is bumped up for each new release using bump2version
+# your default requirements, the wheel version number (2.0.0a3) is bumped up for each new release using bump2version
 requirements = f"""solara
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a2-py2.py3-none-any.whl
-https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a2-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara-2.0.0a3-py2.py3-none-any.whl
+https://py.cafe/gh/artifact/{repo_name}/actions/runs/{run_id}/{artifact_name}/solara_ui-2.0.0a3-py2.py3-none-any.whl
 """
 
 # GitHub Python API
diff --git a/packages/pytest-ipywidgets/pyproject.toml b/packages/pytest-ipywidgets/pyproject.toml
index 9a98f6b97..416ecda36 100644
--- a/packages/pytest-ipywidgets/pyproject.toml
+++ b/packages/pytest-ipywidgets/pyproject.toml
@@ -11,10 +11,10 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "2.0.0a2"
+version = "2.0.0a3"
 dependencies = [
-    "solara-ui==2.0.0a2",
-    "solara-server[starlette]==2.0.0a2",
+    "solara-ui==2.0.0a3",
+    "solara-server[starlette]==2.0.0a3",
     "pytest",
     "playwright",
     "pytest-playwright",
diff --git a/packages/solara-assets/solara_assets/__init__.py b/packages/solara-assets/solara_assets/__init__.py
index d41363955..95ce14461 100644
--- a/packages/solara-assets/solara_assets/__init__.py
+++ b/packages/solara-assets/solara_assets/__init__.py
@@ -1,3 +1,3 @@
 "CDN assets for Solara"
 
-__version__ = "2.0.0a2"
+__version__ = "2.0.0a3"
diff --git a/packages/solara-enterprise/pyproject.toml b/packages/solara-enterprise/pyproject.toml
index 64a020fed..e39d2fc05 100644
--- a/packages/solara-enterprise/pyproject.toml
+++ b/packages/solara-enterprise/pyproject.toml
@@ -12,8 +12,8 @@ requires-python = ">=3.8"
 classifiers = ["License :: Free for non-commercial use"]
 dynamic = ["version", "description"]
 dependencies = [
-    "solara-ui==2.0.0a2",
-    "solara-server==2.0.0a2",
+    "solara-ui==2.0.0a3",
+    "solara-server==2.0.0a3",
 ]
 
 [project.optional-dependencies]
diff --git a/packages/solara-enterprise/solara_enterprise/__init__.py b/packages/solara-enterprise/solara_enterprise/__init__.py
index 5fcba1403..0c199f5a5 100644
--- a/packages/solara-enterprise/solara_enterprise/__init__.py
+++ b/packages/solara-enterprise/solara_enterprise/__init__.py
@@ -1,3 +1,3 @@
 "Enterprise features for Solara"
 
-__version__ = "2.0.0a2"
+__version__ = "2.0.0a3"
diff --git a/packages/solara-meta/pyproject.toml b/packages/solara-meta/pyproject.toml
index ed2f2c2fc..db296a30b 100644
--- a/packages/solara-meta/pyproject.toml
+++ b/packages/solara-meta/pyproject.toml
@@ -11,13 +11,13 @@ license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
 dynamic = ["description"]
-version = "2.0.0a2"
+version = "2.0.0a3"
 packages = [
     { include = "solara" }
 ]
 dependencies = [
-    "solara-ui[all]==2.0.0a2",
-    "solara-server[starlette,dev]==2.0.0a2"
+    "solara-ui[all]==2.0.0a3",
+    "solara-server[starlette,dev]==2.0.0a3"
 ]
 
 [project.urls]
@@ -33,7 +33,7 @@ all = [
 ]
 
 assets = [
-    "solara-assets==2.0.0a2"
+    "solara-assets==2.0.0a3"
 ]
 
 documentation = [
@@ -55,7 +55,7 @@ documentation = [
 
 # for backwards compatibility to support solara[pytest]
 pytest = [
-    "pytest-ipywidgets[all]==2.0.0a2"
+    "pytest-ipywidgets[all]==2.0.0a3"
 ]
 
 # for backwards compatibility to support solara[dev]
diff --git a/packages/solara-server/pyproject.toml b/packages/solara-server/pyproject.toml
index d40d28c1b..1008f9d65 100644
--- a/packages/solara-server/pyproject.toml
+++ b/packages/solara-server/pyproject.toml
@@ -10,7 +10,7 @@ authors = [{name = "Maarten A. Breddels", email = "maartenbreddels@gmail.com"}]
 license = {file = "LICENSE"}
 requires-python = ">=3.8"
 classifiers = ["License :: OSI Approved :: MIT License"]
-version = "2.0.0a2"
+version = "2.0.0a3"
 dynamic = ["description"]
 dependencies = [
     "solara-ui",
diff --git a/packages/solara-vuetify3-app-assets/pyproject.toml b/packages/solara-vuetify3-app-assets/pyproject.toml
index 8292fe735..53f40abc7 100644
--- a/packages/solara-vuetify3-app-assets/pyproject.toml
+++ b/packages/solara-vuetify3-app-assets/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "solara-vuetify3-app-assets"
-version = "2.0.0a2"
+version = "2.0.0a3"
 description = "Prebuilt Vuetify 3 frontend assets for Solara"
 readme = "README.md"
 authors = [{name = "Maarten A. Breddels", email = "maartenbreddels@gmail.com"}]
diff --git a/release.md b/release.md
index b6ea07470..2e4e6de56 100644
--- a/release.md
+++ b/release.md
@@ -55,8 +55,8 @@ Wait for the CI to publish packages to PyPI. The PyPI publish is part of the "Te
 gh run list --limit=5
 
 # Example output:
-# queued  Bump version: 1.57.0 → 2.0.0a2  Test  v2.0.0a2  push  21209892447  ...
-# queued  Bump version: 1.57.0 → 2.0.0a2  Test  master   push  21209892400  ...
+# queued  Bump version: 1.57.0 → 2.0.0a3  Test  v2.0.0a3  push  21209892447  ...
+# queued  Bump version: 1.57.0 → 2.0.0a3  Test  master   push  21209892400  ...
 
 # Watch the tag workflow (use the run ID from the v1.x.x row)
 gh run watch 21209892447 --exit-status
diff --git a/solara/__init__.py b/solara/__init__.py
index 629cd72ca..46c1d3590 100644
--- a/solara/__init__.py
+++ b/solara/__init__.py
@@ -1,6 +1,6 @@
 """Build webapps using IPywidgets"""
 
-__version__ = "2.0.0a2"
+__version__ = "2.0.0a3"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 
diff --git a/solara/server/static/solara_bootstrap.py b/solara/server/static/solara_bootstrap.py
index 37562db3d..4198242e4 100644
--- a/solara/server/static/solara_bootstrap.py
+++ b/solara/server/static/solara_bootstrap.py
@@ -119,7 +119,7 @@ async def main():
     ]
     for dep in requirements:
         await micropip.install(dep, keep_going=True)
-    await micropip.install("/wheels/solara-2.0.0a2-py2.py3-none-any.whl", keep_going=True)
+    await micropip.install("/wheels/solara-2.0.0a3-py2.py3-none-any.whl", keep_going=True)
     import solara
 
     el = solara.Warning("lala")