KPI Cards Premium

<!-- Filter publishes to FilterBus -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
</div>

<!-- Total KPI - Always shows (no filter-value) -->
<div data-rsl-kpi
     data-filter-subscribe="region"
     data-label="Total Revenue"
     data-value="$500,000">
</div>

<!-- North KPI - Only shows when region="North" -->
<div data-rsl-kpi
     data-filter-subscribe="region"
     data-filter-value="North"
     data-label="North Region"
     data-value="$200,000">
</div>

<!-- South KPI - Only shows when region="South" -->
<div data-rsl-kpi
     data-filter-subscribe="region"
     data-filter-value="South"
     data-label="South Region"
     data-value="$150,000">
</div>

<!-- Date Picker publishes to FilterBus -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-filterbus-publish="dateFilter">

<!-- Container with date field attribute -->
<div class="slot-layout" data-filterbus-date-field="date">

    <!-- KPI cards with date attributes -->
    <div data-rsl-kpi
         data-date="2025-12-01"
         data-label="Q4 Revenue"
         data-value="$340,800">
    </div>

    <div data-rsl-kpi
         data-date="2025-12-15"
         data-label="Holiday Sales"
         data-value="$125,000">
    </div>

    <div data-rsl-kpi
         data-date="2025-12-28"
         data-label="Year End"
         data-value="$89,600">
    </div>

</div>

// Update a KPI card dynamically
const card = document.querySelector('.rsl-kpi-card');

RSL.KPICards.update(card, {
    value: '$156,200',
    trendValue: '+25.5%',
    trend: 'up'
});

// Toggle loading state
RSL.KPICards.setLoading(card, true);
// ... fetch new data ...
RSL.KPICards.setLoading(card, false);