@tuspe/components 1.7.1 → 1.7.3

package/dist/Checkbox.svelte

@@ -9,15 +9,19 @@
     disabled?: boolean
     id?: string
     outerClass?: string
+    required?: boolean
     value?: string
   }
 
-  let {children, onchange, checked = $bindable(false), disabled, id, outerClass, value}: Props = $props()
+  let {children, onchange, checked = $bindable(false), disabled, id, outerClass, required, value}: Props = $props()
 </script>
 
 <label class={outerClass}>
-  <input bind:checked disabled={disabled || $loading} {id} {onchange} type="checkbox" {value} />
-  <span>{@render children?.()}</span>
+  <input bind:checked disabled={disabled || $loading} {id} {onchange} {required} type="checkbox" {value} />
+  <span>
+    {@render children?.()}
+    {#if required}<sup>*</sup>{/if}
+  </span>
 </label>
 
 <style scoped>
@@ -25,7 +29,6 @@
     accent-color: var(--color-primary);
     border: 1px solid var(--color-border);
     height: 20px;
-    margin-right: 10px;
     outline: none;
     vertical-align: middle;
     width: 20px;
@@ -42,14 +45,16 @@
   }
 
   label {
-    display: flex;
     align-items: center;
     cursor: pointer;
-    line-height: 1.25;
+    display: grid;
     font-size: 1rem;
+    gap: 1rem;
+    grid-template-columns: 20px 1fr;
+    line-height: 1.25;
   }
 
-  span {
-    margin-top: 1px;
+  sup {
+    color: darkred;
   }
 </style>

package/dist/Checkbox.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     disabled?: boolean;
     id?: string;
     outerClass?: string;
+    required?: boolean;
     value?: string;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;

package/package.json

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