From 314f5e4a6fc0ecc5bda36c88cdae943aac1fb22f Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Thu, 10 Aug 2023 10:11:14 -0400
Subject: [PATCH 01/17] feat(outline-core-image): Initial component stub.

---
 packages/outline-core-image/index.ts          |  6 +++
 packages/outline-core-image/package.json      | 41 +++++++++++++++++++
 packages/outline-core-image/src/config.ts     |  3 ++
 .../src/outline-core-image.css                |  6 +++
 .../src/outline-core-image.global.css         |  7 ++++
 .../src/outline-core-image.ts                 | 39 ++++++++++++++++++
 .../outline-core-image/tsconfig.build.json    |  9 ++++
 .../config/storybook.main.css                 | 26 ++++++------
 8 files changed, 124 insertions(+), 13 deletions(-)
 create mode 100644 packages/outline-core-image/index.ts
 create mode 100644 packages/outline-core-image/package.json
 create mode 100644 packages/outline-core-image/src/config.ts
 create mode 100644 packages/outline-core-image/src/outline-core-image.css
 create mode 100644 packages/outline-core-image/src/outline-core-image.global.css
 create mode 100644 packages/outline-core-image/src/outline-core-image.ts
 create mode 100644 packages/outline-core-image/tsconfig.build.json

diff --git a/packages/outline-core-image/index.ts b/packages/outline-core-image/index.ts
new file mode 100644
index 000000000..2b8dc9e44
--- /dev/null
+++ b/packages/outline-core-image/index.ts
@@ -0,0 +1,6 @@
+// Export the primary component.
+export { OutlineCoreImage } from './src/outline-core-image';
+
+/**
+ * @
+ */
diff --git a/packages/outline-core-image/package.json b/packages/outline-core-image/package.json
new file mode 100644
index 000000000..1edb8a933
--- /dev/null
+++ b/packages/outline-core-image/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@phase2/outline-core-image",
+  "private": true,
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-image"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-image/src/config.ts b/packages/outline-core-image/src/config.ts
new file mode 100644
index 000000000..80889b4b6
--- /dev/null
+++ b/packages/outline-core-image/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the outline-core-image component.
+ */
diff --git a/packages/outline-core-image/src/outline-core-image.css b/packages/outline-core-image/src/outline-core-image.css
new file mode 100644
index 000000000..7b87b9afd
--- /dev/null
+++ b/packages/outline-core-image/src/outline-core-image.css
@@ -0,0 +1,6 @@
+/* 
+Add any component level, structural CSS for the `outline-core-image` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+*/
diff --git a/packages/outline-core-image/src/outline-core-image.global.css b/packages/outline-core-image/src/outline-core-image.global.css
new file mode 100644
index 000000000..90a713224
--- /dev/null
+++ b/packages/outline-core-image/src/outline-core-image.global.css
@@ -0,0 +1,7 @@
+/* 
+Add any global level, shared CSS for the `outline-core-image` component. 
+This would be CSS that targets particular contents of the component,
+typically provided through a <slot> that is rendered in the Light DOM.
+
+This file will be processed and available for loading through mulitple methods.
+*/
diff --git a/packages/outline-core-image/src/outline-core-image.ts b/packages/outline-core-image/src/outline-core-image.ts
new file mode 100644
index 000000000..ded2181f0
--- /dev/null
+++ b/packages/outline-core-image/src/outline-core-image.ts
@@ -0,0 +1,39 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-image.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-image';
+
+/**
+ *
+ * The Outline Core Image component
+ *
+ * @element outline-core-image
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo - Complete component.
+ * @todo - Run `yarn analyze` to generate README.md.
+ * @todo - Update `package.json` to remove the `private` flag.
+ */
+@customElement(componentName)
+export class OutlineCoreImage extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreImage;
+  }
+}
diff --git a/packages/outline-core-image/tsconfig.build.json b/packages/outline-core-image/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-image/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}
diff --git a/packages/outline-storybook/config/storybook.main.css b/packages/outline-storybook/config/storybook.main.css
index ef96f96b7..b88f391aa 100644
--- a/packages/outline-storybook/config/storybook.main.css
+++ b/packages/outline-storybook/config/storybook.main.css
@@ -451,11 +451,11 @@ video{
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }
-.border-2, .border, .border-b, .border-t-2{
+.border-2, .border, .border-t-2, .border-b{
   border-color: currentColor;
 
 }
-.shadow, .shadow-md, .shadow-xl{
+.shadow-xl, .shadow, .shadow-md{
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -701,14 +701,14 @@ video{
 .border{
   border-width: 1px;
 
-}
-.border-b{
-  border-bottom-width: 1px;
-
 }
 .border-t-2{
   border-top-width: 2px;
 
+}
+.border-b{
+  border-bottom-width: 1px;
+
 }
 .border-dashed{
   border-style: dashed;
@@ -948,6 +948,13 @@ video{
 .no-underline{
   text-decoration: none;
 
+}
+.shadow-xl{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -962,13 +969,6 @@ video{
   box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
-}
-.shadow-xl{
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
 }
 .outline{
   outline-style: solid;

From 39e0e4a70dea1f607be60bd5433266ae43fc118e Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Thu, 10 Aug 2023 10:16:41 -0400
Subject: [PATCH 02/17] feat(outline-core-image): Fix for stray file update.

---
 .../config/storybook.main.css                 | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/outline-storybook/config/storybook.main.css b/packages/outline-storybook/config/storybook.main.css
index b88f391aa..ef96f96b7 100644
--- a/packages/outline-storybook/config/storybook.main.css
+++ b/packages/outline-storybook/config/storybook.main.css
@@ -451,11 +451,11 @@ video{
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }
-.border-2, .border, .border-t-2, .border-b{
+.border-2, .border, .border-b, .border-t-2{
   border-color: currentColor;
 
 }
-.shadow-xl, .shadow, .shadow-md{
+.shadow, .shadow-md, .shadow-xl{
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -701,14 +701,14 @@ video{
 .border{
   border-width: 1px;
 
-}
-.border-t-2{
-  border-top-width: 2px;
-
 }
 .border-b{
   border-bottom-width: 1px;
 
+}
+.border-t-2{
+  border-top-width: 2px;
+
 }
 .border-dashed{
   border-style: dashed;
@@ -948,13 +948,6 @@ video{
 .no-underline{
   text-decoration: none;
 
-}
-.shadow-xl{
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
 }
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -969,6 +962,13 @@ video{
   box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
+}
+.shadow-xl{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 .outline{
   outline-style: solid;

From 3cd463605f477081a0c235b935749d541b3e9acb Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Thu, 10 Aug 2023 10:27:01 -0400
Subject: [PATCH 03/17] feat(outline-core-image): Formatting tweaks.

---
 packages/outline-core-image/index.ts                  | 4 +---
 packages/outline-core-image/src/config.ts             | 2 +-
 packages/outline-core-image/src/outline-core-image.ts | 7 ++++---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/outline-core-image/index.ts b/packages/outline-core-image/index.ts
index 2b8dc9e44..575baa432 100644
--- a/packages/outline-core-image/index.ts
+++ b/packages/outline-core-image/index.ts
@@ -1,6 +1,4 @@
 // Export the primary component.
 export { OutlineCoreImage } from './src/outline-core-image';
 
-/**
- * @
- */
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-image/src/config.ts b/packages/outline-core-image/src/config.ts
index 80889b4b6..99a10b457 100644
--- a/packages/outline-core-image/src/config.ts
+++ b/packages/outline-core-image/src/config.ts
@@ -1,3 +1,3 @@
 /**
- * @file Shared configuration for the outline-core-image component.
+ * @file Shared configuration for the `outline-core-image` component.
  */
diff --git a/packages/outline-core-image/src/outline-core-image.ts b/packages/outline-core-image/src/outline-core-image.ts
index ded2181f0..b4f1eacd8 100644
--- a/packages/outline-core-image/src/outline-core-image.ts
+++ b/packages/outline-core-image/src/outline-core-image.ts
@@ -17,9 +17,10 @@ const componentName = 'outline-core-image';
  * @extends OutlineElement
  * @slot - The default slot for this element.
  *
- * @todo - Complete component.
- * @todo - Run `yarn analyze` to generate README.md.
- * @todo - Update `package.json` to remove the `private` flag.
+ * @todo: Complete component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
  */
 @customElement(componentName)
 export class OutlineCoreImage extends OutlineElement {

From 6db26b19440cec78a8d0c4027c4fe3a6b7980d65 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Thu, 10 Aug 2023 15:38:37 -0400
Subject: [PATCH 04/17] feat(outline-core-image): Setting up Storybook to look
 for .mdx files in component directories.

---
 .storybook/main.js                            |  4 +-
 .../docs/outline-core-image.mdx               | 40 +++++++++++++++++++
 packages/outline-core-image/index.ts          | 17 ++++++++
 .../src/outline-core-image.css                | 29 +++++++++++++-
 .../src/outline-core-image.global.css         |  7 ----
 .../src/outline-core-image.ts                 |  1 +
 6 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 packages/outline-core-image/docs/outline-core-image.mdx
 delete mode 100644 packages/outline-core-image/src/outline-core-image.global.css

diff --git a/.storybook/main.js b/.storybook/main.js
index d9add3219..3b5973e64 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -12,7 +12,9 @@ module.exports = {
     '../packages/outline-docs/src/guides/tooling/**/*.mdx',
     // Documentation stories.
     '../packages/outline-docs/src/guides/**/*.@(js|ts|mdx)',
-    // Component stories.
+    // Modern component stories.
+    '../packages/**/docs/*.mdx',
+    // Old component stories.
     '../packages/outline-storybook/stories/**/*.stories.@(js|ts|mdx)',
   ],
   typescript: {
diff --git a/packages/outline-core-image/docs/outline-core-image.mdx b/packages/outline-core-image/docs/outline-core-image.mdx
new file mode 100644
index 000000000..74db75329
--- /dev/null
+++ b/packages/outline-core-image/docs/outline-core-image.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Image"
+  component="outline-core-image"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-image](https://img.shields.io/npm/v/@phase2/outline-core-image)](https://www.npmjs.com/package/@phase2/outline-core-image)
+
+# `<outline-core-image>` `OutlineCoreImage`
+
+The `outline-core-image` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-image`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-image/index.ts b/packages/outline-core-image/index.ts
index 575baa432..cf560a4fa 100644
--- a/packages/outline-core-image/index.ts
+++ b/packages/outline-core-image/index.ts
@@ -1,3 +1,20 @@
+/**
+ * @file Exports for the OutlineCoreImage component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreImage } from '@phase2/outline-core-image';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-image';
+ * import type { ThingType } from '@phase2/outline-core-image';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
 // Export the primary component.
 export { OutlineCoreImage } from './src/outline-core-image';
 
diff --git a/packages/outline-core-image/src/outline-core-image.css b/packages/outline-core-image/src/outline-core-image.css
index 7b87b9afd..8587644d2 100644
--- a/packages/outline-core-image/src/outline-core-image.css
+++ b/packages/outline-core-image/src/outline-core-image.css
@@ -1,6 +1,33 @@
 /* 
-Add any component level, structural CSS for the `outline-core-image` component.
+Styles for `outline-core-image.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
 This would be CSS that is targeted to this component only, 
 and is dependent on the HTML structure of the component that 
 is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
 */
diff --git a/packages/outline-core-image/src/outline-core-image.global.css b/packages/outline-core-image/src/outline-core-image.global.css
deleted file mode 100644
index 90a713224..000000000
--- a/packages/outline-core-image/src/outline-core-image.global.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 
-Add any global level, shared CSS for the `outline-core-image` component. 
-This would be CSS that targets particular contents of the component,
-typically provided through a <slot> that is rendered in the Light DOM.
-
-This file will be processed and available for loading through mulitple methods.
-*/
diff --git a/packages/outline-core-image/src/outline-core-image.ts b/packages/outline-core-image/src/outline-core-image.ts
index b4f1eacd8..1b86b076e 100644
--- a/packages/outline-core-image/src/outline-core-image.ts
+++ b/packages/outline-core-image/src/outline-core-image.ts
@@ -18,6 +18,7 @@ const componentName = 'outline-core-image';
  * @slot - The default slot for this element.
  *
  * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-image.mdx` to accurately document the component.
  * @todo: Run `yarn analyze` to generate README.md.
  * @todo: Update `package.json` to remove the `private` flag.
  * @todo: Create PR for updated and completed component.

From dfb2a30bdc9c91fee4a0f77fe96e47c9bbcd5e64 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 08:51:22 -0400
Subject: [PATCH 05/17] feat(outline-core-card): Stub the `outline-core-card`
 component.

---
 .../docs/outline-core-card.mdx                | 40 ++++++++++++++++++
 packages/outline-core-card/index.ts           | 21 ++++++++++
 packages/outline-core-card/package.json       | 40 ++++++++++++++++++
 packages/outline-core-card/src/config.ts      |  3 ++
 .../src/outline-core-card.css                 | 33 +++++++++++++++
 .../src/outline-core-card.ts                  | 41 +++++++++++++++++++
 .../outline-core-card/tsconfig.build.json     |  9 ++++
 .../config/storybook.main.css                 | 16 ++++----
 8 files changed, 195 insertions(+), 8 deletions(-)
 create mode 100644 packages/outline-core-card/docs/outline-core-card.mdx
 create mode 100644 packages/outline-core-card/index.ts
 create mode 100644 packages/outline-core-card/package.json
 create mode 100644 packages/outline-core-card/src/config.ts
 create mode 100644 packages/outline-core-card/src/outline-core-card.css
 create mode 100644 packages/outline-core-card/src/outline-core-card.ts
 create mode 100644 packages/outline-core-card/tsconfig.build.json

diff --git a/packages/outline-core-card/docs/outline-core-card.mdx b/packages/outline-core-card/docs/outline-core-card.mdx
new file mode 100644
index 000000000..16ebb3281
--- /dev/null
+++ b/packages/outline-core-card/docs/outline-core-card.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Card"
+  component="outline-core-card"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-card](https://img.shields.io/npm/v/@phase2/outline-core-card)](https://www.npmjs.com/package/@phase2/outline-core-card)
+
+# `<outline-core-card>` `OutlineCoreCard`
+
+The `outline-core-card` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-card`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-card/index.ts b/packages/outline-core-card/index.ts
new file mode 100644
index 000000000..fb94a09fe
--- /dev/null
+++ b/packages/outline-core-card/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreCard component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreCard } from '@phase2/outline-core-card';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-card';
+ * import type { ThingType } from '@phase2/outline-core-card';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreCard } from './src/outline-core-card';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-card/package.json b/packages/outline-core-card/package.json
new file mode 100644
index 000000000..19031f580
--- /dev/null
+++ b/packages/outline-core-card/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@phase2/outline-core-card",
+  "private": true,
+  "description": "The Outline Components for the card component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "card"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-card"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-card/src/config.ts b/packages/outline-core-card/src/config.ts
new file mode 100644
index 000000000..a7ed005c6
--- /dev/null
+++ b/packages/outline-core-card/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-card` component.
+ */
diff --git a/packages/outline-core-card/src/outline-core-card.css b/packages/outline-core-card/src/outline-core-card.css
new file mode 100644
index 000000000..4f2135b0c
--- /dev/null
+++ b/packages/outline-core-card/src/outline-core-card.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-card.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-card/src/outline-core-card.ts b/packages/outline-core-card/src/outline-core-card.ts
new file mode 100644
index 000000000..c1d371a47
--- /dev/null
+++ b/packages/outline-core-card/src/outline-core-card.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-card.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-card';
+
+/**
+ *
+ * The Outline Core Card component
+ *
+ * @element outline-core-card
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-card.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreCard extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreCard;
+  }
+}
diff --git a/packages/outline-core-card/tsconfig.build.json b/packages/outline-core-card/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-card/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}
diff --git a/packages/outline-storybook/config/storybook.main.css b/packages/outline-storybook/config/storybook.main.css
index ef96f96b7..5ef06f496 100644
--- a/packages/outline-storybook/config/storybook.main.css
+++ b/packages/outline-storybook/config/storybook.main.css
@@ -455,7 +455,7 @@ video{
   border-color: currentColor;
 
 }
-.shadow, .shadow-md, .shadow-xl{
+.shadow-md, .shadow-xl, .shadow{
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -948,13 +948,6 @@ video{
 .no-underline{
   text-decoration: none;
 
-}
-.shadow{
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
 }
 .shadow-md{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -969,6 +962,13 @@ video{
   box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
+}
+.shadow{
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 .outline{
   outline-style: solid;

From b64b1953b54c4dfcd3b3528b948264731a2782ac Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:02:26 -0400
Subject: [PATCH 06/17] feat(outline-core-alert): Stub the `outline-core-alert`
 component.

---
 .../docs/outline-core-alert.mdx               | 40 ++++++++++++++++++
 packages/outline-core-alert/index.ts          | 21 ++++++++++
 packages/outline-core-alert/package.json      | 41 +++++++++++++++++++
 packages/outline-core-alert/src/config.ts     |  3 ++
 .../src/outline-core-alert.css                | 33 +++++++++++++++
 .../src/outline-core-alert.ts                 | 41 +++++++++++++++++++
 .../outline-core-alert/tsconfig.build.json    |  9 ++++
 7 files changed, 188 insertions(+)
 create mode 100644 packages/outline-core-alert/docs/outline-core-alert.mdx
 create mode 100644 packages/outline-core-alert/index.ts
 create mode 100644 packages/outline-core-alert/package.json
 create mode 100644 packages/outline-core-alert/src/config.ts
 create mode 100644 packages/outline-core-alert/src/outline-core-alert.css
 create mode 100644 packages/outline-core-alert/src/outline-core-alert.ts
 create mode 100644 packages/outline-core-alert/tsconfig.build.json

diff --git a/packages/outline-core-alert/docs/outline-core-alert.mdx b/packages/outline-core-alert/docs/outline-core-alert.mdx
new file mode 100644
index 000000000..0fd68395d
--- /dev/null
+++ b/packages/outline-core-alert/docs/outline-core-alert.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Alert"
+  component="outline-core-alert"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-alert](https://img.shields.io/npm/v/@phase2/outline-core-alert)](https://www.npmjs.com/package/@phase2/outline-core-alert)
+
+# `<outline-core-alert>` `OutlineCoreAlert`
+
+The `outline-core-alert` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-alert`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-alert/index.ts b/packages/outline-core-alert/index.ts
new file mode 100644
index 000000000..5240d8c77
--- /dev/null
+++ b/packages/outline-core-alert/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreAlert component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreAlert } from '@phase2/outline-core-alert';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-alert';
+ * import type { ThingType } from '@phase2/outline-core-alert';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreAlert } from './src/outline-core-alert';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-alert/package.json b/packages/outline-core-alert/package.json
new file mode 100644
index 000000000..1a9b9fcc0
--- /dev/null
+++ b/packages/outline-core-alert/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@phase2/outline-core-alert",
+  "private": true,
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-alert"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-alert/src/config.ts b/packages/outline-core-alert/src/config.ts
new file mode 100644
index 000000000..937c16706
--- /dev/null
+++ b/packages/outline-core-alert/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-alert` component.
+ */
diff --git a/packages/outline-core-alert/src/outline-core-alert.css b/packages/outline-core-alert/src/outline-core-alert.css
new file mode 100644
index 000000000..acef8b574
--- /dev/null
+++ b/packages/outline-core-alert/src/outline-core-alert.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-alert.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-alert/src/outline-core-alert.ts b/packages/outline-core-alert/src/outline-core-alert.ts
new file mode 100644
index 000000000..63d455e47
--- /dev/null
+++ b/packages/outline-core-alert/src/outline-core-alert.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-alert.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-alert';
+
+/**
+ *
+ * The Outline Core Alert component
+ *
+ * @element outline-core-alert
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @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: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreAlert extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreAlert;
+  }
+}
diff --git a/packages/outline-core-alert/tsconfig.build.json b/packages/outline-core-alert/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-alert/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From 87e16982e3f9536fa7551b60df873a772729b04f Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:08:04 -0400
Subject: [PATCH 07/17] feat(outline-core-icon): Stub the `outline-core-icon`
 component.

---
 .../docs/outline-core-icon.mdx                | 40 ++++++++++++++++++
 packages/outline-core-icon/index.ts           | 21 ++++++++++
 packages/outline-core-icon/package.json       | 42 +++++++++++++++++++
 packages/outline-core-icon/src/config.ts      |  3 ++
 .../src/outline-core-icon.css                 | 33 +++++++++++++++
 .../src/outline-core-icon.ts                  | 41 ++++++++++++++++++
 .../outline-core-icon/tsconfig.build.json     |  9 ++++
 .../config/storybook.main.css                 | 16 +++----
 8 files changed, 197 insertions(+), 8 deletions(-)
 create mode 100644 packages/outline-core-icon/docs/outline-core-icon.mdx
 create mode 100644 packages/outline-core-icon/index.ts
 create mode 100644 packages/outline-core-icon/package.json
 create mode 100644 packages/outline-core-icon/src/config.ts
 create mode 100644 packages/outline-core-icon/src/outline-core-icon.css
 create mode 100644 packages/outline-core-icon/src/outline-core-icon.ts
 create mode 100644 packages/outline-core-icon/tsconfig.build.json

diff --git a/packages/outline-core-icon/docs/outline-core-icon.mdx b/packages/outline-core-icon/docs/outline-core-icon.mdx
new file mode 100644
index 000000000..495c7c496
--- /dev/null
+++ b/packages/outline-core-icon/docs/outline-core-icon.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Icon"
+  component="outline-core-icon"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-icon](https://img.shields.io/npm/v/@phase2/outline-core-icon)](https://www.npmjs.com/package/@phase2/outline-core-icon)
+
+# `<outline-core-icon>` `OutlineCoreIcon`
+
+The `outline-core-icon` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-icon`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-icon/index.ts b/packages/outline-core-icon/index.ts
new file mode 100644
index 000000000..9b7477763
--- /dev/null
+++ b/packages/outline-core-icon/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreIcon component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreIcon } from '@phase2/outline-core-icon';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-icon';
+ * import type { ThingType } from '@phase2/outline-core-icon';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreIcon } from './src/outline-core-icon';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-icon/package.json b/packages/outline-core-icon/package.json
new file mode 100644
index 000000000..5671912f9
--- /dev/null
+++ b/packages/outline-core-icon/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-icon",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-icon"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-icon/src/config.ts b/packages/outline-core-icon/src/config.ts
new file mode 100644
index 000000000..d3682a9a8
--- /dev/null
+++ b/packages/outline-core-icon/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-icon` component.
+ */
diff --git a/packages/outline-core-icon/src/outline-core-icon.css b/packages/outline-core-icon/src/outline-core-icon.css
new file mode 100644
index 000000000..6ba5396e4
--- /dev/null
+++ b/packages/outline-core-icon/src/outline-core-icon.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-icon.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-icon/src/outline-core-icon.ts b/packages/outline-core-icon/src/outline-core-icon.ts
new file mode 100644
index 000000000..7d1db5053
--- /dev/null
+++ b/packages/outline-core-icon/src/outline-core-icon.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-icon.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-icon';
+
+/**
+ *
+ * The Outline Core Image component
+ *
+ * @element outline-core-icon
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-icon.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreIcon extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreIcon;
+  }
+}
diff --git a/packages/outline-core-icon/tsconfig.build.json b/packages/outline-core-icon/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-icon/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}
diff --git a/packages/outline-storybook/config/storybook.main.css b/packages/outline-storybook/config/storybook.main.css
index 5ef06f496..5b9e82948 100644
--- a/packages/outline-storybook/config/storybook.main.css
+++ b/packages/outline-storybook/config/storybook.main.css
@@ -455,7 +455,7 @@ video{
   border-color: currentColor;
 
 }
-.shadow-md, .shadow-xl, .shadow{
+.shadow-xl, .shadow, .shadow-md{
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -948,13 +948,6 @@ video{
 .no-underline{
   text-decoration: none;
 
-}
-.shadow-md{
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
 }
 .shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
@@ -969,6 +962,13 @@ video{
   box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
+}
+.shadow-md{
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 .outline{
   outline-style: solid;

From b19baf439e62961c681782bcb28ea865fbd4285d Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:09:32 -0400
Subject: [PATCH 08/17] fix(versioning): Updating stubbed components to include
 a default version of 0.0.0.

---
 packages/outline-core-alert/package.json | 1 +
 packages/outline-core-card/package.json  | 1 +
 packages/outline-core-image/package.json | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/outline-core-alert/package.json b/packages/outline-core-alert/package.json
index 1a9b9fcc0..3281c8518 100644
--- a/packages/outline-core-alert/package.json
+++ b/packages/outline-core-alert/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@phase2/outline-core-alert",
   "private": true,
+  "version": "0.0.0",
   "description": "The Outline Components for the image component",
   "keywords": [
     "outline",
diff --git a/packages/outline-core-card/package.json b/packages/outline-core-card/package.json
index 19031f580..b73ea5f40 100644
--- a/packages/outline-core-card/package.json
+++ b/packages/outline-core-card/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@phase2/outline-core-card",
   "private": true,
+  "version": "0.0.0",
   "description": "The Outline Components for the card component",
   "keywords": [
     "outline",
diff --git a/packages/outline-core-image/package.json b/packages/outline-core-image/package.json
index 1edb8a933..aa6d788e6 100644
--- a/packages/outline-core-image/package.json
+++ b/packages/outline-core-image/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@phase2/outline-core-image",
   "private": true,
+  "version": "0.0.0",
   "description": "The Outline Components for the image component",
   "keywords": [
     "outline",

From a9f3c0a7762634379aaa4b5de654261d729a6427 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:16:15 -0400
Subject: [PATCH 09/17] feat(outline-core-container): Stub the
 `outline-core-container` component.

---
 .../docs/outline-core-container.mdx           | 40 ++++++++++++++++++
 packages/outline-core-container/index.ts      | 21 ++++++++++
 packages/outline-core-container/package.json  | 42 +++++++++++++++++++
 packages/outline-core-container/src/config.ts |  3 ++
 .../src/outline-core-container.css            | 33 +++++++++++++++
 .../src/outline-core-container.ts             | 41 ++++++++++++++++++
 .../tsconfig.build.json                       |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-container/docs/outline-core-container.mdx
 create mode 100644 packages/outline-core-container/index.ts
 create mode 100644 packages/outline-core-container/package.json
 create mode 100644 packages/outline-core-container/src/config.ts
 create mode 100644 packages/outline-core-container/src/outline-core-container.css
 create mode 100644 packages/outline-core-container/src/outline-core-container.ts
 create mode 100644 packages/outline-core-container/tsconfig.build.json

diff --git a/packages/outline-core-container/docs/outline-core-container.mdx b/packages/outline-core-container/docs/outline-core-container.mdx
new file mode 100644
index 000000000..3f51b106b
--- /dev/null
+++ b/packages/outline-core-container/docs/outline-core-container.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Container"
+  component="outline-core-container"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-container](https://img.shields.io/npm/v/@phase2/outline-core-container)](https://www.npmjs.com/package/@phase2/outline-core-container)
+
+# `<outline-core-container>` `OutlineCoreContainer`
+
+The `outline-core-container` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-container`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-container/index.ts b/packages/outline-core-container/index.ts
new file mode 100644
index 000000000..e7ef30f55
--- /dev/null
+++ b/packages/outline-core-container/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreContainer component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreContainer } from '@phase2/outline-core-container';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-container';
+ * import type { ThingType } from '@phase2/outline-core-container';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreContainer } from './src/outline-core-container';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-container/package.json b/packages/outline-core-container/package.json
new file mode 100644
index 000000000..cfc5eca7c
--- /dev/null
+++ b/packages/outline-core-container/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-container",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-container"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-container/src/config.ts b/packages/outline-core-container/src/config.ts
new file mode 100644
index 000000000..b251f2ad0
--- /dev/null
+++ b/packages/outline-core-container/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-container` component.
+ */
diff --git a/packages/outline-core-container/src/outline-core-container.css b/packages/outline-core-container/src/outline-core-container.css
new file mode 100644
index 000000000..a3475d6ed
--- /dev/null
+++ b/packages/outline-core-container/src/outline-core-container.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-container.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-container/src/outline-core-container.ts b/packages/outline-core-container/src/outline-core-container.ts
new file mode 100644
index 000000000..e1d34f000
--- /dev/null
+++ b/packages/outline-core-container/src/outline-core-container.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-container.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-container';
+
+/**
+ *
+ * The Outline Core Container component
+ *
+ * @element outline-core-container
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-container.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreContainer extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreContainer;
+  }
+}
diff --git a/packages/outline-core-container/tsconfig.build.json b/packages/outline-core-container/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-container/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From 0cf39725fb590614bd2216e063bda5cec465e127 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:19:49 -0400
Subject: [PATCH 10/17] feat(outline-core-list): Stub the `outline-core-list`
 component.

---
 .../docs/outline-core-list.mdx                | 40 ++++++++++++++++++
 packages/outline-core-list/index.ts           | 21 ++++++++++
 packages/outline-core-list/package.json       | 42 +++++++++++++++++++
 packages/outline-core-list/src/config.ts      |  3 ++
 .../src/outline-core-list.css                 | 33 +++++++++++++++
 .../src/outline-core-list.ts                  | 41 ++++++++++++++++++
 .../outline-core-list/tsconfig.build.json     |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-list/docs/outline-core-list.mdx
 create mode 100644 packages/outline-core-list/index.ts
 create mode 100644 packages/outline-core-list/package.json
 create mode 100644 packages/outline-core-list/src/config.ts
 create mode 100644 packages/outline-core-list/src/outline-core-list.css
 create mode 100644 packages/outline-core-list/src/outline-core-list.ts
 create mode 100644 packages/outline-core-list/tsconfig.build.json

diff --git a/packages/outline-core-list/docs/outline-core-list.mdx b/packages/outline-core-list/docs/outline-core-list.mdx
new file mode 100644
index 000000000..57624b15e
--- /dev/null
+++ b/packages/outline-core-list/docs/outline-core-list.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/List"
+  component="outline-core-list"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-list](https://img.shields.io/npm/v/@phase2/outline-core-list)](https://www.npmjs.com/package/@phase2/outline-core-list)
+
+# `<outline-core-list>` `OutlineCoreList`
+
+The `outline-core-list` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-list`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-list/index.ts b/packages/outline-core-list/index.ts
new file mode 100644
index 000000000..f0abafbcb
--- /dev/null
+++ b/packages/outline-core-list/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreList component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreList } from '@phase2/outline-core-list';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-list';
+ * import type { ThingType } from '@phase2/outline-core-list';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreList } from './src/outline-core-list';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-list/package.json b/packages/outline-core-list/package.json
new file mode 100644
index 000000000..0d89be766
--- /dev/null
+++ b/packages/outline-core-list/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-list",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-list"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-list/src/config.ts b/packages/outline-core-list/src/config.ts
new file mode 100644
index 000000000..7d9bceabb
--- /dev/null
+++ b/packages/outline-core-list/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-list` component.
+ */
diff --git a/packages/outline-core-list/src/outline-core-list.css b/packages/outline-core-list/src/outline-core-list.css
new file mode 100644
index 000000000..ba1f72bf3
--- /dev/null
+++ b/packages/outline-core-list/src/outline-core-list.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-list.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-list/src/outline-core-list.ts b/packages/outline-core-list/src/outline-core-list.ts
new file mode 100644
index 000000000..3a075eeda
--- /dev/null
+++ b/packages/outline-core-list/src/outline-core-list.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-list.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-list';
+
+/**
+ *
+ * The Outline Core List component
+ *
+ * @element outline-core-list
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-list.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreList extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreList;
+  }
+}
diff --git a/packages/outline-core-list/tsconfig.build.json b/packages/outline-core-list/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-list/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From dd4a6c2cf779c6c1c8b644a585241d4f141e8fbd Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:21:32 -0400
Subject: [PATCH 11/17] feat(outline-core-form): Stub the `outline-core-form`
 component.

---
 .../docs/outline-core-form.mdx                | 40 ++++++++++++++++++
 packages/outline-core-form/index.ts           | 21 ++++++++++
 packages/outline-core-form/package.json       | 42 +++++++++++++++++++
 packages/outline-core-form/src/config.ts      |  3 ++
 .../src/outline-core-form.css                 | 33 +++++++++++++++
 .../src/outline-core-form.ts                  | 41 ++++++++++++++++++
 .../outline-core-form/tsconfig.build.json     |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-form/docs/outline-core-form.mdx
 create mode 100644 packages/outline-core-form/index.ts
 create mode 100644 packages/outline-core-form/package.json
 create mode 100644 packages/outline-core-form/src/config.ts
 create mode 100644 packages/outline-core-form/src/outline-core-form.css
 create mode 100644 packages/outline-core-form/src/outline-core-form.ts
 create mode 100644 packages/outline-core-form/tsconfig.build.json

diff --git a/packages/outline-core-form/docs/outline-core-form.mdx b/packages/outline-core-form/docs/outline-core-form.mdx
new file mode 100644
index 000000000..83a157011
--- /dev/null
+++ b/packages/outline-core-form/docs/outline-core-form.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Form"
+  component="outline-core-form"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-form](https://img.shields.io/npm/v/@phase2/outline-core-form)](https://www.npmjs.com/package/@phase2/outline-core-form)
+
+# `<outline-core-form>` `OutlineCoreForm`
+
+The `outline-core-form` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-form`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-form/index.ts b/packages/outline-core-form/index.ts
new file mode 100644
index 000000000..5a1c7a5cd
--- /dev/null
+++ b/packages/outline-core-form/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreForm component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreForm } from '@phase2/outline-core-form';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-form';
+ * import type { ThingType } from '@phase2/outline-core-form';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreForm } from './src/outline-core-form';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-form/package.json b/packages/outline-core-form/package.json
new file mode 100644
index 000000000..e434426e0
--- /dev/null
+++ b/packages/outline-core-form/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-form",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-form"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-form/src/config.ts b/packages/outline-core-form/src/config.ts
new file mode 100644
index 000000000..cf0fd1189
--- /dev/null
+++ b/packages/outline-core-form/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-form` component.
+ */
diff --git a/packages/outline-core-form/src/outline-core-form.css b/packages/outline-core-form/src/outline-core-form.css
new file mode 100644
index 000000000..2b20479a5
--- /dev/null
+++ b/packages/outline-core-form/src/outline-core-form.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-form.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-form/src/outline-core-form.ts b/packages/outline-core-form/src/outline-core-form.ts
new file mode 100644
index 000000000..1219fa6dd
--- /dev/null
+++ b/packages/outline-core-form/src/outline-core-form.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-form.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-form';
+
+/**
+ *
+ * The Outline Core Form component
+ *
+ * @element outline-core-form
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-form.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreForm extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreForm;
+  }
+}
diff --git a/packages/outline-core-form/tsconfig.build.json b/packages/outline-core-form/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-form/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From fa39a827ca898c89daa470064e593144ed5401e2 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 09:25:32 -0400
Subject: [PATCH 12/17] feat(outline-core-text): Stub the `outline-core-text`
 component.

---
 .../docs/outline-core-text.mdx                | 40 ++++++++++++++++++
 packages/outline-core-text/index.ts           | 21 ++++++++++
 packages/outline-core-text/package.json       | 42 +++++++++++++++++++
 packages/outline-core-text/src/config.ts      |  3 ++
 .../src/outline-core-text.css                 | 33 +++++++++++++++
 .../src/outline-core-text.ts                  | 41 ++++++++++++++++++
 .../outline-core-text/tsconfig.build.json     |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-text/docs/outline-core-text.mdx
 create mode 100644 packages/outline-core-text/index.ts
 create mode 100644 packages/outline-core-text/package.json
 create mode 100644 packages/outline-core-text/src/config.ts
 create mode 100644 packages/outline-core-text/src/outline-core-text.css
 create mode 100644 packages/outline-core-text/src/outline-core-text.ts
 create mode 100644 packages/outline-core-text/tsconfig.build.json

diff --git a/packages/outline-core-text/docs/outline-core-text.mdx b/packages/outline-core-text/docs/outline-core-text.mdx
new file mode 100644
index 000000000..82958f059
--- /dev/null
+++ b/packages/outline-core-text/docs/outline-core-text.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Text"
+  component="outline-core-text"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-text](https://img.shields.io/npm/v/@phase2/outline-core-text)](https://www.npmjs.com/package/@phase2/outline-core-text)
+
+# `<outline-core-text>` `OutlineCoreText`
+
+The `outline-core-text` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-text`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-text/index.ts b/packages/outline-core-text/index.ts
new file mode 100644
index 000000000..9da430943
--- /dev/null
+++ b/packages/outline-core-text/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreText component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreText } from '@phase2/outline-core-text';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-text';
+ * import type { ThingType } from '@phase2/outline-core-text';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreText } from './src/outline-core-text';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-text/package.json b/packages/outline-core-text/package.json
new file mode 100644
index 000000000..128523fd5
--- /dev/null
+++ b/packages/outline-core-text/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-text",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-text"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-text/src/config.ts b/packages/outline-core-text/src/config.ts
new file mode 100644
index 000000000..7042492d2
--- /dev/null
+++ b/packages/outline-core-text/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-text` component.
+ */
diff --git a/packages/outline-core-text/src/outline-core-text.css b/packages/outline-core-text/src/outline-core-text.css
new file mode 100644
index 000000000..0949851ad
--- /dev/null
+++ b/packages/outline-core-text/src/outline-core-text.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-text.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-text/src/outline-core-text.ts b/packages/outline-core-text/src/outline-core-text.ts
new file mode 100644
index 000000000..a2bfaf313
--- /dev/null
+++ b/packages/outline-core-text/src/outline-core-text.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-text.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-text';
+
+/**
+ *
+ * The Outline Core Text component
+ *
+ * @element outline-core-text
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-text.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreText extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreText;
+  }
+}
diff --git a/packages/outline-core-text/tsconfig.build.json b/packages/outline-core-text/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-text/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From 22f45ea505604217733dc8ac6499a482133d52d1 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 10:22:20 -0400
Subject: [PATCH 13/17] feat(outline-core-accordion): Stub the
 `outline-core-accordion` component.

---
 .../docs/outline-core-accordion.mdx           | 40 ++++++++++++++++++
 packages/outline-core-accordion/index.ts      | 21 ++++++++++
 packages/outline-core-accordion/package.json  | 42 +++++++++++++++++++
 packages/outline-core-accordion/src/config.ts |  3 ++
 .../src/outline-core-accordion.css            | 33 +++++++++++++++
 .../src/outline-core-accordion.ts             | 41 ++++++++++++++++++
 .../tsconfig.build.json                       |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-accordion/docs/outline-core-accordion.mdx
 create mode 100644 packages/outline-core-accordion/index.ts
 create mode 100644 packages/outline-core-accordion/package.json
 create mode 100644 packages/outline-core-accordion/src/config.ts
 create mode 100644 packages/outline-core-accordion/src/outline-core-accordion.css
 create mode 100644 packages/outline-core-accordion/src/outline-core-accordion.ts
 create mode 100644 packages/outline-core-accordion/tsconfig.build.json

diff --git a/packages/outline-core-accordion/docs/outline-core-accordion.mdx b/packages/outline-core-accordion/docs/outline-core-accordion.mdx
new file mode 100644
index 000000000..1f3e581a9
--- /dev/null
+++ b/packages/outline-core-accordion/docs/outline-core-accordion.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Accordion"
+  component="outline-core-accordion"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-accordion](https://img.shields.io/npm/v/@phase2/outline-core-accordion)](https://www.npmjs.com/package/@phase2/outline-core-accordion)
+
+# `<outline-core-accordion>` `OutlineCoreAccordion`
+
+The `outline-core-accordion` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-accordion`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-accordion/index.ts b/packages/outline-core-accordion/index.ts
new file mode 100644
index 000000000..95f17af03
--- /dev/null
+++ b/packages/outline-core-accordion/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreAccordion component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreAccordion } from '@phase2/outline-core-accordion';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-accordion';
+ * import type { ThingType } from '@phase2/outline-core-accordion';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreAccordion } from './src/outline-core-accordion';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-accordion/package.json b/packages/outline-core-accordion/package.json
new file mode 100644
index 000000000..0d169b4b8
--- /dev/null
+++ b/packages/outline-core-accordion/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-accordion",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-accordion"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-accordion/src/config.ts b/packages/outline-core-accordion/src/config.ts
new file mode 100644
index 000000000..9fbf3f531
--- /dev/null
+++ b/packages/outline-core-accordion/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-accordion` component.
+ */
diff --git a/packages/outline-core-accordion/src/outline-core-accordion.css b/packages/outline-core-accordion/src/outline-core-accordion.css
new file mode 100644
index 000000000..fd67b8a03
--- /dev/null
+++ b/packages/outline-core-accordion/src/outline-core-accordion.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-accordion.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-accordion/src/outline-core-accordion.ts b/packages/outline-core-accordion/src/outline-core-accordion.ts
new file mode 100644
index 000000000..937b33fef
--- /dev/null
+++ b/packages/outline-core-accordion/src/outline-core-accordion.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-accordion.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-accordion';
+
+/**
+ *
+ * The Outline Core Accordion component
+ *
+ * @element outline-core-accordion
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-accordion.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreAccordion extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreAccordion;
+  }
+}
diff --git a/packages/outline-core-accordion/tsconfig.build.json b/packages/outline-core-accordion/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-accordion/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From fc14642d742b3d18e4bbdbdc192edbdc5c1e4178 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 10:44:07 -0400
Subject: [PATCH 14/17] feat(outline-core-youtube): Stub the
 `outline-core-youtube` component.

---
 .../docs/outline-core-youtube.mdx             | 40 ++++++++++++++++++
 packages/outline-core-youtube/index.ts        | 21 ++++++++++
 packages/outline-core-youtube/package.json    | 42 +++++++++++++++++++
 packages/outline-core-youtube/src/config.ts   |  3 ++
 .../src/outline-core-youtube.css              | 33 +++++++++++++++
 .../src/outline-core-youtube.ts               | 41 ++++++++++++++++++
 .../outline-core-youtube/tsconfig.build.json  |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-youtube/docs/outline-core-youtube.mdx
 create mode 100644 packages/outline-core-youtube/index.ts
 create mode 100644 packages/outline-core-youtube/package.json
 create mode 100644 packages/outline-core-youtube/src/config.ts
 create mode 100644 packages/outline-core-youtube/src/outline-core-youtube.css
 create mode 100644 packages/outline-core-youtube/src/outline-core-youtube.ts
 create mode 100644 packages/outline-core-youtube/tsconfig.build.json

diff --git a/packages/outline-core-youtube/docs/outline-core-youtube.mdx b/packages/outline-core-youtube/docs/outline-core-youtube.mdx
new file mode 100644
index 000000000..e33f0034c
--- /dev/null
+++ b/packages/outline-core-youtube/docs/outline-core-youtube.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/YouTube Video"
+  component="outline-core-youtube"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-youtube](https://img.shields.io/npm/v/@phase2/outline-core-youtube)](https://www.npmjs.com/package/@phase2/outline-core-youtube)
+
+# `<outline-core-youtube>` `OutlineCoreYouTube`
+
+The `outline-core-youtube` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-youtube`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-youtube/index.ts b/packages/outline-core-youtube/index.ts
new file mode 100644
index 000000000..abad81974
--- /dev/null
+++ b/packages/outline-core-youtube/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreYouTube component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreYouTube } from '@phase2/outline-core-youtube';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-youtube';
+ * import type { ThingType } from '@phase2/outline-core-youtube';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreYouTube } from './src/outline-core-youtube';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-youtube/package.json b/packages/outline-core-youtube/package.json
new file mode 100644
index 000000000..e3e822073
--- /dev/null
+++ b/packages/outline-core-youtube/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-youtube",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-youtube"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-youtube/src/config.ts b/packages/outline-core-youtube/src/config.ts
new file mode 100644
index 000000000..e417c8cb6
--- /dev/null
+++ b/packages/outline-core-youtube/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-youtube` component.
+ */
diff --git a/packages/outline-core-youtube/src/outline-core-youtube.css b/packages/outline-core-youtube/src/outline-core-youtube.css
new file mode 100644
index 000000000..cee2eb98c
--- /dev/null
+++ b/packages/outline-core-youtube/src/outline-core-youtube.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-youtube.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-youtube/src/outline-core-youtube.ts b/packages/outline-core-youtube/src/outline-core-youtube.ts
new file mode 100644
index 000000000..dfdcab0b1
--- /dev/null
+++ b/packages/outline-core-youtube/src/outline-core-youtube.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-youtube.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-youtube';
+
+/**
+ *
+ * The Outline Core YouTube video component
+ *
+ * @element outline-core-youtube
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-youtube.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreYouTube extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreYouTube;
+  }
+}
diff --git a/packages/outline-core-youtube/tsconfig.build.json b/packages/outline-core-youtube/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-youtube/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From 6abb66824a7504b96a87a841a09fdb164fbcc180 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 11:00:27 -0400
Subject: [PATCH 15/17] feat(outline-core-breadcrumb): Stub the
 `outline-core-breadcrumb` component.

---
 .../docs/outline-core-breadcrumb.mdx          | 40 ++++++++++++++++++
 packages/outline-core-breadcrumb/index.ts     | 21 ++++++++++
 packages/outline-core-breadcrumb/package.json | 42 +++++++++++++++++++
 .../outline-core-breadcrumb/src/config.ts     |  3 ++
 .../src/outline-core-breadcrumb.css           | 33 +++++++++++++++
 .../src/outline-core-breadcrumb.ts            | 41 ++++++++++++++++++
 .../tsconfig.build.json                       |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx
 create mode 100644 packages/outline-core-breadcrumb/index.ts
 create mode 100644 packages/outline-core-breadcrumb/package.json
 create mode 100644 packages/outline-core-breadcrumb/src/config.ts
 create mode 100644 packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css
 create mode 100644 packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts
 create mode 100644 packages/outline-core-breadcrumb/tsconfig.build.json

diff --git a/packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx b/packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx
new file mode 100644
index 000000000..2198df0c6
--- /dev/null
+++ b/packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Breadcrumb"
+  component="outline-core-breadcrumb"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-breadcrumb](https://img.shields.io/npm/v/@phase2/outline-core-breadcrumb)](https://www.npmjs.com/package/@phase2/outline-core-breadcrumb)
+
+# `<outline-core-breadcrumb>` `OutlineCoreBreadcrumb`
+
+The `outline-core-breadcrumb` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-breadcrumb`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-breadcrumb/index.ts b/packages/outline-core-breadcrumb/index.ts
new file mode 100644
index 000000000..387b51f7c
--- /dev/null
+++ b/packages/outline-core-breadcrumb/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreBreadcrumb component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreBreadcrumb } from '@phase2/outline-core-breadcrumb';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-breadcrumb';
+ * import type { ThingType } from '@phase2/outline-core-breadcrumb';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreBreadcrumb } from './src/outline-core-breadcrumb';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-breadcrumb/package.json b/packages/outline-core-breadcrumb/package.json
new file mode 100644
index 000000000..744c519b0
--- /dev/null
+++ b/packages/outline-core-breadcrumb/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-breadcrumb",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-breadcrumb"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-breadcrumb/src/config.ts b/packages/outline-core-breadcrumb/src/config.ts
new file mode 100644
index 000000000..f57af9dff
--- /dev/null
+++ b/packages/outline-core-breadcrumb/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-breadcrumb` component.
+ */
diff --git a/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css
new file mode 100644
index 000000000..ae52be805
--- /dev/null
+++ b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-breadcrumb.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts
new file mode 100644
index 000000000..4ca5ea66b
--- /dev/null
+++ b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-breadcrumb.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-breadcrumb';
+
+/**
+ *
+ * The Outline Core Breadcrumb component
+ *
+ * @element outline-core-breadcrumb
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-breadcrumb.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreBreadcrumb extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreBreadcrumb;
+  }
+}
diff --git a/packages/outline-core-breadcrumb/tsconfig.build.json b/packages/outline-core-breadcrumb/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-breadcrumb/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From aa85cf6276d651bb822b19fcba517c1c2621455e Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 11:03:45 -0400
Subject: [PATCH 16/17] feat(outline-core-modal): Stub the `outline-core-modal`
 component.

---
 .../docs/outline-core-modal.mdx               | 40 ++++++++++++++++++
 packages/outline-core-modal/index.ts          | 21 ++++++++++
 packages/outline-core-modal/package.json      | 42 +++++++++++++++++++
 packages/outline-core-modal/src/config.ts     |  3 ++
 .../src/outline-core-modal.css                | 33 +++++++++++++++
 .../src/outline-core-modal.ts                 | 41 ++++++++++++++++++
 .../outline-core-modal/tsconfig.build.json    |  9 ++++
 7 files changed, 189 insertions(+)
 create mode 100644 packages/outline-core-modal/docs/outline-core-modal.mdx
 create mode 100644 packages/outline-core-modal/index.ts
 create mode 100644 packages/outline-core-modal/package.json
 create mode 100644 packages/outline-core-modal/src/config.ts
 create mode 100644 packages/outline-core-modal/src/outline-core-modal.css
 create mode 100644 packages/outline-core-modal/src/outline-core-modal.ts
 create mode 100644 packages/outline-core-modal/tsconfig.build.json

diff --git a/packages/outline-core-modal/docs/outline-core-modal.mdx b/packages/outline-core-modal/docs/outline-core-modal.mdx
new file mode 100644
index 000000000..e999a0c37
--- /dev/null
+++ b/packages/outline-core-modal/docs/outline-core-modal.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Modal"
+  component="outline-core-modal"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-modal](https://img.shields.io/npm/v/@phase2/outline-core-modal)](https://www.npmjs.com/package/@phase2/outline-core-modal)
+
+# `<outline-core-modal>` `OutlineCoreModal`
+
+The `outline-core-modal` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-modal`** component
+
+
+## Usage
+
+## CSS Variables
+
diff --git a/packages/outline-core-modal/index.ts b/packages/outline-core-modal/index.ts
new file mode 100644
index 000000000..c9bb599cc
--- /dev/null
+++ b/packages/outline-core-modal/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreModal component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreModal } from '@phase2/outline-core-modal';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-modal';
+ * import type { ThingType } from '@phase2/outline-core-modal';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreModal } from './src/outline-core-modal';
+
+// Export any additional sub-components, variables and methods as required.
diff --git a/packages/outline-core-modal/package.json b/packages/outline-core-modal/package.json
new file mode 100644
index 000000000..f7fac5d2e
--- /dev/null
+++ b/packages/outline-core-modal/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-modal",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-modal"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "latest",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-modal/src/config.ts b/packages/outline-core-modal/src/config.ts
new file mode 100644
index 000000000..a3e3287ab
--- /dev/null
+++ b/packages/outline-core-modal/src/config.ts
@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-modal` component.
+ */
diff --git a/packages/outline-core-modal/src/outline-core-modal.css b/packages/outline-core-modal/src/outline-core-modal.css
new file mode 100644
index 000000000..e9f3c9002
--- /dev/null
+++ b/packages/outline-core-modal/src/outline-core-modal.css
@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-modal.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/
diff --git a/packages/outline-core-modal/src/outline-core-modal.ts b/packages/outline-core-modal/src/outline-core-modal.ts
new file mode 100644
index 000000000..352f950f0
--- /dev/null
+++ b/packages/outline-core-modal/src/outline-core-modal.ts
@@ -0,0 +1,41 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-modal.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-modal';
+
+/**
+ *
+ * The Outline Core Image component
+ *
+ * @element outline-core-modal
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-modal.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreModal extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreModal;
+  }
+}
diff --git a/packages/outline-core-modal/tsconfig.build.json b/packages/outline-core-modal/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-modal/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From 31dadde41fe202fa919373447c04a741d1505c02 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Fri, 11 Aug 2023 11:39:12 -0400
Subject: [PATCH 17/17] feat(release): Updating changeset config, and package
 defaults.

---
 .changeset/config.json                            | 15 ++++++++++++++-
 packages/outline-core-accordion/package.json      |  2 +-
 .../src/outline-core-accordion.ts                 |  1 +
 packages/outline-core-alert/package.json          |  2 +-
 .../outline-core-alert/src/outline-core-alert.ts  |  1 +
 packages/outline-core-breadcrumb/package.json     |  2 +-
 .../src/outline-core-breadcrumb.ts                |  1 +
 packages/outline-core-card/package.json           |  2 +-
 .../outline-core-card/src/outline-core-card.ts    |  1 +
 packages/outline-core-container/package.json      |  2 +-
 .../src/outline-core-container.ts                 |  1 +
 packages/outline-core-form/package.json           |  2 +-
 .../outline-core-form/src/outline-core-form.ts    |  1 +
 packages/outline-core-icon/package.json           |  2 +-
 .../outline-core-icon/src/outline-core-icon.ts    |  1 +
 packages/outline-core-image/package.json          |  2 +-
 .../outline-core-image/src/outline-core-image.ts  |  1 +
 packages/outline-core-list/package.json           |  2 +-
 .../outline-core-list/src/outline-core-list.ts    |  1 +
 packages/outline-core-modal/package.json          |  2 +-
 .../outline-core-modal/src/outline-core-modal.ts  |  1 +
 packages/outline-core-text/package.json           |  2 +-
 .../outline-core-text/src/outline-core-text.ts    |  1 +
 packages/outline-core-youtube/package.json        |  2 +-
 .../src/outline-core-youtube.ts                   |  1 +
 packages/outline-templates/default/package.json   |  2 +-
 26 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index 15e3060d4..42b7c627c 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,5 +7,18 @@
   "access": "restricted",
   "baseBranch": "next",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": [
+    "@phase2/outline-core-accordion",
+    "@phase2/outline-core-alert",
+    "@phase2/outline-core-breadcrumb",
+    "@phase2/outline-core-card",
+    "@phase2/outline-core-container",
+    "@phase2/outline-core-form",
+    "@phase2/outline-core-icon",
+    "@phase2/outline-core-image",
+    "@phase2/outline-core-list",
+    "@phase2/outline-core-modal",
+    "@phase2/outline-core-text",
+    "@phase2/outline-core-youtube"
+  ]
 }
diff --git a/packages/outline-core-accordion/package.json b/packages/outline-core-accordion/package.json
index 0d169b4b8..62953a9bb 100644
--- a/packages/outline-core-accordion/package.json
+++ b/packages/outline-core-accordion/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-accordion/src/outline-core-accordion.ts b/packages/outline-core-accordion/src/outline-core-accordion.ts
index 937b33fef..360f02790 100644
--- a/packages/outline-core-accordion/src/outline-core-accordion.ts
+++ b/packages/outline-core-accordion/src/outline-core-accordion.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-accordion';
  * @todo: Update `../docs/outline-core-accordion.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)
diff --git a/packages/outline-core-alert/package.json b/packages/outline-core-alert/package.json
index 3281c8518..562a603b6 100644
--- a/packages/outline-core-alert/package.json
+++ b/packages/outline-core-alert/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-alert/src/outline-core-alert.ts b/packages/outline-core-alert/src/outline-core-alert.ts
index 63d455e47..3fbc3d08e 100644
--- a/packages/outline-core-alert/src/outline-core-alert.ts
+++ b/packages/outline-core-alert/src/outline-core-alert.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-alert';
  * @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)
diff --git a/packages/outline-core-breadcrumb/package.json b/packages/outline-core-breadcrumb/package.json
index 744c519b0..e2321b0e8 100644
--- a/packages/outline-core-breadcrumb/package.json
+++ b/packages/outline-core-breadcrumb/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts
index 4ca5ea66b..52a5fb020 100644
--- a/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts
+++ b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-breadcrumb';
  * @todo: Update `../docs/outline-core-breadcrumb.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)
diff --git a/packages/outline-core-card/package.json b/packages/outline-core-card/package.json
index b73ea5f40..72c69b3b8 100644
--- a/packages/outline-core-card/package.json
+++ b/packages/outline-core-card/package.json
@@ -29,7 +29,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-card/src/outline-core-card.ts b/packages/outline-core-card/src/outline-core-card.ts
index c1d371a47..b7359eef4 100644
--- a/packages/outline-core-card/src/outline-core-card.ts
+++ b/packages/outline-core-card/src/outline-core-card.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-card';
  * @todo: Update `../docs/outline-core-card.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)
diff --git a/packages/outline-core-container/package.json b/packages/outline-core-container/package.json
index cfc5eca7c..0407581c9 100644
--- a/packages/outline-core-container/package.json
+++ b/packages/outline-core-container/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-container/src/outline-core-container.ts b/packages/outline-core-container/src/outline-core-container.ts
index e1d34f000..c252f36d3 100644
--- a/packages/outline-core-container/src/outline-core-container.ts
+++ b/packages/outline-core-container/src/outline-core-container.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-container';
  * @todo: Update `../docs/outline-core-container.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)
diff --git a/packages/outline-core-form/package.json b/packages/outline-core-form/package.json
index e434426e0..59fcc074b 100644
--- a/packages/outline-core-form/package.json
+++ b/packages/outline-core-form/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-form/src/outline-core-form.ts b/packages/outline-core-form/src/outline-core-form.ts
index 1219fa6dd..7045f3c9f 100644
--- a/packages/outline-core-form/src/outline-core-form.ts
+++ b/packages/outline-core-form/src/outline-core-form.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-form';
  * @todo: Update `../docs/outline-core-form.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)
diff --git a/packages/outline-core-icon/package.json b/packages/outline-core-icon/package.json
index 5671912f9..1de8a1c39 100644
--- a/packages/outline-core-icon/package.json
+++ b/packages/outline-core-icon/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-icon/src/outline-core-icon.ts b/packages/outline-core-icon/src/outline-core-icon.ts
index 7d1db5053..7c4a7a3df 100644
--- a/packages/outline-core-icon/src/outline-core-icon.ts
+++ b/packages/outline-core-icon/src/outline-core-icon.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-icon';
  * @todo: Update `../docs/outline-core-icon.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)
diff --git a/packages/outline-core-image/package.json b/packages/outline-core-image/package.json
index aa6d788e6..1a8463613 100644
--- a/packages/outline-core-image/package.json
+++ b/packages/outline-core-image/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-image/src/outline-core-image.ts b/packages/outline-core-image/src/outline-core-image.ts
index 1b86b076e..57827efbf 100644
--- a/packages/outline-core-image/src/outline-core-image.ts
+++ b/packages/outline-core-image/src/outline-core-image.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-image';
  * @todo: Update `../docs/outline-core-image.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)
diff --git a/packages/outline-core-list/package.json b/packages/outline-core-list/package.json
index 0d89be766..5deff64c7 100644
--- a/packages/outline-core-list/package.json
+++ b/packages/outline-core-list/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-list/src/outline-core-list.ts b/packages/outline-core-list/src/outline-core-list.ts
index 3a075eeda..35897efc9 100644
--- a/packages/outline-core-list/src/outline-core-list.ts
+++ b/packages/outline-core-list/src/outline-core-list.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-list';
  * @todo: Update `../docs/outline-core-list.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)
diff --git a/packages/outline-core-modal/package.json b/packages/outline-core-modal/package.json
index f7fac5d2e..2a9d719bd 100644
--- a/packages/outline-core-modal/package.json
+++ b/packages/outline-core-modal/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-modal/src/outline-core-modal.ts b/packages/outline-core-modal/src/outline-core-modal.ts
index 352f950f0..86c135e30 100644
--- a/packages/outline-core-modal/src/outline-core-modal.ts
+++ b/packages/outline-core-modal/src/outline-core-modal.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-modal';
  * @todo: Update `../docs/outline-core-modal.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)
diff --git a/packages/outline-core-text/package.json b/packages/outline-core-text/package.json
index 128523fd5..ff8ccaa04 100644
--- a/packages/outline-core-text/package.json
+++ b/packages/outline-core-text/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-text/src/outline-core-text.ts b/packages/outline-core-text/src/outline-core-text.ts
index a2bfaf313..90d5719cc 100644
--- a/packages/outline-core-text/src/outline-core-text.ts
+++ b/packages/outline-core-text/src/outline-core-text.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-text';
  * @todo: Update `../docs/outline-core-text.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)
diff --git a/packages/outline-core-youtube/package.json b/packages/outline-core-youtube/package.json
index e3e822073..5172a8805 100644
--- a/packages/outline-core-youtube/package.json
+++ b/packages/outline-core-youtube/package.json
@@ -30,7 +30,7 @@
     "package": "yarn publish"
   },
   "dependencies": {
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "lit": "^2.3.1"
   },
   "publishConfig": {
diff --git a/packages/outline-core-youtube/src/outline-core-youtube.ts b/packages/outline-core-youtube/src/outline-core-youtube.ts
index dfdcab0b1..231e3339e 100644
--- a/packages/outline-core-youtube/src/outline-core-youtube.ts
+++ b/packages/outline-core-youtube/src/outline-core-youtube.ts
@@ -21,6 +21,7 @@ const componentName = 'outline-core-youtube';
  * @todo: Update `../docs/outline-core-youtube.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)
diff --git a/packages/outline-templates/default/package.json b/packages/outline-templates/default/package.json
index 67af8d81f..fbba01d03 100644
--- a/packages/outline-templates/default/package.json
+++ b/packages/outline-templates/default/package.json
@@ -89,7 +89,7 @@
     "@phase2/outline-code-block": "latest",
     "@phase2/outline-config": "latest",
     "@phase2/outline-container": "latest",
-    "@phase2/outline-core": "latest",
+    "@phase2/outline-core": "^0.2.3",
     "@phase2/outline-core-link": "latest",
     "@phase2/outline-docs": "latest",
     "@phase2/outline-dropdown": "latest",