diff --git a/CHANGELOG.md b/CHANGELOG.md
index b74860aa6..ec6495a35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,11 +2,20 @@
 
 ## v0.2.6 -
 
+-   Added `name` HTML5 attribute to all Components as a global property.
 -   Adjusted dark / light shades coloring slightly.
 -   Fixed the sizing modifiers.
+-   Fixed the spacing modifiers.
 -   Fixed typo of `dismissable` -> `dismissible`.
+-   Fixed typing of `DESIGN_HIDDEN_ARGUMENT` not accepting array arguments for Viewports.
 -   Updated the following Components
 
+    -   Feedback
+
+        -   `Wave`
+
+            -   Removed line wrapping from the children dots.
+
     -   Navigation
 
         -   `Aside` / `Omni`
@@ -17,6 +26,10 @@
 
             -   Fixed not resetting the `List` margins.
 
+        -   `Menu`
+
+            -   Fixed `Menu.Divider` not rendering non-text dividers properly.
+
     -   Overlays
 
         -   `Overlay`
@@ -25,6 +38,10 @@
 
     -   Surfaces
 
+        -   `Box`
+
+            -   Adjusted default color shade to match `Hero`.
+
         -   `Card` / `Tile`
 
             -   Added low transparency border for legibility.
@@ -33,6 +50,16 @@
 
             -   Updated `Tile.Section` to use bigger padding when first and / or last child for their respective sides.
 
+    -   Typography
+
+        -   `Heading` / `Text`
+
+            -   Added `palette="accent/dark/light/alert/affirmative/negative"` text color modifier.
+
+        -   `Text`
+
+            -   Added initial keycap design for `<Text is="kbd">`.
+
 ## v0.2.5 - UNRELEASED
 
 -   Added new Components
diff --git a/dist/kahi-ui.framework.css b/dist/kahi-ui.framework.css
index 33a509731..0d34b1d6d 100644
--- a/dist/kahi-ui.framework.css
+++ b/dist/kahi-ui.framework.css
@@ -484,6 +484,7 @@ span.ellipsis > span:nth-child(2) {
   --size-icon: 1em;
   vertical-align: middle;
   display: inline-block;
+  white-space: nowrap;
   font-size: var(--size-icon);
 }
 
@@ -1530,19 +1531,23 @@ h6[data-variation~="headline"] {
   line-height: 2rem;
 }
 
-abbr[data-transform="capitalize"], b[data-transform="capitalize"], del[data-transform="capitalize"], em[data-transform="capitalize"], h1[data-transform="capitalize"], h2[data-transform="capitalize"], h3[data-transform="capitalize"], h4[data-transform="capitalize"], h5[data-transform="capitalize"], h6[data-transform="capitalize"], i[data-transform="capitalize"], ins[data-transform="capitalize"], kbd[data-transform="capitalize"], mark[data-transform="capitalize"], p[data-transform="capitalize"], pre[data-transform="capitalize"], s[data-transform="capitalize"], samp[data-transform="capitalize"], small[data-transform="capitalize"], span[data-transform="capitalize"], strong[data-transform="capitalize"], sub[data-transform="capitalize"], sup[data-transform="capitalize"], u[data-transform="capitalize"] {
+abbr[data-palette], b[data-palette], del[data-palette], em[data-palette], h1[data-palette], h2[data-palette], h3[data-palette], h4[data-palette], h5[data-palette], h6[data-palette], i[data-palette], ins[data-palette], kbd[data-palette], mark[data-palette], p[data-palette], pre[data-palette], s[data-palette], samp[data-palette], small[data-palette], span:not([class])[data-palette], strong[data-palette], sub[data-palette], sup[data-palette], u[data-palette] {
+        color: rgb(var(--palette-foreground-bg));
+    }
+
+abbr[data-transform="capitalize"], b[data-transform="capitalize"], del[data-transform="capitalize"], em[data-transform="capitalize"], h1[data-transform="capitalize"], h2[data-transform="capitalize"], h3[data-transform="capitalize"], h4[data-transform="capitalize"], h5[data-transform="capitalize"], h6[data-transform="capitalize"], i[data-transform="capitalize"], ins[data-transform="capitalize"], kbd[data-transform="capitalize"], mark[data-transform="capitalize"], p[data-transform="capitalize"], pre[data-transform="capitalize"], s[data-transform="capitalize"], samp[data-transform="capitalize"], small[data-transform="capitalize"], span:not([class])[data-transform="capitalize"], strong[data-transform="capitalize"], sub[data-transform="capitalize"], sup[data-transform="capitalize"], u[data-transform="capitalize"] {
   text-transform: capitalize;
 }
 
-abbr[data-transform="lowercase"], b[data-transform="lowercase"], del[data-transform="lowercase"], em[data-transform="lowercase"], h1[data-transform="lowercase"], h2[data-transform="lowercase"], h3[data-transform="lowercase"], h4[data-transform="lowercase"], h5[data-transform="lowercase"], h6[data-transform="lowercase"], i[data-transform="lowercase"], ins[data-transform="lowercase"], kbd[data-transform="lowercase"], mark[data-transform="lowercase"], p[data-transform="lowercase"], pre[data-transform="lowercase"], s[data-transform="lowercase"], samp[data-transform="lowercase"], small[data-transform="lowercase"], span[data-transform="lowercase"], strong[data-transform="lowercase"], sub[data-transform="lowercase"], sup[data-transform="lowercase"], u[data-transform="lowercase"] {
+abbr[data-transform="lowercase"], b[data-transform="lowercase"], del[data-transform="lowercase"], em[data-transform="lowercase"], h1[data-transform="lowercase"], h2[data-transform="lowercase"], h3[data-transform="lowercase"], h4[data-transform="lowercase"], h5[data-transform="lowercase"], h6[data-transform="lowercase"], i[data-transform="lowercase"], ins[data-transform="lowercase"], kbd[data-transform="lowercase"], mark[data-transform="lowercase"], p[data-transform="lowercase"], pre[data-transform="lowercase"], s[data-transform="lowercase"], samp[data-transform="lowercase"], small[data-transform="lowercase"], span:not([class])[data-transform="lowercase"], strong[data-transform="lowercase"], sub[data-transform="lowercase"], sup[data-transform="lowercase"], u[data-transform="lowercase"] {
   text-transform: lowercase;
 }
 
-abbr[data-transform="uppercase"], b[data-transform="uppercase"], del[data-transform="uppercase"], em[data-transform="uppercase"], h1[data-transform="uppercase"], h2[data-transform="uppercase"], h3[data-transform="uppercase"], h4[data-transform="uppercase"], h5[data-transform="uppercase"], h6[data-transform="uppercase"], i[data-transform="uppercase"], ins[data-transform="uppercase"], kbd[data-transform="uppercase"], mark[data-transform="uppercase"], p[data-transform="uppercase"], pre[data-transform="uppercase"], s[data-transform="uppercase"], samp[data-transform="uppercase"], small[data-transform="uppercase"], span[data-transform="uppercase"], strong[data-transform="uppercase"], sub[data-transform="uppercase"], sup[data-transform="uppercase"], u[data-transform="uppercase"] {
+abbr[data-transform="uppercase"], b[data-transform="uppercase"], del[data-transform="uppercase"], em[data-transform="uppercase"], h1[data-transform="uppercase"], h2[data-transform="uppercase"], h3[data-transform="uppercase"], h4[data-transform="uppercase"], h5[data-transform="uppercase"], h6[data-transform="uppercase"], i[data-transform="uppercase"], ins[data-transform="uppercase"], kbd[data-transform="uppercase"], mark[data-transform="uppercase"], p[data-transform="uppercase"], pre[data-transform="uppercase"], s[data-transform="uppercase"], samp[data-transform="uppercase"], small[data-transform="uppercase"], span:not([class])[data-transform="uppercase"], strong[data-transform="uppercase"], sub[data-transform="uppercase"], sup[data-transform="uppercase"], u[data-transform="uppercase"] {
   text-transform: uppercase;
 }
 
-abbr[data-variation~="truncate"], b[data-variation~="truncate"], del[data-variation~="truncate"], em[data-variation~="truncate"], h1[data-variation~="truncate"], h2[data-variation~="truncate"], h3[data-variation~="truncate"], h4[data-variation~="truncate"], h5[data-variation~="truncate"], h6[data-variation~="truncate"], i[data-variation~="truncate"], ins[data-variation~="truncate"], kbd[data-variation~="truncate"], mark[data-variation~="truncate"], p[data-variation~="truncate"], pre[data-variation~="truncate"], s[data-variation~="truncate"], samp[data-variation~="truncate"], small[data-variation~="truncate"], span[data-variation~="truncate"], strong[data-variation~="truncate"], sub[data-variation~="truncate"], sup[data-variation~="truncate"], u[data-variation~="truncate"] {
+abbr[data-variation~="truncate"], b[data-variation~="truncate"], del[data-variation~="truncate"], em[data-variation~="truncate"], h1[data-variation~="truncate"], h2[data-variation~="truncate"], h3[data-variation~="truncate"], h4[data-variation~="truncate"], h5[data-variation~="truncate"], h6[data-variation~="truncate"], i[data-variation~="truncate"], ins[data-variation~="truncate"], kbd[data-variation~="truncate"], mark[data-variation~="truncate"], p[data-variation~="truncate"], pre[data-variation~="truncate"], s[data-variation~="truncate"], samp[data-variation~="truncate"], small[data-variation~="truncate"], span:not([class])[data-variation~="truncate"], strong[data-variation~="truncate"], sub[data-variation~="truncate"], sup[data-variation~="truncate"], u[data-variation~="truncate"] {
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
@@ -1554,22 +1559,37 @@ abbr[data-size], b[data-size], del[data-size], em[data-size], i[data-size], ins[
         line-height: var(--size-line-height);
     }
 
-h1[data-align="center"], h2[data-align="center"], h3[data-align="center"], h4[data-align="center"], h5[data-align="center"], h6[data-align="center"], p[data-align="center"], span[data-align="center"] {
+h1[data-align="center"], h2[data-align="center"], h3[data-align="center"], h4[data-align="center"], h5[data-align="center"], h6[data-align="center"], p[data-align="center"], span:not([class])[data-align="center"] {
   text-align: center;
 }
 
-h1[data-align="left"], h2[data-align="left"], h3[data-align="left"], h4[data-align="left"], h5[data-align="left"], h6[data-align="left"], p[data-align="left"], span[data-align="left"] {
+h1[data-align="left"], h2[data-align="left"], h3[data-align="left"], h4[data-align="left"], h5[data-align="left"], h6[data-align="left"], p[data-align="left"], span:not([class])[data-align="left"] {
   text-align: left;
 }
 
-h1[data-align="justify"], h2[data-align="justify"], h3[data-align="justify"], h4[data-align="justify"], h5[data-align="justify"], h6[data-align="justify"], p[data-align="justify"], span[data-align="justify"] {
+h1[data-align="justify"], h2[data-align="justify"], h3[data-align="justify"], h4[data-align="justify"], h5[data-align="justify"], h6[data-align="justify"], p[data-align="justify"], span:not([class])[data-align="justify"] {
   text-align: justify;
 }
 
-h1[data-align="right"], h2[data-align="right"], h3[data-align="right"], h4[data-align="right"], h5[data-align="right"], h6[data-align="right"], p[data-align="right"], span[data-align="right"] {
+h1[data-align="right"], h2[data-align="right"], h3[data-align="right"], h4[data-align="right"], h5[data-align="right"], h6[data-align="right"], p[data-align="right"], span:not([class])[data-align="right"] {
   text-align: right;
 }
 
+kbd {
+  --size-text: 65%;
+  border-width: 2px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 0.375rem;
+  white-space: nowrap;
+  background-color: rgba(var(--palette-background-bg), 0.3);
+  border-color: rgba(var(--palette-background-bg), 0.5);
+  border-style: outset;
+  font-size: var(--size-text);
+}
+
 pre {
   --tw-bg-opacity: 1;
   background-color: rgba(147, 156, 168, var(--tw-bg-opacity));
diff --git a/docs/feedback/wave.md b/docs/feedback/wave.md
index 6d45e1ff3..c0b583bc2 100644
--- a/docs/feedback/wave.md
+++ b/docs/feedback/wave.md
@@ -44,7 +44,7 @@ You can change the color palette of the `Wave` via the `palette` property.
     import {Stack, Text, Wave} from "@kahi-ui/framework";
 </script>
 
-<Stack spacing="medium" orientation="horizontal">
+<Stack spacing="medium" orientation="horizontal" variation="wrap">
     <div>
         <Text>
             <Text is="strong">DEFAULT</Text>
diff --git a/docs/framework/browser-support.md b/docs/framework/browser-support.md
index f86985ae6..e1acbe946 100644
--- a/docs/framework/browser-support.md
+++ b/docs/framework/browser-support.md
@@ -1,16 +1,11 @@
 # Browser Support
 
-TODO: Browser support table with minimum tested versions as-well
+|                       | Chrome          | Edge            | Firefox        | Safari             | Internet Explorer |
+| --------------------- | --------------- | --------------- | -------------- | ------------------ | ----------------- |
+| **Estimated Minimum** | 64+ _July 2020_ | 84+ _July 2020_ | 67+ _May 2019_ | 14.1+ _April 2021_ | **UNSUPPORTED**   |
+| **Tested Minimum**    | 89+             | ?               | 87+            | ?                  | **UNSUPPORTED**   |
 
-<!--
--   Chrome 84+ — July 2020
--   Edge 84+ — July 2020
--   Firefox 67+ — May 2019
--   Safari 14.1+ — April 2021
--   Internet Explorer — **UNSUPPORTED**
--->
-
-## Features
+## Features Used
 
 -   CSS
 
diff --git a/docs/modifiers/html5.md b/docs/modifiers/html5.md
index be16a10f8..8656cbf7b 100644
--- a/docs/modifiers/html5.md
+++ b/docs/modifiers/html5.md
@@ -1,3 +1,132 @@
++++
+[[properties."*"]]
+name="class"
+description="Sets a class name(s) on the Component."
+types=["string"]
+
+[[properties."*"]]
+name="style"
+description="Sets inline CSS properties on the Component."
+types=["string"]
+
+[[properties."*"]]
+name="id"
+description="Sets an identifier that other Components can target or useful for querying DOM by association."
+types=["string"]
+
+[[properties."*"]]
+name="name"
+description="Sets an identifier that will be used in form submissions or targettable by specific Components like <code>Anchor</code>."
+types=["string"]
+
+[[properties."*"]]
+name="title"
+description="Sets text for a tooltip whenever an end-user hovers the Component, and useful for assistive technologies."
+types=["string"]
+
+[[properties."*"]]
+name="tabindex"
+description="Alters how the Browser will cycle through the elements within the Component's current stacking context."
+types=["number", "string"]
++++
+
 # HTML5
 
-...
+All Components have access to several common HTML5 global attributes.
+
+## class
+
+[`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) allows you to apply CSS classes that you've defined to Components. However, you will have to use `:global` on your class names to bypass Svelte's local scoping.
+
+```html repl HTML5 class
+<script>
+    import {Text} from "@kahi-ui/framework";
+</script>
+
+<Text class="my-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
+
+<style>
+    :global(.my-text) {
+        color: red;
+    }
+</style>
+```
+
+## style
+
+[`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) allows you to apply inline CSS properties to Components.
+
+```html repl HTML5 style
+<script>
+    import {Text} from "@kahi-ui/framework";
+</script>
+
+<Text style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
+```
+
+## id
+
+[`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) allows you to set an identifier that other elements can target or targettable for scrolling by a [URL fragment](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash).
+
+<!-- prettier-ignore -->
+```html repl HTML5 id
+<script>
+    import {Anchor, Heading, Spacer} from "@kahi-ui/framework";
+</script>
+
+<Anchor href="#target-heading">Scroll to Heading!</Anchor>
+
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+<Spacer spacing="huge" />
+
+<Heading id="target-heading">Hello World!</Heading>
+```
+
+## name
+
+[`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/name) allows you to set an identifier for the Component to set its value to in a form, or, can targettable by an [`Anchor`](../navigation/anchor.md).
+
+```html repl HTML5 name
+<script>
+    import {Anchor} from "@kahi-ui/framework";
+</script>
+
+<Anchor target="target-iframe" href="/">Open Landing Page</Anchor>
+<iframe name="target-iframe" width="100%" height="256"></iframe>
+```
+
+## title
+
+[`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) allows you to set a timed effect to show a text tooltip whenever an end-user hovers for long enough. Typically you don't want to rely on this attribute for the UI. Rather use it for semantic and assistive purposes.
+
+```html repl HTML5 title
+<script>
+    import {Text} from "@kahi-ui/framework";
+</script>
+
+<Text title="I am some additional text!">Hover me!</Text>
+```
+
+## tabindex
+
+[`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) allows you to configure how the Browser cycles through elements in the current stacking context when they press their tab keyboard button, or similar.
+
+<!-- prettier-ignore -->
+```html repl HTML5 tabindex
+<script>
+    import {Button} from "@kahi-ui/framework";
+</script>
+
+<Button tabindex="3">Index #3</Button>
+<Button tabindex="1">Index #1</Button>
+<Button tabindex="-1">Unselectable</Button>
+<Button tabindex="4">Index #4</Button>
+<Button tabindex="2">Index #2</Button>
+```
diff --git a/docs/navigation/menu.md b/docs/navigation/menu.md
index ec0bceb96..c8a7b7123 100644
--- a/docs/navigation/menu.md
+++ b/docs/navigation/menu.md
@@ -1,3 +1,199 @@
++++
+[[properties."Menu.Container"]]
+name="orientation"
+description="Renders the <code>Menu.Container</code> horizontally."
+types=["horizontal", "{VIEWPORT}:horizontal"]
+
+[[properties."Menu.Anchor"]]
+name="active"
+description="Renders the <code>Menu.Anchor</code> with <code>aria-pressed</code> attribute, and styles the <code>Menu.Anchor</code> as if it where being clicked."
+types=["boolean"]
+
+[[properties."Menu.Anchor"]]
+name="disabled"
+description="Renders the <code>Menu.Anchor</code> with <code>aria-disabled</code> attributes, and styles the <code>Menu.Anchor</code> partially transparent."
+types=["boolean"]
+
+[[properties."Menu.Anchor"]]
+name="href"
+description="Renders the <code>Menu.Anchor</code> as a <code>&lt;a role=\"button\"&gt;</code> and links to the specified <code>href</code> property."
+types=["string"]
+
+[[properties."Menu.Anchor"]]
+name="download"
+description="If linking to a downloadable file, this property will be used as the suggested file name."
+types=["string"]
+
+[[properties."Menu.Anchor"]]
+name="rel"
+description="Sets how the <code>Menu.Anchor</code> relates to the current page, see <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel' rel='noopener noreferrer' target='_blank'>MDN</a> for more information."
+types=["string"]
+
+[[properties."Menu.Anchor"]]
+name="target"
+description="Sets the target of the <code>Menu.Anchor</code> being navigated, see <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target' rel='noopener noreferrer' target='_blank'>MDN</a> for more information."
+types=["string"]
+
+[[properties."Menu.Button"]]
+name="active"
+description="Renders the <code>Menu.Button</code> with <code>aria-pressed</code> attribute, and styles the <code>Menu.Button</code> as if it where being clicked."
+types=["boolean"]
+
+[[properties."Menu.Button"]]
+name="disabled"
+description="Renders the <code>Menu.Button</code> with <code>disabled</code> attributes, and styles the <code>Menu.Button</code> partially transparent."
+types=["boolean"]
++++
+
 # Menu
 
-...
+`Menu` renders a nestable list of actionable buttons and links. Typically used in context menus or used as the main content body of [`Aside`](./aside.md).
+
+<!-- prettier-ignore -->
+```html repl Menu Preview
+<script>
+    import {Menu, Spacer, Text} from "@kahi-ui/framework";
+</script>
+
+<Menu.Container>
+    <Menu.Button>
+        Copy
+        <Spacer />
+        <Text is="kbd">CTRL+C</Text>
+    </Menu.Button>
+
+    <Menu.Button>
+        Cut
+        <Spacer />
+        <Text is="kbd">CTRL+X</Text>
+    </Menu.Button>
+
+    <Menu.Divider />
+
+    <Menu.Button>
+        Delete
+        <Spacer />
+        <Text is="kbd">DEL</Text>
+    </Menu.Button>
+</Menu.Container>
+```
+
+## Imports
+
+```html default Menu Imports
+<script>
+    import {Menu} from "@kahi-ui/framework";
+
+    const {Container, Anchor, Button, Divider, Heading, Item, SubMenu} = Menu;
+</script>
+```
+
+## Orientation
+
+> **NOTE**: By passing an array, you can set [responsive values](../framework/responsivity.md). e.g. `orientation={["tablet:horizontal", "mobile:horizontal"]}`
+
+> **IMPORTANT**: You should never use sub menus whenever using horizontal `Menu.Container` Components.
+
+You can alter the orientation of how the `Menu.Container` lays out the children.
+
+<!-- prettier-ignore -->
+```html repl Menu Orientation
+<script>
+    import {Menu} from "@kahi-ui/framework";
+</script>
+
+<Menu.Container orientation="horizontal">
+    <Menu.Button>
+        Documentation
+    </Menu.Button>
+
+    <Menu.Button>
+        Github
+    </Menu.Button>
+
+    <Menu.Button>
+        Releases
+    </Menu.Button>
+</Menu.Container>
+```
+
+## Sub Menus
+
+You can nest more menus via `<Menu.SubMenu>` Component and using `<svelte:fragment slot="sub-menu">` in `<Menu.Divider>` or `<Menu.Heading>` Components.
+
+<!-- prettier-ignore -->
+```html repl Menu Sub Menu
+<script>
+    import {Box, Menu, Spacer, Text} from "@kahi-ui/framework";
+</script>
+
+<Box palette="negative" padding="medium">
+    <Menu.Container>
+        <Menu.Heading>
+            FEEDBACK
+            <svelte:fragment slot="sub-menu">
+                <Menu.SubMenu>
+                    <Menu.Button active>
+                        Dot
+                        <Spacer />
+                        <Text is="span">ICON</Text>
+                    </Menu.Button>
+
+                    <Menu.Button>
+                        Spinner
+                        <Spacer />
+                        <Text is="span">ICON</Text>
+                    </Menu.Button>
+                </Menu.SubMenu>
+            </svelte:fragment>
+        </Menu.Heading>
+
+        <Menu.Heading>
+            OVERLAYS
+            <svelte:fragment slot="sub-menu">
+                <Menu.SubMenu>
+                    <Menu.Button>
+                        Overlay
+                        <Spacer />
+                        <Text is="span">ICON</Text>
+                    </Menu.Button>
+                </Menu.SubMenu>
+            </svelte:fragment>
+        </Menu.Heading>
+    </Menu.Container>
+</Box>
+```
+
+## Text Divider
+
+In place of `<Menu.Heading>` you can also use `<Menu.Divider>` with text content.
+
+<!-- prettier-ignore -->
+```html repl Menu Text Divider
+<script>
+    import {Box, Menu, Spacer, Text} from "@kahi-ui/framework";
+</script>
+
+<Box palette="negative" padding="medium">
+    <Menu.Container>
+        <Menu.Divider>
+            FEEDBACK
+            <svelte:fragment slot="sub-menu">
+                <Menu.SubMenu>
+                    <Menu.Button active>
+                        Dot
+                        <Spacer />
+                        <Text is="span">ICON</Text>
+                    </Menu.Button>
+
+                    <Menu.Button>
+                        Spinner
+                        <Spacer />
+                        <Text is="span">ICON</Text>
+                    </Menu.Button>
+                </Menu.SubMenu>
+            </svelte:fragment>
+        </Menu.Divider>
+    </Menu.Container>
+</Box>
+```
diff --git a/docs/typography/heading.md b/docs/typography/heading.md
index 8aa9356f6..4d3a71278 100644
--- a/docs/typography/heading.md
+++ b/docs/typography/heading.md
@@ -9,6 +9,11 @@ name="is"
 description="Changes the HTML tag used for rendering the text, and the text size."
 types=["h1", "h2", "h3", "h4", "h5", "h6"]
 
+[[properties.Text]]
+name="palette"
+description="Alters the displayed color scheme."
+types=["accent", "dark", "light", "alert", "affirmative", "negative"]
+
 [[properties.Heading]]
 name="transform"
 description="Alters how the text casing is rendered."
diff --git a/docs/typography/text.md b/docs/typography/text.md
index ac725536f..917de7bed 100644
--- a/docs/typography/text.md
+++ b/docs/typography/text.md
@@ -10,6 +10,11 @@ description="Changes the HTML tag used for rendering the text, altering its appe
 default="p"
 types=["abbr", "b", "del", "em", "i", "ins", "kbd", "mark", "p", "pre", "s", "samp", "small", "span", "strong", "sub", "sup", "u"]
 
+[[properties.Text]]
+name="palette"
+description="Alters the displayed color scheme."
+types=["accent", "dark", "light", "alert", "affirmative", "negative"]
+
 [[properties.Text]]
 name="size"
 description="Changes how big the text will be rendered."
diff --git a/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellAside.svelte b/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellAside.svelte
index 52afad778..562307dfa 100644
--- a/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellAside.svelte
+++ b/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellAside.svelte
@@ -5,7 +5,7 @@
 
     import {browser} from "$app/env";
     import {page} from "$app/stores";
-    import {Anchor, Aside, ContextButton, Scrollable, Stack} from "@kahi-ui/framework";
+    import {Anchor, Aside, ContextButton, Stack} from "@kahi-ui/framework";
     import {onMount} from "svelte";
     import {Menu} from "svelte-feather/components/Menu";
     import {X} from "svelte-feather/components/X";
@@ -82,11 +82,11 @@
             </Aside.Footer>
         {/if}
 
-        <ContextButton>
+        <ContextButton hidden={["desktop", "widescreen"]}>
             <Menu />
         </ContextButton>
 
-        <ContextButton palette="dark" variation="clear">
+        <ContextButton palette="dark" variation="clear" hidden={["desktop", "widescreen"]}>
             <X />
         </ContextButton>
     </Aside.Container>
diff --git a/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellOmni.svelte b/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellOmni.svelte
index 973b55900..e08e96d4f 100644
--- a/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellOmni.svelte
+++ b/packages/@kahi-ui-docs-kit/src/shared/components/shell/ShellOmni.svelte
@@ -65,13 +65,13 @@
             <slot name="footer" />
         {/if}
 
-        <Spacer />
+        <Spacer hidden={["desktop", "widescreen"]} />
 
-        <ContextButton palette="light" variation="clear">
+        <ContextButton palette="light" variation="clear" hidden={["desktop", "widescreen"]}>
             <Menu />
         </ContextButton>
 
-        <ContextButton palette="light" variation="clear">
+        <ContextButton palette="light" variation="clear" hidden={["desktop", "widescreen"]}>
             <X />
         </ContextButton>
     </Omni.Header>
diff --git a/packages/@kahi-ui-docs/src/routes/docs/__layout.reset.svelte b/packages/@kahi-ui-docs/src/routes/docs/__layout.reset.svelte
index a762c342d..5973717f7 100644
--- a/packages/@kahi-ui-docs/src/routes/docs/__layout.reset.svelte
+++ b/packages/@kahi-ui-docs/src/routes/docs/__layout.reset.svelte
@@ -1,5 +1,4 @@
 <script context="module" lang="ts">
-
     import type {Load} from "@sveltejs/kit";
 
     import type {IAsideGet} from "../../shared/types/api";
@@ -90,6 +89,10 @@
         margin-top: 1em;
     }
 
+    :global(.documentation-container > table) {
+        margin-top: 1rem;
+    }
+
     :global(.documentation-container > .snippet-highlight) {
         max-height: 35ex;
     }
diff --git a/packages/@kahi-ui-docs/static/assets/styles/kahi-ui.framework.css b/packages/@kahi-ui-docs/static/assets/styles/kahi-ui.framework.css
index 33a509731..0d34b1d6d 100644
--- a/packages/@kahi-ui-docs/static/assets/styles/kahi-ui.framework.css
+++ b/packages/@kahi-ui-docs/static/assets/styles/kahi-ui.framework.css
@@ -484,6 +484,7 @@ span.ellipsis > span:nth-child(2) {
   --size-icon: 1em;
   vertical-align: middle;
   display: inline-block;
+  white-space: nowrap;
   font-size: var(--size-icon);
 }
 
@@ -1530,19 +1531,23 @@ h6[data-variation~="headline"] {
   line-height: 2rem;
 }
 
-abbr[data-transform="capitalize"], b[data-transform="capitalize"], del[data-transform="capitalize"], em[data-transform="capitalize"], h1[data-transform="capitalize"], h2[data-transform="capitalize"], h3[data-transform="capitalize"], h4[data-transform="capitalize"], h5[data-transform="capitalize"], h6[data-transform="capitalize"], i[data-transform="capitalize"], ins[data-transform="capitalize"], kbd[data-transform="capitalize"], mark[data-transform="capitalize"], p[data-transform="capitalize"], pre[data-transform="capitalize"], s[data-transform="capitalize"], samp[data-transform="capitalize"], small[data-transform="capitalize"], span[data-transform="capitalize"], strong[data-transform="capitalize"], sub[data-transform="capitalize"], sup[data-transform="capitalize"], u[data-transform="capitalize"] {
+abbr[data-palette], b[data-palette], del[data-palette], em[data-palette], h1[data-palette], h2[data-palette], h3[data-palette], h4[data-palette], h5[data-palette], h6[data-palette], i[data-palette], ins[data-palette], kbd[data-palette], mark[data-palette], p[data-palette], pre[data-palette], s[data-palette], samp[data-palette], small[data-palette], span:not([class])[data-palette], strong[data-palette], sub[data-palette], sup[data-palette], u[data-palette] {
+        color: rgb(var(--palette-foreground-bg));
+    }
+
+abbr[data-transform="capitalize"], b[data-transform="capitalize"], del[data-transform="capitalize"], em[data-transform="capitalize"], h1[data-transform="capitalize"], h2[data-transform="capitalize"], h3[data-transform="capitalize"], h4[data-transform="capitalize"], h5[data-transform="capitalize"], h6[data-transform="capitalize"], i[data-transform="capitalize"], ins[data-transform="capitalize"], kbd[data-transform="capitalize"], mark[data-transform="capitalize"], p[data-transform="capitalize"], pre[data-transform="capitalize"], s[data-transform="capitalize"], samp[data-transform="capitalize"], small[data-transform="capitalize"], span:not([class])[data-transform="capitalize"], strong[data-transform="capitalize"], sub[data-transform="capitalize"], sup[data-transform="capitalize"], u[data-transform="capitalize"] {
   text-transform: capitalize;
 }
 
-abbr[data-transform="lowercase"], b[data-transform="lowercase"], del[data-transform="lowercase"], em[data-transform="lowercase"], h1[data-transform="lowercase"], h2[data-transform="lowercase"], h3[data-transform="lowercase"], h4[data-transform="lowercase"], h5[data-transform="lowercase"], h6[data-transform="lowercase"], i[data-transform="lowercase"], ins[data-transform="lowercase"], kbd[data-transform="lowercase"], mark[data-transform="lowercase"], p[data-transform="lowercase"], pre[data-transform="lowercase"], s[data-transform="lowercase"], samp[data-transform="lowercase"], small[data-transform="lowercase"], span[data-transform="lowercase"], strong[data-transform="lowercase"], sub[data-transform="lowercase"], sup[data-transform="lowercase"], u[data-transform="lowercase"] {
+abbr[data-transform="lowercase"], b[data-transform="lowercase"], del[data-transform="lowercase"], em[data-transform="lowercase"], h1[data-transform="lowercase"], h2[data-transform="lowercase"], h3[data-transform="lowercase"], h4[data-transform="lowercase"], h5[data-transform="lowercase"], h6[data-transform="lowercase"], i[data-transform="lowercase"], ins[data-transform="lowercase"], kbd[data-transform="lowercase"], mark[data-transform="lowercase"], p[data-transform="lowercase"], pre[data-transform="lowercase"], s[data-transform="lowercase"], samp[data-transform="lowercase"], small[data-transform="lowercase"], span:not([class])[data-transform="lowercase"], strong[data-transform="lowercase"], sub[data-transform="lowercase"], sup[data-transform="lowercase"], u[data-transform="lowercase"] {
   text-transform: lowercase;
 }
 
-abbr[data-transform="uppercase"], b[data-transform="uppercase"], del[data-transform="uppercase"], em[data-transform="uppercase"], h1[data-transform="uppercase"], h2[data-transform="uppercase"], h3[data-transform="uppercase"], h4[data-transform="uppercase"], h5[data-transform="uppercase"], h6[data-transform="uppercase"], i[data-transform="uppercase"], ins[data-transform="uppercase"], kbd[data-transform="uppercase"], mark[data-transform="uppercase"], p[data-transform="uppercase"], pre[data-transform="uppercase"], s[data-transform="uppercase"], samp[data-transform="uppercase"], small[data-transform="uppercase"], span[data-transform="uppercase"], strong[data-transform="uppercase"], sub[data-transform="uppercase"], sup[data-transform="uppercase"], u[data-transform="uppercase"] {
+abbr[data-transform="uppercase"], b[data-transform="uppercase"], del[data-transform="uppercase"], em[data-transform="uppercase"], h1[data-transform="uppercase"], h2[data-transform="uppercase"], h3[data-transform="uppercase"], h4[data-transform="uppercase"], h5[data-transform="uppercase"], h6[data-transform="uppercase"], i[data-transform="uppercase"], ins[data-transform="uppercase"], kbd[data-transform="uppercase"], mark[data-transform="uppercase"], p[data-transform="uppercase"], pre[data-transform="uppercase"], s[data-transform="uppercase"], samp[data-transform="uppercase"], small[data-transform="uppercase"], span:not([class])[data-transform="uppercase"], strong[data-transform="uppercase"], sub[data-transform="uppercase"], sup[data-transform="uppercase"], u[data-transform="uppercase"] {
   text-transform: uppercase;
 }
 
-abbr[data-variation~="truncate"], b[data-variation~="truncate"], del[data-variation~="truncate"], em[data-variation~="truncate"], h1[data-variation~="truncate"], h2[data-variation~="truncate"], h3[data-variation~="truncate"], h4[data-variation~="truncate"], h5[data-variation~="truncate"], h6[data-variation~="truncate"], i[data-variation~="truncate"], ins[data-variation~="truncate"], kbd[data-variation~="truncate"], mark[data-variation~="truncate"], p[data-variation~="truncate"], pre[data-variation~="truncate"], s[data-variation~="truncate"], samp[data-variation~="truncate"], small[data-variation~="truncate"], span[data-variation~="truncate"], strong[data-variation~="truncate"], sub[data-variation~="truncate"], sup[data-variation~="truncate"], u[data-variation~="truncate"] {
+abbr[data-variation~="truncate"], b[data-variation~="truncate"], del[data-variation~="truncate"], em[data-variation~="truncate"], h1[data-variation~="truncate"], h2[data-variation~="truncate"], h3[data-variation~="truncate"], h4[data-variation~="truncate"], h5[data-variation~="truncate"], h6[data-variation~="truncate"], i[data-variation~="truncate"], ins[data-variation~="truncate"], kbd[data-variation~="truncate"], mark[data-variation~="truncate"], p[data-variation~="truncate"], pre[data-variation~="truncate"], s[data-variation~="truncate"], samp[data-variation~="truncate"], small[data-variation~="truncate"], span:not([class])[data-variation~="truncate"], strong[data-variation~="truncate"], sub[data-variation~="truncate"], sup[data-variation~="truncate"], u[data-variation~="truncate"] {
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
@@ -1554,22 +1559,37 @@ abbr[data-size], b[data-size], del[data-size], em[data-size], i[data-size], ins[
         line-height: var(--size-line-height);
     }
 
-h1[data-align="center"], h2[data-align="center"], h3[data-align="center"], h4[data-align="center"], h5[data-align="center"], h6[data-align="center"], p[data-align="center"], span[data-align="center"] {
+h1[data-align="center"], h2[data-align="center"], h3[data-align="center"], h4[data-align="center"], h5[data-align="center"], h6[data-align="center"], p[data-align="center"], span:not([class])[data-align="center"] {
   text-align: center;
 }
 
-h1[data-align="left"], h2[data-align="left"], h3[data-align="left"], h4[data-align="left"], h5[data-align="left"], h6[data-align="left"], p[data-align="left"], span[data-align="left"] {
+h1[data-align="left"], h2[data-align="left"], h3[data-align="left"], h4[data-align="left"], h5[data-align="left"], h6[data-align="left"], p[data-align="left"], span:not([class])[data-align="left"] {
   text-align: left;
 }
 
-h1[data-align="justify"], h2[data-align="justify"], h3[data-align="justify"], h4[data-align="justify"], h5[data-align="justify"], h6[data-align="justify"], p[data-align="justify"], span[data-align="justify"] {
+h1[data-align="justify"], h2[data-align="justify"], h3[data-align="justify"], h4[data-align="justify"], h5[data-align="justify"], h6[data-align="justify"], p[data-align="justify"], span:not([class])[data-align="justify"] {
   text-align: justify;
 }
 
-h1[data-align="right"], h2[data-align="right"], h3[data-align="right"], h4[data-align="right"], h5[data-align="right"], h6[data-align="right"], p[data-align="right"], span[data-align="right"] {
+h1[data-align="right"], h2[data-align="right"], h3[data-align="right"], h4[data-align="right"], h5[data-align="right"], h6[data-align="right"], p[data-align="right"], span:not([class])[data-align="right"] {
   text-align: right;
 }
 
+kbd {
+  --size-text: 65%;
+  border-width: 2px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 0.375rem;
+  white-space: nowrap;
+  background-color: rgba(var(--palette-background-bg), 0.3);
+  border-color: rgba(var(--palette-background-bg), 0.5);
+  border-style: outset;
+  font-size: var(--size-text);
+}
+
 pre {
   --tw-bg-opacity: 1;
   background-color: rgba(147, 156, 168, var(--tw-bg-opacity));
diff --git a/src/components/display/badge/Badge.svelte b/src/components/display/badge/Badge.svelte
index c8d0d0164..28891ac9a 100644
--- a/src/components/display/badge/Badge.svelte
+++ b/src/components/display/badge/Badge.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/display/list/ListItem.svelte b/src/components/display/list/ListItem.svelte
index 6eb735bb4..743e6dfa6 100644
--- a/src/components/display/list/ListItem.svelte
+++ b/src/components/display/list/ListItem.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/display/list/OrderedList.svelte b/src/components/display/list/OrderedList.svelte
index a055a90aa..9aa352911 100644
--- a/src/components/display/list/OrderedList.svelte
+++ b/src/components/display/list/OrderedList.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/display/list/UnorderedList.svelte b/src/components/display/list/UnorderedList.svelte
index 33ae69681..ecfc28838 100644
--- a/src/components/display/list/UnorderedList.svelte
+++ b/src/components/display/list/UnorderedList.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/embedded/figure/Figure.svelte b/src/components/embedded/figure/Figure.svelte
index 16798e29e..8eed17175 100644
--- a/src/components/embedded/figure/Figure.svelte
+++ b/src/components/embedded/figure/Figure.svelte
@@ -12,6 +12,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/feedback/dot/Dot.svelte b/src/components/feedback/dot/Dot.svelte
index 8c1d576e3..5277e3687 100644
--- a/src/components/feedback/dot/Dot.svelte
+++ b/src/components/feedback/dot/Dot.svelte
@@ -11,6 +11,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/feedback/ellipsis/Ellipsis.svelte b/src/components/feedback/ellipsis/Ellipsis.svelte
index 6244c5f11..00f828ff0 100644
--- a/src/components/feedback/ellipsis/Ellipsis.svelte
+++ b/src/components/feedback/ellipsis/Ellipsis.svelte
@@ -8,6 +8,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/feedback/spinner/Spinner.svelte b/src/components/feedback/spinner/Spinner.svelte
index 64446a4a2..ab73605e5 100644
--- a/src/components/feedback/spinner/Spinner.svelte
+++ b/src/components/feedback/spinner/Spinner.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/feedback/wave/Wave.svelte b/src/components/feedback/wave/Wave.svelte
index 25e2b9350..f46553b5a 100644
--- a/src/components/feedback/wave/Wave.svelte
+++ b/src/components/feedback/wave/Wave.svelte
@@ -13,6 +13,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/feedback/wave/wave.css b/src/components/feedback/wave/wave.css
index 8387a52bf..c77c3cd9f 100644
--- a/src/components/feedback/wave/wave.css
+++ b/src/components/feedback/wave/wave.css
@@ -1,7 +1,7 @@
 .wave {
     --size-icon: 1em;
 
-    @apply align-middle inline-block;
+    @apply align-middle inline-block whitespace-nowrap;
 
     font-size: var(--size-icon);
 
diff --git a/src/components/interactables/button/Button.svelte b/src/components/interactables/button/Button.svelte
index eb243e475..17b3a77a7 100644
--- a/src/components/interactables/button/Button.svelte
+++ b/src/components/interactables/button/Button.svelte
@@ -16,6 +16,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
@@ -42,7 +43,6 @@
     export let active: boolean = false;
     export let disabled: boolean = false;
 
-    export let name: string = "";
     export let type: "submit" | undefined = undefined;
     export let value: string = "";
 
@@ -102,7 +102,7 @@
             type="submit"
             {...map_data_attributes({palette, shape, size, variation})}
             {...map_aria_attributes({pressed: active})}
-            {...map_attributes({disabled, name, value})}
+            {...map_attributes({disabled, value})}
             on:click
         />
     {:else}
@@ -112,7 +112,7 @@
             type="button"
             {...map_data_attributes({palette, shape, size, variation})}
             {...map_aria_attributes({pressed: active})}
-            {...map_attributes({disabled, name, value})}
+            {...map_attributes({disabled, value})}
             on:click
         />
     {/if}
diff --git a/src/components/layouts/container/Container.svelte b/src/components/layouts/container/Container.svelte
index 6e63aa885..72ab40d77 100644
--- a/src/components/layouts/container/Container.svelte
+++ b/src/components/layouts/container/Container.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/divider/Divider.svelte b/src/components/layouts/divider/Divider.svelte
index a6a71eba8..20946c4dd 100644
--- a/src/components/layouts/divider/Divider.svelte
+++ b/src/components/layouts/divider/Divider.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/grid/Grid.svelte b/src/components/layouts/grid/Grid.svelte
index 7bce0d7d3..d1367400f 100644
--- a/src/components/layouts/grid/Grid.svelte
+++ b/src/components/layouts/grid/Grid.svelte
@@ -15,6 +15,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/group/Group.svelte b/src/components/layouts/group/Group.svelte
index f01a8a1d9..49097da37 100644
--- a/src/components/layouts/group/Group.svelte
+++ b/src/components/layouts/group/Group.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/mosaic/Mosaic.svelte b/src/components/layouts/mosaic/Mosaic.svelte
index af49d0794..3915a812f 100644
--- a/src/components/layouts/mosaic/Mosaic.svelte
+++ b/src/components/layouts/mosaic/Mosaic.svelte
@@ -17,6 +17,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/scrollable/Scrollable.svelte b/src/components/layouts/scrollable/Scrollable.svelte
index afde796e2..8fee88361 100644
--- a/src/components/layouts/scrollable/Scrollable.svelte
+++ b/src/components/layouts/scrollable/Scrollable.svelte
@@ -13,6 +13,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/spacer/Spacer.svelte b/src/components/layouts/spacer/Spacer.svelte
index 3181d829f..c142a0299 100644
--- a/src/components/layouts/spacer/Spacer.svelte
+++ b/src/components/layouts/spacer/Spacer.svelte
@@ -8,6 +8,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/layouts/stack/Stack.svelte b/src/components/layouts/stack/Stack.svelte
index 7f3d90089..affd3fa2e 100644
--- a/src/components/layouts/stack/Stack.svelte
+++ b/src/components/layouts/stack/Stack.svelte
@@ -16,6 +16,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/anchor/Anchor.svelte b/src/components/navigation/anchor/Anchor.svelte
index 8b4c2dc9d..9e75dd5f3 100644
--- a/src/components/navigation/anchor/Anchor.svelte
+++ b/src/components/navigation/anchor/Anchor.svelte
@@ -13,6 +13,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/aside/AsideContainer.svelte b/src/components/navigation/aside/AsideContainer.svelte
index ed807f53d..3bca084ed 100644
--- a/src/components/navigation/aside/AsideContainer.svelte
+++ b/src/components/navigation/aside/AsideContainer.svelte
@@ -16,6 +16,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/aside/AsideFooter.svelte b/src/components/navigation/aside/AsideFooter.svelte
index 30f4276f7..ec789d635 100644
--- a/src/components/navigation/aside/AsideFooter.svelte
+++ b/src/components/navigation/aside/AsideFooter.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/aside/AsideHeader.svelte b/src/components/navigation/aside/AsideHeader.svelte
index e5e38fd06..3b6bad992 100644
--- a/src/components/navigation/aside/AsideHeader.svelte
+++ b/src/components/navigation/aside/AsideHeader.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/aside/AsideSection.svelte b/src/components/navigation/aside/AsideSection.svelte
index 843ab1313..7ba88671e 100644
--- a/src/components/navigation/aside/AsideSection.svelte
+++ b/src/components/navigation/aside/AsideSection.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/breadcrumb/BreadcrumbAnchor.svelte b/src/components/navigation/breadcrumb/BreadcrumbAnchor.svelte
index 62cdf0545..0ac3e0a6c 100644
--- a/src/components/navigation/breadcrumb/BreadcrumbAnchor.svelte
+++ b/src/components/navigation/breadcrumb/BreadcrumbAnchor.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/breadcrumb/BreadcrumbContainer.svelte b/src/components/navigation/breadcrumb/BreadcrumbContainer.svelte
index bb7b499bc..8d9d567bc 100644
--- a/src/components/navigation/breadcrumb/BreadcrumbContainer.svelte
+++ b/src/components/navigation/breadcrumb/BreadcrumbContainer.svelte
@@ -14,6 +14,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/breadcrumb/BreadcrumbItem.svelte b/src/components/navigation/breadcrumb/BreadcrumbItem.svelte
index 282b9a3eb..7954e715f 100644
--- a/src/components/navigation/breadcrumb/BreadcrumbItem.svelte
+++ b/src/components/navigation/breadcrumb/BreadcrumbItem.svelte
@@ -11,6 +11,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/menu/MenuAnchor.svelte b/src/components/navigation/menu/MenuAnchor.svelte
index f7d45be63..49f02e454 100644
--- a/src/components/navigation/menu/MenuAnchor.svelte
+++ b/src/components/navigation/menu/MenuAnchor.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/menu/MenuButton.svelte b/src/components/navigation/menu/MenuButton.svelte
index 47ed7e606..6e4ee5c14 100644
--- a/src/components/navigation/menu/MenuButton.svelte
+++ b/src/components/navigation/menu/MenuButton.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/menu/MenuContainer.svelte b/src/components/navigation/menu/MenuContainer.svelte
index bb6d2de45..b7832e8b7 100644
--- a/src/components/navigation/menu/MenuContainer.svelte
+++ b/src/components/navigation/menu/MenuContainer.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/menu/MenuDivider.svelte b/src/components/navigation/menu/MenuDivider.svelte
index a1205d99b..f88cbf7b1 100644
--- a/src/components/navigation/menu/MenuDivider.svelte
+++ b/src/components/navigation/menu/MenuDivider.svelte
@@ -11,6 +11,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
@@ -50,9 +51,13 @@
 </script>
 
 <MenuItem bind:element {...$$props}>
-    <Divider>
-        <slot />
-    </Divider>
+    {#if $$slots["default"]}
+        <Divider>
+            <slot />
+        </Divider>
+    {:else}
+        <Divider />
+    {/if}
 
     <slot name="sub-menu" />
 </MenuItem>
diff --git a/src/components/navigation/menu/MenuHeading.svelte b/src/components/navigation/menu/MenuHeading.svelte
index 6c3ec22d3..917f0fc68 100644
--- a/src/components/navigation/menu/MenuHeading.svelte
+++ b/src/components/navigation/menu/MenuHeading.svelte
@@ -11,6 +11,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/menu/MenuItem.svelte b/src/components/navigation/menu/MenuItem.svelte
index 6eb735bb4..743e6dfa6 100644
--- a/src/components/navigation/menu/MenuItem.svelte
+++ b/src/components/navigation/menu/MenuItem.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/menu/MenuSubMenu.svelte b/src/components/navigation/menu/MenuSubMenu.svelte
index 33ae69681..ecfc28838 100644
--- a/src/components/navigation/menu/MenuSubMenu.svelte
+++ b/src/components/navigation/menu/MenuSubMenu.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/omni/OmniContainer.svelte b/src/components/navigation/omni/OmniContainer.svelte
index a7a6e0023..3d5f96ec6 100644
--- a/src/components/navigation/omni/OmniContainer.svelte
+++ b/src/components/navigation/omni/OmniContainer.svelte
@@ -16,6 +16,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/omni/OmniFooter.svelte b/src/components/navigation/omni/OmniFooter.svelte
index 30f4276f7..ec789d635 100644
--- a/src/components/navigation/omni/OmniFooter.svelte
+++ b/src/components/navigation/omni/OmniFooter.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/omni/OmniHeader.svelte b/src/components/navigation/omni/OmniHeader.svelte
index e5e38fd06..3b6bad992 100644
--- a/src/components/navigation/omni/OmniHeader.svelte
+++ b/src/components/navigation/omni/OmniHeader.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/navigation/omni/OmniSection.svelte b/src/components/navigation/omni/OmniSection.svelte
index 843ab1313..7ba88671e 100644
--- a/src/components/navigation/omni/OmniSection.svelte
+++ b/src/components/navigation/omni/OmniSection.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/overlays/overlay/Overlay.svelte b/src/components/overlays/overlay/Overlay.svelte
index 840c9be05..773bd6938 100644
--- a/src/components/overlays/overlay/Overlay.svelte
+++ b/src/components/overlays/overlay/Overlay.svelte
@@ -20,6 +20,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/box/Box.svelte b/src/components/surfaces/box/Box.svelte
index 883c7ea1b..85d752b75 100644
--- a/src/components/surfaces/box/Box.svelte
+++ b/src/components/surfaces/box/Box.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/card/CardContainer.svelte b/src/components/surfaces/card/CardContainer.svelte
index 42923648b..58ff682e3 100644
--- a/src/components/surfaces/card/CardContainer.svelte
+++ b/src/components/surfaces/card/CardContainer.svelte
@@ -11,6 +11,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/card/CardFigure.svelte b/src/components/surfaces/card/CardFigure.svelte
index 21e43bb01..e165ec59a 100644
--- a/src/components/surfaces/card/CardFigure.svelte
+++ b/src/components/surfaces/card/CardFigure.svelte
@@ -12,6 +12,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/card/CardFooter.svelte b/src/components/surfaces/card/CardFooter.svelte
index 30f4276f7..ec789d635 100644
--- a/src/components/surfaces/card/CardFooter.svelte
+++ b/src/components/surfaces/card/CardFooter.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/card/CardHeader.svelte b/src/components/surfaces/card/CardHeader.svelte
index e5e38fd06..3b6bad992 100644
--- a/src/components/surfaces/card/CardHeader.svelte
+++ b/src/components/surfaces/card/CardHeader.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/card/CardSection.svelte b/src/components/surfaces/card/CardSection.svelte
index 843ab1313..7ba88671e 100644
--- a/src/components/surfaces/card/CardSection.svelte
+++ b/src/components/surfaces/card/CardSection.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/hero/HeroContainer.svelte b/src/components/surfaces/hero/HeroContainer.svelte
index e43e508d4..c8cdb9cca 100644
--- a/src/components/surfaces/hero/HeroContainer.svelte
+++ b/src/components/surfaces/hero/HeroContainer.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/hero/HeroFooter.svelte b/src/components/surfaces/hero/HeroFooter.svelte
index 30f4276f7..ec789d635 100644
--- a/src/components/surfaces/hero/HeroFooter.svelte
+++ b/src/components/surfaces/hero/HeroFooter.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/hero/HeroHeader.svelte b/src/components/surfaces/hero/HeroHeader.svelte
index e5e38fd06..3b6bad992 100644
--- a/src/components/surfaces/hero/HeroHeader.svelte
+++ b/src/components/surfaces/hero/HeroHeader.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/hero/HeroSection.svelte b/src/components/surfaces/hero/HeroSection.svelte
index 843ab1313..7ba88671e 100644
--- a/src/components/surfaces/hero/HeroSection.svelte
+++ b/src/components/surfaces/hero/HeroSection.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/tile/TileContainer.svelte b/src/components/surfaces/tile/TileContainer.svelte
index 4f1873a02..72375383a 100644
--- a/src/components/surfaces/tile/TileContainer.svelte
+++ b/src/components/surfaces/tile/TileContainer.svelte
@@ -11,6 +11,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/tile/TileFigure.svelte b/src/components/surfaces/tile/TileFigure.svelte
index 21e43bb01..e165ec59a 100644
--- a/src/components/surfaces/tile/TileFigure.svelte
+++ b/src/components/surfaces/tile/TileFigure.svelte
@@ -12,6 +12,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/tile/TileFooter.svelte b/src/components/surfaces/tile/TileFooter.svelte
index 30f4276f7..ec789d635 100644
--- a/src/components/surfaces/tile/TileFooter.svelte
+++ b/src/components/surfaces/tile/TileFooter.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/tile/TileHeader.svelte b/src/components/surfaces/tile/TileHeader.svelte
index e5e38fd06..3b6bad992 100644
--- a/src/components/surfaces/tile/TileHeader.svelte
+++ b/src/components/surfaces/tile/TileHeader.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/surfaces/tile/TileSection.svelte b/src/components/surfaces/tile/TileSection.svelte
index 843ab1313..7ba88671e 100644
--- a/src/components/surfaces/tile/TileSection.svelte
+++ b/src/components/surfaces/tile/TileSection.svelte
@@ -9,6 +9,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/typography/blockquote/BlockquoteCite.svelte b/src/components/typography/blockquote/BlockquoteCite.svelte
index bb71d6d48..62bf5c2b5 100644
--- a/src/components/typography/blockquote/BlockquoteCite.svelte
+++ b/src/components/typography/blockquote/BlockquoteCite.svelte
@@ -8,6 +8,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/typography/blockquote/BlockquoteContainer.svelte b/src/components/typography/blockquote/BlockquoteContainer.svelte
index 588555b78..0c9fffbdc 100644
--- a/src/components/typography/blockquote/BlockquoteContainer.svelte
+++ b/src/components/typography/blockquote/BlockquoteContainer.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/typography/code/Code.svelte b/src/components/typography/code/Code.svelte
index 0b9cee30b..c02c94bba 100644
--- a/src/components/typography/code/Code.svelte
+++ b/src/components/typography/code/Code.svelte
@@ -10,6 +10,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/typography/heading/Heading.svelte b/src/components/typography/heading/Heading.svelte
index 1b62a659d..2f09f2093 100644
--- a/src/components/typography/heading/Heading.svelte
+++ b/src/components/typography/heading/Heading.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type {DESIGN_HIDDEN_ARGUMENT} from "../../../lib/types/hidden";
+    import type {DESIGN_PALETTE_ARGUMENT} from "../../../lib/types/palettes";
     import type {DESIGN_SPACING_ARGUMENT} from "../../../lib/types/spacings";
     import type {
         DESIGN_HEADING_VARIATION_ARGUMENT,
@@ -13,6 +14,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
@@ -36,13 +38,15 @@
     export let transform: DESIGN_TEXT_TRANSFORM_ARGUMENT | undefined = undefined;
     export let variation: DESIGN_HEADING_VARIATION_ARGUMENT | undefined = undefined;
 
+    export let palette: DESIGN_PALETTE_ARGUMENT | undefined = undefined;
+
 </script>
 
 {#if is === "h6"}
     <h6
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, transform, variation})}
+        {...map_data_attributes({align, palette, transform, variation})}
     >
         <slot />
     </h6>
@@ -50,7 +54,7 @@
     <h5
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, transform, variation})}
+        {...map_data_attributes({align, palette, transform, variation})}
     >
         <slot />
     </h5>
@@ -58,7 +62,7 @@
     <h4
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, transform, variation})}
+        {...map_data_attributes({align, palette, transform, variation})}
     >
         <slot />
     </h4>
@@ -66,7 +70,7 @@
     <h3
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, transform, variation})}
+        {...map_data_attributes({align, palette, transform, variation})}
     >
         <slot />
     </h3>
@@ -74,7 +78,7 @@
     <h2
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, transform, variation})}
+        {...map_data_attributes({align, palette, transform, variation})}
     >
         <slot />
     </h2>
@@ -82,7 +86,7 @@
     <h1
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, transform, variation})}
+        {...map_data_attributes({align, palette, transform, variation})}
     >
         <slot />
     </h1>
diff --git a/src/components/typography/text/Text.svelte b/src/components/typography/text/Text.svelte
index d5bf5b95e..5e17fa9cf 100644
--- a/src/components/typography/text/Text.svelte
+++ b/src/components/typography/text/Text.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type {DESIGN_HIDDEN_ARGUMENT} from "../../../lib/types/hidden";
+    import type {DESIGN_PALETTE_ARGUMENT} from "../../../lib/types/palettes";
     import type {DESIGN_SIZE_ARGUMENT} from "../../../lib/types/sizes";
     import type {DESIGN_SPACING_ARGUMENT} from "../../../lib/types/spacings";
     import type {
@@ -14,6 +15,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
@@ -56,13 +58,15 @@
     export let transform: DESIGN_TEXT_TRANSFORM_ARGUMENT | undefined = undefined;
     export let variation: DESIGN_TEXT_VARIATION_ARGUMENT | undefined = undefined;
 
+    export let palette: DESIGN_PALETTE_ARGUMENT | undefined = undefined;
+
 </script>
 
 {#if is === "abbr"}
     <abbr
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </abbr>
@@ -70,7 +74,7 @@
     <b
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </b>
@@ -78,7 +82,7 @@
     <del
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </del>
@@ -86,7 +90,7 @@
     <em
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </em>
@@ -94,7 +98,7 @@
     <i
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </i>
@@ -102,7 +106,7 @@
     <ins
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </ins>
@@ -110,7 +114,7 @@
     <kbd
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </kbd>
@@ -118,7 +122,7 @@
     <mark
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </mark>
@@ -126,14 +130,19 @@
     <pre
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}>
+        {...map_data_attributes({
+            palette,
+            size,
+            transform,
+            variation,
+        })}>
             <slot />
     </pre>
 {:else if is === "s"}
     <s
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </s>
@@ -141,7 +150,7 @@
     <samp
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </samp>
@@ -149,7 +158,7 @@
     <small
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </small>
@@ -157,7 +166,7 @@
     <span
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, size, transform, variation})}
+        {...map_data_attributes({align, palette, size, transform, variation})}
     >
         <slot />
     </span>
@@ -165,7 +174,7 @@
     <strong
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </strong>
@@ -173,7 +182,7 @@
     <sub
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </sub>
@@ -181,7 +190,7 @@
     <sup
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </sup>
@@ -189,7 +198,7 @@
     <u
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({size, transform, variation})}
+        {...map_data_attributes({palette, size, transform, variation})}
     >
         <slot />
     </u>
@@ -197,7 +206,7 @@
     <p
         bind:this={element}
         {...map_global_attributes($$props)}
-        {...map_data_attributes({align, size, transform, variation})}
+        {...map_data_attributes({align, palette, size, transform, variation})}
     >
         <slot />
     </p>
diff --git a/src/components/typography/text/text.css b/src/components/typography/text/text.css
index df53100fd..9ce820a87 100644
--- a/src/components/typography/text/text.css
+++ b/src/components/typography/text/text.css
@@ -17,11 +17,15 @@ pre,
 s,
 samp,
 small,
-span,
+span:not([class]),
 strong,
 sub,
 sup,
 u {
+    &[data-palette] {
+        color: rgb(var(--palette-foreground-bg));
+    }
+
     &[data-transform="capitalize"] {
         @apply capitalize;
     }
@@ -69,7 +73,7 @@ h4,
 h5,
 h6,
 p,
-span {
+span:not([class]) {
     &[data-align="center"] {
         @apply text-center;
     }
@@ -87,6 +91,18 @@ span {
     }
 }
 
+kbd {
+    --size-text: 65%;
+
+    @apply border-2 px-1 py-0.5 rounded-md whitespace-nowrap;
+
+    background-color: rgba(var(--palette-background-bg), theme("opacity.30"));
+    border-color: rgba(var(--palette-background-bg), theme("opacity.50"));
+    border-style: outset;
+
+    font-size: var(--size-text);
+}
+
 pre {
     @apply bg-default-400 bg-opacity-10 p-2 rounded-md overflow-x-auto;
 }
diff --git a/src/components/utilities/contextbackdrop/ContextBackdrop.svelte b/src/components/utilities/contextbackdrop/ContextBackdrop.svelte
index 14379fa85..5b9b32a25 100644
--- a/src/components/utilities/contextbackdrop/ContextBackdrop.svelte
+++ b/src/components/utilities/contextbackdrop/ContextBackdrop.svelte
@@ -18,6 +18,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/components/utilities/contextbutton/ContextButton.svelte b/src/components/utilities/contextbutton/ContextButton.svelte
index 2c133ae52..695676095 100644
--- a/src/components/utilities/contextbutton/ContextButton.svelte
+++ b/src/components/utilities/contextbutton/ContextButton.svelte
@@ -15,6 +15,7 @@
 
     let _class: string = "";
     export let id: string = "";
+    export let name: string = "";
     export let style: string = "";
     export let tabindex: number | string = "";
     export let title: string = "";
diff --git a/src/lib/types/hidden.ts b/src/lib/types/hidden.ts
index 50cd5c29c..e3b01eea2 100644
--- a/src/lib/types/hidden.ts
+++ b/src/lib/types/hidden.ts
@@ -13,4 +13,6 @@ export enum DESIGN_HIDDEN {
 
 export const DESIGN_HIDDEN_LITERALS = {...DESIGN_HIDDEN} as const;
 
-export type DESIGN_HIDDEN_ARGUMENT = boolean | keyof typeof DESIGN_HIDDEN_LITERALS;
+export type DESIGN_HIDDEN_ARGUMENT =
+    | (boolean | keyof typeof DESIGN_HIDDEN_LITERALS)
+    | (keyof typeof DESIGN_HIDDEN_LITERALS)[];
diff --git a/src/lib/util/attributes.ts b/src/lib/util/attributes.ts
index c12eb2a05..5011f295a 100644
--- a/src/lib/util/attributes.ts
+++ b/src/lib/util/attributes.ts
@@ -1,4 +1,4 @@
-const STORYBOOK_ATTRIBUTE_REMAP: Record<string, string | undefined> = {
+const ATTRIBUTE_REMAP: Record<string, string | undefined> = {
     max_height: "max-height",
     min_height: "min-height",
     max_width: "max-width",
@@ -17,7 +17,7 @@ const STORYBOOK_ATTRIBUTE_REMAP: Record<string, string | undefined> = {
     padding_right: "padding-right",
 };
 
-const STORYBOOK_DATA_ATTRIBUTES: Set<string> = new Set([
+const DATA_ATTRIBUTES: Set<string> = new Set([
     "height",
     "hidden",
     "max-height",
@@ -44,9 +44,10 @@ const STORYBOOK_DATA_ATTRIBUTES: Set<string> = new Set([
 /**
  * Represents HTML attributes that can be set globally on every Svelte Component
  */
-const STORYBOOK_HTML_ATTRIBUTES: Set<string> = new Set([
+const HTML_ATTRIBUTES: Set<string> = new Set([
     "class",
     "id",
+    "name",
     "style",
     "sveltekit:noscroll",
     "sveltekit:prefetch",
@@ -74,7 +75,7 @@ export type IProps = Record<string, IPropPrimitive | IPropPrimitive[]>;
 export function map_attributes(props: IProps, set?: Set<string>, prefix: string = ""): IProps {
     let entries = Object.entries(props).filter((entry) => {
         let [attribute, value] = entry;
-        attribute = STORYBOOK_ATTRIBUTE_REMAP[attribute] ?? attribute;
+        attribute = ATTRIBUTE_REMAP[attribute] ?? attribute;
 
         if (set && !set.has(attribute)) return false;
         return Array.isArray(value) ? value.length > 0 : !!value;
@@ -82,7 +83,7 @@ export function map_attributes(props: IProps, set?: Set<string>, prefix: string
 
     entries = entries.map((entry) => {
         let [attribute, value] = entry;
-        attribute = STORYBOOK_ATTRIBUTE_REMAP[attribute] ?? attribute;
+        attribute = ATTRIBUTE_REMAP[attribute] ?? attribute;
 
         return [
             prefix ? prefix + attribute : attribute,
@@ -125,8 +126,8 @@ export function map_data_attributes(props: IProps, set?: Set<string>): IProps {
  * @returns
  */
 export function map_global_attributes(props: IProps): IProps {
-    const data_attributes = map_data_attributes(props, STORYBOOK_DATA_ATTRIBUTES);
-    const html_attributes = map_attributes(props, STORYBOOK_HTML_ATTRIBUTES);
+    const data_attributes = map_data_attributes(props, DATA_ATTRIBUTES);
+    const html_attributes = map_attributes(props, HTML_ATTRIBUTES);
 
     return {
         ...html_attributes,