@svadmin/ui 0.68.1 → 0.69.0

package/dist/components/ui/pagination/pagination-previous.svelte

@@ -10,13 +10,16 @@
 
 <button
   aria-label="Go to previous page"
+  data-svadmin-button
+  data-variant="ghost"
+  data-size="icon-sm"
   data-slot="pagination-previous"
-  class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), "gap-1", className)}
+  class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), "svadmin-pagination-control", className)}
   {...restProps}
 >
   {#if children}
     {@render children()}
   {:else}
-    <ChevronLeft class="size-4" />
+    <ChevronLeft class="svadmin-pagination-icon" />
   {/if}
 </button>

package/dist/components/ui/pagination/pagination.svelte

@@ -6,6 +6,6 @@
   let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> & { children?: Snippet } = $props();
 </script>
 
-<nav aria-label="pagination" data-slot="pagination" class={cn("mx-auto flex w-full justify-center", className)} {...restProps}>
+<nav aria-label="pagination" data-slot="pagination" class={cn("svadmin-pagination", className)} {...restProps}>
   {@render children?.()}
 </nav>

package/dist/components/ui/popover/popover-content.svelte

@@ -16,10 +16,7 @@
 		bind:ref
 		{align}
 		{sideOffset}
-		class={cn(
-			"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-			className,
-		)}
+		class={cn("svadmin-popover-content", className)}
 		{...restProps}
 	/>
 </PopoverPrimitive.Portal>

package/dist/components/ui/progress/progress.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div
-	class={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+	class={cn("svadmin-progress", className)}
 	role="progressbar"
 	aria-valuenow={value}
 	aria-valuemin={0}
@@ -16,7 +16,7 @@
 	{...restProps}
 >
 	<div
-		class="h-full w-full flex-1 bg-primary transition-all duration-200"
+		class="svadmin-progress-value"
 		style="transform: translateX(-{100 - percentage}%)"
 	></div>
 </div>

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -7,14 +7,13 @@
 </script>
 
 <div
-	class={cn("relative overflow-hidden", className)}
+	class={cn("svadmin-scroll-area", className)}
 	{...restProps}
 >
 	<div class={cn(
-		"h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-muted-foreground/50",
-		orientation === 'horizontal' ? 'overflow-x-auto overflow-y-hidden' : 'overflow-y-auto overflow-x-hidden'
+		"svadmin-scroll-area-viewport",
+		orientation === 'horizontal' ? 'svadmin-scroll-area-horizontal' : 'svadmin-scroll-area-vertical'
 	)}>
 		{@render children()}
 	</div>
 </div>
-

package/dist/components/ui/select/select.svelte

@@ -22,8 +22,7 @@
 	bind:this={ref}
 	data-slot="select"
 	class={cn(
-		"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 w-full appearance-none rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 bg-[length:16px] bg-[right_8px_center] bg-no-repeat",
-		"bg-[url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\")]",
+		"svadmin-select",
 		className
 	)}
 	bind:value

package/dist/components/ui/separator/separator.svelte

@@ -13,11 +13,6 @@
 <SeparatorPrimitive.Root
 	bind:ref
 	data-slot={dataSlot}
-	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
-		// this is different in shadcn/ui but self-stretch breaks things for us
-		"data-[orientation=vertical]:h-full",
-		className
-	)}
+	class={cn("svadmin-separator", className)}
 	{...restProps}
 />

package/dist/components/ui/sheet/sheet-content.svelte

@@ -15,10 +15,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-content"
-	class={cn(
-		"flex flex-col gap-4 h-full",
-		className
-	)}
+	class={cn("svadmin-sheet-content", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sheet/sheet-description.svelte

@@ -15,7 +15,7 @@
 <p
 	bind:this={ref}
 	data-slot="sheet-description"
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn("svadmin-sheet-description", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sheet/sheet-footer.svelte

@@ -15,7 +15,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-footer"
-	class={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn("svadmin-sheet-footer", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sheet/sheet-header.svelte

@@ -15,7 +15,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-header"
-	class={cn("flex flex-col gap-1.5 pb-4", className)}
+	class={cn("svadmin-sheet-header", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sheet/sheet-title.svelte

@@ -15,7 +15,7 @@
 <h3
 	bind:this={ref}
 	data-slot="sheet-title"
-	class={cn("text-lg font-semibold text-foreground", className)}
+	class={cn("svadmin-sheet-title", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sheet/sheet.svelte

@@ -157,7 +157,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
 		role="presentation"
-		class="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0"
+		class="svadmin-sheet-overlay"
 		onclick={close}
 	></div>
 
@@ -167,13 +167,8 @@
 		bind:this={ref}
 		data-slot="sheet"
 		{tabindex}
-		class={cn(
-			"fixed z-50 flex translate-x-0 flex-col gap-4 bg-background p-6 shadow-lg",
-			side === "right"
-				? "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l"
-				: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
-			className
-		)}
+		data-side={side}
+		class={cn("svadmin-sheet-panel", className)}
 		{...restProps}
 	>
 		{@render children?.()}
@@ -181,13 +176,13 @@
 		<!-- Close button -->
 		<button
 			type="button"
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+			class="svadmin-sheet-close"
 			onclick={close}
 		>
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 				<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
 			</svg>
-			<span class="sr-only">{closeLabel}</span>
+			<span class="svadmin-sr-only">{closeLabel}</span>
 		</button>
 	</div>
 {/if}

package/dist/components/ui/skeleton/skeleton.svelte

@@ -16,6 +16,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn("animate-pulse rounded-md bg-muted", className)}
+	class={cn("svadmin-skeleton", className)}
 	{...restProps}
 ></div>

package/dist/components/ui/switch/switch.svelte

@@ -32,18 +32,11 @@
 	data-state={checked ? "checked" : "unchecked"}
 	data-slot="switch"
 	{disabled}
-	class={cn(
-		"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
-		checked ? "bg-primary" : "bg-input dark:bg-input/80",
-		className
-	)}
+	class={cn("svadmin-switch", className)}
 	onclick={toggle}
 	{...restProps}
 >
 	<span
-		class={cn(
-			"pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
-			checked ? "translate-x-4" : "translate-x-0"
-		)}
+		class="svadmin-switch-thumb"
 	></span>
 </button>

package/dist/components/ui/table/table-caption.svelte

@@ -13,7 +13,7 @@
 <caption
 	bind:this={ref}
 	data-slot="table-caption"
-	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	class={cn("svadmin-table-caption", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/table/table-cell.svelte

@@ -17,18 +17,15 @@
 	}: Props = $props();
 
 	const getDensity = getContext<() => TableDensity>("svadmin-table-density");
-	const densityClass = $derived(getDensity?.() === "compact"
-		? "h-8 px-2 py-1 text-xs"
-		: "p-2");
-	const stickyClass = $derived(
-		sticky === "right" || sticky === true
-			? "sticky right-0 z-10 bg-background shadow-[-1px_0_0_var(--border)] group-hover/row:bg-muted/50 group-data-[state=selected]/row:bg-muted"
-			: sticky === "left"
-			? "sticky left-0 z-10 bg-background shadow-[1px_0_0_var(--border)] group-hover/row:bg-muted/50 group-data-[state=selected]/row:bg-muted"
-			: ""
-	);
 </script>
 
-<td bind:this={ref} data-slot="table-cell" data-sticky={sticky ? (typeof sticky === "string" ? sticky : "right") : undefined} class={cn("align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, stickyClass, className)} {...restProps}>
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	data-sticky={sticky ? (typeof sticky === "string" ? sticky : "right") : undefined}
+	data-density={getDensity?.() === "compact" ? "compact" : "default"}
+	class={cn("svadmin-table-cell", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </td>

package/dist/components/ui/table/table-footer.svelte

@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn("bg-muted/50 font-medium", className)}
+	class={cn("svadmin-table-footer", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/table/table-head.svelte

@@ -17,18 +17,8 @@
 	}: Props = $props();
 
 	const getDensity = getContext<() => TableDensity>("svadmin-table-density");
-	const densityClass = $derived(getDensity?.() === "compact"
-		? "h-8 px-2 py-1 text-xs"
-		: "h-9 px-2");
-	const stickyClass = $derived(
-		sticky === "right" || sticky === true
-			? "sticky right-0 z-20 bg-background shadow-[-1px_0_0_var(--border)]"
-			: sticky === "left"
-			? "sticky left-0 z-20 bg-background shadow-[1px_0_0_var(--border)]"
-			: ""
-	);
 </script>
 
-<th bind:this={ref} data-slot="table-head" data-sticky={sticky ? (typeof sticky === "string" ? sticky : "right") : undefined} class={cn("text-foreground text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, stickyClass, className)} {...restProps}>
+<th bind:this={ref} data-slot="table-head" data-sticky={sticky ? (typeof sticky === "string" ? sticky : "right") : undefined} data-density={getDensity?.() === "compact" ? "compact" : "default"} class={cn("svadmin-table-head", className)} {...restProps}>
 	{@render children?.()}
 </th>

package/dist/components/ui/table/table-header.svelte

@@ -13,7 +13,7 @@
 <thead
 	bind:this={ref}
 	data-slot="table-header"
-	class={cn(className)}
+	class={cn("svadmin-table-header", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/table/table-row.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr bind:this={ref} data-slot="table-row" class={cn("group/row hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors", className)} {...restProps}>
+<tr bind:this={ref} data-slot="table-row" class="svadmin-table-row {className ?? ''}" {...restProps}>
 	{@render children?.()}
 </tr>

package/dist/components/ui/table/table-row.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type WithElementRef } from "../../../utils.js";
+import type { WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const TableRow: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableRowElement>>, {}, "ref">;
 type TableRow = ReturnType<typeof TableRow>;

package/dist/components/ui/table/table.svelte

@@ -20,8 +20,8 @@
 	setContext("svadmin-table-density", () => density);
 </script>
 
-<div data-slot="table-container" data-table-density={density} class="relative w-full overflow-x-auto">
-	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+<div data-slot="table-container" data-table-density={density} class="svadmin-table-container">
+	<table bind:this={ref} data-slot="table" class={cn("svadmin-table", className)} {...restProps}>
 		{@render children?.()}
 	</table>
 </div>

package/dist/components/ui/tabs/tabs-content.svelte

@@ -26,7 +26,7 @@
 		bind:this={ref}
 		data-slot="tabs-content"
 		role="tabpanel"
-		class={cn("flex-1 outline-none", className)}
+		class={cn("svadmin-tabs-content", className)}
 		{...restProps}
 	>
 		{@render children?.()}

package/dist/components/ui/tabs/tabs-list.svelte

@@ -15,10 +15,7 @@
 <div
 	bind:this={ref}
 	data-slot="tabs-list"
-	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] gap-1",
-		className
-	)}
+	class={cn("svadmin-tabs-list", className)}
 	role="tablist"
 	{...restProps}
 >

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -67,13 +67,7 @@
 	data-state={isActive ? "active" : "inactive"}
 	aria-selected={isActive}
 	tabindex={tabindex ?? (isActive ? 0 : -1)}
-	class={cn(
-		"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
-		isActive
-			? "bg-background text-foreground shadow-sm"
-			: "text-muted-foreground hover:text-foreground",
-		className
-	)}
+	class={cn("svadmin-tabs-trigger", className)}
 	{...restProps}
 	onclick={handleClick}
 	onkeydown={handleKeydown}

package/dist/components/ui/tabs/tabs.svelte

@@ -32,7 +32,7 @@
 <div
 	bind:this={ref}
 	data-slot="tabs"
-	class={cn("flex flex-col gap-2", className)}
+	class={cn("svadmin-tabs", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/textarea/textarea.svelte

@@ -15,10 +15,7 @@
 <textarea
 	bind:this={ref}
 	data-slot="textarea"
-	class={cn(
-		"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 w-full rounded-lg border bg-transparent px-3 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground min-h-[80px] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 resize-y",
-		className
-	)}
+	class={cn("svadmin-textarea", className)}
 	bind:value
 	{...restProps}
 ></textarea>

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -317,7 +317,7 @@
 					aria-hidden="true"
 					data-side={resolvedSide}
 					style={arrowStyle}
-					class={cn("absolute size-2.5 rotate-45 rounded-[2px] bg-primary -z-10", arrowClasses)}
+					class={cn("svadmin-tooltip-arrow", arrowClasses)}
 				></div>
 			</div>
 		{/if}

package/dist/page-chrome.css

@@ -0,0 +1,228 @@
+@layer components {
+  .svadmin-page-header {
+    --svadmin-page-header-gap: 0.5rem;
+    min-width: 0;
+  }
+
+  .svadmin-page-header[data-density="compact"] {
+    --svadmin-page-header-gap: 0.375rem;
+  }
+
+  .svadmin-page-header__breadcrumbs {
+    margin-bottom: 1rem;
+  }
+
+  .svadmin-page-header[data-density="compact"] .svadmin-page-header__breadcrumbs {
+    margin-bottom: 0.375rem;
+    font-size: 0.75rem;
+  }
+
+  .svadmin-page-header__row,
+  .svadmin-filter-toolbar__row {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: 0.5rem;
+  }
+
+  .svadmin-page-header__row {
+    gap: var(--svadmin-page-header-gap);
+  }
+
+  .svadmin-page-header__heading {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 0.625rem;
+  }
+
+  .svadmin-page-header__text {
+    min-width: 0;
+  }
+
+  .svadmin-page-header__title-row,
+  .svadmin-page-header__tags,
+  .svadmin-page-header__actions,
+  .svadmin-filter-toolbar__filters,
+  .svadmin-filter-toolbar__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    gap: 0.5rem;
+  }
+
+  .svadmin-page-header__tags,
+  .svadmin-page-header__actions {
+    max-width: 100%;
+    gap: var(--svadmin-page-header-gap);
+  }
+
+  .svadmin-page-header__title {
+    min-width: 0;
+    color: var(--foreground);
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.75rem;
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-page-header__description {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-page-header[data-density="compact"] .svadmin-page-header__title {
+    font-size: 1.125rem;
+  }
+
+  .svadmin-page-header[data-density="compact"] .svadmin-page-header__description {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .svadmin-page-header .svadmin-page-header__back {
+    flex-shrink: 0;
+    color: var(--muted-foreground);
+  }
+
+  .svadmin-page-header .svadmin-page-header__back:hover {
+    color: var(--foreground);
+  }
+
+  .svadmin-page-header .svadmin-page-header__back-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .svadmin-breadcrumbs {
+    min-width: 0;
+  }
+
+  .svadmin-breadcrumbs--spaced {
+    margin-bottom: 1rem;
+  }
+
+  .svadmin-breadcrumbs__item {
+    display: inline-flex;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-breadcrumbs__label {
+    color: var(--muted-foreground);
+  }
+
+  .svadmin-filter-toolbar {
+    --svadmin-filter-control-height: 2.25rem;
+    --svadmin-filter-control-font: 0.875rem;
+    --svadmin-filter-search-icon-size: 1rem;
+    min-width: 0;
+  }
+
+  .svadmin-filter-toolbar[data-density="compact"] {
+    --svadmin-filter-control-height: 2rem;
+    --svadmin-filter-control-font: 0.75rem;
+    --svadmin-filter-search-icon-size: 0.875rem;
+  }
+
+  .svadmin-filter-toolbar__search {
+    position: relative;
+    min-width: 0;
+  }
+
+  .svadmin-filter-toolbar__search-icon {
+    position: absolute;
+    top: 50%;
+    left: 0.75rem;
+    width: var(--svadmin-filter-search-icon-size);
+    height: var(--svadmin-filter-search-icon-size);
+    color: var(--muted-foreground);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__input {
+    height: var(--svadmin-filter-control-height);
+    padding-inline: 2.25rem;
+    font-size: var(--svadmin-filter-control-font);
+    line-height: 1rem;
+  }
+
+  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
+    position: absolute;
+    top: 50%;
+    right: 0.25rem;
+    transform: translateY(-50%);
+  }
+
+  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
+    flex-shrink: 0;
+    gap: 0.375rem;
+    height: var(--svadmin-filter-control-height);
+    font-size: var(--svadmin-filter-control-font);
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-filter-toolbar[data-density="compact"] .svadmin-filter-toolbar__toggle {
+    padding-inline: 0.625rem;
+  }
+
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__control-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-left: 0.125rem;
+    color: var(--muted-foreground);
+  }
+
+  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
+    height: 1rem;
+    min-height: 1rem;
+    min-width: 1rem;
+    margin-left: 0.125rem;
+    padding: 0 0.25rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .svadmin-filter-toolbar .svadmin-filter-toolbar-advanced {
+    margin-top: 0.5rem;
+    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
+    border-radius: var(--radius-lg);
+    background: color-mix(in oklch, var(--muted) 20%, transparent);
+    padding: 0.75rem;
+    overflow-wrap: anywhere;
+  }
+
+  @media (min-width: 640px) {
+    .svadmin-page-header__row,
+    .svadmin-filter-toolbar__row {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .svadmin-page-header__row {
+      justify-content: space-between;
+    }
+
+    .svadmin-page-header__heading {
+      flex: 1 1 16rem;
+    }
+
+    .svadmin-filter-toolbar__search {
+      flex: 1 1 14rem;
+    }
+  }
+}