@classic-homes/theme-svelte 1.13.2 → 1.15.0

package/dist/__tests__/a11y/FilterToolbar.a11y.test.js

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { axe } from 'vitest-axe';
+import { createRawSnippet } from 'svelte';
+import FilterToolbar from '../../lib/components/FilterToolbar.svelte';
+import ActiveFilterChips from '../../lib/components/ActiveFilterChips.svelte';
+const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
+/** Two labelled selects; labels are sr-only when inline. */
+const filters = createRawSnippet((args) => ({
+    render: () => {
+        const labelClass = args().inline ? ' class="sr-only"' : '';
+        return `<div>
+      <label for="f-status"${labelClass}>Status</label><select id="f-status"><option>Any</option></select>
+      <label for="f-type"${labelClass}>Type</label><select id="f-type"><option>Any</option></select>
+    </div>`;
+    },
+}));
+const search = snippet('<input type="search" aria-label="Search signs" />');
+describe('FilterToolbar', () => {
+    it('keeps filters inline at or under maxInline controls', () => {
+        render(FilterToolbar, {
+            props: { label: 'Sign tools', search, filters, filterCount: 2 },
+        });
+        expect(screen.queryByRole('button', { name: /Filters/ })).not.toBeInTheDocument();
+        expect(screen.getByLabelText('Status')).toBeInTheDocument();
+    });
+    it('folds filters behind a Filters button past maxInline', async () => {
+        const { container } = render(FilterToolbar, {
+            props: { label: 'Sign tools', search, filters, filterCount: 3, activeCount: 2 },
+        });
+        const button = screen.getByRole('button', { name: 'Filters, 2 active' });
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+        const panel = screen.getByRole('region', { hidden: true });
+        expect(button).toHaveAttribute('aria-controls', panel.id);
+        // Svelte sets `inert` as a property; jsdom doesn't reflect it to an attribute.
+        const content = panel.firstElementChild;
+        expect(content.inert).toBe(true);
+        await fireEvent.click(button);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+        expect(content.inert).toBe(false);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});
+describe('ActiveFilterChips', () => {
+    it('removes a single filter or all of them', async () => {
+        const onRemove = vi.fn();
+        const onClearAll = vi.fn();
+        const { container } = render(ActiveFilterChips, {
+            props: { chips: [{ key: 'status', label: 'Status: Installed', onRemove }], onClearAll },
+        });
+        expect(screen.getByRole('group', { name: 'Active filters' })).toBeInTheDocument();
+        await fireEvent.click(screen.getByRole('button', { name: 'Remove filter Status: Installed' }));
+        expect(onRemove).toHaveBeenCalledOnce();
+        await fireEvent.click(screen.getByRole('button', { name: 'Clear all' }));
+        expect(onClearAll).toHaveBeenCalledOnce();
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('renders nothing without chips', () => {
+        const { container } = render(ActiveFilterChips, { props: { chips: [] } });
+        expect(container.querySelector('[role="group"]')).toBeNull();
+    });
+});

package/dist/lib/components/ActionHeader.svelte

@@ -461,8 +461,8 @@
         'lead badges badges badges';
     }
 
-    /* h1 keeps the theme's 2.5rem display size; leading is a touch looser than
-       the global 2rem because the title clamps to two lines with overflow hidden */
+    /* h1 matches the theme's 2.5rem / 2.75rem heading scale; stated here too
+       because the title clamps to two lines with overflow hidden */
     [data-level='1'] .ah-grid {
       --ah-title-size: 2.5rem;
       --ah-title-leading: 2.75rem;

package/dist/lib/components/ActiveFilterChips.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  export interface ActiveFilterChip {
+    /** Stable key, e.g. "status" or "community:12" */
+    key: string;
+    /** Chip text, e.g. "Status: Installed" */
+    label: string;
+    /** Clears just this filter */
+    onRemove: () => void;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Button from './Button.svelte';
+  import Icon from './Icon.svelte';
+
+  /**
+   * ActiveFilterChips - one removable chip per filter narrowing the results,
+   * shown under a FilterToolbar so collapsed filters stay visible.
+   *
+   * Each chip clears only its own filter; "Clear all" resets everything.
+   * Renders nothing when there are no chips and no extra content.
+   */
+  interface Props {
+    chips: ActiveFilterChip[];
+    /** Resets every filter; shows a trailing "Clear all" when set */
+    onClearAll?: () => void;
+    /** Extra notes after the chips (e.g. filters that don't apply here) */
+    children?: Snippet;
+    class?: string;
+  }
+
+  let { chips, onClearAll, children, class: className }: Props = $props();
+</script>
+
+{#if chips.length > 0 || children}
+  <div
+    role="group"
+    aria-label="Active filters"
+    class={cn('flex flex-wrap items-center gap-2 text-sm', className)}
+  >
+    {#each chips as chip (chip.key)}
+      <button
+        type="button"
+        class="inline-flex min-h-11 max-w-full items-center gap-1 rounded-full border border-border bg-muted px-3 text-xs font-medium text-foreground hover:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:min-h-8"
+        aria-label={`Remove filter ${chip.label}`}
+        onclick={chip.onRemove}
+      >
+        <span class="truncate">{chip.label}</span>
+        <Icon name="close" size={12} class="shrink-0" />
+      </button>
+    {/each}
+    {@render children?.()}
+    {#if onClearAll && chips.length > 0}
+      <Button variant="ghost" size="sm" class="ml-auto min-h-11 sm:min-h-8" onclick={onClearAll}>
+        Clear all
+      </Button>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,27 @@
+export interface ActiveFilterChip {
+    /** Stable key, e.g. "status" or "community:12" */
+    key: string;
+    /** Chip text, e.g. "Status: Installed" */
+    label: string;
+    /** Clears just this filter */
+    onRemove: () => void;
+}
+import type { Snippet } from 'svelte';
+/**
+ * ActiveFilterChips - one removable chip per filter narrowing the results,
+ * shown under a FilterToolbar so collapsed filters stay visible.
+ *
+ * Each chip clears only its own filter; "Clear all" resets everything.
+ * Renders nothing when there are no chips and no extra content.
+ */
+interface Props {
+    chips: ActiveFilterChip[];
+    /** Resets every filter; shows a trailing "Clear all" when set */
+    onClearAll?: () => void;
+    /** Extra notes after the chips (e.g. filters that don't apply here) */
+    children?: Snippet;
+    class?: string;
+}
+declare const ActiveFilterChips: import("svelte").Component<Props, {}, "">;
+type ActiveFilterChips = ReturnType<typeof ActiveFilterChips>;
+export default ActiveFilterChips;

package/dist/lib/components/FilterPanel.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Button from './Button.svelte';
+
+  /**
+   * FilterPanel - collapsible block of filter controls under a Toolbar.
+   *
+   * Opens and closes with a grid-rows height transition (no measured heights).
+   * While closed the content is `inert`, so the hidden controls are neither
+   * tabbable nor exposed to screen readers. Controls are laid out on a
+   * responsive grid; "Clear all" follows them when any filter is active.
+   *
+   * Usually rendered by FilterToolbar; use it directly only for a custom strip.
+   */
+  interface Props {
+    /** Whether the panel is expanded */
+    open?: boolean;
+    /** id for the region, so the toggle button can point `aria-controls` at it */
+    id?: string;
+    /** Accessible name for the region (default "Filters") */
+    label?: string;
+    /** Active filter count; "Clear all" shows when > 0 and `onClear` is set */
+    activeCount?: number;
+    /** Resets every filter */
+    onClear?: () => void;
+    /** The filter controls, one grid cell each */
+    children: Snippet;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    id,
+    label = 'Filters',
+    activeCount = 0,
+    onClear,
+    children,
+    class: className,
+  }: Props = $props();
+</script>
+
+<div
+  {id}
+  role="region"
+  aria-label={label}
+  class={cn(
+    'grid transition-[grid-template-rows] duration-300 ease-in-out motion-reduce:transition-none',
+    open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+    className
+  )}
+>
+  <div class="overflow-hidden" inert={!open}>
+    <div class="mt-2 rounded-lg border border-border bg-muted/50 p-4">
+      <div class="grid items-end gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {@render children()}
+      </div>
+      {#if onClear && activeCount > 0}
+        <div class="mt-3 flex justify-end">
+          <Button variant="ghost" size="sm" onclick={onClear}>Clear all</Button>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+/**
+ * FilterPanel - collapsible block of filter controls under a Toolbar.
+ *
+ * Opens and closes with a grid-rows height transition (no measured heights).
+ * While closed the content is `inert`, so the hidden controls are neither
+ * tabbable nor exposed to screen readers. Controls are laid out on a
+ * responsive grid; "Clear all" follows them when any filter is active.
+ *
+ * Usually rendered by FilterToolbar; use it directly only for a custom strip.
+ */
+interface Props {
+    /** Whether the panel is expanded */
+    open?: boolean;
+    /** id for the region, so the toggle button can point `aria-controls` at it */
+    id?: string;
+    /** Accessible name for the region (default "Filters") */
+    label?: string;
+    /** Active filter count; "Clear all" shows when > 0 and `onClear` is set */
+    activeCount?: number;
+    /** Resets every filter */
+    onClear?: () => void;
+    /** The filter controls, one grid cell each */
+    children: Snippet;
+    class?: string;
+}
+declare const FilterPanel: import("svelte").Component<Props, {}, "open">;
+type FilterPanel = ReturnType<typeof FilterPanel>;
+export default FilterPanel;

package/dist/lib/components/FilterToolbar.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+  import Button from './Button.svelte';
+  import Dialog from './Dialog.svelte';
+  import FilterPanel from './FilterPanel.svelte';
+  import Icon from './Icon.svelte';
+  import Toolbar from './Toolbar.svelte';
+
+  /**
+   * FilterToolbar - a Toolbar that folds its filter controls behind a
+   * "Filters" button once there are too many to sit inline.
+   *
+   * Rule: when the left side would hold more than `maxInline` controls
+   * (search counts, count text does not), or on a narrow viewport, the
+   * filters move behind the button - a collapsible FilterPanel under the
+   * strip on desktop, a full-screen Dialog on mobile. Otherwise they render
+   * inline in the strip.
+   *
+   * The page renders its controls once, in `filters`; the `inline` argument
+   * says whether they sit in the strip (keep labels `sr-only`) or in the
+   * panel/dialog (show labels). Filters apply live in every mode - the
+   * dialog's "Done" only closes it.
+   */
+  interface Props {
+    /** Accessible name for the strip, e.g. "Sign tools" */
+    label: string;
+    /** Search field; always inline */
+    search?: Snippet;
+    /** The filter controls; `inline` is false inside the panel/dialog */
+    filters: Snippet<[{ inline: boolean }]>;
+    /** How many controls `filters` renders (drives the collapse rule) */
+    filterCount: number;
+    /** Filters currently narrowing results (button badge) */
+    activeCount?: number;
+    /** Result count / summary text, after the filters or the button */
+    summary?: Snippet;
+    /** Right-aligned cluster (view toggles etc.) */
+    end?: Snippet;
+    /** Resets every filter ("Clear all" in the panel and dialog) */
+    onClear?: () => void;
+    /** Most left-side controls (search included) allowed inline (default 3) */
+    maxInline?: number;
+    /** Whether the panel/dialog is open */
+    open?: boolean;
+    /** Viewport query below which filters always collapse into a dialog */
+    mobileQuery?: string;
+    class?: string;
+  }
+
+  let {
+    label,
+    search,
+    filters,
+    filterCount,
+    activeCount = 0,
+    summary,
+    end: endSnippet,
+    onClear,
+    maxInline = 3,
+    open = $bindable(false),
+    mobileQuery = '(max-width: 1023px)',
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const panelId = `filter-panel-${uid}`;
+
+  const mobile = $derived(new MediaQuery(mobileQuery, false));
+  const collapsed = $derived(
+    filterCount > 0 && (mobile.current || (search ? 1 : 0) + filterCount > maxInline)
+  );
+</script>
+
+<div class={className}>
+  <Toolbar {label} end={endSnippet}>
+    {@render search?.()}
+    {#if collapsed}
+      <Button
+        variant={open ? 'default' : 'secondary'}
+        size="sm"
+        class="min-h-11 shrink-0 sm:min-h-9"
+        aria-expanded={open}
+        aria-controls={mobile.current ? undefined : panelId}
+        aria-label={activeCount > 0 ? `Filters, ${activeCount} active` : 'Filters'}
+        onclick={() => (open = !open)}
+      >
+        <Icon name="filter" size={16} />
+        Filters
+        {#if activeCount > 0}
+          <span
+            class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-background px-1.5 text-xs text-foreground"
+            aria-hidden="true"
+          >
+            {activeCount}
+          </span>
+        {/if}
+      </Button>
+    {:else}
+      {@render filters({ inline: true })}
+    {/if}
+    {@render summary?.()}
+  </Toolbar>
+
+  {#if collapsed && !mobile.current}
+    <FilterPanel bind:open id={panelId} {label} {activeCount} {onClear}>
+      {@render filters({ inline: false })}
+    </FilterPanel>
+  {/if}
+</div>
+
+{#if collapsed && mobile.current}
+  <Dialog
+    bind:open
+    title="Filters"
+    description={activeCount > 0 ? `${activeCount} active` : undefined}
+    size="full"
+  >
+    <div class="space-y-4">
+      {@render filters({ inline: false })}
+    </div>
+    {#snippet footer()}
+      <div class="flex w-full justify-between gap-2">
+        {#if onClear}
+          <Button variant="ghost" class="min-h-11" disabled={activeCount === 0} onclick={onClear}>
+            Clear all
+          </Button>
+        {/if}
+        <Button class="ml-auto min-h-11" onclick={() => (open = false)}>Done</Button>
+      </div>
+    {/snippet}
+  </Dialog>
+{/if}

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+/**
+ * FilterToolbar - a Toolbar that folds its filter controls behind a
+ * "Filters" button once there are too many to sit inline.
+ *
+ * Rule: when the left side would hold more than `maxInline` controls
+ * (search counts, count text does not), or on a narrow viewport, the
+ * filters move behind the button - a collapsible FilterPanel under the
+ * strip on desktop, a full-screen Dialog on mobile. Otherwise they render
+ * inline in the strip.
+ *
+ * The page renders its controls once, in `filters`; the `inline` argument
+ * says whether they sit in the strip (keep labels `sr-only`) or in the
+ * panel/dialog (show labels). Filters apply live in every mode - the
+ * dialog's "Done" only closes it.
+ */
+interface Props {
+    /** Accessible name for the strip, e.g. "Sign tools" */
+    label: string;
+    /** Search field; always inline */
+    search?: Snippet;
+    /** The filter controls; `inline` is false inside the panel/dialog */
+    filters: Snippet<[{
+        inline: boolean;
+    }]>;
+    /** How many controls `filters` renders (drives the collapse rule) */
+    filterCount: number;
+    /** Filters currently narrowing results (button badge) */
+    activeCount?: number;
+    /** Result count / summary text, after the filters or the button */
+    summary?: Snippet;
+    /** Right-aligned cluster (view toggles etc.) */
+    end?: Snippet;
+    /** Resets every filter ("Clear all" in the panel and dialog) */
+    onClear?: () => void;
+    /** Most left-side controls (search included) allowed inline (default 3) */
+    maxInline?: number;
+    /** Whether the panel/dialog is open */
+    open?: boolean;
+    /** Viewport query below which filters always collapse into a dialog */
+    mobileQuery?: string;
+    class?: string;
+}
+declare const FilterToolbar: import("svelte").Component<Props, {}, "open">;
+type FilterToolbar = ReturnType<typeof FilterToolbar>;
+export default FilterToolbar;

package/dist/lib/index.d.ts

@@ -59,6 +59,9 @@ export { default as DataTable } from './components/DataTable.svelte';
 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 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';
 export { default as ViewToggle, type ViewToggleOption, defaultViewToggleOptions, } from './components/ViewToggle.svelte';
 export { AspectRatio, Image, Video, Audio, MediaEmbed, MediaGrid, MediaCarousel, Lightbox, } from './components/media/index.js';

package/dist/lib/index.js

@@ -72,6 +72,9 @@ export { default as Tabs } from './components/Tabs.svelte';
 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 FilterPanel } from './components/FilterPanel.svelte';
+export { default as ActiveFilterChips, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, } from './components/SegmentedControl.svelte';
 export { default as ViewToggle, defaultViewToggleOptions, } from './components/ViewToggle.svelte';
 // Media Components

package/package.json

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