@sarj/docs-ui 0.2.0 → 0.4.0

package/README.md

@@ -8,15 +8,19 @@ Shared Astro and Starlight reference UI for Sarj standards sites
 npm install --save-dev @sarj/docs-ui
 ```
 
-Import `@sarj/docs-ui/styles.css` once, then compose the typed Astro components. The live component and theme contract is published at [code-standards.sarj.ai/design-system/](https://code-standards.sarj.ai/design-system/).
+Import `@sarj/docs-ui/starlight.css` once, then compose the typed Astro components. The live component and theme contract is published at [docs-ui.sarj.ai](https://docs-ui.sarj.ai/).
 
 Public exports:
 
 - `@sarj/docs-ui/Breadcrumbs.astro`
+- `@sarj/docs-ui/CodeComparison.astro`
 - `@sarj/docs-ui/PageAnchor.astro`
 - `@sarj/docs-ui/ReferencePage.astro`
+- `@sarj/docs-ui/RulePager.astro`
 - `@sarj/docs-ui/catalog`
 - `@sarj/docs-ui/contracts`
+- `@sarj/docs-ui/line-diff`
+- `@sarj/docs-ui/starlight.css`
 - `@sarj/docs-ui/styles.css`
 
-[Documentation](https://code-standards.sarj.ai/) · [Source](https://github.com/sarj-ai/code-standards)
+[Documentation](https://docs-ui.sarj.ai/) · [Source](https://github.com/sarj-ai/code-standards)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarj/docs-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "packageManager": "npm@12.0.2",
   "description": "Shared Astro and Starlight reference UI for Sarj standards sites",
   "type": "module",
@@ -9,10 +9,14 @@
   },
   "exports": {
     "./styles.css": "./src/styles/theme.css",
+    "./starlight.css": "./src/styles/starlight.css",
     "./catalog": "./src/catalog.ts",
     "./contracts": "./src/contracts.ts",
+    "./line-diff": "./src/line-diff.ts",
+    "./CodeComparison.astro": "./src/components/CodeComparison.astro",
     "./PageAnchor.astro": "./src/components/PageAnchor.astro",
     "./ReferencePage.astro": "./src/components/ReferencePage.astro",
+    "./RulePager.astro": "./src/components/RulePager.astro",
     "./Breadcrumbs.astro": "./src/components/Breadcrumbs.astro"
   },
   "files": [
@@ -21,7 +25,8 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "./src/styles/theme.css"
+    "./src/styles/theme.css",
+    "./src/styles/starlight.css"
   ],
   "publishConfig": {
     "access": "public"
@@ -31,13 +36,14 @@
     "url": "git+https://github.com/sarj-ai/code-standards.git",
     "directory": "packages/docs-ui"
   },
-  "homepage": "https://code-standards.sarj.ai/",
+  "homepage": "https://docs-ui.sarj.ai/",
   "bugs": {
     "url": "https://github.com/sarj-ai/code-standards/issues"
   },
   "license": "MIT",
   "dependencies": {
-    "@fontsource-variable/nunito": "5.3.0"
+    "@fontsource-variable/nunito": "5.3.0",
+    "diff": "8.0.4"
   },
   "peerDependencies": {
     "@astrojs/starlight": ">=0.41.7 <0.42",

package/src/catalog.ts

@@ -1,4 +1,4 @@
-import type { BreadcrumbsProps, ReferencePageProps } from './contracts';
+import type { BreadcrumbsProps, CodeComparisonProps, ReferencePageProps, RulePagerProps } from './contracts';
 
 export interface ComponentDefinition<Props extends object = object> {
   exportPath: string;
@@ -9,6 +9,8 @@ export interface ComponentDefinition<Props extends object = object> {
 export interface ThemeTokenDefinition {
   cssName: `--sarj-${string}`;
   purpose: string;
+  light: `#${string}`;
+  dark: `#${string}`;
 }
 
 export const componentCatalog = Object.freeze({
@@ -20,6 +22,16 @@ export const componentCatalog = Object.freeze({
       current: 'Current page label, announced with aria-current="page".',
     },
   } satisfies ComponentDefinition<BreadcrumbsProps>,
+  CodeComparison: {
+    exportPath: '@sarj/docs-ui/CodeComparison.astro',
+    purpose: 'Compare independently readable before and after source with accessible change cues.',
+    properties: {
+      id: 'Stable identifier used to connect the comparison and its heading.',
+      title: 'Optional scenario heading shared by both sides.',
+      before: 'Rejected or prior source snapshot and its presentation metadata.',
+      after: 'Preferred or resulting source snapshot and its presentation metadata.',
+    },
+  } satisfies ComponentDefinition<CodeComparisonProps>,
   PageAnchor: {
     exportPath: '@sarj/docs-ui/PageAnchor.astro',
     purpose: 'Provide the focusable top anchor used by Starlight reference pages.',
@@ -27,25 +39,31 @@ export const componentCatalog = Object.freeze({
   } satisfies ComponentDefinition,
   ReferencePage: {
     exportPath: '@sarj/docs-ui/ReferencePage.astro',
-    purpose: 'Render a Starlight reference shell with explicit search and robots behavior.',
+    purpose: 'Render a Starlight reference shell with explicit robots behavior.',
     properties: {
       title: 'Document title and primary accessible page identity.',
       description: 'Concise page description used by document metadata.',
       sidebar: 'Starlight sidebar definition for this reference surface.',
-      searchable: 'Whether Pagefind indexes the page body; defaults to true.',
       indexable: 'Whether robots may index the public page; defaults to true.',
-      discovery: 'Deprecated shorthand retained for compatibility; never access control.',
       hasSidebar: 'Whether the Starlight sidebar is rendered; defaults to true.',
       template: 'Starlight document or splash template; defaults to doc.',
     },
   } satisfies ComponentDefinition<ReferencePageProps>,
+  RulePager: {
+    exportPath: '@sarj/docs-ui/RulePager.astro',
+    purpose: 'Navigate between adjacent rules with accessible links and guarded arrow-key shortcuts.',
+    properties: {
+      previous: 'Optional previous rule link and label.',
+      next: 'Optional next rule link and label.',
+    },
+  } satisfies ComponentDefinition<RulePagerProps>,
 });
 
 export const themeTokenCatalog = Object.freeze([
-  { cssName: '--sarj-color-report', purpose: 'Diagnostic and rejection emphasis.' },
-  { cssName: '--sarj-color-pass', purpose: 'Accepted example and success emphasis.' },
-  { cssName: '--sarj-color-warning', purpose: 'Warning-level diagnostic emphasis with AA text contrast.' },
-  { cssName: '--sarj-color-rule', purpose: 'Structural borders and separators.' },
-  { cssName: '--sarj-color-paper', purpose: 'Reference surface background.' },
-  { cssName: '--sarj-color-ink', purpose: 'Primary reference text.' },
+  { cssName: '--sarj-color-report', purpose: 'Diagnostic and rejection emphasis.', light: '#c34453', dark: '#ff8794' },
+  { cssName: '--sarj-color-pass', purpose: 'Accepted example and success emphasis.', light: '#16806d', dark: '#62d5bd' },
+  { cssName: '--sarj-color-warning', purpose: 'Warning-level diagnostic emphasis with AA text contrast.', light: '#986a00', dark: '#a97708' },
+  { cssName: '--sarj-color-rule', purpose: 'Structural borders and separators.', light: '#e4e6eb', dark: '#272a32' },
+  { cssName: '--sarj-color-paper', purpose: 'Reference surface background.', light: '#ffffff', dark: '#0b0c10' },
+  { cssName: '--sarj-color-ink', purpose: 'Primary reference text.', light: '#12141a', dark: '#f4f5f8' },
 ] satisfies readonly ThemeTokenDefinition[]);

package/src/components/Breadcrumbs.astro

@@ -4,7 +4,7 @@ import type { BreadcrumbsProps as Props } from '../contracts';
 const { ancestors, current } = Astro.props;
 ---
 
-<nav class="breadcrumbs" aria-label="Breadcrumb">
+<nav class="breadcrumbs sarj-breadcrumbs" aria-label="Breadcrumb">
   <ol>
     {ancestors.map((ancestor) => <li><a href={ancestor.href}>{ancestor.label}</a></li>)}
     <li><span aria-current="page">{current}</span></li>

package/src/components/CodeComparison.astro

@@ -0,0 +1,44 @@
+---
+import { Code } from '@astrojs/starlight/components';
+
+import type { CodeComparisonFile, CodeComparisonProps as Props, CodeComparisonSide } from '../contracts';
+
+const { id, title, before, after } = Astro.props;
+const headingId = `${id}-title`;
+
+function files(side: CodeComparisonSide): readonly CodeComparisonFile[] {
+  return side.files.filter((file) => file.source.trim().length > 0);
+}
+---
+
+<section
+  class="sarj-code-comparison"
+  aria-label={title === undefined ? 'Before and after code comparison' : undefined}
+  aria-labelledby={title === undefined ? undefined : headingId}
+  data-code-comparison={id}
+>
+  {title !== undefined && <h3 id={headingId} class="sarj-code-comparison__title">{title}</h3>}
+  <div class="sarj-code-comparison__grid">
+    {[{ side: before, kind: 'before' }, { side: after, kind: 'after' }].map(({ side, kind }) => (
+      <figure class:list={['sarj-code-comparison__side', `sarj-code-comparison__side--${kind}`]}>
+        <figcaption>
+          <span>{side.label}</span>
+          {side.title !== undefined && <strong>{side.title}</strong>}
+        </figcaption>
+        <div class="sarj-code-comparison__files">
+          {files(side).map((file) => (
+            <Code
+              code={file.source}
+              lang={file.language}
+              title={file.title}
+              frame={file.title === undefined ? 'none' : 'code'}
+              del={kind === 'before' ? file.marks : undefined}
+              ins={kind === 'after' ? file.marks : undefined}
+              wrap
+            />
+          ))}
+        </div>
+      </figure>
+    ))}
+  </div>
+</section>

package/src/components/ReferencePage.astro

@@ -6,14 +6,11 @@ const {
   title,
   description,
   sidebar,
-  searchable: searchableProp,
   indexable: indexableProp,
-  discovery,
   hasSidebar = true,
   template = 'doc',
 } = Astro.props;
-const searchable = searchableProp ?? (discovery === undefined || discovery === 'searchable');
-const indexable = indexableProp ?? discovery !== 'unlisted';
+const indexable = indexableProp ?? true;
 ---
 
 <StarlightPage
@@ -21,7 +18,7 @@ const indexable = indexableProp ?? discovery !== 'unlisted';
     title,
     description,
     template,
-    pagefind: searchable,
+    pagefind: false,
     prev: false,
     next: false,
     head: indexable ? [] : [{ tag: 'meta', attrs: { name: 'robots', content: 'noindex, nofollow' } }],
@@ -29,7 +26,7 @@ const indexable = indexableProp ?? discovery !== 'unlisted';
   sidebar={sidebar}
   hasSidebar={hasSidebar}
 >
-  <div data-pagefind-body={searchable ? true : undefined} data-pagefind-ignore={searchable ? undefined : true}>
+  <div>
     <slot />
   </div>
 </StarlightPage>

package/src/components/RulePager.astro

@@ -0,0 +1,32 @@
+---
+import type { RulePagerProps as Props } from '../contracts';
+
+const { previous, next } = Astro.props;
+---
+
+<nav class="sarj-rule-pager" aria-label="Rule navigation">
+  {previous && (
+    <a href={previous.href} rel="prev" data-rule-previous aria-keyshortcuts="ArrowLeft" aria-label={`Previous rule: ${previous.label}`} title={previous.label}>
+      <kbd aria-hidden="true">←</kbd><span>Previous</span>
+    </a>
+  )}
+  {next && (
+    <a href={next.href} rel="next" data-rule-next aria-keyshortcuts="ArrowRight" aria-label={`Next rule: ${next.label}`} title={next.label}>
+      <span>Next</span><kbd aria-hidden="true">→</kbd>
+    </a>
+  )}
+</nav>
+
+<script>
+  document.addEventListener('keydown', (event) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    if (event.target instanceof Element && event.target.closest('a, button, input, select, textarea, summary, [contenteditable]')) return;
+    const selector = event.key === 'ArrowLeft' ? '[data-rule-previous]' : event.key === 'ArrowRight' ? '[data-rule-next]' : null;
+    if (!selector) return;
+    const link = document.querySelector(selector);
+    if (link instanceof HTMLAnchorElement) {
+      event.preventDefault();
+      location.assign(link.href);
+    }
+  });
+</script>

package/src/contracts.ts

@@ -12,25 +12,54 @@ export interface BreadcrumbsProps {
   current: string;
 }
 
-export type ReferenceSidebar = NonNullable<StarlightUserConfig['sidebar']>;
+/** A one-based inclusive range understood by Expressive Code text markers. */
+export interface CodeLineMark {
+  range: string;
+}
+
+/** One source file rendered inside a comparison side. */
+export interface CodeComparisonFile {
+  source: string;
+  language: string;
+  title?: string;
+  marks?: CodeLineMark;
+}
+
+/** One independently readable state in a code comparison. */
+export interface CodeComparisonSide {
+  label: string;
+  title?: string;
+  files: readonly CodeComparisonFile[];
+}
+
+/** Public properties accepted by {@link CodeComparison}. */
+export interface CodeComparisonProps {
+  id: string;
+  title?: string;
+  before: CodeComparisonSide;
+  after: CodeComparisonSide;
+}
+
+export interface RulePagerLink {
+  href: string;
+  label: string;
+}
+
+/** Public properties accepted by {@link RulePager}. */
+export interface RulePagerProps {
+  previous?: RulePagerLink | null;
+  next?: RulePagerLink | null;
+}
 
-/**
- * Legacy discovery shorthand. `unlisted` affects search and robots metadata;
- * it is not access control and the rendered page remains public.
- */
-export type ReferenceDiscovery = 'searchable' | 'navigation-only' | 'unlisted';
+export type ReferenceSidebar = NonNullable<StarlightUserConfig['sidebar']>;
 
 /** Public properties accepted by {@link ReferencePage}. */
 export interface ReferencePageProps {
   title: string;
   description: string;
   sidebar: ReferenceSidebar;
-  /** Include the page body in Pagefind. Defaults to true. */
-  searchable?: boolean;
   /** Allow search engines to index the page. Defaults to true. */
   indexable?: boolean;
-  /** @deprecated Prefer the explicit `searchable` and `indexable` properties. */
-  discovery?: ReferenceDiscovery;
   hasSidebar?: boolean;
   template?: 'doc' | 'splash';
 }

package/src/line-diff.ts

@@ -0,0 +1,55 @@
+import { diffLines } from 'diff';
+
+import type { CodeLineMark } from './contracts';
+
+export interface ChangedLineMarks {
+  before: CodeLineMark | undefined;
+  after: CodeLineMark | undefined;
+}
+
+/** Return presentation-only line markers for two explicitly related sources. */
+export function changedLineMarks(before: string, after: string): ChangedLineMarks {
+  const beforeLines: number[] = [];
+  const afterLines: number[] = [];
+  let beforeLine = 1;
+  let afterLine = 1;
+
+  for (const change of diffLines(before, after)) {
+    const count = change.count;
+    if (change.removed) {
+      addLines(beforeLines, beforeLine, count);
+      beforeLine += count;
+    } else if (change.added) {
+      addLines(afterLines, afterLine, count);
+      afterLine += count;
+    } else {
+      beforeLine += count;
+      afterLine += count;
+    }
+  }
+
+  return { before: lineMark(beforeLines), after: lineMark(afterLines) };
+}
+
+function addLines(output: number[], first: number, count: number): void {
+  for (let offset = 0; offset < count; offset += 1) output.push(first + offset);
+}
+
+function lineMark(lines: readonly number[]): CodeLineMark | undefined {
+  if (lines.length === 0) return undefined;
+  const ranges: string[] = [];
+  let first = lines[0] ?? 1;
+  let last = first;
+
+  for (const line of lines.slice(1)) {
+    if (line === last + 1) {
+      last = line;
+      continue;
+    }
+    ranges.push(first === last ? String(first) : `${String(first)}-${String(last)}`);
+    first = line;
+    last = line;
+  }
+  ranges.push(first === last ? String(first) : `${String(first)}-${String(last)}`);
+  return { range: ranges.join(',') };
+}

package/src/styles/starlight.css

@@ -0,0 +1,286 @@
+@import './theme.css';
+
+html {
+  scroll-behavior: smooth;
+}
+
+body,
+.content-panel,
+.main-pane,
+.right-sidebar-panel,
+.sidebar-pane {
+  background-color: var(--sl-color-black);
+}
+
+body {
+  font-weight: 450;
+}
+
+.main-pane,
+.main-frame,
+.sl-container {
+  min-width: 0;
+}
+
+.main-pane {
+  --sl-content-width: 100%;
+  width: 100%;
+}
+
+.content-panel:has(> .reference-page-anchor:only-child) {
+  display: none;
+}
+
+.page > header.header {
+  border-bottom: 1px solid var(--sarj-color-rule);
+  box-shadow: none;
+}
+
+.page > header.header > .header {
+  border-bottom: 0;
+}
+
+.sidebar-content a,
+.sidebar-content summary,
+.social-icons a,
+.header button,
+starlight-menu-button button {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.sidebar-content a,
+.sidebar-content summary {
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-content a[aria-current='page'],
+.sidebar-content a[aria-current='page']:hover,
+.sidebar-content a[aria-current='page']:focus {
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-accent-high);
+}
+
+:where(.sl-markdown-content, main) :is(h1, h2, h3) {
+  color: var(--sl-color-white);
+  font-weight: 700;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+
+:where(.sl-markdown-content, main) h1 {
+  font-size: clamp(1.8rem, 3.5vw, 2.35rem);
+  line-height: 1.08;
+}
+
+.sarj-about-page {
+  width: min(100%, 48rem);
+  padding-block: 1.25rem 3rem;
+}
+
+.sarj-about-page > h1 {
+  margin-block: 0 0.75rem;
+}
+
+.sarj-about-page > p {
+  max-width: 42rem;
+  color: var(--sl-color-gray-2);
+  font-size: 1.05rem;
+  line-height: 1.65;
+}
+
+.sarj-related-standards {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--sarj-color-rule);
+}
+
+.sarj-related-standards h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+}
+
+.sarj-breadcrumbs {
+  margin-block: 0 1.25rem;
+}
+
+.sarj-breadcrumbs ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0;
+  color: var(--sl-color-gray-2);
+  font-size: 0.85rem;
+  list-style: none;
+}
+
+.sarj-breadcrumbs li + li::before {
+  margin-inline-end: 0.45rem;
+  color: var(--sl-color-gray-4);
+  content: '/';
+}
+
+.sarj-breadcrumbs a {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.sarj-breadcrumbs [aria-current='page'] {
+  color: var(--sl-color-white);
+  font-weight: 650;
+}
+
+.sarj-code-comparison {
+  min-width: 0;
+  max-width: 100%;
+  container-type: inline-size;
+}
+
+.sarj-code-comparison__title {
+  margin: 0 0 0.5rem;
+  font-size: 0.95rem;
+  line-height: 1.35;
+}
+
+.sarj-code-comparison__grid {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.sarj-code-comparison__side {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  flex-direction: column;
+  border: 1px solid var(--sarj-color-rule);
+  border-radius: 0.55rem;
+  background: var(--sl-color-black);
+}
+
+.sarj-code-comparison__side--before {
+  border-top-color: var(--sarj-color-report);
+}
+
+.sarj-code-comparison__side--after {
+  border-top-color: var(--sarj-color-pass);
+}
+
+.sarj-code-comparison__side figcaption {
+  display: grid;
+  gap: 0.15rem;
+  padding: 0.75rem 0.9rem;
+  border-bottom: 1px solid var(--sarj-color-rule);
+}
+
+.sarj-code-comparison__side figcaption span {
+  color: var(--sl-color-gray-2);
+  font: 700 0.68rem/1.4 var(--sl-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.sarj-code-comparison__side figcaption strong {
+  font-size: 1rem;
+  line-height: 1.35;
+}
+
+.sarj-code-comparison__files,
+.sarj-code-comparison__files > .expressive-code {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.sarj-code-comparison__files {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.sarj-code-comparison__files > .expressive-code {
+  margin: 0;
+}
+
+.sarj-code-comparison__files .expressive-code figure {
+  border: 0;
+  border-top: 1px solid var(--sarj-color-rule);
+  border-radius: 0;
+}
+
+.sarj-code-comparison__files .expressive-code figcaption.header:empty {
+  display: none;
+}
+
+.sarj-code-comparison__files pre {
+  max-width: 100%;
+  overflow: auto;
+}
+
+*:focus-visible {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 3px;
+}
+
+@container (min-width: 52rem) {
+  .sarj-code-comparison__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: stretch;
+  }
+}
+
+.sarj-rule-pager {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0.35rem;
+  margin: 0;
+}
+
+.sarj-rule-pager a {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid var(--sarj-color-rule);
+  border-radius: 0.4rem;
+  color: var(--sl-color-white);
+  font-size: 0.75rem;
+  text-decoration: none;
+}
+
+.sarj-rule-pager a:hover,
+.sarj-rule-pager a:focus-visible {
+  border-color: var(--sl-color-accent);
+}
+
+.sarj-rule-pager kbd {
+  padding: 0.05rem 0.28rem;
+  border: 1px solid var(--sarj-color-rule);
+  border-radius: 0.2rem;
+  background: var(--sl-color-gray-6);
+  font-family: var(--sl-font-mono);
+}
+
+@media (max-width: 22rem) {
+  .sarj-rule-pager a { width: 44px; justify-content: center; padding-inline: 0; }
+  .sarj-rule-pager a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { scroll-behavior: auto; }
+}
+
+@media (forced-colors: active) {
+  .sarj-code-comparison__side--before,
+  .sarj-code-comparison__side--after {
+    border-top-width: 3px;
+  }
+}

package/src/styles/theme.css

@@ -48,3 +48,39 @@
   --sarj-color-paper: #0b0c10;
   --sarj-color-ink: #f4f5f8;
 }
+
+.breadcrumbs ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.breadcrumbs li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.breadcrumbs li + li::before {
+  color: var(--sl-color-gray-3);
+  content: '/';
+}
+
+.breadcrumbs a,
+.breadcrumbs [aria-current='page'] {
+  overflow-wrap: anywhere;
+}
+
+.breadcrumbs a {
+  border-radius: 0.2rem;
+  color: var(--sl-color-accent-high);
+}
+
+.breadcrumbs a:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 3px;
+}