@classic-homes/theme-svelte 0.1.6 → 0.1.7

package/dist/lib/components/CardFooter.svelte

@@ -1,11 +1,29 @@
 <script lang="ts">
+  /**
+   * CardFooter - Footer section for Card component
+   *
+   * Provides consistent padding and flex layout for card action buttons
+   * or summary content.
+   *
+   * @example
+   * <Card>
+   *   <CardHeader>...</CardHeader>
+   *   <CardContent>...</CardContent>
+   *   <CardFooter>
+   *     <Button>Save</Button>
+   *     <Button variant="outline">Cancel</Button>
+   *   </CardFooter>
+   * </Card>
+   */
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '../utils.js';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
     class?: string;
+    /** Footer content */
     children: Snippet;
-    [key: string]: unknown;
   }
 
   let { class: className, children, ...restProps }: Props = $props();

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

@@ -1,8 +1,26 @@
+/**
+   * CardFooter - Footer section for Card component
+   *
+   * Provides consistent padding and flex layout for card action buttons
+   * or summary content.
+   *
+   * @example
+   * <Card>
+   *   <CardHeader>...</CardHeader>
+   *   <CardContent>...</CardContent>
+   *   <CardFooter>
+   *     <Button>Save</Button>
+   *     <Button variant="outline">Cancel</Button>
+   *   </CardFooter>
+   * </Card>
+   */
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
     class?: string;
+    /** Footer content */
     children: Snippet;
-    [key: string]: unknown;
 }
 declare const CardFooter: import("svelte").Component<Props, {}, "">;
 type CardFooter = ReturnType<typeof CardFooter>;

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

@@ -42,72 +42,77 @@
     class: className,
   }: Props = $props();
 
-  const currentYear = new Date().getFullYear();
-  const defaultCopyright = `${currentYear} Classic Homes. All rights reserved.`;
-
   const isDark = $derived(variant === 'dark');
+  const displayCopyright = $derived(
+    copyright || `${new Date().getFullYear()} Classic Homes. All rights reserved.`
+  );
 </script>
 
 <footer
+  aria-label="Site footer"
   class={cn(
     // Base styles
-    isDark ? 'bg-[#50504f] text-white' : 'bg-muted/30',
+    isDark ? 'bg-gray-600 text-white' : 'bg-muted/30',
     // Border styles - strong accent border or standard
-    strongBorder ? 'border-t-[10px] border-[#787878]' : 'border-t border-black',
+    strongBorder ? 'border-t-[10px] border-gray-500' : 'border-t border-border',
     className
   )}
 >
   <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
     {#if links.length > 0}
-      <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
-        {#each links as section}
-          <div>
-            {#if section.title}
-              <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
-                {section.title}
-              </h3>
-            {/if}
-            <ul class="mt-4 space-y-2">
-              {#each section.items as item}
-                <li>
-                  <a
-                    href={item.href}
-                    class={cn(
-                      'text-sm transition-colors',
-                      isDark
-                        ? 'text-white hover:text-primary'
-                        : 'text-muted-foreground hover:text-foreground'
-                    )}
-                    target={item.external ? '_blank' : undefined}
-                    rel={item.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {item.name}
-                    {#if item.external}
-                      <svg
-                        class="ml-1 inline-block h-3 w-3"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                        />
-                      </svg>
-                    {/if}
-                  </a>
-                </li>
-              {/each}
-            </ul>
-          </div>
-        {/each}
-      </div>
+      <nav aria-label="Footer navigation">
+        <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:gap-8 lg:grid-cols-4">
+          {#each links as section}
+            <div>
+              {#if section.title}
+                <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
+                  {section.title}
+                </h3>
+              {/if}
+              <ul class="mt-4 space-y-2">
+                {#each section.items as item}
+                  <li>
+                    <a
+                      href={item.href}
+                      class={cn(
+                        'text-sm transition-colors',
+                        isDark
+                          ? 'text-white hover:text-primary'
+                          : 'text-muted-foreground hover:text-foreground'
+                      )}
+                      target={item.external ? '_blank' : undefined}
+                      rel={item.external ? 'noopener noreferrer' : undefined}
+                    >
+                      {item.name}
+                      {#if item.external}
+                        <span class="sr-only">(opens in new tab)</span>
+                        <svg
+                          aria-hidden="true"
+                          class="ml-1 inline-block h-3 w-3"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                          />
+                        </svg>
+                      {/if}
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/each}
+        </div>
+      </nav>
     {/if}
 
     {#if children}
-      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-600' : 'border-black')}>
+      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-500' : 'border-border')}>
         {@render children()}
       </div>
     {/if}
@@ -115,7 +120,7 @@
     <div
       class={cn(
         'mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row',
-        isDark ? 'border-gray-600' : 'border-black'
+        isDark ? 'border-gray-500' : 'border-border'
       )}
     >
       {#if showLogo}
@@ -123,7 +128,7 @@
       {/if}
 
       <p class={cn('text-center text-sm', isDark ? 'text-gray-400' : 'text-muted-foreground')}>
-        {copyright || defaultCopyright}
+        {displayCopyright}
       </p>
     </div>
   </div>

package/dist/lib/schemas/common.d.ts

@@ -246,14 +246,14 @@ export declare function paginatedResponseSchema<T extends z.ZodTypeAny>(itemSche
     pageSize: z.ZodNumber;
     totalPages: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
-    items: T["_output"][];
     page: number;
+    items: T["_output"][];
     pageSize: number;
     total: number;
     totalPages: number;
 }, {
-    items: T["_input"][];
     page: number;
+    items: T["_input"][];
     pageSize: number;
     total: number;
     totalPages: number;

package/dist/lib/types/layout.d.ts

@@ -235,8 +235,16 @@ export interface PublicLayoutProps {
     copyright?: string;
     /** Custom logo snippet */
     logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "THEME", "MY HOME") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
     /** Custom header end content */
     headerEnd?: Snippet;
+    /** Use strong accent border on footer (10px top border) */
+    strongFooterBorder?: boolean;
+    /** Use dark footer variant */
+    darkFooter?: boolean;
     /** Header search configuration */
     headerSearch?: HeaderSearchConfig;
     /** Main content */
@@ -332,6 +340,10 @@ export interface HeaderProps {
     /** Additional classes */
     class?: string;
 }
+/**
+ * Footer visual variant
+ */
+export type FooterVariant = 'default' | 'dark';
 /**
  * Props for Footer component
  */
@@ -342,6 +354,10 @@ export interface FooterProps {
     copyright?: string;
     /** Show logo in footer */
     showLogo?: boolean;
+    /** Use strong accent border (10px top border) */
+    strongBorder?: boolean;
+    /** Dark variant with brand colors */
+    variant?: FooterVariant;
     /** Custom content */
     children?: Snippet;
     /** Additional classes */

package/package.json

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