diff --git a/.changeset/config.json b/.changeset/config.json
index 42b7c627c..01c9940db 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -9,7 +9,6 @@
"updateInternalDependencies": "patch",
"ignore": [
"@phase2/outline-core-accordion",
- "@phase2/outline-core-alert",
"@phase2/outline-core-breadcrumb",
"@phase2/outline-core-card",
"@phase2/outline-core-container",
diff --git a/.changeset/twenty-colts-serve.md b/.changeset/twenty-colts-serve.md
new file mode 100644
index 000000000..0e04612ba
--- /dev/null
+++ b/.changeset/twenty-colts-serve.md
@@ -0,0 +1,13 @@
+---
+'@phase2/outline-form': patch
+'@phase2/outline-storybook': patch
+'@phase2/outline-examples': patch
+'@phase2/outline-core-alert': patch
+'@phase2/outline-core-link': patch
+'@phase2/outline-docs': patch
+'@phase2/outline-config': patch
+'@phase2/outline-templates': patch
+'@phase2/outline-core': patch
+---
+
+Cleaup and organization.
diff --git a/packages/components/outline-core-alert/README.md b/packages/components/outline-core-alert/README.md
new file mode 100644
index 000000000..51757992c
--- /dev/null
+++ b/packages/components/outline-core-alert/README.md
@@ -0,0 +1,30 @@
+# outline-core-alert
+
+The Outline Core Alert component
+
+## Properties
+
+| Property | Attribute | Type | Default | Description |
+|----------------------|------------------|-----------------------------------------------|---------|-----------------------------------------------|
+| `adoptedStylesheets` | | `AdoptedStyleSheets` | | |
+| `debug` | | `boolean` | false | |
+| `isInteractive` | `is-interactive` | `boolean` | false | This is important context for screen readers. |
+| `status` | `status` | `"info" \| "warning" \| "error" \| "success"` | "info" | |
+
+## Slots
+
+| Name | Description |
+|--------------|------------------------------------------------|
+| `default` | The alert contents. |
+| `header` | The header in the alert. |
+| `icon-end` | The icon to display at the end of the alert. |
+| `icon-start` | The icon to display at the start of the alert. |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------------------------|--------------------------------------------------|
+| `--outline-alert--error` | background: The background color for the error alert. |
+| `--outline-alert--info` | background: The background color for the info alert. |
+| `--outline-alert--success` | background: The background color for the success alert. |
+| `--outline-alert--warning` | background: The background color for the warning alert. |
diff --git a/packages/components/outline-core-alert/docs/outline-core-alert.mdx b/packages/components/outline-core-alert/docs/outline-core-alert.mdx
index f90579a01..9d4b9b556 100644
--- a/packages/components/outline-core-alert/docs/outline-core-alert.mdx
+++ b/packages/components/outline-core-alert/docs/outline-core-alert.mdx
@@ -1,5 +1,4 @@
import { Meta } from '@storybook/addon-docs';
-
import '@phase2/outline-core-alert';
+
Documentation Status: @TODO
This documentation is in need of completion as the component is built out.
@@ -34,6 +33,31 @@ The `outline-core-alert` component ...
## Introduction to the **`outline-core-alert`** component
The `outline-core-alert` component is a versatile alert box that can be used to display important messages to the user. It supports various statuses such as 'info', 'warning', 'error', and 'success', each with its own distinct styling.
+### Slots
+
+The `outline-core-alert` component supports two slots: 'header' and the `default` slot.
+The 'header' slot is used for the alert's title, and the `default` slot is used for the alert's content.
+Any content not wrapped inside the `header` slot would by default, be placed inside the `default` slot.
+
+Here's an example of how to use these slots:
+
+
+ Content in header slot
+ This is a paragraph added to the default slot.
+ This is another paragraph added to the default slot.
+
+
+```html
+
+ Content in header slot
+ This is a paragraph added to the default slot.
+ This is another paragraph added to the default slot.
+
+```
+
+In the above example, the 'header' slot is used to display the title 'Warning', and the 'default' slot is used to display the message 'This is a warning alert.'.
+
+
### Usage
To use the `outline-core-alert` component, you need to import it in your file like so:
@@ -42,8 +66,18 @@ To use the `outline-core-alert` component, you need to import it in your file li
import '@phase2/outline-core-alert';
```
-After importing, you can use the `outline-core-alert` component in your HTML. Here's an example:
+After importing, you can use the `outline-core-alert` component in your HTML.
+The available options are 'info', 'warning', 'error', and 'success'.
+The content inside the `outline-core-alert` tags is the message that will be displayed in the alert box.
+
+Here are examples of each `status` type:
+#### `info`
+
+ Information
+ This is an informational alert.
+
+
```html
Information
@@ -51,7 +85,46 @@ After importing, you can use the `outline-core-alert` component in your HTML. He
```
-In the above example, the `status` attribute is used to specify the type of alert. The available options are 'info', 'warning', 'error', and 'success'. The content inside the `outline-core-alert` tags is the message that will be displayed in the alert box.
+#### `warning`
+
+ Warning
+ This is a warning alert.
+
+
+```html
+
+ Warning
+ This is a warning alert.
+
+```
+
+#### `error`
+
+ Error
+ This is an error alert.
+
+
+```html
+
+ Error
+ This is an error alert.
+
+```
+
+#### `success`
+
+ Success
+ This is a success alert.
+
+
+```html
+
+ Success
+ This is a success alert.
+
+```
+
+Each `status` type changes the visual style of the alert to correspond with the type of message being conveyed.
### Styling
@@ -73,16 +146,3 @@ The `outline-core-alert` component uses CSS variables for styling. You can overr
```
Each variable corresponds to a specific part of the alert's style. For example, `--outline-alert--info-background--computed` controls the background color of 'info' alerts, and `--outline-alert--info-text--computed` controls the text color.
-
-### Slots
-
-The `outline-core-alert` component supports two slots: 'header' and 'default'. The 'header' slot is used for the alert's title, and the 'default' slot is used for the alert's content. Here's an example of how to use these slots:
-
-```html
-
- Warning
- This is a warning alert.
-
-```
-
-In the above example, the 'header' slot is used to display the title 'Warning', and the 'default' slot is used to display the message 'This is a warning alert.'.
diff --git a/packages/components/outline-core-alert/src/outline-core-alert.ts b/packages/components/outline-core-alert/src/outline-core-alert.ts
index f981eee38..cb57315b0 100644
--- a/packages/components/outline-core-alert/src/outline-core-alert.ts
+++ b/packages/components/outline-core-alert/src/outline-core-alert.ts
@@ -47,12 +47,6 @@ export interface OutlineCoreAlertInterface extends HTMLElement {
* @cssprop --outline-alert--error-text: The text color for the error alert.
* @cssprop --outline-alert--error-border: The border color for the error alert.
* @todo: Make the alert styling more flexible.
- * @todo: Complete component.
- * @todo: Update `../docs/outline-core-alert.mdx` to accurately document the component.
- * @todo: Run `yarn analyze` to generate README.md.
- * @todo: Update `package.json` to remove the `private` flag.
- * @todo: Update `.changeset/config.json` to remove this component from the `ignore` list.
- * @todo: Create PR for updated and completed component.
*/
@customElement(componentName)
export class OutlineCoreAlert
diff --git a/packages/components/outline-core-alert/src/style/outline-core-alert.css b/packages/components/outline-core-alert/src/style/outline-core-alert.css
index ef3a79358..80678b741 100644
--- a/packages/components/outline-core-alert/src/style/outline-core-alert.css
+++ b/packages/components/outline-core-alert/src/style/outline-core-alert.css
@@ -1,3 +1,7 @@
+:host {
+ @nested-import './outline-core-alert.vars.css';
+}
+
.alert-body {
display: block;
border-width: 0;
diff --git a/packages/components/outline-core-alert/src/style/outline-core-alert.lightDom.css b/packages/components/outline-core-alert/src/style/outline-core-alert.lightDom.css
index e69de29bb..bb229a754 100644
--- a/packages/components/outline-core-alert/src/style/outline-core-alert.lightDom.css
+++ b/packages/components/outline-core-alert/src/style/outline-core-alert.lightDom.css
@@ -0,0 +1,3 @@
+outline-core-alert {
+ @nested-import './outline-core-alert.vars.css';
+}