@gradio/dataframe 0.16.5 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @gradio/dataframe
 
+## 0.17.1
+
+### Fixes
+
+- [#10819](https://github.com/gradio-app/gradio/pull/10819) [`ac075ad`](https://github.com/gradio-app/gradio/commit/ac075ad6aaea855bfd4839cef7140719a584498e) - Fix cell menu not showing in non-editable dataframes.  Thanks @hannahblair!
+
+## 0.17.0
+
+### Features
+
+- [#10784](https://github.com/gradio-app/gradio/pull/10784) [`6812544`](https://github.com/gradio-app/gradio/commit/681254453a15dadde068feaec176bb984710292b) - On Windows OS, hide `gr.Dataframe` scrollbars while keeping scrolling functionality.  Thanks @abidlabs!
+- [#10802](https://github.com/gradio-app/gradio/pull/10802) [`9ec8898`](https://github.com/gradio-app/gradio/commit/9ec8898c0f5753fb548a89f9804b71b69797d00c) - Fix excess scroll bug in dataframe.  Thanks @hannahblair!
+- [#10805](https://github.com/gradio-app/gradio/pull/10805) [`8d03368`](https://github.com/gradio-app/gradio/commit/8d03368243b6365d279563cf38a18b67a0efaf69) - Fix max characters in non-editable dataframes.  Thanks @hannahblair!
+- [#10787](https://github.com/gradio-app/gradio/pull/10787) [`b3e8c26`](https://github.com/gradio-app/gradio/commit/b3e8c263be51f9553e9f19939be0f880092b44c9) - Implement cell selection via drag in dataframe.  Thanks @hannahblair!
+- [#10734](https://github.com/gradio-app/gradio/pull/10734) [`c44b8f4`](https://github.com/gradio-app/gradio/commit/c44b8f47b927258552af61c3af06f2e30449f571) - Add `static_columns` param for interactive dataframes.  Thanks @hannahblair!
+- [#10778](https://github.com/gradio-app/gradio/pull/10778) [`373007b`](https://github.com/gradio-app/gradio/commit/373007b3e9d019ee41589d1dbb09a7511a024a51) - Allow sorting by multiple columns in dataframe.  Thanks @hannahblair!
+- [#10804](https://github.com/gradio-app/gradio/pull/10804) [`39c30be`](https://github.com/gradio-app/gradio/commit/39c30be1628028a86400c1e4b993db51e91b2580) - Add parent focus for drag selection.  Thanks @hannahblair!
+- [#10777](https://github.com/gradio-app/gradio/pull/10777) [`3b48367`](https://github.com/gradio-app/gradio/commit/3b483672f4778f5b19d2f529328c1f71b3742f45) - Allow navigating down from header cells, as well as support cmd/ctrl + arrow keys.  Thanks @abidlabs!
+- [#10776](https://github.com/gradio-app/gradio/pull/10776) [`85f6132`](https://github.com/gradio-app/gradio/commit/85f6132f1f9f653329edfa22f627e342e8b42731) - Fix cell selection when using shift + arrow keys.  Thanks @abidlabs!
+
+### Fixes
+
+- [#10757](https://github.com/gradio-app/gradio/pull/10757) [`b4342d2`](https://github.com/gradio-app/gradio/commit/b4342d24a88acaa4ed4028c8fdd44eea0d1b8b57) - Fix dataframe search and filter functionality.  Thanks @hannahblair!
+- [#10786](https://github.com/gradio-app/gradio/pull/10786) [`88941b6`](https://github.com/gradio-app/gradio/commit/88941b655e708ab14611341ed3fe57452fbbfc58) - Remove fixed layouts from dataframe.  Thanks @hannahblair!
+- [#10631](https://github.com/gradio-app/gradio/pull/10631) [`b5ca1dc`](https://github.com/gradio-app/gradio/commit/b5ca1dcfdf496292eade31347ae1974d3a0976c4) - Refactor `gr.Dataframe`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.15.5
+- @gradio/statustracker@0.10.5
+- @gradio/button@0.4.10
+- @gradio/atoms@0.14.0
+- @gradio/markdown-code@0.4.1
+
 ## 0.16.5
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -6,6 +6,7 @@
 	import { userEvent } from "@storybook/test";
 	import { get } from "svelte/store";
 	import { format } from "svelte-i18n";
+	import Image from "@gradio/image";
 </script>
 
 <Meta
@@ -219,6 +220,18 @@
 	}}
 />
 
+<Story
+	name="Interactive dataframe with zero row count"
+	args={{
+		values: [],
+		headers: ["Narrow", "Wide", "Half"],
+		label: "Test scores",
+		col_count: [0, "dynamic"],
+		row_count: [0, "dynamic"],
+		editable: true
+	}}
+/>
+
 <Story
 	name="Dataframe with link"
 	args={{
@@ -249,9 +262,8 @@
 		const cell_400 = canvas.getAllByRole("cell")[5];
 		await userEvent.click(cell_400);
 
-		const open_dialog_btn = await within(cell_400).findByRole("button", {
-			name: "⋮"
-		});
+		const open_dialog_btn =
+			await within(cell_400).findByLabelText("Open cell menu");
 		await userEvent.click(open_dialog_btn);
 
 		const add_row_btn = canvas.getByText("Add row above");
@@ -417,6 +429,31 @@
 	}}
 />
 
+<Story
+	name="Dataframe with custom components"
+	args={{
+		values: [
+			[
+				"Absol G",
+				70,
+				"https://images.pokemontcg.io/pl3/1_hires.png",
+				"pl3-1",
+				"Supreme Victors"
+			]
+		],
+		datatype: ["str", "number", "image", "str", "str"],
+		headers: ["Pokemon", "HP", "Image", "ID", "Set"],
+		label: "Pokemon Cards",
+		col_count: [5, "fixed"],
+		row_count: [1, "dynamic"],
+		interactive: true,
+		editable: true,
+		components: {
+			image: Image
+		}
+	}}
+/>
+
 <Story
 	name="Dataframe with row and column selection"
 	args={{
@@ -441,16 +478,16 @@
 		const cells = canvas.getAllByRole("cell");
 		await user.click(cells[5]); // Click cell with value 6
 
-		const row_button = await canvas.findByRole("button", {
+		const row_button = await canvas.findAllByRole("button", {
 			name: "Select row"
-		});
+		})[0];
 		await user.click(row_button);
 
 		await user.click(cells[6]);
 
-		const col_button = await canvas.findByRole("button", {
+		const col_button = await canvas.findAllByRole("button", {
 			name: "Select column"
-		});
+		})[0];
 		await user.click(col_button);
 
 		await user.keyboard("{Delete}");
@@ -513,7 +550,7 @@
 		const canvas = within(canvasElement);
 		const user = userEvent.setup();
 
-		const search_input = canvas.getByPlaceholderText("Search...");
+		const search_input = canvas.getByPlaceholderText("Filter...");
 		await user.type(search_input, "Pet");
 
 		await new Promise((resolve) => setTimeout(resolve, 100));
@@ -528,7 +565,7 @@
 />
 
 <Story
-	name="Dataframe with frozen columns"
+	name="Dataframe with pinned columns"
 	args={{
 		values: [
 			["ID", "Name", "Age", "City", "Country", "Score"],
@@ -547,3 +584,159 @@
 		editable: false
 	}}
 />
+
+<Story
+	name="Dataframe with pixel and percentage column widths set"
+	args={{
+		values: [
+			[1, 2, 3, 4, 5],
+			[6, 7, 8, 9, 10]
+		],
+		headers: ["10%", "50%", "40%", "100px", "100px"],
+		col_count: [5, "dynamic"],
+		row_count: [2, "dynamic"],
+		column_widths: ["10%", "50%", "40%", "100px", "100px"]
+	}}
+/>
+
+<Story
+	name="Dataframe with drag selection"
+	args={{
+		values: [
+			[1, 2, 3, 4, 5],
+			[6, 7, 8, 9, 10],
+			[11, 12, 13, 14, 15],
+			[16, 17, 18, 19, 20],
+			[21, 22, 23, 24, 25]
+		],
+		headers: ["A", "B", "C", "D", "E"],
+		label: "Drag Selection Demo",
+		col_count: [5, "dynamic"],
+		row_count: [5, "dynamic"],
+		editable: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await new Promise((resolve) => setTimeout(resolve, 300));
+
+		const table = canvas.getByRole("grid");
+		const cells = canvas.getAllByRole("cell");
+		const startCell = cells[6];
+		const startRect = startCell.getBoundingClientRect();
+		const startX = startRect.left + startRect.width / 2;
+		const startY = startRect.top + startRect.height / 2;
+
+		const endCell = cells[18];
+		const endRect = endCell.getBoundingClientRect();
+		const endX = endRect.left + endRect.width / 2;
+		const endY = endRect.top + endRect.height / 2;
+
+		await user.pointer({
+			keys: "[MouseLeft>]",
+			target: startCell,
+			coords: { clientX: startX, clientY: startY }
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		const midX1 = startX + (endX - startX) / 3;
+		const midY1 = startY + (endY - startY) / 3;
+		await user.pointer({
+			target: table,
+			coords: { clientX: midX1, clientY: midY1 }
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		const midX2 = startX + ((endX - startX) * 2) / 3;
+		const midY2 = startY + ((endY - startY) * 2) / 3;
+		await user.pointer({
+			target: table,
+			coords: { clientX: midX2, clientY: midY2 }
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		await user.pointer({
+			target: endCell,
+			coords: { clientX: endX, clientY: endY }
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		await user.pointer({
+			keys: "[/MouseLeft]"
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+	}}
+/>
+
+<Story
+	name="Non-interactive dataframe with sorting by multiple columns"
+	args={{
+		values: [
+			[1, 2, 3],
+			[4, 5, 6],
+			[7, 8, 9]
+		],
+		headers: ["A", "B", "C"],
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"],
+		editable: false,
+		sort_columns: [
+			{ col: 0, direction: "asc" },
+			{ col: 1, direction: "desc" }
+		],
+		sort_state: {
+			sort_columns: [
+				{ col: 0, direction: "asc" },
+				{ col: 1, direction: "desc" }
+			],
+			row_order: [0, 1, 2]
+		}
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		const header_1 = canvas.getAllByText("A")[1];
+		await userEvent.click(header_1);
+
+		const cell_menu_button = canvas.getAllByLabelText("Open cell menu")[0];
+		await userEvent.click(cell_menu_button);
+
+		const sort_ascending_button = canvas.getByRole("menuitem", {
+			name: "Sort ascending"
+		});
+		await userEvent.click(sort_ascending_button);
+
+		const header_2 = canvas.getAllByText("B")[1];
+		await userEvent.click(header_2);
+
+		const cell_menu_button_2 = canvas.getAllByLabelText("Open cell menu")[1];
+		await userEvent.click(cell_menu_button_2);
+
+		const sort_descending_button = canvas.getByRole("menuitem", {
+			name: "Sort descending"
+		});
+		await userEvent.click(sort_descending_button);
+
+		const header_3 = canvas.getAllByText("C")[1];
+		await userEvent.click(header_3);
+
+		const cell_menu_button_3 = canvas.getAllByLabelText("Open cell menu")[2];
+		await userEvent.click(cell_menu_button_3);
+
+		const sort_ascending_button_3 = canvas.getByRole("menuitem", {
+			name: "Sort ascending"
+		});
+		await userEvent.click(sort_ascending_button_3);
+
+		await userEvent.click(header_3);
+		await userEvent.click(cell_menu_button_3);
+		await userEvent.click(canvas.getByText("Clear sort"));
+	}}
+/>

package/Index.svelte

@@ -12,6 +12,8 @@
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import type { Headers, Datatype, DataframeValue } from "./shared/utils";
+	import Image from "@gradio/image";
+
 	export let headers: Headers = [];
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -39,6 +41,7 @@
 		select: SelectData;
 		input: never;
 		clear_status: LoadingStatus;
+		search: string | null;
 	}>;
 	export let latex_delimiters: {
 		left: string;
@@ -53,18 +56,8 @@
 	export let show_copy_button = false;
 	export let show_row_numbers = false;
 	export let show_search: "none" | "search" | "filter" = "none";
-
-	let search_query: string | null = null;
-	$: filtered_cell_values = search_query
-		? value.data?.filter((row) =>
-				row.some(
-					(cell) =>
-						search_query &&
-						String(cell).toLowerCase().includes(search_query.toLowerCase())
-				)
-			)
-		: null;
 	export let pinned_columns = 0;
+	export let static_columns: (string | number)[] = [];
 
 	$: _headers = [...(value.headers || headers)];
 	$: display_value = value?.metadata?.display_value
@@ -98,7 +91,7 @@
 		{show_label}
 		{row_count}
 		{col_count}
-		values={filtered_cell_values || value.data}
+		values={value.data}
 		{display_value}
 		{styling}
 		headers={_headers}
@@ -109,7 +102,6 @@
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:search={(e) => (search_query = e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
@@ -127,5 +119,7 @@
 		{show_row_numbers}
 		{show_search}
 		{pinned_columns}
+		components={{ image: Image }}
+		{static_columns}
 	/>
 </Block>

package/dist/Index.svelte

@@ -7,6 +7,7 @@ export { default as BaseExample } from "./Example.svelte";
 <script>import { Block } from "@gradio/atoms";
 import Table from "./shared/Table.svelte";
 import { StatusTracker } from "@gradio/statustracker";
+import Image from "@gradio/image";
 export let headers = [];
 export let elem_id = "";
 export let elem_classes = [];
@@ -38,14 +39,8 @@ export let max_chars = void 0;
 export let show_copy_button = false;
 export let show_row_numbers = false;
 export let show_search = "none";
-let search_query = null;
-$:
-  filtered_cell_values = search_query ? value.data?.filter(
-    (row) => row.some(
-      (cell) => search_query && String(cell).toLowerCase().includes(search_query.toLowerCase())
-    )
-  ) : null;
 export let pinned_columns = 0;
+export let static_columns = [];
 $:
   _headers = [...value.headers || headers];
 $:
@@ -76,7 +71,7 @@ $:
 		{show_label}
 		{row_count}
 		{col_count}
-		values={filtered_cell_values || value.data}
+		values={value.data}
 		{display_value}
 		{styling}
 		headers={_headers}
@@ -87,7 +82,6 @@ $:
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:search={(e) => (search_query = e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
@@ -105,5 +99,7 @@ $:
 		{show_row_numbers}
 		{show_search}
 		{pinned_columns}
+		components={{ image: Image }}
+		{static_columns}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
             select: SelectData;
             input: never;
             clear_status: LoadingStatus;
+            search: string | null;
         }>;
         latex_delimiters: {
             left: string;
@@ -43,6 +44,7 @@ declare const __propDef: {
         show_row_numbers?: boolean | undefined;
         show_search?: ("none" | "search" | "filter") | undefined;
         pinned_columns?: number | undefined;
+        static_columns?: (string | number)[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -109,6 +111,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         select: SelectData;
         input: never;
         clear_status: LoadingStatus;
+        search: string | null;
     }>;
     /**accessor*/
     set gradio(_: Gradio<{
@@ -116,6 +119,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         select: SelectData;
         input: never;
         clear_status: LoadingStatus;
+        search: string | null;
     }>);
     get latex_delimiters(): {
         left: string;
@@ -149,10 +153,13 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_row_numbers(): boolean | undefined;
     /**accessor*/
     set show_row_numbers(_: boolean | undefined);
-    get show_search(): "filter" | "none" | "search" | undefined;
+    get show_search(): "none" | "filter" | "search" | undefined;
     /**accessor*/
-    set show_search(_: "filter" | "none" | "search" | undefined);
+    set show_search(_: "none" | "filter" | "search" | undefined);
     get pinned_columns(): number | undefined;
     /**accessor*/
     set pinned_columns(_: number | undefined);
+    get static_columns(): (string | number)[] | undefined;
+    /**accessor*/
+    set static_columns(_: (string | number)[] | undefined);
 }

package/dist/shared/CellMenu.svelte

@@ -13,14 +13,21 @@ export let on_delete_row;
 export let on_delete_col;
 export let can_delete_rows;
 export let can_delete_cols;
+export let on_sort = () => {
+};
+export let on_clear_sort = () => {
+};
+export let sort_direction = null;
+export let sort_priority = null;
+export let editable = true;
 export let i18n;
 let menu_element;
 $:
   is_header = row === -1;
 $:
-  can_add_rows = row_count[1] === "dynamic";
+  can_add_rows = editable && row_count[1] === "dynamic";
 $:
-  can_add_columns = col_count[1] === "dynamic";
+  can_add_columns = editable && col_count[1] === "dynamic";
 onMount(() => {
   position_menu();
 });
@@ -43,34 +50,89 @@ function position_menu() {
 }
 </script>
 
-<div bind:this={menu_element} class="cell-menu">
+<div bind:this={menu_element} class="cell-menu" role="menu">
+	{#if is_header}
+		<button
+			role="menuitem"
+			on:click={() => on_sort("asc")}
+			class:active={sort_direction === "asc"}
+		>
+			<CellMenuIcons icon="sort-asc" />
+			{i18n("dataframe.sort_ascending")}
+			{#if sort_direction === "asc" && sort_priority !== null}
+				<span class="priority">{sort_priority}</span>
+			{/if}
+		</button>
+		<button
+			role="menuitem"
+			on:click={() => on_sort("desc")}
+			class:active={sort_direction === "desc"}
+		>
+			<CellMenuIcons icon="sort-desc" />
+			{i18n("dataframe.sort_descending")}
+			{#if sort_direction === "desc" && sort_priority !== null}
+				<span class="priority">{sort_priority}</span>
+			{/if}
+		</button>
+		<button role="menuitem" on:click={on_clear_sort}>
+			<CellMenuIcons icon="clear-sort" />
+			{i18n("dataframe.clear_sort")}
+		</button>
+	{/if}
+
 	{#if !is_header && can_add_rows}
-		<button on:click={() => on_add_row_above()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_row_above()}
+			aria-label="Add row above"
+		>
 			<CellMenuIcons icon="add-row-above" />
 			{i18n("dataframe.add_row_above")}
 		</button>
-		<button on:click={() => on_add_row_below()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_row_below()}
+			aria-label="Add row below"
+		>
 			<CellMenuIcons icon="add-row-below" />
 			{i18n("dataframe.add_row_below")}
 		</button>
 		{#if can_delete_rows}
-			<button on:click={on_delete_row} class="delete">
+			<button
+				role="menuitem"
+				on:click={on_delete_row}
+				class="delete"
+				aria-label="Delete row"
+			>
 				<CellMenuIcons icon="delete-row" />
 				{i18n("dataframe.delete_row")}
 			</button>
 		{/if}
 	{/if}
 	{#if can_add_columns}
-		<button on:click={() => on_add_column_left()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_column_left()}
+			aria-label="Add column to the left"
+		>
 			<CellMenuIcons icon="add-column-left" />
 			{i18n("dataframe.add_column_left")}
 		</button>
-		<button on:click={() => on_add_column_right()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_column_right()}
+			aria-label="Add column to the right"
+		>
 			<CellMenuIcons icon="add-column-right" />
 			{i18n("dataframe.add_column_right")}
 		</button>
 		{#if can_delete_cols}
-			<button on:click={on_delete_col} class="delete">
+			<button
+				role="menuitem"
+				on:click={on_delete_col}
+				class="delete"
+				aria-label="Delete column"
+			>
 				<CellMenuIcons icon="delete-column" />
 				{i18n("dataframe.delete_column")}
 			</button>
@@ -81,7 +143,7 @@ function position_menu() {
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: var(--layer-4);
+		z-index: 9;
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);
@@ -91,6 +153,7 @@ function position_menu() {
 		gap: var(--size-1);
 		box-shadow: var(--shadow-drop-lg);
 		min-width: 150px;
+		z-index: var(--layer-1);
 	}
 
 	.cell-menu button {
@@ -108,6 +171,11 @@ function position_menu() {
 		display: flex;
 		align-items: center;
 		gap: var(--size-2);
+		position: relative;
+	}
+
+	.cell-menu button.active {
+		background-color: var(--background-fill-secondary);
 	}
 
 	.cell-menu button:hover {
@@ -118,4 +186,17 @@ function position_menu() {
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
+
+	.priority {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		font-size: var(--size-2);
+		background-color: var(--button-secondary-background-fill);
+		color: var(--body-text-color);
+		border-radius: var(--radius-sm);
+		width: var(--size-2-5);
+		height: var(--size-2-5);
+	}
 </style>

package/dist/shared/CellMenu.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/utils/src";
+import type { SortDirection } from "./context/table_context";
 declare const __propDef: {
     props: {
         x: number;
@@ -15,6 +16,11 @@ declare const __propDef: {
         on_delete_col: () => void;
         can_delete_rows: boolean;
         can_delete_cols: boolean;
+        on_sort?: ((direction: SortDirection) => void) | undefined;
+        on_clear_sort?: (() => void) | undefined;
+        sort_direction?: (SortDirection | null) | undefined;
+        sort_priority?: (number | null) | undefined;
+        editable?: boolean | undefined;
         i18n: I18nFormatter;
     };
     events: {

package/dist/shared/CellMenuButton.svelte

@@ -0,0 +1,45 @@
+<script>export let on_click;
+</script>
+
+<button
+	aria-label="Open cell menu"
+	class="cell-menu-button"
+	aria-haspopup="menu"
+	on:click={on_click}
+	on:touchstart={(event) => {
+		event.preventDefault();
+		const touch = event.touches[0];
+		const mouseEvent = new MouseEvent("click", {
+			clientX: touch.clientX,
+			clientY: touch.clientY,
+			bubbles: true,
+			cancelable: true,
+			view: window
+		});
+		on_click(mouseEvent);
+	}}
+>
+	&#8942;
+</button>
+
+<style>
+	.cell-menu-button {
+		flex-shrink: 0;
+		display: none;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--block-radius);
+		width: var(--size-5);
+		height: var(--size-5);
+		min-width: var(--size-5);
+		padding: 0;
+		margin-right: var(--spacing-sm);
+		z-index: 2;
+		position: absolute;
+		right: var(--size-1);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+</style>