### Install Project Dependencies

Source: https://github.com/hashicorp/design-system/blob/main/packages/components/CONTRIBUTING.md

Clones the repository and installs project dependencies using pnpm. Assumes git and pnpm are installed.

```bash
git clone <repository-url>
pnpm install
cd packages/components
```

--------------------------------

### Install Design System Tokens

Source: https://github.com/hashicorp/design-system/blob/main/packages/tokens/README.md

Installs the @hashicorp/design-system-tokens package using pnpm. This package contains design tokens for the Helios Design System.

```bash
pnpm add @hashicorp/design-system-tokens
```

--------------------------------

### Install Helios Design System Packages

Source: https://context7.com/hashicorp/design-system/llms.txt

Commands to install the core design system components and tokens using the pnpm package manager.

```bash
pnpm add @hashicorp/design-system-components
pnpm add @hashicorp/design-system-tokens
```

--------------------------------

### Run Showcase Application

Source: https://github.com/hashicorp/design-system/blob/main/packages/components/CONTRIBUTING.md

Starts the showcase application locally. The application will be available at http://localhost:4200.

```bash
cd showcase
pnpm start
```

--------------------------------

### Install Design System Components

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/getting-started/for-engineers/index.md

Installs the HashiCorp Design System components package using npm. This package includes components, design tokens, and CSS helper classes.

```bash
npm install @hashicorp/design-system-components
```

--------------------------------

### Install Helios Design System Components

Source: https://github.com/hashicorp/design-system/blob/main/packages/components/README.md

Installs the core design system component package using the pnpm package manager.

```bash
pnpm add @hashicorp/design-system-components
```

--------------------------------

### Install and Run Verdaccio Local Registry

Source: https://github.com/hashicorp/design-system/blob/main/packages/tokens/RELEASE.md

Commands to install Verdaccio globally, launch the service, and add a user to the local npm registry for testing package releases without affecting the production registry.

```bash
npm install -g verdaccio
verdaccio
npm adduser --registry http://localhost:4873
```

--------------------------------

### Compose Toast with Icons and Actions

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/toast/partials/content/content.md

Examples of various Toast configurations including icons, titles, descriptions, and action buttons.

```handlebars
<Hds::Toast @icon="info" @onDismiss={{this.noop}} as |T|>
  <T.Title>With icon and title</T.Title>
</Hds::Toast>

<Hds::Toast @color="success" @icon="check-circle" @onDismiss={{this.noop}} as |T|>
  <T.Title>Toast with actions</T.Title>
  <T.Description>Lorem ipsum dolar sit amet, consectetur adi.</T.Description>
  <T.Button @text="Button" @color="secondary" />
  <T.LinkStandalone @color="secondary" @icon="plus" @iconPosition="leading" @text="Link text" @href="#" />
</Hds::Toast>
```

--------------------------------

### Standalone Link Trailing Icon Examples

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/link/standalone/partials/guidelines/guidelines.md

Demonstrates the use of trailing icons with the Standalone Link, typically used for guiding users forward or when no other meaningful icon is available. Includes examples for internal, tutorial, documentation, and external links.

```HTML
<Hds::Link::Standalone @text="View billing" @icon="arrow-right" @iconPosition="trailing" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Service mesh tutorial" @icon="learn-link" @iconPosition="trailing" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Consul documentation" @icon="docs-link" @iconPosition="trailing" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Submit feedback" @icon="external-link" @iconPosition="trailing" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Edit pages in GitHub" @icon="github" @iconPosition="trailing" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Boundary" @icon="boundary-color" @iconPosition="trailing" @color="secondary" @href="#" />
<Hds::Link::Standalone @text="Consul" @icon="consul-color" @iconPosition="trailing" @color="secondary" @href="#" />
<Hds::Link::Standalone @text="Vault" @icon="vault-color" @iconPosition="trailing" @color="secondary" @href="#" />
<Hds::Link::Standalone @text="Waypoint" @icon="waypoint-color" @iconPosition="trailing" @color="secondary" @href="#" />
```

--------------------------------

### Implement Basic Stepper Component

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/stepper/list/partials/code/how-to-use.md

Demonstrates the fundamental setup of a Stepper list component. It requires defining individual steps within the parent container.

```handlebars
<StepperList>
  <:step>
    <:title>Step 1</:title>
  </:step>
  <:step>
    <:title>Step 2</:title>
  </:step>
</StepperList>
```

--------------------------------

### Basic Invocation of PopoverPrimitive

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/utilities/popover-primitive/partials/code/how-to-use.md

Demonstrates the basic setup of the PopoverPrimitive using three modifiers: setupPrimitiveContainer, setupPrimitiveToggle, and setupPrimitivePopover applied to elements.

```html
<div {{setupPrimitiveContainer}}>
  <button {{setupPrimitiveToggle}}>Toggle</button>
  <div {{setupPrimitivePopover}}>Popover Content</div>
</div>
```

--------------------------------

### Standalone Link Leading Icon Examples

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/link/standalone/partials/guidelines/guidelines.md

Provides examples of using a leading icon with the Standalone Link. This is generally preferred for clarity and directionality, especially for actions like 'Download' or navigating backward.

```HTML
<Hds::Link::Standalone @text="Download" @icon="download" @iconPosition="leading" @color="primary" @href="#" />
<Hds::Link::Standalone @text="View connections" @icon="network-alt" @iconPosition="leading" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Back to Dashboard" @icon="chevron-left" @iconPosition="leading" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Edit pages in GitHub" @icon="github" @iconPosition="leading" @color="primary" @href="#" />
<Hds::Link::Standalone @text="Boundary" @icon="boundary-color" @iconPosition="leading" @color="secondary" @href="#" />
<Hds::Link::Standalone @text="Consul" @icon="consul-color" @iconPosition="leading" @color="secondary" @href="#" />
<Hds::Link::Standalone @text="Vault" @icon="vault-color" @iconPosition="leading" @color="secondary" @href="#" />
<Hds::Link::Standalone @text="Waypoint" @icon="waypoint-color" @iconPosition="leading" @color="secondary" @href="#" />
```

--------------------------------

### Alert Component Examples (Glimmer)

Source: https://context7.com/hashicorp/design-system/llms.txt

Demonstrates the usage of the HdsAlert component for displaying various types of feedback messages. Supports different types (inline, page, compact), colors, icons, titles, descriptions, and action buttons. Includes examples for dismissible alerts and alerts with custom actions.

```gts
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { HdsAlert } from '@hashicorp/design-system-components/components';

export default class AlertExamples extends Component {
  handleDismiss = () => {
    console.log('Alert dismissed');
  };

  handleAction = () => {
    console.log('Action clicked');
  };

  <template>
    {{! Basic inline alert }}
    <HdsAlert @type="inline" as |A|>
      <A.Title>Title here</A.Title>
      <A.Description>Description here</A.Description>
    </HdsAlert>

    {{! Alert with different colors }}
    <HdsAlert @type="inline" @color="success" as |A|>
      <A.Title>Success</A.Title>
      <A.Description>Operation completed successfully.</A.Description>
    </HdsAlert>

    <HdsAlert @type="inline" @color="warning" as |A|>
      <A.Title>Warning</A.Title>
      <A.Description>Please review before continuing.</A.Description>
    </HdsAlert>

    <HdsAlert @type="inline" @color="critical" as |A|>
      <A.Title>Error</A.Title>
      <A.Description>Something went wrong.</A.Description>
    </HdsAlert>

    {{! Alert with custom icon }}
    <HdsAlert @type="inline" @icon="settings" as |A|>
      <A.Title>Configuration Required</A.Title>
      <A.Description>Update your settings to continue.</A.Description>
    </HdsAlert>

    {{! Dismissible alert }}
    <HdsAlert @type="inline" @onDismiss={{this.handleDismiss}} as |A|>
      <A.Title>Dismissible Alert</A.Title>
      <A.Description>Click the X to dismiss this alert.</A.Description>
    </HdsAlert>

    {{! Alert with actions }}
    <HdsAlert @type="inline" as |A|>
      <A.Title>Action Required</A.Title>
      <A.Description>Please take action on this item.</A.Description>
      <A.Button @text="Take Action" @color="secondary" {{on "click" this.handleAction}} />
      <A.LinkStandalone @color="secondary" @icon="arrow-right" @iconPosition="trailing" @text="Learn more" @href="#" />
    </HdsAlert>

    {{! Page-level alert }}
    <HdsAlert @type="page" @color="highlight" as |A|>
      <A.Title @tag="h2">Page Alert</A.Title>
      <A.Description>This is a full-width page alert.</A.Description>
    </HdsAlert>

    {{! Compact alert }}
    <HdsAlert @type="compact" @color="success" as |A|>
      <A.Description>Compact success message</A.Description>
    </HdsAlert>
  </template>
}
```

--------------------------------

### Icon Color Configuration

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/icon/partials/code/how-to-use.md

Examples of setting icon colors using foreground variables, CSS tokens, or standard CSS color strings.

```handlebars
<Hds::Icon @name="check" @color="foreground-primary" />
<Hds::Icon @name="check" @color="var(--blue-500)" />
<Hds::Icon @name="check" @color="#ff0000" />
```

--------------------------------

### Toast with Generic Content

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/toast/partials/content/content.md

This example demonstrates how to use the Hds::Toast component with custom, generic content passed via the `T.Generic` slot.

```APIDOC
## Toast with Generic Content

### Description
This example shows how to render a success toast message with a custom title, description, and additional generic content using the `T.Generic` contextual component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Properties
- **@color** (string) - Optional - The color theme of the toast (e.g., "success", "warning", "danger"). Defaults to "info".
- **@icon** (string) - Optional - The icon to display in the toast. Uses `check-circle` in this example.
- **@onDismiss** (function) - Optional - Callback function to execute when the toast is dismissed.

#### Slots
- **Default Slot**: Contains the main content of the toast, including `T.Title`, `T.Description`, and `T.Generic`.
  - **T.Title**: Slot for the toast's title.
  - **T.Description**: Slot for the main descriptive text of the toast.
  - **T.Generic**: Slot for any additional, custom content.

### Request Example
```html
<Hds::Toast @color="success" @icon="check-circle" @onDismiss={{this.noop}} as |T|>
  <T.Title>Toast with extra/custom content</T.Title>
  <T.Description>
    In special cases, you can pass extra content to the Toast using the
    <code>A.Generic</code>
    contextual component.
  </T.Description>
  <T.Generic>
    <Doc::Placeholder @text="some generic content" @height="50" @background="#eee" />
  </T.Generic>
</Hds::Toast>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

--------------------------------

### Flexbox Layout with Placeholders

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/layouts/flex/partials/code/how-to-use.md

An example showing how to use the Layout::Flex component with generic content placeholders to create equally sized flex items.

```Handlebars
{{#> Layout::Flex}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
{{/ Layout::Flex}}
```

--------------------------------

### Handlebars template transformation example

Source: https://github.com/hashicorp/design-system/blob/main/packages/codemods/transforms/v4/contextual-components/README.md

Demonstrates the input and output of the codemod, showing how nested component references like A.Link::Standalone are flattened to A.LinkStandalone.

```handlebars
<Hds::Alert as |A|>
  <A.Link::Standalone />
</Hds::Alert>

<Hds::Form::Toggle::Group as |G|>
  <G.Toggle::Field as |F|>
    <F.Label>Label</F.Label>
  </G.Toggle::Field>
</Hds::Form::Toggle::Group>
```

```handlebars
<Hds::Alert as |A|>
  <A.LinkStandalone />
</Hds::Alert>

<Hds::Form::Toggle::Group as |G|>
  <G.ToggleField as |F|>
    <F.Label>Label</F.Label>
  </G.ToggleField>
</Hds::Form::Toggle::Group>
```

--------------------------------

### Breadcrumb with Truncation

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/breadcrumb/partials/guidelines/guidelines.md

Demonstrates how to implement truncation for breadcrumbs when space is limited. This example shows a basic truncation setup.

```html
<Hds::Breadcrumb aria-label="breadcrumb with truncation">
	<Hds::Breadcrumb::Item @text="Level 1" />
	<Hds::Breadcrumb::Truncation>
		<Hds::Breadcrumb::Item @text="Level 2" />
	</Hds::Breadcrumb::Truncation>
  <Hds::Breadcrumb::Item @text="Level 3" />
</Hds::Breadcrumb>
```

--------------------------------

### Build Project and Watch Files

Source: https://github.com/hashicorp/design-system/blob/main/packages/components/CONTRIBUTING.md

Builds the project using pnpm. The 'start' command also sets up a watcher to automatically rebuild on file changes in the 'src' directory.

```bash
pnpm build
pnpm start
```

--------------------------------

### Install Ember CLI Sass Dependency

Source: https://github.com/hashicorp/design-system/blob/main/packages/components/README.md

Installs the ember-cli-sass addon required for processing the design system's SCSS files.

```bash
ember install ember-cli-sass
```

--------------------------------

### Using the Icon Component

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/icon/index.md

Demonstrates how to import and use the Icon component in your application. This typically involves importing the component and rendering it with appropriate props.

```javascript
import { Icon } from "@hashicorp/design-system";

function MyComponent() {
  return (
    <Icon name="flight" />
  );
}
```

--------------------------------

### Implement HdsTabs for Content Navigation

Source: https://context7.com/hashicorp/design-system/llms.txt

Shows how to use the HdsTabs component for organizing content into panels. Includes examples for sizing, pre-selected tabs, icons, counts, and controlled state management.

```gts
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { HdsTabs } from '@hashicorp/design-system-components/components';

export default class TabsExample extends Component {
  @tracked selectedTabIndex = 0;

  handleTabClick = (event: Event, tabIndex: number) => {
    this.selectedTabIndex = tabIndex;
  };

  <template>
    <HdsTabs as |T|>
      <T.Tab>Overview</T.Tab>
      <T.Tab>Settings</T.Tab>
      <T.Panel><p>Overview content goes here.</p></T.Panel>
      <T.Panel><p>Settings content goes here.</p></T.Panel>
    </HdsTabs>
  </template>
}
```

--------------------------------

### How to Use Layout::Grid Component

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/layouts/grid/index.md

Demonstrates the basic usage of the Layout::Grid component for content organization. This snippet shows how to import and apply the grid component in your project. It serves as a starting point for implementing grid-based layouts.

```html
<p>This section includes code examples for using the Layout::Grid component. Please refer to the 'how-to-use.md' partial for specific implementation details.</p>
```

--------------------------------

### Handlebars SideNav Input Example

Source: https://github.com/hashicorp/design-system/blob/main/packages/codemods/transforms/v3/side-nav/README.md

Example of the input Handlebars code for Hds::SideNav::List and Hds::SideNav::Portal components before the codemod is applied.

```handlebars
<Hds::SideNav::List as |XXX|>
  <XXX.extraBefore>...</XXX.extraBefore>
  <XXX.Item>...</XXX.Item>
  <XXX.extraAfter>...</XXX.extraAfter>
</Hds::SideNav::List>

<Hds::SideNav::Portal as |YYY|>
  <YYY.extraBefore>...</YYY.extraBefore>
  <YYY.Item>...</YYY.Item>
  <YYY.extraAfter>...</YYY.extraAfter>
</Hds::SideNav::Portal>
```

--------------------------------

### How to use Numbered Pagination (Basic)

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/pagination/partials/code/how-to-use.md

Demonstrates the basic invocation of the Numbered Pagination component with essential arguments.

```APIDOC
## How to use Numbered Pagination

### Basic Invocation
Requires the `@totalItems` argument. Event/routing handlers can also be provided.

```ruby
<%= pagination(
  totalItems: @total_items,
  # other arguments...
) %>
```

By default, `Info` and `SizeSelector` sub-components are displayed and managed automatically.
```

--------------------------------

### Handlebars SideNav Output Example

Source: https://github.com/hashicorp/design-system/blob/main/packages/codemods/transforms/v3/side-nav/README.md

Example of the output Handlebars code for Hds::SideNav::List and Hds::SideNav::Portal components after the codemod has been applied, showing updated casing for extraBefore/extraAfter.

```handlebars
<Hds::SideNav::List as |XXX|>
  <XXX.ExtraBefore>...</XXX.ExtraBefore>
  <XXX.Item>...</XXX.Item>
  <XXX.ExtraAfter>...</XXX.ExtraAfter>
</Hds::SideNav::List>

<Hds::SideNav::Portal as |YYY|>
  <YYY.ExtraBefore>...</YYY.ExtraBefore>
  <YYY.Item>...</YYY.Item>
  <YYY.ExtraAfter>...</YYY.ExtraAfter>
</Hds::SideNav::Portal>
```

--------------------------------

### Basic Icon Implementation

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/icon/partials/code/how-to-use.md

Demonstrates the simplest way to invoke the Icon component by providing a name property.

```handlebars
<Hds::Icon @name="check" />
```

--------------------------------

### Basic AppFrame Implementation

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/layouts/app-frame/partials/code/how-to-use.md

Demonstrates the most basic invocation of the AppFrame component to create a standard application layout structure.

```handlebars
{{#app-frame as |f|}}
  {{f.header}}
  {{f.sidebar}}
  {{f.main}}
  {{f.footer}}
{{/app-frame}}
```

--------------------------------

### Inline Link Component Usage (HTML/Ember)

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/link/inline/partials/content/content.md

Demonstrates the correct and incorrect usage of an inline link component. The 'Do' example shows highlighting a key phrase, while the 'Don't' example illustrates wrapping an entire sentence, which is discouraged.

```HTML
<span class="hds-typography-body-300">Learn more about deploying a Vault Cluster on HCP in the <Hds::Link::Inline @color="primary" @icon="external-link" @iconPosition="trailing" @href="#">HashiCorp Developer tutorial library</Hds::Link::Inline>.</span>
```

```HTML
<span class="hds-typography-body-300"><Hds::Link::Inline @color="primary" @icon="external-link" @iconPosition="trailing" @href="#">Learn more about deploying a Vault Cluster on HCP in the HashiCorp Developer tutorial library</Hds::Link::Inline>.</span>
```

--------------------------------

### Inverse Button Group Example (Ember)

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/button/partials/guidelines/guidelines.md

Shows an example of using Button and ButtonSet components for an inverse button group, where a secondary button with a link appearance is part of the group. This is an appropriate use case for links styled as buttons.

```htmlbars
<Hds::ButtonSet>
  <Hds::Button @color="primary" @text="Submit" />
  <Hds::Button @color="secondary" @text="Cancel" @href="#" />
</Hds::ButtonSet>
```

--------------------------------

### Using Stepper Nav with Contextual Components

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/stepper/nav/partials/code/how-to-use.md

Demonstrates how to use Hds::Stepper::Nav::Step and Hds::Stepper::Nav::Panel as yielded contextual components to build a stepper flow.

```handlebars
<Hds::Stepper::Nav as |Stepper|>
  <Stepper.Step @label="Step 1" />
  <Stepper.Panel>Content for step 1</Stepper.Panel>
  <Stepper.Step @label="Step 2" />
  <Stepper.Panel>Content for step 2</Stepper.Panel>
</Hds::Stepper::Nav>
```

--------------------------------

### Icon Component Examples (Glimmer)

Source: https://context7.com/hashicorp/design-system/llms.txt

Illustrates the use of the HdsIcon component for rendering SVG icons from the Flight icon library. Supports customization of icon name, size, color, and display properties like inline or stretched. Includes examples for static and animated loading icons.

```gts
import type { TemplateOnlyComponent } from '@ember/component/template-only';
import { HdsIcon } from '@hashicorp/design-system-components/components';

const IconExamples: TemplateOnlyComponent = <template>
  {{! Basic icon }}
  <HdsIcon @name="alert-circle" />

  {{! Icon with size (16px default, 24px available) }}
  <HdsIcon @name="settings" @size="16" />
  <HdsIcon @name="settings" @size="24" />

  {{! Icon with foreground color }}
  <HdsIcon @name="check" @color="var(--token-color-foreground-success)" />
  <HdsIcon @name="x" @color="var(--token-color-foreground-critical)" />

  {{! Inline icon }}
  <HdsIcon @name="info" @isInline={{true}} />

  {{! Animated loading icon }}
  <HdsIcon @name="loading" />

  {{! Static loading icon }}
  <HdsIcon @name="loading-static" />

  {{! Stretched icon (fills parent container) }}
  <div style="width: 48px; height: 48px;">
    <HdsIcon @name="hashicorp" @stretched={{true}} />
  </div>
</template>;

export default IconExamples;
```

--------------------------------

### Implement Base File Input

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/form/file-input/partials/code/how-to-use.md

Shows the minimal configuration for the Base component, intended for custom layout requirements.

```handlebars
<Form::FileInput::Base />
```

--------------------------------

### Glimmer Component for Form Checkbox Examples

Source: https://context7.com/hashicorp/design-system/llms.txt

This Glimmer component demonstrates various use cases for the HdsFormCheckboxField and HdsFormCheckboxGroup components. It includes examples for single checkboxes with labels and helper text, pre-checked checkboxes, checkbox groups with different layouts (vertical and horizontal), and checkbox groups with validation.

```gts
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { HdsFormCheckboxGroup, HdsFormCheckboxField } from '@hashicorp/design-system-components/components';

export default class CheckboxExample extends Component {
  handleChange = (event: Event) => {
    console.log('Checked:', (event.target as HTMLInputElement).checked);
  };

  <template>
    {{! Single checkbox field }}
    <HdsFormCheckboxField name="terms" as |F|>
      <F.Label>I agree to the terms and conditions</F.Label>
    </HdsFormCheckboxField>

    {{! Checkbox with helper text }}
    <HdsFormCheckboxField name="newsletter" as |F|>
      <F.Label>Subscribe to newsletter</F.Label>
      <F.HelperText>Receive updates about new features and releases.</F.HelperText>
    </HdsFormCheckboxField>

    {{! Pre-checked checkbox }}
    <HdsFormCheckboxField name="notifications" checked as |F|>
      <F.Label>Enable notifications</F.Label>
    </HdsFormCheckboxField>

    {{! Checkbox group }}
    <HdsFormCheckboxGroup @name="datacenters" as |G|>
      <G.Legend>Valid datacenters</G.Legend>
      <G.CheckboxField as |F|>
        <F.Label>NYC1</F.Label>
      </G.CheckboxField>
      <G.CheckboxField as |F|>
        <F.Label>DC1</F.Label>
      </G.CheckboxField>
      <G.CheckboxField as |F|>
        <F.Label>NYC2</F.Label>
      </G.CheckboxField>
      <G.CheckboxField as |F|>
        <F.Label>SF1</F.Label>
      </G.CheckboxField>
    </HdsFormCheckboxGroup>

    {{! Horizontal checkbox group }}
    <HdsFormCheckboxGroup @name="features" @layout="horizontal" as |G|>
      <G.Legend>Enable features</G.Legend>
      <G.CheckboxField as |F|>
        <F.Label>Logging</F.Label>
      </G.CheckboxField>
      <G.CheckboxField as |F|>
        <F.Label>Metrics</F.Label>
      </G.CheckboxField>
      <G.CheckboxField as |F|>
        <F.Label>Tracing</F.Label>
      </G.CheckboxField>
    </HdsFormCheckboxGroup>

    {{! Checkbox group with validation }}
    <HdsFormCheckboxGroup @name="required-selection" as |G|>
      <G.Legend>Select at least one option</G.Legend>
      <G.CheckboxField as |F|>
        <F.Label>Option A</F.Label>
      </G.CheckboxField>
      <G.CheckboxField as |F|>
        <F.Label>Option B</F.Label>
      </G.CheckboxField>
      <G.Error>Please select at least one option.</G.Error>
    </HdsFormCheckboxGroup>
  </template>
}
```

--------------------------------

### Pagination Component Example in GTS

Source: https://context7.com/hashicorp/design-system/llms.txt

Demonstrates the usage of the Pagination component for navigating through paginated data. Supports numbered and compact variants, custom page sizes, and callbacks for page and page size changes. Requires '@glimmer/component' and '@hashicorp/design-system-components/components'.

```gts
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { HdsPaginationNumbered, HdsPaginationCompact } from '@hashicorp/design-system-components/components';

export default class PaginationExample extends Component {
  @tracked currentPage = 1;
  @tracked pageSize = 10;

  handlePageChange = (page: number) => {
    this.currentPage = page;
    console.log('Page changed to:', page);
  };

  handlePageSizeChange = (size: number) => {
    this.pageSize = size;
    console.log('Page size changed to:', size);
  };

  handleCompactChange = (page: number) => {
    console.log('Compact pagination:', page);
  };

  <template>
    {{! Basic numbered pagination }}
    <HdsPaginationNumbered @totalItems={{100}} />

    {{! Numbered pagination with callbacks }}
    <HdsPaginationNumbered
      @totalItems={{200}}
      @currentPage={{this.currentPage}}
      @currentPageSize={{this.pageSize}}
      @onPageChange={{this.handlePageChange}}
      @onPageSizeChange={{this.handlePageSizeChange}}
    />

    {{! Numbered pagination with custom page sizes }}
    <HdsPaginationNumbered
      @totalItems={{500}}
      @pageSizes={{array 10 25 50 100}}
      @currentPageSize={{25}}
    />

    {{! Compact pagination (for cursor-based navigation) }}
    <HdsPaginationCompact @onPageChange={{this.handleCompactChange}} />

    {{! Compact pagination with size selector }}
    <HdsPaginationCompact @showSizeSelector={{true}} />
  </template>
}
```

--------------------------------

### Radio Card with Nested Badges Example

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/form/radio-card/partials/guidelines/guidelines.md

Demonstrates the usage of the Hds::Form::RadioCard::Group component to create radio cards. Each card can contain a label, one or more badges for additional information, and a generic content area for more details. This example shows two distinct radio card configurations.

```Ember
<Hds::Form::RadioCard::Group @name="radio-card-nested-badge" as |G|>
  <G.Legend>Cluster type</G.Legend>
  <G.RadioCard @checked={{true}} {{on "change" this.onChange}} as |R|>
    <R.Label>HCP-managed Consul</R.Label>
    <R.Badge @text="6 clusters left" />
    <R.Generic>
      <ul class="doc-radio-card-list-demo">
        <li class="hds-typography-display-100">Connect workloads in your cloud provider network with HCP</li>
        <li class="hds-typography-display-100">Offload Consul operations to Hashicorp Experts</li>
      </ul>
    </R.Generic>
  </G.RadioCard>
  <G.RadioCard {{on "change" this.onChange}} as |R|>
    <R.Label>Self-managed Consul</R.Label>
    <R.Badge @text="5 clusters left" />
    <R.Badge @text="Kubernetes only" @icon="kubernetes" />
    <R.Generic>
      <ul class="doc-radio-card-list-demo">
        <li class="hds-typography-display-100">Multi-cloud artifact registry</li>
        <li class="hds-typography-display-100">Golden images workflow</li>
        <li class="hds-typography-display-100">Terraform Cloud integration</li>
        <li class="hds-typography-display-100">10 free images/month</li>
        <li class="hds-typography-display-100">250 free requests/month</li>
      </ul>
    </R.Generic>
  </G.RadioCard>
</Hds::Form::RadioCard::Group>
```

--------------------------------

### Form Text Input Component Examples (Glimmer)

Source: https://context7.com/hashicorp/design-system/llms.txt

Demonstrates various configurations of the Form TextInput component, including basic usage, helper text, pre-filled values, required/optional fields, email validation, password fields, character counts, and custom widths. It utilizes Glimmer components from the HashiCorp Design System.

```gts
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { tracked } from '@glimmer/tracking';
import { HdsFormTextInputField } from '@hashicorp/design-system-components/components';

export default class TextInputExample extends Component {
  @tracked email = '';
  @tracked isInvalid = false;

  handleInput = (event: Event) => {
    this.email = (event.target as HTMLInputElement).value;
    this.isInvalid = !this.email.includes('@');
  };

  <template>
    {{! Basic text input }}
    <HdsFormTextInputField name="cluster-name" as |F|>
      <F.Label>Cluster name</F.Label>
    </HdsFormTextInputField>

    {{! With helper text }}
    <HdsFormTextInputField name="project-id" as |F|>
      <F.Label>Project ID</F.Label>
      <F.HelperText>A unique identifier for your project.</F.HelperText>
    </HdsFormTextInputField>

    {{! With pre-filled value }}
    <HdsFormTextInputField @value="my-cluster" name="cluster" as |F|>
      <F.Label>Cluster name</F.Label>
    </HdsFormTextInputField>

    {{! Required field }}
    <HdsFormTextInputField @isRequired={{true}} name="required-field" as |F|>
      <F.Label>Required field</F.Label>
    </HdsFormTextInputField>

    {{! Optional field }}
    <HdsFormTextInputField @isOptional={{true}} name="optional-field" as |F|>
      <F.Label>Optional field</F.Label>
    </HdsFormTextInputField>

    {{! Email with validation }}
    <HdsFormTextInputField
      @type="email"
      @value={{this.email}}
      @isInvalid={{this.isInvalid}}
      name="email"
      {{on "input" this.handleInput}}
      as |F|
    >
      <F.Label>Email</F.Label>
      {{#if this.isInvalid}}
        <F.Error>Please enter a valid email address.</F.Error>
      {{/if}}
    </HdsFormTextInputField>

    {{! Password field }}
    <HdsFormTextInputField @type="password" name="password" as |F|>
      <F.Label>Password</F.Label>
    </HdsFormTextInputField>

    {{! With character count }}
    <HdsFormTextInputField name="description" as |F|>
      <F.Label>Description</F.Label>
      <F.CharacterCount @maxLength={{100}} />
    </HdsFormTextInputField>

    {{! Custom width }}
    <HdsFormTextInputField @width="200px" name="short-field" as |F|>
      <F.Label>Short field</F.Label>
    </HdsFormTextInputField>
  </template>
}

```

--------------------------------

### Basic Breadcrumb Implementation

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/breadcrumb/partials/code/how-to-use.md

Demonstrates the fundamental usage of the Breadcrumb component. This example shows how to render a simple breadcrumb trail without advanced features like routing or truncation.

```html
<Breadcrumb>
  <BreadcrumbItem>Home</BreadcrumbItem>
  <BreadcrumbItem>Features</BreadcrumbItem>
  <BreadcrumbItem>Documentation</BreadcrumbItem>
</Breadcrumb>
```

--------------------------------

### Handling Tab Click Events

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/tabs/partials/code/how-to-use.md

Provides an example of using the @onClickTab handler to trigger custom logic, such as updating URL parameters.

```handlebars
{{#tabs onClickTab=(action "handleTabClick")}}
  {{#tab title="Tab 1"}}Content{{/tab}}
{{/tabs}}
```

--------------------------------

### Implement Basic Grid Layout

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/layouts/grid/partials/code/how-to-use.md

Demonstrates the simplest implementation of the Layout::Grid component where children are stretched to fit evenly within column tracks.

```handlebars
<Layout::Grid>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Layout::Grid>
```

--------------------------------

### Stepper::Task::Indicator - Basic Usage

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/stepper/indicator/partials/code/how-to-use.md

Provides a basic example of the Stepper::Task::Indicator component, which requires a `status` argument.

```APIDOC
## Stepper::Task::Indicator - Basic Usage

### Description
Provides a basic example of how to use the Stepper::Task::Indicator component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```
{{code-snippets/stepper-task-indicator-basic}}
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A
```

--------------------------------

### Customizing AppFooter Layout

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/app-footer/partials/code/how-to-use.md

Provides an example of applying custom styles to the extra content areas to override the default inline layout.

```jsx
<AppFooter className="custom-footer-layout" />
```

--------------------------------

### Align

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/layouts/grid/partials/code/how-to-use.md

Use the `@align` argument to control the alignment of grid items within the grid parent (start, end, center, stretch).

```APIDOC
## Align

Use the `@align` argument to align grid items to the "start", "end", "center" or "stretch" them within the grid parent.

Note: The `Grid` parent will need a height set for the effect to be visible.

[[code-snippets/grid-align]]
```

--------------------------------

### Contextual Components: [S].Step and [S].Panel

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/stepper/nav/partials/code/component-api.md

Detailed documentation for the sub-components yielded by Stepper::Nav.

```APIDOC
## COMPONENT [S].Step

### Description
Used within Stepper::Nav to define the visual representation of a specific step.

### Named Blocks
- **<:title>** (required) - Block for rendering the step title.
- **<:description>** (optional) - Block for rendering the step description.

---

## COMPONENT [S].Panel

### Description
Used within Stepper::Nav to define the content panel for a specific step.

### Yield
- **content** - Elements passed as children are rendered inside a <section> element.
```

--------------------------------

### Render Hds::Button component

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/testing/markdown/more-complex-code.md

Shows how to implement the Hds::Button component using Handlebars syntax. Includes an example with execution disabled.

```handlebars
<Hds::Button @text="Hello world!" {{on "click" this.noop }} />
```

```handlebars
<Hds::Button @text="Hello world!" {{on "click" this.noop }} />
```

--------------------------------

### App Side Nav - How to Use

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/app-side-nav/index.md

Provides guidance on how to integrate the App Side Nav component into your application.

```APIDOC
## How to Use App Side Nav

This section details the steps and best practices for implementing the App Side Nav component.

### Installation

Refer to the main design system installation guide for package details.

### Basic Usage

```jsx
<AppSideNav>
  <AppSideNavItem label="Dashboard" href="/dashboard" />
  <AppSideNavItem label="Settings" href="/settings" />
</AppSideNav>
```

### Advanced Usage

Customization options and advanced features will be detailed here, including:
- Nested navigation items
- Active item highlighting
- Custom icons
```

--------------------------------

### Flexbox Spacing with Single Gap Value

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/layouts/flex/partials/code/how-to-use.md

Example of using the `@gap` argument in Layout::Flex to set a uniform spacing between all flex items.

```Handlebars
{{#> Layout::Flex @gap="24px"}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
  {{#> Layout::Flex::Item}}
    {{#> Card}}
      {{#> Card::Body}}
        Content
      {{/ Card::Body}}
    {{/ Card}}
  {{/ Layout::Flex::Item}}
{{/ Layout::Flex}}
```

--------------------------------

### Basic Compact Pagination Usage

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/pagination/partials/code/how-to-use.md

Illustrates the basic invocation of the Compact Pagination component, which displays only 'prev' and 'next' navigation controls by default. No specific arguments are required for basic functionality.

```html
<Pagination::Compact />
```

--------------------------------

### Handle Selection Changes with Callback

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/table/advanced-table/partials/code/how-to-use.md

An example of an action handler for the onSelectionChange callback, which receives selection metadata and the list of currently selected keys.

```javascript
@action
demoOnSelectionChange({
  selectionKey,
  selectionCheckboxElement,
  selectableRowsStates,
  selectedRowsKeys
}) {
  selectedRowsKeys.forEach((rowSelectionKey) => {
    // do something using the row’s selectionKey value
  });
}
```

--------------------------------

### How to Use Time Component

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/time/index.md

Demonstrates the basic usage of the Time component. This snippet shows how to import and render the component in your application. It typically takes date/time values as props.

```javascript
import { Time } from "@hashicorp/design-system";

function App() {
  return (
    <Time date="2023-10-27T10:00:00Z" />
  );
}
```

--------------------------------

### Implementing Hds::Icon in Context

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/icon/partials/accessibility/accessibility.md

Demonstrates the recommended way to use an icon alongside text for context. The icon is treated as decorative, ensuring it does not interfere with screen readers.

```markup
<h2>
  Activity report <Hds::Icon @name="activity" />
</h2>
```

--------------------------------

### Importing Sass Breakpoint Helpers

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/foundations/breakpoints/partials/code/how-to-use.md

Demonstrates how to import the HashiCorp design system Sass utilities into your project using the @use rule.

```scss
@use "@hashicorp/design-system-components/styles/breakpoints" as hds;
```

--------------------------------

### How to Use Design Tokens

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/foundations/tokens/index.md

Demonstrates how to integrate and use design tokens within the system. This typically involves importing and applying token values to components or styles.

```hbs
<section data-tab="Library">
  <Doc::TokensList
    @groupedTokens={{this.filteredGroupedTokens}}
    @searchQuery={{this.searchQuery}}
    @searchTokens={{this.searchTokens}}
  />
</section>

<section data-tab="Code">
  @include "partials/code/how-to-use.md"
</section>
```

--------------------------------

### Implement Form::Select::Base component

Source: https://github.com/hashicorp/design-system/blob/main/website/docs/components/form/select/partials/code/component-api.md

Example of using the base select component with standard HTML attributes and Ember event modifiers.

```handlebars
<Form::Select::Base
  id="my-select"
  name="status"
  @isInvalid={{false}}
  @width="200px"
  {{on "change" (fn this.handleChange)}}
/>
```