Add OwlBoard API Library

Add styling to UI Components

src/lib/components/ui/Textbox.svelte

@@ -72,6 +72,7 @@
 		transition: all 0.2s ease-in-out;
 		outline: none;
 		text-align: center;
+		box-shadow: var(--shadow-std);
 	}
 
 	.all-caps {

src/lib/components/ui/cards/BaseCard.svelte

@@ -60,6 +60,7 @@
 		font-family: 'URW Gothic', sans-serif;
 		color: var(--color-brand);
 		padding: 10px 0;
+		box-shadow: var(--shadow-std);
 	}
 
 	.header-content {

src/lib/components/ui/cards/pis/PisCode.svelte

@@ -3,6 +3,8 @@ import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
 import Textbox from '$lib/components/ui/Textbox.svelte';
 import Button from '$lib/components/ui/Button.svelte';
 
+let { onsearch }: { onsearch: (c: string) => void } = $props();
+
 let codeValue = $state('');
 
 function resetValues(): void {
@@ -18,7 +20,7 @@ function resetValues(): void {
             </div>
         </div>
         <div class="button-wrapper">
-            <Button>Search</Button>
+            <Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
             <Button onclick={resetValues}>Reset</Button>
         </div>
 	</div>

src/lib/components/ui/cards/pis/PisStartEndCard.svelte

@@ -3,6 +3,9 @@ import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
 import Textbox from '$lib/components/ui/Textbox.svelte';
 import Button from '$lib/components/ui/Button.svelte';
 
+let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
+
+
 let startValue = $state('');
 let endValue = $state('');
 
@@ -23,7 +26,7 @@ function resetValues(): void {
             </div>
         </div>
         <div class="button-wrapper">
-            <Button>Search</Button>
+            <Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
             <Button onclick={resetValues}>Reset</Button>
         </div>
 	</div>