Lint fixes

Author: webstackdev

src/components/Content/ProgressBar/client/__tests__/index.spec.ts

@@ -55,12 +55,8 @@ function createDOM(contentHeight = 2000) {
 // ============================================================================
 
 describe('ReadingProgressBar', () => {
-  let rafCallback: FrameRequestCallback | null = null
-
   beforeEach(async () => {
-    rafCallback = null
-    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: FrameRequestCallback) => {
-      rafCallback = cb
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((_cb: FrameRequestCallback) => {
       return 1
     })
     vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
@@ -89,8 +85,7 @@ describe('ReadingProgressBar', () => {
 
     it('should use light DOM', () => {
       const el = new ReadingProgressBar()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((el as any).createRenderRoot()).toBe(el)
+      expect((el as unknown as { createRenderRoot: () => unknown }).createRenderRoot()).toBe(el)
     })
 
     it('should start progress at 0', () => {
@@ -103,11 +98,13 @@ describe('ReadingProgressBar', () => {
     it('should compute progress based on content position', () => {
       const { progress, content } = createDOM(2000)
 
-      const instance = document.createElement('reading-progress-bar')
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const priv = instance as any
-      priv.progressEl = progress
-      priv.contentEl = content
+      const instance = document.createElement('reading-progress-bar') as unknown as {
+        progressEl: HTMLProgressElement
+        contentEl: HTMLElement
+        updateProgress: () => void
+      }
+      instance.progressEl = progress
+      instance.contentEl = content
 
       vi.spyOn(content, 'getBoundingClientRect').mockReturnValue({
         top: -500,
@@ -121,7 +118,7 @@ describe('ReadingProgressBar', () => {
         toJSON: vi.fn(),
       })
 
-      priv.updateProgress()
+      instance.updateProgress()
 
       expect(progress.value).toBeGreaterThan(0)
       expect(progress.value).toBeLessThanOrEqual(100)
@@ -130,11 +127,13 @@ describe('ReadingProgressBar', () => {
     it('should clamp progress to 0-100 range', () => {
       const { progress, content } = createDOM(2000)
 
-      const instance = document.createElement('reading-progress-bar')
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const priv = instance as any
-      priv.progressEl = progress
-      priv.contentEl = content
+      const instance = document.createElement('reading-progress-bar') as unknown as {
+        progressEl: HTMLProgressElement
+        contentEl: HTMLElement
+        updateProgress: () => void
+      }
+      instance.progressEl = progress
+      instance.contentEl = content
 
       vi.spyOn(content, 'getBoundingClientRect').mockReturnValue({
         top: -5000,
@@ -148,19 +147,21 @@ describe('ReadingProgressBar', () => {
         toJSON: vi.fn(),
       })
 
-      priv.updateProgress()
+      instance.updateProgress()
 
       expect(progress.value).toBe(100)
     })
 
     it('should set 100% when content fits within one viewport', () => {
       const { progress, content } = createDOM(500)
 
-      const instance = document.createElement('reading-progress-bar')
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const priv = instance as any
-      priv.progressEl = progress
-      priv.contentEl = content
+      const instance = document.createElement('reading-progress-bar') as unknown as {
+        progressEl: HTMLProgressElement
+        contentEl: HTMLElement
+        updateProgress: () => void
+      }
+      instance.progressEl = progress
+      instance.contentEl = content
 
       vi.spyOn(content, 'getBoundingClientRect').mockReturnValue({
         top: 100,
@@ -174,7 +175,7 @@ describe('ReadingProgressBar', () => {
         toJSON: vi.fn(),
       })
 
-      priv.updateProgress()
+      instance.updateProgress()
 
       expect(progress.value).toBe(100)
     })

src/components/Content/ProgressBar/client/index.ts

@@ -10,6 +10,7 @@ import { LitElement } from 'lit'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { handleScriptError } from '@components/scripts/errors/handler'
+import { getProgressElement, getContentElement } from './selectors'
 
 export class ReadingProgressBar extends LitElement {
   static registeredName = 'reading-progress-bar'
@@ -43,15 +44,15 @@ export class ReadingProgressBar extends LitElement {
   // ── DOM ─────────────────────────────────────────────────────────────
 
   private cacheElements(): void {
-    this.progressEl = this.querySelector<HTMLProgressElement>('progress')
-    this.contentEl = document.querySelector<HTMLElement>('#content')
+    this.progressEl = getProgressElement(this)
+    this.contentEl = getContentElement()
   }
 
   // ── Listeners ───────────────────────────────────────────────────────
 
   private attachListeners(): void {
-    this.scrollHandler = () => this.scheduleUpdate()
-    this.resizeHandler = () => this.scheduleUpdate()
+    this.scrollHandler = () => this.requestProgressUpdate()
+    this.resizeHandler = () => this.requestProgressUpdate()
 
     window.addEventListener('scroll', this.scrollHandler, { passive: true })
     document.addEventListener('scroll', this.scrollHandler, { passive: true, capture: true })
@@ -74,7 +75,7 @@ export class ReadingProgressBar extends LitElement {
 
   // ── Progress calculation ────────────────────────────────────────────
 
-  private scheduleUpdate(): void {
+  private requestProgressUpdate(): void {
     if (this.rafId !== null) return
     this.rafId = requestAnimationFrame(() => {
       this.rafId = null

src/components/Content/ProgressBar/client/selectors.ts

@@ -0,0 +1,24 @@
+/**
+ * Type-safe HTML element selectors for the ReadingProgressBar component.
+ */
+
+export const SELECTORS = {
+  /** The <progress> element inside the component */
+  progress: 'progress',
+  /** The #content region that the bar tracks scroll progress for */
+  content: '#content',
+} as const
+
+/**
+ * Query the <progress> element from within the component's light DOM.
+ */
+export function getProgressElement(scope: Element): HTMLProgressElement | null {
+  return scope.querySelector<HTMLProgressElement>(SELECTORS.progress)
+}
+
+/**
+ * Query the #content region from the document.
+ */
+export function getContentElement(): HTMLElement | null {
+  return document.querySelector<HTMLElement>(SELECTORS.content)
+}

src/components/Content/ProgressBar/index.astro

@@ -11,7 +11,7 @@
 
 <reading-progress-bar
   class="fixed left-0 right-0 block h-1 sm:h-2"
-  style="top: var(--layout-top-offset, 0px); z-index: var(--z-nav);"
+  style="top: var(--layout-top-offset, 0); z-index: var(--z-nav);"
   data-progress-bar
   aria-hidden="true"
 >

src/components/Content/Switcher/index.astro

@@ -4,11 +4,9 @@ import './index.css'
 export type Props = {
   /** The currently active variant, used to determine the position of the switcher thumb */
   currentVariant: 'overview' | 'deep-dive'
-  /** The slug of the current article, used to construct links to the overview and deep dive pages */
-  slug: string
 }
 
-const { currentVariant, slug } = Astro.props
+const { currentVariant } = Astro.props
 ---
 
 <div class="flex items-center gap-3" role="radiogroup" aria-label="Content Variant">

src/components/Content/Switcher/index.css

@@ -0,0 +1,25 @@
+.content-switcher-track[aria-checked='false'] {
+  background-color: var(--color-trim-offset);
+}
+
+.content-switcher-track[aria-checked='true'] {
+  background-color: var(--color-secondary);
+}
+
+.content-switcher-track[aria-checked='true'] .content-switcher-thumb {
+  transform: translateX(1.25rem);
+}
+
+.content-switcher-track[aria-checked='false'] ~ .content-switcher-label--overview {
+  color: var(--color-content-active);
+  font-weight: 600;
+}
+
+.content-switcher-track[aria-checked='false'] ~ .content-switcher-label--deep-dive {
+  color: var(--color-content-offset);
+}
+
+.content-switcher-track[aria-checked='true'] ~ .content-switcher-label--deep-dive {
+  color: var(--color-content-active);
+  font-weight: 600;
+}

src/components/Header/client/__tests__/headerAnimation.spec.ts

@@ -82,8 +82,7 @@ function stubAnimate() {
     pause: vi.fn(),
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation) as any
+  Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation) as unknown as typeof Element.prototype.animate
   return mockAnimation
 }
 
@@ -150,8 +149,7 @@ describe('headerAnimation', () => {
       // Make animate throw
       Element.prototype.animate = vi.fn().mockImplementation(() => {
         throw new Error('WAAPI not supported')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      }) as any
+      }) as unknown as typeof Element.prototype.animate
 
       await animateCollapse(dom.shell)
 

src/components/Header/client/headerAnimation.ts

@@ -2,18 +2,19 @@
  * Header Squish Animation
  *
  * Two-step WAAPI animation for the header collapse/expand effect triggered
- * on scroll. Uses the FLIP pattern (First → Last → Invert → Play) to
+ * on scroll. Uses the FLIP pattern (First / Last / Invert / Play) to
  * measure before/after states, then animates between them.
  *
  * Collapse (forward):
- *   Step 1 – scale/size reduction (brand, icons, nav text shrink in place)
- *   Step 2 – position shift (items move + header height change)
+ * Step 1 -- scale/size reduction (brand, icons, nav text shrink in place)
+ * Step 2 -- position shift (items move + header height change)
  *
  * Expand (reverse):
- *   Step 1 – position shift (header height grows + items move)
- *   Step 2 – scale/size growth (brand, icons, nav text grow)
+ * Step 1 -- position shift (header height grows + items move)
+ * Step 2 -- scale/size growth (brand, icons, nav text grow)
  */
 import { handleScriptError } from '@components/scripts/errors/handler'
+import { getAnimationElements, type AnimationElements } from './selectors'
 
 // ============================================================================
 // CONSTANTS
@@ -29,19 +30,6 @@ export const HEADER_TRANSITION_DURATION = 320
 const EASING = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
 const COLLAPSED_CLASS = 'is-collapsed'
 
-// ============================================================================
-// TYPES
-// ============================================================================
-
-interface AnimationElements {
-  headerShell: HTMLElement
-  siteHeader: HTMLElement
-  brand: HTMLElement
-  footprint: HTMLElement
-  icons: HTMLElement[]
-  navLinks: HTMLElement[]
-}
-
 interface MeasuredSnapshot {
   brandTransform: string
   headerPaddingTop: string
@@ -78,7 +66,7 @@ export const animateCollapse = async (headerShell: HTMLElement): Promise<void> =
   if (headerShell.classList.contains(COLLAPSED_CLASS)) return
 
   try {
-    const elements = queryElements(headerShell)
+    const elements = getAnimationElements(headerShell)
     if (!elements) {
       headerShell.classList.add(COLLAPSED_CLASS)
       return
@@ -125,7 +113,7 @@ export const animateExpand = async (headerShell: HTMLElement): Promise<void> =>
   if (!headerShell.classList.contains(COLLAPSED_CLASS)) return
 
   try {
-    const elements = queryElements(headerShell)
+    const elements = getAnimationElements(headerShell)
     if (!elements) {
       headerShell.classList.remove(COLLAPSED_CLASS)
       return
@@ -162,29 +150,6 @@ export const animateExpand = async (headerShell: HTMLElement): Promise<void> =>
   }
 }
 
-// ============================================================================
-// DOM QUERIES
-// ============================================================================
-
-/**
- * Query all animated elements from the header shell.
- * Returns null if required elements are missing (e.g. during SSR or testing).
- */
-function queryElements(headerShell: HTMLElement): AnimationElements | null {
-  const siteHeader = headerShell.querySelector<HTMLElement>('.site-header')
-  const brand = headerShell.querySelector<HTMLElement>('.header-brand')
-  const footprint = headerShell.querySelector<HTMLElement>('.header-footprint')
-
-  if (!siteHeader || !brand || !footprint) return null
-
-  const icons = Array.from(headerShell.querySelectorAll<HTMLElement>('.header-icon'))
-  const navLinks = Array.from(
-    headerShell.querySelectorAll<HTMLElement>('.header-nav a'),
-  )
-
-  return { headerShell, siteHeader, brand, footprint, icons, navLinks }
-}
-
 // ============================================================================
 // MEASUREMENT
 // ============================================================================
@@ -218,15 +183,15 @@ function measureState(elements: AnimationElements): MeasuredSnapshot {
 /**
  * Build WAAPI animations for each element with 3-keyframe sequences.
  *
- * Collapse (forward) — sizes first, then positions:
- *   0%    → expanded values for everything
- *   50%   → collapsed sizes, expanded positions
- *   100%  → collapsed sizes, collapsed positions
+ * Collapse (forward) - sizes first, then positions:
+ * 0% = expanded values for everything
+ * 50% = collapsed sizes, expanded positions
+ * 100% = collapsed sizes, collapsed positions
  *
- * Expand (reverse) — positions first, then sizes:
- *   0%    → collapsed values for everything
- *   50%   → collapsed sizes, expanded positions
- *   100%  → expanded sizes, expanded positions
+ * Expand (reverse) - positions first, then sizes:
+ * 0% = collapsed values for everything
+ * 50% = collapsed sizes, expanded positions
+ * 100% = expanded sizes, expanded positions
  */
 function buildAnimations(
   elements: AnimationElements,
@@ -324,8 +289,8 @@ function buildAnimations(
 
 /**
  * Keyframes for a "size" property:
- *   Collapse → changes in first half, holds in second
- *   Expand   → holds in first half, changes in second
+ * Collapse - changes in first half, holds in second.
+ * Expand - holds in first half, changes in second.
  */
 function sizeFirstKeyframes(
   from: Record<string, string>,
@@ -349,8 +314,8 @@ function sizeFirstKeyframes(
 
 /**
  * Keyframes for a "position" property:
- *   Collapse → holds in first half, changes in second
- *   Expand   → changes in first half, holds in second
+ * Collapse - holds in first half, changes in second.
+ * Expand - changes in first half, holds in second.
  */
 function positionFirstKeyframes(
   from: Record<string, string>,