@tuspe/components 1.8.10 → 1.8.12

package/README.md

@@ -203,14 +203,16 @@ Allows users to toggle between checked and unchecked states.
 
 ```TypeScript
   interface Props {
+    checked?: boolean
     children: Snippet
-    onchange?: () => void
-    checked: boolean
     disabled?: boolean
     group?: boolean
     id?: string
+    noLineHeight?: boolean
+    onchange?: () => void
     outerClass?: string
-    value?: string
+    required?: boolean
+    value?: number | string
   }
 ```
 

package/dist/Checkbox.svelte

@@ -9,17 +9,33 @@
     disabled?: boolean
     group?: boolean
     id?: string
+    noLineHeight?: boolean
     outerClass?: string
     required?: boolean
     value?: number | string
   }
 
-  let {children, onchange, checked = $bindable(false), disabled, group = $bindable(), id, outerClass, required, value, ...props}: Props = $props()
+  let {
+    children,
+    onchange,
+    checked = $bindable(false),
+    disabled,
+    group = $bindable(),
+    id,
+    noLineHeight = false,
+    outerClass,
+    required,
+    value,
+    ...props
+  }: Props = $props()
 
   let classes = $state('input-checkbox')
   if (outerClass) {
     classes += ` ${outerClass}`
   }
+  if (noLineHeight) {
+    classes += ' lh-none'
+  }
 </script>
 
 <label class={classes}>
@@ -59,6 +75,10 @@
     grid-template-columns: 20px 1fr;
   }
 
+  label:not(.lh-none) {
+    line-height: 1.25;
+  }
+
   sup {
     color: darkred;
   }

package/dist/Checkbox.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     disabled?: boolean;
     group?: boolean;
     id?: string;
+    noLineHeight?: boolean;
     outerClass?: string;
     required?: boolean;
     value?: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.8.10",
+  "version": "1.8.12",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",