docs: add example of inline-block size

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,7 +4,7 @@ title: '[issue summary] Please verify version before submitting new issue'
 labels:
   - 'Type: Bug'
   - not-reviewed
-  - 'auro-form'
+  - 'auro-formkit'
 body:
   - type: markdown
     attributes:
@@ -13,12 +13,12 @@ body:
   - type: input
     id: version
     attributes:
-      label: Please verify the version of auro-form you have installed
+      label: Please verify the version of auro-formkit you have installed
   - type: markdown
     attributes:
       value: >
         [![See it on
-        NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-form?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-form)
+        NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-formkit?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit)
   - type: textarea
     id: details
     attributes:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,10 +1,10 @@
 name: Feature request
 description: Suggest an idea for this project
-title: 'auro-form: [feature summary]'
+title: 'auro-formkit: [feature summary]'
 labels:
   - 'Type: Feature'
   - not-reviewed
-  - 'auro-form'
+  - 'auro-formkit'
 body:
   - type: textarea
     id: request

.github/ISSUE_TEMPLATE/general-support.yml

@@ -1,11 +1,11 @@
 name: General support
 description: Suggestions that are not related to bugs or new features
-title: 'auro-form: [issue]'
+title: 'auro-formkit: [issue]'
 labels:
   - 'Type: Question'
   - 'Type: Feature'
   - not-reviewed
-  - 'auro-form'
+  - 'auro-formkit'
 body:
   - type: textarea
     id: request

.github/ISSUE_TEMPLATE/publish_component.md

@@ -2,7 +2,7 @@
 name: Publish Component
 about: Create a ticket to drive compliance before publishing a new component to Auro Design System
 title: 'Publish to Auro Design System'
-labels: 'auro-form, not-reviewed'
+labels: 'auro-formkit, not-reviewed'
 ---
 
 # Publish Component
@@ -53,7 +53,7 @@ labels: 'auro-form, not-reviewed'
     - [ ] All work is reviewed by Auro team
 1. __Publishing__
     - [ ] Removed all references to `auroLabs` from the repository
-    - [ ] Component properly named,  e.g. `auro-form`
+    - [ ] Component properly named,  e.g. `auro-formkit`
     - [ ] GitHub Repository properly named
     - Updated `readme.md`
       - [ ] Install information updated to published namespace

.github/settings.yml

@@ -89,7 +89,7 @@ branches:
 
 # Labels: define labels for Issues and Pull Requests
 labels:
-  - name: auro-form
+  - name: auro-formkit
     color: 'fa23e4'
     description:
     process: Key filter for this repo

.github/workflows/testPublish.yml

@@ -29,7 +29,7 @@ jobs:
 
   release:
     # Only release on push to main
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main' || 'refs/heads/beta'
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
     runs-on: ubuntu-latest
     needs: test
     steps:
@@ -40,7 +40,7 @@ jobs:
         with:
           node-version: 20.x
       - run: npm ci
-      - run: npm run build:release
+      - run: npm run build
       - uses: cycjimmy/semantic-release-action@v4
         env:
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

README.md

@@ -1,7 +1,11 @@
 <!--
 The README.md file is a compiled document. No edits should be made directly to this file.
 
-README.md is created by running `npm run build:docs:kit`.
+README.md is created by running `npm run build:docs`.
+
+This file is generated based on a template fetched from
+`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
+and copied to `./componentDocs/README.md` each time the the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
@@ -11,215 +15,86 @@ The following sections are editable by making changes to the following files:
 | Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
 | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
-# Formkit
+-->
+
+# {{ capitalize name }}
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
-<!-- The below content is automatically added from ./docs/partials/description.md -->
-
-## Description
-
-`auro-formkit` is a collection of web components that can be used to build forms.
-
-It is a monorepo that contains the following components:
-
-- `@auro-formkit/auro-checkbox`
-- `@auro-formkit/auro-combobox`
-- `@auro-formkit/auro-counter`
-- `@auro-formkit/auro-datepicker`
-- `@auro-formkit/auro-dropdown`
-- `@auro-formkit/auro-form`
-- `@auro-formkit/auro-input`
-- `@auro-formkit/auro-menu`
-- `@auro-formkit/auro-radio`
-- `@auro-formkit/auro-select`
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## UI development browser support
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Install
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/-formkit/-formkit/build-tools/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/build-tools/actions/workflows/testPublish.yml)
-[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/build-tools?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/build-tools)
-[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/build-tools?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
-
-```shell
-$ npm i @auro-formkit/-formkit/-formkit/build-tools
-```
-
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Development
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Design Token CSS Custom Property dependency
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Define dependency in project component
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+**Reference component in HTML**
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
-
-### Filtering
+## Install bundled assets from CDN
 
-Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
-To only develop a single component, use the `--filter` flag:
+### Bundle example code
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## {{ withAuroNamespace name }} use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Code Examples
+
+### Default {{ withAuroNamespace name }}
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Development
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
-```
-turbo dev --filter=@auro-formkit/auro-input
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Start development environment
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/localhost.md) -->
-<!-- The below content is automatically added from ./docs/partials/localhost.md -->
-
-## Local Development
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/testing.md) -->
-<!-- The below content is automatically added from ./docs/partials/testing.md -->
-```
-npm run test
-```
-
-#### Port configuration
+### API generation
 
-Turbo will attempt to test components in parallel which will lead to port conflicts.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
-Setting the `concurrency` to `1` will prevent Turbo from running tests in parallel:
+### Testing
 
-```
-"test": "turbo run test --concurrency=1",
-```
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
-`turbo.json`does not support `--concurrency` yet. See [this issue](https://github.com/vercel/turborepo/discussions/7493).
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
-<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
-
-## Turborepo Overview
-
-This monorepo is managed using [Turborepo](https://turborepo.org/).
-
-### Managing dependencies
-
-#### Best practices for dependency installation
-
-When you install a dependency in a component or package in `auro-formkit`, you should install it directly in the package that uses it. 
-
-The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
-
-### Types of Dependencies by Source
-
-#### External Dependencies
-- These are packages fetched from the `npm` registry (e.g., Lit, Rollup, Sass)
-- Declared in `package.json` using exact versions or version ranges
-- Installed in `node_modules` during `npm install` or `yarn install`
-
-#### Internal Dependencies
-- These are packages from within the `auro-formkit` monorepo
-- Allow sharing code between different packages in your repository
-- Example: The `@auro-formkit/combobox` package might depend on `@auro-formkit/input`
-- Must be declared in `package.json` just like external dependencies
-- Use workspace protocols (e.g., `"workspace:*"` or `"workspace:^1.0.0"`)
-
-### Types of Dependencies by Purpose
-
-#### Dependencies (`dependencies`)
-- Required for the package to function in production
-- Example:
-  ```json
-  {
-    "dependencies": {
-      "lit.js": "^3.0.0",                    // External dependency
-      "@auro-formkit/input": "workspace:*"  // Internal dependency
-    }
-  }
-  ```
-
-#### Peer Dependencies (`peerDependencies`)
-- Packages that your library expects the consuming application to provide
-- Common for plugins or UI component libraries
-- Example:
-  ```json
-  {
-    "peerDependencies": {
-      "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-      "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-    }
-  }
-  ```
-
-### Development Dependencies (`devDependencies`)
-- Only needed during development, testing, or building
-- Not included in the production bundle
-- Example:
-  ```json
-  {
-    "devDependencies": {
-      "typescript": "^5.0.0",
-      "@open-wc/testing": "^4.0.0"  // Internal dev dependency
-    }
-  }
-  ```
-
-## Example: Component Dependencies
-
-Let's use `@auro-formki/combobox` as an example to illustrate these concepts:
-
-```json
-{
-  "name": "@auro-formkit/combobox",
-  "dependencies": {
-    // Internal dependencies
-    "@auro-formkit/auro-dropdown": "*",     // Required UI component
-    "@auro-formkit/auro-input": "*",        // Required UI component
-
-    // External dependencies
-    "@alaskaairux/icons": "^4.44.1",  // Required UI component
-    "lit": "^3.2.1"                   // Framework
-  },
-  "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
-  },
-  "devDependencies": {
-    // Build utilities
-    "rollup": "^4.24.4",
-    "@auro-formkit/build-tools": "*",
-  }
-}
-```
-
-This structure ensures that:
-1. The package explicitly declares all its dependencies
-2. Internal dependencies are properly tracked and versioned
-3. Development tools are separated from production dependencies
-4. Peer dependencies are clearly communicated to consumers
-
-- External dependencies come from the `npm` registry.
-
-- Internal dependencies let you share functionality within your repository.
-
-This practice has several benefits:
-
-- **Improved clarity:** It's easier to understand what a package depends on when its dependencies are listed in its `package.json`. Developers working in the repository can see at a glance what dependencies are used within the package.
-
-- **Enhanced flexibility:** In a monorepo at scale, it can be unrealistic to expect each package to use the same version of an external dependency.
-
-- **Better caching ability:** If you install too many dependencies in the root of your repository, you'll be changing the workspace root whenever you add, update, or delete a dependency, leading to unnecessary cache misses.
-
-- **Pruning unused dependencies:** When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need.
-
-For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
-
-### Root `package.json`
-
-The only dependencies that belong in the root `package.json` are **tools for managing the repository**.
-
-Some examples of dependencies that make sense to install in the root are `turbo`, `husky`, or `stylelint`.
-
-Conversely, dependencies Auro components rely on should be installed in their respective packages, such as `Lit`, `Rollup`, or other `auro-formkit` dependencies.
-<!-- AURO-GENERATED-CONTENT:END -->
+### Bundled assets
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
+<!-- AURO-GENERATED-CONTENT:END -->