@syncedco/flow 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.3.1 - 2026-06-13
+
+- Fix mobile app drawer scrolling by giving the drawer sidebar a viewport block size.
+- Vertically center `.sf-tab` contents.
+- Improve built-in dark theme token coverage for primary, state, soft, ring, and glow tokens.
+- Make `.sf-filter-bar` alignment token-configurable with a centered default.
+- Add a status-chip dot opt-out with `data-dot="false"` and `sf-status--label`.
+- Add reduced-motion safeguards for hover lift and marquee animation.
+- Add public `--sf-z-*` stacking tokens for header, backdrop, drawer, overlay, toast, sticky, and skip-link layers.
+- Reframe positioning copy from "AI-native" to "AI-friendly".
+- Document the global theme config scope and the project-CSS pattern for advanced theme matrices.

package/README.md

@@ -1,6 +1,6 @@
 # Synced Flow
 
-AI-native fluid CSS design system for brand-consistent websites, agency builds,
+AI-friendly fluid CSS design system for brand-consistent websites, agency builds,
 and modern frontend projects.
 
 Synced Flow gives developers and AI coding agents a shared styling contract:
@@ -58,6 +58,7 @@ documentation, and recipes.
 Useful project files:
 
 - [Contributing](CONTRIBUTING.md)
+- [Changelog](CHANGELOG.md)
 - [Security policy](SECURITY.md)
 - [Code of conduct](CODE_OF_CONDUCT.md)
 - [Support](SUPPORT.md)

package/components.css

@@ -432,6 +432,16 @@
     to { transform: translateX(-50%); }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    :where(.sf-button:hover, .sf-card--interactive:hover) {
+      transform: none;
+    }
+
+    .sf-marquee__track {
+      animation: none;
+    }
+  }
+
   .sf-command-list {
     display: grid;
     font-family: var(--sf-font-mono);
@@ -837,7 +847,7 @@
   }
 
   .sf-filter-bar {
-    align-items: end;
+    align-items: var(--sf-filter-bar-align, center);
     background: var(--sf-colour-surface);
     border: 1px solid var(--sf-colour-border);
     border-radius: var(--sf-radius-panel);
@@ -984,6 +994,10 @@
     inline-size: .42em;
   }
 
+  :where(.sf-status[data-dot="false"], .sf-status--label)::before {
+    content: none;
+  }
+
   .sf-status[data-tone="success"] {
     --sf-status-bg: var(--sf-colour-success-soft);
     --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
@@ -1418,6 +1432,7 @@
   :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer):popover-open {
     display: grid;
     gap: var(--sf-space-xs);
+    z-index: var(--sf-z-overlay);
   }
 
   .sf-popover {
@@ -1489,7 +1504,7 @@
     inset-block-start: var(--sf-space-s);
     inset-inline-end: var(--sf-space-s);
     position: fixed;
-    z-index: 50;
+    z-index: var(--sf-z-toast);
   }
 
   .sf-banner {
@@ -1604,6 +1619,7 @@
   }
 
   .sf-tab {
+    align-items: center;
     border-block-end: 0.125rem solid transparent;
     border-radius: var(--sf-radius-full);
     color: var(--sf-colour-muted);

package/docs/audit-2026-06.md

@@ -0,0 +1,113 @@
+# Synced Flow Audit — June 2026 (v0.3.0)
+
+Independent audit of `@syncedco/flow` at v0.3.0 (`a8a1f68`), run across three
+passes: product coherence (claims vs shipped), CSS quality, and tooling/release
+engineering. Findings are grounded in the source and in real consumer feedback
+from the Synced CRM (`synced-crm`, the first production app consumer).
+
+## Verdict
+
+Flow delivers its **original model (websites/agency) almost completely** and
+the **engineering discipline behind it impressively**. It falls short in three
+places: **app-tier depth**, **advanced theming scope**, and a few product
+positioning/docs gaps. It is a real, well-built system, and the positioning now
+fits better as AI-friendly / agent-ready.
+
+| Dimension | Rating | Summary |
+|---|---|---|
+| Fluid foundation (tokens, scales, layout) | ✅ Excellent | Genuine Utopia-style fluidity; modern CSS (layers, oklch, logical props, container queries); clean layer hygiene |
+| Website/agency coverage | ✅ ~90% | Everything claimed ships; agency-ready without custom CSS |
+| Tooling & release engineering | ✅ Excellent | 14 tested CLI commands, guardrails (size budgets, zero-dep, px policy), 40/40 tests, automated tag-driven publishing |
+| App/SaaS tier (0.2–0.3) | ⚠️ ~60% | Real scaffolding (proven by the CRM) but thin; consumers carry 20–40% custom CSS |
+| Dark mode | ✅ Patched after audit | `.sf-theme-dark` now overrides primary/status/soft/ring/glow tokens rather than inheriting light-tuned values |
+| Theming config | ✅ Documented boundary | Config handles global light/dark token themes; advanced per-surface/multi-variant theming belongs in project CSS token scopes |
+| AI positioning | ✅ Reframed | Positioning now uses AI-friendly / agent-ready language for the shipped CLI, skill, and agent guidance |
+| Docs | ⚠️ Improving | Website docs thorough; CHANGELOG and theming-scope docs added; app-tier docs can still mature |
+
+## Confirmed bugs (found by the CRM, verified in source)
+
+1. **Drawer can't scroll** — fixed after audit by adding `block-size: 100dvh`
+   to `.sf-app-shell[data-mobile="drawer"] .sf-app-sidebar`, giving the
+   existing `overflow: auto` a real viewport-height scroll container.
+2. **`.sf-tab` not vertically centred** — fixed after audit with
+   `align-items: center`.
+3. **`.sf-filter-bar` `align-items: end`** — fixed after audit with
+   `align-items: var(--sf-filter-bar-align, center)`, preserving a project
+   escape hatch without adding a new component variant.
+4. **`.sf-status` dot is mandatory** — fixed after audit with
+   `data-dot="false"` and `sf-status--label` opt-outs.
+
+## Higher-severity findings the CRM did NOT hit
+
+These mattered because no consumer had exercised them yet. They are now patched
+or documented, but should still be validated in the next real consumer.
+
+5. **Dark mode token coverage is critically incomplete** — fixed after audit
+   for the shipped base theme by adding dark-mode primary, state, soft, ring,
+   and glow token overrides.
+6. **Z-index scale is compressed and undocumented** — fixed after audit with
+   public `--sf-z-*` tokens wired into header, backdrop, drawer, overlay, toast,
+   sticky, and skip-link layers.
+7. **Missing `prefers-reduced-motion` guards** — fixed after audit for
+   `.sf-button:hover`, `.sf-card--interactive:hover`, and the marquee track.
+
+## Theming model limitation (real, undocumented)
+
+Config supports global light + `darkColours` + per-preset overrides. It does
+not try to express per-surface / multi-variant theming (e.g. `[data-theme]` ×
+`[data-surface]` matrices, per-tenant white-label, density-by-context). That is
+a legitimate design choice for Synced Flow's scope, and `config-reference.md`
+now documents the hand-written token-scope pattern for advanced cases.
+
+## AI-Friendly Positioning
+
+What ships is real and good: `catalog --json`, `suggest`, `pattern`, `recipe`,
+`lint`, `doctor`, a packaged skill, and `agents install` for 8 targets. The
+project now describes this as **AI-friendly** and agent-readable tooling rather
+than implying runtime AI integration.
+
+## App-tier coverage gaps (from real CRM adoption)
+
+Shipped and adopted: app-shell, data-table, empty-state, filter-bar, status
+chips, tabs, toast skin, form field shells. Still missing for production app
+work (CRM kept custom or deferred): combobox/searchable select, pagination
+depth (page size, jump-to-page), modal-with-form as a primitive (not just a
+pattern), bulk-actions toolbar, multi-step/wizard, skeleton loading compounds,
+sticky-header + horizontal-scroll tables. Kanban/timesheet/invoice-doc are
+deliberately consumer-specific and out of scope.
+
+## Strengths (keep doing)
+
+- Real fluidity; modern CSS; excellent cascade-layer hygiene.
+- Tooling/release engineering is the strongest area: guardrails enforce
+  zero-dependency, per-layer gzip size budgets, layer order, and a raw-px
+  policy; 40/40 tests pass; tag-driven OIDC publishing; complete exports map.
+- CLI catalog currently in sync with shipped CSS (verified) — though by hand.
+- AI agent guidance (skill + `agents install`) is current with 0.3.0 primitives.
+
+## Recommended roadmap
+
+**0.3.1 — bug patch (small, soon):**
+1. Drawer viewport scroll container. ✅
+2. `.sf-tab` `align-items: center`. ✅
+3. `.sf-filter-bar` tokenized alignment with centered default. ✅
+4. `.sf-status` dot opt-out. ✅
+5. `prefers-reduced-motion` guards on hover transforms + marquee. ✅
+
+**0.4.0 — structural gaps:**
+6. Continue dark-mode validation with a real consumer using Flow's built-in
+   theme selectors.
+7. Begin app-tier depth: combobox, pagination, modal-with-form, bulk-actions —
+   prioritised by what the CRM had to keep custom.
+
+**Docs / positioning / CI (cheap, high-trust):**
+8. CI: smoke-build the examples; add a test asserting the CLI catalog matches
+    the shipped CSS (in sync today only by hand); consider a CSS parse/lint and
+    a small visual-regression pass.
+
+## Meta-observation
+
+The four bugs the CRM surfaced are exactly the class only a real consumer finds
+— the proving-ground loop is working as intended. The most useful next
+validation step is getting a second consumer, or the CRM itself, onto Flow's
+built-in dark mode and app primitives before 1.0.

package/docs/config-reference.md

@@ -79,3 +79,30 @@ theme: {
   },
 }
 ```
+
+## Theme Scope
+
+The config theme model is intentionally global. Use `theme.colours` for the
+default token set and `theme.darkColours` for `.sf-theme-dark` /
+`[data-sf-theme="dark"]` overrides. This covers the common site or app case:
+one brand token set, with an optional dark-mode token set.
+
+Synced Flow does not try to encode every theme matrix in config. If a project
+needs per-tenant branding, `[data-surface]` variants, density-by-context, or
+other multi-axis theme rules, keep the reusable defaults in config and write
+the extra token scopes in project CSS:
+
+```css
+[data-tenant="acme"] {
+  --sf-colour-primary: oklch(62% 0.19 252);
+  --sf-colour-primary-hover: oklch(56% 0.19 252);
+}
+
+[data-surface="inset"] {
+  --sf-colour-surface: var(--sf-colour-surface-inset);
+  --sf-card-padding: var(--sf-space-s);
+}
+```
+
+Use this pattern for deliberate product theming. Avoid scattering one-off
+colour values through page components when a value can live in a token scope.

package/docs/system-primitives.md

@@ -17,6 +17,7 @@ Use the `--sf-*` variables as the stable CSS foundation.
 | App colour | `--sf-colour-surface-hover`, `--sf-colour-surface-raised-2`, `--sf-colour-border-subtle`, `--sf-colour-backdrop` | App surfaces, hover states, subtle dividers, and overlays. |
 | Categorical colour | `--sf-colour-categorical-1` ... `--sf-colour-categorical-6` | Charts, stages, labels, and recurring data accents. |
 | State | `--sf-colour-success`, `--sf-colour-warning`, `--sf-colour-danger`, `--sf-colour-info` | Feedback and notices. |
+| Z-index | `--sf-z-header`, `--sf-z-backdrop`, `--sf-z-drawer`, `--sf-z-overlay`, `--sf-z-toast` | Shared stacking slots for app chrome, drawers, popovers, and feedback. |
 | Motion | `--sf-duration-fast`, `--sf-duration-normal`, `--sf-ease-standard` | Consistent transitions. |
 | Component | `--sf-button-*`, `--sf-card-*`, `--sf-input-*`, `--sf-alert-*` | Reusable component defaults. |
 | Accessibility | `:focus-visible`, `:target`, `[aria-invalid]`, `[aria-current]`, `[aria-expanded]`, `[aria-selected]`, `[aria-busy]`, `[aria-disabled]` | Visible native and ARIA states. |

package/docs/tokens.md

@@ -86,6 +86,8 @@ The generated core includes enough semantic variables for common website UI:
 - structure: `--sf-colour-border-subtle`, `--sf-colour-border`,
   `--sf-colour-border-strong`, `--sf-colour-backdrop`,
   `--sf-radius-control`, `--sf-radius-panel`, `--sf-shadow-*`
+- stacking: `--sf-z-sticky`, `--sf-z-header`, `--sf-z-backdrop`,
+  `--sf-z-drawer`, `--sf-z-overlay`, `--sf-z-toast`, `--sf-z-skip-link`
 - data accents: `--sf-colour-categorical-1` through
   `--sf-colour-categorical-6`
 

package/docs/why-synced-flow.md

@@ -22,7 +22,7 @@ Synced Flow is designed to reduce the number of styling decisions made from scra
 
 Synced Flow is not trying to be a Tailwind clone, a Bootstrap replacement, or a React component library.
 
-It is an AI-native fluid CSS design system for brand-consistent websites and agency builds.
+It is an AI-friendly fluid CSS design system for brand-consistent websites and agency builds.
 
 Use it when you want:
 

package/layout.css

@@ -116,7 +116,7 @@
     justify-content: space-between;
     min-block-size: var(--sf-app-header-height);
     padding-inline: var(--sf-space-s-m);
-    z-index: 20;
+    z-index: var(--sf-z-header);
   }
 
   .sf-app-shell[data-layout~="fixed-header"] {
@@ -199,6 +199,7 @@
     }
 
     .sf-app-shell[data-mobile="drawer"] .sf-app-sidebar {
+      block-size: 100dvh;
       box-shadow: var(--sf-shadow-xl);
       inline-size: min(18rem, calc(100vw - var(--sf-space-l)));
       inset-block: 0;
@@ -207,7 +208,7 @@
       min-block-size: 100dvh;
       position: fixed;
       transform: translateX(-100%);
-      z-index: 30;
+      z-index: var(--sf-z-drawer);
     }
 
     .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-sidebar {
@@ -219,7 +220,7 @@
       display: block;
       inset: 0;
       position: fixed;
-      z-index: 25;
+      z-index: var(--sf-z-backdrop);
     }
   }
 
@@ -363,7 +364,7 @@
   .sf-sticky-top {
     position: sticky;
     inset-block-start: var(--sf-sticky-offset, 0);
-    z-index: var(--sf-sticky-z, 20);
+    z-index: var(--sf-sticky-z, var(--sf-z-sticky));
   }
 
   .sf-media-object {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@syncedco/flow",
-  "version": "0.3.0",
-  "description": "AI-native fluid CSS design system for brand-consistent websites and agency builds.",
+  "version": "0.3.1",
+  "description": "AI-friendly fluid CSS design system for brand-consistent websites and agency builds.",
   "type": "module",
   "packageManager": "pnpm@11.2.2",
   "license": "MIT",
@@ -63,6 +63,7 @@
     "examples",
     "skills",
     "src",
+    "CHANGELOG.md",
     "CODE_OF_CONDUCT.md",
     "CONTRIBUTING.md",
     "LICENSE",

package/styles.css

@@ -150,6 +150,13 @@
     --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
     --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
     --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
+    --sf-z-sticky: 20;
+    --sf-z-header: 20;
+    --sf-z-backdrop: 25;
+    --sf-z-drawer: 30;
+    --sf-z-overlay: 40;
+    --sf-z-toast: 50;
+    --sf-z-skip-link: 999;
     --sf-duration-fast: 150ms;
     --sf-duration-normal: 220ms;
     --sf-duration-slow: 360ms;
@@ -210,8 +217,27 @@
     --sf-colour-border: oklch(100% 0 0 / 0.14);
     --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
     --sf-colour-backdrop: oklch(0% 0 0 / 0.64);
+    --sf-colour-primary: var(--sf-colour-orange-500);
+    --sf-colour-primary-hover: oklch(80% 0.14 50);
+    --sf-colour-primary-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-primary-soft: oklch(74% 0.17 48 / 0.18);
+    --sf-colour-primary-soft-border: oklch(74% 0.17 48 / 0.34);
     --sf-colour-link: var(--sf-colour-orange-500);
     --sf-colour-link-hover: oklch(80% 0.14 50);
+    --sf-colour-success: oklch(72% 0.13 150);
+    --sf-colour-success-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-success-soft: oklch(72% 0.13 150 / 0.16);
+    --sf-colour-warning: oklch(84% 0.15 82);
+    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-warning-soft: oklch(84% 0.15 82 / 0.18);
+    --sf-colour-danger: oklch(70% 0.18 28);
+    --sf-colour-danger-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-danger-soft: oklch(70% 0.18 28 / 0.16);
+    --sf-colour-info: oklch(76% 0.12 205);
+    --sf-colour-info-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-info-soft: oklch(76% 0.12 205 / 0.16);
+    --sf-colour-ring: var(--sf-colour-orange-500);
+    --sf-shadow-glow: 0 0 2rem oklch(74% 0.17 48 / 0.18);
   }
 @layer reset {
   *, *::before, *::after { box-sizing: border-box; }
@@ -438,7 +464,7 @@
     justify-content: space-between;
     min-block-size: var(--sf-app-header-height);
     padding-inline: var(--sf-space-s-m);
-    z-index: 20;
+    z-index: var(--sf-z-header);
   }
 
   .sf-app-shell[data-layout~="fixed-header"] {
@@ -521,6 +547,7 @@
     }
 
     .sf-app-shell[data-mobile="drawer"] .sf-app-sidebar {
+      block-size: 100dvh;
       box-shadow: var(--sf-shadow-xl);
       inline-size: min(18rem, calc(100vw - var(--sf-space-l)));
       inset-block: 0;
@@ -529,7 +556,7 @@
       min-block-size: 100dvh;
       position: fixed;
       transform: translateX(-100%);
-      z-index: 30;
+      z-index: var(--sf-z-drawer);
     }
 
     .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-sidebar {
@@ -541,7 +568,7 @@
       display: block;
       inset: 0;
       position: fixed;
-      z-index: 25;
+      z-index: var(--sf-z-backdrop);
     }
   }
 
@@ -685,7 +712,7 @@
   .sf-sticky-top {
     position: sticky;
     inset-block-start: var(--sf-sticky-offset, 0);
-    z-index: var(--sf-sticky-z, 20);
+    z-index: var(--sf-sticky-z, var(--sf-z-sticky));
   }
 
   .sf-media-object {
@@ -1206,6 +1233,16 @@
     to { transform: translateX(-50%); }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    :where(.sf-button:hover, .sf-card--interactive:hover) {
+      transform: none;
+    }
+
+    .sf-marquee__track {
+      animation: none;
+    }
+  }
+
   .sf-command-list {
     display: grid;
     font-family: var(--sf-font-mono);
@@ -1611,7 +1648,7 @@
   }
 
   .sf-filter-bar {
-    align-items: end;
+    align-items: var(--sf-filter-bar-align, center);
     background: var(--sf-colour-surface);
     border: 1px solid var(--sf-colour-border);
     border-radius: var(--sf-radius-panel);
@@ -1758,6 +1795,10 @@
     inline-size: .42em;
   }
 
+  :where(.sf-status[data-dot="false"], .sf-status--label)::before {
+    content: none;
+  }
+
   .sf-status[data-tone="success"] {
     --sf-status-bg: var(--sf-colour-success-soft);
     --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
@@ -2192,6 +2233,7 @@
   :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer):popover-open {
     display: grid;
     gap: var(--sf-space-xs);
+    z-index: var(--sf-z-overlay);
   }
 
   .sf-popover {
@@ -2263,7 +2305,7 @@
     inset-block-start: var(--sf-space-s);
     inset-inline-end: var(--sf-space-s);
     position: fixed;
-    z-index: 50;
+    z-index: var(--sf-z-toast);
   }
 
   .sf-banner {
@@ -2378,6 +2420,7 @@
   }
 
   .sf-tab {
+    align-items: center;
     border-block-end: 0.125rem solid transparent;
     border-radius: var(--sf-radius-full);
     color: var(--sf-colour-muted);
@@ -2656,7 +2699,7 @@
     text-decoration: none;
     transform: translateY(calc(-100% - var(--sf-space-m)));
     transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
-    z-index: 999;
+    z-index: var(--sf-z-skip-link);
   }
 
   .sf-skip-link:focus-visible {

package/tokens.css

@@ -150,6 +150,13 @@
     --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
     --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
     --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
+    --sf-z-sticky: 20;
+    --sf-z-header: 20;
+    --sf-z-backdrop: 25;
+    --sf-z-drawer: 30;
+    --sf-z-overlay: 40;
+    --sf-z-toast: 50;
+    --sf-z-skip-link: 999;
     --sf-duration-fast: 150ms;
     --sf-duration-normal: 220ms;
     --sf-duration-slow: 360ms;
@@ -210,6 +217,25 @@
     --sf-colour-border: oklch(100% 0 0 / 0.14);
     --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
     --sf-colour-backdrop: oklch(0% 0 0 / 0.64);
+    --sf-colour-primary: var(--sf-colour-orange-500);
+    --sf-colour-primary-hover: oklch(80% 0.14 50);
+    --sf-colour-primary-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-primary-soft: oklch(74% 0.17 48 / 0.18);
+    --sf-colour-primary-soft-border: oklch(74% 0.17 48 / 0.34);
     --sf-colour-link: var(--sf-colour-orange-500);
     --sf-colour-link-hover: oklch(80% 0.14 50);
+    --sf-colour-success: oklch(72% 0.13 150);
+    --sf-colour-success-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-success-soft: oklch(72% 0.13 150 / 0.16);
+    --sf-colour-warning: oklch(84% 0.15 82);
+    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-warning-soft: oklch(84% 0.15 82 / 0.18);
+    --sf-colour-danger: oklch(70% 0.18 28);
+    --sf-colour-danger-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-danger-soft: oklch(70% 0.18 28 / 0.16);
+    --sf-colour-info: oklch(76% 0.12 205);
+    --sf-colour-info-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-info-soft: oklch(76% 0.12 205 / 0.16);
+    --sf-colour-ring: var(--sf-colour-orange-500);
+    --sf-shadow-glow: 0 0 2rem oklch(74% 0.17 48 / 0.18);
   }

package/utilities.css

@@ -145,7 +145,7 @@
     text-decoration: none;
     transform: translateY(calc(-100% - var(--sf-space-m)));
     transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
-    z-index: 999;
+    z-index: var(--sf-z-skip-link);
   }
 
   .sf-skip-link:focus-visible {