@classic-homes/theme-svelte 1.13.1 → 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/__tests__/control-text-color.test.js

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Input from '../lib/components/Input.svelte';
+import Textarea from '../lib/components/Textarea.svelte';
+import Select from '../lib/components/Select.svelte';
+import PasswordInput from '../lib/components/PasswordInput.svelte';
+// Form controls paint their own light surface (bg-background), so they must
+// also set their own text color. Otherwise a dark parent that sets white text
+// (Toolbar's text-toolbar-foreground) leaks into the value: white on white.
+describe('light-surface controls own their text color', () => {
+    it('Input', () => {
+        render(Input, { props: { 'aria-label': 'Search' } });
+        expect(screen.getByRole('textbox', { name: 'Search' })).toHaveClass('bg-background', 'text-foreground');
+    });
+    it('Textarea', () => {
+        render(Textarea, { props: { 'aria-label': 'Notes' } });
+        expect(screen.getByRole('textbox', { name: 'Notes' })).toHaveClass('bg-background', 'text-foreground');
+    });
+    it('PasswordInput', () => {
+        const { container } = render(PasswordInput, { props: { id: 'pw' } });
+        expect(container.querySelector('#pw')).toHaveClass('bg-background', 'text-foreground');
+    });
+    it('Select trigger', () => {
+        const { container } = render(Select, {
+            props: { id: 'status', options: [{ value: 'a', label: 'Active' }], value: 'a' },
+        });
+        expect(container.querySelector('#status')).toHaveClass('bg-background', 'text-foreground');
+    });
+});

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/Combobox.svelte

@@ -166,7 +166,7 @@
           onfocus={() => (open = true)}
           onclick={() => (open = true)}
           class={cn(
-            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
             error && 'border-destructive focus:ring-destructive',
             className
           )}
@@ -262,7 +262,7 @@
         onfocus={() => (open = true)}
         onclick={() => (open = true)}
         class={cn(
-          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-destructive focus:ring-destructive',
           className
         )}

package/dist/lib/components/DateTimePicker.svelte

@@ -431,7 +431,7 @@
         onkeydown={handleInputKeyDown}
         {disabled}
         class={cn(
-          'flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 pr-10 text-base sm:text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full items-center rounded-md border border-input bg-background text-foreground px-3 py-2 pr-10 text-base sm:text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           !value && !isEditing && 'text-muted-foreground',
           displayError && 'border-destructive focus:ring-destructive',
           className
@@ -571,7 +571,7 @@
                   bind:value={hour}
                   onchange={updateTime}
                   aria-label="Hour"
-                  class="h-8 rounded-md border border-input bg-background px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  class="h-8 rounded-md border border-input bg-background text-foreground px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                 >
                   {#each hourOptions as h}
                     <option value={timeFormat === '12h' ? h : h}>
@@ -584,7 +584,7 @@
                   bind:value={minute}
                   onchange={updateTime}
                   aria-label="Minute"
-                  class="h-8 rounded-md border border-input bg-background px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  class="h-8 rounded-md border border-input bg-background text-foreground px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                 >
                   {#each minuteOptions as m}
                     <option value={m}>{String(m).padStart(2, '0')}</option>
@@ -595,7 +595,7 @@
                     bind:value={period}
                     onchange={updateTime}
                     aria-label="AM or PM"
-                    class="h-8 rounded-md border border-input bg-background px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                    class="h-8 rounded-md border border-input bg-background text-foreground px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                   >
                     <option value="AM">AM</option>
                     <option value="PM">PM</option>

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/components/Input.svelte

@@ -82,7 +82,7 @@
   aria-invalid={ariaInvalid}
   aria-required={required}
   class={cn(
-    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'flex h-10 w-full rounded-md border border-input bg-background text-foreground px-3 py-2 text-base sm:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
     ariaInvalid === true || ariaInvalid === 'true'
       ? 'border-destructive focus-visible:ring-destructive'
       : '',

package/dist/lib/components/MultiSelect.svelte

@@ -227,7 +227,7 @@
             onfocus={() => (open = true)}
             onclick={() => (open = true)}
             class={cn(
-              'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               error && 'border-destructive focus:ring-destructive'
             )}
             aria-invalid={error ? 'true' : undefined}
@@ -364,7 +364,7 @@
           onfocus={() => (open = true)}
           onclick={() => (open = true)}
           class={cn(
-            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
             error && 'border-destructive focus:ring-destructive'
           )}
           aria-invalid={error ? 'true' : undefined}

package/dist/lib/components/NumberInput.svelte

@@ -159,7 +159,7 @@
           onclick={decrement}
           disabled={disabled || !canDecrement}
           class={cn(
-            'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background text-foreground text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
             error && 'border-destructive'
           )}
           aria-label="Decrease value"
@@ -208,7 +208,7 @@
           onclick={increment}
           disabled={disabled || !canIncrement}
           class={cn(
-            'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background text-foreground text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
             error && 'border-destructive'
           )}
           aria-label="Increase value"
@@ -251,7 +251,7 @@
         onclick={decrement}
         disabled={disabled || !canDecrement}
         class={cn(
-          'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          'flex h-10 w-10 items-center justify-center rounded-l-md border border-r-0 border-input bg-background text-foreground text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
           error && 'border-destructive'
         )}
         aria-label="Decrease value"
@@ -300,7 +300,7 @@
         onclick={increment}
         disabled={disabled || !canIncrement}
         class={cn(
-          'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          'flex h-10 w-10 items-center justify-center rounded-r-md border border-l-0 border-input bg-background text-foreground text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
           error && 'border-destructive'
         )}
         aria-label="Increase value"

package/dist/lib/components/OTPInput.svelte

@@ -244,7 +244,7 @@
           onpaste={handlePaste}
           onfocus={handleFocus}
           class={cn(
-            'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
+            'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background text-foreground ring-offset-background transition-colors',
             'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
             'disabled:cursor-not-allowed disabled:opacity-50',
             error && 'border-destructive focus:ring-destructive'
@@ -295,7 +295,7 @@
         onpaste={handlePaste}
         onfocus={handleFocus}
         class={cn(
-          'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
+          'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background text-foreground ring-offset-background transition-colors',
           'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-destructive focus:ring-destructive'

package/dist/lib/components/PasswordInput.svelte

@@ -69,7 +69,7 @@
     {id}
     {autocomplete}
     class={cn(
-      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base sm:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full rounded-md border border-input bg-background text-foreground px-3 py-2 pr-10 text-base sm:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className
     )}
     oninput={handleInput}

package/dist/lib/components/Select.svelte

@@ -132,7 +132,7 @@
   // Common trigger classes
   const triggerClasses = $derived(
     cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       error && 'border-destructive focus:ring-destructive',
       className
     )

package/dist/lib/components/Signature.svelte

@@ -35,7 +35,7 @@
       canvas: 'block w-full cursor-crosshair touch-none',
       toolbar: 'flex flex-wrap items-center gap-2',
       toolButton:
-        'inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-sm font-medium ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-foreground text-sm font-medium ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
       toolGroup: 'flex items-center gap-1.5',
       toolLabel: 'text-xs text-muted-foreground',
       colorPicker:
@@ -990,7 +990,7 @@
         oninput={handleTypedNameChange}
         placeholder="Enter your full name"
         class={cn(
-          'flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-11 w-full rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-destructive focus-visible:ring-destructive'
         )}
         {disabled}

package/dist/lib/components/Textarea.svelte

@@ -62,7 +62,7 @@
   aria-describedby={ariaDescribedby}
   aria-invalid={ariaInvalid}
   class={cn(
-    'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+    'flex min-h-[80px] w-full rounded-md border border-input bg-background text-foreground px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
     ariaInvalid === true || ariaInvalid === 'true'
       ? 'border-destructive focus-visible:ring-destructive'
       : '',

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.1",
+  "version": "1.15.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",