Add initial batch of elements

May need to add more but this is a basic start

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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];
+}