chore: update package dependencies and scripts

- Updated dependencies in package.json for improved stability and features.
- Changed the start script to run concurrently with watch and wds.
- Modified the release script to include build and type generation steps.
- Updated devDependencies for eslint, prettier, and rollup to their latest versions.

feat: enhance default data structure

- Added title and subtitle fields to default-data.json for better context.

feat: improve widget value component

- Introduced theme support in widget-value.ts to allow dynamic styling.
- Updated rendering logic to apply theme colors for background, title, and subtitle.
- Refactored styles to remove hardcoded colors and utilize theme properties.

Author: Marko Petzold

demo/index.html

@@ -10,6 +10,7 @@
                 padding: 0;
                 width: 100%;
                 height: 100%;
+                background-color: aliceblue;
             }
 
             * {
@@ -25,23 +26,27 @@
 
         <script type="module">
             import { html, render } from 'lit'
-            import '../dist/src/widget-value.js'
-            const response = await fetch('../src/default-data.json')
-            const data = await response.json()
-
+            import '../dist/widget-value.js'
+            const data = await fetch('../src/default-data.json').then((res) => res.json())
+            const themeObject = await fetch('themes/chalk.json').then((res) => res.json())
+            const theme = { theme_name: 'chalk', theme_object: themeObject }
+            render(
+                html`
+                    <widget-value-1.1.7 .theme="${theme}" .inputData=${data}>
+                        web component is not registered. Make sure to use the tag with the correct version
+                        string from the package.json
+                    </widget-value-1.1.7>
+                `,
+                document.getElementById('demo')
+            )
+            const widget = document.getElementById('demo').children[0]
             const keyPathsToRandomize = ['dataseries.0.data.0.value', 'settings.title']
-            setInterval(() => {
+            const inter = setInterval(() => {
                 const randomizedObj = randomizeObjectValues(data, keyPathsToRandomize)
 
-                // console.log('random', randomizedObj.dataseries[0].data[0]);
-                render(
-                    html`
-                        <widget-value-versionplaceholder .inputData=${randomizedObj}>
-                            some light-dom
-                        </widget-value-versionplaceholder>
-                    `,
-                    document.querySelector('#demo')
-                )
+                // console.log('random', randomizedObj.dataseries[0].data[0])
+                widget.inputData = randomizedObj
+                // clearInterval(inter)
             }, 1000)
         </script>
     </body>