From a84941285b1f590545b679e511121a75ff8cecb3 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 20 Dec 2021 15:44:23 -0800
Subject: [PATCH] Add initial batch of elements

May need to add more but this is a basic start
---
 src/lib/internal/elements/A.svelte          | 21 ++++++
 src/lib/internal/elements/Address.svelte    | 13 ++++
 src/lib/internal/elements/Article.svelte    | 13 ++++
 src/lib/internal/elements/Aside.svelte      | 13 ++++
 src/lib/internal/elements/B.svelte          | 13 ++++
 src/lib/internal/elements/Bdi.svelte        | 13 ++++
 src/lib/internal/elements/Bdo.svelte        | 13 ++++
 src/lib/internal/elements/Blockquote.svelte | 18 +++++
 src/lib/internal/elements/Button.svelte     | 13 ++++
 src/lib/internal/elements/Cite.svelte       | 13 ++++
 src/lib/internal/elements/Code.svelte       | 13 ++++
 src/lib/internal/elements/Data.svelte       | 13 ++++
 src/lib/internal/elements/Datalist.svelte   | 18 +++++
 src/lib/internal/elements/Div.svelte        | 13 ++++
 src/lib/internal/elements/Em.svelte         | 13 ++++
 src/lib/internal/elements/Footer.svelte     | 13 ++++
 src/lib/internal/elements/H1.svelte         | 13 ++++
 src/lib/internal/elements/H2.svelte         | 13 ++++
 src/lib/internal/elements/H3.svelte         | 13 ++++
 src/lib/internal/elements/H4.svelte         | 13 ++++
 src/lib/internal/elements/H5.svelte         | 13 ++++
 src/lib/internal/elements/H6.svelte         | 13 ++++
 src/lib/internal/elements/Header.svelte     | 13 ++++
 src/lib/internal/elements/I.svelte          | 13 ++++
 src/lib/internal/elements/Li.svelte         | 13 ++++
 src/lib/internal/elements/Main.svelte       | 13 ++++
 src/lib/internal/elements/Nav.svelte        | 13 ++++
 src/lib/internal/elements/Ol.svelte         | 13 ++++
 src/lib/internal/elements/P.svelte          | 13 ++++
 src/lib/internal/elements/Section.svelte    | 13 ++++
 src/lib/internal/elements/Span.svelte       | 13 ++++
 src/lib/internal/elements/Strong.svelte     | 13 ++++
 src/lib/internal/elements/Ul.svelte         | 13 ++++
 src/lib/internal/elements/index.ts          | 77 +++++++++++++++++++++
 34 files changed, 524 insertions(+)
 create mode 100644 src/lib/internal/elements/A.svelte
 create mode 100644 src/lib/internal/elements/Address.svelte
 create mode 100644 src/lib/internal/elements/Article.svelte
 create mode 100644 src/lib/internal/elements/Aside.svelte
 create mode 100644 src/lib/internal/elements/B.svelte
 create mode 100644 src/lib/internal/elements/Bdi.svelte
 create mode 100644 src/lib/internal/elements/Bdo.svelte
 create mode 100644 src/lib/internal/elements/Blockquote.svelte
 create mode 100644 src/lib/internal/elements/Button.svelte
 create mode 100644 src/lib/internal/elements/Cite.svelte
 create mode 100644 src/lib/internal/elements/Code.svelte
 create mode 100644 src/lib/internal/elements/Data.svelte
 create mode 100644 src/lib/internal/elements/Datalist.svelte
 create mode 100644 src/lib/internal/elements/Div.svelte
 create mode 100644 src/lib/internal/elements/Em.svelte
 create mode 100644 src/lib/internal/elements/Footer.svelte
 create mode 100644 src/lib/internal/elements/H1.svelte
 create mode 100644 src/lib/internal/elements/H2.svelte
 create mode 100644 src/lib/internal/elements/H3.svelte
 create mode 100644 src/lib/internal/elements/H4.svelte
 create mode 100644 src/lib/internal/elements/H5.svelte
 create mode 100644 src/lib/internal/elements/H6.svelte
 create mode 100644 src/lib/internal/elements/Header.svelte
 create mode 100644 src/lib/internal/elements/I.svelte
 create mode 100644 src/lib/internal/elements/Li.svelte
 create mode 100644 src/lib/internal/elements/Main.svelte
 create mode 100644 src/lib/internal/elements/Nav.svelte
 create mode 100644 src/lib/internal/elements/Ol.svelte
 create mode 100644 src/lib/internal/elements/P.svelte
 create mode 100644 src/lib/internal/elements/Section.svelte
 create mode 100644 src/lib/internal/elements/Span.svelte
 create mode 100644 src/lib/internal/elements/Strong.svelte
 create mode 100644 src/lib/internal/elements/Ul.svelte
 create mode 100644 src/lib/internal/elements/index.ts

diff --git a/src/lib/internal/elements/A.svelte b/src/lib/internal/elements/A.svelte
new file mode 100644
index 0000000..720e136
--- /dev/null
+++ b/src/lib/internal/elements/A.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLAnchorElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let href = "javascript:void(0);";
+</script>
+
+<a
+  bind:this={el}
+  use:useActions={use}
+  use:forwardEvents
+  {href}
+  {...$$restProps}
+>
+  <slot />
+</a>
diff --git a/src/lib/internal/elements/Address.svelte b/src/lib/internal/elements/Address.svelte
new file mode 100644
index 0000000..e1ae0ee
--- /dev/null
+++ b/src/lib/internal/elements/Address.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<address bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</address>
diff --git a/src/lib/internal/elements/Article.svelte b/src/lib/internal/elements/Article.svelte
new file mode 100644
index 0000000..794415b
--- /dev/null
+++ b/src/lib/internal/elements/Article.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<article bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</article>
diff --git a/src/lib/internal/elements/Aside.svelte b/src/lib/internal/elements/Aside.svelte
new file mode 100644
index 0000000..0fb70b6
--- /dev/null
+++ b/src/lib/internal/elements/Aside.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<aside bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</aside>
diff --git a/src/lib/internal/elements/B.svelte b/src/lib/internal/elements/B.svelte
new file mode 100644
index 0000000..e940f1d
--- /dev/null
+++ b/src/lib/internal/elements/B.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<b bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</b>
diff --git a/src/lib/internal/elements/Bdi.svelte b/src/lib/internal/elements/Bdi.svelte
new file mode 100644
index 0000000..2680552
--- /dev/null
+++ b/src/lib/internal/elements/Bdi.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<bdi bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</bdi>
diff --git a/src/lib/internal/elements/Bdo.svelte b/src/lib/internal/elements/Bdo.svelte
new file mode 100644
index 0000000..5d78fd3
--- /dev/null
+++ b/src/lib/internal/elements/Bdo.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<bdo bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</bdo>
diff --git a/src/lib/internal/elements/Blockquote.svelte b/src/lib/internal/elements/Blockquote.svelte
new file mode 100644
index 0000000..0120ce0
--- /dev/null
+++ b/src/lib/internal/elements/Blockquote.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<blockquote
+  bind:this={el}
+  use:useActions={use}
+  use:forwardEvents
+  {...$$restProps}
+>
+  <slot />
+</blockquote>
diff --git a/src/lib/internal/elements/Button.svelte b/src/lib/internal/elements/Button.svelte
new file mode 100644
index 0000000..c29f493
--- /dev/null
+++ b/src/lib/internal/elements/Button.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLButtonElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<button bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</button>
diff --git a/src/lib/internal/elements/Cite.svelte b/src/lib/internal/elements/Cite.svelte
new file mode 100644
index 0000000..46d34f5
--- /dev/null
+++ b/src/lib/internal/elements/Cite.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<cite bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</cite>
diff --git a/src/lib/internal/elements/Code.svelte b/src/lib/internal/elements/Code.svelte
new file mode 100644
index 0000000..7695d4c
--- /dev/null
+++ b/src/lib/internal/elements/Code.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<code bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</code>
diff --git a/src/lib/internal/elements/Data.svelte b/src/lib/internal/elements/Data.svelte
new file mode 100644
index 0000000..fa4431b
--- /dev/null
+++ b/src/lib/internal/elements/Data.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLDataElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<data bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</data>
diff --git a/src/lib/internal/elements/Datalist.svelte b/src/lib/internal/elements/Datalist.svelte
new file mode 100644
index 0000000..b9a8b2c
--- /dev/null
+++ b/src/lib/internal/elements/Datalist.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLDataListElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<datalist
+  bind:this={el}
+  use:useActions={use}
+  use:forwardEvents
+  {...$$restProps}
+>
+  <slot />
+</datalist>
diff --git a/src/lib/internal/elements/Div.svelte b/src/lib/internal/elements/Div.svelte
new file mode 100644
index 0000000..ec41061
--- /dev/null
+++ b/src/lib/internal/elements/Div.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLDivElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<div bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</div>
diff --git a/src/lib/internal/elements/Em.svelte b/src/lib/internal/elements/Em.svelte
new file mode 100644
index 0000000..8d29225
--- /dev/null
+++ b/src/lib/internal/elements/Em.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<em bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</em>
diff --git a/src/lib/internal/elements/Footer.svelte b/src/lib/internal/elements/Footer.svelte
new file mode 100644
index 0000000..d206e7e
--- /dev/null
+++ b/src/lib/internal/elements/Footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<footer bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</footer>
diff --git a/src/lib/internal/elements/H1.svelte b/src/lib/internal/elements/H1.svelte
new file mode 100644
index 0000000..e2a4c0c
--- /dev/null
+++ b/src/lib/internal/elements/H1.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLHeadingElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<h1 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</h1>
diff --git a/src/lib/internal/elements/H2.svelte b/src/lib/internal/elements/H2.svelte
new file mode 100644
index 0000000..dae8253
--- /dev/null
+++ b/src/lib/internal/elements/H2.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLHeadingElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<h2 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</h2>
diff --git a/src/lib/internal/elements/H3.svelte b/src/lib/internal/elements/H3.svelte
new file mode 100644
index 0000000..102d00a
--- /dev/null
+++ b/src/lib/internal/elements/H3.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLHeadingElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<h3 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</h3>
diff --git a/src/lib/internal/elements/H4.svelte b/src/lib/internal/elements/H4.svelte
new file mode 100644
index 0000000..7f9508c
--- /dev/null
+++ b/src/lib/internal/elements/H4.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLHeadingElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<h4 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</h4>
diff --git a/src/lib/internal/elements/H5.svelte b/src/lib/internal/elements/H5.svelte
new file mode 100644
index 0000000..73d0785
--- /dev/null
+++ b/src/lib/internal/elements/H5.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLHeadingElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<h5 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</h5>
diff --git a/src/lib/internal/elements/H6.svelte b/src/lib/internal/elements/H6.svelte
new file mode 100644
index 0000000..0cb22e2
--- /dev/null
+++ b/src/lib/internal/elements/H6.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLHeadingElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<h6 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</h6>
diff --git a/src/lib/internal/elements/Header.svelte b/src/lib/internal/elements/Header.svelte
new file mode 100644
index 0000000..66b106a
--- /dev/null
+++ b/src/lib/internal/elements/Header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<header bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</header>
diff --git a/src/lib/internal/elements/I.svelte b/src/lib/internal/elements/I.svelte
new file mode 100644
index 0000000..b0837a9
--- /dev/null
+++ b/src/lib/internal/elements/I.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<i bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</i>
diff --git a/src/lib/internal/elements/Li.svelte b/src/lib/internal/elements/Li.svelte
new file mode 100644
index 0000000..ac68d23
--- /dev/null
+++ b/src/lib/internal/elements/Li.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLLIElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<li bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</li>
diff --git a/src/lib/internal/elements/Main.svelte b/src/lib/internal/elements/Main.svelte
new file mode 100644
index 0000000..dd123ef
--- /dev/null
+++ b/src/lib/internal/elements/Main.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<main bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</main>
diff --git a/src/lib/internal/elements/Nav.svelte b/src/lib/internal/elements/Nav.svelte
new file mode 100644
index 0000000..d021d8d
--- /dev/null
+++ b/src/lib/internal/elements/Nav.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<nav bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</nav>
diff --git a/src/lib/internal/elements/Ol.svelte b/src/lib/internal/elements/Ol.svelte
new file mode 100644
index 0000000..fa3a20e
--- /dev/null
+++ b/src/lib/internal/elements/Ol.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLOListElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<ol bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</ol>
diff --git a/src/lib/internal/elements/P.svelte b/src/lib/internal/elements/P.svelte
new file mode 100644
index 0000000..6b5457f
--- /dev/null
+++ b/src/lib/internal/elements/P.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLParagraphElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<p bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</p>
diff --git a/src/lib/internal/elements/Section.svelte b/src/lib/internal/elements/Section.svelte
new file mode 100644
index 0000000..052b67c
--- /dev/null
+++ b/src/lib/internal/elements/Section.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<section bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</section>
diff --git a/src/lib/internal/elements/Span.svelte b/src/lib/internal/elements/Span.svelte
new file mode 100644
index 0000000..f1387bf
--- /dev/null
+++ b/src/lib/internal/elements/Span.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLSpanElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<span bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</span>
diff --git a/src/lib/internal/elements/Strong.svelte b/src/lib/internal/elements/Strong.svelte
new file mode 100644
index 0000000..2625349
--- /dev/null
+++ b/src/lib/internal/elements/Strong.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<strong bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</strong>
diff --git a/src/lib/internal/elements/Ul.svelte b/src/lib/internal/elements/Ul.svelte
new file mode 100644
index 0000000..8b1cfc5
--- /dev/null
+++ b/src/lib/internal/elements/Ul.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+  import { forwardEventsBuilder } from "../forwardEventsBuilder";
+
+  export let use: ActionArray = [];
+  export let el: HTMLUListElement | null = null;
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+</script>
+
+<ul bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
+  <slot />
+</ul>
diff --git a/src/lib/internal/elements/index.ts b/src/lib/internal/elements/index.ts
new file mode 100644
index 0000000..699d81a
--- /dev/null
+++ b/src/lib/internal/elements/index.ts
@@ -0,0 +1,77 @@
+import type { SvelteComponent } from "svelte";
+import A from "./A.svelte";
+import Address from "./Address.svelte";
+import Article from "./Article.svelte";
+import Aside from "./Aside.svelte";
+import B from "./B.svelte";
+import Bdi from "./Bdi.svelte";
+import Bdo from "./Bdo.svelte";
+import Blockquote from "./Blockquote.svelte";
+import Button from "./Button.svelte";
+import Cite from "./Cite.svelte";
+import Code from "./Code.svelte";
+import Data from "./Data.svelte";
+import Datalist from "./Datalist.svelte";
+import Div from "./Div.svelte";
+import Em from "./Em.svelte";
+import Footer from "./Footer.svelte";
+import H1 from "./H1.svelte";
+import H2 from "./H2.svelte";
+import H3 from "./H3.svelte";
+import H4 from "./H4.svelte";
+import H5 from "./H5.svelte";
+import H6 from "./H6.svelte";
+import Header from "./Header.svelte";
+import I from "./I.svelte";
+import Li from "./Li.svelte";
+import Main from "./Main.svelte";
+import Nav from "./Nav.svelte";
+import Ol from "./Ol.svelte";
+import P from "./P.svelte";
+import Section from "./Section.svelte";
+import Span from "./Span.svelte";
+import Strong from "./Strong.svelte";
+import Ul from "./Ul.svelte";
+
+const components = {
+  "a": A,
+  "address": Address,
+  "article": Article,
+  "aside": Aside,
+  "b": B,
+  "bdi": Bdi,
+  "bdo": Bdo,
+  "blockquote": Blockquote,
+  "button": Button,
+  "cite": Cite,
+  "code": Code,
+  "data": Data,
+  "datalist": Datalist,
+  "div": Div,
+  "em": Em,
+  "footer": Footer,
+  "h1": H1,
+  "h2": H2,
+  "h3": H3,
+  "h4": H4,
+  "h5": H5,
+  "h6": H6,
+  "header": Header,
+  "i": I,
+  "li": Li,
+  "main": Main,
+  "nav": Nav,
+  "ol": Ol,
+  "p": P,
+  "section": Section,
+  "span": Span,
+  "strong": Strong,
+  "ul": Ul,
+}
+
+export type SupportedElement = keyof typeof components;
+export type SupportedAs = SupportedElement | SvelteComponent;
+
+export function getElementComponent(name: SupportedElement) {
+  return components[name];
+}