@classic-homes/theme-svelte 1.13.1 → 1.13.2

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/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/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/package.json

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