@tuspe/components 1.7.2 → 1.7.4

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>
@@ -49,4 +53,8 @@
     grid-template-columns: 20px 1fr;
     line-height: 1.25;
   }
+
+  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/dist/Modal.svelte

@@ -51,17 +51,15 @@
     background-color: #fff;
     border-radius: 1rem;
     border: 2px solid var(--color-primary);
-    box-shadow: var(--shadow-md);
     margin-left: auto;
     margin-right: auto;
-    max-height: 85vh;
     max-width: 95vw;
     overflow: hidden;
     overscroll-behavior: contain;
     position: relative;
   }
   #modal-body {
-    max-height: 45vh;
+    max-height: 70vh;
     overflow-x: hidden;
     overflow-y: auto;
     padding: 1rem;

package/package.json

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