@samuel-charpentier/sform 0.0.3 → 0.0.5

package/README.md

@@ -193,6 +193,7 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 | `showToggleIcon` | `Snippet<[passwordShown: boolean]>` | `undefined` | Custom toggle icon snippet         |
 | `prefix`         | `string \| Snippet`                 | `undefined` | Content before input               |
 | `suffix`         | `string \| Snippet`                 | `undefined` | Content after input                |
+| `autocomplete`   | `string`                            | `undefined` | HTML autocomplete attribute        |
 
 #### Number Input
 
@@ -221,11 +222,10 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 <Sfield field={fields.notes} type="textarea" label="Notes" prefix="📝" suffix="(max 500 chars)" />
 ```
 
-| Prop           | Type                | Default     | Description                 |
-| -------------- | ------------------- | ----------- | --------------------------- |
-| `prefix`       | `string \| Snippet` | `undefined` | Content before input        |
-| `suffix`       | `string \| Snippet` | `undefined` | Content after input         |
-| `autocomplete` | `string`            | `undefined` | HTML autocomplete attribute |
+| Prop     | Type                | Default     | Description          |
+| -------- | ------------------- | ----------- | -------------------- |
+| `prefix` | `string \| Snippet` | `undefined` | Content before input |
+| `suffix` | `string \| Snippet` | `undefined` | Content after input  |
 
 #### Select
 
@@ -242,9 +242,10 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 />
 ```
 
-| Prop      | Type                         | Default  | Description    |
-| --------- | ---------------------------- | -------- | -------------- |
-| `options` | `SelectOption[] \| string[]` | required | Select options |
+| Prop           | Type                         | Default     | Description                 |
+| -------------- | ---------------------------- | ----------- | --------------------------- |
+| `options`      | `SelectOption[] \| string[]` | required    | Select options              |
+| `autocomplete` | `string`                     | `undefined` | HTML autocomplete attribute |
 
 #### Checkbox
 
@@ -286,13 +287,14 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 />
 ```
 
-| Prop          | Type                        | Default     | Description            |
-| ------------- | --------------------------- | ----------- | ---------------------- |
-| `min`         | `number \| string`          | `0`         | Minimum value          |
-| `max`         | `number \| string`          | `100`       | Maximum value          |
-| `step`        | `number \| string`          | `1`         | Step increment         |
-| `showValue`   | `boolean`                   | `false`     | Show current value     |
-| `formatValue` | `(value: number) => string` | `undefined` | Format displayed value |
+| Prop           | Type                        | Default     | Description                 |
+| -------------- | --------------------------- | ----------- | --------------------------- |
+| `min`          | `number \| string`          | `0`         | Minimum value               |
+| `max`          | `number \| string`          | `100`       | Maximum value               |
+| `step`         | `number \| string`          | `1`         | Step increment              |
+| `showValue`    | `boolean`                   | `false`     | Show current value          |
+| `formatValue`  | `(value: number) => string` | `undefined` | Format displayed value      |
+| `autocomplete` | `string`                    | `undefined` | HTML autocomplete attribute |
 
 #### Toggle
 
@@ -365,6 +367,7 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 | `unmaskValue`         | `boolean`                | `true`      | Store unmasked value             |
 | `prefix`              | `string \| Snippet`      | `undefined` | Content before input             |
 | `suffix`              | `string \| Snippet`      | `undefined` | Content after input              |
+| `autocomplete`        | `string`                 | `undefined` | HTML autocomplete attribute      |
 
 **Mask Tokens:**
 

package/dist/Sform/inputs/CheckboxGroupInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { CheckboxGroupInputProps, SelectOption } from '../types.js';
+	import Fieldset from '../utils/Fieldset.svelte';
 
 	let {
 		field,
@@ -29,10 +30,7 @@
 	}
 </script>
 
-<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
-	{#if label}
-		<legend class={labelClass}>{label}</legend>
-	{/if}
+<Fieldset {label} {labelClass} {className} {disabled}>
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
@@ -48,20 +46,9 @@
 			<span class="sform-checkbox-label">{option.label}</span>
 		</label>
 	{/each}
-</fieldset>
+</Fieldset>
 
 <style>
-	.sform-checkbox-group {
-		border: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.sform-checkbox-group legend {
-		padding: 0;
-		margin-bottom: 0.5rem;
-	}
-
 	.sform-checkbox-option {
 		display: flex;
 		align-items: center;

package/dist/Sform/inputs/RadioInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { RadioInputProps, SelectOption } from '../types.js';
+	import Fieldset from '../utils/Fieldset.svelte';
 
 	let {
 		field,
@@ -29,10 +30,7 @@
 	}
 </script>
 
-<fieldset class="sform-radio-group {className ?? ''}" {disabled}>
-	{#if label}
-		<legend class={labelClass}>{label}</legend>
-	{/if}
+<Fieldset {label} {labelClass} {className} {disabled}>
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
@@ -48,7 +46,7 @@
 			<span class="sform-radio-label">{option.label}</span>
 		</label>
 	{/each}
-</fieldset>
+</Fieldset>
 
 <style>
 	.sform-radio-group {

package/dist/Sform/types.d.ts

@@ -458,8 +458,6 @@ export interface BaseInputComponentProps {
     disabled?: boolean;
     /** Whether input is readonly */
     readonly?: boolean;
-    /** Autocomplete attribute */
-    autocomplete?: HTMLInputAttributes['autocomplete'];
     /** Whether to show validation state (controls aria-invalid) */
     showIssues?: boolean;
     /** Blur handler */
@@ -512,6 +510,8 @@ export interface NumberInputComponentProps extends BaseInputComponentProps, Inpu
     align?: 'start' | 'end';
     /** Maximum decimal places allowed (0 = integers only, undefined = no limit) */
     maxDecimals?: number;
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
 /**
  * Props for text input component (text, email, tel, url, search, date, etc.)
@@ -519,11 +519,15 @@ export interface NumberInputComponentProps extends BaseInputComponentProps, Inpu
 export interface TextInputComponentProps extends BaseInputComponentProps, InputAffixProps {
     /** Input type - text-like types only */
     type: TextInputType;
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
 /**
  * Props for textarea input component
  */
 export interface TextareaInputProps extends BaseInputComponentProps, InputAffixProps {
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
 /**
  * Props for select input component
@@ -531,6 +535,8 @@ export interface TextareaInputProps extends BaseInputComponentProps, InputAffixP
 export interface SelectInputProps extends BaseInputComponentProps {
     /** Options for select */
     options: SelectOption[] | string[];
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
 /**
  * Props for checkbox input component (single yes/no)
@@ -628,6 +634,8 @@ export interface RangeInputProps extends NumericInputComponentProps {
     showValue?: boolean;
     /** Format function for value display */
     formatValue?: (value: number) => string;
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
 /**
  * Props for password input component
@@ -636,6 +644,8 @@ export interface PasswordInputProps extends BaseInputComponentProps {
     /** Whether to show the password visibility toggle */
     showToggle?: boolean;
     showToggleIcon?: Snippet<[boolean]>;
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
 /**
  * Props for toggle input component
@@ -681,4 +691,16 @@ export interface MaskedInputProps extends BaseInputComponentProps, InputAffixPro
     showMaskPlaceholder?: boolean;
     /** Whether to store the unmasked (raw) value. If true, stores '1234567890'. If false, stores '(123) 456-7890'. Default: true */
     unmaskValue?: boolean;
+    /** Autocomplete attribute */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
 }
+/**
+ * Props for Fieldset utils component
+ */
+export type FieldsetProps = {
+    label?: string;
+    labelClass?: string;
+    className?: string;
+    disabled?: boolean;
+    children: Snippet;
+};

package/dist/Sform/utils/Fieldset.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FieldsetProps } from '../types';
+
+	let { label, labelClass, className, disabled, children }: FieldsetProps = $props();
+</script>
+
+<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
+	{#if label}
+		<legend class={labelClass}>{label}</legend>
+	{/if}
+	{@render children()}
+</fieldset>
+
+<style>
+	.sform-checkbox-group legend {
+		padding: 0.25rem 0.5rem;
+		margin: 0;
+		border: var(--sform-border-width) solid var(--sform-border);
+		background: var(--sform-bg);
+		border-radius: 0.25rem;
+		line-height: 1;
+	}
+</style>

package/dist/Sform/utils/Fieldset.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldsetProps } from '../types';
+declare const Fieldset: import("svelte").Component<FieldsetProps, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",