fix(web): TrackMenuItem icon prop accepts Lucide class-components

svelte-check on the new dev-push CI surfaced 11 type errors. Cause:
TrackMenuItem typed `icon` as Svelte 5's runes-mode `Component<...>`,
but Lucide-svelte ships class-based components whose type is
`ComponentType<SvelteComponent<...>>`. Switch the prop type to match
Lucide's actual export shape.

Also drop the redundant role="separator" on TrackMenuDivider — <hr>
already implies role=separator (svelte-check warning).

The remaining a11y warnings (tabindex on role=menu/dialog elements,
key-handler-with-click) are pre-existing in FlagPopover and surface
on the new dev-push run because svelte-check now sees them. They're
warnings not errors, so they don't block CI; address as a follow-up.
This commit is contained in:
2026-05-02 23:24:20 -04:00
parent 6858e45dbe
commit 5d69e9614f
2 changed files with 11 additions and 4 deletions
@@ -1 +1 @@
<hr class="my-1 border-border" role="separator" />
<hr class="my-1 border-border" />
+10 -3
View File
@@ -1,5 +1,12 @@
<script lang="ts">
import type { Component } from 'svelte';
import type { ComponentType, SvelteComponent } from 'svelte';
// Lucide-svelte ships class-based components (typeof ListPlus = ComponentType<...>),
// not runes-mode function components (Svelte 5's Component<...> type). Use
// ComponentType<SvelteComponent<...>> so any Lucide icon assigns cleanly.
type IconProp = ComponentType<
SvelteComponent<{ size?: number; strokeWidth?: number; class?: string }>
>;
let {
icon,
@@ -9,8 +16,8 @@
danger = false,
title,
}: {
/** Lucide icon component (or any Svelte component matching the Lucide signature). */
icon: Component<{ size?: number; strokeWidth?: number; class?: string }>;
/** Lucide icon component (or any Svelte class-component matching the Lucide signature). */
icon: IconProp;
label: string;
onclick?: () => void;
disabled?: boolean;