### Install Dependencies and Start Dev Server

Source: https://github.com/esri/calcite-design-system/blob/dev/examples/components/preact/README.md

Run these commands to install necessary packages and launch the development server for the Preact example.

```sh
npm install
npm run dev
```

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

### Install Dependencies and Start Server

Source: https://github.com/esri/calcite-design-system/blob/dev/examples/components/angular/README.md

Run these commands to install project dependencies and start the development server.

```sh
npm install
npm start
```

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

### Install Dependencies

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/ui-icons/CONTRIBUTING.md

Run this command to install all necessary project dependencies before starting the development server.

```sh
npm install
```

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

### Install Dependencies

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/components-snippets/README.md

Run this command to install the necessary dependencies for the snippet tool.

```bash
npm i
```

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

### Install Calcite UI Icons

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/ui-icons/README.md

Install the package using npm.

```bash
npm install @esri/calcite-ui-icons --save
```

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

### Install Calcite Components

Source: https://github.com/esri/calcite-design-system/blob/dev/examples/components/preact/README.md

Install the Calcite components package using npm.

```sh
npm install @esri/calcite-components
```

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

### Install Calcite Tailwind Preset

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/tailwind-preset/README.md

Install the Calcite Tailwind preset as a development dependency.

```bash
npm install -D @esri/calcite-tailwind-preset
```

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

### Install CSS Loader and Mini CSS Extract Plugin

Source: https://github.com/esri/calcite-design-system/blob/dev/examples/components/webpack/README.md

Install the required packages for extracting CSS into separate files.

```sh
npm install -D mini-css-extract-plugin css-loader
```

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

### Start Demo Pages

Source: https://github.com/esri/calcite-design-system/wiki/Component-Tokens

Run this command to start the demo pages for rapid component development. These pages reload quickly but may not cover all use cases.

```bash
npm --workspace="packages/calcite-components" run start
```

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

### Accessible and Inaccessible Storybook Examples

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-developer-conventions

Examples of how to write Storybook stories for components, demonstrating both accessible and inaccessible implementations. The inaccessible example highlights contrast issues.

```ts
// Accessible example
export const accessibleExample = (): string =>
  html`<button>Accessible button</button>`;

// Inaccessible example due to contrast issues
export const inaccessibleExample = (): string => html`
  <button style="background-color:red;color:darkred">
    Inaccessible button
  </button>
`;

```

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

### Start Local Development Server

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

Start the local Vite development server to view and test components. Changes to component code are reflected automatically.

```sh
npm run start:components
```

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

### Install Calcite Components React Package

Source: https://github.com/esri/calcite-design-system/blob/dev/examples/components/react-18-and-below/README.md

Install the `@esri/calcite-components-react` package to use Calcite components with React.

```sh
npm install @esri/calcite-components-react
```

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

### Install ESLint Plugin

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/eslint-plugin-components/README.md

Install the ESLint plugin as a development dependency in your Lumina project.

```bash
npm i @esri/eslint-plugin-calcite-components --save-dev
```

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

### Clone Repository and Install Dependencies

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

Clone the Calcite Design System repository and install the necessary NPM dependencies to begin development.

```sh
git clone git@github.com:Esri/calcite-design-system.git
cd calcite-design-system
npm install
```

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

### Install Calcite Design Tokens

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/design-tokens/README.md

Install the design tokens module using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @esri/calcite-design-tokens
```

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

### Install Copy Webpack Plugin

Source: https://github.com/esri/calcite-design-system/blob/dev/examples/components/webpack/README.md

Install the `copy-webpack-plugin` as a development dependency to copy Calcite component assets to your output directory.

```sh
npm install -D copy-webpack-plugin
```

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

### Component Token Examples with Descriptions

Source: https://github.com/esri/calcite-design-system/wiki/Tokens-Documentation

Examples of documenting component tokens within a SCSS comment block, illustrating various token types and their descriptions, including state-dependent behavior.

```css
/* mycomponent */
/*
 * --calcite-mycomponent-color-background: Specifies the component's background color.
 * --calcite-mycomponent-button-color-background: Specifies the background color of the component's button.
 * --calcite-mycomponent-button-color-background-hover: Specifies the background color of the component's button when hovered or focused.
 * --calcite-mycomponent-button-color-background-press: Specifies the background color of the component's button when active or pressed.
 * --calcite-mycomponent-selected-icon-color: When `selected`, specifies the color of the component's icon.
 * --calcite-mycomponent-button-color-active: When `selected` or active, specifies the color of the component's button.
 */
 
```

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

### Install Calcite Design Tokens Package

Source: https://github.com/esri/calcite-design-system/wiki/Tokens-Getting-Started

Install the Calcite Design Tokens package using npm. This is required for using core and semantic tokens outside of the calcite-design-system.

```bash
npm install @esri/calcite-design-tokens;

```

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

### Calcite Component Token Example

Source: https://github.com/esri/calcite-design-system/wiki/Tokens-Getting-Started

Demonstrates documenting tokens, deprecating old tokens, and applying tokens as CSS variables using a fallback pattern within SCSS. This example shows how to define and use component-specific tokens, including hover and active states.

```scss
/*
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-button-background-color: Specifies the component's background color.
 * @prop --calcite-el-color-background: [Deprecated] Specifies the component's background color. Use `--calcite-button-background-color` instead.
 */

/* button.scss */
button, a {
    background-color: var(--calcite-button-background-color, var(--calcite-el-color-background, var(--calcite-internal-button-background-color)));

    &:hover,
    &:focus {
        --calcite-internal-button-background-color: var(--calcite-button-background-color-hover, var(--calcite-internal-button-background-color));
    }

    &:active, {
        --calcite-internal-button-background-color: var(--calcite-button-background-color-active, var(--calcite-internal-button-background-color));
    }
}

:host {
    button, a {
        --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
    }
}

:host([kind="brand"]) {
    button, a {
        --calcite-internal-button-background-color: var(--calcite-color-brand);

        &:hover,
        &:focus {
            --calcite-internal-button-background-color: var(--calcite-color-brand-hover);
        }

        &:active {
            --calcite-internal-button-background-color: var(--calcite-color-brand-press);
        }
    }
}
```

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

### Contribution PR Body Example

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

An example of how to structure the body of a pull request summary, including a 'Related Issue' section and a 'Summary' detailing the changes.

```text
Related Issue: <Issue number>

### Summary
Provide additional context for assistive technology users when the component's character limit exceeds the `maxLength` property. Assistive technology users recieve an error message as soon as the character limit is exceeded.
```

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

### Expanded Example: Handling Button Variants with Internal Tokens

Source: https://github.com/esri/calcite-design-system/wiki/Component-Tokens

This SCSS snippet demonstrates an expanded example for handling button variants. It uses an internal token to manage style changes based on host variants, reducing code duplication compared to setting styles for each variant individually.

```scss
/* button.scss */
button {
    background-color: var(--calcite-button-background-color, var(--calcite-internal-button-background-color, transparent));
}

:host(:hover) {
  button {
    --calcite-internal-button-background-color: var(--calcite-color-foreground-2);
  }
}
```

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

### Tablist and Tabpanel Roles Example

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-roles-conventions

Demonstrates the ARIA roles for tablist and tabpanel. Use this structure to create accessible tabbed interfaces.

```html
<!-- Tablist role example -->
<!-- tablist > tab roles -->
<ul role="tablist">
  <li
    role="tab"
    aria-selected="false"
    aria-setsize="3"
    aria-posinset="2"
    tabindex="0"
  >
    Maps
  </li>
  <li
    class="active"
    role="tab"
    aria-selected="true"
    aria-setsize="3"
    aria-posinset="1"
    tabindex="0"
  >
    Layers
  </li>
  <li
    role="tab"
    aria-selected="false"
    aria-setsize="3"
    aria-posinset="3"
    tabindex="0"
  >
    Data
  </li>
</ul>
<!-- Tabpanel roles -->
<div class="panels">
  <article role="tabpanel" aria-hidden="true">..Maps panel content..</article>
  <article class="active-panel" role="tabpanel" aria-hidden="false">
    ..Layers panel content..
  </article>
  <article role="tabpanel" aria-hidden="true">..Data panel content..</article>
</div>
```

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

### HTML Menu Role Example

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-roles-conventions

Demonstrates the ARIA 'menu' role for dropdown-like interfaces. Supports single selection with 'menuitemradio' and multi-selection with 'menuitemcheckbox'.

```html
<!-- Menu role example -->
<div class="dropdown">
  <button type="button" id="dropdown-menu">
    Actions
    <span class="caret"></span>
  </button>
  <!-- Selection mode: Single -->
  <ul role="menu">
    Create
    <li><a role="menuitemradio" class="dropdown-item">Event</a></li>
    <li>
      <a role="menuitemradio" class="dropdown-item" aria-checked="true"
        >Survey</a
      >
    </li>
    <li><a role="menuitemradio" class="dropdown-item">Poll</a></li>
  </ul>
  <ul class="dropdown-separator" role="separator"></ul>
  <!-- Selection mode: Multi -->
  <ul role="menu">
    Save
    <li><a role="menuitemcheckbox" class="dropdown-item">Save</a></li>
    <li><a role="menuitemcheckbox" class="dropdown-item">Duplicate</a></li>
  </ul>
</div>
```

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

### Example PR Body for Breaking Change

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

A succinct description for a PR's body that includes a related issue and a BREAKING CHANGE note for users.

```text
Related Issue: <Issue number>
BREAKING CHANGE: For consistency, renames `width` property to `widthScale`.
```

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

### Run Development Server

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/ui-icons/CONTRIBUTING.md

Execute this command to start the development server. It optimizes icons, generates icon path data, and enables live reloading for immediate feedback on changes.

```sh
npm start
```

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

### Demo Page Custom Theme Application

Source: https://github.com/esri/calcite-design-system/wiki/Component-Tokens

An HTML snippet demonstrating how to apply custom themes to components using the `demo-theme` element. It shows how to pass token variables.

```html
<demo-theme tokens="--calcite-tokens, --calcite-tokens-as-list">
  <!-- component HTML -->
</demo-theme>
```

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

### Example Deprecation Comment

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/stylelint-plugin-components/src/rules/deprecation-format/README.md

An example of a deprecation comment for a CSS custom property, indicating its deprecated status and suggesting an alternative.

```css
/* @prop --my-token: [Deprecated] in v1.2.3, removal target v3 - Use alternative instead.*/
```

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

### Set Component Tokens with demo-theme

Source: https://github.com/esri/calcite-design-system/wiki/Tokens-Testing

Demonstrates how to apply multiple component tokens to a `calcite-button` using the `<demo-theme>` component.

```html
<demo-theme tokens="
    --calcite-button-background-color, 
    --calcite-button-border-color, 
    --calcite-button-corner-radius, 
    --calcite-button-corner-radius-start-start, 
    --calcite-button-corner-radius-start-end, 
    --calcite-button-corner-radius-end-start, 
    --calcite-button-corner-radius-end-end, 
    --calcite-button-loader-color, 
    --calcite-button-shadow, 
    --calcite-button-text-color, 
    --calcite-button-icon-color"
><calcite-button kind="inverse" scale="l"> Button </calcite-button></demo-theme>
```

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

### Preview Storybook for Chromatic Tests

Source: https://github.com/esri/calcite-design-system/wiki/Component-Tokens

Execute this command to preview Storybook for Chromatic tests. Manually navigate through component pages to verify visual consistency before submitting a Pull Request.

```bash
npm --workspace="packages/calcite-components" run screenshot-tests:preview
```

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

### Run Snippet Tool

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/components-snippets/README.md

Execute the snippet tool from the command line. You can specify a component name or be prompted to select one.

```bash
npx snippet [component]
```

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

### Example Conventional Commit for Modal Refactor

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

An example of a conventional commit message for a refactoring breaking change in the Modal component, indicating a property rename.

```text
refactor(modal)!: rename `width` property to `widthScale`
```

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

### Radiogroup Semantic HTML Example

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-roles-conventions

Provides an example of a radiogroup implemented using semantic HTML elements, which can often provide better accessibility by default.

```html
<fieldset>
  <legend>Choose one:</legend>
  <input type="radio" id="radio-1" name="options" value="option1" checked>
  <label for="radio-1">Option 1</label><br>
  <input type="radio" id="radio-2" name="options" value="option2">
  <label for="radio-2">Option 2</label><br>
</fieldset>
```

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

### Lint and Test within a Specific Package Directory

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

Navigate into a package directory (e.g., 'packages/components') and run its local linting and testing scripts.

```sh
cd packages/components
# the following will only lint and test calcite-components
npm run lint
npm test
```

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

### Failed Accessibility Test Example

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-developer-conventions

This example shows the output of a failed accessibility test, highlighting specific ARIA attribute violations that need to be fixed.

```sh
FAIL src/components/tree/tree.e2e.ts (23.34 s)
  ● calcite-tree › is accessible: with nested children

    expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $("calcite-tree[slot=\"children\"]") to have no violations:

    <calcite-tree slot="children" aria-multiselectable="false" tabindex="-1" lines="" child="" scale="m" selection-mode="single" calcite-hydrated="">

    Received:

    "Elements must only use allowed ARIA attributes (aria-allowed-attr)"

    Fix any of the following:
      ARIA attribute is not allowed: aria-multiselectable="false"

    You can find more information on this issue here:
    https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr?application=axeAPI

      54 |       getTag(componentTagOrHTML)
      55 |     )
      56 |   ).toHaveNoViolations();
         |     ^
      57 | }
      58 | 
      59 | export async function renders(

```

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

### Reset package-lock.json and Install Dependencies

Source: https://github.com/esri/calcite-design-system/wiki/troubleshoot-build-errors

Use this command to fix 'globby' module export errors by resetting the package-lock.json to a working version and then installing dependencies.

```sh
git checkout $(git for-each-ref refs/tags --count=1 --sort=-taggerdate --format='%(refname:short)') -- package-lock.json
npm install
```

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

### Build Design Tokens

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/design-tokens/CONTRIBUTING.md

Run this command to build the design tokens into various platform asset formats such as CSS, SCSS, and JavaScript.

```bash
npm --workspace=packages/design-tokens run build
```

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

### Conventional Commit Example for Bug Fix

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

An example of a conventional commit message for a bug fix in the 'text-area' component, adhering to the '<type>(<scope>): <descriptive summary>' format.

```text
fix(text-area): provide additional support to assistive technologies
```

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

### Install Dependency to Specific Workspace

Source: https://github.com/esri/calcite-design-system/wiki/monorepo

Use this command to install a dependency to a specific package's `package.json` within the monorepo. Ensure the workspace name matches the 'name' field in the target `package.json`.

```sh
npm install --workspace=@esri/calcite-components @stencil/core
```

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

### HTML Select and Option Elements

Source: https://github.com/esri/calcite-design-system/blob/dev/packages/components/FAQ.md

Illustrates the default slot concept using standard HTML select and option elements.

```html
<select>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
</select>
```

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

### Initialize Global Calcite Config

Source: https://github.com/esri/calcite-design-system/wiki/global-config

Set up the global `calciteConfig` object to enable runtime configuration for Calcite components. This is the basic structure for component options.

```js
window.calciteConfig = {
  // calcite-component options
};
```

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

### Run All Tests

Source: https://github.com/esri/calcite-design-system/blob/dev/CONTRIBUTING.md

Execute the complete test suite for the Calcite Components. This command initiates all defined tests.

```bash
npm test
```

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

### Tablist ARIA Role Example

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-roles-conventions

Demonstrates the ARIA roles for a tablist component. Use this for navigation between different content panels.

```html
<div role="tablist" aria-label="Content Tabs">
  <button role="tab" aria-selected="true" aria-controls="tab-panel-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="tab-panel-2">Tab 2</button>
</div>
<div role="tabpanel" id="tab-panel-1">Content for Tab 1</div>
<div role="tabpanel" id="tab-panel-2" hidden>Content for Tab 2</div>
```

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

### Radiogroup ARIA Role Example

Source: https://github.com/esri/calcite-design-system/wiki/accessibility-roles-conventions

Shows the ARIA roles for a radiogroup component. This is used for a set of radio buttons where only one can be selected.

```html
<div role="radiogroup" aria-labelledby="label-id">
  <div id="label-id">Choose one:</div>
  <div role="radio" tabindex="0" aria-checked="true" id="radio-1">Option 1</div>
  <div role="radio" tabindex="-1" aria-checked="false" id="radio-2">Option 2</div>
</div>
```