### Starting Development Server Bash

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

This command starts the local development server for the project.

```bash
npm run start
```

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

### Install Global Dependencies (npm)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/docs/README.md

Installs the necessary PostCSS command-line interface, Autoprefixer, and CSSNano globally using npm. These tools are required to process the CSS files.

```shell
npm install -g postcss-cli autoprefixer cssnano
```

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

### Install Ninja Keys via CDN (HTML Script Tag)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Includes the ninja-keys library directly in an HTML file using a script tag with the module type, fetching from a CDN.

```html
<script type="module" src="https://unpkg.com/ninja-keys?module"></script>
```

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

### Install Ninja Keys via NPM

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Installs the ninja-keys library using the npm package manager, typically for projects using a build system.

```bash
npm i ninja-keys
```

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

### Run CSS Build with Autoprefixer and Minification (Production)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/docs/README.md

Executes the npm script named 'production' which processes the CSS file, adds vendor prefixes using Autoprefixer, and minifies the output using CSSNano, intended for production builds.

```shell
npm run production
```

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

### Run CSS Build with Autoprefixer (Development)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/docs/README.md

Executes the npm script named 'build' which processes the CSS file and adds vendor prefixes using Autoprefixer, suitable for development builds.

```shell
npm run build
```

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

### Run Tailwind CSS Processing (Development)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/docs/README.md

Executes the npm script named 'tailwind' which performs basic processing of the CSS file, typically used during development.

```shell
npm run tailwind
```

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

### Example Ninja Keys Tree Data Structure

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Illustrates an alternative tree-like structure for defining nested menu items within the ninja-keys data array, providing another way to organize actions.

```javascript
{
  id: 'Theme',
  children: [
    { id: 'light' title: 'light_mode', },
    { id: 'System Theme',
      children: [
        { title: 'Sub item 1' },
        { title: 'Sub item 2' }
      ]
    }
  ]
}
```

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

### Customizing Ninja Keys CSS Variables (CSS)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Provides an example of how to override a default CSS variable (`--ninja-width`) to customize the appearance of the `ninja-keys` component using standard CSS.

```css
ninja-keys {
  --ninja-width: 400px;
}
```

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

### Handling Ninja Keys Events (JavaScript)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Demonstrates how to attach event listeners to the `ninja-keys` component for the `change` and `selected` events, showing how to access event details like the search query and actions.

```javascript
ninja.addEventListener('change', (event) => {
  console.log('ninja on change', event.detail);
  // detail = {search: 'your search query', actions: Array<NinjaAction>}
})
ninja.addEventListener('selected', (event) => {
  console.log('ninja on selected', event.detail);
  // detail = {search: 'your search query', action: NinjaAction | undefined }
  if (event.detail.action){
  // perform API search for example
  }
   
})
```

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

### Opening ninja-keys Menu JavaScript

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Shows how to programmatically open the `ninja-keys` menu using the `open` method. It demonstrates opening the root menu or a specific submenu by providing a `parent` ID.

```js
const ninja = document.querySelector('ninja-keys');
ninja.open()
// or
ninja.open({ parent: 'Theme' })
```

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

### Initialize and Configure Ninja Keys with Data

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Selects the ninja-keys custom element and assigns an array of action objects to its 'data' property to define available commands, their hotkeys, icons, sections, and handler functions.

```javascript
const ninja = document.querySelector('ninja-keys');
ninja.data = [
  {
    id: 'Projects',
    title: 'Open Projects',
    hotkey: 'ctrl+N',
    icon: 'apps',
    section: 'Projects',
    handler: () => {
      // it's auto register above hotkey with this handler
      alert('Your logic to handle');
    },
  },
  {
    id: 'Theme',
    title: 'Change theme...',
    icon: 'desktop_windows',
    children: ['Light Theme', 'Dark Theme', 'System Theme'],
    hotkey: 'ctrl+T',
    handler: () => {
      // open menu if closed. Because you can open directly that menu from it's hotkey
      ninja.open({ parent: 'Theme' });
      // if menu opened that prevent it from closing on select that action, no need if you don't have child actions
      return {keepOpen: true};
    },
  },
  {
    id: 'Light Theme',
    title: 'Change theme to Light',
    icon: 'light_mode',
    parent: 'Theme',
    handler: () => {
      // simple handler
      document.documentElement.classList.remove('dark');
    },
  },
  {
    id: 'Dark Theme',
    title: 'Change theme to Dark',
    icon: 'dark_mode',
    parent: 'Theme',
    handler: () => {
      // simple handler
      document.documentElement.classList.add('dark');
    },
  }
];
```

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

### Enabling Dark Theme for Ninja Keys (HTML)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Shows how to apply the built-in dark theme to the `ninja-keys` component by adding the `dark` class to the element.

```html
<ninja-keys class="dark"></ninja-keys>
```

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

### Running Code Linting Bash

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

This command executes the linting process for the project to check for code style and potential errors.

```bash
npm run lint
```

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

### Customizing ninja-keys Attributes HTML

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Demonstrates how to customize the `ninja-keys` web component by setting attributes like `placeholder`, `openHotkey`, and `hideBreadcrumbs` directly in the HTML tag.

```html
<ninja-keys placeholder="Must app is awesome" openHotkey="cmd+l" hideBreadcrumbs></ninja-keys>
```

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

### Styling Ninja Keys with CSS Shadow Parts (CSS)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Illustrates how to use the `::part` pseudo-element to target and style specific internal elements of the `ninja-keys` component, such as the actions list, individual actions, input, and input wrapper.

```css
ninja-keys::part(actions-list) {
  padding: 8px;
}
ninja-keys::part(ninja-action) {
  border-radius: 8px;
  border-left: none;
}

ninja-keys::part(ninja-selected) {
  background: rgba(51, 51, 51, 0.1);
}

ninja-keys::part(ninja-input) {
  color: #14b8a6;
}

ninja-keys::part(ninja-input)::placeholder {
  color: #f43f5e;
}

ninja-keys::part(ninja-input-wrapper) {
  background: rgba(244, 63, 93, 0.3);
}
```

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

### Import Ninja Keys Module (Build Systems)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Imports the ninja-keys module into a JavaScript file when using a build system like webpack, rollup, or vite.

```javascript
import 'ninja-keys';
```

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

### Adding Material Icons HTML

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

This snippet shows how to include the Material Icons stylesheet from Google Fonts in your HTML document. This is required to use Material Icons with the component.

```html
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
```

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

### Defining Custom SVG Icon for Action JS

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

This JavaScript object demonstrates how to define a custom SVG icon for an action using the `icon` property. The SVG content is provided directly as a string and should include the `ninja-icon` class for proper styling.

```js
{
  title: 'Search projects...',
  icon: `<svg xmlns="http://www.w3.org/2000/svg" class="ninja-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 012-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
  </svg>`,
  section: 'Projects',
}
```

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

### Add Ninja Keys Custom Element to HTML

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Adds the custom HTML element for the ninja-keys interface to the document body, which serves as the container for the keyboard shortcut UI.

```html
<ninja-keys> </ninja-keys>
```

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

### Customizing Footer HTML

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

This HTML snippet demonstrates how to replace or hide the default footer of the `ninja-keys` component by providing custom content within a `div` element with the `slot="footer"` attribute.

```html
<ninja-keys> 
  <div slot="footer">You can use a custom footer or empty div to hide it</div>
</ninja-keys>
```

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

### Import Ninja Keys Class via CDN (JS Module)

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

Imports the NinjaKeys class specifically within a JavaScript module script when using a CDN, allowing direct access to the class.

```javascript
import {NinjaKeys} from 'https://unpkg.com/ninja-keys?module';
```

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

### Customizing Icon Size CSS

Source: https://github.com/ssleptsov/ninja-keys/blob/main/README.md

This CSS snippet shows how to customize the size of icons within the `ninja-keys` component by setting the `--ninja-icon-size` CSS variable.

```css
ninja-keys {
  --ninja-icon-size: 1em;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.