chore: Upgrade dependencies

Debugging storybook docs doesn't work. The build output works.

book/stories/ana-clock.mdx

@@ -0,0 +1,85 @@
+import { Story, Canvas, Meta } from '@storybook/blocks'
+import * as AnaClockStories from './ana-clock.stories.js'
+
+<Meta of={AnaClockStories} />
+
+# \<ana-clock>
+
+Showing an analogue clock known from Svelte examples.
+
+```html
+<ana-clock secondhand="true" markers="sixty" offset="0"></ana-clock>
+
+<script type="module" src="https://unpkg.com/[email protected]/dist/ana-clock.mjs"></script>
+```
+
+### Attributes
+
+| Attribute    | Description                       | Values                                  | Default |
+|--------------|-----------------------------------|-----------------------------------------|---------|
+| `markers`    | chooses the density of markers    | `sixty` \| `twelve` \| `four` \| `none` | `sixty` |
+| `secondhand` | disables the second hand          | boolean                                 | `true`  |
+| `offset`     | adds the offset in minutes to UTC | number of minutes                       | `0`     |
+
+### Methods
+
+| Name        | Description                                                 |
+|-------------|-------------------------------------------------------------|
+| `stop()`    | stops the clock                                             |
+| `restart()` | sets the clock to the current time and starts ticking again |
+
+### Events
+
+| Name   | Triggered                                | Details         |
+|--------|------------------------------------------|-----------------|
+| `tick` | when the second or the minute hand moves | current `Date`  |
+
+## Stories
+
+### Default
+
+Default look & feel:
+
+<Canvas withToolbar>
+  <Story of={AnaClockStories.Default} />
+</Canvas>
+
+### Twelve Markers
+
+Show twelwe markers (for five-minute intervals) only:
+
+<Canvas withToolbar>
+  <Story of={AnaClockStories.TwelveMarkers} />
+</Canvas>
+
+### Four Markers
+
+Show four markers (for quoters of hour) only:
+
+<Canvas withToolbar>
+  <Story of={AnaClockStories.FourMarkers} />
+</Canvas>
+
+### No Markers
+
+Show no markers:
+
+<Canvas withToolbar>
+  <Story of={AnaClockStories.NoMarkers} />
+</Canvas>
+
+### No Second Hand
+
+Show no second hand:
+
+<Canvas withToolbar>
+  <Story of={AnaClockStories.NoSecondHand} />
+</Canvas>
+
+### Use CET TZ
+
+Shows the time in the CET time zone (+01:00):
+
+<Canvas withToolbar>
+  <Story of={AnaClockStories.UseCetTz} />
+</Canvas>

book/stories/ana-clock.stories.js

@@ -0,0 +1,137 @@
+import { withActions } from '@storybook/addon-actions/decorator'
+import AnaClock from '../../dist/ana-clock.mjs'
+
+export default {
+  title: 'Components/AnaClock',
+  component: AnaClock,
+
+  parameters: {
+    actions: {
+      handles: ['tick']
+    },
+
+    controls: {
+      disable: true,
+      expanded: true,
+      hideNoControlsWarning: true
+    }
+  },
+
+  decorators: [withActions]
+}
+
+export const Default = {
+  args: {
+    name: 'Default',
+    primary: true
+  },
+  // parameters: {
+  //   docs: {
+  //     story: { inline: true },
+  //     canvas: { sourceState: 'shown' },
+  //     source: { type: 'code' }
+  //   }
+  // },
+  render: () => `
+<ana-clock></ana-clock>
+`
+}
+
+export const TwelveMarkers = {
+  render: () => `
+<ana-clock markers=twelve></ana-clock>
+`,
+  name: 'Twelve Markers'
+}
+
+export const FourMarkers = {
+  render: () => `
+<ana-clock markers=four></ana-clock>
+`,
+  name: 'Four Markers'
+}
+
+export const NoMarkers = {
+  render: () => `
+<ana-clock markers=none></ana-clock>
+`,
+  name: 'No Markers'
+}
+
+export const NoSecondHand = {
+  render: () => `
+<ana-clock secondhand=false></ana-clock>
+`,
+  name: 'No Second Hand'
+}
+
+export const UseCetTz = {
+  render: () => `
+<ana-clock offset=60></ana-clock>
+`,
+  name: 'Use CET TZ'
+}
+
+export const Configurable = {
+  render: ({ secondhand, markers, offset }) => `
+  <ana-clock secondhand=${secondhand} markers=${markers} offset=${offset}></ana-clock>
+`,
+  name: 'Configurable',
+
+  argTypes: {
+    secondhand: {
+      description: 'disables the second hand',
+      control: 'boolean',
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      }
+    },
+
+    markers: {
+      description: 'chooses the density of markers',
+      control: 'radio',
+      options: [
+        'sixty', 'twelve,', 'four', 'none'
+      ],
+      table: {
+        defaultValue: {
+          summary: 'sixty'
+        }
+      }
+    },
+
+    offset: {
+      description: 'adds the offset in minutes to UTC',
+      control: {
+        type: 'number',
+        min: -720,
+        max: 720,
+        step: 30
+      },
+      table: {
+        defaultValue: {
+          summary: 0
+        }
+      }
+    },
+
+    onTick: {
+      description: 'when the second or the minute hand moves',
+      action: 'tick'
+    }
+  },
+
+  args: {
+    secondhand: true,
+    markers: 'sixty',
+    offset: 0
+  },
+
+  parameters: {
+    controls: {
+      disable: false
+    }
+  }
+}

book/stories/digi-clock.mdx

@@ -0,0 +1,68 @@
+import { Story, Canvas, Meta } from '@storybook/blocks'
+import * as DigiClockStories from './digi-clock.stories.js'
+
+<Meta of={DigiClockStories} />
+
+# \<digi-clock>
+
+Shows a digital clock known from Svelte examples.
+
+```html
+<digi-clock seconds="true" offset="0"></digi-clock>
+
+<script type="module" src="https://unpkg.com/[email protected]/dist/digi-clock.mjs"></script>
+```
+
+### Attributes
+
+| Attribute    | Description                       | Values            | Default |
+|--------------|-----------------------------------|-------------------|---------|
+| `seconds`    | disables the second part          | boolean           | `false` |
+| `offset`     | adds the offset in minutes to UTC | number of minutes | `0`     |
+
+### Methods
+
+| Name        | Description                                                 |
+|-------------|-------------------------------------------------------------|
+| `stop()`    | stops the clock                                             |
+| `restart()` | sets the clock to the current time and starts ticking again |
+
+### Events
+
+| Name   | Triggered                                | Details         |
+|--------|------------------------------------------|-----------------|
+| `tick` | when the second or the minute hand moves | current `Date`  |
+
+## Stories
+
+### Default
+
+Default look & feel:
+
+<Canvas withToolbar>
+  <Story of={DigiClockStories.Default} />
+</Canvas>
+
+### No Seconds
+
+Time without seconds:
+
+<Canvas withToolbar>
+  <Story of={DigiClockStories.NoSeconds} />
+</Canvas>
+
+### Use CET TZ
+
+Shows the time in the CET time zone (+01:00):
+
+<Canvas withToolbar>
+  <Story of={DigiClockStories.UseEstTz} />
+</Canvas>
+
+### Configurable
+
+Configurable parameters:
+
+<Canvas withToolbar>
+  <Story of={DigiClockStories.Configurable} />
+</Canvas>

book/stories/digi-clock.stories.js

@@ -0,0 +1,102 @@
+import { withActions } from '@storybook/addon-actions/decorator'
+import DigiClock from '../../dist/digi-clock.mjs'
+
+export default {
+  title: 'Components/DigiClock',
+  component: DigiClock,
+
+  parameters: {
+    actions: {
+      handles: ['tick']
+    },
+
+    controls: {
+      disable: true,
+      expanded: true,
+      hideNoControlsWarning: true
+    }
+  },
+
+  decorators: [withActions]
+}
+
+export const Default = {
+  args: {
+    name: 'Default',
+    primary: true
+  },
+  // parameters: {
+  //   docs: {
+  //     story: { inline: true },
+  //     canvas: { sourceState: 'shown' },
+  //     source: { type: 'code' }
+  //   }
+  // },
+  render: () => `
+<digi-clock></digi-clock>
+`
+}
+
+export const NoSeconds = {
+  render: () => `
+<digi-clock seconds=false></digi-clock>
+`,
+  name: 'No Seconds'
+}
+
+export const UseEstTz = {
+  render: () => `
+<digi-clock offset=-300></digi-clock>
+`,
+  name: 'Use EST TZ'
+}
+
+export const Configurable = {
+  render: ({ seconds, offset }) => `
+<digi-clock seconds=${seconds} offset=${offset}></digi-clock>
+`,
+  name: 'Configurable',
+
+  argTypes: {
+    seconds: {
+      description: 'disables the second part',
+      control: 'boolean',
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      }
+    },
+
+    offset: {
+      description: 'adds the offset in minutes to UTC',
+      control: {
+        type: 'number',
+        min: -720,
+        max: 720,
+        step: 30
+      },
+      table: {
+        defaultValue: {
+          summary: 0
+        }
+      }
+    },
+
+    onTick: {
+      description: 'when the second or the minute hand moves',
+      action: 'tick'
+    }
+  },
+
+  args: {
+    seconds: true,
+    offset: 0,
+  },
+
+  parameters: {
+    controls: {
+      disable: false
+    }
+  },
+}