Merge branch 'main' into 123-poc-wc-events

Author: maxfriedmann

package-lock.json

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import ComponentPageCard from "./ComponentPageCard.svelte";
+
 	import type { ComponentPropDefinition } from "./component-prop-definition";
+	import ComponentPageHeader from "./ComponentPageHeader.svelte";
 
 	let {
 		title,
@@ -19,17 +21,14 @@
 </script>
 
 <div class="flex flex-col gap-4">
-	<div class="text-4xl tracking-wider">{title}</div>
-	{#if description}
-		<div>{description}</div>
-	{/if}
+	<ComponentPageHeader {title} {description} />
 	{#if demoComponent}
 		<ComponentPageCard>
 			{@render demoComponent()}
 		</ComponentPageCard>
 	{/if}
 	{#if props}
-		<div class="text-2xl tracking-wider mt-12">Props</div>
+		<ComponentPageHeader title="Props" level="2" />
 		<ComponentPageCard>
 			<table class="table table-zebra">
 				<thead>
@@ -54,7 +53,7 @@
 		</ComponentPageCard>
 	{/if}
 	{#if features}
-		<div class="text-2xl tracking-wider mt-12">Features</div>
+		<ComponentPageHeader title="Features" level="2" />
 		{@render features()}
 	{/if}
 </div>

src/lib/docs/ComponentHeader.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-
+	
 	let { title, description, children }: { title: string; description?: string; children: Snippet } =
 		$props();
 </script>
 
-<div class="flex flex-col gap-4">
-	<div class="p-2">{title}</div>
-	{#if description}
-		<div>{description}</div>
-	{/if}
-	<div class="p-4">
-		{@render children()}
+<div class="card card-bordered card-compact bg-white">
+	<div class="card-body">
+		<div class="card-title">{title}</div>
+		{#if description}
+			<div class="card-subtitle">{description}</div>
+		{/if}
+		<div class="p-4">
+			{@render children()}
+		</div>
 	</div>
 </div>

src/lib/docs/ComponentPage.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	let {
+		title,
+		description,
+		level = "1"
+	}: { title: string; description?: string; level?: string } = $props();
+</script>
+
+<div class="flex flex-col gap-4 mb-4 pt-4">
+	<div class="tracking-wider level-{level}">{title}</div>
+	{#if description}
+		<div>{description}</div>
+	{/if}
+</div>
+
+<style>
+	.level-1 {
+		font-size: 3rem;
+		font-weight: 300;
+	}
+
+	.level-2 {
+		font-size: 1.5rem;
+		font-weight: 400;
+		text-transform: uppercase;
+		border-bottom: 8px solid #dde1e6;
+	}
+
+	.level-3 {
+		font-size: 1rem;
+		font-weight: 400;
+	}
+</style>

src/lib/docs/ComponentPageFeature.svelte

@@ -1,15 +1,14 @@
 <script>
-	import ComponentHeader from "$lib/docs/ComponentHeader.svelte";
-	import ComponentSubHeader from "$lib/docs/ComponentSubHeader.svelte";
+	import ComponentPageHeader from "$lib/docs/ComponentPageHeader.svelte";
 </script>
 
-<ComponentHeader
+<ComponentPageHeader
 	title="Svelte UI"
 	description="Tiny library for Svelte 5 and DaisyUI, published as multi entry ESM module. 
 "
 />
 
-<ComponentSubHeader title="Dependencies"></ComponentSubHeader>
+<ComponentPageHeader title="Dependencies" level="2"></ComponentPageHeader>
 This UI library is based on
 <div class="flex flex-col gap-2 p-4">
 	<li>Svelte 5</li>
@@ -20,9 +19,9 @@ This UI library is based on
 	<li>i18next</li>
 </div>
 
-<ComponentSubHeader title="Purpose"></ComponentSubHeader>
+<ComponentPageHeader title="Purpose" level="2"></ComponentPageHeader>
 We built this library because at the time of creation there were no libraries that supported Svelte 5,
 DaisyUI as well as all needed Forms Inputs.
 
-<ComponentSubHeader title="License"></ComponentSubHeader>
+<ComponentPageHeader title="License" level="2"></ComponentPageHeader>
 MIT

src/lib/docs/ComponentPageHeader.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import ComponentCode from "$lib/docs/ComponentCode.svelte";
-	import ComponentHeader from "$lib/docs/ComponentHeader.svelte";
+	import ComponentPageHeader from "$lib/docs/ComponentPageHeader.svelte";
 	import ComponentPlayground from "$lib/docs/ComponentPlayground.svelte";
 	import Overlay from "$lib/modules/layout/overlay/Overlay.svelte";
 </script>
 
-<ComponentHeader
+<ComponentPageHeader
 	title="Overlay"
 	description="Overlay is a component that can be used to show a floating element on top of another element. It is useful for creating dropdowns, modals, popovers, etc."
 />

src/lib/docs/ComponentSubHeader.svelte

@@ -1,20 +1,19 @@
 <script>
 	import ComponentCode from "$lib/docs/ComponentCode.svelte";
-	import ComponentHeader from "$lib/docs/ComponentHeader.svelte";
-	import ComponentSubHeader from "$lib/docs/ComponentSubHeader.svelte";
+	import ComponentPageHeader from "$lib/docs/ComponentPageHeader.svelte";
 	import { InViewport } from "$lib/modules/layout";
 
 	function inViewportEvent(event) {
 		console.log("InViewport Event: ", event.detail);
 	}
 </script>
 
-<ComponentHeader
+<ComponentPageHeader
 	title="In Viewport"
 	description="The component itself is invisible. But whenever the component scrolls into viewport, it dispatches an event. This can be used to trigger animations or other actions like an infinite scroll concept."
-></ComponentHeader>
+></ComponentPageHeader>
 
-<ComponentSubHeader title="Usage"></ComponentSubHeader>
+<ComponentPageHeader title="Usage" level="2"></ComponentPageHeader>
 <ComponentCode
 	>{`<InViewport on:event={(event) => {
         if (event === true) {
@@ -26,7 +25,7 @@
 </InViewport>`}
 </ComponentCode>
 
-<ComponentSubHeader title="Demo"></ComponentSubHeader>
+<ComponentPageHeader title="Demo" level="2"></ComponentPageHeader>
 The component is attached at the bottom of the page. Please open the javascript console and scroll down
 to see the log messages.
 

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ComponentHeader from "$lib/docs/ComponentHeader.svelte";
+	import ComponentPageHeader from "$lib/docs/ComponentPageHeader.svelte";
 	import ComponentPlayground from "$lib/docs/ComponentPlayground.svelte";
 	import { DateTimeRangeInput } from "$lib/modules/forms";
 
@@ -9,7 +9,7 @@
 	let toDefault = 1719220800000;
 </script>
 
-<ComponentHeader
+<ComponentPageHeader
 	title="Date Time Range Input"
 	description="An input component where date ranges can be defined. In addition, to make life easier for customers, 9 presets are shown when clicking on the calendar icon."
 />