@classic-homes/theme-svelte 1.24.1 → 1.25.0

package/dist/lib/components/FormField.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
   import Label from './Label.svelte';
   import Input from './Input.svelte';
+  import PasswordInput from './PasswordInput.svelte';
   import Textarea from './Textarea.svelte';
 
   interface Props {
     /** Label text */
     label: string;
+    /** Content beside the label, e.g. a "Forgot password?" link */
+    labelAction?: Snippet;
     /** Input ID for association */
     id: string;
     /** Input type (text, email, password, tel, url, number, date, textarea) */
@@ -41,6 +45,7 @@
 
   let {
     label,
+    labelAction,
     id,
     type = 'text',
     value = $bindable(''),
@@ -75,14 +80,25 @@
 </script>
 
 <div class={cn('space-y-2', className)}>
+  {#snippet fieldLabel()}
+    <Label for={id} {disabled}>
+      {label}
+      {#if required}
+        <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+        <span class="sr-only">(required)</span>
+      {/if}
+    </Label>
+  {/snippet}
+
   <!-- Label with required indicator -->
-  <Label for={id} {disabled}>
-    {label}
-    {#if required}
-      <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
-      <span class="sr-only">(required)</span>
-    {/if}
-  </Label>
+  {#if labelAction}
+    <div class="flex items-center justify-between gap-2">
+      {@render fieldLabel()}
+      {@render labelAction()}
+    </div>
+  {:else}
+    {@render fieldLabel()}
+  {/if}
 
   <!-- Input or Textarea based on type -->
   {#if type === 'textarea'}
@@ -101,6 +117,23 @@
       class={inputClasses}
       {...restProps}
     />
+  {:else if type === 'password'}
+    <!-- PasswordInput adds the show/hide toggle a bare type="password" Input lacks -->
+    <PasswordInput
+      {id}
+      bind:value
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      {name}
+      {autocomplete}
+      {onValueChange}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={ariaDescribedBy}
+      class={inputClasses}
+      {...restProps}
+    />
   {:else}
     <Input
       {id}

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

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 interface Props {
     /** Label text */
     label: string;
+    /** Content beside the label, e.g. a "Forgot password?" link */
+    labelAction?: Snippet;
     /** Input ID for association */
     id: string;
     /** Input type (text, email, password, tel, url, number, date, textarea) */

package/dist/lib/components/HeaderSearch.svelte

@@ -102,6 +102,16 @@
   let inputRef: HTMLInputElement | undefined = $state();
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
+  // The shortcut hint names the platform's modifier. The server cannot know the
+  // platform, so it renders "Ctrl" and Apple devices switch to ⌘ once mounted.
+  let modifierKey = $state('Ctrl');
+  $effect(() => {
+    const platform =
+      (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData
+        ?.platform || navigator.platform;
+    if (/mac|iphone|ipad|ipod/i.test(platform)) modifierKey = '⌘';
+  });
+
   function isGrouped(
     value: SearchResultItem[] | SearchResultGroup[]
   ): value is SearchResultGroup[] {
@@ -228,7 +238,7 @@
         className
       )}
       aria-label="Search"
-      title={enableShortcut ? `Search (⌘/${shortcutKey.toUpperCase()})` : 'Search'}
+      title={enableShortcut ? `Search (${modifierKey}+${shortcutKey.toUpperCase()})` : 'Search'}
     >
       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path
@@ -264,7 +274,7 @@
         <kbd
           class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex"
         >
-          <span class="text-xs">⌘</span>{shortcutKey.toUpperCase()}
+          <span class="text-xs">{modifierKey}</span>{shortcutKey.toUpperCase()}
         </kbd>
       {/if}
     </button>

package/package.json

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