### Install Lion Ajax Package

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Installs the `@lion/ajax` package, providing utilities for handling asynchronous requests, via npm.

```npm
npm i @lion/ajax
```

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

### Initialize Open-WC Project

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Command to scaffold a new web component project using the Open Web Components generator, providing a structured starting point for development.

```npm
npm init @open-wc
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Installs the core `@lion/ui` package, which contains the main UI components for Lion Web Components, via npm.

```npm
npm i @lion/ui
```

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

### Install Singleton Manager Package

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Installs the `singleton-manager` package, often used for managing single instances of services or objects, via npm.

```npm
npm i --save singleton-manager
```

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

### Fetch Data with Lion Ajax System

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Example of using the `@lion/ajax` system to perform an HTTP GET request to fetch `data.json`, parse the JSON response, and then process the retrieved data within a script module.

```JavaScript
<script type="module">
  import { ajax } from '@lion/ajax';

  ajax
    .fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // do something with the data
    });
</script>
```

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

### Basic publish-docs CLI Usage Examples

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/publish-docs/overview

Demonstrates how to use the `publish-docs` command-line tool with various flags like `github-url` and `git-root-dir` for publishing documentation. These examples show common invocation patterns for different project setups.

```Shell
cd packages/my-pkg/
publish-docs --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../
publish-docs --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../ --copy-dir docs/my-components/assets
```

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

### Mono-Repo Documentation: Source Markdown File Example

Source: https://lion.js.org/fundamentals/systems/core/overview/blog/introducing-lions-website

This example shows a markdown file located in the root `docs` folder, which serves as the primary source of documentation for a component within a mono-repository setup.

```markdown
# Accordion

Is a very useful...
```

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

### Single Repo Component Import Example

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview

Shows how users would import `WolfTabs` and its definition in a single repository setup, where components are imported from a consolidated package like `wolf-web`.

```js
// provide classes as side effect free imports
import { WolfTabs } from 'wolf-web/tabs';
// register web components via `/define`
import 'wolf-web/tabs/define';
```

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

### Configure VS Code for Lion UI Code Completion

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

JSON snippet to be added to `.vscode/settings.json` to enable custom HTML data, allowing Visual Studio Code to provide intelligent code completion for `@lion/ui` components.

```JSON
"html.customData": ["./node_modules/@lion/ui/vscode.html-custom-data.json"]
```

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

### Extend Lion Web Component with Lit

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Demonstrates how to import a Lion component (`LionInput`), extend it with custom styles using Lit's `css` tag, and define a new custom element (`my-input`). This is highlighted as the primary use case for Lion.

```JavaScript
import { css } from 'lit';
import { LionInput } from '@lion/ui/input.js';

class MyInput extends LionInput {
  static get styles() {
    return [
      ...super.styles,
      css`
        /* your styles here */
      `,
    ];
  }
}
customElements.define('my-input', MyInput);
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/overlays/overview

Command to install the `@lion/ui` package, which contains the overlay system and other Lion UI components, using npm.

```bash
npm i --save @lion/ui
```

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

### Install @lion/helpers Package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/helpers/action-logger

Instructions for installing the `@lion/helpers` package using npm, which contains the `sb-action-logger` component and other utilities.

```Shell
npm i @lion/helpers
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/form/overview

Command to install the `@lion/ui` package using npm, saving it as a dependency in the project's `package.json` file.

```shell
npm i --save @lion/ui
```

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

### Run Complex Singleton Manager Compatibility Example C

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/singleton-manager/overview

Command to execute the demonstration application for the complex singleton manager example, which handles more significant breaking changes requiring multiple compatible instances.

```bash
npm run start:singleton-complex
```

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

### Directly Use Lion Web Component in HTML

Source: https://lion.js.org/fundamentals/systems/core/overview/guides/how-to/get-started

Illustrates how to import and define a Lion Web Component (`lion-input`) directly in an HTML file using a script tag, and then use the custom element with attributes like `name` and `label`.

```HTML
<script type="module">
  import '@lion/ui/define/lion-input.js';
</script>

<lion-input name="firstName" label="First name"></lion-input>
```

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

### Install babel-plugin-extend-docs

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/babel-plugin-extend-docs/overview

Instructions for installing the `babel-plugin-extend-docs` Babel plugin as a development dependency using npm.

```bash
npm i -D babel-plugin-extend-docs

```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-email/overview

Command to install the `@lion/ui` package as a dependency using npm.

```bash
npm i --save @lion/ui
```

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

### Install Singleton Manager Package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/singleton-manager/overview

This command installs the `singleton-manager` package as a dependency in your project using npm. It is crucial to ensure that only one version of `singleton-manager` is installed to prevent potential conflicts or unexpected behavior.

```Shell
npm i --save singleton-manager

```

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

### Monorepo Component Import Example

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview

Illustrates how users would import `WolfTabs` and its definition in a monorepo setup, where components are provided as side-effect free imports and registered via a `/define` path.

```js
// provide classes as side effect free imports
import { WolfTabs } from '@wolf/tabs';
// register web components via `/define`
import '@wolf/tabs/define';
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/steps/overview

Provides the command to install the `@lion/ui` package using npm, which contains the Lion Steps components. This is the essential first step to integrate these web components into a project's dependencies.

```bash
npm i --save @lion/ui
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input/overview

Provides the command to install the `@lion/ui` package using npm, adding it as a production dependency to the project.

```Bash
npm i --save @lion/ui
```

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

### Install Rocket Preset Extend Lion Docs

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview

Installs the `rocket-preset-extend-lion-docs` package as a development dependency using npm.

```bash
npm i -D rocket-preset-extend-lion-docs
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/progress-indicator/overview

Command to install the `@lion/ui` package using npm, adding it as a dependency to your project.

```bash
npm i --save @lion/ui
```

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

### Run Failing Singleton Example

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/singleton-manager/overview

Provides the command to execute the example application that demonstrates a 'fail' scenario. In this scenario, two separate `OverlaysManager` instances conflict, leading to unexpected behavior.

```bash
npm run start:fail
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/core/overview

Provides the npm command to install the `@lion/ui` package, saving it as a dependency in the project's `package.json` file.

```Shell
npm i --save @lion/ui
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/fieldset/overview

Command to install the `@lion/ui` package using npm, saving it as a dependency in the project's `package.json` file.

```bash
npm i --save @lion/ui
```

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

### Install @open-wc/demoing-storybook via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/blog/extending-documentation

This command installs the `@open-wc/demoing-storybook` package as a development dependency, which is a prerequisite for extending Lion documentation and using Prebuilt Storybook with MDJS.

```npm
npm i @open-wc/demoing-storybook --save-dev
```

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

### Install Wolf Tabs Component

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview

Installs the `@wolf/tabs` package as a production dependency for the custom design system.

```bash
npm i --save @wolf/tabs
```

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

### Install Lion UI Package with npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/tooltip/overview

This command installs the `@lion/ui` package, which includes the `lion-tooltip` component and other Lion UI components, as a production dependency in your project using npm.

```shell
npm i --save @lion/ui
```

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

### Installation via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/form/validate

Provides the command to install the `@lion/ui` package using npm, saving it as a dependency in the project.

```Shell
npm i --save @lion/ui
```

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

### Install Lion Helpers Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/helpers/overview

This snippet shows the command to install the `@lion/helpers` package, which provides various utility functions and components for Lion projects, using the npm package manager.

```bash
npm i @lion/helpers
```

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

### Install Lion UI Package with npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-date/overview

Provides the command-line instruction to install the `@lion/ui` package as a project dependency using the Node Package Manager (npm).

```Shell
npm i --save @lion/ui
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-amount/overview

Provides the command to install the `@lion/ui` package using npm. This command adds the package as a dependency to the project, making the Lion UI components available for use.

```Shell
npm i --save @lion/ui
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-tel/overview

Command to install the `@lion/ui` package, which provides the `lion-input-tel` component and other UI elements, as a production dependency using npm.

```Shell
npm i --save @lion/ui
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/dialog/overview

This command installs the `@lion/ui` package and saves it as a dependency in your project's `package.json` file, providing access to Lion components like `lion-dialog`.

```bash
npm i --save @lion/ui
```

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

### Install Lion UI Localization Package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/localize/overview

This command installs the `@lion/ui` package, which contains the localization functionalities, as a production dependency in your project using npm.

```bash
npm i --save @lion/ui
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/textarea/overview

Installs the `@lion/ui` package using npm, saving it as a dependency in the project's `package.json` file. This command is required to use Lion UI components.

```Bash
npm i --save @lion/ui
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-datepicker/overview

Provides the npm command to install the `@lion/ui` package, which contains the `lion-input-datepicker` component and other related UI components.

```Shell
npm i --save @lion/ui
```

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

### Install Lion Ajax Package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/ajax/overview

This command installs the `@lion/ajax` package using npm, saving it as a dependency in your project's `package.json` file. This is the first step to integrate the Lion Ajax utility into your JavaScript application.

```Shell
npm i --save @lion/ajax
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-stepper/overview

Provides the command to install the `@lion/ui` package using npm, which is the primary method for obtaining Lion UI components for development.

```npm
npm i --save @lion/ui
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/combobox/overview

This command installs the `@lion/ui` package and its dependencies, saving it to the project's `package.json` file. This is the first step to include Lion UI components in a project.

```bash
npm i --save @lion/ui
```

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

### Original Lion Tabs LitElement Script Example

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview

An example of a JavaScript script block from the original Lion documentation, showing imports for LitElement and the `lion-tabs.js` definition.

```js
import { LitElement, html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-tabs.js';
```

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

### Install Lion UI Package via NPM

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-file/overview

Provides the command to install the `@lion/ui` package, which contains the `lion-input-file` component, as a project dependency using npm.

```NPM
npm i --save @lion/ui
```

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

### Run Singleton Manager Compatibility Example B

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/singleton-manager/overview

Command to execute the demonstration application showcasing the singleton manager's ability to provide compatibility for simple function renames in the `OverlayManager`.

```bash
npm run start:singleton
```

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

### JavaScript: SlotMixin `get slots()` Comprehensive Example

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/core/SlotMixin

Demonstrates returning all `SlotFunctionResult` types (Element, TemplateResult, SlotRerenderObject, undefined) within the `get slots()` method for various light DOM rendering scenarios.

```javascript
class MyAccessibleControl extends SlotMixin(LitElement) {
 get slots() {
   return {
     ...super.slots,
     // Element
     'public-element-slot': () => document.createElement('input'),
     // TemplateResult
     '_private-template-slot': () => html`<wc-rendered-to-light-dom></wc-rendered-to-light-dom>`,
     // SlotRerenderObject
     'rerenderable-slot': () => {
       return {
         template: html`<w-c>${this.litProperty}</w-c>`,
       }
     },
     // undefined (conditional slot)
     '': () => {
        if (conditionApplies) {
          return html`<div>default slot</div>`;
        }
        return undefined;
      },
   };
 }
}
```

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

### Perform GET JSON Request with Lion AJAX

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/ajax/use-cases

Illustrates how to make a GET request for JSON data using `ajax.fetchJson`. This method automatically handles JSON serialization/deserialization and content headers. The example integrates with Lit HTML for UI interaction and logs the parsed response body.

```JavaScript
export const getJsonRequest = () => {
  const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);

  const fetchHandler = name => {
    ajax.fetchJson(`../assets/${name}.json`).then(result => {
      console.log(result.response);
      actionLogger.log(JSON.stringify(result.body, null, 2));
    });
  };

  return html`
    <style>
      sb-action-logger {
        --sb-action-logger-max-height: 300px;
      }
    </style>
    <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
    <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
    ${actionLogger}
  `;
};
```

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

### Perform a GET Request with Lion Ajax

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/ajax/use-cases

This snippet demonstrates how to make a basic GET request using the `ajax.fetch` method. It fetches JSON data from a specified asset path and logs the response. The example includes buttons to trigger fetches for different data sources ('pabu.json' and 'naga.json') and displays the results in an action logger.

```JavaScript
export const getRequest = () => {
  const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);

  const fetchHandler = name => {
    ajax
      .fetch(`../assets/${name}.json`)
      .then(response => response.json())
      .then(result => {
        actionLogger.log(JSON.stringify(result, null, 2));
      });
  };

  return html`
    <style>
      sb-action-logger {
        --sb-action-logger-max-height: 300px;
      }
    </style>
    <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
    <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
    ${actionLogger}
  `;
};
```

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

### Example Usage of Lion Steps Web Component

Source: https://lion.js.org/fundamentals/systems/core/overview/components/steps/overview

Demonstrates the basic structure and interaction of the `lion-steps` web component, allowing users to navigate between defined steps using 'Next' and 'Previous' buttons. It showcases how to define individual steps and control their flow within a multi-step process.

```html
export const main = () => html`
  <lion-steps>
    <lion-step initial-step>
      Step 1
      <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
        Next
      </button>
    </lion-step>
    <lion-step>
      <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
        Previous
      </button>
      Step 2
      <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
        Next
      </button>
    </lion-step>
    <lion-step>
      <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
        Previous
      </button>
      Step 3
    </lion-step>
  </lion-steps>
`;
```

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

### Mono-Repo Documentation: Package README Reference Example

Source: https://lion.js.org/fundamentals/systems/core/overview/blog/introducing-lions-website

This snippet demonstrates how a `README.md` file within a component's package references its source documentation file in the `docs` folder. During the `prepublishOnly` step, a `publish-docs` tool replaces this reference with the actual content of the source file.

```markdown
# Accordion

[=> See Source <=](../../docs/components/accordion/overview.md)
```

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

### Example of New Website Documentation Format

Source: https://lion.js.org/fundamentals/systems/core/overview/blog/introducing-lions-website

This snippet demonstrates the updated documentation format for the new Lion website. Key changes include integrating title/navigation into the headline, using package entry points for imports, and adjusting links to be relative file paths.

```markdown
# Component >> Calendar ||20

`lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](../../path/to/calendar.md).
```

```javascript
import { html, css } from '@lion/core';
import '@lion/calendar/define';
```

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

### Get and set checked index and value for lion-select-rich

Source: https://lion.js.org/fundamentals/systems/core/overview/components/select-rich/use-cases

This example demonstrates how to programmatically control and retrieve the `checkedIndex` and `modelValue` of a `lion-select-rich` component. It includes an input field to set the `checkedIndex` and a button to log both the `checkedIndex` and the `modelValue` to the console, showcasing dynamic interaction.

```JavaScript
export const checkedIndexAndValue = ({ shadowRoot }) => html`
  <style>
    .log-button {
      margin: 10px 0;
    }
  </style>
  <div>
    <label id="label-richSelectCheckedInput" for="richSelectCheckedInput">
      Set the checkedIndex
    </label>
    <input
      id="richSelectCheckedInput"
      aria-labelledby="label-richSelectCheckedInput"
      type="number"
      @change=${e => {
        const selectEl = shadowRoot.querySelector('#checkedRichSelect');
        selectEl.checkedIndex = Number(e.target.value);
      }}
    />
  </div>
  <button
    class="log-button"
    @click=${() => {
      const selectEl = shadowRoot.querySelector('#checkedRichSelect');
      console.log(`checkedIndex: ${selectEl.checkedIndex}`);
      console.log(`modelValue: ${selectEl.modelValue}`);
    }}
  >
    Console log checked index and value
  </button>
  <lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color">
    <lion-option .choiceValue="${"red"}">Red</lion-option>
    <lion-option .choiceValue="${"hotpink"}" checked>Hotpink</lion-option>
    <lion-option .choiceValue="${"teal"}">Teal</lion-option>
  </lion-select-rich>
`;
```

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

### Demonstrating Cache Invalidation with Non-GET Requests

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/ajax/use-cases

This JavaScript snippet illustrates how a PATCH request to an endpoint invalidates its client-side cache, ensuring subsequent GET requests fetch the latest data. It uses `ajax.fetchJson` to make requests and logs whether the response was served from cache. The example uses Lit HTML for UI rendering.

```JavaScript
export const nonGETRequest = () => {
  const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);

  const fetchHandler = (name, method) => {
    ajax.fetchJson(`../assets/${name}.json`, { method }).then(result => {
      actionLogger.log(`From cache: ${result.response.fromCache || false}`);
      actionLogger.log(JSON.stringify(result.body, null, 2));
    });
  };

  return html`
    <style>
      sb-action-logger {
        --sb-action-logger-max-height: 300px;
      }
    </style>
    <button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
    <button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
    <button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
    <button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
    ${actionLogger}
  `;
};
```

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

### Install publish-docs npm package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/publish-docs/overview

Adds the 'publish-docs' package as a development dependency to your project using npm.

```bash
npm i -D publish-docs
```

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

### Example Application Dependency Tree

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/singleton-manager/overview

Illustrates a typical `node_modules` dependency tree structure where different pages within an application (page-a, page-b) utilize different versions of the same package (overlays), highlighting the challenge that a singleton manager aims to solve.

```plaintext
my-app (node_modules)
├── overlays (1.x)
├── page-a
│ └── page-a.js
└── page-b
├── node_modules
│ └── overlays (2.x)
└── page-b.js
```

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

### Scaffold @open-wc project with basic configuration

Source: https://lion.js.org/fundamentals/systems/core/overview/blog/extending-documentation

This command initializes a new project using `@open-wc` scaffolding, providing a basic configuration for setting up a Storybook environment.

```npm
npm init @open-wc
```

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

### Example of lion-textarea with Intersection Observer in a hidden container

Source: https://lion.js.org/fundamentals/systems/core/overview/components/textarea/use-cases

This JavaScript code demonstrates a `lion-textarea` component configured with `max-rows` inside a `div` that is initially hidden (`display: none`). A button is provided to toggle the visibility of this container. This setup illustrates how the `Intersection Observer` (implicitly used by `lion-textarea` as described in the text) ensures the textarea correctly calculates and applies its `max-rows` when it becomes visible, even though it was initially rendered in a hidden state.

```JavaScript
export const hidden = () => html`
  <div style="display: none">
    <lion-textarea
      .modelValue="${"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}"
      label="Stops growing after 4 rows"
      max-rows="4"
    ></lion-textarea>
  </div>
  <button
    @click=${e =>
      (e.target.previousElementSibling.style.display =
        e.target.previousElementSibling.style.display === 'block' ? 'none' : 'block')}
  >
    Toggle display
  </button>
`;
```

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

### Basic Usage Example of Lion Input Stepper

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-stepper/overview

Demonstrates the basic HTML structure for integrating the `lion-input-stepper` web component, including setting `max`, `min`, and `name` attributes, and utilizing the `label` and `help-text` slots for additional information.

```HTML
<lion-input-stepper max="5" min="0" name="count">
  <label slot="label">RSVP</label>
  <div slot="help-text">Max. 5 guests</div>
</lion-input-stepper>
```

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

### Example of Old Storybook Documentation Format

Source: https://lion.js.org/fundamentals/systems/core/overview/blog/introducing-lions-website

This snippet illustrates the previous documentation format used with Storybook, showing how a component's documentation was structured, including its title, dependencies, and embedded JavaScript for Storybook configuration.

```markdown
# Calendar

`lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](?path=/docs/calendar--default-story).
```

```javascript
import { html, css } from '@lion/core';
import './lion-calendar.js';

export default {
  title: 'Others/Calendar',
};
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/button/overview

Installs the `@lion/ui` package as a project dependency using the npm package manager.

```npm
npm i --save @lion/ui
```

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

### Install remark-extend via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/remark-extend/overview

This snippet provides the command to install the `remark-extend` package as a development dependency using npm.

```bash
npm i -D remark-extend
```

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

### Instantiate OverlayController Directly

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/overlays/overview

Shows how to create an instance of `OverlayController` directly, providing configuration, invoker, and content nodes. This approach offers more granular control over overlay behavior outside of a web component context.

```JavaScript
import { OverlayController } from '@lion/ui/overlays.js';

const ctrl = new OverlayController({
  ...withModalDialogConfig(),
  invokerNode,
  contentNode,
});
```

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

### Install Lion UI Package

Source: https://lion.js.org/fundamentals/systems/core/overview/components/accordion/overview

Installs the `@lion/ui` package, which includes the Lion Accordion component, as a dependency in your project using npm.

```shell
npm i --save @lion/ui
```

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

### Perform a Simple GET Request with ajax.fetch

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/ajax/overview

Demonstrates how to make a basic GET request using `ajax.fetch` and parse the JSON response.

```JavaScript
// A simple GET request
const response = await ajax.fetch('/api/foo');
const data = await response.json(); // or .text(), .clone(), .formData(), etc
```

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

### JavaScript Example for Default Overlay Backdrop Animation

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/overlays/use-cases

Shows a JavaScript code snippet demonstrating the usage of an overlay with a backdrop, leveraging the default animation system provided by the overlay component. This example is similar to the declarative approach but highlights the context of backdrop animations.

```JavaScript
export const backdropAnimation = () => {
  const responsiveModalDialogConfig = { ...withModalDialogConfig() };
  return html`
    <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
      <button slot="invoker">Click me to open the overlay!</button>
      <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
      <div slot="content" class="demo-overlay">
        Hello! You can close this notification here:
        <button
          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
        >
          ⨯
        </button>
      </div>
    </demo-el-using-overlaymixin>
  `;
};
```

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

### Perform a Simple GET Request with ajax.fetchJson

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/tools/ajax/overview

Illustrates a basic GET request using `ajax.fetchJson`, which automatically parses the response body as JSON.

```JavaScript
// A simple GET request
const { response, body } = await ajax.fetchJson('/api/foo');
// body.foo === 'bar';
```

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

### Basic lion-input-file Component Usage

Source: https://lion.js.org/fundamentals/systems/core/overview/components/input-file/use-cases

An example demonstrating the basic HTML structure and common attributes for the `lion-input-file` component, including `multiple`, `label`, `help-text`, `max-file-size`, `accept`, and `upload-on-select`.

```HTML
<lion-input-file
  multiple
  label="Attachments"
  help-text="Signature scan file"
  max-file-size="1024000"
  accept="application/PDF"
  upload-on-select
>
</lion-input-file>
```

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

### Basic Lion Drawer Web Component Example

Source: https://lion.js.org/fundamentals/systems/core/overview/components/drawer/overview

This snippet demonstrates the basic usage of the `lion-drawer` web component within an HTML context. It illustrates how to define the invoker button, an optional headline, and the main content using dedicated slots. The example also includes basic styling for the demo container and the drawer content.

```JavaScript
export const main = () => html`
  <style>
    ${demoStyle}
  </style>
  <div class="demo-container">
    <lion-drawer>
      <button slot="invoker">
        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
      </button>
      <p slot="headline">Headline</p>
      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
      <button slot="bottom-invoker">
        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
      </button>
    </lion-drawer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
    </div>
  </div>
`;
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/collapsible/overview

Provides the command to install the `@lion/ui` package as a production dependency in a JavaScript project using npm.

```bash
npm i --save @lion/ui
```

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

### Install Lion UI Validation Package

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/form/validate

Installs the `@lion/ui` package using npm, which provides the core validation system and components.

```shell
npm i --save @lion/ui
```

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

### Original Lion Tabs Preview Story Example

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview

A JavaScript preview story block from the original Lion documentation, illustrating the HTML structure of `lion-tabs` with slots for buttons and panels.

```js
export const main = () => html`
  <lion-tabs>
    <button slot="tab">Info</button>
    <p slot="panel">Info page with lots of information about us.</p>
    <button slot="tab">Work</button>
    <p slot="panel">Work page that showcases our work.</p>
  </lion-tabs>
`;
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/icon/overview

Provides the command-line instruction to install the `@lion/ui` package, which contains the `lion-icon` component, as a project dependency using npm.

```Shell
npm i --save @lion/ui
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/calendar/overview

Use this command to install the `@lion/ui` package, which contains the Lion Calendar component, as a dependency in your project using npm.

```bash
npm i --save @lion/ui
```

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

### Create Custom Web Component with OverlayMixin

Source: https://lion.js.org/fundamentals/systems/core/overview/fundamentals/systems/overlays/overview

Demonstrates how to build a custom web component using `OverlayMixin` to integrate overlay functionality. It includes methods for defining overlay configuration, setting up and tearing down open/close listeners, and rendering the component's structure with invoker and content slots.

```JavaScript
import { LitElement, html } from 'lit';
import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';

class MyOverlayComponent extends OverlayMixin(LitElement) {
  _defineOverlayConfig() {
    return {
      ...withModalDialogConfig(),
    };
  }

  _setupOpenCloseListeners() {
    super._setupOpenCloseListeners();
    this.__toggle = () => {
      this.opened = !this.opened;
    };

    if (this._overlayInvokerNode) {
      this._overlayInvokerNode.addEventListener('click', this.__toggle);
    }
  }

  _teardownOpenCloseListeners() {
    super._teardownOpenCloseListeners();

    if (this._overlayInvokerNode) {
      this._overlayInvokerNode.removeEventListener('click', this.__toggle);
    }
  }

  render() {
    return html`
      <slot name="invoker"></slot>
      <div id="overlay-content-node-wrapper">
        <slot name="content"></slot>
      </div>
    `;
  }
}
```

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

### Install Lion UI Package via npm

Source: https://lion.js.org/fundamentals/systems/core/overview/components/tabs/overview

This command installs the `@lion/ui` package, which contains the `lion-tabs` component and other UI components, as a production dependency in your project using npm.

```Shell
npm i --save @lion/ui
```