@svadmin/ui 0.85.0 → 0.86.0

package/dist/components/content/StatusTabs.svelte

@@ -12,7 +12,6 @@
   interface Props {
     items: StatusTabItem[];
     value?: string;
-    density?: 'compact' | 'comfortable';
     variant?: 'pills' | 'underline' | 'segmented';
     onchange?: (key: string) => void;
     class?: string;
@@ -21,7 +20,6 @@
   let {
     items = [],
     value = $bindable(items[0]?.key ?? ''),
-    density = 'compact',
     variant = 'pills',
     onchange,
     class: className = '',
@@ -61,8 +59,6 @@
     tabs[nextIndex]?.click();
   }
 
-  const isCompact = $derived(density === 'compact');
-
   const toneClasses: Record<NonNullable<StatusTabItem['tone']>, { activeBadge: string; inactiveBadge: string }> = {
     default: {
       activeBadge: 'svadmin-u-6a1572b6bf5a svadmin-u-20aaf08a7ed1',
@@ -95,7 +91,6 @@
   role="tablist"
   aria-orientation="horizontal"
   data-svadmin-status-tabs
-  data-density={density}
   data-variant={variant}
   class={cn(
     'svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-1384f66f41d0',
@@ -118,7 +113,7 @@
       onkeydown={handleKeydown}
       class={cn(
         'svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568 svadmin-u-e82ae8be04aa svadmin-u-2689f3958069 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-df37b1fd9495 svadmin-u-793c80e97ffb svadmin-u-ddac70ae5d29 svadmin-u-49330148794a svadmin-u-b29d8adbad2e',
-        isCompact ? 'svadmin-u-359090c2d529 svadmin-u-0b91436debbd svadmin-u-660d2effb880' : 'svadmin-u-fc7473ca09eb svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b',
+        'svadmin-u-fc7473ca09eb svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b',
         variant === 'pills' && [
           'svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f',
           active
@@ -144,7 +139,7 @@
         <span
           class={cn(
             'svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-e83a7042bc91 svadmin-u-3032cae0badb svadmin-u-c2385a463da8',
-            isCompact ? 'svadmin-u-69aaf7265e58 svadmin-u-d8e0e382c67b svadmin-u-465609a240a8 svadmin-u-1dc571a3609f' : 'svadmin-u-f8516763aedd svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-359090c2d529',
+            'svadmin-u-f8516763aedd svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-359090c2d529',
             active ? badgeTone.activeBadge : badgeTone.inactiveBadge
           )}
         >

package/dist/components/content/StatusTabs.svelte.d.ts

@@ -8,7 +8,6 @@ export interface StatusTabItem {
 interface Props {
     items: StatusTabItem[];
     value?: string;
-    density?: 'compact' | 'comfortable';
     variant?: 'pills' | 'underline' | 'segmented';
     onchange?: (key: string) => void;
     class?: string;

package/dist/components/content/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as DashboardPage } from './DashboardPage.svelte';
 export { default as PageSection } from './PageSection.svelte';
+export { default as DataPanel } from './DataPanel.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';

package/dist/components/content/index.js

@@ -1,6 +1,7 @@
 export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as DashboardPage } from './DashboardPage.svelte';
 export { default as PageSection } from './PageSection.svelte';
+export { default as DataPanel } from './DataPanel.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';

package/dist/components/ui/table/index.d.ts

@@ -6,5 +6,4 @@ import Footer from "./table-footer.svelte";
 import Head from "./table-head.svelte";
 import Header from "./table-header.svelte";
 import Row from "./table-row.svelte";
-export type { TableDensity } from "./table.svelte";
 export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

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

@@ -6,6 +6,7 @@
 	export type TableDensity = "compact" | "comfortable";
 
 	type Props = WithElementRef<HTMLTableAttributes, HTMLTableElement> & {
+		/** @deprecated Retained for compatibility; comfortable is the shared default. */
 		density?: TableDensity;
 	};
 

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

@@ -2,6 +2,7 @@ import type { HTMLTableAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 export type TableDensity = "compact" | "comfortable";
 type Props = WithElementRef<HTMLTableAttributes, HTMLTableElement> & {
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: TableDensity;
 };
 declare const Table: import("svelte").Component<Props, {}, "ref">;

package/dist/components.css

@@ -889,11 +889,6 @@ main {
     vertical-align: middle;
     white-space: nowrap;
   }
-  .svadmin-table-cell[data-density="compact"] {
-    height: 2rem;
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-  }
   .svadmin-table-cell[data-sticky="right"], .svadmin-table-cell[data-sticky="left"] {
     position: sticky;
     z-index: 10;
@@ -2041,11 +2036,6 @@ main {
     font-weight: 500;
     white-space: nowrap;
   }
-  .svadmin-table-head[data-density="compact"] {
-    height: 2rem;
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-  }
   .svadmin-table-head[data-sticky="right"], .svadmin-table-head[data-sticky="left"] {
     position: sticky;
     z-index: 20;
@@ -2218,7 +2208,7 @@ details[data-svadmin-filter][open] > :not(summary),
 
 /* --- Admin UI layout preset (clean-flat) --- */
 /* Keep this public class for layoutPreset API compatibility. The preset only
- * adjusts density and composition; color, focus, and elevation stay semantic. */
+ * adjusts composition; color, focus, and elevation stay semantic. */
 .layout-clean-flat {
   --radius: 0.5rem;
   --svadmin-content-width: 74rem;

package/dist/data-panel.css

@@ -0,0 +1,88 @@
+/* Data panel: the recurring "titled surface with a body" container.
+ *
+ * Hosts previously hand-rolled this block per page, which is how a project ends
+ * up with three panel paddings and two radii. Every length here is a token. */
+@layer components {
+  .svadmin-data-panel {
+    --svadmin-panel-padding: var(--svadmin-space-5);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    min-width: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--card);
+    color: var(--card-foreground);
+    overflow: hidden;
+  }
+  .svadmin-data-panel[data-padding="compact"] {
+    --svadmin-panel-padding: var(--svadmin-space-4);
+  }
+  .svadmin-data-panel[data-padding="none"] {
+    --svadmin-panel-padding: 0;
+  }
+
+  .svadmin-data-panel__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--svadmin-space-3);
+    min-width: 0;
+    padding: var(--svadmin-panel-padding);
+    padding-block-end: 0;
+  }
+  .svadmin-data-panel[data-padding="none"] .svadmin-data-panel__header {
+    padding: var(--svadmin-space-4) var(--svadmin-space-5);
+    border-bottom: 1px solid var(--border);
+  }
+  .svadmin-data-panel__heading {
+    display: grid;
+    gap: var(--svadmin-space-1);
+    min-width: 0;
+    flex: 1 1 0;
+  }
+  .svadmin-data-panel__title {
+    margin: 0;
+    color: var(--foreground);
+    font-size: var(--svadmin-text-section);
+    font-weight: 600;
+    line-height: var(--svadmin-leading-tight);
+    overflow-wrap: anywhere;
+  }
+  .svadmin-data-panel__description {
+    max-width: var(--svadmin-measure);
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
+    overflow-wrap: anywhere;
+  }
+  .svadmin-data-panel__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--svadmin-space-2);
+    flex: 0 0 auto;
+  }
+  .svadmin-data-panel__body {
+    display: grid;
+    gap: var(--svadmin-space-4);
+    min-width: 0;
+    padding: var(--svadmin-panel-padding);
+  }
+  .svadmin-data-panel[data-padding="none"] .svadmin-data-panel__body {
+    gap: 0;
+  }
+  .svadmin-data-panel__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--svadmin-space-2);
+    padding: var(--svadmin-space-3) var(--svadmin-space-5);
+    border-top: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-caption);
+  }
+}

package/dist/design-contract.d.ts

@@ -8,6 +8,17 @@ export declare const surfaceDesignContract: {
     readonly table: {
         readonly density: readonly ["comfortable", "compact"];
     };
+    readonly pageFamilies: readonly ["list", "form", "detail", "workspace", "dashboard"];
+    readonly pageStates: readonly ["ready", "loading", "empty", "error", "forbidden"];
+    readonly composition: {
+        readonly maxPrimaryActions: 1;
+        readonly secondaryActions: "overflow";
+        readonly destructiveActions: "confirm";
+        readonly modalNesting: 0;
+    };
 };
 export type SurfaceTone = typeof surfaceDesignContract.metric.tone[number];
+/** @deprecated Kept for source compatibility; product pages use one baseline rhythm. */
 export type SurfaceDensity = typeof surfaceDesignContract.metric.density[number];
+export type AdminPageFamily = typeof surfaceDesignContract.pageFamilies[number];
+export type AdminPageState = typeof surfaceDesignContract.pageStates[number];

package/dist/design-contract.js

@@ -8,4 +8,12 @@ export const surfaceDesignContract = {
     table: {
         density: ['comfortable', 'compact'],
     },
+    pageFamilies: ['list', 'form', 'detail', 'workspace', 'dashboard'],
+    pageStates: ['ready', 'loading', 'empty', 'error', 'forbidden'],
+    composition: {
+        maxPrimaryActions: 1,
+        secondaryActions: 'overflow',
+        destructiveActions: 'confirm',
+        modalNesting: 0,
+    },
 };

package/dist/design-system.d.ts

@@ -1,11 +1,12 @@
-import type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
+import type { SurfaceDensity, SurfaceTone } from "./design-contract.js";
 export declare function metricSurfaceClasses(tone?: SurfaceTone): {
     state: string;
     description: string;
     root: string;
     card: string;
 };
-export declare function tableSurfaceClasses(density?: SurfaceDensity): {
+/** @deprecated The argument is accepted for compatibility and uses the shared baseline. */
+export declare function tableSurfaceClasses(_density?: SurfaceDensity): {
     state: string;
     content: string;
     head: string;

package/dist/design-system.js

@@ -2,6 +2,7 @@ import { surfaceMetricRecipe as surfaceMetric, surfaceTableRecipe as surfaceTabl
 export function metricSurfaceClasses(tone = "neutral") {
     return surfaceMetric({ tone });
 }
-export function tableSurfaceClasses(density = "comfortable") {
-    return surfaceTable({ density });
+/** @deprecated The argument is accepted for compatibility and uses the shared baseline. */
+export function tableSurfaceClasses(_density = "comfortable") {
+    return surfaceTable();
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { surfaceDesignContract } from "./design-contract.js";
-export type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
+export type { AdminPageFamily, AdminPageState, SurfaceDensity, SurfaceTone } from "./design-contract.js";
 export { designSystemComponents, type DesignComponentContract, type DesignComponentId, type DesignComponentState, } from "./design-system-components.js";
 export { metricSurfaceClasses, tableSurfaceClasses } from "./design-system.js";
 export { default as AdminApp } from './components/AdminApp.svelte';
@@ -38,7 +38,8 @@ export { default as MetricStrip } from './components/MetricStrip.svelte';
 export type { MetricStripItem, MetricTone } from './components/MetricStrip.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as PagePattern } from './components/PagePattern.svelte';
-export type { PagePatternKind } from './components/PagePattern.svelte';
+export type { PagePatternKind, PagePatternState } from './components/PagePattern.svelte';
+export { default as AppShellPage } from './components/AppShellPage.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
 export { default as ResourceAccessGuard } from './components/ResourceAccessGuard.svelte';
@@ -278,6 +279,7 @@ export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.sve
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
 export { default as DashboardPage } from './components/content/DashboardPage.svelte';
 export { default as PageSection } from './components/content/PageSection.svelte';
+export { default as DataPanel } from './components/content/DataPanel.svelte';
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as ConfigurationPage } from './components/ConfigurationPage.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';

package/dist/index.js

@@ -31,6 +31,7 @@ export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as MetricStrip } from './components/MetricStrip.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as PagePattern } from './components/PagePattern.svelte';
+export { default as AppShellPage } from './components/AppShellPage.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
 export { default as ResourceAccessGuard } from './components/ResourceAccessGuard.svelte';
@@ -245,6 +246,7 @@ export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.sve
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
 export { default as DashboardPage } from './components/content/DashboardPage.svelte';
 export { default as PageSection } from './components/content/PageSection.svelte';
+export { default as DataPanel } from './components/content/DataPanel.svelte';
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as ConfigurationPage } from './components/ConfigurationPage.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';

package/dist/page-chrome.css

@@ -6,7 +6,7 @@
    * the host application's utility CSS implementation.
    */
   [data-svadmin-skip-link] {
-    transform: translateY(calc(-100% - 1rem));
+    transform: translateY(calc(-100% - var(--svadmin-space-4)));
   }
   [data-svadmin-skip-link]:focus,
   [data-svadmin-skip-link]:focus-visible {
@@ -14,24 +14,17 @@
   }
 
   .svadmin-page-header {
-    --svadmin-page-header-gap: 0.5rem;
+    --svadmin-page-header-gap: var(--svadmin-space-2);
     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;
+    margin-bottom: var(--svadmin-space-4);
   }
   .svadmin-page-header__row, .svadmin-filter-toolbar__row {
     display: flex;
     flex-direction: column;
     min-width: 0;
-    gap: 0.5rem;
+    gap: var(--svadmin-space-2);
   }
   .svadmin-page-header__row {
     gap: var(--svadmin-page-header-gap);
@@ -40,7 +33,7 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    gap: 0.625rem;
+    gap: var(--svadmin-space-3);
   }
   .svadmin-page-header__text {
     min-width: 0;
@@ -50,7 +43,7 @@
     flex-wrap: wrap;
     align-items: center;
     min-width: 0;
-    gap: 0.5rem;
+    gap: var(--svadmin-space-2);
   }
   .svadmin-page-header__tags, .svadmin-page-header__actions {
     max-width: 100%;
@@ -59,24 +52,17 @@
   .svadmin-page-header__title {
     min-width: 0;
     color: var(--foreground);
-    font-size: 1.25rem;
+    font-size: var(--svadmin-text-title);
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: var(--svadmin-leading-tight);
     overflow-wrap: anywhere;
   }
   .svadmin-page-header__description {
     color: var(--muted-foreground);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
     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);
@@ -85,14 +71,14 @@
     color: var(--foreground);
   }
   .svadmin-page-header .svadmin-page-header__back-icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--svadmin-space-4);
+    height: var(--svadmin-space-4);
   }
   .svadmin-breadcrumbs {
     min-width: 0;
   }
   .svadmin-breadcrumbs--spaced {
-    margin-bottom: 1rem;
+    margin-bottom: var(--svadmin-space-4);
   }
   .svadmin-breadcrumbs__item {
     display: inline-flex;
@@ -103,16 +89,11 @@
     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;
+    --svadmin-filter-control-height: var(--svadmin-control-h);
+    --svadmin-filter-control-font: var(--svadmin-text-body);
+    --svadmin-filter-search-icon-size: var(--svadmin-space-4);
     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;
@@ -120,60 +101,57 @@
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
-    inset-inline-start: 0.75rem;
+    inset-inline-start: var(--svadmin-space-3);
     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 {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__input {
     height: var(--svadmin-filter-control-height);
-    padding-inline: 2.25rem;
+    padding-inline: calc(var(--svadmin-space-5) + var(--svadmin-space-3));
     font-size: var(--svadmin-filter-control-font);
-    line-height: 1rem;
+    line-height: var(--svadmin-leading-tight);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__clear {
     position: absolute;
     top: 50%;
-    inset-inline-end: 0.25rem;
+    inset-inline-end: var(--svadmin-space-1);
     transform: translateY(-50%);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;
-    gap: 0.375rem;
+    gap: var(--svadmin-space-2);
     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;
+    width: var(--svadmin-space-3);
+    height: var(--svadmin-space-3);
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
-    width: 0.75rem;
-    height: 0.75rem;
-    margin-inline-start: 0.125rem;
+    width: var(--svadmin-space-3);
+    height: var(--svadmin-space-3);
+    margin-inline-start: var(--svadmin-space-1);
     color: var(--muted-foreground);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
-    height: 1rem;
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-inline-start: 0.125rem;
-    padding: 0 0.25rem;
-    font-size: 0.625rem;
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__count {
+    height: var(--svadmin-space-4);
+    min-height: var(--svadmin-space-4);
+    min-width: var(--svadmin-space-4);
+    margin-inline-start: var(--svadmin-space-1);
+    padding: 0 var(--svadmin-space-1);
+    font-size: var(--svadmin-text-caption);
     font-weight: 600;
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar-advanced {
-    margin-top: 0.5rem;
+    margin-top: var(--svadmin-space-2);
     border: 1px solid var(--border);
     @supports (color: color-mix(in lab, red, red)) {
       border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
@@ -183,7 +161,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklch, var(--muted) 20%, transparent);
     }
-    padding: 0.75rem;
+    padding: var(--svadmin-space-3);
     overflow-wrap: anywhere;
   }
   @media (min-width: 640px) {
@@ -196,10 +174,10 @@
       justify-content: space-between;
     }
     .svadmin-page-header__heading {
-      flex: 1 1 16rem;
+      flex: 1 1 var(--svadmin-chrome-basis);
     }
     .svadmin-filter-toolbar__search {
-      flex: 1 1 14rem;
+      flex: 1 1 var(--svadmin-chrome-basis);
     }
   }
 }