diff --git a/.gitignore b/.gitignore
index b5ce3fa4..a20c9c57 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,5 @@ Thumbs.db
 
 # Pico
 .pico
+
+*storybook.log
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 00000000..49e1bda0
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,17 @@
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
+  },
+};
+export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 00000000..2132c443
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,467 @@
+import "../scss/pico.scss";
+
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+import { HtmlRenderer, Preview } from "@storybook/html";
+import { withActions } from "@storybook/addon-actions/decorator";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /datetime$/i,
+      },
+    },
+  },
+  decorators: [
+    withActions,
+    withThemeByDataAttribute<HtmlRenderer>({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+      attributeName: "data-theme",
+    }),
+  ],
+  argTypes: {
+    accesskey: {
+      control: "text",
+      description: "Specifies a shortcut key to activate/focus an element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    anchor: {
+      control: "text",
+      description: "Defines a named anchor within a document.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    autocapitalize: {
+      control: "radio",
+      description: "Controls the capitalization of text.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: ["none", "sentences", "words", "characters"],
+    },
+    autocorrect: {
+      control: "radio",
+      description: "Controls whether text correction is enabled or not.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: ["on", "off"],
+    },
+    autofocus: {
+      control: "boolean",
+      description: "Indicates if the element should receive focus on page load.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    class: {
+      control: "text",
+      description: "Specifies one or more class names for the element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    contenteditable: {
+      control: "radio",
+      description: "Indicates if the element is editable.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: [true, false, "plaintext-only"],
+    },
+    dir: {
+      control: "radio",
+      description: "Specifies the text direction for the content.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: ["ltr", "rtl", "auto"],
+    },
+    draggable: {
+      control: "boolean",
+      description: "Specifies whether an element is draggable.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    enterkeyhint: {
+      control: "text",
+      description: "Hints what action label to present for the enter key.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    exportparts: {
+      control: "text",
+      description: "Defines which shadow DOM parts can be exposed for styling.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    hidden: {
+      control: "boolean",
+      description: "Indicates if the element is not relevant and should be hidden.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    id: {
+      control: "text",
+      description: "Specifies a unique id for the element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    inert: {
+      control: "boolean",
+      description: "Indicates if the element is inactive and not focusable.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    inputmode: {
+      control: "radio",
+      description: "Provides a hint for input type devices.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: ["none", "text", "decimal", "numeric", "tel", "search", "email", "url"],
+    },
+    is: {
+      control: "text",
+      description: "Allows extending built-in HTML elements.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    itemid: {
+      control: "text",
+      description: "Defines a unique identifier for microdata.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    itemprop: {
+      control: "text",
+      description: "Specifies a property of an item.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    itemref: {
+      control: "text",
+      description: "Provides a list of IDs for microdata.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    itemscope: {
+      control: "boolean",
+      description: "Defines the scope of an item for microdata.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    itemtype: {
+      control: "text",
+      description: "Specifies the type of an item for microdata.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    lang: {
+      control: "text",
+      description: "Specifies the language of the element’s content.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    nonce: {
+      control: "text",
+      description: "Cryptographic nonce used by Content Security Policy.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    part: {
+      control: "text",
+      description: "Defines the parts of an element exposed to CSS.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    popover: {
+      control: "radio",
+      description: "Specifies the popover attribute for interactive UI.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: ["auto", "hint", "manual"],
+    },
+    role: {
+      control: "text",
+      description: "Defines an ARIA role for the element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    slot: {
+      control: "text",
+      description: "Specifies the slot the element should be assigned to.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    spellcheck: {
+      control: "boolean",
+      description: "Indicates if spelling and grammar checking is enabled.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    style: {
+      control: "text",
+      description: "Specifies an inline CSS style for the element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    tabindex: {
+      control: "number",
+      description: "Defines the tab order of the element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    title: {
+      control: "text",
+      description: "Provides additional information about an element.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    translate: {
+      control: "radio",
+      description: "Specifies if the content should be translated or not.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+      options: ["yes", "no"],
+    },
+    writingsuggestions: {
+      control: "boolean",
+      description:
+        "An enumerated attribute indicating if browser-provided writing suggestions should be enabled under the scope of the element or not.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+    "data-test-attribute": {
+      control: "text",
+      description: "Custom attribute for testing purposes.",
+      table: {
+        category: "Gobal HTML Attributes",
+      },
+    },
+
+    // Aria Attributes
+    "aria-atomic": {
+      control: "boolean",
+      description: "Indicates if assistive technologies should present changes atomically.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-busy": {
+      control: "boolean",
+      description: "Indicates if the element is currently being updated.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-controls": {
+      control: "text",
+      description: "Identifies the element (or elements) that control the current element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-current": {
+      control: "radio",
+      description: "Indicates the current item within a container or set.",
+      table: {
+        category: "Aria Attributes",
+      },
+      options: ["page", "step", "location", "date", "time"],
+    },
+    "aria-describedby": {
+      control: "text",
+      description: "Identifies the element (or elements) that describe the current element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-description": {
+      control: "text",
+      description: "Provides a description for the current element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-details": {
+      control: "text",
+      description:
+        "Identifies the element (or elements) that provide additional information about the current element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-disabled": {
+      control: "boolean",
+      description: "Indicates that the element is perceivable but disabled.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-dropeffect": {
+      control: "radio",
+      description: "Indicates the allowed drag-and-drop operations.",
+      table: {
+        category: "Aria Attributes",
+      },
+      options: ["none", "copy", "execute", "link", "move", "popup"],
+    },
+    "aria-errormessage": {
+      control: "text",
+      description: "Identifies the element (or elements) that contains the error message.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-flowto": {
+      control: "text",
+      description: "Identifies the next element in an alternate reading order.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-grabbed": {
+      control: "boolean",
+      description: "Indicates if the element is currently grabbed.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-haspopup": {
+      control: "radio",
+      description: "Indicates if the element has a popup context menu.",
+      table: {
+        category: "Aria Attributes",
+      },
+      options: ["false", "true", "menu", "listbox", "tree", "grid"],
+    },
+    "aria-hidden": {
+      control: "boolean",
+      description: "Indicates if the element is hidden from assistive technologies.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-invalid": {
+      control: "boolean",
+      description: "Indicates if the element has an invalid value.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-keyshortcuts": {
+      control: "text",
+      description: "Defines keyboard shortcuts for the element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-label": {
+      control: "text",
+      description: "Defines a string value that labels the current element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-labelledby": {
+      control: "text",
+      description: "Identifies the element (or elements) that label the current element.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-live": {
+      control: "radio",
+      description: "Indicates that an element will be updated and describes the type of update.",
+      table: {
+        category: "Aria Attributes",
+      },
+      options: ["off", "assertive", "polite"],
+    },
+    "aria-owns": {
+      control: "text",
+      description: "Identifies the element (or elements) that the current element owns.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+    "aria-relevant": {
+      control: "radio",
+      description: "Indicates what types of changes should be presented to the user.",
+      table: {
+        category: "Aria Attributes",
+      },
+      options: ["additions", "removals", "text"],
+    },
+    "aria-roledescription": {
+      control: "text",
+      description: "Defines a human-readable description for the role.",
+      table: {
+        category: "Aria Attributes",
+      },
+    },
+  },
+  // args: {
+  //   onclick: action("clicked"),
+  //   onmouseover: action("mouseover"),
+  //   onmouseout: action("mouseout"),
+  //   onfocus: action("focused"),
+  //   onblur: action("blurred"),
+  //   onkeydown: action("key down"),
+  //   onkeyup: action("key up"),
+  //   onkeypress: action("key pressed"),
+  //   oninput: action("input"),
+  //   onchange: action("changed"),
+  //   onsubmit: action("submitted"),
+  //   onreset: action("reset"),
+  //   onselect: action("selected"),
+  //   ondrag: action("dragged"),
+  //   ondragstart: action("drag started"),
+  //   ondragend: action("drag ended"),
+  //   ondragenter: action("drag entered"),
+  //   ondragleave: action("drag left"),
+  //   ondragover: action("drag over"),
+  //   ondragdrop: action("drag dropped"),
+  //   ondragexit: action("drag exited"),
+  //   oncopy: action("copied"),
+  //   oncut: action("cut"),
+  //   onpaste: action("pasted"),
+  //   oncontextmenu: action("context menu opened"),
+  //   onwheel: action("wheel scrolled"),
+  // },
+};
+
+export default preview;
diff --git a/package.json b/package.json
index 1039d640..3aee88dc 100644
--- a/package.json
+++ b/package.json
@@ -46,9 +46,19 @@
     "prebuild:autoprefix": "echo '[@picocss/pico] ✨ Autoprefix'",
     "prebuild:minify": "echo '[@picocss/pico] ✨ Minify'",
     "start": "echo '\\033[96m[@picocss/pico] ✨ Start\\033[0m'",
-    "done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
+    "done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/html": "^8.6.12",
+    "@storybook/html-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "autoprefixer": "^10.4.21",
     "caniuse-lite": "1.0.30001704",
     "clean-css-cli": "^5.6.3",
@@ -59,7 +69,9 @@
     "postcss-cli": "^11.0.1",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.5.3",
-    "sass": "^1.85.1"
+    "sass": "^1.85.1",
+    "storybook": "^8.6.12",
+    "vite": "^6.2.5"
   },
   "browserslist": [
     "defaults"
diff --git a/stories/HTMLElement.ts b/stories/HTMLElement.ts
new file mode 100644
index 00000000..f522861c
--- /dev/null
+++ b/stories/HTMLElement.ts
@@ -0,0 +1,46 @@
+export const createHTMLElement = (element, { ...args }) => {
+  const elem: HTMLElement | null = document.createElement(element);
+
+  if (!elem) {
+    return null;
+  }
+
+  if (args.content instanceof HTMLElement) {
+    elem.appendChild(args.content);
+  } else if (args.content instanceof Array) {
+    args.content.forEach((content) => {
+      if (content instanceof HTMLElement) {
+        elem.appendChild(content);
+      } else if (typeof content === "string") {
+        const textNode = document.createTextNode(content);
+        elem.appendChild(textNode);
+      }
+    });
+  } else if (typeof args.content === "string") {
+    const textNode = document.createTextNode(args.content);
+    elem.appendChild(textNode);
+  }
+
+  Object.keys(args).forEach((key) => {
+    // Skip the content key
+    if (key === "content") {
+      return;
+    }
+    // If the value is false or null or empty, skip it
+    if (!args[key]) {
+      return;
+    }
+
+    // If the value is a function, add it as an event listener
+    console.log("key", key, typeof args[key], typeof args[key] === "function");
+    if (typeof args[key] === "function") {
+      // If it starts with "on", we need to remove it
+      const eventKey = key.startsWith("on") ? key.substring(2) : key;
+      //   We need to set the attribute as a callback
+      elem.addEventListener(eventKey, args[key]);
+    }
+
+    elem.setAttribute(key, args[key]);
+  });
+  return elem;
+};
diff --git a/stories/Welcome.mdx b/stories/Welcome.mdx
new file mode 100644
index 00000000..a5d587ac
--- /dev/null
+++ b/stories/Welcome.mdx
@@ -0,0 +1,3 @@
+# Welcome to PicoCSS
+
+This Storybook is a collection of all HTML elements and components available in PicoCSS. It is a great way to explore the library and see how different elements look and behave.
diff --git a/stories/demarcating-edits/del.stories.ts b/stories/demarcating-edits/del.stories.ts
new file mode 100644
index 00000000..b7030763
--- /dev/null
+++ b/stories/demarcating-edits/del.stories.ts
@@ -0,0 +1,17 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "DemarcatingEdits/Del",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    cite: "https://example.com",
+    datetime: "2023-10-01T12:00:00Z",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("del", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/demarcating-edits/ins.stories.ts b/stories/demarcating-edits/ins.stories.ts
new file mode 100644
index 00000000..369eda14
--- /dev/null
+++ b/stories/demarcating-edits/ins.stories.ts
@@ -0,0 +1,17 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "DemarcatingEdits/Ins",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    cite: "https://example.com",
+    datetime: "2023-10-01T12:00:00Z",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("ins", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/embedded-content/embed.stories.ts b/stories/embedded-content/embed.stories.ts
new file mode 100644
index 00000000..0d00f88b
--- /dev/null
+++ b/stories/embedded-content/embed.stories.ts
@@ -0,0 +1,18 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "EmbeddedContent/Embed",
+  tags: ["autodocs"],
+  args: {
+    src: "https://example.com",
+    type: "text/html",
+    width: 300,
+    height: 200,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("embed", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/embedded-content/fencedframe.stories.ts b/stories/embedded-content/fencedframe.stories.ts
new file mode 100644
index 00000000..aade4b03
--- /dev/null
+++ b/stories/embedded-content/fencedframe.stories.ts
@@ -0,0 +1,18 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "EmbeddedContent/FencedFrame",
+  tags: ["autodocs"],
+  args: {
+    src: "https://example.com",
+    type: "text/html",
+    width: 300,
+    height: 200,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("fencedframe", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/embedded-content/iframe.stories.ts b/stories/embedded-content/iframe.stories.ts
new file mode 100644
index 00000000..062a30c4
--- /dev/null
+++ b/stories/embedded-content/iframe.stories.ts
@@ -0,0 +1,29 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "EmbeddedContent/Iframe",
+  tags: ["autodocs"],
+  args: {
+    src: "https://example.com",
+    type: "text/html",
+    width: 300,
+    height: 200,
+    allow:
+      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowfullscreen: false,
+    allowpaymentrequest: false,
+    browsingtopics: false,
+    credentialless: true,
+    loading: "lazy",
+    name: "iframe-name",
+    refererpolicy: "no-referrer",
+    sandbox: "allow-same-origin allow-scripts",
+    srcdoc: "<p>Your browser does not support iframes.</p>",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("iframe", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/embedded-content/object.stories.ts b/stories/embedded-content/object.stories.ts
new file mode 100644
index 00000000..7f232aa1
--- /dev/null
+++ b/stories/embedded-content/object.stories.ts
@@ -0,0 +1,21 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "EmbeddedContent/Object",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    data: "https://example.com",
+    type: "text/html",
+    form: "form",
+    width: 300,
+    height: 200,
+    name: "objectName",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("object", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/embedded-content/picture.stories.ts b/stories/embedded-content/picture.stories.ts
new file mode 100644
index 00000000..f1baa8ef
--- /dev/null
+++ b/stories/embedded-content/picture.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "EmbeddedContent/Picture",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("picture", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/embedded-content/source.stories.ts b/stories/embedded-content/source.stories.ts
new file mode 100644
index 00000000..dee28724
--- /dev/null
+++ b/stories/embedded-content/source.stories.ts
@@ -0,0 +1,22 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "EmbeddedContent/Source",
+  tags: ["autodocs"],
+  args: {
+    type: "video/mp4",
+    src: "https://www.example.com/video.mp4",
+    srcset:
+      "https://www.example.com/video_720p.mp4 720w, https://www.example.com/video_1080p.mp4 1080w",
+    sizes: "100vw",
+    media: "(min-width: 600px)",
+    height: 240,
+    width: 320,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("source", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/examples/classless.html b/stories/examples/classless.html
new file mode 100644
index 00000000..d86bd85d
--- /dev/null
+++ b/stories/examples/classless.html
@@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <title>Class-less preview • Pico CSS</title>
+    <meta name="description" content="A class-less example, without dependencies.">
+
+</head>
+
+<body>
+    <!-- Header -->
+    <header>
+        <hgroup>
+            <h1>Pico</h1>
+            <p>A class-less example, without dependencies.</p>
+        </hgroup>
+        <nav>
+            <ul>
+                <li><a href="#" data-theme-switcher="auto">Auto</a></li>
+                <li><a href="#" data-theme-switcher="light">Light</a></li>
+                <li><a href="#" data-theme-switcher="dark">Dark</a></li>
+            </ul>
+        </nav>
+    </header>
+    <!-- ./ Header -->
+
+    <!-- Main -->
+    <main>
+        <!-- Preview -->
+        <section id="preview">
+            <h2>Preview</h2>
+            <p>
+                Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla
+                iaculis eros a elit pharetra egestas.
+            </p>
+            <form>
+                <input type="text" name="firstname" placeholder="First name" aria-label="First name" required>
+                <input type="email" name="email" placeholder="Email address" aria-label="Email address"
+                    autocomplete="email" required>
+                <button type="submit">Subscribe</button>
+                <fieldset>
+                    <label for="terms">
+                        <input type="checkbox" role="switch" id="terms" name="terms">
+                        I agree to the
+                        <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
+                    </label>
+                </fieldset>
+            </form>
+        </section>
+        <!-- ./ Preview -->
+
+        <!-- Typography-->
+        <section id="typography">
+            <h2>Typography</h2>
+            <p>
+                Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat.
+                Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique
+                felis.
+            </p>
+
+            <!-- Blockquote-->
+            <blockquote>
+                "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet
+                ipsum cursus ornare."
+                <footer>
+                    <cite>- Phasellus eget lacinia</cite>
+                </footer>
+            </blockquote>
+
+            <!-- Lists-->
+            <h3>Lists</h3>
+            <ul>
+                <li>Aliquam lobortis lacus eu libero ornare facilisis.</li>
+                <li>Nam et magna at libero scelerisque egestas.</li>
+                <li>Suspendisse id nisl ut leo finibus vehicula quis eu ex.</li>
+                <li>Proin ultricies turpis et volutpat vehicula.</li>
+            </ul>
+
+            <!-- Inline text elements-->
+            <h3>Inline text elements</h3>
+            <p><a href="#" onclick="event.preventDefault()">Link</a></p>
+            <p><strong>Bold</strong></p>
+            <p><em>Italic</em></p>
+            <p><u>Underline</u></p>
+            <p><del>Deleted</del></p>
+            <p><ins>Inserted</ins></p>
+            <p><s>Strikethrough</s></p>
+            <p><small>Small </small></p>
+            <p>Text <sub>Sub</sub></p>
+            <p>Text <sup>Sup</sup></p>
+            <p>
+                <abbr title="Abbreviation" data-tooltip="Abbreviation">Abbr.</abbr>
+            </p>
+            <p><kbd>Kbd</kbd></p>
+            <p><mark>Highlighted</mark></p>
+
+            <!-- Headings-->
+            <h3>Heading 3</h3>
+            <p>
+                Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur
+                sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti
+                sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+            </p>
+            <h4>Heading 4</h4>
+            <p>
+                Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac
+                fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus.
+            </p>
+            <h5>Heading 5</h5>
+            <p>
+                Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in
+                consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam
+                sem.
+            </p>
+            <h6>Heading 6</h6>
+            <p>
+                Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut
+                tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id
+                auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin
+                hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in
+                velit.
+            </p>
+
+            <!-- Medias-->
+            <figure>
+                <img src="https://picsum.photos/200/300" alt="Minimal landscape">
+                <figcaption>
+                    Image from
+                    <a href="https://picsum.photos/200/300" target="_blank">unsplash.com</a>
+                </figcaption>
+            </figure>
+        </section>
+        <!-- ./ Typography-->
+
+        <!-- Form elements-->
+        <section id="form">
+            <form>
+                <h2>Form elements</h2>
+
+                <!-- Search -->
+                <label for="search">Search</label>
+                <input type="search" id="search" name="search" placeholder="Search">
+
+                <!-- Text -->
+                <label for="text">Text</label>
+                <input type="text" id="text" name="text" placeholder="Text">
+                <small>Curabitur consequat lacus at lacus porta finibus.</small>
+
+                <!-- Select -->
+                <label for="select">Select</label>
+                <select id="select" name="select" required>
+                    <option value="" selected>Select…</option>
+                    <option>…</option>
+                </select>
+
+                <!-- File browser -->
+                <label for="file">File browser
+                    <input type="file" id="file" name="file">
+                </label>
+
+                <!-- Range slider control -->
+                <label for="range">Range slider
+                    <input type="range" min="0" max="100" value="50" id="range" name="range">
+                </label>
+
+                <!-- States -->
+
+                <label for="valid">
+                    Valid
+                    <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false">
+                </label>
+                <label for="invalid">
+                    Invalid
+                    <input type="text" id="invalid" name="invalid" placeholder="Invalid" aria-invalid="true">
+                </label>
+                <label for="disabled">
+                    Disabled
+                    <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled>
+                </label>
+
+                <!-- Date-->
+                <label for="date">Date
+                    <input type="date" id="date" name="date">
+                </label>
+
+                <!-- Time-->
+                <label for="time">Time
+                    <input type="time" id="time" name="time">
+                </label>
+
+                <!-- Color-->
+                <label for="color">Color
+                    <input type="color" id="color" name="color" value="#0eaaaa">
+                </label>
+
+                <!-- Checkboxes -->
+                <fieldset>
+                    <legend><strong>Checkboxes</strong></legend>
+                    <label for="checkbox-1">
+                        <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
+                        Checkbox
+                    </label>
+                    <label for="checkbox-2">
+                        <input type="checkbox" id="checkbox-2" name="checkbox-2">
+                        Checkbox
+                    </label>
+                </fieldset>
+
+                <!-- Radio buttons -->
+                <fieldset>
+                    <legend><strong>Radio buttons</strong></legend>
+                    <label for="radio-1">
+                        <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
+                        Radio button
+                    </label>
+                    <label for="radio-2">
+                        <input type="radio" id="radio-2" name="radio" value="radio-2">
+                        Radio button
+                    </label>
+                </fieldset>
+
+                <!-- Switch -->
+                <fieldset>
+                    <legend><strong>Switches</strong></legend>
+                    <label for="switch-1">
+                        <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
+                        Switch
+                    </label>
+                    <label for="switch-2">
+                        <input type="checkbox" id="switch-2" name="switch-2" role="switch">
+                        Switch
+                    </label>
+                </fieldset>
+
+                <!-- Buttons -->
+                <input type="reset" value="Reset" onclick="event.preventDefault()">
+                <input type="submit" value="Submit" onclick="event.preventDefault()">
+            </form>
+        </section>
+        <!-- ./ Form elements-->
+
+        <!-- Modal -->
+        <section id="modal">
+            <h2>Modal</h2>
+            <button class="contrast" onclick="modalExample.showModal()">Launch demo modal</button>
+        </section>
+        <!-- ./ Modal -->
+
+        <!-- Accordions -->
+        <section id="accordions">
+            <h2>Accordions</h2>
+            <details>
+                <summary>Accordion 1</summary>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam,
+                    tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae
+                    tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
+                    lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar
+                    mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit
+                    amet, congue turpis.
+                </p>
+            </details>
+            <details open>
+                <summary>Accordion 2</summary>
+                <ul>
+                    <li>Vestibulum id elit quis massa interdum sodales.</li>
+                    <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
+                    <li>Quisque sed eros non eros ornare elementum.</li>
+                    <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
+                </ul>
+            </details>
+        </section>
+        <!-- ./ Accordions -->
+
+        <!-- Article-->
+        <article id="article">
+            <h2>Article</h2>
+            <p>
+                Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non
+                ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit
+                pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra
+                rutrum.
+            </p>
+            <footer>
+                <small>Duis nec elit placerat, suscipit nibh quis, finibus neque.</small>
+            </footer>
+        </article>
+        <!-- ./ Article-->
+
+        <!-- Group -->
+        <section id="group">
+            <h2>Group</h2>
+            <form>
+                <fieldset role="group">
+                    <input name="email" type="email" placeholder="Enter your email" autocomplete="email">
+                    <input type="submit" value="Subscribe">
+                </fieldset>
+            </form>
+        </section>
+        <!-- ./ Group -->
+
+        <!-- Progress -->
+        <section id="progress">
+            <h2>Progress bar</h2>
+            <progress id="progress-1" value="25" max="100"></progress>
+            <progress id="progress-2"></progress>
+        </section>
+        <!-- ./ Progress -->
+
+        <!-- Loading -->
+        <section id="loading">
+            <h2>Loading</h2>
+            <article aria-busy="true"></article>
+            <button aria-busy="true">Please wait…</button>
+        </section>
+        <!-- ./ Loading -->
+    </main>
+    <!-- ./ Main -->
+
+    <!-- Footer -->
+    <footer>
+        <small>Built with <a href="https://picocss.com">Pico</a> •
+            <a href="https://github.com/picocss/examples/blob/master/v2-html-classless/index.html">Source
+                code</a></small>
+    </footer>
+    <!-- ./ Footer -->
+
+    <!-- Modal example -->
+    <dialog id="modalExample">
+        <article>
+            <header>
+                <button aria-label="Close" rel="prev" onclick="modalExample.close()"></button>
+                <h3>Confirm your action!</h3>
+            </header>
+            <p>
+                Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
+                pellentesque. Nullam finibus risus non semper euismod.
+            </p>
+            <footer>
+                <button role="button" onclick="modalExample.close()">Cancel</button><button autofocus role="button"
+                    onclick="modalExample.close()">Confirm</button>
+            </footer>
+        </article>
+    </dialog>
+    <!-- ./ Modal example -->
+
+    <!-- Minimal theme switcher -->
+    <script src="js/minimal-theme-switcher.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/stories/examples/classless.stories.ts b/stories/examples/classless.stories.ts
new file mode 100644
index 00000000..fdd2be07
--- /dev/null
+++ b/stories/examples/classless.stories.ts
@@ -0,0 +1,14 @@
+import { expect, userEvent, within } from "@storybook/test";
+
+// @ts-ignore
+import AllHTML from "./classless.html?raw";
+
+export default {
+  title: "Examples/PicoCSSClassless",
+  render: (args) => AllHTML,
+  parameters: {
+    // layout: "fullscreen",
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/button.stories.ts b/stories/forms/button.stories.ts
new file mode 100644
index 00000000..58514912
--- /dev/null
+++ b/stories/forms/button.stories.ts
@@ -0,0 +1,30 @@
+import { createHTMLElement } from "../HTMLElement";
+import { fn } from "@storybook/test";
+
+export default {
+  title: "Forms/Button",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    disabled: false,
+    form: "",
+    formaction: "",
+    formenctype: "",
+    formmethod: "GET",
+    formnovalidate: false,
+    formtarget: "",
+    name: "",
+    popovertarget: "",
+    popovertargetaction: "toggle",
+    type: "button",
+    value: "",
+
+    onclick: fn(),
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("button", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/datalist.stories.ts b/stories/forms/datalist.stories.ts
new file mode 100644
index 00000000..81297659
--- /dev/null
+++ b/stories/forms/datalist.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Datalist",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("datalist", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/fieldset.stories.ts b/stories/forms/fieldset.stories.ts
new file mode 100644
index 00000000..1b0c440b
--- /dev/null
+++ b/stories/forms/fieldset.stories.ts
@@ -0,0 +1,18 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Fieldset",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    disabled: false,
+    form: "form",
+    name: "name",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("fieldset", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/form.stories.ts b/stories/forms/form.stories.ts
new file mode 100644
index 00000000..3905d2c2
--- /dev/null
+++ b/stories/forms/form.stories.ts
@@ -0,0 +1,23 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Form",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    "accept-charset": "UTF-8",
+    name: "name",
+    rel: "noopener",
+    action: "action",
+    enctype: "application/x-www-form-urlencoded",
+    method: "get",
+    novalidate: false,
+    target: "_self",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("form", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/input.stories.ts b/stories/forms/input.stories.ts
new file mode 100644
index 00000000..ac3591bf
--- /dev/null
+++ b/stories/forms/input.stories.ts
@@ -0,0 +1,220 @@
+import { render } from "sass-embedded";
+import { createHTMLElement } from "../HTMLElement";
+
+const inputTypes = [
+  "button",
+  "checkbox",
+  "color",
+  "date",
+  "datetime-local",
+  "email",
+  "file",
+  "hidden",
+  "image",
+  "month",
+  "number",
+  "password",
+  "radio",
+  "range",
+  "reset",
+  "search",
+  "submit",
+  "tel",
+  "text",
+  "time",
+  "url",
+  "week",
+];
+
+export default {
+  title: "Forms/Input",
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: inputTypes,
+    },
+  },
+  args: {
+    content: "Content",
+    accept: "text/plain",
+    alt: "Alt text",
+    capture: "camera",
+    checked: true,
+    dirname: "input-dir",
+    disabled: false,
+    form: "form-id",
+    formaction: "action-url",
+    formenctype: "application/x-www-form-urlencoded",
+    formmethod: "GET",
+    formnovalidate: false,
+    formtarget: "_blank",
+    height: 100,
+    list: "datalist-id",
+    max: 100,
+    maxlength: 50,
+    min: 0,
+    minlength: 5,
+    multiple: true,
+    name: "input-name",
+    pattern: "[a-zA-Z0-9]",
+    placeholder: "Placeholder text",
+    popvertarget: "popover-target-id",
+    popovertargetaction: "toggle",
+    readonly: false,
+    required: true,
+    size: 20,
+    src: "https://picsum.photos/200/300",
+    step: 1,
+    type: "text",
+    value: "Input value",
+    width: 200,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("input", args);
+  },
+};
+
+export const Default = {};
+
+// All input types
+export const AllInputTypes = {
+  render: (args) => {
+    const fragment = document.createDocumentFragment();
+
+    for (const type of inputTypes) {
+      args.type = type;
+
+      // Create a new input element for each type
+      const element = createHTMLElement("input", {
+        ...args,
+        type: type,
+        placeholder: `Input type: ${type}`,
+      });
+
+      if (!element) {
+        console.error(`Failed to create input element for type: ${type}`);
+        continue;
+      }
+
+      // Add the element to the array
+      fragment.appendChild(element);
+    }
+    return fragment;
+  },
+};
+
+export const WithLabelSibling = {
+  args: {
+    labelText: "Label text",
+  },
+  render: (args) => {
+    // Fragment
+    const fragment = document.createDocumentFragment();
+    const label = createHTMLElement("label", {
+      content: args.labelText,
+    });
+    const input = createHTMLElement("input", {
+      ...args,
+      type: args.type,
+    });
+    if (!input) {
+      console.error(`Failed to create input element for type: ${args.type}`);
+      return;
+    }
+    // Append the label to the fragment
+    fragment.appendChild(label);
+    // Append the input to the fragment
+    fragment.appendChild(input);
+    // Return the fragment
+    return fragment;
+  },
+};
+
+export const AsChildOfLabel = {
+  args: {
+    labelText: "Label text",
+  },
+  render: (args) => {
+    // Fragment
+    const fragment = document.createDocumentFragment();
+    const label = createHTMLElement("label", {
+      content: args.labelText,
+    });
+    const input = createHTMLElement("input", {
+      ...args,
+      type: args.type,
+    });
+    if (!input) {
+      console.error(`Failed to create input element for type: ${args.type}`);
+      return;
+    }
+    label.appendChild(input);
+    fragment.appendChild(label);
+    // Return the fragment
+    return fragment;
+  },
+};
+
+export const AsPrependedChildOfLabel = {
+  args: {
+    labelText: "Label text",
+  },
+  render: (args) => {
+    // Fragment
+    const fragment = document.createDocumentFragment();
+    const label = createHTMLElement("label", {
+      content: args.labelText,
+    });
+    const input = createHTMLElement("input", {
+      ...args,
+      type: args.type,
+    });
+    if (!input) {
+      console.error(`Failed to create input element for type: ${args.type}`);
+      return;
+    }
+    label.prepend(input);
+    fragment.appendChild(label);
+    // Return the fragment
+    return fragment;
+  },
+};
+
+export const Inline = {
+  args: {
+    labelText: "Label text",
+  },
+  render: (args) => {
+    // We want to encapsulate the input with text before and after it, e.g. have the input in the middle of a sentence
+    // Fragment
+    const fragment = document.createDocumentFragment();
+    const label = createHTMLElement("label", {
+      content: args.labelText,
+    });
+    const input = createHTMLElement("input", {
+      ...args,
+      type: args.type,
+    });
+    if (!input) {
+      console.error(`Failed to create input element for type: ${args.type}`);
+      return;
+    }
+    // Create a span to encapsulate the input
+    const span = document.createElement("span");
+    span.appendChild(input);
+    // Add text before the input
+    const beforeText = document.createTextNode("Before text ");
+    span.prepend(beforeText);
+    // Add text after the input
+    const afterText = document.createTextNode(" After text goes here");
+    span.appendChild(afterText);
+    // Append the span to the label
+    label.appendChild(span);
+    // Append the label to the fragment
+    fragment.appendChild(label);
+    // Return the fragment
+    return fragment;
+  },
+};
diff --git a/stories/forms/label.stories.ts b/stories/forms/label.stories.ts
new file mode 100644
index 00000000..f8e4b14f
--- /dev/null
+++ b/stories/forms/label.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Label",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    for: "input-id",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("label", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/legend.stories.ts b/stories/forms/legend.stories.ts
new file mode 100644
index 00000000..477f6510
--- /dev/null
+++ b/stories/forms/legend.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Legend",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("legend", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/meter.stories.ts b/stories/forms/meter.stories.ts
new file mode 100644
index 00000000..fb42dd22
--- /dev/null
+++ b/stories/forms/meter.stories.ts
@@ -0,0 +1,22 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Meter",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    value: 0.5,
+    min: 0,
+    max: 1,
+    low: 0.2,
+    high: 0.8,
+    optimum: 0.5,
+    form: "form",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("meter", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/optgroup.stories.ts b/stories/forms/optgroup.stories.ts
new file mode 100644
index 00000000..b0758866
--- /dev/null
+++ b/stories/forms/optgroup.stories.ts
@@ -0,0 +1,17 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Optgroup",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    label: "Label",
+    disabled: false,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("optgroup", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/option.stories.ts b/stories/forms/option.stories.ts
new file mode 100644
index 00000000..f2d4da5a
--- /dev/null
+++ b/stories/forms/option.stories.ts
@@ -0,0 +1,19 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Option",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    disabled: false,
+    label: "Label",
+    selected: false,
+    value: "Value",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("option", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/output.stories.ts b/stories/forms/output.stories.ts
new file mode 100644
index 00000000..6806d260
--- /dev/null
+++ b/stories/forms/output.stories.ts
@@ -0,0 +1,18 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Output",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    for: "for",
+    form: "form",
+    name: "name",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("output", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/progress.stories.ts b/stories/forms/progress.stories.ts
new file mode 100644
index 00000000..c18d80ba
--- /dev/null
+++ b/stories/forms/progress.stories.ts
@@ -0,0 +1,17 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Progress",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    max: 100,
+    value: 50,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("progress", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/select.stories.ts b/stories/forms/select.stories.ts
new file mode 100644
index 00000000..10d2d5f5
--- /dev/null
+++ b/stories/forms/select.stories.ts
@@ -0,0 +1,22 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Select",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    autocomplete: "on",
+    disabled: false,
+    form: "form",
+    multiple: false,
+    name: "name",
+    required: false,
+    size: 0,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("select", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/forms/textarea.stories.ts b/stories/forms/textarea.stories.ts
new file mode 100644
index 00000000..538b0abe
--- /dev/null
+++ b/stories/forms/textarea.stories.ts
@@ -0,0 +1,27 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Forms/Textarea",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    cols: 20,
+    dirname: "dirname",
+    disabled: false,
+    form: "form",
+    maxlength: 100,
+    minlength: 0,
+    name: "name",
+    placeholder: "placeholder",
+    readonly: false,
+    required: false,
+    rows: 2,
+    wrap: "soft",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("textarea", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/html.stories.ts b/stories/html.stories.ts
new file mode 100644
index 00000000..866d45b7
--- /dev/null
+++ b/stories/html.stories.ts
@@ -0,0 +1,20 @@
+export default {
+  title: "Example/HTML",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<html>
+            <head>
+            <title>HTML Story</title>
+            </head>
+            <body>
+            <h1>Hello, world!</h1>
+            </body>
+        </html>`;
+  },
+};
+
+export const Default = {};
diff --git a/stories/image-and-multimedia/area.stories.ts b/stories/image-and-multimedia/area.stories.ts
new file mode 100644
index 00000000..775e1d61
--- /dev/null
+++ b/stories/image-and-multimedia/area.stories.ts
@@ -0,0 +1,24 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "ImageAndMultimedia/Area",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    shape: "poly",
+    coords: "129,0,260,95,129,138",
+    href: "https://developer.mozilla.org/docs/Web/HTTP",
+    alt: "Content",
+    download: "download",
+    ping: "https://developer.mozilla.org/docs/Web/HTTP",
+    referrerpolicy: "no-referrer",
+    rel: "noopener",
+    target: "_blank",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("area", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/image-and-multimedia/audio.stories.ts b/stories/image-and-multimedia/audio.stories.ts
new file mode 100644
index 00000000..3338ae02
--- /dev/null
+++ b/stories/image-and-multimedia/audio.stories.ts
@@ -0,0 +1,23 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "ImageAndMultimedia/Audio",
+  tags: ["autodocs"],
+  args: {
+    src: "https://www.w3schools.com/html/horse.mp3",
+    controls: true,
+    autoplay: false,
+    controlslist: "nodownload",
+    crossorigin: "anonymous",
+    disableremoteplayback: false,
+    loop: false,
+    muted: false,
+    preload: "auto",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("audio", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/image-and-multimedia/img.stories.ts b/stories/image-and-multimedia/img.stories.ts
new file mode 100644
index 00000000..d8f9bc70
--- /dev/null
+++ b/stories/image-and-multimedia/img.stories.ts
@@ -0,0 +1,30 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "ImageAndMultimedia/Img",
+  tags: ["autodocs"],
+  args: {
+    src: "https://picsum.photos/200/300",
+    alt: "Sample Image",
+    attributionsrc: "https://example.com/attribution",
+    crossorigin: "anonymous",
+    decoding: "async",
+    elementtiming: "image",
+    fetchpriority: "high",
+    height: 300,
+    width: 200,
+    ismap: false,
+    loading: "lazy",
+    referrerpolicy: "no-referrer",
+    sizes: "(max-width: 600px) 100vw, 50vw",
+    srcset:
+      "https://picsum.photos/200/300 200w, https://picsum.photos/400/600 400w",
+    usemap: "#map",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("img", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/image-and-multimedia/map.stories.ts b/stories/image-and-multimedia/map.stories.ts
new file mode 100644
index 00000000..044d50e6
--- /dev/null
+++ b/stories/image-and-multimedia/map.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "ImageAndMultimedia/Map",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    name: "name",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("map", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/image-and-multimedia/track.stories.ts b/stories/image-and-multimedia/track.stories.ts
new file mode 100644
index 00000000..b66f17e0
--- /dev/null
+++ b/stories/image-and-multimedia/track.stories.ts
@@ -0,0 +1,19 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "ImageAndMultimedia/Track",
+  tags: ["autodocs"],
+  args: {
+    src: "https://www.w3schools.com/html/mov_bbb.vtt",
+    default: "default",
+    kind: "captions",
+    label: "English",
+    srclang: "en",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("track", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/image-and-multimedia/video.stories.ts b/stories/image-and-multimedia/video.stories.ts
new file mode 100644
index 00000000..21a3827d
--- /dev/null
+++ b/stories/image-and-multimedia/video.stories.ts
@@ -0,0 +1,28 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "ImageAndMultimedia/Video",
+  tags: ["autodocs"],
+  args: {
+    src: "https://www.w3schools.com/html/mov_bbb.mp4",
+    controls: true,
+    autoplay: false,
+    controlslist: "nodownload",
+    crossorigin: "anonymous",
+    disablepictureinpicture: false,
+    disableremoteplayback: false,
+    height: 240,
+    width: 320,
+    loop: false,
+    muted: false,
+    playsinline: false,
+    poster: "https://picsum.photos/200/300",
+    preload: "auto",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("video", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/a.stories.ts b/stories/inline-text-semantics/a.stories.ts
new file mode 100644
index 00000000..9059abfe
--- /dev/null
+++ b/stories/inline-text-semantics/a.stories.ts
@@ -0,0 +1,23 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/A",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    href: "https://example.com",
+    target: "_blank",
+    download: "file.txt",
+    rel: "noopener noreferrer",
+    hreflang: "en",
+    ping: "https://example.com/ping",
+    referrerpolicy: "no-referrer",
+    type: "text/html",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("a", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/abbr.stories.ts b/stories/inline-text-semantics/abbr.stories.ts
new file mode 100644
index 00000000..a32a94b1
--- /dev/null
+++ b/stories/inline-text-semantics/abbr.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Abbr",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("abbr", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/b.stories.ts b/stories/inline-text-semantics/b.stories.ts
new file mode 100644
index 00000000..5ced3101
--- /dev/null
+++ b/stories/inline-text-semantics/b.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/B",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("b", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/bdi.stories.ts b/stories/inline-text-semantics/bdi.stories.ts
new file mode 100644
index 00000000..e7868507
--- /dev/null
+++ b/stories/inline-text-semantics/bdi.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Bdi",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("bdi", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/bdo.stories.ts b/stories/inline-text-semantics/bdo.stories.ts
new file mode 100644
index 00000000..a3505122
--- /dev/null
+++ b/stories/inline-text-semantics/bdo.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Bdo",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("bdo", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/br.stories.ts b/stories/inline-text-semantics/br.stories.ts
new file mode 100644
index 00000000..cd6a025c
--- /dev/null
+++ b/stories/inline-text-semantics/br.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/BR",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("br", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/cite.stories.ts b/stories/inline-text-semantics/cite.stories.ts
new file mode 100644
index 00000000..28334e91
--- /dev/null
+++ b/stories/inline-text-semantics/cite.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Cite",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("cite", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/code.stories.ts b/stories/inline-text-semantics/code.stories.ts
new file mode 100644
index 00000000..12b425d0
--- /dev/null
+++ b/stories/inline-text-semantics/code.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Code",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<data>${args.content}</code>`;
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/data.stories.ts b/stories/inline-text-semantics/data.stories.ts
new file mode 100644
index 00000000..45ce8c4a
--- /dev/null
+++ b/stories/inline-text-semantics/data.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Data",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    value: "Value",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("data", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/dfn.stories.ts b/stories/inline-text-semantics/dfn.stories.ts
new file mode 100644
index 00000000..5aba31d7
--- /dev/null
+++ b/stories/inline-text-semantics/dfn.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Dfn",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dfn", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/em.stories.ts b/stories/inline-text-semantics/em.stories.ts
new file mode 100644
index 00000000..9d770187
--- /dev/null
+++ b/stories/inline-text-semantics/em.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Em",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("em", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/i.stories.ts b/stories/inline-text-semantics/i.stories.ts
new file mode 100644
index 00000000..bf36bab3
--- /dev/null
+++ b/stories/inline-text-semantics/i.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/I",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("i", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/kbd.stories.ts b/stories/inline-text-semantics/kbd.stories.ts
new file mode 100644
index 00000000..af35d4bb
--- /dev/null
+++ b/stories/inline-text-semantics/kbd.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Kbd",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("kbd", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/mark.stories.ts b/stories/inline-text-semantics/mark.stories.ts
new file mode 100644
index 00000000..58c08e3b
--- /dev/null
+++ b/stories/inline-text-semantics/mark.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Mark",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("mark", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/q.stories.ts b/stories/inline-text-semantics/q.stories.ts
new file mode 100644
index 00000000..d6ae15e6
--- /dev/null
+++ b/stories/inline-text-semantics/q.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Q",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("q", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/rp.stories.ts b/stories/inline-text-semantics/rp.stories.ts
new file mode 100644
index 00000000..1d43815e
--- /dev/null
+++ b/stories/inline-text-semantics/rp.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Rp",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("rp", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/rt.stories.ts b/stories/inline-text-semantics/rt.stories.ts
new file mode 100644
index 00000000..6c8df44a
--- /dev/null
+++ b/stories/inline-text-semantics/rt.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Rt",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("rt", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/ruby.stories.ts b/stories/inline-text-semantics/ruby.stories.ts
new file mode 100644
index 00000000..e74b1247
--- /dev/null
+++ b/stories/inline-text-semantics/ruby.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Ruby",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("ruby", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/s.stories.ts b/stories/inline-text-semantics/s.stories.ts
new file mode 100644
index 00000000..19893975
--- /dev/null
+++ b/stories/inline-text-semantics/s.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/S",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("s", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/samp.stories.ts b/stories/inline-text-semantics/samp.stories.ts
new file mode 100644
index 00000000..97280719
--- /dev/null
+++ b/stories/inline-text-semantics/samp.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Samp",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("samp", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/small.stories.ts b/stories/inline-text-semantics/small.stories.ts
new file mode 100644
index 00000000..02a354e1
--- /dev/null
+++ b/stories/inline-text-semantics/small.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Small",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("small", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/span.stories.ts b/stories/inline-text-semantics/span.stories.ts
new file mode 100644
index 00000000..ec038995
--- /dev/null
+++ b/stories/inline-text-semantics/span.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Span",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("span", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/strong.stories.ts b/stories/inline-text-semantics/strong.stories.ts
new file mode 100644
index 00000000..4e0911eb
--- /dev/null
+++ b/stories/inline-text-semantics/strong.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Strong",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("strong", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/sub.stories.ts b/stories/inline-text-semantics/sub.stories.ts
new file mode 100644
index 00000000..d66a9b84
--- /dev/null
+++ b/stories/inline-text-semantics/sub.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Sub",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("sub", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/sup.stories.ts b/stories/inline-text-semantics/sup.stories.ts
new file mode 100644
index 00000000..bea0fd76
--- /dev/null
+++ b/stories/inline-text-semantics/sup.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Sup",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("sup", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/time.stories.ts b/stories/inline-text-semantics/time.stories.ts
new file mode 100644
index 00000000..bd44502d
--- /dev/null
+++ b/stories/inline-text-semantics/time.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Time",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    datetime: "2023-10-01T12:00:00Z",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("time", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/u.stories.ts b/stories/inline-text-semantics/u.stories.ts
new file mode 100644
index 00000000..69940f42
--- /dev/null
+++ b/stories/inline-text-semantics/u.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/U",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("u", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/var.stories.ts b/stories/inline-text-semantics/var.stories.ts
new file mode 100644
index 00000000..2579f3ca
--- /dev/null
+++ b/stories/inline-text-semantics/var.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Var",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("var", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/inline-text-semantics/wbr.stories.ts b/stories/inline-text-semantics/wbr.stories.ts
new file mode 100644
index 00000000..cfe71a2e
--- /dev/null
+++ b/stories/inline-text-semantics/wbr.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InlineTextSemantics/Wbr",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("wbr", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/interactive-elements/details.stories.ts b/stories/interactive-elements/details.stories.ts
new file mode 100644
index 00000000..d5fb68db
--- /dev/null
+++ b/stories/interactive-elements/details.stories.ts
@@ -0,0 +1,23 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InteractiveElements/Details",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    name: "details",
+    open: false,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("details", args);
+  },
+};
+
+export const Default = {};
+
+export const Open = {
+  args: {
+    open: true,
+  },
+};
diff --git a/stories/interactive-elements/details_and_summary.stories.ts b/stories/interactive-elements/details_and_summary.stories.ts
new file mode 100644
index 00000000..77e499d6
--- /dev/null
+++ b/stories/interactive-elements/details_and_summary.stories.ts
@@ -0,0 +1,31 @@
+import { createHTMLElement } from "../HTMLElement";
+
+// Import the details and summary stories
+import Details from "./details.stories";
+import Summary from "./summary.stories";
+
+export default {
+  title: "InteractiveElements/DetailsAndSummary",
+  tags: ["autodocs"],
+  args: {
+    ...Details.args,
+    ...Summary.args,
+    content: "Details and Summary content",
+    summary: "Summary Label",
+  },
+
+  render: (args) => {
+    return createHTMLElement("details", {
+      ...args,
+      content: [
+        createHTMLElement("summary", {
+          ...args,
+          content: args.summary,
+        }),
+        args.content,
+      ],
+    });
+  },
+};
+
+export const Default = {};
diff --git a/stories/interactive-elements/dialog.stories.ts b/stories/interactive-elements/dialog.stories.ts
new file mode 100644
index 00000000..94076e7a
--- /dev/null
+++ b/stories/interactive-elements/dialog.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InteractiveElements/Dialog",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    open: false,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dialog", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/interactive-elements/summary.stories.ts b/stories/interactive-elements/summary.stories.ts
new file mode 100644
index 00000000..286bae90
--- /dev/null
+++ b/stories/interactive-elements/summary.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "InteractiveElements/Summary",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("summary", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/scripting/canvas.stories.ts b/stories/scripting/canvas.stories.ts
new file mode 100644
index 00000000..7c813464
--- /dev/null
+++ b/stories/scripting/canvas.stories.ts
@@ -0,0 +1,17 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Scripting/Canvas",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    height: 100,
+    width: 100,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("canvas", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/scripting/noscript.stories.ts b/stories/scripting/noscript.stories.ts
new file mode 100644
index 00000000..d293ef71
--- /dev/null
+++ b/stories/scripting/noscript.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Scripting/Noscript",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("noscript", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/scripting/script.stories.ts b/stories/scripting/script.stories.ts
new file mode 100644
index 00000000..d58c9110
--- /dev/null
+++ b/stories/scripting/script.stories.ts
@@ -0,0 +1,26 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Scripting/Script",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    async: false,
+    attributionsrc: "",
+    blocking: false,
+    crossorigin: "",
+    defer: false,
+    fetchpriority: "auto",
+    integrity: "",
+    nomodule: false,
+    referrerpolicy: "no-referrer",
+    src: "",
+    type: "text/javascript",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("script", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/address.stories.ts b/stories/sectioning/address.stories.ts
new file mode 100644
index 00000000..85f02457
--- /dev/null
+++ b/stories/sectioning/address.stories.ts
@@ -0,0 +1,38 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Address",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<address
+    ${Object.entries(args)
+      .map(([key, value]) => {
+        if (!value) {
+          return "";
+        }
+        return `${key}="${value}"`;
+      })
+      .join(" ")}
+    >${args.content}</address>`;
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<address>
+  You can contact author at
+  <a href="http://www.example.com/contact">www.example.com</a>.<br />
+  If you see any bugs, please
+  <a href="mailto:webmaster@example.com">contact webmaster</a>.<br />
+  You may also want to visit us:<br />
+  Mozilla Foundation<br />
+  331 E Evelyn Ave<br />
+  Mountain View, CA 94041<br />
+  USA
+</address>`,
+};
diff --git a/stories/sectioning/article.stories.ts b/stories/sectioning/article.stories.ts
new file mode 100644
index 00000000..01237e1c
--- /dev/null
+++ b/stories/sectioning/article.stories.ts
@@ -0,0 +1,70 @@
+import { render } from "sass-embedded";
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Article",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<article>Article Content</article>`;
+  },
+};
+
+export const Default = {};
+
+export const WithContent = {
+  render: (args) => {
+    return createHTMLElement("article", {
+      content: `<header><h1>Article Title</h1></header>
+        <p>This is the first paragraph of the article.</p>
+        <p>This is the second paragraph of the article.</p>
+        <footer><p>Author: John Doe</p></footer>`,
+    });
+  },
+};
+
+export const MozillaExample = {
+  render: (args) => `<article>
+  <h2>Jurassic Park</h2>
+  <section >
+    <h3>Review</h3>
+    <p>Dinos were great!</p>
+  </section>
+  <section>
+    <h3>User reviews</h3>
+    <article>
+      <h4>Too scary!</h4>
+      <p>Way too scary for me.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-16 19:00">May 16</time>
+          by Lisa.
+        </p>
+      </footer>
+    </article>
+    <article>
+      <h4>Love the dinos!</h4>
+      <p>I agree, dinos are my favorite.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-17 19:00">May 17</time>
+          by Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posted on
+      <time datetime="2015-05-15 19:00">May 15</time>
+      by Staff.
+    </p>
+  </footer>
+</article>
+`,
+};
diff --git a/stories/sectioning/aside.stories.ts b/stories/sectioning/aside.stories.ts
new file mode 100644
index 00000000..2779575c
--- /dev/null
+++ b/stories/sectioning/aside.stories.ts
@@ -0,0 +1,29 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Aside",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<aside>Aside content</aside>`;
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<article>
+  <p>
+    The Disney movie <cite>The Little Mermaid</cite> was first released to
+    theatres in 1989.
+  </p>
+  <aside>
+    <p>The movie earned $87 million during its initial release.</p>
+  </aside>
+  <p>More info about the movie…</p>
+</article>
+`,
+};
diff --git a/stories/sectioning/body.stories.ts b/stories/sectioning/body.stories.ts
new file mode 100644
index 00000000..79d1e6bc
--- /dev/null
+++ b/stories/sectioning/body.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Body",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("body", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/footer.stories.ts b/stories/sectioning/footer.stories.ts
new file mode 100644
index 00000000..a4a1a0f0
--- /dev/null
+++ b/stories/sectioning/footer.stories.ts
@@ -0,0 +1,31 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Footer",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("footer", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<h3>FIFA World Cup top goalscorers</h3>
+  <ol>
+    <li>Miroslav Klose, 16</li>
+    <li>Ronaldo Nazário, 15</li>
+    <li>Gerd Müller, 14</li>
+  </ol>
+
+  <footer>
+    <small>
+      Copyright © 2023 Football History Archives. All Rights Reserved.
+    </small>
+  </footer>
+`,
+};
diff --git a/stories/sectioning/h1.stories.ts b/stories/sectioning/h1.stories.ts
new file mode 100644
index 00000000..41a17bf4
--- /dev/null
+++ b/stories/sectioning/h1.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/H1",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("h1", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/h2.stories.ts b/stories/sectioning/h2.stories.ts
new file mode 100644
index 00000000..30b6447a
--- /dev/null
+++ b/stories/sectioning/h2.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/H2",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("h2", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/h3.stories.ts b/stories/sectioning/h3.stories.ts
new file mode 100644
index 00000000..d8310afc
--- /dev/null
+++ b/stories/sectioning/h3.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/H3",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("h3", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/h4.stories.ts b/stories/sectioning/h4.stories.ts
new file mode 100644
index 00000000..56c9576b
--- /dev/null
+++ b/stories/sectioning/h4.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/H4",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("h4", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/h5.stories.ts b/stories/sectioning/h5.stories.ts
new file mode 100644
index 00000000..04f616f2
--- /dev/null
+++ b/stories/sectioning/h5.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/H5",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("h5", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/h6.stories.ts b/stories/sectioning/h6.stories.ts
new file mode 100644
index 00000000..adba57af
--- /dev/null
+++ b/stories/sectioning/h6.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/H6",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("h6", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/sectioning/header.stories.ts b/stories/sectioning/header.stories.ts
new file mode 100644
index 00000000..b329beac
--- /dev/null
+++ b/stories/sectioning/header.stories.ts
@@ -0,0 +1,39 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Header",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("header", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExamplePageHeader = {
+  render: (args) => `<header>
+  <h1>Main Page Title</h1>
+  <img src="https://picsum.photos/200/300" alt="MDN logo" />
+</header>`,
+};
+
+export const MozillaExampleArticleHeader = {
+  render: (args) => `<article>
+  <header>
+    <h2>The Planet Earth</h2>
+    <p>
+      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
+      Jane Smith
+    </p>
+  </header>
+  <p>
+    We live on a planet that's blue and green, with so many things still unseen.
+  </p>
+  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
+</article>
+`,
+};
diff --git a/stories/sectioning/hgroup.stories.ts b/stories/sectioning/hgroup.stories.ts
new file mode 100644
index 00000000..e5292cbc
--- /dev/null
+++ b/stories/sectioning/hgroup.stories.ts
@@ -0,0 +1,30 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/HGroup",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("hgroup", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<hgroup id="document-title">
+    <h1>HTML: Living Standard</h1>
+    <p>Last Updated 12 July 2022</p>
+  </hgroup>
+  <p>Some intro to the document.</p>
+  <h2>Table of contents</h2>
+  <ol id="toc">
+    …
+  </ol>
+  <h2>First section</h2>
+  <p>Some intro to the first section.</p>
+`,
+};
diff --git a/stories/sectioning/main.stories.ts b/stories/sectioning/main.stories.ts
new file mode 100644
index 00000000..9020efe5
--- /dev/null
+++ b/stories/sectioning/main.stories.ts
@@ -0,0 +1,38 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Main",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("main", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<main>
+  <h1>Apples</h1>
+  <p>The apple is the pomaceous fruit of the apple tree.</p>
+
+  <article>
+    <h2>Red Delicious</h2>
+    <p>
+      These bright red apples are the most common found in many supermarkets.
+    </p>
+    <p>…</p>
+    <p>…</p>
+  </article>
+
+  <article>
+    <h2>Granny Smith</h2>
+    <p>These juicy, green apples make a great filling for apple pies.</p>
+    <p>…</p>
+    <p>…</p>
+  </article>
+</main>`,
+};
diff --git a/stories/sectioning/nav.stories.ts b/stories/sectioning/nav.stories.ts
new file mode 100644
index 00000000..56b8dcac
--- /dev/null
+++ b/stories/sectioning/nav.stories.ts
@@ -0,0 +1,49 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Nav",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("nav", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<nav class="menu">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</nav>
+`,
+};
+
+export const MozillaExampleInProse = {
+  render: (args) => `<nav>
+  <h2>Navigation</h2>
+  <p>
+    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
+    whence the sounds of battle can be heard. To the east you can see a large
+    mountain, upon which many <a href="/school">school papers</a> are littered.
+    Far up this mountain you can spy a little figure who appears to be me,
+    desperately scribbling a <a href="/school/thesis">thesis</a>.
+  </p>
+  <p>
+    To the west are several exits. One fun-looking exit is labeled
+    <a href="https://games.example.com/">"games"</a>. Another more
+    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
+  </p>
+  <p>
+    To the south lies a dark and dank <a href="/about">contacts page</a>.
+    Cobwebs cover its disused entrance, and at one point you see a rat run
+    quickly out of the page.
+  </p>
+</nav>`,
+};
diff --git a/stories/sectioning/search.stories.ts b/stories/sectioning/search.stories.ts
new file mode 100644
index 00000000..0d2ed8aa
--- /dev/null
+++ b/stories/sectioning/search.stories.ts
@@ -0,0 +1,57 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Search",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("search", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<search>
+  <label>
+    Find and filter your query
+    <input type="search" id="query" />
+  </label>
+  <label>
+    <input type="checkbox" id="exact-only" />
+    Exact matches only
+  </label>
+
+  <section>
+    <h3>Results:</h3>
+    <ul id="results">
+      <!-- search result content -->
+    </ul>
+    <output id="no-results">
+      <!-- no results content -->
+    </output>
+  </section>
+</search>
+`,
+};
+
+export const MozillaExample2 = {
+  render: (args) => `<header>
+    <h1>Car rental agency</h1>
+    <search title="Website">...</search>
+  </header>
+  <main>
+    <h2>Cars available for rent</h2>
+    <search title="Cars">
+      <h3>Filter results</h3>
+      ...
+    </search>
+    <article>
+      <!-- search result content -->
+    </article>
+  </main>
+`,
+};
diff --git a/stories/sectioning/section.stories.ts b/stories/sectioning/section.stories.ts
new file mode 100644
index 00000000..2ebb5fa9
--- /dev/null
+++ b/stories/sectioning/section.stories.ts
@@ -0,0 +1,28 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Section",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("section", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<section>
+  <a href="#">Previous article</a>
+  <a href="#">Next article</a>
+</section><section>
+  <button class="reply">Reply</button>
+  <button class="reply-all">Reply to all</button>
+  <button class="fwd">Forward</button>
+  <button class="del">Delete</button>
+</section>
+`,
+};
diff --git a/stories/svg-and-mathml/math.stories.ts b/stories/svg-and-mathml/math.stories.ts
new file mode 100644
index 00000000..e15ff584
--- /dev/null
+++ b/stories/svg-and-mathml/math.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "SvgAndMathML/Math",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    display: "block",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("math", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/svg-and-mathml/svg.stories.ts b/stories/svg-and-mathml/svg.stories.ts
new file mode 100644
index 00000000..ec0a79fc
--- /dev/null
+++ b/stories/svg-and-mathml/svg.stories.ts
@@ -0,0 +1,21 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "SvgAndMathML/SVG",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    height: 100,
+    width: 100,
+    preserveAspectRatio: "xMidYMid meet",
+    viewBox: "0 0 100 100",
+    x: 0,
+    y: 0,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("svg", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/caption.stories.ts b/stories/table-content/caption.stories.ts
new file mode 100644
index 00000000..7854e58a
--- /dev/null
+++ b/stories/table-content/caption.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/Caption",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("caption", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/col.stories.ts b/stories/table-content/col.stories.ts
new file mode 100644
index 00000000..22c765d7
--- /dev/null
+++ b/stories/table-content/col.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/Col",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    span: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("col", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/colgroup.stories.ts b/stories/table-content/colgroup.stories.ts
new file mode 100644
index 00000000..1bed579d
--- /dev/null
+++ b/stories/table-content/colgroup.stories.ts
@@ -0,0 +1,16 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/Colgroup",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    span: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("colgroup", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/table.stories.ts b/stories/table-content/table.stories.ts
new file mode 100644
index 00000000..6e5e9074
--- /dev/null
+++ b/stories/table-content/table.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/Table",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("table", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/tbody.stories.ts b/stories/table-content/tbody.stories.ts
new file mode 100644
index 00000000..80be7ea9
--- /dev/null
+++ b/stories/table-content/tbody.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/TBody",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("tbody", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/td.stories.ts b/stories/table-content/td.stories.ts
new file mode 100644
index 00000000..4f45f657
--- /dev/null
+++ b/stories/table-content/td.stories.ts
@@ -0,0 +1,18 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/TD",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    colspan: 1,
+    headers: "",
+    rowspan: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("td", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/tfoot.stories.ts b/stories/table-content/tfoot.stories.ts
new file mode 100644
index 00000000..6bcc5ef6
--- /dev/null
+++ b/stories/table-content/tfoot.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/TFoot",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("tfoot", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/th.stories.ts b/stories/table-content/th.stories.ts
new file mode 100644
index 00000000..984db616
--- /dev/null
+++ b/stories/table-content/th.stories.ts
@@ -0,0 +1,20 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/TH",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    abbr: "Abbreviation",
+    colspan: 2,
+    headers: "Header",
+    rowspan: 2,
+    scope: "col",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("th", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/thead.stories.ts b/stories/table-content/thead.stories.ts
new file mode 100644
index 00000000..cb2180e0
--- /dev/null
+++ b/stories/table-content/thead.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/THead",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("thead", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/table-content/tr.stories.ts b/stories/table-content/tr.stories.ts
new file mode 100644
index 00000000..c601efcf
--- /dev/null
+++ b/stories/table-content/tr.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TableContent/TR",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("tr", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/text-content/blockquote.stories.ts b/stories/text-content/blockquote.stories.ts
new file mode 100644
index 00000000..0708bdd4
--- /dev/null
+++ b/stories/text-content/blockquote.stories.ts
@@ -0,0 +1,31 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Blockquote",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    cite: "https://example.com",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("blockquote", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render:
+    () => `<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
+  <p>
+    Avian carriers can provide high delay, low throughput, and low altitude
+    service. The connection topology is limited to a single point-to-point path
+    for each carrier, used with standard carriers, but many carriers can be used
+    without significant interference with each other, outside early spring. This
+    is because of the 3D ether space available to the carriers, in contrast to
+    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
+    avoidance system, which increases availability.
+  </p>
+</blockquote>`,
+};
diff --git a/stories/text-content/dd.stories.ts b/stories/text-content/dd.stories.ts
new file mode 100644
index 00000000..d2d50a9b
--- /dev/null
+++ b/stories/text-content/dd.stories.ts
@@ -0,0 +1,31 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/DD",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dd", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>Cryptids of Cornwall:</p>
+
+<dl>
+  <dt>Beast of Bodmin</dt>
+  <dd>A large feline inhabiting Bodmin Moor.</dd>
+
+  <dt>Morgawr</dt>
+  <dd>A sea serpent.</dd>
+
+  <dt>Owlman</dt>
+  <dd>A giant owl-like creature.</dd>
+</dl>
+`,
+};
diff --git a/stories/text-content/div.stories.ts b/stories/text-content/div.stories.ts
new file mode 100644
index 00000000..664c7903
--- /dev/null
+++ b/stories/text-content/div.stories.ts
@@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Div",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("div", args);
+  },
+};
+
+export const Default = {};
diff --git a/stories/text-content/dl.stories.ts b/stories/text-content/dl.stories.ts
new file mode 100644
index 00000000..3b202564
--- /dev/null
+++ b/stories/text-content/dl.stories.ts
@@ -0,0 +1,74 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/DL",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dl", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+`,
+};
+
+export const MozillaExampleMultipleTermsSingleDescription = {
+  render: () => `<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+`,
+};
+
+export const MozillaExampleSingleTermMultipleDescriptions = {
+  render: () => `<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+`,
+};
+
+export const MozillaExampleMultipleTermsAndDescriptions = {
+  render: () => `<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+`,
+};
diff --git a/stories/text-content/dt.stories.ts b/stories/text-content/dt.stories.ts
new file mode 100644
index 00000000..47c3f7d6
--- /dev/null
+++ b/stories/text-content/dt.stories.ts
@@ -0,0 +1,29 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/DT",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dt", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>Please use the following paint colors for the new house:</p>
+
+<dl>
+  <dt>Denim (semigloss finish)</dt>
+  <dd>Ceiling</dd>
+
+  <dt>Denim (eggshell finish)</dt>
+  <dt>Evening Sky (eggshell finish)</dt>
+  <dd>Layered on the walls</dd>
+</dl>
+`,
+};
diff --git a/stories/text-content/figcaption.stories.ts b/stories/text-content/figcaption.stories.ts
new file mode 100644
index 00000000..69b84094
--- /dev/null
+++ b/stories/text-content/figcaption.stories.ts
@@ -0,0 +1,25 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Figcaption",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("figcaption", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<figure>
+  <img
+    src="/shared-assets/images/examples/elephant.jpg"
+    alt="Elephant at sunset" />
+  <figcaption>An elephant at sunset</figcaption>
+</figure>
+`,
+};
diff --git a/stories/text-content/figure.stories.ts b/stories/text-content/figure.stories.ts
new file mode 100644
index 00000000..10d97759
--- /dev/null
+++ b/stories/text-content/figure.stories.ts
@@ -0,0 +1,43 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Figure",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("figure", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<figure>
+  <img src="https://picsum.photos/200/300" alt="The beautiful MDN logo." /><figcaption>An elephant at sunset</figcaption>
+</figure>`,
+};
+
+export const MozillaExampleQuotations = {
+  render: () => `<figure>
+  <figcaption><b>Edsger Dijkstra:</b></figcaption>
+  <blockquote>
+    If debugging is the process of removing software bugs, then programming must
+    be the process of putting them in.
+  </blockquote>
+</figure>`,
+};
+
+export const MozillaExamplePoems = {
+  render: () => `<figure>
+  <p style="white-space:pre">
+    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
+    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
+    yet no footing seen: Love is a spirit all compact of fire, Not gross to
+    sink, but light, and will aspire.
+  </p>
+  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
+</figure>`,
+};
diff --git a/stories/text-content/hr.stories.ts b/stories/text-content/hr.stories.ts
new file mode 100644
index 00000000..6f878256
--- /dev/null
+++ b/stories/text-content/hr.stories.ts
@@ -0,0 +1,29 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/HR",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<hr>`;
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>
+  This is the first paragraph of text. This is the first paragraph of text. This
+  is the first paragraph of text. This is the first paragraph of text.
+</p>
+
+<hr />
+
+<p>
+  This is the second paragraph of text. This is the second paragraph of text.
+  This is the second paragraph of text. This is the second paragraph of text.
+</p>`,
+};
diff --git a/stories/text-content/li.stories.ts b/stories/text-content/li.stories.ts
new file mode 100644
index 00000000..a21e9b49
--- /dev/null
+++ b/stories/text-content/li.stories.ts
@@ -0,0 +1,24 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/LI",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    value: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("li", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<ol>
+  <li>first item</li>
+  <li>second item</li>
+  <li>third item</li>
+</ol>`,
+};
diff --git a/stories/text-content/menu.stories.ts b/stories/text-content/menu.stories.ts
new file mode 100644
index 00000000..82cb68a5
--- /dev/null
+++ b/stories/text-content/menu.stories.ts
@@ -0,0 +1,33 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Menu",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("menu", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<div class="news">
+  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
+  <menu>
+    <li><button id="save">Save for later</button></li>
+    <li><button id="share">Share this news</button></li>
+  </menu>
+</div>`,
+};
+
+export const MozillaExample2 = {
+  render: () => `<menu>
+  <li><button onclick="copy()">Copy</button></li>
+  <li><button onclick="cut()">Cut</button></li>
+  <li><button onclick="paste()">Paste</button></li>
+</menu>`,
+};
diff --git a/stories/text-content/ol.stories.ts b/stories/text-content/ol.stories.ts
new file mode 100644
index 00000000..e576f845
--- /dev/null
+++ b/stories/text-content/ol.stories.ts
@@ -0,0 +1,76 @@
+import { ArgTypes } from "@storybook/blocks";
+import { createHTMLElement } from "../HTMLElement";
+import LI from "./li.stories";
+
+export default {
+  title: "TextContent/OL",
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["a", "A", "i", "I", "1"],
+      description: "The type of list marker to use.",
+    },
+  },
+  args: {
+    content: "Content",
+    reversed: false,
+    start: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("ol", args);
+  },
+};
+
+export const Default = {};
+
+export const WithItems = {
+  render: (args) => {
+    return createHTMLElement("ol", {
+      ...args,
+      content: [
+        createHTMLElement("li", { content: "Item 1" }),
+        createHTMLElement("li", { content: "Item 2" }),
+        createHTMLElement("li", { content: "Item 3" }),
+        createHTMLElement("li", { content: "Item 4" }),
+        createHTMLElement("li", { content: "Item 5" }),
+      ],
+    });
+  },
+};
+
+export const MozillaExampleNestingLists = {
+  render: () => `<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>
+`,
+};
+
+export const MozillaExampleNestingUnorderedLists = {
+  render: () => `<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ul>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>`,
+};
diff --git a/stories/text-content/p.stories.ts b/stories/text-content/p.stories.ts
new file mode 100644
index 00000000..b7afbd76
--- /dev/null
+++ b/stories/text-content/p.stories.ts
@@ -0,0 +1,26 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/P",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("p", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>
+  This is the first paragraph of text. This is the first paragraph of text. This
+  is the first paragraph of text. This is the first paragraph of text.
+</p>
+<p>
+  This is the second paragraph. This is the second paragraph. This is the second
+  paragraph. This is the second paragraph.
+</p>`,
+};
diff --git a/stories/text-content/pre.stories.ts b/stories/text-content/pre.stories.ts
new file mode 100644
index 00000000..67530366
--- /dev/null
+++ b/stories/text-content/pre.stories.ts
@@ -0,0 +1,34 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Pre",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("pre", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<figure>
+  <pre role="img" aria-label="ASCII COW">
+      ___________________________
+  &lt; I'm an expert in my field. &gt;
+      ---------------------------
+          \   ^__^
+           \  (oo)\_______
+              (__)\       )\/\
+                  ||----w |
+                  ||     ||
+  </pre>
+  <figcaption id="cow-caption">
+    A cow saying, "I'm an expert in my field." The cow is illustrated using
+    preformatted text characters.
+  </figcaption>
+</figure>`,
+};
diff --git a/stories/text-content/ul.stories.ts b/stories/text-content/ul.stories.ts
new file mode 100644
index 00000000..d4ac4311
--- /dev/null
+++ b/stories/text-content/ul.stories.ts
@@ -0,0 +1,76 @@
+import { create } from "storybook/internal/theming";
+import { createHTMLElement } from "../HTMLElement";
+import LI from "./li.stories";
+
+export default {
+  title: "TextContent/UL",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("ul", args);
+  },
+};
+
+export const Default = {};
+
+export const WithItems = {
+  render: (args) => {
+    return createHTMLElement("ul", {
+      ...args,
+      content: [
+        createHTMLElement("li", { content: "Item 1" }),
+        createHTMLElement("li", { content: "Item 2" }),
+        createHTMLElement("li", { content: "Item 3" }),
+        createHTMLElement("li", { content: "Item 4" }),
+        createHTMLElement("li", { content: "Item 5" }),
+      ],
+    });
+  },
+};
+
+export const MozillaExampleNestingLists = {
+  render: () => `<ul>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- Look, the closing </li> tag is not placed here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>
+        second item second subitem
+        <!-- Same for the second nested unordered list! -->
+        <ul>
+          <li>second item second subitem first sub-subitem</li>
+          <li>second item second subitem second sub-subitem</li>
+          <li>second item second subitem third sub-subitem</li>
+        </ul>
+      </li>
+      <!-- Closing </li> tag for the li that
+                  contains the third unordered list -->
+      <li>second item third subitem</li>
+    </ul>
+    <!-- Here is the closing </li> tag -->
+  </li>
+  <li>third item</li>
+</ul>`,
+};
+
+export const MozillaExampleNestingOrderedLists = {
+  render: () => `<ul>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- Look, the closing </li> tag is not placed here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+    <!-- Here is the closing </li> tag -->
+  </li>
+  <li>third item</li>
+</ul>`,
+};