@classic-homes/theme-svelte 1.11.0 → 1.13.0

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'vitest-axe';
+import SegmentedControl from '../../lib/components/SegmentedControl.svelte';
+const options = [
+    { value: 'community', label: 'Community' },
+    { value: 'collection', label: 'Collection' },
+    { value: 'floor-plan', label: 'Floor Plan', disabled: true },
+];
+describe('SegmentedControl accessibility', () => {
+    it('should have no axe violations', async () => {
+        const { container } = render(SegmentedControl, {
+            props: { options, label: 'Group homes by' },
+        });
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('is a labelled radiogroup of radios', () => {
+        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
+        const group = screen.getByRole('radiogroup', { name: 'Group homes by' });
+        expect(group).toBeInTheDocument();
+        expect(screen.getAllByRole('radio')).toHaveLength(3);
+    });
+    it('selects the first enabled option by default', () => {
+        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
+        expect(screen.getByRole('radio', { name: 'Community' })).toHaveAttribute('aria-checked', 'true');
+        expect(screen.getByRole('radio', { name: 'Floor Plan' })).toBeDisabled();
+    });
+    it('moves selection with arrow keys and skips disabled options', async () => {
+        const user = userEvent.setup();
+        const onValueChange = vi.fn();
+        render(SegmentedControl, { props: { options, label: 'Group homes by', onValueChange } });
+        const community = screen.getByRole('radio', { name: 'Community' });
+        const collection = screen.getByRole('radio', { name: 'Collection' });
+        community.focus();
+        await user.keyboard('{ArrowRight}');
+        expect(collection).toHaveAttribute('aria-checked', 'true');
+        expect(onValueChange).toHaveBeenLastCalledWith('collection');
+        // Floor Plan is disabled, so the next step loops back to Community
+        await user.keyboard('{ArrowRight}');
+        expect(community).toHaveAttribute('aria-checked', 'true');
+    });
+    it('never deselects: clicking the selected option keeps it checked', async () => {
+        const user = userEvent.setup();
+        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
+        const community = screen.getByRole('radio', { name: 'Community' });
+        await user.click(community);
+        expect(community).toHaveAttribute('aria-checked', 'true');
+    });
+});

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

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { axe } from 'vitest-axe';
+import { createRawSnippet } from 'svelte';
+import Toolbar from '../../lib/components/Toolbar.svelte';
+const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
+describe('Toolbar accessibility', () => {
+    it('should have no axe violations', async () => {
+        const { container } = render(Toolbar, {
+            props: {
+                label: 'Inventory tools',
+                children: snippet('<button type="button">Filters</button>'),
+                end: snippet('<button type="button">Map</button>'),
+            },
+        });
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('is a labelled group that renders both slots', () => {
+        render(Toolbar, {
+            props: {
+                label: 'Inventory tools',
+                children: snippet('<span>89 homes</span>'),
+                end: snippet('<button type="button">Map</button>'),
+            },
+        });
+        const group = screen.getByRole('group', { name: 'Inventory tools' });
+        expect(group).toHaveClass('bg-toolbar');
+        expect(screen.getByText('89 homes')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Map' })).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'vitest-axe';
+import ViewToggle from '../../lib/components/ViewToggle.svelte';
+describe('ViewToggle accessibility', () => {
+    it('should have no axe violations', async () => {
+        const { container } = render(ViewToggle);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('exposes list / grid / map radios with accessible names', () => {
+        render(ViewToggle);
+        expect(screen.getByRole('radiogroup', { name: 'View' })).toBeInTheDocument();
+        expect(screen.getByRole('radio', { name: 'List view' })).toHaveAttribute('aria-checked', 'true');
+        expect(screen.getByRole('radio', { name: 'Grid view' })).toBeInTheDocument();
+        expect(screen.getByRole('radio', { name: 'Map view' })).toBeInTheDocument();
+    });
+    it('changes the view with the keyboard and reports it', async () => {
+        const user = userEvent.setup();
+        const onValueChange = vi.fn();
+        render(ViewToggle, { props: { onValueChange } });
+        screen.getByRole('radio', { name: 'List view' }).focus();
+        await user.keyboard('{ArrowRight}');
+        expect(screen.getByRole('radio', { name: 'Grid view' })).toHaveAttribute('aria-checked', 'true');
+        expect(onValueChange).toHaveBeenLastCalledWith('grid');
+    });
+    it('honours a custom option set and value', () => {
+        render(ViewToggle, {
+            props: {
+                label: 'Layout',
+                value: 'cards',
+                options: [
+                    { value: 'table', icon: 'list', label: 'Table' },
+                    { value: 'cards', icon: 'grid', label: 'Cards' },
+                ],
+            },
+        });
+        expect(screen.getByRole('radio', { name: 'Cards' })).toHaveAttribute('aria-checked', 'true');
+    });
+});

package/dist/__tests__/action-header.test.js

@@ -27,6 +27,20 @@ describe('ActionHeader', () => {
         expect(screen.getByRole('heading', { level: 2, name: 'Signs' })).toBeInTheDocument();
         expect(screen.getByText('All signage')).toBeInTheDocument();
     });
+    it('styles the title per heading level: serif italic h1, sans h2', () => {
+        const { unmount } = render(ActionHeader, { props: { title: 'Homes' } });
+        expect(screen.getByRole('heading', { level: 1 })).toHaveClass('font-serif', 'italic');
+        unmount();
+        render(ActionHeader, { props: { title: 'Flying Horse', headingLevel: 2 } });
+        expect(screen.getByRole('heading', { level: 2 })).toHaveClass('font-sans', 'font-semibold');
+    });
+    it('renders the caption under the actions', () => {
+        const { container } = render(ActionHeader, {
+            props: { title: 'Homes', caption: 'Updated 5 minutes ago', actions },
+        });
+        expect(screen.getByText('Updated 5 minutes ago')).toHaveClass('ah-caption');
+        expect(container.querySelector('header')).toHaveAttribute('data-has-caption');
+    });
     it('defaults to h1 and renders no action cluster without actions', () => {
         const { container } = render(ActionHeader, { props: { title: 'Account' } });
         expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();

package/dist/lib/components/ActionHeader.svelte

@@ -41,6 +41,8 @@
     title: string;
     /** One- or two-sentence description; clamped to two lines on narrow headers */
     subtitle?: string;
+    /** Small note under the actions, right-aligned (e.g. "Updated 5 minutes ago") */
+    caption?: string;
     /** Heading level for the title (default 1) */
     headingLevel?: 1 | 2 | 3;
     /** Renders a back (arrow) button linking here */
@@ -74,6 +76,7 @@
   let {
     title,
     subtitle,
+    caption,
     headingLevel = 1,
     backHref,
     backLabel,
@@ -131,8 +134,14 @@
   const hasLead = $derived(Boolean(backHref || media));
   const hasActions = $derived(primary.length > 0 || secondary.length > 0 || overflow.length > 0);
 
+  /** Mirrors Button's `outline` variant at `size="sm"` */
   const menuTriggerClass =
-    'inline-flex h-9 w-9 items-center justify-center rounded-md border-2 border-primary bg-transparent text-primary ring-offset-background hover:bg-primary hover:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
+    'inline-flex h-9 w-9 items-center justify-center rounded-md border-2 border-outline bg-transparent text-foreground ring-offset-background hover:border-outline-hover hover:bg-primary hover:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
+
+  /** h1 is the display face (Spectral italic); lower levels are Figtree */
+  const titleTypeClass = $derived(
+    headingLevel === 1 ? 'font-serif font-medium italic' : 'font-sans font-semibold not-italic'
+  );
 </script>
 
 {#snippet moreMenu(items: DropdownMenuItem[])}
@@ -143,7 +152,13 @@
   </DropdownMenu>
 {/snippet}
 
-<header class={cn('ah', className)} data-collapse={collapse} {...restProps}>
+<header
+  class={cn('ah', className)}
+  data-collapse={collapse}
+  data-level={headingLevel}
+  data-has-caption={caption ? '' : undefined}
+  {...restProps}
+>
   <div class="ah-grid">
     {#if hasLead}
       <div class="ah-lead">
@@ -168,7 +183,10 @@
       <div class="flex min-w-0 items-center gap-2">
         <svelte:element
           this={headingTag}
-          class="ah-title text-[length:var(--ah-title-size)] font-bold leading-[var(--ah-title-leading)] tracking-tight text-foreground"
+          class={cn(
+            'ah-title text-[length:var(--ah-title-size)] leading-[var(--ah-title-leading)] text-foreground',
+            titleTypeClass
+          )}
         >
           {title}
         </svelte:element>
@@ -237,6 +255,10 @@
       </div>
     {/if}
 
+    {#if caption}
+      <p class="ah-caption text-xs text-muted-foreground">{caption}</p>
+    {/if}
+
     {#if tools}
       <div class="ah-tools">{@render tools()}</div>
     {/if}
@@ -261,8 +283,6 @@
   }
 
   .ah-grid {
-    --ah-title-size: 1.25rem;
-    --ah-title-leading: 1.75rem;
     --ah-subtitle-size: 0.875rem;
     --ah-subtitle-leading: 1.25rem;
     display: grid;
@@ -270,10 +290,25 @@
     grid-template-areas:
       'lead heading actions actions'
       'lead sub sub sub'
+      'lead caption caption caption'
       'lead badges badges tools';
     align-items: center;
   }
 
+  /* Title scale per heading level (narrow) */
+  [data-level='1'] .ah-grid {
+    --ah-title-size: 1.75rem;
+    --ah-title-leading: 2rem;
+  }
+  [data-level='2'] .ah-grid {
+    --ah-title-size: 1.25rem;
+    --ah-title-leading: 1.75rem;
+  }
+  [data-level='3'] .ah-grid {
+    --ah-title-size: 1.125rem;
+    --ah-title-leading: 1.5rem;
+  }
+
   .ah-lead {
     grid-area: lead;
     align-self: start;
@@ -298,6 +333,8 @@
     -webkit-line-clamp: 2;
     line-clamp: 2;
     overflow: hidden;
+    /* Keep the italic overhang of the last glyph out of the clip */
+    padding-inline-end: 0.05em;
   }
 
   .ah-subtitle {
@@ -311,6 +348,14 @@
     overflow: hidden;
   }
 
+  .ah-caption {
+    grid-area: caption;
+    justify-self: end;
+    text-align: end;
+    margin-top: 0.25rem;
+    white-space: nowrap;
+  }
+
   .ah-actions {
     grid-area: actions;
     display: flex;
@@ -400,8 +445,6 @@
 
   @container action-header (min-width: 40rem) {
     .ah-grid {
-      --ah-title-size: 1.5rem;
-      --ah-title-leading: 2rem;
       --ah-subtitle-size: 1rem;
       --ah-subtitle-leading: 1.5rem;
       grid-template-areas:
@@ -410,6 +453,29 @@
         'lead badges badges badges';
     }
 
+    /* With a caption the actions sit on the title row and the caption under them */
+    [data-has-caption] .ah-grid {
+      grid-template-areas:
+        'lead heading actions tools'
+        'lead sub caption tools'
+        '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 */
+    [data-level='1'] .ah-grid {
+      --ah-title-size: 2.5rem;
+      --ah-title-leading: 2.75rem;
+    }
+    [data-level='2'] .ah-grid {
+      --ah-title-size: 1.75rem;
+      --ah-title-leading: 2.25rem;
+    }
+    [data-level='3'] .ah-grid {
+      --ah-title-size: 1.5rem;
+      --ah-title-leading: 2rem;
+    }
+
     .ah-subtitle {
       -webkit-line-clamp: 3;
       line-clamp: 3;

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

@@ -31,6 +31,8 @@ interface Props {
     title: string;
     /** One- or two-sentence description; clamped to two lines on narrow headers */
     subtitle?: string;
+    /** Small note under the actions, right-aligned (e.g. "Updated 5 minutes ago") */
+    caption?: string;
     /** Heading level for the title (default 1) */
     headingLevel?: 1 | 2 | 3;
     /** Renders a back (arrow) button linking here */

package/dist/lib/components/Button.svelte

@@ -8,11 +8,12 @@
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
+        secondary:
+          'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
         outline:
-          'border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground',
+          'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
         ghost: 'hover:bg-muted-hover hover:text-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },

package/dist/lib/components/DataTable.svelte

@@ -479,7 +479,7 @@
 
 {#if enablePagination && !loading && table.rows.length > 0}
   <!-- Pagination controls -->
-  <div class="flex items-center justify-between border-t px-4 py-3">
+  <div class="flex flex-wrap items-center justify-between gap-2 border-t px-4 py-3">
     <div class="text-sm text-muted-foreground">
       {#if enableRowSelection && table.selectedCount > 0}
         {table.selectedCount} of {table.totalRows} row(s) selected
@@ -490,7 +490,7 @@
     <div class="flex items-center gap-2">
       <button
         type="button"
-        class="rounded-md border px-3 py-1 text-sm disabled:opacity-50"
+        class="min-h-11 rounded-md border px-3 py-1 text-sm disabled:opacity-50 sm:min-h-0"
         disabled={!table.canPreviousPage}
         onclick={() => table.previousPage()}
       >
@@ -501,7 +501,7 @@
       </span>
       <button
         type="button"
-        class="rounded-md border px-3 py-1 text-sm disabled:opacity-50"
+        class="min-h-11 rounded-md border px-3 py-1 text-sm disabled:opacity-50 sm:min-h-0"
         disabled={!table.canNextPage}
         onclick={() => table.nextPage()}
       >

package/dist/lib/components/LogoMain.svelte

@@ -54,7 +54,7 @@
     dark: {
       logo: '#C50F22', // Brand red
       title: '#000000', // Black for light backgrounds
-      subtitle: '#666666', // Gray - #7a7a7a was 4.29:1 on white (WCAG 1.4.3 fail)
+      subtitle: 'var(--color-red-primary, #a91c22)', // Brand red (hex var: does not flip in dark mode)
     },
     light: {
       logo: '#ffffff',
@@ -64,7 +64,7 @@
     'mono-dark': {
       logo: '#002e3f', // Navy
       title: '#002e3f',
-      subtitle: '#666666', // see dark variant note
+      subtitle: 'var(--color-red-primary, #a91c22)', // Brand red
     },
     'mono-light': {
       logo: '#ffffff',
@@ -166,7 +166,7 @@
           {/if}
           {#if subtitle}
             <span
-              class="uppercase font-black leading-none m-0 p-0"
+              class="uppercase font-semibold leading-none m-0 p-0"
               style="font-family: 'Figtree', system-ui, sans-serif; font-size: {currentSize.subtitle}; color: {currentColors.subtitle};"
             >
               {subtitle}
@@ -212,7 +212,7 @@
         Classic Homes
       </span>
       {#if subtitle || envConfig}
-        <div class="flex flex-row items-center justify-end gap-1.5 w-full">
+        <div class="flex flex-row items-center justify-start gap-1.5 w-full">
           {#if envConfig}
             <Badge
               variant={envConfig.variant}
@@ -224,7 +224,7 @@
           {/if}
           {#if subtitle}
             <span
-              class="uppercase font-black leading-none m-0 p-0"
+              class="uppercase font-semibold leading-none m-0 p-0"
               style="font-family: 'Figtree', system-ui, sans-serif; font-size: {currentSize.subtitle}; color: {currentColors.subtitle};"
             >
               {subtitle}

package/dist/lib/components/MultiSelect.svelte

@@ -178,7 +178,7 @@
             {@const labelText = options.find((o) => o.value === selectedValue)?.label}
             {#if labelText}
               <span
-                class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+                class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground"
               >
                 {labelText}
                 <button
@@ -315,7 +315,7 @@
           {@const labelText = options.find((o) => o.value === selectedValue)?.label}
           {#if labelText}
             <span
-              class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+              class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground"
             >
               {labelText}
               <button

package/dist/lib/components/PageHeader.svelte

@@ -6,10 +6,13 @@
    * Supports multiple layout variants and optional action buttons.
    *
    * Features:
-   * - Multiple variants: default, hero, centered
+   * - Multiple variants: default, hero, centered, form
    * - Optional subtitle with branded styling
    * - Optional actions slot for CTA buttons
-   * - Consistent typography using design tokens
+   * - Consistent typography using design tokens: `default` and `centered`
+   *   inherit the theme heading styles for the rendered level (h1 = Spectral
+   *   500 italic, h2-h6 = Figtree 600); `hero` and `form` are display styles
+   *   that opt out of them.
    */
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
@@ -26,25 +29,26 @@
       variant: {
         default: {
           container: '',
-          title: 'text-3xl font-bold mb-2',
+          title: 'mb-2',
           subtitle: 'text-lg',
           actionsWrapper: 'mt-4',
         },
         hero: {
           container: '',
-          title: 'text-5xl font-black uppercase tracking-tight mb-2',
+          title: 'font-sans text-5xl font-black not-italic uppercase tracking-tight mb-2',
           subtitle: 'text-lg font-serif italic',
           actionsWrapper: 'mt-6',
         },
         centered: {
           container: 'text-center',
-          title: 'text-4xl font-bold mb-3',
+          title: 'mb-3',
           subtitle: 'text-xl max-w-2xl mx-auto',
           actionsWrapper: 'mt-6 justify-center',
         },
         form: {
           container: 'text-center mb-8',
-          title: 'text-3xl md:text-4xl font-light tracking-tight text-brand-core-2',
+          title:
+            'font-sans text-3xl md:text-4xl font-light not-italic tracking-tight text-brand-core-2',
           subtitle: 'mt-3 text-base md:text-lg text-gray-600',
           actionsWrapper: 'mt-6 justify-center',
         },
@@ -64,6 +68,12 @@
     subtitle?: string;
     /** Visual variant */
     variant?: PageHeaderVariants['variant'];
+    /**
+     * Heading element for the title (default `h1`). Pick the level that fits
+     * the page outline; `default`/`centered` variants take the theme's type
+     * style for that level.
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /** Additional classes for the container */
     class?: string;
     /** Optional action buttons/content */
@@ -75,6 +85,7 @@
     title,
     subtitle,
     variant = 'default',
+    as = 'h1',
     class: className,
     actions,
     ...restProps
@@ -84,7 +95,7 @@
 </script>
 
 <header class={cn(styles.container(), className)} {...restProps}>
-  <h1 class={styles.title()}>{title}</h1>
+  <svelte:element this={as} class={styles.title()}>{title}</svelte:element>
   {#if subtitle}
     <p class={styles.subtitle()}>{subtitle}</p>
   {/if}

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

@@ -5,10 +5,13 @@
    * Supports multiple layout variants and optional action buttons.
    *
    * Features:
-   * - Multiple variants: default, hero, centered
+   * - Multiple variants: default, hero, centered, form
    * - Optional subtitle with branded styling
    * - Optional actions slot for CTA buttons
-   * - Consistent typography using design tokens
+   * - Consistent typography using design tokens: `default` and `centered`
+   *   inherit the theme heading styles for the rendered level (h1 = Spectral
+   *   500 italic, h2-h6 = Figtree 600); `hero` and `form` are display styles
+   *   that opt out of them.
    */
 import type { Snippet } from 'svelte';
 declare const PageHeader: import("svelte").Component<{
@@ -19,6 +22,12 @@ declare const PageHeader: import("svelte").Component<{
     subtitle?: string;
     /** Visual variant */
     variant?: "default" | "form" | "hero" | "centered" | undefined;
+    /**
+     * Heading element for the title (default `h1`). Pick the level that fits
+     * the page outline; `default`/`centered` variants take the theme's type
+     * style for that level.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     /** Additional classes for the container */
     class?: string;
     /** Optional action buttons/content */

package/dist/lib/components/RadioGroup.svelte

@@ -91,7 +91,10 @@
   onValueChange={handleValueChange}
   class={cn(
     'grid gap-2',
-    orientation === 'horizontal' ? 'grid-flow-col auto-cols-max' : 'grid-flow-row',
+    // Horizontal stacks below sm: a non-wrapping column flow overflows phones.
+    orientation === 'horizontal'
+      ? 'grid-flow-row sm:grid-flow-col sm:auto-cols-max'
+      : 'grid-flow-row',
     className
   )}
   aria-labelledby={label ? labelId : undefined}

package/dist/lib/components/SegmentedControl.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+  import type { IconName } from './Icon.svelte';
+
+  export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    /** Leading icon */
+    icon?: IconName;
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  /**
+   * SegmentedControl - single-choice pill group (e.g. "Community | Collection | Floor Plan").
+   *
+   * A radio group under the hood: one option is always selected, arrow keys move
+   * between options, Tab leaves the control. Sits on light or dark surfaces
+   * (it carries its own `bg-muted` track), including inside `Toolbar`.
+   */
+  const segmentedControl = tv({
+    slots: {
+      root: 'inline-flex max-w-full items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground',
+      item: 'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-sm font-medium ring-offset-background hover:text-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 data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:shadow-sm',
+    },
+    variants: {
+      size: {
+        md: { root: 'h-10', item: 'h-8' },
+        sm: { root: 'h-9', item: 'h-7 px-2.5' },
+      },
+    },
+    defaultVariants: { size: 'md' },
+  });
+
+  interface Props {
+    options: SegmentedControlOption[];
+    /** Selected value (bindable); defaults to the first enabled option */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible name of the group, e.g. "Group homes by" */
+    label: string;
+    size?: 'sm' | 'md';
+    /** Disables every option */
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    options,
+    value = $bindable(options.find((o) => !o.disabled)?.value ?? ''),
+    onValueChange,
+    label,
+    size = 'md',
+    disabled = false,
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  const styles = $derived(segmentedControl({ size }));
+
+  function handleValueChange(next: string) {
+    if (!next || next === value) return;
+    value = next;
+    onValueChange?.(next);
+  }
+</script>
+
+<RadioGroupPrimitive.Root
+  {value}
+  onValueChange={handleValueChange}
+  {disabled}
+  orientation="horizontal"
+  aria-label={label}
+  class={cn(styles.root(), className)}
+  {...restProps}
+>
+  {#each options as option (option.value)}
+    <RadioGroupPrimitive.Item value={option.value} disabled={option.disabled} class={styles.item()}>
+      {#if option.icon}<Icon name={option.icon} size={16} aria-hidden="true" />{/if}
+      {option.label}
+    </RadioGroupPrimitive.Item>
+  {/each}
+</RadioGroupPrimitive.Root>

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

@@ -0,0 +1,24 @@
+import type { IconName } from './Icon.svelte';
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    /** Leading icon */
+    icon?: IconName;
+    disabled?: boolean;
+}
+interface Props {
+    options: SegmentedControlOption[];
+    /** Selected value (bindable); defaults to the first enabled option */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible name of the group, e.g. "Group homes by" */
+    label: string;
+    size?: 'sm' | 'md';
+    /** Disables every option */
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const SegmentedControl: import("svelte").Component<Props, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/lib/components/Slider.svelte

@@ -139,7 +139,7 @@
     {orientation}
     onValueChange={handleValueChange}
     onValueCommit={handleValueCommit}
-    class={cn(styles.root(), 'rounded-full bg-secondary')}
+    class={cn(styles.root(), 'rounded-full bg-muted')}
     aria-describedby={describedBy}
   >
     <SliderPrimitive.Range class={styles.range()} />

package/dist/lib/components/Toolbar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * Toolbar - dark strip for list controls (search, filters, result count,
+   * grouping and view toggles) under a page header.
+   *
+   * Filled `secondary` buttons inside pick up the toolbar's light border via
+   * `--secondary-border`; other controls keep their own surfaces. Keyboard:
+   * Tab moves between controls, and each control (SegmentedControl,
+   * ViewToggle) owns its own arrow keys - so this is a labelled `group`, not
+   * an ARIA `toolbar` with roving focus.
+   */
+  interface Props {
+    /** Accessible name, e.g. "Inventory tools" */
+    label: string;
+    /** Leading controls (search, filters, result count) */
+    children?: Snippet;
+    /** Right-aligned cluster (e.g. SegmentedControl + ViewToggle) */
+    end?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { label, children, 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)]',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  {#if end}
+    <div class="ml-auto flex flex-wrap items-center gap-2">{@render end()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/**
+ * Toolbar - dark strip for list controls (search, filters, result count,
+ * grouping and view toggles) under a page header.
+ *
+ * Filled `secondary` buttons inside pick up the toolbar's light border via
+ * `--secondary-border`; other controls keep their own surfaces. Keyboard:
+ * Tab moves between controls, and each control (SegmentedControl,
+ * ViewToggle) owns its own arrow keys - so this is a labelled `group`, not
+ * an ARIA `toolbar` with roving focus.
+ */
+interface Props {
+    /** Accessible name, e.g. "Inventory tools" */
+    label: string;
+    /** Leading controls (search, filters, result count) */
+    children?: Snippet;
+    /** Right-aligned cluster (e.g. SegmentedControl + ViewToggle) */
+    end?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/lib/components/ViewToggle.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" module>
+  import type { IconName } from './Icon.svelte';
+
+  export interface ViewToggleOption {
+    value: string;
+    icon: IconName;
+    /** Accessible name and tooltip, e.g. "List view" */
+    label: string;
+    disabled?: boolean;
+  }
+
+  export const defaultViewToggleOptions: ViewToggleOption[] = [
+    { value: 'list', icon: 'list', label: 'List view' },
+    { value: 'grid', icon: 'grid', label: 'Grid view' },
+    { value: 'map', icon: 'map', label: 'Map view' },
+  ];
+</script>
+
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  /**
+   * ViewToggle - icon-only single choice between views (list / grid / map).
+   *
+   * Filled sage squares, brand-red when selected, darker sage on hover. The
+   * rest fill is `secondary-soft` (#969a82), which is 4.37:1 against the
+   * `Toolbar` background but only 2.90:1 on white: place it inside `Toolbar`
+   * (or another dark surface) rather than directly on the page.
+   */
+  interface Props {
+    options?: ViewToggleOption[];
+    /** Selected view (bindable); defaults to the first enabled option */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible name of the group */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    options = defaultViewToggleOptions,
+    value = $bindable(options.find((o) => !o.disabled)?.value ?? ''),
+    onValueChange,
+    label = 'View',
+    disabled = false,
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  const itemClass =
+    'inline-flex h-9 w-9 items-center justify-center rounded-md bg-secondary-soft text-secondary-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=unchecked]:hover:bg-secondary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground';
+
+  function handleValueChange(next: string) {
+    if (!next || next === value) return;
+    value = next;
+    onValueChange?.(next);
+  }
+</script>
+
+<RadioGroupPrimitive.Root
+  {value}
+  onValueChange={handleValueChange}
+  {disabled}
+  orientation="horizontal"
+  aria-label={label}
+  class={cn('inline-flex items-center gap-1', className)}
+  {...restProps}
+>
+  {#each options as option (option.value)}
+    <RadioGroupPrimitive.Item
+      value={option.value}
+      disabled={option.disabled}
+      aria-label={option.label}
+      title={option.label}
+      class={itemClass}
+    >
+      <Icon name={option.icon} size={18} aria-hidden="true" />
+    </RadioGroupPrimitive.Item>
+  {/each}
+</RadioGroupPrimitive.Root>

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

@@ -0,0 +1,31 @@
+import type { IconName } from './Icon.svelte';
+export interface ViewToggleOption {
+    value: string;
+    icon: IconName;
+    /** Accessible name and tooltip, e.g. "List view" */
+    label: string;
+    disabled?: boolean;
+}
+export declare const defaultViewToggleOptions: ViewToggleOption[];
+/**
+ * ViewToggle - icon-only single choice between views (list / grid / map).
+ *
+ * Filled sage squares, brand-red when selected, darker sage on hover. The
+ * rest fill is `secondary-soft` (#969a82), which is 4.37:1 against the
+ * `Toolbar` background but only 2.90:1 on white: place it inside `Toolbar`
+ * (or another dark surface) rather than directly on the page.
+ */
+interface Props {
+    options?: ViewToggleOption[];
+    /** Selected view (bindable); defaults to the first enabled option */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible name of the group */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const ViewToggle: import("svelte").Component<Props, {}, "value">;
+type ViewToggle = ReturnType<typeof ViewToggle>;
+export default ViewToggle;

package/dist/lib/components/layout/ErrorLayout.svelte

@@ -186,7 +186,7 @@
         {/if}
 
         <!-- Title -->
-        <h1 class="mb-4 text-2xl font-bold text-foreground sm:text-3xl">
+        <h1 class="mb-4 text-2xl font-medium text-foreground sm:text-3xl">
           {effectiveTitle}
         </h1>
 

package/dist/lib/components/notifications/NotificationDialog.svelte

@@ -82,6 +82,9 @@
       onClose?.();
     }
   }
+
+  // Full-width 44px touch targets on phones; stock size from sm up.
+  const footerButtonClass = 'h-11 w-full sm:h-10 sm:w-auto';
 </script>
 
 <Dialog {open} onOpenChange={handleOpenChange} size="lg">
@@ -172,27 +175,27 @@
 
   {#snippet footer()}
     {#if notification}
-      <div class="flex items-center justify-between w-full">
-        <div>
-          {#if onDelete}
-            <Button variant="destructive" onclick={handleDelete}>
-              {#snippet children()}
-                <Icon name="trash" size={16} />
-                Delete
-              {/snippet}
-            </Button>
-          {/if}
-        </div>
-        <div class="flex items-center gap-2">
+      <!-- Phone: full-width stacked buttons, primary on top, Delete at the bottom.
+           sm+: one row, Delete left, the rest pushed right. -->
+      <div class="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center">
+        {#if onDelete}
+          <Button variant="destructive" class={footerButtonClass} onclick={handleDelete}>
+            {#snippet children()}
+              <Icon name="trash" size={16} />
+              Delete
+            {/snippet}
+          </Button>
+        {/if}
+        <div class="flex flex-col-reverse gap-2 sm:ml-auto sm:flex-row sm:items-center">
           {#if notification.read && onMarkUnread}
-            <Button variant="outline" onclick={handleMarkUnread}>
+            <Button class={footerButtonClass} variant="outline" onclick={handleMarkUnread}>
               {#snippet children()}
                 <Icon name="mail" size={16} />
                 Mark Unread
               {/snippet}
             </Button>
           {:else if !notification.read && onMarkRead}
-            <Button variant="outline" onclick={handleMarkRead}>
+            <Button class={footerButtonClass} variant="outline" onclick={handleMarkRead}>
               {#snippet children()}
                 <Icon name="check" size={16} />
                 Mark Read
@@ -200,7 +203,7 @@
             </Button>
           {/if}
           {#if notification.actionUrl}
-            <Button href={notification.actionUrl}>
+            <Button class={footerButtonClass} href={notification.actionUrl}>
               {#snippet children()}
                 {notification.actionLabel || 'View Details'}
               {/snippet}

package/dist/lib/index.d.ts

@@ -58,6 +58,9 @@ export { default as Signature } from './components/Signature.svelte';
 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 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';
 export type { MediaGridColumns } from './components/media/MediaGrid.svelte';
 export type { DropdownMenuItem, DropdownMenuGroup, SelectOption, SelectGroup, Tab, FileMetadata, DataTableColumn, DataTableFilterFn, DataTableFilterOption, RadioOption, ComboboxOption, MultiSelectOption, SignatureData, SignatureStroke, SignaturePoint, SignatureMetadata, SignatureFont, SignatureValidationResult, MediaKind, MediaEmbedProvider, MediaSource, MediaTextTrack, MediaItemBase, ImageMediaItem, VideoMediaItem, AudioMediaItem, EmbedMediaItem, MediaItem, MediaAspectRatio, MediaFit, CloudflareStreamAccount, MatterportPlayerOptions, } from './types/components.js';

package/dist/lib/index.js

@@ -70,6 +70,10 @@ export { default as DataTable } from './components/DataTable.svelte';
 // Tabs
 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 SegmentedControl, } from './components/SegmentedControl.svelte';
+export { default as ViewToggle, defaultViewToggleOptions, } from './components/ViewToggle.svelte';
 // Media Components
 export { AspectRatio, Image, Video, Audio, MediaEmbed, MediaGrid, MediaCarousel, Lightbox, } from './components/media/index.js';
 // DataTable sub-components and utilities

package/package.json

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