@sovereignfs/ui 0.54.0 → 0.83.1

package/src/components/MobileAppsDrawer/MobileAppsDrawer.module.css

@@ -8,15 +8,16 @@
 .grid {
   list-style: none;
   margin: 0;
-  /* Drawer's own grab handle already reserves a 44px touch target above this
-     — no extra top padding needed beyond a touch of breathing room. Bottom
-     gets noticeably more: with no header row to separate the grid from the
-     handle, a tight top/bottom balance read as top-heavy (grid crowding the
-     handle isn't the issue; the *last* row crowding the panel's bottom
-     edge/safe-area is). Drawer's own panel already adds
-     env(safe-area-inset-bottom) below everything, so this is on top of that,
-     not instead of it. */
-  padding: var(--sv-space-1) var(--sv-space-4) var(--sv-space-10);
+  /* Matches the reference `.drawerGrid`'s own padding exactly — its
+     surrounding `Drawer` also has no header row (no `title` passed either),
+     so "no header row" can't actually explain padding this component used
+     to carry well past the reference's own (`--sv-space-1`/`--sv-space-10`
+     vs the reference's `--sv-space-2`/`--sv-space-6`) — found live, this
+     component's grid visibly read as more tightly hugging the handle and
+     noticeably more padded at the bottom than the reference's side by side.
+     Drawer's own panel already adds env(safe-area-inset-bottom) below
+     everything, so this is on top of that, not instead of it. */
+  padding: var(--sv-space-2) var(--sv-space-4) var(--sv-space-6);
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   row-gap: var(--sv-space-5);

package/src/components/MobileFooter/MobileFooter.module.css

@@ -12,7 +12,7 @@
   padding: 0 var(--sv-space-4);
   padding-bottom: max(var(--sv-space-2), env(safe-area-inset-bottom));
   background-color: var(--sv-color-surface);
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
   position: relative;
   z-index: 101;
 }

package/src/components/MobileFooter/MobileFooter.tsx

@@ -1,5 +1,8 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+'use client';
+
+import { useRef, type HTMLAttributes, type ReactNode } from 'react';
 import { Icon } from '../Icon/Icon';
+import { usePublishShellChromeHeight } from '../../hooks/usePublishShellChromeHeight';
 import styles from './MobileFooter.module.css';
 
 export interface FooterIcon {
@@ -60,6 +63,13 @@ function FooterNavItem({ icon, label, href, onClick, active }: FooterIcon) {
  * Presentational only — no data fetching; the consumer owns the
  * drawer/overlay `onOpenApps` opens. See RFC 0088 for the
  * immutable/overridable boundary this enforces.
+ *
+ * Self-measures its own rendered height and publishes it as
+ * `--sv-shell-footer-height` on the shell root — see
+ * `usePublishShellChromeHeight`'s own doc comment for why this exists (it's
+ * what makes a self-rendered footer, the `shellConfig.mobileFooter: false`
+ * pattern, correctly clear `Sheet`/`Drawer`/`Dialog` instead of being
+ * overlapped by them).
  */
 export function MobileFooter({
   onOpenApps,
@@ -77,6 +87,9 @@ export function MobileFooter({
     );
   }
 
+  const navRef = useRef<HTMLElement>(null);
+  usePublishShellChromeHeight(navRef, '--sv-shell-footer-height');
+
   const cls = [styles.footer, className].filter(Boolean).join(' ');
   const launcherClassName = [
     styles.navItem,
@@ -87,7 +100,7 @@ export function MobileFooter({
     .join(' ');
 
   return (
-    <nav {...rest} className={cls} aria-label="App navigation">
+    <nav {...rest} ref={navRef} className={cls} aria-label="App navigation">
       {leftIcons.map((item) => (
         <FooterNavItem key={item.label} {...item} />
       ))}

package/src/components/MobileFooter/__tests__/MobileFooter.test.tsx

@@ -23,6 +23,64 @@ const rightTwo = [
   { icon: <span>icon</span>, label: 'Activity' },
 ];
 
+describe('MobileFooter self-measured height', () => {
+  afterEach(() => {
+    document.getElementById('sv-app-shell')?.remove();
+  });
+
+  it('publishes its rendered height as --sv-shell-footer-height on #sv-app-shell', () => {
+    const shell = document.createElement('div');
+    shell.id = 'sv-app-shell';
+    document.body.appendChild(shell);
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      height: 64,
+      width: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON() {},
+    } as DOMRect);
+
+    render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />);
+
+    expect(shell.style.getPropertyValue('--sv-shell-footer-height')).toBe('64px');
+  });
+
+  it('removes the override on unmount', () => {
+    const shell = document.createElement('div');
+    shell.id = 'sv-app-shell';
+    document.body.appendChild(shell);
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      height: 64,
+      width: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON() {},
+    } as DOMRect);
+
+    const { unmount } = render(
+      <MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />,
+    );
+    expect(shell.style.getPropertyValue('--sv-shell-footer-height')).toBe('64px');
+
+    unmount();
+    expect(shell.style.getPropertyValue('--sv-shell-footer-height')).toBe('');
+  });
+
+  it('never throws when #sv-app-shell is absent (Storybook, unit tests, other hosts)', () => {
+    expect(() =>
+      render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />),
+    ).not.toThrow();
+  });
+});
+
 describe('MobileFooter', () => {
   it('always renders the centered launcher button', () => {
     render(<MobileFooter onOpenApps={() => {}} leftIcons={oneIcon} rightIcons={oneIcon} />);

package/src/components/MobileHeader/MobileHeader.module.css

@@ -16,10 +16,23 @@
   padding-right: max(var(--sv-space-4), env(safe-area-inset-right));
   padding-left: max(var(--sv-space-4), env(safe-area-inset-left));
   background-color: var(--sv-color-surface);
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   position: sticky;
   top: 0;
   z-index: 101;
+  /* WebKit momentum-scroll re-tiling quirk: a position: sticky element with
+     no compositing layer of its own can go stale/blank for a stretch of
+     frames during a fast scroll on iOS Safari instead of repainting at its
+     stuck position — only reachable when a consumer mounts this component
+     inside its own scrolling container (the platform shell's own mobile
+     header sits in a separate, non-scrolling grid row, so this is a no-op
+     there; a plugin self-rendering this via shellConfig.mobileHeader: false
+     inside a scrollable page is exactly the case this protects). Found and
+     fixed across three sticky elements in sovereign-tasks before being
+     applied here proactively — see docs/architecture-rules.md.
+     translateZ(0) promotes it to its own layer, rasterized independently of
+     the scroller's tile grid. */
+  transform: translateZ(0);
 }
 
 .brandGroup {

package/src/components/MobileHeader/MobileHeader.tsx

@@ -1,4 +1,7 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+'use client';
+
+import { useRef, type HTMLAttributes, type ReactNode } from 'react';
+import { usePublishShellChromeHeight } from '../../hooks/usePublishShellChromeHeight';
 import styles from './MobileHeader.module.css';
 
 export interface MobileHeaderProps extends HTMLAttributes<HTMLDivElement> {
@@ -51,6 +54,13 @@ function DefaultLogo() {
  * consumer's responsibility, matching the reference implementation in the
  * runtime shell). See RFC 0088 for the immutable/overridable boundary this
  * enforces.
+ *
+ * Self-measures its own rendered height and publishes it as
+ * `--sv-shell-header-height` on the shell root — see
+ * `usePublishShellChromeHeight`'s own doc comment for why this exists (it's
+ * what makes a self-rendered header, the `shellConfig.mobileHeader: false`
+ * pattern, correctly position `Dialog`'s inset and any other consumer of
+ * that variable instead of being overlapped by it).
  */
 export function MobileHeader({
   logo,
@@ -60,10 +70,13 @@ export function MobileHeader({
   className,
   ...rest
 }: MobileHeaderProps) {
+  const headerRef = useRef<HTMLDivElement>(null);
+  usePublishShellChromeHeight(headerRef, '--sv-shell-header-height');
+
   const cls = [styles.header, className].filter(Boolean).join(' ');
 
   return (
-    <div className={cls} {...rest}>
+    <div className={cls} {...rest} ref={headerRef}>
       <div className={styles.brandGroup}>
         {logo ?? <DefaultLogo />}
         {title && <span className={styles.title}>{title}</span>}

package/src/components/MobileHeader/__tests__/MobileHeader.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render, screen } from '@testing-library/react';
 import { MobileHeader } from '../MobileHeader';
 
@@ -7,6 +7,61 @@ afterEach(() => {
   cleanup();
 });
 
+describe('MobileHeader self-measured height', () => {
+  afterEach(() => {
+    document.getElementById('sv-app-shell')?.remove();
+    vi.restoreAllMocks();
+  });
+
+  it('publishes its rendered height as --sv-shell-header-height on #sv-app-shell', () => {
+    const shell = document.createElement('div');
+    shell.id = 'sv-app-shell';
+    document.body.appendChild(shell);
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      height: 60,
+      width: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON() {},
+    } as DOMRect);
+
+    render(<MobileHeader bell={<span />} avatarMenu={<span />} />);
+
+    expect(shell.style.getPropertyValue('--sv-shell-header-height')).toBe('60px');
+  });
+
+  it('removes the override on unmount', () => {
+    const shell = document.createElement('div');
+    shell.id = 'sv-app-shell';
+    document.body.appendChild(shell);
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      height: 60,
+      width: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON() {},
+    } as DOMRect);
+
+    const { unmount } = render(<MobileHeader bell={<span />} avatarMenu={<span />} />);
+    expect(shell.style.getPropertyValue('--sv-shell-header-height')).toBe('60px');
+
+    unmount();
+    expect(shell.style.getPropertyValue('--sv-shell-header-height')).toBe('');
+  });
+
+  it('never throws when #sv-app-shell is absent (Storybook, unit tests, other hosts)', () => {
+    expect(() => render(<MobileHeader bell={<span />} avatarMenu={<span />} />)).not.toThrow();
+  });
+});
+
 describe('MobileHeader', () => {
   it('always renders the logo, bell, and avatar menu slots', () => {
     render(

package/src/components/NavList/NavList.module.css

@@ -0,0 +1,130 @@
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-5);
+  width: 100%;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.groupLabel {
+  padding: 0 var(--sv-space-3);
+  margin-bottom: var(--sv-space-1);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sv-color-text-muted);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  min-height: var(--sv-touch-target-min);
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-radius: var(--sv-radius-md);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+  font-size: var(--sv-font-size-xs);
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+}
+
+/* ── static (desktop sidebar) ─────────────────────────────────────────── */
+
+.static .row {
+  transition:
+    background-color 0.1s ease,
+    color 0.1s ease;
+}
+
+@media (hover: hover) {
+  .static .row:hover {
+    background-color: var(--sv-color-surface-sunken);
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.static .row:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.static .rowActive {
+  background-color: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-primary);
+  font-weight: var(--sv-font-weight-semibold);
+}
+
+.static .rowActive .icon {
+  color: var(--sv-color-text-primary);
+}
+
+/* Only meaningful combined with .static — see NavListProps.density's own
+   doc comment for why .drilldown rows never shrink. */
+.compact.static .row {
+  min-height: 0;
+  padding: var(--sv-space-2) var(--sv-space-3);
+}
+
+/* ── drilldown (mobile index) — grouped card, native-Settings-app rows ──── */
+
+.drilldown .group {
+  gap: 0;
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  overflow: hidden;
+  background-color: var(--sv-color-surface-raised);
+}
+
+.drilldown .row {
+  border-radius: 0;
+  padding: var(--sv-space-3) var(--sv-space-4);
+  color: var(--sv-color-text-primary);
+}
+
+.drilldown .row:not(:last-child) {
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+@media (hover: hover) {
+  .drilldown .row:hover {
+    background-color: var(--sv-color-surface-sunken);
+  }
+}
+
+.drilldown .row:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.drilldown .icon {
+  color: var(--sv-color-text-muted);
+}

package/src/components/NavList/NavList.tsx

@@ -0,0 +1,136 @@
+import { Fragment, type ReactNode } from 'react';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/Icon';
+import styles from './NavList.module.css';
+
+export interface NavListItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: IconName;
+  /** Trailing content, e.g. a count — reserved for a future consumer, not used by `variant="drilldown"`'s own chevron slot. */
+  badge?: ReactNode;
+  /**
+   * Only meaningful for `variant="static"` — whether this row represents the
+   * current page. Computed by the consumer (e.g. via `usePathname()` plus a
+   * longest-prefix match against every item's `href`), since this package
+   * doesn't depend on `next/navigation` — same reasoning as `NavTabs`.
+   */
+  active?: boolean;
+}
+
+export interface NavListGroup {
+  id: string;
+  /** Omit for an ungrouped leading item/group — e.g. a pinned "Overview" row above the grouped sections. */
+  label?: string;
+  items: NavListItem[];
+}
+
+/** Props to spread onto a consumer-supplied link element — mirrors `NavTabs`' `NavTabLinkProps`. */
+export interface NavListLinkProps {
+  href: string;
+  className: string;
+  'aria-current': 'page' | undefined;
+  children: ReactNode;
+}
+
+export interface NavListProps {
+  groups: NavListGroup[];
+  /**
+   * `"static"`: active row highlighted via `item.active`, no chevron — a
+   * persistent sidebar nav. `"drilldown"`: every row gets a trailing chevron
+   * and no active-state, tapping navigates to a full-screen section — a
+   * native Settings-app style index.
+   */
+  variant: 'static' | 'drilldown';
+  /**
+   * `"default"`: each row is a full `--sv-touch-target-min` tall tap target
+   * — the right choice for `variant="drilldown"`'s mobile index, and for any
+   * `static` sidebar list long enough that scanability matters more than
+   * density. `"compact"` shrinks row height/padding for a short, always-
+   * visible `static` list (e.g. 2-4 items above a longer scrollable list of
+   * something else) where the default's touch-target height reads as
+   * needlessly spaced out. Only meaningful for `variant="static"` —
+   * `drilldown` rows stay full-height regardless, since that variant is
+   * mobile-only and touch-target size there isn't optional. Defaults to
+   * `"default"` so every existing consumer (e.g. Console's own sidebar) is
+   * visually unchanged.
+   */
+  density?: 'default' | 'compact';
+  'aria-label': string;
+  className?: string;
+  /**
+   * Render a row as something other than a plain `<a href>` — e.g. Next's
+   * `<Link>`. Receives the item plus the class name/aria attributes NavList
+   * would otherwise apply, matching `NavTabs`' `renderLink` contract.
+   */
+  renderLink?: (item: NavListItem, linkProps: NavListLinkProps) => ReactNode;
+}
+
+/**
+ * NavList — a vertical list of icon+label rows, optionally grouped under
+ * section headers. Two presentations of the same `groups` data: `static` (a
+ * persistent sidebar, active item highlighted) and `drilldown` (a
+ * native-Settings-app style index, every row navigates to a full section).
+ *
+ * Framework-agnostic like `NavTabs` — no `next/navigation`/`next/link`
+ * import, no internal pathname reading. Active state and navigation behavior
+ * are supplied by the consumer via `item.active` and `renderLink`.
+ */
+export function NavList({
+  groups,
+  variant,
+  density = 'default',
+  'aria-label': ariaLabel,
+  className,
+  renderLink,
+}: NavListProps) {
+  return (
+    <nav
+      className={[styles.nav, styles[variant], density === 'compact' && styles.compact, className]
+        .filter(Boolean)
+        .join(' ')}
+      aria-label={ariaLabel}
+    >
+      {groups.map((group) => (
+        <div key={group.id} className={styles.group}>
+          {group.label && <div className={styles.groupLabel}>{group.label}</div>}
+          {group.items.map((item) => {
+            const isActive = variant === 'static' && !!item.active;
+            const rowContent = (
+              <>
+                <Icon name={item.icon} size="sm" aria-hidden className={styles.icon} />
+                <span className={styles.label}>{item.label}</span>
+                {item.badge && <span className={styles.badge}>{item.badge}</span>}
+                {variant === 'drilldown' && (
+                  <Icon name="chevron-right" size="sm" aria-hidden className={styles.chevron} />
+                )}
+              </>
+            );
+            const linkProps: NavListLinkProps = {
+              href: item.href,
+              className: [styles.row, isActive && styles.rowActive].filter(Boolean).join(' '),
+              'aria-current': isActive ? 'page' : undefined,
+              children: rowContent,
+            };
+            return (
+              <Fragment key={item.id}>
+                {renderLink ? (
+                  renderLink(item, linkProps)
+                ) : (
+                  <a
+                    href={linkProps.href}
+                    className={linkProps.className}
+                    aria-current={linkProps['aria-current']}
+                  >
+                    {linkProps.children}
+                  </a>
+                )}
+              </Fragment>
+            );
+          })}
+        </div>
+      ))}
+    </nav>
+  );
+}

package/src/components/NavList/__tests__/NavList.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { NavList, type NavListGroup } from '../NavList';
+import styles from '../NavList.module.css';
+
+afterEach(cleanup);
+
+const groups: NavListGroup[] = [
+  {
+    id: 'overview',
+    items: [{ id: 'overview', label: 'Overview', href: '/console', icon: 'layout-dashboard' }],
+  },
+  {
+    id: 'people',
+    label: 'People',
+    items: [
+      { id: 'users', label: 'Users', href: '/console/users', icon: 'users', active: true },
+      { id: 'groups', label: 'Groups', href: '/console/groups', icon: 'layers' },
+    ],
+  },
+];
+
+describe('NavList', () => {
+  it('renders every item as a link with the correct href', () => {
+    render(<NavList groups={groups} variant="static" aria-label="Sections" />);
+    expect(screen.getByRole('link', { name: /overview/i }).getAttribute('href')).toBe('/console');
+    expect(screen.getByRole('link', { name: /users/i }).getAttribute('href')).toBe(
+      '/console/users',
+    );
+    expect(screen.getByRole('link', { name: /groups/i }).getAttribute('href')).toBe(
+      '/console/groups',
+    );
+  });
+
+  it('renders a label for a named group and no label for an ungrouped one', () => {
+    render(<NavList groups={groups} variant="static" aria-label="Sections" />);
+    // "People" is the only group.label in the fixture — it must appear exactly
+    // once. The ungrouped "overview" group renders its item with no group
+    // header text alongside it (nothing else in the fixture could produce a
+    // second match).
+    expect(screen.getAllByText('People')).toHaveLength(1);
+  });
+
+  describe('variant="static"', () => {
+    it('marks the active item with aria-current="page"', () => {
+      render(<NavList groups={groups} variant="static" aria-label="Sections" />);
+      expect(screen.getByRole('link', { name: /users/i }).getAttribute('aria-current')).toBe(
+        'page',
+      );
+      expect(screen.getByRole('link', { name: /groups/i }).getAttribute('aria-current')).toBeNull();
+    });
+
+    it('renders no chevron icons', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="static" aria-label="Sections" />,
+      );
+      expect(container.querySelectorAll('svg').length).toBe(groups.flatMap((g) => g.items).length);
+    });
+  });
+
+  describe('variant="drilldown"', () => {
+    it('never sets aria-current, even on an item marked active', () => {
+      render(<NavList groups={groups} variant="drilldown" aria-label="Sections" />);
+      expect(screen.getByRole('link', { name: /users/i }).getAttribute('aria-current')).toBeNull();
+    });
+
+    it('renders a trailing chevron for every item', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="drilldown" aria-label="Sections" />,
+      );
+      const itemCount = groups.flatMap((g) => g.items).length;
+      // One icon svg + one chevron svg per item.
+      expect(container.querySelectorAll('svg').length).toBe(itemCount * 2);
+    });
+  });
+
+  describe('density', () => {
+    it('defaults to no compact class', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="static" aria-label="Sections" />,
+      );
+      expect(container.querySelector('nav')?.className).not.toContain(styles.compact);
+    });
+
+    it('applies the compact class when density="compact"', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="static" density="compact" aria-label="Sections" />,
+      );
+      expect(container.querySelector('nav')?.className).toContain(styles.compact);
+    });
+  });
+
+  it('calls renderLink with the item and computed link props instead of rendering a plain anchor', () => {
+    const renderLink = vi.fn((_item, linkProps) => (
+      <button type="button" aria-current={linkProps['aria-current']}>
+        {linkProps.children}
+      </button>
+    ));
+    render(
+      <NavList groups={groups} variant="static" aria-label="Sections" renderLink={renderLink} />,
+    );
+    expect(renderLink).toHaveBeenCalledTimes(3);
+    expect(screen.queryAllByRole('link').length).toBe(0);
+    expect(screen.getByRole('button', { name: /users/i }).getAttribute('aria-current')).toBe(
+      'page',
+    );
+  });
+});

package/src/components/NavTabs/NavTabs.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .link {