sprintify-ui 0.12.13 → 0.12.15

package/dist/types/components/BaseDataIterator.vue.d.ts

@@ -118,6 +118,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vu
         filter?: Record<string, any> | undefined;
     } & Record<string, any>>;
     data: import("vue").ComputedRef<ResourceCollection | Collection | PaginatedCollection | null | undefined>;
+    activeFilterCount: import("vue").ComputedRef<number>;
+    hasActiveFilters: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     delete: (...args: any[]) => void;
@@ -255,42 +257,30 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vu
     perPage: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     [x: string]: ((props: {
-        query: {
-            [x: string]: any;
-            page?: number | undefined;
-            sort?: string | undefined;
-            search?: string | undefined;
-            filter?: Record<string, any> | undefined;
-        };
+        query: DataTableQuery;
         updateQuery: (newQuery: DataTableQuery) => void;
         updateQueryValue: (key: string | DataTableQuery, value?: any) => void;
         updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
+        activeFilterCount: number;
+        hasActiveFilters: boolean;
     }) => any) | undefined;
 } & {
     [x: string]: ((props: {
-        query: {
-            [x: string]: any;
-            page?: number | undefined;
-            sort?: string | undefined;
-            search?: string | undefined;
-            filter?: Record<string, any> | undefined;
-        };
+        query: DataTableQuery;
         updateQuery: (newQuery: DataTableQuery) => void;
         updateQueryValue: (key: string | DataTableQuery, value?: any) => void;
         updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
+        activeFilterCount: number;
+        hasActiveFilters: boolean;
     }) => any) | undefined;
 } & {
     [x: string]: ((props: {
-        query: {
-            [x: string]: any;
-            page?: number | undefined;
-            sort?: string | undefined;
-            search?: string | undefined;
-            filter?: Record<string, any> | undefined;
-        };
+        query: DataTableQuery;
         updateQuery: (newQuery: DataTableQuery) => void;
         updateQueryValue: (key: string | DataTableQuery, value?: any) => void;
         updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
+        activeFilterCount: number;
+        hasActiveFilters: boolean;
     }) => any) | undefined;
 } & {
     default?: (props: {

package/dist/types/components/BaseDataIteratorSectionBox.vue.d.ts

@@ -2,9 +2,9 @@ import { DataIteratorSection } from '@/types';
 type __VLS_Props = {
     section: DataIteratorSection;
 };
-declare var __VLS_10: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/types/components/BaseDataTable.vue.d.ts

@@ -25,13 +25,7 @@ declare var __VLS_28: {
     row: import("@/types").Row;
     index: number;
 }, __VLS_44: any, __VLS_50: {}, __VLS_55: {
-    query: {
-        [x: string]: any;
-        page?: number | undefined;
-        sort?: string | undefined;
-        search?: string | undefined;
-        filter?: Record<string, any> | undefined;
-    };
+    query: DataTableQuery;
     updateQuery: (newQuery: DataTableQuery) => void;
     updateQueryValue: (key: string | DataTableQuery, value?: any) => void;
     updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;

package/dist/types/composables/sectionCount.d.ts

@@ -0,0 +1,11 @@
+import { DataIteratorSection } from '@/types';
+/**
+ * Shared active-filter badge state for the data-iterator section chrome (the
+ * box header and the compact funnel button). Each renders the count with its
+ * own markup, but the "is there a count to show?" test and the accessible
+ * plural label are identical — so they live here.
+ */
+export declare function useSectionCount(getSection: () => DataIteratorSection): {
+    hasCount: import("vue").ComputedRef<boolean>;
+    activeFiltersLabel: import("vue").ComputedRef<string>;
+};

package/dist/types/index.d.ts

@@ -101,6 +101,7 @@ declare const messages: {
             up_to_x: string;
             upload_failed: string;
             whoops: string;
+            x_active_filters: string;
             x_ago: string;
             x_rows_selected: string;
             year: string;
@@ -207,6 +208,7 @@ declare const messages: {
             up_to_x: string;
             upload_failed: string;
             whoops: string;
+            x_active_filters: string;
             x_ago: string;
             x_rows_selected: string;
             year: string;

package/dist/types/utils/index.d.ts

@@ -6,4 +6,5 @@ import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
 import { getInitials, getAvatarColor } from './avatar';
-export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, resizeImageForUpload, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };
+import { isEmpty } from './isEmpty';
+export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, resizeImageForUpload, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, isEmpty, };

package/dist/types/utils/isEmpty.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Deep emptiness predicate — the default "is this filter active?" rule.
+ *
+ * A value counts as *empty* (i.e. not an active filter) when it carries no
+ * user intent. This is deliberately NOT lodash's `isEmpty`: here `0` and
+ * `false` are meaningful, exposed choices and therefore count as active.
+ *
+ * Reference table (WIT-159):
+ *
+ * | Value                              | Empty (does not count) |
+ * |------------------------------------|------------------------|
+ * | `undefined`, `null`                | yes                    |
+ * | `''`, `'   '` (trimmed)            | yes                    |
+ * | `[]`, `[null]`, `['']` (deep)      | yes                    |
+ * | `{}`, `{from:null,to:null}` (deep) | yes                    |
+ * | `0`                                | **no → counts**        |
+ * | `false`                            | **no → counts**        |
+ * | `'jedi'`, `5`, `['a']`, `Date`     | no → counts            |
+ *
+ * Arrays and plain objects are inspected recursively: a container is empty
+ * only when every leaf it holds is itself empty. This keeps a grouped filter
+ * (`{ from, to }`) counting as a single active filter when any leaf is set.
+ */
+export declare function isEmpty(value: unknown): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.13",
+  "version": "0.12.15",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseDataIterator.mdx

@@ -0,0 +1,152 @@
+import { Canvas, Meta, Primary, Controls } from '@storybook/addon-docs/blocks';
+
+import * as BaseDataIteratorStories from './BaseDataIterator.stories';
+
+<Meta of={BaseDataIteratorStories} />
+
+# BaseDataIterator
+
+## Introduction
+
+`BaseDataIterator` fetches, filters, sorts and paginates a collection, and
+renders it through slots. Filtering is driven entirely by the consumer: you
+provide the filter controls in the `filters` slot and write into `query.filter`
+through the slot's `updateQueryValue` helper.
+
+<Primary />
+
+## Active filter counter
+
+The component counts how many filters are currently active and surfaces that
+count as a badge in each of the three filter positions. **This is automatic —
+no configuration and no new props.** If you never touch filters, nothing about
+your existing usage changes.
+
+### How a filter is counted
+
+When the `filters` slot renders, every field it reads from `query.filter.*` is
+**discovered by that read**. A discovered field counts as an *active* filter
+when its value is **not empty**, according to a deep `isEmpty` predicate. The
+count is a pure function of `discovered keys × current values`.
+
+- **Scope.** Only `query.filter.*` participates. `search`, `sort` and `page`
+  are never counted.
+- **Grouped filters count as one.** A grouped filter such as
+  `query.filter.range = { from, to }` is discovered as the single key `range`,
+  so it contributes **1** to the count, not one per leaf.
+- **Route-hardcoded filters are never counted.** A filter that is fixed in the
+  route (e.g. via `urlQuery`) and never rendered as a control in the `filters`
+  slot is never read, therefore never discovered, therefore never counted — no
+  config needed to exclude it.
+
+### What "empty" means
+
+`isEmpty` is deliberately **not** lodash's `isEmpty`: here `0` and `false` are
+real, user-made choices and therefore **count** as active filters.
+
+| Value                                   | Empty? (counts as active?) |
+| --------------------------------------- | -------------------------- |
+| `undefined`, `null`                     | empty — does not count     |
+| `''`, `'   '` (trimmed)                 | empty — does not count     |
+| `[]`, `[null]`, `['']` (deep)           | empty — does not count     |
+| `{}`, `{ from: null, to: null }` (deep) | empty — does not count     |
+| `0`                                     | **not empty — counts**     |
+| `false`                                 | **not empty — counts**     |
+| `'jedi'`, `5`, `['a']`, a `Date`        | not empty — counts         |
+
+`isEmpty` is also exported from the package if you want to reuse the exact same
+rule in your own code:
+
+```ts
+import { isEmpty } from 'sprintify-ui';
+```
+
+### The consumer contract: "not filtered = empty value"
+
+There is **no per-filter override API**. Because the count is derived purely
+from values, the way to make a field *not* count is to model "no filter" as an
+empty value **at the source**. Two common cases:
+
+**1. An "all" sentinel.** Don't store a magic string like `'all'` — it is a
+non-empty string, so it would count. Write `undefined` (or omit the key)
+instead.
+
+```ts
+// ❌ Before — 'all' is a non-empty string → counts as an active filter
+updateQueryValue('filter.status', 'all');
+
+// ✅ After — clearing the filter means removing the value
+updateQueryValue('filter.status', undefined);
+```
+
+```vue
+<!-- Model the "All" option as an empty value in the control itself -->
+<BaseSelect
+  :model-value="query.filter.status ?? null"
+  placeholder="All"
+  @update:model-value="updateQueryValue('filter.status', $event)"
+>
+  <option value="open">Open</option>
+  <option value="closed">Closed</option>
+</BaseSelect>
+```
+
+**2. A checkbox you don't want counted when off.** Remember `false` counts.
+Store `undefined` when the box is unchecked rather than `false`.
+
+```ts
+// ❌ Before — `false` is a real choice ("exclude archived") → it counts
+updateQueryValue('filter.archived', event.target.checked); // false when off
+
+// ✅ After — "off" means "no filter" → store undefined when unchecked
+updateQueryValue('filter.archived', event.target.checked ? true : undefined);
+```
+
+Keep `false`/`0` **only** when the off/zero state is a genuine filter the user
+should see reflected in the count.
+
+### Reading the count
+
+The count is exposed on three channels — pick whichever fits:
+
+| Channel            | Shape                                                                     | Use it for                                              |
+| ------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------- |
+| Slot scope         | `#filters="{ activeFilterCount, hasActiveFilters }"`                       | Rendering your own badge next to the filter controls    |
+| `defineExpose`     | `iteratorRef.value.activeFilterCount` / `.hasActiveFilters`               | Reading the count programmatically from the parent      |
+| `provide` / `inject` | `inject('dataIterator:activeFilterCount')` / `':hasActiveFilters'`      | Deeply nested chrome that renders the built-in badge     |
+
+The built-in badge in the three filter positions already consumes this — you
+only need these channels for custom rendering.
+
+### Positions and visual treatment
+
+The badge is consistent across the three positions. **0 filters** → neutral
+control, no chip. **≥ 1 filter** → the control fills blue and a chip shows the
+exact count. There is intentionally no light-blue header background.
+
+Position 1 — `top` inline box header:
+
+<Canvas of={BaseDataIteratorStories.FilterCountTop} />
+
+Position 2 — `sidebar` box header (default layout):
+
+<Canvas of={BaseDataIteratorStories.FilterCountSidebar} />
+
+Position 3 — compact funnel button + drawer:
+
+<Canvas of={BaseDataIteratorStories.FilterCountCompact} />
+
+### Backward compatibility
+
+- **No new prop, no forced migration.** Discovery is fully transparent; existing
+  `query.filter.x` reads and `updateQueryValue('filter.x', …)` writes behave
+  exactly as before.
+- **Non-`filter` query roots are untouched.** They pass through the slot as
+  before — readable and writable — they are simply not counted.
+- **Nothing to opt into.** With no filters, or with filters modelled as above,
+  the counter stays at `0` and the controls render exactly as they did before
+  this feature existed.
+
+## Props
+
+<Controls />

package/src/components/BaseDataIterator.stories.js

@@ -290,3 +290,126 @@ Local.args = {
   actions: [],
   perPage: 4,
 };
+
+/*
+| Active filter counter (WIT-169) — demonstrated in the 3 filter positions.
+|
+| The counter is fully automatic: any field read from `query.filter.*` in the
+| filters slot is discovered and, when it carries a non-empty value (isEmpty —
+| note `0` counts as a real choice), adds to the count. Zero filters → neutral
+| control, no chip. One or more → filled-blue control + exact-count chip.
+*/
+
+const FilterCountTemplate = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+    BaseSelect,
+  },
+  setup() {
+    const iteratorRef = ref(null);
+
+    const filteredItems = computed(() => {
+      const filter = iteratorRef.value?.query?.filter ?? {};
+
+      return options.filter((item) => {
+        if (filter.type && item.type !== filter.type) {
+          return false;
+        }
+        if (filter.min_size != null && item.size < Number(filter.min_size)) {
+          return false;
+        }
+        return true;
+      });
+    });
+
+    return { args, filteredItems, iteratorRef };
+  },
+  template: `
+  <BaseDataIterator ref="iteratorRef" v-bind="args" :items="filteredItems">
+    <template #default="{ items }">
+      <div class="space-y-1.5">
+        <BaseCard v-for="item in items" :key="item.value">
+          <BaseCardRow size="xs">
+            <div class="font-medium text-slate-900">{{ item.label }}</div>
+            <p class="text-xs leading-tight text-slate-500">{{ item.type }} · size {{ item.size }}</p>
+          </BaseCardRow>
+        </BaseCard>
+      </div>
+    </template>
+
+    <template #filters="{ query, updateQueryValue, activeFilterCount, hasActiveFilters }">
+      <div class="space-y-3">
+        <p class="rounded bg-slate-100 px-2 py-1 text-xs text-slate-500">
+          activeFilterCount = <b>{{ activeFilterCount }}</b> · hasActiveFilters = <b>{{ hasActiveFilters }}</b>
+        </p>
+        <div>
+          <p class="mb-1 text-sm">Type</p>
+          <BaseSelect
+            :model-value="query.filter.type ?? null"
+            class="w-full rounded border-slate-300"
+            placeholder="-"
+            @update:model-value="updateQueryValue('filter.type', $event)"
+          >
+            <option value="jedi">Jedi</option>
+            <option value="sith">Sith</option>
+          </BaseSelect>
+        </div>
+        <div>
+          <p class="mb-1 text-sm">Minimum size</p>
+          <BaseSelect
+            :model-value="query.filter.min_size ?? null"
+            class="w-full rounded border-slate-300"
+            placeholder="-"
+            @update:model-value="updateQueryValue('filter.min_size', $event)"
+          >
+            <option value="0">0 (counts — 0 is a real choice)</option>
+            <option value="5">5</option>
+            <option value="20">20</option>
+          </BaseSelect>
+        </div>
+      </div>
+    </template>
+  </BaseDataIterator>
+  `,
+});
+
+// Position 1 — "top" inline box header.
+export const FilterCountTop = FilterCountTemplate.bind({});
+FilterCountTop.args = {
+  url: null,
+  actions: [],
+  searchable: false,
+  perPage: 5,
+  filtersPosition: 'top',
+};
+
+// Position 2 — "sidebar" box header (default layout).
+// The sidebar only renders above 1024px (below that the layout auto-collapses
+// to the compact funnel button), so force a wide container to demonstrate it
+// reliably even inside a narrow docs <Canvas>.
+export const FilterCountSidebar = FilterCountTemplate.bind({});
+FilterCountSidebar.args = {
+  url: null,
+  actions: [],
+  searchable: false,
+  perPage: 5,
+  filtersPosition: 'section',
+  layout: 'default',
+};
+FilterCountSidebar.decorators = [
+  () => ({ template: '<div style="width: 1080px; max-width: none"><story/></div>' }),
+];
+
+// Position 3 — compact funnel button + drawer.
+export const FilterCountCompact = FilterCountTemplate.bind({});
+FilterCountCompact.args = {
+  url: null,
+  actions: [],
+  searchable: false,
+  perPage: 5,
+  filtersPosition: 'section',
+  layout: 'compact',
+};

package/src/components/BaseDataIterator.vue

@@ -77,10 +77,12 @@
           <BaseDataIteratorSectionBox :section="sectionFilter">
             <slot
               :name="sectionFilter.name"
-              :query="query"
+              :query="filterQuery"
               :update-query="updateFilterQuery"
               :update-query-value="updateFilterQueryValue"
               :update-query-value-debounce="updateFilterQueryValueDebounce"
+              :active-filter-count="activeFilterCount"
+              :has-active-filters="hasActiveFilters"
             />
           </BaseDataIteratorSectionBox>
         </div>
@@ -145,10 +147,12 @@
           <BaseDataIteratorSectionBox :section="section">
             <slot
               :name="section.name"
-              :query="query"
+              :query="filterQuery"
               :update-query="updateFilterQuery"
               :update-query-value="updateFilterQueryValue"
               :update-query-value-debounce="updateFilterQueryValueDebounce"
+              :active-filter-count="activeFilterCount"
+              :has-active-filters="hasActiveFilters"
             />
           </BaseDataIteratorSectionBox>
         </template>
@@ -171,10 +175,12 @@
       >
         <slot
           :name="section.name"
-          :query="query"
+          :query="filterQuery"
           :update-query="updateFilterQuery"
           :update-query-value="updateFilterQueryValue"
           :update-query-value-debounce="updateFilterQueryValueDebounce"
+          :active-filter-count="activeFilterCount"
+          :has-active-filters="hasActiveFilters"
         />
       </BaseDataIteratorSectionModal>
     </template>
@@ -189,6 +195,7 @@ import { Size } from '@/utils/sizes';
 import BaseInput from './BaseInput.vue';
 import { useInputSize } from '@/composables/inputSize';
 import { deepIncludes } from '@/utils/deepIncludes';
+import { isEmpty } from '@/utils/isEmpty';
 
 const DEFAULT_QUERY = {
   page: 1,
@@ -523,6 +530,90 @@ function queryHash(query: DataTableQuery): string {
   return hash(query);
 }
 
+/*
+|--------------------------------------------------------------------------
+| Active filter discovery + count
+|--------------------------------------------------------------------------
+|
+| "Active" = a filter field *discovered by being read through the slot* (via a
+| Proxy on query.filter) that carries a non-empty value (isEmpty, WIT-159). A
+| route-hardcoded filter is never rendered in the slot → never read → never
+| discovered → never counted, which is how modifiable filters are told apart
+| from non-modifiable ones without any config (WIT-159 / WIT-161).
+*/
+
+// Single internal source of truth for which query roots get wrapped for
+// discovery. Defaults to `filter` only; widening the scope (WIT-160) means
+// touching only this function.
+function getDiscoverableRoots(): string[] {
+  return ['filter'];
+}
+
+// Non-reactive registry filled by the get-trap during render. Mutating a plain
+// Set notifies no effect → no "mutation during render" warning, no loop.
+const discoveredKeys = new Set<string>();
+
+// Reactive snapshot of the discovered keys, promoted once per new key outside
+// of render. The count then reacts only to *values* over a stable key set.
+const modifiableKeys = ref<Set<string>>(new Set());
+
+let promotionScheduled = false;
+
+// Promote discoveredKeys → modifiableKeys on nextTick, deduplicated. Triggered
+// on every newly discovered key, so it self-heals: it covers the initial mount
+// and a control rendered late behind a v-if alike. A discovered key is never
+// removed — a filter whose control disappears but whose value persists keeps
+// counting.
+function schedulePromotion() {
+  if (promotionScheduled) {
+    return;
+  }
+  promotionScheduled = true;
+  nextTick(() => {
+    promotionScheduled = false;
+    modifiableKeys.value = new Set(discoveredKeys);
+  });
+}
+
+function createDiscoveryProxy(target: Record<string, any>): Record<string, any> {
+  return new Proxy(target, {
+    get(obj, key, receiver) {
+      if (typeof key === 'string' && !discoveredKeys.has(key)) {
+        discoveredKeys.add(key);
+        schedulePromotion();
+      }
+      // Reflect.get delegates to the reactive object → reactive tracking of the
+      // read is preserved for the consumer's own dependencies.
+      return Reflect.get(obj, key, receiver);
+    },
+  });
+}
+
+// Slot-facing query wrapper. Memoized in a computed keyed on `query`, so the
+// Proxy identity only churns when the query actually changes. Non-discoverable
+// roots are spread as-is → existing reads/writes stay identical, just uncounted.
+const filterQuery = computed<DataTableQuery>(() => {
+  const raw = query.value;
+
+  const wrapped: Record<string, any> = { ...raw };
+  for (const root of getDiscoverableRoots()) {
+    if (raw[root] && typeof raw[root] === 'object') {
+      wrapped[root] = createDiscoveryProxy(raw[root]);
+    }
+  }
+
+  return wrapped as DataTableQuery;
+});
+
+// Pure computeds reading the RAW reactive source (never through the Proxy, to
+// avoid circular re-discovery). Grouped filter = one discovered key = 1.
+const activeFilterCount = computed<number>(() => {
+  const filter = query.value.filter ?? {};
+  return [...modifiableKeys.value].filter((key) => !isEmpty(filter[key])).length;
+});
+
+const hasActiveFilters = computed<boolean>(() => activeFilterCount.value > 0);
+
 /*
 |--------------------------------------------------------------------------
 | Data fetching
@@ -926,13 +1017,14 @@ onMounted(() => {
 
 const sectionModalActive = ref<null | number>(null);
 
-const sectionFilter = computed(() => {
+const sectionFilter = computed<DataIteratorSection>(() => {
   return {
     name: 'filters',
     title: t('sui.filters'),
     closeText: t('sui.apply_filters'),
     icon: 'heroicons:funnel',
     opened: true,
+    count: activeFilterCount.value,
   };
 });
 
@@ -968,6 +1060,8 @@ function closeSection() {
 */
 
 provide('dataIterator:width', width);
+provide('dataIterator:activeFilterCount', activeFilterCount);
+provide('dataIterator:hasActiveFilters', hasActiveFilters);
 
 /*
 |--------------------------------------------------------------------------
@@ -982,5 +1076,7 @@ defineExpose({
   scrollIntoView: scrollIntoViewAction,
   query: computed(() => fullQuery.value),
   data: computed(() => dataInternal.value),
+  activeFilterCount,
+  hasActiveFilters,
 });
 </script>

package/src/components/BaseDataIteratorSectionBox.vue

@@ -5,9 +5,29 @@
       class="flex w-full items-center justify-between px-4 py-3"
       @click="active = !active"
     >
-      <h2 class="text-sm font-semibold">
-        {{ section.title }}
-      </h2>
+      <!--
+        Variant C — filled active state on the box header. Emphasis is the blue
+        title + solid blue count chip; deliberately NO light-blue header
+        background (bg-blue-50 was rejected in WIT-162).
+      -->
+      <div class="flex items-center">
+        <h2
+          class="text-sm font-semibold"
+          :class="hasCount ? 'text-blue-700' : ''"
+        >
+          {{ section.title }}
+        </h2>
+        <BaseBadge
+          v-if="hasCount"
+          class="ml-2"
+          color="blue"
+          contrast="high"
+          size="sm"
+        >
+          <span aria-hidden="true">{{ section.count }}</span>
+          <span class="sr-only">{{ activeFiltersLabel }}</span>
+        </BaseBadge>
+      </div>
 
       <BaseIcon
         class="h-5 w-5 text-slate-500 duration-300"
@@ -27,10 +47,14 @@
 <script lang="ts" setup>
 import { DataIteratorSection } from '@/types';
 import { BaseCard, BaseIcon } from '.';
+import BaseBadge from './BaseBadge.vue';
+import { useSectionCount } from '@/composables/sectionCount';
 
 const props = defineProps<{
   section: DataIteratorSection;
 }>();
 
 const active = ref<boolean>(props.section.opened ?? false);
+
+const { hasCount, activeFiltersLabel } = useSectionCount(() => props.section);
 </script>