### Run Example Server (npm)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vanilla/README.md

Starts the development server for the vanilla example project, typically defined by a 'dev' script in its package.json.

```shell
npm run dev
```

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

### Install Dependencies (npm)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vanilla/README.md

Installs the necessary project dependencies listed in the package.json file using npm.

```shell
npm install
```

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

### Install Dependencies with npm (sh)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vue-example/README.md

Installs the project dependencies listed in the package.json file using npm.

```sh
npm install
```

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

### Navigate to Vanilla Example Directory (shell)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vanilla/README.md

Changes the current working directory to the specific folder containing the vanilla JavaScript example.

```shell
cd examples/vanilla
```

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

### Run Development Server with npm (sh)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vue-example/README.md

Starts the development server with hot-reloading enabled, typically using Vite.

```sh
npm run dev
```

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

### Link Flexilla Package in Example (npm)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vanilla/README.md

Links the locally available Flexilla package (created with `npm link` in the package directory) into the node_modules of the vanilla example project.

```shell
npm link @flexilla/flexilla
```

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

### Using Flexilla components (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vite-guide.mdx

Example showing how to import and instantiate Accordion and Tabs components from Flexilla after installing via npm or yarn.

```js
import {Accordion, Tabs} from "@flexilla/flexilla"

const accordion = new Accordion("#my-accordion")

const tabs = new  Tabs("#my-tabs",{ 
    // options
})
```

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

### Basic Flexilla Component Usage (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/astro-guide.mdx

Example demonstrating how to import and instantiate Flexilla components like Accordion and Tabs within a JavaScript script after installing the library via a package manager.

```js
import {Accordion, Tabs} from "@flexilla/flexilla"

const accordion = new Accordion("#my-accordion")

const tabs = new Tabs("#my-tabs",{ 
    // options
})
```

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

### Build Flexilla Package (npm)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vanilla/README.md

Executes the build script defined in the Flexilla package's package.json to compile the source code.

```shell
npm run build
```

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

### Link Flexilla Package Locally (npm/shell)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vanilla/README.md

Navigates into the Flexilla package directory and creates a local npm link, making the package available for local development.

```shell
cd packages/flexilla && npm link
```

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

### Build Project for Production with npm (sh)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vue-example/README.md

Compiles, type-checks, and minifies the project for production deployment.

```sh
npm run build
```

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

### Installing Flexilla via npm (Shell)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vite-guide.mdx

Command to install the Flexilla library as a dependency using npm.

```bash
npm i @flexilla/flexilla
```

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

### Installing Flexilla via yarn (Shell)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vite-guide.mdx

Command to install the Flexilla library as a dependency using yarn.

```bash
yarn add @flexilla/flexilla
```

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

### Example HTML for basic Flexipop usage (HTML)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/overlays/popper.mdx

Provides example HTML markup for the reference and popper elements used in the basic Flexipop setup with position: fixed.

```html
<div data-reference-el></div>
<div data-popper-el>Left-start</div>
```

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

### Lint Project Files with npm (sh)

Source: https://github.com/unoforge/flexilla/blob/main/examples/vue-example/README.md

Runs the configured linter (ESLint) to check code for style and errors.

```sh
npm run lint
```

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

### Creating a New Astro Project (Shell)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/astro-guide.mdx

Command to create a new Astro project using npm and navigate into the project directory as a prerequisite for installing Flexilla.

```bash
npm create astro@latest astro-example
cd astro-example
```

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

### Using Flexilla components from CDN (HTML)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vite-guide.mdx

Example showing how to instantiate Tabs and auto-initialize Accordion components using the Flexilla object imported via CDN.

```html
<script type="module">
  new Flexilla.Tabs("[data-tabs-el]") // [!code ++]
  Flexilla.Accordion.AutoInit(".accordion-el") // [!code ++]
</script>
```

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

### Using Flexilla Components via CDN (Astro/HTML Script)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/astro-guide.mdx

Example demonstrating how to initialize Flexilla components like Tabs and Accordion within an Astro component's script tag after importing the library via CDN.

```html
<script type="module">
  new Flexilla.Tabs("[data-tabs-el]") // [!code ++]
  Flexilla.Accordion.AutoInit(".accordion-el") // [!code ++]
</script>
```

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

### Use Single Flexilla Component via npm

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Shows how to import and instantiate a single Flexilla component (e.g., Collapse) installed via npm. Note: The example code instantiates Accordion despite importing Collapse.

```js
import {Collapse} from "@flexilla/collapse"

new Accordion("#my-collapse",{
    // options
})
```

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

### Installing Flexilla Library (npm/yarn)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/astro-guide.mdx

Commands to install the Flexilla library as a dependency using either the npm or yarn package managers.

```bash
npm i @flexilla/flexilla
```

```bash
yarn add @flexilla/flexilla
```

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

### Full Example of Flexilla AutoResize Setup

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/auto-resize-area.mdx

Provides a complete HTML page structure including the textarea element and the necessary script tag to import and initialize the AutoResize component using JavaScript.

```html
<!-- TextArea Element -->
<textarea id="myTextarea" rows="1" placeholder="Start typing..."></textarea>

<script type="module">
  import { AutoResize } from '@flexilla/autoresize';
  
  // Enable auto-resize functionality on the textarea
  const myTextarea = new AutoResize('#myTextarea');
</script>
```

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

### Installing Flexilla Tooltip Package

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tooltip.mdx

Install the Flexilla Tooltip component using npm or yarn. This package is included if you install the main `@flexilla/flexilla` package.

```bash
npm i @flexilla/tooltip
```

```bash
yarn add @flexilla/tooltip
```

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

### Creating a new Vite project (Shell)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vite-guide.mdx

Command to create a new Vite project using npm and navigate into the project directory.

```bash
npm create vite@latest vite-example -- --template vanilla-ts
cd vite-example
```

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

### Use Full Flexilla Library via npm

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Demonstrates how to import and instantiate components like Accordion and Tabs from the full Flexilla library package installed via npm. Shows basic constructor usage.

```js
import {Accordion, Tabs} from "@flexilla/flexilla"

const accordion = new Accordion("#my-accordion")
const tabs = new  Tabs("#my-tabs",{
    // options
})
```

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

### Installing Flexilla (Bash)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vue-guide.mdx

Commands to install the Flexilla library into your Vue project using either npm or yarn.

```bash
npm i @flexilla/flexilla
```

```bash
yarn add @flexilla/flexilla
```

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

### Installing Flexilla Collapse

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/collapse.mdx

Install the Flexilla Collapse component package using either npm or yarn. This step is only necessary if you are not installing the full Flexilla library.

```bash
npm i @flexilla/collapse
```

```bash
yarn add @flexilla/collapse
```

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

### Install Flexilla Tailwind Plugin

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/tailwind.mdx

Install the @flexilla/tailwind-plugin package as a development dependency using npm or yarn.

```bash
npm i -D @flexilla/tailwind-plugin
```

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

### Install @flexilla/create-overlay

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/overlays/create-overlay.mdx

Installs the `@flexilla/create-overlay` package using either npm or yarn package managers. This package is a utility wrapper for Flexipop.

```bash
npm i @flexilla/create-overlay
```

```bash
yarn add @flexilla/create-overlay
```

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

### Creating New Vue Project (Bash)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vue-guide.mdx

Command to create a new Vue project using npm and navigate into the project directory.

```bash
npm create vue@latest vue-example
cd vue-example
```

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

### Install Project Dependencies (npm)

Source: https://github.com/unoforge/flexilla/blob/main/docs/README.md

Installs all required project dependencies defined in the package.json file.

```Shell
npm install
```

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

### Install Full Flexilla Library via npm

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Installs the complete Flexilla library package using the npm package manager. This command adds the @flexilla/flexilla package as a dependency to your project.

```bash
npm i @flexilla/flexilla
```

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

### Use Flexilla Component with CommonJS Require

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Demonstrates how to import a Flexilla component (e.g., Accordion) using the CommonJS require syntax, typically used in Node.js environments or older build setups.

```js
const Accordion = require('@flexilla/accordion');
new Accordion("#myAccordion")
```

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

### Install Single Flexilla Component via npm

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Installs a specific Flexilla component package (e.g., @flexilla/collapse) using the npm package manager. This is useful if you only need a single component.

```bash
npm i @flexilla/collapse
```

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

### Install Flexipop via npm (bash)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/overlays/popper.mdx

Command to install the Flexipop library using the npm package manager.

```bash
npm i flexipop
```

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

### Install Flexilla Library via npm

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install the main Flexilla library package using npm.

```shell
npm install @flexilla/flexilla
```

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

### Installing @flexilla/dismissible via npm

Source: https://github.com/unoforge/flexilla/blob/main/packages/dismissible/README.md

Installs the @flexilla/dismissible package using the npm package manager.

```shell
npm install @flexilla/dismissible
```

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

### Start Local Development Server (npm)

Source: https://github.com/unoforge/flexilla/blob/main/docs/README.md

Launches the local development server, typically accessible at localhost:4321, for live development and testing.

```Shell
npm run dev
```

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

### Install All Flexilla Components via yarn

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install the complete Flexilla library package using yarn as a project dependency.

```bash
yarn add @flexilla/flexilla
```

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

### Install Flexilla Accordion with npm

Source: https://github.com/unoforge/flexilla/blob/main/packages/accordion/README.md

Use npm to install the @flexilla/accordion package as a project dependency.

```shell
npm install @flexilla/accordion
```

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

### Installing Flexilla AutoResize via npm

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/auto-resize-area.mdx

Command to install the AutoResize component package using npm.

```bash
npm i @flexilla/autoresize
```

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

### Using Flexilla Accordion in Vue (Vue/TypeScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vue-guide.mdx

Example Vue component showing how to import and initialize the Flexilla Accordion component within the onMounted lifecycle hook.

```vue
<script setup lang="ts">
import { onMounted } from 'vue' // [!code ++]
import { Accordion } from "@flexilla/flexilla" // [!code ++]
onMounted(() => { // [!code ++]
    new Accordion("[data-fx-accordion]") // [!code ++]
}) // [!code ++]
</script>
```

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

### Install Flexilla Modal Package

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/modal.mdx

Install the @flexilla/modal package using npm or yarn to add the modal component to your project.

```bash
npm i @flexilla/modal
```

```bash
yarn add @flexilla/modal
```

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

### Initializing Flexilla Tooltip with Custom Options

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tooltip.mdx

Example demonstrating how to initialize the Tooltip component with specific options, such as setting placement to 'top' and defining an `onShow` callback.

```javascript
new Tooltip('#tooltip1', {
  placement: 'top',
  onShow: () => {
    console.log('Tooltip is shown');
  },
  popper: {
    eventEffect: {
      disableOnScroll: true,
      disableOnResize: true
    }
  }
});
```

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

### Installing Flexilla Accordion Package

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Install the Flexilla Accordion package using either npm or yarn. This step can be skipped if the full @flexilla/flexilla package is already installed.

```bash
npm i @flexilla/accordion
```

```bash
yarn add @flexilla/accordion
```

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

### Install Flexilla UnoCSS Preset

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install the Flexilla UnoCSS preset as a dev dependency for easier styling with UnoCSS.

```bash
npm i -D @flexilla/uno-preset
```

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

### Install All Flexilla Components via npm

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install the complete Flexilla library package using npm as a project dependency.

```bash
npm install @flexilla/flexilla
```

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

### Import All Flexilla Components via CDN

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Imports all Flexilla components directly from a CDN using ES Modules in a <script type="module"> tag. This allows using components like Tabs and Accordion without a build step.

```html
<script type="module">
import {
  Tabs,
  Accordion
} from 'https://cdn.jsdelivr.net/npm/@flexilla/flexilla@latest/+esm';

new Tabs("#hego")
new Accordion("#myAccordion")
</script>
```

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

### Installing Flexilla Offcanvas Component

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Install the Flexilla Offcanvas component using either npm or yarn package managers.

```bash
npm i @flexilla/offcanvas
```

```bash
yarn add @flexilla/offcanvas
```

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

### Install Flexilla Accordion with bun

Source: https://github.com/unoforge/flexilla/blob/main/packages/accordion/README.md

Use bun to add the @flexilla/accordion package to your project dependencies.

```shell
bun add @flexilla/accordion
```

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

### Importing Flexilla via CDN (HTML)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/vite-guide.mdx

HTML script tag using type='module' to import the Flexilla library directly from a CDN URL.

```html
<script type="module"> // [!code ++]
  import * as Flexilla from 'https://esm.run/@flexilla/flexilla'; // [!code ++]
</script> // [!code ++]
```

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

### Installing @flexilla/modal Package | Shell

Source: https://github.com/unoforge/flexilla/blob/main/packages/modal/README.md

Command to install the @flexilla/modal package using npm. This is the first step to include the library in your project.

```shell
npm install @flexilla/modal
```

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

### Install Flexilla TailwindCSS Plugin

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install the Flexilla TailwindCSS plugin as a dev dependency for easier styling with TailwindCSS.

```bash
npm i -D @flexilla/tailwind-plugin
```

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

### Install Dropdown Component with npm

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Installs the `@flexilla/dropdown` package using npm. This is the standard way to add the component to your project if you are using npm as your package manager.

```bash
npm i @flexilla/dropdown
```

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

### Auto-Initializing Tabs Using Static autoInit Method

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tabs.mdx

Illustrates the use of the static `autoInit` method to automatically initialize Flexilla Tabs. The first example uses the default `data-fx-tabs` selector, while the second shows how to specify a custom CSS selector.

```js
Tabs.autoInit();
Tabs.autoInit('.custom-tabs-selector');
```

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

### Offcanvas Example with UnoCSS Classes

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Provides a complete HTML example demonstrating an offcanvas trigger and panel using UnoCSS utility classes for styling and positioning.

```html
<button data-offcanvas-trigger data-target="slide-over-from-left"
    aria-controls="slide-over-from-left" class="bg-neutral8 text-white px4 py2 rd-lg text-sm">
    Open from left
</button>
<div data-fx-offcanvas data-slideover-from-left 
    id="slide-over-from-left" aria-labelledby="slide-over-from-left"
    class="fixed h100dvh wfull max-wsm -left-full top-0 fx-open-left-0 z90 ease-linear duration-200 p4 bg-zinc1 dark-bg-zinc9 flex">
    <div class="size-full b b-dashed b-zinc2 dark-b-zinc8">
        <button data-offcanvas-close class="p4">
            Close it
        </button>
    </div>
</div>
```

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

### Example of Flexilla Variant Styling

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/tailwind.mdx

This HTML snippet demonstrates using the simplified fx-open variant provided by the plugin to apply styles based on the data-state=open attribute.

```html
<div class="fx-open:bg-green-500"></div>
```

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

### Install Flexilla UnoCSS Plugin

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/unocss.mdx

Install the @unifydev/flexilla UnoCSS plugin using npm or yarn to add state variants and component styles to your project.

```bash
npm install @unifydev/flexilla
```

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

### Example HTML for absolute Flexipop usage (HTML)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/overlays/popper.mdx

Provides example HTML markup for using Flexipop with position: absolute. It includes a relative-positioned container holding both the reference and popper elements.

```html
<div class="relative-container" style="position: relative;">
  <div data-reference-el></div>
  <div data-popper-el>Absolute popper</div>
</div>
```

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

### Initializing Flexilla Modal with Options

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/modal.mdx

Example of initializing a Flexilla Modal instance with various configuration options, including default state, content animations, custom overlay class, scroll behavior, close prevention, stacked modals, and lifecycle callbacks.

```javascript
import { Modal } from '@flexilla/modal';

const modal = new Modal('#myModal', {
  defaultState: 'close',
  animateContent: {
    enterAnimation: 'fadeIn 0.3s ease',
    exitAnimation: 'fadeOut 0.3s ease',
  },
  overlayClass: 'custom-modal-overlay',
  allowBodyScroll: false,
  preventCloseModal: false,
  enableStackedModals: true,
  onShow() {
    console.log('Modal is shown');
  },
  onHide() {
    console.log('Modal is hidden');
  },
  onToggle({ isHidden }) {
    console.log('Modal toggled. Hidden:', isHidden);
  }
});
```

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

### Complete HTML and JavaScript Usage Example

Source: https://github.com/unoforge/flexilla/blob/main/packages/auto-resize-area/README.md

Demonstrates a full example combining an HTML textarea element with an embedded script block that imports and uses the fAutoResizableTextArea shortcut function to enable auto-resizing.

```html
<textarea placeholder="Enter something here" data-autoresizable class="px-3 py-1.5 wfull rounded-md bg-gray50 border border-gray-200 dark:border-gray-800 focus:outline focus:outline-2 focus:outline-blue-600 dark:focus:outline-blue-500 placeholder:text-gray-400 dark:placeholder:text-gray-600 text-gray-700 dark:text-gray-300 resize-none invalid:outline-red-600 dark:invalid:outline-red-500"></textarea>

<script>
  import { fAutoResizableTextArea } from '@flexilla/auto-resize-area';
  fAutoResizableTextArea('textarea');
</script>
```

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

### Creating Astro Project with Basics Template (sh)

Source: https://github.com/unoforge/flexilla/blob/main/examples/astro-example/README.md

Use this command to initialize a new Astro project in your current directory, specifically utilizing the 'basics' template provided by the Astro CLI via npm.

```sh
npm create astro@latest -- --template basics
```

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

### Install Dismissible Package

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dismissible.mdx

Install the `@flexilla/dismissible` package using npm or yarn. This package provides the functionality to make elements dismissible.

```bash
npm i @flexilla/dismissible
```

```bash
yarn add @flexilla/dismissible
```

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

### Install Flexilla Accordion Package via npm

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install only the Accordion component package from Flexilla using npm.

```shell
npm install @flexilla/accordion
```

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

### Viewing Basic Astro Project Structure (text)

Source: https://github.com/unoforge/flexilla/blob/main/examples/astro-example/README.md

This snippet illustrates the typical file and directory layout generated when using the basic Astro starter kit template, showing the location of public assets, source files (components, layouts, pages), and the package manifest.

```text
/\n├── public/\n│   └── favicon.svg\n├── src/\n│   ├── components/\n│   │   └── Card.astro\n│   ├── layouts/\n│   │   └── Layout.astro\n│   └── pages/\n│       └── index.astro\n└── package.json
```

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

### Install Dropdown Component with yarn

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Adds the `@flexilla/dropdown` package using yarn. Use this command if yarn is your preferred package manager for your project.

```bash
yarn add @flexilla/dropdown
```

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

### Example JavaScript Options Object Structure

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tabs.mdx

Provides an example structure for the JavaScript options object used to configure the Flexilla Tabs component. Shows the `onTabChange` callback property, which is executed when the active tab changes.

```js
const options = {
  onTabChange({ activeTab }) {
    // Action when the tab changes
  },
};
```

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

### Offcanvas Example with Tailwind CSS Classes

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Provides a complete HTML example demonstrating an offcanvas trigger and panel using Tailwind CSS utility classes for styling and positioning.

```html
<button data-offcanvas-trigger data-target="slide-over-from-left"
    aria-controls="slide-over-from-left" class="bg-neutral-800 text-white px-4 py-2 rounded-lg text-sm">
    Open from left
</button>
<div data-fx-offcanvas data-slideover-from-left 
    id="slide-over-from-left" aria-labelledby="slide-over-from-left"
    class="fixed h-[100dvh] w-full max-w-sm -left-full top-0 fx-open-left-0 z-[90] ease-linear duration-200 p-4 bg-zinc-100 dark:bg-zinc-900 flex">
    <div class="size-full border border-dashed border-zinc-200 dark:border-zinc-800">
        <button data-offcanvas-close class="p-4">
            Close it
        </button>
    </div>
</div>
```

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

### Install Single Flexilla Package (Accordion) via npm

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

Command to install a specific Flexilla component package, like the Accordion, using npm.

```shell
npm install @flexilla/accordion
```

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

### Importing Flexilla via CDN (Astro/HTML Script)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/framework-guide/astro-guide.mdx

Code snippet showing how to import the Flexilla library into an Astro component's script tag using a CDN URL for direct browser usage.

```html
<script type="module"> // [!code ++]
  import * as Flexilla from 'https://esm.run/@flexilla/flexilla'; // [!code ++]
</script> // [!code ++]
```

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

### Basic Accordion Usage (HTML & JS)

Source: https://github.com/unoforge/flexilla/blob/main/packages/accordion/README.md

Demonstrates the basic HTML structure required for the accordion component using data attributes and shows how to initialize the Accordion class in JavaScript. Styling is applied using UnoCSS in this example.

```html
<div data-accordion-example data-default-value="accordion-item-2" data-accordion-type="single" class="space-y-2 bg-white rd-md">
    <div data-accordion-item data-accordion-value="accordion-item-1"
    class="rd-md">
        <button data-accordion-trigger aria-label="toggle button"
            class="px4 wfull flex justify-between items-center py2 text-gray8 dark-text-gray2 font-medium text-lg ease-linear hover-bg-gray2/50 dark-hover-bg-gray8/40 rd-md focus:outline-blue6 aria-expanded-text-blue6">
            Is it accessible?
        </button>
        <div aria-hidden="true" data-accordion-content
            class="text-gray7 dark-text-gray3 duration-200 ease-linear overflow-hidden">
            <p class="p4">
            Yes. It adheres to the WAI-ARIA design pattern.
            </p>
        </div>
    </div>
    <div data-accordion-item data-accordion-value="accordion-item-2"
    class="rd-md">
        <button data-accordion-trigger aria-label="toggle button"
            class="px4 wfull flex justify-between items-center py2 text-gray8 dark-text-gray2 font-medium text-lg ease-linear hover-bg-gray2/50 dark-hover-bg-gray8/40 rd-md focus:outline-blue6 aria-expanded-text-blue6">
            Is it unstyled?
        </button>
        <div aria-hidden="true" data-accordion-content
            class="text-gray7 dark-text-gray3 duration-200 ease-linear overflow-hidden">
            <p class="p4">
            Yes. It's unstyled by default, giving you freedom over the look and feel.
            </p>
        </div>
    </div>
    <div data-accordion-item data-accordion-value="accordion-item-3"
    class="rd-md">
        <button data-accordion-trigger aria-label="toggle button"
            class="px4 wfull flex justify-between items-center py2 text-gray8 dark-text-gray2 font-medium text-lg ease-linear hover-bg-gray2/50 dark-hover-bg-gray8/40 rd-md focus:outline-blue6 aria-expanded-text-blue6">
            Can it be animated?
        </button>
        <div aria-hidden="true" data-accordion-content
            class="text-gray7 dark-text-gray3 duration-200 ease-linear h0 overflow-hidden">
            <p class="p4">
            Yes! You can use the transition prop to configure the animation.
            </p>
        </div>
    </div>
</div>
```

```javascript
import { Accordion } from '@flexilla/accordion';
  const accordion = new Accordion("[data-accordion-example]");
```

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

### Install Auto-Resize Area Package

Source: https://github.com/unoforge/flexilla/blob/main/packages/auto-resize-area/README.md

Installs the @flexilla/auto-resize-area package using npm, making it available for use in your project.

```shell
npm install @flexilla/auto-resize-area
```

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

### Example of Original Tailwind State Styling

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/tailwind.mdx

This HTML snippet shows the verbose way to apply styles based on a data-state attribute using standard Tailwind utility classes.

```html
<div class="data-[state=open]:bg-green-500"></div>
```

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

### Import Single Flexilla Component via CDN

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/getting-started/installation.mdx

Imports a specific Flexilla component package (e.g., Tabs) directly from a CDN using ES Modules. The component is imported as a namespace (flexillatabs) and then accessed via that namespace.

```html
<script type="module">
import * as flexillatabs from 'https://cdn.jsdelivr.net/npm/@flexilla/tabs@latest/+esm';
new flexillatabs.Tabs("#tabs")
</script>
```

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

### Initializing Dismissible Component

Source: https://github.com/unoforge/flexilla/blob/main/packages/dismissible/README.md

Demonstrates two ways to initialize the dismissible component in JavaScript: using the `new Dismissible()` constructor or the `fDismissible()` function. Both examples configure the component to remove the element from the DOM and log a message upon dismissal.

```javascript
const dismissible = new Dismissible('.dismissable-element',
        action: "remove-from-dom",
        onDismiss: () => {
            console.log("Element dismissed!");
        });

        // or 
        fDismissible('.dismissable-element',
        action: "remove-from-dom",
        onDismiss: () => {
            console.log("Element dismissed!");
        })
```

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

### Styling Popover Based on Data State (CSS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Provides a CSS example demonstrating how to hide the popover by default and show it when the `data-state` attribute is set to `open`.

```css
.myPopover{
  display : none;
}
.myPopover[data-state=open]{
  display : block;
}
```

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

### Example of Flexilla Peer and Group Variant Usage

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/tailwind.mdx

This HTML snippet shows how to use Flexilla variants with Tailwind's peer- and group- prefixes to style elements based on the state of a sibling (peer) or parent (group).

```html
<div class="group">
    <div class="peer-fx-open:bg-blue-500 group-fx-active:text-white"></div>
</div>
```

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

### HTML Dropdown Trigger Elements

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Examples of HTML elements used as dropdown triggers, showing how to link a trigger to its content using `data-dropdown-id` and how to specify a trigger strategy (`click` or `hover`) using `data-trigger-strategy`.

```html
<button data-dropdown-trigger data-dropdown-id="dropdownClick"> Click to open dropdown </button>
<button data-dropdown-trigger data-dropdown-id="dropdownHover" data-trigger-strategy="hover"> Hover to open dropdown </button>
```

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

### Configuring Flexilla Accordion Options in JavaScript

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Provides an example of the options object structure used to configure the Accordion's behavior, including properties like accordionType, defaultValue, preventClosingAll, and the onChangeItem callback.

```js
const options = {
  accordionType: "multiple", // default is "single"
  defaultValue: "item-3",
  allowTriggerOnFocus: false, // default is false
  preventClosingAll: true, // default is false
  onChangeItem: ({ expandedItem }) => {
    // handle expanded item
  }
};
```

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

### Adding Transitions/Animations to State Styling

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/css.mdx

Provides an example of a modal that uses `data-state='open'` to control its display and applies a CSS animation for a fade-in effect when shown.

```html
<div class="modal" data-state="open">
  <div class="modal-content">
    Modal Content
  </div>
</div>
```

```css
/* Modal container */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal content */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* Show modal when state is open */
[data-state="open"] .modal {
  display: block;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
```

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

### Defining Modal HTML Structure | HTML

Source: https://github.com/unoforge/flexilla/blob/main/packages/modal/README.md

Provides an example of the required HTML structure for the modal and its trigger element. It uses specific data-* attributes (data-modal-target, data-modal-id, data-modal-overlay, data-modal-content, data-close-modal) to link the elements and configure the modal behavior and styling.

```html
<div>
  <button data-modal-target="modal-alert" class="bg-neutral8 text-white px-4 py-2 rounded-lg text-sm">
    Animate On Enter
  </button>
  <div data-modal-test-2 aria-hidden="true" data-modal-id="modal-alert"
    data-modal-overlay="bg-gray8/70 backdrop-filter backdrop-blur-3xl" data-state="close"
    class="hidden justify-center items-start p4 fixed wscreen hscreen top-0 left-0">
    <dialog data-modal-content data-enter-animation="fadeScale .4s linear"
      class="relative bg-white dark-bg-gray950 rd-lg overflow-hidden wfull max-wxl p8 flex flex-col gap-y4 items-center ease-linear transition-all">
      <div class="wmax p3 rd-full bg-red2 text-red6">
        <span flex i-carbon-trash-can text-lg></span>
      </div>
      <h2 class="font-semibold text-xl text-gray9 dark-text-white">
        Confirm your action
      </h2>
      <p class="text-gray7 dark-text-gray3">
        Are you sure you want to delete this event?
      </p>
      <div class="flex justify-center gap-x3 pt4">
        <button data-close-modal
          class="h9 text-sm flex items-center px5 rd-md bg-gray1 dark-bg-gray9 duration-300 hover-!bg-op60 text-gray8 dark-text-gray2">
          No, Cancel
        </button>
        <button class="h9 text-sm flex items-center px5 rd-md bg-red6 duration-200 hover-bg-op80 text-white">
          Yes, Delete
        </button>
      </div>
    </dialog>
  </div>
</div>
```

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

### Defining Offcanvas HTML Structure (UnoCSS & Tailwind)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Provides the necessary HTML structure for Offcanvas components, including trigger buttons and the offcanvas panel itself. Includes examples using both UnoCSS and Tailwind CSS classes.

```html
<button data-offcanvas-trigger data-target="slide-over-overlay" aria-controls="slide-over-overlay" class="bg-neutral8 text-white px4 py2 rd-lg text-sm">
    Overlay
</button>
<div data-offcanvas-withbackdrop id="slide-over-overlay" aria-labelledby="slide-over-overlay" class="fixed h100dvh wfull max-wsm -right-full top-0 fx-open-right-0 ease-linear duration-200 p4 bg-zinc1 dark-bg-zinc9 flex z90">
    <div class="size-full b b-dashed b-zinc2 dark-b-zinc8"></div>
</div>
<button data-offcanvas-trigger data-target="slide-over-overlay1" aria-controls="slide-over-overlay1" class="bg-neutral8 text-white px4 py2 rd-lg text-sm">
    Overlay with blur
</button>
<div data-offcanvas-backdrop-blur id="slide-over-overlay1" aria-labelledby="slide-over-overlay1" class="fixed h100dvh wfull max-wsm -right-full top-0 fx-open-right-0 ease-linear duration-200 p4 bg-zinc1 dark-bg-zinc9 flex z90">
    <div class="size-full b b-dashed b-zinc2 dark-b-zinc8"> </div>
</div>
```

```html
<button data-offcanvas-trigger data-target="slide-over-overlay" aria-controls="slide-over-overlay" class="bg-zinc-800 text-white px-4 py-2 rounded-lg text-sm">
    Overlay
</button>
<div data-offcanvas-withbackdrop  id="slide-over-overlay" aria-labelledby="slide-over-overlay"  class="fixed h-[100dvh] w-full max-w-sm -right-full top-0 fx-open:right-0 ease-linear duration-200 p-4 bg-zinc-100 dark:bg-zinc-900 flex z-90">
    <div class="size-full border border-dashed border-zinc-200 dark:border-zinc-800"></div>
</div>

<button data-offcanvas-trigger data-target="slide-over-overlay1" aria-controls="slide-over-overlay1" class="bg-zinc-800 text-white px-4 py-2 rounded-lg text-sm">Overlay with blur</button>
<div data-offcanvas-backdrop-blur id="slide-over-overlay1" aria-labelledby="slide-over-overlay1" class="fixed h-[100dvh] w-full max-w-sm -right-full top-0 fx-open:right-0 ease-linear duration-200 p-4 bg-zinc-100 dark:bg-zinc-900 flex z-90">
    <div class="size-full border border-dashed border-zinc-200 dark:border-zinc-800"> </div>
</div>
```

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

### Configure Flexilla UnoCSS Plugin (Custom Prefix)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/styling/unocss.mdx

Customize the prefix for state variants by passing an options object to the flexilla plugin in your UnoCSS configuration. This example changes the prefix to 'ui'.

```js
import flexilla from "@unifydev/flexilla";

export default defineConfig({
  presets: [
    flexilla({ prefix: 'ui' }), // now use ui-open:some-class
  ],
});
```

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

### Initializing Offcanvas with OffCanvas.init (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Shows how to initialize Offcanvas instances using the static OffCanvas.init method, demonstrating basic configuration like backdrop classes.

```js
OffCanvas.init("#slide-over-overlay1",{
    backdrop: "ui-overlay bg-gray8/50 flex z80"
})
OffCanvas.init("#slide-over-overlay2",{
    backdrop: "ui-overlay bg-zinc8/20 backdrop-filter backdrop-blur-md flex z80"
})
```

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

### Initializing Popover Using Static Method (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Shows how to initialize a Popover instance using the static `init` method, providing an alternative syntax to the constructor.

```js
Popover.init("#myPopover", {/* options */})
```

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

### Styling Accordion Content with Tailwind/UnoCSS

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Apply necessary utility classes using Tailwind CSS or UnoCSS to the collapsible content element for smooth height transitions. This example uses `overflow-hidden`, `transition-[height]`, `duration-200`, `h-0`, and the `data-[state=open]:h-auto` variant.

```html
<div 
  data-accordion-content 
  class="overflow-hidden transition-[height] duration-200 h-0 data-[state=open]:h-auto"
>
  <!-- Content here -->
</div>
```

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

### Build Production Site (npm)

Source: https://github.com/unoforge/flexilla/blob/main/docs/README.md

Compiles and builds the static production version of the website into the ./dist/ directory.

```Shell
npm run build
```

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

### Use Flexilla Library from CDN

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

HTML script tag demonstrating how to import the entire Flexilla library from a CDN and initialize an Accordion component.

```html
<script type="module">
  import * as flexilla from 'https://cdn.jsdelivr.net/npm/@flexilla/flexilla@latest/+esm';
  new flexilla.Accordion("#ac-el")
</script>
```

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

### Initializing Tabs Using Static init Method

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tabs.mdx

Demonstrates how to use the static `init` method from the `@flexilla/tabs` package to initialize the Tabs component on elements matching the CSS selector `.my-tabs`. An optional options object can be provided for configuration.

```js
import { Tabs } from "@flexilla/tabs";
Tabs.init(".my-tabs", { /* options */ });
```

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

### Initializing Offcanvas with new Offcanvas (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Demonstrates initializing an Offcanvas instance using the new Offcanvas constructor, including various configuration options like staticBackdrop, allowBodyScroll, backdrop, and lifecycle hooks (beforeHide, beforeShow, onShow, onHide).

```js
import { Offcanvas } from '@flexilla/offcanvas';

const offcanvas = new Offcanvas('#myOffcanvas', {
  staticBackdrop: true,
  allowBodyScroll: false,
  backdrop: 'custom-backdrop-class',
  beforeHide() {
    console.log('Before offcanvas hides');
    return { cancelAction: false }; // You can cancel hide by setting cancelAction to true
  },
  beforeShow() {
    console.log('Before offcanvas shows');
  },
  onShow() {
    console.log('Offcanvas is shown');
  },
  onHide() {
    console.log('Offcanvas is hidden');
  }
});
```

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

### Initializing Collapse Component (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/collapse.mdx

Import the Collapse class and create a new instance, passing the selector for the collapse element and an optional options object.

```js
import { Collapse } from '@flexilla/collapse';

const collapse = new Collapse(
  "#collapse1",
  {
    // options here
  }
);
```

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

### Initialize Flexipop with fixed positioning (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/overlays/popper.mdx

Demonstrates the basic usage of Flexipop by creating a new CreatePopper instance for elements with position: fixed. Requires the reference and popper HTML elements and accepts an options object.

```js
import { CreatePopper } from 'flexipop';

new CreatePopper(
  referenceElement,  // The element relative to which the popper will be positioned (HTMLElement)
  popperElement,     // The popper element to be positioned (HTMLElement)
  {
    // options here
  }
);
```

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

### Auto-Initializing All Popovers (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Demonstrates how to import the Popover component and automatically initialize all elements on the page with the `data-fx-popover` attribute using the static `autoInit` method.

```js
import { Popover } from '@flexilla/popover';
Popover.autoInit(); // Initializes all popovers with `data-fx-popover`.
```

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

### Use Single Flexilla Package (Tabs) from CDN

Source: https://github.com/unoforge/flexilla/blob/main/packages/flexilla/README.md

HTML script tag demonstrating how to import a specific Flexilla component package, like Tabs, from a CDN and initialize it.

```html
<script type="module"> 
import * as flexillatabs from 'https://cdn.jsdelivr.net/npm/@flexilla/tabs@latest/+esm'
new  flexillatabs.Tabs("#myTabs")
</script>
```

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

### Setting Popover Placement (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Demonstrates how to initialize a Popover instance and set its placement option using the `placement` property in the configuration object.

```js
new Popover('.popover', { placement: 'bottom' });
```

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

### Manually Dismiss Element (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dismissible.mdx

Get an instance of the `Dismissible` component and call the `dismiss()` method on that instance to programmatically trigger the dismissal process for the associated element.

```js
import { Dismissible } from "@flexilla/dismissible";

const dismissEl = new Dismissible("#dismiss-me");

dismissEl.dismiss();
```

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

### Using the Collapse Component in JavaScript

Source: https://github.com/unoforge/flexilla/blob/main/packages/collapse/README.md

This snippet demonstrates how to create an instance of the Collapse component in JavaScript, configure it with options, and control its visibility using the show, hide, and toggle methods. It requires the Collapse class to be available.

```js
const options = {
  orientation: "vertical",
  defaultState: "close"
};

const collapse = new Collapse(
  '#myCollapseElement',
  options,
  '#myTriggerElement'
);

// Show the collapse element
collapse.show();

// Hide the collapse element
collapse.hide();

// Toggle the collapse element
collapse.toggle();
```

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

### Styling Trigger Based on Aria Expanded (CSS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Illustrates how to use the `aria-expanded` attribute on the popover trigger element in CSS to apply styles, for example, to an indicator icon.

```css
.myPopover-trigger[aria-expanded=true] .icon-indicator{
  /* style here  */
}
```

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

### Initializing Flexilla Accordion with JavaScript

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Demonstrates how to create a new instance of the Accordion component using a CSS selector for the container element and an optional configuration object.

```js
const accordion = new Accordion("#accordion-example", {
  // options here
});
```

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

### Using keyboardNavigation Utility in TypeScript

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/helpers/keyboard-navigation.mdx

This snippet demonstrates how to import and use the `keyboardNavigation` function. It shows how to initialize the utility by providing a container selector, target children selectors, and navigation direction. The function returns an object with `make` and `destroy` methods to enable and disable the navigation respectively.

```typescript
import { keyboardNavigation } from '@flexilla/utilities';

const { make, destroy } = keyboardNavigation({
  containerElement: '#menu',
  targetChildren: 'a, button',
  direction: 'all'
});

// Enable keyboard navigation
make();

// Disable keyboard navigation when no longer needed
destroy();
```

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

### Initializing Flexilla Tooltip in JavaScript

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tooltip.mdx

Import the Tooltip class and create a new instance, passing the selector for the tooltip element and an optional options object. This initializes the tooltip behavior.

```javascript
import { Tooltip } from '@flexilla/tooltip';

const myTooltip = new Tooltip('#tooltip1', {
  /* options here */
});
```

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

### Initializing Flexilla Accordion Statically (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Shows how to use the static Accordion.init method as an alternative way to initialize the component, providing the selector and options directly on the class.

```js
import { Accordion } from "@flexilla/accordion";
Accordion.init(".my-accordion", { /* options */ });
```

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

### Initialize Dropdown Component

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Imports the `Dropdown` class and creates a new instance, targeting an element with the ID `#myDropdown`. This is the basic way to initialize the component with default options.

```js
import { Dropdown } from '@flexilla/dropdown';

const myDropdown = new Dropdown('#myDropdown', { /* options here */ });
```

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

### setShowOptions(/* options */)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tooltip.mdx

Similar to the `show()` method, but allows specifying placement and offset distance via an options object.

```js
myTooltip.setShowOptions({ placement: Placement, offsetDistance: number })
```

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

### Opening Flexilla Modal Programmatically

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/modal.mdx

Shows how to programmatically open a Flexilla Modal instance using the `open()` method.

```javascript
modal.open();
```

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

### Creating Modal Instance | JavaScript

Source: https://github.com/unoforge/flexilla/blob/main/packages/modal/README.md

Creates a new instance of the Modal class. It requires the modal element selector, optional configuration options, and the trigger element selector.

```js
const options = {
  // Specify any desired options here
};

const modal = new Modal('#modalElement', options, '#triggerElement' );
```

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

### Manually Showing Popover (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Shows how to call the `show()` method on an existing Popover instance to programmatically display the popover element.

```js
myPopover.show();
```

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

### Auto Initializing All Collapses (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/collapse.mdx

Use the static `autoInit()` method on the Collapse class to automatically initialize all elements matching a specific selector (defaults to `[data-fx-collapse]`).

```js
import { Collapse } from "@flexilla/collapse";

Collapse.autoInit();  // Initializes collapse components using `data-fx-collapse`
// or
Collapse.autoInit(".collapse-item");
```

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

### Initialize Dropdown with Custom Options

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Creates a new `Dropdown` instance with specific configuration options, demonstrating how to set the trigger strategy, placement, offset, prevent outside close, and define callback functions for show and hide events.

```js
const myDropdown = new Dropdown('#myDropdown', {
  triggerStrategy: 'click',
  placement: 'bottom',
  offsetDistance: 8,
  preventFromCloseOutside: true,
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});
```

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

### Initializing Collapse Component (TypeScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/collapse.mdx

Import the Collapse class and the CollapseOptions type. Create an options object with the correct type and initialize a new Collapse instance, optionally providing a trigger selector.

```ts
import type { CollapseOptions } from "@flexilla/collapse";

const options: CollapseOptions = {
  // options here
};

new Collapse("#collapse1", options);
```

```ts
new Collapse("#collapse1", options, "#collapseTriggerSelector");
```

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

### Manually Showing Collapse (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/collapse.mdx

After initializing a Collapse instance, use the `show()` method to programmatically expand the collapse content.

```js
import { Collapse } from "@flexilla/collapse";

const myCollapse = new Collapse("#collapse1");

myCollapse.show();
```

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

### Auto-Initialize Dismissible Components (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dismissible.mdx

Use the static `autoInit()` method to automatically find and initialize all elements matching a specified selector (defaults to `[data-fx-dismissible]`) as dismissible components.

```js
import { Dismissible } from "@flexilla/dismissible";

Dismissible.autoInit();  // Initializes dismissible components based on `data-fx-dismissible`
// or
Dismissible.autoInit(".dismiss-item");
```

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

### Initializing Flexilla Accordion

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Import the Accordion class and create a new instance, targeting the main accordion container element by its selector. Options can be passed as a second argument.

```js
import { Accordion } from '@flexilla/accordion';
const accordion = new Accordion(
  "#accordion-example",
  {
    // options here
  }
)
```

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

### Programmatically Show Dropdown

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Demonstrates calling the `show()` method on a dropdown instance to manually make the dropdown element visible.

```js
myDropdown.show();
```

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

### Basic Robots.txt Configuration

Source: https://github.com/unoforge/flexilla/blob/main/docs/public/robots.txt

Configures web crawlers to allow access to all paths on the site and specifies the location of the sitemap index file for search engines.

```robots.txt
User-agent: *
Allow: /

Sitemap: https://<YOUR SITE>/sitemap-index.xml
```

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

### Initialize Dismissible with Action and Callback (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dismissible.mdx

Initialize the `Dismissible` component specifying both the action to perform (`hide-from-screen` is the default) and providing a callback function to execute after the element is dismissed.

```js
new Dismissible(
    "#dismiss-me",
    "hide-from-screen",
    () => {
        console.log("Dismissed");
    }
);
```

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

### Auto Initialization of All Dropdowns

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Explains how to automatically initialize all dropdown elements on the page that have the `data-fx-dropdown` attribute by calling the static `autoInit()` method.

```js
Dropdown.autoInit(); // Initializes all dropdowns with \`data-fx-dropdown\`.
```

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

### Static Initialization of Dropdown

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Provides an alternative static method `init()` to initialize a dropdown element using a selector and optional configuration options, instead of using the `new` keyword.

```js
Dropdown.init("#myDropdown", {/* options */})
```

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

### Showing Popover with Custom Options (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/popover.mdx

Explains how to use the `setShowOptions()` method to display the popover while simultaneously updating its placement and offset distance using a configuration object.

```js
myPopover.setShowOptions({ placement: Placement, offsetDistance: number })
```

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

### Auto-Initializing Flexilla Accordions (JavaScript)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/accordion.mdx

Explains and shows how to use the static Accordion.autoInit method to automatically initialize all accordion elements matching a default selector ([data-fx-accordion]) or a specified custom selector.

```js
import { Accordion } from "@flexilla/accordion";

Accordion.autoInit(); // Initializes elements with the selector `data-fx-accordion`

// You can also specify a different selector
Accordion.autoInit(".accordion-item");
```

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

### Show Dropdown with Specific Options

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dropdown.mdx

Illustrates using the `setShowOptions()` method to display the dropdown while simultaneously configuring its placement and offset distance.

```js
myDropdown.setShowOptions({ placement: Placement, offsetDistance: number })
```

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

### Initialize Dismissible Component (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/dismissible.mdx

Import the `Dismissible` class from the package and create a new instance, passing the CSS selector for the target element you want to make dismissible.

```js
import { Dismissible } from '@flexilla/dismissible';
new Dismissible("#dismiss-me");
```

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

### Initializing Flexilla AutoResize with JavaScript

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/auto-resize-area.mdx

Demonstrates how to import and create a new instance of the AutoResize component, targeting a specific textarea element by its selector.

```js
import { AutoResize } from '@flexilla/autoresize';

// Initialize AutoResize on the textarea element
const autoResizingTextarea = new AutoResize('#myTextarea');
```

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

### Configuring Tabs Animation via JavaScript Options

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/tabs.mdx

Initializes the Flexilla Tabs component for elements matching `.yourTabs` and configures the panel show animation using a JavaScript options object. Specifies the `fadeIn` CSS keyframe animation with duration and timing function.

```js
new Tabs('.yourTabs', {
      animationOnShow: "fadeIn .8s cubic-bezier(.48,1.55,.28,1)"
  });
```

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

### Opening Offcanvas Programmatically (JS)

Source: https://github.com/unoforge/flexilla/blob/main/docs/src/content/docs/components/offcanvas.mdx

Shows how to programmatically open an initialized Offcanvas instance by calling its open() method.

```js
offcanvas.open();
```