@classic-homes/theme-svelte 1.39.0 → 1.40.0

package/dist/lib/components/FilterToolbar.svelte

@@ -6,6 +6,8 @@
   import FilterPanel from './FilterPanel.svelte';
   import Icon from './Icon.svelte';
   import Toolbar from './Toolbar.svelte';
+  import ToolbarCount from './ToolbarCount.svelte';
+  import type { ToolbarCountProps } from '../utils/result-count.js';
 
   /**
    * FilterToolbar - a Toolbar that folds its filter controls behind a
@@ -33,7 +35,9 @@
     filterCount: number;
     /** Filters currently narrowing results (button badge) */
     activeCount?: number;
-    /** Result count / summary text, after the filters or the button */
+    /** Result count, after the filters or the button (see `ToolbarCount`) */
+    count?: ToolbarCountProps;
+    /** Other summary text after the count (inherits the strip color; `text-toolbar-muted` to dim) */
     summary?: Snippet;
     /** Right-aligned cluster (view toggles etc.) */
     end?: Snippet;
@@ -54,6 +58,7 @@
     filters,
     filterCount,
     activeCount = 0,
+    count,
     summary,
     end: endSnippet,
     onClear,
@@ -99,6 +104,7 @@
     {:else}
       {@render filters({ inline: true })}
     {/if}
+    {#if count}<ToolbarCount {...count} />{/if}
     {@render summary?.()}
   </Toolbar>
 

package/dist/lib/components/FilterToolbar.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ToolbarCountProps } from '../utils/result-count.js';
 /**
  * FilterToolbar - a Toolbar that folds its filter controls behind a
  * "Filters" button once there are too many to sit inline.
@@ -27,7 +28,9 @@ interface Props {
     filterCount: number;
     /** Filters currently narrowing results (button badge) */
     activeCount?: number;
-    /** Result count / summary text, after the filters or the button */
+    /** Result count, after the filters or the button (see `ToolbarCount`) */
+    count?: ToolbarCountProps;
+    /** Other summary text after the count (inherits the strip color; `text-toolbar-muted` to dim) */
     summary?: Snippet;
     /** Right-aligned cluster (view toggles etc.) */
     end?: Snippet;

package/dist/lib/components/Label.svelte

@@ -23,7 +23,7 @@
 <LabelPrimitive.Root
   for={htmlFor}
   class={cn(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground',
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[hsl(var(--label-foreground,var(--foreground)))]',
     disabled && 'opacity-50 cursor-not-allowed',
     className
   )}

package/dist/lib/components/Toolbar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
+  import type { ToolbarCountProps } from '../utils/result-count.js';
+  import ToolbarCount from './ToolbarCount.svelte';
 
   /**
    * Toolbar - dark strip for list controls (search, filters, result count,
@@ -17,25 +19,28 @@
     label: string;
     /** Leading controls (search, filters, result count) */
     children?: Snippet;
-    /** Right-aligned cluster (e.g. SegmentedControl + ViewToggle) */
+    /** Result count after the leading controls, e.g. `{ total, noun: 'home', page }` */
+    count?: ToolbarCountProps;
+    /** Right-aligned cluster: scope pickers (All/Mine), SegmentedControl, ViewToggle */
     end?: Snippet;
     class?: string;
     [key: string]: unknown;
   }
 
-  let { label, children, end, class: className, ...restProps }: Props = $props();
+  let { label, children, count, end, class: className, ...restProps }: Props = $props();
 </script>
 
 <div
   role="group"
   aria-label={label}
   class={cn(
-    'flex flex-wrap items-center gap-2 rounded-lg bg-toolbar px-3 py-2 text-toolbar-foreground [--secondary-border:var(--toolbar-border)]',
+    'flex flex-wrap items-center gap-2 rounded-lg bg-toolbar px-3 py-2 text-toolbar-foreground [--label-foreground:var(--toolbar-foreground)] [--secondary-border:var(--toolbar-border)]',
     className
   )}
   {...restProps}
 >
   {@render children?.()}
+  {#if count}<ToolbarCount {...count} />{/if}
   {#if end}
     <div class="ml-auto flex flex-wrap items-center gap-2">{@render end()}</div>
   {/if}

package/dist/lib/components/Toolbar.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ToolbarCountProps } from '../utils/result-count.js';
 /**
  * Toolbar - dark strip for list controls (search, filters, result count,
  * grouping and view toggles) under a page header.
@@ -14,7 +15,9 @@ interface Props {
     label: string;
     /** Leading controls (search, filters, result count) */
     children?: Snippet;
-    /** Right-aligned cluster (e.g. SegmentedControl + ViewToggle) */
+    /** Result count after the leading controls, e.g. `{ total, noun: 'home', page }` */
+    count?: ToolbarCountProps;
+    /** Right-aligned cluster: scope pickers (All/Mine), SegmentedControl, ViewToggle */
     end?: Snippet;
     class?: string;
     [key: string]: unknown;

package/dist/lib/components/ToolbarCount.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { resultCountText, type ToolbarCountProps } from '../utils/result-count.js';
+
+  /**
+   * ToolbarCount - the result count on a Toolbar / FilterToolbar strip, in the
+   * one wording `resultCountText` defines ("Showing 1–50 of 7,289 homes",
+   * "12 of 40 homes", "40 homes", "No homes found"). Inherits the strip's
+   * light text and announces changes politely. Renders nothing while `total`
+   * is undefined (first load). Usually passed as the strip's `count` prop.
+   */
+  let { note, ...input }: ToolbarCountProps = $props();
+
+  const text = $derived(resultCountText(input));
+</script>
+
+{#if text}
+  <span class="whitespace-nowrap text-sm tabular-nums" role="status">
+    {text}{note && input.total ? ` · ${note}` : ''}
+  </span>
+{/if}

package/dist/lib/components/ToolbarCount.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ToolbarCountProps } from '../utils/result-count.js';
+declare const ToolbarCount: import("svelte").Component<ToolbarCountProps, {}, "">;
+type ToolbarCount = ReturnType<typeof ToolbarCount>;
+export default ToolbarCount;

package/dist/lib/components/ToolbarSearch.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Input from './Input.svelte';
+
+  /**
+   * ToolbarSearch - the search field for a Toolbar / FilterToolbar strip:
+   * full width on phones, a fixed `sm:w-64` beside the filters, and an
+   * accessible name (strips have no visible labels). End `placeholder` with
+   * "…", e.g. "Search homes…".
+   */
+  interface Props {
+    /** Accessible name, e.g. "Search homes" */
+    label: string;
+    value?: string;
+    placeholder?: string;
+    id?: string;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    label,
+    value = $bindable(''),
+    placeholder,
+    id,
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Input
+  {id}
+  type="search"
+  aria-label={label}
+  placeholder={placeholder ?? `${label}…`}
+  class={cn('w-full sm:w-64', className)}
+  bind:value
+  {...restProps}
+/>

package/dist/lib/components/ToolbarSearch.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ToolbarSearch - the search field for a Toolbar / FilterToolbar strip:
+ * full width on phones, a fixed `sm:w-64` beside the filters, and an
+ * accessible name (strips have no visible labels). End `placeholder` with
+ * "…", e.g. "Search homes…".
+ */
+interface Props {
+    /** Accessible name, e.g. "Search homes" */
+    label: string;
+    value?: string;
+    placeholder?: string;
+    id?: string;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const ToolbarSearch: import("svelte").Component<Props, {}, "value">;
+type ToolbarSearch = ReturnType<typeof ToolbarSearch>;
+export default ToolbarSearch;

package/dist/lib/index.d.ts

@@ -71,6 +71,9 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as TabPanel } from './components/TabPanel.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as FilterToolbar } from './components/FilterToolbar.svelte';
+export { default as ToolbarCount } from './components/ToolbarCount.svelte';
+export { default as ToolbarSearch } from './components/ToolbarSearch.svelte';
+export { resultCountText, type ResultCountInput, type ToolbarCountProps, } from './utils/result-count.js';
 export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as ActiveFilterChips, type ActiveFilterChip, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, type SegmentedControlOption, } from './components/SegmentedControl.svelte';

package/dist/lib/index.js

@@ -85,6 +85,9 @@ export { default as TabPanel } from './components/TabPanel.svelte';
 // Toolbar controls
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as FilterToolbar } from './components/FilterToolbar.svelte';
+export { default as ToolbarCount } from './components/ToolbarCount.svelte';
+export { default as ToolbarSearch } from './components/ToolbarSearch.svelte';
+export { resultCountText, } from './utils/result-count.js';
 export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as ActiveFilterChips, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, } from './components/SegmentedControl.svelte';

package/dist/lib/utils/result-count.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The one result-count wording for list toolbars (`ToolbarCount`, and the
+ * `count` prop on `Toolbar` / `FilterToolbar`):
+ *
+ * - server-paged, more than one page: "Showing 1–50 of 7,289 homes"
+ * - locally filtered (`of` = unfiltered size): "12 of 40 homes"
+ * - otherwise: "40 homes" / "1 home"
+ * - nothing matches: `empty` (default "No homes found")
+ *
+ * Returns '' while the first load is pending (`total` undefined), so the strip
+ * never flashes "No homes found" before the data lands.
+ */
+export interface ResultCountInput {
+    /** Rows matching the current search/filters (server total or filtered length); undefined while loading. */
+    total: number | undefined | null;
+    /** Singular noun, e.g. "home". */
+    noun: string;
+    /** Plural noun when it isn't `${noun}s`, e.g. "entries". */
+    plural?: string;
+    /** Server paging: renders the "Showing a–b of N" range when total spans pages. */
+    page?: {
+        page: number;
+        limit: number;
+    };
+    /** Unfiltered size for locally filtered lists: "12 of 40 homes". */
+    of?: number;
+    /** Zero-match text (default "No <plural> found"). */
+    empty?: string;
+}
+/** `ResultCountInput` plus a trailing remark after " · " (falsy hides it). */
+export interface ToolbarCountProps extends ResultCountInput {
+    note?: string | false | null;
+}
+export declare function resultCountText({ total, noun, plural, page, of, empty, }: ResultCountInput): string;

package/dist/lib/utils/result-count.js

@@ -0,0 +1,15 @@
+const fmt = (n) => n.toLocaleString('en-US');
+export function resultCountText({ total, noun, plural = `${noun}s`, page, of, empty, }) {
+    if (total == null)
+        return '';
+    if (total === 0)
+        return empty ?? `No ${plural} found`;
+    if (page && total > page.limit) {
+        const start = (page.page - 1) * page.limit + 1;
+        const end = Math.min(page.page * page.limit, total);
+        return `Showing ${fmt(start)}–${fmt(end)} of ${fmt(total)} ${plural}`;
+    }
+    if (of !== undefined && of !== total)
+        return `${fmt(total)} of ${fmt(of)} ${plural}`;
+    return `${fmt(total)} ${total === 1 ? noun : plural}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",