diff --git a/.gitignore b/.gitignore
index f0128fbe..0fa21c0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -139,4 +139,7 @@ _site
 .pnp.*
 
 # .public folder holds all static builds of /packages for github pages artifact
-.public
\ No newline at end of file
+.public
+
+# Personal config files
+chromatic.config.json
diff --git a/package.json b/package.json
index 51bbba50..1200c034 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "stencil-build": "npm run build -w packages/web-components",
     "stencil-start": "npm run start -w packages/web-components",
     "stencil-sb": "npm run storybook -w packages/web-components",
+    "stencil-build-sb": "npm run build-pages -w packages/web-components",
     "stencil-generate": "npm run generate -w packages/web-components",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build-pages": "npm run vanilla-build && npm run build-pages -w packages/vanilla && npm run stencil-build && npm run build-pages -w packages/web-components",
@@ -25,14 +26,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/US-CBP/design-system.git"
+    "url": "git+https://github.com/US-CBP/design-system.git"
   },
   "keywords": [
     "CBP",
     "CBP Design System",
     "CBP Theme"
   ],
-  "author": "Creative Services <CreativeServices@cbp.dhs.gov>",
+  "author": {
+    "name": "Creative Services",
+    "email": "CreativeServices@cbp.dhs.gov"
+  },
   "license": "CC0-1.0",
   "bugs": {
     "url": "https://github.com/US-CBP/design-system/issues"
diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.storybook/main.js
index 74bea5ee..cba7bbfb 100644
--- a/packages/web-components/.storybook/main.js
+++ b/packages/web-components/.storybook/main.js
@@ -10,17 +10,19 @@ function getAbsolutePath(value) {
 
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.mdx',
+    //'../src**/*.md',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    //getAbsolutePath('@storybook/addon-essentials'), 
     {
       name: getAbsolutePath('@storybook/addon-essentials'),
       options: {
         actions: false,
       },
     },
-    //getAbsolutePath('@chromatic-com/storybook'),
     {
       name: '@whitespace/storybook-addon-html', 
       title: 'Code',
@@ -29,6 +31,7 @@ const config = {
     //getAbsolutePath('@storybook/addon-interactions'), 
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath("@storybook/addon-mdx-gfm"),
+    //getAbsolutePath('@chromatic-com/storybook'),
     '@chromatic-com/storybook'
   ],
   framework: {
@@ -44,4 +47,4 @@ const config = {
     disableTelemetry: true
   },
 };
-export default config;
+export default config;
\ No newline at end of file
diff --git a/packages/web-components/.storybook/preview.js b/packages/web-components/.storybook/preview.js
index f42206ba..07398cf4 100644
--- a/packages/web-components/.storybook/preview.js
+++ b/packages/web-components/.storybook/preview.js
@@ -67,7 +67,7 @@ const preview = {
     },
     options: {
       storySort: {
-        //method: 'alphabetical',
+        method: 'alphabetical',
         order: [
           'Introduction',
           'Design Tokens',
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index 5b29e54d..bdd16e31 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -1,6 +1,6 @@
 # CHANGELOG
 
-This CHANGELOG.md tracks the updates to the web components package of the CBP design system, which is currently in active development/pre-release alpha state. As such, not all changes will be logged; only new components and breaking changes. As a pre-release, there WILL be breaking changes. Upon official release, this log may be wiped clean and started fresh.
+This CHANGELOG.md tracks the updates to the web components package of the CBP design system, which is currently in active development/pre-release alpha state. As such, not all changes will be logged; only new components and breaking changes. As a pre-release, there WILL be breaking changes. Upon official release, this log may be wiped clean and started fresh and [semantic versioning](https://semver.org/) will be followed.
 
 The React components are wrappers generated from this package and will share the same changes.
 
@@ -88,7 +88,7 @@ The React components are wrappers generated from this package and will share the
 
 * Set the Stencil config setting `enableImportInjection: true` to support projects using Vite as a bundler and allow lazy loading of components.
 * Breaking: Deprecated/removed `cbp-visuallyhidden` since its functionality was included in cbp-hide.
-* First cut of cbp-hide, a component that allows content to be programatically hidden (or visually hidden) based on property or media query.
+* First cut of `cbp-hide`, a component that allows content to be programmatically hidden (or visually hidden) based on property or media query.
 * Updated designs of `cbp-badge`, `cbp-chip`, and `cbp-tag` to use the correct design tokens.
 * Updated the cbp-chip component by adding `name` and `value` properties and updating the custom event.
 * Updated Template and Universal Header stories to use `cbp-hide` for responsiveness.
@@ -96,11 +96,12 @@ The React components are wrappers generated from this package and will share the
 
 ## [0.0.1-develop.5] 02-29-2024
 
-* First cut of tabs with responsive behavior: cbp-tabs, cbp-tab, cbp-tab-panel.
-* Updates to cbp-button to support responsive tabs controls.
-* Fixed cbp-drawer close control.
+* First cut of tabs with responsive behavior: `cbp-tabs`, `cbp-tab`, `cbp-tab-panel`.
+* Updates to `cbp-button` to support responsive tabs controls.
+* Fixed `cbp-drawer` close control.
 * Upgraded Stencil to v4.12.3 and enabled new `slot` fixes.
 
 ## [0.0.1-develop.4] 01-08-2024
 
+* Created CHANGELOG.md to start tracking changes during beta for pilot projects.
 * Added cbp-drawer backdrop.
\ No newline at end of file
diff --git a/packages/web-components/config-file.schema.json b/packages/web-components/config-file.schema.json
new file mode 100644
index 00000000..7288f471
--- /dev/null
+++ b/packages/web-components/config-file.schema.json
@@ -0,0 +1,186 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://www.chromatic.com/config-file.schema.json",
+  "additionalProperties": false,
+  "$defs": {
+    "string-or-boolean": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "boolean"
+        }
+      ]
+    },
+    "array-of-strings": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "description": "Configuration schema for visual testing tool Chromatic",
+  "title": "Chromatic Config File Schema",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "The schema file (https://www.chromatic.com/docs/chromatic-config.schema.json)"
+    },
+    "autoAcceptChanges": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "If there are any changes to the build, automatically accept them. Only for given branch, if specified.",
+      "markdownDescription": "If there are any changes to the build, automatically accept them. Only for given branch, if specified.\n"
+    },
+    "buildCommand": {
+      "type": "string",
+      "description": "The command that builds your Storybook. Use this if your Storybook build command does not exist in the \"scripts\" field of your package.json.Requires --output-dir.",
+      "markdownDescription": "The command that builds your Storybook. Use this if your Storybook build command does not exist in the \"scripts\" field of your package.json.<br/>Requires `--output-dir`.\n"
+    },
+    "buildScriptName": {
+      "type": "string",
+      "description": "The npm script that builds your Storybook. Use this if your Storybook build script is named differently.",
+      "markdownDescription": "The npm script that builds your Storybook. Use this if your Storybook build script is named differently.\n",
+      "default": "build-storybook"
+    },
+    "debug": {
+      "type": "boolean",
+      "description": "Output verbose debugging information. This option implies interactive: false",
+      "markdownDescription": "Output verbose debugging information. This option implies `interactive: false`\n"
+    },
+    "diagnosticsFile": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "When enabled, write process context information to a JSON file.Defaults to chromatic-diagnostics.json",
+      "markdownDescription": "When enabled, write process context information to a JSON file.<br/>Defaults to `chromatic-diagnostics.json`\n"
+    },
+    "exitOnceUploaded": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "Exit with status 0 (OK) once the built version has been published to Chromatic. Only for given branch, if specified.",
+      "markdownDescription": "Exit with status `0` (OK) once the built version has been published to Chromatic. Only for given branch, if specified.\n"
+    },
+    "exitZeroOnChanges": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "If all snapshots render, but there are visual changes, exit with code 0 rather than the usual exit code 1. Only for given branch, if specified.",
+      "markdownDescription": "If all snapshots render, but there are visual changes, exit with code `0` rather than the usual exit code `1`. Only for given branch, if specified.\n"
+    },
+    "externals": {
+      "$ref": "#/$defs/array-of-strings",
+      "description": "Disable TurboSnap when any of these files have changed since the baseline build.Requires onlyChanged.",
+      "markdownDescription": "Disable [TurboSnap](https://www.chromatic.com/docs/turbosnap) when any of these files have changed since the baseline build.<br/>Requires `onlyChanged`.\n"
+    },
+    "ignoreLastBuildOnBranch": {
+      "type": "string",
+      "description": "Do not use the last build on this branch as a baseline if it is no longer in history (i.e., the branch was rebased).",
+      "markdownDescription": "Do not use the last build on this branch as a baseline if it is no longer in history (i.e., the branch was rebased).\n"
+    },
+    "junitReport": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "When enabled, write the build results to a JUnit XML file.Defaults to chromatic-build-{buildNumber}.xml where the {buildNumber} will be replaced with the actual build number.",
+      "markdownDescription": "When enabled, write the build results to a JUnit XML file.<br/>Defaults to `chromatic-build-{buildNumber}.xml` where the `{buildNumber}` will be replaced with the actual build number.\n"
+    },
+    "logFile": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "Write CLI logs to a file. Defaults to chromatic.log",
+      "markdownDescription": "Write CLI logs to a file. Defaults to `chromatic.log`\n"
+    },
+    "fileHashing": {
+      "type": "boolean",
+      "description": "Enabling this option will turn off the built-in file hashing mechanism, leading to all the files being uploaded to Chromatic on every build.",
+      "markdownDescription": "Enabling this option will turn off the built-in file hashing mechanism, leading to all the files being uploaded to Chromatic on every build.\n"
+    },
+    "onlyChanged": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "Enables TurboSnap.Runs Chromatic for stories affected by files and dependencies that have changed since the baseline build, including the specified branch if provided.",
+      "markdownDescription": "Enables [TurboSnap](https://www.chromatic.com/docs/turbosnap).<br/>Runs Chromatic for stories affected by files and dependencies that have changed since the baseline build, including the specified branch if provided.\n"
+    },
+    "onlyStoryFiles": {
+      "$ref": "#/$defs/array-of-strings",
+      "description": "Only run a single story or a subset of stories by their filename(s). Specify the full path to the story file relative to the root of your Storybook project.",
+      "markdownDescription": "Only run a single story or a subset of stories by their filename(s). Specify the full path to the story file relative to the root of your Storybook project.\n"
+    },
+    "onlyStoryNames": {
+      "$ref": "#/$defs/array-of-strings",
+      "description": "Only run a single story or a subset of stories by their name.",
+      "markdownDescription": "Only run a single story or a subset of stories by their name.\n"
+    },
+    "outputDir": {
+      "type": "string",
+      "description": "Relative path to target directory for building your Storybook. Use this if you want to preserve it for other tasks.",
+      "markdownDescription": "Relative path to target directory for building your Storybook. Use this if you want to preserve it for other tasks.\n"
+    },
+    "projectId": {
+      "type": "string",
+      "description": "The unique identifier for your project, sometimes referred to as appId.",
+      "markdownDescription": "The unique identifier for your project, sometimes referred to as `appId`.\n"
+    },
+    "projectToken": {
+      "type": "string",
+      "deprecated": true,
+      "description": "DEPRECATED The secret token for your project. Prefer to use CHROMATIC_PROJECT_TOKEN instead if you can.",
+      "markdownDescription": "DEPRECATED The secret token for your project. Prefer to use `CHROMATIC_PROJECT_TOKEN` instead if you can.\n"
+    },
+    "skip": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "Skip Chromatic tests, but mark the commit as passing. It avoids blocking PRs due to required merge checks. Only for given branch, if specified.",
+      "markdownDescription": "Skip Chromatic tests, but mark the commit as passing. It avoids blocking PRs due to required merge checks. Only for given branch, if specified.\n"
+    },
+    "skipUpdateCheck": {
+      "type": "boolean",
+      "description": "Skips Chromatic CLI update check.",
+      "markdownDescription": "Skips Chromatic CLI update check.\n"
+    },
+    "storybookBaseDir": {
+      "type": "string",
+      "description": "Relative path from repository root to Storybook project root.Use with onlyChanged and storybookBuildDir when your Storybook is located in a subdirectory of your repository.",
+      "markdownDescription": "Relative path from repository root to Storybook project root.<br/>Use with `onlyChanged` and `storybookBuildDir` when your Storybook is located in a subdirectory of your repository.\n"
+    },
+    "storybookBuildDir": {
+      "type": "string",
+      "description": "If you have already built your Storybook, provide the path to the static build directory.",
+      "markdownDescription": "If you have already built your Storybook, provide the path to the static build directory.\n"
+    },
+    "storybookConfigDir": {
+      "type": "string",
+      "description": "Relative path from where you run Chromatic to your Storybook config directory.Use with onlyChanged and storybookBuildDir when using a custom --config-dir flag for Storybook.",
+      "markdownDescription": "Relative path from where you run Chromatic to your Storybook config directory.<br/>Use with `onlyChanged` and `storybookBuildDir` when using a custom [`--config-dir`](https://storybook.js.org/docs/api/cli-options#build) flag for Storybook.\n",
+      "default": ".storybook"
+    },
+    "storybookLogFile": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "Write Storybook build logs to a custom file path.",
+      "markdownDescription": "Write Storybook build logs to a custom file path.\n",
+      "default": "build-storybook.log"
+    },
+    "traceChanged": {
+      "$ref": "#/$defs/string-or-boolean",
+      "description": "Print dependency trace for changed files to affected story files. Set to \"expanded\" to list individual modules.Requires onlyChanged.",
+      "markdownDescription": "Print dependency trace for changed files to affected story files. Set to \"expanded\" to list individual modules.<br/>Requires `onlyChanged`.\n"
+    },
+    "untraced": {
+      "$ref": "#/$defs/array-of-strings",
+      "description": "Disregard these files and their dependencies when tracing dependent stories for TurboSnap.Requires onlyChanged.",
+      "markdownDescription": "Disregard these files and their dependencies when tracing dependent stories for [TurboSnap](https://www.chromatic.com/docs/turbosnap).<br/>Requires `onlyChanged`.\n"
+    },
+    "uploadMetadata": {
+      "type": "boolean",
+      "description": "Upload Chromatic metadata files as part of the published Storybook. This option implies diagnosticsFile: true and logFile: true",
+      "markdownDescription": "Upload Chromatic metadata files as part of the published Storybook. This option implies `diagnosticsFile: true` and `logFile: true`\n"
+    },
+    "zip": {
+      "type": "boolean",
+      "description": "Publish your Storybook to Chromatic as a single zip file instead of individual content files.",
+      "markdownDescription": "Publish your Storybook to Chromatic as a single zip file instead of individual content files.\n"
+    },
+    "playwright": {
+      "type": "boolean",
+      "description": "Use your Playwright tests to power visual tests with Chromatic. Learn more",
+      "markdownDescription": "Use your Playwright tests to power visual tests with Chromatic. [Learn more](https://www.chromatic.com/docs/playwright)\n"
+    },
+    "cypress": {
+      "type": "boolean",
+      "description": "Use your Cypress tests to power visual tests with Chromatic. Learn more",
+      "markdownDescription": "Use your Cypress tests to power visual tests with Chromatic. [Learn more](https://www.chromatic.com/docs/cypress)\n"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 41338597..23aded67 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -34,7 +34,7 @@
     "generate": "stencil generate",
     "storybook": "stencil build --docs && storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-pages": "storybook build --output-dir storybook-static"
+    "build-pages": "stencil build --docs && storybook build --output-dir storybook-static"
   },
   "dependencies": {
     "@stencil/core": "4.15.0",
diff --git a/packages/web-components/src/components/cbp-accordion/api-docs.mdx b/packages/web-components/src/components/cbp-accordion/api-docs.mdx
new file mode 100644
index 00000000..1f272fde
--- /dev/null
+++ b/packages/web-components/src/components/cbp-accordion/api-docs.mdx
@@ -0,0 +1,9 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import AccordionDocs from './readme.md?raw';
+import AccordionItemDocs from '../cbp-accordion-item/readme.md?raw';
+
+<Meta title="Components/Accordion/API Docs" />
+
+<Markdown>{AccordionDocs}</Markdown>  
+  
+<Markdown>{AccordionItemDocs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-accordion/cbp-accordion.stories.tsx b/packages/web-components/src/components/cbp-accordion/cbp-accordion.stories.tsx
index ed515798..763a763a 100644
--- a/packages/web-components/src/components/cbp-accordion/cbp-accordion.stories.tsx
+++ b/packages/web-components/src/components/cbp-accordion/cbp-accordion.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Accordion',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     items: {
       name: 'Accordion Items',
diff --git a/packages/web-components/src/components/cbp-action-bar/api-docs.mdx b/packages/web-components/src/components/cbp-action-bar/api-docs.mdx
new file mode 100644
index 00000000..ca20cc35
--- /dev/null
+++ b/packages/web-components/src/components/cbp-action-bar/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Action Bar/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-action-bar/cbp-action-bar.stories.tsx b/packages/web-components/src/components/cbp-action-bar/cbp-action-bar.stories.tsx
index b010a5c8..6ade4791 100644
--- a/packages/web-components/src/components/cbp-action-bar/cbp-action-bar.stories.tsx
+++ b/packages/web-components/src/components/cbp-action-bar/cbp-action-bar.stories.tsx
@@ -1,6 +1,6 @@
 export default {
     title: 'Components/Action Bar',
-    tags: ['autodocs'],
+    //tags: ['autodocs'],
     argTypes: {
     
       variant: {
diff --git a/packages/web-components/src/components/cbp-app-header/api-docs.mdx b/packages/web-components/src/components/cbp-app-header/api-docs.mdx
new file mode 100644
index 00000000..83aea124
--- /dev/null
+++ b/packages/web-components/src/components/cbp-app-header/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Application Header/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-app-header/cbp-app-header.stories.tsx b/packages/web-components/src/components/cbp-app-header/cbp-app-header.stories.tsx
index 35a40fa6..f50a1054 100644
--- a/packages/web-components/src/components/cbp-app-header/cbp-app-header.stories.tsx
+++ b/packages/web-components/src/components/cbp-app-header/cbp-app-header.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Application Header',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/web-components/src/components/cbp-app/api-docs.mdx b/packages/web-components/src/components/cbp-app/api-docs.mdx
new file mode 100644
index 00000000..cb8f179e
--- /dev/null
+++ b/packages/web-components/src/components/cbp-app/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/App/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-badge/api-docs.mdx b/packages/web-components/src/components/cbp-badge/api-docs.mdx
new file mode 100644
index 00000000..1c5cfec4
--- /dev/null
+++ b/packages/web-components/src/components/cbp-badge/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Badge/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-badge/cbp-badge.stories.tsx b/packages/web-components/src/components/cbp-badge/cbp-badge.stories.tsx
index d6f3b0d5..e44a0c4f 100644
--- a/packages/web-components/src/components/cbp-badge/cbp-badge.stories.tsx
+++ b/packages/web-components/src/components/cbp-badge/cbp-badge.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Badge',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-banner/api-docs.mdx b/packages/web-components/src/components/cbp-banner/api-docs.mdx
new file mode 100644
index 00000000..75104acb
--- /dev/null
+++ b/packages/web-components/src/components/cbp-banner/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Banner/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-banner/cbp-banner.stories.tsx b/packages/web-components/src/components/cbp-banner/cbp-banner.stories.tsx
index f2e348fe..66273c2c 100644
--- a/packages/web-components/src/components/cbp-banner/cbp-banner.stories.tsx
+++ b/packages/web-components/src/components/cbp-banner/cbp-banner.stories.tsx
@@ -1,6 +1,6 @@
 export default {
     title: 'Components/Banner',
-    tags: ['autodocs'],
+    //tags: ['autodocs'],
     argTypes: {
         bannerTitle: {
           name: 'Banner title',
diff --git a/packages/web-components/src/components/cbp-button/api-docs.mdx b/packages/web-components/src/components/cbp-button/api-docs.mdx
new file mode 100644
index 00000000..a68dd5e7
--- /dev/null
+++ b/packages/web-components/src/components/cbp-button/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Button/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-button/cbp-button.stories.tsx b/packages/web-components/src/components/cbp-button/cbp-button.stories.tsx
index 7695c653..e4cfd3ff 100644
--- a/packages/web-components/src/components/cbp-button/cbp-button.stories.tsx
+++ b/packages/web-components/src/components/cbp-button/cbp-button.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Button',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-card/api-docs.mdx b/packages/web-components/src/components/cbp-card/api-docs.mdx
new file mode 100644
index 00000000..0baff63a
--- /dev/null
+++ b/packages/web-components/src/components/cbp-card/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Card/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
index 13916a8f..3abca41e 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
+++ b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Card',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     title: {
       name: 'Title (slotted)',
diff --git a/packages/web-components/src/components/cbp-checkbox/api-docs.mdx b/packages/web-components/src/components/cbp-checkbox/api-docs.mdx
new file mode 100644
index 00000000..f36814a6
--- /dev/null
+++ b/packages/web-components/src/components/cbp-checkbox/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Checkbox/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx b/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx
index abe1d2d8..163094ca 100644
--- a/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx
+++ b/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Checkbox',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-chip/api-docs.mdx b/packages/web-components/src/components/cbp-chip/api-docs.mdx
new file mode 100644
index 00000000..96c556fc
--- /dev/null
+++ b/packages/web-components/src/components/cbp-chip/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Chip/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx b/packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx
index 3877668f..d82e10da 100644
--- a/packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx
+++ b/packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Chip',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-container/api-docs.mdx b/packages/web-components/src/components/cbp-container/api-docs.mdx
new file mode 100644
index 00000000..39883278
--- /dev/null
+++ b/packages/web-components/src/components/cbp-container/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Container/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-container/cbp-container.stories.tsx b/packages/web-components/src/components/cbp-container/cbp-container.stories.tsx
index 7dbdaca6..aafdf9ea 100644
--- a/packages/web-components/src/components/cbp-container/cbp-container.stories.tsx
+++ b/packages/web-components/src/components/cbp-container/cbp-container.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Container',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     content: {
       name: 'Content (slotted)',
diff --git a/packages/web-components/src/components/cbp-dialog/api-docs.mdx b/packages/web-components/src/components/cbp-dialog/api-docs.mdx
new file mode 100644
index 00000000..31888a64
--- /dev/null
+++ b/packages/web-components/src/components/cbp-dialog/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Dialog/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx b/packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx
index cb7d970f..a29d9af7 100644
--- a/packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx
+++ b/packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Dialog',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     uid: {
       description: 'A unique `id` applied to the dialog and referenced by the control.',
diff --git a/packages/web-components/src/components/cbp-drawer/api-docs.mdx b/packages/web-components/src/components/cbp-drawer/api-docs.mdx
new file mode 100644
index 00000000..8362ee3d
--- /dev/null
+++ b/packages/web-components/src/components/cbp-drawer/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Drawer/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx b/packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx
index fe982834..e89510df 100644
--- a/packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx
+++ b/packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Drawer',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     position: {
       description: 'The positioning of the drawer relative to the viewport.',
diff --git a/packages/web-components/src/components/cbp-dropdown/api-docs.mdx b/packages/web-components/src/components/cbp-dropdown/api-docs.mdx
new file mode 100644
index 00000000..638c0fb5
--- /dev/null
+++ b/packages/web-components/src/components/cbp-dropdown/api-docs.mdx
@@ -0,0 +1,9 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import DropdownDocs from './readme.md?raw';
+import DropdownItemDocs from '../cbp-dropdown-item/readme.md?raw';
+
+<Meta title="Components/Dropdown/API Docs" />
+
+<Markdown>{DropdownDocs}</Markdown>  
+  
+<Markdown>{DropdownItemDocs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-dropdown/cbp-dropdown.stories.tsx b/packages/web-components/src/components/cbp-dropdown/cbp-dropdown.stories.tsx
index e854c9cb..b0f2446d 100644
--- a/packages/web-components/src/components/cbp-dropdown/cbp-dropdown.stories.tsx
+++ b/packages/web-components/src/components/cbp-dropdown/cbp-dropdown.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Dropdown',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
diff --git a/packages/web-components/src/components/cbp-expand/api-docs.mdx b/packages/web-components/src/components/cbp-expand/api-docs.mdx
new file mode 100644
index 00000000..9641a01b
--- /dev/null
+++ b/packages/web-components/src/components/cbp-expand/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Expand/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-expand/cbp-expand.stories.tsx b/packages/web-components/src/components/cbp-expand/cbp-expand.stories.tsx
index aa9e4e5c..ef67d2cc 100644
--- a/packages/web-components/src/components/cbp-expand/cbp-expand.stories.tsx
+++ b/packages/web-components/src/components/cbp-expand/cbp-expand.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Expand',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       description: 'Label text making up the heading control for the Expand component.',
diff --git a/packages/web-components/src/components/cbp-flex/api-docs.mdx b/packages/web-components/src/components/cbp-flex/api-docs.mdx
new file mode 100644
index 00000000..6b4cd2d5
--- /dev/null
+++ b/packages/web-components/src/components/cbp-flex/api-docs.mdx
@@ -0,0 +1,9 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import FlexDocs from './readme.md?raw';
+import FlexItemDocs from '../cbp-flex-item/readme.md?raw';
+
+<Meta title="Components/Flex/API Docs" />
+
+<Markdown>{FlexDocs}</Markdown>  
+  
+<Markdown>{FlexItemDocs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-flex/cbp-flex.stories.tsx b/packages/web-components/src/components/cbp-flex/cbp-flex.stories.tsx
index 508471c5..96085d68 100644
--- a/packages/web-components/src/components/cbp-flex/cbp-flex.stories.tsx
+++ b/packages/web-components/src/components/cbp-flex/cbp-flex.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Flex',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     display: {
       control: 'select',
diff --git a/packages/web-components/src/components/cbp-footer/api-docs.mdx b/packages/web-components/src/components/cbp-footer/api-docs.mdx
new file mode 100644
index 00000000..61afc072
--- /dev/null
+++ b/packages/web-components/src/components/cbp-footer/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Footer/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-footer/cbp-footer.stories.tsx b/packages/web-components/src/components/cbp-footer/cbp-footer.stories.tsx
index 4ded8a3b..3c013102 100644
--- a/packages/web-components/src/components/cbp-footer/cbp-footer.stories.tsx
+++ b/packages/web-components/src/components/cbp-footer/cbp-footer.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Footer',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/web-components/src/components/cbp-form-field-wrapper/api-docs.mdx b/packages/web-components/src/components/cbp-form-field-wrapper/api-docs.mdx
new file mode 100644
index 00000000..270f73f3
--- /dev/null
+++ b/packages/web-components/src/components/cbp-form-field-wrapper/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Form Field Wrapper/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.stories.tsx b/packages/web-components/src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.stories.tsx
index 46897022..05169034 100644
--- a/packages/web-components/src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.stories.tsx
+++ b/packages/web-components/src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Form Field Wrapper',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
diff --git a/packages/web-components/src/components/cbp-form-field/api-docs.mdx b/packages/web-components/src/components/cbp-form-field/api-docs.mdx
new file mode 100644
index 00000000..69f5642d
--- /dev/null
+++ b/packages/web-components/src/components/cbp-form-field/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Form Field/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx b/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx
index e3f78028..aeb9a542 100644
--- a/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx
+++ b/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Form Fields',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
diff --git a/packages/web-components/src/components/cbp-grid/api-docs.mdx b/packages/web-components/src/components/cbp-grid/api-docs.mdx
new file mode 100644
index 00000000..5632c2b5
--- /dev/null
+++ b/packages/web-components/src/components/cbp-grid/api-docs.mdx
@@ -0,0 +1,9 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import GridDocs from './readme.md?raw';
+import GridItemDocs from '../cbp-grid-item/readme.md?raw';
+
+<Meta title="Components/Grid/API Docs" />
+
+<Markdown>{GridDocs}</Markdown>  
+  
+<Markdown>{GridItemDocs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-grid/cbp-grid.stories.tsx b/packages/web-components/src/components/cbp-grid/cbp-grid.stories.tsx
index e85543a6..bc05b483 100644
--- a/packages/web-components/src/components/cbp-grid/cbp-grid.stories.tsx
+++ b/packages/web-components/src/components/cbp-grid/cbp-grid.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Grid',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     display: {
       control: 'select',
diff --git a/packages/web-components/src/components/cbp-hide/api-docs.mdx b/packages/web-components/src/components/cbp-hide/api-docs.mdx
new file mode 100644
index 00000000..276b1e9b
--- /dev/null
+++ b/packages/web-components/src/components/cbp-hide/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Hide/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-hide/cbp-hide.stories.tsx b/packages/web-components/src/components/cbp-hide/cbp-hide.stories.tsx
index 0a9e5421..96c96a4d 100644
--- a/packages/web-components/src/components/cbp-hide/cbp-hide.stories.tsx
+++ b/packages/web-components/src/components/cbp-hide/cbp-hide.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Hide',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     content: {
       name: 'Content (slotted)',
diff --git a/packages/web-components/src/components/cbp-icon/api-docs.mdx b/packages/web-components/src/components/cbp-icon/api-docs.mdx
new file mode 100644
index 00000000..8f218942
--- /dev/null
+++ b/packages/web-components/src/components/cbp-icon/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Icon/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
index 77de8814..51ae5efc 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
@@ -1,7 +1,7 @@
 export default {
   title: 'Components/Icon',
   // TechDebt: autodocs not working here for some reason - throwing Vite error
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     name: {
       description: 'Named icons that are built-in to the component.',
diff --git a/packages/web-components/src/components/cbp-link/api-docs.mdx b/packages/web-components/src/components/cbp-link/api-docs.mdx
new file mode 100644
index 00000000..698178ae
--- /dev/null
+++ b/packages/web-components/src/components/cbp-link/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Link/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-link/cbp-link.stories.tsx b/packages/web-components/src/components/cbp-link/cbp-link.stories.tsx
index a3010829..f7f87017 100644
--- a/packages/web-components/src/components/cbp-link/cbp-link.stories.tsx
+++ b/packages/web-components/src/components/cbp-link/cbp-link.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Link',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-list/api-docs.mdx b/packages/web-components/src/components/cbp-list/api-docs.mdx
new file mode 100644
index 00000000..31ca1a4c
--- /dev/null
+++ b/packages/web-components/src/components/cbp-list/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/List/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-list/cbp-list.stories.tsx b/packages/web-components/src/components/cbp-list/cbp-list.stories.tsx
index 00f67019..eafced6b 100644
--- a/packages/web-components/src/components/cbp-list/cbp-list.stories.tsx
+++ b/packages/web-components/src/components/cbp-list/cbp-list.stories.tsx
@@ -1,6 +1,6 @@
 export default {
     title: 'Components/List',
-    tags: ['autodocs'],
+    //tags: ['autodocs'],
     argTypes: {
         // tag: {
         //   control: 'select',
diff --git a/packages/web-components/src/components/cbp-notice/api-docs.mdx b/packages/web-components/src/components/cbp-notice/api-docs.mdx
new file mode 100644
index 00000000..3c19871d
--- /dev/null
+++ b/packages/web-components/src/components/cbp-notice/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Notice/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-notice/cbp-notice.stories.tsx b/packages/web-components/src/components/cbp-notice/cbp-notice.stories.tsx
index 24423f99..f6ef36f5 100644
--- a/packages/web-components/src/components/cbp-notice/cbp-notice.stories.tsx
+++ b/packages/web-components/src/components/cbp-notice/cbp-notice.stories.tsx
@@ -1,6 +1,6 @@
 export default {
     title: 'Components/Notice',
-    tags: ['autodocs'],
+    //tags: ['autodocs'],
     argTypes: {
       title: {
         name: 'Title (slotted)',
diff --git a/packages/web-components/src/components/cbp-pagination/api-docs.mdx b/packages/web-components/src/components/cbp-pagination/api-docs.mdx
new file mode 100644
index 00000000..1a3cd295
--- /dev/null
+++ b/packages/web-components/src/components/cbp-pagination/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Pagination/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-pagination/cbp-pagination.stories.tsx b/packages/web-components/src/components/cbp-pagination/cbp-pagination.stories.tsx
index 43420ad8..7e1d76b6 100644
--- a/packages/web-components/src/components/cbp-pagination/cbp-pagination.stories.tsx
+++ b/packages/web-components/src/components/cbp-pagination/cbp-pagination.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Pagination',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     records: {
       description: 'Specifies the total number of records.',
diff --git a/packages/web-components/src/components/cbp-panel/api-docs.mdx b/packages/web-components/src/components/cbp-panel/api-docs.mdx
new file mode 100644
index 00000000..ea3455f1
--- /dev/null
+++ b/packages/web-components/src/components/cbp-panel/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Panel/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
index 98583d0b..04e6f332 100644
--- a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
+++ b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Panel',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     headingLevel: {
       description: 'The heading level used as the panel header (e.g., `h2`-`h6`) as appropriate for the document structure.',
diff --git a/packages/web-components/src/components/cbp-radio/api-docs.mdx b/packages/web-components/src/components/cbp-radio/api-docs.mdx
new file mode 100644
index 00000000..63b2bcff
--- /dev/null
+++ b/packages/web-components/src/components/cbp-radio/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Radio/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-radio/cbp-radio.scss b/packages/web-components/src/components/cbp-radio/cbp-radio.scss
index 04e6f460..a933011b 100644
--- a/packages/web-components/src/components/cbp-radio/cbp-radio.scss
+++ b/packages/web-components/src/components/cbp-radio/cbp-radio.scss
@@ -103,7 +103,9 @@
 }
 
 cbp-radio {
-  display: block;
+  //display: block;
+  display: grid;
+  place-content: center;
   margin: var(--cbp-radio-margin);
   position: relative;
 
@@ -146,8 +148,11 @@ cbp-radio {
       top: 0;
       bottom: 0;
       overflow: hidden;
-      height: 0;
-      width: 0;
+      height: var(--cbp-space-4x);
+      width: var(--cbp-space-4x);
+      transform: scale(0);
+      //height: 0;
+      //width: 0;
       background-color: var(--cbp-radio-color-checked);
       border-radius: var(--cbp-border-radius-circle);
     }
@@ -183,9 +188,10 @@ cbp-radio {
     &:checked {
       // Checked inner-circle
       &::before {
-        height: var(--cbp-space-4x);
-        width: var(--cbp-space-4x);
-        //transition: all var(--cbp-motion-duration-shortest) ease-in;
+        //height: var(--cbp-space-4x);
+        //width: var(--cbp-space-4x);
+        transform: scale(1);
+        transition: all var(--cbp-motion-duration-shortest) ease-in-out;
       }
     }
 
diff --git a/packages/web-components/src/components/cbp-radio/cbp-radio.stories.tsx b/packages/web-components/src/components/cbp-radio/cbp-radio.stories.tsx
index b652f39d..c0d68a24 100644
--- a/packages/web-components/src/components/cbp-radio/cbp-radio.stories.tsx
+++ b/packages/web-components/src/components/cbp-radio/cbp-radio.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Radio',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-section/api-docs.mdx b/packages/web-components/src/components/cbp-section/api-docs.mdx
new file mode 100644
index 00000000..20e79196
--- /dev/null
+++ b/packages/web-components/src/components/cbp-section/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Section/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-section/cbp-section.stories.tsx b/packages/web-components/src/components/cbp-section/cbp-section.stories.tsx
index fd0393a6..e682e8b2 100644
--- a/packages/web-components/src/components/cbp-section/cbp-section.stories.tsx
+++ b/packages/web-components/src/components/cbp-section/cbp-section.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Section',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     text: {
       name: 'text (slotted)',
diff --git a/packages/web-components/src/components/cbp-segmented-button-group/api-docs.mdx b/packages/web-components/src/components/cbp-segmented-button-group/api-docs.mdx
new file mode 100644
index 00000000..5f24531e
--- /dev/null
+++ b/packages/web-components/src/components/cbp-segmented-button-group/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Segmented Button Group/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
index b864e0b7..63b64798 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Segmented Button Group',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     buttons: {
       name: 'Buttons',
diff --git a/packages/web-components/src/components/cbp-skip-nav/api-docs.mdx b/packages/web-components/src/components/cbp-skip-nav/api-docs.mdx
new file mode 100644
index 00000000..9cc29922
--- /dev/null
+++ b/packages/web-components/src/components/cbp-skip-nav/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Skip Navigation Link/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-skip-nav/cbp-skip-nav.stories.tsx b/packages/web-components/src/components/cbp-skip-nav/cbp-skip-nav.stories.tsx
index 64c8a91c..8e1b1ae8 100644
--- a/packages/web-components/src/components/cbp-skip-nav/cbp-skip-nav.stories.tsx
+++ b/packages/web-components/src/components/cbp-skip-nav/cbp-skip-nav.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Skip Navigation Link',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     text: {
       name: 'text (slotted)',
diff --git a/packages/web-components/src/components/cbp-structured-list/api-docs.mdx b/packages/web-components/src/components/cbp-structured-list/api-docs.mdx
new file mode 100644
index 00000000..e19c39ab
--- /dev/null
+++ b/packages/web-components/src/components/cbp-structured-list/api-docs.mdx
@@ -0,0 +1,9 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import StructuredListDocs from './readme.md?raw';
+import StructuredListItemDocs from '../cbp-structured-list-item/readme.md?raw';
+
+<Meta title="Components/Structured List/API Docs" />
+
+<Markdown>{StructuredListDocs}</Markdown>  
+  
+<Markdown>{StructuredListItemDocs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx b/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx
index 9e237f7b..f9cedf39 100644
--- a/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx
+++ b/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Structured List',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     showHeader: {
       control: 'boolean',
diff --git a/packages/web-components/src/components/cbp-tabs/api-docs.mdx b/packages/web-components/src/components/cbp-tabs/api-docs.mdx
new file mode 100644
index 00000000..572d4bae
--- /dev/null
+++ b/packages/web-components/src/components/cbp-tabs/api-docs.mdx
@@ -0,0 +1,12 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import TabsDocs from './readme.md?raw';
+import TabDocs from '../cbp-tab/readme.md?raw';
+import TabPanelDocs from '../cbp-tab-panel/readme.md?raw';
+
+<Meta title="Components/Tabs/API Docs" />
+
+<Markdown>{TabsDocs}</Markdown>  
+  
+<Markdown>{TabDocs}</Markdown>
+
+<Markdown>{TabPanelDocs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-tabs/cbp-tabs.stories.tsx b/packages/web-components/src/components/cbp-tabs/cbp-tabs.stories.tsx
index 32b4dbbd..d90f0e5e 100644
--- a/packages/web-components/src/components/cbp-tabs/cbp-tabs.stories.tsx
+++ b/packages/web-components/src/components/cbp-tabs/cbp-tabs.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Tabs',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     tabs: {
       name: 'Tabs (slotted)',
diff --git a/packages/web-components/src/components/cbp-tag/api-docs.mdx b/packages/web-components/src/components/cbp-tag/api-docs.mdx
new file mode 100644
index 00000000..a54d127a
--- /dev/null
+++ b/packages/web-components/src/components/cbp-tag/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Tag/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-tag/cbp-tag.stories.tsx b/packages/web-components/src/components/cbp-tag/cbp-tag.stories.tsx
index 39f3d6fe..3f7d0b52 100644
--- a/packages/web-components/src/components/cbp-tag/cbp-tag.stories.tsx
+++ b/packages/web-components/src/components/cbp-tag/cbp-tag.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Tag',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     label: {
       name: 'label (slotted)',
diff --git a/packages/web-components/src/components/cbp-toast/api-docs.mdx b/packages/web-components/src/components/cbp-toast/api-docs.mdx
new file mode 100644
index 00000000..010c6306
--- /dev/null
+++ b/packages/web-components/src/components/cbp-toast/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Toast/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-toast/cbp-toast.stories.tsx b/packages/web-components/src/components/cbp-toast/cbp-toast.stories.tsx
index eb233c9a..42400761 100644
--- a/packages/web-components/src/components/cbp-toast/cbp-toast.stories.tsx
+++ b/packages/web-components/src/components/cbp-toast/cbp-toast.stories.tsx
@@ -1,6 +1,6 @@
 export default {
     title: 'Components/Toast',
-    tags: ['autodocs'],
+    //tags: ['autodocs'],
     argTypes: {
       
       duration: {
diff --git a/packages/web-components/src/components/cbp-typography/api-docs.mdx b/packages/web-components/src/components/cbp-typography/api-docs.mdx
new file mode 100644
index 00000000..ea2b73ea
--- /dev/null
+++ b/packages/web-components/src/components/cbp-typography/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Typography/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-typography/cbp-typography.stories.tsx b/packages/web-components/src/components/cbp-typography/cbp-typography.stories.tsx
index fdd0bbb9..d4b84a8b 100644
--- a/packages/web-components/src/components/cbp-typography/cbp-typography.stories.tsx
+++ b/packages/web-components/src/components/cbp-typography/cbp-typography.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Typography',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   argTypes: {
     text: {
       name: 'text (slotted)',
diff --git a/packages/web-components/src/components/cbp-universal-header/api-docs.mdx b/packages/web-components/src/components/cbp-universal-header/api-docs.mdx
new file mode 100644
index 00000000..ea9355bd
--- /dev/null
+++ b/packages/web-components/src/components/cbp-universal-header/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/Universal Header/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx b/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx
index 26d8b58d..f52960ec 100644
--- a/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx
+++ b/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx
@@ -1,6 +1,6 @@
 export default {
   title: 'Components/Universal Header',
-  tags: ['autodocs'],
+  //tags: ['autodocs'],
   parameters: {
     layout: 'fullscreen',
     //root: '#custom-root'
diff --git a/packages/web-components/src/components/cbp-usa-banner/api-docs.mdx b/packages/web-components/src/components/cbp-usa-banner/api-docs.mdx
new file mode 100644
index 00000000..2d5dfe55
--- /dev/null
+++ b/packages/web-components/src/components/cbp-usa-banner/api-docs.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Docs from './readme.md?raw';
+
+<Meta title="Components/USA Banner/API Docs" />
+
+<Markdown>{Docs}</Markdown>
diff --git a/packages/web-components/src/components/cbp-usa-banner/cbp-usa-banner.stories.tsx b/packages/web-components/src/components/cbp-usa-banner/cbp-usa-banner.stories.tsx
index 6542a882..d530c4d3 100644
--- a/packages/web-components/src/components/cbp-usa-banner/cbp-usa-banner.stories.tsx
+++ b/packages/web-components/src/components/cbp-usa-banner/cbp-usa-banner.stories.tsx
@@ -1,6 +1,6 @@
 export default {
     title: 'Components/USA Banner',
-    tags: ['autodocs'],
+    //tags: ['autodocs'],
   };
   
   const Template = () => {
diff --git a/packages/web-components/src/stories/changes.mdx b/packages/web-components/src/stories/changes.mdx
new file mode 100644
index 00000000..7f8f6768
--- /dev/null
+++ b/packages/web-components/src/stories/changes.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Changelog from '../../CHANGELOG.md?raw';
+
+<Meta title="Change Log" />
+
+<Markdown>{Changelog}</Markdown>
\ No newline at end of file
diff --git a/packages/web-components/stencil.config.ts b/packages/web-components/stencil.config.ts
index 9a8e8704..5473b24f 100644
--- a/packages/web-components/stencil.config.ts
+++ b/packages/web-components/stencil.config.ts
@@ -13,7 +13,7 @@ export const config: Config = {
     reactOutputTarget({
       componentCorePackage: '@cbpds/web-components',
       proxiesFile: '../react-components/components/stencil-generated/index.ts',
-      outDir: '../react-components/components/stencil-generated/'
+      //outDir: '../react-components/components/stencil-generated/'
     }),
     {
       type: 'dist', // The dist type is to generate the component(s) as a reusable library that can be self-lazy loading
@@ -41,6 +41,7 @@ export const config: Config = {
     },
     {
       type: 'docs-readme',
+      footer: '  ',
     },
     {
       type: 'www',
@@ -54,6 +55,7 @@ export const config: Config = {
       serviceWorker: null, // disable service workers
     },
   ],
+  preamble: 'CPB Design System web components - built with Stencil',
   extras: {
     enableImportInjection: true,
     experimentalSlotFixes: true,
diff --git a/packages/web-components/vite.config.js b/packages/web-components/vite.config.js
new file mode 100644
index 00000000..e4c28e4a
--- /dev/null
+++ b/packages/web-components/vite.config.js
@@ -0,0 +1,8 @@
+// vite.config.js
+export default {
+  assetsInclude: ['**/*.md'],
+}
+
+//export default defineConfig({
+//  assetsInclude: ['**/*.md'],
+//});