@gxp-dev/app-ui 0.1.0

package/src/components/domain/leaderboard/AwardIcon.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AwardIcon from './AwardIcon.vue'
+
+const meta = {
+  title: 'Domain/Leaderboard/AwardIcon',
+  component: AwardIcon,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div style="width: 64px; height: 64px;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof AwardIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Gold: Story = {
+  name: 'Gold (1st Place)',
+  decorators: [
+    () => ({
+      template: '<div style="width: 64px; height: 64px; color: #FFD700;"><story /></div>',
+    }),
+  ],
+}
+
+export const Silver: Story = {
+  name: 'Silver (2nd Place)',
+  decorators: [
+    () => ({
+      template: '<div style="width: 64px; height: 64px; color: #C0C0C0;"><story /></div>',
+    }),
+  ],
+}
+
+export const Bronze: Story = {
+  name: 'Bronze (3rd Place)',
+  decorators: [
+    () => ({
+      template: '<div style="width: 64px; height: 64px; color: #CD7F32;"><story /></div>',
+    }),
+  ],
+}
+
+export const SmallSize: Story = {
+  name: 'Small (32px)',
+  decorators: [
+    () => ({
+      template: '<div style="width: 32px; height: 32px; color: #FFD700;"><story /></div>',
+    }),
+  ],
+}
+
+export const LargeSize: Story = {
+  name: 'Large (128px)',
+  decorators: [
+    () => ({
+      template: '<div style="width: 128px; height: 128px; color: #FFD700;"><story /></div>',
+    }),
+  ],
+}

package/src/components/domain/leaderboard/AwardIcon.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AwardIcon from './AwardIcon.vue'
+
+describe('AwardIcon', () => {
+  it('renders an SVG element', () => {
+    const wrapper = mount(AwardIcon)
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('has correct viewBox attribute', () => {
+    const wrapper = mount(AwardIcon)
+    expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 200 200')
+  })
+
+  it('applies custom class via class prop', () => {
+    const wrapper = mount(AwardIcon, {
+      props: { class: 'custom-icon' },
+    })
+    const svg = wrapper.find('svg')
+    expect(svg.classes()).toContain('custom-icon')
+  })
+
+  it('includes default sizing classes', () => {
+    const wrapper = mount(AwardIcon)
+    const svg = wrapper.find('svg')
+    expect(svg.classes()).toContain('h-full')
+    expect(svg.classes()).toContain('w-full')
+  })
+
+  it('renders path elements inside the SVG', () => {
+    const wrapper = mount(AwardIcon)
+    const paths = wrapper.findAll('path')
+    expect(paths.length).toBeGreaterThan(0)
+  })
+
+  it('uses currentColor for fill', () => {
+    const wrapper = mount(AwardIcon)
+    const g = wrapper.find('g')
+    expect(g.attributes('fill')).toBe('currentColor')
+  })
+})

package/src/components/domain/leaderboard/AwardIcon.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+
+export interface AwardIconProps {
+  class?: string
+}
+
+const props = defineProps<AwardIconProps>()
+</script>
+
+<template>
+  <svg
+    :class="cn('h-full w-full', props.class)"
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 200 200"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g
+      transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+      fill="currentColor"
+      stroke="none"
+    >
+      <path
+        d="M790 1942 c-19 -11 -48 -37 -65 -60 -33 -45 -58 -58 -124 -65 -74 -9
+  -129 -64 -138 -138 -7 -65 -20 -93 -53 -113 -79 -46 -108 -137 -71 -221 26
+  -59 26 -71 0 -130 -37 -84 -8 -175 71 -221 33 -20 46 -48 53 -113 9 -74 64
+  -129 138 -138 65 -7 93 -20 113 -53 46 -79 137 -108 221 -71 59 26 71 26 130
+  0 84 -37 175 -8 221 71 20 33 48 46 113 53 74 9 129 64 138 138 7 65 20 93 53
+  113 79 46 108 137 71 221 -26 59 -26 71 0 130 37 84 8 175 -71 221 -33 20 -46
+  48 -53 113 -9 74 -64 129 -138 138 -65 7 -93 20 -113 53 -46 79 -137 108 -221
+  71 -59 -26 -72 -26 -126 -1 -55 25 -104 25 -149 2z"
+      />
+      <path
+        d="M450 484 c-47 -102 -86 -192 -88 -200 -9 -37 16 -44 159 -44 l138 0
+  81 -100 c79 -98 105 -116 128 -87 5 6 55 115 110 242 l100 229 -40 18 c-36 16
+  -42 16 -69 2 -45 -23 -122 -29 -176 -13 -35 9 -63 28 -105 70 -49 48 -64 57
+  -105 63 l-48 6 -85 -186z"
+      />
+      <path
+        d="M1403 663 c-23 -3 -49 -21 -90 -62 -44 -43 -69 -60 -104 -69 l-46
+  -12 -57 -131 c-41 -93 -56 -139 -51 -156 3 -13 23 -62 45 -109 51 -111 59
+  -110 164 18 l79 98 136 0 c139 0 161 5 161 39 0 9 -39 100 -87 204 -61 132
+  -91 187 -102 185 -9 0 -31 -3 -48 -5z"
+      />
+    </g>
+  </svg>
+</template>

package/src/components/domain/leaderboard/Leaderboard.stories.ts

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Leaderboard from './Leaderboard.vue'
+import type { LeaderboardEntry } from './Leaderboard.vue'
+
+const sampleEntries: LeaderboardEntry[] = [
+  { rank: 1, name: 'Alice Johnson', points: 15230, member_id: 'a1' },
+  { rank: 2, name: 'Bob Smith', points: 12100, member_id: 'a2' },
+  { rank: 3, name: 'Charlie Brown', points: 9850, member_id: 'a3' },
+  { rank: 4, name: 'Diana Prince', points: 7500, member_id: 'a4' },
+  { rank: 5, name: 'Eve Wilson', points: 5200, member_id: 'a5' },
+  { rank: 6, name: 'Frank Miller', points: 4100, member_id: 'a6' },
+  { rank: 7, name: 'Grace Lee', points: 3300, member_id: 'a7' },
+  { rank: 8, name: 'Hank Davis', points: 2100, member_id: 'a8' },
+  { rank: 9, name: 'Ivy Chen', points: 1500, member_id: 'a9' },
+  { rank: 10, name: 'Jack Taylor', points: 800, member_id: 'a10' },
+]
+
+const meta = {
+  title: 'Domain/Leaderboard/Leaderboard',
+  component: Leaderboard,
+  tags: ['autodocs'],
+  argTypes: {
+    topThreeStyle: {
+      control: 'select',
+      options: ['square', 'circle', 'number_only', 'badge'],
+      description: 'Visual style for the top 3 rank badges',
+    },
+    maxEntries: {
+      control: { type: 'number', min: 1, max: 20 },
+      description: 'Maximum number of entries to display',
+    },
+    showPlaceholders: {
+      control: 'boolean',
+      description: 'Show placeholder entries to fill up to maxEntries',
+    },
+    showAllTimeRank: {
+      control: 'boolean',
+      description: 'Show all-time rank below player name',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Show loading spinner',
+    },
+    firstPlaceColor: { control: 'color' },
+    secondPlaceColor: { control: 'color' },
+    thirdPlaceColor: { control: 'color' },
+  },
+  args: {
+    entries: sampleEntries,
+    title: 'Leaderboard',
+    maxEntries: 10,
+    showPlaceholders: true,
+    topThreeStyle: 'square',
+  },
+} satisfies Meta<typeof Leaderboard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const SquareStyle: Story = {
+  name: 'Top 3: Square',
+  args: {
+    topThreeStyle: 'square',
+  },
+}
+
+export const CircleStyle: Story = {
+  name: 'Top 3: Circle',
+  args: {
+    topThreeStyle: 'circle',
+  },
+}
+
+export const NumberOnlyStyle: Story = {
+  name: 'Top 3: Number Only',
+  args: {
+    topThreeStyle: 'number_only',
+  },
+}
+
+export const BadgeStyle: Story = {
+  name: 'Top 3: Badge (Award Icon)',
+  args: {
+    topThreeStyle: 'badge',
+  },
+}
+
+export const WithDescription: Story = {
+  args: {
+    title: 'Weekly Challenge',
+    description: 'Top performers this week earn bonus rewards!',
+  },
+}
+
+export const WithSubtitles: Story = {
+  name: 'With Subtitles',
+  args: {
+    entries: sampleEntries.map((e) => ({
+      ...e,
+      subtitle: `Team ${String.fromCharCode(64 + e.rank)}`,
+    })),
+  },
+}
+
+export const WithAllTimeRank: Story = {
+  name: 'With All-Time Rank',
+  args: {
+    showAllTimeRank: true,
+    entries: sampleEntries.map((e) => ({
+      ...e,
+      all_time_rank: Math.floor(Math.random() * 50) + 1,
+    })),
+  },
+}
+
+export const FewEntries: Story = {
+  name: 'Fewer Entries (with Placeholders)',
+  args: {
+    entries: sampleEntries.slice(0, 3),
+    maxEntries: 10,
+    showPlaceholders: true,
+  },
+}
+
+export const NoPlaceholders: Story = {
+  name: 'Fewer Entries (no Placeholders)',
+  args: {
+    entries: sampleEntries.slice(0, 3),
+    maxEntries: 10,
+    showPlaceholders: false,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    entries: [],
+  },
+}
+
+export const ErrorState: Story = {
+  name: 'Error State',
+  args: {
+    error: 'Unable to load leaderboard data. Please try again later.',
+    entries: [],
+  },
+}
+
+export const LockBanner: Story = {
+  name: 'With Lock Banner',
+  args: {
+    lockText: 'Competition is locked until results are finalized.',
+  },
+}
+
+export const CustomColors: Story = {
+  name: 'Custom Place Colors',
+  args: {
+    topThreeStyle: 'circle',
+    firstPlaceColor: '#E91E63',
+    secondPlaceColor: '#2196F3',
+    thirdPlaceColor: '#4CAF50',
+  },
+}
+
+export const HighlightedEntries: Story = {
+  name: 'Highlighted New/Updated Entries',
+  args: {
+    entries: sampleEntries.map((e, i) => ({
+      ...e,
+      isNewEntry: i === 0,
+      isPointsUpdated: i === 2,
+    })),
+  },
+}
+
+export const WithHeaderSlot: Story = {
+  name: 'With Custom Header Slot',
+  render: (args) => ({
+    components: { Leaderboard },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Leaderboard v-bind="args">
+        <template #header>
+          <div class="text-center">
+            <div class="text-3xl mb-1">&#127942;</div>
+            <h2 class="text-xl font-bold text-amber-500">Champions League</h2>
+            <p class="text-xs text-muted-foreground">Season 2026</p>
+          </div>
+        </template>
+      </Leaderboard>
+    `,
+  }),
+}
+
+export const WithFooterSlot: Story = {
+  name: 'With Footer Slot',
+  render: (args) => ({
+    components: { Leaderboard },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Leaderboard v-bind="args">
+        <template #footer>
+          <div class="mt-4 pt-3 border-t text-center text-xs text-muted-foreground">
+            Updated every 30 seconds
+          </div>
+        </template>
+      </Leaderboard>
+    `,
+  }),
+}
+
+export const MaxFiveEntries: Story = {
+  name: 'Max 5 Entries',
+  args: {
+    maxEntries: 5,
+    showPlaceholders: true,
+  },
+}

package/src/components/domain/leaderboard/Leaderboard.test.ts

@@ -0,0 +1,320 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Leaderboard from './Leaderboard.vue'
+import type { LeaderboardEntry } from './Leaderboard.vue'
+
+const sampleEntries: LeaderboardEntry[] = [
+  { rank: 1, name: 'Alice', points: 1500, member_id: 'a1' },
+  { rank: 2, name: 'Bob', points: 1200, member_id: 'a2' },
+  { rank: 3, name: 'Charlie', points: 900, member_id: 'a3' },
+  { rank: 4, name: 'Diana', points: 750, member_id: 'a4' },
+  { rank: 5, name: 'Eve', points: 500, member_id: 'a5' },
+]
+
+describe('Leaderboard', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(Leaderboard)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders the default title', () => {
+    const wrapper = mount(Leaderboard)
+    expect(wrapper.find('h2').text()).toBe('Leaderboard')
+  })
+
+  it('renders a custom title', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { title: 'Top Players' },
+    })
+    expect(wrapper.find('h2').text()).toBe('Top Players')
+  })
+
+  it('renders description when provided', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { description: 'Weekly rankings' },
+    })
+    expect(wrapper.text()).toContain('Weekly rankings')
+  })
+
+  it('does not render description when not provided', () => {
+    const wrapper = mount(Leaderboard)
+    const desc = wrapper.find('p.text-sm.text-muted-foreground')
+    expect(desc.exists()).toBe(false)
+  })
+
+  it('renders leaderboard entries with rank, name, and points', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: sampleEntries, showPlaceholders: false },
+    })
+    expect(wrapper.text()).toContain('Alice')
+    expect(wrapper.text()).toContain('Bob')
+    expect(wrapper.text()).toContain('Charlie')
+  })
+
+  it('displays formatted points with locale formatting', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 12345, member_id: 'a1' },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: false },
+    })
+    // Intl.NumberFormat formats 12345 with thousands separator
+    const formatted = new Intl.NumberFormat().format(12345)
+    expect(wrapper.text()).toContain(formatted)
+  })
+
+  it('shows placeholders when showPlaceholders is true and entries are fewer than maxEntries', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1' },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: true, maxEntries: 5 },
+    })
+    const allEntries = wrapper.findAll('.leaderboard-entry')
+    expect(allEntries.length).toBe(5)
+    // Placeholders show '---' as name
+    expect(wrapper.text()).toContain('---')
+  })
+
+  it('does not show placeholders when showPlaceholders is false', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1' },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: false, maxEntries: 5 },
+    })
+    const allEntries = wrapper.findAll('.leaderboard-entry')
+    expect(allEntries.length).toBe(1)
+  })
+
+  it('limits entries to maxEntries', () => {
+    const entries: LeaderboardEntry[] = Array.from({ length: 20 }, (_, i) => ({
+      rank: i + 1,
+      name: `Player ${i + 1}`,
+      points: 100 - i,
+      member_id: `p${i}`,
+    }))
+    const wrapper = mount(Leaderboard, {
+      props: { entries, maxEntries: 5, showPlaceholders: false },
+    })
+    const allEntries = wrapper.findAll('.leaderboard-entry')
+    expect(allEntries.length).toBe(5)
+  })
+
+  it('filters out entries with 0 or negative points', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1' },
+      { rank: 2, name: 'Bob', points: 0, member_id: 'a2' },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: false },
+    })
+    expect(wrapper.text()).toContain('Alice')
+    expect(wrapper.text()).not.toContain('Bob')
+  })
+
+  it('shows loading state when loading is true and entries are empty', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { loading: true, entries: [] },
+    })
+    expect(wrapper.text()).toContain('Loading scores...')
+    expect(wrapper.find('.animate-spin').exists()).toBe(true)
+  })
+
+  it('does not show loading state when entries exist even if loading is true', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1' },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { loading: true, entries },
+    })
+    expect(wrapper.text()).not.toContain('Loading scores...')
+    expect(wrapper.text()).toContain('Alice')
+  })
+
+  it('shows error state when error is provided', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { error: 'Failed to load data' },
+    })
+    expect(wrapper.text()).toContain('Failed to load data')
+  })
+
+  it('shows lock text banner when lockText is provided', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { lockText: 'Competition locked until 5 PM' },
+    })
+    expect(wrapper.text()).toContain('Competition locked until 5 PM')
+  })
+
+  it('does not show lock text banner when lockText is not provided', () => {
+    const wrapper = mount(Leaderboard)
+    const lockBanner = wrapper.find('.border-amber-400\\/40')
+    expect(lockBanner.exists()).toBe(false)
+  })
+
+  // Top 3 styling tests
+  it('applies square-style class for top 3 when topThreeStyle is square', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: sampleEntries, topThreeStyle: 'square', showPlaceholders: false },
+    })
+    const rankBadges = wrapper.findAll('.rank-badge')
+    expect(rankBadges[0].classes()).toContain('square-style')
+    expect(rankBadges[1].classes()).toContain('square-style')
+    expect(rankBadges[2].classes()).toContain('square-style')
+  })
+
+  it('applies circle-style class for top 3 when topThreeStyle is circle', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: sampleEntries, topThreeStyle: 'circle', showPlaceholders: false },
+    })
+    const rankBadges = wrapper.findAll('.rank-badge')
+    expect(rankBadges[0].classes()).toContain('circle-style')
+    expect(rankBadges[1].classes()).toContain('circle-style')
+    expect(rankBadges[2].classes()).toContain('circle-style')
+  })
+
+  it('applies number-only class for top 3 when topThreeStyle is number_only', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: sampleEntries, topThreeStyle: 'number_only', showPlaceholders: false },
+    })
+    const rankBadges = wrapper.findAll('.rank-badge')
+    expect(rankBadges[0].classes()).toContain('number-only')
+  })
+
+  it('applies award-badge class and renders AwardIcon for top 3 when topThreeStyle is badge', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: sampleEntries, topThreeStyle: 'badge', showPlaceholders: false },
+    })
+    const rankBadges = wrapper.findAll('.rank-badge')
+    expect(rankBadges[0].classes()).toContain('award-badge')
+    // badge style renders an SVG (AwardIcon) for top 3
+    expect(rankBadges[0].find('svg').exists()).toBe(true)
+    // and the rank number with award-rank-number class
+    expect(rankBadges[0].find('.award-rank-number').text()).toBe('1')
+  })
+
+  it('does not apply top 3 styling to rank 4+', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: sampleEntries, topThreeStyle: 'circle', showPlaceholders: false },
+    })
+    const rankBadges = wrapper.findAll('.rank-badge')
+    // rank 4 should have rank-other, not circle-style
+    expect(rankBadges[3].classes()).toContain('rank-other')
+    expect(rankBadges[3].classes()).not.toContain('circle-style')
+  })
+
+  it('shows subtitle when entry has subtitle', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1', subtitle: 'Team Alpha' },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: false },
+    })
+    expect(wrapper.text()).toContain('Team Alpha')
+  })
+
+  it('shows all-time rank when showAllTimeRank is true and entry has all_time_rank', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1', all_time_rank: 5 },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showAllTimeRank: true, showPlaceholders: false },
+    })
+    expect(wrapper.text()).toContain('All-time: #5')
+  })
+
+  it('does not show all-time rank when showAllTimeRank is false', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1', all_time_rank: 5 },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showAllTimeRank: false, showPlaceholders: false },
+    })
+    expect(wrapper.text()).not.toContain('All-time: #5')
+  })
+
+  it('applies highlight class on new entries', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1', isNewEntry: true },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: false },
+    })
+    const entry = wrapper.find('.leaderboard-entry')
+    expect(entry.classes()).toContain('highlight')
+  })
+
+  it('applies highlight class on updated entries', () => {
+    const entries: LeaderboardEntry[] = [
+      { rank: 1, name: 'Alice', points: 100, member_id: 'a1', isPointsUpdated: true },
+    ]
+    const wrapper = mount(Leaderboard, {
+      props: { entries, showPlaceholders: false },
+    })
+    const entry = wrapper.find('.leaderboard-entry')
+    expect(entry.classes()).toContain('highlight')
+  })
+
+  it('applies opacity-50 to placeholder entries', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: [], showPlaceholders: true, maxEntries: 3 },
+    })
+    const entries = wrapper.findAll('.leaderboard-entry')
+    entries.forEach((entry) => {
+      expect(entry.classes()).toContain('opacity-50')
+    })
+  })
+
+  it('renders header slot content', () => {
+    const wrapper = mount(Leaderboard, {
+      slots: {
+        header: '<div class="custom-header">Custom Header</div>',
+      },
+    })
+    expect(wrapper.find('.custom-header').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Custom Header')
+    // Default header should not render when slot is used
+    expect(wrapper.find('h2').exists()).toBe(false)
+  })
+
+  it('renders footer slot content', () => {
+    const wrapper = mount(Leaderboard, {
+      slots: {
+        footer: '<div class="custom-footer">Custom Footer</div>',
+      },
+    })
+    expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Custom Footer')
+  })
+
+  it('applies custom class via class prop', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { class: 'my-custom-class' },
+    })
+    expect(wrapper.find('.my-custom-class').exists()).toBe(true)
+  })
+
+  it('sets CSS custom properties for place colors', () => {
+    const wrapper = mount(Leaderboard, {
+      props: {
+        firstPlaceColor: '#FF0000',
+        secondPlaceColor: '#00FF00',
+        thirdPlaceColor: '#0000FF',
+      },
+    })
+    const rootEl = wrapper.find('[style]')
+    const style = rootEl.attributes('style')
+    expect(style).toContain('--first-place-color: #FF0000')
+    expect(style).toContain('--second-place-color: #00FF00')
+    expect(style).toContain('--third-place-color: #0000FF')
+  })
+
+  it('shows dash for placeholder points instead of formatted number', () => {
+    const wrapper = mount(Leaderboard, {
+      props: { entries: [], showPlaceholders: true, maxEntries: 1 },
+    })
+    const entry = wrapper.find('.leaderboard-entry')
+    const pointsEl = entry.find('.text-right span')
+    expect(pointsEl.text()).toBe('-')
+  })
+})