@gleich/ui 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Matt Gleich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# ui
+
+shared ui components used across my personal projects

package/dist/card.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children, padding = '10px' }: { children: Snippet; padding?: string } = $props();
+</script>
+
+<div style:--card-padding={padding}>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		border: 1px solid var(--border);
+		padding: var(--card-padding);
+		border-radius: var(--border-radius);
+		box-shadow: var(--box-shadow);
+		background-color: var(--background);
+		overflow: hidden;
+	}
+
+	@media (max-width: 400px) {
+		div {
+			padding: calc(var(--card-padding) / 2);
+		}
+	}
+</style>

package/dist/card.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    padding?: string;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/copyright.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	const { repo }: { repo: string } = $props();
+</script>
+
+<div class="container">
+	<p class="copyright">
+		© Matt Gleich {new Date().getFullYear()}<span class="all-rights-reserved">
+			. All rights reserved.</span
+		>
+	</p>
+	<a class="github-link" href={`https://github.com/${repo}`} target="_blank">
+		<div class="github-icon">
+			<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+					fill="currentColor"
+				/></svg
+			>
+		</div>
+		{repo}</a
+	>
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		border-top: 0.5px solid var(--border);
+		padding: 5px 0;
+		margin-top: 30px;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.github-icon {
+		color: grey;
+		width: 15px;
+		height: 15px;
+	}
+
+	.github-link {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.github-link,
+	.copyright {
+		color: grey;
+	}
+
+	@media (max-width: 530px) {
+		.all-rights-reserved {
+			display: none;
+		}
+	}
+</style>

package/dist/copyright.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    repo: string;
+};
+declare const Copyright: import("svelte").Component<$$ComponentProps, {}, "">;
+type Copyright = ReturnType<typeof Copyright>;
+export default Copyright;

package/dist/dynamic-head.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	let {
+		title,
+		description,
+		opengraphImage = {
+			url: 'https://mattglei.ch/opengraph.png',
+			width: '1200',
+			height: '630'
+		},
+		keywords = [],
+		iconRoot = 'https://mattglei.ch'
+	}: {
+		title: string;
+		description: string;
+		opengraphImage?: OpenGraphImage;
+		keywords?: string[];
+		iconRoot?: string;
+	} = $props();
+
+	export interface OpenGraphImage {
+		url: string;
+		width: string;
+		height: string;
+	}
+
+	keywords = keywords.concat([
+		'matt gleich',
+		'matt',
+		'gleich',
+		'matthew gleich',
+		'matthew',
+		'gleich',
+		'photography',
+		'coding',
+		'cycling',
+		'rit',
+		'stainless',
+		'bottomline technologies',
+		'kcf technologies',
+		'kcf'
+	]);
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<link rel="canonical" href={page.url.href.replaceAll('http://', 'https://').replace(/\/$/, '')} />
+	<meta name="description" content={description} />
+	<meta name="url" content={page.url.href} />
+
+	<meta name="author" content="Matt Gleich" />
+	<meta name="keywords" content={keywords.join(', ')} />
+
+	<!-- icons -->
+	<link rel="apple-touch-icon" href={`${iconRoot}/apple-touch-icon.png`} sizes="180x180" />
+	<link
+		rel="icon"
+		type="image/png"
+		sizes="192x192"
+		href={`${iconRoot}/android-chrome-192x192.png`}
+	/>
+	<link
+		rel="icon"
+		type="image/png"
+		sizes="512x512"
+		href={`${iconRoot}/android-chrome-512x512.png`}
+	/>
+	<link rel="icon" href={`${iconRoot}/favicon-32x32.png`} sizes="32x32" />
+	<link rel="icon" href={`${iconRoot}/favicon-16x16.png`} sizes="16x16" />
+	<link rel="mask-icon" href={`${iconRoot}/safari-pinned-tab.svg`} color="#292B2D" />
+	<link rel="icon" href={`${iconRoot}/favicon.ico`} />
+
+	<!-- opengraph -->
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={title} />
+	<meta property="og:url" content={page.url.href} />
+	<meta property="og:site_name" content="mattglei.ch" />
+	<meta property="og:locale" content="en-US" />
+	<meta property="og:image" content={opengraphImage.url} />
+	<meta property="og:image:width" content={opengraphImage.width} />
+	<meta property="og:image:height" content={opengraphImage.height} />
+	<meta property="og:type" content="website" />
+
+	<!-- twitter -->
+	<meta property="twitter:card" content="summary_large_image" />
+	<meta property="twitter:creator" content="@matt_gleich" />
+	<meta property="twitter:title" content={title} />
+	<meta property="twitter:description" content={description} />
+	<meta property="twitter:image" content={opengraphImage.url} />
+	<meta property="twitter:image:width" content={opengraphImage.width} />
+	<meta property="twitter:image:height" content={opengraphImage.height} />
+</svelte:head>

package/dist/dynamic-head.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface OpenGraphImage {
+    url: string;
+    width: string;
+    height: string;
+}
+type $$ComponentProps = {
+    title: string;
+    description: string;
+    opengraphImage?: OpenGraphImage;
+    keywords?: string[];
+    iconRoot?: string;
+};
+declare const DynamicHead: import("svelte").Component<$$ComponentProps, {}, "">;
+type DynamicHead = ReturnType<typeof DynamicHead>;
+export default DynamicHead;

package/dist/error.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	const { msg }: { msg: string } = $props();
+</script>
+
+<div class="container">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"
+		></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"
+		></line></svg
+	>
+	<h1>{msg}</h1>
+</div>
+
+<style>
+	svg {
+		height: 40px;
+		width: auto;
+		animation: blink 1s infinite;
+	}
+
+	.container {
+		display: flex;
+		align-items: center;
+		gap: 20px;
+		background-color: var(--red-background);
+		color: var(--red-foreground);
+		padding: 30px;
+		border-radius: var(--border-radius);
+	}
+
+	h1 {
+		font-size: 25px;
+		font-family: 'IBM Plex Sans';
+	}
+
+	@keyframes blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+</style>

package/dist/error.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    msg: string;
+};
+declare const Error: import("svelte").Component<$$ComponentProps, {}, "">;
+type Error = ReturnType<typeof Error>;
+export default Error;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/dist/logo.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	const { invert = false, stroke = '5' }: { invert?: boolean; stroke?: string } = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="45 45 410 410">
+	<path
+		stroke-width={stroke}
+		d="M101 148c0-24 19-45 43-47l-1 2-12 33-30 13v-1Zm44-45 1-2h40l-21 21-32 14 12-33Zm43-4h-40l-2 1c11-22 36-33 59-25l5 2-22 22Zm-20 22 20-20h29l-49 20Zm52-22h-30l22-22 33 12-25 10Zm-54 25 55-23h56l55 20 45 45 23 55v56l-21 55-44 45-55 23h-56l-56-21-44-44-23-55v-56l20-56 45-44Zm106-25h-48l23-9 25 9Zm58 20-49-18h31l18 18Zm-19-20h-34l-28-10 36-15 26 25Zm22 21-19-19h36l12 30-29-11Zm16-21h-36l-26-25v-1c24-10 52 2 62 26Zm15 32-12-30c25 0 45 19 47 43l-1-1-34-12Zm33 14 2 1 1 2v38l-22-21-13-32 32 12Zm4 43v-42c22 11 33 36 24 59l-1 5-23-22Zm-21-20 20 20v29l-20-49Zm21 52v-30l22 22-12 33-10-25Zm0 52v-48l9 23-9 25Zm0 5 10-28 15 36-25 26v-34Zm0 36 26-26c10 24-1 52-25 62h-1v-36Zm-1 1v36l-30 12 10-29 20-19Zm-31 50 31-12c0 25-19 45-44 47l1-1 12-34Zm9-28-10 27-30 12 40-39Zm-42 42 31-13-11 32-1 2-3 1h-38l22-22Zm-52 22 48-20-20 20h-28Zm-4 1h31l-22 22-33-12 24-10Zm-26 11 33 12-3 4a47 47 0 0 1-67 0l-1-1 38-15Zm-2-1-37 15-25-25h34l28 10Zm-64-10 26 26h-1c-24 10-52-1-62-25v-1h37Zm32-1h-32l-17-18 49 18Zm-53-20 19 20h-35l-13-30 29 10Zm-42-42 40 40-28-10-12-30Zm-3-2 14 31-33-11-2-1v-41l21 22Zm-23 16 1 2a47 47 0 0 1-25-59l2-5 22 23v39Zm0-41-22-22 12-33 10 24v31Zm-10-57-13 33-3-3a47 47 0 0 1 0-67v-1l16 38Zm10 22-9-22 9-26v48Zm0-52-10 28-15-37 25-25v34Zm20-53-18 49v-32l18-17Zm1-4-19 19v-35l30-13-11 29Zm-46 47-1-1c-10-24 2-52 26-62v37l-25 26Zm75 186h-1c-24 0-45-19-47-44l2 1 33 12 13 31Zm205 1a47 47 0 0 1-59 24l-5-1 23-23h41Zm70-188 4 4c18 18 18 48 0 67h-1l-15-37 12-34ZM247 89l-34-13 4-3c18-19 48-19 67 0l-37 16Zm-124 76 9-28 30-12-39 40Zm-22 147v-28l20 48-20-20Zm153 98-26-9h48l-22 9Zm146-98-18 18 18-49v31Zm-37-180 12 30-39-39 27 9Z"
+		class="lines"
+		style={`stroke: ${invert ? 'var(--background)' : 'var(--foreground)'}`}
+	/>
+	<path
+		d="m198 241 1-3a99 99 0 0 1 4-12c2-5 6-8 10-8 3 0 6 1 8 4 2 2 4 4 4 8 6-8 13-12 21-12 4 0 7 1 10 3s4 6 5 10c6-8 13-13 21-13 5 0 8 2 11 4s5 6 5 11c0 6-3 17-9 32l-3 11c0 3 1 4 3 4 6 0 10-6 14-18l1-2h1l2 1v3a47 47 0 0 1-6 12l-5 5c-2 2-4 3-7 3s-6-2-8-4-3-5-3-8l2-9c6-16 9-27 9-32 0-6-2-9-7-9-7 0-14 5-20 15l-4 10a125 125 0 0 0-2 10l-6 23c-1 2-2 4-5 4l-3-2-1-2v-2l10-38 1-9c0-6-2-9-7-9-7 0-14 5-20 15l-3 10-2 5-1 5-5 23c-1 2-3 4-6 4l-3-2-1-2 1-2 11-43 1-8c0-4-2-5-4-5s-4 1-6 4l-4 13-1 3h-2l-2-1Z"
+		style={`fill: ${invert ? 'var(--background)' : 'var(--foreground)'}`}
+	/>
+</svg>
+
+<style>
+	svg {
+		height: 100%;
+		width: 100%;
+	}
+
+	.lines {
+		animation: spin infinite 20s linear;
+		transform-origin: 250px 250px;
+		transform-box: view-box;
+		will-change: transform;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/logo.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    invert?: boolean;
+    stroke?: string;
+};
+declare const Logo: import("svelte").Component<$$ComponentProps, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/scrolling.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	const {
+		gap = 15,
+		delay = 2,
+		speed = 15,
+		children
+	}: {
+		gap?: number;
+		speed?: number;
+		delay?: number;
+		children: Snippet;
+	} = $props();
+
+	let containerWidth = $state(0);
+	let marqueeWidth = $state(0);
+	let overflowing = $derived(containerWidth < marqueeWidth);
+	let duration = $derived(
+		marqueeWidth < containerWidth ? containerWidth / speed : (marqueeWidth + gap) / speed
+	);
+</script>
+
+<div
+	bind:clientWidth={containerWidth}
+	class="container"
+	style:--duration={`${duration}s`}
+	style:--delay={`${delay}s`}
+	style:--gradient-width={overflowing ? '10px' : '0px'}
+	style:--gap={overflowing ? `${gap}px` : '0px'}
+>
+	<div
+		class={`marquee ${overflowing ? 'scroll-animation' : ''}`}
+		style={overflowing ? 'padding-left: 10px' : ''}
+	>
+		<div bind:clientWidth={marqueeWidth} class="initial-child-container">
+			{@render children()}
+		</div>
+	</div>
+	{#if overflowing}
+		<div class="marquee scroll-animation">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		overflow-x: hidden;
+		display: flex;
+		flex-direction: row;
+		position: relative;
+	}
+
+	.container::before,
+	.container::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: var(--gradient-width);
+		z-index: 2;
+		pointer-events: none;
+	}
+
+	.container::before {
+		left: 0;
+		background: linear-gradient(to right, var(--background), rgba(255, 255, 255, 0));
+	}
+
+	.container::after {
+		right: 0;
+		background: linear-gradient(to left, var(--background), rgba(255, 255, 255, 0));
+	}
+
+	.marquee {
+		flex: 0 0 auto;
+		min-width: 100%;
+		z-index: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding-right: var(--gap);
+	}
+
+	.scroll-animation {
+		animation: scroll var(--duration) linear var(--delay) infinite;
+	}
+
+	.initial-child-container {
+		flex: 0 0 auto;
+		display: flex;
+		min-width: auto;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	@keyframes scroll {
+		0% {
+			transform: translateX(0%);
+		}
+		100% {
+			transform: translateX(-100%);
+		}
+	}
+</style>

package/dist/scrolling.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    gap?: number;
+    speed?: number;
+    delay?: number;
+    children: Snippet;
+};
+declare const Scrolling: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scrolling = ReturnType<typeof Scrolling>;
+export default Scrolling;

package/dist/ui.css

@@ -0,0 +1,254 @@
+:root {
+	--border-radius: 5px;
+	--box-shadow-color: rgb(21, 21, 21);
+	--box-shadow: 0px 3px 10px var(--box-shadow-color);
+
+	--button-background: rgb(53, 53, 53);
+	--button-foreground: #fff;
+	--button-background-hover: rgb(51, 51, 53);
+
+	--foreground: white;
+	--actual-background: rgb(21, 25, 27);
+	/* the actual color of the background once the textured background is applied */
+	--actual-background-color: rgb(34, 35, 37);
+	--background: rgb(41, 43, 45);
+	--border: rgb(67, 67, 67);
+
+	--green-foreground: rgb(0 217 107);
+	--green-background: rgb(37 54 48);
+	--green-border: rgb(40 86 61);
+
+	--blue-foreground: #2b95ff;
+
+	--red-foreground: rgb(243, 9, 40);
+	--red-background: rgb(61 36 38);
+	--red-border: rgb(134 34 41);
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--box-shadow-color: rgb(188, 188, 188);
+		--box-shadow: 0px 4px 8px var(--box-shadow-color);
+
+		--button-background: rgb(238, 238, 238);
+		--button-foreground: black;
+		--button-background-hover: rgb(237, 237, 237);
+
+		--foreground: rgb(0, 0, 0);
+		--actual-background: #f4f4f4;
+		--background: #f4f4f4;
+		--actual-background-color: #f4f4f4;
+		--border: rgb(186, 186, 186);
+
+		--blue-foreground: #0072e5;
+
+		--green-foreground: rgb(15, 70, 17);
+		--green-background: rgb(179, 228, 183);
+		--green-border: rgb(67, 160, 71);
+
+		--red-foreground: rgb(255, 255, 255);
+		--red-background: rgb(224, 18, 18);
+		--red-border: rgb(255, 0, 0);
+	}
+
+	html {
+		color-scheme: light;
+	}
+}
+
+html,
+body,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	padding: 0;
+	margin: 0;
+}
+
+html {
+	color-scheme: dark;
+	color: var(--foreground);
+	background-color: var(--actual-background);
+	position: relative;
+	scrollbar-width: 0.2rem;
+	overflow-y: scroll;
+
+	/* default font configuration */
+	font-feature-settings: 'zero';
+	font-size: 16px;
+
+	/* font optimizations */
+	-webkit-font-smoothing: antialiased;
+	-webkit-text-size-adjust: 100%;
+	text-rendering: optimizeLegibility;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* textured background */
+html:before {
+	content: '';
+	background-color: transparent;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='10' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
+	background-repeat: repeat;
+	background-size: 182px;
+	opacity: 0.15;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	position: absolute;
+	pointer-events: none;
+	z-index: -1;
+}
+
+::selection {
+	background-color: var(--foreground);
+	text-decoration-color: var(--background);
+	color: var(--background);
+}
+
+::-moz-selection {
+	background-color: var(--foreground);
+	text-decoration-color: var(--background);
+	color: var(--background);
+}
+
+/* custom scrollbar */
+*::-webkit-scrollbar {
+	width: 0.2rem;
+	height: 0.2rem;
+}
+
+*::-webkit-scrollbar-track {
+	background: var(--border);
+}
+
+*::-webkit-scrollbar-thumb {
+	background: var(--foreground);
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+a {
+	color: var(--blue-foreground);
+}
+
+img {
+	-webkit-user-drag: none;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 800;
+}
+
+h1 {
+	font-size: 2.9rem;
+}
+
+h2 {
+	font-size: 2rem;
+}
+
+h3 {
+	font-size: 1.7rem;
+}
+
+h4 {
+	font-size: 1.45rem;
+}
+
+@media (max-width: 500px) {
+	html {
+		font-size: 15px;
+	}
+
+	h2 {
+		font-size: min(1.9rem, 13vw);
+	}
+
+	h3 {
+		font-size: 1.5rem;
+	}
+
+	h4 {
+		font-size: 1.3rem;
+	}
+}
+
+button {
+	background-color: var(--button-background);
+	color: var(--button-foreground);
+	border: 1px solid var(--border);
+	font-family: inherit;
+	font-size: inherit;
+	border-radius: var(--border-radius);
+	transition:
+		background-color 0.07s linear,
+		box-shadow 0.07s linear;
+	box-shadow:
+		var(--box-shadow),
+		inset 0px 1px 8px transparent;
+	will-change: transform, opacity;
+}
+
+button:hover {
+	background-color: var(--button-background-hover);
+	cursor: pointer;
+	box-shadow:
+		0px 1px 5px transparent,
+		inset 0px 1px 8px var(--box-shadow-color);
+}
+
+button:focus {
+	outline: 2px solid var(--blue-foreground);
+	outline-offset: 2px;
+}
+
+ol,
+ul {
+	padding-left: 5px;
+	list-style-position: inside;
+}
+
+ol,
+ul {
+	margin: 0;
+}
+
+ol > li {
+	color: var(--green-foreground);
+	background-color: var(--green-background);
+	padding: 2px 5px;
+	margin-top: 5px;
+	width: fit-content;
+	border-radius: 2px;
+}
+
+ol {
+	padding-bottom: 10px;
+}
+
+ol p {
+	padding-left: 25px;
+}
+
+ol > p {
+	padding-top: 5px;
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+	"name": "@gleich/ui",
+	"version": "0.0.2",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev --open",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.16.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.5"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
+	}
+}