+
+
+
+
+ Yes. It adheres to the WAI-ARIA design pattern.
+
+
+
+
+
+
Is it unstyled?
+
+
+
+
+ Yes. It's unstyled by default, giving you freedom over the look and
+ feel.
+
+
+
+
+
+
Can it be animated?
+
+
+
+
+ Yes! You can animate the Accordion with CSS or JavaScript.
+
+
+
+
+```
diff --git a/docs/primitives/alert.md b/docs/primitives/alert.md
new file mode 100644
index 000000000..9458cb9f3
--- /dev/null
+++ b/docs/primitives/alert.md
@@ -0,0 +1,137 @@
+---
+outline: deep
+---
+
+# Alert
+
+The `Alert` component is used to communicate an important and usually time-sensitive message to the user. The browser will send out an accessible alert event to assistive technology products which can then notify the user.
+
+## Features
+
+- ✅ Can be controlled or uncontrolled.
+
+## Installation
+
+```bash
+npm i @morpheme/primitives
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+
+
+
+
+ This is the title
+
+
+
+
+```
+
+### Transition
+
+```vue
+
+
+
+
+
+ This is the title
+
+
+
+
+
+```
+
+### Custom Render
+
+```vue
+
+
+
+
+ This alert is rendered as a paragraph
+
+
+
+
+
+
+ This alert is rendered as a template
+
+
+
+
+
+```
+
+### `v-model`
+
+```vue
+
+
+
+
+ This alert is rendered as a paragraph
+
+
+
+
+
+```
+
+### Styled
+
+```vue
+
+
+
+
+
+ This is the title
+
+
+
+
+
+```
diff --git a/docs/primitives/collapsible.md b/docs/primitives/collapsible.md
new file mode 100644
index 000000000..1bebb743c
--- /dev/null
+++ b/docs/primitives/collapsible.md
@@ -0,0 +1,93 @@
+---
+outline: deep
+---
+
+# Collapsible
+
+An interactive component which expands/collapses a panel.
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Can be controlled or uncontrolled.
+
+## Installation
+
+```bash
+npm i @morpheme/primitives
+```
+
+## Usage
+
+```vue
+
+
+
+
+
+
Title
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu
+ lorem et ultricies. In porta lorem at dui semper porttitor. Nullam quis
+ cursus dui. Cras tincidunt vehicula
+
+
+
+```
+
+## `v-model`
+
+```vue
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ euismod eu lorem et ultricies. In porta lorem at dui semper
+ porttitor. Nullam quis cursus dui. Cras tincidunt vehicula
+
+
+ `,
+});
+
+export const VModel: Story = (args) => ({
+ components: {
+ Collapsible,
+ CollapsibleButton,
+ CollapsibleContent,
+ ChevronDownIcon,
+ },
+ setup() {
+ const value = ref(true);
+ return {args, value};
+ },
+ template: `
+
+
+
+ Title
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ euismod eu lorem et ultricies. In porta lorem at dui semper
+ porttitor. Nullam quis cursus dui. Cras tincidunt vehicula
+
+
+
+