@classic-homes/theme-svelte 1.13.0 → 1.13.1

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

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import PageHeader from '../lib/components/PageHeader.svelte';
+/**
+ * The title must carry its own type scale. Tailwind preflight resets heading
+ * size/weight and outranks the theme's layered base rule in consumer apps, so
+ * a bare <h1> is body-sized there - PageHeader cannot lean on it.
+ */
+describe('PageHeader title typography', () => {
+    it('sets the Spectral display scale on the default h1', () => {
+        render(PageHeader, { props: { title: 'All Available Homes' } });
+        const h1 = screen.getByRole('heading', { level: 1 });
+        expect(h1).toHaveClass('text-h1', 'font-serif', 'italic');
+    });
+    it('follows the `as` level: h2 is Figtree at the h2 scale', () => {
+        render(PageHeader, { props: { title: 'Flying Horse', as: 'h2' } });
+        const h2 = screen.getByRole('heading', { level: 2 });
+        expect(h2).toHaveClass('text-h2', 'font-sans', 'not-italic');
+        expect(h2).not.toHaveClass('text-h1', 'italic');
+    });
+    it('applies the same scale to the centered variant', () => {
+        render(PageHeader, { props: { title: 'About', variant: 'centered' } });
+        expect(screen.getByRole('heading', { level: 1 })).toHaveClass('text-h1', 'font-serif');
+    });
+    it('leaves the hero and form display styles alone', () => {
+        const { unmount } = render(PageHeader, { props: { title: 'Ship', variant: 'hero' } });
+        const hero = screen.getByRole('heading', { level: 1 });
+        expect(hero).toHaveClass('text-5xl', 'font-black');
+        expect(hero).not.toHaveClass('text-h1', 'font-serif');
+        unmount();
+        render(PageHeader, { props: { title: 'Sign in', variant: 'form' } });
+        const form = screen.getByRole('heading', { level: 1 });
+        expect(form).toHaveClass('font-light');
+        expect(form).not.toHaveClass('text-h1');
+    });
+});

package/dist/lib/components/PageHeader.svelte

@@ -10,9 +10,12 @@
    * - Optional subtitle with branded styling
    * - Optional actions slot for CTA buttons
    * - 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.
+   *   set the theme heading scale for the rendered level explicitly (h1 =
+   *   Spectral 500 italic via `text-h1`, h2-h6 = Figtree 600 via `text-h2`..
+   *   `text-h6`). They do not lean on the bare-element styles: Tailwind
+   *   preflight outranks the theme's `@layer` heading rules in consumer apps,
+   *   which left the title at body size. `hero` and `form` are display styles
+   *   with their own scale.
    */
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
@@ -92,10 +95,26 @@
   }: Props = $props();
 
   const styles = $derived(pageHeaderVariants({ variant }));
+
+  /** Theme type style per heading level; `hero`/`form` carry their own */
+  const levelTypeClass: Record<NonNullable<Props['as']>, string> = {
+    h1: 'font-serif italic text-h1',
+    h2: 'font-sans not-italic text-h2',
+    h3: 'font-sans not-italic text-h3',
+    h4: 'font-sans not-italic text-h4',
+    h5: 'font-sans not-italic text-h5',
+    h6: 'font-sans not-italic text-h6',
+  };
+  const titleClass = $derived(
+    cn(
+      styles.title(),
+      variant === 'default' || variant === 'centered' ? levelTypeClass[as] : undefined
+    )
+  );
 </script>
 
 <header class={cn(styles.container(), className)} {...restProps}>
-  <svelte:element this={as} class={styles.title()}>{title}</svelte:element>
+  <svelte:element this={as} class={titleClass}>{title}</svelte:element>
   {#if subtitle}
     <p class={styles.subtitle()}>{subtitle}</p>
   {/if}

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

@@ -9,9 +9,12 @@
    * - Optional subtitle with branded styling
    * - Optional actions slot for CTA buttons
    * - 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.
+   *   set the theme heading scale for the rendered level explicitly (h1 =
+   *   Spectral 500 italic via `text-h1`, h2-h6 = Figtree 600 via `text-h2`..
+   *   `text-h6`). They do not lean on the bare-element styles: Tailwind
+   *   preflight outranks the theme's `@layer` heading rules in consumer apps,
+   *   which left the title at body size. `hero` and `form` are display styles
+   *   with their own scale.
    */
 import type { Snippet } from 'svelte';
 declare const PageHeader: import("svelte").Component<{

package/package.json

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