@f5-sales-demo/docs-theme 4.11.6 → 4.12.0

package/src/shared/contract.mjs

@@ -0,0 +1,110 @@
+export const ROOT = 'https://f5-sales-demo.github.io/shared/';
+export const CONTRACT = 'v1';
+const hash = /^[a-f0-9]{64}$/;
+export function validateAsset(asset) {
+  if (!asset || !hash.test(asset.sha256) || !Number.isSafeInteger(asset.bytes) || asset.bytes < 1) {
+    throw new Error('Invalid shared asset receipt');
+  }
+  const url = new URL(asset.url);
+  if (
+    url.href !== `${ROOT}assets/${asset.sha256}.${asset.extension}` ||
+    !/^(css|js|json|woff2|svg|png|txt)$/.test(asset.extension)
+  ) {
+    throw new Error('Shared asset must use its canonical content-addressed root URL');
+  }
+  return asset;
+}
+export function validatePointer(pointer) {
+  if (pointer?.contract !== CONTRACT) throw new Error('Unsupported shared contract');
+  const release = pointer.release;
+  if (
+    !release ||
+    !hash.test(release.sha256) ||
+    !Number.isSafeInteger(release.bytes) ||
+    release.bytes < 1 ||
+    release.url !== `${ROOT}v1/releases/${release.sha256}.json`
+  )
+    throw new Error('Invalid shared release pointer');
+  return pointer;
+}
+export function validateManifest(manifest) {
+  if (manifest?.contract !== CONTRACT || !manifest.assets || typeof manifest.assets !== 'object')
+    throw new Error('Unsupported shared manifest');
+  for (const required of ['css', 'runtime', 'data', 'logo', 'favicon']) {
+    if (!manifest.assets[required]) throw new Error(`Missing shared asset: ${required}`);
+  }
+  const types = { css: 'css', runtime: 'js', data: 'json', logo: 'svg', favicon: 'svg' };
+  for (const [name, asset] of Object.entries(manifest.assets)) {
+    validateAsset(asset);
+    if (types[name] && asset.extension !== types[name]) throw new Error(`Incorrect shared asset type: ${name}`);
+  }
+  return manifest;
+}
+export function validateConsumer(consumer) {
+  if (
+    consumer?.contract !== CONTRACT ||
+    !/^f5-sales-demo\/[a-z0-9_.-]+$/.test(consumer.repository) ||
+    !/^\/(?:[a-zA-Z0-9_.-]+\/)*$/.test(consumer.documentBase) ||
+    typeof consumer.locale !== 'string' ||
+    !consumer.mounts ||
+    !['desktop', 'mobile'].every(
+      (key) => typeof consumer.mounts[key] === 'string' && /^#[a-z][a-z0-9-]*$/.test(consumer.mounts[key]),
+    )
+  ) {
+    throw new Error('Invalid shared consumer contract');
+  }
+  return consumer;
+}
+export function validateData(data) {
+  if (
+    !Array.isArray(data?.menu?.items) ||
+    !data.menu.items.length ||
+    !Array.isArray(data.searchSources) ||
+    !data.routing
+  )
+    throw new Error('Invalid shared menu data');
+  const labels = new Set();
+  const destinations = new Set();
+  const visit = (value) => {
+    if (!value || typeof value !== 'object') return;
+    for (const [key, child] of Object.entries(value)) {
+      if (key === 'href') {
+        const url = new URL(child);
+        if (url.protocol !== 'https:' || url.username || url.password)
+          throw new Error('Menu destinations require public HTTPS URLs');
+      } else if (/translations$/i.test(key)) {
+        if (
+          !child ||
+          typeof child !== 'object' ||
+          Object.values(child).some((text) => typeof text !== 'string' || !text.trim())
+        )
+          throw new Error('Invalid supplied translation');
+      } else visit(child);
+    }
+  };
+  visit(data.menu);
+  for (const item of data.menu.items) {
+    if (!item.label?.trim() || labels.has(item.label)) throw new Error('Duplicate or missing menu label');
+    labels.add(item.label);
+    for (const category of item.content?.categories || []) {
+      const links = new Set();
+      for (const link of category.items) {
+        if (!link.label?.trim() || links.has(link.href)) throw new Error('Duplicate or missing menu entry');
+        links.add(link.href);
+        if (destinations.has(link.href)) throw new Error('Duplicate global menu destination');
+        destinations.add(link.href);
+      }
+    }
+  }
+  const sources = new Set();
+  for (const source of data.searchSources) {
+    if (!source.repo || !source.label || sources.has(source.repo))
+      throw new Error('Duplicate or missing Search source');
+    sources.add(source.repo);
+  }
+  for (const key of ['locales', 'unlocalized', 'englishOnly']) {
+    if (!Array.isArray(data.routing[key]) || data.routing[key].some((value) => typeof value !== 'string'))
+      throw new Error('Invalid locale routing');
+  }
+  return data;
+}

package/src/shared/localize.mjs

@@ -0,0 +1,15 @@
+export function langToSlug(lang) {
+  return lang.toLowerCase();
+}
+export function localizeEcosystemHref(href, locale) {
+  const routing = globalThis.F5SharedRoutingV1;
+  if (!routing?.locales.includes(locale)) return href;
+  const url = new URL(href, document.baseURI);
+  if (url.hostname !== 'f5-sales-demo.github.io') return href;
+  const parts = url.pathname.split('/').filter(Boolean);
+  if (!parts.length || routing.locales.includes(parts[0]) || routing.unlocalized.includes(parts[0])) return href;
+  if (parts[1] && routing.locales.includes(parts[1])) return href;
+  parts.splice(1, 0, routing.englishOnly.includes(parts[0]) ? 'en' : locale);
+  url.pathname = `/${parts.join('/')}/`;
+  return url.href;
+}

package/src/shared/runtime.tsx

@@ -0,0 +1,124 @@
+import type { MegaMenuConfig } from '@f5-sales-demo/starlight-mega-menu';
+import MegaMenu from '@f5-sales-demo/starlight-mega-menu/components/MegaMenu.tsx';
+import MegaMenuMobile from '@f5-sales-demo/starlight-mega-menu/components/MegaMenuMobile.tsx';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { searchSource } from '../utils/search-source.ts';
+
+interface Consumer {
+  repository: string;
+  mounts: { desktop: string; mobile: string };
+}
+interface Asset {
+  url: string;
+}
+interface Release {
+  data: {
+    menu: MegaMenuConfig;
+    routing: { locales: string[]; unlocalized: string[]; englishOnly: string[] };
+    searchSources: Array<{ repo: string; label: string }>;
+  };
+  manifest: { assets: Record<string, Asset> };
+}
+interface Prepared {
+  commit(): void;
+  dispose(): void;
+}
+declare global {
+  interface Window {
+    F5SharedV1: Map<string, { prepare(consumer: Consumer, release: Release): Prepared }>;
+    F5SharedSearchV1: { mergeIndex: Array<{ bundlePath: string }> };
+  }
+  var F5SharedRoutingV1: Release['data']['routing'];
+}
+// All imports are bundled once by the publisher. No downstream React island is involved.
+window.F5SharedV1 ||= new Map();
+const registry = window.F5SharedV1;
+registry.set(import.meta.url, {
+  prepare(consumer: Consumer, release: Release) {
+    const desktop = document.querySelector(consumer.mounts.desktop);
+    const mobile = document.querySelector(consumer.mounts.mobile);
+    if (!desktop || !mobile) throw new Error('Missing ecosystem mount');
+    const desktopStage = document.createElement('div');
+    const mobileStage = document.createElement('div');
+    const roots = [createRoot(desktopStage), createRoot(mobileStage)];
+    globalThis.F5SharedRoutingV1 = release.data.routing;
+    flushSync(() => {
+      roots[0].render(<MegaMenu config={release.data.menu} />);
+      roots[1].render(<MegaMenuMobile config={release.data.menu} />);
+    });
+    let observer: MutationObserver;
+    const dismissPreferences = (event: KeyboardEvent) => {
+      const preferences = document.querySelector<HTMLDetailsElement>(
+        '.compact-preferences[open], .provider-local-nav[open]',
+      );
+      if (event.key === 'Escape' && preferences) {
+        preferences.open = false;
+        preferences.querySelector('summary')?.focus();
+      }
+    };
+    return {
+      commit() {
+        desktop.replaceChildren(desktopStage);
+        mobile.replaceChildren(mobileStage);
+        // Branding URLs switch only with the coordinated shell release.
+        for (const element of document.querySelectorAll<HTMLImageElement>('[data-f5-shared-brand]')) {
+          const asset = release.manifest.assets[element.dataset.f5SharedBrand || ''];
+          if (asset) element.src = asset.url;
+        }
+        const favicon = document.querySelector<HTMLLinkElement>('[data-f5-shared-favicon]');
+        if (favicon) favicon.href = release.manifest.assets.favicon.url;
+        const annotate = () => {
+          for (const link of document.querySelectorAll<HTMLAnchorElement>('.pagefind-ui__result-link')) {
+            const title = link.closest('.pagefind-ui__result-title');
+            if (!title || title.querySelector('.search-project-source')) continue;
+            const label = searchSource(link.href, release.data.searchSources);
+            if (!label) continue;
+            const source = document.createElement('span');
+            source.className = 'search-project-source';
+            source.textContent = label;
+            title.append(source);
+          }
+        };
+        observer = new MutationObserver(annotate);
+        observer.observe(document.body, { childList: true, subtree: true });
+        annotate();
+        // Pagefind remains the local Starlight implementation. Its merge bundles are supplied here.
+        const current = consumer.repository.split('/')[1];
+        window.F5SharedSearchV1 = {
+          mergeIndex: release.data.searchSources
+            .filter((source) => source.repo !== current)
+            .map((source) => ({
+              bundlePath: `https://f5-sales-demo.github.io/${source.repo === 'f5-sales-demo.github.io' ? '' : `${source.repo}/`}pagefind/`,
+            })),
+        };
+        document.addEventListener('keydown', dismissPreferences);
+        // Supply the focus trap missing in the archived mobile renderer.
+        document.addEventListener('keydown', trap);
+      },
+      dispose() {
+        for (const root of roots) root.unmount();
+        observer?.disconnect();
+        document.removeEventListener('keydown', dismissPreferences);
+        document.removeEventListener('keydown', trap);
+      },
+    };
+  },
+});
+function trap(event: KeyboardEvent) {
+  if (event.key !== 'Tab') return;
+  const dialog = document.querySelector<HTMLElement>('.smm-mobile-overlay');
+  if (!dialog) return;
+  const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button, a, summary, [tabindex="0"]')).filter(
+    (element) => element.getClientRects().length,
+  );
+  const first = controls[0],
+    last = controls.at(-1);
+  if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {
+    event.preventDefault();
+    last?.focus();
+  } else if (!event.shiftKey && (document.activeElement === last || document.activeElement === dialog)) {
+    event.preventDefault();
+    first?.focus();
+  }
+}

package/src/shared/search-integration.mjs

@@ -0,0 +1,16 @@
+// Keep Starlight's Search and Pagefind implementation local; inject only release-owned federation.
+export function sharedSearchIntegration() {
+  return {
+    name: 'f5-shared-search',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!id.includes('/@astrojs/starlight/components/Search.astro')) return;
+      return code
+        .replace('...pagefindUserConfig,', '...pagefindUserConfig, ...(window.F5SharedSearchV1 || {}),')
+        .replace(
+          'const { PagefindUI } = await import',
+          'await window.F5SharedReadyV1; const { PagefindUI } = await import',
+        );
+    },
+  };
+}

package/src/shared/settings.mjs

@@ -0,0 +1,19 @@
+import baseline from './baseline.json' with { type: 'json' };
+
+export { baseline };
+export function sharedMode(repository = process.env.GITHUB_REPOSITORY || '') {
+  const requested = process.env.DOCS_SHARED_MODE || 'auto';
+  if (!['auto', 'local', 'publish', 'consume'].includes(requested)) throw new Error('Invalid DOCS_SHARED_MODE');
+  const root = repository === 'f5-sales-demo/f5-sales-demo.github.io';
+  const mode =
+    requested === 'auto'
+      ? root
+        ? 'publish'
+        : repository.startsWith('f5-sales-demo/')
+          ? 'consume'
+          : 'local'
+      : requested;
+  if ((mode === 'publish') !== root && mode !== 'local')
+    throw new Error('Only the landing repository publishes the shared tree');
+  return mode;
+}

package/src/utils/search-sites.ts

@@ -1,32 +1,3 @@
-export const federatedSearchSites = [
-  { repo: 'docs-builder', label: 'Documentation builder' },
-  { repo: 'docs-theme', label: 'Shared documentation theme' },
-  { repo: 'f5-sales-demo.github.io', label: 'Sales demo portal' },
-  { repo: 'administration', label: 'Administration' },
-  { repo: 'nginx', label: 'NGINX One' },
-  { repo: 'observability', label: 'Observability' },
-  { repo: 'statistics', label: 'Statistics' },
-  { repo: 'was', label: 'Web App Scanning' },
-  { repo: 'multi-cloud-networking', label: 'Multi-Cloud Networking' },
-  { repo: 'canada', label: 'Canada topology' },
-  { repo: 'dns', label: 'DNS Management' },
-  { repo: 'cdn', label: 'Content Delivery Network' },
-  { repo: 'bot-standard', label: 'Bot Defense Standard' },
-  { repo: 'bot-advanced', label: 'Bot Defense Advanced' },
-  { repo: 'ddos', label: 'DDoS Mitigation' },
-  { repo: 'webapp-api-protection', label: 'Web App & API Protection' },
-  { repo: 'api-protection', label: 'API Protection' },
-  { repo: 'xcsh', label: 'xcsh' },
-  { repo: 'xcsh-action', label: 'xcsh GitHub Action' },
-  { repo: 'csd', label: 'Client-Side Defense' },
-  { repo: 'docs-icons', label: 'Icon packages' },
-  { repo: 'marketplace', label: 'xcsh marketplace' },
-  { repo: 'api-specs', label: 'API specifications' },
-  { repo: 'api-specs-enriched', label: 'Enriched API specifications' },
-  { repo: 'cdn-simulator', label: 'CDN simulator' },
-  { repo: 'origin-server', label: 'Origin server' },
-  { repo: 'traffic-generator', label: 'Traffic generator' },
-  { repo: 'demo-resources', label: 'Demo resource catalog' },
-  { repo: 'xcsh-chrome-extension', label: 'xcsh Chrome extension' },
-  { repo: 'console', label: 'Console catalog' },
-];
+// Explicit local builds may supply their own federation in createF5xcDocsConfig.
+export const localSearchSites: Array<{ repo: string; label: string }> = [];
+export const federatedSearchSites = localSearchSites;

package/src/utils/showcase-navigation.test.ts

@@ -1,34 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { expect, it } from 'vitest';
 import { defaultMegaMenuItems } from '../../config';
-import { localizeEcosystemHref } from './localize-ecosystem-href';
 
-describe('showcase navigation', () => {
-  it('uses the audience taxonomy without duplicate project destinations', () => {
-    expect(defaultMegaMenuItems.map((item) => item.label)).toEqual([
-      'Demos',
-      'Demo environment',
-      'Operations',
-      'Developer tools',
-      'Ecosystem',
-      'F5 services',
-    ]);
-    const links = defaultMegaMenuItems.flatMap((item) => item.content?.categories?.flatMap((c) => c.items) ?? []);
-    const urls = links.map((item) => item.href);
-    expect(new Set(urls).size).toBe(urls.length);
-    expect(urls).not.toContain('https://f5-sales-demo.github.io/');
-    expect(links.find((l) => l.href.includes('/api-protection/'))?.label).toBe('API Protection');
-    expect(links.find((l) => l.href.includes('/ddos/'))?.label).toBe('DDoS Mitigation');
-    expect(defaultMegaMenuItems[1].content?.footer?.label).toBe('Demo resource catalog');
-  });
-
-  it('keeps explicit English catalog destinations valid across locale selection', () => {
-    for (const locale of ['en', 'fr', 'ar']) {
-      expect(localizeEcosystemHref('https://f5-sales-demo.github.io/en/demos/', locale)).toBe(
-        'https://f5-sales-demo.github.io/en/demos/',
-      );
-      expect(localizeEcosystemHref('https://f5-sales-demo.github.io/en/ecosystem/', locale)).toBe(
-        'https://f5-sales-demo.github.io/en/ecosystem/',
-      );
-    }
-  });
-});
+it('leaves production menu content to the root publisher', () => expect(defaultMegaMenuItems).toEqual([]));

package/src/utils/statistics-navigation.test.ts

@@ -1,33 +1,9 @@
-import { describe, expect, it } from 'vitest';
-import { defaultMegaMenuItems, federatedSearchBundlePaths, federatedSearchSites } from '../../config';
+import { expect, it } from 'vitest';
 import { localizeEcosystemHref } from './localize-ecosystem-href';
 
-describe('Statistics discovery', () => {
-  it('lists Statistics beside monitoring tools exactly once', () => {
-    const networking = defaultMegaMenuItems.find((item) => item.label === 'Operations');
-    const category = networking?.content?.categories?.find((item) => item.title === 'Queries and administration');
-    const statistics = category?.items?.filter((item) => item.label === 'Statistics');
-    expect(statistics).toHaveLength(1);
-    expect(statistics?.[0]).toMatchObject({
-      href: 'https://f5-sales-demo.github.io/statistics/en/',
-      description: 'Query access logs, application metrics, and security telemetry through the API.',
-    });
-    expect(category?.items?.map((item) => item.label)).toEqual(['Statistics', 'Observability', 'Administration']);
-  });
-  it('adds Statistics to federated search and avoids self-index duplication', () => {
-    expect(federatedSearchSites.filter((item) => item.repo === 'statistics')).toHaveLength(1);
-    expect(federatedSearchBundlePaths('https://f5-sales-demo.github.io', '/')).toContain(
-      'https://f5-sales-demo.github.io/statistics/pagefind/',
+it('retains explicit English Statistics destinations', () => {
+  for (const locale of ['en', 'fr', 'ar'])
+    expect(localizeEcosystemHref('https://f5-sales-demo.github.io/statistics/en/', locale)).toBe(
+      'https://f5-sales-demo.github.io/statistics/en/',
     );
-    expect(federatedSearchBundlePaths('https://f5-sales-demo.github.io', '/statistics')).not.toContain(
-      'https://f5-sales-demo.github.io/statistics/pagefind/',
-    );
-  });
-  it('keeps the published English destination for every reader locale', () => {
-    for (const locale of ['en', 'fr', 'ja']) {
-      expect(localizeEcosystemHref('https://f5-sales-demo.github.io/statistics/en/', locale)).toBe(
-        'https://f5-sales-demo.github.io/statistics/en/',
-      );
-    }
-  });
 });

package/styles/shell.css

@@ -0,0 +1,242 @@
+
+	@layer starlight.core {
+		.sl-mega-menu-header {
+			display: flex;
+			gap: var(--sl-nav-gap);
+			justify-content: space-between;
+			align-items: center;
+			height: 100%;
+		}
+
+		.title-wrapper {
+			/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+			overflow: clip;
+			/* Avoid clipping focus ring around link inside title wrapper. */
+			padding: 0.25rem;
+			margin: -0.25rem;
+			min-width: 0;
+		}
+
+		.right-group { display: none; }
+		.compact-preferences { position: relative; flex-shrink: 0; }
+		.compact-preferences summary {
+			cursor: pointer;
+			padding: 0.75rem;
+			min-height: 44px;
+			list-style: none;
+		}
+		.preferences-panel {
+			position: absolute;
+			inset-inline-end: 0;
+			top: calc(100% + 0.5rem);
+			display: grid;
+			gap: 0.5rem;
+			padding: 0.75rem;
+			background: var(--sl-color-bg-nav);
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+		}
+		.search-project-source {
+			display: block;
+			font-size: var(--sl-text-sm);
+			font-weight: 400;
+			color: var(--sl-color-gray-2);
+			margin-top: 0.25rem;
+		}
+		@media (min-width: 90rem) {
+			.right-group { display: flex; }
+			.compact-preferences { display: none; }
+		}
+
+		.right-group,
+		.social-icons {
+			gap: 1rem;
+			align-items: center;
+		}
+		.social-icons::after {
+			content: '';
+			height: 2rem;
+			border-inline-end: 1px solid var(--sl-color-gray-5);
+		}
+
+		/* Desktop nav is hidden on small screens */
+		.smm-desktop-nav {
+			display: none;
+		}
+
+		/* Mobile toggle is visible on small screens */
+		.smm-mobile-toggle {
+			display: flex;
+			align-items: center;
+		}
+
+		@media (min-width: 90rem) {
+			:root[data-has-sidebar] {
+				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+			}
+			:root:not([data-has-toc]) {
+				--__toc-width: 0rem;
+			}
+			.sl-mega-menu-header {
+				--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+				--__main-column-fr: calc(
+					(
+							100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+								(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+								var(--sl-content-width)
+						) / 2
+				);
+				display: grid;
+				grid-template-columns:
+					/* 1 (site title) */
+					minmax(0, 1fr)
+					/* 2 (mega-menu nav) */
+					auto
+					/* 3 (search box) */
+					auto
+					/* 4 (right items) */
+					auto;
+				align-content: center;
+			}
+
+			/* Show desktop nav, hide mobile toggle */
+			.smm-desktop-nav {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				min-width: 0;
+			}
+
+			.smm-mobile-toggle {
+				display: none;
+			}
+		}
+	}
+
+
+  .site-title {
+    align-items: center;
+    gap: var(--sl-nav-gap);
+    font-size: var(--sl-text-h4);
+    font-weight: 600;
+    color: var(--sl-color-text-accent);
+    text-decoration: none;
+    white-space: nowrap;
+    min-width: 0;
+  }
+  .site-title span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+  .site-title img {
+    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+    object-position: 0 50%;
+    flex-shrink: 0;
+  }
+
+
+  .project-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.5rem;
+    border-top: 1px solid var(--sl-color-gray-5);
+    margin-top: 2rem;
+    padding-block: 1rem;
+  }
+  .project-links a { padding-block: 0.5rem; }
+
+
+  .sl-link-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: var(--f5-shadow-low);
+    position: relative;
+    transition: box-shadow var(--f5-transition-base),
+                transform var(--f5-transition-base);
+  }
+
+  .sl-link-card.has-icon {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .sl-link-card a {
+    text-decoration: none;
+    line-height: var(--sl-line-height-headings);
+  }
+
+  /* a11y fix for https://github.com/withastro/starlight/issues/487 */
+  .sl-link-card a::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .sl-link-card .stack {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    display: grid;
+    align-content: start;
+    gap: 0.5rem;
+  }
+
+  .sl-link-card .title {
+    color: var(--sl-color-white);
+    font-weight: 600;
+    font-size: var(--sl-text-lg);
+  }
+
+  .sl-link-card .description {
+    color: var(--sl-color-gray-3);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .sl-link-card .icon {
+    color: var(--sl-color-gray-3);
+  }
+
+  .sl-link-card .card-icon {
+    color: var(--sl-color-white);
+    align-self: start;
+    position: relative;
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .sl-link-card .card-icon svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .sl-link-card:focus-within {
+    outline: 2px solid var(--sl-color-text-accent);
+    outline-offset: 3px;
+  }
+
+  /* Hover state */
+  .sl-link-card:hover {
+    background: var(--sl-color-gray-7, var(--sl-color-gray-6));
+    border-color: var(--sl-color-gray-2);
+    box-shadow: var(--f5-shadow-mid);
+    transform: translateY(-1px);
+  }
+
+  .sl-link-card:hover .icon {
+    color: var(--sl-color-white);
+  }
+
+.provider-local-nav { position: relative; flex-shrink: 0; }
+.provider-local-nav summary { padding: .5rem; cursor: pointer; }
+.provider-local-nav nav { position: absolute; inset-inline-start: 0; top: 100%; display: grid; min-width: 12rem; gap: .5rem; padding: .75rem; background: var(--sl-color-bg-nav); border: 1px solid var(--sl-color-gray-5); border-radius: .5rem; z-index: 10; }
+[data-f5-fallback] { padding:.5rem; }